:root {
      --bg-1: #0f1724;
      --bg-2: #0b2545;
      --accent-a: #6EE7B7;
      --accent-b: #60A5FA;
      --btn-grad-start: #7C3AED;
      --btn-grad-end:   #06B6D4;
      --card-bg: rgba(255,255,255,0.055);
      --glass-border: rgba(255,255,255,0.08);
      --muted: rgba(255,255,255,0.58);
      --danger: #FFB4A2;
      --success: #8EE5A1;
      --radius: 14px;
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html, body { height:100%; }

    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
      background:
        radial-gradient(ellipse 900px 500px at 5% 0%,   rgba(110,231,183,0.07), transparent 55%),
        radial-gradient(ellipse 800px 500px at 95% 100%, rgba(96,165,250,0.08),  transparent 55%),
        linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
      color: #fff;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px 16px;
    }

    .bg-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.11; mix-blend-mode: screen; animation: blobFloat ease-in-out infinite; }
    .blob-a { width: 520px; height: 520px; background: radial-gradient(circle, #6EE7B7, transparent 70%); top: -130px; left: -130px; animation-duration: 13s; }
    .blob-b { width: 440px; height: 440px; background: radial-gradient(circle, #60A5FA, transparent 70%); bottom: -110px; right: -110px; animation-duration: 17s; animation-delay: 4s; animation-direction: reverse; }
    @keyframes blobFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(22px,-30px); } }

    .card {
      position: relative; z-index: 2;
      width: min(92vw, 460px);
      background: linear-gradient(170deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
      border: 1px solid var(--glass-border);
      border-radius: calc(var(--radius) + 6px);
      padding: 32px 28px 24px;
      backdrop-filter: blur(14px) saturate(130%);
      box-shadow: 0 24px 64px rgba(2,6,23,0.65);
      animation: cardIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes cardIn { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }

    /* ── BRAND ── */
    .brand { text-align: center; margin-bottom: 20px; }
    .brand-logo {
      font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em;
      background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      display: block; margin-bottom: 2px;
    }
    .brand-sub { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }

    /* ── TABS ── */
    .method-tabs { display:flex; background:rgba(11,37,69,0.5); border:1px solid var(--glass-border); border-radius:11px; padding:3px; margin-bottom:20px; gap:3px; }
    .method-tab { flex:1; padding:8px 6px; text-align:center; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--muted); border-radius:9px; transition:all 0.2s; border:none; background:none; }
    .method-tab.active { background:linear-gradient(135deg,rgba(124,58,237,0.5),rgba(6,182,212,0.4)); color:#fff; box-shadow:0 4px 12px rgba(124,58,237,0.3); }
    .method-tab .tab-icon { font-size:15px; display:block; margin-bottom:1px; }

    /* ── FORM HEAD ── */
    .form-head { margin-bottom: 18px; }
    .form-head h2 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--accent-b); margin-bottom: 3px; }
    .form-head p { font-size: 0.8rem; color: var(--muted); }

    /* ── GOOGLE BTN ── */
    .google-btn {
      width:100%; padding:13px; border-radius:10px;
      border:1.5px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.06); color:#fff;
      font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:600;
      cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
      transition:background 0.2s,border-color 0.2s,transform 0.15s;
      margin-bottom:14px;
    }
    .google-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); transform:translateY(-1px); }
    .google-btn:active { transform:scale(0.98); }
    .google-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

    /* ── GOOGLE PERKS ── */
    .google-perks { border-radius:10px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.03); overflow:hidden; }
    .perk { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:12.5px; color:var(--muted); }
    .perk:not(:last-child) { border-bottom:1px solid var(--glass-border); }
    .perk-icon { font-size:14px; flex-shrink:0; }

    /* ── FIELD ── */
    .field { margin-bottom: 14px; }
    .field label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.02em; }
    .control { position: relative; display: flex; align-items: center; }
    .control input {
      width: 100%; padding: 11px 40px 11px 13px; border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.05);
      color: #fff; font-size: 0.9rem; font-family: 'DM Sans', sans-serif;
      outline: none; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
      caret-color: var(--accent-b);
    }
    .control input::placeholder { color: rgba(255,255,255,0.25); }
    .control input:focus { border-color: rgba(96,165,250,0.7); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 3px rgba(96,165,250,0.1); }
    .control input.input-error { border-color: rgba(255,180,162,0.6); box-shadow: 0 0 0 3px rgba(255,180,162,0.1); }
    .icon-btn { position: absolute; right: 11px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; transition: color 0.2s; }
    .icon-btn:hover { color: #fff; }

    /* ── FORGOT ── */
    .forgot-wrap { text-align: right; margin-top: -8px; margin-bottom: 16px; }
    .forgot-link { font-size: 0.77rem; color: var(--accent-b); text-decoration: none; font-weight: 500; cursor: pointer; transition: color 0.2s; background: none; border: none; }
    .forgot-link:hover { color: var(--accent-a); }

    /* ── SUBMIT BTN ── */
    .submit-btn {
      width:100%; padding:13px; border-radius:9px; border:none;
      background:linear-gradient(90deg,var(--btn-grad-start),var(--btn-grad-end));
      color:#fff; font-family:'Outfit',sans-serif; font-size:0.94rem; font-weight:700;
      letter-spacing:0.03em; cursor:pointer; position:relative; overflow:hidden;
      transition:transform 0.15s,box-shadow 0.15s,opacity 0.2s;
      box-shadow:0 8px 24px rgba(124,58,237,0.35);
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .submit-btn:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(124,58,237,0.5); }
    .submit-btn:not(:disabled):active { transform:scale(0.98); }
    .submit-btn:disabled { opacity:0.6; cursor:not-allowed; }
    .submit-btn::after { content:''; position:absolute; top:0; left:-80%; width:55%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,0.16),transparent); transform:skewX(-20deg); animation:shimmer 3s ease infinite; }
    @keyframes shimmer { 0%{left:-80%} 30%,100%{left:140%} }
    .spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }
    @keyframes spin { to{transform:rotate(360deg);} }

    /* ── STATUS ── */
    .status { margin-top:10px; font-size:0.8rem; min-height:18px; text-align:center; color:var(--muted); transition:color 0.3s; line-height:1.5; }
    .status.ok { color: var(--success); }
    .status.err { color: var(--danger); }

    /* ── DIVIDER & FOOTER ── */
    .divider { height:1px; background:var(--glass-border); margin:16px 0 12px; border-radius:99px; }
    .footer { display:flex; flex-direction:column; align-items:center; gap:7px; }
    .footer span { font-size:0.77rem; color:var(--muted); text-align:center; }
    .link { color: var(--accent-b); text-decoration: none; font-weight: 500; transition: color 0.2s; }
    .link:hover { color: var(--accent-a); }

    @media(max-width:400px) { .card { padding:24px 16px 20px; } }