/* ─── Brand panel gradient (left side on desktop) ─── */
    .auth-brand-panel {
      background: linear-gradient(160deg, #8A5A8A 0%, #6E436E 45%, #4A154B 100%);
      position: relative;
      overflow: hidden;
    }
    .auth-brand-panel::before {
      content: '';
      position: absolute;
      top: -20%; left: -10%;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(232, 185, 72, 0.12) 0%, transparent 60%);
      pointer-events: none;
    }

    /* ─── Step rail (vertical on desktop) ─── */
    .step-rail-item {
      position: relative;
      padding-right: 2.5rem;
      padding-bottom: 1.5rem;
    }
    .step-rail-item::before {
      content: '';
      position: absolute;
      top: 2rem;
      right: 1.125rem;
      bottom: -0.5rem;
      width: 2px;
      background: rgba(255, 255, 255, 0.2);
    }
    .step-rail-item:last-child::before { display: none; }
    .step-rail-item.active::before {
      background: linear-gradient(to bottom, #E8B948, rgba(255, 255, 255, 0.2));
    }
    .step-rail-circle {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.875rem;
      position: absolute;
      right: 0;
      top: 0;
      transition: all 0.3s ease;
      border: 2px solid rgba(255, 255, 255, 0.3);
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.05);
    }
    .step-rail-item.active .step-rail-circle {
      background: linear-gradient(135deg, #E8B948, #B8941F);
      border-color: #F0D050;
      color: #4A154B;
      box-shadow: 0 0 0 4px rgba(232, 185, 72, 0.2);
    }
    .step-rail-item.done .step-rail-circle {
      background: rgba(232, 185, 72, 0.2);
      border-color: #E8B948;
      color: #F0D050;
    }
    .step-rail-label {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;
      padding-top: 0.375rem;
      transition: color 0.3s ease;
    }
    .step-rail-item.active .step-rail-label { color: #FFFFFF; }
    .step-rail-item.done .step-rail-label { color: rgba(255, 255, 255, 0.8); }

    /* ─── Form panel ─── */
    .auth-input {
      width: 100%;
      background: #F5F5F5;
      border: 2px solid #ECECEC;
      border-radius: 12px;
      padding: 14px 16px;
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      color: #23254A;
      transition: all 0.25s ease;
      outline: none;
    }
    .auth-input--prefix { padding-left: 4rem; }
    .auth-input:focus {
      border-color: #6E436E;
      background: #FFFFFF;
      box-shadow: 0 0 0 4px rgba(110, 67, 110, 0.12);
    }
    .auth-input::placeholder { color: #8D94A5; font-weight: 400; }

    /* ─── OTP boxes ─── */
    .otp-box {
      width: clamp(2.75rem, 9vw, 3rem);
      height: 3.5rem;
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      font-family: 'Vazirmatn', sans-serif;
      background: #F5F5F5;
      border: 2px solid #ECECEC;
      border-radius: 12px;
      color: #23254A;
      outline: none;
      transition: all 0.25s ease;
    }
    .otp-box:focus {
      border-color: #E8B948;
      background: #FFFFFF;
      box-shadow: 0 0 0 4px rgba(232, 185, 72, 0.2);
      transform: scale(1.05);
    }
    .otp-box.filled {
      border-color: #6E436E;
      background: #FFFFFF;
    }

    /* ─── Step transition animation ─── */
    .step-panel {
      display: none;
      animation: step-in 0.4s ease-out;
    }
    .step-panel.active { display: block; }
    @keyframes step-in {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }



    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }