/* ============================================================
   VIPS V2 — Auth screens (login / forgot-pin / reset-pin)
   Split layout + form components. Depends on v2.css (tokens).
   ============================================================ */

/* utility */
.hidden{display:none!important}

/* page shell: soft gradient backdrop like the hero, content centered */
.public-auth-main{
  position:relative;overflow:hidden;
  padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,88px);
  background:radial-gradient(120% 120% at 82% -10%,#ffffff 0%,var(--surface-2) 58%,var(--surface-3) 100%);
}
/* background effects: warm + cool glows */
.public-auth-main::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 560px at 88% -10%,rgba(194,65,12,.14),transparent 60%),
    radial-gradient(460px 460px at -6% 112%,rgba(8,28,56,.07),transparent 60%);
}
/* faint blueprint grid, fading from the top */
.public-auth-main::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask:radial-gradient(120% 90% at 50% -10%,#000 0%,transparent 72%);
          mask:radial-gradient(120% 90% at 50% -10%,#000 0%,transparent 72%);
}
[data-theme="dark"] .public-auth-main{
  background:radial-gradient(120% 120% at 82% -10%,#103a5e 0%,#0a2138 46%,var(--navy) 82%);
}
[data-theme="dark"] .public-auth-main::before{
  background:
    radial-gradient(560px 560px at 88% -10%,rgba(194,65,12,.30),transparent 60%),
    radial-gradient(460px 460px at -6% 112%,rgba(120,170,230,.10),transparent 60%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .public-auth-main{
    background:radial-gradient(120% 120% at 82% -10%,#103a5e 0%,#0a2138 46%,var(--navy) 82%);
  }
  :root:not([data-theme="light"]) .public-auth-main::before{
    background:
      radial-gradient(560px 560px at 88% -10%,rgba(194,65,12,.30),transparent 60%),
      radial-gradient(460px 460px at -6% 112%,rgba(120,170,230,.10),transparent 60%);
  }
}

.public-auth-shell{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start;
}
/* centered single-column variant */
.public-auth-shell--solo{display:block;max-width:560px}
.auth-intro{text-align:center;margin:0 0 22px}
.auth-intro .auth-kicker{justify-content:center}
/* left/side variant (login): intro text on the left, form card on the right */
.auth-intro--side{text-align:left;align-self:center;margin:0;padding-top:4px}
.auth-intro--side .auth-kicker{justify-content:flex-start}
.auth-intro--side .auth-intro-text{margin:0;max-width:42ch}
.auth-intro h1{font-size:clamp(24px,3.4vw,32px);line-height:1.16;letter-spacing:-.03em;color:var(--text-heading);margin:0 0 12px}
.auth-intro-text{font-size:14.5px;line-height:1.6;color:var(--text-secondary);margin:0 auto;max-width:48ch}
[data-theme="dark"] .auth-intro h1{color:#f3f6fa}
[data-theme="dark"] .auth-intro-text{color:#c3d2e2}
[data-theme="dark"] .auth-intro .auth-kicker{color:#f0a173}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .auth-intro h1{color:#f3f6fa}
  :root:not([data-theme="light"]) .auth-intro-text{color:#c3d2e2}
  :root:not([data-theme="light"]) .auth-intro .auth-kicker{color:#f0a173}
}

/* ---------- LEFT: marketing side (now a card, so it doesn't float) ---------- */
.auth-side{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-2);padding:clamp(24px,3vw,32px)}
.auth-kicker{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-strong);display:inline-flex;align-items:center;gap:8px;margin:0 0 14px}
.auth-kicker::before{content:"";width:16px;height:2px;background:var(--brand);border-radius:2px}
[data-theme="dark"] .auth-kicker, :root:not([data-theme="light"]) .auth-side .auth-kicker{color:#f0a173}
.auth-side h1{font-size:clamp(26px,3.6vw,38px);line-height:1.12;letter-spacing:-.03em;color:var(--text-heading);margin:0 0 14px}
.auth-side > p{font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:52ch;margin:0}
[data-theme="dark"] .auth-side h1{color:#f3f6fa}
[data-theme="dark"] .auth-side > p{color:#c3d2e2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .auth-side h1{color:#f3f6fa}
  :root:not([data-theme="light"]) .auth-side > p{color:#c3d2e2}
  :root:not([data-theme="light"]) .auth-side .auth-kicker{color:#f0a173}
}

/* highlighted art cards */
.auth-hero-art{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.auth-art-card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);padding:16px;
  display:flex;flex-direction:column;gap:6px}
.auth-art-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-strong);margin-bottom:4px}
.auth-art-icon svg{width:21px;height:21px}
.auth-art-card strong{font-size:14.5px;color:var(--text-heading)}
.auth-art-card span{font-size:12.5px;color:var(--text-muted);line-height:1.5}

/* benefit list */
.auth-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-benefit{display:flex;gap:12px;align-items:flex-start}
.auth-benefit-icon{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--brand-strong)}
.auth-benefit-icon svg{width:19px;height:19px}
.auth-benefit strong{display:block;font-size:14px;color:var(--text-heading);margin-bottom:2px}
.auth-benefit span{font-size:12.5px;color:var(--text-muted);line-height:1.5}

/* ---------- RIGHT: form panel (white card) ---------- */
.auth-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-3);padding:clamp(22px,3vw,32px);position:relative}
.auth-panel-head{margin-bottom:22px}
.auth-panel-head h2{font-size:20px;letter-spacing:-.02em;color:var(--text-heading);margin:0 0 8px}
.auth-panel-head > p{font-size:14px;color:var(--text-secondary);line-height:1.55;margin:0}
.auth-zone-chip{
  display:inline-block;font-family:var(--font-mono);font-size:11.5px;color:var(--brand-strong);
  background:var(--brand-tint);border:1px solid var(--brand-line);border-radius:var(--pill);
  padding:5px 12px;margin-bottom:14px}

/* tabs */
.auth-tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--pill);
  padding:4px;gap:4px;margin:0 0 20px}
.auth-tab{border:0;background:transparent;color:var(--text-secondary);font-weight:600;font-size:14px;
  padding:8px 20px;border-radius:var(--pill);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.auth-tab.is-active{background:var(--surface);color:var(--brand-strong);box-shadow:var(--sh-1)}

/* form panels / stages */
.auth-form-panel{display:none}
.auth-form-panel.is-active{display:block;animation:authrise .26s var(--ease)}
@keyframes authrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth-stage{display:none}
.auth-stage.is-visible{display:block;animation:authrise .26s var(--ease)}
.auth-panel-meta{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin:0 0 20px}

.auth-form-grid{display:grid;gap:18px}
.auth-field label{display:block;font-size:13px;font-weight:600;color:var(--text-heading);margin-bottom:7px}

/* inputs (.text-box reused from old markup) */
.public-auth-main .text-box{
  width:100%;height:50px;border:1.5px solid var(--border-control);border-radius:var(--r-m);
  background:var(--surface);color:var(--text-heading);font-family:var(--font-sans);font-size:15px;
  padding:0 14px;transition:border-color var(--dur-1),box-shadow var(--dur-1);outline:none}
.public-auth-main .text-box::placeholder{color:var(--text-muted)}
.public-auth-main .text-box:focus{border-color:var(--brand);box-shadow:var(--focus-ring)}
.public-auth-main .text-box[aria-invalid="true"],
.public-auth-main .auth-field.has-error .text-box{border-color:var(--danger);box-shadow:0 0 0 3px rgba(179,36,20,.22)}

.auth-error{color:var(--danger);font-size:12.5px;margin-top:6px;min-height:0}
.auth-error:empty{display:none}
.auth-helper{font-size:12.5px;color:var(--text-muted);line-height:1.5}
.auth-helper code, .auth-panel-meta code, .auth-callout code{font-family:var(--font-mono);font-size:.92em;
  color:var(--brand-strong);background:var(--brand-tint);padding:1px 6px;border-radius:5px}

.auth-link-btn{border:0;background:0;color:var(--brand-strong);font-weight:600;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0;font-family:inherit}
.auth-link-btn:hover{color:var(--brand-hover)}
.auth-back-btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:6px}

.auth-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.auth-inline--md{margin:20px 0 22px}
.auth-inline--lg{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.auth-inline--compact{margin-top:18px}

.auth-submit-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* buttons (.btn.primary / .btn.ghost reused from old markup) */
.public-auth-main .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);
  font-weight:600;font-size:14.5px;line-height:1;height:48px;padding:0 22px;border-radius:var(--r-s);
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)}
.public-auth-main .btn:active{transform:translateY(1px)}
.public-auth-main .btn.primary{background:var(--brand-strong);color:var(--on-brand);border-color:var(--brand-strong)}
.public-auth-main .btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);box-shadow:0 6px 18px -6px var(--brand)}
.public-auth-main .btn.ghost{background:var(--surface);color:var(--text-heading);border-color:var(--border-control)}
.public-auth-main .btn.ghost:hover{background:var(--surface-2)}
/* loading state — spinner inside the button (auto-validation) */
.public-auth-main .btn.is-loading{position:relative;color:transparent;pointer-events:none}
.public-auth-main .btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:authspin .7s linear infinite}
.public-auth-main .btn.ghost.is-loading::after{border-color:rgba(40,56,76,.3);border-top-color:var(--brand-strong)}
@keyframes authspin{to{transform:rotate(360deg)}}

/* OTP callout + meta */
.auth-callout{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info);
  border-radius:var(--r-m);padding:12px 14px;font-size:13px;line-height:1.5;margin-top:10px;margin-bottom:16px}
[data-theme="dark"] .auth-callout{color:#9cc3e8}
.auth-otp-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.auth-countdown{font-size:12.5px;color:var(--text-muted)}
.auth-countdown strong{color:var(--brand-strong);font-family:var(--font-mono)}
.auth-resend-btn{border:0;background:0;color:var(--brand-strong);font-weight:600;font-size:13px;cursor:pointer;padding:0;font-family:inherit}
.auth-resend-btn:disabled{color:var(--text-disabled);cursor:not-allowed;text-decoration:none}
.auth-resend-btn:not(:disabled){text-decoration:underline;text-underline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .public-auth-shell{grid-template-columns:1fr;gap:28px}
  .auth-side{order:2}
  .auth-panel{order:1}
  .auth-hero-art,.auth-benefits{grid-template-columns:1fr}
}
@media (max-width:520px){
  .auth-tabs{display:flex}
  .auth-tab{flex:1;text-align:center}
  .auth-submit-row .btn{width:100%}
  .auth-inline{flex-direction:column;align-items:flex-start;gap:6px}
}