:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #07111f; color: #e8f0f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #12365a 0, #07111f 35%); }
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 64px; }
header, .section-heading, .actions, .inline-form { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1, h2, p { margin-top: 0; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 0; } h2 { margin-bottom: 16px; }
.eyebrow { color: #59d7c4; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; margin-bottom: 8px; }
.panel { margin-top: 24px; padding: 24px; border: 1px solid #213a54; border-radius: 18px; background: rgba(9, 25, 42, .88); box-shadow: 0 18px 55px rgba(0, 0, 0, .22); }
.auth-gate { transition: max-width .2s ease, padding .2s ease; }
.auth-gate:not(.authenticated) { max-width: 720px; margin: 72px auto 0; padding: clamp(24px, 5vw, 42px); }
.auth-gate.authenticated { padding: 18px 24px; }
.auth-gate.authenticated h2 { margin-bottom: 10px; font-size: 1.2rem; }
.auth-gate.authenticated .eyebrow { margin-bottom: 4px; }
.dashboard-content { display: none; }
.dashboard-authenticated .dashboard-content { display: block; }
.dashboard-step-label { margin: 28px 6px -12px; color: #9eb2c5; font-size: .82rem; font-weight: 700; }
.dashboard-step-label span { color: #59d7c4; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-nav { position: sticky; top: 12px; z-index: 10; margin-top: 24px; padding: 6px; border: 1px solid #29445f; border-radius: 16px; background: rgba(6, 16, 28, .9); box-shadow: 0 14px 40px rgba(0, 0, 0, .28); backdrop-filter: blur(14px); }
.dashboard-nav-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dashboard-nav-item { display: grid; gap: 2px; min-width: 0; padding: 11px 14px; background: transparent; color: #aebdcb; text-align: left; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.dashboard-nav-item:hover { background: #102a41; color: #eef8f6; }
.dashboard-nav-item[aria-selected="true"] { background: #147d73; color: white; box-shadow: 0 8px 22px rgba(20, 125, 115, .3); }
.dashboard-nav-item:focus-visible { outline: 2px solid #8ff1df; outline-offset: 2px; }
.dashboard-nav-kicker { overflow: hidden; color: #6f9bb3; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; }
.dashboard-nav-item[aria-selected="true"] .dashboard-nav-kicker { color: #bff8ed; }
.dashboard-view[hidden] { display: none; }
.grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
label { display: grid; gap: 8px; margin-bottom: 16px; color: #b8c7d6; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid #31516f; border-radius: 10px; padding: 12px 14px; background: #06101c; color: #f4f8fb; font: inherit; }
textarea { resize: vertical; } input:focus, textarea:focus { outline: 2px solid #59d7c4; border-color: transparent; }
button { border: 0; border-radius: 10px; padding: 11px 16px; color: white; font-weight: 750; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }.primary { background: #147d73; }.secondary { background: #2c4359; }.danger { background: #ad3e55; }
.badge { padding: 8px 12px; border-radius: 999px; background: #283849; color: #b8c7d6; }.badge.active { background: #124d48; color: #8ff1df; }
.message, .empty { color: #9eb2c5; margin: 12px 0 0; }.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #213a54; } th { color: #8ff1df; }
.inline-form { justify-content: flex-start; align-items: end; }.inline-form label { flex: 1; margin: 0; } pre { white-space: pre-wrap; color: #b9e9df; }
code { color: #8ff1df; }
.provisioning-form { margin-top: 8px; }.row-actions { display: flex; gap: 8px; }.row-actions button { padding: 7px 10px; font-size: .8rem; }
.current-user { color: #8ff1df; font-weight: 700; margin-left: auto; }
.configuration-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; }
.configuration-layout h3 { margin: 0 0 16px; }
.configuration-status { padding: 12px 14px; margin: 12px 0 16px; border-radius: 10px; background: #0d2033; color: #b9e9df; white-space: pre-wrap; }
.left-actions { justify-content: flex-start; }
.configuration-device-load { align-items: end; }
details { margin: 12px 0 16px; }
summary { cursor: pointer; color: #8ff1df; font-weight: 700; }
@media (max-width: 900px) { .configuration-layout { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .dashboard-nav-list { display: flex; overflow-x: auto; scrollbar-width: thin; } .dashboard-nav-item { flex: 0 0 auto; min-width: 132px; } }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } header, .section-heading, .inline-form { align-items: stretch; flex-direction: column; } .badge { align-self: flex-start; } }