@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");.auth-page-wrapper *{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif;text-decoration:none;list-style:none}.auth-page-wrapper{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(90deg,#000000,#1a1a1a)}.container{position:relative;width:850px;height:550px;background:#111;margin:20px;border-radius:30px;box-shadow:0 0 30px rgba(0,0,0,.6);overflow:hidden;color:#fff}.container h1{font-size:36px;margin:-10px 0}.container p{font-size:14.5px;margin:15px 0;color:#ccc}.auth-page-wrapper form{width:100%}.form-box{position:absolute;right:0;width:50%;height:100%;background:#111;display:flex;align-items:center;color:#fff;text-align:center;padding:40px;z-index:1;transition:.6s ease-in-out 1.2s,visibility 0s 1s}.container.active .form-box{right:50%}.form-box.register{visibility:hidden}.container.active .form-box.register{visibility:visible}.input-box{position:relative;margin:30px 0}.input-box input{width:100%;padding:13px 50px 13px 20px;background:#222;border-radius:8px;border:none;outline:none;font-size:16px;color:#fff;font-weight:500;transition:.3s ease-in-out}.input-box input::placeholder{color:#888;font-weight:400}.input-box input:focus,.input-box input:hover{background:#2a2a2a;box-shadow:0 0 6px rgba(255,255,255,.25)}.input-box i{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;color:#aaa;cursor:pointer}.forgot-link{margin:-15px 0 15px}.forgot-link a{font-size:14.5px;color:#bbb}.btn{width:100%;height:48px;background:#000000;border-radius:8px;border:1px solid #333;cursor:pointer;font-size:16px;color:#fff;font-weight:600;transition:.3s ease-in-out;box-shadow:0 0 6px rgba(0,0,0,.5)}.btn:hover{background:#1a1a1a;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.25);transform:translateY(-2px)}.social-icons{display:flex;justify-content:center}.social-icons a{display:inline-flex;padding:10px;border:2px solid #444;border-radius:8px;font-size:24px;color:#fff;margin:0 8px;transition:.3s ease-in-out}.social-icons a:hover{border-color:#fff;color:#fff;box-shadow:0 0 15px rgba(255,255,255,.6);transform:scale(1.1)}.toggle-box{position:absolute;width:100%;height:100%}.toggle-box:before{content:"";position:absolute;left:-250%;width:300%;height:100%;background:#000000;border-radius:150px;z-index:2;transition:1.8s ease-in-out}.container.active .toggle-box:before{left:50%}.toggle-panel{position:absolute;width:50%;height:100%;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;transition:.6s ease-in-out}.toggle-panel.toggle-left{left:0;transition-delay:1.2s}.container.active .toggle-panel.toggle-left{left:-50%;transition-delay:.6s}.toggle-panel.toggle-right{right:-50%;transition-delay:.6s}.container.active .toggle-panel.toggle-right{right:0;transition-delay:1.2s}.toggle-panel p{margin-bottom:20px;color:#ddd}.toggle-panel .btn{width:160px;height:46px;background:transparent;border:2px solid #fff;box-shadow:none;transition:.3s ease-in-out}.toggle-panel .btn:hover{background:#fff;color:#000}@media screen and (max-width:650px){.container{height:calc(100vh - 40px)}.form-box{bottom:0;width:100%;height:70%}.container.active .form-box{right:0;bottom:30%}.toggle-box:before{left:0;top:-270%;width:100%;height:300%;border-radius:20vw}.container.active .toggle-box:before{left:0;top:70%}.container.active .toggle-panel.toggle-left{left:0;top:-30%}.toggle-panel{width:100%;height:30%}.toggle-panel.toggle-left{top:0}.toggle-panel.toggle-right{right:0;bottom:-30%}.container.active .toggle-panel.toggle-right{bottom:0}}@media screen and (max-width:400px){.form-box{padding:20px}.toggle-panel h1{font-size:30px}}