/* ============================================================================
   css/login.css — Login Page Shell (v2 — refactored)
   ----------------------------------------------------------------------------
   This file now only contains what's genuinely UNIQUE to the standalone
   login page: its own reset, font import, page background, and design
   tokens (the login page intentionally uses --brand/--accent rather than
   the app shell's --app-theme-color/--accent, since it's a fully
   self-contained page that doesn't load app.css).

   Reusable components previously defined here — .wrapper/.logo-box/
   .tab-box/.form-box/.bio-box (cards), .tab-btn/.btn-primary/.eye-btn/
   .bio-btn (buttons), .field/.input-wrap (forms), .toast (badges) — have
   moved to css/components/ alongside their equivalents from app.css, so
   they're defined once instead of twice. Load order on login.html:

     1. components/forms.css
     2. components/buttons.css
     3. components/cards.css
     4. components/badges.css
     5. components/modals.css
     6. login.css       (this file)
     7. components/utilities.css
     8. breakpoints.css
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --brand:   #2B2640;
  --accent:  #6C63FF;
  --accent2: #48C9B0;
  --danger:  #e74c3c;
  --success: #27ae60;
  --bg:      #F4F1EA;
  --shadow:  0 16px 48px rgba(43,38,64,.12);
  --radius:  14px;
  --border:  #ddd;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(108,99,255,.09) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(72,201,176,.07) 0%, transparent 50%);
  -webkit-font-smoothing: antialiased;
}

/* ── Loader (kept here, not in components/, because login.html is the only
   page that doesn't load app.css — this avoids adding a cross-file
   dependency just for one shared widget). Identical to app.css's #__loader__
   by design, so the loading experience matches the rest of the app. ── */
#__loader__ {
  position: fixed; inset: 0;
  background: rgba(20,16,40,.52);
  color: #fff;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2000; gap: 14px;
  backdrop-filter: blur(2px);
}
#__loader__ span { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
#__loader__::before {
  content: '';
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }