*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background:linear-gradient(-45deg,#4f46e5,#7c3aed,#ec4899,#f43f5e) 0 0/400% 400%;justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Inter,sans-serif;animation:15s infinite gradient;display:flex}@keyframes gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}#app{perspective:1000px;width:100%;max-width:420px}.glass-card{-webkit-backdrop-filter:blur(20px);background:#ffffff14;border:1px solid #ffffff26;border-radius:24px;padding:40px 32px;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000040,inset 0 0 0 1px #ffffff1a}.screen{opacity:0;transition:opacity .4s,transform .4s;display:none;transform:translateY(20px)}.screen.active{opacity:1;animation:.4s forwards slideIn;display:block;transform:translateY(0)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.brand-header{text-align:center;letter-spacing:-.5px;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-text-fill-color:transparent;text-transform:uppercase;-webkit-background-clip:text;margin-bottom:24px;font-family:Montserrat,sans-serif;font-size:32px;font-weight:800}.screen-title{text-align:center;margin-bottom:8px;font-size:28px;font-weight:600}.screen-desc{color:#fffc;text-align:center;margin-bottom:24px;font-size:14px;line-height:1.5}form{flex-direction:column;gap:20px;margin-top:24px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}label{color:#ffffffe6;padding-left:4px;font-size:14px;font-weight:500}input[type=text],input[type=password],input[type=email]{color:#fff;background:#00000026;border:1px solid #fff3;border-radius:12px;width:100%;padding:14px 16px;font-family:inherit;font-size:15px;transition:all .3s}input::placeholder{color:#fff6}input:focus{background:#00000040;border-color:#ffffff80;outline:none;box-shadow:0 0 0 3px #ffffff1a}input:disabled{opacity:.6;cursor:not-allowed}input.error{background:#fb71851a;border-color:#fb7185}input.error:focus{box-shadow:0 0 0 3px #fb718533}.password-wrapper{align-items:center;display:flex;position:relative}.password-wrapper input{padding-right:48px}.icon-btn{color:#fff9;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex;position:absolute;right:12px}.icon-btn:hover{color:#fff}.icon-btn:disabled{cursor:not-allowed;opacity:.5}.actions{flex-direction:column;gap:12px;margin-top:8px;display:flex}button{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;height:48px;font-family:inherit;font-size:15px;font-weight:600;transition:all .3s;display:flex;position:relative}.primary-btn{color:#4f46e5;background:#fff;border:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.primary-btn:active:not(:disabled){transform:translateY(0)}.primary-btn:disabled{color:#fffc;cursor:not-allowed;background:#fff6}.secondary-btn{color:#fff;background:#ffffff1a;border:1px solid #fff3}.secondary-btn:hover:not(:disabled){background:#fff3}.secondary-btn:disabled{opacity:.6;cursor:not-allowed}.text-btn{color:#fffc;background:0 0;border:none;height:auto;padding:8px;font-size:14px;font-weight:500}.text-btn:hover:not(:disabled){color:#fff;text-decoration:underline}.text-btn:disabled{opacity:.5;cursor:not-allowed}.error-message{color:#fb7185;text-align:center;background:#fb71851a;border:1px solid #fb718533;border-radius:8px;padding:8px;font-size:14px;display:none}.error-message.active{animation:.4s ease-in-out shake;display:block}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.status-message{text-align:center;border-radius:8px;padding:12px;font-size:14px;display:none}.status-message.active{animation:.3s slideIn;display:block}.status-message.success{color:#6ee7b7;background:#34d3991a;border:1px solid #34d39933}.status-message.error{color:#fb7185;background:#fb71851a;border:1px solid #fb718533}.loader{border:2px solid #4f46e533;border-bottom-color:#4f46e5;border-radius:50%;width:20px;height:20px;animation:1s linear infinite rotation;display:none;position:absolute}.primary-btn.loading .btn-text{opacity:0}.primary-btn.loading .loader{display:block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}