:root {
      --site-primary: #00A3FF;
      --site-on-primary: #03111B;
      --site-secondary: #1B2634;
      --site-on-secondary: #F2F6FA;
      --site-background: #080B10;
      --site-on-background: #F3F6FA;
      --site-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
      --site-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
      --site-heading-scale: 1;
      --site-spacing-scale: 1;
      --site-radius-scale: 1;
      --site-decoration-opacity: 1;
      --bg: light-dark(#F4F6F9, #080B10);
      --surface: light-dark(#FFFFFF, #11151C);
      --surface-2: light-dark(#EDF1F6, #151B24);
      --surface-3: light-dark(#E5EBF2, #1A2330);
      --border: light-dark(rgba(18, 29, 44, .10), rgba(218, 231, 245, .085));
      --muted: light-dark(#778394, #8995A5);
      --text: light-dark(#17202B, #F1F5F9);
      --subtle: light-dark(#4D5A69, #B2BDCA);
      --shadow: light-dark(0 22px 60px rgba(28, 44, 66, .10), 0 28px 80px rgba(0, 0, 0, .38));
      --blue-soft: light-dark(rgba(0, 163, 255, .10), rgba(0, 163, 255, .14));
      --green: #69D6A1;
      --danger: #FF7185;
      --space-1: calc(4px * var(--site-spacing-scale));
      --space-2: calc(8px * var(--site-spacing-scale));
      --space-3: calc(12px * var(--site-spacing-scale));
      --space-4: calc(16px * var(--site-spacing-scale));
      --space-5: calc(20px * var(--site-spacing-scale));
      --space-6: calc(24px * var(--site-spacing-scale));
      --space-8: calc(32px * var(--site-spacing-scale));
      --space-10: calc(40px * var(--site-spacing-scale));
      --radius-sm: calc(10px * var(--site-radius-scale));
      --radius-md: calc(16px * var(--site-radius-scale));
      --radius-lg: calc(24px * var(--site-radius-scale));
      --radius-xl: calc(32px * var(--site-radius-scale));
    }

    * { box-sizing: border-box; }
    html { min-height: 100%; color-scheme: light dark; }
    body {
      margin: 0;
      min-width: 320px;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: var(--site-font-body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    button, input { font: inherit; }
    button { color: inherit; }
    button:not(:disabled), [role="button"], [role="tab"], summary,
    select:not(:disabled), input[type="range"]:not(:disabled),
    input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled),
    input[type="color"]:not(:disabled) { cursor: pointer; }
    :focus-visible {
      outline: 2px solid var(--site-primary);
      outline-offset: 3px;
    }
    .skip-link { position: fixed; z-index: 10000; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-160%); border-radius: 9px; color: #fff; background: #111820; font-size: 13px; }
    .skip-link:focus { transform: translateY(0); }
    button:disabled { opacity: .35; cursor: not-allowed; }
    .app-root {
      position: relative;
      display: flex;
      min-height: 100vh;
      width: 100%;
      border-radius: 0;
      overflow: clip;
      background-color: light-dark(#F4F6F9, var(--site-background));
      isolation: isolate;
    }
    .ambient {
      position: fixed;
      z-index: -1;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(95px);
      opacity: calc(.30 * var(--site-decoration-opacity));
    }
    .ambient-a { width: 520px; height: 520px; top: 4%; left: 34%; background: rgba(0, 139, 255, .16); }
    .ambient-b { width: 380px; height: 380px; right: -8%; bottom: 8%; background: rgba(96, 73, 200, .11); }
    .sidebar {
      width: 82px;
      flex: 0 0 82px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 22px 12px 18px;
      border-right: 1px solid var(--border);
      background: light-dark(rgba(250, 251, 253, .82), rgba(10, 13, 19, .78));
      backdrop-filter: blur(24px);
      z-index: 5;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: var(--site-primary);
      color: var(--site-on-primary);
      box-shadow: 0 8px 28px rgba(0, 163, 255, .25);
      margin-bottom: 42px;
    }
    .brand-mark svg { width: 23px; height: 23px; }
    .nav-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
    .nav-btn, .side-action {
      position: relative;
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: 15px;
      background: transparent;
      color: var(--muted);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background .22s ease, color .22s ease, transform .22s ease;
    }
    .nav-btn svg, .side-action svg { width: 20px; height: 20px; stroke-width: 1.7; }
    .nav-btn:hover, .side-action:hover { color: var(--text); background: var(--surface-2); transform: translateY(-1px); }
    .nav-btn.active { color: var(--site-primary); background: var(--blue-soft); }
    .nav-btn.active::before {
      content: "";
      position: absolute;
      left: -17px;
      width: 3px;
      height: 20px;
      border-radius: 3px;
      background: var(--site-primary);
      box-shadow: 0 0 14px rgba(0, 163, 255, .7);
    }
    .nav-spacer { flex: 1; }
    .sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #DCEBFA;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      background: linear-gradient(145deg, #435E80, #17283D 68%, #0D1623);
      border: 1px solid rgba(255,255,255,.18);
      cursor: pointer;
    }
    .tooltip { position: absolute; left: 60px; top: 50%; transform: translateY(-50%) translateX(-4px); padding: 7px 10px; white-space: nowrap; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 11px; opacity: 0; pointer-events: none; transition: .18s ease; box-shadow: var(--shadow); }
    .nav-btn:hover .tooltip, .side-action:hover .tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }
    .workspace { min-width: 0; flex: 1; display: flex; flex-direction: column; position: relative; }
    .topbar {
      height: 76px;
      flex: 0 0 76px;
      padding: 0 clamp(22px, 4vw, 58px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
      background: light-dark(rgba(244, 246, 249, .80), rgba(8, 11, 16, .48));
      backdrop-filter: blur(22px);
      position: sticky;
      top: 0;
      z-index: 4;
    }
    .top-context { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
    .top-context strong { color: var(--text); font-weight: 650; }
    .top-actions { display: flex; align-items: center; gap: 12px; }
    .search-trigger {
      min-width: 220px;
      height: 40px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--muted);
      background: var(--surface);
      font-size: 12px;
      cursor: pointer;
      transition: border .2s ease, background .2s ease;
    }
    .search-trigger:hover { border-color: rgba(0,163,255,.48); background: var(--surface-2); }
    .search-trigger svg { width: 16px; height: 16px; }
    .shortcut { margin-left: auto; padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-size: 10px; }
    .icon-btn {
      width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px;
      display: grid; place-items: center; background: var(--surface); color: var(--subtle); cursor: pointer; transition: .2s ease;
    }
    .icon-btn:hover { color: var(--site-primary); border-color: rgba(0,163,255,.42); }
    .icon-btn svg { width: 17px; height: 17px; }
    .content { width: 100%; max-width: 1530px; margin: 0 auto; padding: 34px clamp(22px, 4vw, 58px) 138px; }
    .view { display: none; animation: viewIn .42s cubic-bezier(.2,.75,.2,1) both; }
    .view.active { display: block; }
    @keyframes viewIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { font-family: var(--site-font-heading); }
    h1 { font-size: calc(clamp(31px, 4vw, 48px) * var(--site-heading-scale)); line-height: 1.05; letter-spacing: -.055em; font-weight: 650; }
    h2 { font-size: calc(21px * var(--site-heading-scale)); letter-spacing: -.035em; font-weight: 620; }
    h3 { font-size: calc(15px * var(--site-heading-scale)); letter-spacing: -.02em; font-weight: 620; }
    .eyebrow { color: var(--site-primary); font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
    .muted { color: var(--muted); }
    .subtle { color: var(--subtle); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 34px 0 17px; }
    .section-head h2 { margin: 0; }
    .text-link { border: 0; padding: 5px 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; transition: color .2s ease; }
    .text-link:hover { color: var(--site-primary); }
    .hero {
      min-height: 390px;
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      background: light-dark(linear-gradient(115deg, #E7F2FA, #E9E8F5 52%, #E5EDF5), linear-gradient(115deg, #121C29, #11151F 54%, #151B2A));
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: clamp(30px, 4.4vw, 64px);
      isolation: isolate;
      box-shadow: var(--shadow);
    }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 480px;
      height: 480px;
      right: 12%;
      top: -18%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,163,255,.22), rgba(0,163,255,.04) 48%, transparent 70%);
      filter: blur(18px);
      opacity: var(--site-decoration-opacity);
    }
    .hero-copy { position: relative; z-index: 2; max-width: 560px; }
    .hero-copy h1 { max-width: 520px; margin: 15px 0 15px; }
    .hero-copy p { max-width: 440px; color: var(--subtle); line-height: 1.7; font-size: 14px; margin-bottom: 25px; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
    .primary-btn, .secondary-btn {
      min-height: 46px;
      padding: 0 18px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .primary-btn { color: var(--site-on-primary); background: var(--site-primary); box-shadow: 0 8px 28px rgba(0,163,255,.2); }
    .primary-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,163,255,.3); }
    .secondary-btn { color: var(--text); background: var(--surface); border-color: var(--border); }
    .secondary-btn:hover { transform: translateY(-2px); background: var(--surface-2); }
    .primary-btn svg, .secondary-btn svg { width: 16px; height: 16px; }
    .hero-art-wrap { display: flex; justify-content: center; align-items: center; position: relative; min-height: 310px; }
    .hero-art-glow { position: absolute; width: 290px; height: 290px; border-radius: 50%; background: rgba(0,163,255,.28); filter: blur(65px); opacity: calc(.8 * var(--site-decoration-opacity)); }
    .hero-art { width: min(290px, 72%); aspect-ratio: 1; object-fit: cover; border-radius: 23px; transform: rotate(5deg); box-shadow: 0 28px 65px rgba(0,0,0,.34); position: relative; z-index: 1; animation: hoverArt 6s ease-in-out infinite; }
    @keyframes hoverArt { 0%,100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
    .hero-orbit { position: absolute; width: 350px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,163,255,.18); transform: rotate(-18deg) scaleY(.42); }
    .hero-orbit::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--site-primary); top: 18%; left: 18%; box-shadow: 0 0 20px var(--site-primary); }
    .mix-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
    .mix-card { min-width: 0; padding: 13px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
    .mix-card:hover { transform: translateY(-4px); border-color: rgba(0,163,255,.35); background: var(--surface-2); }
    .mix-art { width: 100%; aspect-ratio: 1.25; object-fit: cover; border-radius: 11px; display: block; margin-bottom: 13px; }
    .mix-card strong { display: block; font-size: 12px; font-weight: 650; margin-bottom: 5px; }
    .mix-card span { display: block; color: var(--muted); font-size: 11px; }
    .track-list { border-top: 1px solid var(--border); }
    .track-row {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) minmax(70px, .55fr) 46px 100px;
      gap: 14px;
      align-items: center;
      min-height: 66px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      border-radius: 10px;
      transition: background .18s ease;
    }
    .track-row:hover { background: var(--surface-2); }
    .track-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; }
    .track-primary { min-width: 0; }
    .track-primary strong, .track-primary span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .track-primary strong { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
    .track-primary span, .track-album, .track-duration { color: var(--muted); font-size: 11px; }
    .track-album { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .track-duration { text-align: right; font-variant-numeric: tabular-nums; }
    .track-actions { display: flex; justify-content: end; gap: 1px; }
    .track-row.has-local-remove .track-actions .tiny-btn { width: 24px; flex: 0 0 24px; }
    .tiny-btn { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: .18s ease; }
    .tiny-btn:hover { color: var(--site-primary); background: var(--blue-soft); }
    .tiny-btn svg { width: 16px; height: 16px; }
    .tiny-btn.liked { color: #FF7291; }
    .search-panel { margin-top: 8px; }
    .search-large { height: 62px; width: 100%; border: 1px solid var(--border); border-radius: 17px; display: flex; align-items: center; gap: 14px; padding: 0 19px; background: var(--surface); box-shadow: var(--shadow); }
    .search-large svg { width: 21px; height: 21px; color: var(--muted); flex: 0 0 auto; }
    .search-large input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; }
    .search-large input::placeholder { color: var(--muted); }
    .search-tabs { display: flex; gap: 8px; margin: 22px 0 20px; flex-wrap: wrap; }
    .filter-chip { border: 1px solid var(--border); border-radius: 99px; background: transparent; padding: 8px 14px; color: var(--muted); font-size: 11px; cursor: pointer; transition: .18s ease; }
    .filter-chip.active, .filter-chip:hover { background: var(--blue-soft); color: var(--site-primary); border-color: rgba(0,163,255,.3); }
    .empty-state { padding: 54px 22px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); }
    .empty-state svg { width: 32px; height: 32px; margin-bottom: 13px; color: var(--site-primary); }
    .empty-state strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 7px; }
    .page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 5px 0 28px; }
    .page-heading h1 { margin: 8px 0 9px; }
    .page-heading p { color: var(--muted); font-size: 13px; margin: 0; }
    .library-top { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 32px; }
    .library-heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .local-music-status { margin: -13px 0 22px; color: var(--muted); font-size: 11px; }
    .local-track-label { color: var(--muted); font-size: 10px; }
    .local-track-remove { font-size: 17px; }
    .library-tile { min-height: 142px; padding: 22px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; gap: 17px; cursor: pointer; transition: .2s ease; }
    .library-tile:hover { border-color: rgba(0,163,255,.34); transform: translateY(-2px); }
    .library-tile-icon { width: 54px; height: 54px; border-radius: 15px; flex: 0 0 auto; display: grid; place-items: center; color: var(--site-primary); background: var(--blue-soft); }
    .library-tile-icon svg { width: 23px; height: 23px; }
    .library-tile strong { display: block; font-size: 13px; margin-bottom: 5px; }
    .library-tile span { font-size: 11px; color: var(--muted); }
    .playlist-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
    .playlist-card { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; gap: 13px; align-items: center; cursor: pointer; transition: .2s ease; }
    .playlist-card:hover { border-color: rgba(0,163,255,.34); transform: translateY(-2px); }
    .playlist-card img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; }
    .playlist-card strong { display: block; font-size: 12px; margin-bottom: 5px; }
    .playlist-card span { color: var(--muted); font-size: 10px; }
    .ai-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .7fr); gap: 20px; align-items: stretch; }
    .ai-chat { min-height: 550px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; }
    .ai-chat-head { padding: 22px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 13px; }
    .ai-orb { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #06131E; background: radial-gradient(circle at 30% 25%, #9BE1FF, #00A3FF 63%, #3973D8); box-shadow: 0 8px 22px rgba(0,163,255,.25); }
    .ai-orb svg { width: 21px; height: 21px; }
    .ai-chat-head strong { display: block; font-size: 13px; margin-bottom: 4px; }
    .ai-chat-head span { color: var(--muted); font-size: 10px; }
    .ai-status { margin-left: auto; font-size: 9px; color: var(--green); letter-spacing: .08em; text-transform: uppercase; }
    .chat-messages { flex: 1; min-height: 340px; padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
    .message { max-width: 82%; display: flex; flex-direction: column; gap: 7px; }
    .message.user { align-self: end; align-items: end; }
    .message.assistant { align-self: start; }
    .message-bubble { padding: 13px 15px; border-radius: 15px; background: var(--surface-2); color: var(--subtle); font-size: 12px; line-height: 1.65; }
    .message.user .message-bubble { background: var(--blue-soft); color: var(--text); border: 1px solid rgba(0,163,255,.16); }
    .message-meta { font-size: 9px; color: var(--muted); }
    .suggestion-row { padding: 0 22px 14px; display: flex; gap: 8px; flex-wrap: wrap; }
    .suggestion { border: 1px solid var(--border); border-radius: 99px; background: transparent; color: var(--muted); font-size: 10px; padding: 8px 11px; cursor: pointer; transition: .18s ease; }
    .suggestion:hover { color: var(--site-primary); border-color: rgba(0,163,255,.34); background: var(--blue-soft); }
    .chat-compose { padding: 13px 17px 17px; border-top: 1px solid var(--border); display: flex; gap: 9px; }
    .chat-compose input { min-width: 0; flex: 1; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); padding: 0 13px; font-size: 11px; outline: 0; }
    .chat-send { width: 44px; height: 44px; border: 0; border-radius: 12px; color: var(--site-on-primary); background: var(--site-primary); display: grid; place-items: center; cursor: pointer; }
    .chat-send svg { width: 17px; height: 17px; }
    .ai-side { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 22px; }
    .ai-side h3 { margin: 0 0 8px; }
    .ai-side p { font-size: 11px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
    .ai-feature { padding: 14px; margin-bottom: 10px; border-radius: 13px; background: var(--surface-2); display: flex; align-items: center; gap: 12px; }
    .ai-feature svg { width: 18px; height: 18px; color: var(--site-primary); flex: 0 0 auto; }
    .ai-feature strong { font-size: 11px; display: block; margin-bottom: 4px; }
    .ai-feature span { font-size: 9px; color: var(--muted); }
    .ai-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; line-height: 1.6; }
    .recommend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .recommend-card { min-height: 196px; padding: 19px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); position: relative; overflow: hidden; cursor: pointer; transition: .22s ease; }
    .recommend-card:hover { transform: translateY(-3px); border-color: rgba(0,163,255,.34); }
    .recommend-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -50px; bottom: -65px; border-radius: 50%; background: var(--card-glow, rgba(0,163,255,.16)); filter: blur(24px); opacity: var(--site-decoration-opacity); }
    .recommend-card .eyebrow { font-size: 9px; }
    .recommend-card h3 { font-size: 17px; margin: 17px 0 7px; max-width: 200px; }
    .recommend-card p { color: var(--muted); font-size: 10px; line-height: 1.5; max-width: 220px; }
    .recommend-card button { position: absolute; z-index: 1; bottom: 15px; right: 15px; width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--site-on-primary); background: var(--site-primary); cursor: pointer; }
    .recommend-card button svg { width: 14px; height: 14px; }
    .player-bar {
      position: fixed;
      left: 82px;
      right: 0;
      bottom: 0;
      min-height: 94px;
      z-index: 8;
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.35fr) minmax(180px, 1fr);
      align-items: center;
      gap: 20px;
      padding: 12px clamp(20px, 3vw, 42px);
      border-top: 1px solid var(--border);
      background: light-dark(rgba(255,255,255,.92), rgba(14,18,25,.94));
      backdrop-filter: blur(28px);
      box-shadow: 0 -14px 50px rgba(0,0,0,.06);
    }
    .now-playing { min-width: 0; display: flex; align-items: center; gap: 12px; }
    .now-art { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; box-shadow: 0 5px 18px rgba(0,0,0,.2); flex: 0 0 auto; }
    .now-meta { min-width: 0; }
    .now-meta > strong, .now-meta > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .now-meta strong { font-size: 11px; font-weight: 650; margin-bottom: 5px; }
    .now-meta > span { color: var(--muted); font-size: 10px; }
    .player-center { width: 100%; max-width: 520px; justify-self: center; }
    .player-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 7px; }
    .control-btn { width: 28px; height: 28px; border: 0; border-radius: 9px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; transition: .18s ease; }
    .control-btn:hover, .control-btn.active { color: var(--site-primary); }
    .control-btn svg { width: 16px; height: 16px; }
    .control-btn.play { width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: var(--bg); }
    .control-btn.play:hover { transform: scale(1.07); background: var(--site-primary); color: var(--site-on-primary); }
    .control-btn.play svg { width: 16px; height: 16px; }
    .progress-line { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
    .progress-line input { flex: 1; min-width: 0; height: 3px; accent-color: var(--site-primary); cursor: pointer; }
    input[type="range"] { -webkit-appearance: none; appearance: none; background: light-dark(#DCE3EA, #303B49); border-radius: 99px; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: var(--site-primary); box-shadow: 0 0 0 3px rgba(0,163,255,.12); }
    input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--site-primary); }
    .player-tools { display: flex; align-items: center; justify-content: end; gap: 10px; }
    .volume { display: flex; align-items: center; gap: 8px; width: 114px; }
    .volume svg { width: 16px; height: 16px; color: var(--muted); }
    .volume input { width: 75px; height: 3px; }
    .player-tool { position: relative; width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; display: grid; place-items: center; }
    .player-tool:hover, .player-tool.active { color: var(--site-primary); background: var(--blue-soft); }
    .player-tool svg { width: 17px; height: 17px; }
    .drawer-backdrop { position: fixed; z-index: 9; inset: 0; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
    .drawer-backdrop.open { opacity: 1; pointer-events: auto; }
    .drawer {
      position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
      background: var(--surface); border-left: 1px solid var(--border); box-shadow: -20px 0 70px rgba(0,0,0,.2);
      transform: translateX(102%); transition: transform .32s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column;
    }
    .drawer.open { transform: translateX(0); }
    .drawer-head { height: 76px; flex: 0 0 76px; padding: 0 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    .drawer-head strong { font-size: 13px; }
    .drawer-tabs { display: flex; padding: 13px 20px 0; gap: 9px; border-bottom: 1px solid var(--border); }
    .drawer-tab { border: 0; border-bottom: 2px solid transparent; padding: 9px 4px 11px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
    .drawer-tab.active { color: var(--site-primary); border-color: var(--site-primary); }
    .drawer-content { flex: 1; overflow: auto; padding: 18px 20px 28px; }
    .queue-row { display: flex; align-items: center; gap: 11px; padding: 9px 7px; border-radius: 10px; cursor: pointer; }
    .queue-row:hover { background: var(--surface-2); }
    .queue-row.current { background: var(--blue-soft); }
    .queue-row img { width: 39px; height: 39px; object-fit: cover; border-radius: 8px; }
    .queue-row div { min-width: 0; flex: 1; }
    .queue-row strong, .queue-row span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .queue-row strong { font-size: 11px; margin-bottom: 4px; }
    .queue-row span { font-size: 9px; color: var(--muted); }
    .queue-row small { color: var(--muted); font-size: 9px; }
    .lyrics-cover { width: 130px; height: 130px; object-fit: cover; border-radius: 16px; display: block; margin: 4px auto 20px; box-shadow: var(--shadow); }
    .lyrics-title { text-align: center; font-size: 14px; margin-bottom: 5px; }
    .lyrics-artist { text-align: center; color: var(--muted); font-size: 10px; margin-bottom: 26px; }
    .lyrics-lines { text-align: center; font-size: 14px; font-weight: 570; line-height: 2.15; letter-spacing: -.02em; color: var(--muted); }
    .lyrics-lines .current-line { color: var(--text); text-shadow: 0 0 20px rgba(0,163,255,.3); }
    .modal-backdrop { position: fixed; z-index: 20; inset: 0; padding: 20px; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); }
    .modal-backdrop.open { display: flex; }
    .modal { width: min(430px, 100%); padding: 26px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); animation: viewIn .25s ease both; }
    .modal h2 { margin: 0 0 8px; }
    .modal p { color: var(--muted); font-size: 11px; line-height: 1.55; margin-bottom: 20px; }
    .modal input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); color: var(--text); outline: 0; font-size: 12px; margin-bottom: 15px; }
    .modal-actions { display: flex; justify-content: end; gap: 9px; }
    .toast { position: fixed; z-index: 30; left: 50%; bottom: 116px; transform: translate(-50%, 12px); padding: 11px 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); font-size: 11px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .22s ease; white-space: nowrap; }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }
    .mobile-nav { display: none; }
    .mobile-player-open { display: none; }
    .artist-row { display: flex; flex-wrap: wrap; gap: 15px; }
    .artist-card { width: 118px; text-align: center; cursor: pointer; }
    .artist-card img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 1px solid var(--border); }
    .artist-card strong { display: block; font-size: 11px; margin-bottom: 4px; }
    .artist-card span { color: var(--muted); font-size: 9px; }
    .profile-pop { position: absolute; display: none; z-index: 15; left: 92px; bottom: 20px; width: 210px; padding: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
    .profile-pop.open { display: block; }
    .profile-pop button, .profile-pop a { display:block; width:100%; text-align:left; padding:11px 10px; background:transparent; border:0; border-radius:8px; font-size:11px; color:var(--subtle); cursor:pointer; text-decoration:none; }
    .profile-pop button:hover, .profile-pop a:hover { color:var(--text); background:var(--surface-2); }
    .footer-note { color: var(--muted); font-size: 9px; margin-top: 28px; line-height: 1.65; }

    @media (max-width: 1050px) {
      .mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .player-bar { grid-template-columns: minmax(150px, .8fr) minmax(260px, 1.2fr) minmax(120px, .7fr); gap: 10px; }
      .volume { display: none; }
      .ai-layout { grid-template-columns: 1fr; }
      .ai-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .ai-side h3, .ai-side p, .ai-note { grid-column: 1 / -1; }
      .ai-feature { margin: 0; }
    }
    @media (max-width: 760px) {
      .sidebar { width: 60px; flex-basis: 60px; padding: 15px 6px; }
      .brand-mark { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 25px; }
      .nav-btn, .side-action { width: 42px; height: 42px; }
      .nav-btn.active::before { left: -7px; }
      .topbar { height: 64px; flex-basis: 64px; padding: 0 16px; }
      .top-context { font-size: 10px; }
      .search-trigger { min-width: 40px; width: 40px; justify-content: center; padding: 0; }
      .search-trigger span:not(.shortcut) { display: none; }
      .shortcut { display: none; }
      .content { padding: 24px 16px 176px; }
      .hero { grid-template-columns: 1fr; min-height: 0; padding: 26px 23px 20px; }
      .hero-copy h1 { font-size: calc(34px * var(--site-heading-scale)); }
      .hero-copy p { font-size: 12px; }
      .hero-art-wrap { min-height: 210px; }
      .hero-art { width: 168px; border-radius: 17px; }
      .hero-orbit { width: 220px; }
      .hero-art-glow { width: 180px; height: 180px; }
      .section-head { margin-top: 28px; }
      .mix-grid { gap: 10px; }
      .mix-card { padding: 9px; }
      .track-row { grid-template-columns: 34px minmax(0,1fr) 40px 92px; gap: 9px; }
      .track-album { display: none; }
      .track-thumb { width: 34px; height: 34px; }
      .player-bar { left: 60px; right: 0; bottom: 58px; min-height: 76px; grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; gap: 8px; }
      .now-art { width: 42px; height: 42px; }
      .player-center { display: none; }
      .player-tools { gap: 3px; }
      .player-tool { width: 30px; height: 30px; }
      .mobile-player-open { display: grid; }
      .mobile-nav { position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; height: 58px; display: flex; align-items: center; justify-content: space-around; border-top: 1px solid var(--border); background: light-dark(rgba(255,255,255,.96), rgba(10,13,19,.97)); backdrop-filter: blur(22px); }
      .mobile-nav button { width: 50px; height: 48px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); }
      .mobile-nav button.active { color: var(--site-primary); }
      .mobile-nav svg { width: 19px; height: 19px; }
      .player-bar .player-tool[data-action="lyrics"], .player-bar .player-tool[data-action="queue"]:not(.mobile-player-open) { display: none; }
      .drawer { top: 0; width: min(100%, 420px); }
      .playlist-strip { grid-template-columns: 1fr; }
      .library-top { grid-template-columns: 1fr; }
      .recommend-grid { grid-template-columns: 1fr 1fr; }
      .ai-side { display: block; }
      .ai-feature { margin-bottom: 9px; }
      .page-heading { align-items: start; flex-direction: column; }
      .toast { bottom: 145px; max-width: calc(100vw - 30px); white-space: normal; text-align: center; }
    }
    @media (max-width: 420px) {
      .mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mix-card strong { font-size: 10px; }
      .mix-card span { font-size: 9px; }
      .recommend-grid { grid-template-columns: 1fr; }
      .track-duration { font-size: 9px; }
      .player-tools { gap: 0; }
      .now-meta strong { max-width: 145px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    /* MauCloud's quieter, catalogue-first direction */
    .sidebar {
      width: 214px;
      flex-basis: 214px;
      align-items: stretch;
      padding: 27px 16px 18px;
      background: var(--bg);
      backdrop-filter: none;
    }
    .brand-mark {
      width: auto;
      height: 34px;
      justify-content: flex-start;
      place-items: center start;
      padding-left: 11px;
      margin-bottom: 38px;
      border-radius: 0;
      color: var(--text);
      background: transparent;
      box-shadow: none;
    }
    .brand-mark svg { display: none; }
    .brand-word { font-size: 19px; font-weight: 720; letter-spacing: -.055em; }
    .brand-word span { margin-left: 5px; color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .08em; }
    .nav-stack { align-items: stretch; gap: 4px; }
    .nav-btn, .side-action {
      width: 100%;
      height: 43px;
      display: flex;
      justify-content: flex-start;
      gap: 13px;
      padding: 0 12px;
      border-radius: 9px;
      transform: none;
    }
    .nav-btn:hover, .side-action:hover { transform: none; }
    .nav-btn.active { color: var(--text); background: var(--surface-2); }
    .nav-btn.active::before { left: 0; width: 2px; height: 18px; box-shadow: none; }
    .nav-label { font-size: 12px; font-weight: 540; }
    .tooltip { display: none; }
    .sidebar-bottom { align-items: stretch; }
    .avatar { align-self: flex-start; margin: 8px 0 0 6px; }
    .profile-pop { left: 224px; }
    .workspace { background: var(--bg); }
    .topbar {
      height: 64px;
      flex-basis: 64px;
      background: var(--bg);
      backdrop-filter: none;
    }
    .top-context { font-size: 10px; letter-spacing: .11em; }
    .search-trigger { min-width: 265px; border-radius: 9px; background: var(--surface-2); }
    .icon-btn { border-radius: 9px; background: transparent; }
    .content { max-width: 1460px; padding: 42px clamp(24px, 4.5vw, 68px) 138px; }
    .home-intro { margin: 6px 0 42px; }
    .home-intro h1 { max-width: 700px; margin: 11px 0 10px; font-size: calc(clamp(34px, 4vw, 46px) * var(--site-heading-scale)); }
    .home-intro p { color: var(--muted); font-size: 13px; margin: 0; }
    .section-head { margin: 40px 0 18px; }
    .section-head .eyebrow { margin-bottom: 7px; }
    .section-head h2 { font-size: 19px; }
    .album-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 17px; }
    .album-card { min-width: 0; cursor: pointer; }
    .album-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; margin-bottom: 11px; transition: opacity .2s ease; }
    .album-card:hover img { opacity: .82; }
    .album-card strong, .album-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .album-card strong { font-size: 12px; font-weight: 620; margin-bottom: 5px; }
    .album-card span { color: var(--muted); font-size: 10px; }
    .artist-card { width: 104px; }
    .artist-card img { width: 78px; height: 78px; }
    .track-row { min-height: 59px; grid-template-columns: 34px minmax(0, 1fr) minmax(90px, .65fr) 44px 100px; gap: 12px; padding: 7px 8px; border-radius: 7px; }
    .track-thumb { width: 34px; height: 34px; border-radius: 5px; }
    .track-primary strong { font-size: 12px; }
    .track-primary span, .track-album, .track-duration { font-size: 10px; }
    .filter-chip { border-radius: 7px; }
    .search-large { border-radius: 10px; box-shadow: none; background: var(--surface-2); }
    .player-bar {
      left: 214px;
      min-height: 82px;
      padding: 10px 28px;
      background: var(--bg);
      box-shadow: none;
      backdrop-filter: none;
    }
    .now-art { width: 44px; height: 44px; border-radius: 5px; box-shadow: none; }
    .now-meta > span::after { content: " · DEMO AUDIO"; font-size: 8px; letter-spacing: .06em; }
    .control-btn.play { background: var(--site-primary); color: var(--site-on-primary); }
    .control-btn.play:hover { background: var(--site-primary); }
    .hero, .mix-card, .recommend-card, .library-tile, .playlist-card, .ai-chat, .ai-side { box-shadow: none; }
    .ai-chat, .ai-side, .library-tile, .playlist-card { border-radius: 10px; }
    .footer-note { max-width: 780px; line-height: 1.65; }
    @media (max-width: 1050px) { .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 760px) {
      .sidebar { display: none; }
      .content { padding: 28px 17px 176px; }
      .topbar { padding: 0 16px; }
      .search-trigger { min-width: 40px; }
      .player-bar { left: 0; }
      .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
      .home-intro { margin-bottom: 30px; }
      .home-intro h1 { font-size: 33px; }
    }
    @media (max-width: 420px) { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* Full-screen listening view — the player is the home screen. */
    .sidebar {
      width: 76px;
      flex: 0 0 76px;
      align-items: center;
      padding: 22px 10px 18px;
      background: #090C11;
      border-right: 1px solid rgba(255,255,255,.07);
      backdrop-filter: none;
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      padding: 0;
      margin: 0 0 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #06131E;
      background: #00A3FF;
      box-shadow: none;
    }
    .brand-mark svg { display: block; width: 22px; height: 22px; }
    .nav-stack { align-items: center; gap: 9px; }
    .nav-btn, .side-action {
      width: 46px;
      height: 46px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #84909E;
      transform: none;
    }
    .nav-btn:hover, .side-action:hover { transform: none; background: rgba(255,255,255,.06); color: #E9EEF4; }
    .nav-btn.active { color: #00A3FF; background: rgba(0,163,255,.11); }
    .nav-btn.active::before { left: -15px; width: 2px; height: 18px; background: #00A3FF; box-shadow: none; }
    .nav-label {
      position: absolute;
      z-index: 20;
      left: 54px;
      top: 50%;
      display: block;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 7px;
      background: #171D26;
      color: #F1F5F9;
      font-size: 11px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transform: translate(3px,-50%);
      transition: opacity .16s ease, transform .16s ease;
    }
    .nav-btn:hover .nav-label, .side-action:hover .nav-label { opacity: 1; transform: translate(0,-50%); }
    .tooltip { display: none; }
    .sidebar-bottom { align-items: center; }
    .avatar { align-self: center; margin: 8px 0 0; }
    .profile-pop { left: 86px; }
    .workspace { height: 100vh; min-height: 100vh; background: #080B10; }
    body[data-view="player"] .topbar,
    body[data-view="player"] .player-bar { display: none; }
    body[data-view="player"] .content { width: 100%; max-width: none; height: 100vh; min-height: 0; padding: 0; margin: 0; overflow: hidden; }
    .player-screen { color: #F1F5F9; background: #080B10; }
    .player-screen.active {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }
    .player-main {
      position: relative;
      min-width: 0;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 34px 36px;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 42%, rgba(35,70,98,.16), transparent 48%), #080B10;
    }
    .player-main-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: min(100%, 590px);
      min-width: 0;
    }
    .player-context {
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      color: #748194;
      font-size: 9px;
      letter-spacing: .12em;
    }
    .player-context strong { color: #B9C4D0; font-weight: 600; letter-spacing: .16em; }
    .player-art-wrap { position: relative; display: grid; place-items: center; margin-bottom: 27px; }
    .player-art-glow {
      position: absolute;
      inset: 13%;
      border-radius: 50%;
      background: var(--player-glow, rgba(0,163,255,.18));
      filter: blur(65px);
      opacity: .52;
      transition: background .5s ease;
    }
    .player-artwork {
      position: relative;
      z-index: 1;
      display: block;
      width: min(43vh, 420px, 58vw);
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 3px;
      box-shadow: 0 24px 72px rgba(0,0,0,.38);
    }
    .player-track-info { width: min(100%, 420px); text-align: center; }
    .player-track-info h1 {
      margin: 0 0 8px;
      color: #F1F4F8;
      font-size: clamp(22px, 2.35vw, 29px);
      font-weight: 630;
      letter-spacing: -.045em;
    }
    .player-track-info p { margin: 0; color: #A0ACBA; font-size: 12px; }
    .player-track-info p .track-album-label { color: #6F7C8D; }
    .stage-actions { display: flex; align-items: center; gap: 19px; margin: 19px 0 18px; }
    .stage-icon-btn {
      width: 34px;
      height: 34px;
      padding: 0;
      border: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: transparent;
      color: #8390A0;
      cursor: pointer;
      transition: color .16s ease, transform .16s ease;
    }
    .stage-icon-btn:hover, .stage-icon-btn.active { color: #00A3FF; }
    .stage-icon-btn svg { width: 18px; height: 18px; }
    .stage-icon-btn.main-play { width: 52px; height: 52px; color: #07131D; background: #F1F5F9; }
    .stage-icon-btn.main-play:hover { color: #07131D; background: #FFFFFF; transform: scale(1.04); }
    .stage-icon-btn.main-play svg { width: 22px; height: 22px; }
    .stage-progress {
      display: flex;
      align-items: center;
      gap: 10px;
      width: min(100%, 450px);
      color: #738093;
      font-size: 9px;
      font-variant-numeric: tabular-nums;
    }
    .stage-progress input { flex: 1; min-width: 0; height: 3px; accent-color: #00A3FF; cursor: pointer; }
    .stage-volume { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: #718094; }
    .stage-volume svg { width: 15px; height: 15px; }
    .stage-volume input { width: 86px; height: 3px; accent-color: #00A3FF; }
    .player-aside {
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 27px 21px 20px;
      border-left: 1px solid rgba(255,255,255,.075);
      background: #0B0F15;
      overflow: hidden;
    }
    .player-aside-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.075); }
    .player-aside-head strong { color: #E5EBF2; font-size: 12px; font-weight: 580; }
    .player-aside-head span { color: #687688; font-size: 9px; letter-spacing: .1em; }
    .stage-tabs { display: flex; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.075); }
    .stage-tab { padding: 14px 0 11px; border: 0; border-bottom: 2px solid transparent; color: #7B8797; background: transparent; font-size: 11px; cursor: pointer; }
    .stage-tab.active { color: #EDF2F7; border-color: #00A3FF; }
    .stage-side-content { flex: 1; min-height: 0; overflow: auto; padding-top: 18px; }
    .stage-lyrics-placeholder { display: flex; flex-direction: column; justify-content: center; min-height: 300px; }
    .stage-lyrics-placeholder .eyebrow { color: #00A3FF; font-size: 9px; }
    .stage-lyrics-placeholder h2 { margin: 12px 0 9px; color: #E8EEF5; font-size: 20px; font-weight: 570; }
    .stage-lyrics-placeholder p { max-width: 235px; color: #8290A1; font-size: 11px; line-height: 1.75; }
    .stage-lyrics-track { margin-top: 25px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.075); }
    .stage-lyrics-track strong, .stage-lyrics-track span { display: block; }
    .stage-lyrics-track strong { margin-bottom: 5px; color: #D9E1E9; font-size: 11px; }
    .stage-lyrics-track span { color: #7E8B9B; font-size: 10px; }
    .stage-queue-row { display: flex; align-items: center; gap: 10px; padding: 8px 5px; border-radius: 6px; cursor: pointer; }
    .stage-queue-row:hover, .stage-queue-row.current { background: rgba(255,255,255,.05); }
    .stage-queue-row img { width: 37px; height: 37px; border-radius: 3px; object-fit: cover; }
    .stage-queue-row div { min-width: 0; flex: 1; }
    .stage-queue-row strong, .stage-queue-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stage-queue-row strong { margin-bottom: 4px; color: #E1E7EE; font-size: 10px; font-weight: 550; }
    .stage-queue-row span, .stage-queue-row small { color: #7B8797; font-size: 9px; }
    @media (max-width: 980px) {
      .player-screen.active { grid-template-columns: minmax(0,1fr) 260px; }
      .player-aside { padding: 23px 17px; }
      .player-main { padding-left: 22px; padding-right: 22px; }
      .player-artwork { width: min(39vh, 350px, 54vw); }
    }
    @media (max-width: 720px) {
      .sidebar { display: none; }
      body[data-view="player"] .player-bar { display: none; }
      .player-screen.active { grid-template-columns: minmax(0,1fr); overflow-y: auto; }
      .player-main { min-height: calc(100vh - 58px); padding: 22px 16px 32px; }
      .player-context { margin-bottom: 15px; }
      .player-artwork { width: min(43vh, 340px, 76vw); }
      .player-art-wrap { margin-bottom: 22px; }
      .player-aside { display: none; }
      body[data-view="player"] .mobile-nav { display: flex; }
    }

    /* Apple-inspired listening canvas: soft glass, generous radius, quiet motion. */
    :root {
      --glass-line: rgba(255,255,255,.10);
      --glass-fill: rgba(23,29,39,.58);
      --glass-deep: rgba(13,18,26,.72);
    }
    .app-root {
      background-color: #080B10;
      background-image:
        radial-gradient(ellipse at 48% 36%, rgba(26,65,94,.22), transparent 48%),
        linear-gradient(145deg, #0A0E14, #080A0F 58%, #0D1119);
    }
    .ambient-a { opacity: .12; filter: blur(120px); }
    .ambient-b { opacity: .09; filter: blur(120px); }
    .sidebar {
      width: 68px;
      flex: 0 0 68px;
      min-height: calc(100vh - 28px);
      height: calc(100vh - 28px);
      margin: 14px 0 14px 14px;
      padding: 15px 9px 14px;
      border: 1px solid var(--glass-line);
      border-radius: 21px;
      background: rgba(20,26,35,.48);
      backdrop-filter: blur(34px) saturate(155%);
      -webkit-backdrop-filter: blur(34px) saturate(155%);
      box-shadow: 0 16px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.045);
    }
    .brand-mark {
      width: 39px;
      height: 39px;
      margin: 0 0 30px;
      border-radius: 13px;
      background: linear-gradient(145deg, #42B8FF, #008DE8);
      box-shadow: 0 5px 18px rgba(0,163,255,.22), inset 0 1px 0 rgba(255,255,255,.3);
    }
    .nav-stack { gap: 7px; }
    .nav-btn, .side-action {
      width: 43px;
      height: 43px;
      border-radius: 13px;
      color: #8793A2;
      transition: color .22s ease, background .22s ease, transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .22s ease;
    }
    .nav-btn:hover, .side-action:hover { color: #F4F7FA; background: rgba(255,255,255,.075); transform: scale(1.045); }
    .nav-btn.active { color: #ECF7FF; background: rgba(0,163,255,.17); box-shadow: inset 0 0 0 1px rgba(0,163,255,.13); }
    .nav-btn.active::before { display: none; }
    .nav-btn svg, .side-action svg { width: 19px; height: 19px; stroke-width: 1.65; }
    .nav-label { left: 50px; border-color: rgba(255,255,255,.11); border-radius: 9px; background: rgba(28,35,46,.84); backdrop-filter: blur(20px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
    .sidebar-bottom { gap: 9px; }
    .avatar { width: 34px; height: 34px; border-color: rgba(255,255,255,.22); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
    .profile-pop { left: 76px; bottom: 15px; border: 1px solid var(--glass-line); border-radius: 16px; background: rgba(22,28,38,.82); backdrop-filter: blur(28px) saturate(145%); }
    .workspace { min-height: 100vh; height: 100vh; background: transparent; }
    .player-screen.active {
      grid-template-columns: minmax(0,1fr) 326px;
      gap: 14px;
      padding: 14px 14px 14px 16px;
      background: transparent;
    }
    .player-main {
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 27px;
      padding: clamp(25px,4vh,42px) 34px;
      background: linear-gradient(145deg, rgba(28,37,50,.43), rgba(13,18,26,.55));
      backdrop-filter: blur(22px) saturate(120%);
      -webkit-backdrop-filter: blur(22px) saturate(120%);
      box-shadow: 0 22px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055);
    }
    .player-main::before {
      width: min(62vw,760px);
      top: 2%;
      background: radial-gradient(circle, var(--player-glow, rgba(0,163,255,.17)), transparent 68%);
      filter: blur(78px);
      opacity: .22;
      transition: opacity .6s ease;
    }
    .player-main-inner { width: min(100%, 620px); }
    .player-context { margin-bottom: clamp(15px,2.6vh,27px); color: rgba(180,193,208,.55); font-size: 9px; letter-spacing: .14em; }
    .player-context strong { color: rgba(231,239,247,.84); font-size: 10px; letter-spacing: .18em; }
    .player-art-wrap { margin-bottom: clamp(20px,3.2vh,34px); }
    .player-art-glow { inset: 10%; filter: blur(76px); opacity: .46; }
    .player-artwork {
      width: min(48vh, 465px, 58vw);
      border-radius: 21px;
      box-shadow: 0 28px 85px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.10);
      animation: cover-arrive .65s cubic-bezier(.2,.75,.2,1) both;
    }
    @keyframes cover-arrive {
      from { opacity: .55; transform: translateY(9px) scale(.975); filter: blur(5px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    .player-track-info h1 { font-size: clamp(22px,2.15vw,28px); font-weight: 650; letter-spacing: -.05em; }
    .player-track-info p { color: #B8C3D0; font-size: 13px; }
    .stage-actions { gap: 21px; margin: clamp(16px,2.3vh,23px) 0 16px; }
    .stage-icon-btn { color: #9BA7B5; transition: color .2s ease, background .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
    .stage-icon-btn:hover { color: #F4F7FA; transform: scale(1.1); }
    .stage-icon-btn.active { color: #4BB9FF; }
    .stage-icon-btn.main-play {
      width: 56px;
      height: 56px;
      color: #07131D;
      background: linear-gradient(145deg,#F8FAFC,#DCE5ED);
      box-shadow: 0 7px 24px rgba(0,0,0,.25), inset 0 1px 0 #fff;
      transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
    }
    .stage-icon-btn.main-play:hover { transform: scale(1.075); box-shadow: 0 9px 28px rgba(0,0,0,.32), 0 0 0 7px rgba(255,255,255,.035); }
    .stage-progress { color: rgba(173,185,199,.65); width: min(100%,490px); gap: 12px; }
    .stage-progress input { accent-color: #E8EEF5; }
    .stage-progress input::-webkit-slider-thumb { background: #F4F7FA; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
    .stage-volume { margin-top: 19px; color: rgba(155,168,184,.7); }
    .stage-volume input { accent-color: #B6C4D2; }
    .player-aside {
      margin: 0;
      padding: 25px 21px 20px;
      border: 1px solid var(--glass-line);
      border-radius: 25px;
      background: var(--glass-fill);
      backdrop-filter: blur(36px) saturate(155%);
      -webkit-backdrop-filter: blur(36px) saturate(155%);
      box-shadow: 0 18px 58px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.055);
      animation: panel-arrive .55s cubic-bezier(.2,.75,.2,1) both;
    }
    @keyframes panel-arrive { from { opacity: 0; transform: translateX(9px); } to { opacity: 1; transform: translateX(0); } }
    .player-aside-head { border: 0; padding: 3px 1px 19px; }
    .player-aside-head strong { color: #EEF2F6; font-size: 13px; letter-spacing: -.015em; }
    .player-aside-head span { color: #8391A1; font-size: 8px; letter-spacing: .16em; }
    .stage-tabs { gap: 22px; border-color: rgba(255,255,255,.09); }
    .stage-tab { padding: 14px 2px 12px; color: #8491A1; font-size: 11px; transition: color .2s ease, border-color .2s ease; }
    .stage-tab:hover { color: #E5ECF3; }
    .stage-tab.active { color: #F4F7FA; border-color: #4BB9FF; }
    .stage-side-content { padding-top: 16px; }
    .stage-lyrics-placeholder { min-height: 0; height: 100%; justify-content: center; padding: 12px 3px; }
    .stage-lyrics-placeholder .eyebrow { color: #77C9FF; font-size: 8px; letter-spacing: .15em; }
    .stage-lyrics-placeholder h2 { margin: 12px 0 9px; color: #E8EEF4; font-size: 19px; font-weight: 590; letter-spacing: -.03em; }
    .stage-lyrics-placeholder p { color: #A0ADBC; font-size: 11px; line-height: 1.8; }
    .stage-lyrics-track { border-color: rgba(255,255,255,.09); }
    .stage-queue-row { padding: 9px 7px; border-radius: 10px; transition: background .18s ease, transform .2s ease; }
    .stage-queue-row:hover { transform: translateX(2px); background: rgba(255,255,255,.065); }
    .stage-queue-row.current { background: rgba(0,163,255,.105); }
    .stage-queue-row img { width: 40px; height: 40px; border-radius: 7px; }
    .stage-queue-row strong { font-size: 10px; color: #EDF2F7; }
    .stage-queue-row span, .stage-queue-row small { color: #8997A7; }
    .topbar:not([hidden]) { background: rgba(9,13,19,.5); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); }
    .drawer { background: rgba(19,25,34,.82); backdrop-filter: blur(34px) saturate(150%); -webkit-backdrop-filter: blur(34px) saturate(150%); border-color: var(--glass-line); border-radius: 25px 0 0 25px; }
    .modal { background: rgba(22,29,39,.88); backdrop-filter: blur(30px) saturate(150%); border-color: var(--glass-line); border-radius: 24px; }
    .toast { background: rgba(24,32,43,.86); backdrop-filter: blur(22px); border-color: var(--glass-line); border-radius: 14px; }
    .track-row, .album-card, .mix-card, .artist-card, .playlist-card, .library-tile, .recommend-card, .ai-chat, .ai-side {
      transition: transform .28s cubic-bezier(.2,.75,.25,1), background .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .album-card img, .mix-art, .track-thumb, .playlist-card img { border-radius: 12px; }
    .album-card:hover, .mix-card:hover, .playlist-card:hover, .library-tile:hover { transform: translateY(-3px); }
    @media (max-width: 980px) {
      .player-screen.active { gap: 10px; grid-template-columns: minmax(0,1fr) 270px; padding: 10px; }
      .player-main { border-radius: 23px; }
      .player-aside { border-radius: 22px; }
    }
    @media (max-width: 720px) {
      .sidebar { display: none; }
      .player-screen.active { gap: 0; padding: 0; }
      .player-main { margin: 0; min-height: calc(100vh - 58px); border: 0; border-radius: 0; padding: 22px 17px 30px; background: radial-gradient(ellipse at 50% 35%,rgba(35,70,98,.18),transparent 53%),#080B10; }
      .player-aside { display: none; }
      .player-artwork { width: min(44vh,360px,76vw); border-radius: 18px; }
      .mobile-nav { background: rgba(12,17,24,.76); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border-color: rgba(255,255,255,.09); }
    }
    /* MauCloud refresh: neutral materials, clearer hierarchy, more breathing room. */
    :root {
      --bg: #0B0C0E;
      --surface: #151619;
      --surface-2: #1C1E22;
      --surface-3: #25282D;
      --border: rgba(255,255,255,.085);
      --muted: #92969F;
      --subtle: #B9BDC5;
      --text: #F4F5F7;
      --blue-soft: rgba(0,163,255,.085);
      --glass-line: rgba(255,255,255,.09);
      --glass-fill: rgba(22,23,26,.78);
    }
    .app-root {
      background: #0B0C0E;
      background-image: radial-gradient(ellipse at 54% 38%,rgba(255,255,255,.026),transparent 48%),linear-gradient(145deg,#101114,#0B0C0E 62%,#101114);
    }
    .ambient { display: none; }
    .sidebar { background: rgba(20,21,24,.78); border-color: rgba(255,255,255,.075); }
    .nav-btn.active { color: #F4F5F7; background: rgba(255,255,255,.085); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
    .nav-btn.active::before { display: none; }
    .player-main { background: linear-gradient(145deg,rgba(29,30,34,.86),rgba(15,16,19,.94)); border-color: rgba(255,255,255,.08); }
    .player-main::before { display: none; }
    .player-art-glow { background: rgba(255,255,255,.10) !important; filter: blur(92px); opacity: .27; }
    .player-aside { background: rgba(20,21,24,.84); }
    .stage-tab.active { color: #F4F5F7; border-color: #F4F5F7; }
    .stage-icon-btn.active { color: var(--site-primary); }
    .stage-icon-btn.main-play { color: #03111B; background: var(--site-primary); box-shadow: 0 8px 26px rgba(0,0,0,.28); }
    .stage-icon-btn.main-play:hover { color: #03111B; background: #27AEFF; }
    .stage-actions { gap: clamp(18px,2.2vw,29px); margin: 30px 0 24px; }
    .stage-icon-btn { width: 38px; height: 38px; }
    .stage-icon-btn.main-play { width: 60px; height: 60px; }
    .player-art-wrap { margin-bottom: 35px; }
    .player-context { margin-bottom: clamp(22px,3vh,36px); }
    .player-track-info h1 { margin-bottom: 11px; }
    .stage-volume { margin-top: 24px; }
    .player-aside { padding: 30px 24px 24px; }
    .player-aside-head { padding-bottom: 23px; }
    .stage-tabs { gap: 27px; }
    .stage-tab { padding: 16px 2px 13px; }
    .stage-side-content { padding-top: 22px; }
    .topbar { border-color: rgba(255,255,255,.075); }
    .top-search-shell { position: relative; width: min(430px,46vw); }
    .top-search-field { height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 13px; border: 1px solid rgba(255,255,255,.095); border-radius: 13px; background: rgba(255,255,255,.055); color: #A5A9B1; transition: border-color .2s ease,background .2s ease,box-shadow .2s ease; }
    .top-search-field:focus-within { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.075); box-shadow: 0 0 0 4px rgba(255,255,255,.025); }
    .top-search-field svg { width: 17px; height: 17px; flex: 0 0 auto; }
    .top-search-field input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: #F3F4F6; background: transparent; font-size: 12px; }
    .top-search-field input::placeholder { color: #92969F; }
    .top-search-field kbd { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(255,255,255,.10); border-radius: 6px; color: #858A93; font: 10px var(--site-font-body); }
    .global-search-pop { position: absolute; z-index: 30; top: calc(100% + 11px); left: 0; right: 0; max-height: min(68vh,560px); overflow: auto; padding: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(24,25,29,.96); backdrop-filter: blur(32px) saturate(135%); -webkit-backdrop-filter: blur(32px) saturate(135%); box-shadow: 0 22px 70px rgba(0,0,0,.48); animation: panel-arrive .2s ease both; }
    .global-search-pop[hidden] { display: none; }
    .global-search-caption { padding: 8px 10px 9px; color: #858A93; font-size: 9px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
    .global-search-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 11px; background: transparent; color: #F3F4F6; text-align: left; cursor: pointer; transition: background .18s ease; }
    .global-search-item:hover { background: rgba(255,255,255,.075); }
    .global-search-item img { width: 42px; height: 42px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; background: #25272C; }
    .global-search-item span { min-width: 0; display: block; }
    .global-search-item strong,.global-search-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .global-search-item strong { margin-bottom: 4px; font-size: 11px; font-weight: 600; }
    .global-search-item small { color: #989DA6; font-size: 10px; }
    .global-search-footer { width: 100%; margin-top: 7px; padding: 11px 9px 8px; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: transparent; color: #B5BAC2; text-align: left; font-size: 10px; cursor: pointer; }
    .global-search-footer:hover { color: #FFF; }
    .stage-source-link { display: inline-flex; margin-top: 12px; color: #969BA4; font-size: 10px; text-decoration: none; transition: color .18s ease; }
    .stage-source-link:hover { color: #F4F5F7; }
    .now-meta > span::after { content: none !important; }
    .source-link { color: #8F949D; text-decoration: none; }
    .source-link:hover { color: #F4F5F7; text-decoration: underline; }
    .album-card img,.artist-card img,.track-thumb,.stage-queue-row img { background: #22242A; }
    .album-grid { gap: 30px 22px; }
    .album-card img { border-radius: 12px; margin-bottom: 14px; }
    .album-card strong { font-size: 13px; margin-bottom: 6px; }
    .album-card span { font-size: 11px; }
    .artist-row { gap: 22px; }
    .artist-card { width: 112px; }
    .artist-card img { width: 88px; height: 88px; margin-bottom: 13px; }
    .section-head { margin: 48px 0 22px; }
    .track-row { min-height: 68px; padding: 10px 12px; border-radius: 10px; }
    .track-thumb { width: 42px; height: 42px; border-radius: 8px; }
    .track-row:hover { background: rgba(255,255,255,.045); }
    .tiny-btn { width: 35px; height: 35px; border-radius: 10px; }
    .tiny-btn:hover { color: #F4F5F7; background: rgba(255,255,255,.08); }
    .filter-chip { padding: 9px 15px; border-radius: 99px; }
    .filter-chip.active,.filter-chip:hover { background: rgba(255,255,255,.09); color: #F4F5F7; border-color: rgba(255,255,255,.14); }
    .primary-btn { color: #03111B; background: var(--site-primary); box-shadow: none; }
    .primary-btn:hover { box-shadow: 0 8px 24px rgba(0,163,255,.18); }
    .secondary-btn { background: rgba(255,255,255,.055); }
    .mix-card,.recommend-card,.library-tile,.playlist-card,.ai-chat,.ai-side { background: #151619; border-color: rgba(255,255,255,.075); }
    .topbar:not([hidden]) { background: rgba(13,14,17,.72); }
    body[data-view="player"] .topbar { display: flex; position: absolute; top: 14px; left: 14px; right: 14px; width: auto; height: 56px; min-height: 56px; padding: 0 18px; border: 1px solid rgba(255,255,255,.085); border-radius: 18px; background: rgba(19,20,23,.64); backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%); }
    body[data-view="player"] .topbar .top-context { font-size: 9px; }
    body[data-view="player"] .topbar .top-actions { flex: 1; justify-content: flex-end; }
    body[data-view="player"] .top-search-shell { width: min(440px,58vw); }
    body[data-view="player"] .player-context { margin-top: 48px; }
    @media (max-width: 720px) {
      body[data-view="player"] .topbar { top: 9px; left: 9px; right: 9px; height: 50px; min-height: 50px; padding: 0 10px; border-radius: 15px; }
      body[data-view="player"] .topbar .top-context { display: none; }
      body[data-view="player"] .topbar .top-actions { width: 100%; }
      body[data-view="player"] .top-search-shell { width: 100%; }
      body[data-view="player"] .topbar #topQueue { display: none; }
      body[data-view="player"] .player-context { margin-top: 58px; }
      .top-search-shell { width: min(52vw,330px); }
      .top-search-field { height: 40px; }
      .top-search-field kbd { display: none; }
      .global-search-pop { position: fixed; top: 65px; left: 10px; right: 10px; width: auto; max-height: 62vh; }
      .album-grid { gap: 20px 13px; }
      .section-head { margin: 34px 0 17px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .player-artwork, .player-aside { animation: none !important; }
    }
    :root {
      --glass-line: light-dark(rgba(27,39,54,.11),rgba(255,255,255,.10));
      --glass-fill: rgba(23,29,39,.58);
    }
    .app-root {
      background-color: light-dark(#F4F6F9,var(--site-background));
      background-image:
        radial-gradient(ellipse at 48% 36%, light-dark(rgba(26,65,94,.055),rgba(26,65,94,.2)), transparent 48%),
        linear-gradient(145deg, light-dark(#EDF1F6,#0A0E14), light-dark(#E9EDF2,#080A0F) 58%, light-dark(#E5EBF2,#0D1119));
    }
    .sidebar { background: light-dark(rgba(255,255,255,.62),rgba(20,26,35,.48)); }
    .player-main {
      background: light-dark(linear-gradient(145deg,rgba(255,255,255,.72),rgba(230,237,245,.62)),linear-gradient(145deg,rgba(28,37,50,.43),rgba(13,18,26,.55)));
    }
    .player-main::before { opacity: calc(.22 * var(--site-decoration-opacity)); }
    .player-aside { background: light-dark(rgba(255,255,255,.68),var(--glass-fill)); }
    .drawer { background: light-dark(rgba(248,250,253,.9),rgba(19,25,34,.84)); }
    .modal { background: light-dark(rgba(255,255,255,.92),rgba(22,29,39,.9)); }
    .player-bar {
      left: 82px;
      right: 14px;
      bottom: 14px;
      min-height: 80px;
      border: 1px solid var(--glass-line);
      border-radius: 22px;
      background: light-dark(rgba(255,255,255,.78),rgba(18,24,33,.72));
      backdrop-filter: blur(34px) saturate(155%);
      -webkit-backdrop-filter: blur(34px) saturate(155%);
      box-shadow: 0 14px 48px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .nav-btn[data-view="player"] svg { width: 19px; height: 19px; }
    .nav-btn[data-view="player"] .nav-label { font-size: 0; }
    .nav-btn[data-view="player"] .nav-label::after { content: "Главная"; font-size: 11px; }
    .nav-btn[data-view="discover"] .nav-label { font-size: 0; }
    .nav-btn[data-view="discover"] .nav-label::after { content: "Открытия"; font-size: 11px; }
    .stage-lyrics-placeholder p, .stage-lyrics-track span { color: light-dark(#657386,#A0ADBC); }
    .stage-queue-row strong { color: light-dark(#1C2734,#EDF2F7); }
    .stage-queue-row span, .stage-queue-row small { color: light-dark(#728094,#8997A7); }
    .stage-lyrics-placeholder h2, .player-aside-head strong { color: light-dark(#1C2734,#EEF2F6); }
    .stage-tab { color: light-dark(#68778A,#8491A1); }
    .stage-tab.active { color: light-dark(#17202B,#F4F7FA); }
    @media (max-width: 720px) {
      .player-bar { left: 10px; right: 10px; bottom: 68px; border-radius: 17px; }
    }
    /* The player header occupies its own row; it never floats over the artwork. */
    body[data-view="player"] .topbar {
      display: flex;
      position: relative;
      inset: auto;
      flex: 0 0 58px;
      width: auto;
      height: 58px;
      min-height: 58px;
      margin: 14px 14px 0;
      padding: 0 20px;
      z-index: 14;
      border: 1px solid rgba(255,255,255,.085);
      border-radius: 17px;
      background: rgba(19,20,23,.78);
      backdrop-filter: blur(28px) saturate(125%);
      -webkit-backdrop-filter: blur(28px) saturate(125%);
    }
    body[data-view="player"] .content {
      display: block;
      flex: 1 1 auto;
      width: 100%;
      height: calc(100vh - 72px);
      min-height: 0;
      max-width: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    body[data-view="player"] #view-player { height: 100%; min-height: 0; }
    body[data-view="player"] .player-context { margin-top: 0; }
    .catalog-status {
      width: min(100%,460px);
      margin: 18px auto 0;
      padding: 13px 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 13px;
      background: rgba(255,255,255,.035);
      color: #B9BDC5;
      font-size: 11px;
      line-height: 1.6;
      text-align: center;
    }
    .catalog-status button { display: inline-flex; margin: 10px 4px 0; padding: 7px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.07); color: #F4F5F7; font-size: 10px; cursor: pointer; }
    .catalog-status button:hover { background: rgba(255,255,255,.12); }
    .catalog-page-status { margin: 0 0 24px; max-width: 700px; text-align: left; }
    .catalog-status[hidden], .catalog-page-status[hidden] { display: none !important; }
    @media (max-width: 720px) {
      body[data-view="player"] .topbar { flex-basis: 50px; height: 50px; min-height: 50px; margin: 9px 9px 0; padding: 0 10px; }
      body[data-view="player"] .topbar .top-context { display: none; }
      body[data-view="player"] .topbar .top-actions { width: 100%; }
      body[data-view="player"] .top-search-shell { width: 100%; }
      body[data-view="player"] .topbar #topQueue { display: none; }
      body[data-view="player"] .content { height: calc(100vh - 59px); overflow-y: auto; }
      body[data-view="player"] .player-screen.active { min-height: 100%; height: auto; overflow: visible; }
      body[data-view="player"] .player-main { min-height: calc(100vh - 59px); }
      .catalog-status { margin-top: 15px; }
    }
    @media (max-width: 950px) and (min-width: 721px) {
      body[data-view="player"] .topbar .top-context { display: none; }
      body[data-view="player"] .topbar .top-actions { width: 100%; }
      body[data-view="player"] .top-search-shell { width: min(520px,calc(100% - 54px)); margin-left: auto; }
    }
    /* Product shell: persistent navigation, discovery dashboard, and compact player. */
    :root {
      --bg: #0b0d12;
      --surface: #12161e;
      --surface-2: #191f29;
      --surface-3: #222b38;
      --border: rgba(224,235,248,.09);
      --muted: #8c98a9;
      --subtle: #b7c1ce;
      --text: #f2f5f9;
      --site-primary: #00A3FF;
      --blue-soft: rgba(83,177,255,.13);
    }
    html { color-scheme: dark; }
    body { background: #0b0d12; }
    .app-root {
      height: 100vh;
      min-height: 100vh;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 68% 0%, rgba(35,91,139,.13), transparent 38%),
        linear-gradient(145deg,#0d1016,#0b0d12 62%,#0d1118);
    }
    .sidebar {
      width: 244px;
      flex: 0 0 244px;
      min-height: 0;
      height: calc(100vh - 28px);
      margin: 14px 0 14px 14px;
      padding: 20px 14px 14px;
      align-items: stretch;
      border: 1px solid var(--border);
      border-radius: var(--surface-radius,20px);
      background: rgba(17,21,29,.82);
      box-shadow: 0 18px 50px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
      backdrop-filter: blur(26px);
    }
    .brand-mark {
      width: 100%;
      height: auto;
      min-height: 45px;
      margin: 0 0 27px;
      padding: 0 4px;
      display: flex;
      justify-content: flex-start;
      gap: 12px;
      border-radius: 0;
      color: var(--text);
      background: transparent;
      box-shadow: none;
    }
    .brand-mark svg {
      display: block;
      width: 38px;
      height: 38px;
      padding: 9px;
      flex: 0 0 auto;
      border-radius: 12px;
      color: #07131d;
      background: linear-gradient(145deg,#a4dcff,#54b6ff);
      box-shadow: 0 7px 22px rgba(67,173,255,.2);
    }
    .brand-name { display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 13px; font-weight: 750; letter-spacing: .12em; }
    .brand-name small { color: var(--muted); font-size: 8px; font-weight: 550; letter-spacing: .17em; }
    .nav-caption { padding: 0 11px; margin: 0 0 9px; color: #697789; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
    .nav-stack { align-items: stretch; gap: 5px; }
    .nav-btn, .side-action {
      width: 100%;
      height: 43px;
      padding: 0 12px;
      display: flex;
      justify-content: flex-start;
      gap: 12px;
      border-radius: 11px;
      color: #929eae;
    }
    .nav-btn:hover, .side-action:hover { transform: none; background: rgba(255,255,255,.055); color: #f4f7fb; }
    .nav-btn.active { color: #eff8ff; background: rgba(90,176,244,.14); box-shadow: inset 0 0 0 1px rgba(113,192,250,.1); }
    .nav-btn.active::before { display: none; }
    .nav-btn svg, .side-action svg { width: 18px; height: 18px; flex: 0 0 auto; }
    .nav-label, .side-action .nav-label {
      position: static;
      z-index: auto;
      display: block;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: inherit;
      background: transparent;
      box-shadow: none;
      font-size: 11px !important;
      font-weight: 560;
      opacity: 1;
      pointer-events: auto;
      transform: none;
      transition: none;
    }
    .nav-btn[data-view="player"] .nav-label::after,
    .nav-btn[data-view="discover"] .nav-label::after { content: none; }
    .sidebar-bottom { align-items: stretch; gap: 7px; padding-top: 12px; border-top: 1px solid var(--border); }
    .avatar { align-self: flex-start; margin: 4px 0 0 7px; }
    .profile-pop { left: 228px; }
    .workspace { min-width: 0; min-height: 0; height: 100vh; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 4;
      height: 72px;
      min-height: 72px;
      flex-basis: 72px;
      padding: 0 clamp(24px,4vw,56px);
      border-bottom: 1px solid var(--border);
      background: rgba(11,13,18,.78);
      backdrop-filter: blur(22px);
    }
    .top-context { font-size: 10px; letter-spacing: .12em; }
    .top-search-shell { width: min(430px,42vw); }
    .top-search-field { height: 41px; border-radius: 11px; background: rgba(255,255,255,.045); }
    .topbar:not([hidden]) { background: rgba(11,13,18,.78); }
    .content {
      width: 100%;
      max-width: 1500px;
      flex: 1;
      min-height: 0;
      margin: 0 auto;
      padding: 40px clamp(24px,4.2vw,62px) 140px;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-color: rgba(160,177,196,.24) transparent;
      scrollbar-width: thin;
    }
    .home-intro {
      position: relative;
      min-height: 260px;
      margin: 0 0 40px;
      padding: clamp(28px,4vw,48px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      border: 1px solid rgba(164,205,238,.14);
      border-radius: 23px;
      background:
        radial-gradient(ellipse at 78% 50%,rgba(51,131,190,.25),transparent 36%),
        linear-gradient(112deg,#192431 0%,#151c27 53%,#182432 100%);
      box-shadow: 0 24px 70px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.045);
    }
    .home-intro::after {
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      right: 9%;
      top: 50%;
      border: 1px solid rgba(169,218,255,.13);
      border-radius: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 0 25px rgba(169,218,255,.025),0 0 0 54px rgba(169,218,255,.02);
      pointer-events: none;
    }
    .home-intro-copy { position: relative; z-index: 2; max-width: 610px; }
    .home-intro .eyebrow { color: #8acbfa; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
    .home-intro h1 { margin: 13px 0 11px; font-size: clamp(31px,4vw,46px); line-height: 1.08; letter-spacing: -.055em; }
    .home-intro p { max-width: 470px; color: #aab8c7; font-size: 13px; line-height: 1.65; }
    .home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
    .home-hero-actions .primary-btn, .home-hero-actions .secondary-btn { min-height: 40px; padding: 0 15px; border-radius: 10px; font-size: 11px; }
    .home-hero-art { position: absolute; z-index: 1; top: 50%; right: clamp(38px,10vw,150px); width: clamp(130px,17vw,208px); aspect-ratio: 1; transform: translateY(-50%) rotate(5deg); }
    .home-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; background: linear-gradient(145deg,#244969,#13202f 55%,#7b6d59); box-shadow: 0 24px 55px rgba(0,0,0,.4); }
    .section-head { margin: 38px 0 19px; }
    .section-head h2 { font-size: 18px; letter-spacing: -.025em; }
    .album-grid { gap: 27px 19px; }
    .album-card { padding: 10px; margin: -10px; border-radius: 14px; }
    .album-card:hover { background: rgba(255,255,255,.035); }
    .album-card img { border-radius: 11px; box-shadow: 0 9px 24px rgba(0,0,0,.2); }
    .album-card strong { font-size: 12px; }
    .album-card span { font-size: 10px; }
    .track-list { border-top-color: var(--border); }
    .track-row { grid-template-columns: 44px minmax(0,1.2fr) minmax(90px,.8fr) 44px 100px; min-height: 64px; }
    .track-row:hover { background: rgba(255,255,255,.045); }
    .player-bar {
      z-index: 8;
      left: 94px;
      right: 14px;
      bottom: 14px;
      min-height: 78px;
      padding: 10px 20px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(21,26,34,.91);
      box-shadow: 0 15px 48px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.04);
      backdrop-filter: blur(28px);
    }
    .now-art { width: 48px; height: 48px; border-radius: 9px; }
    .now-meta strong { font-size: 11px; }
    .now-meta > span { font-size: 10px; }
    .control-btn.play { color: #08131d; background: #e8f4fd; }
    .control-btn.play:hover { background: #fff; }
    .progress-line input, .stage-progress input, .volume input, .stage-volume input { accent-color: #80caff; }
    .player-tools { gap: 8px; }
    .mobile-nav { display: none; }
    body[data-view="player"] .topbar {
      position: sticky;
      top: 0;
      left: auto;
      right: auto;
      width: auto;
      margin: 0;
      border: 0;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      background: rgba(11,13,18,.78);
    }
    body[data-view="player"] .topbar .top-context { display: flex; }
    body[data-view="player"] .content {
      width: 100%;
      max-width: none;
      height: auto;
      flex: 1;
      min-height: 0;
      margin: 0;
      padding: 14px;
      overflow: hidden;
    }
    body[data-view="player"] #view-player { height: 100%; min-height: 0; }
    body[data-view="player"] .player-context { margin-top: 0; }
    body[data-view="player"] .player-bar { display: none; }
    @media (max-width: 1000px) {
      .sidebar { width: 204px; flex-basis: 204px; }
      .player-bar { left: 230px; }
      .content { padding-right: 28px; padding-left: 28px; }
      body[data-view="player"] .player-screen.active { grid-template-columns: minmax(0,1fr) 245px; }
    }
    @media (max-width: 760px) {
      .app-root { height: 100dvh; min-height: 100dvh; }
      .sidebar { display: none; }
      .workspace { height: 100dvh; min-height: 0; }
      .topbar { height: 60px; min-height: 60px; flex-basis: 60px; padding: 0 16px; }
      .top-context { display: none; }
      .top-actions { width: 100%; }
      .top-search-shell { width: 100%; }
      .top-search-field { height: 40px; }
      .top-search-field kbd { display: none; }
      .content { padding: 22px 16px 150px; }
      .home-intro { min-height: 220px; margin-bottom: 30px; padding: 27px 23px; border-radius: 18px; }
      .home-intro::after { width: 170px; height: 170px; right: -42px; opacity: .7; }
      .home-intro h1 { max-width: 370px; font-size: clamp(30px,8vw,39px); }
      .home-hero-art { right: -52px; width: 170px; opacity: .24; }
      .section-head { margin: 31px 0 15px; }
      .album-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 13px; }
      .track-row { grid-template-columns: 40px minmax(0,1fr) 96px; gap: 10px; }
      .track-album, .track-duration { display: none; }
      .player-bar {
        left: 9px;
        right: 9px;
        bottom: 67px;
        min-height: 66px;
        padding: 8px 11px;
        border-radius: 14px;
      }
      .now-art { width: 42px; height: 42px; }
      .now-playing { min-width: 0; gap: 8px; }
      .now-meta { min-width: 0; }
      .now-meta > strong, .now-meta > span { max-width: 112px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
      .now-playing .tiny-btn { display: none; }
      .player-center { max-width: 170px; }
      .player-controls { gap: 4px; }
      .player-controls #shuffleBtn, .player-controls #prevBtn, .player-controls #repeatBtn { display: none; }
      .player-controls .control-btn.play { width: 38px; height: 38px; }
      .progress-line { display: none; }
      .player-tools { display: none; }
      .mobile-nav {
        position: fixed;
        z-index: 9;
        left: 9px;
        right: 9px;
        bottom: 8px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: rgba(16,20,27,.93);
        box-shadow: 0 8px 28px rgba(0,0,0,.3);
        backdrop-filter: blur(24px);
      }
      .mobile-nav button { width: 48px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; color: var(--muted); }
      .mobile-nav button.active { color: #eaf6ff; background: rgba(90,176,244,.14); }
      .mobile-nav svg { width: 19px; height: 19px; }
      body[data-view="player"] .topbar { position: sticky; left: auto; right: auto; width: auto; height: 56px; min-height: 56px; margin: 0; padding: 0 15px; border-radius: 0; }
      body[data-view="player"] .topbar .top-context { display: none; }
      body[data-view="player"] .topbar .top-actions { width: 100%; }
      body[data-view="player"] .topbar #topQueue { display: none; }
      body[data-view="player"] .content { height: auto; padding: 0; overflow-y: auto; }
      body[data-view="player"] .player-screen.active { min-height: calc(100dvh - 112px); height: auto; grid-template-columns: minmax(0,1fr); overflow: visible; }
      body[data-view="player"] .player-main { min-height: calc(100dvh - 112px); padding: 18px 16px 28px; border: 0; border-radius: 0; }
      body[data-view="player"] .player-aside { display: none; }
      body[data-view="player"] .player-artwork { width: min(43vh,340px,76vw); }
    }
    @media (max-width: 420px) {
      .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .player-center { max-width: 70px; }
      .player-controls #nextBtn { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
    /* Player-first listening canvas. */
    :root { --site-primary: #00A3FF; --blue-soft: rgba(0,163,255,.13); }
    .app-root {
      background:
        radial-gradient(ellipse at 54% 40%,rgba(0,163,255,.095),transparent 42%),
        linear-gradient(145deg,#0d1016,#090b10 65%,#0d1118);
    }
    .sidebar {
      position: relative;
      z-index: 8;
      width: 68px;
      flex: 0 0 68px;
      height: calc(100vh - 28px);
      min-height: 0;
      margin: 14px 0 14px 14px;
      padding: 14px 8px;
      align-items: center;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 21px;
      background: rgba(21,26,35,.58);
      box-shadow: 0 18px 56px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07);
      backdrop-filter: blur(30px) saturate(155%);
      -webkit-backdrop-filter: blur(30px) saturate(155%);
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      min-height: 42px;
      margin: 0 0 30px;
      padding: 0;
      justify-content: center;
    }
    .brand-mark svg {
      width: 40px;
      height: 40px;
      padding: 10px;
      color: #03111B;
      background: var(--site-primary);
      box-shadow: 0 5px 20px rgba(0,163,255,.28),inset 0 1px 0 rgba(255,255,255,.35);
    }
    .brand-name, .nav-caption { display: none; }
    .nav-stack { align-items: center; gap: 8px; }
    .nav-btn, .side-action {
      width: 44px;
      height: 44px;
      padding: 0;
      justify-content: center;
      border-radius: 14px;
      color: #8793A2;
    }
    .nav-btn.active { color: #f2f8fc; background: rgba(0,163,255,.17); box-shadow: inset 0 0 0 1px rgba(0,163,255,.2); }
    .nav-label, .side-action .nav-label {
      position: absolute;
      z-index: 30;
      left: 52px;
      top: 50%;
      display: block;
      padding: 8px 11px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 9px;
      color: #edf4fa;
      background: rgba(24,30,40,.92);
      box-shadow: 0 9px 26px rgba(0,0,0,.3);
      font-size: 11px !important;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transform: translate(4px,-50%);
      transition: opacity .16s ease,transform .16s ease;
    }
    .nav-btn:hover .nav-label, .side-action:hover .nav-label { opacity: 1; transform: translate(0,-50%); }
    .nav-btn[data-view="player"] .nav-label::after,
    .nav-btn[data-view="discover"] .nav-label::after { content: none; }
    .sidebar-bottom { align-items: center; gap: 9px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.075); }
    .avatar { align-self: center; margin: 4px 0 0; }
    .profile-pop { left: 76px; }
    .workspace { height: 100vh; min-height: 0; }
    .topbar {
      height: 66px;
      min-height: 66px;
      flex-basis: 66px;
      padding: 0 clamp(16px,2.4vw,36px);
      border-bottom: 1px solid rgba(255,255,255,.065);
      background: rgba(11,14,20,.43);
      backdrop-filter: blur(24px) saturate(145%);
      -webkit-backdrop-filter: blur(24px) saturate(145%);
    }
    .topbar:not([hidden]) { background: rgba(11,14,20,.43); }
    .top-context { color: #818d9c; font-size: 9px; letter-spacing: .14em; }
    .top-context strong { color: #e7edf4; }
    .top-actions { flex: 1; justify-content: center; gap: 12px; }
    .top-search-shell { width: min(520px,58vw); }
    .top-search-field {
      height: 42px;
      border-color: rgba(255,255,255,.10);
      border-radius: 14px;
      background: rgba(255,255,255,.055);
    }
    .top-search-field:focus-within { border-color: rgba(0,163,255,.5); box-shadow: 0 0 0 4px rgba(0,163,255,.08); }
    .top-search-field kbd { color: #8d99a8; }
    .global-search-pop {
      top: calc(100% + 10px);
      border-color: rgba(255,255,255,.12);
      border-radius: 17px;
      background: rgba(21,26,35,.91);
      box-shadow: 0 24px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
      backdrop-filter: blur(34px) saturate(160%);
      -webkit-backdrop-filter: blur(34px) saturate(160%);
    }
    .content {
      width: 100%;
      max-width: none;
      height: auto;
      flex: 1;
      min-height: 0;
      padding: 14px;
      overflow: hidden;
    }
    body[data-view="player"] .topbar {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      width: auto;
      height: 66px;
      min-height: 66px;
      flex-basis: 66px;
      margin: 0;
      padding: 0 clamp(16px,2.4vw,36px);
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.065);
      border-radius: 0;
      background: rgba(11,14,20,.43);
    }
    body[data-view="player"] .topbar .top-context { display: flex; }
    body[data-view="player"] .topbar .top-actions { width: auto; flex: 1; }
    body[data-view="player"] .topbar #topQueue { display: grid; }
    body[data-view="player"] .content { height: auto; padding: 14px; overflow: hidden; }
    body[data-view="player"] #view-player { height: 100%; min-height: 0; }
    body[data-view="player"] .player-screen.active {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(265px,310px);
      gap: 14px;
      width: 100%;
      height: 100%;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      background: transparent;
    }
    .player-main {
      min-height: 0;
      padding: clamp(24px,4vh,42px) 28px;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 25px;
      background:
        radial-gradient(ellipse at 50% 40%,rgba(0,163,255,.105),transparent 45%),
        linear-gradient(145deg,rgba(26,32,42,.74),rgba(14,18,25,.75));
      box-shadow: 0 24px 70px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.055);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }
    .player-main-inner { width: min(100%,570px); }
    .player-context { margin-bottom: clamp(15px,2.2vh,26px); color: #8491a1; font-size: 9px; }
    .player-context strong { color: #d7e1eb; }
    .player-art-wrap { margin-bottom: clamp(17px,2.5vh,28px); }
    .player-art-glow { inset: 9%; background: var(--player-glow,rgba(0,163,255,.35)) !important; filter: blur(82px); opacity: .46; }
    .player-artwork {
      width: min(43vh,390px,39vw);
      max-height: 44vh;
      aspect-ratio: 1;
      border-radius: 17px;
      box-shadow: 0 28px 80px rgba(0,0,0,.43),0 0 0 1px rgba(255,255,255,.12);
      animation: cover-arrive .7s cubic-bezier(.2,.75,.2,1) both;
    }
    .player-track-info h1 { margin: 0 0 8px; color: #f4f7fa; font-size: clamp(21px,2.3vw,29px); letter-spacing: -.045em; }
    .player-track-info p { margin: 0; color: #aab5c2; font-size: 12px; }
    .stage-source-link { color: #8997a6; font-size: 10px; }
    .catalog-status { max-width: 430px; margin-top: 13px; padding: 9px 12px; border-color: rgba(255,255,255,.075); border-radius: 10px; background: rgba(255,255,255,.035); color: #a6b0bd; font-size: 10px; }
    .stage-actions { gap: clamp(14px,2vw,24px); margin: clamp(16px,2.1vh,24px) 0 14px; }
    .stage-icon-btn { width: 39px; height: 39px; color: #a0adbb; }
    .stage-icon-btn:hover { color: #f7fbff; }
    .stage-icon-btn.active { color: var(--site-primary); }
    .stage-icon-btn.main-play {
      width: 58px;
      height: 58px;
      color: #03111b;
      background: #f3f8fc;
      box-shadow: 0 7px 26px rgba(0,0,0,.28),inset 0 1px 0 #fff;
    }
    .stage-icon-btn.main-play:hover { background: #fff; transform: scale(1.055); }
    .stage-progress { width: min(100%,500px); color: #8390a0; font-size: 9px; }
    .stage-progress input,
    .progress-line input {
      --range-progress: 0%;
      appearance: none;
      -webkit-appearance: none;
      height: 18px !important;
      min-height: 18px;
      background: transparent !important;
      accent-color: transparent !important;
      cursor: pointer;
    }
    .stage-progress input::-webkit-slider-runnable-track,
    .progress-line input::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 99px;
      background: linear-gradient(to right,var(--site-primary) 0%,var(--site-primary) var(--range-progress),rgba(184,198,215,.22) var(--range-progress),rgba(184,198,215,.22) 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    }
    .stage-progress input::-moz-range-track,
    .progress-line input::-moz-range-track {
      height: 4px;
      border-radius: 99px;
      background: rgba(184,198,215,.22);
    }
    .stage-progress input::-moz-range-progress,
    .progress-line input::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--site-primary); }
    .stage-progress input::-webkit-slider-thumb,
    .progress-line input::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      margin-top: -4px;
      border: 2px solid rgba(255,255,255,.94);
      border-radius: 50%;
      background: var(--site-primary);
      box-shadow: 0 1px 5px rgba(0,0,0,.4),0 0 0 3px rgba(0,163,255,.15);
      transition: transform .16s ease,box-shadow .16s ease;
    }
    .stage-progress input::-moz-range-thumb,
    .progress-line input::-moz-range-thumb {
      width: 9px;
      height: 9px;
      border: 2px solid rgba(255,255,255,.94);
      border-radius: 50%;
      background: var(--site-primary);
      box-shadow: 0 1px 5px rgba(0,0,0,.4);
    }
    .stage-progress input:hover::-webkit-slider-thumb,
    .progress-line input:hover::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(0,163,255,.15); }
    .stage-progress input:focus-visible::-webkit-slider-thumb,
    .progress-line input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(0,163,255,.2); }
    body.is-scrubbing .stage-progress input,
    body.is-scrubbing .progress-line input { cursor: grabbing; }
    .stage-volume { margin-top: 14px; }
    .player-aside {
      min-height: 0;
      padding: 23px 20px 17px;
      border: 1px solid rgba(255,255,255,.085);
      border-radius: 23px;
      background: rgba(19,24,32,.72);
      box-shadow: 0 19px 55px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.045);
      backdrop-filter: blur(28px) saturate(145%);
      -webkit-backdrop-filter: blur(28px) saturate(145%);
      animation: panel-arrive .45s ease both;
    }
    .player-aside-head { padding: 2px 0 17px; }
    .player-aside-head strong { color: #e9eff5; font-size: 12px; }
    .player-aside-head span { color: #78889a; font-size: 8px; letter-spacing: .13em; }
    .stage-tabs { gap: 23px; }
    .stage-tab { padding: 13px 1px 11px; font-size: 10px; }
    .stage-tab.active { color: #f3f7fa; border-color: var(--site-primary); }
    .stage-side-content { padding-top: 14px; }
    .stage-lyrics-placeholder .eyebrow { color: var(--site-primary); }
    .stage-lyrics-placeholder h2 { font-size: 19px; }
    .stage-lyrics-placeholder p { color: #96a4b3; font-size: 10px; line-height: 1.8; }
    .stage-lyrics-track { border-color: rgba(255,255,255,.08); }
    .stage-queue-row.current { background: rgba(0,163,255,.11); }
    .stage-queue-row:hover { background: rgba(255,255,255,.055); }
    body[data-view="player"] .player-bar { display: none; }
    body[data-view="home"] .content,
    body[data-view="discover"] .content,
    body[data-view="ai"] .content,
    body[data-view="library"] .content,
    body[data-view="search"] .content { overflow-y: auto; }
    .search-results-view .page-heading { align-items: center; }
    .search-results-count { color: var(--muted); font-size: 11px; }
    .settings-backdrop {
      position: fixed;
      z-index: 40;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(2,5,10,.57);
      backdrop-filter: blur(18px) saturate(125%);
      -webkit-backdrop-filter: blur(18px) saturate(125%);
    }
    .settings-backdrop.open { display: flex; animation: settings-fade .2s ease both; }
    @keyframes settings-fade { from { opacity: 0; } to { opacity: 1; } }
    .settings-window {
      width: min(820px,100%);
      max-height: min(760px,calc(100dvh - 36px));
      display: grid;
      grid-template-columns: 215px minmax(0,1fr);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 24px;
      background: rgba(18,23,31,.94);
      box-shadow: 0 32px 100px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.07);
      backdrop-filter: blur(36px) saturate(155%);
      -webkit-backdrop-filter: blur(36px) saturate(155%);
      animation: settings-rise .32s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes settings-rise { from { opacity: .5; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .settings-rail { padding: 24px 13px; border-right: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.018); }
    .settings-brand { margin: 0 9px 24px; color: #eaf1f7; font-size: 11px; font-weight: 720; letter-spacing: .13em; }
    .settings-nav { display: grid; gap: 5px; }
    .settings-nav button { height: 39px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #9aa6b5; text-align: left; font-size: calc(11px * var(--interface-scale,1)); cursor: pointer; }
    .settings-nav button:hover,.settings-nav button.active { color: #f3f7fb; background: rgba(255,255,255,.075); }
    .settings-main { min-width: 0; overflow-y: auto; }
    .settings-header { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.075); background: rgba(18,23,31,.88); backdrop-filter: blur(18px); }
    .settings-header h2 { margin: 0; color: #f4f7fa; font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
    .settings-close { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.05); color: #adb8c5; cursor: pointer; }
    .settings-content { padding: 22px 24px 26px; }
    .settings-section { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
    .settings-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
    .settings-section h3 { margin: 0 0 6px; color: #edf2f7; font-size: calc(12px * var(--interface-scale,1)); font-weight: 620; }
    .settings-description { margin: 0 0 14px; color: #8d99a8; font-size: calc(10px * var(--interface-scale,1)); line-height: 1.65; }
    .settings-select { width: 100%; max-width: 310px; height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; outline: 0; color: #eef3f8; background: #1a2029; font-size: 11px; }
    .theme-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
    .theme-option { min-width: 0; padding: 7px; border: 1px solid transparent; border-radius: 12px; color: #dce5ed; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; transition: border-color .2s ease,background .2s ease; }
    .theme-option:hover { background: rgba(255,255,255,.055); }
    .theme-option.active { border-color: var(--site-primary); background: rgba(255,255,255,.045); box-shadow: 0 0 0 2px color-mix(in srgb,var(--site-primary) 16%,transparent); }
    .theme-preview { position: relative; display: flex; align-items: flex-end; height: 68px; margin-bottom: 8px; padding: 7px; overflow: hidden; border-radius: 8px; background: var(--theme-preview); }
    .theme-preview::before { content: ""; position: absolute; width: 48px; height: 48px; right: 12%; top: -19px; border-radius: 50%; background: var(--theme-preview-accent,var(--site-primary)); opacity: .48; filter: blur(15px); }
    .theme-preview::after { content: none; }
    .theme-preview-ui { position: relative; display: grid; grid-template-columns: 19px minmax(0,1fr) 12px; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 29px; padding: 5px; border: 1px solid color-mix(in srgb,var(--theme-preview-text,#f1f5fa) 22%,transparent); border-radius: calc(var(--theme-preview-roundness,16px) * .45); background: var(--theme-preview-surface,rgba(8,12,18,.64)); box-shadow: 0 3px 8px rgba(0,0,0,.2); backdrop-filter: blur(var(--theme-preview-blur,8px)); }
    .theme-preview-art { width: 19px; height: 19px; border-radius: 4px; background: linear-gradient(145deg,var(--theme-preview-accent,var(--site-primary)),rgba(255,255,255,.16)); }
    .theme-preview-lines { display: grid; gap: 3px; min-width: 0; }
    .theme-preview-lines i { display: block; width: 72%; height: 3px; border-radius: 9px; background: color-mix(in srgb,var(--theme-preview-text,#f1f5fa) 82%,transparent); }
    .theme-preview-lines i + i { width: 48%; background: color-mix(in srgb,var(--theme-preview-text,#f1f5fa) 44%,transparent); }
    .theme-preview-play { width: 12px; height: 12px; border-radius: 50%; background: var(--theme-preview-accent,var(--site-primary)); box-shadow: 0 0 9px color-mix(in srgb,var(--theme-preview-accent,var(--site-primary)) 65%,transparent); }
    .theme-option strong { display: block; width: 100%; min-width: 0; min-height: 24px; overflow-wrap: anywhere; font-size: 10px; line-height: 1.25; }
    .theme-option small { display: block; min-height: 13px; margin-top: 3px; overflow-wrap: anywhere; color: #8895a4; font-size: 9px; line-height: 1.35; }
    .settings-live-preview { margin-top: 15px; padding: 14px; border: 1px solid color-mix(in srgb,var(--appearance-preview-text,var(--mc-text)) 14%,transparent); border-radius: var(--appearance-preview-radius,var(--surface-radius,16px)); color: var(--appearance-preview-text,var(--mc-text)); background: var(--appearance-preview-bg,var(--app-theme-bg,#0b0d12)); background-size: var(--appearance-preview-photo-size,cover); background-position: center; }
    .settings-live-preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
    .settings-live-preview-head strong { color: var(--appearance-preview-text,var(--mc-text)); font-size: calc(11px * var(--interface-scale,1)); }
    .settings-live-preview-head span { color: var(--appearance-preview-muted,var(--mc-muted)); font-size: calc(9px * var(--interface-scale,1)); text-align: right; }
    .settings-live-preview, .settings-preview-stage, .settings-preview-track { transition: border-radius .2s ease,background .2s ease; }
    .settings-preview-stage { display: grid; grid-template-columns: 42px minmax(0,1fr) 30px; align-items: center; gap: 10px; padding: 10px; border-radius: var(--appearance-preview-radius,var(--surface-radius,16px)); background: var(--appearance-preview-surface,rgba(255,255,255,.035)); backdrop-filter: blur(var(--appearance-preview-blur,0px)); }
    .settings-preview-art { width: 42px; aspect-ratio: 1; border-radius: var(--artwork-radius,9px); background: var(--current-theme-preview,linear-gradient(135deg,#182637,#00A3FF)); box-shadow: 0 5px 15px rgba(0,0,0,.25); background-size: cover; background-position: center; }
    .settings-preview-meta { min-width: 0; }
    .settings-preview-meta strong,.settings-preview-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .settings-preview-meta strong { color: var(--appearance-preview-text,var(--mc-text)); font-size: calc(10px * var(--interface-scale,1)); }
    .settings-preview-meta span { margin-top: 3px; color: var(--appearance-preview-muted,var(--mc-muted)); font-size: calc(9px * var(--interface-scale,1)); }
    .settings-preview-play { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; color: var(--appearance-preview-on-accent,#06121c); background: var(--appearance-preview-accent,var(--site-primary)); }
    .settings-preview-play svg { width: 12px; height: 12px; }
    .settings-preview-track { display: grid; grid-template-columns: 16px minmax(0,1fr) 22px; align-items: center; gap: 7px; margin-top: 8px; padding: 7px 9px; border: 1px solid color-mix(in srgb,var(--appearance-preview-text,var(--mc-text)) 10%,transparent); border-radius: var(--appearance-preview-radius,var(--surface-radius,16px)); background: var(--appearance-preview-raised,var(--app-theme-panel)); backdrop-filter: blur(var(--appearance-preview-blur,var(--glass-blur,18px))); }
    .settings-preview-track-art { width: 16px; height: 16px; border-radius: calc(var(--artwork-radius,9px) * .55); background: linear-gradient(135deg,#c59a5b,#4e3428); }
    .settings-preview-track-lines { display: grid; gap: 3px; }
    .settings-preview-track-lines i { display: block; width: 54%; height: 2px; border-radius: 8px; background: color-mix(in srgb,var(--appearance-preview-text,var(--mc-text)) 72%,transparent); }
    .settings-preview-track-lines i + i { width: 34%; background: color-mix(in srgb,var(--appearance-preview-muted,var(--mc-muted)) 65%,transparent); }
    .settings-preview-progress { width: 22px; height: 2px; border-radius: 5px; background: linear-gradient(to right,var(--appearance-preview-accent,var(--site-primary)) 56%,color-mix(in srgb,var(--appearance-preview-text,var(--mc-text)) 22%,transparent) 56%); }
    .settings-preview-details { margin: 10px 0 0; color: var(--appearance-preview-text,var(--mc-text)); font-size: calc(9px * var(--interface-scale,1)); line-height: 1.5; overflow-wrap: anywhere; }
    .theme-market-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; color: #95a2b1; background: rgba(255,255,255,.025); font-size: 9px; line-height: 1.55; }
    .theme-market-note button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #dce8f2; background: rgba(255,255,255,.055); font-size: 9px; cursor: pointer; }
    .accent-options { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .accent-swatch { width: 27px; height: 27px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
    .accent-swatch.active { outline: 2px solid #e8f2fb; outline-offset: 2px; }
    .settings-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
    .settings-row + .settings-row { margin-top: 16px; }
    .settings-row-copy strong { display: block; color: #e2e9f0; font-size: 10px; font-weight: 590; }
    .settings-row-copy span { display: block; margin-top: 4px; color: #8895a4; font-size: 9px; line-height: 1.5; }
    .settings-range { display: flex; align-items: center; gap: 11px; width: min(240px,48%); }
    .settings-range input { flex: 1; min-width: 70px; accent-color: var(--site-primary); }
    .settings-range output { min-width: 42px; color: #cbd6e1; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
    .settings-switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; }
    .settings-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .settings-switch span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; background: #313842; cursor: pointer; transition: background .2s ease; }
    .settings-switch span::after { content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: #dfe6ed; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .2s ease; }
    .settings-switch input:checked + span { background: var(--site-primary); }
    .settings-switch input:checked + span::after { transform: translateX(16px); background: #fff; }
    .settings-switch input:focus-visible + span { outline: 3px solid var(--site-primary); outline-offset: 3px; }
    .settings-note { margin-top: 12px; color: #758394; font-size: 9px; line-height: 1.6; }
    .settings-backdrop[hidden] { display: none !important; }
    .detail-view { max-width: 1280px; margin-inline: auto; }
    .detail-back { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 22px; padding: 8px 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
    .detail-back:hover { color: var(--site-primary); }
    .artist-profile, .album-profile { display: grid; grid-template-columns: minmax(140px,220px) minmax(0,1fr); align-items: center; gap: clamp(18px,4vw,36px); padding: clamp(18px,4vw,34px); border-radius: var(--surface-radius,22px); background: linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018)); }
    .artist-profile-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 15px 40px rgba(0,0,0,.24); }
    .album-profile-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--artwork-radius,12px); box-shadow: 0 15px 40px rgba(0,0,0,.24); }
    .detail-copy { min-width: 0; }
    .detail-copy h1 { margin: 8px 0; overflow-wrap: anywhere; font-size: clamp(26px,4vw,46px); }
    .detail-copy p { max-width: 68ch; color: var(--muted); line-height: 1.65; }
    .detail-meta { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 12px; color: var(--muted); font-size: 12px; }
    .detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .artist-card { flex: 0 0 104px; border: 0; padding: 6px; border-radius: var(--surface-radius,16px); color: inherit; background: transparent; }
    .artist-card:hover { background: rgba(255,255,255,.045); }
    .artist-card img { border: 0; }
    .artist-card strong { overflow-wrap: anywhere; }
    .track-artist-link,.track-album-link { max-width: 100%; overflow: hidden; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .track-artist-link { color: var(--muted); font-size: inherit; }
    .track-artist-link:hover,.track-album-link:hover { color: var(--site-primary); text-decoration: underline; }
    .track-album-link { font-size: inherit; }
    @media (max-width: 760px) {
      #topSettings { display: grid; }
      body:not([data-view="player"]) .content { padding-bottom: 150px; }
      .artist-profile,.album-profile { grid-template-columns: minmax(90px,130px) minmax(0,1fr); gap: 16px; padding: 16px; }
      .detail-copy h1 { font-size: clamp(22px,6vw,32px); }
      .detail-meta { font-size: 10px; gap: 7px 12px; }
    }
    @media (max-width: 420px) {
      .artist-profile,.album-profile { grid-template-columns: 78px minmax(0,1fr); gap: 12px; padding: 13px; }
      .detail-actions { gap: 7px; }
      .detail-actions .primary-btn,.detail-actions .secondary-btn { padding-inline: 12px; }
    }
    .app-root { background-color: var(--app-theme-bg,#0b0d12); }
    .sidebar { background: color-mix(in srgb,var(--app-theme-panel,rgba(21,26,35,.58)) 80%,transparent); }
    .player-main { background: radial-gradient(ellipse at 50% 40%,var(--app-theme-glow,rgba(0,163,255,.105)),transparent 45%),linear-gradient(145deg,var(--app-theme-card,rgba(26,32,42,.74)),rgba(14,18,25,.75)); }
    .player-aside { background: var(--app-theme-panel,rgba(19,24,32,.72)); }
    .stage-progress input::-webkit-slider-runnable-track,
    .progress-line input::-webkit-slider-runnable-track {
      background: linear-gradient(to right,var(--site-primary) 0%,var(--site-primary) var(--range-progress),rgba(184,198,215,.22) var(--range-progress),rgba(184,198,215,.22) 100%);
    }
    body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    @media (max-width: 620px) {
      .settings-backdrop { padding: 0; align-items: end; }
      .settings-window { width: 100%; max-height: 88dvh; grid-template-columns: 1fr; border-radius: 20px 20px 0 0; }
      .settings-rail { padding: 13px 15px 10px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.075); }
      .settings-brand { display: none; }
      .settings-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
      .settings-nav button { min-height: 39px; height: auto; padding: 5px 3px; text-align: center; font-size: 9px; line-height: 1.2; }
      .settings-header { padding: 14px 18px; }
      .settings-content { padding: 18px; }
      .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .settings-range { width: 45%; }
    }
    @media (max-width: 980px) and (min-width: 761px) {
      .sidebar { width: 64px; flex-basis: 64px; margin-left: 9px; }
      .player-bar { left: 82px; }
      .player-main { padding: 22px 18px; }
      .player-artwork { width: min(39vh,310px,36vw); }
      body[data-view="player"] .player-screen.active { grid-template-columns: minmax(0,1fr) 260px; gap: 10px; }
      .player-aside { padding: 19px 15px; }
    }
    @media (max-width: 760px) {
      .app-root { height: 100dvh; min-height: 100dvh; }
      .sidebar { display: none; }
      .workspace { height: 100dvh; }
      .topbar, body[data-view="player"] .topbar { height: 56px; min-height: 56px; flex-basis: 56px; padding: 0 11px; }
      .top-context, body[data-view="player"] .topbar .top-context { display: none; }
      .top-actions, body[data-view="player"] .topbar .top-actions { width: 100%; justify-content: center; gap: 8px; }
      .top-search-shell, body[data-view="player"] .top-search-shell { width: 100%; }
      .top-search-field { height: 40px; }
      .top-search-field kbd { display: none; }
      #topQueue { width: 38px; height: 38px; flex: 0 0 38px; }
      .global-search-pop { position: fixed; top: 62px; left: 9px; right: 9px; width: auto; max-height: 65vh; }
      .content { padding: 17px 12px 20px; }
      body[data-view="player"] .content { height: auto; padding: 0; overflow-y: auto; }
      body[data-view="player"] .player-screen.active { min-height: calc(100dvh - 56px); height: auto; grid-template-columns: minmax(0,1fr); gap: 0; overflow: visible; }
      body[data-view="player"] .player-main { min-height: calc(100dvh - 56px); padding: 17px 15px 26px; border: 0; border-radius: 0; }
      .player-artwork { width: min(42vh,350px,76vw); max-height: none; }
      .player-art-wrap { margin-bottom: 19px; }
      .player-context { margin-bottom: 13px; }
      .player-track-info h1 { font-size: 24px; }
      .stage-actions { gap: clamp(10px,4vw,19px); margin: 18px 0 15px; }
      .stage-icon-btn { width: 34px; height: 34px; }
      .stage-icon-btn.main-play { width: 55px; height: 55px; }
      .stage-volume { margin-top: 12px; }
      .player-aside { display: none; }
      body[data-view="player"] .player-bar { display: none; }
      .mobile-nav { display: flex; }
      .mobile-nav button.active { color: #f4f9ff; background: rgba(0,163,255,.16); }
      .mobile-nav button.active::after { background: var(--site-primary); }
      body[data-view="player"] .mobile-nav button[data-view="player"] { color: #f4f9ff; background: rgba(0,163,255,.16); }
      .home-intro { margin: 6px 0 28px; }
      .home-hero-art { opacity: .22; }
    }
    /* A quiet, flat listening interface: typography and artwork carry the page. */
    :root {
      --text: #f1f3f5;
      --subtle: #c1c6cc;
      --muted: #818891;
      --border: rgba(235,240,245,.09);
      --surface: #15181c;
      --surface-2: #1b1f24;
      --surface-3: #22272d;
      --shadow: 0 18px 48px rgba(0,0,0,.24);
    }
    html, body { background: #0d0f12; }
    body { color: #f1f3f5; }
    .app-root {
      background: var(--app-theme-bg,#0d0f12) !important;
    }
    .ambient { display: none; }
    .sidebar {
      width: 66px;
      flex-basis: 66px;
      margin: 0;
      height: 100vh;
      min-height: 0;
      padding: 18px 8px;
      border: 0;
      border-right: 1px solid rgba(255,255,255,.07);
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .brand-mark, .brand-mark svg {
      width: 36px;
      height: 36px;
      min-height: 36px;
      border-radius: 10px;
      box-shadow: none;
    }
    .brand-mark { margin-bottom: 34px; background: transparent; }
    .brand-mark svg { padding: 8px; color: var(--site-primary); background: transparent; }
    .nav-stack { gap: 5px; }
    .nav-btn, .side-action { width: 42px; height: 42px; border-radius: 10px; }
    .nav-btn:hover, .side-action:hover { transform: none; background: rgba(255,255,255,.055); }
    .nav-btn.active { color: var(--site-primary); background: rgba(255,255,255,.06); box-shadow: none; }
    .nav-btn.active::before { left: -9px; width: 2px; height: 17px; box-shadow: none; }
    .sidebar-bottom { border: 0; padding: 0; }
    .avatar { border-radius: 10px; background: #20242a; border-color: rgba(255,255,255,.1); }
    .workspace { background: transparent; }
    .topbar, body[data-view="player"] .topbar {
      height: 58px;
      min-height: 58px;
      flex-basis: 58px;
      padding: 0 28px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      background: var(--app-theme-bg,#0d0f12) !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .top-context { color: #727981; font-size: 9px; letter-spacing: .13em; }
    .top-context strong { color: #e8ebee; font-weight: 650; }
    .top-actions { justify-content: flex-end; gap: 9px; }
    .top-search-shell { width: min(440px,55vw); }
    .top-search-field {
      height: 36px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
      background: rgba(255,255,255,.035);
      box-shadow: none;
    }
    .top-search-field:focus-within { border-color: var(--site-primary); box-shadow: none; }
    .icon-btn { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: transparent; }
    .icon-btn:hover { border-color: var(--site-primary); }
    .content { padding: 14px; }
    body[data-view="player"] .content { padding: 14px; }
    body[data-view="player"] .player-screen.active {
      grid-template-columns: minmax(0,1fr) minmax(255px,300px);
      gap: 0;
      border: 1px solid rgba(255,255,255,.08);
      background: transparent;
    }
    .player-main {
      padding: clamp(24px,4vh,46px) 28px;
      border: 0;
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .player-main-inner { width: min(100%,500px); }
    .player-context { margin-bottom: 24px; color: #626a73; letter-spacing: .1em; }
    .player-context strong { color: #c8cdd2; }
    .player-art-wrap { margin-bottom: 24px; }
    .player-art-glow { display: none; }
    .player-artwork {
      width: min(42vh,360px,35vw);
      max-height: 42vh;
      border-radius: 7px;
      box-shadow: 0 16px 42px rgba(0,0,0,.27);
      animation: none;
      will-change: transform, opacity, filter;
    }
    .player-track-info h1 {
      color: #f3f4f5;
      font-size: clamp(22px,2.1vw,28px);
      font-weight: 620;
      letter-spacing: -.04em;
    }
    .player-track-info p { color: #9da3aa; font-size: 12px; }
    .stage-source-link { color: #7e858d; font-size: 10px; }
    .catalog-status { border: 0; border-radius: 0; padding: 8px 0; background: transparent; color: #858c94; }
    .stage-actions { gap: 17px; margin: 22px 0 15px; }
    .stage-icon-btn { color: #969da5; transition: color .18s ease, transform .2s ease; }
    .stage-icon-btn:hover { color: #fff; transform: scale(1.06); }
    .stage-icon-btn.active { color: var(--site-primary); }
    .stage-icon-btn.main-play {
      width: 52px;
      height: 52px;
      color: #0d0f12;
      background: #f1f3f5;
      box-shadow: none;
    }
    .stage-icon-btn.main-play:hover { background: var(--site-primary); transform: scale(1.045); }
    .stage-progress { color: #6f7780; }
    .stage-progress input::-webkit-slider-runnable-track,
    .progress-line input::-webkit-slider-runnable-track {
      height: 3px;
      background: linear-gradient(to right,var(--site-primary) 0%,var(--site-primary) var(--range-progress),rgba(255,255,255,.16) var(--range-progress),rgba(255,255,255,.16) 100%);
      box-shadow: none;
    }
    .stage-progress input::-webkit-slider-thumb,
    .progress-line input::-webkit-slider-thumb {
      width: 9px;
      height: 9px;
      margin-top: -3px;
      border: 0;
      box-shadow: none;
    }
    .stage-volume { color: #6f7780; }
    .player-aside {
      padding: 22px 20px;
      border: 0;
      border-left: 1px solid rgba(255,255,255,.08);
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      animation: none;
    }
    .player-aside-head { padding-bottom: 16px; }
    .player-aside-head strong { color: #e5e8eb; font-size: 11px; }
    .stage-tabs { gap: 20px; }
    .stage-tab { padding: 12px 0 10px; color: #7f868e; }
    .stage-tab.active { color: #f2f4f6; }
    .stage-side-content { padding-top: 12px; }
    .stage-lyrics-placeholder h2 { color: #edf0f2; font-size: 17px; }
    .stage-lyrics-placeholder p { color: #858d96; line-height: 1.7; }
    .stage-lyrics-track { border-color: rgba(255,255,255,.08); }
    .stage-queue-row.current { background: rgba(255,255,255,.055); }
    .stage-queue-row:hover { background: rgba(255,255,255,.045); }
    .player-bar {
      left: 80px;
      right: 14px;
      bottom: 12px;
      min-height: 70px;
      padding: 9px 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px;
      background: rgba(18,20,23,.96);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .now-art { width: 42px; height: 42px; border-radius: 5px; box-shadow: none; }
    .now-playing[data-open-player] { cursor: pointer; }
    .now-playing[data-open-player]:hover .now-meta strong { color: var(--site-primary); }
    .now-meta strong { color: #eff1f3; font-size: 11px; }
    .now-meta > span { color: #858c94; }
    .control-btn.play { color: #0d0f12; background: #f0f2f4; }
    .control-btn.play:hover { color: #0d0f12; background: var(--site-primary); }
    .player-tools { gap: 4px; }
    .player-tool { border-radius: 7px; }
    .drawer { background: #121417; border-color: rgba(255,255,255,.08); box-shadow: -15px 0 40px rgba(0,0,0,.24); }
    .drawer-backdrop { backdrop-filter: none; }
    .track-row:hover, .mix-card:hover, .album-card:hover { background: rgba(255,255,255,.035); }
    .track-thumb, .album-card img, .queue-row img { border-radius: 5px; }
    .mix-card, .recommend-card, .library-tile, .playlist-card, .ai-chat, .ai-side, .search-large {
      border-radius: 9px;
      box-shadow: none;
    }
    .mix-card, .library-tile, .playlist-card, .ai-chat, .ai-side { background: var(--app-theme-panel,rgba(255,255,255,.025)); }
    .primary-btn { box-shadow: none; border-radius: 8px; }
    .primary-btn:hover { box-shadow: none; }
    .secondary-btn, .filter-chip { border-radius: 8px; }
    .settings-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .settings-window { border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.42); }
    @media (max-width: 760px) {
      .topbar, body[data-view="player"] .topbar {
        height: 52px;
        min-height: 52px;
        flex-basis: 52px;
        padding: 0 12px;
        border: 0;
      }
      .top-actions, body[data-view="player"] .topbar .top-actions { justify-content: center; gap: 7px; }
      .top-search-shell, body[data-view="player"] .top-search-shell { width: 100%; }
      .top-search-field { height: 38px; }
      .top-actions #topQueue { display: grid; }
      #topSettings { width: 36px; height: 36px; }
      .content, body[data-view="player"] .content { padding: 0 0 128px; }
      body[data-view="player"] .content { padding-bottom: 58px; }
      body[data-view="player"] .player-screen.active {
        min-height: calc(100dvh - 110px);
        height: auto;
        grid-template-columns: minmax(0,1fr);
        border: 0;
        overflow: visible;
      }
      body[data-view="player"] .player-main {
        min-height: calc(100dvh - 110px);
        padding: 17px 20px 26px;
        justify-content: center;
      }
      .player-main-inner { width: min(100%,430px); }
      .player-context { margin-bottom: 17px; }
      .player-art-wrap { margin-bottom: 20px; }
      .player-artwork { width: min(46vh,390px,78vw); max-height: 46vh; border-radius: 6px; }
      .player-track-info h1 { font-size: clamp(21px,6vw,27px); }
      .stage-actions { gap: clamp(11px,4.5vw,19px); margin: 21px 0 14px; }
      .stage-icon-btn { width: 36px; height: 36px; }
      .stage-icon-btn.main-play { width: 54px; height: 54px; }
      .stage-volume { margin-top: 13px; }
      .player-aside { display: none; }
      body[data-view="player"] .player-bar { display: none; }
      .player-bar {
        left: 10px;
        right: 10px;
        bottom: 69px;
        min-height: 62px;
        grid-template-columns: minmax(0,1fr) auto auto;
        gap: 5px;
        padding: 7px 9px;
        border-radius: 10px;
        touch-action: pan-y;
        transition: transform .22s ease,opacity .22s ease;
      }
      .player-bar.is-swiping { transition: none; }
      .player-bar::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 10px;
        right: 10px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(to right,var(--site-primary) var(--mini-progress,0%),rgba(255,255,255,.15) var(--mini-progress,0%));
      }
      .now-playing { gap: 9px; }
      .now-art { width: 43px; height: 43px; }
      .now-meta strong { max-width: min(42vw,190px); font-size: 10px; }
      .now-meta > span { max-width: min(42vw,190px); font-size: 9px; }
      .player-center { display: block; width: auto; max-width: none; justify-self: end; }
      .player-controls { gap: 0; margin: 0; }
      .player-controls #shuffleBtn, .player-controls #prevBtn, .player-controls #nextBtn, .player-controls #repeatBtn { display: none; }
      .player-controls .control-btn.play { width: 38px; height: 38px; }
      .progress-line { display: none; }
      .player-tools { display: flex; gap: 0; }
      .player-tools .volume, .player-bar .player-tool[data-action="lyrics"], .player-bar .player-tool[data-action="queue"]:not(.mobile-player-open) { display: none; }
      .player-tool.mobile-player-open { display: grid; width: 34px; height: 36px; }
      .mobile-nav {
        left: 10px;
        right: 10px;
        bottom: 8px;
        height: 51px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 10px;
        background: rgba(17,19,22,.98);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .mobile-nav button { width: 48px; height: 42px; border-radius: 8px; }
      .mobile-nav button.active, body[data-view="player"] .mobile-nav button[data-view="player"] { color: var(--site-primary); background: rgba(255,255,255,.055); }
      .toast { bottom: 140px; }
      body[data-view="home"] .content,
      body[data-view="discover"] .content,
      body[data-view="ai"] .content,
      body[data-view="library"] .content,
      body[data-view="search"] .content { padding: 12px 12px 140px; }
      .top-search-field kbd { display: none; }
    }
    @media (max-width: 420px) {
      body[data-view="player"] .player-main { padding-inline: 16px; }
      .player-artwork { width: min(44vh,370px,82vw); }
      .player-bar { left: 7px; right: 7px; }
      .now-meta > strong, .now-meta > span { max-width: 42vw; }
    }
    @media (max-height: 700px) and (max-width: 760px) {
      body[data-view="player"] .player-main { padding-top: 10px; padding-bottom: 14px; }
      .player-context { margin-bottom: 10px; }
      .player-art-wrap { margin-bottom: 12px; }
      .player-artwork { width: min(38vh,300px,72vw); max-height: 38vh; }
      .stage-actions { margin-top: 13px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .player-artwork, .player-track-info, .now-art, .now-meta { animation: none !important; }
    }
    /* Responsive glass system */
    :root {
      --glass-line: rgba(235,243,250,.1);
      --glass-fill: rgba(26,32,41,.63);
      --glass-deep: rgba(16,20,27,.84);
      --glass-blur: 18px;
      --ui-ease: cubic-bezier(.2,.72,.24,1);
    }
    html { height: 100%; scroll-behavior: smooth; }
    body {
      min-height: 100%;
      min-height: 100dvh;
      overflow: hidden;
      background: var(--app-theme-bg,#0b0d12);
      scrollbar-gutter: stable;
    }
    .app-root {
      height: 100vh;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 63% 10%,color-mix(in srgb,var(--app-theme-glow,rgba(0,163,255,.12)) 85%,transparent),transparent 42%),
        var(--app-theme-bg,#0b0d12) !important;
    }
    .ambient { display: block; opacity: .14; filter: blur(115px); }
    .ambient.ambient-a { background: color-mix(in srgb,var(--site-primary) 44%,transparent); }
    .ambient-glow-off .ambient, .ambient-glow-off .player-art-glow { opacity: 0 !important; }
    .ambient-glow-off .app-root { background: var(--app-theme-bg,#0b0d12) !important; }
    .ambient-glow-off .player-main { background: linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)) !important; }
    .workspace { height: 100%; min-height: 0; overflow: hidden; }
    .topbar, body[data-view="player"] .topbar {
      flex: 0 0 62px;
      height: 62px;
      min-height: 62px;
      background: rgba(12,15,20,.62) !important;
      border-bottom: 1px solid var(--glass-line);
      backdrop-filter: blur(var(--glass-blur)) saturate(150%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    }
    .top-search-field {
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.055);
      backdrop-filter: blur(calc(var(--glass-blur) * .6));
      -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .6));
      transition: border-color .2s ease,background .2s ease,box-shadow .2s ease;
    }
    .top-search-field:hover { background: rgba(255,255,255,.075); }
    .icon-btn { background: rgba(255,255,255,.045); }
    .content {
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(190,205,220,.25) transparent;
      scroll-padding-block: 18px;
    }
    .content::-webkit-scrollbar, .settings-main::-webkit-scrollbar, .stage-side-content::-webkit-scrollbar { width: 8px; }
    .content::-webkit-scrollbar-thumb, .settings-main::-webkit-scrollbar-thumb, .stage-side-content::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 99px;
      background: rgba(190,205,220,.2);
      background-clip: padding-box;
    }
    body[data-view="player"] .content {
      height: auto;
      min-height: 0;
      padding: 14px;
      overflow: hidden;
    }
    body[data-view="player"] #view-player { height: 100%; min-height: 0; }
    body[data-view="player"] .player-screen.active {
      height: 100%;
      min-height: 0;
      overflow: hidden;
      border: 1px solid var(--glass-line);
      border-radius: 22px;
      background: rgba(255,255,255,.018);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    }
    .player-main {
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
      background:
        radial-gradient(ellipse at 50% 34%,var(--app-theme-glow,rgba(0,163,255,.12)),transparent 52%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
      backdrop-filter: blur(calc(var(--glass-blur) * .45));
      -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .45));
    }
    .player-main-inner { width: min(100%,560px); }
    .player-art-wrap { position: relative; }
    .player-art-glow { display: block; inset: 12%; filter: blur(74px); opacity: .27; }
    .player-artwork {
      width: min(43vh,380px,38vw);
      max-height: 46vh;
      border-radius: var(--artwork-radius,9px);
      box-shadow: 0 22px 58px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.08);
      transition: border-radius .28s ease,box-shadow .28s ease;
    }
    .player-track-info h1 { font-size: calc(clamp(22px,2.1vw,29px) * var(--interface-scale,1)); }
    .player-aside {
      border-left: 1px solid var(--glass-line);
      border-radius: var(--surface-radius,16px);
      background:
        linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
        rgba(26,32,41,var(--surface-opacity,.72)) !important;
      backdrop-filter: blur(var(--glass-blur)) saturate(150%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    }
    .stage-tabs { border-color: var(--glass-line); }
    .stage-tab.active { border-color: var(--site-primary); }
    .stage-queue-row, .stage-lyrics-track { transition: background .2s ease,border-color .2s ease; }
    .player-bar {
      background: rgba(19,23,30,var(--surface-opacity,.72)) !important;
      border: 1px solid var(--glass-line);
      border-radius: var(--surface-radius,16px);
      box-shadow: 0 16px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065);
      backdrop-filter: blur(var(--glass-blur)) saturate(160%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    }
    #topSettings { display: none; }
    body:not([data-view="player"]) .content { padding-bottom: 118px; }
    .mobile-nav {
      background: rgba(19,23,30,var(--surface-opacity,.72)) !important;
      border-color: var(--glass-line) !important;
      border-radius: var(--surface-radius,16px);
      box-shadow: 0 12px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
    }
    @media (max-width: 1020px) {
      body:not([data-view="player"]) .content {
        padding-bottom: calc(max(77px, calc(env(safe-area-inset-bottom) + 70px)) + 62px + 16px);
      }
    }
    .global-search-pop, .drawer, .settings-window, .modal {
      background: rgba(19,23,30,.88) !important;
      border-color: var(--glass-line);
      backdrop-filter: blur(var(--glass-blur)) saturate(155%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(155%);
    }
    .drawer, .settings-window, .modal { background: rgba(19,23,30,var(--surface-opacity,.72)) !important; }
    .track-row, .mix-card, .recommend-card, .library-tile, .playlist-card, .ai-chat, .ai-side {
      border-color: transparent;
      background-color: rgba(255,255,255,var(--card-surface-alpha,.035));
      border-radius: var(--surface-radius,16px);
      transition: transform .24s var(--ui-ease),border-color .24s ease,background .24s ease,box-shadow .24s ease;
    }
    .search-large { border-color: var(--glass-line); border-radius: var(--surface-radius,16px); }
    .track-row:hover, .mix-card:hover, .recommend-card:hover, .library-tile:hover, .playlist-card:hover {
      border-color: transparent;
      background-color: rgba(255,255,255,calc(var(--card-surface-alpha,.035) + .025));
      transform: none;
    }
    .album-card:hover, .artist-card:hover { transform: none !important; }
    .player-artwork { box-shadow: 0 22px 58px rgba(0,0,0,.32); }
    .album-card img, .track-thumb, .queue-row img, .stage-queue-row img { border-radius: var(--artwork-radius,9px); }
    .section-head h2, .page-heading h1, .home-intro h1 { letter-spacing: -.04em; }
    .settings-backdrop {
      padding: clamp(12px,3vw,34px);
      background: rgba(5,8,12,.54);
      backdrop-filter: blur(12px) saturate(125%);
      -webkit-backdrop-filter: blur(12px) saturate(125%);
    }
    .settings-window {
      width: min(900px,100%);
      height: min(760px,calc(100dvh - 48px));
      max-height: calc(100dvh - 48px);
      grid-template-columns: 196px minmax(0,1fr);
      border-radius: 20px;
      background: rgba(20,25,33,.84) !important;
      box-shadow: 0 34px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.085);
      backdrop-filter: blur(calc(var(--glass-blur) + 10px)) saturate(155%);
      -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 10px)) saturate(155%);
    }
    .settings-rail { background: rgba(255,255,255,.025); }
    .settings-main { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .settings-header { background: rgba(20,25,33,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
    .settings-content { padding: clamp(18px,3vw,30px); }
    .settings-section { scroll-margin-top: 78px; }
    .settings-content > .settings-section { display: none; }
    .settings-content > .settings-section.active { display: block; }
    .settings-section h3 { font-size: 14px; }
    .settings-description { font-size: 12px; }
    .settings-nav button { font-size: 12px; }
    .settings-select { font-size: 12px; }
    .settings-row-copy strong { font-size: 12px; }
    .settings-row-copy span { font-size: 11px; }
    .settings-range output { font-size: 11px; }
    .settings-inline-control {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      min-height: 60px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,.055);
    }
    .settings-inline-control:last-of-type { border-bottom: 0; }
    .settings-select-small { width: min(200px,44%); min-width: 130px; }
    .settings-color-input {
      width: 44px;
      height: 36px;
      padding: 3px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 9px;
      background: rgba(255,255,255,.06);
      cursor: pointer;
    }
    .settings-range { width: min(270px,48%); }
    .settings-range input { min-width: 60px; }
    .settings-row-copy { min-width: 0; }
    .settings-inline-control > .settings-row-copy,.settings-row > .settings-row-copy { flex: 1 1 0; }
    .settings-inline-control > .settings-range,.settings-row > .settings-range { flex: 0 1 48%; min-width: 0; }
    .theme-market-note { flex-wrap: wrap; }
    .theme-market-note { border-color: transparent; background: rgba(255,255,255,.035); }
    .theme-market-note span { flex: 1 1 180px; min-width: 0; }
    .settings-switch { width: 42px; height: 24px; }
    .settings-switch span::after { width: 18px; height: 18px; }
    .settings-switch input:checked + span::after { transform: translateX(18px); }
    :root[data-density="compact"] .track-row { min-height: 48px; }
    :root[data-density="compact"] .section-head { margin-block: 26px 13px; }
    :root[data-density="compact"] .content:not(body[data-view="player"] .content) { padding-top: 12px; }
    :root[data-density="compact"] .mix-grid { gap: 9px; }
    :root[data-density="compact"] .mix-card, :root[data-density="compact"] .playlist-card { padding: 9px; }
    .top-context, .nav-label, .track-primary strong, .track-primary span { font-size: calc(1em * var(--interface-scale,1)); }
    .settings-backdrop[hidden] { display: none !important; }
    @media (max-width: 1050px) and (min-width: 761px) {
      .sidebar { width: 62px; flex-basis: 62px; padding-inline: 7px; }
      .player-bar { left: 76px; right: 10px; grid-template-columns: minmax(130px,.8fr) minmax(210px,1.2fr) minmax(105px,.7fr); gap: 8px; }
      body[data-view="player"] .player-screen.active { grid-template-columns: minmax(0,1fr) minmax(220px,26vw); }
      .player-aside { padding: 20px 15px; }
      .player-artwork { width: min(39vh,310px,34vw); }
    }
    @media (max-width: 760px) {
      html, body { height: 100%; }
      body { overflow: hidden; }
      .app-root { height: 100dvh; min-height: 0; }
      .workspace { height: 100%; min-height: 0; }
      .topbar, body[data-view="player"] .topbar { flex: 0 0 56px; height: 56px; min-height: 56px; }
      .content { padding: 14px 14px 145px; }
      body[data-view="player"] .content {
        height: auto;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 0 112px;
        scroll-padding-top: 8px;
      }
      body[data-view="player"] #view-player { height: auto; min-height: 0; }
      body[data-view="player"] .player-screen.active {
        height: auto;
        min-height: calc(100dvh - 56px);
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      body[data-view="player"] .player-main {
        min-height: calc(100dvh - 168px);
        padding: clamp(18px,4vh,30px) 18px 26px;
        overflow: visible;
        background:
          radial-gradient(ellipse at 50% 32%,var(--app-theme-glow,rgba(0,163,255,.12)),transparent 56%),
          transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .player-main-inner { width: min(100%,480px); }
      .player-artwork { width: min(47vh,410px,82vw); max-height: 47vh; }
      .player-context { margin-bottom: clamp(12px,2.5vh,20px); }
      .player-track-info h1 { font-size: calc(clamp(22px,6vw,29px) * var(--interface-scale,1)); }
      .player-aside { display: none; }
      .player-bar {
        left: 10px;
        right: 10px;
        bottom: 69px;
        min-height: 64px;
        grid-template-columns: minmax(0,1fr) auto auto;
        background: rgba(23,28,36,.78) !important;
      }
      .mobile-nav { bottom: 8px; }
      .settings-backdrop { align-items: flex-end; padding: 0; }
      .settings-window {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: min(86dvh,780px);
        max-height: 92dvh;
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
      }
      .settings-rail {
        flex: 0 0 auto;
        padding: 12px 14px 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.075);
      }
      .settings-brand { display: none; }
      .settings-nav { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
      .settings-nav button { height: auto; min-height: 38px; text-align: center; padding: 4px 3px; font-size: 10px; line-height: 1.2; }
      .settings-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
      .settings-header { position: sticky; top: 0; padding: 14px 18px; }
      .settings-content { padding: 18px 18px max(24px,env(safe-area-inset-bottom)); }
      .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .settings-inline-control { gap: 12px; }
      .settings-row-copy strong { font-size: 11px; }
      .settings-row-copy span { font-size: 10px; }
      .settings-range { width: min(46%,240px); }
      .settings-inline-control > .settings-range,.settings-row > .settings-range { flex-basis: 46%; }
      .settings-select-small { width: 44%; min-width: 0; }
      .theme-market-note span { flex-basis: 140px; }
      .settings-live-preview-head { align-items: flex-start; }
    }
    @media (max-width: 420px) {
      .topbar, body[data-view="player"] .topbar { padding-inline: 9px; }
      .top-actions, body[data-view="player"] .topbar .top-actions { gap: 6px; }
      .top-search-field { padding-inline: 10px; }
      .top-search-field input { font-size: 12px; }
      .player-artwork { width: min(43vh,370px,84vw); max-height: 43vh; }
      .player-bar { left: 7px; right: 7px; }
      .settings-content { padding-inline: 15px; }
      .settings-inline-control { align-items: flex-start; }
      .settings-inline-control > .settings-range { align-self: center; }
      .settings-select-small { min-width: 116px; }
    }
    @media (max-height: 700px) and (max-width: 760px) {
      body[data-view="player"] .player-main { min-height: 0; }
      .player-artwork { width: min(36vh,300px,70vw); max-height: 36vh; }
      .player-context { margin-bottom: 10px; }
      .player-art-wrap { margin-bottom: 12px; }
      .stage-actions { margin: 14px 0 10px; }
    }
    .artist-card { padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; }
    .artist-card:focus-visible, .album-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    .catalog-more-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 28px 0 10px; }
    .catalog-more-wrap p { margin: 0; color: var(--muted); font-size: 11px; text-align: center; }
    .catalog-more-wrap .secondary-btn { min-height: 40px; }
    #followedArtistsHeading[hidden], #followedArtistRow[hidden] { display: none; }
    @media (max-width: 760px) {
      .artist-card { width: min(27vw,110px); }
      .artist-card img { width: min(22vw,80px); height: min(22vw,80px); }
      .catalog-more-wrap { padding-bottom: 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
    /* Focused listening view: artwork first, transport always reachable, queue beside it. */
    body[data-view="player"] .content { padding: 0; overflow: hidden; }
    body[data-view="player"] #view-player.player-screen.active {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(285px,340px);
      align-items: stretch;
      gap: clamp(12px,1.7vw,22px);
      padding: clamp(12px,1.8vw,22px);
      overflow: hidden;
      background: transparent;
    }
    body[data-view="player"] .player-main {
      min-width: 0;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
      padding: clamp(24px,4vh,48px) clamp(20px,4vw,60px);
      border: 1px solid rgba(255,255,255,.085);
      border-radius: clamp(24px,3vw,36px);
      background:
        radial-gradient(ellipse at 50% 22%, color-mix(in srgb,var(--player-glow,#00A3FF) 16%,transparent), transparent 49%),
        linear-gradient(155deg,rgba(31,34,40,.88),rgba(17,18,21,.96) 68%);
      box-shadow: 0 24px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055);
    }
    body[data-view="player"] .player-main-inner {
      width: min(100%,650px);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px 0 12px;
    }
    body[data-view="player"] .player-context {
      width: min(100%,560px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 clamp(16px,2.4vh,26px);
    }
    body[data-view="player"] .player-queue-open {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      color: #CBD3DD;
      background: rgba(255,255,255,.055);
      font-size: 10px;
      letter-spacing: 0;
      text-transform: none;
      cursor: pointer;
      transition: background .2s ease,transform .2s ease;
    }
    body[data-view="player"] .player-queue-open:hover { transform: translateY(-1px); background: rgba(255,255,255,.1); }
    .player-queue-open span { color: #8FD5FF; font-variant-numeric: tabular-nums; }
    body[data-view="player"] .player-art-wrap { width: min(100%, clamp(240px,43vh,490px)); margin-bottom: clamp(22px,3.8vh,38px); }
    body[data-view="player"] .player-artwork {
      width: 100%;
      border-radius: clamp(18px,2.4vw,27px);
      box-shadow: 0 32px 85px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.12);
      animation: none;
    }
    .player-canvas { display: none; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: inherit; }
    .player-art-wrap.has-canvas .player-artwork { display: none; }
    .player-art-wrap.has-canvas .player-canvas:not([hidden]) { display: block; }
    body[data-view="player"] .player-art-glow { opacity: .35; filter: blur(88px); }
    body[data-view="player"] .player-track-info { width: min(100%,560px); text-align: left; }
    body[data-view="player"] .player-track-info h1 {
      margin: 0 0 8px;
      font-size: clamp(22px,2.3vw,31px);
      line-height: 1.16;
      overflow-wrap: anywhere;
    }
    body[data-view="player"] .player-track-info p { color: #AEB8C5; font-size: 13px; }
    body[data-view="player"] .player-track-info p span:first-child { color: #F0F3F7; }
    body[data-view="player"] .stage-source-link { display: inline-block; margin-top: 9px; font-size: 10px; }
    body[data-view="player"] .catalog-status { align-self: flex-start; }
    body[data-view="player"] .stage-actions { width: min(100%,560px); justify-content: space-between; gap: clamp(8px,2vw,24px); margin: clamp(18px,3vh,28px) 0 15px; }
    body[data-view="player"] .stage-icon-btn { flex: 0 0 auto; width: 40px; height: 40px; color: #ADB7C4; }
    body[data-view="player"] .stage-icon-btn:hover { color: #FFF; background: rgba(255,255,255,.075); }
    body[data-view="player"] .stage-icon-btn.active { color: var(--site-primary); }
    body[data-view="player"] .stage-icon-btn.main-play {
      width: 62px;
      height: 62px;
      color: #07131D;
      background: var(--site-primary);
      box-shadow: 0 8px 26px rgba(0,163,255,.21);
    }
    body[data-view="player"] .stage-icon-btn.main-play:hover { background: #35B0FF; transform: scale(1.045); }
    body[data-view="player"] .stage-progress { width: min(100%,560px); gap: 12px; color: #98A3B1; font-size: 10px; }
    body[data-view="player"] .stage-progress input { height: 4px; accent-color: var(--site-primary); }
    body[data-view="player"] .stage-volume { align-self: flex-end; width: min(100%,560px); justify-content: flex-end; margin-top: 15px; color: #909BAA; }
    body[data-view="player"] .stage-volume input { width: 96px; accent-color: var(--site-primary); }
    body[data-view="player"] .player-aside {
      min-height: 0;
      padding: 22px 18px 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: clamp(22px,2.4vw,30px);
      background: rgba(20,22,26,.76);
      box-shadow: 0 20px 70px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.055);
      backdrop-filter: blur(30px) saturate(145%);
      -webkit-backdrop-filter: blur(30px) saturate(145%);
    }
    body[data-view="player"] .player-aside-head { display:flex; align-items:center; padding: 1px 1px 16px; }
    body[data-view="player"] .player-aside-head > div { display:flex; flex-direction:column; gap:5px; }
    body[data-view="player"] .player-aside-head strong { font-size:15px; font-weight:650; color:#F1F4F7; }
    body[data-view="player"] .player-aside-head span { font-size:10px; letter-spacing:0; color:#8F9AA8; }
    body[data-view="player"] .player-aside-head .queue-network-status { max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; letter-spacing:.08em; }
    .queue-header-actions { display:flex; align-items:center; gap:4px; }
    body[data-view="player"] #view-player[data-player-tab="lyrics"] .queue-header-actions { display:none; }
    .queue-add-btn { width:29px; height:29px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.1); border-radius:9px; color:#BFE8FF; background:rgba(0,163,255,.10); font-size:20px; font-weight:350; line-height:1; cursor:pointer; }
    .queue-add-btn:hover { background:rgba(0,163,255,.2); }
    .queue-caption-actions { display:flex; align-items:center; gap:6px; }
    .queue-clear-btn { border:0; padding:7px 8px; border-radius:9px; background:transparent; color:#9CA7B5; font-size:10px; cursor:pointer; }
    .queue-clear-btn:hover { background:rgba(255,255,255,.07); color:#FFF; }
    body[data-view="player"] .stage-tabs { gap:18px; }
    body[data-view="player"] .stage-tab { padding:11px 2px 10px; }
    body[data-view="player"] .stage-side-content { padding:12px 0 2px; }
    .queue-list-caption { display:flex; align-items:center; justify-content:space-between; margin:4px 2px 9px; color:#8591A0; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
    .queue-row, .stage-queue-row { min-width:0; position:relative; gap:9px; padding:8px 5px; border-radius:12px; border:1px solid transparent; cursor:grab; transition:background .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease; }
    .queue-row:active, .stage-queue-row:active { cursor:grabbing; }
    .queue-row:hover, .stage-queue-row:hover { background:rgba(255,255,255,.055); }
    .queue-row.current, .stage-queue-row.current { background:rgba(0,163,255,.10); border-color:rgba(0,163,255,.12); }
    .queue-row.dragging, .stage-queue-row.dragging { opacity:.42; }
    .queue-row.drag-over, .stage-queue-row.drag-over { border-color:rgba(0,163,255,.55); background:rgba(0,163,255,.11); transform:translateY(-1px); }
    .queue-row img, .stage-queue-row img { flex:0 0 40px; width:40px; height:40px; border-radius:9px; }
    .queue-row > div:not(.queue-item-actions), .stage-queue-row > div:not(.queue-item-actions) { min-width:0; flex:1 1 auto; }
    .queue-item-actions { display:flex; align-items:center; flex:0 0 auto; min-width:0; gap:2px; opacity:.64; transition:opacity .18s ease; }
    .queue-row > .queue-item-actions, .stage-queue-row > .queue-item-actions { flex:0 0 auto; }
    .queue-row:hover .queue-item-actions, .stage-queue-row:hover .queue-item-actions, .queue-row:focus-within .queue-item-actions, .stage-queue-row:focus-within .queue-item-actions { opacity:1; }
    .queue-item-actions button { width:26px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; color:#9BA7B5; background:transparent; font-size:15px; line-height:1; cursor:pointer; }
    .queue-item-actions button svg { width:16px; height:16px; }
    .queue-item-actions button:hover:not(:disabled) { color:#FFF; background:rgba(255,255,255,.09); }
    .queue-item-actions [data-queue-remove]:hover { color:#FF9BA7; }
    .queue-item-actions [data-queue-next] { color:#8FD5FF; font-size:17px; }
    .stage-queue-row small { white-space:nowrap; }
    .queue-empty { padding:26px 8px; color:#939EAC; text-align:center; font-size:12px; line-height:1.55; }
    body[data-view="player"] .stage-lyrics-placeholder { min-height:250px; padding:12px 3px; }
    .catalog-stack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .catalog-stack-card { display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:13px; padding:12px; border:1px solid var(--border); border-radius:var(--surface-radius,16px); background:var(--surface); }
    .catalog-stack-card > img { width:72px; aspect-ratio:1; object-fit:cover; border-radius:var(--artwork-radius,10px); }
    .catalog-stack-copy { min-width:0; }
    .catalog-stack-copy strong,.catalog-stack-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .catalog-stack-copy strong { font-size:12px; }
    .catalog-stack-copy span { margin-top:5px; color:var(--muted); font-size:10px; }
    .catalog-stack-actions { display:flex; gap:5px; }
    .catalog-stack-actions button { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; color:var(--text); background:rgba(255,255,255,.045); cursor:pointer; }
    .catalog-stack-actions button:hover { color:var(--site-primary); background:rgba(0,163,255,.1); }
    .catalog-stack-actions svg { width:14px; height:14px; }
    @media (max-width:760px) { .catalog-stack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:480px) { .catalog-stack-grid { grid-template-columns:minmax(0,1fr); } }
    @media (max-width: 1020px) {
      body[data-view="player"] #view-player.player-screen.active { grid-template-columns:minmax(0,1fr); overflow-y:auto; }
      body[data-view="player"] .player-main { min-height: min(720px,calc(100dvh - 100px)); }
      body[data-view="player"] .player-aside { min-height:320px; max-height:430px; }
    }
    @media (max-width: 720px) {
      body[data-view="player"] .content { overflow-y:auto; overflow-x:hidden; }
      body[data-view="player"] #view-player.player-screen.active { display:flex; flex-direction:column; gap:12px; overflow:visible; padding:8px 10px 150px; }
      body[data-view="player"] .player-main { min-height:0; overflow:visible; padding:18px clamp(16px,5vw,25px) 24px; border-radius:24px; }
      body[data-view="player"] .player-main-inner { padding:0; }
      body[data-view="player"] .player-context { margin:0 0 17px; }
      body[data-view="player"] .player-context strong { font-size:9px; }
      body[data-view="player"] .player-art-wrap { width:min(68vw, min(39vh,360px)); margin-bottom:22px; }
      body[data-view="player"] .player-track-info h1 { font-size:clamp(20px,6vw,27px); }
      body[data-view="player"] .stage-actions { margin:18px 0 14px; gap:5px; }
      body[data-view="player"] .stage-icon-btn { width:38px; height:38px; }
      body[data-view="player"] .stage-icon-btn.main-play { width:56px; height:56px; }
      body[data-view="player"] .stage-volume { margin-top:12px; }
      body[data-view="player"] .player-aside { display:flex; min-height:310px; max-height:390px; padding:17px 14px 12px; border-radius:21px; }
      body[data-view="player"] .player-bar { display:none; }
      body[data-view="player"] .topbar .top-actions { justify-content:flex-end; gap:8px; }
      body[data-view="player"] .top-search-shell { flex:1; min-width:0; width:auto; }
      #topSettings { display:grid !important; flex:0 0 36px; width:36px; height:36px; }
      .queue-item-actions { opacity:1; }
      .queue-item-actions button { width:30px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .queue-row, .stage-queue-row { transition:none; }
    }
    .settings-section h3 { font-size: calc(14px * var(--interface-scale,1)); }
    .settings-description, .settings-row-copy strong, .settings-row-copy span,
    .settings-select, .settings-range output, .settings-nav button,
    .theme-option strong, .theme-option small, .theme-market-note,
    .theme-market-note button { font-size: calc(1em * var(--interface-scale,1)); }
    .settings-row-copy strong { font-size: calc(12px * var(--interface-scale,1)); }
    .settings-row-copy span { font-size: calc(11px * var(--interface-scale,1)); }
    .settings-description { font-size: calc(12px * var(--interface-scale,1)); }
    .settings-select { font-size: calc(13px * var(--interface-scale,1)); }
    .settings-range output { font-size: calc(12px * var(--interface-scale,1)); }
    .settings-nav button { font-size: calc(12px * var(--interface-scale,1)); }
    .theme-option strong { font-size: calc(11px * var(--interface-scale,1)); }
    .theme-option small, .theme-market-note, .theme-market-note button { font-size: calc(10px * var(--interface-scale,1)); }
    @media (max-width: 620px) { .settings-nav button { font-size: calc(9px * var(--interface-scale,1)); } }