:root{
  --bg:#121010;--bg-2:#1a1716;--panel:#211d1b;--panel-2:#2a2523;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --text:#f4ede4;--muted:#b3a593;--dim:#7d6f60;
  --orange:#ff8a2a;--orange-deep:#e4661a;--orange-soft:rgba(255,138,42,.14);--red:#e23a2e;--ok:#5fc98a;--blue:#5ab0ff;--purple:#b48cff;--green:#7ad96b;
  --font-display:'Chillax','Nunito',system-ui,sans-serif;--font-body:'Nunito',system-ui,-apple-system,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r:14px;--r-sm:9px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.45;overflow:hidden}
button{font:inherit}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.01em}
.app{display:grid;grid-template-rows:58px 1fr;height:100vh}

/* top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);background:#161312;z-index:5}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:16px;white-space:nowrap}
.logo svg{width:28px;height:28px}
.logo span{color:var(--muted);font-weight:500}
.pill{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);background:var(--orange-soft);padding:4px 9px;border-radius:999px;white-space:nowrap}
.pill.ok{color:var(--ok);background:rgba(95,201,138,.14)}
.spacer{flex:1}
.btn{font-weight:800;font-size:13px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .15s,transform .1s,border-color .15s;white-space:nowrap}
.btn:hover{background:var(--panel-2);border-color:rgba(255,255,255,.22)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#1a1206}
.btn.primary:hover{background:#ff9a47}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.icon{width:32px;height:32px;padding:0;display:inline-grid;place-items:center;border-radius:9px}
.btn.danger{color:#ffb3ad;border-color:rgba(226,58,46,.4)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.xp{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:700}
.xp .bar{width:120px;height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.xp .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),#ffc266);width:0;transition:width .5s ease}

/* customize bar */
.custombar{display:none;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(90deg,rgba(255,138,42,.18),rgba(255,138,42,.05));border-bottom:1px solid rgba(255,138,42,.35);flex-wrap:wrap}
.custombar b{font-family:var(--font-display);font-weight:600;color:var(--orange);margin-right:6px}
.app.customizing{grid-template-rows:58px auto 1fr}
.app.customizing .custombar{display:flex}
.custombar select,.custombar input{font:inherit;font-size:13px;background:#0d0b0a;border:1px solid var(--line-2);color:var(--text);border-radius:9px;padding:6px 10px}

/* workspace */
.workspace{position:relative;display:grid;grid-template-columns:var(--col-left,230px) 6px 1fr 6px var(--col-right,320px);grid-template-rows:1fr auto;min-height:0;overflow:hidden;background:var(--bg-2)}
.workspace.no-left{grid-template-columns:0 0 1fr 6px var(--col-right,320px)}
.workspace.no-right{grid-template-columns:var(--col-left,230px) 6px 1fr 0 0}
.workspace.no-left.no-right{grid-template-columns:0 0 1fr 0 0}
.dock{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden auto;grid-row:1}
.dock[data-dock="center"] .panel[data-panel="stage"]{min-height:380px}
.dock[data-dock="left"]{grid-column:1;border-right:1px solid var(--line)}
.dock[data-dock="center"]{grid-column:3}
.dock[data-dock="right"]{grid-column:5;border-left:1px solid var(--line)}
.dock[data-dock="bottom"]{grid-column:1/-1;grid-row:2;flex-direction:row;border-top:1px solid var(--line);height:var(--bottom-h,0px);max-height:60vh}
.dock[data-dock="bottom"]:empty{display:none}
.workspace.no-left .dock[data-dock="left"],.workspace.no-right .dock[data-dock="right"]{display:none}
.divider{grid-row:1;cursor:col-resize;background:transparent;position:relative;z-index:2}
.divider:hover,.divider.active{background:rgba(255,138,42,.35)}
.divider[data-side="left"]{grid-column:2}
.divider[data-side="right"]{grid-column:4}
.workspace.no-left .divider[data-side="left"],.workspace.no-right .divider[data-side="right"]{display:none}
.hdivider{height:6px;cursor:row-resize;flex:0 0 6px;position:relative;z-index:2}
.hdivider:hover,.hdivider.active{background:rgba(255,138,42,.35)}
.dock[data-dock="bottom"] .hdivider{display:none}
.bottom-divider{grid-column:1/-1;grid-row:2;height:6px;cursor:row-resize;align-self:start;display:none}
.app.customizing .dock{outline:1px dashed rgba(255,138,42,.25);outline-offset:-1px}
.dock.drop-target{background:rgba(255,138,42,.08);outline:2px dashed var(--orange)!important}

/* panel */
.panel{display:flex;flex-direction:column;min-height:120px;min-width:0;flex:var(--grow,1) 1 0;overflow:hidden;background:var(--bg-2);position:relative}
.dock[data-dock="bottom"] .panel{flex:var(--grow,1) 1 0;border-right:1px solid var(--line)}
.panel-head{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:800;flex:0 0 auto;user-select:none}
.panel-head .ph-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-tools{display:none;gap:4px;align-items:center}
.app.customizing .panel-tools{display:flex}
.app.customizing .panel-head{cursor:grab;background:rgba(255,138,42,.07);color:var(--orange)}
.app.customizing .panel.dragging{opacity:.4}
.ptool{width:24px;height:24px;border:0;border-radius:6px;background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:12px}
.ptool:hover{background:var(--orange);color:#1a1206}
.ptool.danger:hover{background:var(--red);color:#fff}
.ptool[disabled]{opacity:.3;cursor:not-allowed}
.panel-body{flex:1;min-height:0;overflow:auto;padding:0 14px 14px}
.panel.floating{position:absolute;z-index:20;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.5);resize:both;min-width:220px;min-height:160px;flex:none}
.panel.floating .panel-head{cursor:move;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.app.customizing .panel.floating .panel-head{background:rgba(255,138,42,.1)}
.panel.floating .panel-tools{display:flex}
.panel.floating .ptool.only-custom{display:none}
.app.customizing .panel.floating .ptool.only-custom{display:grid}

.dock[data-dock="left"] .panel:last-child .panel-body{padding-bottom:160px}

/* menu popover */
.menu{position:absolute;z-index:40;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:6px;min-width:190px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.menu button{display:flex;width:100%;gap:10px;align-items:center;text-align:left;border:0;background:transparent;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:700}
.menu button:hover{background:var(--panel-2)}
.menu button:disabled{opacity:.4;cursor:default}
.menu .sep{height:1px;background:var(--line);margin:4px 2px}
.menu small{margin-left:auto;color:var(--dim);font-weight:600}

/* stage */
.stage{position:relative;height:100%;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#2a1d12 0%,#161312 60%)}
.stage-floor{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,3vw,34px);padding:30px 20px 36px;cursor:pointer;min-height:260px}
.unit{--rot:0deg;--col1:#fff2b0;--col2:#ffb03b;--col3:#ff6a1a;width:52px;height:220px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;border-radius:12px;transition:background .15s}
.unit:hover{background:rgba(255,255,255,.03)}
.unit.selected .base,.unit.selected .head{border-color:var(--orange)}
.unit.selected .base{box-shadow:0 0 16px rgba(255,138,42,.55)}
.unit .flame-wrap{pointer-events:none;height:160px;width:52px;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%;transform:rotate(var(--rot)) scale(var(--fsx,1),var(--fs,1));transition:transform .35s ease}
.unit .flame{width:34px;height:150px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:linear-gradient(180deg,var(--col1),var(--col2) 40%,var(--col3) 75%,rgba(255,80,20,0));transform-origin:50% 100%;transform:scaleY(var(--lvl,0)) scaleX(calc(.6 + var(--lvl,0)*.4));opacity:calc(.25 + var(--lvl,0)*.75);filter:blur(.3px) drop-shadow(0 0 12px rgba(255,120,30,calc(var(--lvl,0)*.6)));transition:transform .25s ease,opacity .25s ease}
.unit.flick .flame{animation:flick 1.1s ease-in-out infinite}
.unit.pulse .flame{animation:pulse 1.4s ease-in-out infinite}
.unit.chase .flame{animation:chase 1.8s steps(1) infinite}
.unit.wave .flame{animation:wave 2.4s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scaleY(var(--lvl)) scaleX(calc(.6 + var(--lvl)*.4))}50%{transform:scaleY(calc(var(--lvl)*1.12)) scaleX(calc(.56 + var(--lvl)*.38))}}
@keyframes pulse{0%,100%{transform:scaleY(calc(var(--lvl)*.5)) scaleX(.7)}50%{transform:scaleY(var(--lvl)) scaleX(1)}}
@keyframes chase{0%,16%{transform:scaleY(var(--lvl)) scaleX(1)}17%,100%{transform:scaleY(calc(var(--lvl)*.15)) scaleX(.6)}}
@keyframes wave{0%,100%{transform:scaleY(calc(var(--lvl)*.3)) scaleX(.7) rotate(-8deg)}50%{transform:scaleY(var(--lvl)) scaleX(1) rotate(8deg)}}
.unit .head{width:30px;height:14px;background:#2c2927;border-radius:4px 4px 2px 2px;border:1px solid #514a45;margin-bottom:-1px;transform:rotate(var(--rot));transform-origin:50% 120%;transition:transform .35s ease}
.unit .base{width:40px;height:22px;border-radius:6px;background:#3a3633;border:1px solid #514a45;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--dim)}
.unit.selected .base{color:var(--orange);border-color:var(--orange)}
.stage-toolbar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:rgba(0,0,0,.25);flex-wrap:wrap;align-items:center}
.chip{font-size:12.5px;font-weight:800;border:1px solid var(--line-2);background:var(--panel);color:var(--text);padding:7px 11px;border-radius:999px;cursor:pointer}
.chip:hover,.chip:focus-visible{border-color:var(--orange);color:var(--orange);outline:none}
.chip.on{background:var(--orange);color:#1a1206;border-color:var(--orange)}
.stage-toolbar .sel{margin-left:auto;font-size:12px;color:var(--dim);font-weight:700}

/* faders */
.faders{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:10px}
.fader{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .15s}
.fader:hover,.fader:focus-within{border-color:var(--line-2)}
.fader.hot{border-color:var(--orange)}
.fader label{font-size:11px;font-weight:800;color:var(--muted);text-align:center;cursor:text;border-radius:6px;padding:1px 4px}
.fader label:hover{background:var(--panel-2)}
.fader .track{position:relative;height:140px;width:100%;display:flex;justify-content:center}
.fader input[type=range]{writing-mode:vertical-lr;direction:rtl;height:140px;width:26px;accent-color:var(--orange);cursor:ns-resize;margin:0}
.fader .val{font-family:var(--font-mono);font-size:11.5px;color:var(--orange);min-height:16px}
.fader .val small{color:var(--dim);font-family:var(--font-body);font-weight:700}
.fader .flash{font-size:11px;font-weight:800;border:0;background:var(--red);color:#fff;border-radius:7px;padding:6px 0;width:100%;cursor:pointer;letter-spacing:.04em}
.fader .flash:active,.fader .flash.on{filter:brightness(1.4);box-shadow:0 0 14px rgba(226,58,46,.7)}
.fader .flash:disabled{background:#4a3a38;color:#8a7a78;cursor:default;box-shadow:none;filter:none}
.fader.program input[type=range]{accent-color:var(--purple)}
.fader.program .val{color:var(--purple)}
.fader.master input[type=range]{accent-color:#ffc266}
.hint{font-size:12.5px;color:var(--muted);background:var(--orange-soft);border-left:3px solid var(--orange);padding:8px 12px;border-radius:0 8px 8px 0;margin-top:12px}

/* cues */
.cues-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.cue{position:relative;aspect-ratio:1.4;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);color:var(--dim);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;font-size:12px;transition:all .15s}
.cue b{font-family:var(--font-display);font-size:18px;color:var(--text)}
.cue.filled{border-color:var(--orange);color:var(--orange)}
.cue.filled b{color:var(--orange)}
.cue.live{background:var(--orange);color:#1a1206;box-shadow:0 0 18px rgba(255,138,42,.5)}
.cue.live b{color:#1a1206}
.cue.arm{outline:2px dashed var(--orange);outline-offset:2px}
.cue .mini{position:absolute;bottom:4px;left:6px;right:6px;height:3px;display:flex;gap:1px}
.cue .mini i{flex:1;background:currentColor;opacity:.5;transform-origin:bottom;border-radius:1px}
.cue-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cue-row .go{background:var(--ok);border-color:var(--ok);color:#06220f}
.cue-row .go:hover{background:#7ad99f}
.fade-ctl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:700;margin-top:10px}
.fade-ctl input{flex:1;accent-color:var(--orange)}

/* missions */
.mission{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--panel)}
.mission.done{border-color:rgba(95,201,138,.5)}
.mission.active{border-color:var(--orange)}
.mission h3{font-size:14px;font-family:var(--font-body);display:flex;align-items:center;gap:8px}
.mission h3 .badge{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--panel-2);color:var(--dim);flex:0 0 auto}
.mission.done h3 .badge{background:var(--ok);color:#06220f}
.mission p{margin:4px 0 8px;color:var(--muted);font-size:13px}
.mission ul{list-style:none;margin:0 0 8px;padding:0;font-size:12.5px}
.mission li{display:flex;gap:8px;align-items:center;padding:3px 0;color:var(--muted)}
.mission li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dim);flex:0 0 auto}
.mission li.ok{color:var(--text)}
.mission li.ok::before{background:var(--ok);border-color:var(--ok);content:"✓";color:#06220f;font-size:10px;font-weight:900;display:grid;place-items:center}

/* notes */
.notes textarea{width:100%;height:100%;min-height:140px;resize:none;font:inherit;font-size:14px;background:#0d0b0a;border:1px solid var(--line-2);color:var(--text);border-radius:10px;padding:10px 12px}

/* colors */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
.swatch{border:1px solid var(--line-2);border-radius:10px;padding:8px;background:var(--panel);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--muted)}
.swatch i{width:28px;height:36px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:linear-gradient(180deg,var(--c1),var(--c2) 45%,var(--c3))}
.swatch:hover{border-color:var(--orange);color:var(--text)}

/* values */
.values table{width:100%;border-collapse:collapse;font-size:12.5px}
.values th,.values td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line)}
.values th{color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.values td.num{font-family:var(--font-mono);color:var(--orange);text-align:right}
.values .bar{height:6px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.values .bar i{display:block;height:100%;background:var(--orange)}
.values .addr{font-family:var(--font-mono);color:var(--dim)}

/* glossary */
.gloss dt{font-weight:800;color:var(--orange);margin-top:8px;font-size:13px}
.gloss dd{margin:0;color:var(--muted);font-size:13px}

/* toast */
.toast{position:fixed;left:50%;top:68px;transform:translateX(-50%) translateY(-12px);background:var(--panel);border:1px solid var(--line-2);color:var(--text);padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;opacity:0;transition:all .25s;z-index:60;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translateX(-50%)}
.empty{color:var(--dim);font-size:13px;padding:20px 10px;text-align:center}
.key{font-family:var(--font-mono);font-size:11px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;color:var(--muted)}

@media (max-width:900px){
  .workspace,.workspace.no-left,.workspace.no-right{display:flex;flex-direction:column;overflow:visible}
  .dock[data-dock="center"]{order:-1}
  .dock[data-dock="right"]{order:0}
  .dock[data-dock="left"]{order:1}
  .dock[data-dock="bottom"]{order:2}
  .dock{display:block!important;border:0!important;height:auto!important}
  .divider,.hdivider,.bottom-divider{display:none!important}
  .panel{min-height:0;height:auto}
  .panel.floating{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;resize:none;border-radius:0;box-shadow:none;border:0}
  .stage-floor{gap:6px;padding:20px 6px 24px}
  .unit,.unit .flame-wrap{width:40px}
  .unit .flame{width:28px;height:120px}
  .unit .flame-wrap{height:130px}
  .unit{height:190px}
  .workspace{overflow-x:hidden}
  .topbar .hide-m{display:none}
  .topbar{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .topbar .btn{padding:7px 11px;font-size:12px}
  .app,.app.customizing{grid-template-rows:auto auto 1fr;height:auto}
  html,body{overflow:auto}
  .dock[data-dock="left"] .panel:last-child .panel-body{padding-bottom:14px}
}

/* patch */
.patch{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.patch table{flex:1 1 300px;border-collapse:collapse;font-size:13px;max-width:460px}
.patch-side{flex:1 1 220px;min-width:0}
.patch-side .cue-row{flex-wrap:wrap}
.patch-side .hint{margin-top:10px}
.patch th,.patch td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line)}
.patch th{color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.patch input,.patch select{font:inherit;font-size:13px;background:#0d0b0a;border:1px solid var(--line-2);color:var(--text);border-radius:8px;padding:5px 8px;width:76px}
.patch select{width:60px}
.patch input:focus,.patch select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.patch .addr{font-family:var(--font-mono);color:var(--dim);font-size:12px}
.patch tr.conflict td{background:rgba(226,58,46,.12)}
.patch tr.conflict .addr{color:#ff8a80}
.patch-status{margin-top:10px;font-size:12.5px;font-weight:700}
.patch-status .warn{color:#ff8a80}
.patch-status .good{color:var(--ok)}
.mission li .quiz{display:flex;gap:6px;margin-left:auto;align-items:center}
.mission li .quiz input{width:64px;font:inherit;font-size:13px;background:#0d0b0a;border:1px solid var(--line-2);color:var(--text);border-radius:8px;padding:4px 8px}
.mission li .quiz input:focus{outline:2px solid var(--orange);outline-offset:1px}
.mission li.has-quiz{flex-wrap:wrap}
.mission li.has-quiz .quiz{flex-basis:100%;margin-left:26px}

/* music */
.beat-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.beats{display:flex;gap:8px}
.beats i{width:18px;height:18px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);transition:transform .08s,background .08s}
.beats i.on{background:var(--orange);transform:scale(1.25);box-shadow:0 0 14px rgba(255,138,42,.7)}
.beats i:first-child.on{background:#ffc266}
.bar-count{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.clock{font-family:var(--font-mono);font-size:12px;color:var(--dim);margin-left:auto}
.rec-on{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important;animation:recblink 1s steps(2) infinite}
@keyframes recblink{50%{filter:brightness(.7)}}
.timeline{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel)}
.tl-head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:800;margin-bottom:4px}
.tl-list{list-style:none;margin:0;padding:0;max-height:120px;overflow:auto;font-size:12.5px}
.tl-list li{display:flex;gap:10px;padding:3px 0;border-bottom:1px dashed var(--line);color:var(--text)}
.tl-list li.fired{color:var(--dim)}
.tl-list li .onbeat{margin-left:auto;color:var(--ok);font-weight:700;font-size:11px}
.tl-list li.empty{color:var(--dim);border:0}


/* classroom */
#class-btn .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:1px}
.cm{position:fixed;inset:0;z-index:2147483100;background:rgba(10,8,7,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.cm[hidden]{display:none}
.cm-card{width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cm-head{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2);z-index:1}
.cm-head h2{margin:0;font-family:var(--font-display);font-size:20px;letter-spacing:.02em}
.cm-tabs{display:flex;gap:4px;background:var(--panel);border-radius:999px;padding:3px}
.cm-tab{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:13px;padding:6px 14px;border-radius:999px;cursor:pointer}
.cm-tab.on{background:var(--orange);color:#1a1206}
.cm-close{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:24px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px}
.cm-close:hover{background:var(--panel);color:var(--text)}
.cm-body{padding:18px 20px 22px}
.cm-intro{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:14px}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.cm-student{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);cursor:pointer;font:inherit;transition:border-color .15s,transform .1s}
.cm-student:hover{border-color:var(--orange);transform:translateY(-1px)}
.cm-student.on{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.cm-student b{font-size:15px}
.cm-student span{font-size:12.5px;color:var(--muted)}
.cm-student small{font-size:11px;color:var(--dim)}
.cm-empty{color:var(--dim);font-size:13px;padding:10px 0}
.cm-add,.cm-pin{display:flex;gap:8px}
.cm-add input,.cm-pin input{flex:1;font:inherit;font-size:14px;background:#0d0b0a;border:1px solid var(--line-2);color:var(--text);border-radius:999px;padding:9px 14px;min-width:0}
.cm-pin input{max-width:140px;letter-spacing:.4em;text-align:center;font-size:18px}
.cm-add input:focus,.cm-pin input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.cm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cm-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:16px}
.cm-table th,.cm-table td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.cm-table th{color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cm-table td small{color:var(--dim);font-family:var(--font-mono);font-size:11px;margin-left:4px}
.cm-table td em{font-style:normal;color:var(--ok);font-size:11px;font-weight:800;margin-left:6px}
.cm-row-actions{display:flex;gap:6px;justify-content:flex-end}
.btn.danger{color:#ff8a80;border-color:rgba(226,58,46,.4)}
.btn.danger:hover{background:rgba(226,58,46,.14)}
.cm-danger{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border:1px dashed rgba(226,58,46,.4);border-radius:12px}
.cm-danger>b{color:#ff8a80;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-right:4px}
.cm-note{flex-basis:100%;color:var(--dim);font-size:12px;line-height:1.5;margin-top:6px}
.cm-note code{font-family:var(--font-mono);background:var(--panel);padding:1px 5px;border-radius:5px}
@media (max-width:900px){.cm-head{flex-wrap:wrap;padding-right:52px}.cm-close{position:absolute;right:12px;top:12px}.cm-table th:nth-child(4),.cm-table td:nth-child(4),.cm-table th:nth-child(5),.cm-table td:nth-child(5){display:none}}

/* Flame Scale slider in the stage toolbar (display only) */
.chip.flame-scale{display:inline-flex;align-items:center;gap:8px;cursor:default}
.chip.flame-scale input{width:110px;accent-color:var(--accent,#ff8a2a);margin:0}
.chip.flame-scale output{min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:700px){.chip.flame-scale input{width:80px}}