/* Hello America Studio (2026-10-15) — one home, two tabs. Studio skin: VOLT olive on near-black. */
:root{--bg:#0c0d0a;--panel:#14160f;--panel2:#1a1d14;--line:#262a1d;--ink:#e9ebda;--dim:#8f957b;--muted:#6f7560;--volt:#D4FF3D;--amber:#e8b06a;--red:#e07f86;--blue:#7aa7c7;
 --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);padding:0 24px 48px}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
.dim{color:var(--dim)}.muted{color:var(--muted)}
.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 0;background:linear-gradient(var(--bg) 80%,transparent)}
.brand{font:11px var(--mono);letter-spacing:.16em}
.tabs{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.tabs a{padding:8px 22px;border-radius:999px;color:var(--dim);font-weight:600;font-size:13px;white-space:nowrap}
.tabs a.on{background:var(--volt);color:#141a05}.tabs small{font-weight:400;opacity:.7;margin-left:4px}
.right{display:flex;justify-content:flex-end;gap:16px;font-size:12px;color:var(--dim)}.right a.on,.right a:hover{color:var(--volt)}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 18px}
.pill{border:1px solid var(--line);background:none;border-radius:999px;padding:5px 12px;font-size:12px;color:var(--dim);cursor:pointer}
.pill:hover{color:var(--ink)}.pill.on{border-color:var(--volt);color:var(--volt)}.pill.warn{border-color:var(--amber);color:var(--amber)}
.search{margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 14px;width:240px}
.btn{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px}
.btn:hover{border-color:var(--volt);color:var(--volt)}.btn.go{background:var(--volt);color:#141a05;border-color:var(--volt);font-weight:700}
.btn:disabled{opacity:.45;cursor:default}
.lbl{display:block;font:10px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
/* concepts grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.tile{display:block;cursor:pointer}
.media{position:relative;aspect-ratio:2.58;border-radius:8px;overflow:hidden;background:#000}
.media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media>img.pip,.player>img.pip,.pip{position:absolute;inset:auto 8px 8px auto;height:auto;right:8px;bottom:8px;width:23%;aspect-ratio:1;object-fit:cover;border-radius:5px;border:2px solid #000a;box-shadow:0 4px 14px #000a;z-index:2}
.tag{position:absolute;left:8px;bottom:8px;z-index:2;background:#000b;padding:2px 8px;border-radius:4px;font-size:11px}.tag.idea{color:var(--amber)}
.cap{padding:8px 2px 0;font-size:12px}.cap b{display:block;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.chip{font-size:11px;background:#1d2213;color:var(--volt);padding:1px 8px;border-radius:999px}.chip.side{color:var(--blue);background:#141c22}.chip.none{background:none;color:var(--muted);padding:0}
.tile:hover .media{outline:1px solid var(--volt)}
/* concept page */
.crumbs{display:flex;justify-content:space-between;color:var(--dim);margin-bottom:10px;font-size:13px}.crumbs button{background:none;border:0;color:var(--dim);cursor:pointer}.crumbs button:hover{color:var(--volt)}
.concept{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.player{position:relative;border-radius:10px;overflow:hidden;background:#000}
.player video,.player>img{display:block;width:100%;max-height:68vh;object-fit:contain;background:#000}
.player>img.pip{top:12px;right:12px;bottom:auto;width:150px;max-height:none;cursor:zoom-in}
.vers{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.side h1{font-size:22px;margin:0}.sec{border-top:1px solid var(--line);padding:12px 0}
.sec select,.sec textarea,.drawer select,.drawer textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.rate{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.rate .pill.on.retake,.rate .pill.on.dropped{border-color:var(--red);color:var(--red)}.rate .pill.on.waiting{border-color:var(--amber);color:var(--amber)}
.fb{font-size:12px;color:var(--dim);margin:4px 0}.fb b{color:var(--ink)}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;cursor:zoom-in}
.approved{color:var(--volt);font-size:12px}
/* show plan board */
.board{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.col{background:var(--panel);border-radius:10px;padding:10px;min-height:200px}
.col h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:12px;font-weight:600}
.card{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px;cursor:pointer}
.card:hover,.card.on{border-color:var(--volt)}
.card .thumb{position:relative;aspect-ratio:2.58;border-radius:4px;overflow:hidden;background:#000;margin-bottom:6px}
.card .thumb img,.card .thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card b{display:block;font-size:13px}.card small{display:block;color:var(--dim);font-size:11px}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.stage{font-size:11px;padding:2px 9px;border-radius:999px;color:#11130d;white-space:nowrap;font-weight:600}
.s0{background:#2d3123;color:var(--dim)}.s1{background:#8a6d3b}.s2{background:var(--amber)}.s3{background:var(--volt)}.s4{background:var(--blue)}
.dots{display:inline-flex;gap:5px}.dot{width:9px;height:9px;border-radius:50%;background:#3a3f2e}.dot.y{background:var(--volt)}.dot.q{background:var(--amber)}
/* list */
.list{width:100%;border-collapse:collapse}.list th{text-align:left;font:10px var(--mono);letter-spacing:.1em;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap}
.list td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.list tr{cursor:pointer}.list tr:hover td,.list tr.on td{background:var(--panel2)}
.list td small{display:block;color:var(--dim);font-size:11px}.list .cc{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}.list .cc img{width:84px;aspect-ratio:2.58;object-fit:cover;border-radius:4px}
.add{border:1px dashed var(--line);border-radius:4px;padding:5px 10px;font-size:12px;color:var(--dim)}
/* drawer */
.withdrawer{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.drawer{position:sticky;top:76px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;max-height:calc(100vh - 96px);overflow:auto;font-size:13px}
.drawer h2{font-size:16px;margin:0 22px 0 0}.drawer .x{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--dim);font-size:18px;cursor:pointer}
.drawer .row{border-top:1px solid var(--line);padding:9px 0}
.drawer .media{margin:10px 0 6px}
.drawer audio{width:100%;height:36px}
.ck{display:inline-flex;align-items:center;gap:4px;margin:3px 6px 0 0;font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim);background:none;cursor:pointer}
.ck.y{border-color:var(--volt);color:var(--volt)}.ck.q{border-color:var(--amber);color:var(--amber)}.ck:disabled{cursor:default}
.link{color:var(--volt)}.link:hover{text-decoration:underline}
/* handover */
.hand{display:grid;grid-template-columns:360px 1fr;gap:24px}.stats{display:flex;gap:10px;margin:14px 0}
.stats div{background:var(--panel);border-radius:8px;padding:10px 16px;text-align:center;flex:1}.stats b{display:block;font-size:24px}.stats small{color:var(--dim)}
.tree{background:var(--panel);border-radius:10px;padding:18px;font:12.5px/1.65 var(--mono);margin:0;overflow:auto;white-space:pre}
/* pop-up */
.pop{width:min(1200px,95vw);max-height:92vh;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.pop::backdrop{background:rgba(0,0,0,.75)}
.pop .ph{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.pop .ph button{background:none;border:0;color:var(--ink);font-size:18px;cursor:pointer}
.pop .pb{padding:16px;overflow:auto;max-height:calc(92vh - 54px)}
.pop .full{display:block;max-width:100%;max-height:78vh;margin:0 auto;border-radius:6px}
.yt{position:relative;aspect-ratio:16/9}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:6px}
.pick{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}
.plist{display:flex;flex-direction:column;gap:6px;max-height:72vh;overflow:auto}
.pitem{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:center;text-align:left;background:none;border:1px solid var(--line);border-radius:6px;padding:6px;cursor:pointer;font-size:12px}
.pitem.on{border-color:var(--volt);background:#171c0e}.pitem img{width:72px;height:40px;object-fit:cover;border-radius:3px}.pitem small{display:block;font-size:10px}
.rec{color:var(--amber)}.v-fit{color:var(--volt)}.v-maybe{color:var(--amber)}.v-no{color:var(--red)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--volt);color:#141a05;padding:8px 16px;border-radius:999px;font-weight:600;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}.toast.show{opacity:1}
.empty{color:var(--dim);padding:40px;text-align:center;border:1px dashed var(--line);border-radius:10px}
@media (max-width:900px){body{padding:0 16px 40px}.top{grid-template-columns:1fr;justify-items:center}.right{justify-content:center}.concept,.withdrawer,.hand,.pick{grid-template-columns:1fr}.drawer{position:static;max-height:none}.search{margin-left:0;width:100%}.board{grid-template-columns:repeat(5,78vw)}}
/* round 2 (2026-10-15): trail, guide strip, clearer cards, drawer next step */
.crumbbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--dim);padding:12px 0 0}.crumbbar b{color:var(--ink);font-weight:600}.crumbbar a:hover{color:var(--volt)}
.crumbbar .jump{margin-left:auto;display:flex;gap:14px}
.guide{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.steps{display:flex;align-items:stretch;gap:8px}.step{flex:1;background:var(--bg);border:1px solid transparent;border-radius:8px;padding:10px;display:grid;gap:4px;text-align:left;cursor:pointer}
.step:hover,.step.on{border-color:var(--volt)}.step b{font-size:20px}.step small{color:var(--dim);font-size:11px}.arr{align-self:center;color:var(--muted)}
.how{font-size:12px;color:var(--dim);margin:10px 0 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.how b{color:var(--ink)}.legend{display:inline-flex;gap:6px}
.how button{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer}.how button:hover{color:var(--volt)}
.rc{font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;background:none}
.rc.y{color:var(--volt);border-color:#4a5a17}.rc.q{color:var(--amber);border-color:#5a4520}
button.rc{cursor:pointer;font-size:11px;padding:2px 8px}button.rc:disabled{cursor:default}
.chiprow{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.next{font-size:11px;color:var(--amber);margin-top:6px}
.card .thumb.empty{display:grid;place-items:center;font-size:11px;color:var(--muted);border:1px dashed var(--line);background:none}
.av{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--panel2);font-size:10px;margin-right:4px;color:var(--ink)}
.card .foot{justify-content:flex-start}
.emptycol{font-size:12px;color:var(--muted);text-align:center;padding:24px 8px;border:1px dashed var(--line);border-radius:8px;margin:0}
.stepper{display:flex;gap:3px;margin:10px 0}.sp{flex:1;font-size:10px;text-align:center;padding:4px 2px;border-radius:4px;background:var(--bg);color:var(--muted)}
.sp.done{background:#2b3315;color:var(--volt)}.sp.now{background:var(--amber);color:#141a05;font-weight:700}
.nextbox{background:#1f1a10;border:1px solid #5a4520;border-radius:8px;padding:10px;margin:8px 0}.nextbox b{display:block;font-size:15px}.nextbox p{margin:4px 0 8px}
.tiny{font-size:11px;margin:6px 0 0}
@media (max-width:900px){.steps{flex-wrap:wrap}.step{flex:1 1 40%}.arr{display:none}.crumbbar .jump{margin-left:0}}
/* one song: the options side by side (2026-10-19, Danney picked layout 1) */
.songbar{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.songbar .sbl{display:flex;gap:14px;align-items:center}.songbar .num{font:700 28px var(--mono);color:var(--volt)}
.songbar h1{margin:0;font-size:20px;font-weight:600}.songbar .dim{font-size:12.5px}
.songbar .sbr{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sst{border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--line);color:var(--dim)}
.sst.o{color:var(--amber);border-color:#e8b06a73;background:#e8b06a1f}.sst.d{color:#f0a060;border-color:#f0a06073}.sst.g,.sst.p{color:var(--volt);border-color:#d4ff3d66}.sst.q{color:var(--blue);border-color:#7aa7c773}
.ssteps{display:flex;gap:16px;flex-wrap:wrap;margin:10px 2px 14px;font-size:12.5px;color:var(--muted)}.ssteps .ok{color:var(--volt)}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.ocol{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;min-width:0}
.ocol.picked{border-color:var(--volt);box-shadow:0 0 0 1px var(--volt) inset}
.ohead{display:flex;gap:9px;align-items:center;margin-bottom:8px}.ohead b{display:block;font-size:14px}.ohead small{display:block;color:var(--dim);font-size:11.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ltr{width:26px;height:26px;flex:none;border-radius:6px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font:700 13px var(--mono);color:var(--volt)}
.oplayer{position:relative;aspect-ratio:2.58;border-radius:8px;overflow:hidden;background:#000}.oplayer video,.oplayer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.ostrip{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;margin-top:5px}.ostrip button{padding:0;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;overflow:hidden}
.ostrip button.on{border-color:var(--volt)}.ostrip img{display:block;width:100%;aspect-ratio:2.36;object-fit:cover;opacity:.85}
.ocol .lbl{margin:10px 0 2px}.otext{margin:0;font-size:13px;line-height:1.45}
.onotes{margin-top:8px;border-top:1px solid var(--line);padding-top:4px}
.ofoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:12px}
.ost{font-size:11.5px;color:var(--amber)}.ost.picked{color:var(--volt);font-weight:600}
.noopts{background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:16px}.noopts code{font-size:12px;color:var(--volt)}
.sdetails{margin-top:16px}.sdetails>summary{cursor:pointer;color:var(--dim);font-size:13px;padding:6px 0}
.inpage .drawer{position:static;max-height:none;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.inpage .drawer>h2,.inpage .drawer>.dim,.inpage .drawer>.stepper,.inpage .drawer>.nextbox,.inpage .drawer>.x{grid-column:1/-1}.inpage .drawer>.x{display:none}
@media (max-width:900px){.opts{grid-template-columns:1fr}.songbar{flex-direction:column;align-items:flex-start}.songbar .sbr{align-items:flex-start}.inpage .drawer{grid-template-columns:1fr}}
/* ---- Show list (2026-10-26): the Studio home mirrors the 🎤 chat list ---- */
.sv{display:grid;grid-template-columns:380px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;height:calc(100vh - 118px);min-height:560px}
.songs{position:relative;overflow:auto;border-right:1px solid var(--line);background:#11130d}
.vh{font:600 11px var(--mono);letter-spacing:.12em;color:var(--dim);padding:10px 12px}.vh span{letter-spacing:0;font-weight:400;color:var(--muted);margin-left:8px}
.song{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;padding:6px 10px;border-left:3px solid var(--line);cursor:pointer}
.song:hover{background:#171a11}.song.on{background:#1d2213;outline:1px solid var(--volt);outline-offset:-1px}
.song.c0{border-left-color:#9a9d90}.song.c1{border-left-color:#f2c94c}.song.c2{border-left-color:var(--blue)}.song.c3{border-left-color:var(--volt)}.song.c4{border-left-color:var(--amber)}
.sth{display:grid;place-items:center;aspect-ratio:2.58;border-radius:4px;overflow:hidden;background:#000;color:#3a3e30}.sth img{width:100%;height:100%;object-fit:cover}
.stx{min-width:0}.stx b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nn{font-style:normal;font-family:var(--mono);color:var(--dim)}
.pane{overflow:auto;padding:16px 20px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.ptitle{font-size:22px;font-weight:700}.psub{color:var(--dim);font-size:13px;margin-top:2px}.psub b{color:var(--ink)}
.psub .dot,.pane>.psub .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--muted)}
.dot.c0{background:#9a9d90}.dot.c1{background:#f2c94c}.dot.c2{background:var(--blue)}.dot.c3{background:var(--volt)}.dot.c4{background:var(--amber)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}.seg button{background:none;border:0;color:var(--dim);padding:6px 12px;font-size:12px;cursor:pointer}
.seg .on{background:#1d2213;color:var(--volt)}
.screen{position:relative;aspect-ratio:2.577;background:#000;border-radius:8px;overflow:hidden;outline:1px solid var(--line)}
.screen video,.screen img{width:100%;height:100%;object-fit:contain;display:block}
.screen.empty{display:grid;place-content:center;text-align:center;padding:20px;margin-top:10px}
.vlabel{position:absolute;left:10px;top:10px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.7);padding:3px 9px;border-radius:999px;font-size:12px;pointer-events:none}
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:14px}.vlist .vh,.vlist .k4line{grid-column:1/-1;padding:4px 0}
.k4line{font-size:12px;color:var(--amber)}
.tap{position:absolute;right:12px;top:10px;background:var(--volt);color:#141a05;border:0;border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer}
.silent{position:absolute;right:12px;top:10px;background:rgba(0,0,0,.75);color:var(--amber);border:1px solid var(--amber);border-radius:999px;padding:3px 10px;font-size:12px;pointer-events:none}
.tap[hidden],.silent[hidden]{display:none}
.ver{display:grid;gap:4px;align-content:start;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;font-size:12px;cursor:pointer}
.ver img{width:100%;aspect-ratio:2.58;object-fit:cover;border-radius:4px}.ver small{display:block;color:var(--dim);font-size:11px;line-height:1.3}
.ver:hover{border-color:var(--dim)}.ver.on{border-color:var(--volt)}
.b{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;padding:1px 5px;border-radius:3px;margin-left:4px}
.b.latest{background:var(--volt);color:#141a05}.b.k4{background:var(--blue);color:#0c0d0a}.b.ok{background:#2c3a1a;color:var(--volt)}
.notes{margin-top:14px}.notes .vh{padding:4px 0}.notes p{margin:4px 0;font-size:13px}
@media (max-width:900px){.sv{grid-template-columns:1fr;height:auto}.songs{max-height:45vh;border-right:0;border-bottom:1px solid var(--line)}.phead{flex-direction:column}}
.amber{color:var(--amber);font-size:12px}
.tile.arch{opacity:.45}.tile.arch:hover{opacity:1}
.archnote{border:1px solid var(--amber);color:var(--amber);border-radius:8px;padding:8px 12px;font-size:13px}
.ver{position:relative;min-width:0}.ver.picked{border-color:#7fd1a0}.b.chosen{background:#7fd1a0;color:#0c0d0a}
.vacts{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:2px}
.vbtn{background:none;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:11px;color:var(--dim);cursor:pointer}
.vbtn:hover{color:var(--ink);border-color:var(--dim)}.vbtn.on{border-color:#7fd1a0;color:#7fd1a0}.vbtn.danger{border-color:var(--red);color:var(--red)}
.ask{font-size:11px;color:var(--red);width:100%}
.pk{font-style:normal;font-weight:700;color:#7fd1a0;margin-right:6px}
.gone{margin-top:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:12px}
.linkbtn{background:none;border:0;padding:0;color:var(--dim);font-size:12px;cursor:pointer;text-decoration:underline}.linkbtn:hover{color:var(--ink)}
.gone .vlist{width:100%;margin-top:4px}.ver.removed{opacity:.55;cursor:default}.ver.removed:hover{opacity:1}
.ver.on.picked{border-color:var(--volt)}
.selbtn{margin-left:12px;letter-spacing:0;font-family:var(--sans)}
.selbar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:12px}
.selbar .ask{width:auto}.vbtn:disabled{opacity:.4;cursor:default}
.ver.selmode{cursor:pointer}.ver.sel{border-color:var(--red);background:#2a1719}.tick{position:absolute;top:8px;right:10px;font-size:18px;color:var(--ink);text-shadow:0 0 4px #000}
/* 10-26: fewer words: one-line version names (full name on hover), note box under the player */
.ver small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes{margin-top:10px}.nlist .fb{margin:3px 0;font-size:13px}.nlist .fb b{color:var(--volt);margin-right:4px}
.nrow{display:flex;gap:8px;align-items:flex-end;margin-top:6px}
.nbox{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);font:13px/1.4 var(--sans);resize:vertical;min-height:38px}
.nbox:focus{border-color:var(--volt);outline:none}
.ver span{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
@media (hover:hover){.ver .vacts{visibility:hidden}.ver:hover .vacts,.ver:focus-within .vacts,.ver.picked .vacts{visibility:visible}}
.stx small{color:var(--muted)}.ptitle .nn{margin-right:4px}
body:has(.sv) .crumbbar{display:none}.tabs small{display:none}
.notes{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel)}.nhead{font-weight:700;font-size:14px;margin-bottom:4px}.nhead span{font-weight:400;color:var(--muted);font-size:12px}
/* 10-26 grid tidy: one heading style, compact tiles (picture + one row), even gaps */
.pane{padding:18px 22px}.notes,.vlist,.gone{margin-top:16px}
.shead,.nhead{display:flex;align-items:baseline;gap:6px;font-weight:700;font-size:14px;color:var(--ink);letter-spacing:0;font-family:var(--sans)}
.shead span,.nhead span{font-weight:400;color:var(--muted);font-size:12px}
.vlist{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.vlist .shead{grid-column:1/-1;margin-bottom:-2px}
.shead .selbtn{margin-left:auto;font-weight:400}
.ver{padding:8px;gap:6px;border-radius:10px}.ver img{border-radius:6px}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px}
.vl{display:flex;align-items:center;gap:6px;min-width:0}.vl small{color:var(--muted);font-size:11px}
.vrow .vacts{margin:0;flex-wrap:nowrap}.ver .tick{position:static;font-size:16px}
.vrow .ask{width:auto;font-size:11px}
.vrow{flex-wrap:wrap}
.ts{background:#1d2213;border:1px solid var(--volt);color:var(--volt);border-radius:999px;padding:0 7px;font:600 11px var(--mono);cursor:pointer;margin:0 2px;vertical-align:1px}.ts:hover{background:var(--volt);color:#141a05}
.nbtns{display:flex;flex-direction:column;gap:6px}.tsb{font:600 12px var(--mono);white-space:nowrap}
/* 10-27: icons, status dots instead of emoji, styled scrollbars, versions grouped by concept, clear Main + Select several */
.ic{width:14px;height:14px;fill:currentColor;vertical-align:-2px;flex:none}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 7px 1px 6px;vertical-align:middle;background:var(--muted)}
.sdot.c0{background:#9a9d90}.sdot.c1{background:#f2c94c}.sdot.c2{background:var(--blue)}.sdot.c3{background:var(--volt)}.sdot.c4{background:var(--amber)}
.songs,.pane{scrollbar-width:thin;scrollbar-color:#2c3122 transparent}
.songs::-webkit-scrollbar,.pane::-webkit-scrollbar{width:8px}.songs::-webkit-scrollbar-track,.pane::-webkit-scrollbar-track{background:transparent}
.songs::-webkit-scrollbar-thumb,.pane::-webkit-scrollbar-thumb{background:#2c3122;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.songs::-webkit-scrollbar-thumb:hover,.pane::-webkit-scrollbar-thumb:hover{background:#3d4430;background-clip:padding-box}
.sv{gap:0}.songs{border-right:1px solid #1c1f16}
.vhead{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.selbtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--ink);font:600 12px var(--sans);cursor:pointer}
.selbtn:hover{border-color:var(--red);color:var(--red)}
.vgroup{margin-top:12px}.ghead{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--dim);margin:4px 0 -4px}.ghead a{color:var(--ink);font-weight:600}.ghead a:hover{color:var(--volt)}.ghead span{color:var(--muted)}
.vgroup .vlist{margin-top:10px}
.vbtn{display:inline-flex;align-items:center;gap:4px}
.vbtn.on{background:#1d2213}
.b{display:inline-flex;align-items:center;gap:3px}.b .ic{width:10px;height:10px}
.b.chosen{background:var(--volt);color:#141a05}.b.latest{background:#2c3122;color:var(--ink)}
.pk{display:inline-flex;align-items:center;gap:3px;color:var(--volt)}.pk .ic{width:11px;height:11px}
.ver.picked{border-color:var(--volt)}
.tsb{display:inline-flex;align-items:center;gap:6px}.tap{display:inline-flex;align-items:center;gap:6px}.nhead .ic{width:15px;height:15px;color:var(--volt)}
/* 10-27 · layout A: songs · player · team chat (+ Inbox) */
.sv.three{grid-template-columns:280px minmax(0,1fr) var(--chw,360px)}
.sv.three .row,.sv.three .song{grid-template-columns:76px 1fr}
.chat{display:flex;flex-direction:column;min-height:0;border-left:1px solid #1c1f16;background:#0f110c}
.chh{display:flex;align-items:baseline;gap:8px;padding:14px 16px;border-bottom:1px solid #1c1f16}.chh b{font-size:14px}.chh span{color:var(--muted);font-size:12px}
.chh .inb{margin-left:auto;color:var(--amber);font-size:12px;font-weight:600}
.msgs{flex:1;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:#2c3122 transparent}
.msgs .empty{color:var(--muted);font-size:13px;margin:auto 0;text-align:center}
.msg{display:grid;grid-template-columns:28px 1fr;gap:9px}
.cav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#0c0d0a;background:#e8b06a}
.msg.d .cav{background:#7aa7c7}.msg.h .cav{background:#c58cf0}.msg.v .cav{background:#e8b06a}.msg.c .cav{background:var(--volt)}
.msg.c>div{background:#151a0d;border:1px solid #2c3a1a;border-radius:10px;padding:8px 10px}
.mh{display:flex;align-items:baseline;gap:6px}.mh b{font-size:12.5px}
.ver{font:600 10px var(--mono);color:var(--dim);border:1px solid var(--line);background:none;border-radius:4px;padding:0 5px;cursor:pointer}.ver:hover{color:var(--volt);border-color:var(--volt)}
.when{margin-left:auto;color:var(--muted);font-size:10.5px}
.msg p{margin:3px 0 0;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.atag{color:var(--volt)}
.clip{display:inline-flex;align-items:center;gap:5px;margin-top:5px;background:#1d2213;border:1px solid var(--volt);color:var(--volt);border-radius:999px;padding:2px 10px;font:600 11px var(--mono);cursor:pointer}.clip:hover{background:var(--volt);color:#141a05}
.mf{display:flex;gap:6px;align-items:center;margin-top:5px}.mf:empty{display:none}
.st,.stbtn,.ist{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;border:0}
.st.new,.ist.new{background:#3a2a12;color:var(--amber)}.st.sent,.ist.sent{background:#152536;color:var(--blue)}.st.fixed,.stbtn,.ist.fixed{background:var(--volt);color:#141a05}.st.done,.ist.done{background:#1d2016;color:var(--muted)}
.stbtn{cursor:pointer}
.comp{border-top:1px solid #1c1f16;padding:12px 16px;display:grid;gap:8px}
.rng{display:flex;flex-wrap:wrap;gap:6px}
.rb{display:inline-flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:5px 10px;font:600 11.5px var(--mono);cursor:pointer}
.rb:hover{border-color:var(--dim)}.rb.on{border-color:var(--volt);color:var(--volt);background:#1d2213}.rb.play{color:var(--volt)}.rb.x{padding:5px 9px}
.cbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;color:var(--ink);font:13px/1.45 var(--sans);resize:none}.cbox:focus{outline:none;border-color:var(--volt)}
.crow{display:flex;align-items:center;gap:8px}.hint{color:var(--muted);font-size:11px;margin-left:auto}
.atc{background:none;border:1px solid var(--volt);color:var(--volt);border-radius:999px;padding:4px 11px;font-weight:700;font-size:12px;cursor:pointer}.atc:hover{background:var(--volt);color:#141a05}
.rbar{position:relative;height:8px;margin-top:8px;border-radius:999px;background:#1a1d14;cursor:pointer}
.rsel{position:absolute;top:-3px;bottom:-3px;background:rgba(212,255,61,.3);border:1px solid var(--volt);border-radius:4px}.rsel[hidden]{display:none}
.rph{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;border-radius:2px}
.tabs small.cnt{display:inline;color:inherit}.tabs small.cnt.hot{background:var(--amber);color:#141a05;border-radius:999px;padding:0 6px;margin-left:4px;font-weight:700;opacity:1}
em.open{font-style:normal;color:var(--amber);font-weight:600;margin-right:6px}
.inbox{max-width:980px;margin:6px auto}.ihead h1{margin:6px 0 2px;font-size:24px}.ihead p{margin:0 0 12px}
.ilist{display:grid;gap:8px}
.irow{display:grid;grid-template-columns:110px 220px 200px 1fr 90px;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}
.irow:hover{border-color:var(--volt)}.irow b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iw{color:var(--dim);font-size:12px}.ib{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1200px){.sv.three{grid-template-columns:240px minmax(0,1fr) var(--chw,320px)}}
@media (max-width:900px){.sv.three{grid-template-columns:1fr}.chat{border-left:0;border-top:1px solid #1c1f16;max-height:none}.irow{grid-template-columns:1fr}}
.rwrap{margin-top:8px}.rbar{height:14px;margin-top:0;border-radius:6px;cursor:crosshair;touch-action:none}
.rbar:hover{background:#22261a}.rsel{top:0;bottom:0;border-radius:4px}
.rh{position:absolute;top:-3px;bottom:-3px;width:6px;background:var(--volt);border-radius:3px;cursor:ew-resize}.rh.a{left:-3px}.rh.b{right:-3px}
.rt{position:absolute;top:-19px;font:600 10px var(--mono);font-style:normal;color:var(--volt);white-space:nowrap}.rt.a{left:-4px}.rt.b{right:-4px}
.rph{top:-3px;bottom:-3px}
.rhint{font-size:11px;color:var(--muted);margin-top:5px}
.st.review,.ist.review{background:#3a2a12;color:var(--amber);border:1px dashed var(--amber)}.st.declined,.ist.declined{background:#1d2016;color:var(--muted);text-decoration:line-through}
.irow{grid-template-columns:120px 210px 190px minmax(0,1fr) auto}.iact{display:flex;gap:6px}.iact .btn{padding:5px 10px;font-size:12px}
/* 10-27: one timeline (the clip bar); the video's own timeline is hidden so the two can't disagree */
.screen video::-webkit-media-controls-timeline{display:none}
.rpl{position:absolute;left:0;top:0;bottom:0;background:#3d4430;border-radius:6px 0 0 6px;pointer-events:none}
.rsel{z-index:1}.rph{z-index:2}
.macts{display:none;gap:2px;margin-left:4px}.msg:hover .macts{display:inline-flex}
.macts button{background:none;border:0;color:var(--muted);padding:2px 3px;cursor:pointer}.macts button:hover{color:var(--ink)}
.medit{display:grid;gap:6px;margin-top:4px}
/* 10-27: bigger player, timeline under it, versions as a bottom slider */
.sv.three{grid-template-columns:250px minmax(0,1fr) var(--chw,340px)}
.sv.three .row,.sv.three .song{grid-template-columns:64px 1fr}
.sv.three .pane{display:flex;flex-direction:column;padding:12px 16px}
.sv.three .phead{margin-bottom:8px}.sv.three .ptitle{font-size:20px}
.sv.three .rwrap{margin-top:6px}.sv.three .rhint{margin-top:3px}
.sv.three .vhead{margin-top:auto;padding-top:12px}
.vstrip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 2px 10px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#2c3122 transparent;flex:none}
.vstrip::-webkit-scrollbar{height:8px}.vstrip::-webkit-scrollbar-thumb{background:#2c3122;border-radius:8px}
.vstrip .ver{flex:0 0 148px;padding:5px;gap:4px;border-radius:8px}
.vstrip .ver img{aspect-ratio:2.58;border-radius:5px}
.vstrip .vrow{min-height:22px;flex-wrap:nowrap}.vstrip .vl b{font-size:12px}.vstrip .b{font-size:8.5px;padding:1px 4px}
.vstrip .vacts{position:absolute;right:6px;top:6px;margin:0;background:rgba(12,13,10,.85);border-radius:999px;padding:2px}
.vstrip .vbtn{padding:2px 7px;font-size:10.5px}
.vstrip .ver.removed{flex-basis:148px}
.gtag{flex:0 0 auto;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:2px;max-width:120px;padding:0 8px;border-left:2px solid var(--volt);color:var(--dim);font-size:11px;line-height:1.25}
.gtag b{color:var(--ink);font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.gtag:hover b{color:var(--volt)}
.vstrip .ver:first-child{margin-left:0}
.sv.three .gone{margin-top:4px}
/* 10-27: the player fills the free height, so the timeline sits low, next to the chat box */
.sv.three .screen{flex:1 1 auto;aspect-ratio:auto;min-height:260px;height:auto}
.sv.three .screen video,.sv.three .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sv.three .vhead{margin-top:10px;padding-top:0}
/* 10-27: no colour bar on song rows (the dot shows the status) */
.sv .song,.sv .song.c0,.sv .song.c1,.sv .song.c2,.sv .song.c3,.sv .song.c4{border-left:0;padding-left:12px}
.song.on{box-shadow:none}
/* 10-28: first-timer guide in the chat */
.howto{font-size:12.5px;line-height:1.5;color:var(--ink)}.howto .ht{display:block;font-size:13px;margin-bottom:4px;color:var(--volt)}
.howto ol{margin:0;padding-left:18px;display:grid;gap:5px}.howto li::marker{color:var(--volt);font-weight:700}
.howto.empty{margin:auto 0;padding:14px;border:1px dashed var(--line);border-radius:10px}
.howcard{position:relative;margin:10px 14px 0;padding:10px 12px;border:1px solid #2c3a1a;background:#141a0d;border-radius:10px}
.howcard .x{position:absolute;top:4px;right:6px;background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer}.howcard .x:hover{color:var(--ink)}
kbd{display:inline-block;min-width:16px;padding:0 5px;border:1px solid #3d4430;border-bottom-width:2px;border-radius:4px;background:#1a1d14;font:600 11px var(--mono);color:var(--ink);text-align:center}
.rhint b{color:var(--volt);font-weight:600}.rhint{font-size:11.5px;color:var(--dim)}
.helpbtn{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--dim);font-size:11px;cursor:pointer;line-height:1}.helpbtn:hover{color:var(--volt);border-color:var(--volt)}
.chh .inb{margin-left:8px}
.msgs .howto,.msgs .howto *{text-align:left}
.rhint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--muted);margin-top:4px}.rhint kbd{font-size:10px;padding:0 4px}
/* 10-28: sign-in box + welcome */
.signin{display:grid;gap:10px;min-width:320px;max-width:400px}.signin form{display:grid;gap:10px}.signin p{margin:0}
.sitabs{justify-self:start}.siin{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 11px;color:var(--ink);font:14px var(--sans)}.siin:focus{outline:none;border-color:var(--volt)}
.sierr{color:var(--amber);font-size:13px}
.welcome{display:grid;gap:8px;max-width:420px}.welcome p{margin:0;color:var(--ink)}.welcome .crow{justify-content:flex-end;margin-top:6px}
.cbox[readonly]{cursor:pointer}
#who{color:var(--volt)}
.pop:has(.welcome),.pop:has(.signin){width:min(460px,92vw);max-width:460px}
/* 10-28: left column = search + singer headings + big song names (no versions) */
.sfwrap{position:sticky;top:0;z-index:3;padding:10px 10px 8px;background:#11130d;border-bottom:1px solid #1c1f16}
.sfind{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--ink);font:13px var(--sans)}.sfind:focus{outline:none;border-color:var(--volt)}
.ahead{padding:12px 12px 4px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--volt);opacity:.85}
.ahead[hidden],.song[hidden]{display:none}
.sv.three .song{grid-template-columns:72px 1fr;padding:7px 12px;align-items:center;border-bottom:1px solid #171a12}
.sv.three .stx b{font-size:14.5px;font-weight:650;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv.three .stx .nn{font-size:13px;color:var(--ink);opacity:.55;margin-right:2px}
.sv.three .stx small{font-size:11px;color:var(--muted)}
.sv.three .song.on .stx b{color:var(--volt)}
/* 10-28: no status dot on rows; a "new comments" bubble instead */
.sv.three .song{grid-template-columns:72px 1fr auto}
.newc{display:inline-flex;align-items:center;gap:3px;background:var(--volt);color:#141a05;border-radius:999px;padding:2px 7px 2px 6px;font:700 11px var(--sans);align-self:center}
.newc .ic{width:11px;height:11px}
.sv.three .stx .nn{margin-right:7px}
/* 10-28 reviewer mode: visitors and guests see only the songs */
body:not(.team) .tabs a[data-tab=inbox],body:not(.team) .tabs a[data-tab=concepts],body:not(.team) .tabs a[data-tab=plan],body:not(.team) .tabs a[data-tab=reuse],body:not(.team) .right a[data-tab=handover],body:not(.team) .crumbbar,body:not(.team) .chh .inb{display:none}
.wsteps{margin:0;padding-left:20px;display:grid;gap:6px}.wsteps li::marker{color:var(--volt);font-weight:700}
.signin small{font-size:11.5px}
/* 10-28 refined C: uniform song rows + sort switch */
.lsort{display:flex;margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lsort button{flex:1;background:none;border:0;padding:6px 0;font:600 12px var(--sans);color:var(--dim);cursor:pointer}.lsort button.on{background:#1d2213;color:var(--volt)}
.sv.three .song{grid-template-columns:64px minmax(0,1fr) auto;gap:10px;padding:9px 12px;align-items:start;border-bottom:1px solid #15180f}
.sv.three .sth{height:26px;aspect-ratio:auto;margin-top:2px}
.l1{display:flex;align-items:center;gap:7px;min-width:0}.l1 .nn{font:600 12px var(--mono);color:var(--muted);margin:0}
.l1 b{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.song.on .l1 b{color:var(--volt)}
.spill{flex:none;font-style:normal;font-size:9.5px;font-weight:700;border-radius:999px;padding:1px 7px;white-space:nowrap}.spill.amb{background:#3a2a12;color:var(--amber)}.spill.grn{background:var(--volt);color:#141a05}.spill.blu{background:#152536;color:var(--blue)}
.l2{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0}
.sg{flex:none;font-size:10.5px;color:#c8cbb8;border:1px solid #2c3122;border-radius:999px;padding:0 7px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aplan{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#a9ae96}.aplan:has(+ .here){flex:0 1 auto}
.aplan.b{color:#c8cbb8}.aplan.nb{color:#6f7560}
/* 10-31: the song's loop rides on the song row instead of taking a row of its own */
.lpchip{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;max-width:170px;font:10.5px var(--sans);color:#b3b8a0;border:1px solid #2c3122;border-radius:999px;padding:0 7px;text-decoration:none;white-space:nowrap}
.lpchip:hover{color:#d4ff3d;border-color:#5c6b2c}
.lpchip .ar{flex:none;opacity:.75}
.lpchip .nm{overflow:hidden;text-overflow:ellipsis}
.lpchip .more{flex:none;color:#8b9079}
.lpchip.none{color:#c9a227;border-style:dashed}
.sv.three .song[data-a="sub"],.songs .song[data-a="sub"]{padding-left:34px;background:#151810}
.lm{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.lm b{color:#c8cbb8;font-weight:600}.lm.none{color:#4c5140}
.sv.three .song .newc{margin-top:2px}
.ahead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 12px 4px;color:var(--volt);font:700 12px var(--sans);letter-spacing:0;text-transform:none;opacity:1}.ahead span{font:500 10px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* frame-strip timeline */
.rwrap{position:relative}
.rbar.strip{height:48px;border-radius:8px;background:#000;overflow:visible}
.rframes{position:absolute;inset:0;display:flex;border-radius:8px;overflow:hidden;pointer-events:none}.rframes i{display:block;height:100%;background-repeat:no-repeat;opacity:.82;border-right:1px solid rgba(0,0,0,.45)}
.rbar.strip .rpl{display:none}.rbar.strip .rph{top:-5px;bottom:-5px;width:2px;background:#fff;box-shadow:0 0 6px #000;z-index:3}
.rbar.strip .rsel{top:-2px;bottom:-2px;border-width:2px;background:rgba(212,255,61,.16);z-index:2}
.rpins{position:absolute;inset:0;pointer-events:none;z-index:4}
.pin{position:absolute;top:-16px;transform:translateX(-50%);width:18px;height:18px;border:0;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--blue);color:#0c0d0a;font:700 9px var(--sans);cursor:pointer;pointer-events:auto;padding:0;line-height:18px}
.pin.h{background:#c58cf0}.pin.c{background:var(--volt)}.pin.v{background:var(--amber)}.pin:hover{scale:1.2}
.rprev{position:absolute;bottom:calc(100% + 26px);width:220px;height:85px;border:2px solid var(--ink);border-radius:8px;background:#000 no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.6);z-index:20;pointer-events:none}
.rprev[hidden]{display:none}.rprev b{position:absolute;left:6px;bottom:4px;font:700 12px var(--mono);background:rgba(0,0,0,.72);padding:1px 6px;border-radius:4px}
.sv.three .rwrap{margin-top:16px}
/* 10-28 fix: the new rows must not inherit the older .stx b clamp rules */
.sv.three .song .stx{display:block;min-width:0}
.sv.three .song .stx .l1 b{display:block;flex:1 1 auto;min-width:48px;-webkit-line-clamp:unset;-webkit-box-orient:unset;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:1.3}
.sv.three .song .stx .lm b{display:inline;font-size:inherit;font-weight:600;-webkit-line-clamp:unset;white-space:nowrap;line-height:inherit}
.sv.three .song .l2{flex-wrap:nowrap}.sv.three .song .lm{flex:1 1 auto}
/* 10-28: wider list, three calm lines per song */
.sv.three{grid-template-columns:330px minmax(0,1fr) var(--chw,330px)}
.sv.three .song{grid-template-columns:72px minmax(0,1fr) auto;padding:10px 14px}
.sv.three .sth{height:30px}
.sv.three .song .l2{display:flex;gap:6px;margin-top:4px}.sv.three .song .l3{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv.three .song .l3 .lm{display:inline}
.sv.three .song .sg{max-width:150px}
.sv.three .song .newc{align-self:start;margin-top:1px}

/* 10-28 Danney: long version names → one line with … (full name on hover) */
.ver .vrow{min-width:0}.ver .vl{min-width:0;overflow:hidden;flex:1}.ver .vl b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 10-28: a clicked timeline pin highlights its comment */
.msg.hl{background:color-mix(in srgb,var(--volt,#d4ff3a) 16%,transparent);box-shadow:inset 3px 0 0 var(--volt,#d4ff3a);border-radius:8px;transition:background .3s}
.pin:hover{transform:translateX(-50%) scale(1.25);z-index:3}

/* 10-27 renumber: songs not on the client's list (red, kept, playable) + the OFFICIAL music player */
.songs .ahead.off{color:var(--red);border-top:1px solid #3a2023;margin-top:8px}
.sv.three .song.off{background:#1f1214;box-shadow:inset 3px 0 0 var(--red)}.sv.three .song.off:hover{background:#28171a}.sv.three .song.off.on{background:#2c181b;outline-color:var(--red)}
.song.off .nn{color:var(--red);white-space:nowrap}.song.off .l1 b{color:#f0c4c7}
.offban{margin:0 0 8px;padding:7px 12px;border:1px solid var(--red);border-radius:8px;background:#2a1719;color:#f0c4c7;font-size:13px}.offban b{color:var(--red)}
.music{margin:0 0 8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.music .mrow{display:flex;align-items:center;gap:10px}.music audio{flex:1;min-width:160px;height:32px}
.mbadge{flex:none;font:700 11px var(--mono,monospace);letter-spacing:.04em;font-style:normal;color:#12140f;background:var(--volt);border-radius:999px;padding:3px 10px;white-space:nowrap}
.mbadge.grey{color:var(--dim);background:transparent;border:1px solid var(--muted);font-weight:500}.music.band{padding:6px 10px}
.msrc{flex:none;color:var(--volt);font-size:13px;text-decoration:none;white-space:nowrap}.msrc:hover{text-decoration:underline}
.music .mplay{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--volt);color:#12140f;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.music .mplay .ic{width:16px;height:16px;fill:currentColor}
.music canvas.wave{flex:1;min-width:120px;height:32px;border-radius:4px;background:#14160f;cursor:pointer}.music .mtime{flex:none;font:12px var(--mono,monospace);color:var(--dim);white-space:nowrap}
.mrow2{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;font-size:12px}
.mfile{background:none;border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:2px 9px;font-size:12px;cursor:pointer}.mfile.on{border-color:var(--volt);color:var(--volt)}
.mnote{color:var(--amber)}
@media (max-width:600px){.music .mrow{flex-wrap:wrap}.music audio{flex-basis:100%;order:3}}

/* 10-27 sound-engineer PDF: tag chips, NEW, grey rows not in the client's order, the order link, the reuse shelf */
.tgs{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.tgs.big{display:inline-flex;margin:0 0 0 10px;vertical-align:middle}
.tg{font:600 9.5px var(--mono,monospace);font-style:normal;letter-spacing:.03em;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.tg.beat{color:var(--amber);border-color:#5a4426}.tg.band{color:var(--blue);border-color:#2c4252}.tg.dance{color:#e79ad8;border-color:#5a2f52}.tg.q{color:var(--dim);border-style:dashed}
.tg.new{color:#12140f;background:var(--volt);border-color:var(--volt)}
.sv.three .song.grey{opacity:.5}.sv.three .song.grey:hover,.sv.three .song.grey.on{opacity:.85}
.orderlink{display:block;margin-top:8px;font-size:12px;color:var(--volt);text-decoration:none}.orderlink:hover{text-decoration:underline}
.reuselink{display:block;padding:4px 12px 8px;font-size:12px;color:var(--red);text-decoration:none}.reuselink:hover{text-decoration:underline}
.reuse{padding:20px 24px}.rhead h1{margin:0 0 4px;font-size:22px}.rhead{margin-bottom:16px}
.rtile .media{position:relative;aspect-ratio:2.577;overflow:hidden;border-radius:8px;background:#000}.rtile .media img,.rtile .media video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.rtile .tag.offtag{left:auto;right:8px;background:#2a1719;color:var(--red);border:1px solid var(--red)}
.rmade{color:var(--dim);font-size:12px;margin-top:2px}.rsug{font-size:12px;margin-top:4px;color:var(--ink)}.rsug b{color:var(--volt)}
/* 10-27 · cleanup (Danney): search behind a magnifier, left rows = number · name · status · singer */
.sfrow{display:flex;gap:8px;align-items:center}.sfrow .lsort{flex:1;margin-top:0}
.sbtn{flex:0 0 36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--dim);cursor:pointer}
.sbtn:hover{color:var(--ink);border-color:#3a4030}.sbtn .ic{width:18px;height:18px;fill:currentColor}
.sfind{margin-top:8px}
/* 10-27 · guest view (option 2): one question, two big buttons, words optional */
body:not(.team) .rhint{display:none}
.ask{padding:14px;border:1px solid #3a4030;border-radius:12px;background:var(--panel);margin-bottom:10px}
.ask .q{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.ask .qat{color:var(--dim);font-size:13px;margin:2px 0 12px}
.ask .qrow{display:flex;gap:10px}
.qb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:12px;border:1px solid #3a4030;background:var(--bg);font:600 14px var(--sans);cursor:pointer}
.qb .ic{width:26px;height:26px;fill:currentColor}.qb.up{color:#7fc8a0}.qb.down{color:var(--red)}.qb.down .ic{transform:rotate(180deg)}
.qb:hover{border-color:currentColor}.qb.up.on{background:rgba(127,200,160,.16);border-color:#7fc8a0}.qb.down.on{background:rgba(224,127,134,.16);border-color:var(--red)}
.gempty{color:var(--dim);font-size:14px;padding:18px 4px}
.mood{display:inline-grid;place-items:center;margin-left:4px}.mood .ic{width:14px;height:14px;fill:currentColor}.mood.up{color:#7fc8a0}.mood.down{color:var(--red)}.mood.down .ic{transform:rotate(180deg)}
.pin.m-up{background:#7fc8a0}.pin.m-down{background:var(--red)}

/* ♻ Reuse candidates strip on a song page (10-27) */
.rstrip{margin:10px 0;padding:10px 12px;border:1px solid #2c3a1c;border-radius:8px;background:#11140c}.rstrip.rtop{margin-top:0;border-color:var(--volt)}
.rshead{font-size:13px;margin-bottom:8px}.rshead b{color:var(--volt)}.rshead b span{font:500 11px var(--mono,monospace);color:var(--dim)}
.rsrow{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.rcand{flex:0 0 260px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--panel)}.rcand.on{border-color:var(--volt)}
.rthumb{position:relative;display:block;aspect-ratio:2.577;border-radius:6px;overflow:hidden;background:#000}.rthumb img,.rthumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rthumb .tag{position:absolute;left:6px;bottom:6px;font-size:11px;background:rgba(0,0,0,.7);color:var(--ink);padding:1px 6px;border-radius:4px}
.rcap b{font-size:13px}.rwhy{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.35}
.ruse{margin-top:6px;align-self:flex-start;background:var(--volt);color:#12140f;border:0;border-radius:999px;padding:4px 12px;font:600 12px var(--sans,inherit);cursor:pointer}
.ruse.on{background:none;color:var(--volt);padding:4px 0;display:inline-flex;gap:8px;align-items:center;cursor:default}.ruse.off{background:none;color:var(--muted);border:1px dashed var(--muted);cursor:default}
/* 10-27 · iteration 5 (Danney): clean left list, extras behind ···, Comments column */
.sfwrap .sfind{display:block;margin-top:8px}
.rhint{display:none}
.phead{align-items:flex-start}.phr{display:flex;gap:8px;align-items:center;flex:none}
.more{position:relative}.mbtn{width:36px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--dim);font:700 16px var(--sans);letter-spacing:1px;cursor:pointer}
.mbtn:hover{color:var(--ink);border-color:#3a4030}
.mmenu{position:absolute;right:0;top:40px;z-index:30;min-width:290px;padding:6px;border:1px solid #3a4030;border-radius:12px;background:#15170f;box-shadow:0 12px 32px rgba(0,0,0,.55);display:grid;gap:2px}
.mmenu .mi{display:flex;align-items:center;gap:6px;text-align:left;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:14px var(--sans);text-decoration:none;cursor:pointer}
.mmenu .mi:hover{background:#1f2316}.mmenu .mi .ic{width:15px;height:15px;fill:currentColor}.mmenu .mi.ask{cursor:default}
.em.b.star,.b.star{display:inline-grid;place-items:center;color:var(--volt);background:none;border:0;padding:0}.b.star .ic{width:13px;height:13px;fill:currentColor}
/* Comments */
.about{margin:2px 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.abh{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;color:var(--ink);font:13px var(--sans);cursor:pointer;text-align:left}
.abh b{font:600 11px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.abh span{color:var(--dim)}.abh i{margin-left:auto;font-style:normal;color:var(--dim);transition:transform .15s}
.about.open .abh i{transform:rotate(90deg)}.about:not(.open) .abb{display:none}
.abb{padding:0 12px 12px;font-size:14px;line-height:1.5}.abb p{margin:0 0 6px}
.chat .msg .mh{display:flex!important;align-items:baseline;gap:6px;flex-wrap:nowrap;font-size:13px}.chat .msg .mh>*{flex:none}
.chat .msg .mh .ver{display:inline!important;width:auto!important;height:auto!important;white-space:nowrap;border:0!important;background:none!important;padding:0!important;color:var(--dim)!important;font:13px var(--sans)!important;cursor:pointer}.chat .msg .mh .ver::before{content:"· "}
.chat .msg .mh .when{margin:0!important;color:var(--muted);font-size:12px}.chat .msg .mh .when::before{content:"· "}
.msg .mh .macts{opacity:0;transition:opacity .15s}.msg:hover .mh .macts{opacity:1}
.agree{margin-left:auto;display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 12px ui-monospace,monospace;cursor:pointer}
.agree .ic{width:14px;height:14px;fill:currentColor}.agree:hover{color:var(--ink)}.agree.on{color:#7fc8a0}
.upd{margin:10px 0;padding:9px 14px;border-radius:12px;background:#1f201c;border:1px solid #2a2b26;font:14px/1.45 var(--sans);color:var(--ink)}
.upd b{font-weight:700}.upd .udot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--volt);margin-right:8px}
.upd .ugo{border:0;background:none;padding:0;color:var(--volt);font:600 13px ui-monospace,monospace;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.crow2{display:flex;align-items:center;gap:8px}.crow2 .rng{flex:1;min-width:0}
.tgrp{display:inline-flex;gap:6px;flex:none}
.tb{width:38px;height:32px;display:grid;place-items:center;border:1px solid #3a4030;border-radius:8px;background:var(--panel);cursor:pointer}
.tb .ic{width:17px;height:17px;fill:currentColor}.tb.up{color:#7fc8a0}.tb.down{color:var(--red)}.tb.down .ic{transform:rotate(180deg)}
.tb.up.on{background:rgba(127,200,160,.18);border-color:#7fc8a0}.tb.down.on{background:rgba(224,127,134,.18);border-color:var(--red)}

.offban.used{border-color:var(--line);background:var(--panel);color:var(--dim)}.offban.used b{color:var(--volt)}
.rmore{display:inline-block;margin:8px 0;background:none;border:1px dashed #2c3a1c;border-radius:999px;color:var(--volt);font-size:12px;padding:3px 12px;cursor:pointer}.rmore:hover{border-color:var(--volt)}.rmore.rless{float:right;margin:0;border:0;color:var(--dim)}
.mmenu[hidden]{display:none}
/* 10-27: only Songs up top; Inbox / Concepts / Show Plan / Reuse moved into ··· (the brand link returns to Songs) */
.top .tabs{visibility:hidden;pointer-events:none}
.mmenu .msep{height:1px;background:var(--line);margin:4px 6px}
/* 10-27 · Reelix Review: the real Reelix mark in the header (brand/reelix/reelix-mark.svg) */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand .rmark{width:24px;height:24px;color:var(--volt);flex:none}.brand b{font:600 11px var(--mono);letter-spacing:.16em;font-weight:600}
.brand span{font:11px var(--mono);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}.brand span::before{content:"· ";color:var(--muted)}
.mtabs{display:none}
/* 10-27 · phone layout (Danney's pick A, after YouTube's mobile app): video pinned on top; Comments / Songs / Versions tabs, one sheet each.
   Same DOM, same features — only this block changes the layout, so desktop is untouched. */
@media (max-width:1023px){
 body{padding:0!important}
 .crumbbar{display:none!important}
 header.top{position:static;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;gap:8px;background:var(--bg)}
 header.top .tabs{display:none}.right a[data-tab=handover]{display:none}.right{gap:10px;font-size:13px}
 .brand span{display:none}
 .sv.three{display:flex!important;flex-direction:column;height:auto!important;min-height:0;border:0!important;border-radius:0!important;overflow:visible!important}
 .sv.three>.pane{display:contents}
 .pane>.screen{order:0;position:sticky;top:0;z-index:30;border-radius:0;border-left:0;border-right:0;margin:0}
 .pane>.rwrap{order:1;padding:8px 12px 0}
 .pane>.phead{order:2;padding:10px 12px 0;flex-direction:row;flex-wrap:wrap;gap:8px}.pane>.phead .ptitle{font-size:18px}
 .phr{width:100%;justify-content:space-between}
 .mtabs{order:3;display:flex;gap:8px;padding:12px 12px 8px}
 .mtabs button{padding:7px 14px;border-radius:9px;border:0;background:#1b1e15;color:var(--dim);font:600 13px var(--sans);cursor:pointer}
 .mtabs button.on{background:var(--ink);color:#0c0d0a}
 .pane>*:not(.screen):not(.rwrap):not(.phead){order:4;margin-left:12px;margin-right:12px}
 .sv.three>nav.songs{order:4;max-height:none!important;overflow:visible!important;border:0!important}
 .sfwrap{position:static}
 .sv.three>aside.chat{order:4;border:0!important;max-height:none!important;min-height:0;background:none}
 .chat .msgs{overflow:visible!important;padding:6px 12px 190px!important}
 .chat .chh{display:none}
 .chat .comp{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#14160f;border-top:1px solid #2a2e20;padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
 .chat .comp .cbox{height:44px;min-height:0}
 body[data-mtab=comments] .sv.three>nav.songs,body[data-mtab=comments] .pane>*:not(.screen):not(.rwrap):not(.phead){display:none!important}
 body[data-mtab=songs] .sv.three>aside.chat,body[data-mtab=songs] .pane>*:not(.screen):not(.rwrap):not(.phead){display:none!important}
 body[data-mtab=versions] .sv.three>aside.chat,body[data-mtab=versions] .sv.three>nav.songs{display:none!important}
 .mmenu{right:-4px;min-width:260px}
}
/* 10-27 · phone landscape (after YouTube): video fills the screen at its real aspect (letterboxed, never cropped), frame strip + pins over it,
   Pulse 👍/👎 one tap, 💬 opens a 35% comment panel on the right that tracks visualViewport (--vvh/--vvt) so the keyboard can't cover the box */
.lover{display:none}
@media (orientation:landscape) and (max-height:500px){
 body{padding:0!important;overflow:hidden}
 header.top,.crumbbar,.mtabs{display:none!important}
 .sv.three{display:block!important;border:0!important;height:auto!important;overflow:visible!important}
 .sv.three>.pane{display:contents}
 .sv.three>nav.songs,.pane>*:not(.screen):not(.rwrap){display:none!important}
 .pane>.screen{position:fixed!important;inset:0;z-index:50;border-radius:0!important;outline:0!important;border:0!important;aspect-ratio:auto!important;min-height:0!important;margin:0!important;background:#000}
 .pane>.screen video{object-fit:contain!important}
 .pane>.rwrap{position:fixed!important;left:14px;right:14px;bottom:54px;z-index:52;margin:0!important;padding:0!important}
 .sv.three>aside.chat{display:none!important}
 body.lpanel .sv.three>aside.chat{display:flex!important;flex-direction:column;position:fixed;right:0;top:var(--vvt,0px);height:var(--vvh,100vh);width:35vw;z-index:60;background:#0f110c!important;border-left:1px solid #2a2e20!important;margin:0!important}
 body.lpanel .pane>.screen{right:35vw}
 body.lpanel .pane>.rwrap{right:calc(35vw + 14px)}
 .chat .chh{display:none!important}
 .chat .msgs{flex:1;overflow:auto!important;padding:10px 12px!important}
 .chat .comp{position:static!important;padding:8px 10px!important;background:#14160f}
 .chat .comp .cbox{height:40px!important;min-height:0!important}
 .lover{display:flex;flex-direction:column;gap:10px;position:absolute;right:12px;top:12px;z-index:5}
 .lover button{width:42px;height:42px;border-radius:999px;border:0;background:rgba(12,13,10,.72);display:grid;place-items:center;cursor:pointer}
 .lover .ic{width:20px;height:20px;fill:currentColor}.lover .lchat{color:#e9ebda}.lover .lup{color:#7fc8a0}.lover .ldn{color:var(--red)}.lover .ldn .ic{transform:rotate(180deg)}
 body.lpanel .lover .lchat{background:var(--volt);color:#0c0d0a}
}
/* 10-27 · iPhone fix (Danney's phone: "when give feedback it zoomed in auto"): iOS Safari zooms any field under 16px on focus,
   which pushed the comment bar off-screen. Every field is 16px on touch screens; nothing may be wider than the screen. */
@media (max-width:1023px),(pointer:coarse){
 input,textarea,select,.cbox,.sfind{font-size:16px!important}
 html,body{max-width:100%;overflow-x:hidden}
 .sv.three,.chat,.comp,.msgs,.msg,.msg>div{min-width:0;max-width:100%}
 .msg p,.chat .msgs p,.upd,.about .abb{overflow-wrap:anywhere;word-break:normal}
 .chat .comp{box-sizing:border-box;width:100%}
 .chat .comp .cbox{width:100%;box-sizing:border-box}
 .crow2{flex-wrap:wrap;min-width:0}.crow2 .rng{min-width:0}
 .chat .comp .crow{flex-wrap:wrap;min-width:0}.chat .comp .crow .hint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
}
@media (max-width:1023px){.chat .comp .rng .rb{padding:5px 8px}.chat .comp .rng{gap:5px}.chat .comp .tgrp .tb{width:36px;height:32px}}
/* 10-27 · comments = YouTube style (Danney's pick A): the words are the biggest, brightest thing; everything else is small, grey, borderless */
.chat .msg.ytc{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px 0;border:0;background:none}
.chat .msg.ytc .cav{width:30px;height:30px;font-size:13px}
.chat .msg.ytc .mb{min-width:0}
.chat .msg.ytc .mh{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font:12.5px var(--sans);color:#7d8270;margin:0 0 2px}
.chat .msg.ytc .mname{color:#a7ad94;font-weight:500}
.chat .msg.ytc .mh .ver{color:#7d8270!important;font:12.5px var(--sans)!important}.chat .msg.ytc .mh .ver::before,.chat .msg.ytc .mh .when::before{content:"· "}
.chat .msg.ytc .mh .when{color:#7d8270;font-size:12.5px}
.chat .msg.ytc .mtext{margin:0;font:400 15px/1.5 var(--sans);color:#f1f2e8;overflow-wrap:anywhere}
.chat .msg.ytc .mtext .mood{margin-right:5px;vertical-align:-2px}
.tsl{display:inline;border:0;background:none;padding:0;margin-right:5px;color:var(--volt);font:600 15px var(--sans);cursor:pointer;white-space:nowrap}.tsl:hover{text-decoration:underline}
.chat .msg.ytc .atag{color:var(--volt);font-weight:600;background:none;padding:0}
.mact{display:flex;align-items:center;gap:14px;margin-top:6px;font:13px var(--sans);color:#7d8270}
.mact .agree{margin:0;padding:0;color:#7d8270}.mact .agree.on{color:#7fc8a0}
.mact .reply{border:0;background:none;padding:0;color:#7d8270;font:500 13px var(--sans);cursor:pointer}.mact .reply:hover{color:var(--ink)}
.sdot{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:500 12.5px var(--sans);color:var(--dim);cursor:default}
.sdot i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sdot.review{color:var(--amber)}.sdot.new,.sdot.sent{color:var(--blue)}.sdot.fixed{color:#7fc8a0;cursor:pointer}.sdot.done{color:#7d8270}.sdot.declined{color:var(--red)}
/* calmer composer: borderless tools row, round field, lime ↑ */
.comp.ytc{gap:8px}
.comp.ytc .crow2{gap:2px;flex-wrap:wrap}.comp.ytc .rng{flex:0 1 auto;gap:2px}
.comp.ytc .rb,.comp.ytc .tb,.comp.ytc .atc{border:0!important;background:none!important;box-shadow:none;padding:6px 8px;font:500 13px var(--sans);color:#a7ad94;width:auto;height:auto;border-radius:8px}
.comp.ytc .rb.on{color:var(--volt)}.comp.ytc .tb.up{color:#7fc8a0}.comp.ytc .tb.down{color:var(--red)}
.comp.ytc .tb.on{background:#1f2316!important}.comp.ytc .tgrp{gap:0;margin-left:auto}
.comp.ytc .atc{color:var(--volt)}
.yin{display:flex;align-items:flex-end;gap:8px}
.comp.ytc .cbox{flex:1;min-width:0;border-radius:22px;padding:10px 16px;min-height:44px;height:44px;line-height:1.4;background:var(--bg);border:1px solid #2a2e20}
.comp.ytc .cbox:focus{border-color:#3a4030}
.comp.ytc .btn.go{flex:none;width:44px;height:44px;padding:0;border-radius:50%;font:700 20px var(--sans);display:grid;place-items:center}
.chat .msgs>*{flex:none}
.comp.ytc{align-content:end;grid-auto-rows:min-content}
.mact .sdot{white-space:nowrap;flex:none}.mact{flex-wrap:wrap;row-gap:4px}
.sdot i{display:inline-block!important;flex:none;width:7px!important;height:7px!important;border-radius:50%;background:currentColor!important}
@media (orientation:landscape) and (max-height:500px){.comp.ytc .cbox{padding:10px 10px;white-space:nowrap;overflow:hidden}.comp.ytc .btn.go{width:40px;height:40px}.comp.ytc .yin{gap:6px}}
/* 10-27 · ⏮ ⏭ on the video + Up next chip (YouTube's centre controls): hover on desktop, tap on phones */
.navover{position:absolute;inset:0;pointer-events:none;z-index:4}
.navover .nv{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(12,13,10,.62);color:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.navover .prev{left:14px}.navover .next{right:14px}
.screen:hover .navover .nv,.screen.navshow .navover .nv,.screen:focus-within .navover .nv{opacity:1}
.navover .nv:hover{background:rgba(12,13,10,.85)}
.upnext{pointer-events:auto;position:absolute;right:14px;bottom:58px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 28px);padding:8px 12px;border-radius:10px;border:1px solid #3a4030;background:rgba(12,13,10,.85);color:var(--ink);font:13px var(--sans);cursor:pointer}
.upnext span{color:var(--dim)}.upnext b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:none){.navover .nv{width:44px;height:44px}}
.upnext[hidden]{display:none}
/* 10-27 · Pulse on the video (Danney "Ok"): 👍 👎 bottom-right on hover/tap, "+1 at 0:58" flash; reactions = ticks on the frame strip.
   The 💬 button stays landscape-only. The comment box is just ⏱ Start · End + the field. */
.lover{display:flex;flex-direction:row;gap:8px;position:absolute;right:12px;bottom:56px;top:auto;z-index:5;opacity:0;transition:opacity .2s;pointer-events:none}
.screen:hover .lover,.screen.navshow .lover,.screen:focus-within .lover{opacity:1;pointer-events:auto}
.lover .lchat{display:none}
.lover button{width:40px;height:40px;border-radius:999px;border:0;background:rgba(12,13,10,.72);display:grid;place-items:center;cursor:pointer}
.lover .ic{width:19px;height:19px;fill:currentColor}.lover .lup{color:#7fc8a0}.lover .ldn{color:var(--red)}.lover .ldn .ic{transform:rotate(180deg)}
.pflash{position:absolute;right:0;bottom:48px;white-space:nowrap;padding:4px 9px;border-radius:999px;background:rgba(12,13,10,.85);font:600 12px var(--sans);opacity:0;transition:opacity .2s;pointer-events:none}
.pflash.on{opacity:1}.pflash.up{color:#7fc8a0}.pflash.down{color:var(--red)}
.ptick{position:absolute;bottom:0;width:3px;height:45%;margin-left:-1px;border-radius:2px;opacity:.55;pointer-events:auto}
.ptick.up{background:#7fc8a0}.ptick.down{background:var(--red)}
.upnext{bottom:104px}
@media (orientation:landscape) and (max-height:500px){
 .lover{flex-direction:column;top:12px;bottom:auto;opacity:1;pointer-events:auto}
 .lover .lchat{display:grid}.pflash{right:50px;bottom:auto;top:52px}
}
.reply.tofix{color:var(--volt)}
/* 10-27 · title area = Danney's pick A: one quiet grey line, ··· beside the title; Screen/On the wall inside the video on phones */
.ptitle .tgs{display:none}
.tline{font:13px var(--sans);color:#8b9079;margin-top:2px}
.phead{align-items:flex-start}
.seg.vseg{display:none}
.mmenu .minfo{display:flex;align-items:center;gap:6px;color:var(--dim);cursor:default;font-size:13px}
.mmenu .minfo:hover{background:none}
@media (max-width:1023px){
 .pane>.phead{flex-wrap:nowrap!important;align-items:flex-start}
 .pane>.phead .phl{flex:1;min-width:0}
 .phr{width:auto!important;flex:none}
 /* Danney 10-28 (real iPhone): the switch over the video covered iOS's ⤢ expand button. On phones it sits in the title row, beside ···. */
 .phr{display:flex;align-items:center;gap:6px}
 .phr .seg{display:flex}.phr .seg button{padding:6px 9px;font-size:12px}
 .seg.vseg{display:none}
}
@media (orientation:landscape) and (max-height:500px){
 .seg.vseg{display:flex;position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:6;border-radius:999px;overflow:hidden;background:rgba(12,13,10,.72);border:0}  /* top-centre: iOS keeps ⤢ top-left and sound top-right */
 .seg.vseg button{padding:6px 11px;font:600 12px var(--sans);border:0;background:none;color:#a7ad94}.seg.vseg button.on{background:rgba(212,255,61,.18);color:var(--volt)}
}
.mmenu a.mi{display:block}
.mmenu{z-index:70;max-height:min(70vh,520px);overflow:auto}
/* the playing video gets its own layer in WebKit and could sit over the in-video controls: pin the order */
.screen{isolation:isolate}.screen>video{z-index:0}.seg.vseg,.lover,.navover{z-index:20!important}
/* 10-27 · Danney: no 👍/👎 on the video player ("like on comments is enough"). Old Pulse ticks on the strip stay visible. 💬 stays in landscape. */
.lover .lup,.lover .ldn,.lover .pflash{display:none!important}
.lover{pointer-events:none}.lover .lchat{pointer-events:auto}
/* 10-27 · clear a marked part: × on the part, Esc, or a click outside it */
.rsel .rclr{position:absolute;right:-11px;top:-13px;z-index:6;width:22px;height:22px;border-radius:50%;border:0;background:#e9ebda;color:#0c0d0a;font:700 13px/22px var(--sans);text-align:center;padding:0;cursor:pointer;pointer-events:auto;box-shadow:0 2px 6px rgba(0,0,0,.55)}
.rsel .rclr:hover{background:var(--volt)}
.rsel .rclr{right:3px;top:3px;width:20px;height:20px;line-height:20px;font-size:12px}
.rask{position:absolute;top:-46px;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:10px;background:#1b1e15;border:1px solid #3a4030;box-shadow:0 6px 18px rgba(0,0,0,.55);font:13px var(--sans);color:var(--ink);white-space:nowrap}
.rask button{border:1px solid #3a4030;background:none;color:var(--ink);border-radius:7px;padding:4px 10px;font:600 12px var(--sans);cursor:pointer}
.rask button.yes{background:var(--volt);border-color:var(--volt);color:#0c0d0a}
.rask{top:auto;bottom:-46px}
/* 10-27 · version history A: older versions dimmed (still play on click), quality badge on every tile */
.ver{position:relative}
.ver.past{opacity:.45;filter:grayscale(.75);transition:opacity .15s,filter .15s}
.ver.past:hover,.ver.past:focus-visible{opacity:1;filter:none}
.qbadge{position:absolute;left:6px;top:6px;z-index:2;font:700 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.02em;padding:4px 6px;border-radius:999px;background:rgba(12,13,10,.85);border:1px solid #3a4030;color:#a7ad94}
.qbadge.q480p{color:var(--red)}.qbadge.q720p{color:var(--amber)}.qbadge.q1080p{color:#7fc8a0}.qbadge.q4K{color:var(--volt);border-color:rgba(212,255,61,.5)}
/* 10-27 · social: @mentions, one-level replies, who's here now, notification bell (Danney's go on the mocks) */
.men{background:rgba(122,167,199,.18);color:#bcd6ea;border-radius:4px;padding:0 3px;font-weight:600}
.men.me{background:rgba(212,255,61,.16);color:var(--volt)}
.chat .rep{margin:8px 0 0;padding-left:12px;border-left:2px solid #2a2e20;display:flex;flex-direction:column;gap:2px}
.chat .rep .msg.ytc{padding:6px 0}.chat .rep .cav{width:24px;height:24px;font-size:11px}
.thtog{border:0;background:none;padding:4px 0 0;color:#7fc8a0;font:600 13px var(--sans);cursor:pointer;text-align:left}
.comp.ytc{position:relative}
.ac{position:absolute;left:12px;right:12px;bottom:100%;margin-bottom:6px;z-index:80;background:#1b1e15;border:1px solid #3a4030;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.6);padding:6px;display:grid;gap:2px}
.ac .ach{font:600 11px ui-monospace,monospace;letter-spacing:.08em;color:#8b9079;padding:4px 8px}
.ac .aco{display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:8px;background:none;color:var(--ink);font:14px var(--sans);cursor:pointer;text-align:left}
.ac .aco.on,.ac .aco:hover{background:#262b1d}.ac .aco small{margin-left:auto;color:#8b9079;font-size:12px}
.aav{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--sans);color:#0c0d0a;background:#8b9079}
.aav.d{background:#7aa7c7}.aav.h{background:#c58cf0}.aav.c{background:var(--volt)}
.rto{display:flex;align-items:center;gap:8px;font:13px var(--sans);color:#8b9079}.rto:empty{display:none}.rto b{color:var(--ink)}
.rto button{border:0;background:none;color:#8b9079;font-size:16px;cursor:pointer;padding:0 4px}
.chh{display:flex;align-items:center;gap:10px}
.pres{position:relative;margin-left:auto;display:flex;align-items:center;cursor:pointer;font:12px var(--sans);color:#8b9079}
.pres .pa{position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--sans);color:#0c0d0a;background:#8b9079;margin-left:-6px;border:2px solid #0f110c}
.pres .pa:first-child{margin-left:0}.pres .pa.d{background:#7aa7c7}.pres .pa.h{background:#c58cf0}.pres .pa.g{background:#3a4030;color:var(--ink)}
.pres .pa i{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:#7fc8a0;border:2px solid #0f110c}
.pres .plb{margin-left:6px}
.whobox{position:absolute;right:0;top:calc(100% + 8px);z-index:90;width:240px;background:#15170f;border:1px solid #3a4030;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.6);padding:8px;cursor:default}
.whobox .wh{font:600 11px ui-monospace,monospace;letter-spacing:.08em;color:#8b9079;padding:4px 6px}
.whobox .wr{display:flex;align-items:center;gap:8px;padding:5px 6px;color:var(--ink);font-size:13px}.whobox .wr small{margin-left:auto;color:#8b9079;font-size:11.5px;text-align:right}
.whobox .wr i{width:8px;height:8px;border-radius:50%;background:#7fc8a0;flex:none}.whobox .wr i.away{background:var(--amber)}
.bell{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;background:none;color:var(--ink);cursor:pointer;margin-right:4px}
.bell:hover{background:#1b1e15}.bell .ic{width:20px;height:20px;fill:currentColor}
.bell .bn{position:absolute;top:-2px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#0c0d0a;font:700 11px/18px var(--sans);text-align:center}
.bell .bn[hidden]{display:none}
.npanel{position:fixed;right:20px;top:56px;z-index:200;width:380px;max-height:min(70vh,560px);overflow:auto;background:#15170f;border:1px solid #3a4030;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.6)}
.npanel .nh{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid #2a2e20}.npanel .nh b{font-size:15px}
.npanel .nmark{margin-left:auto;border:0;background:none;color:var(--volt);font:500 12px var(--sans);cursor:pointer}
.npanel .ntabs{display:flex;gap:6px;padding:8px 14px}.npanel .ntabs button{border:0;padding:4px 10px;border-radius:999px;background:#1b1e15;color:#8b9079;font:12px var(--sans);cursor:pointer}.npanel .ntabs button.on{background:var(--ink);color:#0c0d0a}
.npanel .nit{display:grid;grid-template-columns:30px 1fr;gap:10px;width:100%;padding:10px 14px;border:0;border-top:1px solid #1c1f16;background:none;text-align:left;color:var(--ink);cursor:pointer;font:13px var(--sans)}
.npanel .nit.new{background:#191c12}.npanel .nit:hover{background:#1f2316}
.npanel .nav{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--sans);color:#0c0d0a;background:#8b9079}
.npanel .nav.d{background:#7aa7c7}.npanel .nav.h{background:#c58cf0}
.npanel .nav em{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;background:#15170f;display:grid;place-items:center;font:10px var(--sans);font-style:normal}
.npanel .nb{display:grid;gap:2px;min-width:0}.npanel .nt{color:#a7ad94}.npanel .nt b{color:var(--ink)}.npanel .nq{color:var(--ink);overflow-wrap:anywhere}.npanel .nw{color:#5c6150;font-size:12px}
.npanel .nempty{padding:16px 14px;color:#8b9079;margin:0}
@media (max-width:1023px){.npanel{left:10px;right:10px;width:auto;top:54px}.pres .plb{display:none}.chat .chh{display:flex!important;padding:6px 12px}.chat .chh>b,.chat .chh>.inb{display:none}}
.ac[hidden],.whobox[hidden]{display:none!important}
/* 10-27 · left list: who's on each song instead of status pills */
.here{display:inline-flex;align-items:center;margin-left:6px;font:11.5px var(--sans);color:#8b9079}.here[hidden]{display:none}
.here .pa{position:relative;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 9px var(--sans);color:#0c0d0a;background:#8b9079;margin-left:-5px;border:2px solid #11130d}
.here .pa:first-child{margin-left:0}.here .pa.d{background:#7aa7c7}.here .pa.h{background:#c58cf0}.here .pa.g{background:#3a4030;color:var(--ink)}
.here .pa i{position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:#7fc8a0;border:2px solid #11130d}
.here .plb{margin-left:5px;white-space:nowrap}
/* 10-27 · tablets (a reviewer's device showed the in-between width): ≤1023 px uses the phone layout above (video on top, tabs);
   1024–1279 px keeps three columns but narrower sides so the video gets the room */
@media (min-width:1024px) and (max-width:1279px){.sv.three{grid-template-columns:230px minmax(0,1fr) var(--chw,290px)!important}}
@media (min-width:701px) and (max-width:1023px){.pane>.rwrap,.pane>.phead,.mtabs{padding-left:20px;padding-right:20px}.chat .msgs{padding-left:20px!important;padding-right:20px!important}}
/* 10-27 · unread-comments badge sits on the corner of the song's picture (the row's right side now shows who's here) */
.sv.three .song .sth{position:relative}
.sv.three .song .sth .newc{position:absolute;top:-6px;right:-8px;margin:0;padding:1px 6px 1px 5px;font-size:10.5px;box-shadow:0 0 0 2px #11130d}
.sv.three .song .sth .newc .ic{width:10px;height:10px}
.sv.three .song .sth{overflow:visible}.sv.three .song .sth img{border-radius:6px}
.sv.three .song .sth .newc{top:-7px;right:-7px;z-index:2}
.etime{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 6px;font:13px var(--sans);color:#8b9079}.etime b{color:var(--volt)}
.etime button{border:1px solid #3a4030;background:none;color:var(--ink);border-radius:7px;padding:3px 9px;font:500 12px var(--sans);cursor:pointer}.etime button:hover{border-color:var(--volt)}
.mact .sdot{width:auto!important;height:auto!important;min-width:0;flex:none;position:static!important;padding:0!important;border:0!important;background:none!important}
/* 10-27 · edit = one box (Danney's pick B): no pills or circles inside; buttons square and aligned to the box */
.medit.edb{display:flex;align-items:stretch;gap:8px;margin-top:4px}
.edb .ebox{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:8px 12px;border:1px solid #3a4030;border-radius:10px;background:var(--bg)}
.edb .ebox:focus-within{border-color:var(--volt)}
.edb .etl{display:flex;align-items:center;gap:8px}
.edb .etime{border:0;background:none;padding:0;color:var(--volt);font:600 13px var(--sans);cursor:pointer}.edb .etime.add{color:#8b9079;font-weight:500}
.edb .etx-x{border:0;background:none;padding:0 2px;color:#8b9079;font:15px var(--sans);cursor:pointer}.edb .etx-x:hover{color:var(--ink)}
.edb .etx{border:0;background:none;padding:0;margin:0;color:#f1f2e8;font:15px/1.5 var(--sans);resize:none;outline:0;width:100%;min-height:22px;overflow:hidden}
.edb .ebtns{display:flex;flex-direction:column;gap:6px}
.edb .ebtns button{flex:1;width:36px;min-height:28px;border-radius:8px;font:700 15px var(--sans);cursor:pointer;display:grid;place-items:center;padding:0}
.edb .eok{border:0;background:var(--volt);color:#0c0d0a}.edb .eno{border:1px solid #3a4030;background:none;color:#8b9079}.edb .eno:hover{color:var(--ink)}
/* 10-27 · avatar colour belongs to its own message only (a reply under a guest's comment turned orange) */
.msg.d>.cav{background:#7aa7c7}.msg.h>.cav{background:#c58cf0}.msg.v>.cav{background:#e8b06a}.msg.c>.cav{background:var(--volt)}
/* 10-27 · one outline in the version strip: only the playing version; the main one keeps its ★ */
.ver.picked:not(.on){border-color:var(--line)}
/* 10-27 · "Set as default" button on a version card, shown on hover (always on touch screens); the current default reads "Default ✓" */
.ver .vdef{position:absolute;right:6px;top:6px;z-index:3;padding:4px 8px;border-radius:6px;border:0;background:rgba(12,13,10,.85);color:var(--ink);font:600 11px var(--sans);cursor:pointer;opacity:0;transition:opacity .15s}
.ver:hover .vdef,.ver:focus-within .vdef{opacity:1}.ver .vdef:hover{background:var(--volt);color:#0c0d0a}
.ver .vdef.on{color:var(--volt)}.ver .vdef.on:hover{background:rgba(12,13,10,.95);color:var(--ink)}
@media (hover:none){.ver .vdef{opacity:1}.ver .vdef:not(.on){opacity:.85}}
.ver .vdef{top:auto;bottom:4px;right:4px}
/* 10-27 · drawing on the frame (Danney's pick B) */
.dwrap{position:absolute;inset:0;pointer-events:none;z-index:15}
.dlayer{position:absolute;pointer-events:none}.dlayer.on{pointer-events:auto;cursor:crosshair;outline:1px dashed rgba(212,255,61,.5)}
.dsvg{width:100%;height:100%;display:block;touch-action:none;overflow:visible}
.dsvg g{stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.dpen{position:absolute;left:12px;bottom:56px;pointer-events:auto;width:40px;height:40px;border:0;border-radius:8px;background:rgba(12,13,10,.72);color:var(--ink);font-size:18px;cursor:pointer;opacity:0;transition:opacity .2s}
.screen:hover .dpen,.screen.navshow .dpen,.screen:focus-within .dpen{opacity:1}.dpen:hover{background:var(--volt);color:#0c0d0a}
.dtools{position:absolute;left:50%;top:10px;transform:translateX(-50%);pointer-events:auto;display:flex;align-items:center;gap:3px;padding:5px;border-radius:10px;background:rgba(12,13,10,.9);border:1px solid #3a4030;z-index:25}
.dtools[hidden]{display:none}
.dtools button{width:34px;height:30px;border:0;border-radius:7px;background:none;color:var(--ink);font:600 15px var(--sans);cursor:pointer;display:grid;place-items:center}
.dtools button.on{background:var(--volt);color:#0c0d0a}
.dtools .dc{width:24px}.dtools .dc::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--c);display:block}.dtools .dc.on{background:#2a2e20}
.dtools .dsep{width:1px;height:20px;background:#3a4030;margin:0 3px}
.dtools .ddone{width:auto;padding:0 12px;background:var(--volt);color:#0c0d0a;margin-left:2px}
body.drawing .navover,body.drawing .lover,body.drawing .upnext,body.drawing .seg.vseg{display:none!important}
.dpend{display:flex;align-items:center;gap:8px;font:13px var(--sans);color:var(--volt)}.dpend:empty{display:none}
.dpend button{border:0;background:none;color:#8b9079;font-size:16px;cursor:pointer;padding:0 4px}
.hasdraw{color:var(--volt);margin-right:5px}
@media (hover:none){.dpen{opacity:1}}

/* Side screens · venue view (10-28, Danney's pick A). One row in real feet: side 16 · gap 5 · wall 110 · gap 5 · side 16 = 152 ft,
   drawn in the largest 16:9 box that fits the player (--W = that box's width). */
.screen.venue{container-type:size;--W:min(100cqw,177.78cqh);background:radial-gradient(ellipse at 50% 78%,#17190f,#030302 72%)}
.screen.venue>video{position:absolute!important;inset:auto!important;left:calc(50cqw - var(--W)*.351)!important;top:calc(50cqh - var(--W)*.157)!important;width:calc(var(--W)*.702)!important;height:calc(var(--W)*.2744)!important;object-fit:contain!important}
.sside{position:absolute;z-index:25;width:calc(var(--W)*.1021);height:calc(var(--W)*.0574);top:calc(50cqh - var(--W)*.0487);border:1px solid #23261a;background:#070805}
.sside.l{left:calc(50cqw - var(--W)*.485)}.sside.r{left:calc(50cqw + var(--W)*.3829)}
.sside video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.sside .shit{position:absolute;inset:-14px}
.sadd{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:rgba(9,10,6,.86);opacity:0;transition:opacity .15s}
.sadd button{display:grid;place-content:center;justify-items:center;gap:2px;padding:0;border:0;background:none;color:var(--volt);font:600 clamp(8px,.95cqw,11px)/1.1 var(--sans);text-align:center;cursor:pointer}
.sadd button+button{border-left:1px solid #2c3020}.sadd button:hover{background:rgba(212,255,61,.12)}
.sadd .ic{width:clamp(11px,1.6cqw,18px);height:clamp(11px,1.6cqw,18px);fill:currentColor}
.sside:hover .sadd,.sside.show .sadd{opacity:1}
@container (max-width:640px){.sadd b{display:none}}
.sprog{position:absolute;inset:0;z-index:2;display:grid;place-content:center;background:rgba(9,10,6,.9);color:#e8ead8;font:600 clamp(9px,1.05cqw,12px) var(--sans);text-align:center}
.sprog i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--volt);transition:width .2s}
/* venue view: the ⏮ ⏭ song buttons move to the centre, just under the wall, so they never cover them */
.screen.venue .navover .nv{top:calc(50cqh + var(--W)*.13);transform:none;width:36px;height:36px;font-size:15px}
.screen.venue .navover .prev{left:calc(50cqw - 44px)}.screen.venue .navover .next{right:auto;left:calc(50cqw + 8px);margin:0}

/* Pick a loop (10-28) */
.lpick{display:grid;gap:14px;max-height:70vh;overflow:auto}.lpc>b{display:block;margin-bottom:6px;font-size:14px}
.lpg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.lpt{position:relative;aspect-ratio:16/9;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#000;cursor:pointer}
.lpt img,.lpt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.lpt:hover{outline:2px solid var(--volt)}
.lpt span{position:absolute;left:4px;bottom:4px;padding:1px 5px;background:rgba(0,0,0,.7);color:#e8ead8;font:600 11px var(--sans);border-radius:3px}

/* 🔒 Song lock (10-28, Danney only): sits in the row's left padding, right beside the thumbnail */
.song{position:relative}.songs.lk .song{padding-left:28px}
.slk{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:16px;height:16px;display:grid;place-items:center;color:#5d6250;opacity:0;cursor:pointer;transition:opacity .15s}
.slk .ic{width:14px;height:14px;fill:currentColor}.song:hover .slk{opacity:.7}.slk:hover{color:var(--volt);opacity:1}
.slk.on{opacity:1;color:var(--volt)}
@media (hover:none){.slk{opacity:.45}.slk.on{opacity:1}}

/* Claude's update cards, grouped (10-28) */
.upg{display:grid;gap:6px;margin:6px 0;padding:8px;border:1px solid var(--line);border-radius:10px;background:#0f110b}
.upgh{display:flex;align-items:center;gap:8px;font-size:13px;color:#a7ad94}.upgh b{color:#e8ead8;font-weight:600}
.upgt{margin-left:auto;padding:3px 8px;border:1px solid #3a4030;border-radius:6px;background:none;color:var(--volt);font:600 12px var(--sans);cursor:pointer}
.upg .upd{margin:0}
/* 10-28 (real iPhone): iOS keeps sound top-right, so the landscape 💬 sits lower on the right edge, clear of the corner */
@media (orientation:landscape) and (max-height:500px){.lover{top:30%!important}}

/* ⏮ ⏭ like YouTube (Danney 10-28): thin white line icons in a soft see-through circle, smaller, at the far edges so iOS's centre
   controls stay clear; they fade in and out with the controls (opacity rules above). */
.navover .nv{width:40px;height:40px;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.navover .nv .ic{width:18px;height:18px;fill:currentColor}
.navover .nv:hover{background:rgba(0,0,0,.5)}
.navover .prev{left:10px}.navover .next{right:10px}
@media (hover:none){.navover .nv{width:36px;height:36px}.navover .nv .ic{width:16px;height:16px}}
.screen.venue .navover .nv{width:34px;height:34px}
/* 10-28 (#98 bug): a square/tall newest poster (Hannah's 768×768 side loops) made the row taller than its box and pushed the list sideways.
   The thumb image is always a 16:9 crop; the list never scrolls sideways (the .sth box stays overflow:visible for the comment badge). */
.sv.three .song .sth img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
.sv.three>nav.songs{overflow-x:hidden}.sv.three .song{min-width:0}.sv.three .song .stx{min-width:0}

/* 10-30: keep loop slot numbers like 3-1 on one line */
.songs .song i.nn{white-space:nowrap}

/* 10-30 Danney: cleaner — no lock icons, only the current version in the strip */
.songs .song .slk,.pane .slk{display:none!important}
.vhead .shead span{display:none}

/* 10-30: collapsed-comments tab sits where the Hide button was; loop library */
.chopen{top:78px;transform:none;writing-mode:horizontal-tb;padding:6px 10px;border-radius:8px 0 0 8px}
.looplib .rshead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.looplib .sfind{margin-left:auto;max-width:260px}
.looplib .rsrow{flex-wrap:wrap;max-height:420px;overflow-y:auto}.lcand{flex:0 0 200px}.lsug{flex:0 0 100%;font-size:11px;color:#a9ae96;text-transform:uppercase;letter-spacing:.06em}
.lcand{flex:0 0 230px}.lcand .rcap{display:flex;flex-direction:column;gap:4px}.lcand .rcap b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lcand .ruse{align-self:flex-start}

/* 10-30 Danney: once a version is selected the strip shows only that one; unselect brings all back */
body.haspick .vstrip .ver:not(.picked){display:none}
.looplib{display:none}
/* 10-30 Danney: resizable comments column */
.sv.three>aside.chat{position:relative;min-width:0;overflow:hidden}
.cdrag{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:col-resize;z-index:5;border-left:1px solid #1c1f16}
.cdrag:hover,body.cdragging .cdrag{border-left-color:#d4ff3d}
body.cdragging{user-select:none;cursor:col-resize}

/* 10-30: comments column snapped shut — only a vertical tab remains */
.chtab{display:none}
body.chmin .sv.three>aside.chat>*:not(.cdrag):not(.chtab){display:none!important}
body.chmin .chtab{display:flex;align-items:center;gap:6px;position:absolute;inset:0;left:8px;width:28px;background:none;border:0;color:#d4ff3d;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;writing-mode:vertical-rl;cursor:pointer;padding:16px 0;justify-content:flex-start}
body.chmin .chtab b{background:#d4ff3d;color:#141a05;border-radius:9px;padding:1px 5px;font-size:11px;writing-mode:horizontal-tb}
body.chmin .chtab:hover{color:#fff}

/* 10-30 loop placeholders: ordered multi-pick (studio.js loopPicker). Number badge = play order; ‹ › ✕ reorder/remove in the picked strip. */
.ver .lnum{position:absolute;left:6px;top:6px;z-index:3;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--volt);color:#12140f;font:700 12px/22px var(--sans,inherit);text-align:center;box-shadow:0 0 0 2px rgba(12,13,10,.85)}
.lbar{display:flex;gap:8px;align-items:center}.lsel{background:var(--volt);color:#12140f;border-color:var(--volt)}
.lchk{position:absolute;right:6px;top:6px;z-index:3;width:24px;height:24px;border-radius:6px;background:rgba(12,13,10,.85);display:flex;align-items:center;justify-content:center;cursor:pointer}.lchk input{width:16px;height:16px;margin:0;accent-color:var(--volt);cursor:pointer}.lchk.on{background:var(--volt)}
/* Back loop strip (10-31): same small tiles as Versions, but never hidden by the haspick rule */
.blstrip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 2px 10px;scroll-behavior:smooth;flex:none}
.blstrip::-webkit-scrollbar{height:8px}
.blstrip::-webkit-scrollbar-thumb{background:#2c3122;border-radius:8px}
.blstrip .ver{flex:0 0 148px;padding:5px;gap:4px;border-radius:8px}
.blstrip .ver img{aspect-ratio:2.58;border-radius:5px}
.blstrip .vrow{min-height:22px;flex-wrap:nowrap}
.blstrip .vl b{font-size:12px}
.blthumb{width:46px;aspect-ratio:2.58;object-fit:cover;border-radius:4px;margin-right:2px}
.blname{font-style:normal;color:#a9ae96;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Final printed order: keep singer and audio plan legible in the existing song list. */
@media (min-width:1024px) and (max-width:1279px){.sv.three{grid-template-columns:300px minmax(0,1fr) var(--chw,290px)!important}}
.sv.three .song .l2{flex-wrap:wrap;gap:3px 6px}
.sv.three .song .sg{max-width:100%}
.sound-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;font-size:12px;line-height:1;white-space:nowrap}
/* 10-31: the sound icon now names the owner — ours or the house's */
.sound-icon{width:auto;gap:3px;justify-content:flex-start}
.sound-icon .sw{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.sound-icon.ours{background:#1f4fd8;color:#fff;border-radius:3px;padding:1px 5px 1px 4px}
.sound-icon.ours .sw{color:#fff}
.sound-icon.house{color:#8d937c}
.sound-icon.band{color:#6f7560}
.sv.three .song .l1{gap:5px}
.sv.three .song .stx .l1 b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Discord reviews page (11-07): guest comments grouped by song, newest first */
.dpill{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border:1px solid #3a4030;border-radius:999px;color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.dpill b{color:var(--volt)}.dpill.on,.dpill:hover{border-color:var(--volt)}
.dpage{max-width:1100px;margin:0 auto;padding:16px}.dhead h1{margin:0 0 4px;font-size:24px}.dhead{margin-bottom:16px}
.dgrid{display:grid;gap:14px}
.dcard{display:grid;grid-template-columns:220px 1fr;gap:14px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.dth{display:grid;place-items:center;aspect-ratio:2.58;border-radius:6px;overflow:hidden;background:#000;align-self:start}.dth img{width:100%;height:100%;object-fit:cover}
.dt{display:flex;gap:8px;align-items:baseline;color:var(--ink);text-decoration:none;font-size:17px}.dt .nn{color:var(--dim);font-style:normal;font-family:var(--mono,monospace)}.dt:hover b{color:var(--volt)}
.dlist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.dlist li{padding:8px 10px;border-radius:8px;background:#0f110b}
.dlist li a{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;color:var(--ink);text-decoration:none;font-size:13px}.dlist .tm{color:var(--volt);font-weight:600}
.dlist p{margin:4px 0 0;font-size:15px;line-height:1.4}
@media (max-width:700px){.dcard{grid-template-columns:1fr}.dpage{padding:12px}.dpill{padding:4px 9px;font-size:12px}}
@media (max-width:700px){.dpw{display:none}}