:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2230; --line:#2a3140;
  --ink:#e6edf3; --muted:#8b97a7; --accent:#3b82f6;
  --ok:#2ea043; --okbg:#0f2417; --warn:#d8a200; --warnbg:#2a2207;
  --fail:#f85149; --failbg:#2d1012; --spare:#58a6ff; --sparebg:#0d2236;
  --rebuild:#a371f7; --rebuildbg:#1e1430; --empty:#222a36;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h2{font-size:15px;margin:0;font-weight:600;letter-spacing:.2px}
.muted{color:var(--muted)} .small{font-size:12px}
code{background:#0a0d12;border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b9c4d2;word-break:break-word}

.topbar{display:flex;align-items:center;gap:24px;padding:12px 20px;
  background:linear-gradient(180deg,#11161d,#0e1116);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;cursor:pointer}
.brand:hover .title{text-decoration:underline}
.logo{font-size:26px;color:var(--accent)}
.logo-img{display:block}
.title{font-weight:700;font-size:16px}
.subtitle{font-size:12px;color:var(--muted)}
.server-select{display:flex;align-items:center;gap:8px;margin-left:8px}
.server-select label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
select,.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:7px 12px;font-size:13px;cursor:pointer}
select:hover,.btn:hover{border-color:#3d4860}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#2f6fd6}
.btn.danger{background:var(--failbg);border-color:#5a2326;color:#ff9a96}
.btn.ghost{background:transparent;border-color:transparent;font-size:18px;padding:2px 8px}
.btn:disabled{opacity:.5;cursor:default}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}

main{max-width:1200px;margin:22px auto;padding:0 20px;display:flex;flex-direction:column;gap:22px}

.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.card .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.card .v{font-size:22px;font-weight:700;margin-top:4px}
.card .sub{font-size:12px;color:var(--muted);margin-top:6px}
.card.status-ok{border-left:4px solid var(--ok)}
.card.status-warn{border-left:4px solid var(--warn)}
.card.status-fail{border-left:4px solid var(--fail)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px}
.pill.ok{background:var(--okbg);color:#62d97f}
.pill.warn{background:var(--warnbg);color:#f0c84b}
.pill.fail{background:var(--failbg);color:#ff8a84}
.pill.spare{background:var(--sparebg);color:var(--spare)}
.pill.rebuild{background:var(--rebuildbg);color:#c4a4ff}
.pill.neutral{background:#1b2230;color:#9fb0c3}

/* About page */
.about{max-width:880px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 28px 32px}
.about h1{margin:0 0 6px;font-size:22px}
.about h2.about-h{font-size:14px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
  margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.about h3{font-size:14px;margin:0 0 4px}
.about p{margin:8px 0;line-height:1.6}
.about ul,.about ol{margin:8px 0 8px 22px;padding:0;line-height:1.65}
.about li{margin:5px 0}
.about code{font-size:12.5px}
.about-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.about-hero img{flex:0 0 auto}
.about-stats{margin-left:auto;text-align:right;line-height:1.5}
.about-stats > div + div{margin-top:2px}
.about-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin:10px 0}
.about-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.about-card h3{color:var(--ink)}
.about-arch{background:#0a0d12;border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b9c4d2;white-space:pre;overflow-x:auto}
.sev-list{list-style:none;margin:0;padding:0}
.sev-list li{margin:8px 0;line-height:1.5}

/* Disks lifetime page */
.lt-back{display:inline-block;margin-bottom:10px;text-decoration:none}
.lt-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lt-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  padding:10px 12px;border-bottom:1px solid var(--line);background:#11161d}
.lt-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}
.lt-table tbody tr:last-child td{border-bottom:0}
.lt-table tr.lt-row{cursor:pointer;transition:background .08s}
.lt-table tr.lt-row:hover{background:#1c2230}
.lt-table tr.sev-row-critical{background:rgba(248,81,73,.07)}
.lt-table tr.sev-row-critical:hover{background:rgba(248,81,73,.14)}
.lt-table tr.sev-row-high{background:rgba(216,162,0,.07)}
.lt-table tr.sev-row-high:hover{background:rgba(216,162,0,.14)}
.lt-table tr.sev-row-medium{background:rgba(216,162,0,.04)}
.lt-bar{width:120px;height:14px;background:#0a0d12;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.lt-bar > i{display:block;height:100%;background:var(--ok)}
.lt-bar > i.ok{background:var(--ok)}
.lt-bar > i.mid{background:var(--spare)}
.lt-bar > i.warn{background:var(--warn)}
.lt-bar > i.fail{background:var(--fail)}
.lt-life{min-width:140px}
.ttext.ok{color:#62d97f} .ttext.warn{color:#f0c84b} .ttext.fail{color:#ff8a84}

/* Fleet overview */
.server-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px;cursor:pointer;
  transition:transform .08s,border-color .12s}
.scard:hover{transform:translateY(-2px);border-color:#3d4860}
.scard.status-ok{border-left:4px solid var(--ok)}
.scard.status-warn{border-left:4px solid var(--warn)}
.scard.status-fail{border-left:4px solid var(--fail);animation:pulse 1.6s infinite}
.scard.status-unknown{border-left:4px solid var(--muted)}
.scard-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.scard-name{font-weight:700;font-size:15px}
.scard-type{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.scard-ctx{font-size:12px;color:var(--muted);margin:2px 0 10px}
.scard-counts{font-size:12px;color:var(--muted);margin-left:auto}
.dots{display:flex;flex-wrap:wrap;gap:4px}
.dots .d{width:16px;height:16px;border-radius:4px;background:var(--empty)}
.dots .d.ok{background:var(--ok)} .dots .d.spare{background:var(--spare)}
.dots .d.warn{background:var(--warn)} .dots .d.fail{background:var(--fail)}
.dots .d.rebuild{background:var(--rebuild)}
.dots .d.decommissioned{background:#4a4f57}
#backToFleet{display:inline-block;margin-bottom:14px;text-decoration:none}
#backToFleet:hover{color:var(--ink)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.legend{display:flex;gap:14px;flex-wrap:wrap}
.lg{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.lg::before{content:"";width:11px;height:11px;border-radius:3px;display:inline-block}
.lg.ok::before{background:var(--ok)} .lg.spare::before{background:var(--spare)}
.lg.warn::before{background:var(--warn)} .lg.fail::before{background:var(--fail)}
.lg.rebuild::before{background:var(--rebuild)} .lg.empty::before{background:var(--empty)}

.disk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px}
.slot{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:11px 11px 12px;cursor:pointer;transition:transform .08s,border-color .12s;min-height:96px}
.slot:hover{transform:translateY(-2px);border-color:#3d4860}
.slot .slotno{font-size:11px;color:var(--muted)}
.slot .cap{font-size:15px;font-weight:700;margin-top:3px}
.slot .role{font-size:11px;color:var(--muted);margin-top:2px}
.slot .dot{position:absolute;top:11px;right:11px;width:11px;height:11px;border-radius:50%}
.slot.empty{border-style:dashed;opacity:.55;cursor:default}
.slot.empty:hover{transform:none}
.slot.ok{border-left:4px solid var(--ok)} .slot.ok .dot{background:var(--ok)}
.slot.spare{border-left:4px solid var(--spare)} .slot.spare .dot{background:var(--spare)}
.slot.warn{border-left:4px solid var(--warn)} .slot.warn .dot{background:var(--warn)}
.slot.fail{border-left:4px solid var(--fail);animation:pulse 1.4s infinite} .slot.fail .dot{background:var(--fail)}
.slot.rebuild{border-left:4px solid var(--rebuild)} .slot.rebuild .dot{background:var(--rebuild)}
.slot.locating{outline:2px solid #ffd33d;outline-offset:1px;animation:blink 1s steps(2) infinite}
/* Decommissioned: OSD marked out of the pool (reweight 0) — muted, dashed, inactive. */
.slot.decommissioned{border-left:4px solid #4a4f57;border-style:dashed;opacity:.7}
.slot.decommissioned .dot{background:#4a4f57}
.slot .outtag{margin-top:4px;font-size:9px;font-weight:700;letter-spacing:.5px;color:#9aa6b2;
  background:#262b31;border-radius:3px;padding:1px 4px;display:inline-block}
.pill.decommissioned{background:#262b31;color:#9aa6b2}
.slot .outtag.rebuilding{background:#2a1f3d;color:#c4a4ff}
.rate-row{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.rate-row input[type=range]{flex:1;min-width:220px;accent-color:#f0c84b}
.rate-row .tiny{font-size:10px;opacity:.7}
.rate-out{font-size:20px;font-weight:700;min-width:62px;text-align:center;color:#f0c84b}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,.0)}50%{box-shadow:0 0 0 4px rgba(248,81,73,.18)}}
@keyframes blink{50%{outline-color:transparent}}
.slot .mini-bar{margin-top:7px;height:5px;background:#0a0d12;border-radius:3px;overflow:hidden}
.slot .mini-bar > i{display:block;height:100%;background:var(--rebuild)}

/* Drawer */
.drawer{position:fixed;inset:0;z-index:20;display:none}
.drawer.open{display:block}
.drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(560px,94vw);background:var(--panel);
  border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(0,0,0,.45);overflow-y:auto;
  animation:slidein .18s ease}
@keyframes slidein{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}
.drawer-body{padding:18px 20px 40px}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.kv{width:100%;border-collapse:collapse;margin:10px 0}
.kv td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.kv td:first-child{color:var(--muted);width:42%;white-space:nowrap}
.kv td:last-child{font-weight:500}
.sec-title{margin:22px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:16px}
table.counters td{font-size:13px;padding:5px 8px;vertical-align:middle}
table.counters td:first-child{width:auto;white-space:normal}
table.counters .chead td{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
table.counters .val-bad{color:#ff8a84} table.counters .val-soft{color:#f0c84b}
table.counters .up{color:#ff8a84;font-weight:600} table.counters .down{color:#62d97f}
table.counters .row-rising{background:rgba(248,81,73,.07)}
svg.spark{display:block} svg.spark path{fill:none;stroke:var(--spare);stroke-width:1.5}
svg.spark.rise path{stroke:var(--fail)}
.progress{height:22px;background:#0a0d12;border:1px solid var(--line);border-radius:7px;overflow:hidden;position:relative}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#7c4dff,#a371f7)}
.progress > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.steps{counter-reset:step;padding:0;margin:8px 0;list-style:none}
.steps li{position:relative;padding:10px 0 10px 38px;border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:10px;
  width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.steps b{color:var(--ink)} .steps .stitle{font-weight:600;margin-bottom:3px}
.ceph-admin{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:8px 0}
.ceph-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.ceph-row .btn{font-size:12px;padding:6px 10px}
.ceph-stat{background:#0a0d12;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:10px 0;
  display:flex;flex-direction:column;gap:5px}
.ceph-stat .cstat-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.ceph-stat .cstat-evt{margin-top:6px}
.ceph-stat .progress{height:14px}
.ceph-stat .progress span{font-size:10px}
.ceph-stat .ok-text{color:var(--ok)}

.ceph-out{background:#0a0d12;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-top:10px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b9c4d2;white-space:pre-wrap;
  max-height:240px;overflow:auto}

.callout{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:12px 14px;margin:8px 0}
.callout ul{margin:6px 0 0;padding-left:18px} .callout li{margin:3px 0}
.reasons{background:var(--failbg);border:1px solid #5a2326;border-radius:8px;padding:10px 12px;margin:8px 0;color:#ffb4af}
.sev-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;padding:1px 6px;border-radius:4px;
  margin-right:6px;vertical-align:1px}
.sev-tag.sev-critical{background:#5a2326;color:#ff8a84}
.sev-tag.sev-high{background:#3d2d07;color:#f0c84b}
.sev-tag.sev-medium{background:#1a2737;color:#7fb1e6}
.sev-tag.sev-low{background:#262b31;color:#9aa6b2}
.sev-tag.sev-ok{background:#163018;color:#62d97f}
.sev-tag.sev-net{background:#2a1d3a;color:#c39bf0}
.nethint{margin-top:8px;padding:8px 10px;border:1px solid #3a2c1a;border-radius:6px;background:#1c1812}
.nethint .nethint-h{font-weight:700;color:#f0c84b;margin-bottom:4px}
.nethint .nethint-ok{border-color:#1f3322;background:#141d16}
.nethint code{color:#c9d4df}
.klog{margin:4px 0 0;padding:8px 10px;background:#0d1117;border:1px solid #23303e;border-radius:6px;
  font-size:11px;line-height:1.5;color:#c9a98a;white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto}
.reasons ul,.callout ul{margin:6px 0 0;padding-left:18px}
.reasons li{margin:4px 0} .reasons li .muted{color:#e0a39f}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1c2536;border:1px solid var(--line);border-radius:8px;padding:11px 18px;
  opacity:0;pointer-events:none;transition:.2s;z-index:30;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:#5a2326;background:#2a1416}
a{color:var(--spare)}

/* ---- Firewalls / core routers ---- */
/* Router cards carry expandable BGP/OSPF/interface tables, so the tracks are
   sized for those (5-6 columns of tabular data) rather than for the summary
   rows. min() keeps it single-column on a phone. */
.net-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(620px,100%),1fr));gap:14px;margin-bottom:22px}
@media (max-width:1340px){
  .net-grid{grid-template-columns:repeat(auto-fill,minmax(min(520px,100%),1fr))}
}
.net-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  border-left:4px solid var(--line)}
.net-card.status-ok{border-left-color:var(--ok)}
.net-card.status-warn{border-left-color:var(--warn)}
.net-card.status-fail{border-left-color:var(--fail);animation:pulse 1.4s infinite}
.net-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.net-name{font-size:16px;font-weight:700}
.net-host{margin-top:8px;opacity:.7;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.net-card .kv{width:100%;margin-top:4px}
.meter{display:inline-block;width:88px;height:8px;border-radius:4px;background:#1b2230;overflow:hidden;
  vertical-align:middle;margin-right:6px}
.meter i{display:block;height:100%;border-radius:4px}
.meter i.ok{background:var(--ok)} .meter i.warn{background:var(--warn)} .meter i.fail{background:var(--fail)}
.meter-val{font-variant-numeric:tabular-nums;font-size:12px}

/* ---- routing (BGP / OSPF) blocks on the firewall & router cards ---- */
.pill.tiny{font-size:10px;padding:1px 6px;letter-spacing:.02em}
.kv .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.rt-details{margin-top:6px}
.rt-details>summary{cursor:pointer;user-select:none;padding:2px 0}
.rt-details>summary:hover{color:#e6edf5}
.rt-peers{width:100%;border-collapse:collapse;margin-top:6px;font-size:11px;
  display:block;overflow-x:auto;white-space:nowrap}
.rt-peers th{text-align:left;font-weight:600;color:#8b98a8;padding:3px 8px 3px 0;
  border-bottom:1px solid #26303c}
.rt-peers td{padding:3px 8px 3px 0;border-bottom:1px solid #1c242e;vertical-align:middle}
.rt-peers tr.muted td{opacity:.55}
.rt-peers .num{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rt-peers th.num{text-align:right}

/* ── CrowdSec dashboard ─────────────────────────────────────────────────────
   Stat tiles + an hourly history bar chart. The chart is plain divs rather
   than SVG/canvas: it is a single series of small integers, so bars scale
   with a % height and stay readable at any width without a redraw on resize. */
.cs-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.cs-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cs-tile .n{font-size:26px;font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums}
.cs-tile .l{font-size:12px;color:var(--muted);margin-top:2px}
.cs-tile.bad .n{color:var(--fail)}
.cs-tile.warn .n{color:var(--warn)}
.cs-tile.good .n{color:var(--ok)}

.cs-chart{display:flex;align-items:flex-end;gap:2px;height:120px;padding:8px 2px 0;
          border-bottom:1px solid var(--line);margin-bottom:6px;overflow-x:auto}
.cs-bar{flex:1 0 5px;min-width:5px;background:var(--accent);border-radius:2px 2px 0 0;position:relative}
.cs-bar:hover{background:var(--fail)}
.cs-bar.q{background:var(--empty)}
.cs-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

.cs-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:16px}
.cs-table{width:100%;border-collapse:collapse;font-size:13px}
.cs-table th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;
             letter-spacing:.04em;color:var(--muted);padding:4px 8px 6px;border-bottom:1px solid var(--line)}
.cs-table td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.cs-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
.cs-table tr:hover td{background:var(--panel2)}
.cs-ip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.cs-scen{font-size:11px;color:var(--muted)}
.cs-stale{background:var(--warnbg);border:1px solid var(--warn);color:var(--ink);border-radius:8px;padding:8px 12px;margin-bottom:14px;font-size:13px}

/* ── Observium overlays ───────────────────────────────────────────────────── */
.pill.nms{font-size:10px;padding:1px 7px;letter-spacing:.02em;white-space:nowrap}
.pill.nms.stale{background:var(--warnbg);color:#f0c84b}
.net-head .pill.nms{margin-left:6px}
#nmsStrip:empty{display:none}
.obs-strip{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:-4px 2px 14px;font-size:13px}
.obs-strip .callout{margin:0;flex:1 1 100%}
.obs-strip a{color:var(--spare);text-decoration:none} .obs-strip a:hover{text-decoration:underline}
.obs-bar{height:6px;border-radius:3px;background:var(--empty);overflow:hidden;min-width:80px}
.obs-bar i{display:block;height:100%;background:var(--ok)}
.obs-bar.warn i{background:var(--warn)} .obs-bar.fail i{background:var(--fail)}
.obs-phase{display:inline-block;min-width:110px;padding:6px 8px;margin:2px 6px 2px 0;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:12px}
.obs-phase b{font-size:15px}
.cs-table td.dim{color:var(--muted)}

/* ── auth: login, user menu, user manager ─────────────────────────────────── */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 28px;width:min(380px,92vw)}
.login-card label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.login-card input,.user-form input,.user-form select{width:100%;box-sizing:border-box;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.login-card .btn.primary,.user-form .btn.primary{margin-top:14px;width:100%}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.danger{border-color:var(--fail);color:var(--fail)}
.login-msg{border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel2)}
.login-msg.fail{background:var(--failbg);border-color:var(--fail)} .login-msg.warn{background:var(--warnbg);border-color:var(--warn)} .login-msg.ok{background:var(--okbg);border-color:var(--ok)}
.user-menu{display:inline-flex;align-items:center;gap:8px;margin-left:12px;padding-left:12px;border-left:1px solid var(--line)}
.user-menu .btn{padding:4px 9px;font-size:12px;text-decoration:none}
.users-page{max-width:1200px;margin:0 auto;padding:20px}
.users-page .panel{margin-bottom:18px}
.user-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 14px;align-items:end;margin-top:8px}
.user-form label{font-size:12px;color:var(--muted)} .user-form .areas,.user-form .btn.primary{grid-column:1/-1;width:auto}
.user-form .areas{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 0}
.chk{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--ink)} .chk input{width:auto}
.cs-table tr.dim td{opacity:.55}
details > summary.btn{display:inline-block;cursor:pointer;list-style:none}
/* read-only / no-write-area: hide the controls the API would refuse */
body:not(.w-disks) #refreshBtn, body:not(.w-disks) .actions, body:not(.w-disks) .drawer .steps .btn{display:none!important}
body:not(.w-proxmox) .ceph-admin{display:none!important}