@media screen {
    :root {
        --card-depth: 0 2px 4px rgba(15, 23, 42, 0.03),
            0 8px 24px rgba(15, 23, 42, 0.06);
        --card-depth-hover: 0 3px 6px rgba(15, 23, 42, 0.04),
            0 12px 28px rgba(15, 23, 42, 0.09);
    }

    :is(.card, .kpi-card, .coverage-card, .vacc-kpi-card, .county-kpi-card,
        .stat-card, .health-card, .breakdown-card, .insight-card, .alert-card,
        .pending-user-card, .policy-card, .about-disease-card, .landing-feature,
        .chart-container, .table-container, .about-container, .map-box,
        .chart-box, .table-box, .yearly-map-box, .insight-panel, .admin-panel,
        .alert-form-section, .login-container, .pending-card) {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: var(--card-depth) !important;
    }

    :is(.card, .kpi-card, .coverage-card, .vacc-kpi-card, .county-kpi-card,
        .stat-card, .health-card, .breakdown-card, .insight-card, .alert-card,
        .pending-user-card, .policy-card, .about-disease-card, .landing-feature,
        .chart-container, .table-container, .about-container, .map-box,
        .chart-box, .table-box, .yearly-map-box, .insight-panel, .admin-panel,
        .alert-form-section, .login-container, .pending-card):hover {
        box-shadow: var(--card-depth-hover) !important;
        transform: none;
    }

    .kpi-card::before,
    .stat-card::before,
    .policy-card::before,
    .login-container::before {
        content: none;
    }

    .login-container .logo {
        box-shadow: var(--card-depth);
    }
}