/* Design tokens, base element resets, tiny utilities. */

:root{
  --bg:#101010;
  --panel:#1c1c1e;
  --elevated:#2c2c2e;
  --text:#f2f2f2;
  --text-dim:#8e8e93;
  --accent:#fa243c;
  --radius:12px;
  --hairline:rgba(255,255,255,.085);
  --shadow:0 10px 34px rgba(0,0,0,.55);
  --sidebar-w:220px;
  --row-h:44px;
  --pill-w:660px;
  --pill-h:56px;
  --font:-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:13px;line-height:1.35;
  -webkit-font-smoothing:antialiased;overflow:hidden;
  user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
input{font:inherit;color:inherit}
img{-webkit-user-drag:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none !important}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#3a3a3c;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#4a4a4c;background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}

.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;display:block}
.ic.solid{fill:currentColor;stroke:none}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .eq i{height:11px}
}
/* The shell: empty state, sidebar / main split, topbar, scrolling view. */

#empty{
  position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:5;
  background:radial-gradient(1100px 520px at 50% 8%,#211014 0%,var(--bg) 62%);
}
#empty .box{max-width:430px;text-align:center}
#empty .glyph{width:56px;height:56px;margin:0 auto 18px;color:var(--accent)}
#empty h1{font-size:25px;letter-spacing:-.02em;margin:0 0 10px;font-weight:600}
#empty p{color:var(--text-dim);margin:0 0 8px;font-size:12.5px;line-height:1.55}
#empty .btn-primary{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;font-weight:600;font-size:13.5px;
  padding:10px 20px;border-radius:999px;
}
#empty .btn-primary:hover{filter:brightness(1.09)}
#empty .fine{margin-top:16px;font-size:11.5px;color:#6d6d72}

#app{display:flex;height:100vh;width:100vw}
#sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  margin:10px 0 10px 10px;background:var(--panel);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:6;
}
#sidebar.dropping{box-shadow:inset 0 0 0 2px var(--accent)}

#main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#topbar{
  height:52px;flex:0 0 52px;display:flex;align-items:center;gap:14px;
  padding:0 26px 0 22px;
}
#crumb{font-size:19px;font-weight:700;letter-spacing:-.02em}
#topbar .spacer{flex:1}
#view{flex:1;overflow-y:auto;padding:0 26px 118px 22px;scroll-behavior:auto}
/* Reusable widgets: sidebar items, search, player bar, queue, menus,
   error panel, toast, buttons, sliders. */

.wordmark{display:flex;align-items:center;gap:7px;padding:14px 14px 12px;color:var(--accent)}
.wordmark .ic{width:19px;height:19px;stroke-width:1.8}
.wordmark span{font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.nav{padding:0 8px}
.navitem{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:6px 9px;border-radius:7px;color:var(--text);font-size:13px;
}
.navitem .ic{width:16px;height:16px;color:var(--accent)}
.navitem:hover{background:rgba(255,255,255,.055)}
.navitem.active{background:var(--elevated);color:var(--accent)}
.navitem.active .ic{color:var(--accent)}
.sect{
  margin:16px 0 4px;padding:0 17px;font-size:10.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);
  display:flex;align-items:center;justify-content:space-between;
}
.pl-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 8px 8px}
.pl-item{display:flex;align-items:center;gap:9px;width:100%;padding:5px 9px;border-radius:7px;position:relative}
.pl-item:hover{background:rgba(255,255,255,.055)}
.pl-item.active{background:var(--elevated);color:var(--accent)}
.pl-item.dropping{box-shadow:inset 0 0 0 1.5px var(--accent);background:rgba(250,36,60,.12)}
.pl-item .thumb22{width:22px;height:22px;border-radius:4px;overflow:hidden;background:var(--elevated);flex:0 0 22px}
.pl-item .nm{flex:1;min-width:0;font-size:12.5px}
.pl-item .kebab{opacity:0;width:18px;height:18px;display:grid;place-items:center;border-radius:4px;color:var(--text-dim)}
.pl-item:hover .kebab,.pl-item .kebab:focus-visible{opacity:1}
.pl-item .kebab:hover{background:rgba(255,255,255,.1);color:var(--text)}
.pl-new{display:flex;align-items:center;gap:10px;width:100%;padding:6px 9px;border-radius:7px;color:var(--text-dim);font-size:12.5px}
.pl-new:hover{background:rgba(255,255,255,.055);color:var(--text)}
.pl-new .ic{width:16px;height:16px}
.inline-input{
  width:100%;background:#0d0d0e;border:1px solid var(--accent);border-radius:6px;
  padding:5px 8px;font-size:12.5px;color:var(--text);outline:none;
}
.sb-foot{padding:8px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:2px}
.foot-btn{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:7px;color:var(--text-dim);font-size:12px}
.foot-btn:hover{background:rgba(255,255,255,.055);color:var(--text)}
.foot-btn .ic{width:15px;height:15px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:auto;box-shadow:0 0 0 3px rgba(250,36,60,.18)}

#scanchip,#wavechip{
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-dim);
  background:var(--panel);padding:5px 11px;border-radius:999px;
}
.spinner{width:11px;height:11px;border-radius:50%;border:1.6px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.searchbox{display:flex;align-items:center;gap:7px;background:var(--panel);border-radius:8px;padding:0 10px;height:30px;width:238px}
.searchbox .ic{width:14px;height:14px;color:var(--text-dim)}
.searchbox input{background:none;border:0;outline:none;width:100%;font-size:12.5px}
.searchbox input::placeholder{color:var(--text-dim)}
.searchbox:focus-within{box-shadow:0 0 0 1.5px var(--accent)}

.pill-play{
  display:inline-flex;align-items:center;gap:7px;background:#fff;color:#000;
  font-weight:600;font-size:13px;padding:7px 20px;border-radius:999px;
}
.pill-play:hover{filter:brightness(.9)}
.pill-play .ic{width:12px;height:12px}
.pill-ghost{
  display:inline-flex;align-items:center;gap:7px;background:var(--elevated);color:var(--text);
  font-weight:500;font-size:12.5px;padding:7px 15px;border-radius:999px;
}
.pill-ghost:hover{background:#3a3a3c}
.pill-ghost .ic{width:14px;height:14px}

.thumb{width:36px;height:36px;flex:0 0 36px;border-radius:4px;overflow:hidden;background:var(--elevated)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:#4a4a4e}
.thumb .ph .ic{width:16px;height:16px;stroke-width:1.5}
.kebab-btn{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--text-dim);opacity:0}
.row:hover .kebab-btn,.kebab-btn:focus-visible,.kebab-btn.open{opacity:1}
.kebab-btn:hover{background:rgba(255,255,255,.1);color:var(--text)}
.kebab-btn .ic{width:15px;height:15px}
.warn{color:#ffb340;display:inline-flex;vertical-align:-2px;margin-right:5px}
.warn .ic{width:13px;height:13px}
.eq{width:36px;height:36px;flex:0 0 36px;display:flex;align-items:flex-end;justify-content:center;gap:2.5px;padding-bottom:9px}
.eq i{width:3px;height:5px;background:var(--accent);border-radius:1px;animation:eqb .95s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.22s}
.eq i:nth-child(3){animation-delay:.44s}
.eq i:nth-child(4){animation-delay:.12s}
.eq.paused i{animation-play-state:paused}
@keyframes eqb{0%,100%{height:4px}50%{height:17px}}

/* ---------------- player bar ---------------- */
#playerbar{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  width:var(--pill-w);max-width:calc(100vw - 40px);height:var(--pill-h);
  background:var(--panel);border-radius:14px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:0 12px;z-index:30;border:1px solid rgba(255,255,255,.05);
}
.pb-left{display:flex;align-items:center;gap:3px}
.pb-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--text)}
.pb-btn:hover{background:rgba(255,255,255,.08)}
.pb-btn:disabled{color:#5a5a5e;cursor:default;background:none}
.pb-btn .ic{width:15px;height:15px}
.pb-btn.big .ic{width:19px;height:19px}
.pb-center{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;min-width:0}
#pbArt{width:40px;height:40px;border-radius:5px;overflow:hidden;background:var(--elevated);flex:0 0 40px}
#pbArt img{width:100%;height:100%;object-fit:cover;display:block}
#pbArt .ph{width:100%;height:100%;display:grid;place-items:center;color:#4a4a4e}
#pbArt .ph .ic{width:17px;height:17px}
.pb-info{min-width:0;display:flex;flex-direction:column;gap:1px}
#pbTitle{font-size:12.2px;font-weight:500;line-height:1.25}
#pbArtist{font-size:11px;color:var(--text-dim);line-height:1.25}
.pb-scrub{display:grid;grid-template-columns:30px 1fr 34px;gap:7px;align-items:center;margin-top:3px}
.pb-scrub .tt{font-size:9.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;line-height:1}
.pb-scrub .tt.r{text-align:right}
.scrubwrap{position:relative;min-width:0;height:22px;display:flex;align-items:center}
#waveCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .25s ease}
#waveCanvas.has-wave{opacity:1;pointer-events:auto}
.scrubwrap input[type=range]{position:relative;width:100%;z-index:2}
/* When the waveform is up it IS the track visual; the slider keeps only its thumb. */
.scrubwrap:has(#waveCanvas.has-wave) input[type=range]::-webkit-slider-runnable-track{background:transparent}
.pb-right{display:flex;align-items:center;gap:2px}
.volwrap{display:flex;align-items:center;gap:6px;padding-right:2px}
.volwrap input[type=range]{width:0;opacity:0;transition:width .18s ease,opacity .18s ease}
.volwrap:hover input[type=range],.volwrap:focus-within input[type=range]{width:64px;opacity:1}
.pb-btn.on{color:var(--accent)}
.repeat-badge{position:relative}
.repeat-badge b{
  position:absolute;right:2px;bottom:1px;font-size:7.5px;font-weight:700;
  background:var(--accent);color:#fff;border-radius:3px;padding:0 2px;line-height:1.35;
}

input[type=range]{
  -webkit-appearance:none;appearance:none;background:transparent;height:14px;margin:0;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3.5px;border-radius:3px;
  background:linear-gradient(to right,var(--fg,#d8d8d8) 0 var(--p,0%),rgba(255,255,255,.17) var(--p,0%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;
  background:#fff;margin-top:-3.25px;opacity:0;transition:opacity .14s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:focus-visible::-webkit-slider-thumb,
input[type=range].dragging::-webkit-slider-thumb{opacity:1}
input[type=range]:hover::-webkit-slider-runnable-track{--fg:var(--accent)}

/* ---------------- up next ---------------- */
#upnext{
  position:fixed;top:10px;right:10px;bottom:82px;width:318px;
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;z-index:28;overflow:hidden;
  transform:translateX(calc(100% + 22px));transition:transform .24s cubic-bezier(.32,.72,.24,1);
  border:1px solid rgba(255,255,255,.05);
}
#upnext.open{transform:none}
#upnext header{display:flex;align-items:center;gap:8px;padding:13px 14px 10px}
#upnext header h3{margin:0;font-size:14px;font-weight:600;flex:1}
#upnext .link{font-size:11.5px;color:var(--text-dim)}
#upnext .link:hover{color:var(--text)}
#queueList{flex:1;overflow-y:auto;padding:0 8px 10px}
.qrow{
  display:flex;align-items:center;gap:10px;padding:6px 7px;border-radius:7px;cursor:pointer;
  position:relative;
}
.qrow:hover{background:var(--elevated)}
.qrow.now{background:rgba(250,36,60,.12)}
.qrow.now .qt{color:var(--accent)}
.qrow.dragover-top{box-shadow:inset 0 2px 0 0 var(--accent)}
.qrow.dragover-bot{box-shadow:inset 0 -2px 0 0 var(--accent)}
.qrow .thumb{width:32px;height:32px;flex:0 0 32px}
.qrow .qt{font-size:12.3px;font-weight:500}
.qrow .qa{font-size:11px;color:var(--text-dim)}
.qrow .grip{color:#5a5a5e;cursor:grab}
.qrow .grip .ic{width:14px;height:14px}
.q-sub{padding:12px 14px 6px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}

/* ---------------- menus ---------------- */
.menu{
  position:fixed;background:rgba(48,48,50,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:5px;min-width:196px;
  box-shadow:var(--shadow);z-index:90;
}
.menu button{display:flex;align-items:center;gap:9px;width:100%;padding:6px 9px;border-radius:6px;font-size:12.5px}
.menu button:hover,.menu button:focus-visible{background:rgba(255,255,255,.1)}
.menu button.sub-open{background:rgba(255,255,255,.1)}
.menu button .ic{width:14px;height:14px;color:var(--text-dim)}
.menu button .chev{margin-left:auto;width:12px;height:12px}
.menu .sep{height:1px;background:rgba(255,255,255,.09);margin:4px 6px}
.menu .danger{color:#ff6b6b}
.menu .danger .ic{color:#ff6b6b}
.menu .mlabel{padding:6px 9px 4px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}

/* ---------------- error panel ---------------- */
#errpanel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,calc(100vw - 60px));height:min(430px,calc(100vh - 90px));
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;z-index:120;border:1px solid rgba(255,255,255,.08);
}
#errpanel header{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--hairline)}
#errpanel h3{margin:0;font-size:15px;font-weight:600;flex:1}
#errlist{flex:1;overflow-y:auto;padding:10px 16px;font-size:11.5px;line-height:1.5;user-select:text}
#errlist .e{padding:7px 0;border-bottom:1px solid var(--hairline)}
#errlist .e .who{color:var(--accent);font-weight:600}
#errlist .e .when{color:var(--text-dim);margin-left:6px;font-variant-numeric:tabular-nums}
#errlist .e .what{color:var(--text);margin-top:2px;word-break:break-word}
#errlist .e .detail{color:var(--text-dim);margin-top:2px;white-space:pre-wrap;word-break:break-word;font-size:11px}
#errpanel footer{padding:10px 16px;border-top:1px solid var(--hairline);display:flex;gap:8px;align-items:center}
#errpanel .hint{font-size:11px;color:var(--text-dim);margin-left:auto}
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110}

/* ---------------- toast ---------------- */
#toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  background:rgba(58,58,60,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--text);font-size:12.5px;padding:9px 16px;border-radius:999px;
  box-shadow:var(--shadow);z-index:100;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;max-width:60vw;
}
#toast.show{opacity:1;transform:translateX(-50%)}

/* ---------------- folders ---------------- */
#reconnectChip{
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text);
  background:var(--panel);padding:5px 11px;border-radius:999px;
  border:1px solid rgba(250,36,60,.4);
}
#reconnectChip:hover{background:var(--elevated)}
#reconnectChip .ic{width:13px;height:13px;color:var(--accent)}
#savedFolders{margin-top:20px;text-align:left;background:var(--panel);border-radius:10px;padding:10px 12px}
#savedFolders .sf-head{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
#savedFolders .sf-row{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:12.5px}
#savedFolders .sf-row .ic{width:15px;height:15px;color:var(--text-dim)}
#savedFolders .sf-btn{
  margin-left:auto;background:var(--accent);color:#fff;font-weight:600;font-size:11.5px;
  padding:4px 12px;border-radius:999px;
}
#savedFolders .sf-btn:hover{filter:brightness(1.09)}
#savedFolders .sf-hint{margin-left:auto;font-size:11px;color:#6d6d72}

/* Duplicate merge: one row stands for n copies. */
.dup-badge{
  display:inline-block;margin-left:7px;padding:0 5px;border-radius:4px;
  font-size:9.5px;font-weight:700;line-height:1.5;vertical-align:1px;
  background:var(--elevated);color:var(--text-dim);
}

/* Played by AMC's software decoder: quiet, informational. */
.soft-chip{
  display:inline-block;margin-left:7px;padding:0 5px;border-radius:4px;
  font-size:9.5px;font-weight:600;line-height:1.5;vertical-align:1px;
  background:rgba(255,255,255,.08);color:var(--text-dim);white-space:nowrap;
}
#pbTitle .soft-chip{margin-left:6px;font-size:9px}
.np-format{font-size:11px;color:rgba(255,255,255,.45);text-align:center;min-height:14px}

/* Codec that failed to decode in this browser session. */
.codec-badge{
  display:inline-block;margin-left:7px;padding:0 5px;border-radius:4px;
  font-size:9.5px;font-weight:700;line-height:1.5;vertical-align:1px;
  background:rgba(255,179,64,.14);color:#ffb340;
}

/* Unsplit-rip candidate (long file, no cue) or a broken cue. */
.split-badge{
  display:inline-block;margin-left:7px;padding:0 5px;border-radius:4px;
  font-size:9.5px;font-weight:700;line-height:1.5;vertical-align:1px;
  background:rgba(90,200,250,.14);color:#5ac8fa;
}

/* ---------------- track-break editor ---------------- */
#splitscrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110}
#splitpanel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(640px,calc(100vw - 60px));height:min(460px,calc(100vh - 90px));
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;z-index:120;border:1px solid rgba(255,255,255,.08);
}
#splitpanel header{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--hairline)}
#splitpanel h3{margin:0;font-size:15px;font-weight:600;flex:1}
#splitrows{flex:1;overflow-y:auto;padding:10px 16px}
#splitpanel footer{padding:10px 16px;border-top:1px solid var(--hairline);display:flex;gap:8px;align-items:center}
#splitpanel .hint{font-size:11px;color:var(--text-dim);margin-right:auto}
.split-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--hairline)}
.split-time{font-size:12.5px;font-variant-numeric:tabular-nums;width:64px}
.split-nudge{padding:4px 10px;font-size:11px}
.split-name{flex:1;min-width:0}
.split-del{width:26px;flex:0 0 26px}

/* ---------------- metadata repair (catalog + AI diff review) ---------------- */
#repairscrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110}
#repairpanel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,calc(100vw - 60px));height:min(560px,calc(100vh - 90px));
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;z-index:120;border:1px solid rgba(255,255,255,.08);
}
#repairpanel header{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--hairline)}
#repairpanel h3{margin:0;font-size:15px;font-weight:600;flex:1}
#repairbody{flex:1;overflow-y:auto;padding:10px 16px}
#repairpanel footer{padding:10px 16px;border-top:1px solid var(--hairline);display:flex;gap:8px;align-items:center}
#repairpanel .hint{font-size:11px;color:var(--text-dim);margin-right:auto}
/* Footer buttons match the ghost-pill scale and never wrap. */
#repairpanel footer .pill-play{font-size:12px;padding:6px 15px;white-space:nowrap;flex:0 0 auto}
.repair-wait{display:flex;align-items:center;gap:10px;padding:26px 4px;color:var(--text-dim);font-size:12.5px}
.diff-note{
  margin:6px 0 10px;padding:8px 11px;border-radius:8px;font-size:12px;line-height:1.5;
  border:1px solid rgba(255,159,10,.4);background:rgba(255,159,10,.09);color:var(--text);
}
.diff-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);margin:0 0 10px;cursor:pointer}
.diff-toggle input{accent-color:var(--accent);width:13px;height:13px}
.diff-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.diff-tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-dim);padding:4px 8px;border-bottom:1px solid var(--hairline)}
.diff-tbl td{padding:5px 8px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.diff-group td{padding-top:14px;font-weight:600;font-size:12px;color:var(--text)}
.diff-field{color:var(--text-dim);width:110px}
.diff-from{color:var(--text-dim)}
.diff-to{color:var(--text)}
.diff-row.rejected .diff-to{color:var(--text-dim);text-decoration:line-through}
.diff-art{width:72px;height:72px;border-radius:6px;object-fit:cover;background:var(--elevated)}
.diff-tbl input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}
.ai-repair textarea{
  width:100%;min-height:150px;background:var(--elevated);color:var(--text);
  border:1px solid var(--hairline);border-radius:8px;padding:9px 11px;
  font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical;outline:none;
}
.ai-repair textarea:focus{box-shadow:0 0 0 1.5px var(--accent)}
.ai-repair .dim{color:var(--text-dim);font-size:12px}
.ai-actions{display:flex;align-items:center;gap:10px;margin:8px 0 14px}

/* ---------------- Phase 6: album multi-select + resume chip ---------------- */
.tile.selected .cover{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:8px}
.tile.selected .t1{color:var(--accent)}
#albumselbar{
  position:fixed;left:50%;bottom:calc(var(--pill-h) + 26px);transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;z-index:40;
  background:rgba(44,44,46,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:8px 10px 8px 16px;border-radius:999px;box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.08);font-size:12.5px;
}
#albumselbar .pill-play{font-size:12px;padding:6px 14px;white-space:nowrap}
#albumselbar .pill-ghost{font-size:12px;padding:6px 12px}
#resumechip{
  position:fixed;left:50%;bottom:calc(var(--pill-h) + 26px);transform:translateX(-50%);
  z-index:39;display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;font-weight:600;font-size:12.5px;
  padding:8px 18px;border-radius:999px;box-shadow:var(--shadow);cursor:pointer;
}
#resumechip:hover{filter:brightness(1.08)}

/* ---------------- settings (Phase 5a) ---------------- */
.settings{max-width:660px;padding-bottom:40px}
.set-sect{margin:0 0 26px}
.set-sect h2{font-size:15px;font-weight:700;margin:0 0 8px}
.set-hint{color:var(--text-dim);font-size:12px;line-height:1.5;margin:2px 0 10px}
.set-row{display:flex;align-items:center;gap:10px;margin:8px 0;flex-wrap:wrap;font-size:13px}
.set-check{cursor:pointer}
.set-check input{accent-color:var(--accent);width:14px;height:14px}
.set-folder{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  background:var(--panel);border:1px solid var(--hairline);margin:6px 0;
}
.set-folder>.ic,.set-folder>svg{width:16px;height:16px;flex:0 0 16px;color:var(--text-dim)}
.set-folder.pending{opacity:.7}
.set-fmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.set-fmeta b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-fmeta span{font-size:11px;color:var(--text-dim)}
.set-small{padding:4px 12px;font-size:11.5px}
.set-flabel{font-size:12.5px;min-width:110px}
.set-seg{display:inline-flex;background:var(--elevated);border-radius:999px;padding:2px;gap:2px}
.seg-btn{padding:4px 12px;border-radius:999px;font-size:11.5px;color:var(--text-dim)}
.seg-btn.on{background:var(--accent);color:#fff;font-weight:600}
.set-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.set-swatch.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.set-swatch[data-accent=""]{background:conic-gradient(#fa243c,#ff9f0a,#30d158,#0a84ff,#bf5af2,#fa243c) !important}

/* ---------------- Now Playing (Phase 5b) ---------------- */
#npview{
  position:fixed;inset:0;z-index:100;
  /* A soft diagonal wash between the cover's dominant and secondary
     colours — never a flat fill, never bright enough to fight the text. */
  background:
    linear-gradient(163deg, var(--amb1, #1c1c1e) 0%, var(--amb2, #0d0d10) 62%, #0a0a0c 100%);
  transition:background .8s ease;
}
#npview.np-in{animation:npIn .34s cubic-bezier(.32,.72,.24,1)}
#npview.np-out{animation:npOut .24s ease forwards}
@keyframes npIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes npOut{from{opacity:1}to{opacity:0;transform:translateY(28px)}}
.np-close{position:absolute;top:18px;left:18px;transform:rotate(90deg);z-index:2}
/* Artwork on top, centred; everything else centred beneath it. */
.np-inner{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:40px 5vw;transition:transform .34s cubic-bezier(.32,.72,.24,1);
}
.np-art{width:min(42vh,72vw);flex:0 0 auto}
.np-art img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);background:var(--elevated)}
.np-side{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(560px,86vw)}
.np-title{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-artist{font-size:13.5px;color:rgba(255,255,255,.62);text-align:center}
.np-scrub{position:relative;height:50px;margin-top:12px;width:100%}
.np-scrub canvas{position:absolute;inset:0;width:100%;height:100%}
/* A range input keeps its intrinsic ~14px height unless told otherwise —
   without the explicit height the waveform is mostly dead canvas and the
   scrubber "cannot be moved". The input must blanket the whole strip. */
.np-scrub input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.np-times{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;width:100%}
.np-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.np-controls .pb-btn{width:40px;height:40px}
.np-controls .pb-btn svg{width:20px;height:20px}
.np-play{width:54px !important;height:54px !important}

/* Lyrics in fullscreen: the panel slides in from the RIGHT — its usual
   side — and the now-playing block shifts left to make room. Only the
   stacking order needs an override; the slide itself is the panel's
   normal behaviour. */
body.np-open #lyricspanel{z-index:120}
body.np-open.lyrics-open .np-inner{transform:translateX(calc(-1 * min(215px, 24vw)))}
@media (prefers-reduced-motion: reduce){
  #npview.np-in,#npview.np-out{animation:none}
  .np-inner{transition:none}
}

/* ---------------- ambient shell tint (subtle, everywhere) ----------------
   The album palette leaks into the shell at low strength: a wash over the
   sidebar's own panel colour and a mix into the pill. Readability first —
   the mix ratios stay small. */
body.ambient #sidebar{
  background:linear-gradient(180deg, color-mix(in srgb, var(--amb1, transparent) 16%, transparent), transparent 72%), var(--panel);
  transition:background .8s ease;
}
body.ambient #playerbar{
  background:color-mix(in srgb, var(--amb2, #161618) 24%, var(--panel));
  transition:background .8s ease;
}
@media (prefers-reduced-motion: reduce){
  #npview{transition:none}
  body.ambient #sidebar,body.ambient #playerbar{transition:none}
}

/* ---------------- service worker update prompt ---------------- */
#swUpdate{
  position:fixed;left:50%;top:14px;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  background:rgba(48,48,50,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--text);font-size:12.5px;padding:9px 10px 9px 16px;border-radius:999px;
  box-shadow:var(--shadow);z-index:95;border:1px solid rgba(255,255,255,.08);
}
#swUpdate button{
  background:var(--accent);color:#fff;font-weight:600;font-size:12px;
  padding:5px 12px;border-radius:999px;
}
#swUpdate button.ghost{background:none;color:var(--text-dim);font-weight:500}
#swUpdate button.ghost:hover{color:var(--text)}
/* View content: grids, tiles, detail headers, song tables. */

.section-head{display:flex;align-items:baseline;gap:10px;margin:6px 0 14px}
.section-head h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
.section-head .sub{color:var(--text-dim);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:22px 18px;padding-bottom:8px}
.tile{cursor:pointer;text-align:left;width:100%;display:block}
.tile .cover{
  position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;
  background:var(--elevated);box-shadow:0 4px 14px rgba(0,0,0,.42);
}
.tile.round .cover{border-radius:50%}
.tile .cover img{width:100%;height:100%;object-fit:cover;display:block}
.tile .ph{width:100%;height:100%;display:grid;place-items:center;color:#4a4a4e}
.tile .ph .ic{width:34%;height:34%;stroke-width:1.4}
.tile .playbtn{
  position:absolute;right:9px;bottom:9px;width:34px;height:34px;border-radius:50%;
  background:rgba(20,20,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;color:#fff;opacity:0;transform:translateY(7px);
  transition:opacity .16s ease,transform .16s ease;
}
.tile .playbtn .ic{width:14px;height:14px;margin-left:1px}
.tile:hover .playbtn,.tile:focus-visible .playbtn,.tile .playbtn:focus-visible{opacity:1;transform:none}
.tile .t1{margin-top:9px;font-size:12.5px;font-weight:500}
.tile .t2{font-size:12px;color:var(--text-dim)}
.tile.round .t1,.tile.round .t2{text-align:center}

/* Edition suffix: the folder name, dimmed, when it differs from the album tag. */
.ed{color:var(--text-dim);font-weight:400;font-size:.85em;margin-left:6px}

/* ---------------- detail header ---------------- */
.detail{display:flex;gap:26px;padding:6px 0 20px;align-items:flex-start}
.detail .art{
  width:270px;height:270px;flex:0 0 270px;border-radius:10px;overflow:hidden;
  background:var(--elevated);box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.detail .art img{width:100%;height:100%;object-fit:cover;display:block}
.detail .art .ph{width:100%;height:100%;display:grid;place-items:center;color:#4a4a4e}
.detail .art .ph .ic{width:64px;height:64px;stroke-width:1.2}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100%;background:var(--elevated)}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.detail .meta{min-width:0;padding-top:10px;flex:1}
.detail h1{font-size:28px;font-weight:600;letter-spacing:-.028em;margin:0 0 4px;line-height:1.15}
.detail h1.editable{cursor:text;border-radius:6px;padding:1px 4px;margin-left:-4px}
.detail h1.editable:hover{background:rgba(255,255,255,.06)}
.detail .by{font-size:18px;color:var(--accent);font-weight:500;letter-spacing:-.015em;margin-bottom:9px;background:none;padding:0}
.detail .by[data-link]:hover{text-decoration:underline}
.detail .dim{font-size:11.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.045em;margin-bottom:16px}
.detail .actions{display:flex;gap:10px;align-items:center}

/* ---------------- song table ---------------- */
.tbl{width:100%;margin-top:2px}
.tr{
  display:grid;
  grid-template-columns:minmax(190px,2.5fr) minmax(96px,1.05fr) minmax(96px,1.25fr) 58px 30px;
  align-items:center;gap:12px;height:var(--row-h);padding:0 9px;border-radius:6px;
}
.thead{
  height:28px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);border-bottom:1px solid var(--hairline);border-radius:0;
  position:sticky;top:0;background:var(--bg);z-index:2;
}
.thead button{font:inherit;color:inherit;letter-spacing:inherit;display:inline-flex;align-items:center;gap:4px}
.thead button:hover{color:var(--text)}
.thead .sortmark{width:9px;height:9px;stroke-width:2.6}
.thead .num{text-align:right;justify-content:flex-end}
.row{cursor:default;position:relative}
.row:hover{background:var(--elevated)}
.row.sel{background:#3d3d40}
.row.playing .t-title{color:var(--accent)}
.row.dim{opacity:.42}
.row.dragover-top{box-shadow:inset 0 2px 0 0 var(--accent)}
.row.dragover-bot{box-shadow:inset 0 -2px 0 0 var(--accent)}
.c-song{display:flex;align-items:center;gap:11px;min-width:0}
.t-lines{min-width:0}
.t-title{font-size:12.8px;font-weight:500}
.t-note{font-size:11px;color:var(--text-dim)}
.c-dim{font-size:12.3px;color:var(--text-dim)}
.c-time{font-size:12.3px;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums}
.c-more{display:flex;justify-content:flex-end}
.empty-note{padding:38px 4px;color:var(--text-dim);font-size:12.5px;max-width:460px}
.empty-note b{color:var(--text);font-weight:600;display:block;margin-bottom:6px;font-size:14px}
/* Phase 4c — the lyrics panel and the Apple-style line/word animation.
   The block moves through ONE transform transition; lines scale and dim;
   the active line's words fill through background-clip:text. Reduced
   motion collapses everything to a plain highlight. */

#lyricspanel{
  position:fixed;top:10px;right:10px;bottom:82px;width:400px;max-width:88vw;
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;z-index:30;overflow:hidden;
  transform:translateX(calc(100% + 22px));transition:transform .24s cubic-bezier(.32,.72,.24,1);
  border:1px solid rgba(255,255,255,.05);
}
#lyricspanel.open{transform:none}
#lyricspanel header{display:flex;align-items:center;gap:9px;padding:13px 14px 10px;border-bottom:1px solid var(--hairline)}
#lyricspanel h3{margin:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.lyr-src{font-size:10.5px;color:var(--text-dim);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lyrEdit{padding:4px 12px;font-size:11.5px}

#lyrbody{flex:1;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
}
#lyrbody.static{overflow-y:auto;-webkit-mask-image:none;mask-image:none}
#lyrscroll{position:absolute;left:0;right:0;top:0;padding:0 20px;
  transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
#lyrbody.static #lyrscroll{position:static;transition:none;padding:14px 20px}

.lyr-line{
  padding:8px 0;font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  color:rgba(255,255,255,.34);cursor:pointer;
  transform:scale(.92);transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,1,.36,1),color .35s ease;
}
.lyr-line:hover{color:rgba(255,255,255,.6)}
.lyr-line.past{color:rgba(255,255,255,.5)}
.lyr-line.active{color:#fff;transform:scale(1)}

/* Enhanced LRC: words fill left-to-right. Only the active line pays for
   the gradient — inactive lines render as plain text. */
.lyr-line.active .lyr-word{
  background:linear-gradient(90deg,#fff calc(var(--fill,0) * 100%),rgba(255,255,255,.35) calc(var(--fill,0) * 100%));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.lyr-empty{display:flex;align-items:center;gap:10px;padding:26px 20px;color:var(--text-dim);font-size:12.5px;flex-wrap:wrap}
.dim2{color:var(--text-dim);font-size:11px;font-weight:400}

/* ---------------- editor ---------------- */
.lyr-editor{display:flex;flex-direction:column;height:100%;padding:10px 14px}
.lyr-editor textarea{
  height:110px;flex:0 0 auto;background:var(--elevated);color:var(--text);
  border:1px solid var(--hairline);border-radius:8px;padding:8px 10px;
  font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical;outline:none;
}
.lyr-editor textarea:focus{box-shadow:0 0 0 1.5px var(--accent)}
.lyr-ed-actions{display:flex;align-items:center;gap:9px;margin:8px 0;flex-wrap:wrap}
.lyr-ed-actions .pill-play{margin-left:auto}
.lyr-ed-rows{flex:1;overflow-y:auto;outline:none;border-radius:8px}
.lyr-ed-rows:focus{box-shadow:0 0 0 1.5px rgba(250,36,60,.5)}
.lyr-ed-row{display:flex;gap:8px;padding:4px 7px;border-radius:6px;font-size:12.5px;cursor:pointer;align-items:baseline}
.lyr-ed-row.sel{background:rgba(255,255,255,.09)}
.lyr-ed-time{width:64px;flex:0 0 64px;color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:11.5px}
.lyr-ed-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- reduced motion: plain highlight ---------------- */
@media (prefers-reduced-motion: reduce){
  #lyricspanel{transition:none}
  #lyrscroll{transition:none}
  .lyr-line{transition:none;transform:none}
  .lyr-line.active{transform:none}
  .lyr-line.active .lyr-word{
    background:none;-webkit-background-clip:initial;background-clip:initial;
    -webkit-text-fill-color:currentColor;color:#fff;
  }
}
/* Turntable Now Playing mode and Settings › Artwork.
   (One stylesheet for this branch's UI so the CSS entry carries one hook.) */

/* ---------------- Settings › Artwork ---------------- */
#setArtwork .set-seg{border-radius:12px}
#setArtwork .seg-btn{border-radius:10px;text-align:center;line-height:1.25;padding:5px 13px}
#setArtwork .set-artsz,#setArtwork .set-artest{display:block;font-size:10px;opacity:.72;font-weight:400}
#setArtwork .set-artest:empty{display:none}

/* ---------------- Now Playing: the mode switch ----------------
   Cover mode is untouched; .np-tt on #npview swaps the big cover and the
   waveform scrubber for the deck (the tonearm is the seek bar) and lays
   the view out in a row: deck left, title/controls/speed right. */
.np-mode svg{width:20px;height:20px}
.np-mode[aria-pressed="true"]{color:var(--accent)}
/* .tt-deck, not .tt: the player bar's time labels already use .tt */
.tt-deck{display:none}
#npview.np-tt .np-art,#npview.np-tt .np-scrub{display:none}
#npview.np-tt .tt-deck{display:block}
#npview.np-tt .np-inner{flex-direction:row;gap:clamp(20px,3vw,48px);padding:24px clamp(20px,2.4vw,40px)}
#npview.np-tt .np-side{width:clamp(300px,24vw,380px);align-items:stretch;flex:0 0 auto}
#npview.np-tt .np-title,#npview.np-tt .np-artist{text-align:left}
#npview.np-tt .np-controls{justify-content:flex-start;margin-left:-8px}
#npview.np-tt .np-times{margin-top:6px}

/* Lyrics beside the deck: instead of sliding the whole row left (which
   would push the sleeve off screen and the controls under the panel), the
   stage gives up the panel's width. */
#npview.np-tt{--lyr:0px}
body.lyrics-open #npview.np-tt{--lyr:min(412px,88vw)}
body.np-open.lyrics-open #npview.np-tt .np-inner{transform:none;padding-right:calc(var(--lyr) + 12px)}

/* ---------------- the stage ----------------
   A fixed-aspect box sized by the viewport; everything inside is placed
   in stage units (1500 × 760) through container query units, so the
   drawing scales as one piece. */
.tt-deck{flex:0 1 auto;min-width:0}
.tt-stage{
  position:relative;container-type:size;
  width:min(calc(100vw - var(--lyr,0px) - clamp(300px,24vw,380px) - clamp(20px,3vw,48px) - 2 * clamp(20px,2.4vw,40px)), calc((100vh - 48px) * 1500 / 760), 1400px);
}
.tt-world{position:absolute;inset:0;--u:calc(100cqw / 1500)}
.tt-world > *{position:absolute}

/* ---------------- plinth ---------------- */
.tt-plinth{
  border-radius:calc(30 * var(--u));
  background:
    radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.07),transparent 55%),
    linear-gradient(160deg,#2a2a2e 0%,#1b1b1e 48%,#141416 100%);
  box-shadow:
    0 calc(34 * var(--u)) calc(80 * var(--u)) rgba(0,0,0,.55),
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.35),
    inset 0 calc(1.5 * var(--u)) 0 rgba(255,255,255,.09),
    inset 0 calc(-2 * var(--u)) 0 rgba(0,0,0,.4);
  z-index:1;
}
.tt-plinth > *{position:absolute}
.tt-lamp{
  left:calc(34 * var(--u));top:calc(34 * var(--u));width:calc(10 * var(--u));height:calc(10 * var(--u));border-radius:50%;
  background:#3a0d12;box-shadow:inset 0 0 calc(2 * var(--u)) rgba(0,0,0,.6);transition:background .3s ease,box-shadow .3s ease;
}
#npview.tt-playing .tt-lamp{background:var(--accent);box-shadow:0 0 calc(10 * var(--u)) var(--accent)}
/* START·STOP and the 33 / 45 buttons: they work (play/pause with the
   stop/start effect, and the speed presets). */
.tt-startbtn,.tt-rpmbtn{
  bottom:calc(14 * var(--u));height:calc(32 * var(--u));
  border-radius:calc(7 * var(--u));background:linear-gradient(180deg,#303034,#212124);
  box-shadow:inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.09),0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.55);
  font-size:max(8px,calc(12.5 * var(--u)));letter-spacing:.1em;color:rgba(255,255,255,.5);font-weight:700;white-space:nowrap;
  display:grid;place-items:center;cursor:pointer;transition:color .15s ease,box-shadow .15s ease,transform .08s ease;
}
.tt-startbtn{left:calc(28 * var(--u));width:calc(142 * var(--u))}
.tt-rpmbtn{width:calc(54 * var(--u));letter-spacing:.04em}
.tt-rpm33{left:calc(186 * var(--u))}
.tt-rpm45{left:calc(248 * var(--u))}
.tt-startbtn:hover,.tt-rpmbtn:hover{color:rgba(255,255,255,.85)}
.tt-startbtn:active,.tt-rpmbtn:active{transform:translateY(calc(1 * var(--u)));box-shadow:inset 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6)}
.tt-rpmbtn.on{color:var(--accent);text-shadow:0 0 calc(8 * var(--u)) color-mix(in srgb,var(--accent) 70%,transparent)}
#npview.tt-playing .tt-startbtn{color:rgba(255,255,255,.8)}

/* The pitch: an RPM readout over a fader with a numbered scale. Faster is
   up; the knob sits at --pitch-frac (0 = 16 RPM, 1 = 78 RPM). */
.tt-ledbox{
  left:calc(812 * var(--u));top:calc(254 * var(--u));width:calc(128 * var(--u));height:calc(46 * var(--u));
  border-radius:calc(7 * var(--u));background:#0b0b0c;
  box-shadow:inset 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.8),0 calc(1 * var(--u)) 0 rgba(255,255,255,.06);
  display:flex;align-items:baseline;justify-content:center;gap:calc(5 * var(--u));padding-top:calc(6 * var(--u));
}
.tt-led{
  font:700 max(10px,calc(26 * var(--u)))/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:#ff5a4a;text-shadow:0 0 calc(8 * var(--u)) rgba(255,70,50,.75);font-variant-numeric:tabular-nums;
}
.tt-ledbox small{font:600 max(6px,calc(10 * var(--u)))/1 var(--font);color:rgba(255,90,74,.7);letter-spacing:.08em}
.tt-pitchwrap{left:calc(810 * var(--u));top:calc(318 * var(--u));width:calc(130 * var(--u));height:calc(370 * var(--u))}
.tt-pitchwrap > *{position:absolute}
.tt-scale{left:0;right:0;top:calc(16 * var(--u));bottom:calc(16 * var(--u));pointer-events:none}
.tt-scale > *{position:absolute}
.tt-tick{left:calc(64 * var(--u));width:calc(10 * var(--u));height:calc(1.4 * var(--u));margin-top:calc(-.7 * var(--u));background:rgba(255,255,255,.22)}
.tt-tick.tt-major{left:calc(56 * var(--u));width:calc(18 * var(--u));height:calc(2 * var(--u));margin-top:calc(-1 * var(--u));background:rgba(255,255,255,.55)}
.tt-tick.tt-major.tt-r{left:calc(106 * var(--u));width:calc(14 * var(--u))}
.tt-mark{
  font:600 max(7px,calc(13 * var(--u)))/1 var(--font);color:rgba(255,255,255,.62);
  transform:translateY(-50%);white-space:nowrap;letter-spacing:.02em;
}
.tt-mark.tt-l{right:calc(78 * var(--u));text-align:right}
.tt-mark.tt-r{left:calc(124 * var(--u))}
.tt-fader{left:calc(62 * var(--u));width:calc(56 * var(--u));top:calc(16 * var(--u));bottom:calc(16 * var(--u));cursor:ns-resize;touch-action:none}
.tt-fader-track{
  position:absolute;left:calc(18 * var(--u));width:calc(20 * var(--u));top:calc(-14 * var(--u));bottom:calc(-14 * var(--u));
  border-radius:calc(10 * var(--u));background:#0d0d0f;box-shadow:inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.75);
}
.tt-fader-knob{
  position:absolute;left:calc(4 * var(--u));width:calc(48 * var(--u));height:calc(26 * var(--u));
  top:calc((1 - var(--pitch-frac, .2796)) * 100% - 13 * var(--u));
  border-radius:calc(5 * var(--u));background:linear-gradient(180deg,#5a5a61,#2c2c30);
  box-shadow:0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.6),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.18);
  transition:top .2s ease;cursor:grab;outline-offset:calc(3 * var(--u));
}
.tt-fader-knob::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:calc(2 * var(--u));margin-top:calc(-1 * var(--u));background:var(--accent);border-radius:calc(1 * var(--u))}
.tt-fader-knob:focus-visible{outline:2px solid var(--accent)}
#ttWorld.tt-fading .tt-fader-knob{transition:none;cursor:grabbing}

/* ---------------- platter (rim with strobe dots, rubber mat) ---------------- */
.tt-platter{
  border-radius:50%;z-index:2;will-change:transform;
  background:
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.34) 0 1.1deg,transparent 1.1deg 3.6deg),
    radial-gradient(circle,#8d8e93 0 90%,#5d5e63 96%,#3a3a3e 100%);
  box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.6),inset 0 0 0 calc(2 * var(--u)) rgba(0,0,0,.35);
}
.tt-mat{
  position:absolute;inset:4.2%;border-radius:50%;
  background:
    repeating-radial-gradient(circle,#18181a 0 calc(5 * var(--u)),#121214 calc(5 * var(--u)) calc(10 * var(--u))),
    #151517;
  box-shadow:inset 0 0 calc(12 * var(--u)) rgba(0,0,0,.7);
}

/* ---------------- the record ---------------- */
.tt-rec{z-index:3;border-radius:50%;will-change:transform;
  box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.55);
}
.tt-rec-spin{position:absolute;inset:0;border-radius:50%;will-change:transform}
.tt-vinyl{
  position:absolute;inset:0;border-radius:50%;
  background:
    /* the playing surface: fine concentric grooves… */
    repeating-radial-gradient(circle at 50% 50%,#0b0b0c 0,#0b0b0c calc(1.4 * var(--u)),#1a1a1c calc(2.1 * var(--u)),#0b0b0c calc(3.2 * var(--u))),
    #0b0b0c;
}
/* …only between the run-out and the lead-in: the rim and the ring
   around the label stay smooth (the pseudo-elements below). */
.tt-vinyl::before,.tt-vinyl::after{content:"";position:absolute;border-radius:50%}
/* smooth run-out ring around the label */
.tt-vinyl::before{inset:29.5%;background:radial-gradient(circle,#0e0e10 0 70%,#101012 100%);box-shadow:0 0 0 calc(1 * var(--u)) rgba(255,255,255,.05)}
/* smooth lead-in rim */
.tt-vinyl::after{inset:0;background:transparent;box-shadow:inset 0 0 0 calc(7 * var(--u)) #0d0d0e,inset 0 0 0 calc(8 * var(--u)) rgba(255,255,255,.06)}
/* track bands (cue sides): smooth gaps between songs */
.tt-bands{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.tt-bands i{position:absolute;border-radius:50%;box-shadow:0 0 0 calc(2.2 * var(--u)) rgba(16,16,18,.95),0 0 0 calc(3 * var(--u)) rgba(255,255,255,.035)}
.tt-label{position:absolute;border-radius:50%;overflow:hidden;background:#2c2c2e;box-shadow:0 0 0 calc(1.5 * var(--u)) rgba(0,0,0,.6)}
.tt-label img{width:100%;height:100%;object-fit:cover;display:block}
.tt-label::after{
  /* the spindle hole, cut into the label */
  content:"";position:absolute;left:50%;top:50%;width:7.2%;height:7.2%;margin:-3.6% 0 0 -3.6%;border-radius:50%;
  background:#050505;box-shadow:inset 0 0 calc(2 * var(--u)) rgba(255,255,255,.2);
}
.tt-label-ph,.tt-sleeve-ph{display:none}
.tt-noart img{display:none}
.tt-noart .tt-label-ph,.tt-noart .tt-sleeve-ph{display:block;position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,#48484c,#1f1f22)}
/* Light on a spinning disc: the highlight stays put while the grooves
   turn under it. Never rotates. */
.tt-sheen{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 200deg,transparent 0deg,rgba(255,255,255,.0) 8deg,rgba(255,255,255,.11) 26deg,rgba(255,255,255,0) 48deg,transparent 180deg,rgba(255,255,255,.0) 188deg,rgba(255,255,255,.07) 206deg,rgba(255,255,255,0) 228deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 34%,#000 35%,#000 97%,transparent 99%);
  mask-image:radial-gradient(circle,transparent 0 34%,#000 35%,#000 97%,transparent 99%);
  mix-blend-mode:screen;
}
.tt-spindle{
  z-index:4;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f2f2f4,#9a9aa0 55%,#55555a);
  box-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.6);
}
#ttWorld.tt-offcentre .tt-spindle{z-index:2}

/* ---------------- the sleeve ---------------- */
.tt-sleeve{
  z-index:5;border-radius:calc(6 * var(--u));overflow:hidden;background:#2c2c2e;
  transform:rotate(var(--tilt,0deg));will-change:transform;
  box-shadow:calc(10 * var(--u)) calc(22 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.55),0 0 0 calc(1 * var(--u)) rgba(255,255,255,.05);
}
.tt-sleeve img{width:100%;height:100%;object-fit:cover;display:block}
.tt-sleeve::after{
  /* card-stock edge light */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 30%,transparent 70%,rgba(0,0,0,.18));
}

/* ---------------- tonearm ---------------- */
.tt-armbase{
  z-index:6;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#3c3c41,#1c1c1f 70%);
  box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.6),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.1);
}
.tt-rest{
  z-index:6;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#55555b,#222225);
  box-shadow:0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.6);
}
.tt-arm{
  z-index:7;height:calc(30 * var(--u));margin-top:calc(-15 * var(--u));
  transform-origin:0 50%;will-change:transform;pointer-events:none;
}
.tt-arm > *{position:absolute}
.tt-arm-cw{
  /* counterweight, behind the pivot */
  left:calc(-128 * var(--u));top:calc(-5 * var(--u));width:calc(86 * var(--u));height:calc(40 * var(--u));
  border-radius:calc(10 * var(--u));
  background:linear-gradient(180deg,#9a9ba1,#5b5c61 55%,#3b3b3f);
  box-shadow:0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.55),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.3);
}
.tt-arm-tube{
  left:calc(-44 * var(--u));top:calc(10 * var(--u));width:calc(440 * var(--u));height:calc(10 * var(--u));
  border-radius:calc(5 * var(--u));
  background:linear-gradient(180deg,#f4f4f6,#b9babf 45%,#7d7e84);
  box-shadow:0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.45);
  transition:box-shadow .18s ease;
}
/* Headshell: offset toward the spindle like a real one, so the cartridge
   sits tangent to the groove; the stylus is exactly at the arm's
   effective length (the rotation origin). The whole head is the grab
   handle. */
.tt-head{
  left:calc((440 - 58) * var(--u));top:calc(-6 * var(--u));width:calc(90 * var(--u));height:calc(42 * var(--u));
  transform-origin:calc(58 * var(--u)) 50%;transform:rotate(22deg);
  border-radius:calc(7 * var(--u));
  background:linear-gradient(180deg,#3a3a3f,#222226);
  box-shadow:0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.55),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.14);
  pointer-events:auto;cursor:grab;touch-action:none;outline-offset:calc(4 * var(--u));
  transition:transform .18s ease,box-shadow .18s ease;
}
.tt-head:focus-visible{outline:2px solid var(--accent)}
/* held in the hand: the lift is the feedback, not a focus ring */
#ttWorld.tt-lifted .tt-head{outline:none}
.tt-cart{position:absolute;left:calc(34 * var(--u));top:calc(8 * var(--u));width:calc(34 * var(--u));height:calc(26 * var(--u));border-radius:calc(4 * var(--u));background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000))}
.tt-lift{position:absolute;right:calc(-18 * var(--u));top:calc(14 * var(--u));width:calc(24 * var(--u));height:calc(8 * var(--u));border-radius:calc(4 * var(--u));background:#b9babf}
/* Lifted: the arm rises toward the viewer — a touch bigger, a longer
   shadow. */
#ttWorld.tt-lifted .tt-arm-tube{box-shadow:0 calc(22 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.4)}
#ttWorld.tt-lifted .tt-head{transform:rotate(22deg) scale(1.08);box-shadow:0 calc(24 * var(--u)) calc(28 * var(--u)) rgba(0,0,0,.45);cursor:grabbing}
.tt-pivotcap{
  z-index:8;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e9e9ec,#8c8d92 60%,#4a4a4f);
  box-shadow:0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.6);
}

/* ---------------- while the tonearm is held ----------------
   Where the needle will land — a time, or (Shift) the song it snaps to. */
.tt-snap{
  z-index:9;transform:translate(calc(-100% - 22 * var(--u)),-50%);pointer-events:none;
  background:rgba(18,18,20,.9);border:1px solid rgba(255,255,255,.08);border-radius:8px;
  padding:5px 9px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.tt-snap small{display:block;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.55);margin-top:1px}
.tt-bands-album i{box-shadow:0 0 0 calc(2 * var(--u)) color-mix(in srgb,var(--accent) 55%,transparent),0 0 calc(10 * var(--u)) color-mix(in srgb,var(--accent) 35%,transparent)}

/* ---------------- speed control ----------------
   Speed is a playback setting, so the row shows in both modes: beside the
   deck in turntable mode, one compact line under the transport in Cover
   mode (the stop/start switch belongs to the deck). */
.tt-speed{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
#npview:not(.np-tt) .tt-speed{flex-direction:row;align-items:center;gap:10px;margin-top:6px;padding-top:0;border-top:0;width:100%}
#npview:not(.np-tt) .tt-speed-row{flex-wrap:nowrap;order:0}
#npview:not(.np-tt) .tt-speed input[type=range]{flex:1;min-width:80px}
#npview:not(.np-tt) .tt-speed .tt-rpm-read{min-width:0}
#npview:not(.np-tt) .tt-brake{display:none}
.tt-speed-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tt-presets{display:inline-flex;background:rgba(255,255,255,.08);border-radius:999px;padding:2px;gap:2px}
.tt-presets .seg-btn{color:rgba(255,255,255,.7)}
.tt-rpm-read{font-size:12px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;min-width:92px}
.tt-reset{padding:4px 10px;font-size:11.5px}
.tt-speed input[type=range]{width:100%;--fg:var(--accent)}
.tt-speed input[type=range]::-webkit-slider-thumb{opacity:1}
.tt-brake{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.8);flex-wrap:wrap}
.tt-brake input{accent-color:var(--accent);width:14px;height:14px}
.tt-brake .set-hint{margin:0;font-size:11px;color:rgba(255,255,255,.45)}

/* Narrow or portrait windows: deck on top, everything else below. */
@media (max-aspect-ratio: 5/4), (max-width: 900px){
  #npview.np-tt .np-inner{flex-direction:column;padding:48px 16px 16px}
  #npview.np-tt .np-side{width:min(560px,92vw)}
  .tt-stage{width:min(calc(100vw - 32px), calc((100vh - 330px) * 1500 / 760))}
}

/* ---------------- the player bar's speed control ----------------
   Beside the volume and built the same way: a button (click: normal
   speed, click again: back to the chosen one) and a slider that opens on
   hover. The badge shows the RPM whenever it is not 33⅓. */
.spdwrap{display:flex;align-items:center;gap:4px}
.spdwrap input[type=range]{width:0;opacity:0;transition:width .18s ease,opacity .18s ease;--fg:var(--accent)}
.spdwrap:hover input[type=range],.spdwrap:focus-within input[type=range]{width:64px;opacity:1}
.spd-btn{position:relative}
.spd-btn b{
  position:absolute;right:-2px;bottom:0;font-size:7.5px;font-weight:700;letter-spacing:-.02em;
  background:var(--accent);color:#fff;border-radius:3px;padding:0 2px;line-height:1.35;
}
.spd-btn b:empty{display:none}