:root{
  --gold:#F0C430;--char:#2C2C2C;--bg:#171717;--panel:#222;--panel2:#2a2a2a;--line:#3a3a3a;
  --text:#f2f2f2;--mute:#a8a8a8;--ok:#4cc38a;--bad:#ff5d5d;--warn:#f0a030;--run:#3ea6ff;
  --font:Poppins,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 var(--font)}
button,input,select,textarea{font:inherit;color:inherit}
.boot{padding:2rem;color:var(--mute)}
a{color:var(--gold)}

/* header */
.top{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--char);border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:.4rem}
.brand b{font-size:1.1rem;letter-spacing:.02em}
.brand span{color:var(--gold);font-size:.8rem}
.clock{font:600 1.1rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;margin-left:auto}
.pills{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pill{padding:.15rem .6rem;border-radius:99px;background:#3a3a3a;font-size:.75rem;white-space:nowrap}
.pill.ok{background:#1f4a37;color:#bdf2d8}.pill.bad{background:#5a2323;color:#ffc9c9}.pill.warn{background:#5a4217;color:#ffe0a8}
nav.tabs{display:flex;gap:.25rem;padding:.5rem 1rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
nav.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:.5rem .9rem;color:var(--mute);cursor:pointer}
nav.tabs button.on{color:var(--text);border-bottom-color:var(--gold)}
main{padding:1rem;max-width:1500px;margin:0 auto}
h2{margin:.2rem 0 .8rem;font-size:1.15rem}
h3{margin:1rem 0 .4rem;font-size:.95rem;color:var(--gold)}
.muted{color:var(--mute)}.small{font-size:.8rem}
.err{color:var(--bad)}.okc{color:var(--ok)}

/* controls */
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.45rem .8rem;cursor:pointer}
.btn:hover{border-color:var(--gold)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.gold{background:var(--gold);color:#1b1b1b;border-color:var(--gold);font-weight:600}
.btn.danger{border-color:#7a2d2d;color:#ffb3b3}
.btn.sm{padding:.2rem .5rem;font-size:.8rem}
input,select,textarea{background:#1c1c1c;border:1px solid var(--line);border-radius:6px;padding:.3rem .45rem;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
input:disabled,select:disabled,textarea:disabled{opacity:.7}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem}
.grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.show-card{text-align:left;cursor:pointer}
.show-card:hover{border-color:var(--gold)}
.show-card h4{margin:0 0 .3rem}

/* login */
.login{max-width:420px;margin:8vh auto;display:grid;gap:.7rem}
.login h1{margin:0}.login h1 span{color:var(--gold);font-size:.9rem;display:block}
.login input{padding:.6rem}

/* monitors + transport */
.monitors{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
@media(max-width:700px){.monitors{grid-template-columns:1fr}}
.mon{background:#000;border:2px solid var(--line);border-radius:12px;padding:.8rem 1rem;min-height:110px;position:relative}
.mon.prog{border-color:#a02b2b}.mon.prev{border-color:#2b8a4f}
.mon .lab{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
.mon.prog .lab{color:#ff8a8a}.mon.prev .lab{color:#8de3ae}
.mon .name{font-size:1.5rem;font-weight:600;margin:.2rem 0}
.mon .sub{color:var(--mute);font-size:.85rem}
.badges{position:absolute;right:.7rem;top:.6rem;display:flex;gap:.3rem}
.badge{font-size:.7rem;padding:.1rem .45rem;border-radius:5px;background:#333}
.badge.dsk{background:var(--gold);color:#000}.badge.clean{background:#3b5bdb;color:#fff}.badge.paused{background:var(--warn);color:#000}
.tbar{height:6px;background:#333;border-radius:3px;margin-top:.5rem;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--gold)}
.transport{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}
.go{font-size:1.6rem;font-weight:700;padding:.7rem 2.4rem;background:var(--ok);color:#052;border:0;border-radius:12px;cursor:pointer;letter-spacing:.1em}
.go:disabled{opacity:.35;cursor:not-allowed}
.go:active{transform:scale(.97)}
.btn.on{background:var(--gold);color:#000}

/* cue table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.cues{border-collapse:collapse;width:100%;min-width:1100px}
.cues th{position:sticky;top:0;background:var(--char);text-align:left;font-weight:500;color:var(--mute);font-size:.75rem;padding:.4rem .4rem;white-space:nowrap}
.cues td{padding:.25rem .3rem;border-top:1px solid var(--line);vertical-align:middle}
.cues tr.standby td{background:#17331f}
.cues tr.running td{background:#16283d}
.cues tr.disarmed td{opacity:.45}
.cues tr.detail td{background:#1d1d1d}
.cues input[type=text],.cues input:not([type]){width:100%}
.cues .w-num{width:5.6rem}.cues .w-n{width:7.4rem}.cues .w-t{width:5.2rem}
.cues .c-sb button{width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);background:#222;cursor:pointer}
.cues tr.standby .c-sb button{background:var(--ok);color:#052;border-color:var(--ok)}
.cues .c-st{min-width:130px;font-size:.8rem}
.cues .c-act{white-space:nowrap}
.pbar{height:8px;background:#333;border-radius:4px;overflow:hidden;margin-top:3px}
.pbar i{display:block;height:100%;background:var(--run)}
.pbar.pre i{background:var(--warn)}
.detail .dgrid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:.4rem}
.detail label{display:grid;gap:.15rem;font-size:.75rem;color:var(--mute)}
.detail textarea{min-height:4.5rem;width:100%}
.legend{display:flex;gap:1rem;color:var(--mute);font-size:.75rem;margin:.4rem 0;flex-wrap:wrap}

/* media + misc */
.media-item{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;padding:.5rem 0;border-top:1px solid var(--line)}
.media-item video,.media-item audio,.media-item img{max-width:260px;max-height:120px;margin-top:.3rem;display:block}
.drop{border:2px dashed var(--line);border-radius:12px;padding:1.2rem;text-align:center;color:var(--mute)}
.drop.over{border-color:var(--gold);color:var(--text)}
table.plain{border-collapse:collapse;width:100%}
table.plain td,table.plain th{padding:.3rem .5rem;border-top:1px solid var(--line);text-align:left}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:#000;border:1px solid var(--gold);padding:.6rem 1rem;border-radius:10px;z-index:20;max-width:90vw}
.toast.bad{border-color:var(--bad)}
.kbd{font:.75rem ui-monospace,monospace;background:#333;border-radius:4px;padding:0 .3rem}

.cues td:nth-child(3){min-width:240px}

.cues td:has([data-f=transition]){white-space:nowrap}.cues td:has([data-f=transition]) .w-t{width:3.6rem;display:inline-block}