:root {    --primary: #10B981;    --primary-dark: #059669;    --secondary: #3B82F6;    --dark: #1F2937;    --gray: #6B7280;    --light: #F3F4F6;    --white: #FFFFFF;    --error: #EF4444;}* {    margin: 0;    padding: 0;    box-sizing: border-box;    font-family: 'Segoe UI', system-ui, sans-serif;}body {    min-height: 100vh;    display: flex;    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/walpaper.jpg') no-repeat center center fixed;    background-size: cover;    position: relative;    }.login-container {    display: flex;    width: 100%;    max-width: 1200px;    margin: auto;    background: var(--white);    border-radius: 20px;    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);    overflow: hidden;   }.login-image {    flex: 1;    background: linear-gradient(rgba(16, 185, 129, 0.8), rgba(59, 130, 246, 0.8)),                url('images/department-bg.jpg') center/cover;        display: flex;    flex-direction: column;    justify-content: center;    color: var(--white);    position: relative;}.welcome-text {    position: relative;    z-index: 1;    text-align: center;}.welcome-text h1 {    font-size: 2.5rem;    margin-bottom: 1rem;    font-weight: 700;}.welcome-text p {    font-size: 1.1rem;    opacity: 0.9;    line-height: 1.6;}.login-form-container {    flex: 1;    padding: 40px;    display: flex;    flex-direction: column;    justify-content: center;}.login-header {    text-align: center;    margin-bottom: 40px;}.department-logo {    width: 100px;    height: 100px;    margin: 0 auto 20px;    display: block;}.login-header h2 {    color: var(--dark);    font-size: 1.8rem;    font-weight: 600;}.form-group {    margin-bottom: 20px;}.form-group label {    display: block;    color: var(--dark);    margin-bottom: 8px;    font-size: 0.9rem;    font-weight: 500;}.form-group input {    width: 100%;    padding: 12px 16px;    border: 2px solid var(--light);    border-radius: 8px;    font-size: 1rem;    transition: all 0.3s ease;}.form-group input:focus {    outline: none;    border-color: var(--primary);    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);}.password-field {    position: relative;}.password-toggle {    position: absolute;    right: 16px;    top: 50%;    transform: translateY(-50%);    color: var(--gray);    cursor: pointer;    transition: color 0.3s;}.password-toggle:hover {    color: var(--dark);}.error-message {    background: rgba(239, 68, 68, 0.1);    color: var(--error);    padding: 12px 16px;    border-radius: 8px;    margin-bottom: 20px;    font-size: 0.9rem;    display: flex;    align-items: center;    gap: 8px;    animation: shake 0.5s ease-in-out;}.login-btn {    width: 100%;    padding: 14px;    background: var(--primary);    color: var(--white);    border: none;    border-radius: 8px;    font-size: 1rem;    font-weight: 500;    cursor: pointer;    transition: all 0.3s ease;    display: flex;    align-items: center;    justify-content: center;    gap: 8px;}.login-btn:hover {    background: var(--primary-dark);    transform: translateY(-1px);}.login-btn:active {    transform: translateY(1px);}@keyframes shake {    0%, 100% { transform: translateX(0); }    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }    20%, 40%, 60%, 80% { transform: translateX(4px); }}@media (max-width: 768px) {    .login-container {        flex-direction: column;        margin: 20px;    }    .login-image {        display: none;    }    .login-form-container {        padding: 30px 20px;    }}.auth-link {    text-align: center;    margin-top: 20px;    color: var(--gray);    font-size: 14px;}.auth-link a {    color: var(--primary);    text-decoration: none;    font-weight: 500;}.auth-link a:hover {    text-decoration: underline;}/* Success Message Styles - matches your error message style */.success-message {    background: rgba(16, 185, 129, 0.1);    color: var(--primary);    padding: 12px 16px;    border-radius: 8px;    margin-bottom: 20px;    font-size: 0.9rem;    display: flex;    align-items: center;    gap: 8px;    animation: slideIn 0.5s ease-in-out;}@keyframes slideIn {    from {        opacity: 0;        transform: translateY(-10px);    }    to {        opacity: 1;        transform: translateY(0);    }}/* Password Reset Form Specific Styles */.password-hint {    color: var(--gray);    font-size: 0.8rem;    margin-top: 6px;}/* Auth Links - matches your auth-link style */.auth-links {    margin-top: 1rem;    display: flex;    justify-content: space-between;    align-items: center;}.forgot-password a,.signup-link a {    color: #2E7D32;    text-decoration: none;    font-size: 0.9rem;    transition: color 0.3s ease;    display: inline-flex;    align-items: center;    gap: 0.5rem;}.forgot-password a:hover,.signup-link a:hover {    color: #1B5E20;}/* Forgot Password Link */.forgot-password {    text-align: right;    margin-top: 12px;    margin-bottom: 20px;}.forgot-password a {    color: var(--primary);    text-decoration: none;    font-size: 0.9rem;    font-weight: 500;    display: inline-flex;    align-items: center;    gap: 8px;}.forgot-password a:hover {    color: var(--primary-dark);}/* Back to Login Link */.back-to-login {    display: inline-flex;    align-items: center;    gap: 8px;    color: var(--primary);    text-decoration: none;    margin-top: 20px;    font-weight: 500;}.back-to-login:hover {    color: var(--primary-dark);}/* Loading State */.login-btn:disabled {    background-color: var(--gray);    cursor: not-allowed;    transform: none;}.login-btn i.fa-spinner {    animation: spin 1s linear infinite;}@keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }}/* Token Invalid State */.token-invalid {    text-align: center;    padding: 20px;}.token-invalid i {    font-size: 3rem;    color: var(--error);    margin-bottom: 16px;}.token-invalid h3 {    color: var(--dark);    margin-bottom: 12px;}.token-invalid p {    color: var(--gray);    margin-bottom: 20px;}/* Password Toggle Enhancement */.password-field .password-toggle {    padding: 8px;    border-radius: 50%;    background: transparent;    transition: background-color 0.3s ease;}.password-field .password-toggle:hover {    background: var(--light);}/* Form Enhancement for Password Reset */#resetPasswordForm .form-group,#forgotPasswordForm .form-group {    margin-bottom: 24px;}/* Responsive Enhancement */@media (max-width: 768px) {    .welcome-text h1 {        font-size: 2rem;    }        .welcome-text p {        font-size: 1rem;    }        .login-header h2 {        font-size: 1.5rem;    }}