:root{
    --bg-top:#152238;
    --bg-bottom:#0c1726;
    --card:#fbf6ee;
    --card-soft:#f3ecdf;
    --ink:#1c2230;
    --ink-soft:#6b6457;
    --saffron:#ffa73c;
    --saffron-deep:#e8862a;
    --teal:#2a9d8f;
    --line:#e4dbc8;
    --error:#d8554b;
    --radius:22px;
  }

  *{box-sizing:border-box ! important; user-select:none ! important;}
  html,body{margin:0;height:100%;}
  body{
    font-family:'Vazirmatn', sans-serif;
    background:
      radial-gradient(circle at 80% -10%, rgba(255,167,60,.18), transparent 45%),
      linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 16px;
    color:var(--ink);
  }

  .am-stage{ width:100%; max-width:400px; }

  .am-brand{ text-align:center; margin-bottom:22px; color:#f1ece0; }
  .am-brand .am-mark{
    width:46px;height:46px;border-radius:13px;
    background:linear-gradient(135deg,var(--saffron),var(--saffron-deep));
    margin:0 auto 12px;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:18px;color:#241404;
    box-shadow:0 10px 24px -8px rgba(255,167,60,.55);
  }
  .am-brand p{ margin:4px 0 0; font-size:13px; color:#a9a392; letter-spacing:.2px; }

  .am-login-box{
    position:relative;
    background:var(--card);
    border-radius:var(--radius);
    padding:30px 26px 26px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
    overflow:hidden;
  }

  .am-viewport{ position:relative; overflow:hidden; }
  .am-panel{ transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .35s ease; }

  h1.am-title{ font-size:19px; font-weight:800; margin:0 0 4px; }
  p.am-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 22px; line-height:1.7; }

  .am-login-box label{
    display:block; font-size:12.5px; font-weight:600;
    color:var(--ink-soft); margin-bottom:8px;
  }

  .am-phone-field{
    display:flex; align-items:center;
    border:1.6px solid var(--line); border-radius:14px;
    background:#fff; padding:0 14px;
    transition:border-color .2s, box-shadow .2s;
  }
  .am-phone-field:focus-within{
    border-color:var(--saffron);
    box-shadow:0 0 0 4px rgba(255,167,60,.16);
  }
  .am-phone-field input{
    flex:1; border:none ! important; outline:none; padding:13px 10px ! important;
    font-family:inherit; font-size:15px; letter-spacing:.5px;
    background:transparent; color:var(--ink); direction:ltr; text-align:right;
  }
  .am-phone-field input::placeholder{ color:#c4bca8; }

  .am-hint{ font-size:11.5px; color:#a39c89; margin-top:8px; }
  .am-otp-login-hint{ font-size:11.5px; color:#a39c89; margin-top:8px; }

  button.am-submit{
    width:100%; margin-top:22px; padding:14px 0;
    border:none; border-radius:14px;
    background:linear-gradient(135deg,var(--saffron),var(--saffron-deep));
    color:#241404; font-family:inherit; font-size:15px; font-weight:800;
    cursor:pointer ! important; box-shadow:0 14px 24px -10px rgba(232,134,42,.6);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  
  button.am-submit:active{ transform:translateY(1px) scale(.99); }
  button.am-submit:disabled{
    background:#e7e1d2; color:#a9a392; box-shadow:none; cursor:not-allowed;
  }

  .am-legal{ text-align:center; font-size:11.5px; color:#a39c89; margin-top:16px; }
  .am-legal a{ color:var(--teal); text-decoration:none; font-weight:600; }

  .am-verify-num{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:700; color:var(--ink); direction:ltr;
  }

  .am-otp-row{display:none}
  .am-otp-row.am-show{ display:flex; gap:10px; direction:ltr; margin-bottom:6px; }
  .am-otp-row input{
    width:100% ! important; aspect-ratio:1; text-align:center;
    font-size:20px; font-weight:800;
    border:1.6px solid var(--line) ! important; border-radius:13px ! important;
    background:#fff; color:var(--ink); outline:none;
    transition:border-color .2s, box-shadow .2s, transform .15s ! important;
  }
  .am-otp-row input:focus{
    border-color:var(--saffron);
    box-shadow:0 0 0 4px rgba(255,167,60,.16);
    transform:translateY(-1px);
  }
  .am-otp-row input.am-filled{ border-color:var(--teal) ! important; }
  .am-otp-row input.am-shake{ animation:am-shake .32s ! important; border-color:var(--error) ! important; }
  @keyframes am-shake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-5px); }
    75%{ transform:translateX(5px); }
  }

  /* password field — only shown when the account doesn't exist yet */
  .am-password-block{
    margin-top:18px;
    display:block;
  }

  .am-password-field{
    border:1.6px solid var(--line); border-radius:14px;
    background:#fff; padding:0 14px;
    display:flex; align-items:center;
    transition:border-color .2s, box-shadow .2s;
  }
  .am-password-field:focus-within{
    border-color:var(--saffron);
    box-shadow:0 0 0 4px rgba(255,167,60,.16);
  }
  .am-password-field input{
    flex:1; border:none ! important; outline:none; padding:13px 10px ! important;
    font-family:inherit; font-size:15px;
    background:transparent; color:var(--ink); direction:ltr; text-align:right;
  }
  .am-password-field.am-shake{ animation:am-shake .32s; border-color:var(--error); }

  .am-verify-actions{
    display:flex; align-items:center; justify-content:space-between; margin-top:18px;
  }
  .am-link-btn{
    border:none ! important; background:none! important; font-family:inherit; font-size:13px ! important;
    font-weight:700 ! important; color:var(--ink-soft) ! important; cursor:pointer ! important; padding:6px 0 ! important;
  }
  .am-link-btn:hover{ color:var(--ink) ! important;}
  .am-resend{
    display:flex ! important; align-items:center; gap:8px;
    border:none ! important; background:none; font-family:inherit; cursor:default; padding:0 ! important;
  }
  .am-resend.am-is-ready{ cursor:pointer ! important; }
  .am-ring{
    --pct:100;
    width:22px;height:22px; border-radius:50%;
    background:conic-gradient(var(--saffron) calc(var(--pct)*1%), var(--line) 0);
    display:flex; align-items:center; justify-content:center;
    transition:background .9s linear;
  }
  .am-ring::after{ content:""; width:15px;height:15px; border-radius:50%; background:var(--card); }
  .am-resend .am-label{ font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
  .am-resend.am-is-ready .am-label{ color:var(--teal); }
  .am-resend.am-is-ready .am-ring{ display:none; }
  .am-resend .am-label:hover{background:none ! important }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }