/* cockpit.css — GM "Live cockpit" (port of gm-panel-redesign/mockups/003-live-cockpit).
   The :root tokens are the shared contract for both UI lanes (gmui-core, gmui-live): use the variables, never
   hard-coded colours. Near-black neutrals, one lime accent; amber/red only for health states; class and item
   quality colours only as data. 12 px base, monospace tabular numbers. */
:root{
  --bg:#090a0a; --bg1:#0d0f0f; --bg2:#121515; --bg3:#181c1b; --bg4:#1f2423;
  --line:#1e2322; --line2:#2a302e; --line3:#151918;
  --fg:#dbe1dd; --fg2:#a9b2ad; --mute:#717b76; --dim:#4f5753;
  --acc:#b5f23d; --acc2:rgba(181,242,61,.13); --acc3:rgba(181,242,61,.32); --acc-ink:#0b0f05;
  --warn:#f0b232; --warn2:rgba(240,178,50,.13); --bad:#f2555a; --bad2:rgba(242,85,90,.14);
  --afk:#8aa9c4; --info:#8aa9c4; --info2:rgba(138,169,196,.12);
  --acct:#c6b5f5; --acct2:rgba(198,181,245,.1); --acct3:rgba(198,181,245,.3);
  --item:#6ea8ff; --quest:#e6d27a; --ah:#e6d27a;
  /* chart palette (series order) */
  --c1:#b5f23d; --c2:#8aa9c4; --c3:#f0b232; --c4:#c6b5f5; --c5:#f2555a; --c6:#6ea8ff; --c7:#e6d27a;
  --sans: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --fs:12px; --fs-sm:11px; --fs-xs:10.5px; --fs-num:11.5px;
  --radius:6px; --radius-sm:4px;
  --lw:248px; --rw:392px; --th:176px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font:var(--fs)/1.45 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--acc3);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#262c2a;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#353d3a;background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-color:#2a302e transparent;scrollbar-width:thin}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--acc);outline-offset:1px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-num)}
.mute{color:var(--mute)} .fg2{color:var(--fg2)} .acc{color:var(--acc)} .warn{color:var(--warn)} .bad{color:var(--bad)} .dim{color:var(--dim)}
.grow{flex:1;min-width:0} .row{display:flex;align-items:center;gap:6px} .col{display:flex;flex-direction:column}
.wrapr{flex-wrap:wrap}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
svg.i{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.needs{color:var(--mute);font-size:var(--fs-sm);font-style:italic;padding:6px 0}
.loading{color:var(--mute);padding:20px}
a{color:var(--acc)}
a.link,.link{color:var(--fg);cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--line2)}
a.link:hover,.link:hover{color:var(--acc);border-color:var(--acc3)}

/* ---------- shell ---------- */
#app{display:grid;grid-template-rows:30px minmax(0,1fr) 22px;height:100vh}
#app.boot{display:block;overflow:auto}
#main{display:grid;grid-template-columns:var(--lw) 1px minmax(0,1fr) 1px var(--rw);min-height:0}
.vsplit{background:var(--line);position:relative;z-index:5}
.vsplit::after{content:"";position:absolute;inset:0 -3px;cursor:col-resize}
.vsplit:hover,.vsplit.drag{background:var(--acc3)}
.hsplit{height:1px;background:var(--line);position:relative;z-index:5;flex:none}
.hsplit::after{content:"";position:absolute;inset:-3px 0;cursor:row-resize}
.hsplit:hover,.hsplit.drag{background:var(--acc3)}
body.dragging{user-select:none}

/* ---------- ticker ---------- */
#ticker{display:flex;align-items:stretch;background:var(--bg1);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
#ticker .brand{display:flex;align-items:center;gap:7px;padding:0 12px;border-right:1px solid var(--line);font-weight:600;letter-spacing:.02em}
#ticker .brand b{color:var(--acc);font-weight:700}
.tk{display:flex;align-items:baseline;gap:5px;padding:0 10px;border-right:1px solid var(--line);cursor:pointer;line-height:29px}
.tk:hover{background:var(--bg3)}
.tk .l{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.tk .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--fg)}
.tk .d{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.tk .d.up{color:var(--acc)} .tk .d.dn{color:var(--bad)}
.tk.good .v{color:var(--acc)} .tk.warnc{background:var(--warn2)} .tk.warnc .v{color:var(--warn)} .tk.badc{background:var(--bad2)} .tk.badc .v{color:var(--bad)}
.tk.flash .v{animation:flash .6s ease-out}
.tk.off{display:none}
@keyframes flash{from{color:#fff;text-shadow:0 0 8px var(--acc3)}}
#ticker .spacer{flex:1;border-right:1px solid var(--line)}
#ticker .clock{padding:0 12px;display:flex;align-items:center;gap:8px;font-family:var(--mono);color:var(--fg2)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc2)}
.live-dot.reconnecting,.live-dot.connecting{background:var(--warn);box-shadow:0 0 0 3px var(--warn2)}
.live-dot.polling{background:var(--afk);box-shadow:0 0 0 3px var(--info2)}
.live-dot.denied{background:var(--bad);box-shadow:0 0 0 3px var(--bad2)}
.kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--fg2);background:var(--bg2);line-height:15px;display:inline-block}

/* ---------- panes ---------- */
.pane-h{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-bottom:1px solid var(--line);background:var(--bg1);flex:none;font-size:11px}
.pane-h .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg2);font-weight:600}
#left,#right{background:var(--bg1);display:flex;flex-direction:column;min-height:0;min-width:0}
#center{display:grid;grid-template-rows:31px minmax(0,1fr) 1px var(--th);min-width:0;min-height:0;background:var(--bg)}

/* ---------- controls ---------- */
.in{background:var(--bg);border:1px solid var(--line2);border-radius:5px;height:24px;padding:0 7px;min-width:0;outline:none;color:var(--fg)}
.in:focus{border-color:var(--acc3);box-shadow:0 0 0 2px var(--acc2)}
.in::placeholder{color:var(--dim)}
select.in{padding:0 4px;cursor:pointer}
textarea.in{height:auto;padding:5px 7px;resize:vertical;line-height:1.4}
.btn{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:5px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;white-space:nowrap;color:var(--fg)}
.btn:hover{background:var(--bg4);border-color:#3a423f}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:600}
.btn.pri:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:rgba(242,85,90,.35)}
.btn.danger:hover{background:var(--bad2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--fg2)}
.btn.ghost:hover{background:var(--bg3);color:var(--fg)}
.btn.sm{height:20px;padding:0 6px;font-size:11px}
.btn.on{background:var(--acc2);border-color:var(--acc3);color:var(--acc)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.fchip{height:20px;padding:0 7px;border-radius:10px;border:1px solid var(--line2);background:transparent;cursor:pointer;font-size:11px;color:var(--fg2);display:inline-flex;align-items:center;gap:5px}
.fchip:hover{border-color:#3a423f;color:var(--fg)}
.fchip.on{border-color:var(--acc3);background:var(--acc2);color:var(--acc)}
.fchip .n{font-family:var(--mono);font-size:10px;color:var(--mute)}
.fchip.on .n{color:var(--acc)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:5px;overflow:hidden}
.seg button{background:transparent;border:0;padding:0 8px;height:22px;cursor:pointer;color:var(--fg2);font-family:var(--mono);font-size:11px}
.seg button+button{border-left:1px solid var(--line2)}
.seg button:hover{background:var(--bg3);color:var(--fg)}
.seg button.on{background:var(--acc2);color:var(--acc)}

/* token chips (clickable parsed entities) */
.tok{display:inline-flex;align-items:center;gap:3px;padding:0 4px;border-radius:3px;background:var(--bg3);border:1px solid var(--line2);cursor:pointer;font-family:var(--mono);font-size:11px;line-height:15px;color:var(--fg);vertical-align:baseline;white-space:nowrap}
.tok:hover{border-color:var(--acc3);background:var(--acc2)}
.tok.acct{color:var(--acct)} .tok.ip{color:var(--fg2)} .tok.rep{color:var(--warn)} .tok.item{color:var(--item)} .tok.zone{color:var(--fg2)} .tok.quest{color:var(--quest)}
.tok.ms.good{color:var(--acc)} .tok.ms.warn{color:var(--warn)} .tok.ms.bad{color:var(--bad)}
.tok.pinned,.pinned-row{box-shadow:inset 2px 0 0 var(--warn)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.p2{background:var(--acc)} .p1{background:var(--afk)} .p0{background:#39403d}
.q0{color:#9d9d9d}.q1{color:#fff}.q2{color:#1eff00}.q3{color:#4a8cff}.q4{color:#b259ff}.q5{color:#ff8000}.q6{color:#e6cc80}
.lv{font-size:10px;padding:0 4px;border-radius:3px;font-family:var(--mono);line-height:15px;text-transform:uppercase;letter-spacing:.04em}
.lv.info{color:var(--fg2);background:var(--bg3)} .lv.warn{color:var(--warn);background:var(--warn2)} .lv.error{color:var(--bad);background:var(--bad2)}
.lv.debug{color:var(--mute);background:transparent} .lv.metric{color:var(--afk);background:var(--info2)} .lv.gm{color:var(--acc);background:var(--acc2)}
.pin{background:transparent;border:0;cursor:pointer;color:var(--dim);font-size:12px;line-height:1;padding:0 2px}
.pin:hover{color:var(--fg2)} .pin.on{color:var(--warn)}

/* ---------- left: heroes ---------- */
#l-filters{padding:7px 8px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line)}
#l-filters .in{width:100%}
#l-filters .two{display:grid;grid-template-columns:1fr 1fr;gap:4px}
#l-filters .two .in{width:100%}
.acct-pill{display:none;align-items:center;gap:6px;padding:3px 6px;border-radius:5px;background:var(--acct2);border:1px solid var(--acct3);color:var(--acct);font-family:var(--mono);font-size:11px}
.acct-pill.on{display:flex}
.acct-pill button{margin-left:auto;background:transparent;border:0;color:var(--acct);cursor:pointer}
#l-count{padding:4px 8px;color:var(--mute);font-size:11px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
#l-list{flex:1;overflow:auto;min-height:0;position:relative}
#l-list .spacer{position:relative}
.hrow{position:absolute;left:0;right:0;display:grid;grid-template-columns:10px minmax(0,1fr) auto 26px;align-items:center;gap:6px;height:22px;padding:0 8px;cursor:default;user-select:none}
.hrow:hover{background:var(--bg3)}
.hrow.sel{background:var(--acc2);box-shadow:inset 1px 0 0 var(--acc)}
.hrow.pinned{box-shadow:inset 2px 0 0 var(--warn)}
.hrow .nm{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hrow .nm small{color:var(--mute);margin-left:6px;font-size:10.5px}
.hrow .lvl{font-family:var(--mono);font-size:11px;color:var(--fg2);text-align:right}
.hrow.dead .nm{text-decoration:line-through;text-decoration-color:var(--bad)}
.hrow.ph .nm{color:var(--dim)}
.flagmark{font-size:9.5px;font-family:var(--mono);color:var(--bad);margin-left:4px}
.l-pins{border-bottom:1px solid var(--line);max-height:120px;overflow:auto}
.l-pins .prow{display:flex;align-items:center;gap:6px;padding:2px 8px;font-size:11.5px;cursor:pointer}
.l-pins .prow:hover{background:var(--bg3)}
.l-hint{padding:6px 8px;border-top:1px solid var(--line);color:var(--dim);font-size:10.5px}

/* ---------- center: tabs ---------- */
#tabbar{display:flex;align-items:stretch;background:var(--bg1);border-bottom:1px solid var(--line);min-width:0}
#tabs{display:flex;overflow-x:auto;overflow-y:hidden;min-width:0;flex:1;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:6px;padding:0 6px 0 11px;border-right:1px solid var(--line);color:var(--mute);cursor:pointer;white-space:nowrap;position:relative;flex:none;max-width:200px}
.tab:hover{color:var(--fg2);background:var(--bg2)}
.tab.on{background:var(--bg);color:var(--fg)}
.tab.on::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--acc)}
.tab.preview .tt{font-style:italic}
.tab .tt{overflow:hidden;text-overflow:ellipsis}
.tab .x{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;opacity:0;border:0;background:transparent;cursor:pointer;color:var(--fg2)}
.tab:hover .x,.tab.on .x{opacity:1}
.tab .x:hover{background:var(--bg4);color:var(--fg)}
.tab .kind{font-family:var(--mono);font-size:9.5px;color:var(--dim);text-transform:uppercase}
.tab .badge{font-family:var(--mono);font-size:10px;color:var(--acc-ink);background:var(--acc);border-radius:7px;padding:0 4px;line-height:14px}
#tabbar .tools{display:flex;align-items:center;gap:2px;padding:0 6px;border-left:1px solid var(--line)}
.menu{position:fixed;z-index:60;background:var(--bg2);border:1px solid var(--line2);border-radius:7px;padding:4px;min-width:200px;box-shadow:0 12px 32px rgba(0,0,0,.55);display:none}
.menu.on{display:block}
.menu button{display:flex;width:100%;align-items:center;gap:8px;padding:5px 8px;background:transparent;border:0;border-radius:4px;cursor:pointer;text-align:left}
.menu button:hover{background:var(--bg4)}
.menu button .k{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--mute)}
.menu .sep{height:1px;background:var(--line2);margin:4px 2px}
#content{position:relative;min-height:0;min-width:0;overflow:hidden;container-type:inline-size}
.tabpane{position:absolute;inset:0;overflow:auto;padding:10px 12px 16px;display:none}
.tabpane.on{display:block}
.empty{display:grid;place-items:center;height:100%;color:var(--mute);text-align:center;gap:8px}

/* view building blocks */
.vh{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-height:24px;flex-wrap:wrap}
.vh h1{font-size:14px;font-weight:600;letter-spacing:-.005em}
.vh .sub{color:var(--mute)}
.grid{display:grid;gap:8px;grid-auto-flow:row dense}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2} .span3{grid-column:span 3} .spanall{grid-column:1/-1}
.box{background:var(--bg1);border:1px solid var(--line);border-radius:6px;min-width:0;display:flex;flex-direction:column}
.box>.bh{display:flex;align-items:center;gap:8px;height:26px;padding:0 9px;border-bottom:1px solid var(--line);flex:none}
.box>.bh .t{font-size:11px;font-weight:600;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.box>.bh .meta{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--mute);font-size:11px;white-space:nowrap;overflow:hidden;min-width:0;flex:0 1 auto}
.box>.bb{padding:8px 9px;min-width:0}
.box>.bb.flush{padding:0}
.lg{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:var(--fg2);user-select:none}
.lg i{width:9px;height:2px;border-radius:1px;display:inline-block}
.lg.off{opacity:.35}
.lg .v{font-family:var(--mono);font-size:11px;color:var(--fg)}
.chart{position:relative;min-width:0}
.uplot{width:100%!important;font-family:var(--mono)}
.u-over .ctip{position:absolute;pointer-events:none;background:rgba(13,15,15,.96);border:1px solid var(--line2);border-radius:5px;padding:5px 7px;font-size:11px;font-family:var(--mono);white-space:nowrap;z-index:10;display:none;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.ctip .tm{color:var(--mute);margin-bottom:2px}
.ctip .r{display:flex;gap:8px;align-items:center}
.ctip .r i{width:7px;height:7px;border-radius:2px;display:inline-block}
.ctip .r b{margin-left:auto;font-weight:500;padding-left:10px}
.ctip .an{margin-top:3px;padding-top:3px;border-top:1px solid var(--line2);font-family:var(--sans)}
.u-select{background:rgba(181,242,61,.08)!important}

/* KPI table (not cards) */
.kpis{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border:1px solid var(--line);border-radius:6px;background:var(--bg1);overflow:hidden}
.kpi{padding:7px 9px;border-right:1px solid var(--line);cursor:pointer;min-width:0}
.kpi:last-child{border-right:0}
.kpi:hover{background:var(--bg3)}
.kpi .l{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;line-height:1.3;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d{font-family:var(--mono);font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d.up{color:var(--acc)} .kpi .d.dn{color:var(--bad)}
.kpi.warnc .v{color:var(--warn)} .kpi.badc .v{color:var(--bad)}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:11.5px}
table.t th{position:sticky;top:0;background:var(--bg2);text-align:left;font-weight:500;color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:4px 7px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
table.t th.s{cursor:pointer} table.t th.s:hover{color:var(--fg)} table.t th.sorted{color:var(--acc)}
table.t td{padding:3px 7px;border-bottom:1px solid var(--line3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
table.t tr:hover td{background:var(--bg2)}
table.t tr.click{cursor:pointer}
table.t tr.fail td{color:#f6b5b7}
table.t td.r,table.t th.r{text-align:right}
table.t td.wrap{white-space:normal}
.scroll{overflow:auto;min-height:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:11.5px}
.kv dt{color:var(--mute)} .kv dd{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:6px;border-radius:3px;background:var(--bg4);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:3px;background:var(--acc)}
.hbar{display:grid;grid-template-columns:110px minmax(0,1fr) 54px;gap:8px;align-items:center;font-size:11.5px;padding:2px 0}
.hbar .n{font-family:var(--mono);text-align:right;color:var(--fg2);font-size:11px}
.histo{display:flex;align-items:flex-end;gap:1px;height:90px}
.histo i{flex:1;background:var(--acc3);min-height:1px;border-radius:1px 1px 0 0}
.histo i:hover{background:var(--acc)}
.histo-x{display:flex;justify-content:space-between;color:var(--dim);font-family:var(--mono);font-size:10px;margin-top:2px}
.status{font-size:10.5px;font-family:var(--mono);padding:0 5px;border-radius:3px;line-height:16px;display:inline-block}
.st-new{color:var(--acc);background:var(--acc2)} .st-seen{color:var(--fg2);background:var(--bg4)} .st-investigating,.st-needs-repro{color:var(--warn);background:var(--warn2)} .st-known{color:var(--acct);background:var(--acct2)} .st-fixed{color:var(--afk);background:var(--info2)} .st-wontfix{color:var(--mute);background:var(--bg3)}
.sev-high{color:var(--bad)} .sev-med{color:var(--warn)} .sev-low{color:var(--fg2)}
.rcat-bug{color:var(--bad);background:var(--bad2)} .rcat-idea{color:var(--item);background:rgba(110,168,255,.14)} .rcat-other{color:var(--fg2);background:var(--bg4)}

/* ---------- terminal ---------- */
#term{display:flex;flex-direction:column;min-height:0;background:var(--bg1)}
#term-h{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px;border-bottom:1px solid var(--line);flex:none}
#term-h .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg2);font-weight:600}
#term-out{flex:1;overflow:auto;min-height:0;padding:4px 10px;font-family:var(--mono);font-size:11.5px;line-height:18px}
#term-out .ln{white-space:pre-wrap;word-break:break-word}
#term-out .ln.cmd{color:var(--fg)} #term-out .ln.cmd .pr{color:var(--acc)} #term-out .ln.cmd .via{color:var(--dim)}
#term-out .ln.ok{color:var(--fg2)} #term-out .ln.err{color:var(--bad)} #term-out .ln.dim{color:var(--mute)} #term-out .ln.api{color:var(--dim)}
#term-out .ln .tok{font-size:11px}
#term-in-row{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-top:1px solid var(--line);flex:none;position:relative;background:var(--bg)}
#term-in-row .pr{color:var(--acc);font-family:var(--mono);font-weight:600}
#term-preview{position:absolute;left:10px;right:10px;bottom:31px;font-family:var(--mono);font-size:11px;color:var(--warn);background:var(--bg2);border:1px solid var(--line2);border-radius:5px;padding:3px 8px;display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#term-preview.on{display:block}
#term-preview.err{color:var(--bad)}
#cmd{flex:1;background:transparent;border:0;outline:none;font-family:var(--mono);font-size:12.5px;color:var(--fg);caret-color:var(--acc)}
#cmd::placeholder{color:var(--dim)}
#ac{position:fixed;z-index:70;background:var(--bg2);border:1px solid var(--line2);border-radius:7px;box-shadow:0 -12px 32px rgba(0,0,0,.6);display:none;max-height:340px;overflow:auto;padding:4px;min-width:460px}
#ac.on{display:block}
#ac .grp{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.07em;padding:5px 8px 2px}
#ac .it{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:4px;cursor:pointer}
#ac .it.on{background:var(--acc2)}
#ac .it .k{font-family:var(--mono);font-size:10px;color:var(--mute);min-width:52px}
#ac .it .m{margin-left:auto;color:var(--mute);font-size:11px;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}

/* ---------- right: live column (sections are mounted by gmui-live) ---------- */
.lsec{display:flex;flex-direction:column;min-height:28px;overflow:hidden;flex:1 1 0}
.lsec.collapsed{flex:0 0 28px!important}
.lsec .pane-h{white-space:nowrap;overflow:hidden;cursor:default}
.lsec .pane-h .cnt{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.lsec .pane-h .sp{flex:1}
.lsec .pane-h .extra{display:flex;align-items:center;gap:4px;min-width:0}
.lsec .fold{transition:transform .15s;background:transparent;border:0;color:var(--fg2);cursor:pointer;width:16px}
.lsec.collapsed .fold{transform:rotate(-90deg)}
.lsec-body{flex:1;overflow:auto;min-height:0;font-size:11.5px;display:flex;flex-direction:column}
.lsec-tools{display:flex;flex-wrap:wrap;gap:4px;padding:5px 8px;border-bottom:1px solid var(--line);flex:none;align-items:center}

/* ---------- status bar ---------- */
#statusbar{display:flex;align-items:center;gap:14px;padding:0 10px;background:var(--bg1);border-top:1px solid var(--line);font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden}
#statusbar .sb{display:flex;align-items:center;gap:5px}
#statusbar .r{margin-left:auto;display:flex;gap:14px;align-items:center}
#statusbar button{background:transparent;border:0;color:var(--mute);cursor:pointer}
#statusbar button:hover{color:var(--fg)}

/* toasts */
#toasts{position:fixed;right:calc(var(--rw) + 14px);bottom:calc(var(--th) + 36px);display:flex;flex-direction:column;gap:6px;z-index:80;pointer-events:none}
.toast{background:var(--bg3);border:1px solid var(--line2);border-radius:6px;padding:7px 10px;max-width:420px;font-size:11.5px;box-shadow:0 10px 26px rgba(0,0,0,.5);animation:tin .2s cubic-bezier(.2,.8,.2,1)}
.toast.bad{border-color:rgba(242,85,90,.4);color:#f6b5b7}
.toast.warn{border-color:rgba(240,178,50,.4)}
.toast b{color:var(--acc);font-weight:600}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}

/* hero view */
.hero-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.hero-h .nm{font-size:18px;font-weight:650;letter-spacing:-.01em}
.hero-h .meta{color:var(--fg2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--bg1);margin-bottom:8px;align-items:center}
.actbar .sep{width:1px;height:16px;background:var(--line2);margin:0 3px}
.vbar{display:grid;grid-template-columns:40px minmax(0,1fr) 116px;align-items:center;gap:8px;font-size:11px;margin-bottom:4px}
.vbar .n{font-family:var(--mono);text-align:right;color:var(--fg2);font-size:11px}
.gear{display:grid;grid-template-columns:62px minmax(0,1fr) 30px 46px;gap:6px;align-items:center;padding:2px 0;border-bottom:1px solid var(--line3);font-size:11.5px}
.gear .s{color:var(--mute);font-size:10.5px}
.gear .il{font-family:var(--mono);text-align:right;color:var(--fg2);font-size:11px}
.tl{display:grid;grid-template-columns:44px 60px minmax(0,1fr);gap:6px;padding:2px 0;border-bottom:1px solid var(--line3);font-size:11.5px;align-items:baseline}
.tl .ts{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.tl .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--mute)}
.tl .k.death,.tl .k.disconnect{color:var(--bad)} .tl .k.level,.tl .k.gm{color:var(--acc)} .tl .k.loot,.tl .k.ah{color:var(--ah)}
.pol{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;padding:3px 0;border-bottom:1px solid var(--line3);font-size:11.5px}
.pol .k{color:var(--mute)}
.pol .v{font-family:var(--mono);font-size:11px;word-break:break-word}
.note{color:var(--mute);font-size:11px}
.form{display:grid;gap:6px}
.form label{display:grid;gap:3px;color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.form label .in{text-transform:none;letter-spacing:0;font-size:12px}
.form .row .in{flex:1}
.mapwrap{position:relative;height:calc(100vh - 220px);min-height:320px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#05070a}
.mapwrap canvas{display:block;width:100%;height:100%}

/* login */
/* 0.1.7hf1: element-qualified, so a feed/timeline kind chip with class `login` does not become the login card. */
form.login,div.login{max-width:300px;margin:14vh auto;display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--bg1)}
form.login .brand,div.login .brand{font-weight:600;margin-bottom:6px} form.login .brand b,div.login .brand b{color:var(--acc)}
form.login .msg,div.login .msg{color:var(--bad);font-size:11.5px;min-height:16px}

/* responsive: narrow viewports + container queries on the workspace */
@media (max-width:1500px){:root{--lw:214px;--rw:344px} .hide-narrow{display:none!important}}
@media (max-height:820px){:root{--th:136px}}
@container (max-width:1150px){
  .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kpi{border-bottom:1px solid var(--line)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3>.span3{grid-column:1/-1}
  .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-grid>:last-child{grid-column:1/-1}
}
@container (max-width:900px){ .players-grid{grid-template-columns:minmax(0,1fr)!important} .g2,.g4{grid-template-columns:minmax(0,1fr)} }

/* atlas map (admin-map.js MapView classes) */
.mapwrap .wmap{position:absolute;inset:0;height:auto;min-height:0;border:0;border-radius:0;background:#05070a}
.wmap-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.wmap-canvas.dragging{cursor:grabbing}
.wmap-tools{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.wmap-tools .btn{height:22px;padding:0 7px;font-size:11px;background:rgba(13,15,15,.9);border:1px solid var(--line2);border-radius:5px;color:var(--fg);cursor:pointer;min-width:24px}
.wmap-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:end;padding:6px 10px;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.wmap-caption{font-size:13px;font-weight:600;color:var(--fg)}
.wmap-count{color:var(--fg2);font-size:11px;font-family:var(--mono)}
.wmap-noart{position:absolute;left:10px;top:10px;color:var(--mute);font-size:11px}
.wmap-tip{position:absolute;z-index:2;min-width:150px;max-width:260px;max-height:70%;overflow:auto;padding:6px 9px;background:rgba(13,15,15,.96);border:1px solid var(--line2);border-radius:5px;box-shadow:0 6px 18px rgba(0,0,0,.5);font-size:11px;line-height:1.45}
.wmap-tip[hidden]{display:none}
.wmap-row{display:block;white-space:nowrap;color:var(--fg2);text-decoration:none}
a.wmap-row:hover{background:var(--acc2)}

/* presence: intent-idle (socket open, no intentional input; anti-cheat presence policy) */
.p3{background:var(--warn)}
.sev{font-family:var(--mono);font-size:10.5px;padding:0 5px;border-radius:3px;line-height:16px;display:inline-block}
.sev.low{color:var(--fg2);background:var(--bg4)} .sev.med{color:var(--warn);background:var(--warn2)} .sev.high{color:var(--bad);background:var(--bad2)}