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

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0f0f1a;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }

    .card {
      background: #1a1a2e;
      border: 1px solid #2a2a45;
      border-radius: 16px;
      padding: 48px 40px;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.4);
      text-align: center;
    }

    .logo h1 {
      font-size: 2.4rem;
      font-weight: 800;
      color: #c9a84c;
      letter-spacing: -1px;
      margin-bottom: 4px;
    }

    .logo p {
      color: #8888aa;
      font-size: 0.9rem;
      margin-bottom: 36px;
    }

    .lock-icon {
      font-size: 2.4rem;
      margin-bottom: 16px;
    }

    h2 {
      color: #ffffff;
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .subtitle {
      color: #8888aa;
      font-size: 0.92rem;
      line-height: 1.6;
      margin-bottom: 8px;
    }

    .email-highlight {
      color: #c9a84c;
      font-weight: 600;
    }

    .note {
      color: #555577;
      font-size: 0.82rem;
      margin-bottom: 28px;
      line-height: 1.5;
    }

    /* Spinner de auto-login */
    .spinner-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 16px 0 8px;
    }

    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid #2a2a45;
      border-top-color: #c9a84c;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .spinner-text {
      color: #8888aa;
      font-size: 0.95rem;
    }

    /* OTP input */
    .otp-group {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-bottom: 24px;
    }

    .otp-group input {
      width: 48px;
      height: 56px;
      text-align: center;
      font-size: 1.4rem;
      font-weight: 700;
      background: #0f0f1a;
      border: 1px solid #2a2a45;
      border-radius: 8px;
      color: #ffffff;
      outline: none;
      transition: border-color 0.2s;
    }

    .otp-group input:focus {
      border-color: #c9a84c;
    }

    .btn-primary {
      width: 100%;
      padding: 13px;
      background: #c9a84c;
      color: #0f0f1a;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      margin-bottom: 20px;
    }
    .btn-primary:hover { background: #d4b660; }
    .btn-primary:active { transform: scale(0.98); }
    .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

    .resend-link {
      display: inline-block;
      color: #8888aa;
      font-size: 0.82rem;
      text-decoration: none;
      border-bottom: 1px dashed #444466;
      cursor: pointer;
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
      padding: 0;
    }
    .resend-link:hover { color: #c9a84c; border-color: #c9a84c; }

    .alert {
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 0.88rem;
      margin-bottom: 20px;
    }
    .alert-error {
      background: rgba(220,53,69,0.15);
      border: 1px solid rgba(220,53,69,0.3);
      color: #ff6b7a;
    }
    .alert-success {
      background: rgba(40,167,69,0.15);
      border: 1px solid rgba(40,167,69,0.3);
      color: #5dd879;
    }

    .hidden { display: none; }