:root{
  --bg:#04070f;
  --bg-panel:#080d1a;
  --bg-panel-2:#0b1220;
  --bg-row-hover:#0d1626;
  --border:rgba(96,207,255,0.14);
  --border-strong:rgba(55,138,221,0.4);
  --text-primary:#eaf3fb;
  --text-secondary:#8ea3bf;
  --text-muted:#54688a;
  --accent-cyan:#60cfff;
  --accent-blue:#378add;
  --status-op:#35de94;
  --status-degraded:#ffc24b;
  --status-down:#ff5d6c;
  --status-none:#55688a;

  --font-ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(55,138,221,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(96,207,255,0.08), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text-primary);
  font-family:var(--font-ui);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(96,207,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,207,255,0.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 1200px 800px at 50% 0%, black 0%, transparent 75%);
  z-index:0;
}

a{color:inherit;}
:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:2px; border-radius:4px;}

.shell{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 28px 64px;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(4,7,15,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wordmark{display:flex; align-items:center; gap:10px; font-size:20px; font-weight:900; letter-spacing:-0.01em;}
.wordmark img{height:28px; width:auto; display:block;}

nav.top-nav{display:flex; align-items:center; gap:28px;}
.nav-link{
  font-size:13px; font-weight:600; text-decoration:none; color:var(--text-secondary);
  padding-bottom:4px; border-bottom:2px solid transparent; letter-spacing:0.01em;
}
.nav-link.active{color:var(--text-primary); border-bottom-color:var(--accent-cyan);}
.rss-btn{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--border-strong); color:var(--accent-cyan);
  background:rgba(96,207,255,0.06);
  font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; text-decoration:none;
}
.rss-btn:hover{background:rgba(96,207,255,0.14);}

/* ---------- hero ---------- */
.hero{padding:56px 0 36px;}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 14px;
}
.page-intro{
  font-size:14.5px; line-height:1.55; color:var(--text-secondary);
  max-width:640px; margin:0 0 24px;
}
.status-banner{
  display:flex; align-items:center; gap:20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px 28px;
}
.status-banner.critical{border-color:rgba(255,93,108,0.4);}
.status-banner.degraded{border-color:rgba(255,194,75,0.35);}
.status-banner.operational{border-color:rgba(53,222,148,0.35);}
.status-ring{
  position:relative; width:52px; height:52px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.status-ring.critical{background:rgba(255,93,108,0.1); border:1.5px solid var(--status-down); box-shadow:0 0 22px rgba(255,93,108,0.45);}
.status-ring.degraded{background:rgba(255,194,75,0.1); border:1.5px solid var(--status-degraded); box-shadow:0 0 22px rgba(255,194,75,0.45);}
.status-ring.operational{background:rgba(53,222,148,0.1); border:1.5px solid var(--status-op); box-shadow:0 0 22px rgba(53,222,148,0.45);}
.status-ring svg{width:24px; height:24px;}
.status-copy h1{font-size:22px; font-weight:700; margin:0 0 4px; text-wrap:balance;}
.status-copy p{font-size:14px; color:var(--text-secondary); margin:0;}
.status-meta{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none;}
.cluster-tag{
  font-family:"Consolas","SFMono-Regular",monospace; font-size:12px; color:var(--accent-cyan);
  background:rgba(96,207,255,0.08); border:1px solid var(--border); padding:4px 10px; border-radius:6px;
}
.live-dot-row{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted);}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--status-op);
  box-shadow:0 0 8px rgba(53,222,148,0.8);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}

/* ---------- section ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:48px 0 14px;
}
.section-head h2{font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-secondary); margin:0;}
.section-head span{font-size:12px; color:var(--text-muted);}

.table-wrap{
  border:1px solid var(--border); border-radius:14px; overflow-x:auto;
  background:var(--bg-panel);
}
table{width:100%; border-collapse:collapse; min-width:900px;}
thead th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); padding:14px 16px; border-bottom:1px solid var(--border);
  background:var(--bg-panel-2);
}
thead th.num, td.num{text-align:right;}
tbody tr{border-bottom:1px solid var(--border);}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--bg-row-hover);}
tbody tr.incident{background:rgba(255,93,108,0.045);}
td{padding:14px 16px; font-size:13.5px; vertical-align:middle;}

.svc-status{display:flex; align-items:center; gap:9px;}
.dot{width:9px; height:9px; border-radius:50%; flex:none;}
.dot.op{background:var(--status-op); box-shadow:0 0 9px rgba(53,222,148,0.75);}
.dot.degraded{background:var(--status-degraded); box-shadow:0 0 9px rgba(255,194,75,0.8); animation:pulse 1.8s ease-in-out infinite;}
.dot.down{background:var(--status-down); box-shadow:0 0 9px rgba(255,93,108,0.8); animation:pulse 1.4s ease-in-out infinite;}
.dot.none{background:var(--status-none); box-shadow:none;}
.status-word{font-size:12px; font-weight:600;}
.status-word.op{color:var(--status-op);}
.status-word.degraded{color:var(--status-degraded);}
.status-word.down{color:var(--status-down);}
.status-word.none{color:var(--text-muted);}
.status-detail{
  font-size:11px; color:var(--text-muted); margin-top:3px; padding-left:18px;
  font-family:"Consolas","SFMono-Regular",monospace;
}
.status-detail .src{color:var(--text-secondary); font-weight:600;}

.svc-name{font-weight:600; color:var(--text-primary);}
.svc-sub{font-size:11px; color:var(--text-muted); font-family:"Consolas","SFMono-Regular",monospace;}

.replicas{font-variant-numeric:tabular-nums; color:var(--text-secondary); font-size:13px;}
.uptime{font-variant-numeric:tabular-nums; font-weight:600;}

.history{display:flex; gap:2px; align-items:flex-end;}
.bar{width:5px; height:22px; border-radius:1px; flex:none; cursor:default; transition:filter .1s ease;}
.bar:hover{filter:brightness(1.35);}
.bar.op{background:var(--status-op);}
.bar.degraded{background:var(--status-degraded);}
.bar.down{background:var(--status-down);}
.bar.none{background:rgba(84,104,138,0.35);}
.bar.unknown{background:repeating-linear-gradient(135deg, rgba(84,104,138,0.28) 0 3px, rgba(84,104,138,0.1) 3px 6px);}

.bar-tooltip{
  position:fixed; z-index:50;
  background:var(--bg-panel-2); border:1px solid var(--border-strong);
  color:var(--text-primary); font-size:11.5px; font-family:var(--font-ui);
  white-space:nowrap; padding:7px 11px; border-radius:7px;
  box-shadow:0 8px 20px rgba(0,0,0,0.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,-100%);
  transition:opacity .1s ease;
}
.bar-tooltip.visible{opacity:1; visibility:visible;}
.bar-tooltip .tt-date{color:var(--text-secondary); font-weight:700; margin-right:6px;}
.bar-tooltip .tt-time{color:var(--accent-cyan); font-variant-numeric:tabular-nums; font-family:"Consolas","SFMono-Regular",monospace;}

.fetch-error{
  margin:16px 0 0; padding:12px 16px; border-radius:10px;
  background:rgba(255,93,108,0.08); border:1px solid rgba(255,93,108,0.35);
  color:var(--status-down); font-size:13px; display:none;
}
.fetch-error.visible{display:block;}

footer{
  margin-top:48px; padding-top:20px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12px; color:var(--text-muted);
}
footer strong{color:var(--text-secondary); font-weight:600;}

@media (max-width:720px){
  .status-banner{flex-wrap:wrap;}
  .status-meta{margin-left:0; align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .live-dot, .dot.down{animation:none;}
  .bar-tooltip{transition:none;}
}