/* trackchief-build 42 */
:root{
  color-scheme:dark;
  /* real defaults (the "dash" theme); applyTheme() overwrites these per theme */
  --bg:#060905; --panel:#081408; --panel2:#0f2a0b; --border:var(--edge);
  --text:#eefae6; --dim:#a9c39b; --accent:#4ccc1c; --accent-dim:#1d6e0c;
  --glow-rgb:155,255,60; --glow:rgba(var(--glow-rgb),.45);
  --bright:#9bff3c; --link:#9bff3c;
  --btn1:#eaffcf; --btn2:#a8ff5c; --btn3:#44c41a; --btn4:#86f43e; --btn-text:#052400;
  --bg0:#1d3210; --bg1:#0c130a; --bg2:#040604;
  --card0:#12260c; --card1:#06120650; --card2:#0a180a; --card3:#071007;
  --edge:#2c5a1a; --edge2:#1c3a12; --edge-hi:#3f7a24;
  --text-hi:#f4ffe8; --text-sec:#c4dcb6; --head-text:#e6ffb8; --dim2:#92b083;
  --font-head:'Chakra Petch',-apple-system,sans-serif;
  --font-body:'Chakra Petch',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-logo:'Michroma','Chakra Petch',sans-serif;
  --warn:#e2f56a; --bad:#ff8a78; --info:#57d8c0;
  /* Xbox-first layer: derived from the active theme so every theme recolours it */
  --xg:var(--bright); --xg2:var(--accent); --xg3:var(--accent-dim); --xg-rgb:var(--glow-rgb);
  --pale:var(--head-text); --tab:var(--text-sec);
  --glass-edge:rgba(var(--glow-rgb),.3);
  --glass:linear-gradient(180deg,rgba(var(--glow-rgb),.13) 0%,rgba(var(--glow-rgb),.03) 60%,rgba(0,0,0,.25) 100%);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.04) 48%,transparent 52%);
  --jewel:linear-gradient(180deg,var(--btn1) 0%,var(--btn2) 38%,var(--btn3) 62%,var(--btn4) 100%);
  /* Windows 95 shapes, drawn in the theme's glow glass (never silver, navy or white) */
  --g-face:linear-gradient(180deg,rgba(var(--glow-rgb),.20),rgba(var(--glow-rgb),.04)),var(--panel);
  --g-hi:rgba(var(--glow-rgb),.5); --g-sh:rgba(0,0,0,.75); --g-mid:rgba(var(--glow-rgb),.18);
  --g-well:rgba(0,0,0,.55);
  --w-title:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.05) 50%,transparent 52%),linear-gradient(90deg,var(--bg2) 0%,var(--xg3) 55%,var(--xg2) 100%);
  --w-tip:linear-gradient(180deg,rgba(var(--glow-rgb),.32),rgba(0,0,0,.55)),var(--panel);
  --r-bevel:6px; --r-lozenge:30px/50%;
  --block:repeating-linear-gradient(90deg,var(--xg) 0 9px,transparent 9px 11px);
}
[hidden]{display:none!important}
summary{list-style:none}summary::-webkit-details-marker{display:none}
summary::before{content:'';display:inline-block;width:0;height:0;margin:0 9px 2px 1px;vertical-align:middle;
  border-left:6px solid var(--xg);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  filter:drop-shadow(0 0 3px rgba(var(--glow-rgb),.6));transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
#t-ring-txt{font-family:var(--font-head)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:180px}
body{color:var(--text);font-family:var(--font-body);
  padding-bottom:calc(64px + env(safe-area-inset-bottom));min-height:100vh;min-height:100svh;
  background:var(--bg2)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 3px);
  transform:translateZ(0)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:98;
  background:radial-gradient(ellipse 90% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);transform:translateZ(0)}
h1{font-family:var(--font-head);font-weight:700;font-style:normal;
  font-size:1.6rem;letter-spacing:.01em;line-height:1.1;text-transform:none;
  padding:16px;padding-top:calc(16px + env(safe-area-inset-top));
  color:var(--pale);text-shadow:0 0 12px rgba(var(--glow-rgb),.35)}
#sync-status{color:var(--dim);font-style:normal;letter-spacing:0;text-shadow:none}
h2{font-family:var(--font-head);font-weight:700;font-style:normal;font-size:1.19rem;line-height:1.2;
  letter-spacing:.01em;text-transform:none;margin:18px 0 8px;
  color:var(--pale);text-shadow:0 0 10px rgba(var(--glow-rgb),.35)}
h2 .pl-cover{filter:none}
h3{font-size:.75rem;font-weight:700;margin:12px 0 6px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 60% at 50% -8%, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%)}
h1{position:relative;z-index:1}
.screen{display:none;padding:0 14px 20px;position:relative;z-index:1}
.screen.active{display:block}
/* the header (which clears the status bar) is hidden on these, so they clear it themselves */
#screen-login,#screen-probe,#screen-setup{padding-top:calc(12px + env(safe-area-inset-top));
  padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.card{background:var(--glass),var(--card1);
  border:1px solid var(--glass-edge);border-radius:14px;padding:14px;margin-bottom:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 20px rgba(var(--glow-rgb),.08), 0 4px 18px rgba(0,0,0,.45)}
.card.subtle{background:linear-gradient(180deg,rgba(var(--glow-rgb),.06),rgba(0,0,0,.2)),var(--card1);border-color:rgba(var(--glow-rgb),.18)}
button{background:var(--jewel);
  color:var(--btn-text);border:1px solid var(--btn1);border-radius:var(--r-lozenge);padding:13px 20px;
  font-family:var(--font-body);font-size:.94rem;font-weight:700;font-style:normal;letter-spacing:.02em;text-transform:none;cursor:pointer;
  touch-action:manipulation;-webkit-text-stroke:0;text-shadow:none;
  box-shadow:0 0 16px rgba(var(--glow-rgb),.45), inset 0 -3px 6px rgba(0,0,0,.28)}
button:disabled{opacity:.4;box-shadow:none}
button.secondary{background:var(--g-face);color:var(--text);-webkit-text-stroke:0;text-shadow:none;font-weight:600;
  border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);border-radius:var(--r-bevel);
  box-shadow:inset 1px 1px var(--g-mid), inset -1px -1px rgba(0,0,0,.4)}
button.secondary:active:not(:disabled),button.secondary[aria-pressed=true],button.secondary[aria-current=page]{
  background:var(--g-well);border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);color:var(--xg);
  text-shadow:0 0 6px rgba(var(--glow-rgb),.6);box-shadow:inset 1px 1px 4px rgba(0,0,0,.6)}
button.danger{background:var(--sheen),rgba(0,0,0,.45);color:var(--bad);-webkit-text-stroke:0;text-shadow:none;
  border:1px dashed var(--bad);border-radius:var(--r-lozenge);box-shadow:none}
button.small{padding:7px 14px;font-size:.84rem}
button.wide{width:100%;margin-top:8px}
@keyframes orbPulse{0%,100%{box-shadow:0 0 14px rgba(var(--glow-rgb),.28), inset 0 -3px 6px rgba(0,0,0,.28)}
  50%{box-shadow:0 0 30px rgba(var(--glow-rgb),.55), 0 0 60px rgba(var(--glow-rgb),.18), inset 0 -3px 6px rgba(0,0,0,.28)}}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dim{color:var(--dim)}.small-t{font-size:.82rem}.tiny{font-size:.74rem}
.pill{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:600;
  letter-spacing:.04em;text-transform:none;border:1px solid var(--glass-edge);color:var(--dim);
  background:rgba(var(--glow-rgb),.06)}
.pill.genre{color:var(--xg);border-color:var(--glass-edge)}
.pill.mood{color:var(--info);border-color:currentColor}
.pill.warn{color:var(--warn);border-color:currentColor}
.pill.bad{color:var(--bad);border-color:currentColor}
#tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;gap:4px;padding-top:6px;
  background:linear-gradient(180deg,rgba(var(--glow-rgb),.16),rgba(0,0,0,.6)),var(--bg2);
  border-top:1px solid var(--g-hi);box-shadow:0 -6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(var(--glow-rgb),.15);
  padding-bottom:env(safe-area-inset-bottom);z-index:50}
#tabbar button{flex:1;min-width:0;background:none;color:var(--tab);border:1px solid;border-radius:var(--r-bevel);padding:10px 0 8px;
  border-color:rgba(var(--glow-rgb),.28) rgba(0,0,0,.6) rgba(0,0,0,.6) rgba(var(--glow-rgb),.28);
  font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:none;animation:none;text-shadow:none}
#tabbar button.active{color:var(--xg);text-shadow:0 0 8px rgba(var(--glow-rgb),.6);
  border-color:rgba(0,0,0,.7) var(--g-hi) var(--g-hi) rgba(0,0,0,.7);
  background:rgba(var(--glow-rgb),.12);box-shadow:inset 1px 1px 4px rgba(0,0,0,.6)}
#tabbar .ico{line-height:1;display:flex;filter:drop-shadow(0 0 4px rgba(var(--glow-rgb),.25))}
#tabbar .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#tabbar button.active .ico{filter:drop-shadow(0 0 7px rgba(var(--glow-rgb),.65))}
#tabbar button.active .ico svg{stroke-width:2}
#nowbar{position:fixed;left:8px;right:8px;bottom:0;z-index:49;display:none;align-items:center;gap:4px;
  padding:8px 8px 8px 8px;border-radius:12px;overflow:hidden;
  background:var(--glass),var(--panel);border:1px solid var(--glass-edge);
  box-shadow:0 -6px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(var(--glow-rgb),.18), 0 0 18px rgba(var(--glow-rgb),.10);
  transform:translateZ(0)}
#nowbar.on{display:flex}
#nowbar .nb-main,#nowbar #nb-art{transition:opacity .15s}
#nowbar.skipping .nb-main,#nowbar.skipping #nb-art{opacity:.5}
body.on-spark #nowbar{display:none}
@media(max-width:359px){#tp-prev{display:none}}
#nowbar .tp-like{width:44px;height:44px;padding:0;display:grid;place-items:center;background:none;border:0;box-shadow:none;flex-shrink:0}
#nowbar .tp-like svg{width:22px;height:22px;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linejoin:round}
#nowbar .tp-like[aria-pressed=true] svg{fill:var(--xg);stroke:var(--xg);filter:drop-shadow(0 0 5px var(--xg))}
#nb-prog{position:absolute;top:0;left:10px;right:10px;height:2px;background:rgba(var(--glow-rgb),.15)}
#nb-fill{display:block;height:100%;width:100%;background:var(--block);transform-origin:0 50%;transform:scaleX(0);will-change:transform;
  filter:drop-shadow(0 0 3px rgba(var(--glow-rgb),.7))}
#nb-art{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;
  border:1px solid var(--edge2);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.nb-main{flex:1;min-width:0}
/* the art and song are one button that opens Now Playing; it looks exactly like the plain row did */
#nowbar .nb-open{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:0;margin:0;padding:0;
  background:none;border:0;border-radius:8px;box-shadow:none;color:inherit;font:inherit;letter-spacing:normal;text-align:left;cursor:pointer}
#nowbar .nb-open:active{opacity:1}
#nowbar .nb-open:focus-visible{outline-offset:2px}
.nb-main,#tp-track,#tp-artist{display:block}
#tp-track{font-weight:700;font-size:.88rem;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tp-artist{color:var(--dim);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nowbar button.sq{flex-shrink:0}
.track-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--edge2);align-items:flex-start}
.track-row:last-child{border-bottom:none}
.track-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);margin-top:4px;flex-shrink:0}
.track-main{flex:1;min-width:0}
.track-name{font-weight:700;font-size:.92rem;color:var(--text-hi)}
.track-artist{color:var(--dim);font-size:.8rem}
.track-reason{color:var(--dim);font-size:.76rem;margin-top:4px;line-height:1.4}
/* a suggestion hidden with ✗: the song and its switched-off controls dim; Undo (and a mood idea's play) stay readable */
.track-row.is-hidden>:not(.track-main):not(.btn-mood-reject):not(.btn-mood-play),
.track-row.is-hidden .track-main>:not(.row),.track-row.is-hidden .track-main>.row>:not(.btn-reject){opacity:.3}
.conf{font-family:var(--font-head);font-weight:800;font-size:.8rem;flex-shrink:0}
.conf.hi{color:var(--bright);text-shadow:0 0 8px var(--glow)}.conf.mid{color:var(--warn)}.conf.lo{color:var(--bad)}
select{background-color:var(--panel);color:var(--text);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);border-radius:var(--r-bevel);padding:8px;font-size:.9rem;max-width:100%;
  font-family:var(--font-body);box-shadow:inset 1px 1px 3px rgba(0,0,0,.7)}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=text],input[type=password]{background:var(--g-well);color:var(--text);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);
  border-radius:var(--r-bevel);padding:11px;font-size:1rem;width:100%;font-family:var(--font-body);box-shadow:inset 1px 1px 3px rgba(0,0,0,.7)}
input::placeholder{color:var(--dim2);opacity:1}
input[type=text]:focus,input[type=password]:focus,select:focus{outline:none;border-color:var(--xg2);box-shadow:0 0 10px rgba(var(--glow-rgb),.25), inset 1px 1px 3px rgba(0,0,0,.7)}
.progress-outer{background:rgba(0,0,0,.5);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);border-radius:2px;height:16px;padding:2px;overflow:hidden;margin:8px 0}
.progress-inner{background:var(--block);height:100%;width:0%;transition:width .3s;
  filter:drop-shadow(0 0 3px rgba(var(--glow-rgb),.7))}
table{width:100%;border-collapse:collapse;font-size:.8rem}
td,th{padding:6px 8px;text-align:left;border-bottom:1px solid var(--edge2)}
th{color:var(--xg);font-weight:600;text-transform:none;letter-spacing:.06em;font-size:.75rem}
.ok-badge{color:var(--bright);text-shadow:0 0 6px var(--glow)}.fail-badge{color:var(--bad)}.warn-badge{color:var(--warn)}
.bucket-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--edge2)}
.bucket-row:last-child{border-bottom:none}
.bucket-name{flex:1;min-width:0;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:flex;border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);border-radius:var(--r-bevel);overflow:hidden;flex-shrink:0;
  background:var(--g-well);box-shadow:inset 1px 1px 3px rgba(0,0,0,.7)}
.seg button{background:none;color:var(--dim);border:none;border-radius:0;padding:7px 10px;font-size:.75rem;
  font-weight:700;letter-spacing:.04em;box-shadow:none;animation:none;text-shadow:none;font-style:normal;font-family:var(--font-body)}
.seg button.sel-genre{background:var(--jewel);color:var(--btn-text);
  box-shadow:0 0 10px rgba(var(--glow-rgb),.35), inset 0 -2px 4px rgba(0,0,0,.25)}
.seg button.sel-sub{background:linear-gradient(180deg,var(--warn),rgba(0,0,0,.35)),var(--warn);color:#1a1d02}
.seg button.sel-mood{background:linear-gradient(180deg,var(--info),rgba(0,0,0,.4)),var(--info);color:#03201a}
.seg button.sel-ignore{background:var(--g-face);color:var(--text-sec)}
.toast{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  background:var(--w-tip);border:1px solid var(--g-hi);color:var(--text);
  padding:10px 18px;border-radius:10px;font-size:.9rem;z-index:100;max-width:92vw;
  box-shadow:0 0 20px rgba(var(--glow-rgb),.25), 0 6px 20px rgba(0,0,0,.6)}
.toast[popover]{right:auto;bottom:auto;margin:0;overflow:visible;width:max-content;height:auto}
.dropzone{border:2px dashed var(--edge-hi);border-radius:10px;padding:28px 14px;text-align:center;color:var(--dim);
  background:rgba(0,0,0,.25)}
.dropzone.hot{border-color:var(--accent);color:var(--bright);box-shadow:0 0 20px rgba(var(--glow-rgb),.25) inset}
details{margin:8px 0}summary{cursor:pointer;color:var(--link);font-size:.9rem;font-weight:600;padding:4px 0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.stat{background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);border-radius:2px;padding:10px;text-align:center;box-shadow:inset 1px 1px 3px rgba(0,0,0,.7)}
.stat .v{font-family:var(--font-body);font-size:1.2rem;font-weight:700;color:var(--xg);text-shadow:0 0 8px rgba(var(--glow-rgb),.45)}
.stat .l{font-size:.75rem;font-weight:600;color:var(--tab);letter-spacing:.04em}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--edge-hi);border-top-color:var(--accent);
  border-radius:50%;animation:sp 1s linear infinite;vertical-align:middle;
  box-shadow:0 0 8px rgba(var(--glow-rgb),.3)}
@keyframes sp{to{transform:rotate(360deg)}}
a{color:var(--link)}
.prose p{margin:8px 0;line-height:1.55;font-size:.9rem}
.prose .hl{color:var(--bright);text-shadow:0 0 6px var(--glow)}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:var(--edge-hi);border-radius:4px}
.parent-line{position:relative;z-index:1}
#triage{display:none;position:fixed;inset:0;z-index:60;flex-direction:column;
  background:radial-gradient(ellipse 120% 50% at 50% -5%, var(--bg0) 0%, var(--bg1) 50%, var(--bg2) 100%)}
#triage.open{display:flex}
.t-card{margin:6px 14px;flex:1;overflow-y:auto;position:relative;touch-action:none;will-change:transform;
  display:flex;flex-direction:column;justify-content:center}
/* the "next card" frame peeks out just behind the card itself (not the overlay), so it follows the
   card's place inside the safe areas and never runs under the notch, the header or the buttons */
.t-stack{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:720px;margin:0 auto}
.t-stack::after{content:'';position:absolute;top:8px;right:8px;bottom:-7px;left:8px;z-index:-1;
  border:1px solid var(--edge2);border-radius:12px;background:rgba(var(--glow-rgb),.03)}
.t-art-wrap{position:relative;display:block;line-height:0}
.t-play{position:absolute;left:50%;top:50%;width:44px;height:44px;min-width:44px;min-height:44px;margin:-22px 0 0 -22px;padding:0;
  border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);color:var(--bright);border:1px solid var(--g-hi);box-shadow:0 0 12px rgba(var(--glow-rgb),.35)}
.t-play svg,#mood-container .btn-mood-play svg{width:18px;height:18px;fill:currentColor;stroke:none;display:block}
#mood-container .btn-mood-play{padding:8px 10px;margin-right:6px;flex-shrink:0;display:inline-grid;place-items:center}
.t-play.on,.btn-mood-play.on{background:var(--jewel);color:var(--btn-text)}
.toast-act{display:flex;align-items:center;gap:12px}.toast-act button{flex-shrink:0;min-height:36px;padding:6px 12px}
#write-progress{width:100%;transform-origin:0 50%;transform:scaleX(0);transition:transform .3s}
@media(prefers-reduced-motion:reduce){#write-progress{transition:none}}
#undo-list .spread{gap:10px}.btn-undo-batch{flex-shrink:0;white-space:nowrap}
#review-sub:empty{display:none}
.t-stamp{position:absolute;top:16px;left:12px;right:12px;z-index:5;pointer-events:none;opacity:0;
  font-family:var(--font-head);font-weight:900;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 12px;border:3px solid currentColor;border-radius:10px;transform:rotate(-7deg);
  text-shadow:0 0 12px currentColor;background:rgba(0,0,0,.35)}
#t-name{font-family:var(--font-head);font-weight:700;font-size:1.25rem}
.t-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 14px}
.t-actions button{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 6px;border-radius:12px;animation:none}
.t-actions button svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.t-actions .tiny{font-size:.6rem;letter-spacing:.08em}
#t-art{display:block;width:min(72vw,300px);aspect-ratio:1;object-fit:cover;margin:0 auto 18px;
  border-radius:12px;border:1px solid var(--edge);
  box-shadow:0 0 30px rgba(var(--glow-rgb),.18), 0 12px 32px rgba(0,0,0,.55)}
#t-name{font-size:1.35rem}
.t-match{margin:18px 0 14px}
#t-name{text-align:center}
#t-artist{text-align:center;color:var(--dim);font-size:.95rem;margin-top:3px}
#t-album{text-align:center;margin-top:2px}
.t-match{display:flex;gap:12px;align-items:center;margin:14px 0 12px;
  background:var(--panel);border:1px solid var(--edge2);border-radius:10px;padding:10px}
.t-dest{font-family:var(--font-head);font-weight:700;font-size:.76rem;color:var(--head-text);
  letter-spacing:.05em;text-transform:uppercase;line-height:1.4}
#t-reason{font-size:.72rem;color:var(--dim);margin-top:4px;line-height:1.35}
.t-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t-selects select{width:100%}
.spark-orb{width:116px;height:116px;margin:2px auto 0;display:block;border-radius:50%;
  filter:blur(3.5px) contrast(14) saturate(1.1);
  border:1px solid var(--glass-edge);
  box-shadow:0 0 34px rgba(var(--glow-rgb),.30), 0 0 80px rgba(var(--glow-rgb),.12),
             inset 0 0 24px rgba(0,0,0,.7)}
.spark-listen{display:block;position:relative;margin:14px auto 6px;padding:8px;border:2px solid transparent;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(var(--glow-rgb),.16),rgba(0,0,0,.55) 68%);
  box-shadow:0 0 34px rgba(var(--glow-rgb),.22), inset 0 0 18px rgba(0,0,0,.8)}
.spark-halo{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;will-change:opacity;
  box-shadow:0 0 52px rgba(var(--glow-rgb),.4), 0 0 90px rgba(var(--glow-rgb),.14);animation:sparkHalo 3.2s ease-in-out infinite}
.spark-listen::before,.spark-listen::after{content:'';position:absolute;inset:-10% -26%;pointer-events:none;border-radius:50%;
  border:1.5px solid rgba(var(--glow-rgb),.5);transform:rotate(-18deg);box-shadow:0 0 8px rgba(var(--glow-rgb),.3)}
.spark-listen::after{inset:-4% -18%;transform:rotate(22deg);opacity:.55}
@keyframes sparkHalo{50%{opacity:1}}
.spark-listen:focus-visible{outline:2px solid var(--bright);outline-offset:5px}
.spark-listen[aria-pressed="true"]{border-color:var(--glass-edge)}
.spark-listen:disabled{opacity:.65;cursor:wait}
/* DJ row: the goo orb stays centred; the pause/play control sits beside it */
.spark-dj{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:10px}
.spark-dj .spark-listen{grid-column:2}
#screen-spark .spark-dj button.spark-pause{grid-column:3;justify-self:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:56px;min-width:44px;min-height:56px;padding:6px 0;border-radius:14px;border:1px solid var(--btn1);background:var(--jewel);color:var(--btn-text);
  font:700 .72rem var(--font-body);line-height:1;box-shadow:0 0 14px rgba(var(--glow-rgb),.45),inset 0 -3px 6px rgba(0,0,0,.28)}
#screen-spark .spark-dj button.spark-pause[hidden]{display:none}
.spark-pause svg{width:20px;height:20px;fill:var(--btn-text)}
.radio-sources{text-align:left;margin-top:14px}
.radio-source-list{max-height:240px;overflow-y:auto;margin:10px 0}
.radio-source-option{display:flex;align-items:center;gap:10px;padding:9px 4px;text-transform:none;letter-spacing:normal;font-size:.85rem;cursor:pointer}
.radio-source-option input{width:18px;height:18px;flex-shrink:0;accent-color:var(--bright)}
.radio-source-option span{overflow-wrap:anywhere}
.seed-chip{background:var(--sheen),rgba(var(--glow-rgb),.1);border:1px solid rgba(var(--glow-rgb),.25);color:var(--text);border-radius:var(--r-lozenge);
  padding:7px 15px;font-size:.84rem;font-weight:600;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);animation:none;text-transform:none}
.seed-chip.sel{background:var(--jewel);color:var(--btn-text);border-color:var(--btn1);font-weight:700;box-shadow:0 0 12px rgba(var(--glow-rgb),.4)}
.s-art{width:42px;height:42px;border-radius:6px;object-fit:cover;flex-shrink:0;border:1px solid var(--edge2)}
.pl-cover{width:26px;height:26px;border-radius:5px;object-fit:cover;vertical-align:-7px;margin-right:8px;
  border:1px solid var(--edge);box-shadow:0 0 8px rgba(var(--glow-rgb),.15)}
.chip-cover{width:18px;height:18px;border-radius:4px;object-fit:cover;vertical-align:-4px;margin-right:6px;border:1px solid var(--edge)}
.spark-bubble{margin:12px auto 0;max-width:92%;text-align:left;background:var(--w-tip);border:1px solid var(--g-hi);
  border-radius:10px;padding:10px 14px;font-size:.92rem;line-height:1.45;color:var(--text);position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 22px rgba(var(--glow-rgb),.22)}
.spark-bubble::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:var(--panel);background-image:linear-gradient(135deg,rgba(var(--glow-rgb),.32),rgba(var(--glow-rgb),.28));
  border-left:1px solid var(--g-hi);border-top:1px solid var(--g-hi)}
button.sq{padding:9px;border-radius:8px}
button.sq svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
button.sq.muted{opacity:.45}

#spark-logo{font-size:1.4rem;letter-spacing:.32em;margin:14px 0 2px;display:block}
#spark-logo{font-family:var(--font-logo);position:relative;width:fit-content;margin-left:auto;margin-right:auto;padding:2px 10px}
#spark-logo{font-family:var(--font-logo);font-weight:400;font-style:normal;text-transform:uppercase;
  padding:2px 0 2px .32em;color:var(--xg);text-shadow:0 0 14px rgba(var(--glow-rgb),.7);-webkit-text-stroke:0}
.t-stamp{border-width:4px;font-size:1.15rem;letter-spacing:.08em}
#t-name{color:var(--pale);text-shadow:0 0 10px rgba(var(--glow-rgb),.35)}

/* Simpler navigation; the original theme, lettering, and canvases stay in charge. */
.app-header{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding-right:16px;position:relative;z-index:1;gap:8px}
.app-header h1{min-width:0;font-size:clamp(1.1rem,4.8vw,1.6rem)}
.screen{max-width:1120px;margin:auto}
#screen-spark{max-width:780px}#screen-settings{max-width:900px}
#btn-settings{flex-shrink:0}#btn-settings[aria-pressed=true]{color:var(--bright);border-color:var(--accent)}
#tabbar button{font-size:.72rem;padding:11px 0;gap:5px;min-height:58px}
.page-heading{margin:6px 0 16px}.page-heading h2{margin:0}.page-heading p{margin-top:6px}
.section-links{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.section-links button[aria-current=page]{border-color:var(--accent);color:var(--bright)}
.review-number{font-family:var(--font-head);font-size:2rem;color:var(--bright);text-shadow:0 0 12px var(--glow);line-height:1.2}
.review-lead{max-width:580px;margin:0 auto;text-align:center}.review-lead h2{margin-top:6px}
.review-lead details{text-align:left;margin-top:18px}.review-lead p{margin:8px 0;line-height:1.5}
.sync-banner{position:relative;z-index:1;max-width:1092px;margin:0 auto 14px;padding:10px 14px;border:1px solid var(--edge-hi);border-radius:9px;background:var(--panel)}
.sync-banner[hidden]{display:none}.sync-banner .progress-outer{height:10px;margin-bottom:0}
.progress-outer.indeterminate .progress-inner{width:32%!important;animation:syncTravel 1.4s ease-in-out infinite alternate}
@keyframes syncTravel{to{transform:translateX(210%)}}
details.card>summary{font-weight:700;color:var(--text-hi);padding:5px 0}details.card[open]>summary{margin-bottom:12px}
.play-folder>summary{cursor:pointer;font-family:var(--font-head)}
.play-folder #lib-count:empty{display:none}
.play-folder>summary svg{width:19px;height:19px;vertical-align:middle;margin:0 8px 2px 3px;fill:none;stroke:var(--bright);stroke-width:1.7}
.play-folder .folder-content>.card{border:0;padding:0;background:none;box-shadow:none;margin-bottom:0}
.play-folder .folder-content>.card+.card,.play-folder #lib-list{margin-top:12px}
.spark-primary{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.spark-primary button,.spark-primary a{flex:1 1 220px;margin:0}
/* One quiet control language, with the original display type reserved for SPARK and page titles. */
.app-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
#btn-refresh{font-family:var(--font-body);font-style:normal;text-transform:none;letter-spacing:normal;min-height:44px}
.refresh-banner{position:relative;z-index:1;max-width:1092px;margin:0 auto 12px;padding:0 14px;line-height:1.5}
.refresh-banner[hidden]{display:none}.refresh-banner button{margin:6px 6px 0 0}
#screen-spark{--play-space:16px}
#spark-folder>.card{padding:var(--play-space);margin-bottom:var(--play-space);border-radius:12px}
#spark-main{padding:20px!important}
#screen-spark button:not(.spark-listen),#screen-spark select,#screen-home button:not(.blade):not(.home-orb):not(.mix-tile):not(.replay-teaser):not(.shelf-link),#screen-librarytab button:not(.chip),#screen-librarytab select,#playback-dialog button,#playback-dialog a{
  font-family:var(--font-body);font-style:normal;text-transform:none;letter-spacing:normal;font-size:.9rem;line-height:1.35;min-height:44px}
.screen .play-folder>summary,#playlist-shortcuts-title{font-family:var(--font-body);font-weight:700;font-size:1rem;font-style:normal;text-transform:none;letter-spacing:normal;color:var(--text-hi);line-height:1.4}
.screen .play-folder>summary{padding:4px 0;min-height:28px}
.screen .play-folder[open]>summary{padding-bottom:12px;border-bottom:1px solid var(--edge2)}
#spark-session>.card{border:0;padding:0;margin:0;background:none;box-shadow:none}
.spark-primary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 8px}
.spark-primary button{padding:10px;overflow-wrap:anywhere}
#spark-webplayer-note{line-height:1.5;margin:0 0 16px;overflow-wrap:anywhere}
#spark-status{margin-top:4px}#spark-bubble{margin:16px 0}
.spark-request{border-top:1px solid var(--edge2);margin-top:16px;padding-top:16px;text-align:left}
.spark-request label{display:block;font-weight:700;color:var(--text-hi);margin-bottom:8px}
.spark-purpose{display:flex;gap:8px;margin-top:8px}.spark-purpose button{flex:1}
.spark-purpose button[aria-pressed=true]{background:var(--panel);border-color:var(--accent);color:var(--bright)}
#spark-chat{gap:8px}#spark-input-help,#spark-dictation-help{text-align:left;line-height:1.5}
.spark-source-row{margin-top:0}#spark-tune{margin-top:16px}#spark-tune>summary{padding:14px 0 0}
#spark-tune[open]>summary{padding-bottom:14px}
#playback-dialog{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto}
#playback-dialog [hidden]{display:none!important}
.playback-section{padding:16px 0;border-top:1px solid var(--edge2)}.playback-section:last-child{padding-bottom:0}
.playback-section h3{font-family:var(--font-body);font-size:1rem;text-transform:none;letter-spacing:normal;color:var(--text-hi);margin:0 0 8px}
.playback-section p{line-height:1.5;margin:8px 0}
#playback-devices{display:grid;gap:8px;margin:12px 0}#playback-devices button{text-align:left;padding:12px}
#playback-devices button[aria-pressed=true]{border-color:var(--bright);color:var(--bright)}
@media(max-width:480px){#spark-main{padding:16px!important}.app-header h1{padding-left:12px}.app-actions{gap:6px}.app-header{gap:4px}#btn-refresh{padding:10px}.spark-primary{grid-template-columns:1fr 1fr}.spark-source-row{flex-wrap:wrap}#radio-source-summary{flex-basis:180px}}
#playlist-shortcuts{padding-top:10px;padding-bottom:10px}
#playlist-shortcuts .spread h3{margin:0}
#playlist-pins{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin-top:10px;padding-bottom:4px}
#playlist-pins .playlist-cover{flex:0 0 88px;scroll-snap-align:start}
.playlist-cover{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;background:none;border:0;box-shadow:none;color:var(--text);font-family:var(--font-body);font-size:.82rem;font-style:normal;text-transform:none;letter-spacing:normal;text-align:left;line-height:1.35}
.playlist-cover img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--edge2)}
.playlist-cover span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
#playlist-pins p{margin:0;padding:4px 0}
#playlist-see-all{flex-shrink:0;font-family:var(--font-body);font-style:normal;text-transform:none;letter-spacing:normal}
#screen-podcasts{max-width:780px}
#podcast-section button[aria-pressed=true]{color:var(--bright);border-color:var(--bright)}
#podcast-section select{font-family:var(--font-body)}
dialog.playlist-dialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 32px)}
dialog.playlist-dialog[open]{display:flex;flex-direction:column;gap:12px}
.playlist-dialog-header{display:flex;align-items:center;gap:8px;flex-shrink:0}.playlist-dialog-header h2{flex:1;min-width:0;overflow-wrap:anywhere;font-size:1.1rem;margin:0}
.playlist-dialog-body{overflow:auto;overscroll-behavior:contain;min-height:0}
#playlist-browser [hidden]{display:none!important}
#playlist-search{width:100%;margin-bottom:8px}
.playlist-browse-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--edge2)}
.playlist-browse-row .playlist-cover{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px}
.playlist-browse-row .playlist-cover span{-webkit-line-clamp:3}
.playlist-detail-header{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:12px}
.playlist-detail-header img{width:76px;height:76px;object-fit:cover;border-radius:8px}.playlist-detail-header b{overflow-wrap:anywhere}
.playlist-song-list .track-main{min-width:0;flex:1}.playlist-song-list .track-row{align-items:center}.playlist-song-list .track-name{font-size:.9rem}
.playlist-song-list .track-artist{font-size:.8rem}.playlist-song-list .track-row button{flex-shrink:0}
.playlist-song-list .pl-song-open{flex:none;min-width:44px;padding:0 8px;color:var(--dim);border-color:var(--edge2)}
.spark-tune{text-align:left;margin-top:14px;border-top:1px solid var(--edge-hi)}
.spark-tune>summary{font-weight:700;padding:12px 0}
.spark-tune select{width:100%;margin:6px 0}
.spark-source-row{display:flex;align-items:stretch;gap:8px;margin-top:12px}
.spark-source-row button{font-family:var(--font-body);font-size:.9rem;font-style:normal;text-transform:none;letter-spacing:normal}
#radio-source-summary{flex:1;min-width:0;min-height:44px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px}
#spark-search-library{flex-shrink:0}
#screen-sort,#screen-moods{max-width:780px}
.organize-links{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.organize-links button{flex:1}
.organize-note{margin:10px 0;line-height:1.5}
#organize-tools>div>.card,#organize-extras>div>details.card{margin-top:12px}
#triage{padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:8px;overflow:hidden}
.t-header,.t-footer{width:100%;max-width:720px;margin:0 auto;flex-shrink:0}
.t-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.t-header .row{flex-wrap:nowrap}
.t-card{width:100%;max-width:720px;margin:0 auto;min-height:0;justify-content:flex-start;touch-action:pan-y;overscroll-behavior:contain;padding:16px}
.t-track{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px}
#t-art{width:88px;height:88px;margin:0;object-fit:contain}
#t-name{text-align:left;font-size:1.05rem;overflow-wrap:anywhere}#t-artist,#t-album{text-align:left;overflow-wrap:anywhere}
.t-match{display:block;margin:14px 0;padding:14px}.t-dest{font-family:var(--font-body);font-size:1.08rem;text-transform:none;letter-spacing:normal;white-space:pre-line;overflow-wrap:anywhere;line-height:1.6}
#t-reason{font-size:.88rem;line-height:1.5}.t-details{margin:10px 0}.t-details .t-selects{grid-template-columns:1fr;margin:12px 0}
.t-details label{display:block;font-size:.88rem;margin:6px 0}.t-details .row button{flex:1 1 200px}
.dest-pick{margin:10px 0 4px}.dest-h{margin:12px 0 6px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.dest-h:first-child{margin-top:0}
.dest-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px}.dest-parent{flex-basis:100%;margin:2px 0 0}
button.dest-chip{min-height:44px;padding:0 12px;font-size:.86rem;text-align:left;overflow-wrap:anywhere}.dest-pct{margin-left:5px;font-weight:500;opacity:.75}
button.dest-edit{flex:1 1 0;min-width:0;text-align:left;white-space:normal;overflow-wrap:anywhere}.dest-pick .dest-done{margin-top:6px}
.t-actions{width:100%;max-width:720px;margin:0 auto;padding:0;grid-template-columns:1fr 1fr;gap:10px;flex-shrink:0}
.t-actions button{font-family:var(--font-body);font-size:1rem;font-style:normal;text-transform:none;letter-spacing:normal;min-height:56px}
.t-directions{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;color:var(--dim);line-height:1.5}
.t-footer .row{justify-content:space-between}.t-footer button{min-height:44px}.t-footer p{font-size:.85rem;line-height:1.4}
.t-stamp{background:var(--panel);font-family:var(--font-body);text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;font-size:1rem}
#t-card:focus-visible{outline:2px solid var(--bright);outline-offset:-3px}
.compact-item{padding:12px 0;border-bottom:1px solid var(--edge2)}.compact-item:last-child{border-bottom:0}
.compact-item .row{margin-top:8px}.compact-item .row button,.compact-item .row a{flex:1}
.tap-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--edge-hi);border-radius:7px;text-decoration:none;font-size:.9rem}
.browse-list{max-height:55svh;overflow:auto;overscroll-behavior:contain}
#podcast-detail h3,#playlist-pins b,.compact-item b{overflow-wrap:anywhere}
@media(max-height:540px){.t-track{grid-template-columns:54px minmax(0,1fr)}#t-art{width:54px;height:54px}.t-card{padding:10px}.t-match{margin:8px 0;padding:8px}.t-header button{padding:7px 10px}.t-footer p{display:none}}
#radio-source-summary::after{content:'▾';flex-shrink:0}
#radio-source-summary[aria-expanded=true]::after{content:'▴'}
#spark-set-folder:not(:has(#spark-session>*)){display:none}
#spark-set-folder #spark-session>.card{border:0;padding:0;background:none;box-shadow:none;margin:0}
.wake-row{display:flex;gap:10px;align-items:center;min-height:44px;margin:6px 0 0}
.wake-row input{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
.settings-links{justify-content:flex-start}.settings-links button{flex:1}
dialog.change-preview{color:var(--text);background:var(--panel);border:1px solid var(--edge-hi);border-radius:14px;padding:20px;width:min(640px,calc(100vw - 28px));max-height:85vh;max-height:85dvh;margin:auto;box-shadow:0 0 32px var(--glow)}
dialog.change-preview::backdrop{background:var(--bg2);opacity:.85}.change-preview h2{margin-top:0}
/* Win95 window shape in Xbox green: bevelled glass frame, green title-bar blade carrying the existing Close/Done controls */
dialog.change-preview{padding:0;background:var(--glass),var(--panel);border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);
  border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 28px rgba(var(--glow-rgb),.22),0 18px 40px rgba(0,0,0,.6)}
dialog.change-preview>*{margin-left:14px;margin-right:14px}
dialog.change-preview>:last-child{margin-bottom:14px}
dialog.change-preview>.playlist-dialog-header,dialog.change-preview>h2:first-child{margin:0 0 12px;position:sticky;top:0;z-index:2;min-height:48px;
  padding:6px 6px 6px 14px;display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,rgba(var(--glow-rgb),.42),rgba(var(--glow-rgb),.14) 62%,rgba(var(--glow-rgb),.05)),var(--panel);
  border-bottom:1px solid var(--g-sh);box-shadow:inset 0 1px 0 rgba(var(--glow-rgb),.45),inset 0 -1px 0 rgba(var(--glow-rgb),.12)}
dialog.change-preview>.playlist-dialog-header h2,dialog.change-preview>h2:first-child{font-size:1rem;color:var(--text-hi);margin:0;letter-spacing:.02em}
dialog.change-preview>h2:first-child{display:flex}
dialog.change-preview .playlist-dialog-header button{min-height:44px;min-width:44px}
dialog.playlist-dialog[open]{gap:0}
dialog.playlist-dialog .playlist-dialog-body{margin:0;padding:0 14px 14px}
dialog.change-preview .preview-actions{position:sticky;bottom:0;padding:12px 0;margin-bottom:0;background:linear-gradient(180deg,transparent,var(--panel) 30%)}
@media (max-width:600px){
  #playback-dialog,#playlist-browser,#change-preview,#restore-preview,#logout-dialog,#song-menu{margin:auto 0 0;width:100vw;max-width:100vw;max-height:88dvh;
    border-radius:14px 14px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  /* the sheets that pull down to close carry the iOS grabber on their title bar */
  #playback-dialog>.playlist-dialog-header::before,#playlist-browser>.playlist-dialog-header::before,#change-preview>h2:first-child::before,#song-menu>.playlist-dialog-header::before{
    content:'';position:absolute;top:4px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(var(--glow-rgb),.45);pointer-events:none}
}
/* balloon tip: the toast's tail points up at the title area it appears under */
.toast::before{content:"";position:absolute;top:-9px;left:calc(50% - 9px);border:9px solid transparent;border-top:0;border-bottom-color:var(--g-hi)}
.toast::after{content:"";position:absolute;top:-7px;left:calc(50% - 8px);border:8px solid transparent;border-top:0;border-bottom-color:rgba(var(--glow-rgb),.38)}
.preview-list{max-height:44vh;max-height:44dvh;overflow:auto;margin:16px 0}.preview-list ul{padding-left:24px;font-size:.86rem;line-height:1.7}
.preview-actions{position:sticky;bottom:0;background:var(--panel);padding-top:8px;justify-content:flex-end}
/* restore and log out: the body lines, the undo choice and the extra buttons */
#restore-preview-body p,#logout-dialog p,#restore-undo-n{margin-top:6px;margin-bottom:6px;line-height:1.5}
.restore-undo{border:0;padding:0;margin-top:10px}.restore-undo legend{padding:0}
.restore-undo label{display:flex;gap:8px;align-items:center;min-height:44px}
#restore-safety,#logout-backup{margin-top:10px}
button:focus-visible,summary:focus-visible{outline:2px solid var(--bright);outline-offset:4px}
@media(max-width:600px){.sync-banner{margin-left:14px;margin-right:14px}.settings-links button{flex-basis:40%}}
/* Phone controls remain readable and clear of the notch, keyboard, and home indicator. */
@media(max-width:600px),(pointer:coarse){
  body{min-height:100svh}
  .screen{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .app-header{padding-left:env(safe-area-inset-left);padding-right:max(12px,env(safe-area-inset-right))}
  #tabbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  #nowbar{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
  .card{padding:12px}
  button,button.small,.seg button,.seed-chip,button.sq{min-height:44px;min-width:44px}
  button{overflow-wrap:anywhere}
  summary,details.card>summary{min-height:44px;padding-top:12px;padding-bottom:12px;line-height:1.5}
  input[type=text],input[type=password],input[type=number],select{font-size:16px;min-height:44px;min-width:0}
  #screen-spark select{font-size:16px}.screen .play-folder>summary{min-height:44px}
  select{-webkit-appearance:none;appearance:none;padding-right:32px;background-color:var(--panel);background-image:linear-gradient(45deg,transparent 50%,var(--xg) 50%),linear-gradient(135deg,var(--xg) 50%,transparent 50%);background-repeat:no-repeat;background-position:right 16px center,right 11px center;background-size:5px 5px,5px 5px}
  input[type=range]{min-height:44px}
  input,select,textarea{scroll-margin-bottom:180px}
  .small-t{font-size:.9rem;line-height:1.5}.tiny{font-size:.82rem;line-height:1.5}
  .radio-source-option{min-height:44px;font-size:.95rem}
  /* one line like an iOS composer: the box takes what Send and the voice button leave */
  #spark-chat{flex-wrap:nowrap}#spark-input{flex:1 1 auto!important;min-width:0}
  #lib-search{flex-basis:100%!important}
  .track-name,.track-artist,.spark-bubble,.play-folder>summary{overflow-wrap:anywhere}
  .bucket-row{flex-wrap:wrap}.bucket-row .seg{max-width:100%;flex-wrap:wrap}
  .change-preview{max-height:85dvh}
}
/* ---- Dashboard layer (Xbox first, Win95 shapes in green glass) ---- */
.play-folder>summary:has(svg)::before{display:none}
.page-heading h2{font-size:1.875rem;line-height:1.05}
.page-heading p{color:var(--dim)}
.app-header h1{font-size:clamp(1.25rem,5.4vw,1.6rem)}
#btn-settings{border-radius:var(--r-bevel);color:var(--xg)}
#btn-settings svg{stroke:currentColor}
details.card>summary{color:var(--pale);font-weight:700}
.dropzone{border-color:var(--glass-edge);background:var(--g-well)}
a{color:var(--link)}
/* the small goo orb for the taskbar's SPARK slot: a CSS blob that keeps wobbling */
.spark-dot{display:block;width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--text-hi),var(--btn4) 30%,var(--xg3) 70%,var(--bg2));
  box-shadow:0 0 10px rgba(var(--glow-rgb),.85),0 0 22px rgba(var(--glow-rgb),.35);
  border-radius:54% 46% 52% 48%/47% 53% 47% 53%;will-change:transform;animation:gooWobble 3.2s ease-in-out infinite}
@keyframes gooWobble{0%,100%{transform:rotate(0) scale(1)}
  25%{transform:rotate(-7deg) scale(1.04,.97)}
  50%{transform:rotate(6deg) scale(.97,1.04)}
  75%{transform:rotate(-3deg) scale(1.02,.99)}}
/* ---- Navigation: large-title header with the gear, 5-slot glass taskbar, Home/Search/Library frames ---- */
.app-header{align-items:center;padding:calc(10px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));margin-bottom:8px}
.app-titles{flex:1;min-width:0}
.app-kicker{margin:0 0 4px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--dim)}
.app-header h1{padding:0;font-size:1.875rem;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-header.title-off h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app-header.title-off{justify-content:flex-end}
#btn-settings{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;
  box-shadow:inset 1px 1px var(--g-mid),0 0 12px rgba(var(--glow-rgb),.15)}
#btn-settings svg{width:22px;height:22px}
.page-heading h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.page-heading{margin:0 0 14px}.page-heading p{margin:0}
/* iOS-sized: about 50 px of tabs over the home indicator (no extra strip under them) */
#tabbar{gap:4px;padding:4px 5px max(4px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(var(--glow-rgb),.22),rgba(0,0,0,.72) 70%),var(--bg2);
  transform:translateZ(0)}
#tabbar button{position:relative;font-size:.75rem;line-height:1.15;padding:3px 0 5px;gap:2px;min-height:50px;justify-content:center}
#tabbar .ico svg{width:22px;height:22px}
#tabbar button.active::after{content:'';position:absolute;top:2px;left:50%;width:14px;height:3px;margin-left:-7px;border-radius:2px;
  background:var(--xg);box-shadow:0 0 6px var(--xg),0 0 12px rgba(var(--glow-rgb),.7)}
#tabbar .tab-spark{flex:1.15;color:var(--pale);border-radius:22px;
  background:radial-gradient(circle at 50% 40%,rgba(var(--glow-rgb),.26),rgba(0,0,0,.55) 72%)}
#tabbar .tab-spark.active{background:radial-gradient(circle at 50% 40%,rgba(var(--glow-rgb),.42),rgba(0,0,0,.55) 72%)}
#tabbar .tab-spark .spark-dot{width:27px;height:27px}
#tabbar .tab-spark.active::after{top:auto;bottom:2px}
.blade{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;width:100%;min-height:56px;margin:0;
  padding:8px 34px 8px 18px;text-align:left;color:var(--text);font-weight:400;letter-spacing:normal;
  border-radius:12px 30px 30px 12px/12px 50% 50% 12px;border:1px solid var(--glass-edge);
  background:var(--sheen),linear-gradient(90deg,rgba(var(--glow-rgb),.24),rgba(var(--glow-rgb),.06) 45%),var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.blade::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:2px;background:var(--xg);box-shadow:0 0 8px var(--xg)}
.blade::after{content:'›';position:absolute;right:14px;top:50%;transform:translateY(-52%);font-size:1.4rem;font-weight:700;color:var(--xg)}
.blade b{display:block;font-size:1rem;font-weight:700;color:var(--text-hi)}
.blade span{display:block;max-width:100%;font-size:.8rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blade.lit{background:var(--jewel);border-color:var(--btn1);color:var(--btn-text);box-shadow:0 0 14px rgba(var(--glow-rgb),.45),inset 0 -3px 6px rgba(0,0,0,.28)}
.blade.lit::before{display:none}.blade.lit b,.blade.lit::after{color:var(--btn-text)}.blade.lit span{color:var(--btn-text);opacity:.75}
.home-hero{display:flex;align-items:center;gap:6px;padding:12px 12px 12px 6px;border-radius:14px 60px 60px 14px}
.home-orb{flex:none;width:118px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0;background:none;border:0;box-shadow:none;color:var(--xg)}
.home-orb .spark-dot{width:78px;height:78px;box-shadow:0 0 18px rgba(var(--glow-rgb),.8),0 0 44px rgba(var(--glow-rgb),.35)}
.home-orb small{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-shadow:0 0 8px rgba(var(--glow-rgb),.6)}
.home-blades{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.home-blades .blade{min-height:46px;padding-top:6px;padding-bottom:6px}
.home-blades .blade:nth-child(2){margin-left:-8px;width:calc(100% + 8px)}
.home-blades .blade b{font-size:.92rem}.home-blades .blade span{font-size:.75rem}
.lib-chips{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.lib-chips::-webkit-scrollbar{display:none}
button.chip{flex:none;min-height:44px;padding:0 16px;margin:0;font-size:.9rem;font-weight:600;color:var(--text);
  background:var(--sheen),rgba(var(--glow-rgb),.1);border:1px solid rgba(var(--glow-rgb),.24);box-shadow:none}
button.chip[aria-pressed=true]{background:var(--jewel);color:var(--btn-text);border-color:var(--btn1);font-weight:700;box-shadow:0 0 12px rgba(var(--glow-rgb),.4)}
.search-field{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0 0 14px;padding:0 14px;text-align:left;
  font-weight:500;color:var(--dim);background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);
  border-radius:var(--r-bevel);box-shadow:inset 1px 1px 4px rgba(0,0,0,.6)}
.search-field svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--xg);stroke-width:2.2;stroke-linecap:round}
.search-empty h3{margin-top:0}.search-empty .blade{margin-top:12px}
@media(max-width:600px),(pointer:coarse){#screen-librarytab select{font-size:16px}}
/* ---- Phase 2: Home shelves, Search, Library (Xbox glass, Win95 shapes in green) ---- */
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 0 10px}
.shelf-head h3,#playlist-shortcuts .shelf-head h3{margin:0;font:700 1.19rem/1.2 var(--font-body);letter-spacing:.01em;text-transform:none;color:var(--pale);text-shadow:0 0 10px rgba(var(--glow-rgb),.35)}
.shelf-head .src{display:block;margin-top:2px;font-size:.75rem;font-weight:500;color:var(--dim2)}
.screen button.shelf-link{min-height:44px;min-width:0;margin:-12px 0;padding:0 2px;background:none;border:0;box-shadow:none;border-radius:0;
  font:700 .75rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--xg)}
#home-lead{display:none}
#screen-home .home-hero{margin-bottom:4px}
#screen-home button.blade,#screen-search button.blade{font-family:var(--font-body)}
/* pins: the Spotify 2x3 quick grid */
#playlist-shortcuts{padding:0;background:none;border:0;box-shadow:none}
#playlist-pins{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;overflow:visible;padding:0}
#playlist-pins p{grid-column:1/-1}
#screen-home #playlist-pins .playlist-cover{flex-direction:row;align-items:center;gap:10px;height:48px;min-height:48px;padding:0 8px 0 0;overflow:hidden;
  border-radius:8px;background:var(--sheen),rgba(var(--glow-rgb),.1);border:1px solid rgba(var(--glow-rgb),.16);font-weight:600;font-size:.88rem;line-height:1.2}
#playlist-pins .playlist-cover img{width:48px;height:48px;flex:none;aspect-ratio:auto;border:0;border-radius:0}
#playlist-pins .playlist-cover span{-webkit-line-clamp:2}
#playlist-pins .pin-skel{display:block;height:48px;border-radius:8px}
/* mixes + jump back in shelves */
.mix-shelf{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 12px;scrollbar-width:none;margin:0 -12px;padding:0 12px 4px}
.mix-shelf::-webkit-scrollbar{display:none}
.mix-shelf>p{margin:0}
#screen-home button.mix-tile{flex:0 0 112px;width:112px;min-height:0;display:block;padding:0;margin:0;text-align:left;scroll-snap-align:start;
  background:none;border:0;border-radius:0;box-shadow:none;color:var(--text);font:600 .875rem/1.3 var(--font-body)}
.mix-tile>b{display:block;margin-top:7px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.mix-tile>span:last-child{display:block;font-size:.78rem;font-weight:500;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mix-tile[aria-busy=true]{opacity:.55}
.mix-art{position:relative;display:grid;width:112px;height:112px;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,var(--xg3),var(--bg2));
  box-shadow:0 4px 12px rgba(0,0,0,.5);border:1px solid rgba(var(--glow-rgb),.18)}
.mix-art.quad{grid-template-columns:1fr 1fr}
.mix-art img{width:100%;height:100%;object-fit:cover;display:block;min-width:0;min-height:0}
.mix-art.quad img{aspect-ratio:1}
.mix-art::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 40%),linear-gradient(180deg,transparent 40%,rgba(0,0,0,.72))}
.mix-tile:not(.recent-tile) .mix-art::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(var(--glow-rgb),.16);mix-blend-mode:color;pointer-events:none}
.mix-bar{position:absolute;left:0;right:0;top:0;height:5px;z-index:2;background:var(--xg);box-shadow:0 0 10px var(--xg)}
.mix-lbl{position:absolute;left:8px;right:6px;bottom:6px;z-index:2;color:var(--text-hi);font-weight:700;font-size:.8rem;line-height:1.05;text-transform:uppercase;letter-spacing:.04em;
  text-shadow:0 1px 4px rgba(0,0,0,.85);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mix-new{background:radial-gradient(circle at 35% 30%,var(--btn2),var(--xg3) 55%,var(--bg2))}
/* Replay teaser */
#screen-home button.replay-teaser{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:20px 0 14px;padding:10px 14px;text-align:left;
  border-radius:12px;background:var(--sheen),linear-gradient(90deg,rgba(var(--glow-rgb),.2),rgba(var(--glow-rgb),.04) 60%),var(--panel);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:var(--text)}
.replay-mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-bevel);background:var(--g-face);color:var(--xg);font:700 1rem var(--font-body);
  border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);text-shadow:0 0 8px rgba(var(--glow-rgb),.6)}
.replay-teaser .m b{display:block;font-size:1rem;color:var(--text-hi)}.replay-teaser .m span{display:block;font-size:.8rem;font-weight:500;color:var(--dim)}
/* Win95 shapes in green glass, shared by Search and Library */
.screen button.bevel-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;margin:0;white-space:nowrap;
  font:600 .875rem var(--font-body);color:var(--text);border-radius:var(--r-bevel);background:var(--g-face);
  border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);box-shadow:inset 1px 1px var(--g-mid),inset -1px -1px rgba(0,0,0,.4)}
.screen button.bevel-btn[aria-pressed=true]{color:var(--xg);font-weight:700;background:var(--g-well);border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);
  box-shadow:inset 1px 1px 4px rgba(0,0,0,.6);text-shadow:0 0 6px rgba(var(--glow-rgb),.6)}
.screen button.bevel-btn b{color:var(--xg)}
.w95-win{background:var(--g-face);padding:3px;border-radius:var(--r-bevel);border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);
  box-shadow:inset 1px 1px var(--g-mid),0 0 22px rgba(var(--glow-rgb),.12),0 10px 30px rgba(0,0,0,.55)}
.w95-well{background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);box-shadow:inset 1px 1px 3px rgba(0,0,0,.7);border-radius:2px}
.w95-title{min-height:28px;display:flex;align-items:center;padding:0 8px;border-radius:2px;background:var(--w-title);color:var(--text-hi);font:700 .8rem var(--font-body);letter-spacing:.03em;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.w95-body{padding:12px 10px}.w95-body p{line-height:1.5;margin:0 0 8px}
.w95-status{display:flex;gap:4px;margin-top:4px;font-size:.75rem;color:var(--dim)}
.w95-status span{flex:1;min-width:0;padding:2px 6px;border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w95-status span+span{flex:.7}
/* Search */
.search-win{background:var(--g-face);padding:3px;border-radius:var(--r-bevel);border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);box-shadow:inset 1px 1px var(--g-mid)}
.search-box{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);border-radius:2px;box-shadow:inset 1px 1px 3px rgba(0,0,0,.7)}
.search-box svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--xg);stroke-width:2.4;stroke-linecap:round}
#search-input{flex:1;min-width:0;min-height:44px;padding:0;margin:0;border:0;background:none;box-shadow:none;outline:none;color:var(--text-hi);font:600 16px var(--font-body);-webkit-appearance:none;appearance:none}
#search-input::placeholder{color:var(--dim);font-weight:500}
#search-input::-webkit-search-cancel-button{filter:hue-rotate(60deg)}
.search-win:focus-within{box-shadow:inset 1px 1px var(--g-mid),0 0 0 2px rgba(var(--glow-rgb),.45)}
.search-scope{display:flex;gap:6px;margin:10px 0 4px}
.search-scope .bevel-btn{flex:1;min-width:0}
.search-top{display:flex;gap:14px;align-items:center;margin-top:10px;padding:12px;border-radius:14px;background:var(--glass),var(--card1);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 20px rgba(var(--glow-rgb),.08)}
.top-art{width:72px;height:72px;flex:none;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.top-art.round{border-radius:50%}
.search-top .m{flex:1;min-width:0}
.search-top b{display:block;font-size:1.19rem;font-weight:700;color:var(--text-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-top .m span{display:block;font-size:.8rem;color:var(--dim);line-height:1.4}
#screen-search button.top-play{flex:none;width:52px;height:44px;min-width:44px;padding:0;border-radius:var(--r-lozenge);font-size:1rem}
#screen-search .ask-blade{margin-top:10px}
#search-results .shelf-head{margin:18px 0 6px}
#search-results .shelf-head h3,#search-empty .shelf-head h3{font-size:1.06rem}
.search-row{align-items:center;padding:8px 0}
.search-row .s-art{width:46px;height:46px}
.search-row .track-main{flex:1;min-width:0}
.search-row .track-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* one line under the title: the artists and their pill first (the artists shorten, the pill stays whole); the
   play count shows whole or wraps to a second line that is cut off, never a "·." stub */
.search-row .track-artist{font-size:.82rem;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;row-gap:0;max-height:22px;white-space:nowrap;overflow:hidden;overflow-wrap:normal}
.search-row .s-who{display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;overflow:hidden}
.search-row .s-who>.by,.search-row .track-artist>.dim{line-height:22px}
.search-row .s-who>.by{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.search-row .track-artist>.dim{flex:none}
/* Spotify rows: the artists give way to the library tag after them only down to ~12 characters; past that the tag drops out of view */
.search-row .track-artist.sp>.s-who{flex:1 1 5.5em;max-width:max-content}
.search-row .pill{margin-left:0;flex:none}
#screen-search .search-row button{flex:none;min-height:44px;min-width:44px;margin:0}
#screen-search .search-row button.search-like{border-radius:var(--r-lozenge);padding:0 14px;background:var(--sheen),rgba(var(--glow-rgb),.1);border:1px solid var(--glass-edge);color:var(--text);box-shadow:none}
#screen-search .search-row button.search-play{padding:0;border-radius:50%;width:44px;font-size:.9rem;color:var(--xg);background:var(--sheen),rgba(var(--glow-rgb),.12);border:1px solid var(--glass-edge);box-shadow:none}
#search-go-spotify{width:100%}
.recent-chips{display:flex;flex-wrap:wrap;gap:8px}
.genre-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#screen-search button.genre-tile{position:relative;display:block;height:84px;padding:0;margin:0;overflow:hidden;border-radius:10px;border:1px solid rgba(var(--glow-rgb),.2);background:var(--panel);box-shadow:0 4px 12px rgba(0,0,0,.45)}
.genre-tile img{position:absolute;right:-12px;bottom:-10px;width:72px;height:72px;object-fit:cover;transform:rotate(18deg);border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.genre-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--glow-rgb),.32),rgba(0,0,0,.2) 70%)}
.genre-tile span{position:absolute;left:10px;top:9px;right:56px;z-index:1;text-align:left;font:700 .95rem/1.15 var(--font-body);color:var(--text-hi);text-shadow:0 1px 4px rgba(0,0,0,.8)}
/* tiles below the fold skip layout until scrolled near, so the first Search tap lays out only those on screen
   (each is a fixed 84 px and already clips its art, so nothing moves or looks different) */
#search-genres>.genre-tile{content-visibility:auto;contain-intrinsic-size:auto 84px}
#search-empty>.ask-blade{margin-top:16px}
/* Library */
#screen-librarytab .lib-chips,#screen-podcasts .lib-chips{margin-right:-12px;padding-right:12px;-webkit-mask:linear-gradient(90deg,#000 82%,transparent);mask:linear-gradient(90deg,#000 82%,transparent)}
.chip-n{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;background:var(--warn);color:var(--bg2);font:700 .75rem/1.5 var(--font-body)}
#screen-librarytab button.lib-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:5px 0;margin:0;text-align:left;
  background:none;border:0;border-radius:0;box-shadow:none;color:var(--text);font:400 1rem var(--font-body)}
.lib-row .m{flex:1;min-width:0}.lib-row .m b{display:block;font-size:1rem;font-weight:700;color:var(--text-hi)}
.lib-row .m>span{display:block;font-size:.82rem;color:var(--dim)}
.lib-art{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.lib-art svg{width:26px;height:26px}
.liked-art{background:linear-gradient(135deg,var(--btn1),var(--xg2) 45%,var(--xg3))}
.liked-art svg{fill:var(--text-hi);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.recent-art{background:linear-gradient(135deg,var(--btn2),var(--xg3) 60%,var(--bg2))}
.recent-art svg{fill:none;stroke:var(--text-hi);stroke-width:2.2;stroke-linecap:round}
.lib-folders{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}
#screen-librarytab button.lib-folder{display:flex;gap:10px;align-items:center;min-height:56px;padding:0 12px;margin:0;text-align:left;border-radius:10px;
  background:var(--sheen),rgba(var(--glow-rgb),.1);border:1px solid rgba(var(--glow-rgb),.18);box-shadow:none;color:var(--text);font:400 .9rem var(--font-body)}
#screen-librarytab button.lib-folder[aria-pressed=true]{border-color:var(--xg);box-shadow:0 0 12px rgba(var(--glow-rgb),.35)}
.lib-folder .m b{display:block;font-size:.92rem;font-weight:700;color:var(--text-hi)}.lib-folder .m span{font-size:.78rem;color:var(--dim)}
.w95-folder{width:26px;height:20px;flex:none;position:relative;margin-top:5px;background:linear-gradient(180deg,var(--btn1),var(--xg2) 60%,var(--xg3));border:1px solid var(--bg2);box-shadow:0 0 8px rgba(var(--glow-rgb),.35)}
.w95-folder::before{content:"";position:absolute;left:-1px;top:-6px;width:12px;height:6px;background:var(--btn2);border:1px solid var(--bg2);border-bottom:0}
.lib-tools{display:flex;justify-content:space-between;gap:6px;padding:3px 3px 6px}
.lib-tools .bevel-btn{font-size:.8rem;padding:0 10px}
.vtog{display:flex}.screen .vtog .bevel-btn{border-radius:0}.screen .vtog .bevel-btn:first-child{border-radius:var(--r-bevel) 0 0 var(--r-bevel)}.screen .vtog .bevel-btn:last-child{border-radius:0 var(--r-bevel) var(--r-bevel) 0}
.lib-hd,#screen-librarytab button.lib-xrow{display:grid;grid-template-columns:minmax(0,1fr) 58px 62px;align-items:center}
.lib-hd span{padding:3px 6px;font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--xg);background:var(--panel2);border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi)}
#screen-librarytab button.lib-xrow{width:100%;min-height:44px;padding:3px 0;margin:0;text-align:left;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--text);font:400 .85rem var(--font-body);font-variant-numeric:tabular-nums}
#screen-librarytab button.lib-xrow>span{padding:0 6px;min-width:0}
.lib-xrow .nm{display:flex;align-items:center;gap:8px;font-weight:600}
.lib-xrow .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-xrow img{width:34px;height:34px;flex:none;object-fit:cover;border-radius:2px}
#screen-librarytab button.lib-xrow.sel{background:linear-gradient(90deg,rgba(var(--glow-rgb),.9),rgba(var(--glow-rgb),.6));color:var(--btn-text);font-weight:700;outline:1px dotted var(--pale);outline-offset:-2px}
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px}
#screen-librarytab .lib-grid .playlist-cover{min-height:0;font-size:.8rem;border:0;background:none;box-shadow:none;padding:0;margin:0;color:var(--text)}
.lib-note{margin:4px 0 10px;line-height:1.5}.lib-note button{margin-left:6px}
/* virtual lists (VList): one fixed row height, a few recycled rows moved with transforms */
.vlist{position:relative;contain:strict;overflow-anchor:none}
.vlist>.vrow{position:absolute;left:0;right:0;top:0;box-sizing:border-box;margin:0;padding:0;align-items:center;contain:layout style;border-bottom:1px solid var(--edge2)}
.vlist>.vrow[hidden],.vrow [hidden]{display:none}
.vrow .track-name,.vrow .track-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.vrow div.track-name{display:flex;align-items:center;gap:6px}.vrow .track-name>.nm{min-width:0;overflow:hidden;text-overflow:ellipsis}.vrow .track-name>.pill{flex:none}
.vrow a.track-name,.playlist-song-list .vrow div.track-name{display:block}
.vrow .s-art,.search-row .s-art{display:block;background:var(--panel2)}
/* Replay.exe: green-glass window, property-sheet year tabs, block bars */
.rp-win{margin-top:4px}
.rp-years{display:flex;gap:2px;padding:4px 4px 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;position:relative;z-index:1;margin-bottom:-1px}
.rp-years::-webkit-scrollbar{display:none}
#screen-librarytab .rp-years button{flex:none;min-height:40px;min-width:56px;padding:6px 10px 4px;margin:4px 0 0;font:600 .8rem var(--font-body);color:var(--dim);background:var(--panel);
  border:1px solid;border-bottom:0;border-color:var(--g-hi) var(--g-sh) transparent var(--g-hi);border-radius:4px 4px 0 0;box-shadow:none}
#screen-librarytab .rp-years button[aria-selected=true]{margin-top:0;padding-bottom:8px;color:var(--xg);background:var(--panel2);box-shadow:inset 0 2px 0 var(--xg)}
.rp-body{min-height:240px;padding:12px 10px;background:linear-gradient(180deg,rgba(var(--glow-rgb),.08),transparent 140px),var(--panel2);
  border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);transition:opacity .2s}
.rp-body[aria-busy=true]{opacity:.55}
.rp-sec{margin:0 0 18px;padding-top:12px;border-top:1px solid var(--g-sh);box-shadow:inset 0 1px 0 rgba(var(--glow-rgb),.18)}
.rp-head{border-top:0;box-shadow:none;padding-top:0}
.rp-sec h4{margin:0 0 8px;font:700 .78rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--xg);text-shadow:0 0 8px rgba(var(--glow-rgb),.4)}
.rp-sec h5{margin:14px 0 4px;font:700 .82rem var(--font-body);color:var(--text-hi)}
.rp-sec p{line-height:1.5;margin:0 0 6px}
.rp-part{margin:24px 0 12px;padding:6px 8px;font:700 .9rem var(--font-body);letter-spacing:.06em;color:var(--text-hi);background:var(--w-title);border-radius:2px;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.rp-k{font:600 .78rem var(--font-body);letter-spacing:.06em;color:var(--dim)}
.rp-big{font:700 2.6rem/1.05 var(--font-body);color:var(--text-hi);text-shadow:0 0 16px rgba(var(--glow-rgb),.5);font-variant-numeric:tabular-nums}
.rp-big small{font-size:.9rem;color:var(--dim);font-weight:600}
.rp-trough{position:relative;display:block;height:12px;margin:4px 0 2px;padding:2px;background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);border-radius:2px}
.rp-trough i{display:block;height:100%;background:var(--block)}
.rp-trough.big{height:18px;margin:10px 0 6px}
.rp-trough u{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--warn);box-shadow:0 0 6px var(--warn)}
#screen-librarytab button.rp-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:52px;padding:4px 2px;margin:0;text-align:left;
  border:0;border-radius:0;background:none;box-shadow:none;color:var(--text);font:400 .85rem var(--font-body)}
#screen-librarytab button.rp-row:active{background:rgba(var(--glow-rgb),.12)}
.rp-row .rp-n{font-weight:700;color:var(--xg);text-align:right;font-variant-numeric:tabular-nums}
.rp-row .rp-m{min-width:0}
.rp-row .rp-m b{display:block;font-weight:600;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-row .rp-m>span:not(.rp-trough){display:block;font-size:.75rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-row .rp-trough{height:9px;margin-top:3px}
.rp-row .rp-v{text-align:right;font-weight:700;color:var(--text-hi);font-variant-numeric:tabular-nums}
.rp-v small,.rp-grid3 small,.rp-grow small{display:block;font-size:.75rem;font-weight:500;color:var(--dim)}
#screen-librarytab .rp-more,#screen-librarytab .rp-all{width:100%;margin:6px 0 0}
.rp-cols{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;align-items:end;height:90px;margin-top:6px;padding:4px;background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh)}
.rp-cols.rp-12{grid-template-columns:repeat(12,1fr);gap:4px}
.rp-cols i{display:block;min-height:2px;background:repeating-linear-gradient(0deg,var(--xg) 0 4px,transparent 4px 6px)}
.rp-axis{display:grid;grid-template-columns:repeat(4,1fr);padding:2px 4px 0;font-size:.75rem;color:var(--dim)}
.rp-axis.rp-12{grid-template-columns:repeat(12,1fr);text-align:center}
.rp-heat,.rp-chart{display:block;width:100%;margin-top:10px}
.rp-stat{display:flex;align-items:baseline;gap:10px}.rp-stat b{font:700 1.8rem var(--font-body);color:var(--text-hi)}.rp-stat span{font-size:.82rem;color:var(--dim)}
.rp-table{width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}
.rp-table th,.rp-table td{padding:6px 4px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(var(--glow-rgb),.12)}
.rp-table thead th{font-size:.75rem;letter-spacing:.06em;color:var(--xg)}
.rp-table tbody th{font-weight:500;color:var(--dim);width:38%}
.rp-table td{color:var(--text-hi);font-weight:600}
.rp-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.rp-grid3>div{padding:8px 4px;text-align:center;font-size:.75rem;color:var(--text-sec);background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);border-radius:2px}
.rp-grid3 b{display:block;font:700 1.15rem var(--font-body);color:var(--xg);text-shadow:0 0 8px rgba(var(--glow-rgb),.45)}
.rp-keep{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end;height:120px;padding:4px;background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh)}
.rp-keep span{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center;font-size:.75rem}
.rp-keep i{display:block;min-height:2px;background:repeating-linear-gradient(0deg,var(--xg) 0 4px,transparent 4px 6px)}
.rp-keep b{color:var(--text-hi);margin-top:2px}.rp-keep small{color:var(--dim)}
.rp-grow{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) 3.6em;gap:8px;align-items:center;min-height:34px;font-size:.82rem}
.rp-grow b{font-weight:600;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-grow>span:last-child{text-align:right;font-weight:700;color:var(--text-hi)}
.rp-legend{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 6px;font-size:.75rem;color:var(--dim)}
.rp-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:1px}
.rp-legend .c1::before{background:var(--xg)}.rp-legend .c2::before{background:var(--info)}.rp-legend .c3::before{background:rgba(var(--glow-rgb),.25)}
.rp-skel{display:block;height:44px;margin:0 0 10px;border-radius:3px;background:linear-gradient(90deg,rgba(var(--glow-rgb),.06),rgba(var(--glow-rgb),.16),rgba(var(--glow-rgb),.06));background-size:200% 100%;animation:rpShimmer 1.2s linear infinite}
@keyframes rpShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.rp-empty{padding:8px 4px}.rp-empty p{line-height:1.5;margin:0 0 10px}
.rp-tbar{display:block;height:7px;margin-top:6px;padding:1px;background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh)}
.rp-tbar i{display:block;height:100%;background:var(--block)}
@media(prefers-reduced-motion:reduce){.rp-skel{animation:none}.rp-body{transition:none}}
/* Podcasts get show art */
.podcast-show{display:flex;gap:12px;align-items:flex-start}.pod-main{flex:1;min-width:0}
.pod-art{width:56px;height:56px;flex:none;object-fit:cover;border-radius:8px;border:1px solid var(--edge2)}
.pod-art.big{width:72px;height:72px}
.pod-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}.pod-head h3{margin:0}
.pod-ep-art{width:36px;height:36px;object-fit:cover;border-radius:4px;vertical-align:middle;margin-right:8px}
@media(max-width:360px){.mix-tile,#screen-home button.mix-tile{flex-basis:100px;width:100px}.mix-art{width:100px;height:100px}}
/* Now Playing: a full-screen sheet over the app's own background */
#np-sheet{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--text);overflow:hidden;
  background:radial-gradient(480px 480px at 50% 22%,rgba(var(--glow-rgb),.18),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.86) 58%),var(--bg2);
  will-change:transform;border-radius:0;box-shadow:0 -10px 40px rgba(0,0,0,.6);overscroll-behavior:contain}
#np-sheet button:focus:not(:focus-visible){outline:none}
#np-sheet::backdrop{background:rgba(0,0,0,.6);opacity:var(--np-shade,1)}

.np-body:focus{outline:none}
.np-body{height:100%;overflow-y:auto;overscroll-behavior:contain;max-width:480px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 4px) 20px calc(env(safe-area-inset-bottom) + 16px)}
.np-drag{touch-action:none;cursor:grab}
.np-grab{display:block;width:40px;height:5px;border-radius:3px;background:rgba(var(--glow-rgb),.4);margin:6px auto 8px}
.np-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.np-from{flex:1;min-width:0;text-align:center;font-size:.75rem;letter-spacing:.12em;color:var(--dim);font-weight:600}
.np-from b{display:block;color:var(--text);font-size:.88rem;letter-spacing:.01em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#np-sheet button.np-ib{width:44px;height:44px;min-width:44px;padding:0;display:grid;place-items:center;flex:none;border-radius:50%;
  background:none;border:0;box-shadow:none;color:var(--text);position:relative}
span.np-ib{width:44px;height:44px;flex:none}
.np-ib svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.np-ib svg.fill{fill:currentColor;stroke:none;width:30px;height:30px}
#np-sheet button.np-ib[aria-pressed=false]{color:var(--dim)}
#np-sheet button.np-ib[aria-pressed=true]{color:var(--xg);filter:drop-shadow(0 0 5px rgba(var(--glow-rgb),.7))}
.np-r1{position:absolute;top:7px;right:5px;font-size:.62rem;font-weight:700;color:var(--xg)}
#np-art{display:block;width:min(72vw,300px,38vh);width:min(72vw,300px,38svh);aspect-ratio:1;height:auto;object-fit:cover;margin:12px auto 18px;border-radius:12px;background:var(--panel2);
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 40px rgba(var(--glow-rgb),.3)}
.np-meta{display:flex;align-items:center;gap:8px}
.np-m{flex:1;min-width:0}
#np-title{margin:0;padding:0;font:700 1.45rem/1.15 var(--font-body);letter-spacing:.005em;text-transform:none;font-style:normal;transform:none;
  color:var(--head-text);background:none;-webkit-text-fill-color:currentColor;text-shadow:0 0 10px rgba(var(--glow-rgb),.35);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-m p{margin-top:2px;font-size:1rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-sorted{display:inline-block;margin-left:4px;vertical-align:2px;font-size:.75rem;font-weight:600;color:var(--xg);border:1px solid var(--glass-edge);border-radius:4px;padding:1px 8px;background:rgba(var(--glow-rgb),.08)}
.np-sorted.un{color:var(--warn);border-color:var(--warn);background:none}
#np-sheet button.np-rb{width:44px;height:44px;min-width:44px;padding:0;flex:none;display:grid;place-items:center;border-radius:50%;
  background:rgba(var(--glow-rgb),.12);border:1px solid var(--glass-edge);box-shadow:none;color:var(--text)}
.np-rb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#np-like[aria-pressed=true] svg{fill:var(--xg);stroke:var(--xg);filter:drop-shadow(0 0 5px var(--xg))}
.np-seek{margin-top:16px;height:16px;padding:2px;background:rgba(0,0,0,.5);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);cursor:pointer;touch-action:none}
.np-seek{overflow:visible;position:relative}
.np-seek>i{overflow:hidden}
.np-seek::after{content:'';position:absolute;left:0;right:0;top:-16px;bottom:-16px}   /* a finger-sized grab area */
.np-seek.scrubbing{transform:scaleY(1.35);transition:transform .12s}
.np-seek i{display:block;height:100%;width:100%;background:var(--block);transform-origin:0 50%;transform:scaleX(0);will-change:transform;filter:drop-shadow(0 0 3px rgba(var(--glow-rgb),.7))}
.np-times{display:flex;justify-content:space-between;margin-top:5px;font:600 .75rem var(--font-body);font-variant-numeric:tabular-nums;color:var(--dim)}
.np-transport{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
#np-sheet button.np-play{width:72px;height:72px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--btn1);
  background:radial-gradient(circle at 40% 30%,var(--btn1),var(--btn2) 30%,var(--btn3) 65%,var(--bg2));box-shadow:0 0 24px rgba(var(--glow-rgb),.6),inset 0 -5px 10px rgba(0,0,0,.45)}
.np-play svg{width:28px;height:28px;fill:var(--btn-text)}
.np-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}
#np-sheet button.np-ghost{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:60%;padding:0 14px;border-radius:var(--r-lozenge);
  font:600 .85rem var(--font-body);color:var(--text);background:var(--sheen),rgba(var(--glow-rgb),.1);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.np-ghost span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-ghost svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--xg);stroke-width:2}
.np-win{background:var(--g-face);padding:3px;border-radius:var(--r-bevel);border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);
  box-shadow:inset 1px 1px var(--g-mid),0 0 22px rgba(var(--glow-rgb),.12),0 10px 30px rgba(0,0,0,.55)}
.np-tb{display:flex;align-items:center;gap:4px;min-height:28px;padding:0 3px 0 8px;border-radius:2px;background:var(--w-title);color:var(--text-hi);
  font:700 .8rem var(--font-body);letter-spacing:.03em;text-shadow:0 1px 2px rgba(0,0,0,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.np-tbt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#np-sheet button.np-x{position:relative;width:26px;height:22px;min-width:26px;min-height:22px;padding:0;display:grid;place-items:center;font:700 .75rem/1 var(--font-body);
  color:var(--btn-text);border-radius:3px;background:var(--jewel);border:1px solid;border-color:var(--btn1) var(--g-sh) var(--g-sh) var(--btn1);box-shadow:none}
#np-sheet button.np-x::after{content:"";position:absolute;inset:-11px -9px}
.np-ptabs{display:flex;gap:2px;padding:4px 0 0 4px;position:relative;z-index:1;margin-bottom:-1px}
#np-sheet .np-ptabs button{position:relative;min-height:36px;padding:5px 12px 4px;margin-top:3px;font:600 .8rem var(--font-body);color:var(--dim);background:var(--panel);
  border:1px solid;border-bottom:0;border-color:var(--g-hi) var(--g-sh) transparent var(--g-hi);border-radius:4px 4px 0 0;box-shadow:none}
#np-sheet .np-ptabs button::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:0}   /* drawn 36 px, tapped at 44 */
#np-sheet .np-ptabs button[aria-selected=true]{margin-top:0;padding-bottom:6px;color:var(--xg);background:var(--panel2);box-shadow:inset 0 2px 0 var(--xg)}
.np-pane{border:1px solid;border-color:var(--g-hi) var(--g-sh) var(--g-sh) var(--g-hi);padding:6px;background:rgba(var(--glow-rgb),.08);min-height:72px}
.np-hist{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.np-hist div{padding:6px 2px;text-align:center;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--text-sec);
  background:var(--g-well);border:1px solid;border-color:var(--g-sh) var(--g-hi) var(--g-hi) var(--g-sh);box-shadow:inset 1px 1px 3px rgba(0,0,0,.7);border-radius:2px}
.np-hist b{display:block;font:700 1rem var(--font-body);color:var(--xg);text-shadow:0 0 8px rgba(var(--glow-rgb),.45);margin-bottom:1px}
.np-note{font-size:.78rem;color:var(--dim);margin-top:6px}
.np-q{display:flex;align-items:center;gap:8px;padding:4px;font-size:.82rem}
#np-sheet button.np-q{width:100%;min-height:44px;margin:0;text-align:left;background:none;border:0;border-radius:4px;box-shadow:none;color:var(--text);font:400 .82rem var(--font-body);letter-spacing:normal}
#np-sheet button.np-q:active{background:rgba(var(--glow-rgb),.16)}
.np-q img{width:32px;height:32px;border-radius:2px;object-fit:cover;flex:none;background:var(--panel2)}
.np-q div{flex:1;min-width:0}
.np-q b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-q span{display:block;color:var(--dim);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-qh{font-size:.72rem;letter-spacing:.1em;color:var(--dim);font-weight:700;padding:4px 4px 2px}
#np-info.folded #np-info-pane{display:none}
#np-info.np-later{display:none}   /* the first frame of an open, while the sheet is parked below the screen (openNowPlaying) */
/* a finger on the bar brightens it instead of growing it */
@media(prefers-reduced-motion:reduce){
  .np-seek.scrubbing{transform:none;transition:none;border-color:var(--xg)}
}
/* the status bar never shows the sheet's content scrolling under it: at the top the sheet's glow runs
   under the clock (as in Spotify and Apple Music); once its content scrolls, a dark strip comes in */
#np-sheet::before{content:"";position:absolute;top:0;left:0;right:0;z-index:2;height:calc(env(safe-area-inset-top) + 10px);pointer-events:none;
  background:linear-gradient(var(--bg2) calc(100% - 10px),rgba(0,0,0,0));opacity:0;transition:opacity .2s}
#np-sheet.scrolled::before{opacity:1}
@media(prefers-reduced-motion:reduce){#np-sheet::before{transition:none}}
/* phone on its side (a car mount): art on the left, title, seek and the controls on the right, all on one screen */
@media (orientation:landscape) and (max-height:500px){
  .np-body{max-width:none;display:grid;grid-template-columns:min(62svh,260px) minmax(0,1fr);column-gap:28px;align-content:start}
  .np-drag,#np-info{grid-column:1/-1}
  #np-art{grid-column:1;grid-row:2/span 5;width:100%;margin:0;align-self:center}
  .np-meta,.np-seek,.np-times,.np-transport,.np-row{grid-column:2}
  #np-info{margin-top:12px}
  /* tabs and the mini player give the content back its height: icon and label side by side */
  #tabbar button{flex-direction:row;min-height:40px;gap:6px;padding:2px 0}
  #tabbar .tab-spark .spark-dot{width:24px;height:24px}
  #tabbar button.active::after{top:auto;bottom:2px}
  #nowbar{padding-top:4px;padding-bottom:4px}
}
@media(prefers-reduced-motion:reduce){
  .progress-outer.indeterminate .progress-inner{animation:none}
  button.wide{animation:none!important}
  .spark-halo{animation:none}
  .spark-dot{animation-duration:12s}
  .spin{animation-duration:2.4s}
  summary::before,.progress-inner{transition:none}
}
/* ---- Installed iPhone app: native-feeling chrome, notch in landscape, keyboard ---- */
html{overscroll-behavior:none}   /* the page no longer rubber-bands the header and taskbar */
button,summary,#tabbar,#nowbar,.app-header,.np-top,.seg,.lib-hd,img,
#np-sheet,#triage .t-card,.track-row,.search-top,.rp-win,.shelf-head{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* a hold on a Jump back in tile opens the song menu, never iOS's Save/Copy image callout */
#home-recent .mix-tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}   /* typing and editing always work */
#tabbar{padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right))}
.np-body{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
/* while typing, the keyboard owns the bottom of the screen */
body.kb-open #tabbar,body.kb-open #nowbar{display:none!important}
/* touch: no double-tap zoom delay anywhere, and an instant press state on everything tappable */
a,summary,label,select,input,[role=button],.track-row,.mix-tile,.lib-row,.lib-xrow,.playlist-cover,.blade{touch-action:manipulation}
button:not(:disabled):active,.blade:active,.mix-tile:active,.playlist-cover:active,a.tap-link:active{opacity:.72;transition:none}
#tabbar button:active,#nowbar button:active{opacity:.6}
.track-row[data-tid]:active,.lib-xrow:active,.vlist>.vrow.track-row:active{background:rgba(var(--glow-rgb),.1)}
/* song rows play when tapped anywhere (Liked Songs, Search, a playlist's songs) */
.vlist>.vrow.track-row,.search-row{cursor:pointer}
/* long review lists: rows off screen skip layout and paint until scrolled near */
#proposals-container .track-row,#notsure-container .track-row,#backfill-container .track-row,#hiergap-container .track-row{content-visibility:auto;contain-intrinsic-size:auto 150px}
/* How sorting works: one card per playlist (~40, ~300 px each); the first frame lays out only those on screen.
   sizeSystemCards() sets each card's own estimate from its text; this one (the median phone card) is the fallback */
#system-container>.card{content-visibility:auto;contain-intrinsic-size:auto 277px}
/* artwork sits on a solid tile while it loads, so nothing flashes or shifts */
#nb-art,#np-art{transition:opacity .18s ease-out}
#nb-art.art-swap,#np-art.art-swap{opacity:.35;transition:none}
@media(prefers-reduced-motion:reduce){#nb-art,#np-art{transition:none}#nb-art.art-swap,#np-art.art-swap{opacity:1}}
.s-art,#nb-art,#np-art,.mix-art img,.playlist-cover img,.pl-cover,.chip-cover,.np-q img,.top-art,.lib-xrow img,.pod-art,.pod-ep-art,.genre-tile img{background-color:var(--panel2)}
/* loading placeholders (Spotify-style grey shapes) — they pulse with opacity only */
.skel{background:rgba(var(--glow-rgb),.12);border-radius:6px;animation:skelPulse 1.1s ease-in-out infinite alternate}
.skel-line{display:block;height:11px;width:88%;margin-top:9px}.skel-line.short{width:58%;margin-top:6px}
.skel-tile{flex:0 0 112px;width:112px;display:block}.skel-tile .mix-art{background:rgba(var(--glow-rgb),.12)}
.skel-row{display:flex;gap:10px;align-items:center;padding:10px 0}.skel-row .skel-art{width:46px;height:46px;flex:none}
.skel-row .skel-text{flex:1}
.genre-skel{display:block;height:84px;border-radius:10px}
.load-fail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.load-fail p{margin:0;flex:1 1 12em}
.vrow.pending .track-name::before,.vrow.pending .track-artist::before{content:'';display:block;height:11px;width:62%;border-radius:6px;background:rgba(var(--glow-rgb),.12)}
.vrow.pending .track-artist::before{width:40%;margin-top:6px}
@keyframes skelPulse{from{opacity:.45}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}
/* "Offline" sits on the kicker line, left of the gear, out of the flow: the greeting keeps its width and nothing below moves */
.offline-pill{position:absolute;z-index:2;top:calc(10px + env(safe-area-inset-top));right:calc(max(14px,env(safe-area-inset-right)) + 52px);
  padding:0 8px;border:1px solid var(--warn);border-radius:var(--r-bevel);color:var(--warn);background:var(--bg2);font:600 .75rem/17px var(--font-body);letter-spacing:.04em}
body.is-offline .app-kicker{padding-right:62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* no kicker on this screen: the pill sits on the large title's line, so a long title ("How sorting works") ends (…) before it */
body.is-offline .app-kicker[hidden] + #app-title{padding-right:68px}
.update-toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;display:flex;align-items:center;
  min-height:48px;padding:0 0 0 4px;border-radius:12px;background:var(--w-tip);border:1px solid var(--g-hi);color:var(--text);font:600 .85rem var(--font-body);
  box-shadow:0 0 20px rgba(var(--glow-rgb),.25),0 6px 20px rgba(0,0,0,.6);animation:toastIn .25s ease-out;transition:opacity .2s,transform .2s}
.update-toast button{min-height:44px;padding:6px 8px 6px 14px;background:none;border:0;border-radius:10px;box-shadow:none;color:inherit;font:inherit;white-space:nowrap;overflow-wrap:normal}
.update-toast .ut-apply{display:flex;flex-direction:column;align-items:center;gap:1px}
.update-toast .ut-close{min-width:44px;padding:0;font-size:1.15rem;line-height:1;color:var(--dim)}
.update-toast b{color:var(--xg);font-size:.9rem}.update-toast span{font-size:.75rem;color:var(--dim)}
.update-toast.out{opacity:0;transform:translate(-50%,12px)}
body:has(#triage.open) .update-toast{display:none}
/* the update folded away: a small dot on the gear until it is applied */
body.update-ready #btn-settings{position:relative}
body.update-ready #btn-settings::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--xg);box-shadow:0 0 6px var(--xg)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}}
@media(prefers-reduced-motion:reduce){.update-toast{animation:none;transition:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-live{top:0;left:0;pointer-events:none}   /* a sheet's own live region: pinned to its corner, never adds scroll height */
/* once the page scrolls, a dark strip sits behind the clock and the Dynamic Island (the app's own background shows at the top) */
#sb-scrim{position:fixed;top:0;left:0;right:0;z-index:55;height:calc(env(safe-area-inset-top) + 12px);pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(var(--bg2) calc(100% - 12px),rgba(0,0,0,0))}
body.scrolled #sb-scrim{opacity:1}
@media(prefers-reduced-motion:reduce){#sb-scrim{transition:none}}
/* Liked Songs: Play and Shuffle under the search box */
.lib-play-row{display:flex;gap:8px;margin-top:10px}.lib-play-row button{flex:1;margin:0}
/* the song menu (hold a song, or right-click): a small sheet of blades */
@media(min-width:601px){#song-menu{width:min(440px,calc(100vw - 24px))}}
.song-menu-head{display:flex;gap:12px;align-items:center;margin:2px 0 12px}
.song-menu-head img{width:52px;height:52px;flex:none;object-fit:cover;border-radius:6px;background:var(--panel2)}
.song-menu-head span{min-width:0;font-size:.85rem;color:var(--dim);overflow-wrap:anywhere}
.song-menu-acts{display:grid;gap:8px}
#song-menu .blade{font-family:var(--font-body);font-size:.94rem;text-decoration:none}
#song-menu .blade[hidden]{display:none}
/* ••• at the end of a song row (Search, Liked Songs, a playlist) opens the same menu: a plain glyph, as in Spotify */
.track-row button.song-more,#screen-search .search-row button.song-more{flex:none;width:44px;min-width:44px;min-height:44px;padding:0;margin:0 0 0 -6px;
  background:none;border:0;border-radius:50%;box-shadow:none;color:var(--dim);font:700 .78rem/1 var(--font-body);letter-spacing:1px;text-shadow:none}
.track-row button.song-more:disabled{opacity:.25}
/* Organize: filters, Your playlists, the kind sheet */
.org-filters{display:flex;gap:6px;margin:10px -4px 0;padding:0 4px 4px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
.org-filters::-webkit-scrollbar{display:none}
.org-filters .chip-n{background:rgba(var(--glow-rgb),.22);color:inherit}
button.dest-chip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
button.dest-off{opacity:.8;border-style:dashed}
.blade.org-pl{min-height:48px;margin:4px 0;padding:6px 12px}.blade.org-pl.sub{margin-left:20px;width:calc(100% - 20px)}
.pl-kind-opts{display:grid;gap:6px;margin:6px 0 10px}
.pl-kind-opts .blade[aria-pressed=true]{border-color:var(--bright);box-shadow:0 0 0 2px rgba(var(--glow-rgb),.55)}
#pl-kind-parent-row{margin:0 0 8px}

/* ================================================================
   One style: neon glass (v41). The Windows 95 shapes are gone: no light-top / dark-bottom bevels,
   no title bars or status bars, no folder icons, no block progress bars, no balloon tails on notes.
   The tokens below keep their names (every rule that used them now draws glass), and the few
   components built as Windows 95 parts are restyled after them.
   ================================================================ */
:root{
  --g-face:var(--sheen),rgba(var(--glow-rgb),.1);
  --g-hi:rgba(var(--glow-rgb),.24); --g-sh:rgba(var(--glow-rgb),.24); --g-mid:transparent;
  --g-well:rgba(0,0,0,.32);
  --w-title:linear-gradient(180deg,rgba(var(--glow-rgb),.16),rgba(var(--glow-rgb),.04));
  --w-tip:var(--glass),rgba(6,12,6,.94);
  --r-bevel:12px;
  --block:linear-gradient(90deg,var(--xg3),var(--xg2) 55%,var(--xg));
}
/* buttons: glass with a thin glow edge; pressed lights up instead of sinking in */
button.secondary,.screen button.bevel-btn{box-shadow:none}
button.secondary:active:not(:disabled),button.secondary[aria-pressed=true],button.secondary[aria-current=page],
.screen button.bevel-btn[aria-pressed=true]{background:rgba(var(--glow-rgb),.18);border-color:var(--xg2);color:var(--xg);
  box-shadow:0 0 12px rgba(var(--glow-rgb),.3);text-shadow:0 0 6px rgba(var(--glow-rgb),.5)}
/* the tab bar: plain tabs, the active one glows (no raised and sunken frames) */
#tabbar button{border-color:transparent;border-radius:14px}
#tabbar button.active{border-color:transparent;background:rgba(var(--glow-rgb),.1);box-shadow:none}
#tabbar{border-top-color:var(--glass-edge)}
/* fields and bars */
select,input[type=text],input[type=password]{border-radius:12px}
.progress-outer{border-radius:999px;padding:0;height:8px;border-color:var(--glass-edge)}
.progress-inner{border-radius:999px}
.seg{border-radius:12px}
/* notes: a glass card, no balloon tail */
.toast{border-radius:14px}
.toast::before,.toast::after{display:none}
/* the Library explorer: a plain list (no window frame, title bar, column boxes or status bar boxes) */
.w95-win{background:none;padding:0;border:0;box-shadow:none}
.w95-well{background:none;border:0;box-shadow:none;border-radius:0}
.w95-title{background:none;padding:0;color:var(--dim);text-shadow:none}
.w95-status{margin-top:8px}
.w95-status span{border:0;padding:0 2px}
.lib-hd span{background:none;border:0;border-bottom:1px solid var(--glass-edge);color:var(--dim)}
#screen-librarytab button.lib-xrow{border-radius:10px}
#screen-librarytab button.lib-xrow.sel{background:rgba(var(--glow-rgb),.16);color:var(--text-hi);outline:0}
.lib-xrow img{border-radius:6px}
.w95-folder{width:30px;height:30px;margin-top:0;border-radius:9px;border:0;
  background:radial-gradient(circle at 35% 30%,var(--btn2),var(--xg3) 70%);box-shadow:0 0 10px rgba(var(--glow-rgb),.35)}
.w95-folder::before{content:none}
/* Search: a rounded field, no window around it */
.search-win{background:none;padding:0;border:0;box-shadow:none}
.search-box{border-radius:999px;border:1px solid var(--glass-edge);background:rgba(0,0,0,.35);box-shadow:none}
.search-win:focus-within .search-box{border-color:var(--xg2);box-shadow:0 0 0 2px rgba(var(--glow-rgb),.35)}
.search-win:focus-within{box-shadow:none}
/* Replay: rounded wells, smooth bars, section headings without title bars */
.rp-body{border-radius:14px}
.rp-part{background:none;padding:6px 0;border-bottom:1px solid var(--glass-edge);border-radius:0;text-shadow:none;color:var(--xg)}
.rp-sec{border-top-color:var(--glass-edge);box-shadow:none}
.rp-trough,.rp-tbar{border-radius:999px;border-color:var(--glass-edge)}
.rp-trough i,.rp-tbar i{border-radius:999px}
.rp-cols,.rp-keep,.rp-grid3>div{border-radius:10px;border-color:var(--glass-edge)}
.rp-cols i,.rp-keep i{background:linear-gradient(0deg,var(--xg3),var(--xg));border-radius:3px 3px 0 0}
/* Now Playing: a smooth seek line; Track info as a card with plain tabs */
.np-seek{height:6px;padding:0;border-radius:999px;border-color:var(--glass-edge);background:rgba(255,255,255,.12)}
.np-seek i{border-radius:999px}
.np-win{background:var(--glass),rgba(0,0,0,.2);padding:8px;border-radius:16px;border:1px solid var(--glass-edge);box-shadow:none}
.np-tb{background:none;padding:0 0 6px;border-radius:0;text-shadow:none}
.np-pane{border-radius:12px;border-color:var(--glass-edge)}
.np-hist div{border-radius:10px}
.replay-mark{border-radius:12px}
dialog.change-preview{border-color:var(--glass-edge)}
.offline-pill{border-radius:999px}
/* Settings: three groups */
.set-group{margin:26px 4px 10px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--xg);text-shadow:0 0 8px rgba(var(--glow-rgb),.4)}
.set-group:first-of-type{margin-top:12px}
.screen .settings-links button{flex:1 1 0}
.np-x{border-radius:50%}
/* Podcasts: each episode's date, New, and time left */
.pod-ep>summary{display:flex;align-items:center;gap:10px}
.pod-ep-t{flex:1;min-width:0}.pod-ep-t b{display:block;font-weight:600;color:var(--text-hi);overflow-wrap:anywhere}
.pod-ep-meta{display:block;margin-top:2px;font-size:.78rem;font-weight:500;color:var(--dim)}
.pod-new{flex:none}
.btn-ep-play{margin:6px 10px 6px 0}

/* SPARK's goo is drawn by WebGL when it can be (the CSS blur + contrast only fuses the fallback's shapes) */
.spark-orb.gl{filter:none}
/* Now Playing → Lyrics */
.np-lyrics{position:relative;max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain;padding:4px 4px 30vh;-webkit-mask:linear-gradient(180deg,transparent,#000 8%,#000 80%,transparent);mask:linear-gradient(180deg,transparent,#000 8%,#000 80%,transparent)}
.np-lyrics p{margin:0;padding:7px 2px;font:700 1.15rem/1.35 var(--font-body);color:var(--text-sec);opacity:.45;transition:opacity .25s,color .25s,text-shadow .25s}
.np-lyrics p.on{color:var(--text-hi);opacity:1;text-shadow:0 0 14px rgba(var(--glow-rgb),.55)}
.np-lyrics p.plain{opacity:.85;font-weight:600;font-size:1rem}
#np-pane-lyrics .np-note{margin-top:6px}

/* Now Playing: the sleep timer */
.np-sleep-menu{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.np-sleep-menu .chip{min-height:40px;padding:0 12px}
.np-sleep-menu p{flex-basis:100%;margin:4px 0 0}
#np-sleep[aria-pressed=true]{color:var(--xg);border-color:var(--xg2)}
#np-sleep{flex:none;min-width:44px;padding-left:12px;padding-right:12px}#np-sleep-label:not(:empty){margin-left:6px}