/*
 * MyAPS premium summary-card system
 * ---------------------------------
 * Shared visual language for compact KPI and summary cards across the
 * role dashboards and every active `my...` workspace. The selectors are
 * deliberately explicit so forms, tables, and large content panels keep
 * their own visual hierarchy.
 */

/* Palette order follows the approved MyPres reference: orange, teal,
   blue, violet, emerald, rose, cyan, then indigo. Variables are placed on
   grid children so they also reach cards wrapped by Bootstrap columns. */
:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n + 1),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n + 1),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n + 1),
:root body.my-premium-cards .row > :nth-child(8n + 1) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n + 1),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n + 1),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n + 1),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n + 1) {
    --my-card-a: #9a3412;
    --my-card-b: #f59e0b;
    --my-card-shadow: rgba(154, 52, 18, 0.28);
}

:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n + 2),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n + 2),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n + 2),
:root body.my-premium-cards .row > :nth-child(8n + 2) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n + 2),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n + 2),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n + 2),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n + 2) {
    --my-card-a: #0f766e;
    --my-card-b: #14b8a6;
    --my-card-shadow: rgba(15, 118, 110, 0.28);
}

:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n + 3),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n + 3),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n + 3),
:root body.my-premium-cards .row > :nth-child(8n + 3) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n + 3),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n + 3),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n + 3),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n + 3) {
    --my-card-a: #1d4ed8;
    --my-card-b: #0ea5e9;
    --my-card-shadow: rgba(29, 78, 216, 0.28);
}

:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n + 4),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n + 4),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n + 4),
:root body.my-premium-cards .row > :nth-child(8n + 4) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n + 4),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n + 4),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n + 4),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n + 4) {
    --my-card-a: #5b21b6;
    --my-card-b: #8b5cf6;
    --my-card-shadow: rgba(91, 33, 182, 0.28);
}

:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n + 5),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n + 5),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n + 5),
:root body.my-premium-cards .row > :nth-child(8n + 5) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n + 5),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n + 5),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n + 5),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n + 5) {
    --my-card-a: #047857;
    --my-card-b: #10b981;
    --my-card-shadow: rgba(4, 120, 87, 0.28);
}

:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n + 6),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n + 6),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n + 6),
:root body.my-premium-cards .row > :nth-child(8n + 6) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n + 6),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n + 6),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n + 6),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n + 6) {
    --my-card-a: #9f1239;
    --my-card-b: #ec4899;
    --my-card-shadow: rgba(159, 18, 57, 0.27);
}

:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n + 7),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n + 7),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n + 7),
:root body.my-premium-cards .row > :nth-child(8n + 7) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n + 7),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n + 7),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n + 7),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n + 7) {
    --my-card-a: #0e7490;
    --my-card-b: #06b6d4;
    --my-card-shadow: rgba(14, 116, 144, 0.28);
}

:root body.my-premium-cards :is(
    .teacher-stat-grid,
    .staff-queue-summary-grid,
    .staff-sidebar-summary-grid,
    .admin-command-grid,
    .admin-command-status-row,
    .bk-stats,
    .mylearn-stat-shell,
    .mylearn-command-status-grid,
    .mylearn-exec-summary,
    .mylearn-material-summary,
    .osis-grid-3,
    .osis-grid-4,
    .osis-mpls-summary-grid,
    .command-stats,
    .finance-stats,
    .bill-stats,
    .cash-stats,
    .approval-stats,
    .payment-auto-stats,
    .payment-report-stats,
    .payment-type-stats,
    .report-stats,
    .wallet-stat-grid,
    .wallet-hero-metrics,
    .payroll-stat-grid,
    .overview-stat-grid,
    .report-summary-grid,
    .summary-strip,
    .personal-flow-grid,
    .personal-metric-grid,
    .myrapor-stat-shell,
    .myrapor-progress-summary,
    .myprakerin-metrics,
    .myskl-grid-4,
    .audit-stat-grid,
    .auth-stats,
    .auto-schedule-metrics,
    .dwa-metric-grid,
    .employee-metrics,
    .gate-role-metrics,
    .guru-task-metrics,
    .helpdesk-stats,
    .humas-metrics,
    .integration-stats,
    .kaprog-metrics,
    .kbm-helpdesk-stats,
    .ks-one-door-stats,
    .lab-stats,
    .mpls-admin-stats
) > :nth-child(8n),
:root body.my-premium-cards .guru-kbm-summary-grid > :nth-child(8n),
:root body.my-premium-cards .mycbt-hero-stats > :nth-child(8n),
:root body.my-premium-cards .row > :nth-child(8n) > .welcome-stat-chip,
:root body.my-premium-cards .dashboard-section > :nth-child(8n),
:root body.my-premium-cards .progress-summary-card .row > :nth-child(8n),
:root body.my-premium-cards .anbuso-shell .row > :nth-child(8n),
:root body.my-premium-cards .konsel-warning-step:nth-child(8n) {
    --my-card-a: #3730a3;
    --my-card-b: #6366f1;
    --my-card-shadow: rgba(55, 48, 163, 0.28);
}

/* Compact cards only. Repeating the opt-in class is an intentional cascade
   guard: many legacy module pages render their own inline styles after HEAD. */
:root body.my-premium-cards.my-premium-cards :is(
    .welcome-stat-chip,
    .guru-welcome-log-card,
    .teacher-stat-chip,
    .staff-queue-summary,
    .staff-sidebar-summary-grid > div,
    .admin-command-metric,
    .admin-command-status,
    .admin-monitor-metric,
    .admin-monitor-section-metric,
    .additional-duty-metric,
    .employee-metric,
    .guru-task-metric,
    .helpdesk-stat,
    .kbm-helpdesk-stat,
    .kaprog-metric,
    .humas-metric,
    .lab-stat,
    .leadership-summary-stat,
    .ks-one-door-stat,
    .ks-program-stat,
    .auth-stat,
    .audit-stat,
    .bukuinduk-stat,
    .dokumenpeserta-stat,
    .du-stat,
    .gate-role-metric,
    .gate-user-status-metric,
    .jurusan-sync-metric,
    .kelas-summary-card,
    .category-summary-card,
    .bk-stats > article,
    .greeting-stat-card,
    .anbuso-stat-card,
    .konsel-warning-copy,
    .mylearn-stat-mini,
    .mylearn-command-status,
    .mylearn-exec-summary > div,
    .mylearn-material-summary > div,
    .osis-stat,
    .osis-public-stats .stat-card,
    .osis-mpls-summary-grid > *,
    .command-stat,
    .finance-stat,
    .bill-stat,
    .cash-stat,
    .approval-stat,
    .payment-auto-stat,
    .payment-report-stat,
    .payment-type-stat,
    .report-stat,
    .wallet-stat,
    .wallet-hero-metric,
    .payroll-stat-grid > *,
    .widget-stats,
    .dashboard-section .stat-card,
    .progress-summary-card .mini-card,
    .overview-stat-card,
    .report-summary-grid > article,
    .summary-strip > *,
    .personal-flow-grid > article,
    .personal-metric-grid > article,
    .myrapor-stat-mini,
    .myrapor-progress-summary > div,
    .myprakerin-metric,
    .myskl-stat
) {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    background:
        radial-gradient(circle at 105% 118%, rgba(255, 255, 255, 0.24) 0 24%, transparent 24.5%),
        radial-gradient(circle at 84% -30%, rgba(255, 255, 255, 0.17) 0 24%, transparent 24.5%),
        linear-gradient(135deg, var(--my-card-a, #0f766e), var(--my-card-b, #14b8a6)) !important;
    box-shadow:
        0 15px 30px var(--my-card-shadow, rgba(15, 118, 110, 0.27)),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    transition:
        transform 0.36s cubic-bezier(0.16, 0.84, 0.24, 1),
        box-shadow 0.36s ease,
        filter 0.3s ease !important;
}

:root body.my-premium-cards.my-premium-cards :is(
    .welcome-stat-chip,
    .guru-welcome-log-card,
    .teacher-stat-chip,
    .staff-queue-summary,
    .staff-sidebar-summary-grid > div,
    .admin-command-metric,
    .admin-command-status,
    .admin-monitor-metric,
    .admin-monitor-section-metric,
    .additional-duty-metric,
    .employee-metric,
    .guru-task-metric,
    .helpdesk-stat,
    .kbm-helpdesk-stat,
    .kaprog-metric,
    .humas-metric,
    .lab-stat,
    .leadership-summary-stat,
    .ks-one-door-stat,
    .ks-program-stat,
    .auth-stat,
    .audit-stat,
    .bukuinduk-stat,
    .dokumenpeserta-stat,
    .du-stat,
    .gate-role-metric,
    .gate-user-status-metric,
    .jurusan-sync-metric,
    .kelas-summary-card,
    .category-summary-card,
    .bk-stats > article,
    .greeting-stat-card,
    .anbuso-stat-card,
    .konsel-warning-copy,
    .mylearn-stat-mini,
    .mylearn-command-status,
    .mylearn-exec-summary > div,
    .mylearn-material-summary > div,
    .osis-stat,
    .osis-public-stats .stat-card,
    .osis-mpls-summary-grid > *,
    .command-stat,
    .finance-stat,
    .bill-stat,
    .cash-stat,
    .approval-stat,
    .payment-auto-stat,
    .payment-report-stat,
    .payment-type-stat,
    .report-stat,
    .wallet-stat,
    .wallet-hero-metric,
    .payroll-stat-grid > *,
    .widget-stats,
    .dashboard-section .stat-card,
    .progress-summary-card .mini-card,
    .overview-stat-card,
    .report-summary-grid > article,
    .summary-strip > *,
    .personal-flow-grid > article,
    .personal-metric-grid > article,
    .myrapor-stat-mini,
    .myrapor-progress-summary > div,
    .myprakerin-metric,
    .myskl-stat
):hover {
    z-index: 3;
    filter: saturate(1.08) brightness(1.035);
    transform: translateY(-5px) !important;
    box-shadow:
        0 23px 42px var(--my-card-shadow, rgba(15, 118, 110, 0.33)),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

/* All textual layers stay crisp on the saturated backgrounds. */
:root body.my-premium-cards.my-premium-cards :is(
    .welcome-stat-chip,
    .guru-welcome-log-card,
    .teacher-stat-chip,
    .staff-queue-summary,
    .staff-sidebar-summary-grid > div,
    .admin-command-metric,
    .admin-command-status,
    .admin-monitor-metric,
    .admin-monitor-section-metric,
    .additional-duty-metric,
    .employee-metric,
    .guru-task-metric,
    .helpdesk-stat,
    .kbm-helpdesk-stat,
    .kaprog-metric,
    .humas-metric,
    .lab-stat,
    .leadership-summary-stat,
    .ks-one-door-stat,
    .ks-program-stat,
    .auth-stat,
    .audit-stat,
    .bukuinduk-stat,
    .dokumenpeserta-stat,
    .du-stat,
    .gate-role-metric,
    .gate-user-status-metric,
    .jurusan-sync-metric,
    .kelas-summary-card,
    .category-summary-card,
    .bk-stats > article,
    .greeting-stat-card,
    .anbuso-stat-card,
    .konsel-warning-copy,
    .mylearn-stat-mini,
    .mylearn-command-status,
    .mylearn-exec-summary > div,
    .mylearn-material-summary > div,
    .osis-stat,
    .osis-public-stats .stat-card,
    .osis-mpls-summary-grid > *,
    .command-stat,
    .finance-stat,
    .bill-stat,
    .cash-stat,
    .approval-stat,
    .payment-auto-stat,
    .payment-report-stat,
    .payment-type-stat,
    .report-stat,
    .wallet-stat,
    .wallet-hero-metric,
    .payroll-stat-grid > *,
    .widget-stats,
    .dashboard-section .stat-card,
    .progress-summary-card .mini-card,
    .overview-stat-card,
    .report-summary-grid > article,
    .summary-strip > *,
    .personal-flow-grid > article,
    .personal-metric-grid > article,
    .myrapor-stat-mini,
    .myrapor-progress-summary > div,
    .myprakerin-metric,
    .myskl-stat
) :is(h1, h2, h3, h4, h5, h6, strong, b, .stat-value, .dashboard-stat-value, .anbuso-stat-value),
:root body.my-premium-cards.my-premium-cards :is(
    .welcome-stat-chip,
    .guru-welcome-log-card,
    .teacher-stat-chip,
    .staff-queue-summary,
    .staff-sidebar-summary-grid > div,
    .admin-command-metric,
    .admin-command-status,
    .bk-stats > article,
    .greeting-stat-card,
    .anbuso-stat-card,
    .konsel-warning-copy,
    .mylearn-stat-mini,
    .mylearn-command-status,
    .mylearn-exec-summary > div,
    .mylearn-material-summary > div,
    .osis-stat,
    .osis-public-stats .stat-card,
    .command-stat,
    .finance-stat,
    .bill-stat,
    .cash-stat,
    .approval-stat,
    .payment-auto-stat,
    .payment-report-stat,
    .payment-type-stat,
    .report-stat,
    .wallet-stat,
    .wallet-hero-metric,
    .dashboard-section .stat-card,
    .progress-summary-card .mini-card,
    .overview-stat-card,
    .report-summary-grid > article,
    .summary-strip > *,
    .personal-flow-grid > article,
    .personal-metric-grid > article,
    .myrapor-stat-mini,
    .myrapor-progress-summary > div,
    .myprakerin-metric,
    .myskl-stat
) :is(.text-dark, .text-primary, .text-secondary, .text-success, .text-info, .text-warning, .text-danger) {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(3, 20, 32, 0.12);
}

:root body.my-premium-cards.my-premium-cards :is(
    .welcome-stat-chip,
    .guru-welcome-log-card,
    .teacher-stat-chip,
    .staff-queue-summary,
    .staff-sidebar-summary-grid > div,
    .admin-command-metric,
    .admin-command-status,
    .admin-monitor-metric,
    .admin-monitor-section-metric,
    .additional-duty-metric,
    .employee-metric,
    .guru-task-metric,
    .helpdesk-stat,
    .kbm-helpdesk-stat,
    .kaprog-metric,
    .humas-metric,
    .lab-stat,
    .leadership-summary-stat,
    .ks-one-door-stat,
    .ks-program-stat,
    .auth-stat,
    .audit-stat,
    .bukuinduk-stat,
    .dokumenpeserta-stat,
    .du-stat,
    .gate-role-metric,
    .gate-user-status-metric,
    .jurusan-sync-metric,
    .kelas-summary-card,
    .category-summary-card,
    .bk-stats > article,
    .greeting-stat-card,
    .anbuso-stat-card,
    .konsel-warning-copy,
    .mylearn-stat-mini,
    .mylearn-command-status,
    .mylearn-exec-summary > div,
    .mylearn-material-summary > div,
    .osis-stat,
    .osis-public-stats .stat-card,
    .osis-mpls-summary-grid > *,
    .command-stat,
    .finance-stat,
    .bill-stat,
    .cash-stat,
    .approval-stat,
    .payment-auto-stat,
    .payment-report-stat,
    .payment-type-stat,
    .report-stat,
    .wallet-stat,
    .wallet-hero-metric,
    .payroll-stat-grid > *,
    .widget-stats,
    .dashboard-section .stat-card,
    .progress-summary-card .mini-card,
    .overview-stat-card,
    .report-summary-grid > article,
    .summary-strip > *,
    .personal-flow-grid > article,
    .personal-metric-grid > article,
    .myrapor-stat-mini,
    .myrapor-progress-summary > div,
    .myprakerin-metric,
    .myskl-stat
) :is(small, p, .text-muted, .stat-label, .stat-caption, .anbuso-stat-label, .myskl-label),
:root body.my-premium-cards.my-premium-cards :is(
    .guru-welcome-log-card .guru-welcome-log-text span,
    .teacher-stat-chip small,
    .staff-queue-summary span,
    .staff-sidebar-summary-grid > div > span,
    .admin-command-metric > span,
    .admin-command-status > span,
    .mylearn-stat-mini span,
    .mylearn-command-status span,
    .mylearn-exec-summary span,
    .mylearn-material-summary span,
    .myrapor-progress-summary span,
    .osis-stat small,
    .osis-public-stats .stat-card small
) {
    color: rgba(255, 255, 255, 0.78) !important;
    text-shadow: none;
}

/* Frosted icon containers keep icons solid and non-transparent. */
:root body.my-premium-cards.my-premium-cards :is(
    .welcome-stat-icon,
    .guru-welcome-log-icon,
    .teacher-stat-chip > span:first-child,
    .staff-queue-summary > i,
    .staff-sidebar-summary-grid > div > i,
    .admin-command-metric > i,
    .admin-command-status > i,
    .admin-monitor-metric > i,
    .admin-monitor-section-metric > i,
    .bk-stats > article > i,
    .greeting-stat-card .icon-bg-soft,
    .mylearn-stat-mini > i,
    .mylearn-command-status > i,
    .mylearn-exec-summary > div > i,
    .mylearn-material-summary > div > i,
    .osis-stat-icon,
    .osis-public-stats .stat-icon,
    .command-stat-icon,
    .payment-auto-stat-icon,
    .dashboard-section .stat-card .icon-shape,
    .progress-summary-card .mini-card .icon-shape,
    .overview-stat-card > i,
    .report-summary-grid > article > i,
    .personal-flow-grid > article > i,
    .personal-metric-grid > article > span:first-child,
    .myrapor-stat-mini .icon-bg-soft,
    .myrapor-progress-summary .myrapor-summary-icon,
    .myprakerin-metric-icon
) {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.17) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 9px 20px rgba(3, 20, 32, 0.15) !important;
    backdrop-filter: blur(8px);
}

:root body.my-premium-cards.my-premium-cards :is(
    .welcome-stat-icon,
    .guru-welcome-log-icon,
    .teacher-stat-chip > span:first-child,
    .staff-queue-summary > i,
    .staff-sidebar-summary-grid > div > i,
    .admin-command-metric > i,
    .admin-command-status > i,
    .bk-stats > article > i,
    .greeting-stat-card .icon-bg-soft,
    .mylearn-stat-mini > i,
    .mylearn-command-status > i,
    .osis-stat-icon,
    .osis-public-stats .stat-icon,
    .command-stat-icon,
    .dashboard-section .icon-shape,
    .overview-stat-card > i,
    .report-summary-grid > article > i,
    .personal-flow-grid > article > i,
    .personal-metric-grid > article > span:first-child,
    .myrapor-stat-mini .icon-bg-soft,
    .myrapor-progress-summary .myrapor-summary-icon,
    .myprakerin-metric-icon
) :is(i, i::before),
:root body.my-premium-cards.my-premium-cards .overview-stat-card > i::before {
    color: #fff !important;
}

:root body.my-premium-cards.my-premium-cards .overview-stat-card > b {
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.26) !important;
}

/* MyKonsel's empty-state counters are pills, not cards, so they retain their
   compact radius while using the same solid color language. */
:root body.my-premium-cards.my-premium-cards .konsel-empty-stats > span {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    background: linear-gradient(135deg, var(--my-card-a, #0f766e), var(--my-card-b, #14b8a6)) !important;
    box-shadow: 0 10px 22px var(--my-card-shadow, rgba(15, 118, 110, 0.22)) !important;
}

:root body.my-premium-cards.my-premium-cards .konsel-empty-stats > span:nth-child(1) {
    --my-card-a: #0f766e;
    --my-card-b: #14b8a6;
    --my-card-shadow: rgba(15, 118, 110, 0.24);
}

:root body.my-premium-cards.my-premium-cards .konsel-empty-stats > span:nth-child(2) {
    --my-card-a: #5b21b6;
    --my-card-b: #8b5cf6;
    --my-card-shadow: rgba(91, 33, 182, 0.24);
}

:root body.my-premium-cards.my-premium-cards .konsel-empty-stats strong {
    color: #fff !important;
}

@media (max-width: 767.98px) {
    :root body.my-premium-cards.my-premium-cards :is(
        .welcome-stat-chip,
        .guru-welcome-log-card,
        .teacher-stat-chip,
        .staff-queue-summary,
        .admin-command-metric,
        .admin-command-status,
        .bk-stats > article,
        .greeting-stat-card,
        .mylearn-stat-mini,
        .mylearn-command-status,
        .osis-stat,
        .command-stat,
        .finance-stat,
        .bill-stat,
        .cash-stat,
        .approval-stat,
        .wallet-stat,
        .dashboard-section .stat-card,
        .progress-summary-card .mini-card,
        .overview-stat-card,
        .report-summary-grid > article,
        .personal-flow-grid > article,
        .personal-metric-grid > article,
        .myrapor-stat-mini,
        .myrapor-progress-summary > div,
        .myprakerin-metric,
        .myskl-stat
    ):hover {
        transform: translateY(-2px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root body.my-premium-cards.my-premium-cards :is(
        .welcome-stat-chip,
        .guru-welcome-log-card,
        .teacher-stat-chip,
        .staff-queue-summary,
        .admin-command-metric,
        .admin-command-status,
        .bk-stats > article,
        .greeting-stat-card,
        .mylearn-stat-mini,
        .mylearn-command-status,
        .osis-stat,
        .command-stat,
        .overview-stat-card,
        .personal-flow-grid > article,
        .personal-metric-grid > article,
        .myrapor-stat-mini,
        .myrapor-progress-summary > div,
        .myprakerin-metric,
        .myskl-stat
    ) {
        transition: none !important;
    }

    :root body.my-premium-cards.my-premium-cards :is(
        .welcome-stat-chip,
        .guru-welcome-log-card,
        .teacher-stat-chip,
        .staff-queue-summary,
        .admin-command-metric,
        .admin-command-status,
        .bk-stats > article,
        .greeting-stat-card,
        .mylearn-stat-mini,
        .mylearn-command-status,
        .osis-stat,
        .command-stat,
        .overview-stat-card,
        .personal-flow-grid > article,
        .personal-metric-grid > article,
        .myrapor-stat-mini,
        .myrapor-progress-summary > div,
        .myprakerin-metric,
        .myskl-stat
    ):hover {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Premium workspaces: compact navigation, status cards, and shell rhythm.
   These selectors deliberately include #main-wrapper because a few legacy
   pages still ship ID-scoped !important rules after the shared stylesheet.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    body.my-premium-cards.myaps-scale-90 #main-wrapper {
        padding-top: 96px !important;
    }
}

@media (max-width: 991.98px) {
    body.my-premium-cards #main-wrapper {
        padding-top: 90px !important;
    }
}

/*
 * Guru workspace shell rhythm.
 * Keep every teacher-owned workspace at the same measured distance from the
 * fixed top header: 40px on desktop and 20px on compact layouts.  The Staff
 * workspace owns a separate layout system, so it is deliberately excluded.
 */
@media (min-width: 992px) {
    body.my-premium-cards.myaps-scale-90:is(
        .myaps-role-guru,
        .myaps-base-role-guru:not(.myaps-role-staff)
    ) #main-wrapper {
        padding-top: 118px !important;
    }
}

@media (max-width: 991.98px) {
    body.my-premium-cards:is(
        .myaps-role-guru,
        .myaps-base-role-guru:not(.myaps-role-staff)
    ) #main-wrapper {
        padding-top: 94px !important;
    }
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n + 1),
:root body.my-premium-cards #main-wrapper .myrapor-welcome-grid > :nth-child(2n + 1) {
    --my-work-a: #9a3412;
    --my-work-b: #f59e0b;
    --my-work-shadow: rgba(154, 52, 18, .28);
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n + 2),
:root body.my-premium-cards #main-wrapper .myrapor-welcome-grid > :nth-child(2n) {
    --my-work-a: #0f766e;
    --my-work-b: #14b8a6;
    --my-work-shadow: rgba(15, 118, 110, .28);
}

:root body.my-premium-cards #main-wrapper .myrapor-welcome-grid > :nth-child(1) {
    --my-work-a: #1d4ed8;
    --my-work-b: #0ea5e9;
    --my-work-shadow: rgba(29, 78, 216, .28);
}

:root body.my-premium-cards #main-wrapper .myrapor-welcome-grid > :nth-child(2) {
    --my-work-a: #5b21b6;
    --my-work-b: #8b5cf6;
    --my-work-shadow: rgba(91, 33, 182, .28);
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n + 3) {
    --my-work-a: #1d4ed8;
    --my-work-b: #0ea5e9;
    --my-work-shadow: rgba(29, 78, 216, .28);
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n + 4) {
    --my-work-a: #5b21b6;
    --my-work-b: #8b5cf6;
    --my-work-shadow: rgba(91, 33, 182, .28);
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n + 5) {
    --my-work-a: #047857;
    --my-work-b: #10b981;
    --my-work-shadow: rgba(4, 120, 87, .28);
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n + 6) {
    --my-work-a: #9f1239;
    --my-work-b: #ec4899;
    --my-work-shadow: rgba(159, 18, 57, .27);
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n + 7) {
    --my-work-a: #0e7490;
    --my-work-b: #06b6d4;
    --my-work-shadow: rgba(14, 116, 144, .28);
}

:root body.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-grid,
    .myrapor-work-tab-grid,
    .myprakerin-tabs,
    .myskl-tabs,
    .dwa-metric-grid
) > :nth-child(8n) {
    --my-work-a: #3730a3;
    --my-work-b: #6366f1;
    --my-work-shadow: rgba(55, 48, 163, .28);
}

:root body.my-premium-cards.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab,
    .myrapor-work-tab,
    .myskl-tab,
    .dwa-metric-grid > article,
    .myrapor-welcome-grid > div
) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .25) !important;
    background:
        radial-gradient(circle at 103% 118%, rgba(255, 255, 255, .24) 0 24%, transparent 24.6%),
        radial-gradient(circle at 84% -28%, rgba(255, 255, 255, .16) 0 23%, transparent 23.6%),
        linear-gradient(135deg, var(--my-work-a, #0f766e), var(--my-work-b, #14b8a6)) !important;
    box-shadow:
        0 15px 30px var(--my-work-shadow, rgba(15, 118, 110, .27)),
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    text-shadow: 0 1px 1px rgba(3, 20, 32, .14);
    transition: transform .3s cubic-bezier(.16,.84,.24,1), box-shadow .3s ease, filter .3s ease !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab,
    .myrapor-work-tab,
    .myskl-tab,
    .dwa-metric-grid > article,
    .myrapor-welcome-grid > div
):is(:hover, :focus-visible, .is-active, .active) {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .5) !important;
    background:
        radial-gradient(circle at 103% 118%, rgba(255, 255, 255, .3) 0 25%, transparent 25.6%),
        radial-gradient(circle at 84% -28%, rgba(255, 255, 255, .2) 0 24%, transparent 24.6%),
        linear-gradient(135deg, var(--my-work-a, #0f766e), var(--my-work-b, #14b8a6)) !important;
    filter: saturate(1.08) brightness(1.035);
    transform: translateY(-4px) !important;
    box-shadow:
        0 22px 40px var(--my-work-shadow, rgba(15, 118, 110, .34)),
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab,
    .myrapor-work-tab,
    .myskl-tab,
    .dwa-metric-grid > article,
    .myrapor-welcome-grid > div
) :is(strong, b, h1, h2, h3, h4, h5, h6) {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(3, 20, 32, .14) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab,
    .myrapor-work-tab,
    .dwa-metric-grid > article,
    .myrapor-welcome-grid > div
) :is(small, span, p, em) {
    color: rgba(255, 255, 255, .84) !important;
    text-shadow: 0 1px 1px rgba(3, 20, 32, .1) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-icon,
    .myrapor-work-tab-icon,
    .dwa-metric-grid > article > span,
    .myrapor-info-icon
) {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .28) !important;
    background: rgba(255, 255, 255, .17) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 9px 20px rgba(3, 20, 32, .15) !important;
    backdrop-filter: blur(8px);
}

:root body.my-premium-cards.my-premium-cards #main-wrapper :is(
    .mylearn-work-tab-icon,
    .myrapor-work-tab-icon,
    .dwa-metric-grid > article > span,
    .myrapor-info-icon,
    .myskl-tab
) :is(i, i::before) {
    color: #fff !important;
    filter: none !important;
}

/* MyCBT follows the same ordered premium palette as the other dashboards.
   Every tab is saturated at rest; hover only adds lift and light. */
:root body.my-premium-cards #main-wrapper .mycbt-hero-stats > :nth-child(1) {
    --my-cbt-a: #0b4f6c;
    --my-cbt-b: #0891b2;
    --my-cbt-shadow: rgba(8, 91, 121, .28);
}

:root body.my-premium-cards #main-wrapper .mycbt-hero-stats > :nth-child(2) {
    --my-cbt-a: #0f766e;
    --my-cbt-b: #14b8a6;
    --my-cbt-shadow: rgba(15, 118, 110, .28);
}

:root body.my-premium-cards #main-wrapper .mycbt-hero-stats > :nth-child(3) {
    --my-cbt-a: #1e3a8a;
    --my-cbt-b: #2563eb;
    --my-cbt-shadow: rgba(30, 58, 138, .28);
}

:root body.my-premium-cards #main-wrapper .mycbt-assessment-tab-grid > :nth-child(6n + 1) {
    --my-cbt-tab-a: #9a3412;
    --my-cbt-tab-b: #f59e0b;
    --my-cbt-tab-shadow: rgba(154,52,18,.28);
}

:root body.my-premium-cards #main-wrapper .mycbt-assessment-tab-grid > :nth-child(6n + 2) {
    --my-cbt-tab-a: #0f766e;
    --my-cbt-tab-b: #14b8a6;
    --my-cbt-tab-shadow: rgba(15,118,110,.28);
}

:root body.my-premium-cards #main-wrapper .mycbt-assessment-tab-grid > :nth-child(6n + 3) {
    --my-cbt-tab-a: #1d4ed8;
    --my-cbt-tab-b: #0ea5e9;
    --my-cbt-tab-shadow: rgba(29,78,216,.28);
}

:root body.my-premium-cards #main-wrapper .mycbt-assessment-tab-grid > :nth-child(6n + 4) {
    --my-cbt-tab-a: #5b21b6;
    --my-cbt-tab-b: #8b5cf6;
    --my-cbt-tab-shadow: rgba(91,33,182,.28);
}

:root body.my-premium-cards #main-wrapper .mycbt-assessment-tab-grid > :nth-child(6n + 5) {
    --my-cbt-tab-a: #047857;
    --my-cbt-tab-b: #10b981;
    --my-cbt-tab-shadow: rgba(4,120,87,.28);
}

:root body.my-premium-cards #main-wrapper .mycbt-assessment-tab-grid > :nth-child(6n) {
    --my-cbt-tab-a: #9f1239;
    --my-cbt-tab-b: #ec4899;
    --my-cbt-tab-shadow: rgba(159,18,57,.27);
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-hero-stats .greeting-stat-card {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .25) !important;
    background:
        radial-gradient(circle at 104% 112%, rgba(255,255,255,.24) 0 25%, transparent 25.6%),
        radial-gradient(circle at 82% -25%, rgba(255,255,255,.16) 0 23%, transparent 23.6%),
        linear-gradient(135deg, var(--my-cbt-a, #0b4f6c), var(--my-cbt-b, #0891b2)) !important;
    box-shadow: 0 16px 31px var(--my-cbt-shadow, rgba(8, 91, 121, .28)), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-hero-stats .greeting-stat-card :is(h1, h2, h3, h4, strong, .text-dark) {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(3, 20, 32, .14) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-hero-stats .greeting-stat-card :is(.text-muted, small, span) {
    color: rgba(255, 255, 255, .82) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-hero-stats .greeting-stat-card .icon-bg-soft {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 9px 20px rgba(3,20,32,.16) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab {
    --mycbt-main-accent: #0f766e !important;
    --mycbt-main-soft: rgba(20, 184, 166, .12) !important;
    --mycbt-main-rgb: 15, 118, 110 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.34) !important;
    background:
        radial-gradient(circle at 103% 116%, rgba(255,255,255,.24) 0 25%, transparent 25.6%),
        radial-gradient(circle at 84% -28%, rgba(255,255,255,.15) 0 23%, transparent 23.6%),
        linear-gradient(135deg, var(--my-cbt-tab-a, #0f766e), var(--my-cbt-tab-b, #14b8a6)) !important;
    box-shadow: 0 15px 29px var(--my-cbt-tab-shadow, rgba(15,118,110,.28)), inset 0 1px 0 rgba(255,255,255,.26) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab::after {
    background: linear-gradient(90deg, transparent, #0f766e, #0ea5e9, transparent) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab-icon {
    color: #fff !important;
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.17) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 20px rgba(3,20,32,.16) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab-copy strong {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(3,20,32,.14) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab-copy small {
    color: rgba(255,255,255,.82) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab:is(.is-active, :hover, :focus-visible) {
    color: #fff !important;
    border-color: rgba(255,255,255,.58) !important;
    background:
        radial-gradient(circle at 102% 115%, rgba(255,255,255,.3) 0 25%, transparent 25.6%),
        linear-gradient(135deg, var(--my-cbt-tab-a, #0f766e), var(--my-cbt-tab-b, #14b8a6)) !important;
    filter: saturate(1.07) brightness(1.04);
    box-shadow: 0 21px 39px var(--my-cbt-tab-shadow, rgba(15,118,110,.34)), inset 0 1px 0 rgba(255,255,255,.31) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab:is(.is-active, :hover, :focus-visible) .mycbt-assessment-tab-icon {
    color: #fff !important;
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.17) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 20px rgba(3,20,32,.16) !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab:is(.is-active, :hover, :focus-visible) .mycbt-assessment-tab-copy strong {
    color: #fff !important;
}

:root body.my-premium-cards.my-premium-cards #main-wrapper .mycbt-assessment-tab:is(.is-active, :hover, :focus-visible) .mycbt-assessment-tab-copy small {
    color: rgba(255,255,255,.82) !important;
}

@media (max-width: 767.98px) {
    :root body.my-premium-cards.my-premium-cards #main-wrapper :is(
        .mylearn-work-tab,
        .myrapor-work-tab,
        .myskl-tab,
        .dwa-metric-grid > article,
        .myrapor-welcome-grid > div,
        .mycbt-assessment-tab
    ):is(:hover, :focus-visible, .is-active, .active) {
        transform: translateY(-2px) !important;
    }
}