@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
 --color-deep-blue:#000428;
 --color-green-metal:#004e92;
 --color-teal:#00c6ff;
 --color-light-glow:rgba(0, 200, 255, 0.6);
 --color-dark-bg:#0a0a0f;
 --color-text:#e0e0e0;
 --color-text-darker:#a0a0a0;
 --color-glass-bg:rgba(10, 20, 40, 0.55);
 --color-border:rgba(0, 198, 255, 0.3);
 --color-error:#ff4d4d;
 --color-success:#4dff8d;
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 -webkit-tap-highlight-color: transparent;
}

html{
 height:100%;
 width:100%;
}

body{
 font-family:'Poppins', sans-serif;
 width:100%;
 height:100%;
 background:var(--color-dark-bg);
 color:var(--color-text);
 display:flex;
 justify-content:center;
 align-items:center;
 position:relative;
 overflow-x:hidden;
 overflow-y:auto;
}

.background-visual{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:-1;
 overflow:hidden;
 background: linear-gradient(rgba(10, 10, 15, 0.85), rgba(10, 10, 15, 0.85)), url('../img/loading.gif') repeat-x;
 background-size: auto 100%;
}

.background-visual::before,
.background-visual::after{
 content:'';
 position:absolute;
 width:500px;
 height:500px;
 border-radius:50%;
 filter:blur(120px);
 opacity:.4;
 will-change: transform;
 pointer-events: none;
}

.background-visual::before{
 background:linear-gradient(90deg, var(--color-deep-blue), var(--color-green-metal));
 top:-10%;
 left:-10%;
 animation:move-glow1 15s infinite alternate ease-in-out;
}

.background-visual::after{
 background:linear-gradient(90deg, var(--color-green-metal), var(--color-teal));
 bottom:-10%;
 right:-10%;
 animation:move-glow2 18s infinite alternate ease-in-out;
}

@keyframes move-glow1{
 from{
 transform:translate3d(0, 0, 0) scale(1);
}
 to{
 transform:translate3d(200px, 100px, 0) scale(1.2);
}
}

@keyframes move-glow2{
 from{
 transform:translate3d(0, 0, 0) scale(1.2);
}
 to{
 transform:translate3d(-200px, -100px, 0) scale(1);
}
}

.app-btn{
 padding:10px 20px;
 font-size:1rem;
 font-weight:600;
 background:linear-gradient(90deg, var(--color-green-metal), var(--color-teal));
 color:#fff;
 border:none;
 border-radius:50px;
 cursor:pointer;
 transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow:0 0 20px var(--color-light-glow);
 display:flex;
 align-items:center;
 gap:8px;
}

.app-btn:hover{
 transform:translateY(-3px);
 box-shadow:0 0 30px var(--color-light-glow);
}


.main-header{
 position:absolute;
 top:0;
 width:100%;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:20px 0;
 z-index:2;
 background:rgba(0, 0, 0, 0.3);
 backdrop-filter:blur(5px);
 border-bottom:1px solid var(--color-border);
}

.main-header .header-logo{
 height:50px;
 margin-right:15px;
 border-radius:10px;
}

.main-header h1{
 font-size:2.5rem;
 font-weight:700;
 color:var(--color-text);
 margin-bottom:0;
 text-shadow:0 0 15px var(--color-light-glow);
}


.auth-container{
 width:400px;
 background:var(--color-glass-bg);
 border:1px solid var(--color-border);
 border-radius:20px;
 box-shadow:0 8px 32px 0 rgba(0, 0, 0, .37);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 padding:40px;
 position:relative;
 z-index:1;
 overflow:hidden;
 height:460px;
 transition:height .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-container.show-register{
    height:600px;
    margin-top: 120px;
}

.form-container{
 width:100%;
 transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1), 
             opacity .5s cubic-bezier(0.4, 0, 0.2, 1);
 will-change: transform, opacity;
}

#login-form{
 opacity:1;
 transform: translate3d(0, 0, 0) scale(1);
 pointer-events: all;
}

#register-form{
 position:absolute;
 top:40px;
 left:40px;
 width:calc(100% - 80px);
 opacity:0;
 transform: translate3d(30px, 0, 0) scale(0.98);
 pointer-events: none;
}

.auth-container.show-register #login-form{
 opacity:0;
 transform: translate3d(-30px, 0, 0) scale(0.98);
 pointer-events: none;
}

.auth-container.show-register #register-form{
 opacity:1;
 transform: translate3d(0, 0, 0) scale(1);
 pointer-events: all;
}

#recovery-form{
 position:absolute;
 top:40px;
 left:40px;
 width:calc(100% - 80px);
 opacity:0;
 transform: translate3d(30px, 0, 0) scale(0.98);
 pointer-events: none;
}

.auth-container.show-recovery #login-form{
 opacity:0;
 transform: translate3d(-30px, 0, 0) scale(0.98);
 pointer-events: none;
}

.auth-container.show-recovery #recovery-form{
 opacity:1;
 transform: translate3d(0, 0, 0) scale(1);
 pointer-events: all;
}

h1{
 font-size:2rem;
 text-align:center;
 margin-bottom:20px;
 font-weight:600;
 letter-spacing:1px;
 color:var(--color-text);
}

.input-group{
 position:relative;
 margin-bottom:25px;
}

.input-field{
 width:100%;
 background:transparent;
 border:none;
 border-bottom:2px solid var(--color-border);
 padding:10px 5px;
 color:var(--color-text);
 font-size:1rem;
 outline:none;
}

.input-field:focus{
 border-bottom-color:var(--color-light-glow);
}

.input-field::placeholder{
 color:var(--color-text-darker);
}

.button-group{
 display:flex;
 gap:15px;
 margin-top:35px;
}

.submit-btn{
 width:100%;
 padding:12px;
 border:none;
 border-radius:50px;
 font-size:1.1rem;
 font-weight:600;
 cursor:pointer;
 background:linear-gradient(90deg, var(--color-green-metal), var(--color-teal));
 color:var(--color-deep-blue);
 transition:all .3s ease;
}

select.input-field{
 cursor: pointer;
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300c6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 5px center;
}

select.input-field option{
 background-color: #0a0a0f;
 color: var(--color-text);
}

.button-group .submit-btn{
 margin-top:0;
}

.secondary-btn{
 width:100%;
 padding:12px;
 border:2px solid var(--color-border);
 border-radius:50px;
 font-size:1.1rem;
 font-weight:600;
 cursor:pointer;
 background:transparent;
 color:var(--color-teal);
 transition:all .3s ease;
}

.secondary-btn:hover{
 background:var(--color-border);
 color:var(--color-text);
}

.submit-btn:hover{
 box-shadow:0 0 20px var(--color-light-glow);
 transform:translateY(-2px);
}

.toggle-link{
 text-align:center;
 margin-top:45px;
 font-size:.9rem;
}

.toggle-link a{
 color:var(--color-teal);
 font-weight:600;
 text-decoration:none;
 cursor:pointer;
}

.toggle-link a:hover{
 text-decoration:underline;
}




.message-popup{
 position:fixed;
 top:20px;
 left:50%;
 transform:translateX(-50%);
 padding:15px 25px;
 border-radius:8px;
 font-weight:500;
 z-index:1000;
 opacity:1;
 transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out;
 min-width:300px;
 text-align:center;
}

.message-popup.error{
 background-color:rgba(255, 77, 77, .8);
 color:#fff;
 border:1px solid var(--color-error);
 backdrop-filter:blur(5px);
}

.message-popup.success{
 background-color:rgba(77, 255, 136, .8);
 color:#fff;
 border:1px solid var(--color-success);
 backdrop-filter:blur(5px);
}

.message-popup.fade-out{
 opacity:0;
 top:-50px;
}

.language-selector{
 position:relative;
}

.lang-btn{
 background:rgba(255, 255, 255, 0.1);
 border:none;
 color:white;
 padding:8px 12px;
 border-radius:12px;
 cursor:pointer;
 display:flex;
 align-items:center;
 gap:8px;
 font-size:0.95rem;
 backdrop-filter:blur(10px);
}

.lang-btn:hover{
 background:rgba(255, 255, 255, 0.2);
}

.lang-dropdown{
 display:none;
 position:absolute;
 top:100%;
 right:0;
 background:rgba(0, 0, 0, 0.9);
 backdrop-filter:blur(20px);
 border-radius:12px;
 padding:10px;
 box-shadow:0 10px 30px rgba(0, 0, 0, 0.5);
 z-index:1000;
 max-height:400px;
 overflow-y:auto;
}

.lang-dropdown.visible{
 display:block;
}

.lang-option{
 padding:10px 12px;
 display:flex;
 align-items:center;
 gap:12px;
 font-size:1rem;
 cursor:pointer;
 border-radius:8px;
}

.lang-option:hover{
 background:rgba(255, 255, 255, 0.1);
}




.language-selector{
 position:absolute;
 top:20px;
 
 right:20px;
 
 z-index:1001;
 
}



*::-webkit-scrollbar{
 width:8px;
 height:8px;
}

*::-webkit-scrollbar-track{
 background:rgba(0, 0, 0, 0.1);
 border-radius:10px;
}

*::-webkit-scrollbar-thumb{
 background:var(--color-green-metal);
 border-radius:10px;
 border:2px solid rgba(0, 0, 0, 0.1);
}

*::-webkit-scrollbar-thumb:hover{
 background:var(--color-teal);
}

*::-webkit-scrollbar-corner{
 background:transparent;
}


.modal-overlay{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0, 0, 0, 0.85);
 backdrop-filter:blur(10px);
 display:none;
 justify-content:center;
 align-items:center;
 z-index:2000;
 padding:20px;
}

.modal-overlay.visible{
 display:flex;
}

.modal-content{
 background:var(--color-glass-bg);
 border:1px solid var(--color-border);
 border-radius:20px;
 width:100%;
 max-width:600px;
 max-height:90vh;
 display:flex;
 flex-direction:column;
 box-shadow:0 0 30px rgba(0, 198, 255, 0.2);
 animation:modal-appear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modal-appear{
 from{transform:scale(0.8);opacity:0;}
 to{transform:scale(1);opacity:1;}
}

.modal-header{
 padding:25px;
 border-bottom:1px solid var(--color-border);
 text-align:center;
 position:relative;
}

.modal-close{
 position:absolute;
 top:20px;
 right:20px;
 color:var(--color-text-darker);
 font-size:1.2rem;
 cursor:pointer;
 transition:color 0.3s ease;
}

.modal-close:hover{
 color:var(--color-error);
}

.modal-header h2{
 margin:0;
 font-size:1.5rem;
 color:var(--color-teal);
 text-shadow:0 0 10px rgba(0, 198, 255, 0.5);
}

.modal-body{
 padding:25px;
 overflow-y:auto;
 font-size:0.95rem;
 line-height:1.6;
 color:var(--color-text);
}

.modal-body h3{
 color:var(--color-teal);
 margin:20px 0 10px 0;
 font-size:1.1rem;
}

.modal-body p{
 margin-bottom:15px;
}

.modal-body ol{
 margin-left:20px;
 margin-bottom:15px;
}

.modal-body li{
 margin-bottom:10px;
}

.modal-footer{
 padding:20px 25px;
 border-top:1px solid var(--color-border);
 display:flex;
 justify-content:center;
}

.modal-footer .submit-btn{
 max-width:200px;
}

.submit-btn:disabled{
 opacity:0.4;
 cursor:not-allowed;
 box-shadow:none;
 transform:none !important;
 background:var(--color-text-darker);
}


@media (max-width:768px){
 .main-header{
 padding:15px 0;
 flex-direction:column;
}

 .main-header .header-logo{
 height:40px;
 margin-right:0;
 margin-bottom:10px;
}

 .main-header h1{
 font-size:1.8rem;
 text-align:center;
}

 .auth-container{
    width:90%;
    padding:25px;
}

 .auth-container.show-register{
    height:600px;
    margin-top: 120px;
}

 #register-form{
 top:25px;
 left:25px;
 width:calc(100% - 50px);
}

 h1{
 font-size:1.8rem;
}

 .toggle-link{
 margin-top:30px;
}
}