.header-text { text-align: center; margin-bottom: 30px; } .header-text h1 { font-size: 20px; font-weight: 500; color: #222; margin-bottom: 8px; } .header-text p { font-size: 14px; color: #999; text-align: left; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 10px; font-size: 15px; color: #333; font-weight: 500; } .password-input-container { position: relative; display: flex; align-items: center; } .password-input-container input { width: 100%; padding: 12px 45px 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.2s; background-color: #fafafa; } .password-input-container input:focus { border-color: #4A90E2; background-color: white; } .password-input-container input.error { border-color: #ff4444; background-color: white; } .error-message { display: none; color: #ff4444; font-size: 13px; margin-top: 8px; } .error-message.show { display: block; } .toggle-password { position: absolute; right: 15px; background: transparent; border: none; color: #999; cursor: pointer; font-size: 18px; padding: 5px; transition: color 0.2s; } .toggle-password:hover { color: #4A90E2; } .forgot-password { text-align: left; margin-top: 12px; } .forgot-password a { color: #4A90E2; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; } .forgot-password a:hover { color: #357ABD; text-decoration: underline; } .button-primary { background: linear-gradient(135deg, #5BA3F5 0%, #4A90E2 100%); color: white; border: none; border-radius: 8px; padding: 12px; width: 100%; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.2s; margin-top: 25px; box-shadow: none; } .button-primary:hover { background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%); }