:root{
  --void:#04030d; --deep:#080618; --nebula:#130828; --nebula-mid:#2a1259;
  --violet:#7c3aed; --purple:#a855f7; --lavender:#c4b5fd; --blue:#2563eb;
  --cyan:#60a5fa; --indigo:#818cf8; --star:#f1f5f9; --dust:#94a3b8; --dust-d:#6b7a99;
  --ok:#22c55e; --warn:#f59e0b; --down:#ef4444; --standby:#64748b;
  --card:rgba(124,58,237,.06); --card-bd:rgba(124,58,237,.22);
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Exo 2',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--star); background:var(--void);
  min-height:100vh; line-height:1.5; position:relative; overflow-x:hidden;
}
.stars{position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(168,85,247,.12), transparent 60%),
    var(--void);
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--dust-d);font-weight:400}

.site-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(16px,5vw,48px);max-width:1000px;margin:0 auto;
}
.logo{height:44px;width:auto;display:block}
.head-right{display:flex;align-items:center;gap:16px}
.page-title{font-weight:600;color:var(--lavender);font-size:.95rem;letter-spacing:.02em}
.live{font-family:var(--mono);font-size:.72rem;color:var(--dust);display:flex;align-items:center;gap:6px;text-transform:uppercase}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.wrap{max-width:1000px;margin:0 auto;padding:0 clamp(16px,5vw,48px) 64px}

/* banner geral */
.overall{
  border-radius:16px;padding:22px 24px;margin:8px 0 24px;
  border:1px solid var(--card-bd);background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(37,99,235,.06));
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.overall .big-dot{width:16px;height:16px;border-radius:50%;flex:none}
.overall h1{font-size:1.35rem;font-weight:700;flex:1;min-width:240px}
.overall .up{font-family:var(--mono);text-align:right}
.overall .up b{font-size:1.5rem;display:block;color:var(--star)}
.overall .up span{font-size:.72rem;color:var(--dust-d);text-transform:uppercase;letter-spacing:.05em}
.overall.s-operational{border-color:rgba(34,197,94,.4)}
.overall.s-operational .big-dot{background:var(--ok);box-shadow:0 0 14px var(--ok)}
.overall.s-degraded{border-color:rgba(245,158,11,.45)}
.overall.s-degraded .big-dot{background:var(--warn);box-shadow:0 0 14px var(--warn)}
.overall.s-down{border-color:rgba(239,68,68,.5)}
.overall.s-down .big-dot{background:var(--down);box-shadow:0 0 14px var(--down)}
.overall.s-unknown .big-dot{background:var(--standby)}

/* tabs */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{
  font-family:var(--sans);font-weight:600;font-size:.9rem;cursor:pointer;
  background:var(--card);color:var(--dust);border:1px solid var(--card-bd);
  padding:9px 16px;border-radius:10px;transition:.15s;
}
.tabs button:hover{color:var(--star)}
.tabs button.active{background:rgba(124,58,237,.25);color:#fff;border-color:var(--violet)}
.tabs button .badge{font-family:var(--mono);font-size:.68rem;margin-left:7px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.25)}

.panel{display:none}
.panel.active{display:block;animation:fade .2s}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.env-note{font-size:.82rem;color:var(--dust);margin:-4px 0 16px;padding:10px 14px;border-left:3px solid var(--violet);background:rgba(124,58,237,.06);border-radius:0 8px 8px 0}
.env-note.homolog{border-left-color:var(--warn)}

/* card de serviço */
.svc{
  border:1px solid var(--card-bd);background:var(--card);border-radius:14px;
  padding:16px 18px;margin-bottom:12px;
}
.svc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.svc-name{font-weight:700;font-size:1.02rem;flex:1;min-width:160px;display:flex;align-items:center;gap:9px}
.pill{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:20px;white-space:nowrap}
.pill.operational{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.4)}
.pill.degraded{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.4)}
.pill.down{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.45)}
.pill.standby{background:rgba(100,116,139,.15);color:#94a3b8;border:1px solid rgba(100,116,139,.4)}
.pill.maintenance{background:rgba(96,165,250,.15);color:#60a5fa;border:1px solid rgba(96,165,250,.4)}
.pill.unknown{background:rgba(100,116,139,.1);color:#64748b;border:1px solid rgba(100,116,139,.3)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.operational{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.degraded{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dot.down{background:var(--down);box-shadow:0 0 8px var(--down)}
.dot.standby{background:var(--standby)}
.dot.maintenance{background:var(--cyan)}
.dot.unknown{background:var(--dust-d)}
.svc-meta{font-family:var(--mono);font-size:.74rem;color:var(--dust);display:flex;gap:16px}
.svc-meta b{color:var(--lavender);font-weight:700}

/* sparkline 6h */
.spark{display:flex;gap:1px;height:26px;align-items:flex-end;margin-top:12px}
.spark i{flex:1;min-width:0;border-radius:1px;background:var(--standby);opacity:.35;height:40%}
.spark i.up{background:var(--ok);opacity:.8;height:100%}
.spark i.part{background:var(--warn);opacity:.8;height:70%}
.spark i.down{background:var(--down);opacity:.9;height:100%}
.spark i.none{background:var(--dust-d);opacity:.18;height:22%}

/* barras 90d */
.bars90-wrap{margin-top:12px}
.bars90{display:flex;gap:2px;height:30px;align-items:flex-end}
.bars90 i{flex:1;min-width:0;border-radius:2px;background:var(--ok);height:100%}
.bars90 i.warn{background:var(--warn)}
.bars90 i.bad{background:var(--down)}
.bars90 i.none{background:rgba(148,163,184,.18)}
.bars90-legend{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--dust-d);margin-top:5px}

/* cluster */
.cluster{margin:28px 0}
.cluster h2{font-size:1.05rem;margin-bottom:6px}
.cluster .sub{font-size:.78rem;color:var(--dust-d);margin-bottom:14px}
.nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.node{border:1px solid var(--card-bd);background:var(--card);border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:10px}
.node .name{font-family:var(--mono);font-size:.82rem;flex:1}
.node .tag{font-family:var(--mono);font-size:.64rem;color:var(--dust-d);text-transform:uppercase}

/* eventos */
.events{margin-top:32px}
.events h2{font-size:1.05rem;margin-bottom:14px}
.ev{border-left:3px solid var(--card-bd);padding:10px 0 10px 16px;margin-bottom:6px}
.ev.critical{border-left-color:var(--down)}
.ev.major{border-left-color:var(--warn)}
.ev.minor,.ev.info{border-left-color:var(--cyan)}
.ev .ev-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ev .ev-t{font-weight:600}
.ev .ev-when{font-family:var(--mono);font-size:.7rem;color:var(--dust-d)}
.ev .ev-badge{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;padding:1px 7px;border-radius:6px}
.ev.critical .ev-badge{background:rgba(239,68,68,.15);color:#f87171}
.ev.major .ev-badge{background:rgba(245,158,11,.15);color:#fbbf24}
.ev .ev-badge.resolved{background:rgba(34,197,94,.15);color:#4ade80}
.ev .ev-msg{font-size:.83rem;color:var(--dust);margin-top:3px}
.empty{color:var(--dust-d);font-family:var(--mono);font-size:.82rem;padding:12px 0}

.foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--card-bd);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--dust-d);font-family:var(--mono)}

@media(max-width:560px){
  .overall h1{font-size:1.1rem}
  .svc-meta{width:100%;margin-top:8px}
  .bars90{height:24px}
}