*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --black: #0a0a0a; --white: #ffffff; --gray-100: #f5f5f5;
      --gray-200: #e8e8e8; --gray-400: #9e9e9e; --gray-600: #555555;
      --error: #d32f2f; --radius: 12px; --transition: 0.2s ease;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--gray-100); min-height: 100vh;
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; padding: 24px; color: var(--black);
    }
    .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
    .logo-img { width: 36px; height: 36px; border-radius: 9px; display: block; }
    .logo-name { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--black); }
    .card {
      background: var(--white); border-radius: var(--radius); padding: 40px;
      width: 100%; max-width: 400px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 24px rgba(0,0,0,0.06);
    }
    .card-header { margin-bottom: 28px; }
    .card-title { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--black); margin-bottom: 6px; }
    .card-subtitle { font-size: 14px; color: var(--gray-600); line-height: 1.5; }
    .step { display: none; }
    .step.active { display: block; animation: fadeSlideIn 0.25s ease; }
    .field { margin-bottom: 16px; }
    label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-600); margin-bottom: 6px; }
    input:not([type="checkbox"]) {
      width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: 8px;
      font-size: 15px; color: var(--black); background: var(--white); outline: none;
      transition: border-color var(--transition); -webkit-appearance: none;
    }
    input:not([type="checkbox"]):focus { border-color: #5541DE; }
    input:not([type="checkbox"]).error { border-color: var(--error); }
    .field-error { font-size: 12px; color: var(--error); margin-top: 5px; display: none; }
    .field-error.visible { display: block; }
    .password-wrapper { position: relative; }
    .password-wrapper input { padding-right: 44px; }
    .toggle-password {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; padding: 4px;
      color: var(--gray-400); display: flex; align-items: center; justify-content: center;
      transition: color var(--transition);
    }
    .toggle-password:hover { color: var(--black); }
    .forgot { text-align: right; margin-top: -8px; margin-bottom: 20px; }
    .forgot a { font-size: 13px; color: var(--gray-600); text-decoration: none; transition: color var(--transition); }
    .forgot a:hover { color: var(--black); }
    .btn {
      width: 100%; padding: 13px; border: none; border-radius: 8px;
      font-size: 15px; font-weight: 600; cursor: pointer; transition: all var(--transition);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-primary { background: #5541DE; color: var(--white); }
    .btn-primary:hover { background: #4433cc; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(85,65,222,0.3); }
    .btn-primary:active { transform: translateY(0); }
    .back-btn {
      background: none; border: none; cursor: pointer; display: flex; align-items: center;
      gap: 6px; font-size: 13px; color: var(--gray-600); padding: 0;
      margin-bottom: 20px; transition: color var(--transition);
    }
    .back-btn:hover { color: var(--black); }
    .user-chip {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--gray-100); border: 1px solid var(--gray-200);
      border-radius: 100px; padding: 6px 14px 6px 6px;
      margin-bottom: 24px; cursor: pointer; transition: border-color var(--transition);
    }
    .user-chip:hover { border-color: var(--black); }
    .user-avatar {
      width: 28px; height: 28px; background: #5541DE; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--white); font-size: 12px; font-weight: 700; text-transform: uppercase;
    }
    .user-chip span { font-size: 13px; font-weight: 500; color: var(--black); }
    .progress { display: flex; gap: 6px; margin-bottom: 28px; }
    .progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); transition: all var(--transition); }
    .progress-dot.active { background: #5541DE; width: 20px; border-radius: 3px; }
    .checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
    .checkbox-field input[type="checkbox"] {
      width: 18px; height: 18px; border: 1.5px solid var(--gray-200);
      border-radius: 4px; cursor: pointer; flex-shrink: 0; margin-top: 1px; accent-color: #5541DE;
    }
    .checkbox-field label { font-size: 13px; color: var(--gray-600); margin: 0; line-height: 1.5; cursor: pointer; }
    .checkbox-field label a { color: var(--black); font-weight: 500; text-decoration: none; }
    .checkbox-field label a:hover { text-decoration: underline; }
    .card-footer { margin-top: 24px; text-align: center; font-size: 13px; color: var(--gray-600); }
    .card-footer a { color: #5541DE; font-weight: 600; text-decoration: none; cursor: pointer; }
    .card-footer a:hover { text-decoration: underline; }
    @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .spinner {
      width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3);
      border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; display: none;
    }
    .btn-primary.loading .spinner { display: block; }
    .btn-primary.loading .btn-text { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .page-footer { margin-top: 32px; font-size: 12px; color: var(--gray-400); text-align: center; }
    .page-footer a { color: var(--gray-400); text-decoration: none; margin: 0 8px; }
    .page-footer a:hover { color: var(--black); }
    /* OTP */
    .otp-wrap {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; margin-top: 4px;
    }
    .otp-input {
      width: 48px; height: 56px; border: 1.5px solid var(--gray-200);
      border-radius: 10px; font-size: 22px; font-weight: 700; text-align: center;
      color: var(--black); background: var(--white); outline: none;
      transition: border-color var(--transition), box-shadow var(--transition);
      caret-color: #5541DE;
    }
    .otp-input:focus { border-color: #5541DE; box-shadow: 0 0 0 3px rgba(85,65,222,0.12); }
    .otp-input.error { border-color: var(--error); }
    .otp-sep { font-size: 18px; color: var(--gray-400); padding: 0 2px; user-select: none; }