:root {
    color-scheme: dark;
    --bg: #0b0d12;
    --panel: #15181f;
    --panel-2: #1c2029;
    --fg: #eef1f6;
    --muted: #9aa3b2;
    --line: #262b35;
    --red: #e23b3b;
    --amber: #f0a92b;
    --green: #3fb37f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 1rem; }

/* masthead */
.masthead { padding: 1.5rem 0 1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(11,13,18,.92); backdrop-filter: blur(8px); z-index: 5; }
.masthead h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }
.masthead h1 span { color: var(--muted); font-weight: 500; }
.lede { margin: .35rem 0 .75rem; color: var(--muted); }
.lede strong { color: var(--fg); }

.meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
#updated { margin-right: auto; }

.btn {
    appearance: none; border: 1px solid var(--line); background: var(--panel-2);
    color: var(--fg); border-radius: 999px; padding: .4rem .85rem; font-size: .85rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.btn:hover { border-color: #3a4150; }
.btn:disabled { opacity: .5; cursor: default; }
.btn--bell-on { border-color: var(--green); color: var(--green); }

.spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* alert list */
main { padding: 1rem 0 3rem; }
.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }

.alert {
    background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted);
    border-radius: 12px; padding: .85rem 1rem;
}
/* severity-driven accent (urgency) */
.alert.sev--high   { border-left-color: var(--red); }
.alert.sev--medium { border-left-color: var(--amber); }
.alert.sev--low    { border-left-color: var(--green); }
.alert.sev--closed { border-left-color: var(--muted); opacity: .68; }

.alert__top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.alert__type { font-weight: 600; }

.prio { font-weight: 700; font-size: .78rem; padding: .1rem .45rem; border-radius: 6px; background: var(--panel-2); color: var(--fg); }
.prio.sev--high   { background: var(--red); color: #fff; }
.prio.sev--medium { background: var(--amber); color: #1a1205; }
.prio.sev--low    { background: var(--panel-2); color: var(--muted); }

.tag { margin-left: auto; font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem; }
.tag--live { color: var(--green); border-color: rgba(63,179,127,.4); }
.tag--cancel { color: var(--amber); border-color: rgba(240,169,43,.4); }

.alert__where { margin-top: .4rem; font-size: 1.02rem; }
.alert__urg { color: var(--muted); font-size: .82rem; margin-top: .15rem; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip { font-size: .76rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; }

.alert__raw { margin-top: .55rem; }
.alert__raw summary { font-size: .76rem; color: var(--muted); cursor: pointer; }
.alert__raw code { display: block; margin-top: .4rem; font-size: .78rem; color: var(--muted); background: var(--panel-2); border-radius: 8px; padding: .45rem .6rem; word-break: break-word; }

.alert__foot { display: flex; gap: .5rem; align-items: center; margin-top: .55rem; font-size: .76rem; color: var(--muted); }
.alert__foot .match { margin-left: auto; color: var(--fg); background: var(--panel-2); border-radius: 6px; padding: .05rem .4rem; }

/* empty / error */
.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.empty .hint { font-size: .85rem; }
.empty a, .foot a { color: var(--fg); }

/* skeleton */
.skeleton .alert--skel { height: 96px; border-left-color: var(--line); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: .75; } }

/* footer */
.foot { color: var(--muted); font-size: .8rem; padding: 1.5rem 1rem 2.5rem; text-align: center; }