body.popup-open{touch-action:none;-webkit-overflow-scrolling:auto}html.popup-open{overflow:hidden}.login-container{display:flex;align-items:center;justify-content:center;min-height:100dvh;width:100%;margin:0 auto;background:linear-gradient(135deg,var(--bg-light) 0,var(--bg-light) 100%);padding:var(--spacing-lg);position:fixed;inset:0;z-index:1000;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.3) rgba(0,0,0,0);touch-action:manipulation;overscroll-behavior:none;top:0!important;left:0!important;right:0!important;bottom:0!important}.login-container .animation-wrapper{width:100%;max-width:450px}.login-container .login-card{position:relative;background:var(--bg-grey);border-radius:var(--border-radius-large);box-shadow:var(--shadow-medium);padding:var(--spacing-xxxl);width:100%;max-width:450px;max-height:100dvh;overflow-y:auto;transition:all var(--transition-speed) ease;z-index:1001;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,0)}.login-container .login-card .close-button{position:absolute;top:12px;right:12px;background:rgba(0,0,0,0);border:none;color:var(--text-color);font-size:1.5rem;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.login-container .login-card .close-button:hover{background:hsla(0,0%,100%,.1);color:var(--text-color)}.login-container .login-card .popup-header{text-align:center;margin-bottom:var(--spacing-xxl)}.login-container .login-card .popup-header .logo-icon{width:auto;height:56px;max-width:346px;margin-bottom:var(--spacing-md)}.login-container .login-card .popup-header h1{color:#000;margin-bottom:var(--spacing-xs);font-size:var(--font-size-xxl);text-align:center}.login-container .login-card .popup-header .subtitle{color:var(--text-secondary);margin-bottom:0;text-align:center}.login-container .login-card h1{color:var(--text-color);margin-bottom:var(--spacing-xs);font-size:var(--font-size-xxl);text-align:center}.login-container .login-card .subtitle{color:var(--text-secondary);margin-bottom:var(--spacing-xxl);text-align:center}.login-container .login-card .form-group{margin-bottom:var(--spacing-lg);transition:all .3s ease}.login-container .login-card .form-group label{display:block;margin-bottom:var(--spacing-sm);font-weight:600;color:var(--text-secondary)}.login-container .login-card .form-group input{width:100%;padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);background-color:var(--bg-light);color:var(--text-color)}.login-container .login-card .form-group input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px rgba(var(--primary-color-rgb),.1);transform:translateY(-1px)}.login-container .login-card .form-group input:hover:not(:focus){border-color:rgba(var(--primary-color-rgb),.3);transform:translateY(-.5px)}.login-container .login-card form .form-group{margin-bottom:var(--spacing-lg)}.login-container .login-card form .form-group label{display:block;margin-bottom:var(--spacing-sm);font-weight:600;color:var(--text-secondary)}.login-container .login-card form .form-group input{width:100%;padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);transition:border-color var(--transition-speed);background-color:var(--bg-white);color:var(--text-color)}.login-container .login-card form .form-group input:focus{border-color:var(--primary-color);outline:none}.login-container .login-card form .password-input .input-wrapper{position:relative}.login-container .login-card form .password-input .input-wrapper input{width:100%;padding-right:2.5rem;background-color:var(--bg-white);color:var(--text-color)}.login-container .login-card form .password-input .input-wrapper .password-toggle-button{position:absolute;top:55%;right:.75rem;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:1.1rem;transition:color var(--transition-speed)}.login-container .login-card form .password-input .input-wrapper .password-toggle-button:hover{color:var(--text-color)}.login-container .login-card .error-message{background-color:rgba(220,53,69,.1);color:#dc3545;border-left:3px solid #dc3545;padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md);border-radius:4px;font-size:.9rem;animation:fadeIn .3s ease}.login-container .login-card .forgot-password{text-align:right;margin:var(--spacing-sm) 0}.login-container .login-card .forgot-password a{color:var(--primary-color);text-decoration:none}.login-container .login-card .register-link{margin-top:var(--spacing-xl);text-align:center;color:var(--text-secondary)}.login-container .login-card .register-link a{color:var(--primary-color);text-decoration:none;font-weight:600}.login-container .login-card .separator{display:flex;align-items:center;text-align:center;margin:var(--spacing-lg) 0}.login-container .login-card .separator span{color:var(--text-color);padding:0 var(--spacing-sm);background:var(--bg-grey);position:relative;z-index:1}.login-container .login-card .separator:after,.login-container .login-card .separator:before{content:"";flex:1 1;border-bottom:1px solid var(--border-color)}.login-container .login-card .separator:before{margin-right:var(--spacing-sm)}.login-container .login-card .separator:after{margin-left:var(--spacing-sm)}.login-container .login-card .button--primary,.login-container .login-card .button-primary{background:var(--primary-color)!important;color:var(--text-light)!important}.login-container .login-card .button--primary:hover,.login-container .login-card .button-primary:hover{background:var(--primary-color)!important;opacity:.9}.login-container .login-card .button--primary:disabled,.login-container .login-card .button-primary:disabled{background:var(--primary-color)!important;opacity:.7}.login-container .login-card .social-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.login-container .login-card .social-buttons .google-button,.login-container .login-card .social-buttons .twitter-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);border:1px solid var(--border-color);transition:all var(--transition-speed);background-color:var(--bg-grey);color:var(--text-color)}.login-container .login-card .social-buttons .google-button:hover,.login-container .login-card .social-buttons .twitter-button:hover{background-color:var(--bg-grey);box-shadow:0 1px 3px rgba(0,0,0,.1)}.login-container .login-card .social-buttons .google-button:disabled,.login-container .login-card .social-buttons .twitter-button:disabled{cursor:not-allowed;opacity:.7}.login-container .login-card .social-buttons .google-icon{height:24px;width:24px;margin-right:var(--spacing-sm)}.login-container .login-card .social-buttons .twitter-icon{font-size:20px;margin-right:var(--spacing-sm)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.verification-card{text-align:center;max-width:500px}.verification-card .popup-header{margin-bottom:var(--spacing-lg)}.verification-card .popup-header .logo-icon{width:auto;height:56px;max-width:346px;margin-bottom:var(--spacing-md)}.verification-card .popup-header h1{margin-bottom:0}.email-verification-message{margin:20px 0;padding:20px;background-color:rgba(0,0,0,.05);border-radius:8px}.user-email{font-weight:700;font-size:18px;color:#06c;margin:10px 0;word-break:break-all}.verification-actions{display:flex;flex-direction:column;gap:15px}.login-button-link{display:inline-block;text-decoration:none;background-color:#06c;color:#fff;padding:12px 15px;border-radius:4px;transition:background-color .3s;border:none;font-size:16px;cursor:pointer}.login-button-link:hover{background-color:#05a}@media(max-width:var(--breakpoint-md )){.login-container .login-card{padding:var(--spacing-xxl);max-width:100%}.login-container .login-card h1{font-size:var(--font-size-xl)}.login-container .login-card .login-button,.login-container .login-card input{padding:var(--spacing-sm)}}@media(max-width:var(--breakpoint-sm )){.login-container .login-card{padding:var(--spacing-lg)}.login-container .login-card h1{font-size:var(--font-size-lg)}}