/* Lamproom: the producer's tally board. Coal black, lamp amber, cathode cyan. */
:root{
  --coal:#07090b; --pit:#0b0f12; --panel:#0e1518; --panel2:#111b1f; --bezel:#1b2529; --edge:#26343a;
  --line:#153d42; --line2:#1f5b62;
  --amber:#ffb020; --amber2:#ffcf5c; --amber-dim:#6e4a0c; --amber-glow:rgba(255,176,32,.35);
  --cyan:#3ae0ff; --cyan-dim:#0d5566; --cyan-glow:rgba(58,224,255,.25);
  --ash:#9aa7ab; --ash2:#5f6c71; --ink:#e8eef0;
  --red:#ff4a3d; --green:#57ff86;
  --ui:'Chakra Petch',system-ui,sans-serif; --crt:'VT323','Courier New',monospace;
  --r:6px; --rail:250px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--coal);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--cyan)}
::selection{background:var(--amber);color:#000}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#crt{pointer-events:none;position:fixed;inset:0;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.55}
#crt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
@media (prefers-reduced-motion:no-preference){ #crt{animation:flicker 9s infinite steps(1)} }
@keyframes flicker{0%,97%{opacity:.55}98%{opacity:.62}99%{opacity:.5}100%{opacity:.55}}

/* ---------- shell ---------- */
#app{min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 16px;
  background:linear-gradient(180deg,#141c20,#0b1114);border-bottom:1px solid var(--edge);box-shadow:0 2px 0 #000,0 8px 24px rgba(0,0,0,.6)}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.top .brand img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 12px var(--amber-glow)}
.wordmark{font-weight:700;letter-spacing:.14em;font-size:20px;
  background:linear-gradient(180deg,#f4f7f8 0%,#c7d0d4 45%,#7f8d93 50%,#d9e1e4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(58,224,255,.15)}
.top nav{display:flex;gap:4px;margin-left:8px}
.top nav a{padding:7px 12px;border-radius:4px;text-decoration:none;color:var(--ash);font-weight:500;font-size:14px;border:1px solid transparent}
.top nav a.vault{color:var(--cyan)}
.song-card h3 .alias{display:block;font-family:var(--crt);font-size:14px;font-weight:400;color:var(--ash2);letter-spacing:.04em}
.top nav a.on{color:var(--amber);border-color:var(--amber-dim);background:rgba(255,176,32,.06);box-shadow:inset 0 0 12px rgba(255,176,32,.08)}
.top .sp{flex:1}
.lamp{display:inline-flex;align-items:center;gap:7px;font-family:var(--crt);font-size:17px;color:var(--ash);letter-spacing:.04em}
.lamp i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.lamp i.amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.lamp i.red{background:var(--red);box-shadow:0 0 8px var(--red)}
.lamp i.off{background:#2a3338;box-shadow:none}
.main{flex:1;display:flex;min-height:0}
.rail{width:var(--rail);flex:none;border-right:1px solid var(--edge);background:var(--pit);padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.rail h4,.panel h4{margin:0 0 6px;color:var(--cyan);font-family:var(--crt);font-size:19px;font-weight:400;letter-spacing:.06em}
.rail .proj{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);color:var(--ink);text-align:left;width:100%}
.rail .proj.on{border-color:var(--amber);box-shadow:0 0 0 1px rgba(255,176,32,.25),inset 0 0 20px rgba(255,176,32,.06)}
.rail .proj .sw{width:10px;height:10px;border-radius:2px;background:var(--amber)}
.rail .proj .sw.cyan{background:var(--cyan)} .rail .proj .sw.ash{background:var(--ash)} .rail .proj .sw.red{background:var(--red)} .rail .proj .sw.green{background:var(--green)}
.rail .proj small{display:block;color:var(--ash2);font-family:var(--crt);font-size:15px}
.rail .proj b{font-weight:600;font-size:14px}
.content{flex:1;min-width:0;padding:18px 20px 90px}

/* ---------- generic pieces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border-radius:4px;border:1px solid var(--edge);
  background:linear-gradient(180deg,#1a2428,#0f1619);color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.02em;box-shadow:0 2px 0 #000;white-space:nowrap}
.btn:hover{border-color:var(--cyan-dim)} .btn:active{transform:translateY(1px);box-shadow:none}
.btn.amber{color:#1a1000;background:linear-gradient(180deg,var(--amber2),var(--amber));border-color:#b87a0c;text-shadow:none}
.btn.cyan{color:var(--cyan);border-color:var(--cyan-dim);box-shadow:0 2px 0 #000,inset 0 0 14px rgba(58,224,255,.08)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--ash)} .btn.ghost:hover{color:var(--ink);border-color:var(--edge)}
.btn.sm{padding:5px 9px;font-size:12px} .btn.danger{color:var(--red)} .btn:disabled{opacity:.45;cursor:default}
.btn.icon{padding:8px;width:36px;height:36px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;color:var(--ash);font-weight:500}
.in,input.in,select.in,textarea.in{width:100%;background:#060a0c;border:1px solid var(--edge);border-radius:4px;padding:9px 11px;color:var(--ink);min-height:38px}
.in:focus{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-glow);outline:none}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
textarea.in{min-height:120px;resize:vertical;line-height:1.5}
.readout{font-family:var(--crt);color:var(--amber);font-size:22px;letter-spacing:.04em;text-shadow:0 0 10px var(--amber-glow)}
.readout.cyan{color:var(--cyan);text-shadow:0 0 10px var(--cyan-glow)}
.tag{display:inline-block;padding:2px 8px;border:1px solid currentColor;border-radius:3px;font-family:var(--crt);font-size:16px;letter-spacing:.06em;line-height:1.2;text-transform:uppercase}
.stage-idea{color:var(--ash)} .stage-writing{color:var(--cyan)} .stage-demo{color:#8ad4ff} .stage-recording{color:var(--amber)} .stage-mixing{color:#ff8a3d} .stage-mastering{color:#d59cff} .stage-released{color:var(--green)}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 2px 0 #000}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.muted{color:var(--ash2)} .small{font-size:12px}
.empty{padding:28px;text-align:center;color:var(--ash2);border:1px dashed var(--edge);border-radius:var(--r)}
.empty b{display:block;color:var(--ash);margin-bottom:4px}
hr.rule{border:0;border-top:1px solid var(--edge);margin:14px 0}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:#0f1619;border:1px solid var(--amber-dim);color:var(--amber);padding:9px 16px;border-radius:4px;font-family:var(--crt);font-size:18px;z-index:99;transition:.2s;pointer-events:none;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--red);color:var(--red)}

/* ---------- tape counter progress ---------- */
.tape{display:flex;gap:2px;height:10px}
.tape i{flex:1;background:#1a2226;border-radius:1px}
.tape i.on{background:var(--amber);box-shadow:0 0 6px var(--amber-glow)}
.tape i.half{background:var(--amber-dim)}

/* ---------- dashboard ---------- */
.songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.song-card{display:block;position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:14px;text-decoration:none;color:var(--ink);box-shadow:0 2px 0 #000;transition:border-color .15s}
.song-card:hover{border-color:var(--cyan-dim)}
.song-card .t{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.song-card h3{margin:0;font-size:17px;font-weight:600;letter-spacing:.01em}
.song-card .meta{display:flex;gap:12px;font-family:var(--crt);font-size:16px;color:var(--ash);margin:6px 0 10px}
.song-card .meta b{color:var(--amber);font-weight:400}
.song-card canvas{width:100%;height:40px;display:block;margin:8px 0 4px;opacity:.9}
.song-card .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding-right:44px;font-family:var(--crt);font-size:15px;color:var(--ash2)}
.song-card .foot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.song-card .play{position:absolute;right:12px;bottom:12px}
.play{width:38px;height:38px;border-radius:50%;border:1px solid var(--cyan-dim);background:radial-gradient(circle at 40% 35%,#1b2a30,#0a1114);color:var(--cyan);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #000,0 0 14px rgba(58,224,255,.12)}
.play.on{color:var(--amber);border-color:var(--amber-dim);box-shadow:0 0 0 2px #000,0 0 16px var(--amber-glow)}
.dash-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.dash-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:.02em}
.dash-head .crumbs{font-family:var(--crt);font-size:18px;color:var(--cyan)}
.stats{display:flex;gap:18px;font-family:var(--crt);font-size:17px;color:var(--ash)}
.stats b{color:var(--amber);font-weight:400}

/* ---------- song page ---------- */
.song-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;margin-bottom:12px}
.song-head h1{margin:0;font-size:26px;font-weight:700;letter-spacing:.01em;line-height:1.1}
.song-head h1 input{background:transparent;border:0;border-bottom:1px dashed transparent;font:inherit;color:inherit;width:100%;padding:0}
.song-head h1 input:hover,.song-head h1 input:focus{border-bottom-color:var(--cyan-dim);outline:0}
.meta-strip{display:flex;gap:0;border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);overflow:hidden;flex-wrap:wrap}
.meta-strip .m{display:flex;flex-direction:column;padding:8px 14px;border-right:1px solid var(--edge);min-width:88px}
.meta-strip .m:last-child{border-right:0}
.meta-strip .m label{font-size:11px;color:var(--ash2);letter-spacing:.06em;text-transform:uppercase}
.meta-strip .m input,.meta-strip .m select{background:transparent;border:0;padding:0;font-family:var(--crt);font-size:24px;color:var(--cyan);width:100%;text-shadow:0 0 10px var(--cyan-glow);min-width:60px}
.meta-strip .m select{appearance:none;cursor:pointer;color:var(--amber);text-shadow:0 0 10px var(--amber-glow)}
.meta-strip .m input:focus,.meta-strip .m select:focus{outline:0}

.deck{background:linear-gradient(180deg,#0d1417,#0a0f12);border:1px solid var(--edge);border-radius:var(--r);padding:12px;margin-bottom:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 2px 0 #000}
.deck .bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.deck .time{font-family:var(--crt);font-size:26px;color:var(--amber);text-shadow:0 0 10px var(--amber-glow);min-width:120px}
.deck .time span{color:var(--ash2);text-shadow:none}
.deck .src{flex:1;min-width:180px}
.deck .src select{min-height:34px;padding:5px 30px 5px 10px}
.wave-wrap{position:relative;height:150px;background:#050809;border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:crosshair;touch-action:pan-y}
.wave-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.wave-wrap .sections{position:absolute;left:0;right:0;top:0;height:22px;pointer-events:none}
.wave-wrap .sec{position:absolute;top:0;bottom:0;border-left:1px dashed var(--cyan-dim);padding:2px 5px;font-family:var(--crt);font-size:15px;color:var(--cyan);white-space:nowrap;letter-spacing:.06em;pointer-events:auto;cursor:pointer;height:22px}
.wave-wrap .sec:hover{color:var(--amber)}
.wave-wrap .pins{position:absolute;left:0;right:0;bottom:0;height:26px}
.wave-wrap .pin{position:absolute;bottom:4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid var(--amber);background:#0a0f12;cursor:pointer;box-shadow:0 0 8px var(--amber-glow)}
.wave-wrap .pin.done{border-color:var(--ash2);box-shadow:none}
.wave-wrap .pin::before{content:"";position:absolute;left:4px;bottom:12px;width:1px;height:14px;background:var(--amber-dim)}
.wave-wrap .head{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);box-shadow:0 0 10px var(--amber);pointer-events:none}
.wave-wrap .empty-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ash2);font-family:var(--crt);font-size:18px;letter-spacing:.06em}
.now-notes{display:flex;gap:8px;overflow-x:auto;padding:8px 0 0;min-height:14px;scrollbar-width:thin}
.now-note{flex:none;max-width:320px;padding:7px 10px;border:1px solid var(--amber-dim);background:rgba(255,176,32,.06);border-radius:4px;font-size:13px}
.now-note b{font-family:var(--crt);font-size:15px;color:var(--amber);font-weight:400;margin-right:6px}
.now-note.dim{opacity:.5;border-color:var(--edge);background:transparent}

/* matrix */
.matrix-wrap{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);margin-bottom:12px;-webkit-overflow-scrolling:touch}
table.matrix{border-collapse:separate;border-spacing:0;min-width:100%}
.matrix th,.matrix td{padding:0;border-bottom:1px solid var(--edge);border-right:1px solid #0a0f12}
.matrix thead th{position:sticky;top:0;background:var(--panel2);z-index:2;font-family:var(--crt);font-size:16px;letter-spacing:.06em;color:var(--cyan);font-weight:400;padding:8px 6px;text-align:center;white-space:nowrap;min-width:92px;cursor:pointer}
.matrix thead th:first-child{text-align:left;cursor:default}
.matrix thead th small{display:block;color:var(--ash2);font-size:14px;letter-spacing:0}
.matrix tbody th{position:sticky;left:0;background:var(--panel2);z-index:1;text-align:left;font-weight:500;font-size:13px;padding:7px 10px;white-space:nowrap;cursor:pointer;min-width:150px}
.matrix tbody th .ic{display:inline-block;width:20px;color:var(--cyan);margin-right:6px;text-align:center}
.matrix tbody th:hover{color:var(--amber)}
.cell{display:flex;align-items:center;justify-content:center;margin:5px;height:26px;border-radius:3px;background:#182126;border:1px solid #223036;position:relative;cursor:pointer;transition:background .12s;width:calc(100% - 10px);font-family:var(--crt);font-size:13px;letter-spacing:.04em;color:var(--ash2);user-select:none;white-space:nowrap;overflow:hidden;padding:0 4px}
.cell.done{color:#2a1a00}
.cell.doing{color:var(--amber2);text-shadow:0 0 4px #000}
.cell.na{color:#2f3b41}
.cell.done{background:var(--amber);border-color:#ffd070;box-shadow:0 0 8px var(--amber-glow),inset 0 -6px 10px rgba(0,0,0,.18)}
.cell.doing{background:repeating-linear-gradient(135deg,var(--amber-dim) 0 6px,#3a2a08 6px 12px);border-color:#8a5a0e}
.cell.na{background:transparent;border-style:dashed;border-color:#1a2328}
.cell.note::after{content:"";position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.matrix .add{color:var(--ash2);font-family:var(--crt);font-size:15px;padding:8px 10px;cursor:pointer;white-space:nowrap}
.matrix .add:hover{color:var(--cyan)}
.legend{display:flex;gap:14px;font-family:var(--crt);font-size:15px;color:var(--ash2);padding:6px 10px;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:10px;border-radius:2px;vertical-align:middle;margin-right:5px}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--edge);margin-bottom:12px;overflow-x:auto}
.tabs button{background:transparent;border:0;padding:9px 14px;color:var(--ash);font-weight:600;font-size:13px;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--amber);border-bottom-color:var(--amber)}
.tabs button small{font-family:var(--crt);font-size:14px;color:var(--ash2);margin-left:4px}
.note{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:12px 14px;border:1px solid var(--edge);border-left:4px solid var(--ash2);border-radius:6px;background:var(--panel2);align-items:start;margin-bottom:10px;box-shadow:0 2px 0 #000}
.note.timed{border-left-color:var(--amber)} .note.sectioned{border-left-color:var(--cyan)}
.note .ts{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:74px;padding:6px 8px;border-radius:4px;background:#060a0c;border:1px solid var(--edge);font-family:var(--crt);font-size:22px;color:var(--amber);cursor:pointer;line-height:1.1;text-shadow:0 0 8px var(--amber-glow)}
.note .ts:hover{border-color:var(--amber-dim)}
.note .ts.none{color:var(--ash2);text-shadow:none;font-size:16px;cursor:default}
.note .ctx{display:block;margin-top:4px;font-size:13px;color:var(--cyan);text-shadow:none;text-align:center;line-height:1.2}
.note .body{font-size:15px;line-height:1.5;white-space:pre-wrap;color:var(--ink)}
.note .by{font-size:12px;color:var(--ash);margin-top:6px;font-family:var(--crt);font-size:14px;letter-spacing:.04em}
.note.done{opacity:.55;border-left-color:var(--green)} .note.done .body{text-decoration:line-through;color:var(--ash)}
.note .acts{display:flex;gap:6px;align-items:center}
.chk{width:28px;height:28px;border:1px solid var(--edge);border-radius:3px;background:#060a0c;display:inline-flex;align-items:center;justify-content:center;color:var(--green);font-size:15px}
.chk.on{border-color:var(--green);box-shadow:0 0 8px rgba(87,255,134,.3)}
.audio-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--edge);border-radius:4px;background:var(--pit);margin-bottom:8px}
.audio-row .nm{font-weight:600;font-size:14px}
.audio-row .nm .tag{margin-left:8px;font-size:13px}
.audio-row .sub{font-family:var(--crt);font-size:15px;color:var(--ash2)}
.audio-row.cur{border-color:var(--amber-dim)}
.drop{border:2px dashed var(--amber-dim);border-radius:var(--r);padding:22px;text-align:center;color:var(--amber);font-family:var(--crt);font-size:20px;letter-spacing:.06em;cursor:pointer;background:rgba(255,176,32,.03)}
.drop.over{background:rgba(255,176,32,.12);border-color:var(--amber)}
.drop input{display:none}
.lyrics{font-family:var(--crt);font-size:21px;line-height:1.35;min-height:420px;letter-spacing:.02em;color:var(--amber2)}
.ly-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}
.ly-wrap{position:relative;padding:0;overflow:hidden}
.ly-back,.ly{font-family:var(--crt);font-size:21px;line-height:1.5;letter-spacing:.02em;padding:16px 18px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;tab-size:4;box-sizing:border-box;width:100%;margin:0;border:0}
.ly-back{color:var(--amber2);pointer-events:none;min-height:420px;overflow:hidden}
.ly-back .h{color:var(--cyan)}
.ly{position:absolute;inset:0;height:100%;background:transparent;color:transparent;caret-color:var(--amber);resize:none;outline:0;overflow:hidden}
.ly::placeholder{color:var(--ash2)}
.ly::selection{background:rgba(58,224,255,.25);color:transparent}
@media (max-width:860px){ .ly-grid{grid-template-columns:1fr} .ly-back,.ly{font-size:19px;padding:12px} }
.lyrics-view{white-space:pre-wrap;font-family:var(--crt);font-size:21px;line-height:1.35;color:var(--amber2)}
.lyrics-view .h{color:var(--cyan);display:block;margin-top:14px}
.form{display:grid;gap:12px;max-width:760px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .four{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--edge);border-radius:3px;background:var(--pit);font-size:13px}
.chip button{background:none;border:0;color:var(--ash2);padding:0 2px} .chip button:hover{color:var(--red)}
.chip.on{border-color:var(--amber-dim);color:var(--amber)}
.chip[draggable]{cursor:grab} .chip.drag{opacity:.4} .chip.over{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-glow)}
.chip .mv{color:var(--ash);font-size:15px;line-height:1;padding:0 3px} .chip .mv:hover{color:var(--cyan)} .chip .mv:disabled{opacity:.25;cursor:default}

/* mastering bay */
.bay{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.pass{border:1px solid var(--edge);border-radius:4px;background:var(--pit);padding:10px 12px;margin-bottom:8px}
.pass .h{display:flex;justify-content:space-between;align-items:center;font-family:var(--crt);font-size:19px;color:var(--ink);letter-spacing:.06em;margin-bottom:6px}
.pass .h b{color:var(--cyan);font-weight:400;margin-right:8px}
.pass .kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px 14px}
.pass .kv div{display:flex;justify-content:space-between;font-family:var(--crt);font-size:18px}
.pass .kv span{color:var(--ash2)} .pass .kv b{color:var(--amber);font-weight:400}
.pass .kv b.bad{color:var(--red)} .pass .kv b.warn{color:#ff8a3d} .pass .kv b.ok{color:var(--green)}
.job{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border:1px solid var(--edge);border-radius:4px;background:var(--pit);margin-bottom:8px;align-items:center}
.job .nm{font-weight:600} .job .sub{font-family:var(--crt);font-size:15px;color:var(--ash2)}
.report{font-family:var(--ui);font-size:13px;white-space:pre-wrap;color:var(--ash);max-height:420px;overflow:auto;background:#050809;padding:12px;border-radius:4px;border:1px solid var(--edge)}
.vu{display:flex;gap:3px;align-items:flex-end;height:44px}
.vu i{flex:1;background:#1a2226;border-radius:1px;min-height:2px}
.vu i.on{background:var(--amber)} .vu i.hot{background:var(--red)}

/* rhyme desk */
.rhyme-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.rhyme-cols .panel{padding:10px 12px}
.words{display:flex;flex-wrap:wrap;gap:5px}
.words span{padding:3px 8px;border:1px solid var(--edge);border-radius:3px;font-family:var(--crt);font-size:17px;color:var(--amber2);cursor:pointer}
.words span:hover{border-color:var(--cyan);color:var(--cyan)}
.words span small{color:var(--ash2);font-size:13px;margin-left:4px}

/* login */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 20%,#122026 0%,var(--coal) 60%)}
.login .box{width:min(420px,100%);text-align:center}
.login img{width:150px;height:150px;border-radius:50%;box-shadow:0 0 40px var(--amber-glow)}
.login .wordmark{font-size:34px;display:block;margin:10px 0 2px}
.login p{color:var(--ash);margin:0 0 18px;font-family:var(--crt);font-size:18px;letter-spacing:.06em}
.login form{display:grid;gap:10px;text-align:left}
.login .who{display:flex;gap:6px}
.login .who button{flex:1}

/* modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:16px}
.modal .box{width:min(560px,100%);max-height:92dvh;overflow:auto;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:16px;box-shadow:0 20px 60px #000}
.modal h3{margin:0 0 12px;font-size:18px}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* bottom toolbar (mobile) */
.dock{display:none}
@media (max-width:860px){
  :root{--rail:0px}
  .top{padding:8px 12px} .top nav{display:none} .wordmark{font-size:17px}
  .main{flex-direction:column}
  .rail{width:auto;border-right:0;border-bottom:1px solid var(--edge);flex-direction:row;overflow-x:auto;padding:10px 12px;gap:8px}
  .rail h4{display:none}
  .rail .proj{width:auto;flex:none;padding:8px 12px}
  .rail .proj small{display:none}
  .content{padding:14px 12px 100px}
  .song-head{grid-template-columns:1fr}
  .meta-strip .m{min-width:0;flex:1;padding:6px 10px}
  .meta-strip .m input,.meta-strip .m select{font-size:17px}
  .meta-strip .m:last-child{flex:1.4}
  .bay{grid-template-columns:1fr}
  .form .four{grid-template-columns:1fr 1fr}
  .note{grid-template-columns:auto 1fr;grid-template-rows:auto auto} .note .acts{grid-column:1/-1;justify-content:flex-end}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:linear-gradient(180deg,#0f1619,#080c0e);border-top:1px solid var(--edge);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .dock a{flex:1;text-align:center;text-decoration:none;color:var(--ash);font-family:var(--crt);font-size:15px;letter-spacing:.06em;padding:6px 2px;border-radius:4px;border:1px solid transparent}
  .dock a .ic{display:block;font-size:18px;line-height:1.1}
  .dock a.on{color:var(--amber);border-color:var(--amber-dim);background:rgba(255,176,32,.06)}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* references */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ref .ref-why{margin:8px 0 4px;padding:8px 10px;border-left:3px solid var(--cyan);background:rgba(58,224,255,.05);font-size:14px;line-height:1.45;white-space:pre-wrap}
.ref .embed{width:100%;border:0;border-radius:8px;margin-top:10px;background:#000}
.ref .embed.yt{aspect-ratio:16/9;height:auto}

/* stage popover */
.stage-btn{background:transparent;cursor:pointer;padding:2px 8px}
.stage-btn:hover{box-shadow:0 0 8px currentColor}
.pop{position:absolute;z-index:70;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--panel);border:1px solid var(--edge);border-radius:6px;box-shadow:0 10px 30px #000;min-width:160px}
.pop button{background:transparent;border:1px solid transparent;border-radius:4px;padding:6px 10px;text-align:left;font-family:var(--crt);font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.pop button:hover{border-color:var(--edge);background:var(--pit)} .pop button.on{border-color:currentColor}

/* rhyme desk */
.rh-form{margin-bottom:14px}
.words span.common{color:var(--ink);border-color:var(--ash2)} .words span.rare{color:var(--ash2)}
.rhyme-cols .panel h4 small{font-size:14px;margin-left:6px}
#syl .chip{cursor:pointer}