:root{--canvas:#202020;--surface:#282828;--raised:#333333;--text:#f2f2f2;--muted:#c0c0c0;--border:#707070;--focus:#9bc5ff;--error:#ffb4ab;font-family:Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--canvas);color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px}main{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:36px;width:100%;max-width:440px;box-shadow:0 8px 40px #17314c10}h1{font-size:28px;line-height:1.2;margin:18px 0 12px}p{line-height:1.6;color:var(--muted)}label{display:block;font-size:14px;font-weight:600;margin:18px 0 7px}input{width:100%;font:inherit;padding:12px;border:1px solid var(--border);border-radius:6px}input:focus{outline:2px solid var(--focus);outline-offset:2px}button,.button{font:inherit;display:block;text-align:center;text-decoration:none;font-weight:600;width:100%;padding:13px 15px;margin-top:22px;border:1px solid #275da9;border-radius:6px;background:#275da9;color:white;cursor:pointer}.secondary{background:var(--surface);color:var(--focus);margin-top:0}.divider{text-align:center;color:var(--muted);margin:18px}.help{font-size:13px;border-top:1px solid var(--border);padding-top:18px}#feedback{font-size:14px;color:var(--error)}.text-button{background:none;border:0;color:var(--muted);margin:12px 0 0}button:disabled{opacity:1;cursor:wait}@media(max-width:480px){body{padding:12px}main{padding:24px}}
.account { max-width: 700px; }
section { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 18px; }
h2 { font-size: 1.2rem; }
.factor { padding:12px 0; display:flex; column-gap:16px; row-gap:8px; align-items:center; flex-wrap:wrap; }
.factor-name { overflow-wrap:anywhere; }
.factor-date { color:var(--muted); font-size:14px; white-space:nowrap; }
.factor form { margin:0; }
.factor button { width:auto; margin:0; padding:10px 14px; white-space:nowrap; }
.factor button:disabled { cursor:not-allowed; }
.passkey-add { display:flex; gap:12px; align-items:flex-end; margin-top:20px; }
.passkey-name { flex:1; min-width:0; }
.passkey-name label { margin:0 0 7px; }
.passkey-name input,.passkey-add button { min-height:46px; }
.passkey-add button { width:auto; margin:0; padding:12px 16px; white-space:nowrap; }
@media(max-width:520px) { .passkey-add { flex-direction:column; align-items:stretch; } .passkey-add button { width:100%; } }
.notice { background:#173c42; color:#d3f3f6; border-radius:10px; padding:14px; }
output { overflow-wrap:anywhere; display:block; font-family:monospace; padding:12px; background:var(--raised); }
[hidden] { display:none !important; }
#totp-qr { display:block; max-width:100%; object-fit:contain; margin:12px auto; }


.signin #login-form > label:first-of-type { margin-top:0; }
#feedback:empty { display:none; }
.otp { border:0; padding:0; margin:22px 0 0; min-width:0; }
.otp legend { font-size:14px; font-weight:600; margin-bottom:10px; }
.otp-digits { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.otp-digits input { min-width:0; text-align:center; font-size:22px; font-weight:600; padding:12px 0; }

#turnstile-widget.turnstile-visible { margin-top:22px; }

.profile-image{width:128px;height:128px;object-fit:contain;border:1px solid var(--border);border-radius:8px;display:block}.account input[type=file]{font-size:16px;max-width:100%;box-sizing:border-box}

.hint,.help{font-size:12px;line-height:1.5;color:var(--muted)}

input,select,textarea{background:var(--raised);color:var(--text);accent-color:#9bc5ff}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}a{color:var(--focus)}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}button:disabled,input:disabled,select:disabled,textarea:disabled{color:var(--muted);background:#303030;border-color:var(--border);opacity:1}input::file-selector-button{background:#3b3b3b;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 10px}#totp-qr{background:white;padding:8px}

.signin #use-passkey{margin-top:18px}

.email-subscription-popup{position:fixed;inset:0;margin:auto;width:min(28rem,calc(100vw - 3rem));max-height:calc(100vh - 3rem);box-sizing:border-box;overflow:auto;padding:1.5rem;background:#282828;color:#f2f2f2;border:1px solid #767676;border-radius:12px;box-shadow:0 12px 40px #0008}
.email-subscription-popup::backdrop{background:#0009}
.email-subscription-popup h2{margin-top:0}.email-subscription-popup p{line-height:1.5}
.email-subscription-actions{display:flex;flex-wrap:wrap;gap:12px}.email-subscription-actions button{flex:1;min-width:110px;margin:0}

.account-navigation{display:flex;flex-wrap:wrap;gap:12px}.account-navigation .button{width:auto}
