:root{
--bg:#050b18;--panel:#0b1730;--border:rgba(148,163,184,.14);--text:#f8fafc;--muted:#91a1bc;
--blue:#3b82f6;--green:#24d486;--yellow:#f6c451;--red:#ff5d73;--shadow:0 28px 70px rgba(0,0,0,.25)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% -20%,rgba(59,130,246,.20),transparent 35%),radial-gradient(circle at 90% 20%,rgba(37,99,235,.11),transparent 28%),linear-gradient(180deg,#061022 0%,#050b18 55%,#07101f 100%);color:var(--text);overflow-x:hidden}
a{color:inherit}.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.background-orb{position:fixed;border-radius:999px;filter:blur(90px);pointer-events:none;opacity:.16;z-index:-1}.orb-one{width:420px;height:420px;background:#2563eb;top:140px;left:-170px}.orb-two{width:360px;height:360px;background:#1d4ed8;right:-120px;top:560px}
.topbar{height:82px;display:flex;align-items:center;border-bottom:1px solid rgba(148,163,184,.08);background:rgba(5,11,24,.72);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.topbar-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;font-size:24px;font-weight:900;font-style:italic;background:linear-gradient(135deg,#4f8cff,#205ee8);box-shadow:0 10px 24px rgba(37,99,235,.28)}.brand-text{display:flex;flex-direction:column;line-height:.9;letter-spacing:.05em}.brand-text strong{font-size:16px}.brand-text small{font-size:8px;color:#8ca0c0;letter-spacing:.25em;margin-top:5px}.topnav{display:flex;align-items:center;gap:26px}.topnav a{font-size:13px;color:#a8b5cc;text-decoration:none;transition:.2s}.topnav a:hover{color:#fff}
.hero{padding:86px 0 42px;text-align:center}.hero-eyebrow,.section-kicker{color:#72a7ff;font-weight:800;font-size:11px;letter-spacing:.16em}.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}.live-mini-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 6px rgba(36,212,134,.08)}.hero h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.055em;margin:0 0 16px;line-height:1}.hero-copy{max-width:680px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.7}
.overall-banner{margin:44px auto 0;max-width:980px;min-height:110px;border:1px solid var(--border);border-radius:20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;text-align:left;padding:22px 24px;background:linear-gradient(135deg,rgba(11,23,48,.92),rgba(8,19,40,.92));box-shadow:var(--shadow)}.overall-banner.operational{border-color:rgba(36,212,134,.26);background:linear-gradient(135deg,rgba(14,42,47,.94),rgba(8,26,36,.95))}.overall-banner.degraded{border-color:rgba(246,196,81,.28)}.overall-banner.down{border-color:rgba(255,93,115,.28);background:linear-gradient(135deg,rgba(50,21,38,.94),rgba(25,13,29,.95))}
.overall-icon{width:55px;height:55px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.045)}.status-dot{width:14px;height:14px;border-radius:50%;display:block;position:relative;background:#64748b}.status-dot.operational{background:var(--green);box-shadow:0 0 18px rgba(36,212,134,.7)}.status-dot.operational:after,.status-dot.down:after,.service-dot.operational:after,.service-dot.down:after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid currentColor;animation:pulse 1.8s ease-out infinite}.status-dot.operational,.service-dot.operational{color:var(--green)}.status-dot.degraded,.service-dot.degraded{background:var(--yellow);color:var(--yellow)}.status-dot.down,.service-dot.down{background:var(--red);color:var(--red);box-shadow:0 0 18px rgba(255,93,115,.65)}.status-dot.loading{animation:softblink 1.3s infinite}
.overall-content{display:flex;flex-direction:column;gap:5px}.overall-content strong{font-size:18px;letter-spacing:-.02em}.overall-content span{color:var(--muted);font-size:13px}.overall-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-end;font-size:11px;color:#7f91af}
.section{padding:38px 0}.section-heading,.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.section-heading h2,.panel-heading h2{font-size:25px;letter-spacing:-.035em;margin:6px 0 0}.auto-refresh{font-size:11px;color:#8192af;display:flex;align-items:center;gap:8px}.refresh-ring{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(36,212,134,.08)}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.service-card{border:1px solid var(--border);border-radius:17px;padding:20px;background:linear-gradient(145deg,rgba(13,28,57,.86),rgba(8,19,39,.88));box-shadow:0 16px 45px rgba(0,0,0,.14);transition:transform .2s,border-color .2s}.service-card:hover{transform:translateY(-2px);border-color:rgba(96,165,250,.25)}.service-top{display:flex;justify-content:space-between;gap:18px}.service-title-wrap{display:flex;gap:13px;align-items:flex-start}.service-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:#64748b;position:relative;flex:0 0 auto}.service-title h3{margin:0;font-size:15px}.service-title p{margin:4px 0 0;color:#778aa9;font-size:11px}.service-state{text-align:right}.service-state strong{font-size:11px}.service-state .operational{color:var(--green)}.service-state .degraded{color:var(--yellow)}.service-state .down{color:var(--red)}.service-state small{display:block;margin-top:5px;color:#6f819e;font-size:10px}
.service-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:22px}.timeline{display:flex;gap:3px;flex:1;align-items:center;min-width:0}.timeline i{height:18px;flex:1;min-width:2px;max-width:6px;border-radius:3px;background:rgba(148,163,184,.13)}.timeline i.operational{background:rgba(36,212,134,.72)}.timeline i.degraded{background:rgba(246,196,81,.82)}.timeline i.down{background:rgba(255,93,115,.82)}.latency{text-align:right;white-space:nowrap}.latency span{display:block;color:#6f819e;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.latency strong{font-size:15px}
.panel{border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,rgba(11,24,49,.9),rgba(7,17,36,.9));padding:24px;box-shadow:0 20px 55px rgba(0,0,0,.15)}.analytics-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:16px}.chart-badge{font-size:10px;color:#8ba0c0;border:1px solid var(--border);padding:7px 10px;border-radius:999px}.chart-summary{display:flex;gap:38px;margin:4px 0 14px}.chart-summary div{display:flex;flex-direction:column;gap:4px}.chart-summary span{color:#7083a2;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.chart-summary strong{font-size:20px}.chart-wrap{position:relative;height:250px}#latencyChart{width:100%;height:100%;display:block}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#6e819f;font-size:12px;text-align:center;padding:20px}
.uptime-cards{display:grid;gap:14px}.uptime-stat{padding:17px;border:1px solid rgba(148,163,184,.10);border-radius:14px;background:rgba(255,255,255,.018)}.uptime-stat span{display:block;color:#7d8fab;font-size:11px;margin-bottom:7px}.uptime-stat strong{font-size:22px}.progress{height:5px;background:rgba(148,163,184,.12);border-radius:999px;margin-top:13px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c77a,#31e293);border-radius:999px;transition:width .5s ease}.uptime-note{color:#657896;font-size:10px;line-height:1.6;margin:16px 2px 0}
.no-incidents{display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px;background:rgba(36,212,134,.12);border:1px solid rgba(36,212,134,.17)}.check-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(36,212,134,.16);color:var(--green);font-weight:900}.no-incidents strong{font-size:13px}.no-incidents p{margin:4px 0 0;color:#7890aa;font-size:11px}.incident-item{padding:18px;border:1px solid rgba(246,196,81,.18);background:rgba(246,196,81,.12);border-radius:14px;margin-top:10px}.incident-item strong{font-size:13px}.incident-item p{color:#a5a9a8;font-size:11px;line-height:1.6;margin:7px 0 0}
.footer{margin-top:40px;border-top:1px solid rgba(148,163,184,.08);padding:28px 0 36px;color:#70809d}.footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer-inner>div:first-child{display:flex;flex-direction:column;gap:4px}.footer strong{color:#c6d1e3;font-size:12px}.footer span,.footer a{font-size:10px;text-decoration:none}.footer-links{display:flex;gap:20px}
.skeleton-card{height:130px;border-radius:17px;background:linear-gradient(100deg,rgba(255,255,255,.025) 20%,rgba(255,255,255,.065) 35%,rgba(255,255,255,.025) 50%);background-size:300% 100%;animation:skeleton 1.6s infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(.75)}100%{opacity:0;transform:scale(1.45)}}@keyframes softblink{0%,100%{opacity:.35}50%{opacity:1}}@keyframes skeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.status-dot:after,.service-dot:after,.skeleton-card{animation:none!important}}
@media (max-width:820px){.topnav{display:none}.hero{padding-top:62px}.overall-banner{grid-template-columns:auto 1fr}.overall-meta{grid-column:1 / -1;align-items:flex-start;padding-left:75px}.analytics-grid{grid-template-columns:1fr}}
@media (max-width:640px){.container{width:min(100% - 26px,1180px)}.topbar{height:70px}.hero{padding:48px 0 28px}.hero h1{font-size:40px}.hero-copy{font-size:14px}.overall-banner{margin-top:30px;padding:18px;gap:14px}.overall-icon{width:46px;height:46px;border-radius:13px}.overall-content strong{font-size:15px}.overall-meta{padding-left:60px}.services-grid{grid-template-columns:1fr}.section{padding:28px 0}.section-heading,.panel-heading{align-items:flex-start;flex-direction:column;gap:12px}.auto-refresh{display:none}.panel{padding:18px}.chart-wrap{height:210px}.chart-summary{gap:24px}.service-bottom{gap:12px}.footer-inner{flex-direction:column;align-items:flex-start}}

.summary-grid{max-width:980px;margin:14px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.summary-card{padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(8,19,39,.72);text-align:left}
.summary-card span{display:block;color:#7184a2;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.summary-card strong{display:block;margin-top:5px;font-size:23px}.summary-ok strong{color:var(--green)}.summary-warn strong{color:var(--yellow)}.summary-down strong{color:var(--red)}
.server-toolbar{display:flex;align-items:center;gap:18px}.server-toolbar select,.chart-select{appearance:none;border:1px solid var(--border);background:#0b1730;color:#dbe7f7;border-radius:10px;padding:9px 34px 9px 12px;font-size:11px;outline:none}
.checks-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:17px}.check-chip{font-size:9px;color:#8a9ab4;border:1px solid rgba(148,163,184,.12);border-radius:999px;padding:5px 8px;display:inline-flex;align-items:center;gap:5px}.check-chip i{width:6px;height:6px;border-radius:50%;background:#64748b}.check-chip.ok i{background:var(--green);box-shadow:0 0 8px rgba(36,212,134,.5)}.check-chip.fail i{background:var(--red)}.capacity{margin-left:auto;color:#6f819e;font-size:9px}
.uptime-mini{text-align:right;white-space:nowrap}.uptime-mini span{display:block;color:#6f819e;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.uptime-mini strong{font-size:13px}
.legend-list{display:grid;gap:13px}.legend-list>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:14px;border:1px solid rgba(148,163,184,.10);border-radius:13px}.legend-list strong{font-size:12px}.legend-list small{grid-column:2;color:#7184a2;margin-top:3px;font-size:10px;line-height:1.5}.legend-dot{width:10px;height:10px;border-radius:50%;margin-top:3px}.legend-dot.operational{background:var(--green)}.legend-dot.degraded{background:var(--yellow)}.legend-dot.down{background:var(--red)}
.empty-state{grid-column:1/-1;padding:34px;text-align:center;color:#7487a5;border:1px dashed var(--border);border-radius:16px}
@media(max-width:820px){.summary-grid{grid-template-columns:repeat(2,1fr)}.server-toolbar{width:100%;justify-content:space-between}}
@media(max-width:640px){.summary-grid{grid-template-columns:repeat(2,1fr)}.server-toolbar{align-items:stretch;flex-direction:column}.server-toolbar select,.chart-select{width:100%}.capacity{width:100%;margin-left:0}}