.loginWrapper{width:100vw;height:100vh;position:fixed;background:linear-gradient(135deg,#667eea,#764ba2);inset:0;z-index:100;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;&:before{top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 0);background-size:50px 50px;animation:float 20s ease-in-out infinite}&:after,&:before{content:"";position:absolute}&:after{top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);animation:shimmer 3s ease-in-out infinite}.loginContainer{width:100%;max-width:420px;margin:0 auto;padding:0 24px;position:relative;z-index:2;h1{color:#ffffff;font-size:36px;line-height:1.2;margin-bottom:8px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.1);letter-spacing:-.5px}.subtitle,h1{text-align:center}.subtitle{color:rgba(255,255,255,.8);font-size:16px;margin-bottom:40px;font-weight:400}}.loginForm{width:100%;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-radius:24px;padding:40px 32px;box-shadow:0 20px 40px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden;&:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.form-group{margin-bottom:24px;position:relative;.form-label{display:block;color:#374151;font-size:14px;font-weight:500;margin-bottom:8px;transition:color .2s ease}.password-input-container{position:relative;display:flex;align-items:center}.form-input{width:100%;padding:16px 20px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;transition:all .2s ease;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);&:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1);background:rgba(255,255,255,.95)}&:disabled{opacity:.6;cursor:not-allowed}&::placeholder{color:#9ca3af}}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:36px;height:36px;&:hover:not(:disabled){background:rgba(102,126,234,.1);transform:translateY(-50%) scale(1.1)}&:disabled{opacity:.5;cursor:not-allowed}&:active:not(:disabled){transform:translateY(-50%) scale(.95)}}}.btn{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#ffffff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;padding:16px 24px;transition:all .2s ease;position:relative;overflow:hidden;margin-top:8px;&:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 25px rgba(102,126,234,.3)}&:active:not(:disabled){transform:translateY(0)}&:disabled{opacity:.7;cursor:not-allowed;transform:none}&:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease}&:active:before{width:300px;height:300px}}.btn-secondary{background:transparent;color:#6b7280;border:2px solid #e5e7eb;margin-top:12px;&:hover:not(:disabled){background:rgba(107,114,128,.05);border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1)}}.error-message{color:#ef4444;background:rgba(239,68,68,.1);border-radius:8px;border:1px solid rgba(239,68,68,.2);animation:shake .5s ease-in-out}.error-message,.success-message{font-size:14px;margin-bottom:16px;text-align:center;padding:12px 16px}.success-message{color:#059669;background:rgba(5,150,105,.1);border-radius:8px;border:1px solid rgba(5,150,105,.2)}.step-indicator{display:flex;justify-content:center;margin-bottom:32px;.step{width:8px;height:8px;border-radius:50%;background:#e5e7eb;margin:0 4px;transition:all .3s ease;&.active{background:#667eea;transform:scale(1.2)}&.completed{background:#10b981}}}.form-header{text-align:center;margin-bottom:32px;h2{color:#111827;font-size:24px;font-weight:600;margin-bottom:8px;letter-spacing:-.5px}p{color:#6b7280;font-size:14px;margin:0}}}.loginTermsLinks{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px;position:relative;z-index:2;a{color:rgba(255,255,255,.8);font-size:14px;text-decoration:none;transition:color .2s ease;&:hover{color:#ffffff;text-decoration:underline}}span{width:1px;height:16px;background:rgba(255,255,255,.3)}}}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(180deg)}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:480px){.loginWrapper{.loginContainer{padding:0 16px;h1{font-size:28px}}.loginForm{padding:32px 24px;border-radius:20px}}}