:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
body { margin: 0; background: #0b1020; color: #e8edf7; }
a { color: #8ec5ff; }
header { background: #121a30; border-bottom: 1px solid #2c3856; }
nav, main { max-width: 1180px; margin: auto; padding: 1rem; }
nav { display: flex; align-items: center; gap: 1rem; }
nav .brand { font-weight: 750; color: #fff; text-decoration: none; margin-right: auto; }
button, .button { border: 0; border-radius: .45rem; padding: .62rem .9rem; color: #fff;
    background: #2774d8; cursor: pointer; font: inherit; text-decoration: none; display: inline-block; }
button.secondary, .button.secondary { background: #33415f; }
button.danger { background: #b53b45; }
input, textarea, select { width: 100%; box-sizing: border-box; border-radius: .4rem;
    border: 1px solid #42506d; background: #11192d; color: #fff; padding: .6rem; font: inherit; }
label { display: grid; gap: .35rem; font-weight: 650; }
form.inline { display: inline; }
.filters, .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem; align-items: end; }
.card { background: #121a30; border: 1px solid #2c3856; border-radius: .65rem;
    padding: 1rem; margin-bottom: 1rem; overflow-x: auto; }
.notice { border-left: 4px solid #5ca8ff; padding: .8rem; background: #13233f; margin-bottom: 1rem; }
.error { border-color: #ff6978; background: #371b25; }
.warning { color: #ffd479; }
.muted { color: #a7b1c5; }
.status { display: inline-block; border-radius: 999px; padding: .18rem .5rem; font-size: .82rem;
    background: #2f4261; }
.status.resolved, .positive { color: #73e2a7; }
.status.error, .negative { color: #ff8793; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid #2c3856; padding: .62rem .45rem; white-space: nowrap; }
th { color: #b9c7df; font-size: .86rem; }
.chart-wrap { height: 340px; }
.login { max-width: 430px; margin: 10vh auto; }
.login form { display: grid; gap: 1rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
code { background: #0b1020; padding: .1rem .3rem; border-radius: .25rem; }
@media (max-width: 700px) { nav { flex-wrap: wrap; } th, td { font-size: .85rem; } }