:root { color-scheme:dark; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { background:#101a25; color:#eaf2fa; font:16px/1.5 system-ui,"Segoe UI",sans-serif; }
[hidden] { display:none!important; }
.topbar { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px clamp(16px,3vw,32px); border-bottom:1px solid #34465a; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700; }
.brand-mark { display:inline-grid; place-items:center; width:42px; height:42px; border:1px solid #587b97; border-radius:11px; background:#1d3448; color:#bce1ff; font-size:14px; letter-spacing:.02em; }
.brand-sub { color:#b7cadb; font-weight:500; }
.version { color:#a6c4d8; font-size:13px; }
.container { width:min(1100px,100%); margin:0 auto; padding:28px clamp(16px,3vw,30px) 50px; }
.page-heading { margin:0 0 24px; }
h1 { margin:0; font-size:clamp(24px,3vw,31px); line-height:1.2; }
h2 { margin:0 0 13px; font-size:23px; }
h3 { margin:0 0 13px; font-size:19px; }
p { margin:9px 0 16px; }
.panel { margin:0 0 18px; padding:clamp(20px,3vw,30px); background:#1c2a3a; border:1px solid #344b60; border-radius:14px; }
.narrow { max-width:660px; }
.subtle { color:#b7c9d7; }
.small { font-size:13px; }
label { display:block; color:#c8d9e7; font-size:14px; font-weight:600; margin:0 0 7px; }
.help-label { margin-top:18px; }
input { width:100%; min-height:45px; padding:10px 13px; background:#102030; color:#fff; border:1px solid #587088; border-radius:8px; font:inherit; }
input::placeholder { color:#8da5b6; }
form#loginForm { display:grid; gap:0; }
form#loginForm input { margin-bottom:17px; }
button { border:1px solid #6a9ec3; background:#285b81; color:#f6fbff; border-radius:9px; font:inherit; font-size:14px; font-weight:600; padding:11px 18px; min-height:43px; cursor:pointer; }
button:hover { background:#346f9e; }
.button-secondary { background:#20364c; border-color:#59738a; }
.button-secondary:hover { background:#2d4d68; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid #addaff; outline-offset:3px; }
.error { color:#ffb6ac; font-size:14px; }
.error:empty { display:none; }
details { border-top:1px solid #3a5065; margin-top:20px; padding-top:14px; color:#c4d4e0; font-size:14px; }
summary { cursor:pointer; color:#b7dbf8; font-weight:600; }
code,.command { font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; color:#d1e6f8; }
.command { display:block; padding:13px; background:#112233; border:1px solid #3b536b; border-radius:8px; overflow-wrap:anywhere; user-select:text; }
.dashboard-heading,.section-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.dashboard-heading { margin:12px 0 18px; align-items:center; }
.dashboard-heading h2 { margin:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:20px 0 10px; }
.form-grid .form-actions { grid-column:1/-1; }
.table-wrap { width:100%; overflow-x:auto; }
table { border-collapse:collapse; width:100%; min-width:550px; }
th,td { text-align:left; padding:13px 10px; border-bottom:1px solid #3a5065; font-size:14px; }
th { color:#c3d7e7; font-weight:600; }
@media(max-width:650px) { .brand { font-size:16px; } .container { padding-top:20px; } .form-grid { grid-template-columns:1fr; } .section-heading { flex-direction:column; } .panel { padding:19px; } }

#setupForm { display:grid; gap:0; margin-top:18px; }
#setupForm input { margin-bottom:15px; }
.qr-box { display:inline-flex; padding:12px; border-radius:10px; background:#fff; margin:4px 0 12px; }
.qr-box img { display:block; width:232px; height:232px; max-width:100%; }

/* Confirmation after ending the administrator session. */
.status-note { color:#b6edc7; font-size:14px; margin:12px 0; }
.status-note:empty { display:none; }

#totpRebindArea { margin-top:18px; border-top:1px solid #3a5065; padding-top:18px; }
#totpRebindStartForm input, #totpRebindCompleteForm input { display:block; margin-bottom:12px; }
#totpRebindCompleteForm { margin-top:17px; }