/* External assets only: compatible with the account-mail self-only CSP. */
body.famos-auth { min-height:100vh; padding:24px; display:grid; place-items:center; background:var(--famos-nav); color:#fff; }
.famos-auth .geo { display:none; }
.famos-auth .account-shell { width:100%; max-width:480px; }
.famos-auth .auth-shell { width:100%; max-width:740px; }
.famos-auth .auth-shell-wide { max-width:900px; }
.famos-auth .brand, .famos-auth .login-brand { text-align:center; margin-bottom:48px; }
.famos-auth .brand-logo, .famos-auth .brand .logo { display:block; color:#fff; font:900 56px/1 var(--famos-font); letter-spacing:-3px; }
.famos-auth .brand-logo span, .famos-auth .brand .logo span { color:var(--famos-brand); }
.famos-auth .brand p, .famos-auth .login-brand p { color:#ffffff80; font:500 11px/16.5px var(--famos-font); letter-spacing:4px; text-transform:uppercase; margin-top:12px; }
.famos-auth .account-card, .famos-auth .auth-card, .famos-auth .login-card { padding:36px; border:1px solid #ffffff1a; border-radius:20px; background:color-mix(in srgb, var(--famos-nav) 95%, white); box-shadow:none; }
.famos-auth .account-card h1, .famos-auth .auth-card h1 { color:#fff; font:800 24px/30px var(--famos-font); margin-bottom:12px; }
.famos-auth .account-card p, .famos-auth .auth-card p { line-height:1.6; }
.famos-auth .account-card label, .famos-auth .auth-card .field-label, .famos-auth .login-card .form-label { color:#ffffffb8; font:500 12px/18px var(--famos-font); margin-bottom:6px; }
.famos-auth .account-card input, .famos-auth .passkey-name, .famos-auth .setup-key, .famos-auth .code-input, .famos-auth .login-card .input-field { background:color-mix(in srgb,var(--famos-nav) 88%,black); color:#fff; border:1px solid #ffffff29; border-radius:10px; font-family:var(--famos-font); }
.famos-auth .account-card input { width:100%; padding:10px 14px; font-size:14px; line-height:21px; }
.famos-auth .account-card input[type='checkbox'] { width:auto; }
.famos-auth .account-card .button, .famos-auth .auth-card .button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:41px; padding:9px 18px; border:1px solid transparent; border-radius:10px; font:600 14px/21px var(--famos-font); text-decoration:none; }
.famos-auth .account-card .button-primary, .famos-auth .auth-card .button-primary { background:var(--famos-highlight); color:var(--famos-highlight-text); }
.famos-auth .account-card .button-secondary, .famos-auth .auth-card .button-secondary { background:color-mix(in srgb,var(--famos-brand) 8%,transparent); color:var(--famos-brand); border-color:color-mix(in srgb,var(--famos-brand) 30%,transparent); }
.famos-auth .account-card a:not(.button), .famos-auth .account-footer a, .famos-auth .eyebrow { color:var(--famos-brand); }
.famos-auth .button:disabled { opacity:.55; cursor:not-allowed; }
.famos-auth .login-shell { width:100%; max-width:372px; }
.famos-auth .login-card .form-label { font:600 11px/16.5px var(--famos-font); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; }
.famos-auth .login-card .input-field { padding:12px 16px; border-radius:12px; font-size:14px; line-height:21px; }
.famos-auth .login-card .btn-primary { width:100%; min-height:47px; padding:12px 16px; border-radius:12px; font-weight:700; letter-spacing:.3px; }
.famos-auth :focus-visible { outline:3px solid var(--famos-brand); outline-offset:3px; }
.famos-auth input:focus, .famos-auth textarea:focus { border-color:var(--famos-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--famos-brand) 15%,transparent); }
.famos-auth .intro, .famos-auth .hint, .famos-auth .next-step, .famos-auth .copy-status { color:#ffffffb8; }
.famos-auth .step { color:var(--famos-brand); border-color:var(--famos-brand); background:transparent; }
.famos-auth .account-tag, .famos-auth .device-row, .famos-auth .recovery-grid code { background:color-mix(in srgb,var(--famos-nav) 88%,black); border-color:#ffffff29; color:#fff; }
@media (max-width:680px) { body.famos-auth { padding:24px 14px; } .famos-auth .auth-card, .famos-auth .account-card { padding:24px; } }
@media (max-width:430px) { .famos-auth .login-card { padding:24px; } }
@media (pointer:coarse) { .famos-auth .button { min-height:44px; } }
/* Authentication layout remains explicit alongside the application reset. */
.famos-auth .auth-card h2 { display:flex; align-items:center; gap:10px; font:600 15px/22.5px var(--famos-font); margin:0 0 20px; }
.famos-auth .intro { margin:0 0 30px; max-width:620px; font-size:14px; line-height:1.6; }
.famos-auth .hint { margin:10px 0 0; font-size:12px; line-height:1.6; }
.famos-auth .qr-hint { margin:16px auto 0; }
.famos-auth .next-step { margin:24px 0 0; border-color:#ffffff29; }
.famos-auth .copy-status { margin:12px 0 0; min-height:18px; }
.famos-auth .account-footer { margin:24px 0 0; }
.famos-auth .product { color:var(--famos-brand); }
.famos-auth .account-card .help-text { margin:18px 0; color:#ffffffb8; }
.famos-auth .account-card .primary { display:flex; align-items:center; justify-content:center; width:100%; min-height:41px; padding:9px 18px; border:1px solid transparent; border-radius:10px; font:600 14px/21px var(--famos-font); text-decoration:none; background:var(--famos-highlight); color:var(--famos-highlight-text); }
.famos-auth .account-card .primary:hover { background:var(--famos-highlight-hover); }
.famos-auth .notice { margin:0 0 20px; background:color-mix(in srgb,var(--famos-nav) 90%,var(--famos-brand)); border-color:color-mix(in srgb,var(--famos-brand) 40%,transparent); color:#fff; }
.famos-auth .notice.success { border-color:#839e43; color:#d9f599; }
.famos-auth .notice.error { border-color:#b57070; color:#ffb3b0; }
.famos-auth input[aria-invalid='true'], .famos-auth textarea[aria-invalid='true'] { border-color:#ef9a9a; }
.famos-auth .auth-shell-wide .confirm-panel, .famos-auth .divider::before, .famos-auth .divider::after { border-color:#ffffff29; }
@media(pointer:coarse) { .famos-auth .account-card .primary { min-height:44px; } }