.container{--form-width:330px;--aspect-ratio:1.6;--login-box-color:#272727;--input-color:#3a3a3a;--button-color:#373737;--footer-color:rgba(255,255,255,0.5);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:var(--login-box-color);border-radius:24px;width:calc(var(--form-width) + 1px);height:calc(var(--form-width) * var(--aspect-ratio) + 1px);z-index:8;box-shadow:0 4px 8px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.2),0 0 8px rgba(255,255,255,.1),0 0 16px rgba(255,255,255,.08)}.container:before{content:"";position:absolute;inset:-50px;z-index:-2;background:conic-gradient(from 45deg,transparent 75%,#fff,transparent 100%);animation:spin 4s ease-in-out infinite}@keyframes spin{to{transform:rotate(1turn)}}.login-box{background:var(--login-box-color);border-radius:24px;padding:28px;width:var(--form-width);height:calc(var(--form-width) * var(--aspect-ratio));position:absolute;z-index:10;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:inset 0 40px 60px -8px rgba(255,255,255,.12),inset 4px 0 12px -6px rgba(255,255,255,.12),inset 0 0 12px -4px rgba(255,255,255,.12)}.form{flex-direction:column;gap:10px}.form,.logo{display:flex;justify-content:center;align-items:center}.logo{width:65px;height:65px;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(0,0,0,.2));box-shadow:8px 8px 16px rgba(0,0,0,.2),-8px -8px 16px rgba(255,255,255,.06);border-radius:20px;border:2px solid #fff;position:relative}.logo:before{bottom:10px;width:50%;height:20%;border-top-left-radius:40px;border-top-right-radius:40px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;border:2.5px solid #fff}.logo:after,.logo:before{content:"";position:absolute}.logo:after{top:10px;width:30%;height:30%;border-radius:50%;border:2.5px solid #fff}.user{position:absolute;height:50px;color:#fff}.header{text-align:center;font-size:24px;font-weight:700;padding:6px;display:flex;justify-content:center;align-items:center}.header,.input{width:100%;color:white}.input{padding:10px;border:none;border-radius:12px;background:var(--input-color);outline:none;font-size:14px}.input:focus{border:1px solid #fff}.button{width:100%;height:40px;border:none;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;display:grid;place-content:center;gap:10px;background:var(--button-color);color:white;transition:.3s;box-shadow:inset 0 3px 6px -4px rgba(255,255,255,.6),inset 0 -3px 6px -2px rgba(0,0,0,.8)}.sign-in{margin-top:5px}.google-sign-in{display:flex;justify-content:center;align-items:center;gap:10px}.button:hover{background:rgba(255,255,255,.25);box-shadow:inset 0 3px 6px rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.8),0 0 8px rgba(255,255,255,.05)}.icon{height:16px}.footer{width:100%;text-align:left;font-size:12px}.footer,.footer .link{color:var(--footer-color)}.footer .link{position:relative;font-weight:600;text-decoration:none;transition:color .3s ease}.footer .link:after{content:"";position:absolute;left:0;bottom:-2px;width:0;border-radius:6px;height:1px;background:currentColor;transition:width .3s ease}.footer .link:hover{color:#fff}.footer .link:hover:after{width:100%}