/* ═══════════════════════════════════════════════════════════════
   Persona Auth Section Styles
   Used by: login, signup, forgot-password, verify-email
   Depends on: persona-tokens.css, persona-styles.css
   ═══════════════════════════════════════════════════════════════ */

:root{
    --bg:#0d0a20; --bg-deep:#090718;
    --panel:rgba(255,255,255,0.045); --panel-strong:rgba(255,255,255,0.08);
    --border:rgba(255,255,255,0.09); --border-soft:rgba(255,255,255,0.06);
      
     --orange-soft:#ffb38a; 
    
    --text:#f3f1fb; --text-muted:#a59cc9; --text-faint:#9088b4;
    --cta-text:#1a0d05; --card-shadow:none;
    --radius-lg:24px; --radius-md:16px; --radius-sm:10px;
    --font-display:'Unbounded', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace;
  }
  :root[data-theme="light"]{
    --bg:#ffffff; --bg-deep:var(--bg-deep);
    --panel:#ffffff; --panel-strong:#f3f4f8;
    --border:rgba(var(--ink-rgb),0.1); --border-soft:rgba(var(--ink-rgb),0.07);
      
     --orange-soft:#fb923c; 
    
    --text:#18141f; --text-muted:#5c5868; --text-faint:#6f6389;
    --cta-text:#fff;
    --card-shadow:0 1px 2px rgba(var(--ink-rgb),0.05), 0 10px 26px -14px rgba(var(--ink-rgb),0.14);
  }
html,body{ background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; color:inherit; }
  input{ font-family:inherit; }

  .ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--bg-deep); overflow:hidden; }
  .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.28; }
  :root[data-theme="light"] .blob{ opacity:.06; }
  .blob--purple{ width:560px;height:560px; background:var(--grad-purple-glow); top:-180px; inset-inline-start:-120px; }
  .blob--orange{ width:480px;height:480px; background:var(--grad-orange-glow); bottom:-160px; inset-inline-end:-100px; }

  .auth-shell{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:24px; }
  .auth-top{ width:100%; max-width:980px; display:flex; align-items:center; justify-content:space-between; padding:6px 4px 0; }
  .brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:16px; font-weight:700; }
  .brand-mark{ width:32px;height:32px; border-radius:9px; background:var(--grad-brand); display:flex;align-items:center;justify-content:center;  }
  .brand-mark svg{ width:17px;height:17px; }
  .auth-controls{ display:flex; align-items:center; gap:10px; }
  .seg{ display:flex; background:var(--panel-strong); border:1px solid var(--border); border-radius:999px; padding:2px; }
  .seg button{ font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px; border:none; background:transparent; color:var(--text-faint); font-family:var(--font-mono); }
  .seg button.active{ background:var(--grad-orange); color:var(--cta-text); }

  .auth-main{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; padding:30px 0; }
  .auth-card{ width:100%; max-width:400px; }
  .auth-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-text); display:block; margin-bottom:10px; text-align:center; }
  .auth-card h1{ font-family:var(--font-display); font-size:25px; font-weight:700; text-align:center; margin-bottom:8px; }
  .auth-card .auth-sub{ font-size:13.5px; color:var(--text-muted); text-align:center; margin-bottom:26px; }

  .google-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--panel); border:1px solid var(--border-strong); border-radius:999px; padding:12px 18px; font-size:13.5px; font-weight:600; color:var(--text); box-shadow:var(--card-shadow); margin-bottom:18px; }
  .google-btn:hover{ border-color:var(--purple-bright); }
  .google-btn svg{ width:17px;height:17px; flex-shrink:0; }

  .auth-divider{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--border-soft); }
  .auth-divider span{ font-size:11px; color:var(--text-faint); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }

  .field-block{ margin-bottom:16px; }
  .field-block label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; }
  .field-block input{ width:100%; background:var(--panel); border:1px solid var(--border-strong); border-radius:12px; padding:12px 15px; color:var(--text); font-size:13.5px; box-shadow:var(--card-shadow); }
  .field-block input:focus{ border-color:var(--purple-bright); }
  .password-wrap{ position:relative; }
  .password-wrap input{ padding-inline-end:42px; }
  .pw-toggle{ position:absolute; inset-inline-end:13px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-faint); display:flex; }
  .pw-toggle svg{ width:16px;height:16px; }

  .auth-checkbox svg{ width:10px;height:10px; color:#fff; opacity:0; }
  .auth-checkbox.checked svg{ opacity:1; }
  .checkbox-row label{ font-size:12px; line-height:1.5; color:var(--text-muted); cursor:pointer; }
  .checkbox-row a{ color:var(--purple-bright); font-weight:600; }

  /* Layout hook only now — the button itself is the shared btn/btn--primary/btn--block
     (persona-styles.css). Kept as a class (not inlined) because margin-bottom is specific
     to this form context (the space before .auth-switch below it), not the button. */
  .auth-submit{ margin-bottom:18px; }

  .auth-switch{ font-size:13px; color:var(--text-muted); text-align:center; }
  .auth-switch a{ color:var(--purple-bright); font-weight:600; }

  .forgot-link{ display:block; text-align:end; font-size:12px; font-weight:600; color:var(--purple-bright); margin:-8px 0 18px; }

  .auth-footnote{ font-size:11px; color:var(--text-faint); text-align:center; margin-top:22px; line-height:1.6; }
  .auth-footnote svg{ width:12px;height:12px; vertical-align:-1px; color:var(--teal); }

  @media (max-width:768px){
    .auth-card{ max-width:100%; }
  }
  @media (max-width:480px){
    .auth-top{ padding-top:0; }
    .brand span{ display:none; }
    .auth-card h1{ font-size:21px; }
  }
  /* ── Real logo image ── */
  .brand-mark-img, .nav-mark-img, .nmark-img {
    background: none !important;
    padding: 0 !important;
  }
  .brand-mark-img img, .nav-mark-img img, .nmark-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }

  /* Brand logo as link */
  a.brand{ text-decoration:none; color:inherit; }