:root {
        --primary-color: #061497;
        --primary-light: #2c6ecb;
        --secondary-color: #e8b537;
        --accent-color: #2c6ecb;
        --light-color: #f8f9fa;
        --dark-color: #1c222b;
        --success-color: #28a745;
        --text-color: #4a5568;
        --text-light: #718096;
        --border-radius: 12px;
        --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --transition: all 0.3s ease;
    }

    .password-reset-container {
        margin: 2rem auto;
        background: white;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        width: 100%;
        max-width: 500px;
        padding: 40px;
        text-align: center;
    }

    .password-reset-header {
        margin-bottom: 30px;
    }

    .password-reset-header h1 {
        color: var(--primary-color);
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .password-reset-header p {
        color: var(--text-light);
        font-size: 16px;
        line-height: 1.6;
    }

    .form-group {
        margin-bottom: 25px;
        text-align: left;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: var(--text-color);
        font-weight: 600;
        font-size: 14px;
    }

    .form-group input {
        width: 100%;
        padding: 15px;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        font-size: 16px;
        transition: var(--transition);
        box-sizing: border-box;
    }

    .form-group input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(6, 20, 151, 0.1);
    }

    .btn-reset {
        width: 100%;
        padding: 15px;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        margin-bottom: 20px;
    }

    .btn-reset:hover {
        background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(6, 20, 151, 0.3);
    }

    .back-to-login {
        text-align: center;
        margin-top: 20px;
    }

    .back-to-login a {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition);
    }

    .back-to-login a:hover {
        color: var(--primary-light);
        text-decoration: underline;
    }

    .alert {
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 8px;
        font-weight: 500;
    }

    .alert-success {
        background-color: rgba(40, 167, 69, 0.1);
        border: 1px solid rgba(40, 167, 69, 0.2);
        color: var(--success-color);
    }

    .alert-error {
        background-color: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .alert-info {
        background-color: rgba(52, 152, 219, 0.1);
        border: 1px solid rgba(52, 152, 219, 0.2);
        color: var(--accent-color);
    }

    .help-text {
        font-size: 14px;
        color: var(--text-light);
        margin-top: 8px;
        line-height: 1.4;
    }

    .icon {
        font-size: 48px;
        color: var(--primary-color);
        margin-bottom: 20px;
    }