/* =====================================================================
   theme.css — the unified Apple (iOS / macOS 26-27 "Liquid Glass") layer.

   Loaded LAST on every page, so it is the single source of truth over the
   three legacy token systems that used to fight each other:
     • app.css   — dark-first, --primary:#1d9bf6, --sidebar-w:240
     • ui.css    — light-first, --primary:#2f6bff, partial dark
     • index.html (Home) — its own inline --page/--accent island
   This file re-maps EVERY token those files use to one Apple palette, in
   BOTH themes, so light/dark is finally complete and consistent app-wide.
   It also owns the shared chrome look (sidebar, topbar, nav, cards, the
   docked player, the mobile tab bar), the motion system (spring easing +
   press states), and cross-document View Transitions.

   Theme mechanism: light by default (follows the OS until the user picks),
   dark under html[data-theme="dark"]. shell.js writes data-theme from
   localStorage; it also still toggles html.light for legacy rules — both
   stay in sync, and this file wins regardless because it loads last.
   ===================================================================== */

/* ============================ 1. Tokens =============================== */
:root{
  color-scheme: light;

  /* — Apple system font stack (overrides Fira Sans / whatever ui.css set) — */
  --font-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
              "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* — Canvas & surfaces (light) — */
  --page:#F5F5F7;  --bg:#F5F5F7;  --app:#F5F5F7;  --bg-main:#FBFBFD;
  --surface:#FFFFFF; --surface-2:#F1F2F6; --surface-3:#E9EAF0;
  --solid:#FFFFFF; --card:#FFFFFF; --card-hover:#F3F4F8; --sidebar:transparent;
  /* translucent "Liquid Glass" materials */
  --panel:rgba(255,255,255,.72);
  --panel-strong:rgba(255,255,255,.86);
  --panel-2:#F1F2F6;
  --panel-edge:rgba(255,255,255,.7);
  --glass-blur:14px; --glass-sat:150%;  /* was 40px/180% — heavy blur re-composites every scroll frame; lighter reads the same, far cheaper */
  --chrome-bg:rgba(250,250,252,.72);   /* sidebar / topbar / tabbar material */
  --chrome-edge:rgba(0,0,0,.08);

  /* — Brand: one Apple blue everywhere (was 3 different blues) — */
  --primary:#0A84FF; --accent:#0A84FF;
  --primary-2:#0071E3; --primary-3:#0060CC;
  --primary-600:#0071E3; --primary-700:#0060CC;
  --primary-soft:rgba(10,132,255,.12);
  --primary-tint:rgba(10,132,255,.10); --primary-tint2:rgba(10,132,255,.16);
  --accent-tint:rgba(10,132,255,.12);
  --accent-grad:linear-gradient(135deg,#0A84FF,#0060DF);
  --primary-glow:rgba(10,132,255,.42);
  --ring:rgba(10,132,255,.32);

  /* — Text (Apple label hierarchy, light) — */
  --text:#1D1D1F; --text-2:#3A3A3C; --text-3:#6E6E73; --text-4:#8E8E93;
  --text-muted:#6E6E73; --text-dim:#8E8E93; --muted:#8E8E93;

  /* — Hairlines — */
  --border:rgba(0,0,0,.09); --border-2:rgba(0,0,0,.14);
  --hair:rgba(0,0,0,.08); --hair-2:rgba(0,0,0,.05);

  /* — Elevation — */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08),0 4px 12px -6px rgba(15,23,42,.10);
  --shadow:0 8px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -22px rgba(15,23,42,.26);
  --shadow-card:0 8px 32px rgba(15,23,42,.06);
  --shadow-float:0 6px 24px rgba(15,23,42,.08);
  --shadow-search:0 12px 40px rgba(15,23,42,.12),0 2px 8px rgba(15,23,42,.05);

  /* — Radii (concentric, iOS-ish) — */
  --radius:16px; --radius-sm:11px; --radius-lg:22px; --radius-xl:28px; --pill:999px;

  /* — Layout — */
  --sidebar-w:250px; --rail-w:344px; --topbar-h:64px;
  --tabbar-h:56px; --page-gutter:clamp(20px,2.4vw,40px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* — Interaction surfaces — */
  --hover:rgba(0,0,0,.05); --hover-accent:rgba(10,132,255,.08);
  --tag-bg:#EEF1F6; --chip-bg:rgba(255,255,255,.7);
  --seg-bg:#EDEEF3; --seg-bg-hover:#E4E6EE;

  /* — Waveforms / misc from Home — */
  --wave-un:#C6CFDD; --wave-pl:#8B99AF; --wave-un-on:#9FC0F2; --wave-pl-on:#0A84FF;
  --playhead:#1D1D1F; --scroll:rgba(15,23,42,.16); --art-ring:rgba(0,0,0,.06);

  /* — Motion — */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.32,.72,0,1);        /* iOS-style overshoot-free spring */
  --dur-fast:.14s; --dur:.24s; --dur-slow:.42s;

  --font-sys-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}

/* ---------------- Dark (iOS true-black + elevated greys) --------------- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#000000; --bg:#000000; --app:#000000; --bg-main:#0A0A0C;
  --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C;
  --solid:#1C1C1E; --card:#1C1C1E; --card-hover:#2C2C2E; --sidebar:transparent;
  --panel:rgba(28,28,30,.66);
  --panel-strong:rgba(30,30,33,.82);
  --panel-2:#2C2C2E;
  --panel-edge:rgba(255,255,255,.10);
  --chrome-bg:rgba(20,20,22,.66);
  --chrome-edge:rgba(255,255,255,.09);

  --primary:#0A84FF; --accent:#0A84FF; --primary-2:#409CFF; --primary-3:#66B0FF;
  --primary-600:#409CFF; --primary-700:#66B0FF;
  --primary-soft:rgba(10,132,255,.18);
  --primary-tint:rgba(10,132,255,.16); --primary-tint2:rgba(10,132,255,.24);
  --accent-tint:rgba(10,132,255,.18);
  --accent-grad:linear-gradient(135deg,#0A84FF,#0060DF);
  --primary-glow:rgba(10,132,255,.5);
  --ring:rgba(10,132,255,.4);

  --text:#F5F5F7; --text-2:#C7C7CC; --text-3:#98989F; --text-4:#8E8E93;
  --text-muted:#98989F; --text-dim:#6E6E73; --muted:#6E6E73;

  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.06);

  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 6px 16px -8px rgba(0,0,0,.6);
  --shadow:0 12px 34px -14px rgba(0,0,0,.7);
  --shadow-lg:0 28px 64px -22px rgba(0,0,0,.8);
  --shadow-card:0 8px 32px rgba(0,0,0,.5);
  --shadow-float:0 8px 28px rgba(0,0,0,.55);
  --shadow-search:0 18px 48px rgba(0,0,0,.6);

  --hover:rgba(255,255,255,.06); --hover-accent:rgba(10,132,255,.14);
  --tag-bg:rgba(255,255,255,.08); --chip-bg:rgba(255,255,255,.05);
  --seg-bg:rgba(255,255,255,.08); --seg-bg-hover:rgba(255,255,255,.13);

  --wave-un:#48484A; --wave-pl:#6E6E73; --wave-un-on:#3A6FB0; --wave-pl-on:#0A84FF;
  --playhead:#F5F5F7; --scroll:rgba(255,255,255,.18); --art-ring:rgba(255,255,255,.10);
}

/* First paint before shell.js runs: follow the OS when no explicit choice. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not(.light){
    color-scheme: dark;
    --page:#000; --bg:#000; --app:#000; --bg-main:#0A0A0C;
    --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C;
    --solid:#1C1C1E; --card:#1C1C1E; --card-hover:#2C2C2E;
    --panel:rgba(28,28,30,.66); --panel-strong:rgba(30,30,33,.82); --panel-2:#2C2C2E;
    --chrome-bg:rgba(20,20,22,.66); --chrome-edge:rgba(255,255,255,.09);
    --text:#F5F5F7; --text-2:#C7C7CC; --text-3:#98989F; --text-4:#8E8E93;
    --text-muted:#98989F; --text-dim:#6E6E73; --muted:#6E6E73;
    --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
    --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.06);
    --primary-2:#409CFF;
  }
}

/* ============================ 2. Base =============================== */
body{
  font-family:var(--font-sys)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* Public policy/help surfaces share the product typography without loading
   the app shell or requiring authentication. */
.public-doc{min-height:100vh;background:var(--app);padding:48px 20px;color:var(--text)}
.doc-card{max-width:760px;margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(24px,5vw,56px);box-shadow:var(--shadow)}
.doc-card h1{font-size:clamp(30px,5vw,48px);line-height:1.08;margin:10px 0 18px}
.doc-card h2{font-size:20px;margin:28px 0 8px}
.doc-card p{color:var(--text-2);line-height:1.7;margin:0 0 14px}
.doc-card a{color:var(--primary);font-weight:700}
.doc-card .eyebrow{color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.doc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.site-footer{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;padding:22px 20px 34px;color:var(--text-3);font-size:12px}
.site-footer a{color:var(--text-2);font-weight:600}.site-footer a:hover{color:var(--primary)}

/* ====================== 3. Motion & micro-interactions ================ */
/* One consistent, physical press: everything tappable dips a touch and dims.
   Uses transform+opacity only (compositor-friendly). */
@media (hover:hover){
  a[href], button, .nav-item, .icon-btn, .btn, .btn-new, .chip, .seg,
  .play-btn, .rec-play, .fav, .dl, .card, .tab, .menu-item, .user-card,
  .tb-pricing, [role="button"], [data-nav]{
    transition:transform var(--dur-fast) var(--ease-spring),
               background-color var(--dur) var(--ease),
               color var(--dur) var(--ease),
               border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease),
               opacity var(--dur-fast) var(--ease);
  }
}
a[href]:active, button:not(:disabled):active, .nav-item:active, .icon-btn:active,
.btn:active, .btn-new:active, .chip:active, .play-btn:active, .rec-play:active,
.fav:active, .dl:active, .menu-item:active, .user-card:active, .tab:active,
[data-nav]:active{
  transform:scale(.955);
  opacity:.92;
}
/* Cards lift a hair on hover rather than shifting layout */
.card:hover, .tile:hover{ transform:translateY(-2px); }

/* ====================== 4. Shared chrome: SIDEBAR ==================== */
.app{ background:var(--bg); }
.sidebar{
  view-transition-name:app-sidebar;
  background:var(--chrome-bg);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-right:1px solid var(--chrome-edge);
}
.sidebar .brand b{ color:var(--text); font-weight:700; letter-spacing:-.02em; }
.sidebar .nav-item{
  border-radius:12px; color:var(--text-2); font-weight:500;
  padding:9px 11px; gap:11px;
}
.sidebar .nav-item svg{ color:var(--text-3); }
.sidebar .nav-item:hover{ background:var(--hover); color:var(--text); }
.sidebar .nav-item:hover svg{ color:var(--text); }
.sidebar .nav-item.active{
  background:var(--primary-soft); color:var(--primary); font-weight:600;
}
.sidebar .nav-item.active svg{ color:var(--primary); }
.sidebar .nav-sub .nav-item{ font-size:13.5px; }
.sidebar .storage-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-xs);
}
.sidebar .storage-card .bar{ background:var(--surface-3); border-radius:99px; overflow:hidden; height:6px; }
.sidebar .storage-card .bar > i{ background:var(--primary); border-radius:99px; display:block; height:100%; }
.sidebar .storage-card .bar > i.warn{ background:#FF9F0A; }
.sidebar .storage-card .bar > i.danger{ background:#FF453A; }
.sidebar .user-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-xs);
}
.sidebar .user-card:hover{ background:var(--card-hover); border-color:var(--border-2); }
.sidebar .user-card .who b{ color:var(--text); }
.sidebar .user-card .who span{ color:var(--text-3); }

/* ====================== 5. Shared chrome: TOPBAR ==================== */
.topbar{
  view-transition-name:app-topbar;
  background:var(--chrome-bg);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-bottom:1px solid var(--chrome-edge);
}
.topbar .searchbar{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--pill); color:var(--text-3);
}
.topbar .searchbar:focus-within{
  background:var(--surface); border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring);
}
.topbar .searchbar input{ color:var(--text); }
.topbar .searchbar input::placeholder{ color:var(--text-4); }
.topbar .searchbar .kbd{
  background:var(--surface-3); color:var(--text-3);
  border-radius:7px; padding:2px 6px; font-size:11px;
}
.topbar .icon-btn{
  color:var(--text-2); border-radius:12px; background:transparent;
  width:38px; height:38px;
}
.topbar .icon-btn:hover{ background:var(--hover); color:var(--text); }
.topbar .btn-new{
  background:var(--primary); color:#fff; border-radius:12px;
  box-shadow:0 6px 16px -8px var(--primary-glow); font-weight:600;
}
.topbar .btn-new:hover{ background:var(--primary-2); }
/* High-specificity dark fix for the legacy hardcoded light searchbar
   (ui.css:1086 set background:#f7f8fa without a theme guard). */
:root[data-theme="dark"] .topbar .searchbar{ background:var(--surface-2); border-color:var(--border); }

/* Dropdown menus / popovers — glass + spring in */
.menu, .new-wrap .menu{
  background:var(--panel-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(14px);
  backdrop-filter:saturate(var(--glass-sat)) blur(14px);
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg);
}
.menu .menu-item{ color:var(--text); border-radius:10px; }
.menu .menu-item:hover{ background:var(--hover); }
.menu .menu-item small{ color:var(--text-3); }
.new-wrap .menu.open{ animation:pop-in var(--dur) var(--ease-spring) both; }
@keyframes pop-in{ from{opacity:0;transform:translateY(-6px) scale(.97)} to{opacity:1;transform:none} }

/* ====================== 6. Docked player ==================== */
#shellPlayer, .player.shell-player{
  view-transition-name:app-player;
  background:var(--panel-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(14px);
  backdrop-filter:saturate(var(--glass-sat)) blur(14px);
  border-top:1px solid var(--chrome-edge);
}
.player.shell-player{
  left:calc(var(--sidebar-w) + 18px);
  right:18px;
  bottom:14px;
  height:82px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,248,255,.7));
  box-shadow:0 24px 70px -28px rgba(21,48,96,.48),0 8px 26px -18px rgba(15,23,42,.28),inset 0 1px 0 rgba(255,255,255,.96);
  overflow:hidden;
  opacity:0;
  transform:translateY(calc(100% + 28px)) scale(.985);
  transition:opacity .28s ease,transform .58s var(--liquid-spring),box-shadow .42s ease;
}
.player.shell-player.show{opacity:1;transform:translateY(0) scale(1)}
.player.shell-player::before{
  border:0;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.7),rgba(255,255,255,.28) 48%,rgba(118,174,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(70,105,165,.08);
}
:root[data-theme="dark"] .player.shell-player{
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(145deg,rgba(38,38,42,.88),rgba(19,21,27,.76));
  box-shadow:0 28px 74px -24px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.12);
}
:root[data-theme="dark"] .player.shell-player::before{background:linear-gradient(115deg,rgba(255,255,255,.08),rgba(255,255,255,.025) 52%,rgba(10,132,255,.1))}
.player.shell-player .pl-art{border-radius:14px;box-shadow:0 10px 24px -12px rgba(15,23,42,.48),inset 0 1px 0 rgba(255,255,255,.28)}
.player.shell-player .pl-center{gap:5px;padding:0 14px}
.player.shell-player .plb.play{
  width:42px;
  height:42px;
  margin:0;
  color:#fff;
  background:linear-gradient(145deg,#4386ff,#1765df);
  transform:none;
  box-shadow:0 12px 30px -13px rgba(10,94,225,.82),inset 0 1px 0 rgba(255,255,255,.48);
  transition:scale .34s var(--liquid-snap),translate .38s var(--liquid-spring),box-shadow .36s ease,filter .24s ease;
}
.player.shell-player .plb.play:hover{color:#fff;background:linear-gradient(145deg,#5593ff,#0d5fd8);transform:none;translate:0 -1px;scale:1.045;box-shadow:0 16px 34px -13px rgba(10,94,225,.92),inset 0 1px 0 rgba(255,255,255,.52)}
.player.shell-player .plb.play:active{translate:0 1px;scale:.94}
.player.shell-player .pl-prog{padding:4px 7px;border-radius:999px;background:rgba(102,126,164,.08);box-shadow:inset 0 1px 2px rgba(29,55,96,.08)}
.player.shell-player .pl-wave-canvas{height:28px;border-radius:999px}
.player.shell-player .pl-name{ color:var(--text); }
.player.shell-player .pl-cat{ color:var(--text-3); }

/* ====================== 7. Mobile bottom TAB BAR ==================== */
.tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  grid-template-columns:repeat(5,1fr); align-items:stretch;
  background:var(--chrome-bg);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-top:1px solid var(--chrome-edge);
  view-transition-name:app-tabbar;
}
.tabbar .tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--text-4); font-size:10.5px; font-weight:600;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  letter-spacing:-.01em; background:none; border:0;
}
.tabbar .tab svg{ width:24px; height:24px; stroke-width:1.9; }
.tabbar .tab.active{ color:var(--primary); }
.tabbar .tab:active{ transform:scale(.9); opacity:.7; }

/* Slide-up "More" sheet (secondary nav on mobile) */
.more-sheet-scrim{
  position:fixed; inset:0; z-index:130; display:none;
  background:rgba(0,0,0,.32); opacity:0; transition:opacity var(--dur) var(--ease);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.more-sheet-scrim.show{ display:block; opacity:1; }
.more-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:131;
  transform:translateY(100%); transition:transform var(--dur-slow) var(--ease-spring);
  background:var(--panel-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-top-left-radius:22px; border-top-right-radius:22px;
  border-top:1px solid var(--chrome-edge);
  padding:8px 14px calc(18px + var(--safe-b));
  box-shadow:var(--shadow-lg);
}
.more-sheet-scrim.show .more-sheet{ transform:translateY(0); }
.more-sheet .grabber{ width:38px; height:5px; border-radius:99px; background:var(--border-2); margin:8px auto 12px; }
.more-sheet a{
  display:flex; align-items:center; gap:14px; padding:14px 12px;
  color:var(--text); font-size:16px; font-weight:500; border-radius:14px;
  text-decoration:none;
}
.more-sheet a:hover, .more-sheet a:active{ background:var(--hover); }
.more-sheet a svg{ width:22px; height:22px; color:var(--text-3); flex:none; stroke-width:1.9; }

/* ====================== 8. Responsive: phone layout ==================== */
@media (max-width:820px){
  :root{ --topbar-h:56px; }
  /* single column; the sidebar becomes an off-canvas drawer (shell.js .open) */
  .app{ grid-template-columns:1fr!important; }
  .sidebar{
    position:fixed; top:0; bottom:0; left:0; width:min(84vw,300px); z-index:140;
    transform:translateX(-102%); transition:transform var(--dur-slow) var(--ease-spring);
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{ transform:none; }
  .tabbar{ display:grid; }
  /* keep content clear of the fixed tab bar + docked player */
  .workspace{ padding-bottom:calc(var(--tabbar-h) + var(--safe-b)); }
  body.player-open .workspace{ padding-bottom:calc(var(--tabbar-h) + 88px + var(--safe-b)); }
  #shellPlayer, .player.shell-player{
    left:10px;
    right:10px;
    bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px);
    height:68px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding:0 12px;
    border-radius:20px;
  }
  .player.shell-player .pl-center{display:none}
  .player.shell-player .pl-info{min-width:0}
  .player.shell-player .pl-art{width:44px;height:44px;border-radius:12px}
  .player.shell-player .pl-right{gap:2px}
  .player.shell-player .pl-dl{width:38px;height:38px;padding:0;justify-content:center;font-size:0;border-radius:50%}
  .player.shell-player .pl-dl svg{width:16px;height:16px}
  /* comfortable iOS touch targets */
  .snd-row, .sfx-row, .rec-row, .tr-row, .more-sheet a, .menu-item{ min-height:48px; }
  .topbar .searchbar{ height:40px; }
}
/* Hide the tab bar on the sign-in / standalone screens that opt out */
body[data-page="login"] .tabbar, body.no-tabbar .tabbar{ display:none!important; }

/* ====================== 9. Cross-document View Transitions ==================== */
/* DISABLED (2026-07-24). On this glass-heavy MPA the cross-document transition
   has to rasterize a snapshot of the outgoing page — including its expensive
   backdrop-filter blur — and hold it FROZEN on screen until the incoming page
   has rendered, then fade. That waiting-on-a-frozen-snapshot reads as a "laggy
   fade-out" of the current tab (and is worst on browsers that block speculative
   prerender). Plain navigation + the prefetch/prerender in shell.js swaps to an
   already-loaded page with no snapshot cost and no animation, which feels
   instant. The shell containers keep their glass background in CSS, so there's
   no white flash while shell.js fills them. Re-enable with `navigation:auto`.
   The ::view-transition-* rules below are now inert (kept for reference). */
@view-transition{ navigation:none; }

/* Persistent chrome keeps its name on both pages → it is matched old↔new and
   does NOT animate: the shell appears to stay put while only content swaps. */
::view-transition-group(app-sidebar),
::view-transition-group(app-topbar),
::view-transition-group(app-tabbar),
::view-transition-group(app-player){ animation-duration:0s; }

/* Main content: a crisp, fast OPACITY-ONLY cross-fade. No transform — moving a
   rasterized page snapshot sub-pixel is what made navigation look blurry — and
   short enough to feel instant. The old page stays solid underneath while the
   new one fades in over it, so there's no washed-out see-through ghosting. */
::view-transition-old(root){ animation:none; }
::view-transition-new(root){ animation:vt-in 120ms ease both; }
@keyframes vt-in{ from{ opacity:0 } to{ opacity:1 } }

/* ============ 9b. Beat legacy per-theme chrome rules ============
   ui.css ships ~58 `html[data-theme="dark"] .<chrome>` rules (specificity
   0,2,1) that would otherwise override the bare-class glass above in dark
   mode. These `html[data-theme] …` selectors match that specificity and,
   loading later, win in BOTH themes — so the Liquid-Glass chrome is
   consistent light and dark. Values stay token-driven. */
html[data-theme] .sidebar{ background:var(--chrome-bg); border-right:1px solid var(--chrome-edge); }
html[data-theme] .topbar{ background:var(--chrome-bg); border-bottom:1px solid var(--chrome-edge); }
html[data-theme] #shellPlayer,
html[data-theme] .player.shell-player{ background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,248,255,.7)); border:1px solid rgba(255,255,255,.72); }
html[data-theme="dark"] #shellPlayer,
html[data-theme="dark"] .player.shell-player{ background:linear-gradient(145deg,rgba(38,38,42,.88),rgba(19,21,27,.76)); border-color:rgba(255,255,255,.13); }
html[data-theme] .topbar .searchbar{ background:var(--surface-2); border:1px solid var(--border); color:var(--text-3); }
html[data-theme] .topbar .searchbar input{ color:var(--text); }
html[data-theme] .topbar .searchbar:focus-within{ background:var(--surface); border-color:var(--primary); }
html[data-theme] .sidebar .nav-item{ color:var(--text-2); }
html[data-theme] .sidebar .nav-item:hover{ background:var(--hover); color:var(--text); }
html[data-theme] .sidebar .nav-item.active{ background:var(--primary-soft); color:var(--primary); }
html[data-theme] .sidebar .nav-item.active svg{ color:var(--primary); }
html[data-theme] .sidebar .user-card,
html[data-theme] .sidebar .storage-card{ background:var(--card); border:1px solid var(--border); }

/* ====================== 10. Reference-aligned app system ==================== */
:root{
  --page:#F2F4FA;
  --bg:#F2F4FA;
  --app:#F2F4FA;
  --bg-main:transparent;
  --surface:#FFFFFF;
  --surface-2:#F0F3F9;
  --surface-3:#E8EDF5;
  --card:rgba(255,255,255,.82);
  --card-hover:#FFFFFF;
  --panel:rgba(255,255,255,.72);
  --panel-strong:rgba(255,255,255,.90);
  --chrome-bg:rgba(255,255,255,.72);
  --chrome-edge:rgba(255,255,255,.92);
  --primary:#2F6BEE;
  --accent:#2F6BEE;
  --primary-2:#245EE1;
  --primary-3:#194CC8;
  --primary-soft:#E7EEFD;
  --primary-tint:#E7EEFD;
  --primary-tint2:#DCE7FC;
  --accent-tint:#E7EEFD;
  --accent-grad:linear-gradient(145deg,#4B8AF8 0%,#2F6BEE 50%,#2050CB 100%);
  --text:#11182A;
  --text-2:#394762;
  --text-3:#687995;
  --text-4:#93A2B9;
  --muted:#93A2B9;
  --border:rgba(17,24,42,.08);
  --border-2:rgba(17,24,42,.13);
  --hair:rgba(17,24,42,.075);
  --hair-2:rgba(17,24,42,.052);
  --hover:rgba(17,24,42,.045);
  --shadow-xs:0 1px 2px rgba(17,24,42,.035);
  --shadow-sm:0 8px 20px -14px rgba(17,24,42,.20);
  --shadow:0 20px 48px -30px rgba(25,45,85,.28);
  --shadow-lg:0 26px 70px -32px rgba(25,45,85,.38);
  --shadow-glass:0 16px 44px -28px rgba(31,55,100,.30),inset 0 1px 0 rgba(255,255,255,.78);
  --sidebar-w:clamp(286px,16.8vw,344px);
  --topbar-h:88px;
  --tabbar-h:76px;
  --pill:999px;
  --radius:16px;
  --radius-lg:22px;
  --glass-blur:14px;
  --glass-sat:150%;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.18,.9,.25,1.15);
}
html[data-theme="dark"]{
  --page:#080A0F;
  --bg:#080A0F;
  --app:#080A0F;
  --bg-main:transparent;
  --surface:#171A22;
  --surface-2:#20242E;
  --surface-3:#2A303C;
  --card:rgba(24,28,36,.84);
  --card-hover:#222733;
  --panel:rgba(22,26,34,.76);
  --panel-strong:rgba(25,29,38,.92);
  --chrome-bg:rgba(22,26,34,.76);
  --chrome-edge:rgba(255,255,255,.10);
  --primary:#5A95FF;
  --accent:#5A95FF;
  --primary-2:#73A5FF;
  --primary-3:#3878E8;
  --primary-soft:rgba(90,149,255,.16);
  --primary-tint:rgba(90,149,255,.16);
  --primary-tint2:rgba(90,149,255,.24);
  --accent-tint:rgba(90,149,255,.16);
  --accent-grad:linear-gradient(145deg,#67A2FF 0%,#377DEB 52%,#214FB8 100%);
  --text:#F5F7FB;
  --text-2:#CDD4E0;
  --text-3:#98A5B8;
  --text-4:#6E7A8D;
  --muted:#778397;
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.15);
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.06);
  --hover:rgba(255,255,255,.07);
  --shadow-xs:0 1px 2px rgba(0,0,0,.32);
  --shadow-sm:0 10px 24px -14px rgba(0,0,0,.72);
  --shadow:0 24px 54px -30px rgba(0,0,0,.82);
  --shadow-lg:0 30px 76px -30px rgba(0,0,0,.92);
  --shadow-glass:0 18px 54px -28px rgba(0,0,0,.86),inset 0 1px 0 rgba(255,255,255,.07);
}

*{letter-spacing:0!important}
body[data-page]{
  overflow:hidden;
  background:
    radial-gradient(980px 620px at 72% -8%,rgba(66,119,238,.12),transparent 64%),
    radial-gradient(760px 520px at 8% 108%,rgba(75,107,200,.08),transparent 66%),
    var(--page)!important;
  color:var(--text);
}
html[data-theme="dark"] body[data-page]{
  background:
    radial-gradient(980px 620px at 72% -8%,rgba(58,120,235,.15),transparent 65%),
    radial-gradient(700px 500px at 8% 108%,rgba(72,78,150,.10),transparent 68%),
    var(--page)!important;
}
body[data-page] .app{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  width:100%;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:transparent;
}
body[data-page] .workspace{
  min-width:0;
  min-height:0;
  height:100dvh;
  overflow:hidden;
  background:transparent!important;
}
body[data-page] .workspace > main,
body[data-page] .workspace > .canvas{
  flex:1 1 auto;
  min-height:0;
}
body[data-page]:not([data-page="home"]) .workspace > main,
body[data-page]:not([data-page="home"]) .workspace > .canvas{
  overflow-y:auto;
  overflow-x:hidden;
}
body[data-page="create"] .workspace > .create-main{height:auto!important;min-height:0!important}

body[data-page] .sidebar,
html[data-theme] body[data-page] .sidebar{
  position:sticky;
  top:16px;
  width:calc(100% - 28px);
  height:calc(100dvh - 32px);
  margin-left:16px;
  padding:18px 16px 16px;
  overflow:hidden;
  border:1px solid var(--chrome-edge);
  border-radius:28px;
  background:var(--chrome-bg);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
}
body[data-page] .sidebar .brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px 18px;
  margin:0;
  color:var(--text);
  filter:none;
}
body[data-page] .sidebar .brand .mark,
.mobile-brand .mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  color:#fff;
  background:var(--accent-grad);
  box-shadow:0 9px 20px -10px rgba(47,107,238,.85),inset 0 1px 0 rgba(255,255,255,.30);
}
body[data-page] .sidebar .brand .mark svg,
.mobile-brand .mark svg{width:23px;height:23px;stroke-width:2}
body[data-page] .sidebar .brand b{font-size:22px;font-weight:760;color:var(--text)}
body[data-page] .sidebar .nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:4px 2px 0;
  gap:2px;
}
body[data-page] .sidebar .nav-item{
  min-height:42px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text-2);
  font-size:15px;
  font-weight:520;
}
body[data-page] .sidebar .nav-item svg{width:19px;height:19px;color:currentColor;stroke-width:1.85}
body[data-page] .sidebar .nav-item.active{
  color:var(--primary);
  background:var(--primary-soft);
  box-shadow:inset 0 0 0 1px rgba(47,107,238,.025);
}
body[data-page] .sidebar .nav-sub{padding-left:15px}
body[data-page] .sidebar .nav-sub .nav-item{min-height:38px;padding:8px 10px;font-size:14px}
body[data-page] .sidebar .nav-sub .nav-item::before{display:none}
body[data-page] .sidebar .storage-card,
html[data-theme] body[data-page] .sidebar .storage-card{
  margin:10px 2px 10px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel-strong);
  box-shadow:var(--shadow-xs);
}
body[data-page] .sidebar .user-card,
html[data-theme] body[data-page] .sidebar .user-card{
  margin:0 2px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel-strong);
  box-shadow:var(--shadow-xs);
}

body[data-page] .topbar,
html[data-theme] body[data-page] .topbar{
  position:sticky;
  top:0;
  z-index:70;
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr);
  align-items:center;
  gap:18px;
  width:100%;
  height:var(--topbar-h);
  padding:15px 28px 9px;
  border:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.glass-chip{
  border:1px solid var(--chrome-edge);
  background:var(--chrome-bg);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(14px);
  backdrop-filter:saturate(var(--glass-sat)) blur(14px);
}
.shell-crumb{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 20px;
  border-radius:var(--pill);
  color:var(--text-4);
  font-size:14.5px;
  white-space:nowrap;
}
.shell-crumb a{color:var(--text-2);font-weight:650;filter:none}
.shell-crumb b{font-weight:520;color:var(--text-4)}
.shell-crumb span{color:var(--text-4);opacity:.55}
.shell-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:3px;
  height:54px;
  padding:6px;
  border-radius:var(--pill);
}
.shell-nav-item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:100px;
  height:42px;
  padding:0 18px;
  border-radius:var(--pill);
  color:var(--text-2);
  font-size:15px;
  font-weight:560;
  filter:none!important;
}
.shell-nav-item:hover{color:var(--text);background:var(--hover)}
.shell-nav-item.active{
  color:#fff;
  background:var(--accent-grad);
  box-shadow:0 7px 18px -9px rgba(47,107,238,.85),inset 0 1px 0 rgba(255,255,255,.28);
}
body[data-page] .topbar-actions,
html[data-theme] body[data-page] .topbar-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:2px;
  min-height:54px;
  margin:0;
  padding:6px;
  border-radius:var(--pill);
}
body[data-page] .topbar .icon-btn{width:40px;height:40px;border-radius:50%;color:var(--text-2)}
body[data-page] .topbar .icon-btn{position:relative;display:grid;place-items:center}
body[data-page] .topbar .icon-btn svg{width:20px;height:20px}
body[data-page] .topbar .icon-btn:hover{background:var(--hover);color:var(--text)}
body[data-page] .topbar .icon-btn .dot{
  position:absolute;
  top:7px;
  right:8px;
  width:7px;
  height:7px;
  border:2px solid var(--panel-strong);
  border-radius:50%;
  background:#FF453A;
}
.theme-sr,.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
body[data-page] .topbar .btn-new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:42px;
  margin-left:4px;
  padding:0 19px;
  border-radius:var(--pill);
  background:var(--accent-grad);
  box-shadow:0 7px 18px -9px rgba(47,107,238,.9),inset 0 1px 0 rgba(255,255,255,.28);
  font-size:14px;
  font-weight:650;
}
body[data-page] .topbar .btn-new svg{width:17px;height:17px}
body[data-page] .topbar .menu-btn{display:none;width:40px;height:40px;color:var(--text-2)}
.new-wrap{position:relative}
.new-wrap .menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:100;
  display:block;
  width:268px;
  min-width:268px;
  padding:7px;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px) scale(.97);
  transform-origin:top right;
  transition:opacity .18s var(--ease),transform .22s var(--ease-spring),visibility .18s;
}
.new-wrap .menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.new-wrap .menu-item{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:52px;
  padding:7px 9px;
  border-radius:11px;
  color:var(--text);
  filter:none;
}
.new-wrap .menu-item:hover{background:var(--hover)}
.new-wrap .menu-item .mi-ic{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:10px;
  color:var(--primary);
  background:var(--primary-soft);
}
.new-wrap .menu-item .mi-ic svg{width:18px;height:18px}
.new-wrap .menu-item b,.new-wrap .menu-item small{display:block}
.new-wrap .menu-item b{font-size:13.5px;font-weight:650;color:var(--text)}
.new-wrap .menu-item small{margin-top:2px;font-size:11.5px;color:var(--text-3)}
.mobile-brand,.mobile-account{display:none}

body[data-page] .canvas{
  width:100%;
  max-width:none;
  margin:0;
  padding:28px 34px 76px;
  gap:24px;
}
body[data-page] .canvas.wide{width:100%;max-width:1480px;margin:0 auto;padding-left:36px;padding-right:36px}
body[data-page] .main{background:transparent}
body[data-page] .page-head,
body[data-page] .playlist-head,
body[data-page] .stock-head,
body[data-page] .ai-head{align-items:flex-start;margin-bottom:8px}
body[data-page] .page-head h1,
body[data-page] .playlist-head h1,
body[data-page] .stock-head h1,
body[data-page] .ai-head h1{
  color:var(--text);
  font-size:34px;
  line-height:1.15;
  font-weight:760;
}
body[data-page] .page-head .sub,
body[data-page] .playlist-head .sub,
body[data-page] .stock-head p,
body[data-page] .ai-head .sub{margin-top:8px;color:var(--text-3);font-size:14px;line-height:1.55}
body[data-page] :is(.card,.panel,.playlist-table,.playlist-panel,.drive-table,.settings-card,.account-card,.project-card,.review-card,.analytics-card){
  border-color:var(--border);
  background:var(--card);
  box-shadow:var(--shadow-xs);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
}
body[data-page] :is(.btn,.tool-btn,.tool-select,.playlist-search,.filter-search,.search,.sound-search-shell,input,select,textarea){font-family:var(--font-sys)}
body[data-page] :is(.btn,.tool-btn,.tool-select){border-radius:12px}
body[data-page] :is(input,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
body[data-page] .route-progress{height:2px;background:var(--primary)}

/* Home follows the supplied desktop reference at its native scale. */
body[data-page="home"] .workspace{overflow-y:auto;overflow-x:hidden}
body[data-page="home"] .hero{
  flex:0 0 auto;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:74px 28px 0;
  overflow:visible;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-page="home"] .hero::before{display:none}
body[data-page="home"] .hero h1{
  max-width:none;
  margin:0;
  color:var(--text);
  font-size:64px;
  line-height:1.08;
  font-weight:800;
  white-space:nowrap;
  text-wrap:initial;
}
body[data-page="home"] .hero h1 .g{
  background:linear-gradient(110deg,#3E7EF1 0%,#285FD8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body[data-page="home"] .hero p{max-width:650px;margin-top:20px;color:var(--text-3);font-size:18px;line-height:1.55}
body[data-page="home"] .hero .search{
  width:min(1028px,100%);
  max-width:none;
  min-height:70px;
  margin-top:18px;
  padding:8px 10px;
  gap:12px;
  border:1px solid var(--chrome-edge);
  border-radius:var(--pill);
  background:var(--panel-strong);
  box-shadow:0 18px 48px -24px rgba(29,59,116,.34),inset 0 1px 0 rgba(255,255,255,.82);
}
body[data-page="home"] .hero .seg{height:52px;padding:0 22px;background:var(--surface-2);font-size:14px}
body[data-page="home"] .hero .search input{font-size:15.5px}
body[data-page="home"] .hero .hum{height:52px;padding:0 18px;background:var(--surface);border-color:var(--border);font-size:13.5px}
body[data-page="home"] .hero .go{height:52px;padding:0 28px;background:var(--accent-grad);font-size:14px}
body[data-page="home"] .hero .chips{margin-top:3px;gap:9px}
body[data-page="home"] .hero .chip{padding:8px 16px;background:rgba(255,255,255,.58);border-color:var(--border);color:var(--text-2);font-size:12.5px}
body[data-page="home"] .content{
  flex:0 0 auto;
  width:100%;
  max-width:1520px;
  margin:0 auto;
  padding:50px 28px 86px;
  gap:42px;
}
body[data-page="home"] .row-2{grid-template-columns:minmax(0,1fr) 430px;gap:28px}
body[data-page="home"] .panel{border:1px solid var(--chrome-edge);border-radius:24px;background:var(--panel);box-shadow:var(--shadow-glass)}
body[data-page="home"] .list-head{min-height:70px;margin:0 14px;padding:12px 10px 0;gap:22px}
body[data-page="home"] .ltab{padding:16px 0;font-size:15px}
body[data-page="home"] .tracks{padding:0 14px}
body[data-page="home"] .track{min-height:82px;padding:11px 12px;gap:14px}
body[data-page="home"] .track .play{width:50px;height:50px}
body[data-page="home"] .track .play .pico{width:18px;height:18px;display:grid;place-items:center}
body[data-page="home"] .track .play .pico svg{display:block;width:15px;height:15px}
body[data-page="home"] .track .art{width:58px;height:58px;border-radius:13px}
body[data-page="home"] .track .tmeta{width:245px}
body[data-page="home"] .track .tmeta .ttl{font-size:16px}
body[data-page="home"] .track .tag{font-size:11.5px}
body[data-page="home"] .track .wave{min-width:140px}
body[data-page="home"] .more-btn{min-height:50px}
body[data-page="home"] .rail{position:static;gap:28px}
body[data-page="home"] .ai{
  display:flex;
  flex-direction:column;
  min-height:338px;
  padding:34px 30px 32px;
  border-radius:30px;
  background:linear-gradient(150deg,#5B80F0 0%,#3F63E9 46%,#2E4FD8 100%);
  box-shadow:0 28px 54px -26px rgba(35,87,208,.62),inset 0 1px 0 rgba(255,255,255,.24);
}
body[data-page="home"] .ai h3{margin-top:0;font-size:30px;font-weight:800;letter-spacing:-.9px;line-height:1.16;color:#fff}
body[data-page="home"] .ai p{max-width:350px;margin-top:18px;font-size:15px;line-height:1.6}
body[data-page="home"] .ai .acts{margin-top:auto;padding-top:28px}
body[data-page="home"] .ai .act{
  min-height:52px;
  font-size:14.5px;
  transition:background-color .32s ease,border-color .32s ease,box-shadow .48s var(--liquid-spring),translate .42s var(--liquid-spring),filter .3s ease;
}
body[data-page="home"] .ai .act-ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
body[data-page="home"] .ai .act:hover{translate:0 -1px}
body[data-page="home"] .ai .act-ghost:hover{
  border-color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.24);
  box-shadow:0 0 0 4px rgba(255,255,255,.1),0 14px 34px -20px rgba(9,36,112,.58),inset 0 1px 0 rgba(255,255,255,.28);
}
body[data-page="home"] .ai .act-solid:hover{box-shadow:0 14px 34px -20px rgba(9,36,112,.58)}
body[data-page="home"] .ai .act:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
body[data-page="home"] .pl-card{
  display:block;
  padding:24px 22px 18px;
  cursor:default;
  animation:none;
}
body[data-page="home"] .pl-card:hover{transform:none;background:var(--panel);border-color:var(--chrome-edge);box-shadow:var(--shadow-glass)}
body[data-page="home"] .pl-card .pl-info{display:block;min-width:0;flex:1;width:auto}
body[data-page="home"] .pl-card .pl-list{width:100%}
body[data-page="home"] .pl-card .pl-row{display:flex;width:100%}
body[data-page="home"] .pl-head h3{font-size:18px}
body[data-page="home"] .pl-row{min-height:70px}
body[data-page="home"] .pl-cover{width:54px;height:54px}
body[data-page="home"] .sec-head h2{font-size:20px}
body[data-page="home"] .grid-4{gap:20px}

@keyframes shell-enter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
/* Navigation is instant: the fast View Transition above is the ONLY page-change
   motion. The old per-load entrance animations — shell-enter on the whole
   content column (.52s) and ui.css's staggered .reveal (.62s), both translateY
   = blur + up to ~600ms of lag on EVERY navigation — are neutralized so content
   paints immediately. (reveal starts at opacity:0, so it must be forced visible.) */
body[data-page] .workspace > :not(.topbar){animation:none}
body[data-page] .reveal{opacity:1;transform:none;animation:none}
body[data-page] .shell-nav-item.active{animation:none}

@media (max-width:1500px){
  body[data-page] .topbar{grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr);padding-left:20px;padding-right:20px}
  .shell-nav-item{min-width:84px;padding:0 14px}
  body[data-page="home"] .hero{padding-top:58px}
  body[data-page="home"] .hero h1{font-size:54px;white-space:normal;max-width:1080px}
  body[data-page="home"] .content{max-width:1260px}
  body[data-page="home"] .row-2{grid-template-columns:minmax(0,1fr) 356px;gap:22px}
  body[data-page="home"] .track .tmeta{width:180px}
  body[data-page="home"] .ai{min-height:0}
}

@media (max-width:1120px){
  .shell-crumb{display:none}
  body[data-page] .topbar{grid-template-columns:1fr auto;padding-left:24px}
  .shell-nav{justify-self:start}
  body[data-page] .topbar-actions{grid-column:2}
  body[data-page="home"] .row-2{grid-template-columns:minmax(0,1fr) 320px}
  body[data-page="home"] .track .wave{display:none}
}

@media (max-width:960px){
  :root{--topbar-h:82px;--tabbar-h:76px}
  body[data-page] .app{grid-template-columns:1fr!important}
  body[data-page] .sidebar,
  html[data-theme] body[data-page] .sidebar{
    position:fixed;
    top:12px;
    bottom:12px;
    left:12px;
    z-index:150;
    width:min(82vw,310px);
    height:calc(100dvh - 24px);
    margin:0;
    transform:translateX(calc(-100% - 24px));
    transition:transform .42s var(--ease-spring);
  }
  body[data-page] .sidebar.open{transform:none}
  body[data-page] .workspace{padding-bottom:calc(var(--tabbar-h) + 20px + var(--safe-b))}
  body[data-page] .topbar,
  html[data-theme] body[data-page] .topbar{
    grid-template-columns:minmax(0,1fr) auto;
    height:var(--topbar-h);
    padding:10px 12px 8px;
  }
  /* Keep the drawer reachable on phones. */
  body[data-page] .topbar .menu-btn{display:grid!important;place-items:center}
  .shell-crumb,.shell-nav{display:none}
  .mobile-brand{display:flex;align-items:center;gap:10px;color:var(--text);filter:none}
  .mobile-brand .mark{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  .mobile-brand b{font-size:19px;font-weight:760}
  body[data-page] .topbar-actions,
  html[data-theme] body[data-page] .topbar-actions{min-height:52px;padding:5px;gap:0}
  body[data-page] .topbar #helpBtn,
  body[data-page] .topbar .new-wrap{display:none}
  body[data-page] .topbar #noticeBtn,
  body[data-page] .topbar #themeBtn{display:grid!important}
  body[data-page] .topbar #helpBtn{display:none!important}
  .mobile-account{
    display:grid!important;
    place-items:center;
    width:40px;
    height:40px;
    margin-left:2px;
    border-radius:50%;
    color:#fff;
    background:var(--accent-grad);
    font-size:13px;
    font-weight:700;
    overflow:hidden;
  }
  .mobile-account span,.mobile-account img{display:block;width:100%;height:100%}
  .mobile-account span{display:grid;place-items:center}
  .mobile-account img{object-fit:cover}
  .tabbar{
    left:12px;
    right:12px;
    bottom:10px;
    height:calc(var(--tabbar-h) + var(--safe-b));
    grid-template-columns:repeat(4,1fr);
    padding:5px 6px calc(5px + var(--safe-b));
    border:1px solid var(--chrome-edge);
    border-radius:24px;
    background:var(--panel-strong);
    box-shadow:0 18px 50px -24px rgba(20,42,82,.45),inset 0 1px 0 rgba(255,255,255,.78);
  }
  .tabbar .tab{min-width:0;min-height:56px;border-radius:18px;font-size:10.5px}
  .tabbar .tab.active{background:var(--primary-soft)}
  .tabbar .tab svg{width:22px;height:22px}
  body[data-page] .canvas,
  body[data-page] .canvas.wide{padding:22px 18px 110px}
  body[data-page="home"] .hero{padding:52px 18px 0}
  body[data-page="home"] .hero h1{max-width:620px;font-size:48px;line-height:1.08;white-space:normal}
  body[data-page="home"] .hero p{font-size:16px}
  body[data-page="home"] .content{padding:48px 18px 120px}
  body[data-page="home"] .row-2{display:flex;flex-direction:column;gap:24px}
  body[data-page="home"] .rail{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  body[data-page="home"] .track .wave{display:flex}
  .cpk-fab{display:none!important}
}

@media (max-width:640px){
  :root{--topbar-h:74px}
  body[data-page] .topbar,
  html[data-theme] body[data-page] .topbar{padding:9px 10px 6px}
  .mobile-brand{gap:8px}
  .mobile-brand .mark{width:38px;height:38px;flex-basis:38px;border-radius:11px}
  .mobile-brand b{font-size:17px}
  body[data-page] .topbar .icon-btn{width:36px;height:36px}
  body[data-page] .topbar .icon-btn svg{width:18px;height:18px}
  .mobile-brand{min-width:0}
  .mobile-brand b{white-space:nowrap}
  body[data-page] .canvas,
  body[data-page] .canvas.wide{padding:18px 12px 110px}
  body[data-page] .page-head h1,
  body[data-page] .playlist-head h1,
  body[data-page] .stock-head h1,
  body[data-page] .ai-head h1{font-size:30px}
  body[data-page="home"] .hero{padding:46px 16px 0}
  body[data-page="home"] .hero h1{max-width:370px;font-size:44px;line-height:1.08}
  body[data-page="home"] .hero p{max-width:350px;margin-top:20px;font-size:15px;line-height:1.55}
  body[data-page="home"] .hero .search{
    width:100%;
    min-height:62px;
    margin-top:30px;
    padding:6px;
    gap:8px;
  }
  body[data-page="home"] .hero .seg{height:48px;padding:0 14px;font-size:13px}
  body[data-page="home"] .hero .search .si{width:17px;height:17px}
  body[data-page="home"] .hero .search input{font-size:14px}
  body[data-page="home"] .hero .hum{display:none}
  body[data-page="home"] .hero .go{height:48px;padding:0 17px;font-size:13px}
  body[data-page="home"] .hero .chips{
    align-self:stretch;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    margin-top:20px;
    padding:0 1px 6px;
    scrollbar-width:none;
  }
  body[data-page="home"] .hero .chips::-webkit-scrollbar{display:none}
  body[data-page="home"] .hero .chip{flex:0 0 auto;padding:7px 13px}
  body[data-page="home"] .content{padding:38px 10px 112px;gap:32px}
  body[data-page="home"] .panel{border-radius:20px}
  body[data-page="home"] .list-head{
    min-height:64px;
    margin:0 8px;
    padding:10px 6px 0;
    gap:18px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  body[data-page="home"] .list-head::-webkit-scrollbar{display:none}
  body[data-page="home"] .lh-tools{margin-left:0}
  body[data-page="home"] .lh-tools .tool,
  body[data-page="home"] .lh-tools .tdiv{display:none}
  body[data-page="home"] .lh-tools .vtog{display:none}
  body[data-page="home"] .lh-tools .vtog.active{display:grid}
  body[data-page="home"] .tracks{padding:0 8px}
  body[data-page="home"] .track{
    display:grid;
    grid-template-columns:44px 50px minmax(0,1fr) 38px;
    gap:10px;
    min-height:76px;
    padding:10px 6px;
  }
  body[data-page="home"] .track .play{width:42px;height:42px}
  body[data-page="home"] .track .art{width:50px;height:50px;border-radius:12px}
  body[data-page="home"] .track .tmeta{width:auto;min-width:0}
  body[data-page="home"] .track .tmeta .ttl{font-size:13.5px}
  body[data-page="home"] .track .tags{margin-top:5px;overflow:hidden}
  body[data-page="home"] .track .tag{padding:2px 7px;font-size:10px}
  body[data-page="home"] .track .wave,
  body[data-page="home"] .track .dur{display:none}
  body[data-page="home"] .track .tacts{justify-self:end}
  body[data-page="home"] .track .tacts .tb{display:none}
  body[data-page="home"] .track .tacts .fav{display:grid}
  body[data-page="home"] .rail{display:flex;gap:20px}
  body[data-page="home"] .ai{min-height:292px;padding:26px 22px 24px;border-radius:24px}
  body[data-page="home"] .ai h3{font-size:25px;letter-spacing:-.7px}
  body[data-page="home"] .ai p{margin-top:14px;font-size:14px}
  body[data-page="home"] .ai .acts{gap:10px;padding-top:22px}
  body[data-page="home"] .ai .act{min-height:46px;font-size:13.5px;padding-left:6px;padding-right:6px}
  body[data-page="home"] .pl-card{padding:20px 15px}
  body[data-page="home"] .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-page="home"] .pack{border-radius:16px}
  body[data-page="home"] .pack .cov{height:104px}
  body[data-page="home"] .photo{border-radius:16px}
  body[data-page="pricing"] #intervalToggle{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:min(100%,354px);
    border-radius:24px;
  }
  body[data-page="pricing"] #intervalToggle button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:48px;
    padding:0 10px;
    line-height:1.1;
  }
  body[data-page="pricing"] #intervalToggle .badge{
    margin:3px 0 0!important;
    padding:1px 7px;
    font-size:9px;
    line-height:1.3;
  }
  body[data-page="settings"] .set-nav{
    gap:2px;
    padding-right:18px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  body[data-page="settings"] .set-nav::-webkit-scrollbar{display:none}
  body[data-page="settings"] .set-nav a{
    flex:0 0 auto;
    gap:0;
    padding:9px 10px;
    scroll-snap-align:start;
  }
  body[data-page="settings"] .set-nav a svg{display:none}
}

/* ====================== 12. Liquid motion system ==================== */
:root{
  --liquid-spring:cubic-bezier(.16,1,.3,1);
  --liquid-snap:cubic-bezier(.34,1.56,.64,1);
  --liquid-glass:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  --liquid-glass-hover:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,249,255,.72));
  --liquid-edge:rgba(255,255,255,.82);
  --liquid-depth:0 22px 54px -34px rgba(23,42,78,.42),0 5px 18px -12px rgba(23,42,78,.18),inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(84,116,170,.08);
  --liquid-depth-hover:0 30px 70px -38px rgba(23,42,78,.52),0 12px 30px -20px rgba(47,107,238,.24),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(84,116,170,.1);
}
:root[data-theme="dark"]{
  --liquid-glass:linear-gradient(145deg,rgba(48,48,52,.86),rgba(27,27,31,.68));
  --liquid-glass-hover:linear-gradient(145deg,rgba(59,59,64,.9),rgba(31,31,36,.76));
  --liquid-edge:rgba(255,255,255,.13);
  --liquid-depth:0 24px 58px -34px rgba(0,0,0,.72),0 6px 20px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.32);
  --liquid-depth-hover:0 32px 74px -38px rgba(0,0,0,.82),0 12px 32px -22px rgba(47,107,238,.34),inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.34);
}

.liquid-surface:not(.sidebar):not(.player):not(.tabbar){position:relative}
.liquid-surface{
  --liquid-x:50%;
  --liquid-y:0%;
  --liquid-shift-x:0px;
  --liquid-shift-y:0px;
}
body[data-page] .liquid-surface:not(.liquid-row):not(.pack):not(.stock-card):not(.sidebar):not(.tabbar){
  background:var(--liquid-glass);
  border-color:var(--liquid-edge);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  box-shadow:var(--liquid-depth);
  transition:background .42s var(--liquid-spring),border-color .32s ease,box-shadow .5s var(--liquid-spring),translate .5s var(--liquid-spring),scale .38s var(--liquid-snap),filter .3s ease;
}
body[data-page] .sidebar.liquid-surface,
body[data-page] .tabbar.liquid-surface{
  -webkit-backdrop-filter:blur(14px) saturate(190%);
  backdrop-filter:blur(14px) saturate(190%);
  box-shadow:var(--liquid-depth);
}
.liquid-lens{
  position:absolute;
  inset:0;
  z-index:8;
  display:block;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(circle at var(--liquid-x) var(--liquid-y),rgba(255,255,255,.74) 0,rgba(255,255,255,.3) 9%,rgba(111,168,255,.16) 21%,transparent 44%),
    linear-gradient(118deg,transparent 12%,rgba(255,255,255,.12) 48%,transparent 72%);
  transform:translate3d(var(--liquid-shift-x),var(--liquid-shift-y),0) scale(1.015);
  transition:opacity .38s ease,transform .58s var(--liquid-spring),background .32s ease;
}
:root[data-theme="dark"] .liquid-lens{
  opacity:.32;
  background:
    radial-gradient(circle at var(--liquid-x) var(--liquid-y),rgba(255,255,255,.28) 0,rgba(101,157,255,.18) 18%,transparent 44%),
    linear-gradient(118deg,transparent 12%,rgba(255,255,255,.06) 48%,transparent 72%);
}
.liquid-surface.is-liquid-hover > .liquid-lens{opacity:.86}
body[data-page] .liquid-surface.is-liquid-hover:not(.liquid-row):not(.pack):not(.stock-card):not(.sidebar):not(.tabbar){
  background:var(--liquid-glass-hover);
  border-color:rgba(255,255,255,.94);
  box-shadow:var(--liquid-depth-hover);
}
:root[data-theme="dark"] body[data-page] .liquid-surface.is-liquid-hover:not(.liquid-row):not(.pack):not(.stock-card):not(.sidebar):not(.tabbar){border-color:rgba(255,255,255,.19)}

.liquid-row{
  border:1px solid transparent;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
  cursor:pointer;
  transition:background .32s var(--liquid-spring),border-color .3s ease,box-shadow .42s var(--liquid-spring),translate .45s var(--liquid-spring),scale .32s var(--liquid-snap);
}
:root[data-theme="dark"] .liquid-row{background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
@media (hover:hover) and (pointer:fine){
  .liquid-interactive:hover{translate:0 -2px}
  .liquid-row:hover{
    border-color:rgba(119,158,222,.18);
    background:rgba(255,255,255,.62);
    box-shadow:0 18px 40px -30px rgba(29,63,118,.48),inset 0 1px 0 rgba(255,255,255,.84);
  }
  :root[data-theme="dark"] .liquid-row:hover{background:rgba(255,255,255,.065);border-color:rgba(132,174,255,.16)}
  .pack.liquid-interactive:hover,.stock-card.liquid-interactive:hover{translate:0 -4px;box-shadow:0 26px 52px -30px rgba(20,40,80,.58)}
}

.liquid-control{
  -webkit-tap-highlight-color:transparent;
  transition:background-color .28s ease,color .24s ease,border-color .28s ease,box-shadow .42s var(--liquid-spring),translate .38s var(--liquid-spring),scale .34s var(--liquid-snap),filter .28s ease!important;
}
.liquid-ripple-host{position:relative}
@media (hover:hover) and (pointer:fine){.liquid-control:hover{translate:0 -1px}}
.liquid-control:active,.liquid-control.is-liquid-pressed{scale:.96;translate:0 1px;filter:saturate(1.08)}
.liquid-interactive.is-liquid-pressed{scale:.985;translate:0 1px}
.liquid-control:focus-visible,.liquid-interactive:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ring),0 12px 28px -20px rgba(47,107,238,.62)!important;
}
.liquid-ripple{
  position:absolute;
  z-index:20;
  width:170px;
  height:170px;
  margin:-85px 0 0 -85px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.68) 0,rgba(118,174,255,.26) 28%,rgba(255,255,255,.08) 48%,transparent 70%);
  transform:scale(.12);
  opacity:0;
  animation:liquid-ripple .62s var(--liquid-spring) both;
}
@keyframes liquid-ripple{
  0%{opacity:.74;transform:scale(.12)}
  58%{opacity:.32}
  100%{opacity:0;transform:scale(1.45)}
}

.track.playing,.tr-row.playing,.mu-t10-row.playing,.snd-row.playing,.sfx-row.playing,.rec-row.playing,.track-row.playing,.cpk-snd.playing,.pack.playing,.stock-card.playing{
  border-color:rgba(47,107,238,.42)!important;
  background:linear-gradient(100deg,rgba(47,107,238,.105),rgba(255,255,255,.58) 42%,rgba(125,176,255,.08))!important;
  box-shadow:0 0 0 1px rgba(47,107,238,.1),0 22px 46px -32px rgba(47,107,238,.62),inset 0 1px 0 rgba(255,255,255,.82)!important;
  translate:0 -1px;
}
:root[data-theme="dark"] .track.playing,
:root[data-theme="dark"] .tr-row.playing,
:root[data-theme="dark"] .mu-t10-row.playing,
:root[data-theme="dark"] .snd-row.playing,
:root[data-theme="dark"] .sfx-row.playing,
:root[data-theme="dark"] .rec-row.playing,
:root[data-theme="dark"] .track-row.playing,
:root[data-theme="dark"] .cpk-snd.playing,
:root[data-theme="dark"] .pack.playing,
:root[data-theme="dark"] .stock-card.playing{background:linear-gradient(100deg,rgba(47,107,238,.2),rgba(255,255,255,.055) 44%,rgba(72,130,238,.12))!important}
.playing > .liquid-lens{opacity:.78;animation:liquid-play-light 2.4s ease-in-out infinite}
@keyframes liquid-play-light{
  0%,100%{filter:saturate(1);transform:translate3d(-2px,0,0) scale(1.015)}
  50%{filter:saturate(1.3);transform:translate3d(3px,-1px,0) scale(1.025)}
}
.playing .play,.playing [data-act="play"],.playing .play-btn,.playing .rec-play,.playing .track-play,.playing .cpk-snd-play,.playing .pack-play,.stock-card.playing .stock-video-play{
  color:#fff!important;
  border-color:rgba(255,255,255,.42)!important;
  background:linear-gradient(145deg,#4386ff,#1f5fe1)!important;
  box-shadow:0 12px 28px -13px rgba(47,107,238,.9),inset 0 1px 0 rgba(255,255,255,.42)!important;
  scale:1.035;
}
.playing .wave i,.playing .snd-wave i,.playing .rec-wave i,.playing .waveform i,.playing .mu-t10-wb,.playing .wb{
  transform-origin:center;
  animation:liquid-wave .82s ease-in-out infinite alternate;
}
.playing .wave i:nth-child(3n+1),.playing .snd-wave i:nth-child(3n+1),.playing .mu-t10-wb:nth-child(3n+1){animation-delay:-.22s}
.playing .wave i:nth-child(3n+2),.playing .snd-wave i:nth-child(3n+2),.playing .mu-t10-wb:nth-child(3n+2){animation-delay:-.48s}
@keyframes liquid-wave{from{scale:1 .7;opacity:.62}to{scale:1 1.16;opacity:1}}
.wave.playing .playhead,.track.playing .playhead{
  width:2px;
  border-radius:999px;
  background:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(47,107,238,.12),0 0 12px rgba(47,107,238,.55);
}

.player.show,.shell-player.show{animation:liquid-player-in .58s var(--liquid-spring) both}
@keyframes liquid-player-in{from{opacity:0;translate:0 18px;scale:.985;filter:blur(5px)}to{opacity:1;translate:0 0;scale:1;filter:none}}
.menu.open,.more-sheet.open,.cpk-overlay.open .cpk-panel,.sx-scrim.open .sx-card,.ad-scrim.open .ad-card,.usfx-modal-scrim.open .usfx-modal-card,.usfx-confirm-scrim.open .usfx-confirm-card{
  animation:liquid-pop .48s var(--liquid-snap) both!important;
}
@keyframes liquid-pop{from{opacity:0;translate:0 10px;scale:.965;filter:blur(5px)}to{opacity:1;translate:0 0;scale:1;filter:none}}

body[data-page] input:not([type="range"]),body[data-page] textarea,body[data-page] select{
  transition:border-color .26s ease,background-color .28s ease,box-shadow .42s var(--liquid-spring),translate .36s var(--liquid-spring)!important;
}
body[data-page] input:not([type="range"]):focus,body[data-page] textarea:focus,body[data-page] select:focus{
  translate:0 -1px;
  box-shadow:0 0 0 4px var(--ring),0 16px 32px -24px rgba(47,107,238,.48)!important;
}
.shell-nav-item.active,.tabbar .tab.active,.ltab.active,.playlist-chip.active,.stock-chip.active{
  box-shadow:0 10px 24px -16px rgba(47,107,238,.72),inset 0 1px 0 rgba(255,255,255,.56);
}
.is-navigating .workspace > :not(.topbar){opacity:.72;scale:.995;filter:blur(2px);transition:opacity .18s ease,scale .24s var(--liquid-spring),filter .18s ease}

@media (max-width:960px){
  .liquid-lens{opacity:.38}
  .liquid-row{border-radius:13px}
  .liquid-interactive:hover{translate:0 0}
}

/* ====================== 13. Premium floating player ==================== */
html[data-theme] body[data-page] .player,
html[data-theme] body[data-page] .player.shell-player{
  --player-blue:#1264ed;
  position:fixed;
  left:max(20px,calc(var(--sidebar-w) - 108px));
  right:22px;
  bottom:18px;
  z-index:500;
  height:96px;
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(400px,1.25fr) minmax(430px,1.25fr);
  align-items:center;
  gap:22px;
  padding:0 18px;
  overflow:hidden;
  opacity:0;
  transform:translateY(calc(100% + 34px)) scale(.985);
  border:1px solid rgba(255,255,255,.92);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,251,255,.78))!important;
  -webkit-backdrop-filter:blur(14px) saturate(190%)!important;
  backdrop-filter:blur(14px) saturate(190%)!important;
  box-shadow:0 28px 76px -34px rgba(36,55,91,.42),0 10px 32px -22px rgba(24,42,76,.25),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(79,111,164,.09);
  transition:opacity .22s ease,transform .52s var(--liquid-spring),box-shadow .36s ease;
}
html[data-theme] body[data-page] .player::before,
html[data-theme] body[data-page] .player.shell-player::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border:0;
  border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.64),rgba(255,255,255,.18) 45%,rgba(73,136,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(56,91,150,.07);
  pointer-events:none;
}
html[data-theme="dark"] body[data-page] .player,
html[data-theme="dark"] body[data-page] .player.shell-player{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(145deg,rgba(43,45,51,.92),rgba(22,24,29,.82))!important;
  box-shadow:0 32px 82px -28px rgba(0,0,0,.85),0 12px 34px -22px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.13);
}
html[data-theme="dark"] body[data-page] .player::before,
html[data-theme="dark"] body[data-page] .player.shell-player::before{
  background:linear-gradient(112deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 48%,rgba(52,120,255,.1));
}
html[data-theme] body[data-page] .player.show,
html[data-theme] body[data-page] .player.shell-player.show{
  opacity:1;
  transform:translateY(0) scale(1);
  animation:premium-player-in .52s var(--liquid-spring) both;
}
@keyframes premium-player-in{
  from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(5px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:none}
}
.player > :not(.liquid-lens){position:relative;z-index:1}
.player > .liquid-lens{position:absolute;z-index:8}
.player .pl-info{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  height:100%;
}
.player .pl-art,
.player.shell-player .pl-art{
  width:62px;
  height:62px;
  flex:0 0 62px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.64);
  border-radius:14px;
  background:linear-gradient(145deg,#e7edf9,#cad7ee);
  box-shadow:0 12px 27px -15px rgba(21,42,78,.58),inset 0 1px 0 rgba(255,255,255,.48);
}
.player .pl-art img{display:block;width:100%;height:100%;object-fit:cover}
.player .pl-text{min-width:0;flex:1}
.player .pl-title-row{display:flex;align-items:center;gap:4px;min-width:0}
.player .pl-name{
  min-width:0;
  overflow:hidden;
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.player .pl-cat{margin-top:5px;color:var(--text-3);font-size:11.5px;font-weight:500;line-height:1.2;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .pl-fav{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--text-3);
  background:transparent;
  cursor:pointer;
  transition:color .18s ease,background .22s ease,scale .3s var(--liquid-snap);
}
.player .pl-fav:hover{color:#ef4157;background:rgba(239,65,87,.08);transform:none;scale:1.05}
.player .pl-fav:active{scale:.9}
.player .pl-fav svg{width:15px;height:15px}

.player .pl-center{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:6px;
  padding:6px 0 5px;
}
.player .pl-ctrl{display:flex;align-items:center;justify-content:center;gap:8px;height:45px}
.player .plb{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--text-2);
  background:transparent;
  cursor:pointer;
  transition:color .18s ease,background .24s ease,box-shadow .3s ease,scale .32s var(--liquid-snap),translate .34s var(--liquid-spring);
}
.player .plb:hover{color:var(--text);background:rgba(83,106,144,.08);translate:0 -1px}
.player .plb:active{scale:.9;translate:0 1px}
.player .plb.active{color:var(--player-blue);background:rgba(18,100,237,.1)}
.player .plb svg{width:16px;height:16px}
.player .plb.play,
.player.shell-player .plb.play{
  width:46px;
  height:46px;
  flex-basis:46px;
  margin:0 7px;
  color:#fff;
  background:linear-gradient(145deg,#347df7,#0759dc);
  box-shadow:0 13px 28px -13px rgba(5,80,205,.88),inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(0,49,138,.22);
  transform:none;
  translate:0 0;
}
.player .plb.play:hover,
.player.shell-player .plb.play:hover{color:#fff;background:linear-gradient(145deg,#4c8dff,#0756cf);box-shadow:0 17px 34px -14px rgba(5,80,205,.96),inset 0 1px 0 rgba(255,255,255,.52);transform:none;translate:0 -1px;scale:1.045}
.player .plb.play:active,.player.shell-player .plb.play:active{translate:0 1px;scale:.92}
.player .plb.play svg{width:18px;height:18px;margin:0}
.player .pl-scrub{width:100%;min-width:0;display:flex;align-items:center;gap:8px}
.player .pl-t{width:34px;flex:0 0 34px;color:var(--text-3);font-size:10.5px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0}
.player .pl-t.right{text-align:right}
.player .pl-prog,
.player.shell-player .pl-prog{
  position:relative;
  min-width:0;
  flex:1;
  padding:2px 0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  touch-action:none;
}
.player .pl-wave-canvas,
.player.shell-player .pl-wave-canvas{display:block;width:100%;height:27px;border-radius:0;cursor:pointer}

.player .pl-right{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.player .pl-right .pl-vol-wrap{margin:0 4px 0 0}
.player .pl-vol-wrap{display:flex;align-items:center;gap:7px}
.player .pl-vol-btn,
.player .pl-tool,
.player .pl-close{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--text-2);
  background:transparent;
  cursor:pointer;
  transition:color .18s ease,background .22s ease,box-shadow .3s ease,scale .3s var(--liquid-snap),translate .34s var(--liquid-spring);
}
.player .pl-vol-btn:hover,.player .pl-tool:hover,.player .pl-close:hover{color:var(--text);background:rgba(83,106,144,.09);translate:0 -1px}
.player .pl-vol-btn:active,.player .pl-tool:active,.player .pl-close:active{scale:.9;translate:0 1px}
.player .pl-vol-btn svg,.player .pl-tool svg{width:17px;height:17px}
.player .pl-close{width:28px;height:28px;flex-basis:28px;color:var(--text-4)}
.player .pl-close svg{width:15px;height:15px}
.player .pl-vol-range{
  --pl-volume:100%;
  width:82px;
  height:3px;
  -webkit-appearance:none;
  appearance:none;
  border-radius:999px;
  outline:0;
  background:linear-gradient(90deg,var(--player-blue) 0 var(--pl-volume),rgba(102,118,145,.22) var(--pl-volume) 100%);
  cursor:pointer;
}
.player .pl-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:var(--player-blue);box-shadow:0 2px 7px rgba(31,58,104,.32);cursor:pointer}
.player .pl-vol-range::-moz-range-thumb{width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:var(--player-blue);box-shadow:0 2px 7px rgba(31,58,104,.32);cursor:pointer}
.player .pl-speed{
  width:54px;
  height:34px;
  flex:0 0 54px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text-2);
  background:rgba(255,255,255,.45);
  font-family:inherit;
  font-size:11.5px;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:color .18s ease,border-color .22s ease,background .22s ease,box-shadow .3s ease,scale .3s var(--liquid-snap);
}
:root[data-theme="dark"] .player .pl-speed{background:rgba(255,255,255,.055)}
.player .pl-speed:hover,.player .pl-speed.active{color:var(--player-blue);border-color:rgba(18,100,237,.28);background:rgba(18,100,237,.08)}
.player .pl-speed:active{scale:.94}
.player .pl-pitch-btn{
  height:36px;
  min-width:158px;
  flex:0 0 158px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text-2);
  background:rgba(255,255,255,.45);
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:color .18s ease,border-color .22s ease,background .22s ease,box-shadow .3s ease,scale .3s var(--liquid-snap);
}
:root[data-theme="dark"] .player .pl-pitch-btn{background:rgba(255,255,255,.055)}
.player .pl-pitch-btn:hover,.player .pl-pitch-btn.active{color:var(--player-blue);border-color:rgba(18,100,237,.28);background:rgba(18,100,237,.08)}
.player .pl-pitch-btn:active{scale:.96}
.player .pl-pitch-btn .pl-pitch-icon{width:16px;height:16px;flex:0 0 16px}
.player .pl-pitch-btn .pl-chev{width:12px;height:12px;flex:0 0 12px;color:var(--text-4)}
.player .pl-tool-label{overflow:hidden;text-overflow:ellipsis}
.player .pl-tool-value{margin-left:auto;padding-left:8px;border-left:1px solid var(--border);color:var(--text-3);font-variant-numeric:tabular-nums}
.player .pl-pitch-btn.active .pl-tool-value{color:var(--player-blue)}
.player .pl-dl{font-size:0}

.pitch-modal,
.shell-pitch-modal{
  right:112px;
  bottom:126px;
  left:auto;
  width:282px;
  padding:18px 20px 17px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(246,249,255,.82));
  -webkit-backdrop-filter:blur(14px) saturate(190%);
  backdrop-filter:blur(14px) saturate(190%);
  box-shadow:0 24px 62px -26px rgba(26,47,84,.48),inset 0 1px 0 rgba(255,255,255,.96);
  transform:translateY(10px) scale(.97);
}
:root[data-theme="dark"] .pitch-modal,:root[data-theme="dark"] .shell-pitch-modal{border-color:rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(48,50,56,.95),rgba(23,25,30,.88));box-shadow:0 28px 68px -22px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.12)}
.pitch-modal.open,.shell-pitch-modal.open{transform:translateY(0) scale(1)}
.pitch-modal .pm-header{margin-bottom:14px}
.pitch-modal .pm-display{margin-bottom:15px}
.pitch-modal .pm-semitones{font-size:34px;letter-spacing:0}
.pitch-modal .pm-slider-wrap{margin-bottom:13px}
.pitch-modal .pm-ticks{margin-bottom:13px}

body.player-open .workspace,
body.player-open .workspace .canvas,
body.player-open .main{padding-bottom:126px}

@media (max-width:1320px){
  html[data-theme] body[data-page] .player,
  html[data-theme] body[data-page] .player.shell-player{grid-template-columns:minmax(190px,.74fr) minmax(370px,1.35fr) minmax(300px,auto);gap:15px;padding:0 15px}
  .player .pl-vol-range{width:66px}
  .player .pl-pitch-btn{min-width:104px;flex:0 1 104px}
  .player .pl-tool-label{display:none}
}
@media (max-width:1120px){
  html[data-theme] body[data-page] .player,
  html[data-theme] body[data-page] .player.shell-player{left:18px;right:18px;grid-template-columns:minmax(180px,.72fr) minmax(350px,1.35fr) auto}
  .player .pl-vol-range{display:none}
  .player .pl-pitch-btn{min-width:82px;flex-basis:82px}
  .player .pl-pitch-icon{display:none}
}
@media (max-width:920px){
  html[data-theme] body[data-page] .player,
  html[data-theme] body[data-page] .player.shell-player{grid-template-columns:minmax(170px,.8fr) minmax(330px,1.35fr) auto;gap:10px}
  .player .pl-vol-wrap,.player .pl-speed{display:none}
  .player .pl-pitch-btn{min-width:70px}
}
@media (max-width:820px){
  html[data-theme] body[data-page] .player,
  html[data-theme] body[data-page] .player.shell-player{
    left:10px;
    right:10px;
    bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px);
    height:70px;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:7px;
    padding:0 9px;
    border-radius:19px;
  }
  .player .pl-info{grid-column:1;min-width:0;gap:10px}
  .player .pl-art,.player.shell-player .pl-art{width:46px;height:46px;flex-basis:46px;border-radius:12px}
  .player .pl-name{font-size:12.5px}
  .player .pl-cat{margin-top:3px;font-size:10.5px}
  .player .pl-fav{width:25px;height:25px;flex-basis:25px}
  .player .pl-center,.player.shell-player .pl-center{grid-column:2;display:flex;width:auto;height:auto;padding:0}
  .player .pl-center .pl-scrub{display:none}
  .player .pl-ctrl{height:auto;gap:0}
  .player .pl-ctrl .plb:not(.play){display:none}
  .player .plb.play,.player.shell-player .plb.play{width:42px;height:42px;flex-basis:42px;margin:0}
  .player .pl-right{grid-column:3;gap:1px}
  .player .pl-right .pl-vol-wrap,.player .pl-right .pl-speed,.player .pl-right .pl-pitch-btn,.player .pl-right .pl-tool:not(.pl-dl){display:none}
  .player .pl-right .pl-dl{display:grid;width:36px;height:36px;flex-basis:36px;padding:0;border:0;border-radius:50%;background:transparent}
  .player .pl-close{width:32px;height:32px;flex-basis:32px}
  .pitch-modal,.shell-pitch-modal{right:12px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 90px);left:12px;width:auto}
  body.player-open .workspace,
  body.player-open .workspace .canvas,
  body.player-open .main{padding-bottom:calc(var(--tabbar-h) + 98px + var(--safe-b))}
}
@media (max-width:430px){
  .player .pl-right .pl-dl{display:none}
  .player .pl-title-row{gap:1px}
}

/* ====================== 11. Reduced motion ==================== */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){
    animation:none!important;
  }
  .liquid-surface,.liquid-control,.liquid-interactive,.liquid-lens{translate:0!important;scale:1!important;filter:none!important}
  /* Reduced motion must not override the drawer's layout transform. */
  @media (max-width:960px){
    body[data-page] .sidebar{transform:translateX(calc(-100% - 24px))!important}
    body[data-page] .sidebar.open{transform:none!important}
  }
  .liquid-ripple{display:none!important}
  a[href]:active, button:active, .nav-item:active, .tab:active{ transform:none; }
}

/* ==================== 12. Apple restraint pass (2026-07-24) ====================
   The decorative "liquid" layer — a cursor-following highlight lens, click
   ripples, hover levitation, shine sweeps and heavy glow — reads as a web
   effect, not iOS. iOS is calm and precise: it highlights IN PLACE and never
   chases the cursor. liquid-motion.js still runs (it wires click-to-play and
   press feedback); only its decorative output is neutralized here. */

/* Cursor-follow highlight + click ripple — removed entirely. */
.liquid-lens{ display:none !important; }
.liquid-ripple{ display:none !important; }
.playing > .liquid-lens{ animation:none !important; }

/* Nothing levitates on hover — Apple brightens in place, it doesn't lift. */
@media (hover:hover) and (pointer:fine){
  .liquid-interactive:hover,
  .liquid-row:hover,
  .liquid-control:hover,
  .pack.liquid-interactive:hover,
  .stock-card.liquid-interactive:hover{ translate:0 !important; }
  /* subtle hover material, not a floating glow */
  body[data-page] .liquid-surface.is-liquid-hover:not(.liquid-row):not(.pack):not(.stock-card):not(.sidebar):not(.tabbar):not(.player){
    box-shadow:var(--liquid-depth) !important;
  }
  .liquid-row:hover{ box-shadow:none !important; }
}

/* Honest iOS press: a small, quick scale-down — no bounce, no filter shift. */
.liquid-control:active,.liquid-control.is-liquid-pressed{ scale:.97 !important; translate:0 !important; filter:none !important; }
.liquid-interactive.is-liquid-pressed{ scale:.99 !important; translate:0 !important; }

/* Calm the overshoot — Apple springs settle, they don't bounce past. */
:root{ --liquid-snap:cubic-bezier(.22,.9,.32,1) !important; }