*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif;background:#0b0b0f;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow-x:hidden}#root{width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative}.bg-pattern{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.bg-pattern img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}.bg-gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0b0b0f00,#0b0b0fd9 70%);pointer-events:none;z-index:1}.login-container{position:relative;z-index:2;width:100%;max-width:480px;padding:0 1.25rem}.login-card{background:#0f0f12;border-radius:32px;padding:2rem;border:1px solid rgba(255,255,255,.05);box-shadow:0 20px 40px -12px #00000080;width:100%}.brand-logo{display:flex;justify-content:center;margin-bottom:2rem}.whop-logo-svg{width:140px;height:auto;color:#fff}h1{font-size:1.9rem;font-weight:700;text-align:center;color:#fff;letter-spacing:-.3px;margin-bottom:1rem}.verify-message{text-align:center;color:#e5e7eb;font-size:.95rem;line-height:1.5;margin:1.5rem 0 1.8rem;background:#ffffff08;padding:.8rem;border-radius:24px}.input-group{margin-bottom:1.5rem}.input-label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.5rem;color:#e5e7eb}.input-field{width:100%;background:#1a1a1f;border:1px solid #2C2C33;border-radius:20px;padding:.9rem 1.2rem;font-size:1rem;font-weight:500;color:#fff;transition:all .2s;outline:none;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-field:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633;background:#1e1e24}.input-field::placeholder{color:#4b5563;font-weight:400}.otp-container{display:flex;justify-content:center;gap:clamp(6px,2.5vw,12px);margin:1.5rem 0;flex-wrap:nowrap}.otp-input{flex:1 1 0;min-width:0;max-width:56px;aspect-ratio:56 / 68;height:auto;background:#1a1a1f;border:1px solid #2C2C33;border-radius:clamp(12px,3vw,20px);text-align:center;font-size:clamp(1.2rem,5vw,1.8rem);font-weight:600;color:#fff;font-family:Inter,monospace;transition:all .2s;outline:none;caret-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation}.otp-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633;background:#1e1e24}.otp-input::-webkit-outer-spin-button,.otp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.otp-input[type=number]{-moz-appearance:textfield}.login-btn{background:#3b82f6;color:#fff;font-weight:700;font-size:1rem;padding:.85rem 1rem;width:100%;border:none;border-radius:40px;cursor:pointer;transition:all .2s;margin-bottom:1rem;font-family:inherit;touch-action:manipulation;-webkit-appearance:none;-moz-appearance:none;appearance:none}.login-btn:hover:not(:disabled){background:#2563eb;transform:scale(.98)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.divider{display:flex;align-items:center;text-align:center;margin:1rem 0 1.2rem;color:#4b5563;font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid #2C2C33}.divider span{padding:0 12px;font-weight:500}.social-grid{display:flex;gap:12px;margin-bottom:1.6rem;flex-wrap:wrap}.social-btn{flex:1;background:#1a1a1f;border:1px solid #2C2C33;border-radius:40px;padding:.7rem 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;font-weight:500;color:#e5e7eb;cursor:pointer;transition:.2s}.social-btn:hover{background:#25252c;border-color:#3b82f6}.legal{text-align:center;font-size:.7rem;color:#6b7280}.legal a{color:#3b82f6;text-decoration:none}.legal a:hover{text-decoration:underline}.action-links{display:flex;justify-content:center;gap:2rem;margin-top:1.8rem;font-size:.9rem;flex-wrap:wrap}.action-link{color:#3b82f6;text-decoration:none;font-weight:500;cursor:pointer;transition:opacity .2s;background:none;border:none;font-size:inherit;font-family:inherit}.action-link:hover{text-decoration:underline;opacity:.9}.error-msg{font-size:.8rem;text-align:center;margin-top:1rem;color:#f87171;background:#dc26261a;padding:.5rem;border-radius:28px}@media (max-width: 520px){.login-container{padding:0 1rem}.login-card{padding:1.5rem 1.25rem;border-radius:24px}h1{font-size:1.5rem}.whop-logo-svg{width:110px}.brand-logo{margin-bottom:1.5rem}.social-grid{gap:8px}.social-btn span{display:none}.social-btn svg{margin:0 auto}.action-links{gap:1rem}}@media (max-width: 390px){.login-container{padding:0 .75rem}.login-card{padding:1.25rem 1rem;border-radius:20px}h1{font-size:1.35rem}.whop-logo-svg{width:96px}.brand-logo{margin-bottom:1.25rem}.verify-message{font-size:.875rem;padding:.65rem;border-radius:18px}.input-field{padding:.8rem 1rem}.social-btn{padding:.65rem 0}.action-links{margin-top:1.4rem;font-size:.85rem}}@media (max-width: 359px){.login-card{padding:1rem .875rem}h1{font-size:1.2rem}.login-btn{font-size:.9rem;padding:.75rem}}