@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
      --r: 10px;

      /* Light mode */
      --page-bg: #eef2ff;
      --text: #0f172a;
      --muted: rgba(15, 23, 42, 0.65);
      --stroke: rgba(15, 23, 42, 0.14);
      --glass: rgba(255,255,255,0.75);
      --glass2: rgba(255,255,255,0.60);

      /* Section backgrounds (light) */
      --sec1: #f7f8fb;
      --sec2: #f7f8fb;
      --sec3: #f7f8fb;
      --sec4: #f7f8fb;
      --sec5: #f7f8fb;

      --shadow: 0 18px 55px rgba(2,6,23,0.12);
      --max: 1240px;
      --gap: 12px;
      --title-meta-gap: 6px;
    }

    /* Default dark mode via OS */
    @media (prefers-color-scheme: dark){
      :root{
        --page-bg: #000000;
        --text: #e7edf2;
        --muted: rgba(231,237,242,0.86);
        --stroke: rgba(207,222,232,0.14);
        --glass: rgba(0,0,0,0.92);
        --glass2: rgba(0,0,0,0.82);

        --sec1: #000000;
        --sec2: #000000;
        --sec3: #000000;
        --sec4: #000000;
        --sec5: #000000;

        --shadow: 0 18px 55px rgba(0,0,0,0.42);
      }
    }

    /* Manual theme override (button toggles this) */
    body.theme-light{
      --page-bg: #eef2ff;
      --text: #0f172a;
      --muted: rgba(15, 23, 42, 0.65);
      --stroke: rgba(15, 23, 42, 0.14);
      --glass: rgba(255,255,255,0.75);
      --glass2: rgba(255,255,255,0.60);

      --sec1: #f7f8fb;
      --sec2: #f7f8fb;
      --sec3: #f7f8fb;
      --sec4: #f7f8fb;
      --sec5: #f7f8fb;

      --shadow: 0 18px 55px rgba(2,6,23,0.12);
    }
    body.theme-dark{
      --page-bg: #000000;
      --text: #e7edf2;
      --muted: rgba(231,237,242,0.86);
      --stroke: rgba(207,222,232,0.14);
      --glass: rgba(0,0,0,0.92);
      --glass2: rgba(0,0,0,0.82);

      --sec1: #000000;
      --sec2: #000000;
      --sec3: #000000;
      --sec4: #000000;
      --sec5: #000000;

      --shadow: 0 18px 55px rgba(0,0,0,0.42);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text);
      background: var(--page-bg);
      overflow-x:hidden;
    }

    /* Helpers */
    .clamp-4{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
      word-break: break-word;
    }
    .clamp-2{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-word;
    }

    /* ✅ Latest Releases title clamp = 3 lines (only) */
    .clamp-3{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      word-break: break-word;
    }

    /* Topbar */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      background: color-mix(in srgb, var(--glass) 65%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
    }
    .topbar-inner{
      max-width: none;
      margin: 0;
      padding: 14px 30px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }

    .brand{ 
      color: inherit;
      text-decoration: none;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .logo{
      width:42px; height:42px;
      border-radius: var(--r);
      background: color-mix(in srgb, var(--glass2) 95%, transparent);
      border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
      box-shadow: 0 12px 26px rgba(0,0,0,0.12);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }
    @media (prefers-color-scheme: dark){
      .logo{ box-shadow: 0 12px 26px rgba(0,0,0,0.25); }
    }

    .brandtext{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .brandtext .name{
      font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
      letter-spacing:0.6px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-size:16px;
    }
    .brandtext .sub{
      font-size:12px;
      color: var(--muted);
      margin-top:3px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .top-actions{ display:flex; gap:10px; align-items:center; }
    .iconbtn{
      width:42px; height:42px;
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      color: var(--text);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: .15s ease;
    }
    .iconbtn:hover{ transform: translateY(-1px); }
    .iconbtn:active{ transform: scale(0.98); }

    /* Page container */
    .container{
      max-width: none;
      margin: 0;
      padding: 0;
    }

    /* Tablet/Desktop sidebar layout */
    .pageWrap{
      max-width: none;
      margin: 0;
      padding: 12px 30px 120px;
    }
    @media (max-width: 859px){
      .pageWrap{ padding: 12px 10px 120px; }
    }
    .sidebar{
      display:none;
      position:sticky;
      top: 78px;
      height: fit-content;
    }
    .leftCard{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 62%, transparent);
      box-shadow: var(--shadow);
      padding: 12px;
    }
    .leftTitle{
      margin: 2px 0 10px;
      font-size: 14px;
      letter-spacing: 0.2px;
    }
    .leftNav{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .leftLink{
      display:flex;
      align-items:center;
      gap:8px;
      padding: 9px 10px;
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      color: var(--text);
      text-decoration:none;
      font-size: 12px;
      transition: .15s ease;
      position: relative;
    }
    .leftLink:hover{ transform: translateY(-1px); }
    .leftLink.active{
      border-color: color-mix(in srgb, var(--stroke) 90%, transparent);
      background: color-mix(in srgb, var(--glass) 80%, transparent);
      box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    }
    .leftIcon{
      width:28px;
      height:28px;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 90%, transparent);
      display:grid;
      place-items:center;
      color: var(--text);
      flex: 0 0 auto;
    }
    .leftLink.active .leftIcon{
      background: color-mix(in srgb, var(--glass) 82%, transparent);
      border-color: color-mix(in srgb, var(--stroke) 85%, transparent);
    }
    .leftLabel{
      font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
      flex:1;
      font-size: 19px;
      line-height: 1.05;
      letter-spacing: 0.2px;
    }

    @media (min-width: 860px){
      .pageWrap{
        display:grid;
        grid-template-columns: 280px 1fr;
        gap: 14px;
        align-items:start;
      }
      .container{
        max-width: none;
        margin: 0;
        padding: 0;
      }
      .sidebar{ display:block; }
    }

    /* Section wrapper */
    .secWrap{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      box-shadow: var(--shadow);
      padding: 14px;
      margin-top: 14px;
    }
    .sec1{ background: var(--sec1); }
    .sec2{ background: var(--sec2); }
    .sec3{ background: var(--sec3); }
    .sec4{ background: var(--sec4); }
    .sec5{ background: var(--sec5); }

    /* Section titles only */
    .sectionTitle{
      font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
      margin: 2px 0 12px;
      font-size: 20px;
      letter-spacing: 0.2px;
    }

    /* Trending Now (horizontal) */
    .topHits{
      display:grid;
      grid-auto-flow: column;
      gap: var(--gap);
      overflow-x:auto;
      padding-top: 10px;
      padding-bottom: 8px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      grid-auto-columns: calc((100% - (2 * var(--gap))) / 3);
    }
    .topHits::-webkit-scrollbar{ height:10px; }
    .topHits::-webkit-scrollbar-thumb{
      background: color-mix(in srgb, var(--stroke) 55%, transparent);
      border-radius: 999px;
      border:3px solid transparent;
      background-clip:content-box;
    }

    .hitCard{
      scroll-snap-align: start;
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 62%, transparent);
      overflow:visible;
      transition: .16s ease;
      min-height: 210px;
      position:relative;
    }
    .hitCard:hover{ transform: translateY(-2px); }
    .hitCover{
      height: 120px;
      background: rgba(0,0,0,0.12);
      position:relative;
      overflow:visible;
      border-radius: var(--r) var(--r) 0 0;
    }
    .hitCover img{
      width:100%; height:100%;
      object-fit:cover;
      display:block;
      filter: saturate(1.05) contrast(1.02);
      border-radius: var(--r) var(--r) 0 0;
    }

    .hitBody{
      padding: 10px 10px 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .textStack{
      display:flex;
      flex-direction:column;
      gap: var(--title-meta-gap);
      min-width:0;
    }
    .title{
      font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
      font-size:12.5px;
      line-height: 1.18;
      margin:0;
    }
    .meta{
      font-size:12px;
      line-height: 1.25;
      color: var(--muted);
      margin:0;
    }

    .pill{
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      padding: 8px 10px;
      font-size: 12px;
      text-align:center;
      cursor:pointer;
      transition: .15s ease;
      user-select:none;
      color: var(--text);
    }
    .pill:hover{ transform: translateY(-1px); }
    .pill:active{ transform: scale(0.98); }
    .genreQuickLinks{
      display:flex;
      flex-wrap:nowrap;
      gap: 8px;
      margin: 0 0 12px;
      overflow-x:auto;
      overflow-y:hidden;
      padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
    }
    .genreQuickLinks::-webkit-scrollbar{ height:8px; }
    .genreQuickLinks::-webkit-scrollbar-thumb{
      background: color-mix(in srgb, var(--stroke) 55%, transparent);
      border-radius: 999px;
    }
    .quickGenreLink{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:30px;
      min-width: 132px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      color: var(--text);
      text-decoration:none;
      font-size:12px;
      line-height:1.1;
      transition:.15s ease;
      gap: 8px;
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
    .quickGenreLabel{
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }
    .quickGenreCount{
      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      color: var(--muted);
      flex: 0 0 auto;
    }
    .quickGenreLink:hover{ transform: translateY(-1px); }
    .quickGenreLink:active{ transform: scale(0.98); }
    .quickGenreLink.type-tracks,
    .quickGenreLink.type-videos,
    .quickGenreLink.type-albums,
    .quickGenreLink.type-blogs{
      border-color: color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      color: var(--text);
    }

    /* Latest Releases */
    .releaseGrid{
      display:grid;
      gap: 12px;
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    @media (min-width: 700px){
      .releaseGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .topHits{ grid-auto-columns: 180px; }
    }
    @media (min-width: 980px){
      .releaseGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .topHits{ grid-auto-columns: 190px; }
    }

    /* ✅ Latest releases row fixed layout so image never changes */
    .row{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 62%, transparent);
      padding: 14px;
      display:flex;
      align-items:flex-start;          /* ✅ prevents stretching */
      justify-content:space-between;
      gap:12px;
      transition: .15s ease;
      height: 100%;
    }
    .row:hover{ transform: translateY(-2px); }
    .row:active{ transform: scale(0.99); }

    .left{
      display:flex;
      align-items:flex-start;          /* ✅ keep image top aligned */
      gap: 12px;
      min-width:0;
      flex: 1;
    }

    /* ✅ image is priority and fixed size ALWAYS */
    .thumb{
      width:100px; height:100px;
      min-width:100px; max-width:100px;
      min-height:100px; max-height:100px;
      flex: 0 0 100px;                 /* cannot shrink */
      border-radius: var(--r);
      overflow:hidden;
      border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: rgba(0,0,0,0.12);
      position:relative;
    }
    .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .thumbTypeIcon{
      position:absolute;
      top:6px;
      right:6px;
      width:26px;
      height:26px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.7);
      background: rgba(17,24,39,.55);
      color:#fff;
      display:grid;
      place-items:center;
      backdrop-filter: blur(3px);
      pointer-events:none;
      box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35);
    }
    .thumbTypeIcon svg{
      width:14px;
      height:14px;
      display:block;
    }
    .theme-light .thumbTypeIcon{
      border-color: rgba(255,255,255,.86);
      background: rgba(0,0,0,.5);
      color: #fff;
    }
    .theme-dark .thumbTypeIcon{
      border-color: rgba(226,232,240,.8);
      background: rgba(15,23,42,.6);
      color: #f8fafc;
    }

    .rowtext{
      min-width:0;
      display:flex;
      flex-direction:column;
      flex:1;
    }

    .rowtopline{
      display:flex;
      align-items:flex-start;
      gap:8px;
      min-width:0;
    }

    /* ✅ Latest releases title = 3 lines, never affects thumb */
    .rowtitle{
      font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
      font-size:16px;
      line-height: 1.22;
      margin: 0;
      min-width: 0;
    }

    .badge{
      font-size: 11px;
      letter-spacing: 0.2px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 90%, transparent);
      color: var(--text);
      white-space:nowrap;
      align-self:flex-start;
    }
    .rowsub{
      font-size:14px;
      color: var(--muted);
      margin-top:8px;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-word;
    }

    .right{ display:flex; align-items:center; gap:10px; flex: 0 0 auto; }
    .duration{ font-size:12px; color: var(--muted); min-width:42px; text-align:right; }
    .cloud{
      width:42px; height:42px;
      border-radius: var(--r);
      border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 90%, transparent);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:.15s ease;
      color: var(--text);
      flex: 0 0 auto;
    }
    .cloud:hover{ transform: translateY(-1px); }
    .cloud:active{ transform: scale(0.98); }

    /* Videos grid */
    .videosGrid{
      display:grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 700px){ .videosGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (min-width: 980px){ .videosGrid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

    .videoCard{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 62%, transparent);
      overflow:hidden;
      transition: .16s ease;
    }
    .videoCard:hover{ transform: translateY(-2px); }
    .videoCover{
      aspect-ratio: 16/10;
      background: rgba(0,0,0,0.12);
      position:relative;
    }
    .videoCover img{ width:100%; height:100%; object-fit:cover; display:block; }
    .archiveTypeIcon{
      position:absolute;
      top:10px;
      right:10px;
      width:36px;
      height:36px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:rgba(9,16,30,.66);
      color:#fff7d1;
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(10px);
      box-shadow:0 10px 20px rgba(0,0,0,.18);
    }
    .archiveTypeIcon svg{ width:18px; height:18px; }
    .playRing{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      pointer-events:none;
    }
    .playRing .ring{
      width:52px; height:52px;
      border-radius: 999px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.22);
      backdrop-filter: blur(10px);
      display:grid;
      place-items:center;
      color: #fff;
    }
    .videoBody{
      padding: 10px 10px 12px;
      display:flex;
      flex-direction:column;
      gap: 7px;
    }
    .videoTitle{
      font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
      font-size:16px;
      line-height: 1.22;
      margin: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
      word-break: break-word;
    }
    .videoMeta{
      font-size:14px;
      line-height: 1.25;
      color: var(--muted);
      margin: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-word;
    }
    .videoArchiveLayout{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items:start;
    }
    .videoArchiveMain{
      min-width:0;
    }
    .videoArchiveSidebar{
      display:grid;
      gap:12px;
      min-width:0;
      align-self:start;
    }
    .trendingVideoList{
      display:grid;
      gap:10px;
    }
    .trendingVideoItem{
      border-radius:var(--r);
      border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      padding:8px;
      display:grid;
      grid-template-columns: 96px 1fr;
      gap:10px;
      align-items:start;
      position:relative;
      overflow:visible;
    }
    .trendingVideoThumb{
      position:relative;
      width:100%;
      height:72px;
    }
    .trendingVideoItem img{
      width:100%;
      height:72px;
      border-radius:8px;
      object-fit:cover;
      display:block;
      border:1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
      background: rgba(0,0,0,0.12);
    }
    .trendingVideoThumb .trendSticker{
      top:-8px;
      right:-8px;
      width:24px;
      height:24px;
      z-index:2;
    }
    .trendingVideoText{
      min-width:0;
      display:grid;
      gap:4px;
      align-content:start;
    }
    .trendingVideoText .itemTitle{
      font-size:14px;
      line-height:1.2;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .trendingVideoText .itemMeta{
      margin:0;
      font-size:12px;
    }
    @media (min-width: 1080px){
      .videoArchiveLayout{
        grid-template-columns: minmax(0, 1fr) 320px;
      }
      .videoArchiveSidebar{
        position:sticky;
        top:86px;
      }
      .videoArchiveMain .videosGrid{
        grid-template-columns: repeat(3, minmax(0,1fr));
      }
    }
    @media (min-width: 1380px){
      .videoArchiveMain .videosGrid{
        grid-template-columns: repeat(4, minmax(0,1fr));
      }
    }
    .albumArchiveLayout{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      align-items:start;
    }
    .albumArchiveMain{
      min-width:0;
    }
    .albumArchiveSidebar{
      display:grid;
      gap:12px;
      min-width:0;
      align-self:start;
    }
    .trendingAlbumList{
      display:grid;
      gap:10px;
    }
    .trendingAlbumItem{
      border-radius:var(--r);
      border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      padding:8px;
      display:grid;
      grid-template-columns: 72px 1fr;
      gap:10px;
      align-items:start;
      overflow:visible;
    }
    .trendingAlbumThumb{
      position:relative;
      width:100%;
      height:72px;
    }
    .trendingAlbumThumb img{
      width:100%;
      height:72px;
      border-radius:8px;
      object-fit:cover;
      display:block;
      border:1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
      background: rgba(0,0,0,0.12);
    }
    .trendingAlbumThumb .trendSticker{
      top:-8px;
      right:-8px;
      width:24px;
      height:24px;
      z-index:2;
    }
    .trendingAlbumText{
      min-width:0;
      display:grid;
      gap:4px;
      align-content:start;
    }
    .trendingAlbumText .itemTitle{
      font-size:14px;
      line-height:1.2;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .trendingAlbumText .itemMeta{
      margin:0;
      font-size:12px;
    }
    @media (min-width: 1080px){
      .albumArchiveLayout{
        grid-template-columns:minmax(0, 1fr) 320px;
      }
      .albumArchiveSidebar{
        position:sticky;
        top:86px;
      }
      .albumArchiveMain .albumsGrid{
        grid-template-columns: repeat(4, minmax(0,1fr));
      }
    }
    @media (min-width: 1380px){
      .albumArchiveMain .albumsGrid{
        grid-template-columns: repeat(5, minmax(0,1fr));
      }
    }
    .musicArchiveLayout{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      align-items:start;
    }
    .musicArchiveMain{
      min-width:0;
    }
    .musicArchiveSidebar{
      display:grid;
      gap:12px;
      min-width:0;
      align-self:start;
    }
    .trendingMusicList{
      display:grid;
      gap:10px;
    }
    .trendingMusicItem{
      border-radius:var(--r);
      border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      padding:8px;
      display:grid;
      grid-template-columns: 96px 1fr;
      gap:10px;
      align-items:start;
      overflow:visible;
    }
    .trendingMusicThumb{
      position:relative;
      width:100%;
      height:72px;
    }
    .trendingMusicThumb img{
      width:100%;
      height:72px;
      border-radius:8px;
      object-fit:cover;
      display:block;
      border:1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
      background: rgba(0,0,0,0.12);
    }
    .trendingMusicThumb .trendSticker{
      top:-8px;
      right:-8px;
      width:24px;
      height:24px;
      z-index:2;
    }
    .trendingMusicText{
      min-width:0;
      display:grid;
      gap:4px;
      align-content:start;
    }
    .trendingMusicText .itemTitle{
      font-size:14px;
      line-height:1.2;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .trendingMusicText .itemMeta{
      margin:0;
      font-size:12px;
    }
    .trendingMetaRow{
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
    }
    .trendingMetaRow .itemMeta{
      margin:0;
      min-width:0;
    }
    .trendingTypeIcon{
      width:18px;
      height:18px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass) 84%, transparent);
      color: var(--text);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }
    .trendingTypeIcon svg{
      width:12px;
      height:12px;
      display:block;
    }
    @media (min-width: 1080px){
      .musicArchiveLayout{
        grid-template-columns:minmax(0, 1fr) 320px;
      }
      .musicArchiveSidebar{
        position:sticky;
        top:86px;
      }
      .musicArchiveMain .videosGrid{
        grid-template-columns: repeat(3, minmax(0,1fr));
      }
    }
    @media (min-width: 1380px){
      .musicArchiveMain .videosGrid{
        grid-template-columns: repeat(4, minmax(0,1fr));
      }
    }

    /* Latest albums grid */
    .albumsGrid{
      display:grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 700px){ .albumsGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (min-width: 980px){ .albumsGrid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }

    .album{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 62%, transparent);
      overflow:hidden;
      transition:.16s ease;
    }
    .album:hover{ transform: translateY(-2px); }
    .albumCover{
      aspect-ratio: 1/1;
      background: rgba(0,0,0,0.12);
    }
    .albumCover img{ width:100%; height:100%; object-fit:cover; display:block; }
    .albumBody{
      padding: 10px 10px 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    /* Pagination */
    .pager{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin-top: 14px;
      flex-wrap:wrap;
    }
    .pagebtn{
      min-width: 44px;
      height: 38px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      color: var(--text);
      cursor:pointer;
      transition:.15s ease;
      font-size:12px;
    }
    .pagebtn:hover{ transform: translateY(-1px); }
    .pagebtn:active{ transform: scale(0.98); }
    .pagebtn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
    .pagebtn.active{
      border-color: color-mix(in srgb, var(--stroke) 95%, transparent);
      background: color-mix(in srgb, var(--glass) 80%, transparent);
    }

    /* Artists section */
    .artistsSlider{
      display:grid;
      grid-template-columns:44px minmax(0,1fr) 44px;
      gap:10px;
      align-items:stretch;
    }
    .artistSliderBtn{
      border-radius:var(--r);
      border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background:color-mix(in srgb, var(--glass2) 92%, transparent);
      color:var(--text);
      cursor:pointer;
      font-size:24px;
      line-height:1;
      display:grid;
      place-items:center;
      transition:.15s ease;
    }
    .artistSliderBtn:hover{ transform: translateY(-1px); }
    .artistSliderBtn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
    .artistsSliderGrid{
      padding:2px;
      border-radius:var(--r);
      border:1px solid color-mix(in srgb, var(--stroke) 60%, transparent);
      background:linear-gradient(145deg, color-mix(in srgb, var(--glass2) 88%, transparent), color-mix(in srgb, var(--glass) 82%, transparent));
    }
    .artistsGrid{
      display:grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 700px){ .artistsGrid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
    @media (min-width: 980px){ .artistsGrid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }

    .artistCard{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 62%, transparent);
      overflow:visible;
      padding: 8px;
      transition:.16s ease;
      cursor:pointer;
      position:relative;
    }
    .artistCard:hover{ transform: translateY(-2px); }
    .artistCardWide{
      border-radius:12px;
      padding:10px;
      background:linear-gradient(165deg, color-mix(in srgb, var(--glass) 88%, transparent), color-mix(in srgb, var(--glass2) 92%, transparent));
      box-shadow:0 14px 24px rgba(0,0,0,.10);
    }
    .artistTop{
      aspect-ratio: 1/1;
      background: rgba(0,0,0,0.12);
      position:relative;
      overflow:visible;
      border-radius: 999px;
      padding: 6px;
      box-sizing: border-box;
      border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
    }
    .artistTop img{ width:100%; height:100%; object-fit:cover; display:block; border-radius: 999px; }
    .artistBody{
      padding: 10px 6px 8px;
      display:flex;
      flex-direction:column;
      gap: 6px;
    }
    .artistName{
      font-size: 13px;
      line-height: 1.2;
      margin:0;
      display:-webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow:hidden;
      word-break: break-word;
    }
    .artistMeta{
      font-size: 12px;
      color: var(--muted);
      margin:0;
      display:-webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow:hidden;
      word-break: break-word;
    }
    @media (max-width: 640px){
      .artistsSlider{
        grid-template-columns:1fr;
      }
      .artistSliderBtn{
        height:38px;
      }
    }
    .trendSticker{
      position:absolute;
      top:-10px;
      right:-10px;
      z-index:12;
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      border-radius:999px;
      letter-spacing:.2px;
      color:#fff;
      background:#ef4444;
      border:1px solid rgba(255,255,255,.3);
      box-shadow:0 10px 24px rgba(239,68,68,.42);
      pointer-events:none;
    }
    .trendSticker.is-rank1{ background:#ef4444; box-shadow:0 10px 24px rgba(239,68,68,.42); }
    .trendSticker.is-rank2{ background:#f97316; box-shadow:0 10px 24px rgba(249,115,22,.42); }
    .trendSticker.is-rank3{ background:#f59e0b; box-shadow:0 10px 24px rgba(245,158,11,.42); }
    .trendSticker.is-rank4{ background:#84cc16; box-shadow:0 10px 24px rgba(132,204,22,.42); }
    .trendSticker.is-rank5{ background:#22c55e; box-shadow:0 10px 24px rgba(34,197,94,.42); }
    .trendSticker.is-rank1::before{ content:"1"; }
    .trendSticker.is-rank2::before{ content:"2"; }
    .trendSticker.is-rank3::before{ content:"3"; }
    .trendSticker.is-rank4::before{ content:"4"; }
    .trendSticker.is-rank5::before{ content:"5"; }
    .trendSticker svg{
      display:none;
    }
    .trendSticker::before{
      content:"1";
      font-size:16px;
      line-height:.9;
      font-weight:800;
      color:#fff;
    }
    .verifiedCheck{
      display:inline-grid;
      place-items:center;
      width:16px;
      height:16px;
      border-radius:999px;
      margin-left:4px;
      font-size:11px;
      line-height:1;
      font-weight:700;
      color:#fff;
      background:#2563eb;
      vertical-align:middle;
    }
    .seeMoreWrap{
      display:flex;
      justify-content:center;
      margin-top: 14px;
    }
    .becomeArtistWrap{
      justify-content:center;
      margin-top:0;
      margin-bottom:12px;
    }
    .becomeArtistBtn{
      min-height:50px;
      padding:0 24px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      border-color:rgba(14,165,233,.62);
      background:linear-gradient(135deg, rgba(6,182,212,.96), rgba(37,99,235,.94));
      color:#effbff;
      box-shadow:0 10px 26px rgba(14,116,215,.34), inset 0 1px 0 rgba(255,255,255,.24);
      animation:becomeArtistPulse 1.9s ease-in-out infinite;
    }
    .becomeArtistBtn:hover{
      box-shadow:0 14px 30px rgba(14,116,215,.44), inset 0 1px 0 rgba(255,255,255,.28);
    }
    @keyframes becomeArtistPulse{
      0%{transform:scale(1);box-shadow:0 10px 26px rgba(14,116,215,.34), inset 0 1px 0 rgba(255,255,255,.24);}
      16%{transform:scale(1.03);box-shadow:0 0 0 0 rgba(56,189,248,.36), 0 12px 30px rgba(14,116,215,.44), inset 0 1px 0 rgba(255,255,255,.24);}
      30%{transform:scale(1);}
      46%{transform:scale(1.02);box-shadow:0 0 0 10px rgba(56,189,248,0), 0 12px 28px rgba(14,116,215,.4), inset 0 1px 0 rgba(255,255,255,.24);}
      60%{transform:scale(1.03);box-shadow:0 0 0 0 rgba(168,85,247,.34), 0 12px 30px rgba(147,51,234,.4), inset 0 1px 0 rgba(255,255,255,.24);}
      76%{transform:scale(1.01);box-shadow:0 0 0 10px rgba(168,85,247,0), 0 12px 28px rgba(147,51,234,.34), inset 0 1px 0 rgba(255,255,255,.24);}
      70%{transform:scale(1);}
      88%{transform:scale(1.02);box-shadow:0 0 0 0 rgba(34,197,94,.34), 0 12px 30px rgba(22,163,74,.4), inset 0 1px 0 rgba(255,255,255,.24);}
      100%{transform:scale(1);}
    }

    /* Footer */
    .footer{
      margin: 18px 0 0;
      padding: 12px 0 0;
      text-align:center;
      color: var(--muted);
      font-size: 12px;
    }
    .footer a{
      color: var(--text);
      text-decoration: none;
      border-bottom: 1px dashed color-mix(in srgb, var(--stroke) 70%, transparent);
      padding-bottom: 1px;
    }
    .footer a:hover{ opacity: .9; }
    .footerLinks{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
      margin-top:8px;
    }

    /* Search overlay (kept) */
    .overlay{
      position:fixed;
      inset:0;
      z-index:200;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(10px);
      display:none;
      align-items:flex-start;
      justify-content:center;
      padding: 18px;
    }
    .overlay.open{ display:flex; }
    .searchbox{
      width:min(100%, 860px);
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 72%, transparent);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .searchTop{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
    }
    .searchTop input{
      flex:1;
      border:none;
      outline:none;
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      color: var(--text);
      border-radius: var(--r);
      padding: 12px 12px;
      font-size:14px;
    }
    .searchResults{
      max-height: 62vh;
      overflow:auto;
      padding: 10px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    /* Menu overlay (kept) */
    .menuOverlay{
      position: fixed;
      inset: 0;
      z-index: 210;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(10px);
      display:none;
      align-items:flex-start;
      justify-content:center;
      padding: 18px;
    }
    .menuOverlay.open{ display:flex; }

    .menuPanel{
      width: min(100%, 900px);
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
      background: color-mix(in srgb, var(--glass) 76%, transparent);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .menuTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
    }
    .menuTitle{
      letter-spacing:0.3px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .menuGrid{
      padding: 14px;
      display:grid;
      gap: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .menuItem{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      padding: 12px;
      cursor:pointer;
      transition: .15s ease;
      display:flex;
      flex-direction:row;
      gap:10px;
      align-items:center;
      min-height: 70px;
      color: var(--text);
    }
    .menuItem:hover{ transform: translateY(-2px); }
    .menuIcon{
      width: 42px;
      height: 42px;
      border-radius: var(--r);
      display:grid;
      place-items:center;
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass) 78%, transparent);
      color: var(--text);
      flex: 0 0 auto;
    }
    .menuText{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width:0;
    }
    .menuLabel{
      font-family: "Outfit", "Arial Narrow", Arial, sans-serif;
      font-size: 14px;
      line-height: 1.2;
      margin:0;
      display:-webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow:hidden;
      word-break: break-word;
    }
    .menuHint{
      font-size: 12px;
      line-height: 1.25;
      color: var(--muted);
      margin:0;
      display:-webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow:hidden;
      word-break: break-word;
    }
    @media (min-width: 700px){ .menuGrid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
    @media (min-width: 980px){ .menuGrid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }

    /* Mobile bottom menu (kept) */
    .bottomnav{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      padding: 12px 15px 14px;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.25));
      backdrop-filter: blur(12px);
    }
    @media (min-width: 860px){
      .bottomnav{ display:none; }
    }
    .navwrap{
      border-radius: var(--r);
      border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
      background: color-mix(in srgb, var(--glass) 55%, transparent);
      display:flex;
      justify-content:space-around;
      padding: 10px 8px;
      gap:6px;
      max-width: 520px;
      margin: 0 auto;
    }
    .navbtn{
      width: 56px;
      height: 44px;
      border-radius: var(--r);
      border: 1px solid transparent;
      background: transparent;
      color: color-mix(in srgb, var(--muted) 75%, var(--text));
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: .15s ease;
    }
    .navbtn.active{
      color: var(--text);
      background: color-mix(in srgb, var(--glass2) 92%, transparent);
      border-color: color-mix(in srgb, var(--stroke) 70%, transparent);
    }
    .navbtn.nav-accent-upload{
      color: #f59e0b;
      border-color: rgba(245, 158, 11, 0.45);
      background: rgba(245, 158, 11, 0.12);
    }
    .navbtn.nav-accent-upload.active{
      color: #111827;
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      border-color: rgba(217, 119, 6, 0.6);
      box-shadow: 0 8px 20px rgba(217, 119, 6, 0.32);
    }
    .theme-dark .navbtn.nav-accent-upload{
      color: #fcd34d;
      background: rgba(245, 158, 11, 0.18);
      border-color: rgba(245, 158, 11, 0.5);
    }
    .theme-dark .navbtn.nav-accent-upload.active{
      color: #111827;
      background: linear-gradient(135deg, #fcd34d, #f59e0b);
    }
    .navbtn:active{ transform: scale(0.98); }

/* Merged from css/frontend-shared.css */
/* Shared frontend layout styles */

:root{
      --r: 10px;
  --page-bg:#eef2ff;
  --text:#0f172a;
  --muted: rgba(15,23,42,.65);
  --stroke: rgba(15,23,42,.14);
  --glass: rgba(255,255,255,.75);
  --glass2: rgba(255,255,255,.60);
  --shadow: 0 18px 55px rgba(2,6,23,.12);
}
body.theme-dark{
  --page-bg:#000000;
  --text:#e7edf2;
  --muted: rgba(231,237,242,.86);
  --stroke: rgba(207,222,232,.14);
  --glass: rgba(0,0,0,.92);
  --glass2: rgba(0,0,0,.82);
  --shadow: 0 18px 55px rgba(0,0,0,.42);
}
.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--glass) 65%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
}
.topbar-inner{
  max-width:none;
  margin:0;
  padding:14px 30px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:10px; min-width:0; }
.logo{
  width:42px; height:42px; border-radius:var(--r);
  background: color-mix(in srgb, var(--glass2) 95%, transparent);
  border:1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  display:grid; place-items:center; flex:0 0 auto;
}
.brandtext{ display:flex; flex-direction:column; min-width:0; }
.brandtext .name{ font-family:"Outfit","Arial Narrow",Arial,sans-serif; font-weight:800; letter-spacing:.6px; line-height:1.1; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brandtext .sub{ font-size:12px; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-actions{ display:flex; align-items:center; gap:10px; }
.iconbtn{
  width:42px; height:42px; border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color:var(--text); display:grid; place-items:center; cursor:pointer;
}
.pageWrap{ max-width:none; margin:0; padding:12px 30px 120px; }
@media (max-width:859px){
  .pageWrap{ padding:12px 10px 120px; }
}
.sidebar{ display:none; position:sticky; top:78px; height:fit-content; }
.leftCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--glass) 62%, transparent);
  box-shadow:var(--shadow);
  padding:12px;
}
.leftTitle{ margin:2px 0 10px; font-size:14px; font-weight:900; }
.leftNav{ display:flex; flex-direction:column; gap:8px; }
.leftLink{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color:var(--text); text-decoration:none; font-size:12px; font-weight:800;
}
.leftLink.active{ border-color: color-mix(in srgb, var(--stroke) 90%, transparent); }
.leftIcon{ width:28px; height:28px; border-radius:8px; border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent); background: color-mix(in srgb, var(--glass2) 90%, transparent); display:grid; place-items:center; }
.leftLabel{ font-family:"Outfit","Arial Narrow",Arial,sans-serif; font-size:19px; line-height:1.05; flex:1; }
@media (min-width:860px){
  .pageWrap{ display:grid; grid-template-columns:280px 1fr; gap:14px; align-items:start; }
  .sidebar{ display:block; }
}
.footer{
  margin-top:14px; border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--glass) 62%, transparent);
  box-shadow:var(--shadow); padding:14px 12px;
}
.footerLinks, .footLinks{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:8px; font-size:12px; }
.footer a, .footLinks a{ color:var(--muted); text-decoration:none; }
.menuOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:180; display:none; align-items:center; justify-content:center; padding:20px; }
.menuOverlay.open{ display:flex; }
.menuPanel{
  width:min(980px, 100%);
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:
    radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--glass2) 78%, transparent), transparent 62%),
    color-mix(in srgb, var(--glass) 72%, transparent);
  padding:16px;
  transition:transform .22s ease, opacity .22s ease;
}
.menuTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.menuTitle{ display:flex; align-items:center; gap:8px; font-weight:800; }
.menuGrid{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.menuItem{
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--glass2) 92%, transparent), color-mix(in srgb, var(--glass) 86%, transparent));
  border-radius:12px;
  padding:8px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  aspect-ratio:1/.92;
  text-align:center;
  cursor:pointer;
  transition:.18s ease;
  box-shadow: 0 12px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08);
  text-decoration:none;
  color:var(--text);
}
.menuItem:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.10); }
.menuText{ min-width:0; }
.menuLabel{
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:15px;
  line-height:1.15;
  letter-spacing:.2px;
}
.menuHint{ display:none; }
.menuIcon{
  width:60px;
  height:60px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass) 82%, transparent);
  display:grid;
  place-items:center;
  color:var(--text);
  flex:0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
@media (min-width:760px){
  .menuGrid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width:980px){
  .menuGrid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  padding:12px 15px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
  backdrop-filter: blur(12px);
}
@media (min-width:860px){
  .bottomnav{ display:none; }
}
.navwrap{ border-radius:var(--r); border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent); background: color-mix(in srgb, var(--glass) 55%, transparent); display:flex; justify-content:space-around; padding:10px 8px; gap:6px; max-width:520px; margin:0 auto; }
.navbtn{ width:56px; height:44px; border-radius:var(--r); border:1px solid transparent; background:transparent; color: color-mix(in srgb, var(--muted) 75%, var(--text)); display:grid; place-items:center; cursor:pointer; }
.navbtn.active{ color:var(--text); background: color-mix(in srgb, var(--glass2) 92%, transparent); border-color: color-mix(in srgb, var(--stroke) 70%, transparent); }
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:85; align-items:flex-start; justify-content:center; padding:20px; }
.overlay.open{ display:flex; }
.searchbox{ width:min(860px,100%); border-radius:var(--r); border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent); background: color-mix(in srgb, var(--glass) 75%, transparent); padding:12px; }
.searchTop{ display:flex; gap:8px; align-items:center; }
/* Keep playlist drawer fixed to the right sitewide */
.overlay.playlistSideOverlay{
  justify-content:flex-end;
  align-items:stretch;
  padding:0;
}
.overlay.playlistSideOverlay .searchbox{
  width:min(430px,100%);
  height:100vh;
  border-radius:0;
  border-left:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  padding:12px;
  overflow:auto;
}
.searchTop input{ flex:1; height:42px; border-radius:var(--r); border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent); background: color-mix(in srgb, var(--glass2) 92%, transparent); color:var(--text); padding:0 12px; }
.searchResults{ margin-top:10px; max-height:65vh; overflow:auto; }
.authWrap{ max-width:560px; margin:0 auto; }
.authCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--glass) 62%, transparent);
  box-shadow:var(--shadow);
  padding:16px;
}
.authTitle{ font-family:"Outfit","Arial Narrow",Arial,sans-serif; font-size:28px; line-height:1.1; margin:0 0 6px; }
.authMeta{ font-size:13px; color:var(--muted); margin:0 0 14px; }
.authForm{ display:grid; gap:12px; }
.authLabel{ display:grid; gap:6px; font-size:12px; color:var(--muted); }
.authInput{
  height:44px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color:var(--text);
  padding:0 12px;
  font-family:"Manrope","Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
}
.authInput::placeholder{ color:var(--muted); }
.authInput:focus{ outline:none; border-color: color-mix(in srgb, var(--text) 25%, var(--stroke)); }
.authGrid{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:700px){ .authGrid{ grid-template-columns:1fr 1fr; } }
.authSubmit{
  height:44px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--glass) 80%, transparent);
  color:var(--text);
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:16px;
  letter-spacing:.2px;
  cursor:pointer;
}
.authAlt{ margin-top:12px; font-size:13px; color:var(--muted); }
.authAlt a{ color:var(--text); text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--stroke) 70%, transparent); }
.artistBalanceBar{
  margin: 0 0 12px;
  border-radius: var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--glass) 94%, transparent), color-mix(in srgb, var(--glass2) 86%, transparent));
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  box-shadow: 0 14px 34px rgba(8, 15, 28, 0.16);
}
.artistBalanceInfo{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}
.artistBalanceActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.artistBalanceLabel{
  margin:0;
  font-size:12px;
  color:var(--muted);
}
.artistBalanceValue{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:20px;
  letter-spacing:.01em;
  line-height:1;
}
.artistBalanceBtn{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass) 92%, transparent);
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-ui);
  font-size:13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.artistBalanceBtn.primary{
  background:linear-gradient(180deg, #f6d26b, #dda92a);
  border-color:#c89421;
  color:#332100;
  box-shadow: 0 12px 22px rgba(221, 169, 42, 0.28);
}
.artistBalanceBtn.secondary{
  background:linear-gradient(180deg, #d5e8ff, #aecdff);
  border-color:#78a7ea;
  color:#102544;
  box-shadow: 0 12px 22px rgba(120, 167, 234, 0.22);
}
.artistBalanceBtn:hover{
  transform:translateY(-1px);
}
.artistBalanceBtn:active{
  transform:scale(0.98);
}
.artistUploadCreditBar{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(245, 158, 11, 0.28);
  background:linear-gradient(135deg, rgba(255,247,214,.96), rgba(255,236,179,.92));
  color:#4a3211;
}
.artistUploadCreditBar.hasCredits{
  animation:artistUploadCreditPulse 1.9s ease-in-out infinite;
}
.artistUploadCreditLabel{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8a5b12;
}
.artistUploadCreditValue{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:22px;
  line-height:1;
  color:#7c3b00;
}
.artistUploadCreditMeta{
  margin-left:auto;
  font-size:12px;
  color:#7c5a1d;
}
@keyframes artistUploadCreditPulse{
  0%{box-shadow:0 0 0 0 rgba(245,158,11,.28), 0 10px 24px rgba(245,158,11,.14);}
  50%{box-shadow:0 0 0 8px rgba(245,158,11,0), 0 14px 28px rgba(245,158,11,.2);}
  100%{box-shadow:0 0 0 0 rgba(245,158,11,0), 0 10px 24px rgba(245,158,11,.14);}
}
@media (max-width:620px){
  .artistBalanceBar{
    padding:9px 10px;
  }
  .artistBalanceInfo{
    width:100%;
  }
  .artistBalanceActions{
    width:100%;
  }
  .artistBalanceBtn{
    flex:1 1 0;
  }
  .artistUploadCreditBar{
    flex-wrap:wrap;
  }
  .artistUploadCreditMeta{
    margin-left:0;
    width:100%;
  }
}
.artistBonusNotice{
  margin:0 0 12px;
  background:#ffffff;
  border:1px solid #d8e2ef;
}
.artistBonusHeader{
  display:grid;
  gap:4px;
  margin-bottom:10px;
}
.artistBonusGrid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(1, minmax(0, 1fr));
}
.artistBonusGrid.compact{
  gap:8px;
}
@media (min-width:760px){
  .artistBonusGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .artistBonusGrid.compact{
    grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  }
}
.artistBonusCard{
  border-radius:14px;
  padding:12px;
  border:1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.artistBonusCard .itemTitle{
  margin-bottom:6px;
  font-size:18px;
  line-height:1.15;
}
.artistBonusCard .itemMeta{
  margin:0;
  font-size:14px;
  line-height:1.45;
}
.artistBonusCard.bonus-new{
  background:#fff2b3;
  border-color:#f2c94c;
  color:#4a2f00;
}
.artistBonusCard.bonus-referral{
  background:#cfe8ff;
  border-color:#4a90e2;
  color:#032347;
}
.artistBonusCard.bonus-deposit{
  background:#d9f8dc;
  border-color:#2f9e44;
  color:#0f3b16;
}
.artistBonusCard.bonus-featured{
  padding:14px;
  box-shadow: 0 14px 28px rgba(47, 158, 68, 0.14);
}
.artistBonusBadge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-top:10px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(15,59,22,.18);
  background:rgba(255,255,255,.36);
  font-size:12px;
  font-weight:700;
  color:#0f3b16;
}
.artistBonusMiniRow{
  display:grid;
  gap:8px;
}
.artistBonusMini{
  border-radius:14px;
  border:1px solid #d8e2ef;
  background:linear-gradient(180deg, #ffffff, #f4f7fb);
  padding:12px;
}
.artistBonusMini .itemTitle{
  font-size:15px;
  margin-bottom:4px;
}
.artistBonusMini .itemMeta{
  font-size:13px;
  margin:0;
}
.depositPage .artistBalanceBar{
  margin-bottom:14px;
  border-color:#d7b24a;
  background:linear-gradient(145deg, #fff7da, #fff0bd);
  box-shadow: 0 18px 34px rgba(221, 169, 42, 0.18);
}
.depositPage .artistBalanceLabel{
  color:#7b6321;
}
.depositPage .artistBalanceValue{
  color:#201600;
}
.depositPrimarySubmit{
  width:100%;
  min-height:50px;
  font-size:16px;
  background:linear-gradient(180deg, #f7d977, #ddab33);
  border-color:#c99628;
  color:#2d1d00;
  box-shadow: 0 16px 28px rgba(221, 171, 51, 0.26);
}
.depositPage .artistBonusNotice{
  background:linear-gradient(180deg, #ffffff, #f9fbfd);
}
.financeHeroStrip{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(1, minmax(0, 1fr));
}
@media (min-width:760px){
  .financeHeroStrip{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
.financeInfoCard{
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  padding:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.financeMetric{
  margin:6px 0 0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:24px;
  line-height:1;
}
.financePrimaryBtn{
  width:100%;
  min-height:50px;
  font-size:16px;
  background:linear-gradient(180deg, #f7d977, #ddab33);
  border-color:#c99628;
  color:#2d1d00;
  box-shadow: 0 16px 28px rgba(221, 171, 51, 0.26);
}
.uploadFinancePage .artistBalanceBar,
.promotionsFinancePage .artistBalanceBar{
  border-color:#d7b24a;
  background:linear-gradient(145deg, #fff7da, #fff0bd);
  box-shadow: 0 18px 34px rgba(221, 169, 42, 0.18);
}
.uploadFinancePage .artistBalanceLabel,
.promotionsFinancePage .artistBalanceLabel{
  color:#7b6321;
}
.uploadFinancePage .artistBalanceValue,
.promotionsFinancePage .artistBalanceValue{
  color:#201600;
}
.artistEditorModal{
  width:min(960px, 100%);
  max-height:min(92vh, 980px);
  overflow:auto;
}
.artistEditorHero{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:760px){
  .artistEditorHero{
    grid-template-columns:220px minmax(0,1fr);
  }
}
.artistEditorPhoto{
  width:100%;
  min-height:220px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 90%, transparent), color-mix(in srgb, var(--glass2) 95%, transparent));
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--muted);
  text-align:center;
  padding:12px;
}
.artistEditorPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:14px;
}
.artistEditorHeroBody{
  display:grid;
  gap:8px;
  align-content:start;
}
.artistEditorPageCard{
  scroll-margin-top: 18px;
}
.artistEditorPageHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.artistEditorSummaryChips,
.artistStatStrip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.artistCurrentDataGrid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0, 1fr));
  gap:10px;
}
@media (min-width:640px){
  .artistCurrentDataGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.artistCurrentDataCard{
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 82%, transparent), color-mix(in srgb, var(--glass2) 96%, transparent));
  padding:12px 14px;
  display:grid;
  gap:4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.artistCurrentLabel{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.artistCurrentDataCard strong{
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:15px;
  color:var(--text);
}
.actionIconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-direction:row;
}
.iconOnlyBtn{
  width:44px;
  min-width:44px;
  padding:0;
  gap:0;
}
.iconOnlyBtn span:not(.btnIconWrap){
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btnIconWrap{
  width:16px;
  height:16px;
  display:inline-grid;
  place-items:center;
  flex:0 0 16px;
}
.btnIconWrap svg{
  width:16px;
  height:16px;
}
.artistEditorActions{
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}
.artistRosterList{
  display:grid;
  gap:12px;
}
.artistRosterCard{
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--stroke) 74%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 88%, transparent), color-mix(in srgb, var(--glass2) 96%, transparent));
  padding:12px;
  display:grid;
  grid-template-columns:72px minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  box-shadow:0 18px 36px rgba(8, 15, 28, 0.12);
}
.artistRosterMedia{
  width:72px;
  height:72px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  display:grid;
  place-items:center;
}
.artistRosterImage{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.artistRosterInitials{
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:22px;
  letter-spacing:.08em;
  color:var(--text);
}
.artistRosterContent{
  min-width:0;
  display:grid;
  gap:4px;
}
.artistRosterContent .itemMeta{
  margin:0;
}
.artistRosterActions{
  display:flex;
  align-items:center;
  gap:8px;
}
.releaseEditLayout{
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);
}
.releaseArtistSplit{
  grid-template-columns:1fr 1fr;
}
.releaseEditActions{
  flex-wrap:wrap;
}
@media (max-width:860px){
  .releaseEditLayout{
    grid-template-columns:1fr;
  }
  .releaseArtistSplit{
    grid-template-columns:1fr;
  }
  .releaseEditActions > *{
    width:100%;
    justify-content:center;
  }
}
@media (max-width:700px){
  .artistRosterCard{
    grid-template-columns:72px minmax(0, 1fr);
  }
  .artistRosterActions{
    grid-column:1 / -1;
    justify-content:flex-end;
  }
}
.dashboardActionFooter .actionIconBtn,
.dashboardActionFooter .iconOnlyBtn{
  flex-direction:row;
}
.proofPreview{
  margin-top:8px;
  width:100%;
  max-width:280px;
  min-height:140px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 90%, transparent);
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
}
.proofPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Enhanced auth experience */
.authPage .authWrap{ max-width:1080px; }
.authPage .authWrap.authSingle{ max-width:720px; }
.authSplit{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.authPage .authWrap.authSingle .authSplit{ grid-template-columns:1fr; }
@media (min-width:980px){
  .authSplit{ grid-template-columns: minmax(260px, .95fr) minmax(420px, 1.2fr); }
  .authPage .authWrap.authSingle .authSplit{ grid-template-columns:1fr; }
}
.authPage .authWrap.authSignupWide{
  max-width:none;
  width:100%;
}
.authSignupLayout{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:start;
}
.authSignupMainCard{
  width:100%;
  min-width:0;
}
.authSignupSidebar{
  display:grid;
  gap:12px;
  align-self:start;
  width:100%;
}
@media (min-width:980px){
  .authSignupLayout{ grid-template-columns: minmax(0, 1fr) 320px; }
  .authSignupSidebar{
    justify-self:end;
    position:sticky;
    top:86px;
  }
}
.authShowcase{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--glass2) 85%, transparent), transparent 65%),
    linear-gradient(140deg, color-mix(in srgb, var(--glass) 72%, transparent), color-mix(in srgb, var(--glass2) 88%, transparent));
  box-shadow:var(--shadow);
  padding:24px;
  position:relative;
  overflow:hidden;
}
.authShowcase::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:180px;
  height:180px;
  border-radius:999px;
  background: color-mix(in srgb, var(--glass2) 55%, transparent);
  filter: blur(2px);
  pointer-events:none;
}
.authKicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--muted);
  margin:0 0 10px;
}
.authShowTitle{
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  line-height:1.02;
  margin:0 0 10px;
}
.authShowMeta{
  font-size:14px;
  line-height:1.45;
  color:var(--muted);
  margin:0 0 14px;
}
.authBullets{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-size:13px;
}
.authFormCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--glass) 68%, transparent);
  box-shadow:var(--shadow);
  padding: clamp(18px, 2.6vw, 28px);
}

/* Responsive overflow guard (sitewide) */
html, body{
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
main, .pageWrap, .container, .secWrap{
  min-width: 0;
}
img, video, canvas, svg, iframe{
  max-width: 100%;
}

/* Keep header controls inside very small screens */
@media (max-width: 620px){
  .topbar-inner{
    padding: 10px 10px;
    gap: 8px;
  }
  .top-actions{
    gap: 6px;
  }
  .iconbtn{
    width: 36px;
    height: 36px;
  }
  .logo{
    width: 36px;
    height: 36px;
  }
  .brandtext .name{
    font-size: 14px;
  }
}

/* Extra-compact phones */
@media (max-width: 420px){
  .topbar-inner{
    padding: 8px 8px;
    gap: 6px;
  }
  .top-actions{
    gap: 4px;
  }
  .iconbtn{
    width: 32px;
    height: 32px;
  }
  .logo{
    width: 32px;
    height: 32px;
  }
  .brandtext{
    max-width: 86px;
  }
  .brandtext .name{
    font-size: 12px;
  }
}

@media (max-width: 380px){
  .row{
    padding: 10px;
    gap: 8px;
  }
  .left{
    gap: 8px;
  }
  .thumb{
    width: 100px;
    height: 100px;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
    flex-basis: 100px;
  }
}

/* Mobile Menu Fixes */
@media (max-width: 860px){
  .menuOverlay{
    align-items:stretch;
    justify-content:flex-start;
    padding:
      0;
    background:rgba(3,8,20,.48);
  }
  .menuPanel{
    width:min(340px, calc(100vw - 18px));
    max-width:min(340px, calc(100vw - 18px));
    height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:none;
    overflow:hidden;
    border-radius:0 22px 22px 0;
    padding:12px;
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    margin-right:auto;
    transform:translateX(-18px);
    opacity:.96;
    box-shadow:24px 0 48px rgba(0,0,0,.24);
    display:grid;
    grid-template-rows:auto minmax(0, 1fr);
  }
  .menuOverlay.open .menuPanel{
    transform:translateX(0);
    opacity:1;
  }
  .menuTop{
    position:sticky;
    top:0;
    z-index:2;
    padding:8px 6px 12px;
    margin-bottom:8px;
    border-radius:14px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 94%, transparent), color-mix(in srgb, var(--glass2) 82%, transparent));
  }
  .menuGrid{
    grid-template-columns:1fr;
    gap:10px;
    overflow:auto;
    align-content:start;
    padding-right:4px;
  }
  .menuItem{
    padding:10px 12px;
    gap:12px;
    min-height:72px;
    aspect-ratio:auto;
    border-radius:16px;
    grid-template-columns:52px minmax(0,1fr);
    place-items:center start;
    text-align:left;
  }
  .menuIcon{
    width:52px;
    height:52px;
    border-radius:14px;
  }
  .menuLabel{
    font-size:15px;
    line-height:1.15;
  }
  #closeMenu.iconbtn{
    width:36px;
    height:36px;
    flex:0 0 36px;
  }
}

@media (max-width: 420px){
  .menuItem{
    min-height:68px;
    padding:9px 10px;
  }
  .menuIcon{
    width:46px;
    height:46px;
  }
  .menuLabel{
    font-size:14px;
  }
}

/* Light mode: clear white menu surface */
body.theme-light .menuPanel{
  background:#ffffff;
}
@media (prefers-color-scheme: light){
  body:not(.theme-dark) .menuPanel{
    background:#ffffff;
  }
}
.authTitle{ font-size: clamp(32px, 4vw, 46px); margin:0 0 8px; }
.authMeta{ font-size:15px; margin:0 0 18px; }
.authForm{ gap:14px; }
.authLabel{ font-size:13px; gap:7px; }
.authInput{
  height:52px;
  font-size:16px;
  padding:0 14px;
}
.authInput[type="file"]{
  padding:10px 12px;
  height:auto;
}
.authPreview{
  margin-top:8px;
  width:120px;
  height:120px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 90%, transparent);
  overflow:hidden;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:12px;
}
.authPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.authCheck{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--muted);
  font-size:13px;
}
.authCheck input{
  margin-top:2px;
  width:16px;
  height:16px;
}
.authCheck a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, var(--stroke) 70%, transparent);
}
.authSubmit{
  height:52px;
  font-size:19px;
  letter-spacing:.3px;
  transition:.15s ease;
}
.authSubmit:hover{ transform: translateY(-1px); }
.authSubmit:active{ transform: scale(0.98); }
.authLinkRow{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.authLinkText{
  font-size:14px;
  color:var(--muted);
}
.authLinkBtn{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color:var(--text);
  text-decoration:none;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
}

/* Additional page components */
.pageIntro{ margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.45; }
.statGrid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width:900px){
  .statGrid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.statCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass) 78%, transparent), color-mix(in srgb, var(--glass2) 92%, transparent));
  padding:14px;
  box-shadow: 0 16px 34px rgba(8, 15, 28, 0.14);
  position:relative;
  overflow:hidden;
}
.statCard::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.22), transparent);
}
.statValue{ font-family:"Outfit","Arial Narrow",Arial,sans-serif; font-size:30px; line-height:1; margin:0; }
.statLabel{ margin:8px 0 0; color:var(--muted); font-size:12px; }
.twoCol{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:980px){
  .twoCol{ grid-template-columns: 1.3fr .9fr; }
}
.panelCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass) 78%, transparent), color-mix(in srgb, var(--glass2) 94%, transparent));
  padding:14px;
  box-shadow: 0 18px 40px rgba(8, 15, 28, 0.14);
}
.panelTitle{ margin:0 0 10px; font-family:"Outfit","Arial Narrow",Arial,sans-serif; font-size:20px; }
.listStack{ display:grid; gap:10px; }
.listItem{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 95%, transparent);
  padding:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.itemTitle{ margin:0; font-family:"Outfit","Arial Narrow",Arial,sans-serif; font-size:17px; }
.itemMeta{ margin:6px 0 0; color:var(--muted); font-size:13px; }
.chip{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  font-size:12px;
  color:var(--text);
}
.chip.ok{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); }
.chip.warn{ background: rgba(245,158,11,.2); border-color: rgba(245,158,11,.4); }
.chip.info{ background: rgba(56,189,248,.2); border-color: rgba(56,189,248,.4); }
.searchBar{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.searchLayout{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.searchMainCol{
  min-width:0;
  display:grid;
  gap:10px;
}
.resultSummary{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.searchResultsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.resultCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  padding:12px;
  display:grid;
  gap:9px;
  transition:.15s ease;
}
.resultCard:hover{ transform: translateY(-1px); }
.resultCardTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.resultCardActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.resultAction{
  height:32px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass) 82%, transparent);
  color:var(--text);
  font-family:"Manrope","Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px;
  cursor:pointer;
  transition:.15s ease;
}
.resultAction:hover{ transform: translateY(-1px); }
.resultAction:active{ transform: scale(0.98); }
.resultAction.active{
  border-color: color-mix(in srgb, var(--stroke) 95%, transparent);
  background: color-mix(in srgb, var(--glass) 92%, transparent);
}
.searchRightSidebar{
  display:grid;
  gap:12px;
  align-self:start;
}
.resultFilterGroup{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
@media (min-width:760px){
  .searchResultsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1180px){
  .searchLayout{ grid-template-columns: minmax(0, 1fr) 320px; }
  .searchRightSidebar{ position:sticky; top:86px; }
}
.searchField{
  flex:1;
  height:44px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color:var(--text);
  padding:0 12px;
}
.searchField::placeholder{ color:var(--muted); }
.btnMain{
  min-height:44px;
  padding:10px 14px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass) 96%, transparent), color-mix(in srgb, var(--glass2) 92%, transparent));
  color:var(--text);
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:15px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
  transition:.15s ease;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(8, 15, 28, 0.14);
}
.btnMain:hover{ transform: translateY(-1px); }
.btnMain:active{ transform: scale(0.98); }
.btnMain.compactBtn{
  min-height:38px;
  padding:8px 12px;
  font-size:14px;
}
.formGrid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .formGrid{ grid-template-columns:1fr 1fr; }
}
.inputControl, .selectControl, .textControl{
  width:100%;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color:var(--text);
  padding:0 12px;
  font-family:"Manrope","Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
}
.inputControl, .selectControl{ height:44px; }
.selectControl{
  color-scheme: dark;
}
body.theme-light .selectControl{
  color-scheme: light;
}
body.theme-dark .selectControl{
  color-scheme: dark;
}
.selectControl option{
  background:#111923;
  color:#e7edf2;
}
body.theme-light .selectControl option{
  background:#ffffff;
  color:#0f172a;
}
body.theme-dark .selectControl option{
  background:#111923;
  color:#e7edf2;
}
.textControl{ min-height:120px; padding:10px 12px; resize:vertical; }
.dropzone{
  border:2px dashed color-mix(in srgb, var(--stroke) 70%, transparent);
  border-radius:var(--r);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 60%),
    color-mix(in srgb, var(--glass2) 88%, transparent);
  min-height:132px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:13px;
  text-align:center;
  padding:18px;
}
.centerHero{
  min-height:55vh;
  display:grid;
  place-items:center;
  text-align:center;
}
.heroCard{
  max-width:720px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--glass) 66%, transparent);
  box-shadow:var(--shadow);
  padding:26px;
}
.heroTitle{ margin:0; font-family:"Outfit","Arial Narrow",Arial,sans-serif; font-size:44px; line-height:1; }
.heroMeta{ margin:10px 0 18px; color:var(--muted); font-size:15px; }
.typeHint{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
}
.typeFields{
  grid-column:1 / -1;
  display:grid;
  gap:12px;
  padding:12px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 88%, transparent);
}
.typeFields[hidden]{ display:none; }
.subTitle{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:18px;
}
.coverPreview{
  margin-top:8px;
  width:120px;
  height:120px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 90%, transparent);
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
}
.coverPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.trackList{
  display:grid;
  gap:8px;
}
.trackRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  align-items:center;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  border-radius:var(--r);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  padding:10px;
  cursor:grab;
}
.trackRow.dragging{ opacity:.65; }
.trackMeta{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.trackTitle{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:16px;
}
.trackActions{
  display:flex;
  gap:6px;
}
.miniBtn{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass) 80%, transparent);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.miniBtn svg{
  width:14px;
  height:14px;
}
.releaseActions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.actionBtn{
  min-height:38px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--glass2) 92%, transparent);
  color:var(--text);
  font-family:"Manrope","Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
  transition:.15s ease;
  cursor:pointer;
}
.actionBtn:hover{ transform: translateY(-1px); }
.actionBtn:active{ transform: scale(0.98); }
.actionBtn.publish{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.35);
}
.actionBtn.unpublish{
  background: rgba(56,189,248,.2);
  border-color: rgba(56,189,248,.4);
}
.actionBtn.delete{
  background: rgba(244,63,94,.18);
  border-color: rgba(244,63,94,.36);
}
.dashboardActionGrid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(1, minmax(0, 1fr));
}
@media (min-width:680px){
  .dashboardActionGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (min-width:1140px){
  .dashboardActionGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
.dashboardActionCard{
  border-radius:calc(var(--r) + 2px);
  border:1px solid color-mix(in srgb, var(--stroke) 78%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--glass) 94%, transparent), color-mix(in srgb, var(--glass2) 92%, transparent));
  padding:14px;
  display:grid;
  gap:12px;
  min-height:100%;
  box-shadow: 0 18px 40px rgba(8, 15, 28, 0.16);
  transition:.18s ease;
}
.dashboardActionCard:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--stroke) 92%, transparent);
}
.dashboardActionTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dashboardActionBody{
  display:grid;
  gap:8px;
  align-content:start;
}
.dashboardActionBody .itemTitle{
  font-size:18px;
}
.dashboardActionFooter{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.dashboardActionFooter .btnMain,
.dashboardActionFooter .actionBtn{
  width:100%;
}
@media (min-width:760px){
  .dashboardActionFooter .btnMain,
  .dashboardActionFooter .actionBtn{
    width:auto;
    min-width:140px;
  }
}
.dashboardQuickGrid{
  display:grid;
  gap:10px;
}
.dashboardQuickCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  background: color-mix(in srgb, var(--glass2) 96%, transparent);
  padding:12px;
  display:grid;
  gap:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.dashboardQuickCard .btnMain{
  width:100%;
}
.dashboardPanelAccent{
  position:relative;
  overflow:hidden;
}
.dashboardPanelAccent::after{
  content:"";
  position:absolute;
  inset:auto -18% -55% auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 68%);
  pointer-events:none;
}
.bonusCompact{
  display:grid;
  gap:12px;
}
.bonusCompactTop{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.bonusCodeChip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  background:color-mix(in srgb, var(--glass2) 96%, transparent);
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:15px;
  letter-spacing:.03em;
}
.bonusLinkBox{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:color-mix(in srgb, var(--glass2) 96%, transparent);
  padding:12px;
  display:grid;
  gap:8px;
}
.bonusLinkText{
  margin:0;
  font-size:13px;
  color:var(--muted);
  word-break:break-all;
}
.bonusStatStrip{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (min-width:760px){
  .bonusStatStrip{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}
.bonusStatChip{
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 90%, transparent), color-mix(in srgb, var(--glass2) 95%, transparent));
  padding:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.bonusStatValue{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:24px;
  line-height:1;
}
.bonusStatLabel{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
}
.bonusRuleText{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.uploadShell{
  display:grid;
  gap:14px;
}
.uploadHero{
  grid-column:1 / -1;
  border-radius:calc(var(--r) + 4px);
  border:1px solid color-mix(in srgb, var(--stroke) 78%, transparent);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.12), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--glass) 96%, transparent), color-mix(in srgb, var(--glass2) 92%, transparent));
  padding:16px;
  display:grid;
  gap:14px;
  box-shadow: 0 20px 40px rgba(8, 15, 28, 0.16);
}
.uploadHeroMeta{
  display:grid;
  gap:8px;
}
.uploadEyebrow{
  display:inline-flex;
  width:max-content;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.uploadHeroTitle{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:clamp(24px, 4vw, 34px);
  line-height:1.02;
}
.uploadHeroText{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  max-width:720px;
}
.uploadHighlights{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(1, minmax(0, 1fr));
}
@media (min-width:760px){
  .uploadHighlights{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
.uploadHighlight{
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:rgba(255,255,255,0.04);
  padding:12px;
}
.uploadHighlight .itemMeta{
  margin-top:4px;
}
.uploadCrewGrid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:980px){
  .uploadCrewGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.uploadCrewCard{
  padding:12px;
}
.uploadDropzonePanel{
  grid-column:1 / -1;
  display:grid;
  gap:10px;
}
.uploadSubmitBar{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding-top:4px;
}
.uploadSubmitBar .btnMain{
  width:100%;
}
.uploadSubmitHint{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
@media (min-width:760px){
  .uploadSubmitBar .btnMain{
    width:auto;
    min-width:200px;
  }
}
@media (max-width:700px){
  .btnMain,
  .actionBtn{
    white-space:normal;
  }
}

/* Deposit payment instructions readability */
#paymentInstructionInfo .itemTitle{
  font-size: clamp(19px, 3.3vw, 24px);
  line-height: 1.15;
}
#paymentInstructionInfo .itemMeta{
  font-size: clamp(15px, 2.6vw, 18px);
  line-height: 1.35;
  color: var(--text);
}


/* Track single page (sitewide stylesheet) */
.trackSinglePage{display:grid;gap:12px;}
.trackLayout{display:grid;grid-template-columns:1fr;gap:12px;max-width:none;margin:0;}
.mainCol{display:grid;gap:12px;min-width:0;}
.rightCol{display:grid;gap:12px;min-width:0;}
@media (min-width:1180px){
  .trackLayout{grid-template-columns:minmax(0,1fr) clamp(370px, 28vw, 460px);}
  .rightCol{align-self:start;}
  .rightCol .panelCard{position:sticky;top:86px;}
}
.heroCover{width:min(100%,620px);height:clamp(250px,48vw,430px);border-radius:var(--r);overflow:hidden;border:1px solid color-mix(in srgb,var(--stroke) 75%,transparent);background:rgba(0,0,0,.14);margin:0 auto;position:relative;cursor:pointer;}
.heroCover img{width:100%;height:100%;object-fit:cover;display:block;}
.coverPlayToggle{
  position:absolute;
  inset:0;
  margin:auto;
  width:74px;
  height:74px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.coverPlayToggle svg{width:30px;height:30px;}
.trackMetaTop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:12px;text-align:center;}
.trackMetaTop .itemTitle{font-size:30px;line-height:1.05;}
.trackMetaTop .itemMeta{margin:6px 0 0;}
.artistLink{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--text);border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);background:color-mix(in srgb,var(--glass2) 92%,transparent);font-size:13px;}
.trackActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;justify-content:center;}
.shareIconBtn{width:56px;min-width:56px;height:56px;padding:0;}
.shareIconBtn svg{width:28px;height:28px;}
.sharePostCard{display:grid;gap:10px;}
.shareHeading{text-align:center;margin:0;}
.shareActions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.shareActions .shareIconBtn{
  background:linear-gradient(180deg, color-mix(in srgb,var(--glass) 98%,transparent), color-mix(in srgb,var(--glass2) 94%,transparent));
  border-color:color-mix(in srgb,var(--stroke) 82%,transparent);
  color:var(--text);
  box-shadow:0 12px 24px rgba(8,15,28,.14);
}
.shareActions .shareIconBtn:hover{
  transform:translateY(-2px);
}
.postTags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;}
.tagChip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);background:color-mix(in srgb,var(--glass2) 92%,transparent);font-size:12px;color:var(--text);}
.audioWrap{margin-top:12px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);background:color-mix(in srgb,var(--glass2) 90%,transparent);padding:10px 12px;}
.audioWrap audio{display:none;}
.playerControls{display:flex;gap:10px;justify-content:center;align-items:center;}
.playerCtrlBtn{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  color:var(--text);
  display:grid;
  place-items:center;
  text-decoration:none;
  cursor:pointer;
}
.playerCtrlBtn svg{width:18px;height:18px;}
.nowPlaying{margin:8px 0 0;font-size:12px;color:var(--muted);}
.theme-dark .nowPlaying{color:#f3f4f6;}
[data-download-link].hd-down,.btnMain.altBtn{height:42px;padding:0 16px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border:1px solid color-mix(in srgb,var(--stroke) 75%,transparent);font-family:"Outfit","Arial Narrow",Arial,sans-serif;font-size:15px;letter-spacing:.2px;}
[data-download-link].hd-down{background:color-mix(in srgb,var(--glass) 80%,transparent);color:var(--text);}
.btnMain.altBtn{background:color-mix(in srgb,var(--glass2) 94%,transparent);color:var(--text);}
.twoBlocks{display:grid;gap:12px;grid-template-columns:1fr;}
@media (min-width:1080px){.twoBlocks{grid-template-columns:1.2fr .8fr;}}
.twoBlocks.commentsOnly{grid-template-columns:1fr;}
@media (min-width:1080px){.twoBlocks.commentsOnly{grid-template-columns:1fr;}}
.tracksGrid{display:grid;gap:10px;}
.relatedTracksGrid{grid-template-columns:1fr;}
@media (min-width:760px){
  .relatedTracksGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1160px){
  .relatedTracksGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* Single templates: remove default underline/blue links for cleaner UI */
.trackSinglePage a,
.albumSinglePage a,
.blogSinglePage a{
  text-decoration:none;
  color:inherit;
}
.trackCard{border-radius:var(--r);border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);background:color-mix(in srgb,var(--glass2) 92%,transparent);padding:9px;display:grid;gap:6px;}
.trackCard.playing{border-color:color-mix(in srgb,var(--text) 40%,var(--stroke));box-shadow:0 10px 28px rgba(0,0,0,.12);}
.trackLine{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.trackCard .itemTitle{font-size:14px;}
.trackCard .itemMeta{margin-top:2px;font-size:12px;}
.trackButtons{display:flex;flex-wrap:wrap;gap:8px;}
.miniAction{height:30px;width:30px;padding:0;border-radius:8px;border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);background:color-mix(in srgb,var(--glass) 82%,transparent);color:var(--text);font-size:12px;cursor:pointer;display:grid;place-items:center;}
.miniAction svg{width:15px;height:15px;}
.trackButtons [data-download-link].hd-down{height:30px;width:30px;padding:0;border-radius:8px;font-family:"Manrope","Segoe UI",Roboto,Arial,sans-serif;font-size:12px;letter-spacing:0;background:color-mix(in srgb,var(--glass2) 94%,transparent);display:grid;place-items:center;}
.trackButtons [data-download-link].hd-down svg{width:15px;height:15px;}
.commentForm{display:grid;gap:8px;margin-top:10px;}
.commentArea{min-height:95px;resize:vertical;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);background:color-mix(in srgb,var(--glass2) 92%,transparent);color:var(--text);padding:10px 12px;font-family:"Manrope","Segoe UI",Roboto,Arial,sans-serif;}
.commentsPanel .commentArea{min-height:160px;}
.commentsPanel .commentsList{min-height:220px;}
.commentInput{height:40px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);background:color-mix(in srgb,var(--glass2) 92%,transparent);color:var(--text);padding:0 12px;}
.commentsList{margin-top:10px;display:grid;gap:8px;}
.commentItem{border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);border-radius:var(--r);background:color-mix(in srgb,var(--glass2) 92%,transparent);padding:10px;}
.commentTop{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);}

/* Sitewide minimal player */
.miniSitePlayer{
  position:fixed;
  right:14px;
  bottom:92px;
  z-index:130;
  width:min(94vw,520px);
  min-width:260px;
  max-width:min(94vw,520px);
  border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--stroke) 75%,transparent);
  background:color-mix(in srgb,var(--glass) 96%,transparent);
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
  gap:8px;
}
.miniSitePlayer.show{display:grid;}
.miniPlayerRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;}
.miniPlayerText{min-width:0;overflow:hidden;}
.miniPlayerTitle{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:15px;
  line-height:1.2;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:clip;
  word-break:break-word;
}
.miniPlayerMeta{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.theme-dark .miniPlayerTitle{color:#f9fafb;}
.theme-dark .miniPlayerMeta{color:#e5e7eb;}
.miniPlayerBtns{display:flex;gap:8px;flex-shrink:0;align-items:center;}
.miniPlayerBtn{
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);
  background:color-mix(in srgb,var(--glass2) 90%,transparent);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.miniPlayerBtn svg{width:16px;height:16px;}
@media (max-width:620px){
  .miniSitePlayer{
    right:10px;
    left:10px;
    width:auto;
    max-width:none;
    min-width:0;
  }
  .miniPlayerRow{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .miniPlayerBtns{
    justify-content:flex-start;
    gap:6px;
    flex-wrap:wrap;
  }
  .miniPlayerBtn{
    width:32px;
    height:32px;
  }
}
@media (min-width:860px){
  .miniSitePlayer{bottom:16px;}
}

/* Album single page */
.albumSinglePage{display:grid;gap:12px;}
.albumLayout{display:grid;grid-template-columns:1fr;gap:12px;max-width:1500px;margin:0 auto;}
.albumMainCol{display:grid;gap:12px;min-width:0;}
.albumSideCol{display:grid;gap:12px;min-width:0;}
@media (min-width:1180px){
  .albumLayout{grid-template-columns:minmax(0,1fr) 340px;}
  .albumSideCol{align-self:start;}
  .albumSideCol .panelCard{position:sticky;top:86px;}
}
.albumHero{
  width:min(100%,700px);
  height:clamp(260px,48vw,420px);
  margin:0 auto;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--stroke) 75%,transparent);
  position:relative;
  cursor:pointer;
  background:rgba(0,0,0,.14);
}
.albumHero img{width:100%;height:100%;object-fit:cover;display:block;}
.albumMetaTop{display:grid;gap:8px;text-align:center;justify-items:center;}
.albumActions,
.albumActionBar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px;}
.albumPrimaryBtn{
  background:linear-gradient(180deg, #f7d977, #ddab33);
  border-color:#c99628;
  color:#2d1d00;
  box-shadow: 0 16px 28px rgba(221,171,51,.26);
}
.albumActionBar > .btnMain,
.albumActionBar > a.btnMain{
  min-height:46px;
  padding:0 18px;
  flex:1 1 220px;
  text-align:center;
}
.albumTrackList{display:grid;gap:10px;}
.albumTrackRow{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  padding:10px;
  display:grid;
  gap:8px;
}
.albumTrackRow.playing{
  border-color:color-mix(in srgb,var(--text) 40%,var(--stroke));
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.albumTrackTop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.albumTrackBtns{display:flex;gap:8px;flex-wrap:wrap;}
@media (max-width:760px){
  .albumMetaTop .itemTitle{font-size:26px;line-height:1.08;}
  .albumActionBar{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .albumActionBar > .btnMain,
  .albumActionBar > a.btnMain{
    width:100%;
    min-width:0;
    flex:none;
  }
  .shareActions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }
  .shareActions .shareIconBtn{
    width:100%;
    min-width:0;
    height:48px;
  }
  .shareActions .shareIconBtn svg{
    width:22px;
    height:22px;
  }
  .playerControls{
    flex-wrap:wrap;
  }
  .playerCtrlBtn{
    width:44px;
    height:44px;
  }
  .coverPlayToggle{
    width:64px;
    height:64px;
  }
}

/* Artist profile page */
.artistProfilePage{display:grid;gap:12px;}
.artistLayout{display:grid;grid-template-columns:1fr;gap:12px;max-width:1500px;margin:0 auto;}
.artistProfilePage #secTopHits{background:var(--sec2);}
.artistMainCol{display:grid;gap:12px;min-width:0;}
.artistSideCol{display:grid;gap:12px;min-width:0;}
@media (min-width:1180px){
  .artistLayout{grid-template-columns:minmax(0,1fr) 340px;}
  .artistSideCol{align-self:start;}
  .artistSideCol .panelCard{position:sticky;top:86px;}
}
.artistProfileHero{display:grid;gap:12px;}
.artistHeroTop{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;}
@media (min-width:760px){
  .artistHeroTop{grid-template-columns:minmax(240px,340px) minmax(0,1fr);}
}
.artistAvatarWrap{
  width:100%;
  max-width:340px;
  aspect-ratio:1/1;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);
  margin:0;
  background:rgba(0,0,0,.12);
}
.artistAvatarWrap img{width:100%;height:100%;object-fit:cover;display:block;}
.artistHeroInfo{display:grid;gap:8px;align-content:center;min-width:0;}
.artistHeroInfo .itemTitle{font-size:34px;line-height:1.02;}
.artistHeroInfo .itemMeta{font-size:14px;}
.artistBadges{display:flex;gap:8px;flex-wrap:wrap;}
.artistBookingBtn{
  width:100%;
  max-width:340px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.artistSocialRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.artistSocialLink{
  height:36px;
  min-width:36px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
}
.artistSocialLink svg{width:16px;height:16px;display:block;}
#artistSocialInstagram{
  border-color:rgba(225,48,108,.55);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  color:var(--text);
}
#artistSocialX{
  border-color:rgba(148,163,184,.52);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  color:var(--text);
}
#artistSocialFacebook{
  border-color:rgba(66,103,178,.62);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  color:var(--text);
}
#artistSocialYouTube{
  border-color:rgba(255,0,0,.62);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  color:var(--text);
}
#artistSocialTikTok{
  border-color:rgba(56,189,248,.52);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  color:var(--text);
}
.artistStatGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:1020px){
  .artistStatGrid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.artistAlbumsGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:760px){
  .artistAlbumsGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:1180px){
  .artistAlbumsGrid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
#artistTracksList{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  #artistTracksList{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1180px){
  #artistTracksList{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.artistTrendingCard{
  border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--stroke) 70%,transparent);
  background:color-mix(in srgb,var(--glass2) 92%,transparent);
  padding:10px;
  display:grid;
  gap:8px;
}
.artistTrendingTitle{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:18px;
  line-height:1.15;
}
.artistTrendingMeta{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.artistTrendingBtns{display:flex;gap:8px;flex-wrap:wrap;}
.artistTrendingBtns .trendIconBtn{
  width:40px;
  height:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
}
.artistTrendingBtns .trendIconBtn svg{
  width:18px;
  height:18px;
}
.artistTrendingBtns [data-download-link].hd-down.trendIconBtn{
  padding:0;
  font-size:0;
}
.artistDonateBtn{
  margin-top:6px;
  justify-content:center;
  text-align:center;
}
.artistDonateStandout{
  width:100%;
  max-width:340px;
  min-height:56px;
  padding:0 22px;
  border-color:rgba(34,197,94,.6);
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(22,163,74,.92));
  color:#f7fff9;
  box-shadow:0 10px 24px rgba(22,163,74,.34), inset 0 1px 0 rgba(255,255,255,.24);
  font-size:16px;
  letter-spacing:.35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  animation:artistDonateHeartbeat 1.9s ease-in-out infinite;
}
.artistDonateStandout:hover{
  box-shadow:0 14px 30px rgba(22,163,74,.44), inset 0 1px 0 rgba(255,255,255,.28);
}
.artistDonateStandout:active{
  transform:translateY(0);
}
@keyframes artistDonateHeartbeat{
  0%{transform:scale(1);box-shadow:0 10px 24px rgba(22,163,74,.34), inset 0 1px 0 rgba(255,255,255,.24);}
  14%{transform:scale(1.03);box-shadow:0 0 0 0 rgba(34,197,94,.35), 0 12px 28px rgba(22,163,74,.42), inset 0 1px 0 rgba(255,255,255,.24);}
  28%{transform:scale(1);}
  42%{transform:scale(1.02);box-shadow:0 0 0 10px rgba(34,197,94,0), 0 12px 28px rgba(22,163,74,.38), inset 0 1px 0 rgba(255,255,255,.24);}
  70%{transform:scale(1);}
  100%{transform:scale(1);}
}

/* Typography refinement: less compact, lighter weight, mobile-friendly */
:root{
  --font-display: "Outfit", "Arial Narrow", Arial, sans-serif;
  --font-ui: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
}

.sectionTitle,
.panelTitle,
.leftLabel,
.brandtext .name,
.heroTitle,
.subTitle,
.statValue{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1px;
}

.itemTitle,
.videoTitle,
.trackTitle,
.trackMetaTop .itemTitle,
.artistHeroInfo .itemTitle,
[data-download-link].hd-down,
.btnMain.altBtn{
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.28;
}

.itemMeta,
.pageIntro,
.chip,
.btnMain,
.actionBtn{
  font-family: var(--font-ui);
}

@media (max-width: 860px){
  .itemTitle,
  .videoTitle,
  .trackTitle{
    font-size: 15px;
    line-height: 1.28;
  }
  .trackMetaTop .itemTitle{
    font-size: 22px;
    line-height: 1.2;
  }
  .sectionTitle{
    letter-spacing: 0.25px;
  }
}

/* Homepage redesign */
.homeContainer{
  display:grid;
  gap:14px;
}
.homeHeroShell{
  padding:clamp(14px, 2.4vw, 20px);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(34,197,94,0.10), transparent 26%),
    linear-gradient(145deg, color-mix(in srgb, var(--glass) 98%, transparent), color-mix(in srgb, var(--glass2) 94%, transparent));
  overflow:hidden;
}
.homeHeroSlider{
  display:grid;
  gap:12px;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass2) 98%, transparent), color-mix(in srgb, var(--glass) 92%, transparent));
  border:1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  box-shadow:0 24px 46px rgba(8, 15, 28, 0.14);
}
.homeHeroTrack{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;
  transition:transform .45s ease;
  will-change:transform;
}
.homeHeroSlide{
  display:grid;
  color:inherit;
  text-decoration:none;
  border-radius:22px 22px 0 0;
  overflow:hidden;
  background:transparent;
}
.homeHeroSlideMedia{
  position:relative;
  aspect-ratio:1.9/1;
  background:rgba(0,0,0,.08);
}
.homeHeroSlideMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.homeHeroBadge{
  position:absolute;
  left:14px;
  top:14px;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(15,23,42,.88);
  color:#f8fafc;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(15,23,42,.24);
}
body.theme-dark .homeHeroBadge{
  background:rgba(248,250,252,.86);
  color:#0f172a;
}
.homeHeroBadge.kind-trending{
  background:rgba(15,23,42,.88);
  color:#f8fafc;
}
.homeHeroBadge.kind-sponsored{
  background:rgba(180,83,9,.82);
  color:#fff7ed;
}
.homeInlineSponsorBadge{
  position:absolute;
  left:8px;
  bottom:8px;
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(180,83,9,.88);
  color:#fff7ed;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(120,53,15,.24);
}
.is-sponsored-row,
.is-sponsored-album{
  border-color:rgba(180,83,9,.28);
}
.is-sponsored-row{
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 86%, transparent), rgba(251,191,36,.08));
}
.is-sponsored-album{
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 86%, transparent), rgba(251,191,36,.08));
}
.sponsoredSidebarCard{
  border-color:rgba(180,83,9,.28);
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 88%, transparent), rgba(251,191,36,.08));
}
.sponsoredSidebarCard .chip{
  margin-bottom:8px;
}
.sponsoredFeatureCard{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(180,83,9,.28);
  background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 88%, transparent), rgba(251,191,36,.08));
}
.sponsoredFeatureMedia{
  width:88px;
  height:88px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.08);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
}
.sponsoredFeatureMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sponsoredFeatureBody{
  min-width:0;
  display:grid;
  gap:6px;
}
.sponsoredFeatureBody .chip{
  width:max-content;
}
@media (max-width:640px){
  .sponsoredFeatureCard{
    grid-template-columns:72px minmax(0, 1fr);
    gap:10px;
    padding:10px;
  }
  .sponsoredFeatureMedia{
    width:72px;
    height:72px;
  }
}
.homeSliderHead{
  margin-bottom:10px;
}
.homeHeroSlideBody{
  padding:16px 18px 18px;
  display:grid;
  gap:8px;
}
.homeHeroSlideBody h2{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  font-size:clamp(22px, 3vw, 30px);
  line-height:1.02;
}
.homeHeroSlideBody p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.homeHeroStatsRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:4px;
}
.homeHeroStatChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  min-width:72px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 74%, transparent);
  background:color-mix(in srgb, var(--glass) 98%, transparent);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.homeHeroStatChip svg{
  width:14px;
  height:14px;
  display:block;
  flex:0 0 auto;
}
.homeHeroDots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px 14px;
  background:transparent;
}
.homeHeroDot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:0;
  background:color-mix(in srgb, var(--stroke) 86%, transparent);
  padding:0;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, width .18s ease;
}
.homeHeroDot.is-active{
  width:28px;
  background:color-mix(in srgb, var(--text) 88%, transparent);
}
.homeSectionEyebrow{
  margin:0 0 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.homeSection{
  padding:18px;
}
.homeSectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.homeSectionHead .sectionTitle{
  margin:0;
}
.homeSectionLink{
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.homeBuzzCard,
.homeSponsorCard{
  color:inherit;
  text-decoration:none;
}
.homeBuzzCardBody h3{
  margin:0;
  font-family:"Outfit","Arial Narrow",Arial,sans-serif;
  line-height:1.08;
}
.homeBuzzCardBody p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.homeBuzzCard{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:12px;
  align-items:center;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--stroke) 74%, transparent);
  background:color-mix(in srgb, var(--glass2) 96%, transparent);
  padding:10px;
}
.homeBuzzCard img{
  width:84px;
  height:84px;
  border-radius:14px;
  object-fit:cover;
  display:block;
  background:rgba(0,0,0,.08);
}
.homeBuzzCardBody{
  display:grid;
  gap:6px;
  min-width:0;
}
.homeBuzzCardBody h3{
  font-size:17px;
}
.homeBuzzPill{
  display:inline-flex;
  width:max-content;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background:color-mix(in srgb, var(--glass) 98%, transparent);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.homeBuzzCard.is-empty{
  grid-template-columns:1fr;
  min-height:120px;
}
.homeSponsorSection .sectionTitle{
  margin-bottom:0;
}
.homeSponsorGrid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(1, minmax(0, 1fr));
}
.homeSponsorCard{
  border-radius:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--stroke) 74%, transparent);
  background:color-mix(in srgb, var(--glass2) 96%, transparent);
}
.homeSponsorCard img{
  width:100%;
  aspect-ratio:1.25/1;
  object-fit:cover;
  display:block;
}
.homeSponsorBody{
  padding:14px;
  display:grid;
  gap:8px;
}
.homeInfoGrid{
  margin-top:0;
}
.homeInfoPanel{
  min-height:100%;
}
.homeFooter{
  margin-top:0;
}
@media (min-width:980px){
  .homeHeroTrack{
    grid-auto-columns:calc((100% - 24px) / 3);
    gap:12px;
  }
  .homeSponsorGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:860px){
  .homeSectionHead{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media (min-width:700px) and (max-width:979px){
  .homeHeroTrack{
    grid-auto-columns:calc((100% - 12px) / 2);
    gap:12px;
  }
}
@media (max-width:640px){
  .homeBuzzCard{
    grid-template-columns:68px 1fr;
  }
  .homeBuzzCard img{
    width:68px;
    height:68px;
  }
}