:root{
  --bg:#0a0a0a;
  --panel:#111113;
  --panel-2:#0d0d0f;
  --border:#232326;
  --border-soft:#1c1c1f;
  --text:#e8e8ea;
  --text-dim:#9a9aa2;
  --text-dimmer:#6b6b73;
  --accent:#8b5cf6;
  --green:#22c55e;
  --red:#ef4444;
  --orange:#f97316;
  --yellow:#eab308;
  --red-bg:#3a1210;
  --red-border:#7a1f1a;
  --radius:10px;
  --maxw:820px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:40px 20px 80px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:26px;height:26px;border-radius:6px;}
.brand-name{font-weight:700;font-size:15px;color:var(--text);}
.topbar-actions{display:flex;gap:10px;}
.btn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:#18181b;border-color:#333338;}
.btn-solid{background:#fff;color:#0a0a0a;border-color:#fff;}
.btn-solid:hover{background:#e8e8ea;}
.intro{color:var(--text-dim);margin-bottom:28px;font-size:14.5px;}
.intro b, .intro strong{color:var(--text);}

.incident-banner{
  border:1px solid var(--red-border);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:28px;
  background:var(--panel);
}
.incident-head{
  background:linear-gradient(180deg,#5b1a15,#4a1613);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:15px;
  border-bottom:1px solid var(--red-border);
}
.incident-head svg{flex:none;color:#f87171;}
.incident-body{padding:16px 18px;}
.tag{
  display:inline-block;
  background:#5a1a16;
  color:#fca5a5;
  border:1px solid #7a2b24;
  padding:4px 10px;
  border-radius:6px;
  font-size:12.5px;
  font-weight:600;
  margin-bottom:14px;
}
.tag.ok{background:#0f2e1c;color:#86efac;border-color:#1d5334;}
.tag.warn{background:#3a2a0d;color:#fcd34d;border-color:#6b4d15;}
.incident-updates{border-top:1px solid var(--border-soft);padding-top:12px;}
.incident-update{padding:10px 0;border-bottom:1px solid var(--border-soft);}
.incident-update:last-child{border-bottom:none;}
.incident-update p{margin:0;color:var(--text-dim);}
.incident-meta{color:var(--text-dimmer);font-size:12.5px;margin-top:12px;}
.incident-meta span{margin-right:4px;}

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  margin-bottom:20px;
  overflow:hidden;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;
}
.card-head h2{margin:0;font-size:15px;font-weight:700;}
.range-nav{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:13px;}
.range-nav svg{cursor:pointer;opacity:.7;}
.range-nav svg:hover{opacity:1;}

.group{border-top:1px solid var(--border-soft);}
.group-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;cursor:pointer;user-select:none;
}
.group-head-left{display:flex;align-items:center;gap:10px;font-weight:700;}
.group-head-left .chip{color:var(--text-dim);font-weight:500;font-size:13px;}
.chev{transition:transform .15s;color:var(--text-dim);}
.chev.open{transform:rotate(180deg);}
.group-body{padding:0 18px 8px;}

.component-row{padding:10px 0;border-top:1px solid var(--border-soft);}
.component-row:first-child{border-top:none;}
.component-top{display:flex;align-items:center;justify-content:space-between;}
.component-left{display:flex;align-items:center;gap:10px;font-weight:600;}
.status-icon{width:16px;height:16px;flex:none;}
.status-icon.op{color:var(--green);}
.status-icon.warn{color:var(--orange);}
.status-icon.down{color:var(--red);}
.info-dot{color:var(--text-dimmer);cursor:default;}
.uptime-pct{color:var(--text-dim);font-size:13px;}
.bars{display:flex;gap:2px;margin-top:8px;height:22px;}
.bar{flex:1;border-radius:2px;background:#232326;position:relative;}
.bar.op{background:var(--green);}
.bar.warn{background:var(--orange);}
.bar.down{background:var(--red);}
.bar:hover::after{
  content:attr(data-tip);
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  background:#1c1c1f;border:1px solid var(--border);
  padding:4px 8px;border-radius:6px;font-size:11.5px;white-space:nowrap;
  color:var(--text);z-index:5;
}

.footer{
  margin-top:36px;display:flex;align-items:center;justify-content:center;
  gap:8px;color:var(--text-dimmer);font-size:13px;padding-top:20px;
}
.footer img{width:16px;height:16px;border-radius:4px;}
.footer a{color:var(--text-dim);font-weight:600;}
.footer a:hover{color:var(--text);}

/* Admin */
.admin-wrap{max-width:920px;}
.admin-lock{
  min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;
}
.admin-lock input{
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  padding:10px 14px;border-radius:8px;font-size:14px;width:280px;
}
.admin-section{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:18px;margin-bottom:18px;}
.admin-section h3{margin:0 0 12px;font-size:14px;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:5px;}
.field input,.field select,.field textarea{
  width:100%;background:#0d0d0f;border:1px solid var(--border);color:var(--text);
  padding:8px 10px;border-radius:7px;font-size:13.5px;font-family:inherit;
}
.field textarea{resize:vertical;min-height:60px;}
.row-flex{display:flex;gap:10px;}
.row-flex > *{flex:1;}
.list-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px;border:1px solid var(--border-soft);border-radius:8px;margin-bottom:8px;background:#0d0d0f;
}
.list-item-actions{display:flex;gap:6px;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-danger{background:#3a1210;border-color:#7a1f1a;color:#fca5a5;}
.btn-danger:hover{background:#4a1613;}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 8px;border-radius:999px;background:#18181b;border:1px solid var(--border);color:var(--text-dim);}
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#18181b;border:1px solid var(--border);padding:10px 16px;border-radius:8px;
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,bottom .2s;
}
.toast.show{opacity:1;bottom:30px;}
.muted{color:var(--text-dimmer);font-size:12.5px;}
.divider{border-top:1px solid var(--border-soft);margin:16px 0;}