.popup{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:9999;overflow-y:auto;padding:20px}.popup-content{background:var(--background-light, white);color:var(--text-dark, black);max-width:400px;width:100%;margin:auto;padding:25px;border-radius:15px;position:relative;top:50%;transform:translateY(-50%);box-shadow:0 10px 30px #0003;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:translateY(-50%)}}.popup-content h2{margin-bottom:20px;font-size:1.6rem}.popup-content input{width:94%;padding:12px;margin:8px 0;border:1px solid #ccc;border-radius:8px;background:var(--input-bg, #f9f9f9);color:var(--text-dark, black)}.input-wrapper{position:relative;width:100%}.input-wrapper>input{width:100%;padding-right:2.75rem;box-sizing:border-box}.toggle-password{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:#6c757d;padding:0;width:auto}.toggle-password:hover{background-color:transparent}.toggle-password:focus{outline:none}.popup-content button{width:100%;background-color:var(--primary-color, black);color:#fff;border:none;border-radius:8px;padding:12px;font-weight:700;margin-top:12px;cursor:pointer;transition:background .3s ease}.popup-content button:hover{background-color:#222}.popup-content .toggle-password{width:auto;background:transparent;margin-top:0;padding:0}.popup-content a{color:var(--primary-color, black);text-decoration:underline;font-weight:500}#loginMessage,#registerMessage{margin-top:10px;color:red;font-size:.9rem}.popup-content .close{position:absolute;top:12px;right:15px;font-size:22px;font-weight:700;cursor:pointer;color:var(--text-dark, black)}.popup-content+div{text-align:center;margin-top:10px}.popup-content+div img{width:90%;max-width:300px;cursor:pointer}.google-login{margin-top:15px;text-align:center}.google-login img{width:50%;max-width:280px;height:auto;cursor:pointer;border-radius:5px}.dark-mode .popup-content{background:var(--background-dark, #1e1e1e);color:var(--text-light, white);box-shadow:0 10px 30px #ffffff1a}.dark-mode .popup-content input{background:#333;color:#fff;border:1px solid #666}.dark-mode .popup-content button{background:#fff;color:#000}.dark-mode .popup-content button:hover{background:#ddd}.dark-mode .popup-content .close{color:#fff}@media screen and (max-width: 480px){.popup-content{width:90%;padding:20px;transform:translateY(-45%)}.popup-content h2{font-size:1.4rem}.popup-content input,.popup-content button{font-size:1rem}}#codePopup.popup{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:10000;padding:20px}#codePopup .popup-content{background:var(--background-light, white);color:var(--text-dark, black);max-width:400px;width:100%;margin:auto;padding:25px;border-radius:15px;position:relative;top:50%;transform:translateY(-50%);box-shadow:0 10px 30px #0003;animation:fadeIn .3s ease-out}#codePopup h2{margin-bottom:20px;font-size:1.6rem;text-align:center}#codeInputs{display:flex;justify-content:space-between;gap:10px;margin:20px 0}.code-input{width:42px;height:50px;font-size:1.5rem;text-align:center;border:2px solid #ccc;border-radius:8px;background:var(--input-bg, #f9f9f9);color:var(--text-dark, black);transition:border-color .2s ease}.code-input:focus{border-color:var(--primary-color, black);outline:none}#codePopup button{width:100%;background-color:var(--primary-color, black);color:#fff;border:none;border-radius:8px;padding:12px;font-weight:700;cursor:pointer;transition:background .3s ease}#codePopup button:hover{background-color:#222}#codeMessage{margin-top:10px;text-align:center;font-size:.95rem}#codePopup .close{position:absolute;top:12px;right:15px;font-size:22px;font-weight:700;cursor:pointer;color:var(--text-dark, black)}.dark-mode #codePopup .popup-content{background:var(--background-dark, #1e1e1e);color:var(--text-light, white);box-shadow:0 10px 30px #ffffff1a}.dark-mode .code-input{background:#333;color:#fff;border:1px solid #666}.dark-mode #codePopup button{background:#fff;color:#000}.dark-mode #codePopup button:hover{background:#ddd}.dark-mode #codePopup .close{color:#fff}@media screen and (max-width: 480px){#codeInputs{justify-content:center;gap:8px}.code-input{width:42px;height:50px;font-size:1.3rem}#codePopup button{padding:10px;font-size:.95rem}#codePopup .popup-content{padding:20px;width:90%}}.invert-theme .popup-content{background:#1e1e1e;color:#f0f0f0;box-shadow:0 10px 30px #ffffff1a}.invert-theme .popup-content input{background:#333;color:#fff;border:1px solid #666}.invert-theme .popup-content button{background:#fff;color:#000}.invert-theme .popup-content button:hover{background:#ddd}.invert-theme .popup-content a{color:#66b2ff}.invert-theme .popup-content .close{color:#fff}.invert-theme .google-login img{filter:brightness(.9) contrast(1.2)}.invert-theme #codePopup .popup-content{background:#1e1e1e;color:#f0f0f0;box-shadow:0 10px 30px #ffffff1a}.invert-theme .code-input{background:#333;color:#fff;border:1px solid #666}.invert-theme #codePopup button{background:#fff;color:#000}.invert-theme #codePopup button:hover{background:#ddd}.invert-theme #codePopup .close{color:#fff}.invert-theme #codeMessage{color:#ccc}*{box-sizing:border-box;font-family:Poppins,sans-serif;margin:0;padding:0}body{background:linear-gradient(135deg,#fff,gray);display:flex;justify-content:center;align-items:center;height:100vh}.main-container{display:flex;width:80%;height:80vh;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 15px 35px #0003}.left-section{flex:1}.right-section{flex:1;display:flex;justify-content:center;align-items:center;background:#fff}.form-container{width:80%;max-width:400px;padding:30px;text-align:center}h2{color:#2c3e50;font-size:24px;font-weight:600;margin-bottom:15px}#step-indicator{font-size:14px;color:#7f8c8d;margin-bottom:15px}.progress-bar{width:100%;height:6px;background:#dfe6e9;border-radius:10px;overflow:hidden;margin-bottom:20px}.progress{height:100%;width:33%;background:linear-gradient(45deg,#000,gray);transition:width .4s ease-in-out}.form-step{display:none}.form-step.active{display:block;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.input-group{margin-bottom:20px;text-align:left}.input-group label{display:block;margin-bottom:5px;color:#2c3e50;font-size:14px;font-weight:500}.input-group input{width:100%;padding:12px;border:1px solid #bdc3c7;border-radius:8px;font-size:14px;transition:all .3s ease-in-out}.input-group input:focus{border-color:#42a5f5;outline:none;box-shadow:0 0 8px #42a5f580}.input-group input::-moz-placeholder{color:#95a5a6;font-size:13px}.input-group input::placeholder{color:#95a5a6;font-size:13px}.btn-container{display:flex;justify-content:space-between;margin-top:20px}.password-meter{width:100%;background-color:#eee;border-radius:5px;margin-top:5px}.btn{padding:12px 20px;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:700;transition:all .3s ease-in-out;background:linear-gradient(45deg,#000,gray);color:#fff;box-shadow:0 4px 10px #42a5f54d;transform:translateY(0)}.btn:hover{opacity:.9;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.error{color:red;font-size:12px;display:none;margin-top:5px}.input-group.error input,.input-group.has-error input{border-color:red;background-color:#ffebee;animation:shake .3s ease-in-out}.input-group .error{display:none}.input-group.has-error .error{display:block}@keyframes shake{0%,to{transform:translate(0)}25%,75%{transform:translate(-5px)}50%{transform:translate(5px)}}@media (max-width: 768px){.main-container{flex-direction:column;height:auto}.left-section{height:250px}.form-container{width:100%;max-width:90%}.btn-container{flex-direction:column;gap:10px}.input-group{margin-bottom:15px}}.form-container img{width:100%;height:auto;padding-bottom:30px;display:block;margin-left:auto;margin-right:auto}body.invert-theme{background:linear-gradient(135deg,#000,#333);color:#fff}.invert-theme .main-container{background:#1a1a1a;box-shadow:0 15px 35px #fff3}.invert-theme .right-section{background:#1a1a1a}.invert-theme h2,.invert-theme .input-group label{color:#fff}.invert-theme #step-indicator{color:#ccc}.invert-theme .form-container img{filter:invert(1)}.invert-theme .progress-bar{background:#333}.invert-theme .progress{background:linear-gradient(45deg,#fff,#777)}.invert-theme .input-group input{background-color:#111;border:1px solid #444444;color:#fff}.invert-theme .input-group input:focus{border-color:#2563eb;box-shadow:0 0 8px #2563eb80}.invert-theme .btn{background:linear-gradient(45deg,#2563eb,#1e40af);color:#fff;box-shadow:0 4px 10px #2563eb4d}