:root{--bg-dark:#0f172a;--bg-gradient:radial-gradient(circle at top right, #1e1b4b, #0f172a 60%);--glass-bg:#ffffff08;--glass-border:#ffffff14;--primary:#3b82f6;--primary-hover:#2563eb;--success:#10b981;--error:#ef4444;--text-main:#f8fafc;--text-muted:#94a3b8}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-main);background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex}#root{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.app-container{flex-direction:column;width:100%;max-width:500px;min-height:100vh;padding:2rem;display:flex}@media (width<=380px){.app-container{padding:1rem}}@media (width>=768px){.app-container{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:24px;min-height:auto;margin:2rem;box-shadow:0 25px 50px -12px #00000080}}.header{text-align:center;margin-bottom:2rem}.logo{background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-text-fill-color:transparent;letter-spacing:-.05em;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2rem;font-weight:800}.subtitle{color:var(--text-muted);font-size:.9rem}.card{border:1px solid var(--glass-border);background:#ffffff0d;border-radius:16px;margin-bottom:1.5rem;padding:1.5rem;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0003}.form-group{margin-bottom:1.2rem}label{color:var(--text-muted);margin-bottom:.5rem;font-size:.85rem;font-weight:500;display:block}input{border:1px solid var(--glass-border);color:#fff;background:#0003;border-radius:12px;outline:none;width:100%;padding:.8rem 1rem;font-family:inherit;font-size:1rem;transition:all .2s}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3b82f633}input:disabled{opacity:.5;cursor:not-allowed}.btn{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.8rem 1rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-primary:disabled{cursor:not-allowed;background:#3b82f680}.alert{border-radius:12px;align-items:center;gap:.5rem;margin-bottom:1rem;padding:1rem;font-size:.9rem;display:flex}.alert-error{color:#fca5a5;background:#ef44441a;border:1px solid #ef444433}.alert-success{color:#6ee7b7;background:#10b9811a;border:1px solid #10b98133}.otp-container{justify-content:center;gap:8px;margin:1.5rem 0;display:flex}.otp-box{border:1.5px solid var(--glass-border);color:#fff;background:#0000004d;border-radius:12px;justify-content:center;align-items:center;width:45px;height:55px;font-size:1.5rem;font-weight:700;transition:all .2s;display:flex}.otp-box.active{border-color:var(--primary);box-shadow:0 0 15px #3b82f64d}@media (width>=400px){.otp-box{width:50px;height:60px;font-size:1.8rem}}@media (width<=320px){.logo{font-size:1.5rem}.otp-box{width:35px;height:45px;font-size:1.2rem}.app-container{padding:.5rem}.card{padding:1rem}}