/*
 * Financial Dashboard Shell — FIN.M4 Packet A
 * Accessible, responsive, trust-oriented design migration.
 * No fake monetary values. Shell only — runtime hydration is later packets.
 *
 * Color tokens reference theme.json via CSS custom properties
 * set by style.css and the application runtime.
 */

/* =========================================================
   0. Screen-reader utility
   ========================================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   1. Page layout
   ========================================================= */
.financial-page {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    color: var(--color-dark, #121212);
    background-color: var(--color-background, #f7f7ff);
}

/* =========================================================
   2. Header
   ========================================================= */
.fin-header {
    width: 100%;
    padding: 24px 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-header__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 var(--gutter, 16px);
    gap: 16px;
}

.fin-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-dark, #121212);
    line-height: 1.2;
}

.fin-header__subtitle {
    font-size: 0.875rem;
    color: #5a5a6e;
    margin: 0;
    line-height: 1.4;
    max-width: 340px;
}

.fin-header__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Period selector */
.fin-period-selector select {
    padding: 8px 12px;
    border: 1px solid var(--color-borderColor, #e5e7eb);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    min-width: 110px;
    background-color: var(--color-white, #fff);
    color: var(--color-dark, #121212);
    cursor: not-allowed;
    opacity: 0.6;
}

.fin-period-selector select:disabled {
    background-color: #f3f4f6;
}

/* Export teaser button */
.fin-export-teaser {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-borderColor, #e5e7eb);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
    background: #f9fafb;
    cursor: not-allowed;
    white-space: nowrap;
}

.fin-export-teaser__icon {
    font-size: 1rem;
    line-height: 1;
}

.fin-export-teaser__lock {
    font-size: 0.75rem;
    line-height: 1;
}

/* =========================================================
   3. Main content area
   ========================================================= */
.fin-main {
    padding: 0 var(--gutter, 16px) 40px;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   4. Trust status banner
   ========================================================= */
.fin-trust-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 16px 0;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Status variants — color is never the only indicator; text label always present */
.fin-trust-banner[data-fin-status="loading"] {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.fin-trust-banner[data-fin-status="connected"] {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.fin-trust-banner[data-fin-status="pending"] {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.fin-trust-banner[data-fin-status="stale"] {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.fin-trust-banner[data-fin-status="partial"] {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.fin-trust-banner[data-fin-status="error"] {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.fin-trust-banner[data-fin-status="readonly"] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.fin-trust-banner__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fin-trust-banner[data-fin-status="loading"] .fin-trust-banner__dot { background-color: #3b82f6; }
.fin-trust-banner[data-fin-status="connected"] .fin-trust-banner__dot { background-color: #22c55e; }
.fin-trust-banner[data-fin-status="pending"] .fin-trust-banner__dot { background-color: #3b82f6; }
.fin-trust-banner[data-fin-status="stale"] .fin-trust-banner__dot { background-color: #f59e0b; }
.fin-trust-banner[data-fin-status="partial"] .fin-trust-banner__dot { background-color: #f59e0b; }
.fin-trust-banner[data-fin-status="error"] .fin-trust-banner__dot { background-color: #ef4444; }
.fin-trust-banner[data-fin-status="readonly"] .fin-trust-banner__dot { background-color: #9ca3af; }

.fin-trust-banner__freshness {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.8;
    white-space: nowrap;
}

/* =========================================================
   5. State regions (entitlement, loading, empty, error)
   ========================================================= */
.fin-state {
    padding: 32px 20px;
    margin: 16px 0;
    border-radius: 12px;
    text-align: center;
}

.fin-state__inner {
    max-width: 440px;
    margin: 0 auto;
}

.fin-state__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-dark, #121212);
}

.fin-state__body {
    font-size: 0.9375rem;
    color: #5a5a6e;
    margin: 0 0 20px;
    line-height: 1.5;
}

.fin-state__cta {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s, transform 0.1s;
}

.fin-state__cta:active {
    transform: scale(0.98);
}

/* Entitlement locked */
.fin-state--entitlement {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
}

.fin-state--entitlement .fin-state__cta {
    background-color: var(--color-purple, #6b46c1);
    color: #fff;
}

.fin-state--entitlement .fin-state__cta:hover,
.fin-state--entitlement .fin-state__cta:focus-visible {
    background-color: #5b3ab0;
}

/* Loading */
.fin-state--loading {
    background: transparent;
    padding: 16px 0;
    text-align: left;
}

/* Empty */
.fin-state--empty {
    background-color: #f9fafb;
    border: 1px dashed #d1d5db;
}

.fin-state--empty .fin-state__title {
    color: #6b7280;
}

/* Error */
.fin-state--error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
}

.fin-state--error .fin-state__title {
    color: #991b1b;
}

.fin-state--error .fin-state__cta--retry {
    background-color: #ef4444;
    color: #fff;
}

.fin-state--error .fin-state__cta--retry:hover,
.fin-state--error .fin-state__cta--retry:focus-visible {
    background-color: #dc2626;
}

/* =========================================================
   6. Skeleton loading shapes
   ========================================================= */
.fin-kpi-card--skeleton {
    padding: 20px;
    background: var(--color-white, #fff);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.fin-kpi-skeleton__label {
    height: 12px;
    width: 60%;
    margin-bottom: 14px;
}

.fin-kpi-skeleton__value {
    height: 24px;
    width: 45%;
    margin-bottom: 12px;
}

.fin-kpi-skeleton__change {
    height: 12px;
    width: 40%;
}

.fin-loading__chart-skeleton {
    margin: 24px 0;
    border-radius: 10px;
    overflow: hidden;
}

.fin-loading__feed-skeleton {
    margin-top: 16px;
}

/* =========================================================
   7. Data sections container
   ========================================================= */
.fin-data {
    margin-top: 8px;
}

/* =========================================================
   8. Section shared styles
   ========================================================= */
.fin-section {
    margin-bottom: 32px;
}

.fin-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.fin-section__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark, #121212);
    margin: 0;
}

/* =========================================================
   9. Current event summary
   ========================================================= */
.fin-current-event {
    background-color: var(--color-white, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-current-event__content {
    min-height: 48px;
}

/* =========================================================
   10. Tip feed
   ========================================================= */
.fin-tip-feed {
    background-color: var(--color-white, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-tip-feed__list {
    min-height: 48px;
}

.fin-tip-feed__pagination {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-borderColor, #f7f7f7);
}

/* =========================================================
   11. KPI cards
   ========================================================= */
.fin-kpi__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.fin-kpi-card {
    background-color: var(--color-white, #fff);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-borderColor, #f7f7f7);
    transition: box-shadow 0.15s;
}

.fin-kpi-card__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fin-kpi-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark, #121212);
    margin-bottom: 4px;
    line-height: 1.2;
}

.fin-kpi-card__meta {
    font-size: 0.8125rem;
    color: #9ca3af;
    min-height: 1.2em;
}

/* =========================================================
   12. History / trends
   ========================================================= */
.fin-history {
    background-color: var(--color-white, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-history__chart {
    min-height: 200px;
    position: relative;
}

.fin-history__table-alt {
    margin-top: 16px;
    overflow-x: auto;
}

/* =========================================================
   13. Adjustments & Refunds section
   ========================================================= */
.fin-adjustments {
    background-color: var(--color-white, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-adjustments__explainer {
    font-size: 0.875rem;
    color: #5a5a6e;
    margin: 0 0 16px;
    line-height: 1.55;
    max-width: 600px;
}

/* Summary strip — compact 3-column grid for counts/impact/latest */
.fin-adjustments__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-adjustments__summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fin-adjustments__summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fin-adjustments__summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark, #121212);
    line-height: 1.3;
}

/* Status notice region */
.fin-adjustments__notice {
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.5;
    border-left: 3px solid #60a5fa;
    background: #eff6ff;
    color: #1e40af;
}

/* Empty state */
.fin-adjustments__empty {
    padding: 24px 16px;
    text-align: center;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    margin-bottom: 16px;
}

.fin-adjustments__empty-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 6px;
}

.fin-adjustments__empty-subtext {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin: 0;
    line-height: 1.5;
}

/* List/table container for itemized rows */
.fin-adjustments__list {
    min-height: 48px;
    margin-bottom: 16px;
}

.fin-adjustments__scope-note,
.fin-adjustments__counting-note,
.fin-adjustments__notice-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #5a5a6e;
}

.fin-adjustments__scope-note {
    margin-bottom: 12px;
}

.fin-adjustments__row {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 12px;
}

.fin-adjustments__row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fin-adjustments__row-title,
.fin-adjustments__row-amount {
    margin: 0;
}

.fin-adjustments__row-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-dark, #121212);
}

.fin-adjustments__row-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: #374151;
}

.fin-adjustments__badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #eef2ff;
    color: #4338ca;
}

.fin-adjustments__metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
    font-size: 0.8125rem;
}

.fin-adjustments__metadata dt {
    font-weight: 700;
    color: #6b7280;
}

.fin-adjustments__metadata dd {
    margin: 2px 0 0;
    color: #374151;
}

/* Help / support note */
.fin-adjustments__help {
    padding-top: 12px;
    border-top: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-adjustments__help-text {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.fin-adjustments__help-detail {
    color: #5a5a6e;
}

/* =========================================================
   14. Export section
   ========================================================= */
.fin-export {
    background-color: var(--color-white, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-borderColor, #f7f7f7);
}

.fin-export__locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: 8px;
    border: 1px solid #ddd6fe;
}

.fin-export__lock-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.fin-export__locked-copy {
    font-size: 0.875rem;
    color: #5a5a6e;
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}

.fin-export__upgrade-cta {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--color-purple, #6b46c1);
    color: #fff;
    margin-top: 4px;
    transition: background-color 0.15s;
}

.fin-export__upgrade-cta:hover,
.fin-export__upgrade-cta:focus-visible {
    background-color: #5b3ab0;
}

.fin-export__active {
    display: grid;
    gap: 16px;
}


.fin-export__scope-note,
.fin-export__notice,
.fin-export__polling-note,
.fin-export__download-note,
.fin-export__deferred,
.fin-export__download-error,
.fin-export__error {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #5a5a6e;
}

.fin-export__error {
    color: #991b1b;
}

.fin-export__download-error {
    color: #991b1b;
}

.fin-export__polling-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #60a5fa;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
}

.fin-export__download-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    background: #f0fdf4;
    color: #166534;
}

.fin-export__download-error {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #ef4444;
    border-radius: 8px;
    background: #fef2f2;
}

.fin-export__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fin-export__request-button,
.fin-export__refresh-button,
.fin-export__download-button {
    padding: 9px 16px;
    border: 1px solid var(--color-borderColor, #e5e7eb);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.fin-export__request-button {
    color: #fff;
    background: var(--color-purple, #6b46c1);
}

.fin-export__download-button {
    display: inline-block;
    width: fit-content;
    margin-top: 12px;
    color: #fff;
    background: #166534;
}

.fin-export__refresh-button {
    color: var(--color-purple, #6b46c1);
    background: #fff;
}

.fin-export__request-button:disabled,
.fin-export__refresh-button:disabled,
.fin-export__download-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.fin-export__status-card,
.fin-export__recent {
    padding: 16px;
    border: 1px solid var(--color-borderColor, #e5e7eb);
    border-radius: 10px;
    background: #f9fafb;
}

.fin-export__status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.fin-export__status-title,
.fin-export__recent-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-dark, #121212);
}

.fin-export__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #374151;
}

.fin-export__status-badge--queued,
.fin-export__status-badge--processing,
.fin-export__status-badge--requesting {
    background: #eff6ff;
    color: #1e40af;
}

.fin-export__status-badge--ready {
    background: #f0fdf4;
    color: #166534;
}

.fin-export__status-badge--failed,
.fin-export__status-badge--expired,
.fin-export__status-badge--unavailable {
    background: #fef2f2;
    color: #991b1b;
}

.fin-export__metadata {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 6px 12px;
    margin: 12px 0 0;
    font-size: 0.8125rem;
}

.fin-export__metadata dt {
    color: #6b7280;
    font-weight: 600;
}

.fin-export__metadata dd {
    margin: 0;
    color: var(--color-dark, #121212);
    overflow-wrap: anywhere;
}

.fin-export__download-deferred {
    display: inline-block;
    width: fit-content;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 700;
}

.fin-export__recent-list {
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: 0.8125rem;
    color: #5a5a6e;
}

/* =========================================================
   15. Focus-visible accessibility
   ========================================================= */
.fin-state__cta:focus-visible,
.fin-export__upgrade-cta:focus-visible,
.fin-period-selector select:focus-visible,
.fin-export-teaser:focus-visible {
    outline: 2px solid var(--color-purple, #6b46c1);
    outline-offset: 2px;
}

/* =========================================================
   16. Responsive — Small phone (< 480px)
   ========================================================= */
@media screen and (max-width: 479px) {
    .fin-header__content {
        flex-direction: column;
        gap: 12px;
    }

    .fin-header__controls {
        width: 100%;
        justify-content: space-between;
    }

    .fin-period-selector select {
        width: 100%;
    }

    .fin-period-selector {
        flex: 1;
    }

    .fin-kpi__grid {
        grid-template-columns: 1fr;
    }

    .fin-kpi-card__value {
        font-size: 1.375rem;
    }

    .fin-trust-banner {
        flex-wrap: wrap;
    }

    .fin-trust-banner__freshness {
        margin-left: 0;
        width: 100%;
        margin-top: 4px;
    }

    .fin-state {
        padding: 24px 16px;
    }

    /* Adjustments summary stacks to single column on small phones */
    .fin-adjustments__summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .fin-adjustments__summary-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
    }
}

/* =========================================================
   17. Responsive — Large phone (480–767px)
   ========================================================= */
@media screen and (min-width: 480px) and (max-width: 767px) {
    .fin-header__content {
        flex-direction: column;
        gap: 12px;
    }

    .fin-header__controls {
        width: 100%;
    }

    .fin-kpi__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Adjustments summary 2-column on large phones */
    .fin-adjustments__summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   18. Responsive — Tablet (768–1023px)
   ========================================================= */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .fin-kpi__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Two-column layout: current event + feed side by side */
    .fin-data {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .fin-current-event {
        grid-column: 1;
    }

    .fin-tip-feed {
        grid-column: 2;
    }

    .fin-kpi {
        grid-column: 1 / -1;
    }

    .fin-history {
        grid-column: 1 / -1;
    }

    /* Adjustments spans full width in two-column layout */
    .fin-adjustments {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   19. Responsive — Desktop (≥ 1024px)
   ========================================================= */
@media screen and (min-width: 1024px) {
    .fin-kpi__grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .fin-header__subtitle {
        max-width: 420px;
    }

    /* Adjustments summary comfortable 3-column on desktop */
    .fin-adjustments__summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================
   20. Print — hide interactive-only elements
   ========================================================= */
@media print {
    .fin-header__controls,
    .fin-trust-banner__dot,
    .fin-export-teaser__lock,
    .fin-export__lock-icon,
    .fin-state__cta,
    .fin-export__upgrade-cta {
        display: none;
    }

    .fin-trust-banner {
        border: 1px solid #ccc;
        background: #fff;
        color: #333;
    }
}

/* =========================================================
   21. Reduced motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .fin-kpi-card--skeleton,
    .fin-kpi-card--skeleton .skeleton,
    .fin-loading__chart-skeleton .skeleton,
    .fin-loading__feed-skeleton .skeleton {
        animation: none;
        background-image: none;
        background-color: #e5e7eb;
    }
}