:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #080e1c; color: #eff5ff; --muted: #a9b8ce; --line: #253654; --blue: #7ab4ff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(ellipse at 40% 0, #14264a 0, transparent 65%); padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.access-card { width: min(100%, 460px); min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: #101a2e; padding: clamp(20px, 5vw, 36px); box-shadow: 0 15px 80px #0003; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #4775b5; border-radius: 16px; color: #b9d9ff; font-size: 1.5rem; font-weight: 750; background: #203961; box-shadow: 0 0 32px #398bff26; }
.eyebrow { color: var(--blue); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 750; margin-top: 24px; }
h1 { font-size: clamp(1.8rem, 7vw, 2.2rem); line-height: 1.15; letter-spacing: -.04em; margin: .4rem 0 .75rem; }
p { line-height: 1.5; overflow-wrap: anywhere; }
#intro, .status, .hint, .privacy { color: var(--muted); }
.status:empty, .error:empty { display: none; }
form { display: grid; gap: 10px; margin-top: 22px; }
label { display: block; font-weight: 650; margin-bottom: 2px; }
input, button { font: inherit; min-height: 48px; min-width: 44px; border-radius: 10px; }
input { width: 100%; min-width: 0; border: 1px solid #415b83; color: #eff5ff; background: #0a1325; padding: 11px 12px; font-size: 1rem; }
.password-field { display: flex; gap: 8px; }
.password-field input { flex: 1 1 auto; }
button { border: 1px solid var(--line); background: #182742; color: inherit; padding: .65rem .8rem; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--blue); }
button:disabled { opacity: .55; cursor: wait; }
.primary { background: #76adff; color: #081326; border-color: #76adff; font-weight: 750; width: 100%; margin-top: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hint { font-size: .85rem; margin: 0 0 7px; }
#confirmation-field input { margin-top: 8px; }
.error { color: #ffb0b0; font-size: .9rem; margin: 5px 0; }
.privacy { font-size: .78rem; margin: 24px 0 0; border-top: 1px solid var(--line); padding-top: 16px; }