@keyframes gradientAnimation{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.login-page{height:auto;background:linear-gradient(135deg,#1e1e60,#100f3a,#421e74);background-size:300% 300%;animation:gradientAnimation 6s infinite alternate;padding:20px}.login-page,.login-page .height{display:flex;justify-content:center;align-items:center}.login-page .height{height:100vh}.login-container{width:340px;padding:40px;background:rgba(255,255,255,.08);border-radius:15px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 4px 20px rgba(255,255,255,.2);text-align:center;border:1px solid rgba(255,255,255,.2);animation:fadeIn 1s ease-in-out}.login-page:before{content:"";position:absolute;width:50%;height:100%;left:0;top:0;filter:brightness(.5)}.login-title{color:#ffffff;font-size:26px;font-weight:700;text-shadow:1px 1px 4px rgba(255,255,255,.3);margin-bottom:25px}.login-form{display:flex;flex-direction:column;gap:15px}.input-container{display:flex;align-items:center;background:rgba(255,255,255,.2);border-radius:8px;padding-left:12px;margin-bottom:15px}.input-icon{color:#ddd;margin-right:10px}.login-input{width:100%;border:none;background:transparent;color:#fff;font-size:16px;outline:none;z-index:1}.login-input::placeholder{color:#ddd}.login-input:focus{outline:none;background:rgba(255,255,255,.3);box-shadow:0 0 8px rgba(255,255,255,.4)}.login-button{background:linear-gradient(135deg,#ff416c,#ff4b2b);color:#fff;padding:12px;font-size:18px;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease-in-out;box-shadow:0 4px 10px rgba(255,75,43,.4)}.login-button:hover{background:linear-gradient(135deg,#ff4b2b,#ff416c);transform:scale(1.05);box-shadow:0 6px 15px rgba(255,75,43,.6)}