/* =========================================================================
   Material Design 3 design tokens (seed: #0f6fb3)
   Reference: https://m3.material.io
   ========================================================================= */

:root {
    color-scheme: light dark;

    /* ---- Color: light scheme ------------------------------------------ */
    --md-sys-color-primary: #005e9e;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #cfe5ff;
    --md-sys-color-on-primary-container: #001d34;
    --md-sys-color-secondary: #52606f;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d5e4f7;
    --md-sys-color-on-secondary-container: #0e1d2a;
    --md-sys-color-tertiary: #6a5778;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #f2daff;
    --md-sys-color-on-tertiary-container: #251431;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #1b6b36;
    --md-sys-color-surface: #f8f9fc;
    --md-sys-color-surface-dim: #d8dae0;
    --md-sys-color-surface-bright: #f8f9fc;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f2f3f7;
    --md-sys-color-surface-container: #eceef2;
    --md-sys-color-surface-container-high: #e6e8ec;
    --md-sys-color-surface-container-highest: #e0e2e7;
    --md-sys-color-on-surface: #191c1f;
    --md-sys-color-on-surface-variant: #42474e;
    --md-sys-color-outline: #72787f;
    --md-sys-color-outline-variant: #c2c7cf;
    --md-sys-color-inverse-surface: #2e3134;
    --md-sys-color-inverse-on-surface: #eff1f5;
    --md-sys-color-inverse-primary: #9acbff;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;

    /* ---- Shape -------------------------------------------------------- */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* ---- Elevation ---------------------------------------------------- */
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
    --md-sys-elevation-4: 0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
    --md-sys-elevation-5: 0 4px 4px rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);

    /* ---- State layers ------------------------------------------------- */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;

    /* ---- Typography --------------------------------------------------- */
    --md-ref-typeface-brand: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --md-ref-typeface-plain: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --md-sys-typescale-display-large: 400 3.5625rem/4rem var(--md-ref-typeface-brand);
    --md-sys-typescale-display-medium: 400 2.8125rem/3.25rem var(--md-ref-typeface-brand);
    --md-sys-typescale-display-small: 400 2.25rem/2.75rem var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-large: 400 2rem/2.5rem var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-medium: 400 1.75rem/2.25rem var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-small: 400 1.5rem/2rem var(--md-ref-typeface-brand);
    --md-sys-typescale-title-large: 400 1.375rem/1.75rem var(--md-ref-typeface-brand);
    --md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface-plain);
    --md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
    --md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-ref-typeface-plain);
    --md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface-plain);
    --md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface-plain);
    --md-sys-typescale-label-large: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
    --md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface-plain);
    --md-sys-typescale-label-small: 500 0.6875rem/1rem var(--md-ref-typeface-plain);

    /* ---- Motion ------------------------------------------------------- */
    --md-sys-motion-duration-short: 150ms;
    --md-sys-motion-duration-medium: 300ms;
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Legacy aliases (kept for existing component styles) ---------- */
    --color-bg: var(--md-sys-color-surface);
    --color-surface: var(--md-sys-color-surface-container-lowest);
    --color-text: var(--md-sys-color-on-surface);
    --color-text-muted: var(--md-sys-color-on-surface-variant);
    --color-border: var(--md-sys-color-outline-variant);
    --color-accent: var(--md-sys-color-primary);
    --color-accent-hover: var(--md-sys-color-on-primary-container);
    --color-accent-soft: var(--md-sys-color-primary-container);
    --color-success: var(--md-sys-color-success);
    --color-danger: var(--md-sys-color-error);
}

/* ---- Color: dark scheme (System theme follows the OS) ------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]),
    :root[data-theme="system"] {
        --md-sys-color-primary: #9acbff;
        --md-sys-color-on-primary: #003355;
        --md-sys-color-primary-container: #004a7a;
        --md-sys-color-on-primary-container: #cfe5ff;
        --md-sys-color-secondary: #b9c8da;
        --md-sys-color-on-secondary: #243240;
        --md-sys-color-secondary-container: #3a4857;
        --md-sys-color-on-secondary-container: #d5e4f7;
        --md-sys-color-tertiary: #d6bee5;
        --md-sys-color-on-tertiary: #3b2948;
        --md-sys-color-tertiary-container: #523f5f;
        --md-sys-color-on-tertiary-container: #f2daff;
        --md-sys-color-error: #ffb4ab;
        --md-sys-color-on-error: #690005;
        --md-sys-color-error-container: #93000a;
        --md-sys-color-on-error-container: #ffdad6;
        --md-sys-color-success: #86d59b;
        --md-sys-color-surface: #111416;
        --md-sys-color-surface-dim: #111416;
        --md-sys-color-surface-bright: #36393c;
        --md-sys-color-surface-container-lowest: #0b0f11;
        --md-sys-color-surface-container-low: #191c1f;
        --md-sys-color-surface-container: #1d2023;
        --md-sys-color-surface-container-high: #272a2d;
        --md-sys-color-surface-container-highest: #323538;
        --md-sys-color-on-surface: #e1e3e7;
        --md-sys-color-on-surface-variant: #c2c7cf;
        --md-sys-color-outline: #8c9199;
        --md-sys-color-outline-variant: #42474e;
        --md-sys-color-inverse-surface: #e1e3e7;
        --md-sys-color-inverse-on-surface: #2e3134;
        --md-sys-color-inverse-primary: #005e9e;
    }
}

/* =========================================================================
   Selectable themes (data-theme on <html>, persisted per user)
   Each family: harmonized primary / secondary / tertiary in light and dark.
   ========================================================================= */

/* ---- Ocean (light = defaults above) ------------------------------------ */
[data-theme="ocean-light"] {
    color-scheme: light;
}

[data-theme="ocean-dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #9acbff;
    --md-sys-color-on-primary: #003355;
    --md-sys-color-primary-container: #004a7a;
    --md-sys-color-on-primary-container: #cfe5ff;
    --md-sys-color-secondary: #b9c8da;
    --md-sys-color-on-secondary: #243240;
    --md-sys-color-secondary-container: #3a4857;
    --md-sys-color-on-secondary-container: #d5e4f7;
    --md-sys-color-tertiary: #d6bee5;
    --md-sys-color-on-tertiary: #3b2948;
    --md-sys-color-tertiary-container: #523f5f;
    --md-sys-color-on-tertiary-container: #f2daff;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-success: #86d59b;
    --md-sys-color-surface: #111416;
    --md-sys-color-surface-dim: #111416;
    --md-sys-color-surface-bright: #36393c;
    --md-sys-color-surface-container-lowest: #0b0f11;
    --md-sys-color-surface-container-low: #191c1f;
    --md-sys-color-surface-container: #1d2023;
    --md-sys-color-surface-container-high: #272a2d;
    --md-sys-color-surface-container-highest: #323538;
    --md-sys-color-on-surface: #e1e3e7;
    --md-sys-color-on-surface-variant: #c2c7cf;
    --md-sys-color-outline: #8c9199;
    --md-sys-color-outline-variant: #42474e;
    --md-sys-color-inverse-surface: #e1e3e7;
    --md-sys-color-inverse-on-surface: #2e3134;
    --md-sys-color-inverse-primary: #005e9e;
}

/* ---- Forest: green primary, moss secondary, amber tertiary ------------- */
[data-theme="forest-light"] {
    color-scheme: light;
    --md-sys-color-primary: #2e6b3a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #b0f2b4;
    --md-sys-color-on-primary-container: #00210a;
    --md-sys-color-secondary: #52634f;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d5e8cf;
    --md-sys-color-on-secondary-container: #101f10;
    --md-sys-color-tertiary: #78591c;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffdea9;
    --md-sys-color-on-tertiary-container: #271900;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #2e6b3a;
    --md-sys-color-surface: #f7faf4;
    --md-sys-color-surface-dim: #d7dbd3;
    --md-sys-color-surface-bright: #f7faf4;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f1f5ee;
    --md-sys-color-surface-container: #ebefe8;
    --md-sys-color-surface-container-high: #e5e9e2;
    --md-sys-color-surface-container-highest: #dfe4dd;
    --md-sys-color-on-surface: #191d18;
    --md-sys-color-on-surface-variant: #414941;
    --md-sys-color-outline: #727a70;
    --md-sys-color-outline-variant: #c1c9be;
    --md-sys-color-inverse-surface: #2d322c;
    --md-sys-color-inverse-on-surface: #eff2ec;
    --md-sys-color-inverse-primary: #93d79b;
}

[data-theme="forest-dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #93d79b;
    --md-sys-color-on-primary: #003915;
    --md-sys-color-primary-container: #0f5224;
    --md-sys-color-on-primary-container: #b0f2b4;
    --md-sys-color-secondary: #b9ccb3;
    --md-sys-color-on-secondary: #253424;
    --md-sys-color-secondary-container: #3b4b39;
    --md-sys-color-on-secondary-container: #d5e8cf;
    --md-sys-color-tertiary: #e9c07a;
    --md-sys-color-on-tertiary: #412d00;
    --md-sys-color-tertiary-container: #5d4200;
    --md-sys-color-on-tertiary-container: #ffdea9;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-success: #93d79b;
    --md-sys-color-surface: #10140f;
    --md-sys-color-surface-dim: #10140f;
    --md-sys-color-surface-bright: #363a34;
    --md-sys-color-surface-container-lowest: #0b0f0a;
    --md-sys-color-surface-container-low: #191d18;
    --md-sys-color-surface-container: #1d211c;
    --md-sys-color-surface-container-high: #272b26;
    --md-sys-color-surface-container-highest: #323630;
    --md-sys-color-on-surface: #e0e4dd;
    --md-sys-color-on-surface-variant: #c1c9be;
    --md-sys-color-outline: #8b938a;
    --md-sys-color-outline-variant: #414941;
    --md-sys-color-inverse-surface: #e0e4dd;
    --md-sys-color-inverse-on-surface: #2d322c;
    --md-sys-color-inverse-primary: #2e6b3a;
}

/* ---- Sunset: terracotta primary, warm taupe secondary, olive tertiary --- */
[data-theme="sunset-light"] {
    color-scheme: light;
    --md-sys-color-primary: #a23f16;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #ffdbcf;
    --md-sys-color-on-primary-container: #380d00;
    --md-sys-color-secondary: #77574c;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #ffdbcf;
    --md-sys-color-on-secondary-container: #2c160d;
    --md-sys-color-tertiary: #6a5f2f;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #f3e4a7;
    --md-sys-color-on-tertiary-container: #221b00;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #3d6b2e;
    --md-sys-color-surface: #fff8f5;
    --md-sys-color-surface-dim: #e6d7d1;
    --md-sys-color-surface-bright: #fff8f5;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #fff1eb;
    --md-sys-color-surface-container: #faebe5;
    --md-sys-color-surface-container-high: #f4e5df;
    --md-sys-color-surface-container-highest: #eedfd9;
    --md-sys-color-on-surface: #231a16;
    --md-sys-color-on-surface-variant: #53433d;
    --md-sys-color-outline: #86736c;
    --md-sys-color-outline-variant: #d8c2b9;
    --md-sys-color-inverse-surface: #392e2a;
    --md-sys-color-inverse-on-surface: #ffede6;
    --md-sys-color-inverse-primary: #ffb597;
}

[data-theme="sunset-dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #ffb597;
    --md-sys-color-on-primary: #5b1b00;
    --md-sys-color-primary-container: #812900;
    --md-sys-color-on-primary-container: #ffdbcf;
    --md-sys-color-secondary: #e7bdb0;
    --md-sys-color-on-secondary: #442a20;
    --md-sys-color-secondary-container: #5d4035;
    --md-sys-color-on-secondary-container: #ffdbcf;
    --md-sys-color-tertiary: #d6c88d;
    --md-sys-color-on-tertiary: #393005;
    --md-sys-color-tertiary-container: #51471a;
    --md-sys-color-on-tertiary-container: #f3e4a7;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-success: #a2d68d;
    --md-sys-color-surface: #1a110d;
    --md-sys-color-surface-dim: #1a110d;
    --md-sys-color-surface-bright: #423732;
    --md-sys-color-surface-container-lowest: #140c09;
    --md-sys-color-surface-container-low: #231a16;
    --md-sys-color-surface-container: #271e1a;
    --md-sys-color-surface-container-high: #322824;
    --md-sys-color-surface-container-highest: #3e332e;
    --md-sys-color-on-surface: #f1dfd9;
    --md-sys-color-on-surface-variant: #d8c2b9;
    --md-sys-color-outline: #a08d85;
    --md-sys-color-outline-variant: #53433d;
    --md-sys-color-inverse-surface: #f1dfd9;
    --md-sys-color-inverse-on-surface: #392e2a;
    --md-sys-color-inverse-primary: #a23f16;
}

/* ---- Violet: purple primary, mauve secondary, rose tertiary ------------ */
[data-theme="violet-light"] {
    color-scheme: light;
    --md-sys-color-primary: #6a3fa8;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #ebdcff;
    --md-sys-color-on-primary-container: #250059;
    --md-sys-color-secondary: #635b70;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e9def8;
    --md-sys-color-on-secondary-container: #1f182b;
    --md-sys-color-tertiary: #7f525d;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd9e1;
    --md-sys-color-on-tertiary-container: #32101b;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #3a6b45;
    --md-sys-color-surface: #fdf7ff;
    --md-sys-color-surface-dim: #ded8e0;
    --md-sys-color-surface-bright: #fdf7ff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f8f1fa;
    --md-sys-color-surface-container: #f2ebf4;
    --md-sys-color-surface-container-high: #ece5ef;
    --md-sys-color-surface-container-highest: #e6e0e9;
    --md-sys-color-on-surface: #1d1a22;
    --md-sys-color-on-surface-variant: #4a4453;
    --md-sys-color-outline: #7b7485;
    --md-sys-color-outline-variant: #ccc3d6;
    --md-sys-color-inverse-surface: #322f37;
    --md-sys-color-inverse-on-surface: #f5eef8;
    --md-sys-color-inverse-primary: #d3bbff;
}

[data-theme="violet-dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #d3bbff;
    --md-sys-color-on-primary: #3b0a7f;
    --md-sys-color-primary-container: #52258f;
    --md-sys-color-on-primary-container: #ebdcff;
    --md-sys-color-secondary: #cdc2db;
    --md-sys-color-on-secondary: #342d41;
    --md-sys-color-secondary-container: #4b4358;
    --md-sys-color-on-secondary-container: #e9def8;
    --md-sys-color-tertiary: #f1b7c5;
    --md-sys-color-on-tertiary: #4b2530;
    --md-sys-color-tertiary-container: #643b46;
    --md-sys-color-on-tertiary-container: #ffd9e1;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-success: #9fd6a8;
    --md-sys-color-surface: #15111b;
    --md-sys-color-surface-dim: #15111b;
    --md-sys-color-surface-bright: #3b3741;
    --md-sys-color-surface-container-lowest: #0f0c15;
    --md-sys-color-surface-container-low: #1d1a22;
    --md-sys-color-surface-container: #211e27;
    --md-sys-color-surface-container-high: #2c2831;
    --md-sys-color-surface-container-highest: #37333c;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-on-surface-variant: #ccc3d6;
    --md-sys-color-outline: #958d9f;
    --md-sys-color-outline-variant: #4a4453;
    --md-sys-color-inverse-surface: #e6e0e9;
    --md-sys-color-inverse-on-surface: #322f37;
    --md-sys-color-inverse-primary: #6a3fa8;
}

/* ---- Graphite: slate primary, neutral secondary, teal tertiary ---------- */
[data-theme="graphite-light"] {
    color-scheme: light;
    --md-sys-color-primary: #3d4a5c;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d6e3fa;
    --md-sys-color-on-primary-container: #121c2b;
    --md-sys-color-secondary: #5a5f66;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #dfe3ec;
    --md-sys-color-on-secondary-container: #171c23;
    --md-sys-color-tertiary: #2f6567;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #b4ebed;
    --md-sys-color-on-tertiary-container: #002021;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #2f6a45;
    --md-sys-color-surface: #f9f9fb;
    --md-sys-color-surface-dim: #dadadd;
    --md-sys-color-surface-bright: #f9f9fb;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f3f3f6;
    --md-sys-color-surface-container: #eeeef1;
    --md-sys-color-surface-container-high: #e8e8eb;
    --md-sys-color-surface-container-highest: #e2e2e5;
    --md-sys-color-on-surface: #1a1c1e;
    --md-sys-color-on-surface-variant: #44474d;
    --md-sys-color-outline: #74777e;
    --md-sys-color-outline-variant: #c4c6cd;
    --md-sys-color-inverse-surface: #2f3033;
    --md-sys-color-inverse-on-surface: #f0f0f3;
    --md-sys-color-inverse-primary: #b8c5da;
}

[data-theme="graphite-dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #b8c5da;
    --md-sys-color-on-primary: #232e3e;
    --md-sys-color-primary-container: #394656;
    --md-sys-color-on-primary-container: #d6e3fa;
    --md-sys-color-secondary: #c3c7cf;
    --md-sys-color-on-secondary: #2c3138;
    --md-sys-color-secondary-container: #43474e;
    --md-sys-color-on-secondary-container: #dfe3ec;
    --md-sys-color-tertiary: #98cfd1;
    --md-sys-color-on-tertiary: #003738;
    --md-sys-color-tertiary-container: #124d4f;
    --md-sys-color-on-tertiary-container: #b4ebed;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-success: #97d5a9;
    --md-sys-color-surface: #121316;
    --md-sys-color-surface-dim: #121316;
    --md-sys-color-surface-bright: #38393c;
    --md-sys-color-surface-container-lowest: #0c0e10;
    --md-sys-color-surface-container-low: #1a1c1e;
    --md-sys-color-surface-container: #1e2023;
    --md-sys-color-surface-container-high: #292a2d;
    --md-sys-color-surface-container-highest: #333538;
    --md-sys-color-on-surface: #e2e2e5;
    --md-sys-color-on-surface-variant: #c4c6cd;
    --md-sys-color-outline: #8e9097;
    --md-sys-color-outline-variant: #44474d;
    --md-sys-color-inverse-surface: #e2e2e5;
    --md-sys-color-inverse-on-surface: #2f3033;
    --md-sys-color-inverse-primary: #3d4a5c;
}

/* =========================================================================
   Bootstrap variable bridge
   ========================================================================= */

:root, [data-bs-theme] {
    --bs-body-font-family: var(--md-ref-typeface-plain);
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.43;
    --bs-body-bg: var(--md-sys-color-surface);
    --bs-body-color: var(--md-sys-color-on-surface);
    --bs-secondary-color: var(--md-sys-color-on-surface-variant);
    --bs-tertiary-bg: var(--md-sys-color-surface-container);
    --bs-border-color: var(--md-sys-color-outline-variant);
    --bs-border-radius: var(--md-sys-shape-corner-small);
    --bs-border-radius-sm: var(--md-sys-shape-corner-extra-small);
    --bs-border-radius-lg: var(--md-sys-shape-corner-medium);
    --bs-border-radius-xl: var(--md-sys-shape-corner-large);
    --bs-border-radius-pill: var(--md-sys-shape-corner-full);
    --bs-link-color: var(--md-sys-color-primary);
    --bs-link-hover-color: var(--md-sys-color-on-primary-container);
    --bs-primary: var(--md-sys-color-primary);
    --bs-danger: var(--md-sys-color-error);
    --bs-success: var(--md-sys-color-success);
    --bs-emphasis-color: var(--md-sys-color-on-surface);
    --bs-heading-color: var(--md-sys-color-on-surface);
}

/* =========================================================================
   Base
   ========================================================================= */

html, body {
    font-family: var(--md-ref-typeface-plain);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    -webkit-font-smoothing: antialiased;
}

h1, .h1 { font: var(--md-sys-typescale-headline-large); letter-spacing: 0; }
h2, .h2 { font: var(--md-sys-typescale-headline-medium); letter-spacing: 0; }
h3, .h3 { font: var(--md-sys-typescale-headline-small); letter-spacing: 0; }
h4, .h4 { font: var(--md-sys-typescale-title-large); letter-spacing: 0; }
h5, .h5 { font: var(--md-sys-typescale-title-medium); letter-spacing: 0.009em; }
h6, .h6 { font: var(--md-sys-typescale-title-small); letter-spacing: 0.007em; }

h1, h2, h3, h4, h5, h6 {
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.75rem;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

    a:hover, .btn-link:hover {
        color: var(--md-sys-color-on-primary-container);
        text-decoration: underline;
    }

hr {
    border-color: var(--md-sys-color-outline-variant);
    opacity: 1;
}

.text-muted, .text-secondary {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* Material Symbols */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

    .material-symbols-rounded.filled {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .material-symbols-rounded.sm {
        font-size: 20px;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    }

/* =========================================================================
   State layer utility
   Apply to any interactive element: creates the M3 hover/focus/press overlay.
   ========================================================================= */

.state-layer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .state-layer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: currentColor;
        opacity: 0;
        pointer-events: none;
        border-radius: inherit;
        transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    }

    .state-layer:hover::before { opacity: var(--md-sys-state-hover-opacity); }
    .state-layer:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
    .state-layer:active::before { opacity: var(--md-sys-state-pressed-opacity); }

/* =========================================================================
   Buttons  (Bootstrap .btn -> M3 common buttons)
   ========================================================================= */

.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.25rem;
    --bs-btn-border-radius: var(--md-sys-shape-corner-full);
    --bs-btn-border-width: 0;
    --bs-btn-focus-box-shadow: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 0.006em;
    min-height: 2.5rem;
    transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
                background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

    .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: currentColor;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    }

    .btn:hover::before { opacity: var(--md-sys-state-hover-opacity); }
    .btn:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
    .btn:active::before { opacity: var(--md-sys-state-pressed-opacity); }

    .btn:focus-visible {
        outline: 3px solid var(--md-sys-color-primary);
        outline-offset: 2px;
    }

    .btn:disabled, .btn.disabled {
        background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
        opacity: 1;
        box-shadow: none;
    }

    .btn .material-symbols-rounded {
        font-size: 18px;
        margin-left: -0.5rem;
    }

.btn-sm {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 0.8125rem;
    min-height: 2rem;
}

.btn-lg {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-font-size: 1rem;
    min-height: 3rem;
}

/* Filled */
.btn-primary {
    --bs-btn-bg: var(--md-sys-color-primary);
    --bs-btn-color: var(--md-sys-color-on-primary);
    --bs-btn-hover-bg: var(--md-sys-color-primary);
    --bs-btn-hover-color: var(--md-sys-color-on-primary);
    --bs-btn-active-bg: var(--md-sys-color-primary);
    --bs-btn-active-color: var(--md-sys-color-on-primary);
}

    .btn-primary:hover {
        box-shadow: var(--md-sys-elevation-1);
    }

/* Filled tonal */
.btn-secondary, .btn-tonal {
    --bs-btn-bg: var(--md-sys-color-secondary-container);
    --bs-btn-color: var(--md-sys-color-on-secondary-container);
    --bs-btn-hover-bg: var(--md-sys-color-secondary-container);
    --bs-btn-hover-color: var(--md-sys-color-on-secondary-container);
    --bs-btn-active-bg: var(--md-sys-color-secondary-container);
    --bs-btn-active-color: var(--md-sys-color-on-secondary-container);
}

    .btn-secondary:hover, .btn-tonal:hover {
        box-shadow: var(--md-sys-elevation-1);
    }

/* Elevated */
.btn-light, .btn-elevated {
    --bs-btn-bg: var(--md-sys-color-surface-container-low);
    --bs-btn-color: var(--md-sys-color-primary);
    --bs-btn-hover-bg: var(--md-sys-color-surface-container-low);
    --bs-btn-hover-color: var(--md-sys-color-primary);
    --bs-btn-active-bg: var(--md-sys-color-surface-container-low);
    --bs-btn-active-color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-1);
}

    .btn-light:hover, .btn-elevated:hover {
        box-shadow: var(--md-sys-elevation-2);
    }

/* Error filled */
.btn-danger {
    --bs-btn-bg: var(--md-sys-color-error);
    --bs-btn-color: var(--md-sys-color-on-error);
    --bs-btn-hover-bg: var(--md-sys-color-error);
    --bs-btn-hover-color: var(--md-sys-color-on-error);
    --bs-btn-active-bg: var(--md-sys-color-error);
    --bs-btn-active-color: var(--md-sys-color-on-error);
}

.btn-success {
    --bs-btn-bg: var(--md-sys-color-success);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--md-sys-color-success);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--md-sys-color-success);
    --bs-btn-active-color: #ffffff;
}

/* Outlined */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-dark,
.btn-outline-light {
    --bs-btn-border-width: 1px;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-border-color: var(--md-sys-color-outline);
    --bs-btn-hover-border-color: var(--md-sys-color-outline);
    --bs-btn-active-border-color: var(--md-sys-color-outline);
    --bs-btn-color: var(--md-sys-color-primary);
    --bs-btn-hover-color: var(--md-sys-color-primary);
    --bs-btn-active-color: var(--md-sys-color-primary);
}

.btn-outline-danger {
    --bs-btn-color: var(--md-sys-color-error);
    --bs-btn-hover-color: var(--md-sys-color-error);
    --bs-btn-active-color: var(--md-sys-color-error);
}

.btn-outline-secondary, .btn-outline-dark {
    --bs-btn-color: var(--md-sys-color-on-surface-variant);
    --bs-btn-hover-color: var(--md-sys-color-on-surface-variant);
    --bs-btn-active-color: var(--md-sys-color-on-surface-variant);
}

/* Text */
.btn-link {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-color: var(--md-sys-color-primary);
    --bs-btn-hover-color: var(--md-sys-color-primary);
    --bs-btn-active-color: var(--md-sys-color-primary);
    text-decoration: none;
}

    .btn-link:hover {
        text-decoration: none;
    }

/* Icon button */
.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

    .btn-icon .material-symbols-rounded {
        margin: 0;
        font-size: 24px;
    }

/* FAB */
.btn-fab {
    width: 3.5rem;
    height: 3.5rem;
    min-height: 3.5rem;
    padding: 0;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--md-sys-elevation-3);
}

    .btn-fab:hover {
        box-shadow: var(--md-sys-elevation-4);
    }

    .btn-fab .material-symbols-rounded {
        margin: 0;
    }

/* =========================================================================
   Text fields (Bootstrap .form-control -> M3 outlined text field)
   ========================================================================= */

.form-label {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 0.25rem;
}

.form-control, .form-select {
    --bs-border-color: var(--md-sys-color-outline);
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    padding: 0.875rem 1rem;
    font: var(--md-sys-typescale-body-large);
    min-height: 3.5rem;
    transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

    .form-control:hover:not(:focus), .form-select:hover:not(:focus) {
        border-color: var(--md-sys-color-on-surface);
    }

    .form-control:focus, .form-select:focus {
        background-color: transparent;
        color: var(--md-sys-color-on-surface);
        border-color: var(--md-sys-color-primary);
        box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
        outline: none;
    }

    .form-control::placeholder {
        color: var(--md-sys-color-on-surface-variant);
    }

    .form-control:disabled, .form-select:disabled {
        background-color: transparent;
        border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    }

textarea.form-control {
    min-height: 5.5rem;
}

.form-control-sm {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font: var(--md-sys-typescale-body-medium);
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: 3.5rem;
}

.form-floating > label {
    color: var(--md-sys-color-on-surface-variant);
    padding: 1rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
    height: auto;
    padding: 0 0.25rem;
    margin: 0 0.75rem;
    transform: translateY(-0.5rem) scale(0.75);
    transform-origin: 0 0;
    font: var(--md-sys-typescale-body-small);
}

.form-floating > .form-control:not(:focus):not(:placeholder-shown) ~ label {
    color: var(--md-sys-color-on-surface-variant);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: transparent;
}

.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--md-sys-color-on-surface-variant);
    border-radius: 2px;
    background-color: transparent;
    margin-top: 0.15em;
}

    .form-check-input[type="radio"] {
        border-radius: 50%;
    }

    .form-check-input:checked {
        background-color: var(--md-sys-color-primary);
        border-color: var(--md-sys-color-primary);
    }

    .form-check-input:focus {
        border-color: var(--md-sys-color-primary);
        box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
    }

.form-switch .form-check-input {
    width: 3.25rem;
    height: 2rem;
    border-radius: var(--md-sys-shape-corner-full);
    background-color: var(--md-sys-color-surface-container-highest);
    border-color: var(--md-sys-color-outline);
}

    .form-switch .form-check-input:checked {
        background-color: var(--md-sys-color-primary);
        border-color: var(--md-sys-color-primary);
    }

/* Validation */
.valid.modified:not([type=checkbox]) {
    border-color: var(--md-sys-color-success);
    outline: none;
}

.invalid {
    border-color: var(--md-sys-color-error) !important;
    outline: none;
}

    .invalid:focus {
        box-shadow: inset 0 0 0 1px var(--md-sys-color-error) !important;
    }

.validation-message, .invalid-feedback, .text-danger {
    color: var(--md-sys-color-error) !important;
    font: var(--md-sys-typescale-body-small);
    margin-top: 0.25rem;
    padding-left: 1rem;
}

.validation-summary-errors, .validation-errors {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

    .validation-summary-errors ul, .validation-errors ul {
        margin: 0;
        padding-left: 1.25rem;
    }

/* =========================================================================
   Cards & surfaces
   ========================================================================= */

.card {
    --bs-card-bg: var(--md-sys-color-surface-container-low);
    --bs-card-color: var(--md-sys-color-on-surface);
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--md-sys-shape-corner-medium);
    --bs-card-inner-border-radius: var(--md-sys-shape-corner-medium);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

.card-elevated {
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-1);
}

.card-outlined {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.card-filled {
    background: var(--md-sys-color-surface-container-highest);
}

.card-header {
    border-bottom: 0;
    font: var(--md-sys-typescale-title-medium);
}

.card-footer {
    border-top: 0;
}

.surface { background: var(--md-sys-color-surface); }
.surface-low { background: var(--md-sys-color-surface-container-low); }
.surface-container { background: var(--md-sys-color-surface-container); }
.surface-high { background: var(--md-sys-color-surface-container-high); }
.surface-highest { background: var(--md-sys-color-surface-container-highest); }

.elevation-1 { box-shadow: var(--md-sys-elevation-1); }
.elevation-2 { box-shadow: var(--md-sys-elevation-2); }
.elevation-3 { box-shadow: var(--md-sys-elevation-3); }

.rounded-m3 { border-radius: var(--md-sys-shape-corner-medium); }
.rounded-m3-lg { border-radius: var(--md-sys-shape-corner-large); }
.rounded-m3-xl { border-radius: var(--md-sys-shape-corner-extra-large); }

/* =========================================================================
   Lists, tables, alerts, badges, modals
   ========================================================================= */

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--md-sys-color-on-surface);
    --bs-list-group-border-color: var(--md-sys-color-outline-variant);
    --bs-list-group-border-radius: var(--md-sys-shape-corner-medium);
    --bs-list-group-item-padding-y: 0.75rem;
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-action-hover-bg: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    --bs-list-group-action-active-bg: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    --bs-list-group-active-bg: var(--md-sys-color-secondary-container);
    --bs-list-group-active-color: var(--md-sys-color-on-secondary-container);
    --bs-list-group-active-border-color: var(--md-sys-color-outline-variant);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--md-sys-color-on-surface);
    --bs-table-border-color: var(--md-sys-color-outline-variant);
    --bs-table-striped-bg: var(--md-sys-color-surface-container-low);
    --bs-table-hover-bg: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    font: var(--md-sys-typescale-body-medium);
}

    .table > thead {
        font: var(--md-sys-typescale-title-small);
        color: var(--md-sys-color-on-surface-variant);
    }

    .table > :not(caption) > * > * {
        padding: 0.875rem 1rem;
    }

.alert {
    --bs-alert-border-width: 0;
    --bs-alert-border-radius: var(--md-sys-shape-corner-medium);
    --bs-alert-padding-y: 1rem;
    --bs-alert-padding-x: 1.25rem;
    font: var(--md-sys-typescale-body-medium);
}

.alert-primary, .alert-info {
    --bs-alert-bg: var(--md-sys-color-primary-container);
    --bs-alert-color: var(--md-sys-color-on-primary-container);
}

.alert-secondary, .alert-light {
    --bs-alert-bg: var(--md-sys-color-secondary-container);
    --bs-alert-color: var(--md-sys-color-on-secondary-container);
}

.alert-danger, .alert-warning {
    --bs-alert-bg: var(--md-sys-color-error-container);
    --bs-alert-color: var(--md-sys-color-on-error-container);
}

.alert-success {
    --bs-alert-bg: color-mix(in srgb, var(--md-sys-color-success) 20%, var(--md-sys-color-surface));
    --bs-alert-color: var(--md-sys-color-on-surface);
}

.badge {
    --bs-badge-border-radius: var(--md-sys-shape-corner-small);
    --bs-badge-padding-y: 0.25rem;
    --bs-badge-padding-x: 0.5rem;
    font: var(--md-sys-typescale-label-small);
    letter-spacing: 0.04em;
}

.badge.bg-primary, .badge.text-bg-primary {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.badge.bg-secondary, .badge.text-bg-secondary {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

.badge.bg-danger, .badge.text-bg-danger {
    background-color: var(--md-sys-color-error-container) !important;
    color: var(--md-sys-color-on-error-container) !important;
}

/* Chips (assist / filter) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    padding: 0 1rem;
    border-radius: var(--md-sys-shape-corner-small);
    border: 1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large);
    cursor: pointer;
    text-decoration: none;
}

    .chip.selected {
        border-color: transparent;
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
    }

    .chip .material-symbols-rounded {
        font-size: 18px;
    }

.modal-content {
    --bs-modal-bg: var(--md-sys-color-surface-container-high);
    --bs-modal-color: var(--md-sys-color-on-surface);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--md-sys-shape-corner-extra-large);
    --bs-modal-padding: 1.5rem;
    box-shadow: var(--md-sys-elevation-3);
}

.modal-header, .modal-footer {
    border: 0;
}

.modal-title {
    font: var(--md-sys-typescale-headline-small);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--md-sys-color-surface-container);
    --bs-dropdown-color: var(--md-sys-color-on-surface);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--md-sys-shape-corner-extra-small);
    --bs-dropdown-link-color: var(--md-sys-color-on-surface);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    --bs-dropdown-link-hover-color: var(--md-sys-color-on-surface);
    --bs-dropdown-link-active-bg: var(--md-sys-color-secondary-container);
    --bs-dropdown-link-active-color: var(--md-sys-color-on-secondary-container);
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-item-padding-y: 0.75rem;
    --bs-dropdown-item-padding-x: 0.75rem;
    box-shadow: var(--md-sys-elevation-2);
}

/* =========================================================================
   Blazor framework UI
   ========================================================================= */

.blazor-error-boundary {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .blazor-error-boundary::before {
        content: "error";
        font-family: 'Material Symbols Rounded';
        font-size: 24px;
        line-height: 1;
        font-variation-settings: 'FILL' 1;
    }

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.loading-progress {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 20vh auto 1rem auto;
}

/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

/* Theme switch fade: added to <html> for 1s while a new data-theme is applied. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 1s var(--md-sys-motion-easing-standard),
                color 1s var(--md-sys-motion-easing-standard),
                border-color 1s var(--md-sys-motion-easing-standard),
                outline-color 1s var(--md-sys-motion-easing-standard),
                box-shadow 1s var(--md-sys-motion-easing-standard),
                fill 1s var(--md-sys-motion-easing-standard) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}