:root {
    color-scheme: dark;
    --color-bg: #07111f;
    --color-bg-raised: #0b1b2f;
    --color-surface: #0f2138;
    --color-surface-strong: #142b47;
    --color-text: #e8f3ff;
    --color-muted: #9ab0c9;
    --color-border: #284766;
    --color-border-strong: #39658f;
    --color-primary: #62b7ff;
    --color-primary-bright: #9bd5ff;
    --color-primary-surface: #123b62;
    --color-primary-contrast: #04101d;
    --color-danger: #ff7b87;
    --color-danger-surface: #522735;
    --color-danger-contrast: #220b12;
    --color-success: #69d6a3;
    --color-warning: #f3c969;
    --color-input-bg: #08182b;
    --color-placeholder: #7189a4;
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-6: 1.5rem; --space-8: 2rem; --radius-sm: .25rem; --radius-md: .5rem;
    --shadow-card: 0 1rem 2rem rgb(0 0 0 / 24%);
    --focus-ring: 0 0 0 3px rgb(98 183 255 / 38%);
    --z-notification: 5; --z-skip-link: 10;
}
* { box-sizing: border-box; }
body {
    min-height: 100vh; margin: 0;
    background: radial-gradient(circle at 15% 0%, #12365a 0, transparent 34rem), var(--color-bg);
    color: var(--color-text); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--color-primary); } a:hover { color: var(--color-primary-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
button, input, select, textarea { font: inherit; } button { min-height: 2.75rem; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: var(--z-skip-link); padding: var(--space-2) var(--space-4); background: var(--color-surface-strong); color: var(--color-text); }
.skip-link:focus { top: var(--space-2); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: rgb(7 17 31 / 88%); border-bottom: 1px solid var(--color-border); box-shadow: 0 4px 20px rgb(0 0 0 / 18%); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-weight: 800; letter-spacing: .02em; text-decoration: none; }
.frost-mark { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--color-primary); background: linear-gradient(145deg, #1d5685, #0b2039); color: var(--color-primary-bright); clip-path: polygon(50% 0, 90% 20%, 90% 72%, 50% 100%, 10% 72%, 10% 20%); font-size: 1.15rem; text-shadow: 0 0 10px rgb(155 213 255 / 65%); }
.nav-toggle { margin-left: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); padding: 0 var(--space-3); }
.primary-navigation { display: none; width: 100%; gap: var(--space-2); flex-direction: column; }
.primary-navigation.is-open { display: flex; }
.primary-navigation a { position: relative; padding: var(--space-2) var(--space-3) var(--space-2) 2rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-muted); text-decoration: none; }
.primary-navigation a::before { position: absolute; left: .7rem; color: var(--color-primary); content: "◆"; font-size: .55rem; }
.primary-navigation a:hover, .primary-navigation a[aria-current="page"] { border-color: var(--color-border-strong); background: var(--color-primary-surface); color: var(--color-text); }
.primary-navigation a[aria-current="page"] { font-weight: 700; }
.page-shell { width: min(100% - 2 * var(--space-4), 72rem); margin: 0 auto; padding: var(--space-6) 0 var(--space-8); }
.page-header { margin-bottom: var(--space-6); } .eyebrow { margin: 0; color: var(--color-primary); font-size: .875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: var(--space-2) 0; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; } .page-description { max-width: 60ch; margin: 0; color: var(--color-muted); }
.card, .empty-state, .error-state { position: relative; overflow: hidden; padding: var(--space-6); background: linear-gradient(145deg, rgb(20 43 71 / 92%), rgb(10 27 47 / 92%)); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.card::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); content: ""; }
.card h2 { margin-top: 0; color: var(--color-primary-bright); } .empty-state, .error-state { text-align: center; } .error-state { border-color: var(--color-danger-surface); }
form { display: grid; gap: var(--space-3); } label { color: var(--color-muted); font-size: .9rem; font-weight: 650; }
fieldset { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
legend { padding: 0 var(--space-2); color: var(--color-primary); font-weight: 800; letter-spacing: .04em; }
input, select, textarea { width: 100%; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-input-bg); color: var(--color-text); }
input::placeholder, textarea::placeholder { color: var(--color-placeholder); } .field-help, .setup-intro { margin: 0; color: var(--color-muted); font-size: .9rem; }
form button[type="submit"], .button-primary { min-height: 2.9rem; margin-top: var(--space-3); padding: 0 var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 800; }
form button[type="submit"]:hover, .button-primary:hover { background: var(--color-primary-bright); }
.notification-region { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-notification); max-width: min(28rem, calc(100% - 2 * var(--space-4))); }
.notification { padding: var(--space-3) var(--space-4); margin-top: var(--space-2); background: var(--color-surface-strong); border: 1px solid var(--color-border); border-left: .25rem solid var(--color-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.notification.is-error { border-left-color: var(--color-danger); } .notification.is-success { border-left-color: var(--color-success); } .notification.is-warning { border-left-color: var(--color-warning); }
.notification__dismiss { min-height: 2rem; margin-left: var(--space-2); border: 0; background: transparent; color: inherit; cursor: pointer; }
.loading-state { padding: var(--space-6); color: var(--color-muted); text-align: center; } .loading-state[hidden], .empty-state[hidden], .error-state[hidden] { display: none; }
.page-content[aria-busy="true"] { cursor: progress; } .summary-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.summary-grid div { padding: var(--space-4); background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.summary-grid dt { color: var(--color-muted); font-size: .875rem; } .summary-grid dd { margin: 0; color: var(--color-primary-bright); font-size: 1.5rem; font-weight: 800; }
.table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; } th { color: var(--color-primary-bright); font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; }
.button-link { display: inline-block; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); text-decoration: none; }
.login-card { width: min(100%, 34rem); margin: min(16vh, 8rem) auto; } .login-card .button-primary { display: inline-block; margin-top: var(--space-6); text-decoration: none; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); } .pagination a[data-disabled="true"] { color: var(--color-muted); pointer-events: none; opacity: .55; }
.button-danger { min-height: 2.75rem; padding: 0 var(--space-4); border: 1px solid var(--color-danger); border-radius: var(--radius-sm); background: var(--color-danger); color: var(--color-danger-contrast); font-weight: 700; }
@media (min-width: 48rem) { .site-header { padding-inline: max(var(--space-4), calc((100% - 72rem) / 2)); } .nav-toggle { display: none; } .primary-navigation { display: flex; width: auto; margin-left: auto; flex-direction: row; } }
@media (max-width: 47.99rem) { .table-scroll table, .table-scroll thead, .table-scroll tbody, .table-scroll tr, .table-scroll th, .table-scroll td { display: block; } .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .table-scroll tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } .table-scroll td { display: grid; grid-template-columns: minmax(7rem, 35%) 1fr; gap: var(--space-2); border: 0; padding: var(--space-1) var(--space-3); } .table-scroll td::before { color: var(--color-muted); content: attr(data-label); font-weight: 600; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }