:root {
    color-scheme:dark;
    --bg:#0b0f14;
    --panel:#121923;
    --line:#253143;
    --text:#edf3fa;
    --muted:#8fa0b5;
    --good:#37d67a;
    --bad:#ff5d68;
    --accent:#7aa2ff
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:radial-gradient(circle at top,#162131 0,#0b0f14 45%);
    font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;
    color:var(--text)
}

.wrap {
    max-width:1500px;
    margin:auto;
    padding:40px 22px
}

header {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:center;
    margin-bottom:28px
}

.eyebrow {
    color:var(--accent);
    font-weight:800;
    letter-spacing:.18em
}

h1 {
    font-size:clamp(28px,5vw,46px);
    margin:3px 0
}

header p,small,footer {
    color:var(--muted)
}

.pill,.state {
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 14px;
    font-weight:800;
    white-space:nowrap
}

.pill.ok,.good .state {
    color:var(--good);
    border-color:#245f40;
    background:#10251a
}

.pill.alert,.bad .state {
    color:var(--bad);
    border-color:#71313a;
    background:#2a1216
}

.pill.neutral {
    color:var(--muted)
}

main {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:18px
}

.card {
    background:rgba(18,25,35,.92);
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    box-shadow:0 18px 45px rgba(0,0,0,.18)
}

.card.good {
    border-top:3px solid var(--good)
}

.card.bad {
    border-top:3px solid var(--bad)
}

.cardhead {
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start
}

.card h2 {
    margin:0;
    font-size:21px
}

.state {
    font-size:12px;
    padding:5px 9px
}

.grid {
    margin-top:18px
}

.row {
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:10px 0;
    border-top:1px solid var(--line)
}

.row span {
    color:var(--muted)
}

.row strong {
    text-align:right
}

.yes {
    color:var(--good)
}

.no {
    color:var(--bad)
}

.error {
    margin-top:12px;
    padding:10px;
    border-radius:10px;
    background:#2a1216;
    color:#ffabb1
}

.history {
    margin-top:28px;
    background:rgba(18,25,35,.75);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px
}

.history h2 {
    margin-top:0
}

.incident {
    padding:9px 0;
    border-top:1px solid var(--line);
    color:#ffabb1
}

.quiet {
    color:var(--muted)
}

footer {
    padding:24px 2px
}

.empty {
    color:var(--muted)
}

@media(max-width:650px) {
    header {
        align-items:flex-start;
        flex-direction:column
    }

    .wrap {
        padding:24px 14px
    }

    .row {
        font-size:14px
    }

}

.uptimegrid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px
}

.uptimecard {
    border:1px solid var(--line);
    border-radius:14px;
    padding:15px;
    background:rgba(11,15,20,.35)
}

.uptimecard>strong {
    display:block;
    font-size:17px;
    margin-bottom:8px
}

.uptimecard>div {
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    color:var(--muted)
}

.uptimecard b {
    color:var(--text)
}

.incidentmeta {
    color:var(--muted);
    font-size:14px;
    margin-top:3px
}

.uptimegrid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}

.uptimecard {
    background:rgba(18,25,35,.92);
    border:1px solid var(--line);
    border-top:3px solid var(--accent);
    border-radius:18px;
    padding:20px;
    min-width:0
}

.uptimecard>strong {
    font-size:21px;
    margin-bottom:14px;
    color:var(--text)
}

.uptimecard>div {
    border-top:1px solid var(--line);
    padding:10px 0;
    gap:12px
}

.uptimecard>div span {
    color:var(--muted)
}

.uptimecard b {
    text-align:right;
    font-size:16px
}

@media(max-width:900px) {
    .uptimegrid {
        grid-template-columns:1fr
    }

}

#origin {
    margin-bottom:16px
}

.origincard {
    background:rgba(18,25,35,.92);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px
}

.origincard.good {
    border-top:3px solid var(--good)
}

.origincard.bad {
    border-top:3px solid var(--bad)
}

.origincard h2 {
    margin:0;
    font-size:21px
}

.domainlink {
    color:inherit;
    text-decoration:none
}

.domainlink:hover {
    text-decoration:underline;
    text-underline-offset:3px
}

.pill.warn {
    color:#ffd36a;
    border-color:#705d2b;
    background:#2b2411
}

.sectionnote {
    color:var(--muted);
    margin-top:-8px;
    margin-bottom:18px
}

.performancegrid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}

.performancecard {
    background:rgba(18,25,35,.92);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    min-width:0
}

.perfhead {
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    margin-bottom:10px
}

.perfhead>strong {
    font-size:19px
}

.perfhead>span {
    color:var(--muted)
}

.spark {
    display:block;
    width:100%;
    height:105px;
    margin:8px 0 4px
}

.spark polyline {
    fill:none;
    stroke:var(--accent);
    stroke-width:2;
    vector-effect:non-scaling-stroke
}

.nospark {
    height:105px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.perfstats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    border-top:1px solid var(--line);
    padding-top:10px;
    color:var(--muted)
}

.perfstats span {
    text-align:center
}

.perfstats b {
    display:block;
    color:var(--text)
}

.incidenttag {
    display:inline-block;
    font-size:11px;
    font-weight:800;
    border:1px solid currentColor;
    border-radius:999px;
    padding:2px 7px;
    margin-right:4px
}

.dnsincident {
    color:#ffd36a
}

.webincident {
    color:#ffabb1
}

@media(max-width:900px) {
    .performancegrid {
        grid-template-columns:1fr
    }

}