:root {
      --yellow: #FFFB00;
      --yellow-hover: #E5E200;
      --yellow-glow: rgba(255, 205, 0, 0.4);
      --black: #262626;
      --purple: #6D5BF7;
      --purple-light: rgba(109, 91, 247, 0.1);
      --gray-bg: #F7F7F7;
      --white: #FFFFFF;
      --green: #28C79D;
      --red: #FF3653;
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-xl: 28px;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(180deg, #FEFEFE 0%, var(--gray-bg) 100%);
      min-height: 100vh;
      color: var(--black);
      line-height: 1.5;
    }
    .bg-gradient { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
    .bg-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: orbFloat 25s ease-in-out infinite; }
    .bg-orb-1 { width: 500px; height: 500px; background: var(--yellow); top: -200px; right: -150px; opacity: 0.15; }
    .bg-orb-2 { width: 400px; height: 400px; background: var(--purple); bottom: -150px; left: -100px; opacity: 0.1; }
    @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } }
    header { position: relative; z-index: 10; padding: 20px 32px; display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; }
    .logo svg { height: 32px; }
    main { position: relative; z-index: 10; max-width: 520px; margin: 10px auto 48px; padding: 0 20px; }
    .card { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 14px 40px; position: relative; overflow: hidden; }
    .card-accent { display: none; }
    .screen { display: none; }
    .screen.active { display: block; }
    #otpScreen > h1.text-center, #confirmScreen > h1.text-center, #thankYouScreen > h1.text-center { display: none; }
    #otpScreen > h1 + .subtitle, #confirmScreen > h1 + .subtitle, #thankYouScreen > h1 + .subtitle { display: none; }
    h1 { font-size: 28px; font-weight: 800; margin-bottom: 12px; color: var(--black); }
    h2 { font-size: 24px; font-weight: 800; margin-bottom: 12px; color: var(--black); text-align: center; }
    .subtitle { font-size: 15px; color: #666; margin-bottom: 32px; }
    .form-group { margin-bottom: 20px; }
    .form-label { display: flex; justify-content: space-between; margin-bottom: 8px; }
    .form-label label { font-size: 14px; font-weight: 600; }
    .form-label .required { font-size: 12px; color: var(--red); }
    .input-container { position: relative; }
    .input-icon-left { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; }
    .input-field { width: 100%; padding: 16px 48px; font-size: 16px; font-family: inherit; border: 2px solid #E8E8E8; border-radius: var(--radius-md); outline: none; transition: all 0.2s; }
    .input-field:focus { border-color: var(--purple); box-shadow: 0 0 0 4px var(--purple-light); }
    .input-field.is-valid { border-color: var(--green); }
    .input-field.is-invalid { border-color: var(--red); }
    .input-status { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: 0; }
    .input-status.show { opacity: 1; }
    .btn { width: 100%; padding: 16px 24px; font-size: 15px; font-weight: 600; font-family: inherit; border: none; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.25s; }
    .btn-primary { background: var(--yellow); color: var(--black); box-shadow: 0 4px 12px var(--yellow-glow); }
    .btn-primary:hover:not(:disabled) { background: var(--yellow-hover); transform: translateY(-1px); }
    .btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .spinner { width: 20px; height: 20px; border: 2.5px solid rgba(0,0,0,0.15); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; vertical-align: middle; }
    .btn-content { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .error-message { color: var(--red); font-size: 14px; text-align: center; margin-top: 4px; min-height: 0; }
    .disclaimer { font-size: 11px; color: var(--black); text-align: center; line-height: 1.5; margin-top: 14px; max-width: 450px; margin-left: auto; margin-right: auto; }
    .trust-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid #EEE; }
    .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .trust-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 8px; }
    .trust-icon { width: 40px; height: 40px; background: var(--gray-bg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--purple); }
    .trust-label { font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; text-align: center; width: 100%; }
    .security-badge { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; font-size: 12px; color: #888; }
    .security-badge svg { color: var(--green); }
    .otp-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--purple-light) 0%, rgba(109,91,247,0.05) 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: var(--purple); }
    .text-center { text-align: center; }
    .phone-display { font-size: 15px; font-weight: 600; text-align: center; margin-bottom: 32px; }
    .otp-container { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; }
    .otp-input { width: 52px; height: 64px; font-size: 24px; font-weight: 700; text-align: center; border: 2px solid #E8E8E8; border-radius: var(--radius-md); outline: none; transition: all 0.2s; }
    .otp-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px var(--purple-light); }
    .otp-input.is-invalid { border-color: var(--red); animation: shake 0.4s; }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
    .otp-error { color: var(--red); font-size: 14px; text-align: center; min-height: 20px; margin-bottom: 16px; }
    .resend-section { text-align: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid #EEE; }
    .resend-text { font-size: 14px; color: #666; margin-bottom: 8px; }
    .resend-btn { background: none; border: none; font-size: 14px; font-weight: 600; color: var(--purple); cursor: pointer; padding: 8px 16px; border-radius: var(--radius-sm); }
    .resend-btn:hover:not(:disabled) { background: var(--purple-light); }
    .resend-btn:disabled { color: #999; cursor: not-allowed; }
    .timer { font-weight: 600; color: var(--purple); }
    .welcome-icon { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(40,199,157,0.15) 0%, rgba(40,199,157,0.05) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: var(--green); }
    .success-icon { width: 100px; height: 100px; background: linear-gradient(135deg, rgba(40,199,157,0.2) 0%, rgba(40,199,157,0.05) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: var(--green); }
    .success-message { background: rgba(40,199,157,0.08); border-radius: var(--radius-md); padding: 20px; text-align: center; color: #333; font-size: 15px; line-height: 1.6; }
    .thank-you-full { position: relative; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; margin: -44px -40px; width: calc(100% + 80px); border-radius: var(--radius-xl); overflow: hidden; }
    .thank-you-full > svg:first-of-type { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    .thank-you-content { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; padding: 10px 0; }
    .thank-you-content h1 { font-size: 32px; font-weight: 800; margin-bottom: 24px; color: var(--black); }
    .thank-you-content p { font-size: 16px; color: #333; line-height: 1.7; max-width: 400px; margin: 0 auto; }
    .thank-you-footer { position: relative; z-index: 1; margin-top: 24px; font-size: 14px; font-weight: 700; color: var(--black); }
    .card:has(#thankYouScreen.active) .gradient-header { display: none; }
    .thank-you-fullscreen-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
    .thank-you-fullscreen-bg > svg { width: 100%; height: 100%; }
    /* Thank you screen uses the standard card layout like other screens */
    @media (max-width: 560px) { .thank-you-full { margin: -32px -24px; width: calc(100% + 48px); min-height: 500px; padding: 30px 20px; } .thank-you-content h1 { font-size: 26px; } }
    .confetti-piece { position: fixed; pointer-events: none; z-index: 1000; }
    footer { text-align: center; font-size: 12px; color: #888; }
    footer a { color: #666; text-decoration: none; }
    .footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; }
    .gradient-header { position: relative; margin: -44px -40px 24px -40px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .gradient-header > svg:first-of-type { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .gradient-header-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 20px; padding-top: 10px; }
    .yellow-account-logo { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; }
    .yellow-account-logo svg { height: 32px; display: block; }
    .gradient-header h2, .gradient-header h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: var(--black); text-align: center; }
    .gradient-header .subtitle { font-size: 14px; color: #666; margin-bottom: 0; text-align: center; max-width: 320px; line-height: 1.4; }
    @media (max-width: 560px) { .card { padding: 32px 24px; } h1 { font-size: 24px; } h2 { font-size: 24px; } .otp-input { width: 44px; height: 56px; font-size: 20px; } .gradient-header { margin: -32px -24px 20px -24px; width: calc(100% + 48px); min-height: 240px; } }
    /* reCAPTCHA */
    .recaptcha-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      margin-bottom: 8px;
    }
    .recaptcha-status {
      font-size: 12px;
      color: #888;
      min-height: 18px;
      text-align: center;
    }
    .recaptcha-status.error   { color: var(--red); }
    .recaptcha-status.success { color: var(--green); font-weight: 600; }
    .spinner-sm {
      width: 13px; height: 13px;
      border: 2px solid rgba(100,100,100,0.25);
      border-top-color: #555;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: inline-block;
      vertical-align: middle;
      margin-right: 4px;
    }
.hidden { display: none; }
.util-mb-sm { margin-bottom: 8px; }
.util-mt-md { margin-top: 16px; }