*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:       #0e0e0e;
      --surface:  #1a1a1a;
      --border:   #2a2a2a;
      --text:     #f0f0f0;
      --muted:    #7a7a7a;
      --accent:   #e84118;
      --accent-h: #ff5733;
      --white:    #ffffff;
      --radius:   14px;
      --shadow:   0 8px 40px rgba(0,0,0,.55);
      --error:    #e84118;
    }

    html, body { 
      height: 100%; 
      font-family: 'Outfit', sans-serif; 
      background: var(--bg); 
      color: var(--text);
    }

    body::before {
      content: ''; 
      position: fixed; 
      inset: 0;
      background:
        radial-gradient(ellipse 60% 45% at 50% 0%,  rgba(232,65,24,.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 80% 90%, rgba(232,65,24,.08) 0%, transparent 60%);
      pointer-events: none; 
      z-index: 0;
    }

    .page {
      position: relative; 
      z-index: 1;
      min-height: 100vh;
      display: flex; 
      align-items: center; 
      justify-content: center;
      padding: 32px 16px;
    }

    .right-panel {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card {
      width: 100%; 
      max-width: 420px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 44px 40px 40px;
      box-shadow: var(--shadow);
    }

    .logo { 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      gap: 10px; 
      margin-bottom: 38px; 
    }
    .logo-icon {
      width: 42px; 
      height: 42px; 
      background: var(--accent); 
      border-radius: 10px;
      display: flex; 
      align-items: center; 
      justify-content: center; 
      flex-shrink: 0;
    }
    .logo-icon svg { 
      width: 26px; 
      height: 26px; 
      fill: #fff; 
    }
    .logo-text { 
      font-size: 26px; 
      font-weight: 700; 
      letter-spacing: -.5px; 
      color: var(--white); 
    }
    .logo-text span { 
      color: var(--accent); 
    }

    .heading { 
      font-size: 22px; 
      font-weight: 600; 
      margin-bottom: 24px; 
      color: var(--white); 
    }

    .field { 
      position: relative; 
      margin-bottom: 14px; 
    }
    .field input {
      width: 100%; 
      padding: 15px 18px;
      background: #111; 
      border: 1px solid var(--border);
      border-radius: var(--radius); 
      color: var(--text);
      font-family: inherit; 
      font-size: 15px;
      transition: border-color .2s, box-shadow .2s; 
      outline: none;
    }
    .field input::placeholder { 
      color: var(--muted); 
    }
    .field input:focus { 
      border-color: var(--accent); 
      box-shadow: 0 0 0 3px rgba(232,65,24,.18); 
    }
    .field.error input {
      border-color: var(--error);
      box-shadow: 0 0 0 2px rgba(232,65,24,.25);
    }
    .shake-form {
      animation: shake .4s ease;
    }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      20%      { transform: translateX(-6px); }
      40%      { transform: translateX(6px); }
      60%      { transform: translateX(-4px); }
      80%      { transform: translateX(4px); }
    }

    .form-error {
      background: rgba(232,65,24,.10);
      border: 1px solid rgba(232,65,24,.35);
      color: var(--accent-h);
      font-size: 13px;
      line-height: 1.5;
      padding: 11px 14px;
      border-radius: var(--radius);
      margin-bottom: 16px;
    }

    .toggle-pw {
      position: absolute; 
      right: 14px; 
      top: 50%; 
      transform: translateY(-50%);
      background: none; 
      border: none; 
      cursor: pointer; 
      color: var(--muted);
      line-height: 0; 
      transition: color .2s;
    }
    .toggle-pw:hover { 
      color: var(--text); 
    }

    .forgot-row { 
      text-align: right; 
      margin-bottom: 22px; 
    }
    .forgot-row a { 
      font-size: 13px; 
      color: var(--muted); 
      text-decoration: none; 
      transition: color .2s; 
    }
    .forgot-row a:hover { 
      color: var(--accent); 
    }

    .btn-primary {
      width: 100%; 
      padding: 16px;
      background: linear-gradient(135deg, var(--accent), #c0392b);
      border: none; 
      border-radius: var(--radius);
      color: #fff; 
      font-family: inherit; 
      font-size: 16px; 
      font-weight: 600;
      cursor: pointer; 
      letter-spacing: .3px;
      transition: filter .2s, transform .15s;
      display: flex; 
      align-items: center; 
      justify-content: center; 
      gap: 8px;
    }
    .btn-primary:hover  { 
      filter: brightness(1.12); 
    }
    .btn-primary:active { 
      transform: scale(.98); 
    }

    .register { 
      margin-top: 24px; 
      text-align: center; 
      font-size: 14px; 
      color: var(--muted); 
    }
    .register a { 
      color: var(--accent); 
      text-decoration: none; 
      font-weight: 600; 
      transition: color .2s; 
    }
    .register a:hover { 
      color: var(--accent-h); 
    }

    .step { 
      animation: fadeUp .45s cubic-bezier(.22,1,.36,1) both; 
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .tfa-icon {
      width: 64px; 
      height: 64px;
      background: rgba(232,65,24,.12);
      border: 1px solid rgba(232,65,24,.3);
      border-radius: 18px;
      display: flex; 
      align-items: center; 
      justify-content: center;
      color: var(--accent);
      margin: 0 auto 22px;
    }
    .tfa-hint {
      text-align: center; 
      font-size: 14px; 
      color: var(--muted);
      margin-bottom: 30px; 
      line-height: 1.6;
    }
    .otp-row { 
      display: flex; 
      gap: 10px; 
      justify-content: center; 
    }
    .otp-cell {
      width: 52px; 
      height: 58px;
      background: #111; 
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--white); 
      font-family: inherit;
      font-size: 22px; 
      font-weight: 700; 
      text-align: center;
      outline: none; 
      transition: border-color .2s, box-shadow .2s, transform .15s;
      caret-color: var(--accent);
    }
    .otp-cell:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(232,65,24,.18);
      transform: translateY(-2px);
    }
    .otp-cell.filled { 
      border-color: rgba(232,65,24,.45); 
    }

    .shake {
      animation: shake .4s ease;
    }

    .resend-row { 
      text-align: center; 
      margin-top: 16px; 
      font-size: 13px; 
      color: var(--muted); 
    }
    .resend-row a { 
      color: var(--accent); 
      text-decoration: none; 
      font-weight: 500; 
    }
    .resend-row a:hover { 
      color: var(--accent-h); 
    }

    @media (max-width: 480px) {
      .card { 
        padding: 36px 24px 32px; 
      }
      .otp-cell { 
        width: 44px; 
        height: 52px; 
        font-size: 20px; 
      }
      .otp-row { 
        gap: 8px; 
      }
    }