/* Shared dark background for auth sub-pages (2FA, set-password, forgot, etc.) */
:root{
  --brand:#1f5fa8; --brand-dark:#184a82; --navy:#1b2430;
  --glass:rgba(15,18,24,.80); --glass-border:rgba(255,255,255,.10);
  --ink:#e7e9ee; --ink-soft:#aab1c0; --ink-faint:#636d80;
  --line:rgba(255,255,255,.10); --input-bg:rgba(255,255,255,.06);
  --danger:#e5a3a3; --ok:#5fce8b; --warn:#e8c389;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;font:14px/1.5 var(--sans);color:var(--ink);
  background:radial-gradient(ellipse at 50% 30%, #0f1a2e 0%, #060a12 100%);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:20px;
}
a{color:#9fc1e8;text-decoration:none}
a:hover{text-decoration:underline}

.auth-card{
  width:100%;max-width:420px;
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:16px;padding:34px 34px 28px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.auth-logo{display:block;height:40px;margin:0 auto 20px}
h1{font-size:20px;font-weight:700;color:#fff;text-align:center;margin-bottom:6px}
.auth-sub{text-align:center;font-size:13px;color:var(--ink-faint);margin-bottom:22px}
label.fld{display:block;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px}
.field{margin-bottom:16px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--input-bg);color:var(--ink);font:14px var(--sans);outline:none;
}
input:focus,textarea:focus{border-color:var(--brand);background:rgba(255,255,255,.09)}
input::placeholder{color:var(--ink-faint)}
input[type=checkbox]{width:auto;accent-color:var(--brand)}
.btn-primary{
  display:block;width:100%;padding:11px;background:var(--brand);
  border:none;border-radius:9px;color:#fff;font:600 14px var(--sans);
  cursor:pointer;transition:background .15s;
}
.btn-primary:hover{background:var(--brand-dark)}
.callout{border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.callout.danger{background:rgba(139,47,47,.25);border:1px solid rgba(229,163,163,.3);color:var(--danger)}
.callout.ok{background:rgba(31,122,61,.25);border:1px solid rgba(95,206,139,.3);color:var(--ok)}
.callout.warn{background:rgba(122,84,16,.3);border:1px solid rgba(232,195,137,.3);color:var(--warn)}
.hint-link{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--ink-faint)}
.code-input{font-size:24px;letter-spacing:.4em;text-align:center;font-family:var(--mono)}
.backup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.backup-code{
  background:var(--input-bg);border:1px solid var(--line);border-radius:7px;
  padding:9px 10px;text-align:center;font:14px var(--mono);
  letter-spacing:.05em;color:var(--ink);
}
.method-btn{
  display:block;width:100%;text-align:left;padding:14px 16px;
  background:var(--input-bg);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:var(--sans);cursor:pointer;margin-bottom:10px;
  transition:border-color .15s,background .15s;
}
.method-btn:hover{border-color:var(--brand);background:rgba(31,95,168,.12)}
.method-btn b{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
.method-btn span{font-size:12px;color:var(--ink-faint)}