/* FLEET Control — dark glass, 4px rhythm, no emoji, no text under 12px */
:root{
  --bg:#0b0d12; --panel:#121620cc; --panel2:#0f131c; --line:#232a3a;
  --ink:#e8ecf4; --muted:#8b93a7; --brand:#5eead4; --brand2:#818cf8;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
button,a,label{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--bad);min-height:20px;margin:8px 0 0}
.spacer{flex:1}

/* backdrop */
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 15% 0%,#5eead412,transparent 60%),
             radial-gradient(50% 40% at 90% 10%,#818cf814,transparent 60%)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:32px;backdrop-filter:blur(14px);
  box-shadow:0 24px 64px #0008}
.brand{font-weight:800;letter-spacing:.28em;color:var(--brand);font-size:18px}
.brand-sub{color:var(--muted);font-size:12px;margin:4px 0 24px;letter-spacing:.04em}
.login-card label{display:block;font-size:12px;color:var(--muted);margin:16px 0 4px}
.login-card input{width:100%;margin-top:4px;padding:12px;border-radius:var(--radius);
  background:var(--panel2);border:1px solid var(--line);outline:none}
.login-card input:focus{border-color:var(--brand)}

/* buttons / pills */
.btn{border:1px solid var(--line);background:var(--panel2);border-radius:var(--radius);
  padding:8px 16px;transition:border-color .15s,transform .1s}
.btn:hover{border-color:var(--brand)}
.btn:active{transform:translateY(1px)}
.btn.primary{width:100%;margin-top:24px;background:linear-gradient(120deg,#14b8a6,#6366f1);
  border:none;color:#04121a;font-weight:700;padding:12px}
.btn.danger{border-color:#7f1d1d;color:var(--bad)}
.btn.small{padding:4px 12px;font-size:12px}
.pill{border-radius:99px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.04em}
.pill.armed{background:#052e2233;color:var(--ok);border:1px solid #14532d}
.pill.paused{background:#3f1d1d33;color:var(--bad);border:1px solid #7f1d1d}

/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;
  padding:16px 24px;background:#0b0d12d9;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
#whoami{font-size:12px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;padding:24px 24px 8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat b{font-size:24px;display:block;letter-spacing:.02em}
.stat span{font-size:12px;color:var(--muted)}

/* tabs + toolbar */
.tabs{display:flex;gap:8px;padding:16px 24px 0}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:8px 16px;font-weight:600}
.tab.active{color:var(--ink);border-bottom-color:var(--brand)}
.toolbar{display:flex;align-items:center;gap:16px;padding:16px 24px}
.toolbar input,.toolbar select{background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px 12px;outline:none}
.toolbar input{min-width:240px}

/* table */
.tablewrap{padding:0 24px 48px}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
th,td{text-align:left;padding:8px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
tbody tr{transition:background .12s}
tbody tr.clickable:hover{background:#5eead40a}
td.wrap{white-space:normal;max-width:420px;color:var(--muted);font-size:12px}
.state{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.state.ok{color:var(--ok)} .state.mid{color:var(--brand2)} .state.warn{color:var(--warn)}
.state.bad{color:var(--bad)} .state.idle{color:var(--muted)}

/* drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);z-index:9;
  background:var(--panel2);border-left:1px solid var(--line);overflow:auto;padding:24px;
  box-shadow:-24px 0 64px #000a}
.drawer-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.drawer-title{font-weight:800;font-size:16px;flex:1}
.drawer h4{margin:24px 0 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.drawer pre{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;overflow:auto;font-size:12px;max-height:280px}
.drawer .row{display:flex;gap:12px;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line)}
.drawer .row b{min-width:120px;color:var(--muted);font-weight:600}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 24px;box-shadow:0 16px 48px #000a}