/* frontend/auth/auth.css — the Khan-style split auth layout (Agent1).
   REBUILT from design_reference/.../assets/auth.js's injected CSS, retargeted onto
   frontend/foundation tokens (same --primary / --indigo-* / --slate-* / radius / shadow names).
   Load AFTER foundation tokens.css + components.css. RTL, Vazirmatn, fa-IR. */

body { background:#fff; }
a { color:var(--primary); } a:hover { color:var(--primary-strong); }

.auth { min-height:100vh; display:grid; grid-template-columns:1.06fr .94fr; }
@media (max-width:940px){ .auth{ grid-template-columns:1fr; } .auth-brand{ display:none !important; } }

/* ── left brand scene ── */
.auth-brand{ position:relative; overflow:hidden; padding:40px 50px 0; display:flex; flex-direction:column;
  background:radial-gradient(circle at 12% 8%, var(--indigo-50), transparent 46%),
             radial-gradient(circle at 92% 6%, #FFF3D6, transparent 34%), #FBFCFF; }
.auth-brand__top{ display:flex; align-items:center; gap:11px; }
.auth-brand__top .nm{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--slate-900); }
.auth-brand__top .nm b{ color:var(--primary); }
.auth-brand__mid{ margin-top:52px; }
.auth-brand__mid h1{ font-size:44px; font-weight:800; line-height:1.28; letter-spacing:-.03em; color:var(--slate-900); }
.auth-brand__mid h1 .hl{ color:var(--primary); }
.auth-brand__mid p{ font-size:16px; color:var(--slate-600); margin-top:18px; max-width:430px; line-height:1.95; }
.auth-scene{ margin-top:auto; }
.auth-scene svg{ width:100%; max-width:520px; display:block; }
.auth-brand__foot{ position:absolute; bottom:20px; inset-inline-start:50px; font-size:12.5px; color:var(--slate-500); }
.fl{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: no-preference){
  .fl.a{ animation:flA 5s ease-in-out infinite; } .fl.b{ animation:flB 6s ease-in-out infinite; } .fl.c{ animation:flA 4.4s ease-in-out infinite; }
  @keyframes flA{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
  @keyframes flB{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-8px) rotate(8deg) } }
}

/* ── right form column ── */
.auth-form{ display:flex; align-items:center; justify-content:center; padding:40px 34px; position:relative; }
/* ✕ close (v2 #4) — verbatim from reference: top-inline-end of the form panel (top-left in RTL),
   rounded square, returns to the landing page. Present on every login + signup page. */
.auth-close{ position:absolute; top:20px; inset-inline-end:20px; z-index:5; width:40px; height:40px;
  display:grid; place-items:center; border-radius:12px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--slate-500); transition:all .15s; }
.auth-close:hover{ border-color:var(--slate-300); background:var(--slate-50); color:var(--slate-800); }
.auth-close svg{ width:19px; height:19px; }
.auth-card{ width:100%; max-width:426px; }
.auth-card .mbrand{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.auth-card .mbrand .nm{ font-size:20px; font-weight:800; } .auth-card .mbrand .nm b{ color:var(--primary); }
@media (min-width:941px){ .auth-card .mbrand{ display:none; } }
.auth-card h2{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--slate-900); }
.auth-card .lead{ color:var(--text-soft); margin-top:8px; margin-bottom:8px; font-size:14.5px; line-height:1.7; }
.auth-back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--text-soft); margin-bottom:16px; cursor:pointer; }
.auth-back:hover{ color:var(--primary); } .auth-back svg{ width:16px; height:16px; }
.row{ display:flex; align-items:center; } .row.between{ justify-content:space-between; }
.center{ text-align:center; }

/* ── role chooser rows ── */
.role-rows{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.role-row{ display:flex; align-items:center; gap:14px; padding:15px 16px; border:2px solid var(--slate-150);
  border-radius:18px; background:#fff; cursor:pointer; transition:all .15s; text-align:start; width:100%; font-family:inherit; }
.role-row:hover{ border-color:var(--indigo-300); transform:translateY(-2px); box-shadow:var(--sh-md); }
.role-row .av{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; flex:0 0 52px; }
.role-row .av svg{ width:26px; height:26px; }
.role-row .tx{ flex:1; min-width:0; }
.role-row .tx .t{ font-weight:800; font-size:16px; color:var(--slate-900); }
.role-row .tx .s{ font-size:12.5px; color:var(--text-soft); margin-top:2px; }
.role-row .go{ color:var(--slate-300); flex:0 0 auto; } .role-row:hover .go{ color:var(--primary); } .role-row .go svg{ width:20px; height:20px; }
.role-row--hl{ border-color:var(--primary) !important; background:var(--indigo-50); box-shadow:0 0 0 3px var(--indigo-100); animation:rowPulse 1.4s ease 2; }
@keyframes rowPulse{ 0%,100%{ box-shadow:0 0 0 3px var(--indigo-100); } 50%{ box-shadow:0 0 0 6px var(--indigo-100); } }

/* ── OTP / notes / helpers ── */
.otp-input{ letter-spacing:.34em; text-align:center; font-weight:700; }
.otp-hint{ font-size:12px; color:var(--text-soft); margin-top:9px; line-height:1.6; }
.otp-sub{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:11px; }
.otp-sub a{ font-size:12.5px; font-weight:700; color:var(--primary); cursor:pointer; }
.otp-sub .resend{ font-size:12.5px; font-weight:600; color:var(--text-faint); }
.otp-sub .resend.ready{ color:var(--primary); cursor:pointer; }
.btn--pill{ border-radius:14px !important; }
#authBtn:disabled{ opacity:.5; cursor:default; box-shadow:none; }
.fl-note{ display:flex; align-items:center; gap:10px; background:var(--warn-bg); color:var(--amber-600);
  border-radius:14px; padding:12px 14px; font-size:13px; font-weight:600; margin:18px 0 22px; line-height:1.5; }
.fl-note svg{ width:20px; height:20px; flex:0 0 auto; }
.form-err{ display:none; align-items:center; gap:8px; background:var(--danger-bg); color:var(--danger);
  border-radius:12px; padding:10px 13px; font-size:12.8px; font-weight:600; margin:2px 0 14px; line-height:1.5; }
.form-err.show{ display:flex; } .form-err svg{ width:17px; height:17px; flex:0 0 auto; }
.rs-check{ width:64px; height:64px; border-radius:50%; background:var(--success-bg); color:var(--success); display:grid; place-items:center; margin:6px auto 16px; }
.rs-check svg{ width:32px; height:32px; stroke-width:2.4; }
.muted{ color:var(--text-soft); }
.foot-links{ text-align:center; margin-top:22px; font-size:12.8px; color:var(--text-soft); line-height:2; }
.foot-links a{ font-weight:700; }

/* ── stepped registration wizard ── */
.reg-steps{ display:flex; align-items:center; gap:8px; margin:6px 0 24px; }
.reg-steps .st{ display:flex; align-items:center; gap:8px; }
.reg-steps .dot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; background:var(--slate-100); color:var(--text-faint); flex:0 0 auto; transition:all .2s; }
.reg-steps .dot svg{ width:15px; height:15px; }
.reg-steps .st.active .dot{ background:var(--primary); color:#fff; box-shadow:0 0 0 4px var(--indigo-100); }
.reg-steps .st.done .dot{ background:var(--success); color:#fff; }
.reg-steps .lbl{ font-size:12.5px; font-weight:700; color:var(--text-faint); }
.reg-steps .st.active .lbl{ color:var(--slate-900); }
.reg-steps .bar{ flex:1; height:2.5px; border-radius:2px; background:var(--slate-100); }
.reg-steps .bar.fill{ background:var(--success); }
@media (max-width:560px){ .reg-steps{ gap:6px; } .reg-steps .lbl{ font-size:11px; } .reg-steps .dot{ width:26px; height:26px; font-size:12px; } }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.reg-nav{ display:flex; gap:10px; margin-top:24px; }
.reg-nav .grow{ flex:1; }

/* wizard brand-side feature cards + mascot */
.rb-midwrap{ margin-top:30px !important; }
.rb-midwrap h1{ font-size:31px !important; }
.rb-midwrap>p{ font-size:14.5px !important; margin-top:12px !important; }
.rb-mascot{ display:flex; justify-content:center; margin-bottom:14px; }
.rb-mascot svg{ width:172px; height:auto; filter:drop-shadow(0 12px 20px rgba(15,23,42,.13)); }
@media (prefers-reduced-motion: no-preference){ .rb-mascot svg{ animation:bobM 4.5s ease-in-out infinite; } @keyframes bobM{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } } }
.rb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; max-width:470px; }
.rb-card{ background:#fff; border:1.5px solid var(--slate-150); border-radius:16px; padding:15px; box-shadow:var(--sh-xs); }
.rb-card .ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:10px; }
.rb-card .ic svg{ width:19px; height:19px; }
.rb-card h4{ font-size:13.5px; font-weight:800; margin:0 0 4px; color:var(--slate-900); }
.rb-card p{ font-size:11.5px; color:var(--slate-600); margin:0; line-height:1.65; }
.school-code{ font-size:24px; font-weight:800; letter-spacing:.05em; background:var(--indigo-50); color:var(--primary-strong); padding:14px; border-radius:14px; margin:16px 0; text-align:center; }