/* Sign-in, two-step verification and authenticator setup. Tokens match main.css. */
:root {
  --ground:#f4f6f8; --surface:#fff; --ink:#13202b; --muted:#4f5f6d; --line:#dce2e8; --line-soft:#eef2f6; --field-line:#b8c4cf;
  --primary:#1b5fa8; --primary-dark:#154c87; --primary-tint:#e8f0fa; --focus:#8db6e6;
  --nav-bg:#13202b; --nav-ink:#c9d3dc; --nav-muted:#8c9aa6; --nav-hover:#1d2c38;
  --ok:#1e7f4f; --ok-tint:#e3f2ea; --ok-ink:#165c39; --note-bg:#fbf1e4; --note-ink:#7a4507;
  --danger-tint:#fcedec; --danger-line:#f0c2be; --danger-ink:#8e2a22;
  --font:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;
}
* { box-sizing:border-box; }
body.auth-page { background:var(--ground); color:var(--ink); display:flex; flex-wrap:wrap; font-family:var(--font); font-size:15px; line-height:1.5; margin:0; min-height:100vh; }
a { color:var(--primary); font-weight:600; } a:hover { color:var(--primary-dark); }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

/* Left brand panel */
.auth-panel { background:var(--nav-bg); color:var(--nav-ink); display:flex; flex:1 1 380px; flex-direction:column; gap:40px; padding:48px; }
.brand { align-items:center; color:#fff; display:flex; font-size:18px; font-weight:700; gap:10px; margin:0; }
.brand-mark { align-items:center; background:var(--primary); border-radius:8px; color:#fff; display:flex; font-size:17px; height:36px; justify-content:center; width:36px; }
.auth-panel-body { display:flex; flex-direction:column; gap:16px; margin-top:auto; max-width:440px; }
.auth-panel h2 { color:#fff; font-size:30px; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:0; }
.auth-panel p { font-size:15px; line-height:1.6; margin:0; }
.auth-points { display:flex; flex-direction:column; font-size:14px; gap:12px; list-style:none; margin:0; padding:0; }
.auth-points li { align-items:center; display:flex; gap:10px; }
.auth-points li::before { background:#8db6e6; border-radius:999px; content:""; flex:none; height:8px; width:8px; }

/* Right form side */
.auth-main { align-items:center; display:flex; flex:999 1 480px; justify-content:center; padding:48px 24px; }
.auth-card { display:flex; flex-direction:column; gap:24px; max-width:420px; width:100%; }
.auth-card-wide { max-width:760px; }
.auth-step { color:var(--muted); font-size:13px; font-weight:600; margin:0; }
h1 { font-size:30px; font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:4px 0 8px; }
.intro { color:var(--muted); line-height:1.5; margin:0; }
.back-link { align-items:center; align-self:flex-start; display:inline-flex; gap:6px; min-height:44px; text-decoration:none; }
.back-link::before { content:"\2190"; }
form { display:flex; flex-direction:column; gap:18px; margin:0; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
label { font-size:14px; font-weight:600; }
input { background:var(--surface); border:1px solid var(--field-line); border-radius:8px; color:var(--ink); font:inherit; font-size:15px; height:48px; padding:0 14px; width:100%; }
input:focus { border-color:var(--primary); box-shadow:0 0 0 3px #d3e3f6; outline:none; }
.code-input { font-family:var(--mono); font-size:24px; font-weight:500; height:60px; letter-spacing:.4em; }
.code-input-recovery { font-size:19px; height:52px; letter-spacing:.12em; text-transform:uppercase; }
.password-wrap { position:relative; } .password-wrap input { padding-right:56px; }
.password-toggle { background:transparent; border:0; border-radius:6px; color:var(--muted); cursor:pointer; font:inherit; font-size:13px; font-weight:600; height:44px; position:absolute; right:2px; top:2px; width:52px; }
.password-toggle:hover { color:var(--ink); }
.errorlist { color:var(--danger-ink); font-size:14px; list-style:none; margin:0; padding:0; }
.auth-alert { background:var(--danger-tint); border:1px solid var(--danger-line); border-radius:10px; color:var(--danger-ink); font-size:14px; padding:12px 14px; }
.auth-alert p { margin:0; }
.auth-note { background:var(--note-bg); border-radius:10px; color:var(--note-ink); font-size:14px; margin:0; padding:12px 14px; }
button,.button-link { align-items:center; background:var(--primary); border:0; border-radius:8px; color:#fff; cursor:pointer; display:inline-flex; font:inherit; font-size:15px; font-weight:700; height:48px; justify-content:center; padding:0 22px; text-decoration:none; }
button:hover,.button-link:hover { background:var(--primary-dark); color:#fff; }
form > button { width:100%; }
.button-ghost { background:var(--surface); border:1px solid var(--field-line); color:var(--ink); font-size:14px; font-weight:600; height:44px; padding:0 16px; }
.button-ghost:hover { background:var(--line-soft); color:var(--ink); }
.button-link[aria-disabled="true"] { background:var(--line); color:var(--muted); pointer-events:none; }
.auth-footer { border-top:1px solid var(--line); color:var(--muted); display:flex; flex-direction:column; font-size:14px; gap:4px; margin:0; padding-top:20px; }
.auth-footer a { align-self:flex-start; align-items:center; display:inline-flex; min-height:44px; }
.security-note { border-top:1px solid var(--line); color:var(--muted); font-size:14px; margin:0; padding-top:20px; }

/* Setup page */
body.auth-setup { flex-direction:column; flex-wrap:nowrap; }
.setup-bar { align-items:center; background:var(--nav-bg); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; padding:16px 32px; }
.setup-steps { display:flex; flex-wrap:wrap; font-size:13px; font-weight:600; gap:8px 20px; list-style:none; margin:0; padding:0; }
.setup-steps li { align-items:center; color:var(--nav-muted); display:flex; gap:8px; }
.setup-steps li::before { align-items:center; background:#2a3a47; border-radius:999px; color:#fff; content:attr(data-n); display:flex; font-size:12px; height:22px; justify-content:center; width:22px; }
.setup-steps li[data-state="done"] { color:var(--nav-ink); } .setup-steps li[data-state="done"]::before { background:var(--ok); content:"\2713"; }
.setup-steps li[aria-current="step"] { color:#fff; } .setup-steps li[aria-current="step"]::before { background:var(--primary); }
.setup-main { margin:0 auto; max-width:920px; padding:48px 24px; width:100%; }
.setup-box { background:var(--surface); border:1px solid var(--line); border-radius:14px; display:flex; flex-wrap:wrap; gap:32px; padding:28px; }
.qr-block { align-items:center; display:flex; flex:1 1 220px; flex-direction:column; gap:12px; }
.qr-code { border:1px solid var(--line); border-radius:12px; display:block; height:auto; max-width:220px; padding:8px; width:100%; }
.qr-block span { color:var(--muted); font-size:13px; text-align:center; }
.setup-list { counter-reset:setup; display:flex; flex:999 1 340px; flex-direction:column; gap:22px; list-style:none; margin:0; min-width:0; padding:0; }
.setup-list > li { display:flex; gap:14px; }
.setup-list > li::before { align-items:center; background:var(--primary-tint); border-radius:999px; color:var(--primary-dark); content:counter(setup); counter-increment:setup; display:flex; flex:none; font-size:14px; font-weight:700; height:28px; justify-content:center; width:28px; }
.setup-list > li > div { display:flex; flex:1; flex-direction:column; gap:6px; min-width:0; }
.setup-list strong { font-size:15px; } .setup-list p { color:var(--muted); margin:0; }
.setup-key { align-self:flex-start; background:var(--ground); border:1px solid var(--line); border-radius:8px; font-family:var(--mono); font-size:14px; letter-spacing:.08em; max-width:100%; overflow-wrap:anywhere; padding:8px 12px; }
.setup-done { align-items:center; align-self:flex-start; background:var(--ok-tint); border-radius:999px; color:var(--ok-ink); display:inline-flex; font-size:13px; font-weight:700; gap:6px; padding:4px 12px; }
.recovery-codes { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); list-style:none; margin:0; padding:0; }
.recovery-codes li { background:var(--ground); border-radius:8px; font-family:var(--mono); font-size:16px; letter-spacing:.08em; padding:10px 14px; }
.codes-box { flex-direction:column; gap:22px; }
.codes-actions { display:flex; flex-wrap:wrap; gap:10px; }
.codes-confirm { align-items:center; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:16px; padding-top:20px; }
.codes-confirm label { align-items:center; cursor:pointer; display:flex; flex:1 1 260px; font-size:15px; font-weight:500; gap:10px; min-height:44px; }
.codes-confirm input { accent-color:var(--primary); height:20px; width:20px; }

@media (max-width:700px) {
  .auth-panel { flex-basis:100%; gap:20px; padding:24px 16px; }
  .auth-panel h2 { font-size:22px; } .auth-points { display:none; }
  .auth-main { padding:28px 16px 40px; }
  .setup-bar { padding:12px 16px; } .setup-main { padding:28px 16px; } .setup-box { padding:20px; }
}
@media print {
  .setup-bar,.codes-actions,.codes-confirm,.auth-step,.intro { display:none; }
  body.auth-page { background:#fff; }
}