:root{
  --bg:#0f1317; --panel:#181f26; --panel2:#222b34; --text:#dde5ec; --muted:#8b98a5;
  --accent:#4da3ff; --ok:#3fbf6f; --warn:#e0a83c; --bad:#e05c5c; --border:#2b3540;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button{background:var(--panel2);color:var(--text);border:1px solid var(--border);
  border-radius:6px;padding:6px 12px;cursor:pointer;font:inherit}
button:hover{border-color:var(--accent)}
button:disabled{opacity:.45;cursor:default}
button.small{padding:2px 7px;font-size:12px}
button.warnbtn{border-color:var(--warn)}
button.dangerbtn{border-color:var(--bad);color:var(--bad)}
button.danger{border-color:var(--bad)}
input,select{background:var(--panel2);color:var(--text);border:1px solid var(--border);
  border-radius:6px;padding:6px 8px;font:inherit}
input:focus,select:focus,button:focus{outline:1px solid var(--accent)}
h2{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
h3{margin:14px 0 6px;font-size:13px;color:var(--muted)}
.h2tools{margin-left:auto;display:flex;gap:8px;align-items:center;font-weight:normal;font-size:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:ui-monospace,monospace}
.hidden{display:none !important}
.err{color:var(--bad);min-height:1.2em;margin-top:8px}

/* header */
#topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--border);padding:8px 14px;font-size:13px}
.brand{font-weight:700;font-size:15px}
.svc{margin-right:10px;white-space:nowrap}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}
.badge{background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:1px 9px;font-size:12px;margin-left:4px;white-space:nowrap}
.badge.warn{border-color:var(--warn);color:var(--warn)}
.badge.bad{border-color:var(--bad);color:var(--bad)}

/* grid of panels */
#grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;
  padding:12px;max-width:1500px;margin:0 auto}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:12px;min-width:0}
.panel.wide{grid-column:1/-1}
@media (max-width:740px){#grid{grid-template-columns:1fr}}

.row{display:flex;gap:8px;align-items:center;margin:6px 0}
.row.wrap{flex-wrap:wrap}
.row input[type=number]{width:70px}
.row select{flex:1;min-width:0}
#say-form input,#ask-form input{flex:1;min-width:0}
#say-btn,#ask-btn{width:7em;flex:none}
label.inline{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}

/* camera */
#cam-box{background:#000;border-radius:8px;overflow:hidden;cursor:zoom-in;min-height:120px}
#cam{display:block;width:100%;max-height:70vh;object-fit:contain}
#cam-box:fullscreen{display:flex;align-items:center;justify-content:center}
#cam-box:fullscreen #cam{max-height:100vh}

/* present cards */
.cards{display:flex;flex-wrap:wrap;gap:10px}
.card{background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  padding:9px;min-width:150px;flex:1}
.card-head{margin-bottom:2px}
.scorebar{background:var(--bg);border-radius:4px;height:5px;margin:6px 0 3px;overflow:hidden}
.scorebar div{background:var(--accent);height:100%}

/* monitor feed */
#feed{height:270px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:8px;font-size:13px}
.feeditem{margin:2px 0;overflow-wrap:anywhere}
.feeditem .ftime{color:var(--muted);font-size:11px;margin-right:4px}
#feed.no-transcript .feeditem.transcript{display:none}
#feed.no-events .feeditem.events{display:none}

/* toggles */
#toggles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 14px;margin-bottom:10px}
label.toggle{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer}
label.toggle input{width:16px;height:16px;accent-color:var(--accent)}

/* tables */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12px}
th,td{padding:4px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
td:last-child{white-space:nowrap}
.rowacts{display:flex;gap:4px}
.kind{background:var(--panel2);border-radius:8px;padding:0 7px;font-size:12px}
#tl-table td:last-child{white-space:normal;overflow-wrap:anywhere}

/* toasts */
#toasts{position:fixed;right:12px;bottom:12px;z-index:50;display:flex;
  flex-direction:column;gap:6px;max-width:90vw}
.toast{padding:8px 14px;border-radius:8px;background:var(--panel2);
  border:1px solid var(--bad);box-shadow:0 3px 12px #0008;overflow-wrap:anywhere}
.toast.ok{border-color:var(--ok)}

/* login overlay */
.overlay{position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center}
.overlay form{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:28px 32px;display:flex;flex-direction:column;gap:10px;width:290px;text-align:center}
.overlay h1{margin:0;font-size:26px}
.overlay p{margin:0 0 8px}