:root {
        --primary-green: var(--primary, #4B7B58);
        --dark-green: var(--heading-color, var(--primary-dark, #123524));
        --active-light: var(--primary-soft, #E7F0EB);
        --bronze: var(--primary, #B08D55);
        --border-color: var(--line, #DEE2E6);
    }

    /* --- Typography --- */
    h1.page-title {
        color: var(--dark-green);
        font-weight: 700;
        margin-bottom: 1.5rem;
        font-size: 2rem;
    }

    /* --- Card Components --- */
    .custom-card {
        background: var(--card-bg, #fff);
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        overflow: hidden;
        border: 1px solid var(--line, rgba(0,0,0,0.08));
        height: 100%;
    }

    /* Topup form card should not stretch to fill column height */
    #topupCard {
        height: auto;
        align-self: flex-start;
    }

    .card-header-custom {
        background-color: var(--primary-green);
        color: var(--on-primary, #fff);
        padding: 15px 20px;
        font-weight: 500;
        font-size: 1.1rem;
    }

    .card-body-custom {
        padding: 25px;
    }

    /* --- Input Simulator for "Member" Field --- */
    .input-simulator {
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        background: var(--input-bg, #fff);
        flex-wrap: wrap;
        gap: 8px;
    }
    .input-simulator:focus-within {
        border-color: var(--primary-light, #86b7fe);
        box-shadow: var(--ring, 0 0 0 0.25rem rgba(13, 110, 253, 0.25));
    }
    .member-chip {
        background-color: var(--primary-soft, #E9ECEF);
        border: 1px solid var(--primary-light, var(--primary-green));
        color: var(--text-color, #1f2937);
        border-radius: 20px;
        padding: 4px 12px 4px 4px;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        font-weight: 500;
    }
    .member-chip .member-initial {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 8px;
        background-color: var(--primary-green);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .ghost-input {
        border: none;
        outline: none;
        flex-grow: 1;
        font-size: 0.95rem;
        color: var(--text-color, #666);
        background: transparent;
        min-width: 150px;
    }
    .input-simulator.has-member .ghost-input {
        display: none; /* Hide search input when member is selected */
    }
    .topup-staff-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line, #e6ece8);
        background: var(--soft, #f7faf8);
        cursor: pointer;
        user-select: none;
        font-size: 12px;
        line-height: 1;
        color: var(--text-color, #5b6b62);
        transition: background .15s, color .15s;
    }
    .topup-staff-chip .x:hover {
        background: var(--danger-bg, #fee2e2);
        color: var(--danger-text, #b91c1c);
    }

    /* --- Payment Methods --- */
    #paymentMethodsContainer {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
        gap: 8px;
    }
    #paymentMethodsContainer .col {
        min-width: 0;
        width: auto;
    }
    .member-summary-card {
        height: auto;
    }
    .member-summary-body {
        padding: 0;
    }
    .topup-member-profile {
        padding: 1.4rem;
    }
    .topup-member-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: 1.15rem;
        margin-bottom: 1.15rem;
        border-bottom: 1px solid var(--line, var(--border-color));
    }
    .topup-member-avatar {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        background: var(--primary-soft, #eef3f0);
        color: var(--primary-dark, var(--primary-green));
        font-size: 1.35rem;
        font-weight: 800;
        box-shadow: inset 0 0 0 1px var(--primary-light, #d8e3dc);
    }
    .topup-member-main {
        min-width: 0;
        flex: 1;
    }
    .topup-member-name {
        color: var(--heading-color, var(--text-color, #111827));
        font-size: 1.45rem;
        font-weight: 800;
        line-height: 1.1;
        margin: 0 0 0.25rem;
    }
    .topup-member-phone {
        color: var(--muted, #6b7280);
        font-size: 0.86rem;
        margin: 0;
    }
    .topup-tier-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.36rem 0.75rem;
        background: var(--primary-soft, #eef3f0);
        border: 1px solid var(--primary-light, #d8e3dc);
        color: var(--primary-dark, var(--primary-green));
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .topup-balance-panel {
        margin-bottom: 1rem;
    }
    .topup-member-notes {
        background: var(--soft, #f7faf8);
        border: 1px solid var(--line, var(--border-color));
        border-radius: 0.8rem;
        padding: 1rem;
        text-align: left;
    }
    .topup-member-actions {
        display: flex;
        justify-content: stretch;
        margin-top: 1rem;
    }
    .balance-card-gradient {
        background: linear-gradient(135deg, var(--primary, #5a7a6a), var(--primary-light, #8FAE9E));
        color: var(--on-primary, #fff);
        border-radius: 1rem;
        padding: 1.35rem 1rem;
        text-align: center;
        box-shadow: 0 12px 26px rgba(0,0,0,0.10);
    }
    .balance-label-text {
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        opacity: 0.82;
        margin-bottom: 0.4rem;
    }
    .balance-display-lg {
        font-size: 2.15rem;
        font-weight: 800;
        line-height: 1.1;
    }
    .balance-badge-translucent {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        padding: 0.48rem 0.8rem;
        background: rgba(255,255,255,0.20);
        color: var(--on-primary, #fff);
        font-size: 0.85rem;
        font-weight: 700;
    }
    .balance-card-gradient.state-credit {
        background: linear-gradient(135deg, var(--warning, #d97706), var(--warning-text, #92400e));
    }
    .balance-card-gradient.state-insufficient {
        background: linear-gradient(135deg, var(--danger, #dc2626), var(--danger-text, #991b1b));
    }
    .notes-title {
        color: var(--muted, #6b7280);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        margin: 0 0 0.45rem;
    }
    .notes-content {
        color: var(--text-color, #1f2937);
        font-size: 0.9rem;
        font-weight: 600;
    }
    [data-theme="theme3"] .member-chip {
        background: var(--soft, #302731);
        border-color: var(--primary-light, #E3BBC0);
        color: var(--text-color, #F8EEF1);
    }
    [data-theme="theme3"] .member-chip .member-initial {
        background: var(--primary, #D6A2A8);
        color: var(--on-primary, #171316);
    }
    .btn-redeem {
        width: 100%;
        border: 1px solid var(--primary, var(--primary-green));
        background: var(--primary, var(--primary-green));
        color: var(--on-primary, #fff);
        border-radius: 0.65rem;
        padding: 0.72rem 1rem;
        font-weight: 700;
        transition: background .15s ease, border-color .15s ease, opacity .15s ease;
    }
    .btn-redeem:hover:not(:disabled) {
        background: var(--primary-dark, var(--primary-green));
        border-color: var(--primary-dark, var(--primary-green));
        color: var(--on-primary, #fff);
    }
    .btn-redeem:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .btn-green,
    #topupStaffModal .btn-green {
        background: var(--primary, var(--primary-green));
        border-color: var(--primary, var(--primary-green));
        color: var(--on-primary, #fff);
        font-weight: 700;
    }

    .btn-green:hover:not(:disabled),
    #topupStaffModal .btn-green:hover:not(:disabled) {
        background: var(--primary-dark, var(--primary-green));
        border-color: var(--primary-dark, var(--primary-green));
        color: var(--on-primary, #fff);
    }

    .btn-green:disabled,
    .btn-green.disabled,
    #topupStaffModal .btn-green:disabled,
    #topupStaffModal .btn-green.disabled {
        background: var(--soft, #f7faf8);
        border-color: var(--line, #dee2e6);
        color: var(--text-color, #1f2937);
        opacity: 1;
    }

    [data-theme="theme3"] .btn-green:disabled,
    [data-theme="theme3"] .btn-green.disabled,
    [data-theme="theme3"] #topupStaffModal .btn-green:disabled,
    [data-theme="theme3"] #topupStaffModal .btn-green.disabled {
        background: var(--soft, #302731);
        border-color: var(--line, #443642);
        color: var(--text-color, #F8EEF1);
        opacity: 1;
    }

    .btn-outline-green {
        background: transparent;
        border-color: var(--primary-light, var(--primary-green));
        color: var(--primary, var(--primary-green));
        font-weight: 700;
    }

    .btn-outline-green:hover,
    .btn-outline-green:focus {
        background: var(--primary, var(--primary-green));
        border-color: var(--primary, var(--primary-green));
        color: var(--on-primary, #fff);
    }

    .amount-btn,
    #topupStaffModal .btn-outline-secondary {
        background: var(--input-bg, #fff);
        border-color: var(--line, #dee2e6);
        color: var(--text-color, #1f2937);
    }

    .amount-btn:hover,
    .amount-btn:focus,
    .amount-btn.active {
        background: var(--primary, var(--primary-green));
        border-color: var(--primary, var(--primary-green));
        color: var(--on-primary, #fff);
    }

    .payment-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 68px;
        padding: 10px 6px 8px;
        background: var(--input-bg, #fff);
        border: 1.5px solid var(--line, #dee2e6);
        border-radius: 12px;
        color: var(--text-color, #1f2937);
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
        user-select: none;
    }

    .payment-selector-input {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        pointer-events: none;
    }

    .payment-card i {
        color: var(--primary-light, var(--primary-green));
        font-size: 1.35rem;
        transition: color .15s;
    }

    .payment-card:hover {
        background: var(--primary-soft, #f0f4f0);
        border-color: var(--primary, var(--primary-green));
        color: var(--primary-dark, var(--primary-green));
    }

    .payment-card:hover i {
        color: var(--primary-dark, var(--primary-green));
    }

    .payment-selector-input:focus-visible + .payment-card {
        outline: 2px solid var(--primary-light, var(--primary-green));
        outline-offset: 2px;
    }

    .payment-selector-input:checked + .payment-card {
        background: var(--primary, var(--primary-green));
        border-color: var(--primary, var(--primary-green));
        color: var(--on-primary, #fff);
        box-shadow: 0 2px 8px rgba(61, 90, 62, .22);
    }

    .payment-selector-input:checked + .payment-card i {
        color: var(--on-primary, #fff);
    }

    #topupStaffModal .modal-header,
    #topupStaffModal .modal-footer {
        background: var(--soft, #f7faf8);
        border-color: var(--line, #dee2e6);
    }

    #topupStaffModal .topup-staff-item,
    #topupStaffModal .topup-staff-item.bg-white {
        background: var(--input-bg, #fff) !important;
        border-color: var(--line, #dee2e6) !important;
        color: var(--text-color, #1f2937);
    }

    #topupStaffModal .topup-staff-item:has(input:checked) {
        background: var(--primary-soft, var(--soft, #f7faf8)) !important;
        border-color: var(--primary-light, var(--line, #dee2e6)) !important;
    }

    #topupStaffModal .topup-staff-level .text-muted {
        color: var(--muted, #6b7280) !important;
    }

    #topupStaffModal .modal-title,
    #topupStaffModal label {
        color: var(--text-color, #1f2937);
    }

    [data-theme="theme3"] .balance-card-gradient {
        background: linear-gradient(135deg, var(--primary-dark, #C2868E), var(--primary, #D6A2A8));
        color: var(--on-primary, #171316);
    }

    [data-theme="theme3"] .balance-badge-translucent {
        background: rgba(23,19,22,0.14);
        color: var(--on-primary, #171316);
    }
    @media (max-width: 576px) {
        .topup-member-header {
            align-items: flex-start;
        }
        .topup-tier-badge {
            align-self: flex-start;
        }
    }