/* X2O2 Soundify compatibility layer v1.2.1 */

/* Keep X2O2/plugin navigation visually native to Soundify. */
.sidebar_innr .sections li > a,
header .opts_account .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 38px;
    box-sizing: border-box;
}

.sidebar_innr .sections li > a > svg,
header .opts_account .dropdown-menu > li > a > svg,
.x2o2-sf-nav-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: currentColor !important;
}

/* Plugin FontAwesome <i> placeholders are unavailable in Soundify.
   Our JS converts them to inline SVG icons. */
.sidebar_innr .sections li > a > i.fa,
header .opts_account .dropdown-menu > li > a > i.fa {
    width: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 0 !important;
}

/* User Music rows that were text-only in Soundify. */
.sidebar_innr #recently_played_nav > a,
.sidebar_innr #my_playlists_nav > a,
.sidebar_innr #favourites_nav > a {
    gap: 11px !important;
}

/* Album Enhancement metadata labels must not inherit Soundify floating-label rules. */
#tlw-ae-fields .tlw-ae-field > label,
#tlw-ae-fields label,
.tlw-ae-form-section .tlw-ae-field > label {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #e7e7e7 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
}

#tlw-ae-fields .tlw-ae-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

#tlw-ae-fields .tlw-ae-field input,
#tlw-ae-fields .tlw-ae-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Bootstrap-select: make campaign country entries visible in Soundify dark mode. */
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu .inner,
.bootstrap-select .dropdown-menu ul {
    background: #242424 !important;
}

.bootstrap-select .dropdown-menu li,
.bootstrap-select .dropdown-menu .dropdown-item {
    background: transparent !important;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a span.text,
.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu .text {
    color: #f1f1f1 !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.selected > a {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.bootstrap-select .dropdown-menu .bs-searchbox input,
.bootstrap-select .bs-searchbox input.form-control {
    background: #161616 !important;
    color: #fff !important;
    border-color: #424242 !important;
}

.bootstrap-select .bs-actionsbox .btn {
    background: #303030 !important;
    color: #fff !important;
    border-color: #454545 !important;
}

/* X2O2 chat ticks */
.message-status {
    display: block !important;
    text-align: right !important;
    margin-top: 3px !important;
    padding-right: 2px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: .75 !important;
}
.message-checks {
    letter-spacing: -2px !important;
    font-weight: 600 !important;
}

/* Main X2O2 Stations/Stream page */
.x2o2-stations-shell {
    margin-top: 18px;
}
.x2o2-stations-section {
    margin: 0 0 30px;
}
.x2o2-stations-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}
.x2o2-stations-section-head h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
.x2o2-stations-section-head p {
    margin: 0;
    color: #8d8d8d;
    font-size: 12px;
}
.x2o2-world-radio-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}
.x2o2-world-radio-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: #191919;
    min-height: 128px;
}
.x2o2-world-radio-cover {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#3d2a12,#22190d);
    color: #ff8c1a;
}
.x2o2-world-radio-cover svg {
    width: 42px;
    height: 42px;
}
.x2o2-world-radio-body {
    padding: 11px 12px 12px;
}
.x2o2-world-radio-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}
.x2o2-world-radio-play {
    border: 0;
    border-radius: 7px;
    background: var(--main-color, #ff8c1a);
    color: #fff;
    padding: 7px 11px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.x2o2-world-radio-play:hover { filter: brightness(1.08); }
.x2o2-users-streams {
    min-height: 40px;
}

@media (max-width: 1100px) {
    .x2o2-world-radio-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px) {
    .x2o2-world-radio-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
    .x2o2-world-radio-grid { grid-template-columns: 1fr; }
}

/* X2O2 AI Song Generator - Soundify wide desktop presentation */
#container_content:has(#x2o2-asg-page),#container_content:has(.x2o2-asg-page){
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
}
#container_content:has(#x2o2-asg-page) .x2o2-asg-page,#container_content:has(.x2o2-asg-page) .x2o2-asg-page{
    width:calc(100% - 48px) !important;
    max-width:1480px !important;
    margin:28px auto 150px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    --asg-primary:#f98f1d !important;
    --asg-secondary:#d85b16 !important;
    --asg-primary-strong:#ffae55 !important;
    --asg-primary-soft:rgba(249,143,29,.12) !important;
}
#container_content:has(#x2o2-asg-page) .x2o2-asg-hero,#container_content:has(.x2o2-asg-page) .x2o2-asg-hero{
    background:linear-gradient(105deg,#121212 0%,#191919 56%,#241a11 100%) !important;
    border-color:rgba(249,143,29,.22) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.26) !important;
}
#container_content:has(#x2o2-asg-page) .x2o2-asg-hero:after,#container_content:has(.x2o2-asg-page) .x2o2-asg-hero:after{
    background:radial-gradient(circle,rgba(249,143,29,.13) 0%,rgba(249,143,29,0) 68%) !important;
}
#container_content:has(#x2o2-asg-page) .x2o2-asg-grid,#container_content:has(.x2o2-asg-page) .x2o2-asg-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) !important;
    gap:22px !important;
    align-items:start !important;
}
#container_content:has(#x2o2-asg-page) .x2o2-asg-card,#container_content:has(.x2o2-asg-page) .x2o2-asg-card{
    min-width:0 !important;
}
#container_content:has(#x2o2-asg-page) .x2o2-asg-result,#container_content:has(.x2o2-asg-page) .x2o2-asg-result{
    min-height:0 !important;
    height:auto !important;
}
#container_content:has(#x2o2-asg-page) .x2o2-asg-result > .x2o2-asg-generated-section .x2o2-asg-song-list,#container_content:has(.x2o2-asg-page) .x2o2-asg-result > .x2o2-asg-generated-section .x2o2-asg-song-list{
    max-height:560px !important;
    overflow-y:auto !important;
}
@media (min-width:1500px){
  #container_content:has(#x2o2-asg-page) .x2o2-asg-page,#container_content:has(.x2o2-asg-page) .x2o2-asg-page{width:calc(100% - 64px) !important;}
}
@media (max-width:1100px){
  #container_content:has(#x2o2-asg-page) .x2o2-asg-page,#container_content:has(.x2o2-asg-page) .x2o2-asg-page{width:calc(100% - 28px) !important;}
  #container_content:has(#x2o2-asg-page) .x2o2-asg-grid,#container_content:has(.x2o2-asg-page) .x2o2-asg-grid{grid-template-columns:1fr !important;}
}
@media (max-width:700px){
  #container_content:has(#x2o2-asg-page) .x2o2-asg-page,#container_content:has(.x2o2-asg-page) .x2o2-asg-page{width:calc(100% - 18px) !important;margin-bottom:120px !important;}
}

/* X2O2 user-added station cards on the main Stations / Stream page. */
#rb_native_stations{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
    width:100% !important;
    min-width:0 !important;
    align-items:start !important;
}
#rb_native_stations > [class*="col-"]{
    width:100% !important;
    max-width:360px !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    float:none !important;
}
#rb_native_stations .x2o2-profile-station-card{
    width:100% !important;
    max-width:360px !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:hidden !important;
}
#rb_native_stations .x2o2-profile-station-cover{
    width:100% !important;
    max-width:360px !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    max-height:360px !important;
    background-size:cover !important;
    background-position:center !important;
}
#rb_native_stations .x2o2-profile-station-info{min-width:0 !important;}
#rb_native_stations .x2o2-profile-station-info > div:last-child{min-width:0 !important;}
#rb_native_stations .x2o2-profile-station-title,#rb_native_stations .x2o2-profile-station-description{word-break:break-word !important;}
@media(max-width:980px){
  #rb_native_stations{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:640px){
  #rb_native_stations{grid-template-columns:1fr !important;}
  #rb_native_stations > [class*="col-"]{max-width:420px !important;}
  #rb_native_stations .x2o2-profile-station-card,#rb_native_stations .x2o2-profile-station-cover{max-width:420px !important;}
}

/* X2O2 AI Song Generator — final full-width Soundify presentation.
   The generator is intentionally wider than standard content cards so the studio
   uses the desktop page canvas instead of appearing as a centered narrow block. */
#container_content:has(.x2o2-asg-page),
#container_content:has(#x2o2-asg-page){
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
}

#container_content:has(.x2o2-asg-page) .x2o2-asg-page,
#container_content:has(#x2o2-asg-page) .x2o2-asg-page{
    width:100% !important;
    max-width:none !important;
    margin:18px 0 150px !important;
    padding:0 28px !important;
    box-sizing:border-box !important;
}

#container_content:has(.x2o2-asg-page) .x2o2-asg-grid,
#container_content:has(#x2o2-asg-page) .x2o2-asg-grid{
    width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
}

#container_content:has(.x2o2-asg-page) .x2o2-asg-card,
#container_content:has(#x2o2-asg-page) .x2o2-asg-card{
    width:100% !important;
    min-width:0 !important;
}

#container_content:has(.x2o2-asg-page) .x2o2-asg-result,
#container_content:has(#x2o2-asg-page) .x2o2-asg-result{
    width:100% !important;
}

@media (max-width:1280px){
    #container_content:has(.x2o2-asg-page) .x2o2-asg-page,
    #container_content:has(#x2o2-asg-page) .x2o2-asg-page{
        padding-left:20px !important;
        padding-right:20px !important;
    }
    #container_content:has(.x2o2-asg-page) .x2o2-asg-grid,
    #container_content:has(#x2o2-asg-page) .x2o2-asg-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:940px){
    #container_content:has(.x2o2-asg-page) .x2o2-asg-page,
    #container_content:has(#x2o2-asg-page) .x2o2-asg-page{
        padding-left:14px !important;
        padding-right:14px !important;
        margin-bottom:120px !important;
    }
    #container_content:has(.x2o2-asg-page) .x2o2-asg-grid,
    #container_content:has(#x2o2-asg-page) .x2o2-asg-grid{
        grid-template-columns:1fr !important;
    }
}

/* X2O2 AI Song Generator — final page-canvas fit.
   Keeps the fixed Soundify sidebar and bottom player untouched while making
   the generator occupy only the space actually available to main content. */
@media (min-width:1221px){
  .ma_page_content:has(.x2o2-asg-page),
  .ma_page_content:has(#x2o2-asg-page){
    margin-left:280px !important;
    padding-bottom:110px !important;
    box-sizing:border-box !important;
  }
}
@media (min-width:1141px) and (max-width:1220px){
  .ma_page_content:has(.x2o2-asg-page),
  .ma_page_content:has(#x2o2-asg-page){
    margin-left:230px !important;
    padding-bottom:100px !important;
    box-sizing:border-box !important;
  }
}
@media (max-width:1140px){
  .ma_page_content:has(.x2o2-asg-page),
  .ma_page_content:has(#x2o2-asg-page){
    margin-left:0 !important;
    padding-bottom:96px !important;
    box-sizing:border-box !important;
  }
}

#container_content:has(.x2o2-asg-page) .x2o2-asg-page,
#container_content:has(#x2o2-asg-page) .x2o2-asg-page{
  width:100% !important;
  max-width:none !important;
  margin:18px 0 24px !important;
  padding:0 clamp(14px, 1.6vw, 28px) !important;
  box-sizing:border-box !important;
}

#container_content:has(.x2o2-asg-page) .x2o2-asg-grid,
#container_content:has(#x2o2-asg-page) .x2o2-asg-grid{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

#container_content:has(.x2o2-asg-page) .x2o2-asg-card,
#container_content:has(#x2o2-asg-page) .x2o2-asg-card,
#container_content:has(.x2o2-asg-page) .x2o2-asg-result,
#container_content:has(#x2o2-asg-page) .x2o2-asg-result{
  min-width:0 !important;
  max-width:100% !important;
}

/* X2O2 AI Song Generator — fit the actual desktop canvas without touching the fixed sidebar or bottom player. */
@media (min-width:1221px){
  #container_content:has(.x2o2-asg-page),
  #container_content:has(#x2o2-asg-page){
    margin-left:280px !important;
    width:calc(100% - 280px) !important;
    box-sizing:border-box !important;
    padding-bottom:110px !important;
  }
}
@media (min-width:1141px) and (max-width:1220px){
  #container_content:has(.x2o2-asg-page),
  #container_content:has(#x2o2-asg-page){
    margin-left:230px !important;
    width:calc(100% - 230px) !important;
    box-sizing:border-box !important;
    padding-bottom:105px !important;
  }
}
@media (max-width:1140px){
  #container_content:has(.x2o2-asg-page),
  #container_content:has(#x2o2-asg-page){
    margin-left:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding-bottom:100px !important;
  }
}


/* =========================================================
   X2O2 Ember Theme — application-wide visual language v1.0
   Landing page keeps its own presentation. Internal pages use
   charcoal foundations with restrained orange/ember motion.
   ========================================================= */

@keyframes x2o2_ember_drift {
    0% { transform: translate3d(-2%,0,0); }
    50% { transform: translate3d(2%,1.2%,0); }
    100% { transform: translate3d(-2%,0,0); }
}

@keyframes x2o2_wave_slide {
    0% { background-position: 0 0, 0 115px; }
    100% { background-position: -520px 0, 620px 115px; }
}

@keyframes x2o2_ember_pulse {
    0%, 100% { opacity: .34; transform: scale(1); }
    50% { opacity: .52; transform: scale(1.035); }
}

/* Keep the established charcoal app surface while bringing in the
   landing page's orange/ember atmosphere at the edges. */
body:not(.full_page) .music_app {
    background:
        radial-gradient(900px 520px at 84% 4%, rgba(255,126,24,.10), transparent 70%),
        radial-gradient(760px 480px at 10% 72%, rgba(177,66,18,.07), transparent 72%),
        linear-gradient(180deg, #171719 0%, #18191c 58%, #151619 100%);
}

/* Soft moving ember haze. It sits behind the application content. */
body:not(.full_page) .music_app::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(520px 220px at 78% 8%, rgba(255,122,18,.08), transparent 72%),
        radial-gradient(460px 220px at 24% 86%, rgba(255,94,15,.045), transparent 74%);
    animation: x2o2_ember_drift 18s ease-in-out infinite;
}

body:not(.full_page) header {
    z-index: 10;
    background:
        linear-gradient(180deg, rgba(39,39,44,.97), rgba(34,34,37,.97));
    border-bottom: 1px solid rgba(255,140,26,.07);
    box-shadow:
        0 1px 4px rgba(0,0,0,.28),
        0 8px 28px rgba(0,0,0,.10);
}

/* Sidebar gets the same visual language without becoming orange. */
body:not(.full_page) .ma_sidebar {
    background:
        radial-gradient(220px 180px at 50% 0%, rgba(255,133,26,.075), transparent 72%),
        linear-gradient(180deg, #242529 0%, #222328 55%, #1d1e22 100%);
    border-right: 1px solid rgba(255,140,26,.06);
    box-shadow:
        2px 0 20px rgba(0,0,0,.28),
        inset -1px 0 0 rgba(255,255,255,.02);
}

body:not(.full_page) .sidebar .sfy_search .search_cont input {
    background: #0f1012;
    border: 1px solid rgba(255,255,255,.045);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body:not(.full_page) .sidebar .sfy_search .search_cont input:hover {
    border-color: rgba(255,140,26,.15);
}

body:not(.full_page) .sidebar .sfy_search .search_cont input:focus {
    border-color: rgba(255,140,26,.45);
    background: #111214;
    box-shadow: 0 0 0 3px rgba(255,140,26,.07), 0 8px 24px rgba(0,0,0,.20);
}

/* Sidebar navigation: charcoal base, orange active state. */
body:not(.full_page) .sidebar .sidebar_innr .sections li a {
    transition:
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body:not(.full_page) .sidebar .sidebar_innr .sections li a:hover {
    background: linear-gradient(90deg, rgba(255,140,26,.085), rgba(255,140,26,0));
    color: #fff;
}

body:not(.full_page) .sidebar .sidebar_innr .sections li.active a {
    color: #ff9a3d !important;
    background: linear-gradient(90deg, rgba(255,140,26,.145), rgba(255,140,26,.035));
    box-shadow:
        inset 2px 0 0 #ff8c1a,
        0 0 24px rgba(255,140,26,.055);
}

body:not(.full_page) .sidebar .sidebar_innr .sections li.active a svg {
    filter: drop-shadow(0 0 5px rgba(255,140,26,.25));
}

/* Page surfaces remain charcoal, but gain a very low-contrast ember wash. */
body:not(.full_page) .ma_pc_inner {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(900px 420px at 88% 10%, rgba(255,125,20,.042), transparent 76%),
        radial-gradient(720px 360px at 14% 88%, rgba(190,72,18,.028), transparent 78%);
}

/* Two sets of flowing wave lines — subtle enough to stay behind content. */
body:not(.full_page) .ma_pc_inner::before,
body:not(.full_page) .ma_pc_inner::after {
    content: "";
    position: absolute;
    left: -8%;
    width: 116%;
    height: 230px;
    pointer-events: none;
    z-index: -1;
    opacity: .22;
    background-repeat: repeat-x;
    background-size: 1040px 230px, 1260px 230px;
    will-change: background-position;
    animation: x2o2_wave_slide 30s linear infinite;
}

body:not(.full_page) .ma_pc_inner::before {
    top: 10%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1040' height='230' viewBox='0 0 1040 230'%3E%3Cpath d='M0 126 C90 74 170 74 260 126 S430 178 520 126 S690 74 780 126 S950 178 1040 126' fill='none' stroke='%23ff8c1a' stroke-width='1.1' stroke-opacity='.26'/%3E%3Cpath d='M0 146 C90 94 170 94 260 146 S430 198 520 146 S690 94 780 146 S950 198 1040 146' fill='none' stroke='%23b96c43' stroke-width='.8' stroke-opacity='.18'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1260' height='230' viewBox='0 0 1260 230'%3E%3Cpath d='M0 86 C110 42 210 42 320 86 S530 130 640 86 S850 42 960 86 S1170 130 1260 86' fill='none' stroke='%23ff8c1a' stroke-width='.7' stroke-opacity='.18'/%3E%3C/svg%3E");
}

body:not(.full_page) .ma_pc_inner::after {
    top: 56%;
    opacity: .12;
    transform: scaleY(-1);
    animation-duration: 38s;
    animation-direction: reverse;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1040' height='230' viewBox='0 0 1040 230'%3E%3Cpath d='M0 126 C90 74 170 74 260 126 S430 178 520 126 S690 74 780 126 S950 178 1040 126' fill='none' stroke='%23d47b45' stroke-width='.8' stroke-opacity='.22'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1260' height='230' viewBox='0 0 1260 230'%3E%3Cpath d='M0 86 C110 42 210 42 320 86 S530 130 640 86 S850 42 960 86 S1170 130 1260 86' fill='none' stroke='%23ff8c1a' stroke-width='.55' stroke-opacity='.13'/%3E%3C/svg%3E");
}

/* X2O2 internal-page motion/overflow stability patch.
   The landing page keeps its own animations; these rules only affect
   Soundify internal pages where the moving background layers are shared. */
body:not(.full_page) .music_app,
body:not(.full_page) .ma_page_content,
body:not(.full_page) .ma_pc_inner {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    body:not(.full_page) .music_app,
    body:not(.full_page) .ma_page_content,
    body:not(.full_page) .ma_pc_inner {
        overflow-x: hidden;
    }
}

/* These are the slow-moving background layers visible across internal pages.
   Keep their visuals, but remove their horizontal motion so they cannot
   continuously change the document's overflow geometry. */
body:not(.full_page) .music_app::before,
body:not(.full_page) .ma_pc_inner::before,
body:not(.full_page) .ma_pc_inner::after {
    animation: none !important;
    will-change: auto !important;
}

/* Page title / utility areas use small ember highlights. */
body:not(.full_page) .sfy_pg_title .ptitle div {
    box-shadow:
        0 0 0 1px rgba(255,140,26,.10),
        0 0 18px rgba(255,140,26,.12);
}

body:not(.full_page) .sfy_pg_title .ptitle {
    text-shadow: 0 0 22px rgba(255,140,26,.045);
}

body:not(.full_page) .sfy_pg_title > .btn:hover,
body:not(.full_page) .see_all a:hover {
    filter: drop-shadow(0 0 8px rgba(255,140,26,.18));
}

/* Tabs: preserve the existing structure, make the X2O2 accent feel more alive. */
body:not(.full_page) .ma_tabs ul li.active a,
body:not(.full_page) .nav-tabs .nav-item .active.nav-link,
body:not(.full_page) .sfy_home_tabs li.active a {
    text-shadow: 0 0 12px rgba(255,140,26,.10);
}

/* Buttons: orange brand color, stronger hover without changing dimensions. */
body:not(.full_page) .btn-primary,
body:not(.full_page) .x2o2-world-radio-play,
body:not(.full_page) #x2o2-ai-launcher,
body:not(.full_page) .x2o2-ai-form button {
    box-shadow: 0 6px 18px rgba(255,140,26,.12);
    transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

body:not(.full_page) .btn-primary:hover,
body:not(.full_page) .x2o2-world-radio-play:hover,
body:not(.full_page) #x2o2-ai-launcher:hover,
body:not(.full_page) .x2o2-ai-form button:hover {
    box-shadow: 0 10px 26px rgba(255,140,26,.20);
    filter: brightness(1.04);
    transform: translateY(-1px);
}

/* Keep forms dark/neutral; the ember appears only at focus. */
body:not(.full_page) .sfy_mat_input > input:hover,
body:not(.full_page) .sfy_mat_input > textarea:hover,
body:not(.full_page) .sfy_mat_input > select:hover {
    border-color: rgba(255,140,26,.10);
}

body:not(.full_page) .sfy_mat_input > input:focus,
body:not(.full_page) .sfy_mat_input > textarea:focus,
body:not(.full_page) .sfy_mat_input > select:focus {
    box-shadow: 0 0 0 3px rgba(255,140,26,.06);
}

/* Player: a little of the landing-page energy belongs here too. */
body:not(.full_page) .ma_player .player {
    border-top: 1px solid rgba(255,140,26,.08);
    box-shadow: 0 -10px 30px rgba(0,0,0,.20), 0 -2px 24px rgba(255,140,26,.025);
}

body:not(.full_page) .ma_player .progress_container .amplitude-song-played-progress[value]::-webkit-progress-value {
    box-shadow: 0 0 8px rgba(255,140,26,.28);
}

/* Cards / content blocks: a restrained orange edge appears only on hover. */
body:not(.full_page) .content,
body:not(.full_page) .search_songs,
body:not(.full_page) .search_artists,
body:not(.full_page) .search_albums,
body:not(.full_page) .search_playlists,
body:not(.full_page) .x2o2-world-radio-card {
    border: 1px solid rgba(255,255,255,.045);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

body:not(.full_page) .content:hover,
body:not(.full_page) .search_songs:hover,
body:not(.full_page) .search_artists:hover,
body:not(.full_page) .search_albums:hover,
body:not(.full_page) .search_playlists:hover,
body:not(.full_page) .x2o2-world-radio-card:hover {
    border-color: rgba(255,140,26,.13);
    box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 22px rgba(255,140,26,.035);
}

/* Respect reduced-motion accessibility preferences. */
@media (prefers-reduced-motion: reduce) {
    body:not(.full_page) .music_app::before,
    body:not(.full_page) .ma_pc_inner::before,
    body:not(.full_page) .ma_pc_inner::after {
        animation: none !important;
    }
}

@media (max-width: 1140px) {
    body:not(.full_page) .ma_pc_inner::before,
    body:not(.full_page) .ma_pc_inner::after {
        opacity: .13;
    }
}

/* ==========================================================================
   X2O2 TRACK PAGE VISUAL LAYER
   These rules are fully scoped to .x2o2-track-page so other pages are unaffected.
   Loaded globally so AJAX navigation receives the same styling as a hard refresh.
   ========================================================================== */
/*
 * X2O2 Track Page — scoped visual refresh
 * This stylesheet intentionally affects ONLY .x2o2-track-page.
 * Existing track functionality, player logic, wave rendering and actions remain untouched.
 */
.x2o2-track-page{
    --x2o2-orange:#ff7a18;
    --x2o2-orange-soft:rgba(255,122,24,.16);
    --x2o2-rose:rgba(184,91,58,.18);
    --x2o2-bg:#101113;
    --x2o2-card:#191b1f;
    --x2o2-card-2:#1e2025;
    --x2o2-line:rgba(255,255,255,.08);
    --x2o2-text:#f4f5f7;
    --x2o2-muted:rgba(244,245,247,.68);
    position:relative;
    isolation:isolate;
}

.x2o2-track-page::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;
    background:
        radial-gradient(circle at 74% 12%, rgba(255,122,24,.10), transparent 30%),
        radial-gradient(circle at 22% 72%, rgba(174,71,38,.08), transparent 28%),
        linear-gradient(180deg,#0d0e10 0%,#111316 55%,#0d0f11 100%);
}

/* Track hero */
.x2o2-track-page .sfy_song_hdr{
    position:relative;
    overflow:hidden;
    margin-bottom:28px;
    min-height:570px;
    background:var(--x2o2-bg);
    border:1px solid var(--x2o2-line);
    border-radius:20px;
    box-shadow:0 22px 70px rgba(0,0,0,.34);
    isolation:isolate;
}

.x2o2-track-page .sfy_song_hdr::before{
    opacity:.28;
    background-size:cover;
    background-position:center;
    filter:blur(18px) saturate(1.15) brightness(.72);
    transform:scale(1.08);
    animation:x2o2TrackBgDrift 18s ease-in-out infinite alternate;
}

.x2o2-track-page .sfy_song_hdr::after{
    z-index:1;
    backdrop-filter:blur(1px);
    background:
        radial-gradient(circle at 76% 38%, rgba(255,122,24,.25), transparent 27%),
        radial-gradient(circle at 15% 75%, rgba(176,68,35,.13), transparent 32%),
        linear-gradient(90deg,rgba(7,8,10,.96) 0%,rgba(7,8,10,.76) 36%,rgba(7,8,10,.56) 66%,rgba(7,8,10,.88) 100%),
        linear-gradient(180deg,rgba(8,9,10,.04),rgba(8,9,10,.90) 88%);
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_innr{
    position:relative;
    z-index:3;
    min-height:570px;
    align-items:center;
    gap:44px;
    padding:74px 52px 48px;
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_innr::before{
    content:"";
    position:absolute;
    left:4%;
    right:4%;
    top:43%;
    height:170px;
    pointer-events:none;
    opacity:.55;
    background:
        repeating-radial-gradient(ellipse at 50% 100%, transparent 0 20px, rgba(255,122,24,.045) 21px 22px, transparent 23px 42px);
    transform:perspective(700px) rotateX(68deg) translateY(10px);
    animation:x2o2TrackWaves 14s linear infinite;
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_art{
    flex:0 0 300px;
    width:300px;
    min-width:300px;
    height:300px;
    margin-right:0;
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 26px 60px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,122,24,.10),
        0 0 50px rgba(255,122,24,.10);
    transform:translateZ(0);
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_art img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s ease,filter .7s ease;
}

.x2o2-track-page .sfy_song_hdr:hover .sfy_plist_art img{
    transform:scale(1.025);
    filter:saturate(1.05) contrast(1.02);
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_art::after{
    top:auto;
    height:28%;
    bottom:0;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_info{
    position:relative;
    max-width:900px;
    padding-top:10px;
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_info::before{
    content:"X2O2  •  NOW PLAYING";
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:14px;
    padding:7px 11px;
    border:1px solid rgba(255,122,24,.25);
    border-radius:999px;
    background:rgba(15,16,18,.50);
    box-shadow:0 0 22px rgba(255,122,24,.08);
    color:rgba(255,255,255,.72);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
}

.x2o2-track-page .sfy_song_hdr .sfy_plist_info::after{
    content:"";
    position:absolute;
    top:16px;
    left:-12px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--x2o2-orange);
    box-shadow:0 0 12px rgba(255,122,24,.95);
    animation:x2o2TrackPulse 1.8s ease-in-out infinite;
}

.x2o2-track-page .sfy_song_hdr .al_artist,
.x2o2-track-page .sfy_song_hdr .al_artist a{
    color:rgba(255,255,255,.74);
    font-size:14px;
}

.x2o2-track-page .sfy_song_hdr .al_artist a:hover{color:var(--x2o2-orange);}

.x2o2-track-page .sfy_song_hdr .al_name{
    margin:14px 0 16px;
    font-size:clamp(44px,4.4vw,74px);
    line-height:1.02;
    font-weight:700;
    letter-spacing:-1.5px;
    color:var(--x2o2-text);
    text-wrap:balance;
    text-shadow:0 10px 35px rgba(0,0,0,.30);
}

.x2o2-track-page .sfy_song_hdr .sfy_song_desc{
    max-width:900px;
    margin:0;
    color:var(--x2o2-muted);
    font-size:15px;
    line-height:1.72;
}

.x2o2-track-page .sfy_song_hdr .sfy_song_tags{
    margin:16px -4px 0;
}

.x2o2-track-page .sfy_song_hdr .sfy_song_tags a{
    margin:4px;
    padding:6px 10px;
    border:1px solid rgba(255,122,24,.20);
    border-radius:999px;
    background:rgba(255,122,24,.07);
    color:rgba(255,255,255,.82);
    text-decoration:none;
    font-size:12px;
    transition:all .18s ease;
}

.x2o2-track-page .sfy_song_hdr .sfy_song_tags a:hover{
    color:#fff;
    background:rgba(255,122,24,.14);
    border-color:rgba(255,122,24,.38);
    transform:translateY(-1px);
}

/* Actions */
.x2o2-track-page .sfy_song_actns{
    margin:20px -6px 0;
}

.x2o2-track-page .ss_action_item{
    min-width:106px;
    height:40px;
    margin:5px 6px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.065);
    backdrop-filter:blur(12px);
    color:#f4f4f4;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.x2o2-track-page .ss_action_item:hover{
    color:#fff;
    border-color:rgba(255,122,24,.40);
    background:rgba(255,122,24,.14);
    box-shadow:0 8px 24px rgba(255,122,24,.12);
    transform:translateY(-1px);
}

.x2o2-track-page .ss_action_item.btn-success{
    background:linear-gradient(135deg,#ff8d2b,#f46d0b);
    border-color:rgba(255,169,101,.38);
    color:#fff;
}

.x2o2-track-page .ss_action_item.btn-success:hover{background:linear-gradient(135deg,#ff9a43,#ff7814);}

.x2o2-track-page .x2o2-wallet-donate{
    background:rgba(255,122,24,.10);
    border-color:rgba(255,122,24,.28);
}

/* Main waveform / playback stage */
.x2o2-track-page .sfy_song_btmprt{
    position:relative;
    margin-top:0;
    padding:14px 28px 18px;
    border:1px solid var(--x2o2-line);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(28,30,34,.82),rgba(15,17,20,.96));
    box-shadow:0 18px 50px rgba(0,0,0,.26);
}

.x2o2-track-page .sfy_song_btmprt::before{
    content:"";
    position:absolute;
    left:6%;
    right:6%;
    top:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,122,24,.6),rgba(255,160,90,.18),transparent);
}

.x2o2-track-page .ss_track_play_pause{
    width:72px;
    min-width:72px;
    height:92px;
    margin-right:22px;
}

.x2o2-track-page .ss_track_play_pause > .btn{
    width:72px;
    height:72px;
    line-height:72px;
    color:#fff;
    background:linear-gradient(145deg,#ff8d2a,#f4690d);
    box-shadow:0 10px 26px rgba(255,122,24,.28);
}

.x2o2-track-page .ss_track_play_pause > .btn svg{width:32px;height:32px;}

.x2o2-track-page .ss_track_play_pause > span{
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.66);
    border:1px solid rgba(255,255,255,.05);
    border-radius:0 0 12px 12px;
}

.x2o2-track-page #waveform{
    margin:10px 0 4px;
    padding:10px 16px 9px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012)),
        rgba(0,0,0,.06);
    box-shadow:inset 0 0 34px rgba(255,122,24,.045);
}

.x2o2-track-page #waveform::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:9px;
    height:28px;
    opacity:.5;
    pointer-events:none;
    background:linear-gradient(90deg,transparent 0 5%,rgba(255,122,24,.11) 20%,transparent 35%,rgba(255,122,24,.10) 55%,transparent 74%,rgba(255,122,24,.08) 90%,transparent);
    background-size:180% 100%;
    animation:x2o2TrackSweep 7s linear infinite;
}

.x2o2-track-page .sfy_waveforms .images{
    min-height:112px;
}

.x2o2-track-page .sfy_waveforms#waveform #dark-wave{opacity:.25;filter:brightness(.86) saturate(.8);}
.x2o2-track-page .sfy_waveforms .comment-on-wave{bottom:-2px;}

/* Content cards */
.x2o2-track-page .single_song{
    position:relative;
    margin-top:26px;
    padding-bottom:60px;
}

.x2o2-track-page .single_song > .container-fluid{padding-left:0;padding-right:0;}

.x2o2-track-page .single_song > .container-fluid > .row{
    display:grid;
    grid-template-columns:minmax(250px,.82fr) minmax(390px,1.55fr) minmax(280px,.88fr);
    gap:18px;
    margin:0;
}

.x2o2-track-page .single_song > .container-fluid > .row > [class*="col-lg-"]{
    float:none;
    width:auto;
    max-width:none;
    padding:0;
}

.x2o2-track-page .ss_related,
.x2o2-track-page .sidebar_widget{
    position:relative;
    margin-bottom:0;
    padding:18px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(30,32,37,.93),rgba(23,25,29,.96));
    box-shadow:0 12px 35px rgba(0,0,0,.22);
    overflow:hidden;
}

.x2o2-track-page .ss_related::before,
.x2o2-track-page .sidebar_widget::before{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:0;
    height:1px;
    background:linear-gradient(90deg,rgba(255,122,24,.45),transparent 72%);
}

.x2o2-track-page .s_widget_head{
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.25px;
}

.x2o2-track-page .song_lyrics p{
    color:rgba(245,246,248,.78);
    font-size:14px;
    line-height:1.8;
    white-space:pre-wrap;
}

.x2o2-track-page .song_lyrics .s_widget_head{color:#ff9747;}

.x2o2-track-page .ssong_comments .write_comment .comment_input,
.x2o2-track-page .ssong_comments .write_comment .blog_comment_input{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.06);
    color:#eee;
}

.x2o2-track-page .ssong_comments .write_comment .comment_input:focus,
.x2o2-track-page .ssong_comments .write_comment .blog_comment_input:focus{
    border-color:rgba(255,122,24,.35);
    box-shadow:0 0 0 3px rgba(255,122,24,.08);
}

.x2o2-track-page .feed_sidebar_song .track,
.x2o2-track-page .sfy_song_recntPlay > *{
    transition:transform .18s ease,background .18s ease;
}

.x2o2-track-page .feed_sidebar_song .track:hover,
.x2o2-track-page .sfy_song_recntPlay > *:hover{
    transform:translateX(3px);
}

/* Desktop-only atmospheric wave strands */
.x2o2-track-page .single_song::before,
.x2o2-track-page .single_song::after{
    content:"";
    position:absolute;
    left:3%;
    right:3%;
    height:150px;
    pointer-events:none;
    opacity:.22;
    background:
        repeating-radial-gradient(ellipse at 50% 100%, transparent 0 18px, rgba(255,122,24,.055) 19px 20px, transparent 21px 39px);
    transform:perspective(800px) rotateX(70deg);
}

.x2o2-track-page .single_song::before{top:38%;animation:x2o2TrackWaves 16s linear infinite reverse;}
.x2o2-track-page .single_song::after{top:66%;animation:x2o2TrackWaves 21s linear infinite;opacity:.13;}

@keyframes x2o2TrackBgDrift{0%{transform:scale(1.08) translate3d(-1%,0,0);}100%{transform:scale(1.12) translate3d(1%,1%,0);}}
@keyframes x2o2TrackWaves{0%{background-position:0 0;transform:perspective(700px) rotateX(68deg) translate3d(0,10px,0);}100%{background-position:240px 0;transform:perspective(700px) rotateX(68deg) translate3d(36px,7px,0);}}
@keyframes x2o2TrackPulse{0%,100%{opacity:.48;transform:scale(.8);}50%{opacity:1;transform:scale(1.25);}}
@keyframes x2o2TrackSweep{0%{background-position:0 0;}100%{background-position:180% 0;}}

@media (max-width:1200px){
    .x2o2-track-page .sfy_song_hdr .sfy_plist_innr{padding-left:34px;padding-right:34px;gap:30px;}
    .x2o2-track-page .sfy_song_hdr .sfy_plist_art{flex-basis:260px;width:260px;min-width:260px;height:260px;}
    .x2o2-track-page .single_song > .container-fluid > .row{grid-template-columns:minmax(220px,.9fr) minmax(340px,1.4fr) minmax(240px,.85fr);}
}

@media (max-width:992px){
    .x2o2-track-page .sfy_song_hdr{min-height:auto;}
    .x2o2-track-page .sfy_song_hdr .sfy_plist_innr{min-height:auto;align-items:flex-start;}
    .x2o2-track-page .single_song > .container-fluid > .row{grid-template-columns:1fr 1fr;}
    .x2o2-track-page .single_song > .container-fluid > .row > :nth-child(2){grid-column:1 / -1;grid-row:1;}
    .x2o2-track-page .single_song > .container-fluid > .row > :nth-child(1){grid-column:1;grid-row:2;}
    .x2o2-track-page .single_song > .container-fluid > .row > :nth-child(3){grid-column:2;grid-row:2;}
}

@media (max-width:768px){
    .x2o2-track-page .sfy_song_hdr{border-radius:15px;}
    .x2o2-track-page .sfy_song_hdr .sfy_plist_innr{flex-direction:column;align-items:center;text-align:center;padding:52px 20px 28px;gap:24px;}
    .x2o2-track-page .sfy_song_hdr .sfy_plist_art{width:min(78vw,300px);min-width:0;height:min(78vw,300px);flex-basis:auto;margin:0;}
    .x2o2-track-page .sfy_song_hdr .sfy_plist_info{max-width:none;width:100%;padding-top:0;}
    .x2o2-track-page .sfy_song_hdr .sfy_plist_info::after{left:calc(50% - 104px);top:17px;}
    .x2o2-track-page .sfy_song_hdr .al_name{font-size:clamp(38px,10vw,58px);letter-spacing:-1px;}
    .x2o2-track-page .sfy_song_hdr .sfy_song_desc{font-size:14px;line-height:1.7;}
    .x2o2-track-page .sfy_song_actns .ss_actions_innr{justify-content:center;}
    .x2o2-track-page .ss_action_item{min-width:48px;height:44px;padding:0 12px;}
    .x2o2-track-page .ss_action_item:not(.btn-success){font-size:0;width:44px;min-width:44px;padding:0;}
    .x2o2-track-page .ss_action_item svg{margin:0;}
    .x2o2-track-page .sfy_song_btmprt{flex-direction:column;gap:8px;padding:18px 12px 20px;border-radius:15px;}
    .x2o2-track-page .ss_track_play_pause{margin:0;align-self:center;}
    .x2o2-track-page #waveform{width:100%;margin:8px 0 0;padding:12px;}
    .x2o2-track-page .single_song > .container-fluid > .row{grid-template-columns:1fr;}
    .x2o2-track-page .single_song > .container-fluid > .row > [class*="col-lg-"]{grid-column:1 !important;grid-row:auto !important;}
    .x2o2-track-page .single_song{margin-top:18px;}
    .x2o2-track-page .single_song::before,
    .x2o2-track-page .single_song::after{opacity:.10;}
}

@media (prefers-reduced-motion:reduce){
    .x2o2-track-page *,
    .x2o2-track-page::before,
    .x2o2-track-page .sfy_song_hdr::before,
    .x2o2-track-page .sfy_song_hdr .sfy_plist_innr::before,
    .x2o2-track-page .sfy_song_hdr .sfy_plist_info::after,
    .x2o2-track-page #waveform::before,
    .x2o2-track-page .single_song::before,
    .x2o2-track-page .single_song::after{animation:none !important;transition:none !important;}
}



/* X2O2 Track Page v5 — waveform + mobile stability patch
   Scope: track pages only. No player/backend behavior changes. */
.x2o2-track-page .sfy_waveforms .images {
    min-height: 84px;
    height: 84px;
    overflow: hidden;
}

.x2o2-track-page .sfy_waveforms .images > #dark-wave,
.x2o2-track-page .sfy_waveforms .images > #light-wave,
.x2o2-track-page .sfy_waveforms .images > #light-wave img {
    height: 84px;
    max-height: 84px;
}

.x2o2-track-page .sfy_song_btmprt {
    padding-top: 11px;
    padding-bottom: 13px;
}

@media (max-width:768px){
    /* Override Soundify's mobile absolute play-button rule. */
    #container_content .x2o2-track-page .sfy_song_btmprt .ss_track_play_pause {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        width: 72px !important;
        min-width: 72px !important;
        height: 92px !important;
        margin: 0 auto !important;
        align-self: center !important;
        flex: 0 0 92px !important;
        z-index: 20 !important;
    }

    #container_content .x2o2-track-page .sfy_song_btmprt .ss_track_play_pause > .btn {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 72px !important;
        min-width: 72px !important;
        height: 72px !important;
        opacity: 1;
        visibility: visible;
        z-index: 2 !important;
    }

    #container_content .x2o2-track-page .sfy_song_btmprt .ss_track_play_pause > span {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1 !important;
    }

    #container_content .x2o2-track-page .sfy_song_btmprt #waveform {
        width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 9px !important;
    }

    #container_content .x2o2-track-page .sfy_song_btmprt #waveform .images,
    #container_content .x2o2-track-page .sfy_song_btmprt #waveform .images > #dark-wave,
    #container_content .x2o2-track-page .sfy_song_btmprt #waveform .images > #light-wave,
    #container_content .x2o2-track-page .sfy_song_btmprt #waveform .images > #light-wave img {
        height: 84px !important;
        max-height: 84px !important;
        min-height: 84px !important;
    }
}

/* X2O2 user-added stations on /stations: compact modern card presentation. */
#rb_native_stations > .ds_radio_stat_list{
    width:100% !important;
    max-width:420px !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    float:none !important;
}
#rb_native_stations > .ds_radio_stat_list > .content{
    position:relative !important;
    display:grid !important;
    grid-template-columns:104px minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    gap:0 !important;
    min-height:136px !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,rgba(28,28,31,.97),rgba(19,19,21,.97)) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.22) !important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
#rb_native_stations > .ds_radio_stat_list > .content:hover{
    transform:translateY(-2px) !important;
    border-color:rgba(255,145,28,.34) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.30) !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:104px !important;
    height:136px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    text-align:center !important;
    background:linear-gradient(160deg,#2a1d10,#151518) !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art a{
    display:block !important;
    width:100% !important;
    height:100% !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art img{
    display:block !important;
    width:104px !important;
    height:136px !important;
    max-width:none !important;
    object-fit:cover !important;
    border-radius:0 !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art > .btn{
    top:8px !important;
    left:8px !important;
    width:30px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:9px !important;
    background:rgba(12,12,14,.74) !important;
    backdrop-filter:blur(8px) !important;
}
#rb_native_stations .ds_radio_stat_list .track_info{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    min-width:0 !important;
    padding:14px 14px 12px !important;
}
#rb_native_stations .ds_radio_stat_list .track_info h3{
    margin:0 !important;
    font-size:15px !important;
    line-height:20px !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .title,
#rb_native_stations .ds_radio_stat_list .track_info .title a,
#rb_native_stations .ds_radio_stat_list .track_info h3 a{
    color:#fff !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .title a:hover,
#rb_native_stations .ds_radio_stat_list .track_info h3 a:hover{
    color:var(--main-color,#ff8c1a) !important;
}
#rb_native_stations .ds_radio_stat_list .track_info p{
    margin:6px 0 0 !important;
    color:#8f8f95 !important;
    font-size:11px !important;
    line-height:16px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    margin-top:12px !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot .btn{
    width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:10px !important;
    background:#242429 !important;
    color:#d7d7db !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot .btn.btn-primary{
    background:var(--main-color,#ff8c1a) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 5px 16px rgba(255,140,26,.18) !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot .btn:hover{
    transform:translateY(-1px) !important;
    background:#2e2e34 !important;
    color:#fff !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot .btn.btn-primary:hover{
    background:#ff9b38 !important;
}
@media(max-width:980px){
    #rb_native_stations{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:640px){
    #rb_native_stations{grid-template-columns:1fr !important;}
    #rb_native_stations > .ds_radio_stat_list{max-width:520px !important;}
}

/* X2O2 user station cards — final landscape refinement for the native station list. */
#rb_native_stations,
#rb_native_stations > .row,
#rb_native_stations > .row-fluid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,420px)) !important;
  gap:18px !important;
  width:100% !important;
  min-width:0 !important;
  align-items:start !important;
}
#rb_native_stations .ds_radio_stat_list{
  width:100% !important;
  max-width:420px !important;
  min-width:0 !important;
  float:none !important;
  padding:0 !important;
  margin:0 !important;
}
#rb_native_stations .ds_radio_stat_list > .content{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  min-height:142px !important;
  height:142px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(135deg,rgba(27,27,30,.98),rgba(17,17,19,.98)) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.22) !important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
#rb_native_stations .ds_radio_stat_list > .content:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(255,140,26,.34) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.30) !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art{
  position:relative !important;
  flex:0 0 142px !important;
  width:142px !important;
  height:142px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#141416 !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art a{
  display:block !important;
  width:100% !important;
  height:100% !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art img{
  display:block !important;
  width:142px !important;
  height:142px !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
}
#rb_native_stations .ds_radio_stat_list .cover_art > .btn{
  top:9px !important;
  left:9px !important;
  width:30px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9px !important;
  background:rgba(10,10,12,.76) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(8px) !important;
  z-index:2 !important;
}
#rb_native_stations .ds_radio_stat_list .track_info{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding:14px 14px 12px !important;
  background:transparent !important;
}
#rb_native_stations .ds_radio_stat_list .track_info > div:first-child{
  min-width:0 !important;
}
#rb_native_stations .ds_radio_stat_list .track_info h3,
#rb_native_stations .ds_radio_stat_list .track_info h3 a{
  margin:0 !important;
  font-size:15px !important;
  line-height:20px !important;
  font-weight:600 !important;
  color:#fff !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#rb_native_stations .ds_radio_stat_list .track_info p{
  margin:6px 0 0 !important;
  color:#8f8f95 !important;
  font-size:11px !important;
  line-height:16px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot{
  display:flex !important;
  align-items:center !important;
  margin-top:auto !important;
  padding-top:10px !important;
  gap:7px !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot .btn{
  width:38px !important;
  height:38px !important;
  min-height:38px !important;
  min-width:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
  background:#25252a !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#d9d9dc !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot .btn.btn-primary{
  background:var(--main-color,#ff8a18) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(255,138,24,.20) !important;
}
#rb_native_stations .ds_radio_stat_list .track_info .foot .btn.btn-primary:hover{
  background:#ff9b39 !important;
}
@media(max-width:980px){
  #rb_native_stations,
  #rb_native_stations > .row,
  #rb_native_stations > .row-fluid{
    grid-template-columns:minmax(0,420px) !important;
  }
}
@media(max-width:640px){
  #rb_native_stations,
  #rb_native_stations > .row,
  #rb_native_stations > .row-fluid{
    grid-template-columns:1fr !important;
  }
  #rb_native_stations .ds_radio_stat_list{max-width:100% !important;}
  #rb_native_stations .ds_radio_stat_list > .content{height:132px !important;min-height:132px !important;}
  #rb_native_stations .ds_radio_stat_list .cover_art,
  #rb_native_stations .ds_radio_stat_list .cover_art img{width:132px !important;height:132px !important;flex-basis:132px !important;}
}


/* X2O2 global user banner ads */
.x2o2-user-banner-slot{width:100%;margin:0 0 24px;position:relative;z-index:1}
.x2o2-user-banner-slot .sidebar_widget{margin:0!important;padding:0!important;overflow:hidden;border:1px solid rgba(255,143,29,.24);border-radius:18px;background:linear-gradient(135deg,#151619,#0f1013 68%,#17110d);box-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)}
.x2o2-user-banner-slot .s_widget_head{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:11px 16px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.018)!important;color:rgba(255,255,255,.55)!important;font-size:10px!important;font-weight:800!important;letter-spacing:1.5px;text-transform:uppercase}
.x2o2-user-banner-slot .ds_side_adss{display:grid!important;grid-template-columns:minmax(220px,34%) minmax(0,1fr);min-height:190px;margin:0!important;padding:0!important;color:#fff!important;text-decoration:none!important;background:transparent!important;border:0!important}
.x2o2-user-banner-slot .ds_side_adss>div{position:relative;min-height:190px;overflow:hidden;background:#0d0e10}
.x2o2-user-banner-slot .ds_side_adss>div img{width:100%!important;height:100%!important;min-height:190px;display:block;object-fit:cover}
.x2o2-user-banner-slot .ds_side_adss>h3{margin:0!important;padding:28px 28px 7px!important;color:#fff!important;font-size:25px!important;line-height:1.14!important;font-weight:750!important}
.x2o2-user-banner-slot .ds_side_adss>p{margin:0!important;padding:0 28px!important;color:rgba(255,255,255,.58)!important;font-size:13px!important;line-height:1.55!important}
@media(max-width:767px){.x2o2-user-banner-slot .ds_side_adss{grid-template-columns:1fr}.x2o2-user-banner-slot .ds_side_adss>div{min-height:155px}.x2o2-user-banner-slot .ds_side_adss>div img{min-height:155px}.x2o2-user-banner-slot .ds_side_adss>h3{padding:18px 18px 7px!important;font-size:21px!important}.x2o2-user-banner-slot .ds_side_adss>p{padding:0 18px!important;font-size:12px!important}}


/* X2O2 mobile player stability — keep the persistent player attached to the viewport.
   The native player is already fixed; these rules prevent theme/plugin transforms or
   transitions from making it visually follow page scrolling on small viewports. */
@media (max-width: 768px) {
    .ma_player {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
        -webkit-transition: none !important;
        will-change: auto !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 99999 !important;
    }

    .ma_player .player {
        position: relative !important;
        transform: none !important;
        -webkit-transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
        -webkit-transition: none !important;
    }
}