:root {
      --bg-1:#0f1724;--bg-2:#0b2545;
      --accent-a:#6EE7B7;--accent-b:#60A5FA;
      --btn-grad-start:#7C3AED;--btn-grad-end:#06B6D4;
      --glass-border:rgba(255,255,255,0.08);
      --muted:rgba(255,255,255,0.55);
      --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.12;mix-blend-mode:screen;animation:blobFloat ease-in-out infinite;}
    .blob-a{width:520px;height:520px;background:radial-gradient(circle,#6EE7B7,transparent 70%);top:-120px;left:-120px;animation-duration:12s;}
    .blob-b{width:440px;height:440px;background:radial-gradient(circle,#60A5FA,transparent 70%);bottom:-100px;right:-100px;animation-duration:16s;animation-delay:3s;animation-direction:reverse;}
    @keyframes blobFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(24px,-32px);}}

    .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;}

    /* ── 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;}

    /* ── FIELDS ── */
    .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;}
    .field label .hint{font-size:0.72rem;font-weight:400;opacity:0.7;margin-left:6px;}
    .control{position:relative;display:flex;align-items:center;}
    .control input,.control select{
      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 select{padding:11px 13px;cursor:pointer;-webkit-appearance:none;}
    .control select option{background:#0f1724;color:#fff;}
    .control input::placeholder{color:rgba(255,255,255,0.25);}
    .control input:focus,.control select: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.error{border-color:rgba(255,180,162,0.6);}
    .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;}

    /* ── PHONE ── */
    .phone-row{display:flex;gap:7px;}
    .phone-row .country-wrap{width:120px;flex-shrink:0;}
    .phone-row .phone-wrap{flex:1;}
    .phone-row .control input,.phone-row .control select{padding:11px 12px;}

    /* ── OTP PANEL ── */
    #otpPanel{display:none;}
    .otp-sent{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:9px;background:rgba(110,231,183,0.07);border:1px solid rgba(110,231,183,0.18);margin-bottom:14px;font-size:13px;color:rgba(255,255,255,0.8);}
    .otp-sent strong{color:var(--accent-a);}
    .otp-boxes{display:flex;gap:7px;justify-content:center;margin-bottom:14px;}
    .otp-box{
      width:44px;height:50px;border-radius:9px;
      border:1.5px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.05);color:#fff;
      font-size:1.25rem;font-weight:700;text-align:center;
      outline:none;caret-color:var(--accent-b);
      transition:border-color 0.2s,box-shadow 0.2s;
      font-family:'Outfit',sans-serif;
    }
    .otp-box:focus{border-color:var(--accent-b);box-shadow:0 0 0 3px rgba(96,165,250,0.15);}
    .otp-box.filled{border-color:rgba(110,231,183,0.45);}
    .otp-box.error-shake{animation:shake 0.4s ease;}
    @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}50%{transform:translateX(4px);}}

    .otp-footer{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:14px;}
    .resend-btn{background:none;border:none;color:var(--accent-b);font-size:12px;font-weight:600;cursor:pointer;padding:0;transition:opacity 0.2s;}
    .resend-btn:disabled{color:var(--muted);cursor:not-allowed;}
    .change-btn{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0;transition:color 0.2s;}
    .change-btn:hover{color:#fff;}

    /* ── PASSWORD STRENGTH ── */
    .pw-meter{display:flex;align-items:center;gap:8px;margin-top:7px;}
    .pw-bars{display:flex;gap:3px;flex:1;}
    .pw-bar{height:3px;flex:1;border-radius:99px;background:rgba(255,255,255,0.08);transition:background 0.3s;}
    .pw-label{font-size:0.72rem;font-weight:500;color:var(--muted);min-width:48px;text-align:right;transition:color 0.3s;}

    /* ── 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);}

    /* ── RECAPTCHA ── */
    #recaptcha-container{display:flex;justify-content:center;margin-bottom:12px;}

    /* ── 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,.footer div{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;}
      .otp-box{width:38px;height:44px;font-size:1.1rem;}
    }