:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 85%; }
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; }
.dashboard-table th, .dashboard-table td { padding: .42rem .32rem; font-size: .87rem; }
.dashboard-table th { position: relative; font-size: .85rem; letter-spacing: .015em; }
.dashboard-table[data-resizable].is-enhanced { table-layout: fixed; }
.dashboard-table[data-resizable].is-enhanced td { overflow: hidden; text-overflow: ellipsis; }
.sort-button { display: inline-flex; align-items: center; gap: .28rem; width: calc(100% - .5rem);
    min-width: 0; padding: .2rem .1rem; border-radius: .25rem; background: transparent;
    color: inherit; font-weight: 700; text-align: left; white-space: nowrap; }
.sort-button:hover, .sort-button:focus-visible { background: #243250; }
.sort-indicator { width: .75rem; color: #8ec5ff; flex: 0 0 auto; }
th[aria-sort="ascending"] .sort-indicator::before { content: "▲"; }
th[aria-sort="descending"] .sort-indicator::before { content: "▼"; }
.column-resizer { position: absolute; z-index: 2; top: .18rem; right: -.22rem; bottom: .18rem;
    width: .55rem; cursor: col-resize; touch-action: none; border-radius: .2rem; }
.column-resizer::after { content: ""; position: absolute; top: 15%; bottom: 15%; left: calc(50% - 1px);
    width: 2px; background: #42506d; opacity: .65; }
.column-resizer:hover::after, .column-resizer:focus-visible::after,
.column-resizer.is-resizing::after { background: #8ec5ff; opacity: 1; }
.column-resizer:focus-visible { outline: 2px solid #8ec5ff; outline-offset: -2px; }
body.is-resizing-columns { cursor: col-resize; user-select: none; }
.enrollment-meter { display: grid; grid-template-columns: minmax(7rem, 10rem) auto;
    gap: .55rem; align-items: center; }
.enrollment-meter progress { appearance: none; -webkit-appearance: none; width: 100%; height: .75rem;
    overflow: hidden; border: 1px solid var(--meter-color); border-radius: 0; background: transparent;
    accent-color: var(--meter-fill); }
.enrollment-meter progress::-webkit-progress-bar { background: transparent; border-radius: 0; }
.enrollment-meter progress::-webkit-progress-value { background: var(--meter-fill); border-radius: 0; }
.enrollment-meter progress::-moz-progress-bar { background: var(--meter-fill); border-radius: 0; }
.enrollment-meter--red { --meter-color: #ef5965; --meter-fill: rgba(239, 89, 101, .5); }
.enrollment-meter--orange { --meter-color: #f28c3c; --meter-fill: rgba(242, 140, 60, .5); }
.enrollment-meter--yellow { --meter-color: #e3ba45; --meter-fill: rgba(227, 186, 69, .5); }
.enrollment-meter--green { --meter-color: #38c77a; --meter-fill: rgba(56, 199, 122, .5); }
.enrollment-meter span { min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.enrollment-sparkline { display: block; width: 9rem; height: 2.35rem; }
.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: .82rem; }
    .dashboard-table th, .dashboard-table td { font-size: .82rem; }
}