:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b1020; color: #e8eefc; }
* { box-sizing: border-box; }
.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; }
body { margin: 0; background: radial-gradient(circle at top, #172344 0, #0b1020 45%); min-height: 100vh; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; padding: .7rem 1rem; background: #fff; color: #0b1020; border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
header { display: flex; gap: 1rem; align-items: center; padding: 1rem 3vw; border-bottom: 1px solid #2a3659; background: #0b1020e8; position: sticky; top: 0; }
.brand { color: #fff; font-weight: 800; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .8rem; flex: 1; }
nav a, a { color: #8fb4ff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.logout { margin-left: auto; }
main { max-width: 1120px; margin: 0 auto; padding: 2rem 3vw 5rem; }
.metrics, .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.metrics article, .card, .panel, details, .auth-card { padding: 1.2rem; border: 1px solid #2a3659; border-radius: 14px; background: #111a30; }
.metrics strong { display: block; font-size: 2rem; }.metrics span, .card span, .card code { display: block; margin-top: .4rem; color: #a9b6d3; }
.card { text-decoration: none; color: inherit; }.card:hover { border-color: #668fe8; }
.auth-card { max-width: 430px; margin: 8vh auto; }
form { display: grid; gap: .8rem; }label { display: grid; gap: .35rem; }
input, select, textarea, button { width: 100%; padding: .7rem .8rem; border: 1px solid #39476d; border-radius: 8px; background: #0b1020; color: #fff; }
button { cursor: pointer; background: #376fd8; border-color: #376fd8; font-weight: 700; }.logout button { width: auto; }
.danger { background: #7c2634; color: #fff; padding: .65rem .9rem; border-radius: 8px; }.actions { display: flex; gap: .7rem; margin: 1rem 0; }
.flash { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; }.flash.error { background: #5b1d2a; }.flash.success { background: #154b3b; }
table { width: 100%; border-collapse: collapse; }th, td { padding: .75rem; text-align: left; border-bottom: 1px solid #2a3659; vertical-align: top; }
code, pre { font-family: ui-monospace, SFMono-Regular, monospace; }pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: #080d19; border-radius: 8px; }
dl { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: .6rem; }dt { color: #a9b6d3; }
@media (max-width: 720px) { header { align-items: flex-start; flex-wrap: wrap; } nav { order: 3; width: 100%; } main { padding-inline: 1rem; } .actions { align-items: stretch; flex-direction: column; } table { display: block; max-width: 100%; overflow-x: auto; } th, td { min-width: 8rem; } input, select, textarea, button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }