:root{
  --bg:#0b0e17; --panel:#121726; --panel-2:#161c2e; --line:#232a3f; --line-2:#2c344c;
  --ink:#eaf0ff; --muted:#8a93ad; --faint:#5c6480;
  --accent:#3ba6ff; --accent-2:#1d7fe0;
  --good:#33c481; --good-bg:#12271d; --warn:#f5b13d; --warn-bg:#2a2210; --bad:#f26d6d; --bad-bg:#2a1414;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.2rem}
.topbar{background:linear-gradient(180deg,#0e1320,#0b0e17);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1080px;margin:0 auto;padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.01em;font-size:1.1rem}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.brand small{display:block;font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spacer{margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;padding:.32rem .7rem;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.chip .d{width:8px;height:8px;border-radius:50%}
.chip.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}.chip.ok .d{background:var(--good)}
.chip.demo{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}.chip.demo .d{background:var(--warn)}
.chip.err{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}.chip.err .d{background:var(--bad)}
.navlink{color:var(--muted);font-weight:600;font-size:.9rem;padding:.3rem .1rem}
.navlink:hover{color:var(--ink)}

.demobar{background:var(--warn-bg);border-bottom:1px solid color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn);font-size:.83rem}
.demobar .wrap{padding:.55rem 1.2rem}

main{padding:1.8rem 0 4rem}
.h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:.2rem 0 .3rem}
.sub{color:var(--muted);margin:0 0 1.4rem;font-size:.95rem}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.card.pad{padding:1.15rem 1.25rem}
.grid{display:grid;gap:1rem}
.tiles{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}
.tile .k{font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.tile .v{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin-top:.25rem;font-variant-numeric:tabular-nums}
.tile .v small{font-size:.9rem;font-weight:700;color:var(--muted)}
.tile .m{color:var(--faint);font-size:.8rem;margin-top:.2rem}
.tile .bar{height:6px;border-radius:6px;background:var(--line);margin-top:.7rem;overflow:hidden}
.tile .bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent))}

/* status / events */
.overall{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.25rem;border-radius:14px;border:1px solid var(--line);background:var(--panel);margin-bottom:1.4rem}
.overall .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.overall.good .ic{background:var(--good-bg);color:var(--good)} .overall.bad .ic{background:var(--bad-bg);color:var(--bad)} .overall.warn .ic{background:var(--warn-bg);color:var(--warn)}
.overall h2{margin:0;font-size:1.05rem}.overall p{margin:.1rem 0 0;color:var(--muted);font-size:.88rem}
.sec-h{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1.8rem 0 .7rem;display:flex;align-items:center;gap:.5rem}
.sec-h .n{background:var(--line);color:var(--ink);border-radius:999px;font-size:.72rem;padding:.05rem .5rem}
.event{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:12px;background:var(--panel);padding:1rem 1.15rem;margin-bottom:.8rem}
.event.unplanned{border-left-color:var(--bad)} .event.planned{border-left-color:var(--warn)} .event.done{border-left-color:var(--good);opacity:.9}
.event .top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.4rem}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.15rem .5rem;border-radius:6px}
.tag.unplanned{background:var(--bad-bg);color:var(--bad)}.tag.planned{background:var(--warn-bg);color:var(--warn)}.tag.done{background:var(--good-bg);color:var(--good)}
.tag.provider{background:var(--panel-2);color:var(--muted);border:1px solid var(--line-2)}
.event .when{color:var(--faint);font-size:.8rem;margin-left:auto}
.event .desc{color:var(--ink);font-size:.92rem}
.event .desc :is(strong,b){color:var(--ink)}
.event .meta{color:var(--muted);font-size:.82rem;margin-top:.55rem;display:flex;gap:1rem;flex-wrap:wrap}
.event .meta b{color:var(--ink)}
.empty{color:var(--faint);font-size:.9rem;padding:.6rem 0}

/* forms / controls */
.controls{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.3rem}
label.f{display:block;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.3rem}
input,select{background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;color:var(--ink);padding:.55rem .7rem;font-size:.92rem;font-family:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.btn{background:var(--accent);color:#04121f;border:none;border-radius:9px;padding:.58rem 1rem;font-weight:800;font-size:.9rem;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent-2);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.chartcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem 1.3rem;margin-top:1rem}
.chartcard h3{margin:.1rem 0 1rem;font-size:1rem}
.chartcard .cwrap{position:relative;height:280px}
.svc-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.pill{background:var(--panel-2);border:1px solid var(--line-2);color:var(--muted);border-radius:999px;padding:.35rem .8rem;font-size:.84rem;font-weight:700;cursor:pointer}
.pill.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--ink)}
.svc-tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.svc-tbl th{text-align:left;padding:.5rem .45rem;border-bottom:1px solid var(--line-2);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.svc-tbl td{padding:.55rem .45rem;border-bottom:1px solid var(--line);vertical-align:top}
.svc-tbl tbody tr{cursor:pointer}
.svc-tbl tbody tr:hover td{background:var(--panel-2)}
.svc-sub{color:var(--faint);font-size:.78rem;margin-top:.1rem}
.sbadge{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:700;padding:.16rem .5rem;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.sbadge .d{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.sbadge.online{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}.sbadge.online .d{background:var(--good)}
.sbadge.offline{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}.sbadge.offline .d{background:var(--bad)}
.sbadge.suspended{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}.sbadge.suspended .d{background:var(--warn)}
.foot{border-top:1px solid var(--line);color:var(--faint);font-size:.78rem;text-align:center;padding:1.4rem 0 0;margin-top:2rem;line-height:1.7}