/* 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);
}

/* 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;
  }
}