:root{
    --orange:#F6A73C;
    --orange-deep:#EE9420;
    --ink:#26262E;
    --ink-soft:#7b7b86;
    --paper:#ffffff;
    --stroke:#ececf1;
    --field-bg:#ffffff;
    --field-shadow:0 2px 8px rgba(0,0,0,.06);
    --ease:cubic-bezier(.65,0,.35,1);
  }
  *{box-sizing:border-box;}

  /* توجه: این بخش قبلاً روی body بود که باعث می‌شد هدر/فوتر واقعی سایت
     هم داخل flex این صفحه قاطی بشن و روی هم بیفتن. حالا فقط دور خودِ
     کارت ورود/ثبت‌نام اعمال می‌شود (ظاهر خودِ کارت هیچ تغییری نکرده). */
  .arefacademi-auth-wrap{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f4f1ec;
    font-family:'Vazirmatn',sans-serif;
    padding:24px;
  }

  .stage{ perspective:1600px; }

  .card{
    position:relative;
    width:min(860px,94vw);
    height:480px;
    max-height:88vh;
    border-radius:26px;
    overflow:hidden;
    background:var(--paper);
    box-shadow:0 24px 60px -20px rgba(38,38,46,.35), 0 2px 10px rgba(38,38,46,.06);
    transition:box-shadow .45s var(--ease);
  }

  .panel{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    transition:transform .5s var(--ease);
    will-change:transform;
  }
  .info-panel{ left:0; transform:translateX(0%); background:var(--paper); z-index:2; overflow:hidden; }
  .form-panel{ left:50%; transform:translateX(0%); background:linear-gradient(155deg,var(--orange) 0%,var(--orange-deep) 100%); z-index:1; }

  .card.mode-login .info-panel{ transform:translateX(100%); }
  .card.mode-login .form-panel{ transform:translateX(-100%); }

  /* ---------- Info (white) panel ---------- */
  .info-inner{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:32px 28px 0;
    z-index:2;
  }
  .logo-box{
    width:108px;
    height:132px;
    border:1.6px solid var(--ink);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:sans-serif;
    font-weight:600;
    font-size:22px;
    color:var(--ink);
    letter-spacing:.5px;
    flex-shrink:0;
    cursor:default;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  }
  .logo-box:hover{
    transform:translateY(-3px) scale(1.03);
    border-color:var(--orange-deep);
    box-shadow:0 14px 26px -14px rgba(38,38,46,.35);
  }

  .prompt-block{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
  }
  .card:not(.mode-login) .prompt-login{ display:flex; }
  .card.mode-login .prompt-signup{ display:flex; }

  .prompt-block p{
    margin:0;
    font-size:14.5px;
    font-weight:500;
    color:var(--ink);
  }
  .btn-ghost{
    position:relative;
    overflow:hidden;
    appearance:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-weight:700;
    font-size:16px;
    color:var(--ink);
    background:var(--orange);
    padding:11px 46px;
    border-radius:14px;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
    box-shadow:0 6px 16px -6px rgba(238,148,32,.7);
  }
  .btn-ghost::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
    transform:translateX(-120%);
    transition:transform .55s var(--ease);
  }
  .btn-ghost:hover{ transform:translateY(-2px) scale(1.03); background:var(--orange-deep); box-shadow:0 10px 22px -8px rgba(238,148,32,.85); }
  .btn-ghost:hover::after{ transform:translateX(120%); }
  .btn-ghost:active{ transform:translateY(0) scale(.98); }

  /* decorative staff, lives inside the white panel so it travels with it */
  .staff-deco{
    position:absolute;
    left:0;
    bottom:-2%;
    width:100%;
    height:auto;
    pointer-events:none;
    opacity:.92;
    transition:transform .55s var(--ease);
  }
  .card.mode-login .staff-deco{ transform:scaleX(-1); }

  .note{ transform-box:fill-box; transform-origin:center; animation:noteFloat 3.2s ease-in-out infinite; }
  .n1{ animation-duration:3.1s; animation-delay:0s; }
  .n2{ animation-duration:2.6s; animation-delay:.25s; }
  .n3{ animation-duration:3.4s; animation-delay:.5s; }
  .n4{ animation-duration:2.9s; animation-delay:.15s; }
  .n5{ animation-duration:3.6s; animation-delay:.4s; }
  .n6{ animation-duration:2.8s; animation-delay:.6s; }
  .n7{ animation-duration:3.0s; animation-delay:.35s; }
  @keyframes noteFloat{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-3.5px) rotate(-2.5deg); }
  }
  @media (prefers-reduced-motion:reduce){
    .note{ animation:none; }
  }

  /* ---------- Form (orange) panel ---------- */
  .form-inner{
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    padding:26px 40px;
  }
  form{
    width:100%;
    display:none;
    flex-direction:column;
    gap:8px;
  }
  .card:not(.mode-login) .form-signup{ display:flex; }
  .card.mode-login .form-login{ display:flex; }

  .form-title{
    margin:0 0 2px;
    font-size:24px;
    font-weight:800;
    color:#fff;
  }
  .form-sub{
    margin:0 0 8px;
    font-size:13px;
    font-weight:500;
    color:rgba(255,255,255,.85);
  }

  .field{
    width:100%;
    border:none;
    outline:none;
    border-radius:999px;
    background:var(--field-bg);
    box-shadow:var(--field-shadow);
    padding:8.5px 16px;
    font-family:inherit;
    font-size:12px;
    color:var(--ink);
    text-align:right;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .field::placeholder{ color:#b3b3ba; }
  .field:hover{ box-shadow:0 3px 10px rgba(0,0,0,.09); }
  .field:focus{ box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.5); transform:translateY(-1px); }

  .row-code{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:2px;
  }
  .code-btn{
    appearance:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-size:11px;
    font-weight:600;
    color:var(--orange-deep);
    background:#fff;
    padding:6px 14px;
    border-radius:999px;
    box-shadow:var(--field-shadow);
    transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .code-btn:hover{ transform:translateY(-1px) scale(1.04); box-shadow:0 5px 14px rgba(0,0,0,.14); }
  .code-btn:active{ transform:translateY(0) scale(.97); }

  .otp{
    display:flex;
    gap:8px;
    justify-content:flex-end;
  }
  .otp input{
    width:32px;
    height:32px;
    border:none;
    border-radius:9px;
    text-align:center;
    font-size:13px;
    background:#fff;
    box-shadow:var(--field-shadow);
    outline:none;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .otp input:hover{ box-shadow:0 3px 10px rgba(0,0,0,.09); }
  .otp input:focus{ box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.5); transform:translateY(-1px) scale(1.05); }

  .btn-main{
    position:relative;
    overflow:hidden;
    appearance:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-weight:800;
    font-size:13px;
    color:var(--orange-deep);
    background:#fff;
    padding:9px 0;
    border-radius:999px;
    margin-top:5px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    transition:transform .22s var(--ease), letter-spacing .22s var(--ease), box-shadow .22s var(--ease);
  }
  .btn-main::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,transparent 20%,rgba(255,180,90,.35) 50%,transparent 80%);
    transform:translateX(-120%);
    transition:transform .55s var(--ease);
  }
  .btn-main:hover{ transform:translateY(-2px) scale(1.015); letter-spacing:.3px; box-shadow:0 10px 20px rgba(0,0,0,.14); }
  .btn-main:hover::after{ transform:translateX(120%); }
  .btn-main:active{ transform:translateY(0) scale(.98); }

  /* content choreography: quick fade + rise, slightly staggered after slide begins */
  .info-inner > *, form > *{
    opacity:0;
    transform:translateY(6px);
    animation:rise .38s var(--ease) forwards;
  }
  .card.mode-login .prompt-signup > *,
  .card:not(.mode-login) .prompt-login > *{ animation-delay:.16s; }
  form > *:nth-child(1){animation-delay:.16s;}
  form > *:nth-child(2){animation-delay:.20s;}
  form > *:nth-child(3){animation-delay:.24s;}
  form > *:nth-child(4){animation-delay:.28s;}
  form > *:nth-child(5){animation-delay:.32s;}
  form > *:nth-child(6){animation-delay:.36s;}
  form > *:nth-child(7){animation-delay:.40s;}
  @keyframes rise{ to{ opacity:1; transform:translateY(0);} }

  /* =====================================================================
     OTP VERIFICATION FLOW — scoped feature styles.
     Nothing outside .code-btn / .otp is touched; existing selectors,
     spacing, colors, radii and breakpoints above are untouched.
     ===================================================================== */

  @property --otp-pct{ syntax:'<number>'; inherits:false; initial-value:0; }

  /* ---- Receive-code button: loading / ripple / glow ---- */
  .code-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:6px; }
  .code-btn-ripple{
    position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(circle, rgba(238,148,32,.35) 0%, transparent 70%);
    opacity:0; transform:scale(.4); pointer-events:none;
  }
  .code-btn[data-state="loading"] .code-btn-ripple{
    animation:otpRipple .6s var(--ease);
  }
  @keyframes otpRipple{
    0%{ opacity:.9; transform:scale(.3); }
    100%{ opacity:0; transform:scale(2.2); }
  }
  .code-btn[data-state="loading"]{
    box-shadow:0 0 0 0 rgba(238,148,32,.55);
    animation:otpGlow 1.1s ease-in-out infinite;
    cursor:progress;
  }
  @keyframes otpGlow{
    0%,100%{ box-shadow:0 0 0 0 rgba(238,148,32,.45); }
    50%{ box-shadow:0 0 10px 2px rgba(238,148,32,.55); }
  }
  .code-btn-spinner{
    display:inline-block;
    width:0; height:0; border-radius:50%;
    border:0 solid rgba(238,148,32,.35);
    opacity:0;
    transition:width .2s var(--ease), height .2s var(--ease);
  }
  .code-btn[data-state="loading"] .code-btn-spinner{
    width:11px; height:11px; opacity:1;
    border-width:2px; border-top-color:var(--orange-deep);
    animation:otpSpin .7s linear infinite;
  }
  @keyframes otpSpin{ to{ transform:rotate(360deg); } }
  .code-btn[data-state="loading"] .code-btn-label,
  .code-btn[data-state="sent"] .code-btn-label{ opacity:.75; }

  /* button morphs in-place into the resend / countdown control */
  .code-btn[data-state="sent"]{
    cursor:default;
    padding-inline-start:22px;
  }
  .code-btn[data-state="sent"]::before{
    content:"";
    position:absolute; right:8px; top:50%;
    width:12px; height:12px; margin-top:-6px;
    border-radius:50%;
    background:
      conic-gradient(var(--orange-deep) calc(var(--otp-pct)*1%), rgba(238,148,32,.18) 0);
    transition:--otp-pct .3s linear;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.4px));
            mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.4px));
  }
  .code-btn[data-state="ready"]{ animation:otpReadyPulse 1.6s ease-in-out infinite; }
  @keyframes otpReadyPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(238,148,32,.4); }
    50%{ box-shadow:0 0 0 5px rgba(238,148,32,0); }
  }

  /* ---- OTP digit group: reveal / active / filled / verifying / error ---- */
  .otp{ position:relative; z-index:2; }
  .otp.otp-hidden{
    opacity:0;
    filter:blur(6px);
    transform:translateY(10px) scale(.95);
    pointer-events:none;
  }
  .otp:not(.otp-hidden){
    opacity:1; filter:blur(0); transform:translateY(0) scale(1);
  }
  .otp{
    transition:opacity .5s cubic-bezier(.16,1,.3,1),
               filter .5s cubic-bezier(.16,1,.3,1),
               transform .5s cubic-bezier(.16,1,.3,1);
  }

  .otp-ring{
    position:absolute; inset:-4px;
    border-radius:12px;
    pointer-events:none;
    opacity:0;
    background:conic-gradient(from 0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 18%, rgba(255,255,255,0) 36%);
    transition:opacity .3s var(--ease);
  }
  .otp[data-verifying="true"] .otp-ring{
    opacity:.9;
    animation:otpRingSpin 1.1s linear infinite;
  }
  @keyframes otpRingSpin{ to{ transform:rotate(360deg); } }

  .otp-digit{
    position:relative;
    width:32px; height:32px; border:none; outline:none;
    border-radius:9px; text-align:center; font-size:13px;
    background:#fff; box-shadow:var(--field-shadow);
    font-family:inherit;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  }
  .otp-digit:hover{ box-shadow:0 3px 10px rgba(0,0,0,.09); z-index:3; }
  .otp-digit:focus{
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.55);
    transform:translateY(-1px) scale(1.05);
    z-index:4;
  }
  .otp-digit.is-filled{ animation:otpDigitPop .28s var(--ease); }
  @keyframes otpDigitPop{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.16); box-shadow:0 0 0 3px rgba(255,255,255,.7); }
    100%{ transform:scale(1); }
  }
  .otp[data-state="error"] .otp-digit{
    animation:otpShake .38s var(--ease);
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(255,90,90,.65);
  }
  @keyframes otpShake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-4px); }
    40%{ transform:translateX(4px); }
    60%{ transform:translateX(-3px); }
    80%{ transform:translateX(3px); }
  }
  .otp[data-state="success"] .otp-digit{
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(90,200,140,.7);
  }

  .otp-status{
    max-height:0;
    margin:0;
    font-size:11px;
    font-weight:500;
    text-align:right;
    color:rgba(255,255,255,.9);
    opacity:0;
    overflow:hidden;
    transform:translateY(-3px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), max-height .25s var(--ease), margin .25s var(--ease);
  }
  .otp-status.is-visible{ opacity:1; transform:translateY(0); max-height:16px; margin:2px 0 0; }
  .otp-status.is-error{ color:#ffd7d7; }
  .otp-status.is-success{ color:#e6ffef; }

  /* ---- collapse the whole request row once verified ---- */
  .row-code{
    position:relative;
    z-index:1;
    max-height:80px;
    transition:max-height .45s var(--ease), opacity .4s var(--ease), transform .4s var(--ease), margin .4s var(--ease);
  }
  .row-code:hover, .row-code:focus-within{ z-index:5; }
  .row-code.is-collapsing{
    overflow:hidden;
    max-height:0; opacity:0; transform:scale(.97); margin-top:-10px; pointer-events:none;
  }
  #otpPhone.is-collapsing{
    max-height:0; opacity:0; transform:scale(.97); padding-top:0; padding-bottom:0;
    margin:0; border-width:0; pointer-events:none; overflow:hidden;
    transition:max-height .4s var(--ease), opacity .3s var(--ease), transform .3s var(--ease),
               padding .4s var(--ease), margin .4s var(--ease), border-width .4s var(--ease);
  }

  /* ---- success confirmation — charcoal music-academy flourish ---- */
  .otp-success{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    max-height:0; padding:0; margin:0; overflow:visible;
    opacity:0; transform:translateY(8px) scale(.96);
    transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1),
               max-height .45s cubic-bezier(.16,1,.3,1), padding .45s cubic-bezier(.16,1,.3,1);
  }
  .otp-success.is-visible{
    opacity:1; transform:translateY(0) scale(1);
    max-height:120px; padding:14px 0 2px;
  }

  /* charcoal stage disc behind the checkmark, with a soft pulsing ring —
     evokes a spotlighted stage rather than a plain generic success tick */
  .otp-success-stage{
    position:absolute;
    top:6px; left:50%;
    width:64px; height:64px;
    margin-left:-32px;
    border-radius:50%;
    background:radial-gradient(circle at 50% 38%, #34322f 0%, #221f1c 62%, #16140f 100%);
    box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
    opacity:0; transform:scale(.6);
  }
  .otp-success.is-visible .otp-success-stage{
    animation:otpStageIn .5s var(--ease) forwards, otpStagePulse 2.2s ease-out .5s 2;
  }
  @keyframes otpStageIn{
    to{ opacity:1; transform:scale(1); }
  }
  @keyframes otpStagePulse{
    0%{ box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 0 rgba(246,167,60,.45); }
    70%{ box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 14px rgba(246,167,60,0); }
    100%{ box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 0 rgba(246,167,60,0); }
  }

  .otp-success-icon-wrap{ position:relative; z-index:1; display:inline-flex; margin-top:6px; }
  .otp-success-icon{ width:38px; height:38px; }
  .otp-success-circle{
    fill:none; stroke:var(--orange,#F6A73C); stroke-width:3;
    stroke-dasharray:126; stroke-dashoffset:126;
  }
  .otp-success.is-visible .otp-success-circle{
    animation:otpDrawCircle .5s var(--ease) forwards;
    filter:drop-shadow(0 0 7px rgba(246,167,60,.65));
  }
  .otp-success-tick{
    fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:36; stroke-dashoffset:36;
  }
  .otp-success.is-visible .otp-success-tick{
    animation:otpDrawTick .35s var(--ease) .42s forwards;
  }
  @keyframes otpDrawCircle{ to{ stroke-dashoffset:0; } }
  @keyframes otpDrawTick{ to{ stroke-dashoffset:0; } }
  .otp-success-text{
    margin:0; font-size:13px; font-weight:600; color:#fff;
    opacity:0; transform:translateY(4px);
    transition:opacity .3s var(--ease) .55s, transform .3s var(--ease) .55s;
  }
  .otp-success.is-visible .otp-success-text{ opacity:1; transform:translateY(0); }
  .otp-spark{
    position:absolute; width:3px; height:3px; border-radius:50%;
    background:#fff; opacity:0;
  }
  .otp-success.is-visible .otp-spark{ animation:otpSpark .7s ease-out .5s forwards; }
  @keyframes otpSpark{
    0%{ opacity:0; transform:translate(0,0) scale(.4); }
    35%{ opacity:1; }
    100%{ opacity:0; transform:var(--spark-to,translate(14px,-14px)) scale(1); }
  }

  /* three notes rise from the charcoal stage at slightly different times,
     speeds and angles, like a little flourish of music drifting upward */
  .otp-success-note{
    position:absolute;
    left:50%; top:2px;
    width:16px; height:16px;
    fill:#fff;
    opacity:0;
    pointer-events:none;
  }
  .otp-success-note-1{ margin-left:-8px; }
  .otp-success-note-2{ margin-left:-20px; width:13px; height:13px; }
  .otp-success-note-3{ margin-left:6px; width:12px; height:12px; }

  .otp-success.is-visible .otp-success-note-1{
    animation:otpNoteRiseA 1.9s var(--ease) .55s forwards;
  }
  .otp-success.is-visible .otp-success-note-2{
    animation:otpNoteRiseB 2.1s var(--ease) .7s forwards;
  }
  .otp-success.is-visible .otp-success-note-3{
    animation:otpNoteRiseC 2s var(--ease) .85s forwards;
  }

  @keyframes otpNoteRiseA{
    0%{   opacity:0; transform:translate(0,6px) scale(.4) rotate(-10deg);
          filter:drop-shadow(0 0 0 rgba(246,167,60,0)); }
    20%{  opacity:1; transform:translate(-4px,-14px) scale(1.15) rotate(4deg);
          filter:drop-shadow(0 0 6px rgba(246,167,60,.85)); }
    50%{  transform:translate(-8px,-30px) scale(1) rotate(-4deg); }
    78%{  opacity:1; transform:translate(-6px,-46px) scale(.95) rotate(3deg);
          filter:drop-shadow(0 0 5px rgba(246,167,60,.5)); }
    100%{ opacity:0; transform:translate(-4px,-58px) scale(.82) rotate(6deg);
          filter:drop-shadow(0 0 0 rgba(246,167,60,0)); }
  }
  @keyframes otpNoteRiseB{
    0%{   opacity:0; transform:translate(0,8px) scale(.35) rotate(8deg); }
    24%{  opacity:1; transform:translate(-16px,-10px) scale(1.05) rotate(-8deg);
          filter:drop-shadow(0 0 5px rgba(255,255,255,.6)); }
    55%{  transform:translate(-24px,-26px) scale(.92) rotate(6deg); }
    80%{  opacity:.9; transform:translate(-30px,-42px) scale(.85) rotate(-4deg); }
    100%{ opacity:0; transform:translate(-34px,-54px) scale(.75) rotate(4deg); }
  }
  @keyframes otpNoteRiseC{
    0%{   opacity:0; transform:translate(0,6px) scale(.35) rotate(-6deg); }
    22%{  opacity:1; transform:translate(14px,-12px) scale(1.05) rotate(10deg);
          filter:drop-shadow(0 0 5px rgba(255,255,255,.55)); }
    54%{  transform:translate(20px,-28px) scale(.9) rotate(-6deg); }
    80%{  opacity:.9; transform:translate(26px,-44px) scale(.82) rotate(8deg); }
    100%{ opacity:0; transform:translate(30px,-56px) scale(.72) rotate(-6deg); }
  }

  /* =====================================================================
     ACCOUNT TYPE SELECTOR — scoped addition, reuses existing tokens
     (--field-shadow, --ease, pill radius) and the pop/shake keyframes
     already defined above for the OTP digits. No new visual language.
     ===================================================================== */
  .role-select{
    display:flex;
    gap:8px;
    margin-top:2px;
  }
  .role-chip{
    flex:1;
    appearance:none;
    border:none;
    outline:none;
    cursor:pointer;
    font-family:inherit;
    font-size:12px;
    font-weight:500;
    color:var(--ink);
    background:#fff;
    padding:8.5px 16px;
    border-radius:999px;
    box-shadow:var(--field-shadow);
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  }
  .role-chip:hover{ box-shadow:0 3px 10px rgba(0,0,0,.09); transform:translateY(-1px); }
  .role-chip:active{ transform:translateY(0) scale(.97); }
  .role-chip[aria-checked="true"]{
    color:var(--orange-deep);
    font-weight:800;
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.5);
    animation:otpDigitPop .28s var(--ease);
  }
  .role-select.is-invalid{ animation:otpShake .38s var(--ease); }
  .row-code.is-invalid{ animation:otpShake .38s var(--ease); }
  .role-select.is-invalid .role-chip{
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(255,90,90,.55);
  }

  @media (prefers-reduced-motion:reduce){
    .role-chip[aria-checked="true"], .role-select.is-invalid, .row-code.is-invalid{ animation:none !important; }
  }

  @media (prefers-reduced-motion:reduce){
    .code-btn-ripple, .code-btn[data-state="loading"], .code-btn[data-state="ready"],
    .otp-ring, .otp-digit.is-filled, .otp[data-state="error"] .otp-digit,
    .otp-success-circle, .otp-success-tick, .otp-spark, .otp-success-note, .otp-success-stage{ animation:none !important; }
    .otp, .otp-status, .otp-success, .row-code, #otpPhone{ transition-duration:.01ms !important; }
  }

  @media (max-width:640px){
    .card{ height:auto; min-height:640px; }
    .panel{ position:relative; width:100%; height:auto; left:0 !important; transform:none !important; }
    .card.mode-login .panel{ transform:none !important; }
    .card{ display:flex; flex-direction:column-reverse; }
    .card.mode-login{ flex-direction:column; }
    .form-inner{ padding:28px 24px; }
    .info-inner{ padding:26px 24px 24px; }
    .logo-box{ width:88px; height:104px; font-size:18px; }
  }
  @media (max-width:420px){
    .stage{ padding:10px; }
    .card{ min-height:auto; border-radius:20px; }
    .form-inner{ padding:20px 16px; }
    .info-inner{ padding:18px 16px 16px; }
    .field{ font-size:14px; padding:12px 14px; }
    .btn-main{ font-size:14px; padding:12px 16px; }
    .logo-box{ width:64px; height:76px; font-size:14px; }
  }