:root {color-scheme:dark;--background:#10121b;--surface:#181c29;--border:#2c3143;--text:#f6f0f2;--muted:#aeb5c7;--accent:#fac6a5;font:16px/1.55 system-ui,sans-serif}
* {box-sizing:border-box}
body {margin:0;background:radial-gradient(ellipse 70rem 34rem at 50% -10%,#312138,transparent),var(--background);min-height:100vh;color:var(--text)}
[hidden] {display:none!important}
a {color:var(--accent);text-decoration:none}
a:hover {text-decoration:underline}
header,main,footer {max-width:68rem;margin:auto;padding:1.35rem clamp(1rem,4vw,3rem)}
header,footer {display:flex;align-items:center;justify-content:space-between;gap:1rem}
header {border-bottom:1px solid var(--border)}
.brand {display:flex;align-items:center;gap:.75rem;font-weight:750;color:var(--text)}
.brand img {width:2.55rem;height:2.55rem;border-radius:.75rem}
.brand small {display:block;font-weight:500;color:var(--muted)}
.dashboard-link,button {font:inherit;font-size:.88rem;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:.65rem;padding:.55rem .9rem}
button {cursor:pointer}
button:disabled {opacity:.6}
main {padding-top:clamp(2rem,7vw,5.3rem)}
.intro {max-width:44rem;margin-bottom:2rem}
h1 {font-size:clamp(2.35rem,8vw,4.9rem);line-height:1.02;letter-spacing:-.065em;margin:.25em 0 .25em;overflow-wrap:anywhere}
h2 {font-size:clamp(1.15rem,3vw,1.45rem);letter-spacing:-.025em;margin:0}
h3 {font-size:1rem;margin:0;overflow-wrap:anywhere}
p {margin:.5rem 0;color:var(--muted);overflow-wrap:anywhere}
.eyebrow {font-size:.72rem;letter-spacing:.22em;font-weight:750;color:var(--accent)}
.summary {--state:#b2b9ce;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--state);border-radius:1rem;padding:1rem 1.15rem}
.summary strong {color:var(--state);font-size:clamp(1rem,3vw,1.2rem)}
.summary small,.components small {display:block;color:var(--muted)}
.signal {width:.7rem;height:.7rem;border-radius:50%;background:var(--state);box-shadow:0 0 0 .32rem color-mix(in srgb,var(--state) 18%,transparent);margin:.3rem}
[data-state=operational] {--state:#a0ebbc}
[data-state=degraded],[data-state=fallback] {--state:#ffcf8d}
[data-state=offline] {--state:#ffacb5}
[data-state=maintenance] {--state:#bfc9ff}
.notice {background:#302338;border:1px solid #614363;border-radius:.8rem;padding:.9rem 1rem;color:#f9dcf4;white-space:pre-wrap}
section+section,.notice+section {margin-top:2rem}
.section-heading {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem;margin-bottom:.7rem}
.section-heading span,.metrics,footer {color:var(--muted);font-size:.84rem}
.components {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.65rem}
.components article,.incident,.empty {background:var(--surface);border:1px solid var(--border);border-radius:.85rem;padding:1rem}
.components p {display:inline-flex;align-items:center;gap:.35rem;color:var(--state,var(--muted));font-weight:700;font-size:.85rem}
.components p::before {content:'';width:.45rem;height:.45rem;background:currentColor;border-radius:50%}
.metrics {display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.6rem}
.incident-list {display:grid;gap:.65rem}
.incident summary {cursor:pointer}
.incident summary::marker {color:var(--accent)}
.incident-title {font-weight:750;overflow-wrap:anywhere}
.badge {display:inline-block;margin:.2rem .45rem .2rem 0;padding:.12rem .47rem;border:1px solid var(--border);border-radius:2rem;color:var(--state,var(--accent));font-size:.74rem;font-weight:650}
.incident p,.timeline p {white-space:pre-wrap}
.incident-meta,time {color:var(--muted);font-size:.83rem}
.timeline {list-style:none;border-left:1px solid var(--border);padding-left:1rem;margin:1rem 0 .15rem}
.timeline li {margin-bottom:.8rem}
.empty {color:var(--muted)}
footer {border-top:1px solid var(--border);margin-top:2rem}
@media(max-width:420px) {.summary {grid-template-columns:auto 1fr}.summary button {grid-column:2;justify-self:start}}
@media(prefers-reduced-motion:no-preference) {.intro {animation:arrive .35s ease-out}@keyframes arrive {from {opacity:.35;transform:translateY(6px)}to {opacity:1;transform:none}}}
.header-actions,.editor-actions {display:flex;flex-wrap:wrap;gap:.55rem;justify-content:flex-end}
#status-edit-toggle,.editor-actions .primary {background:#fac6a5;color:#251a21;border-color:#fac6a5;font-weight:750}
#status-editor {width:min(37rem,calc(100% - 1rem));max-height:calc(100% - 1rem);margin:auto .5rem auto auto;padding:clamp(1rem,4vw,1.7rem);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:1rem}
#status-editor::backdrop {background:#080a13ba}
.editor-heading {display:flex;align-items:center;justify-content:space-between;gap:.5rem}
#status-editor details {padding:.8rem;margin:.7rem 0;border:1px solid var(--border);border-radius:.65rem}
#status-editor summary {cursor:pointer;font-weight:700}
#status-editor label.setting-field {display:grid;gap:.25rem;margin:.7rem 0;font-size:.88rem}
#status-editor input:not([type=checkbox]),#status-editor select,#status-editor textarea {width:100%;min-width:0;padding:.55rem;background:#10121b;color:var(--text);border:1px solid var(--border);border-radius:.45rem;font:inherit}
#status-editor fieldset {border:1px solid var(--border);border-radius:.45rem;display:flex;flex-wrap:wrap;gap:.65rem;font-size:.88rem}
#status-editor fieldset label {display:flex;align-items:center;gap:.25rem}
#status-editor .muted {color:var(--muted)}
#incident-delete {border-color:#835362;color:#ffbdc6}
#status-feedback:not(:empty) {position:fixed;bottom:.8rem;left:.8rem;max-width:calc(100% - 1.6rem);padding:.6rem .8rem;border:1px solid var(--border);background:var(--surface);border-radius:.6rem}
@media(prefers-reduced-motion:no-preference) {#status-editor[open] {animation:arrive .24s ease-out}}
.uptime-panel {background:var(--surface);border:1px solid var(--border);border-radius:.85rem;padding:1rem}
.uptime-chart {display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:clamp(.12rem,1vw,.55rem)}
.uptime-column {display:grid;gap:.3rem;text-align:center;color:var(--muted);min-width:0}
.uptime-column meter {width:100%;height:1.7rem;accent-color:#a0ebbc}
.uptime-column.missing meter {opacity:.35}
.uptime-column small {font-size:.65rem}