:root{
  --bg:#e8eef2;
  --bg2:#f7fafc;
  --ink:#12202b;
  --muted:#5b6b76;
  --line:#c9d5de;
  --accent:#0f766e;
  --accent2:#b45309;
  --danger:#b91c1c;
  --card:#ffffffcc;
  --shadow:0 18px 50px rgba(18,32,43,.08);
  --radius:18px;
  --font:"Outfit",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); font-family:var(--font);
  background:
    radial-gradient(900px 500px at 10% -10%, #9fd5cf55, transparent 60%),
    radial-gradient(700px 400px at 100% 0%, #f0c48a44, transparent 55%),
    linear-gradient(180deg, #dfe8ee, var(--bg));
  min-height:100vh;
}
a{color:var(--accent); text-decoration:none}
code,.mono{font-family:var(--mono); font-size:.92em}
.top{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1rem 1.5rem; border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px); background:#ffffffaa; position:sticky; top:0; z-index:20;
}
.brand{display:flex; gap:.8rem; align-items:center}
.brand .mark{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(145deg,#0f766e,#134e4a); color:#fff; font-weight:700;
}
.brand small{display:block; color:var(--muted); font-size:.78rem}
nav{display:flex; flex-wrap:wrap; gap:.4rem}
nav a{padding:.45rem .8rem; border-radius:999px; color:var(--ink)}
nav a.on, nav a:hover{background:#0f766e14}
nav a.out{color:var(--danger)}
.wrap{width:min(1100px, calc(100% - 2rem)); margin:1.5rem auto 3rem}
.head{display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem}
.head h1{margin:0; font-size:1.8rem; letter-spacing:-.02em}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.2rem}
.stats article, .panel, .login-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(8px);
}
.stats article{padding:1.1rem 1.2rem}
.stats span{display:block; color:var(--muted); font-size:.85rem}
.stats strong{font-size:1.6rem}
.panel{padding:1.2rem 1.3rem; margin-bottom:1.2rem}
.panel h2{margin:0 0 1rem; font-size:1.1rem}
.muted{color:var(--muted)}
table{width:100%; border-collapse:collapse}
th,td{padding:.7rem .5rem; border-bottom:1px solid var(--line); text-align:right; vertical-align:top}
th{font-size:.8rem; color:var(--muted); font-weight:600}
tr.off{opacity:.55}
.table-wrap{overflow:auto}
label{display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; color:var(--muted)}
input{
  border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem;
  font:inherit; color:var(--ink); background:#fff;
}
button,.ghost{
  border:0; border-radius:12px; padding:.7rem 1rem; font:inherit; font-weight:600;
  background:var(--accent); color:#fff; cursor:pointer;
}
button.ghost,.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
button.danger{background:var(--danger)}
.grid-form{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; align-items:end}
.stack{display:grid; gap:.7rem}
.alert{padding:.8rem 1rem; border-radius:12px; margin-bottom:1rem}
.alert.ok{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0}
.alert.bad{background:#fef2f2; color:#991b1b; border:1px solid #fecaca}
.pill{display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600}
.pill.live{background:#d1fae5; color:#065f46}
.pill.on{background:#e0f2fe; color:#075985}
.pill.off{background:#fee2e2; color:#991b1b}
details summary{cursor:pointer; color:var(--accent); font-weight:600}
.pop{margin-top:.6rem; padding: .8rem; border:1px solid var(--line); border-radius:12px; background:#fff; min-width:220px}
.login-hero{min-height:80vh; display:grid; place-items:center}
.login-card{width:min(420px,100%); padding:2rem}
.eyebrow{color:var(--accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem}
.login-card h1{margin:.2rem 0; font-size:2rem}
.sub{color:var(--muted); margin:0 0 1.2rem}
.log{
  margin:0; padding:1rem; background:#102018; color:#d7ffe9; border-radius:12px;
  overflow:auto; max-height:70vh; font-family:var(--mono); font-size:.8rem; direction:ltr; text-align:left;
}
@media (max-width:900px){
  .stats{grid-template-columns:1fr 1fr}
  .grid-form{grid-template-columns:1fr}
  .top{flex-direction:column; align-items:flex-start}
}