.auth-body{background:linear-gradient(90deg,#e2e2e2,#c9d6ff);justify-content:center;align-items:center;min-height:100vh;font-family:Poppins,sans-serif;display:flex}.auth-container{background:#fff;border-radius:30px;width:calc(100% - 40px);max-width:850px;height:550px;margin:20px;position:relative;overflow:hidden;box-shadow:0 0 30px #0003}.auth-container h1{margin:-10px 0;font-size:36px}.auth-container p{margin:15px 0;font-size:14.5px}.auth-form{width:100%}.form-box{color:#333;text-align:center;z-index:1;background:#fff;align-items:center;width:50%;height:100%;padding:40px;transition:all .6s ease-in-out 1.2s,visibility 0s 1s;display:flex;position:absolute;right:0}.auth-container.active .form-box{right:50%}.form-box.register{visibility:hidden}.auth-container.active .form-box.register{visibility:visible}.auth-input-box{margin:30px 0;position:relative}.auth-input-box input{color:#333;background:#eee;border:none;border-radius:8px;outline:none;width:100%;padding:13px 50px 13px 20px;font-size:16px;font-weight:500}.auth-input-box input::placeholder{color:#888;font-weight:400}.auth-input-box svg{color:#888;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.forgot-link{margin:-15px 0 15px}.forgot-link a{color:#333;font-size:14.5px}.auth-btn{cursor:pointer;color:#fff;background:#ff6b00;border:none;border-radius:8px;width:100%;height:48px;font-size:16px;font-weight:600;box-shadow:0 0 10px #0000001a}.social-icons{justify-content:center;display:flex}.social-icons button{color:#333;cursor:pointer;background:#fff;border:2px solid #ccc;border-radius:8px;margin:0 8px;padding:10px;font-size:24px;transition:all .3s;display:inline-flex}.social-icons button:hover{background:#eee}.toggle-box{pointer-events:none;width:100%;height:100%;position:absolute}.toggle-box:before{content:"";z-index:2;background:#ff6b00;border-radius:150px;width:300%;height:100%;transition:all 1.8s ease-in-out;position:absolute;left:-250%}.auth-container.active .toggle-box:before{left:50%}.toggle-panel{color:#fff;z-index:2;pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;width:50%;height:100%;transition:all .6s ease-in-out;display:flex;position:absolute}.toggle-panel.toggle-left{transition-delay:1.2s;left:0}.auth-container.active .toggle-panel.toggle-left{transition-delay:.6s;left:-50%}.toggle-panel.toggle-right{transition-delay:.6s;right:-50%}.auth-container.active .toggle-panel.toggle-right{transition-delay:1.2s;right:0}.toggle-panel p{margin-bottom:20px}.toggle-panel .auth-btn{width:160px;height:46px;box-shadow:none;background:0 0;border:2px solid #fff}.auth-error{color:#dc2626;background:#fee2e2;border-radius:8px;margin-bottom:10px;padding:10px;font-size:12px}@media screen and (max-width:650px){.auth-container{height:calc(100vh - 40px)}.form-box{width:100%;height:70%;bottom:0}.auth-container.active .form-box{bottom:30%;right:0}.toggle-box:before{border-radius:20vw;width:100%;height:300%;top:-270%;left:0}.auth-container.active .toggle-box:before{top:70%;left:0}.auth-container.active .toggle-panel.toggle-left{top:-30%;left:0}.toggle-panel{width:100%;height:30%}.toggle-panel.toggle-left{top:0}.toggle-panel.toggle-right{bottom:-30%;right:0}.auth-container.active .toggle-panel.toggle-right{bottom:0}}@media screen and (max-width:400px){.form-box{padding:20px}.toggle-panel h1{font-size:30px}}
