/* ==========================================================================
   auth.css — account-choice / register / login / OTP screens.
   Assumes style.css (with the --ink-*, --accent, --font-display etc. vars)
   is already loaded first; the :root block below only fills in fallbacks
   so these pages still look right if loaded on their own.

   Layout model:
   - Phone (default):  single centered card, full-screen app feel.
   - Desktop (≥960px): 50/50 split — left = brand/quote/details panel,
                        right = the same form card, centered in its half.
   ========================================================================== */
:root{
  --ink-950:#15141F; --ink-900:#1E1C2B; --ink-850:#272536; --ink-800:#332F47; --ink-750:#403A59;
  --accent:#5865F2; --accent-soft:rgba(88,101,242,.16); --accent-glow:rgba(88,101,242,.5);
  --heart:#F2415A; --heart-soft:rgba(242,65,90,.14);
  --insight:#2DD9A8;
  --paper:#ECEAF6; --muted:#928DB0; --muted-dim:#645F80;
  --font-display:'Eczar',Georgia,serif; --font-body:'Hind','Inter',sans-serif; --font-ui:'Inter','Hind',sans-serif;
  --r-lg:22px; --r-md:15px; --r-sm:10px;
}

.auth-body{
  margin:0; min-height:100dvh; background:var(--ink-950); color:var(--paper);
  font-family:var(--font-body);
  position:relative; overflow-x:hidden;
}
.auth-body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 12% 6%, rgba(88,101,242,.12), transparent 42%),
    radial-gradient(circle at 88% 94%, rgba(242,65,90,.07), transparent 46%);
}
a{ color:inherit; }

/* ---------- outer layout: mobile-first single column ---------- */
.auth-layout{
  position:relative; z-index:1; min-height:100dvh;
  display:flex; align-items:center; justify-content:center; padding:28px 16px;
}

/* Info panel — hidden on phone, shown only from the desktop breakpoint down below */
.auth-aside{ display:none; }

.auth-shell{ position:relative; z-index:1; width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; gap:18px; }

.auth-card{
  width:100%; background:var(--ink-900); border:1px solid var(--ink-850);
  border-radius:var(--r-lg); padding:30px 28px 26px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:authIn .4s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes authIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.auth-brand{ display:flex; align-items:center; gap:9px; margin-bottom:22px; }
.auth-brand-mark{
  width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center;
}
.auth-brand-name{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--paper); }

.auth-head{ text-align:center; margin-bottom:22px; }
.auth-icon{
  width:54px; height:54px; margin:0 auto 14px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.auth-head h1{ font-family:var(--font-display); font-weight:600; font-size:23px; margin:0 0 8px; color:var(--paper); line-height:1.3; }
.auth-sub{ color:var(--muted); font-size:14px; line-height:1.6; margin:0; }
.auth-sub strong{ color:var(--paper); font-weight:700; }

.auth-alert{
  display:flex; align-items:flex-start; gap:10px; background:var(--heart-soft); border:1px solid rgba(242,65,90,.35);
  color:#ff9caa; border-radius:var(--r-md); padding:11px 14px; font-size:13.5px; margin-bottom:18px; line-height:1.5;
}
.auth-alert.success{ background:rgba(45,217,168,.12); border-color:rgba(45,217,168,.35); color:var(--insight); }
.auth-alert i{ margin-top:2px; flex:0 0 auto; }

.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-field{ display:flex; flex-direction:column; gap:7px; }
.auth-field-label{ font-family:var(--font-ui); font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.2px; }
.auth-input-wrap{
  display:flex; align-items:center; gap:10px; background:var(--ink-850); border:1.5px solid var(--ink-800);
  border-radius:var(--r-md); padding:0 14px; transition:border-color .15s ease;
}
.auth-input-wrap:focus-within{ border-color:var(--accent); }
.auth-input-wrap i{ color:var(--muted-dim); font-size:15px; flex:0 0 auto; }
.auth-input-wrap input{
  flex:1; background:none; border:none; color:var(--paper); font-family:var(--font-body);
  font-size:15px; padding:13px 0; min-width:0;
}
.auth-input-wrap input:focus{ outline:none; }
.auth-input-wrap input::placeholder{ color:var(--muted-dim); }
.auth-input-toggle{ background:none; border:none; color:var(--muted-dim); font-size:16px; padding:6px; flex:0 0 auto; }
.auth-field-error{ font-size:12px; color:var(--heart); font-family:var(--font-ui); }

.auth-submit{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(150deg,var(--accent),#3f4bd1); color:#fff; border:none; border-radius:999px;
  padding:14px 0; font-family:var(--font-ui); font-weight:700; font-size:15px; margin-top:4px;
  box-shadow:0 8px 24px var(--accent-glow); transition:transform .15s ease, opacity .15s ease;
}
.auth-submit:active{ transform:scale(.98); }
.auth-submit:disabled{ opacity:.45; box-shadow:none; }

.auth-form-note{
  display:flex; align-items:flex-start; gap:8px; color:var(--muted-dim); font-size:12.5px; line-height:1.6;
  margin:4px 0 0; font-family:var(--font-ui);
}
.auth-form-note i{ margin-top:2px; color:var(--insight); flex:0 0 auto; }

.auth-footline{ text-align:center; font-size:13.5px; color:var(--muted); margin:18px 0 0; font-family:var(--font-ui); }
.auth-footline.muted{ margin-top:10px; }
.auth-footline a{ color:var(--accent); font-weight:700; text-decoration:none; }
.auth-footline a:hover{ text-decoration:underline; }

.auth-link-btn{ background:none; border:none; color:var(--accent); font-weight:700; font-size:13.5px; font-family:var(--font-ui); padding:0; }

.auth-quote{
  text-align:center; color:var(--muted-dim); font-family:var(--font-display); font-style:italic; font-size:13.5px;
  line-height:1.7; max-width:400px; margin:0; padding:0 12px;
}
.auth-quote span{ display:block; font-family:var(--font-ui); font-style:normal; font-size:11px; color:var(--muted-dim); margin-top:4px; letter-spacing:.3px; }

/* ---------- account choice cards (welcome page) ---------- */
.account-choice-grid{ display:flex; flex-direction:column; gap:14px; }
.account-choice-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  background:var(--ink-850); border:1.5px solid var(--ink-800); border-radius:var(--r-lg);
  padding:20px 20px 18px; text-decoration:none; color:var(--paper); cursor:pointer;
  transition:transform .15s ease, border-color .2s ease; width:100%;
}
.account-choice-card:active{ transform:scale(.98); }
.account-choice-card.is-highlight{ border-color:var(--accent); background:linear-gradient(160deg,var(--accent-soft),var(--ink-850) 60%); }
.account-choice-badge{
  position:absolute; top:14px; right:14px; background:var(--accent); color:#fff; font-family:var(--font-ui);
  font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; letter-spacing:.3px;
}
.account-choice-icon{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:12px;
}
.account-choice-icon.anon{ background:var(--ink-800); color:var(--muted); }
.account-choice-icon.public{ background:var(--accent-soft); color:var(--accent); }
.account-choice-card h3{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 4px; }
.account-choice-tag{ color:var(--muted-dim); font-size:12.5px; margin:0 0 14px; font-family:var(--font-ui); }
.account-benefits{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:7px; width:100%; }
.account-benefits li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--paper); font-family:var(--font-ui); }
.account-benefits li i{ color:var(--insight); font-size:13px; flex:0 0 auto; }
.account-benefits li.muted{ color:var(--muted-dim); }
.account-benefits li.muted i{ color:var(--muted-dim); }
.account-choice-cta{
  align-self:stretch; text-align:center; background:var(--ink-800); color:var(--paper); font-family:var(--font-ui);
  font-weight:700; font-size:13.5px; padding:11px 0; border-radius:999px;
}
.account-choice-cta.primary{ background:var(--accent); color:#fff; }

/* ---------- OTP boxes ---------- */
.otp-box-row{ display:flex; gap:9px; justify-content:center; margin:6px 0 4px; }
.otp-box{
  width:46px; height:56px; text-align:center; font-family:var(--font-display); font-size:24px; font-weight:700;
  background:var(--ink-850); border:1.5px solid var(--ink-800); border-radius:var(--r-sm); color:var(--paper);
  transition:border-color .15s ease;
}
.otp-box:focus{ outline:none; border-color:var(--accent); }

@media (min-width:480px){
  .account-choice-grid{ flex-direction:row; }
  .account-choice-card{ flex:1; }
}

/* ==========================================================================
   Desktop split screen (≥960px): left info panel + right form, 50/50.
   Below this width, everything above renders as the single mobile card —
   .auth-aside stays display:none and .auth-layout stays centered.
   ========================================================================== */
@media (min-width:960px){
  .auth-layout{
    padding:0; align-items:stretch; justify-content:stretch; min-height:100dvh;
  }

  .auth-aside{
    display:flex; flex-direction:column; justify-content:space-between;
    flex:1 1 50%; max-width:640px; position:relative; overflow:hidden;
    padding:56px 64px; background:linear-gradient(160deg,var(--ink-900),var(--ink-950) 70%);
    border-right:1px solid var(--ink-850);
  }
  .auth-aside-glow{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(circle at 18% 12%, rgba(88,101,242,.30), transparent 45%),
      radial-gradient(circle at 88% 82%, rgba(242,65,90,.16), transparent 50%);
  }

  .auth-aside-inner{ position:relative; z-index:1; display:flex; flex-direction:column; gap:36px; }
  .auth-aside .auth-brand{ margin-bottom:0; }

  .auth-aside-copy h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3vw,36px); line-height:1.25; color:var(--paper); margin:0 0 14px; }
  .auth-aside-copy p{ color:var(--muted); font-size:15px; line-height:1.75; max-width:420px; margin:0; }

  .auth-aside-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .auth-aside-points li{ display:flex; align-items:center; gap:12px; color:var(--paper); font-family:var(--font-ui); font-size:14.5px; font-weight:600; }
  .auth-aside-points li i{
    width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto;
  }

  .auth-aside .auth-quote{ position:relative; z-index:1; text-align:left; padding:0; margin:0; max-width:420px; }

  .auth-shell{ flex:1 1 50%; max-width:480px; margin:0 auto; padding:56px 40px; gap:0; }
  .auth-card{ background:none; border:none; box-shadow:none; padding:0; }
  .auth-brand--card{ display:none; }
  .auth-quote--mobile{ display:none; }
}

@media (min-width:960px) and (max-width:1180px){
  .auth-aside{ padding:44px 36px; max-width:520px; }
}

@media (min-width:1400px){
  .auth-aside{ max-width:720px; }
  .auth-shell{ max-width:520px; }
}

/* ==========================================================================
   AJAX layer: top progress bar, Facebook-style toasts, button spinner,
   and the fade used when #auth-content is swapped between screens.
   ========================================================================== */

/* ---------- top progress bar ---------- */
#auth-topbar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent),#8b93ff);
  z-index:10000; opacity:0; pointer-events:none;
  box-shadow:0 0 10px var(--accent-glow);
}
#auth-topbar.active{ opacity:1; }

/* ---------- toasts ---------- */
.toast-stack{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:10px; align-items:stretch;
  width:100%; max-width:420px; padding:0 16px; pointer-events:none;
}
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:10px;
  background:var(--ink-850); border:1px solid var(--ink-800); color:var(--paper);
  border-radius:999px; padding:11px 16px; font-family:var(--font-ui); font-size:13.5px; font-weight:600;
  box-shadow:0 14px 34px rgba(0,0,0,.4); width:100%;
  animation:toastIn .3s cubic-bezier(.2,.8,.3,1) both;
}
.toast.hide{ animation:toastOut .22s ease forwards; }
.toast i{ font-size:16px; flex:0 0 auto; }
.toast span{ flex:1; line-height:1.4; }
.toast.success{ border-color:rgba(45,217,168,.4); }
.toast.success i{ color:var(--insight); }
.toast.error{ border-color:rgba(242,65,90,.4); }
.toast.error i{ color:var(--heart); }
.toast.info{ border-color:rgba(88,101,242,.4); }
.toast.info i{ color:var(--accent); }
.toast-close{ background:none; border:none; color:var(--muted-dim); font-size:14px; padding:2px; flex:0 0 auto; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-14px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut{ from{ opacity:1; transform:translateY(0) scale(1); } to{ opacity:0; transform:translateY(-10px) scale(.96); } }

@media (max-width:480px){
  .toast-stack{ top:12px; max-width:none; }
}

/* ---------- button loading state ---------- */
button.is-loading{ opacity:.7; cursor:default; }
.auth-submit{ position:relative; }
.auth-submit.is-loading{ color:transparent; pointer-events:none; opacity:1; }
.auth-submit.is-loading i{ opacity:0; }
.auth-submit.is-loading::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

/* ---------- #auth-content swap fade ---------- */
#auth-content{ transition:opacity .14s ease; }
#auth-content.is-swapping{ opacity:0; }