/* ============================================================================


   AUTH v2 · premium split shell — TestKav Skills


   Loads after auth.css. Uses --sk-* tokens from testkav-ds.css.


   ============================================================================ */


:root{


  --au-ink:#15171a;


  --au-glass:rgba(255,255,255,.06);


  --au-glass-line:rgba(255,255,255,.14);


}


html,body{height:100%}


body{margin:0;background:var(--sk-bg,#f7f7f5)}





/* ---- shell -------------------------------------------------------------- */


.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(440px,560px) 1fr}


.auth-side{display:flex;align-items:center;justify-content:center;padding:104px 28px 56px;background:#fff}





/* ---- brand panel (art side) --------------------------------------------- */


.auth-brand{position:relative;overflow:hidden;background:var(--au-ink);


  display:flex;flex-direction:column;justify-content:center;padding:64px clamp(36px,6vw,96px);color:#fff}


.auth-brand{background:


  radial-gradient(120% 90% at 15% 8%,#1d2025 0%,var(--au-ink) 46%,#0d0e10 100%)}





.auth-brand .dots{position:absolute;inset:0;opacity:.35;pointer-events:none;


  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);


  background-size:26px 26px;


  -webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 100%);


          mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 100%)}


.auth-brand .thread{position:absolute;inset-inline:0;bottom:8%;width:100%;height:120px;


  color:var(--sk-amber,#ffc218);opacity:.55;pointer-events:none}





.auth-brand-in{position:relative;max-width:520px}


.auth-brand-logo{height:42px;width:auto;display:block;margin-bottom:clamp(28px,5vh,54px)}


.auth-brand h2{font-size:clamp(30px,3.4vw,44px);font-weight:900;letter-spacing:-.8px;


  line-height:1.55;margin:0 0 14px;color:#fff}


.auth-brand h2 b{color:var(--sk-amber,#ffc218);font-weight:900}


.auth-brand>.auth-brand-in p{font-size:15px;line-height:2.1;color:rgba(255,255,255,.62);margin:0 0 30px;max-width:46ch}


.auth-chips{display:flex;gap:10px;flex-wrap:wrap}


.auth-chip{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;


  color:rgba(255,255,255,.88);background:var(--au-glass);border:1px solid var(--au-glass-line);


  border-radius:999px;padding:9px 16px;backdrop-filter:blur(4px)}


.auth-chip i{width:7px;height:7px;border-radius:50%;background:var(--sk-amber,#ffc218);flex-shrink:0}


.auth-brand-foot{position:absolute;bottom:26px;inset-inline-start:clamp(36px,6vw,96px);


  font-size:11.5px;color:rgba(255,255,255,.35)}





/* ---- card refinements ---------------------------------------------------- */


.auth-card{width:100%;max-width:400px;background:transparent;border:0;box-shadow:none;


  border-radius:0;padding:0;animation:au-rise .55s var(--sk-ease,cubic-bezier(.2,.7,.2,1)) both}


@keyframes au-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}


.brand-box{align-items:center;margin-bottom:26px}


.brand-mark{background:var(--sk-amber,#ffc218);color:#181a1d;font-weight:800;border-radius:14px;


  box-shadow:0 10px 24px -10px rgba(233,173,0,.55)}


.brand-box h1{font-size:17px;font-weight:800;letter-spacing:-.2px}


.brand-box p{font-size:12px;color:var(--sk-ink-faint,#8a8f98)}


.auth-title h2{font-size:23px;font-weight:900;letter-spacing:-.4px;color:var(--sk-ink,#15171a)}


.auth-title p{font-size:13.5px;line-height:2;color:var(--sk-ink-soft,#5b6069)}





/* ---- choice rows ---------------------------------------------------------- */


.choice-grid{display:flex;flex-direction:column;gap:11px;margin-top:22px}


.choice-item{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:15px;


  background:var(--sk-surface,#fff);border:1px solid var(--sk-line,#e7e6e2);


  transition:border-color .18s var(--sk-ease),transform .18s var(--sk-ease),box-shadow .18s var(--sk-ease)}


.choice-item:hover{border-color:var(--sk-amber,#ffc218);transform:translateY(-2px);


  box-shadow:0 14px 30px -18px rgba(233,173,0,.45)}


/* آیکون روش ورود: مینیمال — بدون پس‌زمینه و قاب، مشکی، دقیقاً وسط */


/* سلکتور .choice-item .choice-ic برای غلبه بر .choice-item span (رنگ/line-height) لازم است */


.choice-item .choice-ic{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;


  align-self:center;line-height:0;background:none;border:none;color:var(--sk-ink,#181a1d)}


.choice-item .choice-ic svg{width:24px;height:24px;display:block}


.choice-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}


.choice-item strong{font-size:14.5px;font-weight:700;color:var(--sk-ink,#15171a)}


.choice-item span{font-size:12px;color:var(--sk-ink-faint,#8a8f98);line-height:1.8}


.choice-arrow{flex-shrink:0;color:var(--sk-ink-faint,#8a8f98);transition:transform .18s var(--sk-ease),color .18s}


.choice-arrow svg{width:17px;height:17px}


.choice-item:hover .choice-arrow{color:var(--sk-amber-deep,#e9ad00);transform:translateX(-3px)}





.auth-footer-link{margin-top:24px;padding-top:20px;border-top:1px solid var(--sk-line,#e7e6e2);


  font-size:13px;color:var(--sk-ink-soft,#5b6069);text-align:center}


.auth-footer-link a{color:var(--sk-amber-deep,#e9ad00);font-weight:700;text-decoration:none}


.auth-footer-link a:hover{text-decoration:underline}





/* ---- responsive ----------------------------------------------------------- */


@media(max-width:1023px){


  .auth-shell{grid-template-columns:1fr}


  .auth-brand{display:none}


  .auth-side{min-height:100vh;padding:86px 18px 40px;background:#fff}


}


@media(max-width:480px){.auth-card{padding:28px 20px 24px;border-radius:18px}}





@media(prefers-reduced-motion:reduce){


  .auth-card{animation:none}


  .auth-brand::before,.auth-brand::after{animation:none}


}





/* brand identity: auth shell body in AzarMehr, headings (h*) in Pinar */


.auth-shell,.auth-shell *{font-family:'AzarMehr','Pinar',Tahoma,sans-serif}


/* base.css locks headings/inputs with !important — outrank inside the shell */


.auth-shell h1,.auth-shell h2,.auth-shell h3,.auth-shell h4,.auth-shell h5,


.auth-shell h6{font-family:'Pinar','AzarMehr',Tahoma,sans-serif!important}


.auth-shell button,.auth-shell input,


.auth-shell select,.auth-shell textarea{font-family:'AzarMehr','Pinar',Tahoma,sans-serif!important}





/* ============ brand art v2: watermark tick, twinkle stars, drawn underline, stagger ============ */


.auth-brand .wm{position:absolute;width:min(64vh,620px);height:min(64vh,620px);


  inset-inline-end:-12%;bottom:-14%;color:var(--sk-amber,#ffc218);opacity:.07;


  transform:rotate(-8deg);pointer-events:none}


.auth-brand .star{position:absolute;width:5px;height:5px;border-radius:50%;


  background:var(--sk-amber,#ffc218);opacity:0;pointer-events:none;


  box-shadow:0 0 10px 1px rgba(255,194,24,.6);animation:au-twinkle 4.2s ease-in-out infinite}


.auth-brand .s1{top:14%;inset-inline-start:18%;animation-delay:.2s}


.auth-brand .s2{top:26%;inset-inline-end:22%;width:4px;height:4px;animation-delay:1.3s}


.auth-brand .s3{top:52%;inset-inline-start:10%;width:3.5px;height:3.5px;animation-delay:2.1s}


.auth-brand .s4{bottom:30%;inset-inline-end:14%;animation-delay:.8s}


.auth-brand .s5{top:8%;inset-inline-end:40%;width:3px;height:3px;animation-delay:2.9s}


.auth-brand .s6{bottom:18%;inset-inline-start:34%;width:4px;height:4px;animation-delay:1.8s}


@keyframes au-twinkle{0%,100%{opacity:0;transform:scale(.6)}45%{opacity:.9;transform:scale(1)}60%{opacity:.35}}





/* headline underline: draws itself in */


.auth-brand .hl{position:relative;display:inline-block}


.auth-brand .hl b{position:relative;z-index:1}


.auth-brand .hl svg{position:absolute;inset-inline:0;bottom:-4px;width:100%;height:12px;


  color:var(--sk-amber,#ffc218)}


.auth-brand .hl svg path{stroke-dasharray:130;stroke-dashoffset:130;


  animation:au-draw .9s .75s var(--sk-ease,cubic-bezier(.2,.7,.2,1)) forwards}


@keyframes au-draw{to{stroke-dashoffset:0}}





/* staggered entrance */


.auth-brand-in>*{opacity:0;transform:translateY(12px);


  animation:au-rise .6s var(--sk-ease,cubic-bezier(.2,.7,.2,1)) forwards}


.auth-brand-in>*:nth-child(1){animation-delay:.05s}


.auth-brand-in>*:nth-child(2){animation-delay:.16s}


.auth-brand-in>*:nth-child(3){animation-delay:.28s}


.auth-brand-in>*:nth-child(4){animation-delay:.4s}


.auth-chip{transition:transform .2s var(--sk-ease),border-color .2s}


.auth-chip:hover{transform:translateY(-3px);border-color:rgba(255,194,24,.55)}





@media(prefers-reduced-motion:reduce){


  .auth-brand .star,.auth-brand .hl svg path{animation:none}


  .auth-brand .hl svg path{stroke-dashoffset:0}


  .auth-brand-in>*{animation:none;opacity:1;transform:none}


}





/* ---- subtle home link on the form side ---- */


.auth-side{position:relative}


.auth-home{position:absolute;top:22px;inset-inline-start:22px;width:40px;height:40px;border-radius:50%;


  display:grid;place-items:center;color:var(--sk-ink-faint,#8a8f98);border:1px solid var(--sk-line,#e7e6e2);


  background:#fff;transition:color .18s var(--sk-ease),border-color .18s var(--sk-ease),transform .18s var(--sk-ease)}


.auth-home svg{width:19px;height:19px}


.auth-home:hover{color:var(--sk-ink,#15171a);border-color:var(--sk-amber,#ffc218);transform:translateY(-2px)}





/* ---- home icon button (all auth pages) ---- */


.auth-side{position:relative}


.auth-home{position:absolute;inset-block-start:22px;inset-inline-start:24px;width:42px;height:42px;


  display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--sk-ink,#15171a);


  border:1px solid var(--sk-line,#e7e6e2);transition:border-color .18s var(--sk-ease),transform .18s var(--sk-ease),color .18s}


.auth-home svg{width:19px;height:19px}


.auth-home:hover{border-color:var(--sk-amber,#ffc218);color:var(--sk-amber-deep,#e9ad00);transform:translateY(-2px)}


@media(max-width:1023px){.auth-home{inset-block-start:16px;inset-inline-start:16px}}