:root {
    color-scheme: dark;
    --bg: #070b11;
    --panel: #101720;
    --panel-soft: #0c121a;
    --border: #263447;
    --text: #f5f8fc;
    --muted: #91a2b8;
    --blue: #65a9ff;
    --green: #16e889;
    --green-soft: #69dba5;
    --amber-soft: #dbc56f;
    --amber: #ffad42;
    --red: #ff5c6c;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 12% -10%,rgba(43,118,194,.2),transparent 34rem),var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body.brand-nodali { --green:#42d392; --green-soft:#78d9b2; background:radial-gradient(circle at 12% -10%,rgba(35,148,134,.18),transparent 34rem),var(--bg); }
a { color:inherit; }
button { font:inherit; }
.status-shell { width:min(1020px,calc(100% - 32px)); margin:auto; padding:30px 0 40px; }
.status-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.brand { display:flex; align-items:center; gap:11px; font-size:20px; font-weight:750; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; overflow:hidden; border:1px solid rgb(190, 100, 38); border-radius:10px; color:var(--amber-soft); background: rgb(48, 23, 9); }
.brand-mark img { width:31px; height:31px; object-fit:contain; }
.brand-nodali .brand-mark { color:var(--green); border-color:color-mix(in srgb,var(--green) 45%,transparent); background:color-mix(in srgb,var(--green) 10%,transparent); }
.brand-nodali .brand-mark img { width:34px; height:34px; }
.updated { color:var(--muted); font-size:12px; text-align:right; }
.updated time { display:block; margin-top:3px; color:#d8e4f3; font-family:ui-monospace,monospace; }
.overall { min-height:108px; padding:23px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(135deg,rgba(17,24,34,.96),rgba(12,18,26,.94)); box-shadow:0 18px 55px rgba(0,0,0,.18); }
.overall-summary { display:flex; align-items:center; gap:18px; }
.overall-icon { flex:0 0 auto; width:19px; height:19px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 7px rgba(255,173,66,.11); }
.overall p,.section-title p { margin:0 0 5px; color:var(--blue); font:700 9px/1.2 ui-monospace,monospace; letter-spacing:.16em; }
.overall h1 { margin:0; font-size:clamp(22px,4vw,32px); letter-spacing:-.035em; }
.overall-summary > div:not(.overall-sla) > span { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.overall-sla { margin-left:auto; padding-left:24px; border-left:1px solid var(--border); text-align:right; }
.overall-sla span { display:block; margin:0 0 7px; color:var(--blue); font:700 9px/1.2 ui-monospace,monospace; letter-spacing:.13em; }
.overall-sla strong { color:var(--green); font:800 clamp(22px,3vw,30px)/1 ui-monospace,monospace; letter-spacing:-.04em; white-space:nowrap; }
.overall-history { margin-top:20px; padding-top:15px; border-top:1px solid var(--border); }
.overall-history .uptime-row { margin-top:0; }
.overall.status-operational { border-color:color-mix(in srgb,var(--green) 38%,transparent); }
.overall.status-operational .overall-icon { background:var(--green); box-shadow:0 0 0 7px color-mix(in srgb,var(--green) 11%,transparent); }
.overall.status-degraded,.overall.status-maintenance { border-color:rgba(240,185,90,.4); }
.overall.status-partial_outage,.overall.status-major_outage { border-color:rgba(255,92,108,.52); background:rgba(54,18,25,.84); }
.overall.status-partial_outage .overall-icon,.overall.status-major_outage .overall-icon { background:var(--red); box-shadow:0 0 0 7px rgba(255,92,108,.11); }
.status-section { margin-top:38px; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:13px; }
.section-title h2 { margin:0; font-size:21px; letter-spacing:-.025em; }
.section-title > span { color:var(--muted); font-size:12px; }
.component-group + .component-group { margin-top:24px; }
.component-group > h3 { margin:0 0 9px 2px; color:#b8c7da; font-size:12px; }
.component-list,.global-events { display:grid; gap:10px; }
.component { overflow:hidden; border:1px solid var(--border); border-radius:13px; background:linear-gradient(145deg,rgba(16,23,32,.96),rgba(12,18,26,.94)); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.component:hover { border-color:#3a4e68; box-shadow:0 12px 30px rgba(0,0,0,.16); }
.component > summary { list-style:none; cursor:pointer; }
.component > summary::-webkit-details-marker { display:none; }
.component-main { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 18px; }
.component-main h4 { margin:0; font-size:15px; }
.component-main p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.component-summary-state { display:flex; align-items:center; gap:14px; }
.component-sla { display:grid; gap:3px; min-width:105px; padding-right:14px; border-right:1px solid var(--border); text-align:right; white-space:nowrap; }
.component-sla small { color:var(--blue); font:700 8px/1.2 ui-monospace,monospace; letter-spacing:.11em; }
.component-sla strong { color:#dce8f6; font:750 11px/1.2 ui-monospace,monospace; }
.state-label { display:inline-flex; align-items:center; gap:7px; color:var(--green); font:700 10px/1 ui-monospace,monospace; white-space:nowrap; text-transform:uppercase; }
.state-label i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.component.status-degraded .state-label,.component.status-maintenance .state-label,.component.status-unknown .state-label { color:var(--amber); }
.component.status-partial_outage .state-label,.component.status-major_outage .state-label { color:var(--red); }
.chevron { width:8px; height:8px; border-right:2px solid #71839b; border-bottom:2px solid #71839b; transform:rotate(45deg); transition:transform .18s ease; }
.component:not([open]) .chevron { transform:rotate(-45deg); }
.component-detail { padding:0 18px 18px; border-top:1px solid transparent; }
.component[open] .component-detail { border-top-color:var(--border); }
.uptime-row { display:flex; justify-content:space-between; gap:15px; margin-top:14px; color:var(--muted); font-size:11px; }
.uptime-row strong { color:#d8e4f3; font-family:ui-monospace,monospace; }
.history-bars { display:flex; align-items:center; gap:3px; height:34px; margin-top:9px; overflow:visible; }
.bar { position:relative; flex:1; min-width:2px; height:25px; padding:0; border:0; border-radius:3px; outline:none; background:var(--green); cursor:help; transform-origin:center; transition:height .14s ease,transform .14s ease,filter .14s ease,box-shadow .14s ease; }
.bar:hover,.bar:focus-visible { z-index:3; height:34px; transform:scaleX(1.18); filter:saturate(1.15) brightness(1.08); box-shadow:0 0 0 2px var(--panel),0 7px 18px rgba(0,0,0,.38); }
.bar.status-not_monitored { background:color-mix(in srgb,var(--green) 70%,#31443d); }
.bar.status-unknown { background:repeating-linear-gradient(135deg,#b6963f 0,#b6963f 4px,#d1b45b 4px,#d1b45b 8px); }
.bar.status-minor_event { background:var(--green-soft); }
.bar.status-degraded,.bar.status-maintenance { background:var(--amber-soft); }
.bar.status-partial_outage { background:var(--amber); }
.bar.status-major_outage { background:var(--red); }
.history-legend { display:flex; justify-content:space-between; margin-top:2px; color:#657286; font-size:9px; }
.history-tooltip { position:fixed; z-index:100; display:grid; gap:3px; min-width:160px; max-width:240px; padding:10px 12px; border:1px solid #3b4b60; border-radius:9px; color:var(--text); background:#0a1017; box-shadow:0 12px 34px rgba(0,0,0,.48); pointer-events:none; opacity:0; transform:translate(-50%,-100%) translateY(-10px); transition:opacity .1s ease; }
.history-tooltip.is-visible { opacity:1; }
.history-tooltip strong { font-size:11px; }
.history-tooltip span { color:var(--muted); font-size:10px; }
.history-tooltip b { color:#dce8f6; font:700 11px/1.3 ui-monospace,monospace; }
.component-events { display:grid; gap:9px; margin-top:18px; padding-top:15px; border-top:1px solid var(--border); }
.event { padding:15px; border:1px solid var(--border); border-radius:10px; background:rgba(8,13,19,.68); }
.event + .event { margin-top:9px; }
.component-events .event + .event { margin-top:0; }
.event.impact-major_outage,.event.impact-partial_outage { border-color:rgba(255,92,108,.42); }
.event.impact-degraded,.maintenance-event { border-color:rgba(240,185,90,.3); }
.event-head { display:flex; align-items:start; justify-content:space-between; gap:15px; }
.event h3,.event h5 { margin:0; font-size:14px; }
.event time { color:#b8c6d8; font:600 12px/1.5 ui-monospace,monospace; white-space:nowrap; text-align:right; }
.event-component { display:inline-block; margin-bottom:6px; padding:4px 7px; border-radius:999px; color:var(--blue); background:rgba(101,169,255,.09); font:700 9px/1 ui-monospace,monospace; text-transform:uppercase; }
.event > p { margin:9px 0 0; color:#b9c7d8; font-size:12px; line-height:1.55; }
.event-update { display:grid; grid-template-columns:90px 1fr auto; gap:10px; margin-top:11px; padding-top:10px; border-top:1px solid var(--border); color:#aebed0; font-size:11px; }
.event-update strong { color:var(--blue); }
.resolved-event { opacity:.78; }
.empty-state { padding:22px; border:1px dashed var(--border); border-radius:12px; color:var(--muted); text-align:center; font-size:13px; }
footer { display:flex; justify-content:space-between; margin-top:38px; color:#627084; font:11px/1.4 ui-monospace,monospace; }
footer a { color:#8293aa; text-decoration:none; }
@media (max-width:640px) {
    .status-shell { width:min(100% - 20px,1020px); padding-top:18px; }
    .status-header,.component-main,.event-head { align-items:flex-start; flex-direction:column; }
    .updated { text-align:left; }
    .overall { padding:18px; }
    .overall-summary { align-items:flex-start; flex-wrap:wrap; }
    .overall-sla { width:100%; margin:8px 0 0; padding:14px 0 0; border-top:1px solid var(--border); border-left:0; text-align:left; }
    .component-summary-state { width:100%; justify-content:space-between; flex-wrap:wrap; }
    .component-sla { min-width:0; padding-right:12px; text-align:left; }
    .state-label { margin-top:3px; }
    .event-update { grid-template-columns:1fr; }
    .history-bars { gap:2px; }
    .section-title > span { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }