/* ==========================================================================
   App shell theme (login / register / pin / biometric screens)

   These screens are standalone pages (they do not extend the marketing
   layout), so they carry their own theme plumbing. Dark is the default and
   preserves the existing look exactly; [data-theme="light"] restyles them.
   ========================================================================== */

:root,
[data-theme="dark"] {
  --app-bg: #0A0E1A;
  --app-bg-mid: #141B2D;
  --app-surface: rgba(30, 41, 59, 0.6);
  --app-surface-strong: rgba(30, 41, 59, 0.8);
  --app-border: rgba(148, 163, 184, 0.12);
  --app-border-hover: rgba(148, 163, 184, 0.22);
  --app-text: #F1F5F9;
  --app-text-muted: #94A3B8;
  --app-text-dim: #64748B;
  --app-accent: #3B82F6;
  --app-accent-2: #2563EB;
  --app-danger: #EF4444;
  --app-loader-bg: rgba(10, 14, 26, 0.96);
}

[data-theme="light"] {
  --app-bg: #EEF2F7;
  --app-bg-mid: #FFFFFF;
  --app-surface: #FFFFFF;
  --app-surface-strong: #FFFFFF;
  --app-border: #E2E8F0;
  --app-border-hover: #CBD5E1;
  --app-text: #0F172A;
  --app-text-muted: #475569;
  --app-text-dim: #64748B;
  --app-accent: #2563EB;
  --app-accent-2: #1D4ED8;
  --app-danger: #DC2626;
  --app-loader-bg: rgba(238, 242, 247, 0.96);
}

/* --- page background ------------------------------------------------------ */
html[data-theme="light"] body,
[data-theme="light"] .login-screen,
[data-theme="light"] .pin-screen,
[data-theme="light"] .bio-screen,
[data-theme="light"] .register-screen {
  background: linear-gradient(160deg, #EEF2F7 0%, #FFFFFF 50%, #EEF2F7 100%);
}

[data-theme="light"] .login-screen::before,
[data-theme="light"] .pin-screen::before,
[data-theme="light"] .bio-screen::before,
[data-theme="light"] .register-screen::before {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, transparent 70%);
}
[data-theme="light"] .login-screen::after,
[data-theme="light"] .pin-screen::after,
[data-theme="light"] .bio-screen::after,
[data-theme="light"] .register-screen::after {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
}

/* --- text ----------------------------------------------------------------- */
[data-theme="light"] .welcome-section h1,
[data-theme="light"] .pin-title,
[data-theme="light"] .bio-title,
[data-theme="light"] .register-title,
[data-theme="light"] .top-bar .brand-name,
[data-theme="light"] .user-name,
[data-theme="light"] .cred-item .cred-name { color: #0F172A; }

[data-theme="light"] .welcome-section p,
[data-theme="light"] .pin-sub,
[data-theme="light"] .bio-sub,
[data-theme="light"] .register-sub,
[data-theme="light"] .signup-text,
[data-theme="light"] .cred-item .cred-when,
[data-theme="light"] .register-hint { color: #64748B; }

/* --- inputs --------------------------------------------------------------- */
[data-theme="light"] .input-group input,
[data-theme="light"] .register-input,
[data-theme="light"] .pin-key {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .input-group input:focus,
[data-theme="light"] .register-input:focus {
  background: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
[data-theme="light"] .input-group input::placeholder,
[data-theme="light"] .register-input::placeholder { color: #94A3B8; }
[data-theme="light"] .input-group label { color: #475569; }

[data-theme="light"] .pin-key { border-color: #E2E8F0; }
[data-theme="light"] .pin-key:active { background: rgba(37, 99, 235, 0.10); border-color: rgba(37, 99, 235, 0.35); }
[data-theme="light"] .pin-dot { background: #E2E8F0; border-color: #CBD5E1; }

/* --- cards / buttons ------------------------------------------------------ */
[data-theme="light"] .alt-btn,
[data-theme="light"] .cred-item,
[data-theme="light"] .register-card,
[data-theme="light"] .user-pill {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #475569;
}
[data-theme="light"] .alt-btn:hover { background: #F8FAFC; border-color: #CBD5E1; color: #0F172A; }

[data-theme="light"] .btn-secondary,
[data-theme="light"] .register-btn-secondary {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .btn-secondary:hover { border-color: #CBD5E1; }

[data-theme="light"] .divider-line { background: #E2E8F0; }
[data-theme="light"] .divider-text { color: #94A3B8; }

[data-theme="light"] .bio-status.idle { color: #64748B; }
[data-theme="light"] .toast-msg.error { background: #DC2626; }
[data-theme="light"] .toast-msg.success { background: #1D4ED8; }

/* --- page loader (loading animation) --------------------------------------
     The app pages carry their loader CSS in an inline <style> that is emitted
     AFTER this stylesheet, so these rules must out-specify `.page-loader .x`
     rather than merely tie with it. */
[data-theme="light"] .page-loader { background: rgba(238, 242, 247, 0.96); }
[data-theme="light"] .page-loader .loader-text { color: #475569; }
[data-theme="light"] .page-loader .loader-track { stroke: rgba(37, 99, 235, 0.18); }
[data-theme="light"] .page-loader .loader-dot-ring::before { background: #2563EB; box-shadow: 0 0 12px rgba(37, 99, 235, 0.35); }
[data-theme="light"] .page-loader .loader-dots span { background: #2563EB; }
[data-theme="light"] .page-loader .loader-shimmer { background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.30) 50%, transparent 100%); background-size: 200% 100%; }

/* --- segmented control (account type) ------------------------------------- */
[data-theme="light"] .account-toggle { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .account-toggle button { color: #64748B; }
[data-theme="light"] .account-toggle button.active {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #fff;
}

/* ==========================================================================
   App header (home + theme toggle) — shared by every standalone app screen
   ========================================================================== */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.app-header-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.app-header-btn:hover {
  background: var(--app-surface-strong);
  border-color: var(--app-border-hover);
}
.app-header-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.app-header-spacer { width: 40px; height: 40px; }

/* sun/moon swap */
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }
[data-theme="light"] .icon-sun { display: block; }
[data-theme="light"] .icon-moon { display: none; }