/* ============================================================================
   Login page — cream/gold/navy palette  (Build 0224 — rebuilt for fidelity)
   ----------------------------------------------------------------------------
   Targets the user-supplied mockup exactly:
     - Bulletproof input padding (icons never overlap typed text)
     - Inline SVG icons (consistent rendering across OS/browser, no emoji shift)
     - Larger logo, premium serif typography
     - Diamond dividers + gold laurel feel
   ============================================================================ */

:root{
  --login-cream: #0f1421;
  --login-cream-darker: #0B1220;
  --login-card: #151b2b;
  --login-card-border: rgba(201, 169, 97, 0.32);
  --login-navy: #E5E7EB;
  --login-navy-deep: #061227;
  --login-gold: #C9A961;
  --login-gold-deep: #C9A961;
  --login-gold-light: #E3CC91;
  --login-text: #E5E7EB;
  --login-text-muted: #9CA3AF;
  --login-input-border: #1f2937;
  --login-error: #F87171;
  --login-error-bg: rgba(239, 68, 68, 0.12);
  --login-success: #34D399;
  --login-success-bg: rgba(16, 185, 129, 0.12);
}

/* ───────── Overlay — Build 0226: clean white ───────── */
.login-overlay{
  position: fixed; inset: 0;
  display: none; z-index: 9999;
  background: #0B1220;
  overflow-y: auto;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}
.login-overlay.open{ display: flex; }
body.login-active{ overflow: hidden; }

/* ───────── Inner shell — 2-col desktop, stacked mobile ───────── */
.login-shell{
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 48px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 980px){
  .login-shell{ grid-template-columns: 1fr; gap: 36px; padding: 32px 20px; }
}

/* ───────── LEFT — brand hero ───────── */
.login-brand{
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  color: var(--login-navy);
}
.login-brand-logo{
  width: 540px; height: auto;
  max-width: 100%;
  margin-bottom: 14px;
  /* Build 0226 — on a pure WHITE page background, mix-blend-mode:multiply
     causes the PNG's white background pixels to blend invisibly with the
     page. The dark/gold crest stays visible. No more visible box border. */
  mix-blend-mode: normal;
  filter: none;
}
@media (max-width: 980px){
  .login-brand-logo{ width: 320px; margin-bottom: 8px; }
}

.login-brand-name{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--login-navy);
  margin: 6px 0 2px;
  line-height: 1;
}
@media (max-width: 980px){
  .login-brand-name{ font-size: 36px; letter-spacing: 4px; }
}
.login-brand-sub{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  letter-spacing: 8px;
  color: var(--login-navy);
  opacity: 0.88;
  margin-bottom: 6px;
}
@media (max-width: 980px){
  .login-brand-sub{ font-size: 12px; letter-spacing: 6px; }
}
.login-brand-diamond{
  display: inline-block;
  font-size: 12px;
  color: var(--login-gold);
  margin: 14px 0 22px;
}

.login-pillars{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 20px;
}
.login-pillar{
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 8px;
}
.login-pillar-icon{
  width: 36px; height: 36px;
  color: var(--login-gold);
  filter: drop-shadow(0 3px 6px rgba(168, 137, 62, 0.35));
}
.login-pillar-label{
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--login-navy);
  font-weight: 700;
}
@media (max-width: 980px){
  .login-pillars{ display: none; }
}

.login-brand-divider{
  width: 100%;
  max-width: 480px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--login-gold) 30%, var(--login-gold) 70%, transparent);
  margin: 6px 0;
}
.login-brand-tagline{
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: 3.5px;
  color: var(--login-navy);
  opacity: 0.7;
  margin-top: 8px;
}

/* ───────── RIGHT — form card. Build 0226: no border, no shadow, just spacing ───────── */
.login-card{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 24px 32px 24px;
  box-shadow: none;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
@media (max-width: 980px){
  .login-card{ padding: 16px 20px 24px; max-width: 100%; }
}

.login-welcome{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--login-navy);
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.05;
  letter-spacing: -0.5px;
}
@media (max-width: 980px){
  .login-welcome{ font-size: 38px; }
}
.login-tagline{
  text-align: center;
  font-size: 14.5px;
  color: var(--login-text-muted);
  margin-bottom: 4px;
}
.login-tagline-divider{
  text-align: center;
  color: var(--login-gold);
  font-size: 11px;
  margin: 14px 0 26px;
  letter-spacing: 8px;
}

/* ───────── Fields — bulletproof padding so icons never overlap text ───────── */
.login-field{ margin-bottom: 18px; }
.login-field-label{
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--login-navy);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.login-field-input-wrap{ position: relative; }

.login-field-input{
  width: 100%;
  height: 56px;
  /* Build 0225 — more aggressive padding so icons never touch text.
     64px left = 22px icon left + 22px icon width + 20px buffer. */
  padding: 0 20px 0 64px !important;
  font-size: 15px;
  font-family: inherit;
  /* Build 0238 — !important to override app.css:208 input[type=email]
     selector which has higher specificity and sets background:#000. */
  background: #0f1421 !important;
  border: 1px solid var(--login-input-border) !important;
  border-radius: 12px !important;
  color: var(--login-text) !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  text-indent: 0;
}
.login-field-input.has-toggle{
  padding-right: 64px !important;
}
.login-field-input:focus{
  border-color: var(--login-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
.login-field-input::placeholder{
  color: #6B7280;
  font-style: italic;
}

/* Build 0238 — Suppress Chrome's autofill yellow/dark highlight so saved
   emails/names render with the same white background as empty fields. */
.login-field-input:-webkit-autofill,
.login-field-input:-webkit-autofill:hover,
.login-field-input:-webkit-autofill:focus,
.login-field-input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px #0f1421 inset !important;
  -webkit-text-fill-color: var(--login-text) !important;
  caret-color: var(--login-text);
  transition: background-color 5000s ease-in-out 0s; /* delay the autofill bg paint indefinitely */
  border: 1px solid var(--login-input-border) !important;
}

/* SVG icon — fixed dimensions, never overflows */
.login-field-icon{
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  color: var(--login-gold-deep);
  pointer-events: none;
  z-index: 1;
}
.login-field-icon svg{ width: 100%; height: 100%; display: block; }

.login-field-toggle{
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--login-gold-deep);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.login-field-toggle:hover{ background: rgba(201,169,97,0.14); color: var(--login-navy); }
.login-field-toggle svg{ width: 18px; height: 18px; display: block; }

/* ───────── Remember + Forgot row ───────── */
.login-options{
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0 22px;
  font-size: 13.5px;
}
.login-remember{
  display: flex; align-items: center; gap: 10px;
  color: var(--login-text);
  cursor: pointer; user-select: none;
}
.login-remember input{
  width: 18px; height: 18px;
  accent-color: var(--login-gold-deep);
  cursor: pointer;
}
.login-forgot{
  color: var(--login-gold-deep);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.login-forgot:hover{ text-decoration: underline; }

/* ───────── Sign-In button ───────── */
.login-submit{
  width: 100%;
  height: 58px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  background: linear-gradient(135deg,#0F2347,#0B1B36);
  color: var(--login-gold);
  border: 2px solid var(--login-gold);
  border-radius: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  transition: transform 0.08s, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 18px rgba(15, 35, 71, 0.20);
  letter-spacing: 0.3px;
}
.login-submit:hover:not(:disabled){
  background: #0B1B36;
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.22);
}
.login-submit:active:not(:disabled){ transform: translateY(1px); }
.login-submit:disabled{ opacity: 0.55; cursor: wait; }
.login-submit-icon{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.login-submit-icon svg{ width: 100%; height: 100%; }

/* ───────── Status messages ───────── */
.login-status{
  margin: 16px 0;
  padding: 13px 15px;
  border-radius: 11px;
  font-size: 13.5px;
  display: none;
  line-height: 1.5;
}
.login-status.error{
  display: block;
  background: var(--login-error-bg);
  color: var(--login-error);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.login-status.success{
  display: block;
  background: var(--login-success-bg);
  color: var(--login-success);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.login-status.info{
  display: block;
  background: rgba(201,169,97,0.15);
  color: var(--login-gold-deep);
  border: 1px solid var(--login-card-border);
}

/* ───────── Footer + bypass ───────── */
.login-footer{
  text-align: center;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 169, 97, 0.25);
  font-size: 13.5px;
  color: var(--login-text-muted);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.login-footer-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.14);
  color: var(--login-navy);
}
.login-footer-icon svg{ width: 14px; height: 14px; }
.login-footer a{
  color: var(--login-gold-deep);
  font-weight: 700;
  text-decoration: underline;
}

.login-bypass{
  text-align: center;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--login-text-muted);
}
.login-bypass a{
  color: var(--login-navy);
  cursor: pointer;
  text-decoration: underline;
  font-weight: 500;
}
.login-bypass a:hover{ color: var(--login-gold-deep); }

/* Build 0227 — ToS + Privacy links in login page footer */
.login-legal{
  text-align: center;
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--login-text-muted);
  letter-spacing: 0.3px;
}
.login-legal a{
  color: var(--login-text-muted);
  text-decoration: none;
  margin: 0 6px;
}
.login-legal a:hover{
  color: var(--login-navy);
  text-decoration: underline;
}
.login-legal span{
  color: var(--login-gold);
  opacity: 0.5;
}

/* Build 0228 — Direct support email line on login screen */
.login-support{
  text-align: center;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--login-text);
  background: rgba(201, 169, 97, 0.08);
  border-radius: 8px;
  line-height: 1.5;
}
.login-support a{
  color: var(--login-gold-deep);
  font-weight: 700;
  text-decoration: none;
  font-family: 'Consolas', monospace;
  font-size: 12.5px;
  margin-left: 2px;
}
.login-support a:hover{
  color: var(--login-navy);
  text-decoration: underline;
}

/* ============================================================================
   Build 0238 — Sign-up + password-reset + email-confirm UI
   ============================================================================ */

/* Mode tabs (Sign In / Create Account) */
.login-mode-tabs{
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 0 0 18px 0;
  background: rgba(201, 169, 97, 0.10);
  border-radius: 10px;
}
.login-mode-tab{
  flex: 1;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--login-text);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}
.login-mode-tab:hover{
  background: rgba(201, 169, 97, 0.12);
  color: var(--login-navy);
}
.login-mode-tab.active{
  background: #0F2347;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Terms agreement row in signup form */
.login-terms-row{
  margin: 14px 0 18px;
  font-size: 12px;
  color: var(--login-text);
  opacity: 0.8;
  line-height: 1.5;
  text-align: center;
}
.login-terms-row a{
  color: var(--login-gold-deep);
  font-weight: 600;
  text-decoration: none;
}
.login-terms-row a:hover{
  text-decoration: underline;
}

/* Resend confirmation row (appears under sign-in form when email-not-confirmed) */
.login-resend-row{
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(217, 119, 6, 0.10);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: var(--login-text);
  text-align: center;
  line-height: 1.5;
}
.login-resend-btn{
  background: none;
  border: none;
  color: var(--login-gold-deep);
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  margin-left: 4px;
  text-decoration: underline;
}
.login-resend-btn:hover{ color: var(--login-navy); }

/* "Check your email" panel after signup */
.login-check-email{
  text-align: center;
  padding: 20px 6px 8px;
}
.login-check-icon{
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 50%;
  color: #34D399;
}
.login-check-icon svg{ width: 100%; height: 100%; }
.login-check-title{
  font-size: 20px;
  font-weight: 700;
  color: var(--login-navy);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.login-check-body{
  font-size: 14px;
  color: var(--login-text);
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 0 8px;
}
.login-check-body strong{ color: var(--login-navy); }
.login-check-resend{
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #0F2347;
  color: #FFFFFF;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.login-check-resend:hover{ background: #082041; }
.login-check-back{
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: var(--login-text);
  border: 1px solid rgba(201, 169, 97, 0.30);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.login-check-back:hover{
  background: rgba(201, 169, 97, 0.08);
  color: var(--login-navy);
}

/* Set New Password intro line */
.login-reset-intro{
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(201, 169, 97, 0.08);
  border-left: 3px solid #C9A961;
  border-radius: 6px;
  font-size: 13px;
  color: var(--login-text);
  line-height: 1.6;
}

/* ============================================================================
   Build 0239 — MFA (TOTP) enrollment + challenge
   ============================================================================ */
.login-mfa-intro{
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(201, 169, 97, 0.08);
  border-left: 3px solid #C9A961;
  border-radius: 6px;
  font-size: 13px;
  color: var(--login-text);
  line-height: 1.6;
}
.login-mfa-intro strong{ color: var(--login-navy); }

.login-mfa-qr-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 14px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--login-input-border);
  border-radius: 12px;
}
.login-mfa-qr{
  width: 180px;
  height: 180px;
  display: block;
}

.login-mfa-manual{
  margin: 0 0 16px;
  font-size: 12.5px;
}
.login-mfa-manual summary{
  cursor: pointer;
  color: var(--login-gold-deep);
  font-weight: 600;
  padding: 4px 0;
  list-style: none;
}
.login-mfa-manual summary::-webkit-details-marker{ display: none; }
.login-mfa-manual summary::before{
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
.login-mfa-manual[open] summary::before{ transform: rotate(90deg); }
.login-mfa-manual summary:hover{ color: var(--login-navy); }

.login-mfa-secret-box{
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(201, 169, 97, 0.10);
  border: 1px dashed var(--login-gold);
  border-radius: 8px;
}
.login-mfa-secret-box code{
  flex: 1;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--login-navy);
  word-break: break-all;
  background: transparent;
}
.login-mfa-copy{
  flex-shrink: 0;
  padding: 5px 12px;
  background: #0F2347;
  color: #FFFFFF;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.login-mfa-copy:hover{ background: #082041; }

.login-mfa-cancel{
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.30);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--login-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.login-mfa-cancel:hover{
  background: rgba(201, 169, 97, 0.08);
  color: var(--login-navy);
}

/* 6-digit code input — monospaced, large, centered */
#mfa-enroll-code,
#mfa-challenge-code,
#email-otp-code{
  text-align: center !important;
  font-family: 'Consolas', 'Monaco', monospace !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 8px !important;
  padding-left: 64px !important;
  padding-right: 20px !important;
}

/* ============================================================================
   Build 0243 — Auth method picker (signup) + Email-OTP alternative sign-in
   ============================================================================ */

/* Auth method radio cards at signup */
.login-authmethod-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}
.login-authmethod{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #151b2b;
  border: 2px solid var(--login-input-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-transform: none;       /* override label-inherited uppercase */
  letter-spacing: normal;
}
.login-authmethod *{
  text-transform: none !important;
  letter-spacing: normal !important;
}
.login-authmethod input[type="radio"]{
  margin-top: 4px;
  accent-color: #C9A961;
  flex-shrink: 0;
}
.login-authmethod:hover{ background: rgba(201, 169, 97, 0.06); }
.login-authmethod:has(input:checked){
  border-color: #C9A961;
  background: rgba(201, 169, 97, 0.08);
}
.login-authmethod-body{ flex: 1; min-width: 0; }
.login-authmethod-head{
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--login-navy);
  margin-bottom: 4px;
}
.login-authmethod-head svg{ width: 18px; height: 18px; flex-shrink: 0; color: var(--login-gold-deep); }
.login-authmethod-head strong{ font-weight: 700; }
.login-authmethod-rec{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase !important;   /* this one IS meant to be caps */
  letter-spacing: 0.6px !important;
  background: rgba(16, 185, 129, 0.14);
  color: #34D399;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 4px;
}
.login-authmethod-desc{
  font-size: 12.5px;
  color: var(--login-text-muted);
  line-height: 1.45;
}

/* "or" divider between Sign In and Email-me-a-code on the login form */
.login-divider{
  display: flex; align-items: center;
  margin: 14px 0 12px;
  font-size: 11px;
  color: var(--login-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.login-divider::before,
.login-divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--login-input-border);
}
.login-divider span{ padding: 0 12px; }

/* Alternate sign-in button (Email me a code) */
.login-alt-submit{
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  background: transparent;
  color: var(--login-navy);
  border: 1.5px solid rgba(201, 169, 97, 0.45);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.login-alt-submit svg{ width: 18px; height: 18px; }
.login-alt-submit:hover{
  background: rgba(201, 169, 97, 0.10);
  border-color: #C9A961;
}

/* ============================================================================
   Build 0256 — Two-step sign-in: email pill + password strength meter
   ============================================================================ */
.signin-email-pill{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 10px;
  font-size: 13.5px;
}
.signin-email-pill-label{
  color: var(--login-text-muted);
  font-size: 12px;
  letter-spacing: 0.3px;
}
.signin-email-pill strong{
  color: var(--login-navy);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Consolas', monospace;
  font-size: 13px;
}
.signin-email-change{
  background: transparent;
  border: none;
  color: var(--login-gold-deep);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  text-decoration: underline;
}
.signin-email-change:hover{ color: var(--login-navy); background: rgba(201,169,97,0.08); }

.pw-strength{
  margin-top: 8px;
}
.pw-strength-bar{
  height: 4px;
  background: var(--login-input-border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.pw-strength-fill{
  height: 100%;
  background: #DC2626;
  border-radius: 99px;
  transition: width 0.25s ease, background-color 0.2s;
  min-width: 5%;
}
.pw-strength-fill.pw-score-0{ background: #DC2626; }
.pw-strength-fill.pw-score-1{ background: #EA580C; }
.pw-strength-fill.pw-score-2{ background: #D97706; }
.pw-strength-fill.pw-score-3{ background: #65A30D; }
.pw-strength-fill.pw-score-4{ background: #059669; }
.pw-strength-tip{
  font-size: 11.5px;
  color: var(--login-text-muted);
  line-height: 1.4;
}
.pw-strength-tip strong{ color: var(--login-navy); }

/* Lost phone recovery link on MFA challenge */
.login-mfa-recovery{
  display: block;
  margin: 10px 0 4px;
  font-size: 12.5px;
  color: var(--login-gold-deep);
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
}
.login-mfa-recovery:hover{ color: var(--login-navy); }

/* ============================================================================
   Day/night (#294) — LIGHT theme overrides, html[data-theme="light"] ONLY
   ----------------------------------------------------------------------------
   ARCHITECTURE (do not invert): command-center.html ALSO loads this file for
   the in-app session-expiry / MFA step-up overlay, and NOTHING in the app sets
   html[data-theme]. So the :root block at the top MUST keep the DARK values as
   the default — the app overlay renders exactly as before. Only pages that
   load src/services/theme/day-night.js (login.html, incl. the /create-account
   rewrite) ever get html[data-theme="light"], which activates everything below.

   Deliberately IDENTICAL in light mode (no override on purpose):
     - navy buttons/tabs (#0F2347 / #0B1B36 / #082041) keep #FFFFFF text
     - the sign-in submit keeps its navy gradient + gold #C9A961 text
     - gold #C9A961 borders/fills and the rgba(201,169,97,…) tint backgrounds
       (they read as the soft cream tint on white)
     - the QR wrap stays WHITE in both themes (authenticator scannability)
     - pw-strength fill scale (bar fills, fine on both surfaces)
   ============================================================================ */
html[data-theme="light"]{
  --login-cream: #F5F7FA;
  --login-cream-darker: #FFFFFF;
  --login-card: #FFFFFF;
  --login-card-border: rgba(201, 169, 97, 0.45);
  --login-navy: #111827;
  --login-navy-deep: #061227;
  --login-gold: #C9A961;
  --login-gold-deep: #7D6229;   /* gold as TEXT ink — AA on white */
  --login-gold-light: #7D6229;
  --login-text: #111827;
  --login-text-muted: #6B7280;
  --login-input-border: #E5E7EB;
  --login-error: #B91C1C;
  --login-error-bg: rgba(185, 28, 28, 0.08);
  --login-success: #047857;
  --login-success-bg: rgba(4, 120, 87, 0.10);
}

/* Page surface (dark literal #0B1220 pinned at .login-overlay above) */
html[data-theme="light"] .login-overlay{ background: #FFFFFF; }

/* Brand crest — the gold-on-transparent dark logo washes out on white. Swap to
   the navy crest the marketing pages show in light mode. CSS content swap so
   login-page.js stays untouched (its template hardcodes the dark asset). */
html[data-theme="light"] .login-brand-logo{
  content: url("../../assets/img/vitae-dux-logo-transparent.png");
}

/* Inputs — MUST stay !important-strong: app.css input[type=…] sets background
   #000 underneath, and the dark rule above pins #0f1421 !important. */
html[data-theme="light"] .login-field-input{
  background: #FFFFFF !important;
}

/* Chrome autofill — re-pin the 1000px inset hack to white, or autofilled
   fields render as dark #0f1421 rectangles on the white page. */
html[data-theme="light"] .login-field-input:-webkit-autofill,
html[data-theme="light"] .login-field-input:-webkit-autofill:hover,
html[data-theme="light"] .login-field-input:-webkit-autofill:focus,
html[data-theme="light"] .login-field-input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: var(--login-text) !important;
  caret-color: var(--login-text);
  border: 1px solid var(--login-input-border) !important;
}

/* Status tints — colors/backgrounds flip via the vars above; the borders are
   literals, so re-pin them to the light-safe families. */
html[data-theme="light"] .login-status.error{ border-color: rgba(185, 28, 28, 0.35); }
html[data-theme="light"] .login-status.success{ border-color: rgba(4, 120, 87, 0.35); }

/* Success-green accents — dark keeps #34D399; too pale on white. */
html[data-theme="light"] .login-check-icon{
  background: rgba(4, 120, 87, 0.10);
  color: #047857;
}
html[data-theme="light"] .login-authmethod-rec{
  background: rgba(4, 120, 87, 0.10);
  color: #047857;
}

/* Card-toned surface (dark literal #151b2b above) */
html[data-theme="light"] .login-authmethod{ background: #FFFFFF; }

/* White-on-navy text stays WHITE in both themes (explicit re-pin so a future
   token change can't wash these out). */
html[data-theme="light"] .login-mode-tab.active,
html[data-theme="light"] .login-check-resend,
html[data-theme="light"] .login-mfa-copy{ color: #FFFFFF; }

/* Active tab shadow — the 35% black drop reads too heavy on a light page. */
html[data-theme="light"] .login-mode-tab.active{ box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15); }

/* QR wrap stays WHITE in both themes (explicit re-pin; scannability). */
html[data-theme="light"] .login-mfa-qr-wrap{ background: #ffffff; }