:root{color-scheme:dark;--bg:#10171c;--panel:#172127;--panel-2:#1b282e;--line:#2a3940;--text:#eef5f4;--muted:#94a7aa;--green:#69d6a5;--yellow:#f3c969;--red:#ff777d;--blue:#7cafe8;--teal:#66d5c8;--purple:#b5a4f2;--shadow:0 14px 40px #06101455}
*{box-sizing:border-box}
html{min-width:320px;background:var(--bg)}
body{margin:0;background:radial-gradient(ellipse at 20% -20%,#1d3938 0,transparent 48%),var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;min-height:100vh}
h1,h2,p{margin:0}h1,h2{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.035em}h1{font-size:clamp(1.7rem,4vw,2.25rem);line-height:1.15}h2{font-size:1.23rem;line-height:1.3}
.page-shell{max-width:1080px;padding:28px 26px 36px;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:-.02em;font-size:16px}.brand-mark{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#87e2bd,#3eaa91);color:#09221d;font:800 19px system-ui}.muted,.subtle{color:var(--muted)}.live-label{font-size:12px;color:#b8c7c7;display:flex;gap:8px;align-items:center}.live-dot,.badge-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #69d6a51a}.card{background:linear-gradient(145deg,#19262c,#162127);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.hero{padding:31px 34px;display:flex;justify-content:space-between;align-items:center;gap:24px}.eyebrow{font-size:10px;line-height:1.2;letter-spacing:.14em;font-weight:700;color:#7f999c;margin-bottom:9px}.overall-message{font-size:15px;font-weight:600;margin-top:10px}.subtle{font-size:12px;margin-top:5px}.overall-badge{white-space:nowrap;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:700;background:#69d6a516;color:var(--green);border:1px solid #69d6a538}.overall-badge .badge-dot{background:currentColor;box-shadow:none}.state-degraded.overall-badge{background:#f3c96917;border-color:#f3c96944;color:var(--yellow)}.state-offline.overall-badge{background:#ff777d17;border-color:#ff777d44;color:var(--red)}.state-unknown.overall-badge{background:#94a7aa17;border-color:#94a7aa44;color:#b4c1c1}
.services-section{margin:30px 0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}.section-heading .eyebrow{margin-bottom:5px}.service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.service-card{min-height:123px;padding:17px 15px;background:#172127cc;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}.service-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.service-name{font-size:12px;line-height:1.4;font-weight:600;max-width:125px}.service-orb{width:13px;height:13px;flex:none;border-radius:50%;background:var(--muted);box-shadow:0 0 0 5px #94a7aa16}.service-card[data-state=online] .service-orb{background:var(--green);box-shadow:0 0 0 5px #69d6a51a}.service-card[data-state=degraded] .service-orb{background:var(--yellow);box-shadow:0 0 0 5px #f3c9691a}.service-card[data-state=offline] .service-orb{background:var(--red);box-shadow:0 0 0 5px #ff777d1a}.service-state{font-size:11px;font-weight:600;color:var(--muted)}.service-card[data-state=online] .service-state{color:var(--green)}.service-card[data-state=degraded] .service-state{color:var(--yellow)}.service-card[data-state=offline] .service-state{color:var(--red)}
.service-card[data-state=unknown] .service-orb{background:var(--yellow);box-shadow:0 0 0 5px #f3c9691a}.service-card[data-state=unknown] .service-state{color:var(--yellow)}
.incidents-card,.traffic-card{padding:25px 27px;margin-top:18px}.count-pill{background:#223137;color:#a9babb;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:600}.incident-list{display:grid;gap:9px}.incident{border:1px solid var(--line);background:#111a1f7a;border-radius:12px;overflow:hidden}.incident summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:15px}.incident summary::-webkit-details-marker{display:none}.incident-summary-main{display:flex;align-items:center;gap:10px;min-width:0}.incident-chevron{color:#82979a;transition:transform .15s}.incident[open] .incident-chevron{transform:rotate(90deg)}.incident-title{font-size:12px;font-weight:700}.incident-date{font-size:11px;color:var(--muted);white-space:nowrap}.incident-status{font-size:9px;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:4px 7px;background:#ff777d18;color:var(--red);font-weight:700}.incident.resolved .incident-status{background:#69d6a518;color:var(--green)}.incident-updates{border-top:1px solid #2a394080;padding:4px 15px 12px}.incident-update{padding:10px 0 4px;display:grid;grid-template-columns:12px 1fr auto;align-items:start;gap:9px}.update-mark{width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--yellow)}.incident-update.recovery .update-mark{background:var(--green)}.update-body{font-size:11px;color:#c7d2d1}.update-service{font-size:10px;color:#819598;margin-top:3px}.update-time{font-size:10px;color:var(--muted);white-space:nowrap}.empty-state{padding:17px 5px;color:var(--muted);font-size:12px}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:15px}.pagination button{border:1px solid var(--line);background:#1a262c;color:#d8e2e1;border-radius:8px;padding:6px 10px;font:600 11px system-ui,sans-serif;cursor:pointer}.pagination button:disabled{opacity:.4;cursor:default}.page-indicator{font-size:10px;color:var(--muted)}
.traffic-card{margin-top:18px}.traffic-heading{align-items:flex-end}.traffic-meta{display:flex;gap:8px;align-items:center;color:#b9c7c6;font-size:11px;padding-bottom:2px;flex-wrap:wrap;justify-content:flex-end}.meta-separator{color:#617477}.latency{font-size:inherit;font-weight:500;color:var(--green)}.latency.yellow{color:var(--yellow)}.latency.red{color:var(--red)}.traffic-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-top:16px}.traffic-tab{position:relative;padding:10px 13px 11px;border:0;background:none;color:#84999c;font:600 11px system-ui,sans-serif;cursor:pointer}.traffic-tab.active{color:var(--text)}.traffic-tab.active:after{content:"";position:absolute;height:2px;bottom:-1px;left:11px;right:11px;background:#6ed7b1;border-radius:3px}.legend{display:flex;gap:19px;align-items:center;margin:15px 0 7px}.legend-item{display:flex;align-items:center;gap:7px;color:#afc0c0;font-size:10px}.legend-swatch{width:14px;height:2px;border-radius:3px}.chart-wrap{height:250px;position:relative}.chart-wrap canvas{width:100%;height:100%;display:block}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;padding:20px}.chart-empty[hidden]{display:none}.chart-note{font-size:10px;color:#7d9295;margin-top:7px}.footer{display:flex;justify-content:space-between;gap:16px;padding:21px 2px 0;color:#708588;font-size:10px}
@media(max-width:850px){.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-card{min-height:105px}.page-shell{padding-inline:20px}}
@media(max-width:560px){.page-shell{padding:18px 14px 27px}.topbar{margin-bottom:20px}.hero{padding:23px 21px;align-items:flex-start;flex-direction:column;gap:18px}.overall-badge{align-self:flex-start}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.service-card{min-height:98px;padding:14px 12px}.incidents-card,.traffic-card{padding:20px 16px}.traffic-heading{align-items:flex-start;flex-direction:column;gap:9px}.traffic-meta{justify-content:flex-start;font-size:10px}.chart-wrap{height:220px}.incident summary{padding:12px 11px;gap:9px}.incident-date{font-size:10px}.incident-updates{padding-inline:11px}.incident-update{grid-template-columns:10px 1fr}.update-time{grid-column:2}.legend{gap:13px;flex-wrap:wrap}.footer{flex-direction:column;gap:5px}}