/* ============================================================
   VB VISUALIZER — UI chrome (console panel + phone stage)
   The canvas content itself is drawn in js/render.js.
   ============================================================ */
:root{
  --bg:#111214;
  --panel:#17181C;
  --panel-2:#1E2025;
  --line:rgba(255,255,255,.07);
  --text:#ECEBE7;
  --dim:#9A9B94;
  --accent:#D9A44A;        /* brass */
  --accent-ink:#1A1206;    /* text on accent */
  --soft:#8FB5AE;          /* muted teal, used sparingly for status */
  --glow:rgba(241,238,230,.07); /* updated live by JS from active theme + beat */
  --panel-w:300px;              /* dragged by #panelResize, restored from prefs */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* #app fills the viewport exactly and each pane scrolls internally,
     so the body itself never needs to scroll on desktop. `clip` (not
     `hidden`) also blocks focus-triggered scrollIntoView jumps, which
     `hidden` alone does not. */
  overflow:clip;
}
#app{
  display:grid;
  grid-template-columns:var(--panel-w) 1fr;
  grid-template-rows:minmax(0,1fr);
  height:100vh;
  height:100dvh; /* avoids the jump when mobile browser chrome shows/hides */
  position:relative;   /* anchors the resize handle */
}

/* Drag handle straddling the panel edge. Wider than it looks so it's
   grabbable, but visually just the existing 1px border until hovered. */
#panelResize{
  position:absolute;
  top:0;bottom:0;
  left:var(--panel-w);
  width:9px;
  margin-left:-4px;
  cursor:col-resize;
  z-index:20;
  background:transparent;
  border:none;padding:0;
  transition:background .15s;
}
#panelResize:hover,#panelResize.dragging{background:var(--accent)}
#panelResize:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
body.resizing{cursor:col-resize;user-select:none}

/* ---------- Console panel ---------- */
#console{
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:20px 18px 14px;
  overflow-y:auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:4px;   /* sections carry their own spacing via padding + rules */
}
#console>div:first-child{margin-bottom:10px}
#console::-webkit-scrollbar{width:8px}
#console::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

.wordmark{
  display:flex;align-items:center;gap:9px;
  font-weight:700;
  font-size:17px;
  letter-spacing:.01em;
}
.wordmark::before{
  content:"";
  width:11px;height:11px;border-radius:3px;
  background:var(--accent);
  flex-shrink:0;
}
.tagline{font-size:12px;color:var(--dim);margin-top:4px}

/* Showcase demo banner — explains why the Track section and the lyric sources
   aren't there, rather than leaving a visitor to wonder where they went. */
.demo-note{
  margin-top:10px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:8px;
  background:var(--panel-2);
  font-size:11.5px;
  line-height:1.45;
  color:var(--dim);
}
.demo-note strong{color:var(--text);font-weight:700}

/* Sections collapse so the panel stays navigable — it carries ~60 controls
   now, and everything open at once was a single unbroken scroll. */
details.sec{
  display:block;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
}
details.sec:last-of-type{border-bottom:none}
.sec-body{display:flex;flex-direction:column;gap:10px;padding-top:6px}

.sec-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
summary.sec-label{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;gap:8px;
  padding:9px 0;
  user-select:none;
  transition:color .12s;
}
summary.sec-label::-webkit-details-marker{display:none}
summary.sec-label::after{
  content:"";
  width:6px;height:6px;flex-shrink:0;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);
  margin-left:auto;margin-right:4px;
  transition:transform .15s;
}
details.sec[open]>summary.sec-label::after{transform:rotate(45deg) translate(-2px,-2px)}
summary.sec-label:hover{color:var(--text)}
summary.sec-label:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;border-radius:5px}

/* What's set in there, so a collapsed section still tells you something */
.sec-sum{
  font-size:10.5px;font-weight:500;
  letter-spacing:.02em;text-transform:none;
  color:var(--dim);opacity:.7;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
details.sec[open] .sec-sum{display:none}   /* redundant once the controls are visible */

/* Track */
#dropzone{
  border:1.5px dashed rgba(255,255,255,.16);
  border-radius:14px;
  padding:16px 12px;
  text-align:center;
  font-size:13px;
  color:var(--dim);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
#dropzone:hover,#dropzone.drag{border-color:var(--accent);background:rgba(217,164,74,.07);color:var(--text)}
#dropzone strong{color:var(--text);font-weight:500}
#dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#filename{font-size:12px;color:var(--dim);word-break:break-all;display:none}

.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:11px;color:var(--dim)}
.field input[type=text]{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font:inherit;
  font-size:13px;
  padding:9px 10px;
}
.field input[type=text]:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

.field select{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font:inherit;
  font-size:13px;
  padding:9px 10px;
  cursor:pointer;
}
.field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

/* Native colour wells are chrome-heavy; strip them back to a swatch */
.field input[type=color]{
  width:100%;height:34px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:3px;
  cursor:pointer;
}
.field input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.field input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
.field input[type=color]::-moz-color-swatch{border:none;border-radius:5px}
.field input[type=color]:disabled{opacity:.4;cursor:not-allowed}
.field input[type=color]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Playback */
.transport{display:flex;align-items:center;gap:12px}
#playBtn{
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s, transform .1s;
}
#playBtn:hover{background:#262932}
#playBtn:active{transform:scale(.94)}
#playBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#playBtn svg{width:19px;height:19px;fill:currentColor}
#timeLabel{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
#status{font-size:12px;color:var(--soft);min-height:16px}
#status.warn{color:var(--accent)}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.14);
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);
  border:none;
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:none;
}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Look */
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{
  flex:1;border:none;border-radius:7px;
  background:transparent;color:var(--dim);
  font:inherit;font-size:13px;font-weight:500;
  min-height:44px;
  padding:0;cursor:pointer;
  transition:background .15s,color .15s;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Still usable — you may be picking a mode before switching back on — just
   visibly not in effect right now. */
.seg.inert{opacity:.45}

.themes{display:flex;gap:6px;flex-wrap:wrap}
.theme-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:transparent;border:none;cursor:pointer;
  color:var(--dim);font:inherit;font-size:11px;
  min-height:64px;
  padding:6px 0;border-radius:8px;
}
.theme-btn .sw{
  width:32px;height:32px;border-radius:50%;
  border:2px solid transparent;
  transition:transform .12s,border-color .12s;
}
.theme-btn:hover .sw{transform:scale(1.1)}
.theme-btn.on{color:var(--text)}
.theme-btn.on .sw{border-color:#fff}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Six themes wrap to two rows; keep them from going postage-stamp small */
.theme-btn{flex:1 1 26%;min-width:58px}
/* Auto has nothing to show until a cover has been read */
.theme-btn.pending .sw{opacity:.35}

/* Custom theme pickers */
#customColors[hidden]{display:none}
#customColors{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.cc-row{display:flex;align-items:center;gap:6px}
.cc-row label{font-size:11px;color:var(--dim);width:72px;flex-shrink:0}
.cc-row input[type=color]{
  flex:1;min-width:0;height:30px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:7px;padding:3px;cursor:pointer;
}
.cc-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.cc-row input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
.cc-row input[type=color]::-moz-color-swatch{border:none;border-radius:4px}
.cc-row input[type=color]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cc-grab{width:auto;flex-shrink:0;padding:0 10px;min-height:30px;font-size:11.5px}

/* Layers + assets + lyrics */
.toggle{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;cursor:pointer;user-select:none;
  min-height:38px;
  padding:2px 0;
}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .sw2{
  width:38px;height:22px;border-radius:11px;
  background:rgba(255,255,255,.14);
  position:relative;flex-shrink:0;
  transition:background .15s;
}
.toggle .sw2::after{
  content:"";position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;transition:left .15s;
}
.toggle input:checked + .sw2{background:var(--accent)}
.toggle input:checked + .sw2::after{left:19px}
.toggle input:focus-visible + .sw2{outline:2px solid var(--accent);outline-offset:2px}

.mini-btn{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font:inherit;font-size:12.5px;
  min-height:38px;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.mini-btn:hover{background:#262932;border-color:rgba(255,255,255,.16)}
.mini-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Framing controls, indented under the upload they belong to */
.framing[hidden]{display:none}
.framing{
  display:flex;flex-direction:column;gap:9px;
  padding:10px 0 4px 10px;
  border-left:2px solid var(--line);
}
.fit-seg button{min-height:32px;font-size:12px}

.slider-row{display:flex;flex-direction:column;gap:6px}
.slider-row .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}

/* Lyrics extras */
#lyrStatus{min-height:14px}
#lyrStatus.warn{color:var(--accent)}
#lrcPasteArea{
  width:100%;
  min-height:110px;
  resize:vertical;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font-family:ui-monospace,Consolas,monospace;
  font-size:12px;
  padding:9px 10px;
}
#lrcPasteArea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Record — the canvas recorder is the primary path now, Clean screen the fallback */
#recBtn{
  width:100%;
  background:var(--accent);
  border:none;border-radius:10px;
  color:var(--accent-ink);font:inherit;font-size:14px;font-weight:700;
  min-height:46px;
  padding:0;cursor:pointer;
  transition:filter .15s,transform .1s,background .15s;
}
#recBtn:hover{filter:brightness(1.08)}
#recBtn:active{transform:scale(.98)}
#recBtn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
#recBtn:disabled{background:var(--panel-2);color:var(--dim);cursor:not-allowed;filter:none}
#recBtn.recording{
  background:#E5484D;color:#fff;
  animation:recPulse 1.6s ease-in-out infinite;
}
@keyframes recPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}
  50%    {box-shadow:0 0 0 7px rgba(229,72,77,0)}
}
@media (prefers-reduced-motion:reduce){
  #recBtn.recording{animation:none}
}
#recStatus{min-height:14px}
#recStatus.warn{color:var(--accent)}
#fpsSeg button{min-height:34px;font-size:12px}

/* In / out points */
#recRangeRow[hidden]{display:none}
#recRangeRow{display:flex;flex-direction:column;gap:6px}
.rr-row{display:flex;align-items:center;gap:6px}
.rr-row label{font-size:11px;color:var(--dim);width:34px;flex-shrink:0}
.rr-row input[type=text]{
  flex:1;min-width:0;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font:inherit;font-size:13px;
  font-variant-numeric:tabular-nums;
  padding:7px 9px;
}
.rr-row input[type=text]:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.rr-row .rr-set{width:auto;flex-shrink:0;padding:0 10px;min-height:32px;font-size:11.5px}
.hint{font-size:11.5px;color:var(--dim);line-height:1.45}

footer{margin-top:auto;font-size:11px;color:var(--dim);line-height:1.6;padding-top:6px;border-top:1px solid var(--line)}
footer b{color:var(--text);font-weight:500}

/* ---------- Stage ---------- */
#stage{
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  min-width:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
#phone{
  /* the 48px is #stage's padding; the rest of the width is whatever the
     panel isn't using, so this has to track --panel-w rather than hardcode it */
  height:min(100vh - 48px, calc((100vw - var(--panel-w) - 48px) * 16 / 9));
  height:min(100dvh - 48px, calc((100vw - var(--panel-w) - 48px) * 16 / 9));
  aspect-ratio:9/16;
  border-radius:26px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 0 110px var(--glow);
  transition:box-shadow .2s;
  position:relative;
}
#cv{width:100%;height:100%;display:block}

/* ---------- Clean mode (for screen recording) ---------- */
body.clean #console{display:none}
body.clean #app{grid-template-columns:1fr}
body.clean #stage{padding:0}
body.clean #phone{
  height:100vh;height:100dvh;border-radius:0;border:none;box-shadow:none;
}
#cleanHint{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.6);color:#fff;
  font-size:13px;padding:8px 16px;border-radius:20px;
  opacity:0;pointer-events:none;transition:opacity .4s;
  z-index:10;
}
#cleanHint.show{opacity:1}

/* ---------- Lyrics search modal ---------- */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  z-index:50;
}
.modal-overlay[hidden]{display:none}
.modal-panel{
  width:100%;max-width:440px;max-height:min(600px,80vh);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:700}
.modal-close{
  background:transparent;border:none;color:var(--dim);
  font-size:22px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:6px;
}
.modal-close:hover{color:var(--text);background:rgba(255,255,255,.08)}
.modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal-search{display:flex;gap:8px}
.modal-search input{
  flex:1;min-width:0;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  font:inherit;font-size:13px;
  padding:10px 12px;
}
.modal-search input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.modal-search button{
  width:42px;flex-shrink:0;
  background:var(--accent);
  border:none;border-radius:10px;
  color:var(--accent-ink);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:filter .15s;
}
.modal-search button:hover{filter:brightness(1.08)}
.modal-search button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.modal-status{font-size:12px;color:var(--dim);min-height:14px}
.modal-status.warn{color:var(--accent)}
.modal-results{
  display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;
  min-height:0;
}
.modal-result{
  width:100%;text-align:left;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  font:inherit;
  padding:11px 12px;
  cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  transition:background .15s,border-color .15s;
}
.modal-result:hover{background:#262932;border-color:var(--accent)}
.modal-result:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.modal-result .mr-title{font-size:13.5px;font-weight:700}
.modal-result .mr-tags{display:flex;align-items:center;gap:6px}
.modal-result .mr-dur{
  font-size:11px;color:var(--dim);
  background:rgba(255,255,255,.06);
  border-radius:5px;padding:2px 6px;
}
.modal-result .mr-badge{font-size:11px;font-weight:700;border-radius:5px;padding:2px 6px}
.modal-result .mr-badge.synced{background:rgba(143,181,174,.18);color:var(--soft)}
.modal-result .mr-badge.plain{background:rgba(255,255,255,.08);color:var(--dim)}
.modal-result .mr-sub{font-size:12px;color:var(--dim)}

/* ---------- Lyrics editor ---------- */
.led-panel{max-width:620px;max-height:min(760px,88vh)}
.led-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.led-bar .mini-btn{width:auto;flex:1;padding:0 12px}
.led-clock{
  font-size:13px;color:var(--dim);
  font-variant-numeric:tabular-nums;
  min-width:46px;text-align:center;
}
#lyrEdSyncBtn.on{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}

/* The tap target. Deliberately oversized — it gets hit once per line, in
   time with the music, often on a laptop trackpad. */
.led-stamp{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  font:inherit;font-size:14px;font-weight:700;
  min-height:56px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .12s,transform .06s,border-color .12s;
}
.led-stamp .led-key{
  font-size:11px;font-weight:500;color:var(--dim);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;
  flex-shrink:0;
}
#lyrEdStampLabel{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;   /* long words must not stretch the button */
}
.led-stamp:hover{background:#262932}
.led-stamp:active{transform:scale(.99)}
.led-stamp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#lyrEditor.syncing .led-stamp{
  background:var(--accent);color:var(--accent-ink);border-color:transparent;
}
#lyrEditor.syncing .led-stamp .led-key{color:var(--accent-ink);border-color:rgba(0,0,0,.25)}

/* Grain switch sits inline in the toolbar, so it shrinks to its content */
#lyrEdGrain{flex-shrink:0;padding:2px;gap:2px}
#lyrEdGrain button{min-height:30px;padding:0 10px;font-size:12px;flex:0 0 auto}

/* Editor transport: scrub to the part you're fixing, slow it down to tap it */
.led-transport{gap:10px}
#lyrEdSeek{flex:1;min-width:120px}
#lyrEdSpeed{flex-shrink:0;padding:2px;gap:2px}
#lyrEdSpeed button{min-height:28px;padding:0 9px;font-size:11.5px;flex:0 0 auto}

.led-list{
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;min-height:0;flex:1;
  padding-right:4px;
}
.led-empty{font-size:12.5px;color:var(--dim);line-height:1.5;padding:18px 4px}

.led-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:3px 6px;border-radius:8px;
  border:1px solid transparent;
}
/* Quiet markers on the timestamp: teal = real word timings, amber = estimated
   and worth checking. Tapping any word in the line clears the amber. */
.led-row.word-timed .led-time{box-shadow:inset 2px 0 0 var(--soft)}
.led-row.word-est .led-time{box-shadow:inset 2px 0 0 var(--accent)}
.led-row.playing{background:rgba(255,255,255,.05)}
.led-row.cursor{border-color:var(--accent);background:rgba(217,164,74,.10)}
.led-row.bad .led-time{color:#FF8A6A}

.led-time{
  flex-shrink:0;width:74px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  color:var(--text);font:inherit;font-size:11.5px;
  font-variant-numeric:tabular-nums;
  min-height:30px;cursor:pointer;
  transition:background .12s,color .12s;
}
.led-time:hover{background:var(--accent);color:var(--accent-ink)}
.led-time:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.led-nudge{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.led-nudge button{
  width:20px;height:14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:4px;
  color:var(--dim);font:inherit;font-size:10px;line-height:1;
  cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.led-nudge button:hover{background:#262932;color:var(--text)}
.led-nudge button:focus-visible{outline:1px solid var(--accent)}

.led-text{
  flex:1;min-width:0;
  background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--text);font:inherit;font-size:13px;
  padding:6px 8px;
}
.led-text:hover{border-color:var(--line)}
.led-text:focus-visible{outline:none;border-color:var(--accent);background:var(--panel-2)}
.led-text::placeholder{color:var(--dim);font-style:italic}

.led-del{
  flex-shrink:0;width:24px;height:24px;
  background:transparent;border:none;border-radius:5px;
  color:var(--dim);font-size:16px;line-height:1;cursor:pointer;
}
.led-del:hover{background:rgba(255,255,255,.08);color:#FF8A6A}
.led-del:focus-visible{outline:1px solid var(--accent)}

/* Word chips — only the cursor row shows them */
.led-words{
  flex-basis:100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:7px 2px 3px 80px;
}
.led-words-empty{font-size:11.5px;color:var(--dim);font-style:italic}
.led-word{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:var(--panel-2);
  border:1px solid var(--line);border-radius:6px;
  color:var(--dim);font:inherit;
  padding:3px 7px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.led-word .lw-text{font-size:12.5px;line-height:1.15}
.led-word .lw-time{
  font-size:9.5px;font-variant-numeric:tabular-nums;
  color:var(--dim);opacity:.75;
}
.led-word.timed{color:var(--text);border-color:rgba(143,181,174,.45)}
.led-word.timed .lw-time{color:var(--soft);opacity:1}
.led-word:hover{background:#262932;color:var(--text)}
.led-word.cursor{
  border-color:var(--accent);background:rgba(217,164,74,.16);color:var(--text);
}
.led-word:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.led-word-clear{
  background:transparent;border:none;
  color:var(--dim);font:inherit;font-size:11px;
  text-decoration:underline;cursor:pointer;padding:2px 4px;margin-left:2px;
}
.led-word-clear:hover{color:var(--text)}
.led-word-clear:focus-visible{outline:1px solid var(--accent)}

@media (max-width:880px){
  .led-nudge{display:none}      /* nudging is a desktop-precision affordance */
  .led-time{width:66px}
  .led-words{padding-left:0}
  /* Four controls don't fit one narrow row — give the grain switch its own */
  #lyrEdGrain{flex:1 1 100%}
  #lyrEdGrain button{flex:1 1 0}
}

/* ---------- Mobile ---------- */
@media (max-width:880px){
  body{overflow:auto}
  #panelResize{display:none}   /* single column — nothing to resize */
  #app{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;min-height:100vh;min-height:100dvh}
  #stage{order:0;padding:14px;height:auto;overflow:visible}
  #phone{height:60vh;height:60dvh}
  #console{order:1;border-right:none;border-top:1px solid var(--line);height:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}