/* ==========================================================================
   MZO design system v2 — "Graphite"
   --------------------------------------------------------------------------
   Neutral greys, one ink colour for primary actions, one teal accent for
   focus / active / links. Small hints of colour carry meaning only: a
   six-hue categorical palette (--mzo-c1…c6) for chart series and group
   identity, and status colours (ok / warn / bad) for state. System font
   (no web-font download). Hairline borders, almost no shadows.

   This file is loaded LAST on every report page (after the page's own
   <style>). It does three things:
     1. Defines the --mzo-* tokens for light and dark.
     2. Re-points the CSS variables pages already use (--primary,
        --card-bg, --text-muted, …) at those tokens, so each page's own
        rules pick up the new palette.
     3. Normalises the shared building blocks (headers, cards, buttons,
        tabs, forms, tables, badges, modals) so pages look like one app.

   Elements with an inline background / colour are left alone so heat-maps,
   status chips and coloured KPI values keep their meaning.

   The workstation shell (app.html) inlines the same token values — keep
   the two token blocks in sync.
   ========================================================================== */

/* ---------- 0. Font aliases -------------------------------------------- */
/* Pages and their Chart.js canvases ask for Inter / Outfit / Roboto / Poppins.
   Map those names to the operating system's UI face so no web font is
   downloaded and canvas text matches the page. Declared after the Google
   @font-face rules, so these win. */
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: local("Segoe UI Light"), local("Roboto Light"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("Arial"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: local("Segoe UI"), local("Roboto"), local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial Bold"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: local("Segoe UI Bold"), local("Roboto Bold"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Inter"; font-weight: 800; font-style: normal; font-display: swap; src: local("Segoe UI Black"), local("Roboto Black"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Outfit"; font-weight: 300; font-style: normal; font-display: swap; src: local("Segoe UI Light"), local("Roboto Light"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("Arial"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: local("Segoe UI"), local("Roboto"), local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial Bold"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: local("Segoe UI Bold"), local("Roboto Bold"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Outfit"; font-weight: 800; font-style: normal; font-display: swap; src: local("Segoe UI Black"), local("Roboto Black"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Roboto"; font-weight: 300; font-style: normal; font-display: swap; src: local("Segoe UI Light"), local("Roboto Light"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("Arial"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: local("Segoe UI"), local("Roboto"), local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial"); }
@font-face { font-family: "Roboto"; font-weight: 600; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial Bold"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: local("Segoe UI Bold"), local("Roboto Bold"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Roboto"; font-weight: 800; font-style: normal; font-display: swap; src: local("Segoe UI Black"), local("Roboto Black"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: local("Segoe UI Light"), local("Roboto Light"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("Arial"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: local("Segoe UI"), local("Roboto"), local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial Bold"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: local("Segoe UI Bold"), local("Roboto Bold"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: local("Segoe UI Black"), local("Roboto Black"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 300; font-style: normal; font-display: swap; src: local("Segoe UI Light"), local("Roboto Light"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("Arial"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: local("Segoe UI"), local("Roboto"), local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: local("Segoe UI Semibold"), local("Roboto Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("Arial Bold"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: local("Segoe UI Bold"), local("Roboto Bold"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: local("Segoe UI Black"), local("Roboto Black"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }

/* ---------- 1. Tokens ---------------------------------------------------- */

html[data-mzo-theme="light"],
html[data-mzo-theme="light"] body {
  color-scheme: light;
  --mzo-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Bengali", sans-serif;
  --mzo-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --mzo-canvas: #f1f1f0;      /* shell chrome */
  --mzo-bg: #fafafa;          /* page */
  --mzo-surface: #ffffff;     /* cards, tables, inputs */
  --mzo-surface-2: #f5f5f4;   /* table head, subtle fills */
  --mzo-hover: #efefee;
  --mzo-input: #ffffff;
  --mzo-border: #e7e7e5;
  --mzo-border-strong: #d6d6d3;
  --mzo-text: #18181b;
  --mzo-text-2: #3f3f46;
  --mzo-muted: #71717a;
  --mzo-faint: #a1a1aa;

  --mzo-ink: #18181b;         /* strong text / underline marks */
  --mzo-fill: #18181b;        /* solid primary: buttons, active pills (white text on top) */
  --mzo-fill-hover: #3f3f46;
  --mzo-on-fill: #ffffff;

  --mzo-accent: #0f766e;      /* focus, links, active markers */
  --mzo-accent-soft: rgba(15, 118, 110, 0.09);
  --mzo-ring: 0 0 0 3px rgba(15, 118, 110, 0.18);

  --mzo-ok: #15803d;   --mzo-ok-soft: rgba(21, 128, 61, 0.09);
  --mzo-warn: #b45309; --mzo-warn-soft: rgba(180, 83, 9, 0.10);
  --mzo-bad: #b91c1c;  --mzo-bad-soft: rgba(185, 28, 28, 0.08);
  --mzo-info: #1d4ed8; --mzo-info-soft: rgba(29, 78, 216, 0.08);
  /* Status marks (dots, bars, chart marks). Text keeps --mzo-ok/warn/bad. */
  --mzo-ok-mark: #16a34a; --mzo-warn-mark: #f59e0b; --mzo-bad-mark: #dc2626;

  /* Categorical palette: series identity, in this order (validated, see docs/design-system.md) */
  --mzo-c1: #12a195;  /* teal */
  --mzo-c2: #427fd8;  /* blue */
  --mzo-c3: #982c72;  /* plum */
  --mzo-c4: #886acf;  /* violet */
  --mzo-c5: #b08505;  /* gold */
  --mzo-c6: #0c8bbb;  /* sky */

  --mzo-chart: var(--mzo-c1);       /* default single-series mark */
  --mzo-chart-muted: #71717a;       /* de-emphasised series (with opacity) */
  --mzo-chart-soft: #efefee;        /* bar track */
  --mzo-row-alt: #fbfbfa;
  --mzo-row-hover: #f4f4f3;
  --mzo-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -8px rgba(0, 0, 0, 0.14);
  --mzo-scrim: rgba(24, 24, 27, 0.32);
  --mzo-radius: 8px;
  --mzo-radius-sm: 6px;
}

html[data-mzo-theme="dark"],
html[data-mzo-theme="dark"] body {
  color-scheme: dark;
  --mzo-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Bengali", sans-serif;
  --mzo-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --mzo-canvas: #09090a;
  --mzo-bg: #0f0f10;
  --mzo-surface: #161617;
  --mzo-surface-2: #1c1c1e;
  --mzo-hover: #232325;
  --mzo-input: #121213;
  --mzo-border: #27272a;
  --mzo-border-strong: #34343a;
  --mzo-text: #ececee;
  --mzo-text-2: #c8c8cd;
  --mzo-muted: #8e8e96;
  --mzo-faint: #5f5f66;

  --mzo-ink: #ececee;
  --mzo-fill: #3f3f46;
  --mzo-fill-hover: #52525b;
  --mzo-on-fill: #ffffff;

  --mzo-accent: #2dd4bf;
  --mzo-accent-soft: rgba(45, 212, 191, 0.12);
  --mzo-ring: 0 0 0 3px rgba(45, 212, 191, 0.22);

  --mzo-ok: #4ade80;   --mzo-ok-soft: rgba(74, 222, 128, 0.12);
  --mzo-warn: #fbbf24; --mzo-warn-soft: rgba(251, 191, 36, 0.12);
  --mzo-bad: #f87171;  --mzo-bad-soft: rgba(248, 113, 113, 0.12);
  --mzo-info: #60a5fa; --mzo-info-soft: rgba(96, 165, 250, 0.12);
  --mzo-ok-mark: #4ade80; --mzo-warn-mark: #fbbf24; --mzo-bad-mark: #f87171;

  --mzo-c1: #0aa99b;
  --mzo-c2: #427fd8;
  --mzo-c3: #a5397e;
  --mzo-c4: #9477dd;
  --mzo-c5: #a1790c;
  --mzo-c6: #0c8bbb;

  --mzo-chart: var(--mzo-c1);
  --mzo-chart-muted: #8e8e96;
  --mzo-chart-soft: #232326;
  --mzo-row-alt: #18181a;
  --mzo-row-hover: #1f1f21;
  --mzo-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --mzo-scrim: rgba(0, 0, 0, 0.55);
  --mzo-radius: 8px;
  --mzo-radius-sm: 6px;
}

/* Presentation (PPT) theme — colourful, high-contrast executive slide deck */
html[data-mzo-theme="ppt"],
html[data-mzo-theme="ppt"] body {
  color-scheme: light;
  --mzo-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Bengali", sans-serif;
  --mzo-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --mzo-canvas: #e2e8f6;
  --mzo-bg: #eef2fb;
  --mzo-surface: #ffffff;
  --mzo-surface-2: #f1f5fe;
  --mzo-hover: #e0eafc;
  --mzo-input: #ffffff;
  --mzo-border: #c7d6f0;
  --mzo-border-strong: #93b4eb;
  --mzo-text: #0f172a;
  --mzo-text-2: #1e293b;
  --mzo-muted: #475569;
  --mzo-faint: #64748b;

  --mzo-ink: #0f172a;
  --mzo-fill: #1d4ed8;
  --mzo-fill-hover: #1e40af;
  --mzo-on-fill: #ffffff;

  --mzo-accent: #2563eb;
  --mzo-accent-soft: rgba(37, 99, 235, 0.12);
  --mzo-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);

  --mzo-ok: #047857;   --mzo-ok-soft: #d1fae5;
  --mzo-warn: #b45309; --mzo-warn-soft: #fef3c7;
  --mzo-bad: #be123c;  --mzo-bad-soft: #ffe4e6;
  --mzo-info: #1d4ed8; --mzo-info-soft: #dbeafe;
  --mzo-ok-mark: #10b981; --mzo-warn-mark: #f59e0b; --mzo-bad-mark: #f43f5e;

  /* Vivid PPT categorical palette */
  --mzo-c1: #0284c7;  /* electric sky */
  --mzo-c2: #4f46e5;  /* royal indigo */
  --mzo-c3: #db2777;  /* vivid magenta */
  --mzo-c4: #7c3aed;  /* rich violet */
  --mzo-c5: #d97706;  /* warm amber */
  --mzo-c6: #0d9488;  /* emerald teal */

  --mzo-chart: var(--mzo-c2);
  --mzo-chart-muted: #64748b;
  --mzo-chart-soft: #dbeafe;
  --mzo-row-alt: #f8fafc;
  --mzo-row-hover: #e0f2fe;
  --mzo-shadow-pop: 0 4px 12px rgba(15, 23, 42, 0.08), 0 20px 44px -10px rgba(30, 58, 138, 0.22);
  --mzo-scrim: rgba(15, 23, 42, 0.45);
  --mzo-radius: 12px;
  --mzo-radius-sm: 8px;
}

/* ---------- 2. Re-point the variables pages already use ------------------ */

html[data-mzo-theme],
html[data-mzo-theme] body,
html[data-mzo-theme] body.dark-theme,
html[data-mzo-theme] body.light-theme {
  /* brand / primary → ink */
  --primary: var(--mzo-text);
  --primary-color: var(--mzo-text);
  --primary-hover: var(--mzo-fill-hover);
  --accent: var(--mzo-accent);
  --accent-color: var(--mzo-accent);
  --accent-hover: var(--mzo-accent);

  /* text */
  --text: var(--mzo-text);
  --text-main: var(--mzo-text);
  --text-primary: var(--mzo-text);
  --text-secondary: var(--mzo-muted);
  --text-muted: var(--mzo-muted);

  /* surfaces */
  --bg: var(--mzo-bg);
  --bg-color: var(--mzo-bg);
  --bg-light: var(--mzo-bg);
  --surface: var(--mzo-surface);
  --card-bg: var(--mzo-surface);
  --bg-card: var(--mzo-surface);
  --glass-bg: var(--mzo-surface);
  --input-bg: var(--mzo-input);
  --header-bg: var(--mzo-surface);

  /* lines */
  --border-color: var(--mzo-border);
  --border-light: var(--mzo-border);
  --card-border: var(--mzo-border);
  --glass-border: var(--mzo-border);
  --line: var(--mzo-border);

  /* status */
  --success: var(--mzo-ok);
  --success-color: var(--mzo-ok);
  --warning: var(--mzo-warn);
  --danger: var(--mzo-bad);
  --error: var(--mzo-bad);
  --info: var(--mzo-info);

  /* depth + shape */
  --shadow: none;
  --radius: var(--mzo-radius);

  /* Bootstrap 5 (dtr, prt-oil, si-works) */
  --bs-body-bg: var(--mzo-bg);
  --bs-body-color: var(--mzo-text);
  --bs-body-font-family: var(--mzo-font);
  --bs-border-color: var(--mzo-border);
  --bs-secondary-color: var(--mzo-muted);
  --bs-tertiary-bg: var(--mzo-surface-2);
  --bs-primary: var(--mzo-fill);
  --bs-primary-rgb: 24, 24, 27;
  --bs-link-color: var(--mzo-accent);
  --bs-link-hover-color: var(--mzo-accent);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-border-radius: var(--mzo-radius-sm);
  --bs-border-radius-lg: var(--mzo-radius);
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
}
html[data-mzo-theme="dark"],
html[data-mzo-theme="dark"] body {
  --bs-primary-rgb: 63, 63, 70;
  --bs-link-color-rgb: 45, 212, 191;
}

/* ---------- 3. Base ------------------------------------------------------ */

html[data-mzo-theme] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
html[data-mzo-theme] body {
  background-color: var(--mzo-bg) !important;
  background-image: none !important;
  color: var(--mzo-text) !important;
  font-family: var(--mzo-font) !important;
}
/* One typeface everywhere. Icon fonts (<i>, .fa*, .bi, material) are excluded. */
html[data-mzo-theme] body :where(h1, h2, h3, h4, h5, h6, p, span, div, a, li, dt, dd, label, legend, button, input, select, textarea, option, td, th, caption, small, strong, b, em, section, article, header, footer, nav, main, aside, summary, figcaption, text, tspan):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.material-icons):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.leaflet-container *) {
  font-family: var(--mzo-font) !important;
}
html[data-mzo-theme] :is(code, pre, kbd, samp) { font-family: var(--mzo-mono) !important; }
html[data-mzo-theme] :is(table, .table, [class*="kpi"], [class*="stat-value"], [class*="metric"], .count, .number, .num, .amount) {
  font-variant-numeric: tabular-nums;
}
html[data-mzo-theme] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { letter-spacing: -0.01em; }
html[data-mzo-theme] ::selection { background: var(--mzo-accent-soft); color: inherit; }
html[data-mzo-theme] :focus-visible { outline: 2px solid var(--mzo-accent); outline-offset: 2px; }
html[data-mzo-theme] hr { border-color: var(--mzo-border); opacity: 1; }

/* Body text that pages coloured for the old palette */
html[data-mzo-theme]:not(.ui) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, label, p, li, dt, dd, legend, .form-label):not([style*="color"]):not([class*="text-"]):not([class*="bg-"] *):not(.btn *):not(.badge):not(.alert *) {
  color: var(--mzo-text);
}
html[data-mzo-theme]:not(.ui) :is(.text-muted, .form-text, .subtitle):not([style*="color"]) {
  color: var(--mzo-muted) !important;
}
html[data-mzo-theme]:not(.ui) .text-dark:not([style*="color"]):not([class*="bg-"] *) { color: var(--mzo-text) !important; }
html[data-mzo-theme="light"]:not(.ui) .text-white:not([class*="bg-"]):not([class*="bg-"] *):not(.btn *):not(.badge):not([style*="color"]):not(.btn):not([class*="btn-"] *) {
  color: var(--mzo-text) !important;
}
html[data-mzo-theme]:not(.ui) .text-primary:not([style*="color"]) { color: var(--mzo-accent) !important; }
html[data-mzo-theme]:not(.ui) .text-success:not([style*="color"]) { color: var(--mzo-ok) !important; }
html[data-mzo-theme]:not(.ui) .text-danger:not([style*="color"]) { color: var(--mzo-bad) !important; }
html[data-mzo-theme]:not(.ui) .text-warning:not([style*="color"]) { color: var(--mzo-warn) !important; }

/* Links */
html[data-mzo-theme]:not(.ui) a:not([class]):not([style*="color"]) { color: var(--mzo-accent); text-underline-offset: 2px; }

/* No glass, no glow */
html[data-mzo-theme]:not(.ui) [class*="glass"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---------- 4. Page headers / banners → quiet surface -------------------- */

/* Coloured banners → bordered surface */
html[data-mzo-theme]:not(.ui) :is(.dashboard-header, .header, header.header, .app-header):not([style*="background"]) {
  background: var(--mzo-surface) !important;
  color: var(--mzo-text) !important;
  border: 1px solid var(--mzo-border) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Title rows (no box of their own) → just lose any colour */
html[data-mzo-theme]:not(.ui) :is(.header-content, .page-header, .main-header):not([style*="background"]) {
  background: transparent !important;
  color: var(--mzo-text) !important;
  box-shadow: none !important;
}
html[data-mzo-theme]:not(.ui) body > :is(header, nav.navbar):not([style*="background"]) {
  background: var(--mzo-surface) !important;
  color: var(--mzo-text) !important;
  border-bottom: 1px solid var(--mzo-border) !important;
  box-shadow: none !important;
}
html[data-mzo-theme]:not(.ui) :is(.dashboard-header, .header, header.header, .header-content, .page-header, .app-header, .main-header, body > header) :is(h1, h2, h3, h4, h5, h6, p, span, small, div, a, label, strong, b, i, li):not([style*="color"]):not(.badge):not([class*="badge"]):not([class*="status"]):not(.btn):not(.btn *):not([class*="bg-"]):not([class*="bg-"] *) {
  color: inherit;
}
html[data-mzo-theme]:not(.ui) :is(.dashboard-header, .header, header.header, .header-content, .page-header, body > header) :is(small, [class*="subtitle"], [class*="date"], [class*="meta"], .text-muted):not([style*="color"]):not(.badge) {
  color: var(--mzo-muted) !important;
}
/* Icon tiles in headers lose their gradient fill */
html[data-mzo-theme]:not(.ui) :is(.header-icon, .brand-icon):not([style*="background"]) {
  background: var(--mzo-surface-2) !important;
  color: var(--mzo-text) !important;
  box-shadow: none !important;
}

/* ---------- 5. Cards, panels, KPI tiles --------------------------------- */

html[data-mzo-theme]:not(.ui) :is(.card, .kpi-card, .stat-card, .summary-card, .panel, .glass-card, .table-container, .filters-container, .section-card, .report-card, .list-group-item, .offcanvas, .toast, .dropdown-menu):not([style*="background"]):not(.colored-kpi):not([class*="bg-"]) {
  background-color: var(--mzo-surface) !important;
  background-image: none !important;
  color: var(--mzo-text);
  border-top-color: var(--mzo-border) !important;
  border-right-color: var(--mzo-border) !important;
  border-bottom-color: var(--mzo-border) !important;
  box-shadow: none !important;
}
html[data-mzo-theme]:not(.ui) :is(.card, .kpi-card, .stat-card, .summary-card, .section-card, .report-card):not([style*="border-radius"]) {
  border-radius: var(--mzo-radius) !important;
}
html[data-mzo-theme]:not(.ui) :is(.kpi-card, .stat-card):hover { transform: none !important; }
html[data-mzo-theme]:not(.ui) :is(.card-header, .card-footer, .accordion-button):not([style*="background"]):not([class*="bg-"]) {
  background-color: var(--mzo-surface) !important;
  background-image: none !important;
  color: var(--mzo-text) !important;
  border-color: var(--mzo-border) !important;
}
html[data-mzo-theme]:not(.ui) .dropdown-menu { box-shadow: var(--mzo-shadow-pop) !important; border: 1px solid var(--mzo-border) !important; }
html[data-mzo-theme]:not(.ui) .dropdown-item { color: var(--mzo-text); }
html[data-mzo-theme]:not(.ui) .dropdown-item:hover, html[data-mzo-theme]:not(.ui) .dropdown-item:focus { background: var(--mzo-hover); color: var(--mzo-text); }
html[data-mzo-theme]:not(.ui) :is(.bg-white, .bg-light):not([style*="background"]):not(.badge) {
  background-color: var(--mzo-surface) !important;
}
html[data-mzo-theme]:not(.ui) :is(.border, .border-top, .border-bottom) {
  border-color: var(--mzo-border) !important;
}

/* No coloured accent bars on cards, calmer radii */
html[data-mzo-theme]:not(.ui) :is(.card, .kpi-card, .stat-card, .summary-card, .report-card, [class*="kpi-card"], [class*="stat-card"], [class*="summary-card"], [class*="metric-card"]) {
  border-left: 1px solid var(--mzo-border) !important;
  border-top: 1px solid var(--mzo-border) !important;
  border-image: none !important;
}
html[data-mzo-theme]:not(.ui) :is([class*="kpi-card"], [class*="stat-card"], [class*="metric-card"])::before { display: none !important; }
html[data-mzo-theme]:not(.ui) :is(.section-header, h2, h3, h4)[style*="border-left"] { border-left: 0 !important; padding-left: 0; }
html[data-mzo-theme]:not(.ui) :is(.dashboard-header, .header, .panel, .card, .modal-content, .table-container, .filters-container) { border-radius: var(--mzo-radius) !important; }

/* ---------- 6. Buttons --------------------------------------------------- */

html[data-mzo-theme]:not(.ui) .btn {
  border-radius: var(--mzo-radius-sm);
  font-weight: 500;
  box-shadow: none !important;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
html[data-mzo-theme]:not(.ui) :is(.btn-primary, .btn-dark, .btn-success, .btn-info):not([style*="background"]) {
  --bs-btn-bg: var(--mzo-fill);
  --bs-btn-border-color: var(--mzo-fill);
  --bs-btn-hover-bg: var(--mzo-fill-hover);
  --bs-btn-hover-border-color: var(--mzo-fill-hover);
  --bs-btn-active-bg: var(--mzo-fill-hover);
  background-color: var(--mzo-fill) !important;
  background-image: none !important;
  border-color: var(--mzo-fill) !important;
  color: var(--mzo-on-fill) !important;
}
html[data-mzo-theme]:not(.ui) :is(.btn-primary, .btn-dark, .btn-success, .btn-info):not([style*="background"]):hover {
  background-color: var(--mzo-fill-hover) !important;
  border-color: var(--mzo-fill-hover) !important;
}
html[data-mzo-theme]:not(.ui) :is(.btn-primary, .btn-dark, .btn-success, .btn-info):not([style*="color"]) :is(i, span) { color: inherit !important; }
html[data-mzo-theme]:not(.ui) :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary):not([style*="background"]) {
  --bs-btn-bg: var(--mzo-surface);
  --bs-btn-color: var(--mzo-text);
  --bs-btn-border-color: var(--mzo-border-strong);
  --bs-btn-hover-bg: var(--mzo-hover);
  --bs-btn-hover-color: var(--mzo-text);
  --bs-btn-hover-border-color: var(--mzo-border-strong);
  --bs-btn-active-bg: var(--mzo-hover);
  --bs-btn-active-color: var(--mzo-text);
  background-color: var(--mzo-surface) !important;
  background-image: none !important;
  border: 1px solid var(--mzo-border-strong) !important;
  color: var(--mzo-text) !important;
}
html[data-mzo-theme]:not(.ui) :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary):not([style*="background"]):hover {
  background-color: var(--mzo-hover) !important;
}
html[data-mzo-theme]:not(.ui) :is(.btn-outline-primary, .btn-outline-secondary):is(.active, :active) {
  background-color: var(--mzo-fill) !important;
  border-color: var(--mzo-fill) !important;
  color: var(--mzo-on-fill) !important;
}
html[data-mzo-theme]:not(.ui) .btn-danger:not([style*="background"]) {
  background-color: var(--mzo-bad) !important;
  border-color: var(--mzo-bad) !important;
  color: #fff !important;
}
html[data-mzo-theme]:not(.ui) .btn-warning:not([style*="background"]) {
  background-color: var(--mzo-warn-soft) !important;
  border-color: transparent !important;
  color: var(--mzo-warn) !important;
}
html[data-mzo-theme]:not(.ui) .btn-link { color: var(--mzo-accent); text-decoration: none; }
html[data-mzo-theme]:not(.ui) .btn-close { opacity: .55; }
html[data-mzo-theme="dark"]:not(.ui) .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* Buttons that lived on a coloured header */
html[data-mzo-theme]:not(.ui) :is(.dashboard-header, .header, header.header, .header-content, .page-header, body > header) :is(button, a.btn, .btn, [role="button"]):not([style*="background"]):not(.btn-primary):not(.btn-success):not(.btn-dark):not(.btn-danger):not([class*="bg-"]):not(.active) {
  background-color: var(--mzo-surface) !important;
  background-image: none !important;
  border: 1px solid var(--mzo-border-strong) !important;
  color: var(--mzo-text) !important;
  box-shadow: none !important;
}
html[data-mzo-theme]:not(.ui) :is(.dashboard-header, .header, header.header, .header-content, .page-header, body > header) :is(button, a.btn, .btn, [role="button"]):not([style*="background"]):not(.btn-primary):not(.btn-success):not(.btn-dark):not(.btn-danger):not([class*="bg-"]):hover {
  background-color: var(--mzo-hover) !important;
}

/* ---------- 7. Tabs, pills, segmented controls --------------------------- */

html[data-mzo-theme]:not(.ui) .nav-tabs { border-color: var(--mzo-border); }
html[data-mzo-theme]:not(.ui) .nav-tabs .nav-link {
  color: var(--mzo-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent !important;
  border-radius: 0;
}
html[data-mzo-theme]:not(.ui) .nav-tabs .nav-link:hover { color: var(--mzo-text); }
html[data-mzo-theme]:not(.ui) .nav-tabs .nav-link.active {
  color: var(--mzo-text) !important;
  background: transparent !important;
  border-bottom-color: var(--mzo-text) !important;
  font-weight: 600;
}
html[data-mzo-theme]:not(.ui) :is(.nav-pills .nav-link, .tab-btn, .filter-chip):not([style*="background"]):not(.active):not([aria-selected="true"]) {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--mzo-muted) !important;
  box-shadow: none !important;
}
html[data-mzo-theme]:not(.ui) :is(.nav-pills .nav-link, .tab-btn, .filter-chip):not([style*="background"]):not(.active):not([aria-selected="true"]):hover {
  background-color: var(--mzo-hover) !important;
  color: var(--mzo-text) !important;
}
html[data-mzo-theme]:not(.ui) :is(.nav-pills .nav-link.active, .tab-btn.active, .filter-chip.active, [role="tab"][aria-selected="true"]):not([style*="background"]) {
  background-color: var(--mzo-fill) !important;
  background-image: none !important;
  border-color: var(--mzo-fill) !important;
  color: var(--mzo-on-fill) !important;
  box-shadow: none !important;
}
html[data-mzo-theme]:not(.ui) :is(.nav-pills .nav-link.active, .tab-btn.active, .filter-chip.active, [role="tab"][aria-selected="true"]) :is(i, span, small):not([style*="color"]) { color: inherit !important; }
html[data-mzo-theme]:not(.ui) .page-link { background-color: var(--mzo-surface); color: var(--mzo-text); border-color: var(--mzo-border); }
html[data-mzo-theme]:not(.ui) .page-item.active .page-link { background-color: var(--mzo-fill); border-color: var(--mzo-fill); color: var(--mzo-on-fill); }

/* ---------- 8. Forms ----------------------------------------------------- */

html[data-mzo-theme]:not(.ui) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="reset"]), select, textarea, .form-control, .form-select, .input-group-text, .search-input):not([style*="background"]) {
  background-color: var(--mzo-input) !important;
  color: var(--mzo-text) !important;
  border-color: var(--mzo-border-strong) !important;
  box-shadow: none !important;
}
html[data-mzo-theme]:not(.ui) :is(input, select, textarea, .form-control, .form-select):focus {
  border-color: var(--mzo-accent) !important;
  box-shadow: var(--mzo-ring) !important;
  outline: none !important;
}
html[data-mzo-theme]:not(.ui) .form-select:not([style*="background-image"]) {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
}
html[data-mzo-theme]:not(.ui) :is(input, textarea)::placeholder { color: var(--mzo-faint) !important; opacity: 1; }
html[data-mzo-theme]:not(.ui) select option { background-color: var(--mzo-surface); color: var(--mzo-text); }
html[data-mzo-theme]:not(.ui) :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--mzo-accent); }
html[data-mzo-theme]:not(.ui) .form-check-input:checked { background-color: var(--mzo-fill); border-color: var(--mzo-fill); }

/* ---------- 9. Tables ---------------------------------------------------- */

html[data-mzo-theme]:not(.ui) :is(table, .table) {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mzo-text);
  --bs-table-border-color: var(--mzo-border);
  --bs-table-striped-bg: var(--mzo-row-alt);
  --bs-table-striped-color: var(--mzo-text);
  --bs-table-hover-bg: var(--mzo-row-hover);
  --bs-table-hover-color: var(--mzo-text);
  color: var(--mzo-text);
  border-color: var(--mzo-border);
}
html[data-mzo-theme]:not(.ui) :is(.table-responsive, .table-container, .table-wrapper, .table-wrap, .dataTables_wrapper) { border-color: var(--mzo-border); }
html[data-mzo-theme]:not(.ui) table :is(th, td):not([style*="border-color"]) { border-color: var(--mzo-border) !important; }
html[data-mzo-theme]:not(.ui) table :is(td, th):not([style*="color"]):not([class*="bg-"]):not([class*="text-"]) { color: var(--mzo-text); }
html[data-mzo-theme]:not(.ui) table thead :is(th, td):not([style*="background"]):not([class*="bg-"]),
html[data-mzo-theme]:not(.ui) :is(.table-dark, .table-primary, .thead-dark) :is(th, td):not([style*="background"]) {
  background-color: var(--mzo-surface-2) !important;
  background-image: none !important;
  color: var(--mzo-text-2) !important;
  font-weight: 600;
}
html[data-mzo-theme]:not(.ui) table thead :is(th, td):not([style*="background"]) :is(i, span, a):not([style*="color"]) { color: inherit !important; }
html[data-mzo-theme]:not(.ui) table tbody tr:not([style*="background"]):not([class*="table-"]):not([class*="bg-"]) > :is(td, th):not([style*="background"]):not([class*="table-"]):not([class*="bg-"]) {
  background-color: var(--mzo-surface);
}
html[data-mzo-theme]:not(.ui) table tbody tr:not([style*="background"]):not([class*="bg-"]):nth-child(even) > :is(td, th):not([style*="background"]):not([class*="table-"]):not([class*="bg-"]) {
  background-color: var(--mzo-row-alt);
}
html[data-mzo-theme]:not(.ui) table tbody tr:hover > :is(td, th):not([style*="background"]):not([class*="table-"]):not([class*="bg-"]) {
  background-color: var(--mzo-row-hover);
}
html[data-mzo-theme]:not(.ui) :is(table tfoot, tr.total-row, tr.total) :is(td, th):not([style*="background"]) {
  background-color: var(--mzo-surface-2) !important;
  color: var(--mzo-text) !important;
  font-weight: 600;
}

/* ---------- 10. Badges --------------------------------------------------- */

html[data-mzo-theme]:not(.ui) .badge { font-weight: 600; border-radius: 999px; letter-spacing: 0; }
html[data-mzo-theme]:not(.ui) .badge:is(.bg-primary, .bg-secondary, .bg-info, .bg-light, .bg-dark):not([style*="background"]) {
  background-color: var(--mzo-surface-2) !important;
  color: var(--mzo-text-2) !important;
  box-shadow: inset 0 0 0 1px var(--mzo-border);
}
html[data-mzo-theme]:not(.ui) .badge:is(.bg-success, .text-bg-success):not([style*="background"]) { background-color: var(--mzo-ok-soft) !important; color: var(--mzo-ok) !important; }
html[data-mzo-theme]:not(.ui) .badge:is(.bg-danger, .text-bg-danger):not([style*="background"]) { background-color: var(--mzo-bad-soft) !important; color: var(--mzo-bad) !important; }
html[data-mzo-theme]:not(.ui) .badge:is(.bg-warning, .text-bg-warning):not([style*="background"]) { background-color: var(--mzo-warn-soft) !important; color: var(--mzo-warn) !important; }

/* ---------- 11. Alerts, toasts ------------------------------------------ */

html[data-mzo-theme]:not(.ui) .alert { border-radius: var(--mzo-radius); border: 1px solid var(--mzo-border); box-shadow: none; }
html[data-mzo-theme]:not(.ui) .alert-success { background: var(--mzo-ok-soft); color: var(--mzo-text); border-color: transparent; }
html[data-mzo-theme]:not(.ui) .alert-warning { background: var(--mzo-warn-soft); color: var(--mzo-text); border-color: transparent; }
html[data-mzo-theme]:not(.ui) .alert-danger { background: var(--mzo-bad-soft); color: var(--mzo-text); border-color: transparent; }

html[data-mzo-theme]:not(.ui) .toast:not([style*="background"]) {
  background: var(--mzo-fill) !important;
  color: var(--mzo-on-fill) !important;
  border: 0 !important;
  border-radius: var(--mzo-radius) !important;
  box-shadow: var(--mzo-shadow-pop) !important;
}

/* ---------- 12. Modals, overlays, loaders -------------------------------- */

html[data-mzo-theme]:not(.ui) :is(.modal-content, .modal-card):not([style*="background"]) {
  background-color: var(--mzo-surface) !important;
  background-image: none !important;
  color: var(--mzo-text) !important;
  border: 1px solid var(--mzo-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--mzo-shadow-pop) !important;
}
html[data-mzo-theme]:not(.ui) :is(.modal-header, .modal-footer):not([style*="background"]) {
  background: var(--mzo-surface) !important;
  color: var(--mzo-text) !important;
  border-color: var(--mzo-border) !important;
}
html[data-mzo-theme]:not(.ui) .modal-header :is(h1, h2, h3, h4, h5, h6, .modal-title, span, small, i, div):not([style*="color"]):not(.badge):not(.btn-close) { color: inherit !important; }
html[data-mzo-theme]:not(.ui) .modal-header .btn-close { filter: none; }
html[data-mzo-theme="dark"]:not(.ui) .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
html[data-mzo-theme]:not(.ui) .modal-backdrop.show { opacity: 1; background-color: var(--mzo-scrim); }
html[data-mzo-theme]:not(.ui) .modal-overlay:not([style*="background"]) {
  background-color: var(--mzo-scrim) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-mzo-theme]:not(.ui) :is(.loading-overlay, #loadingOverlay):not([style*="background"]) {
  background: color-mix(in srgb, var(--mzo-bg) 88%, transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--mzo-muted) !important;
}
html[data-mzo-theme]:not(.ui) :is(.spinner, .loader, .loading-spinner):not([style*="border"]) {
  border-color: var(--mzo-border) !important;
  border-top-color: var(--mzo-ink) !important;
}
html[data-mzo-theme]:not(.ui) .spinner-border { color: var(--mzo-ink); }

/* ---------- 13. Scrollbars ---------------------------------------------- */

html[data-mzo-theme]:not(.ui) * { scrollbar-width: thin; scrollbar-color: var(--mzo-border-strong) transparent; }
html[data-mzo-theme]:not(.ui) ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-mzo-theme]:not(.ui) ::-webkit-scrollbar-thumb { background: var(--mzo-border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html[data-mzo-theme]:not(.ui) ::-webkit-scrollbar-thumb:hover { background-color: var(--mzo-faint); }
html[data-mzo-theme]:not(.ui) ::-webkit-scrollbar-track { background: transparent; }


/* ---------- 14. Inside the workstation shell ---------------------------- */
/* mzo_theme.js adds html.mzo-in-shell when the page runs inside app.html.  */

html.mzo-in-shell :is(#themeToggleBtn, .btn-theme-toggle, .theme-toggle, #theme-toggle) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-mzo-theme] *, html[data-mzo-theme] *::before, html[data-mzo-theme] *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   15. UI kit — pages rebuilt on the design system (<html class="ui">)
   --------------------------------------------------------------------------
   Page      .ui-page > .ui-head (h1 + .ui-badge.ui-date or p meta, .ui-actions)
   Controls  .ui-btn (.primary .ghost .icon .sm) · .ui-select > select · .ui-search > input · .ui-seg
   Filters   .ui-filters (one wrapping row) — or the side panel, section 16
   Numbers   .ui-stats > .ui-stat (.k label, .v value, .s sub) — one strip, no cards
   Panels    .ui-panel > .ui-panel-h (h2, .ui-tabs) + body · .ui-grid (2 columns)
   Data      .ui-table (th[data-sort], td.num, tr.click) · .ui-bar · .ui-hist (fill: --bar, default --mzo-chart)
   Misc      .ui-badge (.bad .warn .ok) · .ui-dot (.ok .warn .bad .c1–.c6) · .ui-empty · .ui-skel · .ui-toast
   ========================================================================== */

html.ui { background: var(--mzo-bg); }
html.ui body { margin: 0; font: 13px/1.5 var(--mzo-font); color: var(--mzo-text); background: var(--mzo-bg); }
:where(html.ui) *, :where(html.ui) *::before, :where(html.ui) *::after { box-sizing: border-box; }
:where(html.ui) button { font: inherit; color: inherit; }
html.ui [hidden] { display: none !important; }
.ui-i { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ui-page { max-width: 1440px; margin: 0 auto; padding: 24px 28px 72px; }
.ui-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ui-head h1 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.ui-head p { margin: 3px 0 0; font-size: 13px; color: var(--mzo-muted); }
.ui-head .ui-date { margin-left: 8px; vertical-align: 3px; }
.ui-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Buttons */
.ui-btn {
  height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 7px; border: 1px solid var(--mzo-border-strong);
  background: var(--mzo-surface); color: var(--mzo-text);
  font: 500 13px/1 var(--mzo-font); white-space: nowrap; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
a.ui-btn { text-decoration: none; }
.ui-btn:hover { background: var(--mzo-hover); }
.ui-btn:disabled { opacity: .5; cursor: default; }
.ui-btn.primary { background: var(--mzo-fill); border-color: var(--mzo-fill); color: var(--mzo-on-fill); }
.ui-btn.primary:hover { background: var(--mzo-fill-hover); border-color: var(--mzo-fill-hover); }
.ui-btn.ghost { background: transparent; border-color: transparent; color: var(--mzo-muted); }
.ui-btn.ghost:hover { background: var(--mzo-hover); color: var(--mzo-text); }
.ui-btn.icon { width: 32px; padding: 0; }
.ui-btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.ui-btn.icon.sm { width: 28px; padding: 0; }
.ui-btn.spin .ui-i { animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Filters */
.ui-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ui-select select, .ui-input {
  height: 32px; border-radius: 7px;
  border: 1px solid var(--mzo-border-strong);
  background-color: var(--mzo-surface); color: var(--mzo-text);
  font: 13px var(--mzo-font);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.ui-select select {
  -webkit-appearance: none; appearance: none;
  padding: 0 28px 0 10px; max-width: 220px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.ui-select select.on { background-color: var(--mzo-surface-2); border-color: var(--mzo-text-2); font-weight: 500; }
.ui-select select:disabled { opacity: 1; color: var(--mzo-text-2); background-color: var(--mzo-surface-2); cursor: default; }
.ui-select select:focus, .ui-input:focus { border-color: var(--mzo-accent); box-shadow: var(--mzo-ring); }
.ui-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.ui-search .ui-i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--mzo-faint); pointer-events: none; }
.ui-search .ui-input { width: 100%; padding: 0 10px 0 32px; }
.ui-input::placeholder { color: var(--mzo-faint); }

/* Segmented control */
.ui-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--mzo-surface-2); box-shadow: inset 0 0 0 1px var(--mzo-border); }
.ui-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--mzo-muted); font-weight: 500; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ui-seg button:hover { color: var(--mzo-text); }
.ui-seg button[aria-pressed="true"] { background: var(--mzo-surface); color: var(--mzo-text); box-shadow: 0 0 0 1px var(--mzo-border-strong), 0 1px 1px rgba(0,0,0,.04); }

/* Stat strip */
.ui-stats {
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  background: var(--mzo-surface); border: 1px solid var(--mzo-border); border-radius: 10px;
  overflow: hidden; margin-bottom: 16px;
}
.ui-stat {
  position: relative; display: block; text-align: left; min-width: 0;
  padding: 14px 16px 15px; border: 0; background: none;
  box-shadow: 1px 0 0 var(--mzo-border), 0 1px 0 var(--mzo-border);
}
.ui-stat .k { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mzo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-stat .v { margin-top: 6px; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ui-stat .s { margin-top: 3px; font-size: 12px; color: var(--mzo-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.ui-stat { cursor: pointer; transition: background-color .12s; }
button.ui-stat:hover { background: var(--mzo-row-hover); }
.ui-stat[aria-pressed="true"] { background: var(--mzo-surface-2); }
.ui-stat[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mzo-accent); }

/* Panels */
.ui-panel { background: var(--mzo-surface); border: 1px solid var(--mzo-border); border-radius: 10px; overflow: hidden; min-width: 0; }
.ui-panel + .ui-panel, .ui-grid + .ui-panel, .ui-panel + .ui-grid { margin-top: 16px; }
.ui-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-height: 50px; padding: 9px 12px 9px 16px; border-bottom: 1px solid var(--mzo-border); }
.ui-panel-h h2 { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 600; }
.ui-panel-h h2 small { margin-left: 6px; font-size: 12.5px; font-weight: 400; color: var(--mzo-muted); }
.ui-panel-b { padding: 16px; }
.ui-panel-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--mzo-border); font-size: 12.5px; color: var(--mzo-muted); }
.ui-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ui-grid > .ui-panel + .ui-panel { margin-top: 0; }

/* Tabs (compact, in panel headers) */
.ui-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.ui-tab { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--mzo-muted); font: 500 12.5px var(--mzo-font); cursor: pointer; white-space: nowrap; }
.ui-tab:hover { color: var(--mzo-text); background: var(--mzo-hover); }
.ui-tab[aria-selected="true"] { color: var(--mzo-text); background: var(--mzo-surface-2); box-shadow: inset 0 0 0 1px var(--mzo-border); }

/* Tables */
.ui-table-wrap { overflow: auto; max-height: var(--max-h, none); }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 12px; text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--mzo-muted);
  background: var(--mzo-surface); border-bottom: 1px solid var(--mzo-border);
  user-select: none;
}
.ui-table th:first-child, .ui-table td:first-child { padding-left: 16px; }
.ui-table th:last-child, .ui-table td:last-child { padding-right: 16px; }
.ui-table th[data-sort] { cursor: pointer; }
.ui-table th[data-sort]:hover { color: var(--mzo-text); }
.ui-table th[aria-sort] { color: var(--mzo-text); }
.ui-table th[aria-sort="ascending"]::after { content: " ↑"; }
.ui-table th[aria-sort="descending"]::after { content: " ↓"; }
.ui-table td { padding: 9px 12px; border-bottom: 1px solid var(--mzo-border); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table .num { text-align: right; white-space: nowrap; }
.ui-muted { color: var(--mzo-muted); }
.ui-table .wrap { white-space: normal; }
.ui-strong { font-weight: 500; }
.ui-table tbody tr.click { cursor: pointer; }
.ui-table tbody tr:hover td { background: var(--mzo-row-hover); }
.ui-table tbody tr.sel td { background: var(--mzo-surface-2); }
.ui-table tfoot td { font-weight: 600; background: var(--mzo-surface-2); border-top: 1px solid var(--mzo-border); border-bottom: 0; }
.ui-table .sub { display: block; font-size: 12px; color: var(--mzo-muted); font-weight: 400; white-space: nowrap; }
.ui-table .chev { width: 28px; color: var(--mzo-faint); }

/* Share bar (in table cells) and histogram */
.ui-bar { display: flex; align-items: center; gap: 8px; min-width: 90px; }
.ui-bar i { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--mzo-chart-soft); overflow: hidden; }
.ui-bar i b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--bar, var(--mzo-chart)); }
.ui-bar span { width: 42px; text-align: right; color: var(--mzo-muted); font-size: 12px; }
.ui-hist { display: grid; gap: 4px; }
.ui-hist .row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 56px; align-items: center; gap: 12px; height: 28px; padding: 0 4px; margin: 0 -4px; font-size: 12.5px; border-radius: 6px; }
.ui-hist .row > span:first-child { color: var(--mzo-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-hist .row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.ui-hist i { position: relative; height: 8px; border-radius: 4px; background: var(--mzo-chart-soft); overflow: hidden; }
.ui-hist i b { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--bar, var(--mzo-chart)); transition: width .25s ease; }
.ui-hist .row.click { cursor: pointer; border-radius: 6px; }
.ui-hist .row.click:hover { background: var(--mzo-row-hover); }
.ui-hist .row.click:hover > span:first-child { color: var(--mzo-text); }
.ui-hist .row.on i b { background: var(--mzo-text); }

/* Line chart (UI.line) */
.ui-chart-wrap { position: relative; }
.ui-chart { display: block; max-width: 100%; overflow: visible; }
.ui-chart text { font: 11px var(--mzo-font); fill: var(--mzo-muted); font-variant-numeric: tabular-nums; }
.ui-chart .gl { stroke: var(--mzo-border); stroke-width: 1; }
.ui-chart .ln { fill: none; stroke: var(--mzo-chart-muted); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart .ln.strong { stroke: var(--mzo-chart); stroke-width: 2.2; }
.ui-chart .pt { fill: var(--mzo-surface); stroke: var(--mzo-chart); stroke-width: 1.6; }
.ui-chart .hit { fill: transparent; }
.ui-chart .guide { stroke: var(--mzo-border-strong); stroke-dasharray: 3 3; }
.ui-tip { position: absolute; top: 4px; min-width: 150px; padding: 8px 10px; border-radius: 8px; background: var(--mzo-surface); box-shadow: 0 0 0 1px var(--mzo-border), var(--mzo-shadow-pop); font-size: 12px; pointer-events: none; z-index: 2; }
.ui-tip b { display: block; margin-bottom: 4px; font-weight: 600; }
.ui-tip div { display: flex; justify-content: space-between; gap: 16px; color: var(--mzo-muted); font-variant-numeric: tabular-nums; }
.ui-tip div span:last-child { color: var(--mzo-text); font-weight: 500; }
.ui-tip div i { display: inline-block; width: 8px; height: 2px; margin-right: 6px; border-radius: 1px; vertical-align: 3px; background: var(--mzo-chart-muted); }
.ui-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--mzo-muted); }
.ui-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend i { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: var(--mzo-chart-muted); }
.ui-legend i.strong { background: var(--mzo-chart); height: 2.5px; }
.ui-delta { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-delta.bad { color: var(--mzo-bad); }
.ui-delta.ok { color: var(--mzo-ok); }
.ui-delta.flat { color: var(--mzo-muted); }

/* Badges, dots */
.ui-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--mzo-surface-2); color: var(--mzo-text-2); box-shadow: inset 0 0 0 1px var(--mzo-border); }
.ui-badge.bad { background: var(--mzo-bad-soft); color: var(--mzo-bad); box-shadow: none; }
.ui-badge.warn { background: var(--mzo-warn-soft); color: var(--mzo-warn); box-shadow: none; }
.ui-badge.ok { background: var(--mzo-ok-soft); color: var(--mzo-ok); box-shadow: none; }
.ui-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mzo-faint); flex: none; }
.ui-dot.bad { background: var(--mzo-bad-mark); }
.ui-dot.warn { background: var(--mzo-warn-mark); }
.ui-dot.ok { background: var(--mzo-ok-mark); }
.ui-dot.c1 { background: var(--mzo-c1); } .ui-dot.c2 { background: var(--mzo-c2); } .ui-dot.c3 { background: var(--mzo-c3); }
.ui-dot.c4 { background: var(--mzo-c4); } .ui-dot.c5 { background: var(--mzo-c5); } .ui-dot.c6 { background: var(--mzo-c6); }

/* States */
.ui-empty { padding: 40px 16px; text-align: center; color: var(--mzo-muted); font-size: 13px; }
.ui-skel { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--mzo-surface-2) 25%, var(--mzo-hover) 50%, var(--mzo-surface-2) 75%); background-size: 200% 100%; animation: ui-shim 1.3s ease-in-out infinite; }
.ui-stat .ui-skel { height: 24px; width: 64%; margin-top: 8px; }
@keyframes ui-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ui-note { font-size: 12.5px; color: var(--mzo-muted); }
.ui-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1000;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 9px 14px; border-radius: 8px;
  background: var(--mzo-fill); color: var(--mzo-on-fill);
  font-size: 13px; font-weight: 500; box-shadow: var(--mzo-shadow-pop);
  transition: opacity .18s, transform .18s;
}
.ui-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Drawer (row details) */
.ui-drawer { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: flex-end; background: var(--mzo-scrim); }
.ui-drawer[hidden] { display: none; }
.ui-drawer > section { width: min(460px, 100%); height: 100%; overflow: auto; background: var(--mzo-surface); border-left: 1px solid var(--mzo-border); box-shadow: var(--mzo-shadow-pop); animation: ui-slide .18s ease; }
@keyframes ui-slide { from { transform: translateX(16px); opacity: .6; } }
.ui-drawer header { position: sticky; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 20px; background: var(--mzo-surface); border-bottom: 1px solid var(--mzo-border); }
.ui-drawer header > div:first-child { flex: 1; min-width: 0; }
.ui-drawer-act { display: flex; gap: 6px; }
.ui-drawer-act:empty { display: none; }
.ui-drawer header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ui-drawer header p { margin: 2px 0 0; color: var(--mzo-muted); font-size: 12.5px; }
.ui-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0; margin: 0; padding: 6px 20px 20px; font-size: 13px; }
.ui-dl dt, .ui-dl dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--mzo-border); }
.ui-dl dt { color: var(--mzo-muted); }
.ui-dl dd { font-variant-numeric: tabular-nums; word-break: break-word; }
.ui-drawer-x { padding: 0 20px 20px; }

@media (max-width: 1100px) {
  .ui-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ui-page { padding: 16px 14px 56px; }
  .ui-head { margin-bottom: 14px; }
  .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-stats > .ui-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ui-stat .v { font-size: 20px; }
  .ui-search { max-width: none; flex-basis: 100%; }
  .ui-select select { max-width: 160px; }
  .ui-hist .row { grid-template-columns: 90px minmax(0, 1fr) 52px; }
  .ui-table .hide-sm { display: none; }
}
@media print {
  .ui-actions, .ui-filters, .ui-btn { display: none !important; }
  .ui-page { padding: 0; }
}

/* ---------- 16. UI kit — filter side panel (reference: pending_load_extension.html) ----------
   .ui-layout > .ui-side (filters) + .ui-main (content)
   .ui-side-h (title + Clear) · .ui-side-sec (group) · .ui-side-stack (search + selects)
   .ui-opts > .ui-opt (UI.facet: toggle options with counts) · .ui-side-tabs (tabbed group)
   .ui-side-toggle shows the panel on narrow screens. */
.ui-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; align-items: start; }
.ui-main { min-width: 0; }
.ui-side {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--mzo-surface); border: 1px solid var(--mzo-border); border-radius: 10px; scrollbar-width: thin;
}
.ui-side-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--mzo-border); }
.ui-side-h h2 { margin: 0; font-size: 13.5px; font-weight: 600; }
.ui-side-h h2 small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--mzo-accent); }
.ui-side-sec { padding: 8px 10px; border-bottom: 1px solid var(--mzo-border); }
.ui-side-sec:last-child { border-bottom: 0; }
.ui-side-stack { display: grid; gap: 6px; padding: 10px; }
.ui-side .ui-search { display: block; max-width: none; flex: none; }
.ui-side .ui-select, .ui-side .ui-select select { display: block; width: 100%; max-width: none; }
.ui-side-tabs { display: flex; margin: 2px 0 6px; }
.ui-side-tabs button { flex: 1; }
.ui-side-tabs button.has::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--mzo-accent); vertical-align: 2px; }
.ui-opts { display: grid; }
.ui-opt { display: flex; align-items: center; gap: 8px; width: 100%; height: 27px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--mzo-text-2); font: 13px var(--mzo-font); text-align: left; cursor: pointer; }
.ui-opt:hover { background: var(--mzo-hover); color: var(--mzo-text); }
.ui-opt i { width: 13px; height: 13px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mzo-border-strong); background: var(--mzo-surface); }
.ui-opt[aria-checked="true"] { color: var(--mzo-text); font-weight: 500; background: var(--mzo-surface-2); }
.ui-opt[aria-checked="true"] i { box-shadow: inset 0 0 0 4px var(--mzo-text); }
.ui-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-opt small { color: var(--mzo-muted); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 400; }
.ui-opt .ui-dot { flex: none; margin-right: -2px; }
.ui-opt.zero { opacity: .45; }
.ui-side-toggle { display: none; }
.ui-main > .ui-stats { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
/* Beside the panel the main column is narrower: keep wrapping text columns readable */
.ui-main .ui-table td.wrap { min-width: 150px; }
@media (max-width: 980px) {
  .ui-layout { grid-template-columns: minmax(0, 1fr); }
  .ui-side { position: static; max-height: none; display: none; }
  .ui-side.open { display: block; }
  .ui-side-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
  .ui-main > .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 17. UI kit — detailed report (UI.drill: one table, Region → Division → CCC → list) ---------- */
.ui-drill-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 12px; border-bottom: 1px solid var(--mzo-border); scrollbar-width: none; }
.ui-drill-tabs::-webkit-scrollbar { display: none; }
.ui-drill-tab { position: relative; height: 40px; padding: 0 10px; border: 0; background: none; color: var(--mzo-muted); font: 500 13px var(--mzo-font); white-space: nowrap; cursor: pointer; }
.ui-drill-tab:hover { color: var(--mzo-text); }
.ui-drill-tab[aria-selected="true"] { color: var(--mzo-text); }
.ui-drill-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--mzo-accent); }
.ui-drill-tab small { margin-left: 5px; color: var(--mzo-faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.ui-trail { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 5px 10px; border-bottom: 1px solid var(--mzo-border); font-size: 13px; }
.ui-trail nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.ui-trail nav button, .ui-trail nav .c { display: inline-flex; align-items: center; height: 28px; padding: 0 6px; border-radius: 6px; white-space: nowrap; }
.ui-trail nav button { border: 0; background: none; color: var(--mzo-text-2); font: inherit; cursor: pointer; }
.ui-trail nav button:hover { background: var(--mzo-hover); color: var(--mzo-text); }
.ui-trail nav .c { color: var(--mzo-text); font-weight: 600; }
.ui-trail nav .c.lock { color: var(--mzo-muted); font-weight: 400; }
.ui-trail .sep { color: var(--mzo-faint); padding: 0 1px; }
.ui-trail > small { flex: none; padding-right: 6px; color: var(--mzo-faint); font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) { .ui-trail > small { display: none; } }

/* ---------- 18. UI kit — dynamic report head ---------- */
.report-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--mzo-border);
  background: var(--mzo-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.rh-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rh-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mzo-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rh-title .ui-i {
  width: 17px;
  height: 17px;
  color: var(--mzo-accent);
  flex: none;
}
.rh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--mzo-surface-2);
  border: 1px solid var(--mzo-border);
  color: var(--mzo-text-2);
  font-variant-numeric: tabular-nums;
}
.rh-badge b {
  color: var(--mzo-accent);
  font-weight: 700;
}
.rh-filters-bar {
  min-height: 26px;
  display: flex;
  align-items: center;
}
.rh-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 12px;
  width: 100%;
}
.rh-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mzo-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}
.rh-filters-label .ui-i {
  width: 13px;
  height: 13px;
}
.rh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 9px;
  border-radius: 6px;
  background: var(--mzo-hover);
  border: 1px solid var(--mzo-border-strong);
  color: var(--mzo-text);
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  animation: rhChipIn .15s ease-out;
}
.rh-chip strong {
  color: var(--mzo-muted);
  font-weight: 500;
}
.rh-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 0;
  background: none;
  color: var(--mzo-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  margin-left: 1px;
  transition: background-color .12s, color .12s;
}
.rh-chip-x:hover {
  background: var(--mzo-bad);
  color: #fff;
}
.rh-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px dashed var(--mzo-border-strong);
  background: none;
  color: var(--mzo-muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 2px;
  transition: all .12s;
}
.rh-clear-btn .ui-i {
  width: 12px;
  height: 12px;
}
.rh-clear-btn:hover {
  border-color: var(--mzo-bad);
  color: var(--mzo-bad);
  background: rgba(239, 68, 68, 0.08);
}
.rh-all-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mzo-muted);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.rh-scope-pill {
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--mzo-surface-2);
  border: 1px solid var(--mzo-border);
  color: var(--mzo-text-2);
}
@keyframes rhChipIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- 19. Presentation (PPT) Mode & Slide Focus ---------- */

/* Slide Focus mode: hides the left filter column on desktop so KPIs & tables fill the full widescreen slide */
@media (min-width: 981px) {
  html[data-mzo-slide-focus="1"] .ui-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-mzo-slide-focus="1"] .ui-side:not(.open) {
    display: none;
  }
  html[data-mzo-slide-focus="1"] .ui-side.open {
    position: fixed;
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: 280px;
    max-height: none;
    z-index: 850;
    box-shadow: var(--mzo-shadow-pop);
  }
  html[data-mzo-slide-focus="1"] .ui-side-toggle {
    display: inline-flex;
  }
}

/* PPT Deck Background */
html[data-mzo-theme="ppt"] body {
  background:
    radial-gradient(1200px 520px at 0% 0%, rgba(37, 99, 235, 0.14), transparent 62%),
    radial-gradient(1000px 460px at 100% 0%, rgba(13, 148, 136, 0.14), transparent 62%),
    radial-gradient(950px 500px at 50% 100%, rgba(124, 58, 237, 0.10), transparent 62%),
    linear-gradient(180deg, #e8eefb 0%, #eef2fb 48%, #e4ecfa 100%) !important;
}

/* PPT Slide Header Banner (.ui-head & legacy headers) */
html[data-mzo-theme="ppt"] .ui-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(520px 180px at 88% -10%, rgba(56, 189, 248, 0.32), transparent 70%),
    radial-gradient(400px 160px at 18% 120%, rgba(129, 140, 248, 0.28), transparent 70%),
    linear-gradient(120deg, #090d16 0%, #1e1b4b 36%, #1d4ed8 72%, #0d9488 100%) !important;
  color: #ffffff !important;
  padding: 18px 24px 20px;
  border-radius: 16px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  box-shadow: 0 14px 32px -8px rgba(15, 23, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  margin-bottom: 20px;
}
html[data-mzo-theme="ppt"] .ui-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 34%, #34d399 68%, #fbbf24 100%);
}
html[data-mzo-theme="ppt"] .ui-head h1 {
  color: #ffffff !important;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
html[data-mzo-theme="ppt"] .ui-head p {
  color: rgba(226, 232, 240, 0.94) !important;
  font-size: 13.5px;
  font-weight: 500;
}
html[data-mzo-theme="ppt"] .ui-head .ui-date {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(45, 212, 191, 0.24)) !important;
  color: #f0f9ff !important;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.55), 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  font-weight: 700;
  padding: 0 12px;
  height: 24px;
  border-radius: 999px;
}
html[data-mzo-theme="ppt"] .ui-head .ui-btn:not(.primary) {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
html[data-mzo-theme="ppt"] .ui-head .ui-btn:not(.primary):hover {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(255, 255, 255, 0.52) !important;
  color: #ffffff !important;
}
html[data-mzo-theme="ppt"] .ui-head .ui-btn.primary,
html[data-mzo-theme="ppt"] .ui-head .ui-btn.primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%) !important;
  border-color: transparent !important;
  color: #0f172a !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.35) !important;
}
html[data-mzo-theme="ppt"] .ui-head .ui-seg {
  background: rgba(9, 13, 22, 0.48) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  padding: 3px;
}
html[data-mzo-theme="ppt"] .ui-head .ui-seg button {
  color: rgba(241, 245, 249, 0.88) !important;
  font-weight: 600;
}
html[data-mzo-theme="ppt"] .ui-head .ui-seg button:not([aria-pressed="true"]):hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}
html[data-mzo-theme="ppt"] .ui-head .ui-seg button[aria-pressed="true"],
html[data-mzo-theme="ppt"] .ui-head .ui-seg button[aria-pressed="true"]:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 100%) !important;
  color: #090d16 !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.35) !important;
}
html[data-mzo-theme="ppt"] .ui-head .ui-select select,
html[data-mzo-theme="ppt"] .ui-head .ui-input {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #0f172a !important;
  font-weight: 600;
}

/* PPT Jewel-Tone Executive KPI Cards (.ui-stats & .ui-stat) */
html[data-mzo-theme="ppt"] .ui-stats {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 14px !important;
  overflow: visible !important;
  margin-bottom: 20px;
}
html[data-mzo-theme="ppt"] .ui-stat {
  --ppt-accent: #2563eb;
  --ppt-glow: #60a5fa;
  --ppt-ink: #1e40af;
  --ppt-tint: #eff6ff;
  --ppt-border: #93c5fd;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #ffffff 42%, var(--ppt-tint) 100%) !important;
  border: 1px solid var(--ppt-border) !important;
  border-top: 5px solid var(--ppt-accent) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  padding: 16px 18px 17px !important;
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), box-shadow .16s ease, background .16s ease !important;
}
html[data-mzo-theme="ppt"] .ui-stat::before {
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ppt-glow) 0%, transparent 70%);
  opacity: 0.22;
  pointer-events: none;
}
html[data-mzo-theme="ppt"] .ui-stat:nth-child(6n+1) { --ppt-accent: #2563eb; --ppt-glow: #60a5fa; --ppt-ink: #1e40af; --ppt-tint: #dbeafe; --ppt-border: #93c5fd; }
html[data-mzo-theme="ppt"] .ui-stat:nth-child(6n+2) { --ppt-accent: #0d9488; --ppt-glow: #2dd4bf; --ppt-ink: #0f766e; --ppt-tint: #ccfbf1; --ppt-border: #5eead4; }
html[data-mzo-theme="ppt"] .ui-stat:nth-child(6n+3) { --ppt-accent: #7c3aed; --ppt-glow: #a78bfa; --ppt-ink: #5b21b6; --ppt-tint: #ede9fe; --ppt-border: #c4b5fd; }
html[data-mzo-theme="ppt"] .ui-stat:nth-child(6n+4) { --ppt-accent: #d97706; --ppt-glow: #fbbf24; --ppt-ink: #b45309; --ppt-tint: #fef3c7; --ppt-border: #fcd34d; }
html[data-mzo-theme="ppt"] .ui-stat:nth-child(6n+5) { --ppt-accent: #e11d48; --ppt-glow: #fb7185; --ppt-ink: #be123c; --ppt-tint: #ffe4e6; --ppt-border: #fda4af; }
html[data-mzo-theme="ppt"] .ui-stat:nth-child(6n+6) { --ppt-accent: #0284c7; --ppt-glow: #38bdf8; --ppt-ink: #0369a1; --ppt-tint: #e0f2fe; --ppt-border: #7dd3fc; }

html[data-mzo-theme="ppt"] button.ui-stat:not([aria-pressed="true"]):hover {
  transform: translateY(-3px);
  background: linear-gradient(165deg, #ffffff 0%, var(--ppt-tint) 100%) !important;
  box-shadow: 0 16px 30px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--ppt-accent) !important;
}
html[data-mzo-theme="ppt"] .ui-stat .k {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155 !important;
}
html[data-mzo-theme="ppt"] .ui-stat .k::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ppt-accent);
  flex: none;
  box-shadow: 0 0 0 2px var(--ppt-tint);
}
html[data-mzo-theme="ppt"] .ui-stat .k:has(.ui-dot)::before {
  display: none;
}
html[data-mzo-theme="ppt"] .ui-stat .v {
  font-size: 28px;
  font-weight: 800;
  color: var(--ppt-ink) !important;
  letter-spacing: -0.03em;
  margin-top: 8px;
}
html[data-mzo-theme="ppt"] .ui-stat .s {
  font-size: 12px;
  font-weight: 600;
  color: #475569 !important;
  margin-top: 5px;
}
/* Active KPI card transforms into a full vibrant jewel-tone gradient card with crisp white text */
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"],
html[data-mzo-theme="ppt"] button.ui-stat[aria-pressed="true"]:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--ppt-ink) 0%, var(--ppt-accent) 100%) !important;
  border-color: var(--ppt-ink) !important;
  border-top-color: #ffffff !important;
  box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.28), 0 0 0 2px var(--ppt-accent) !important;
}
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"]::after {
  display: none;
}
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"] .k,
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"]:hover .k {
  color: rgba(255, 255, 255, 0.92) !important;
}
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"] .k::before {
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"] .v,
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"]:hover .v {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"] .s,
html[data-mzo-theme="ppt"] .ui-stat[aria-pressed="true"]:hover .s {
  color: rgba(241, 245, 249, 0.90) !important;
}

/* PPT Panels, Report Head, Badges & Filter Chips */
html[data-mzo-theme="ppt"] .ui-panel {
  border-radius: 16px;
  border: 1px solid #93c5fd;
  box-shadow: 0 14px 34px -8px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
}
html[data-mzo-theme="ppt"] .ui-panel-h {
  background: linear-gradient(90deg, #dbeafe 0%, #ede9fe 52%, #ccfbf1 100%);
  border-bottom: 1px solid #93c5fd;
  padding: 12px 18px;
}
html[data-mzo-theme="ppt"] .ui-panel-h h2 {
  font-size: 15.5px;
  font-weight: 800;
  color: #0f172a;
}
html[data-mzo-theme="ppt"] .report-head {
  background: linear-gradient(95deg, #dbeafe 0%, #ede9fe 50%, #ccfbf1 100%);
  border-bottom: 1px solid #93c5fd;
  padding: 16px 20px 14px;
}
html[data-mzo-theme="ppt"] .rh-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}
html[data-mzo-theme="ppt"] .rh-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb 0%, #0d9488 100%);
}
html[data-mzo-theme="ppt"] .rh-badge {
  background: linear-gradient(135deg, #1d4ed8 0%, #0d9488 100%);
  color: #ffffff !important;
  border: 0;
  font-weight: 700;
  padding: 4px 13px;
  box-shadow: 0 3px 10px rgba(29, 78, 216, 0.30);
}
html[data-mzo-theme="ppt"] .rh-badge b {
  color: #fef08a !important;
}
html[data-mzo-theme="ppt"] .rh-chip {
  background: #ffffff;
  border: 1px solid #60a5fa;
  color: #1e3a8a;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.12);
}
html[data-mzo-theme="ppt"] .rh-chip strong {
  color: #1d4ed8;
  font-weight: 800;
}
html[data-mzo-theme="ppt"] .rh-scope-pill {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1e3a8a;
  font-weight: 700;
}
html[data-mzo-theme="ppt"] .report-head .ui-seg {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #93c5fd;
}
html[data-mzo-theme="ppt"] .report-head .ui-seg button:not([aria-pressed="true"]):hover {
  background: #eff6ff;
  color: #1d4ed8;
}
html[data-mzo-theme="ppt"] .report-head .ui-seg button[aria-pressed="true"],
html[data-mzo-theme="ppt"] .report-head .ui-seg button[aria-pressed="true"]:hover {
  background: linear-gradient(135deg, #2563eb 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}
html[data-mzo-theme="ppt"] :is(.rem-hint, .cl-hint) {
  background: linear-gradient(90deg, #eff6ff 0%, #f0fdfa 100%);
  border-left: 4px solid #2563eb;
  border-bottom: 1px solid #bfdbfe;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
}
html[data-mzo-theme="ppt"] :is(.rem-hint, .cl-hint) .ui-strong {
  color: #1d4ed8;
  font-weight: 800;
}

/* PPT Drill Tabs & Office Trail */
html[data-mzo-theme="ppt"] .ui-drill-tabs {
  background: #f1f5fe;
  padding: 8px 16px;
  gap: 6px;
  border-bottom: 1px solid #bfdbfe;
}
html[data-mzo-theme="ppt"] .ui-drill-tab {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-weight: 700;
  color: #334155;
  transition: background-color .14s, color .14s, box-shadow .14s, transform .14s;
}
html[data-mzo-theme="ppt"] .ui-drill-tab:not([aria-selected="true"]):hover {
  background: #dbeafe;
  color: #1e3a8a;
}
html[data-mzo-theme="ppt"] .ui-drill-tab[aria-selected="true"],
html[data-mzo-theme="ppt"] .ui-drill-tab[aria-selected="true"]:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.32);
}
html[data-mzo-theme="ppt"] .ui-drill-tab[aria-selected="true"]::after {
  display: none;
}
html[data-mzo-theme="ppt"] .ui-drill-tab[aria-selected="true"] small,
html[data-mzo-theme="ppt"] .ui-drill-tab[aria-selected="true"]:hover small {
  color: #fef08a !important;
  font-weight: 700;
}
html[data-mzo-theme="ppt"] .ui-trail {
  background: #f8fafc;
  border-bottom: 1px solid #cbd8f1;
  font-weight: 600;
  padding: 6px 14px;
}
html[data-mzo-theme="ppt"] .ui-trail nav .c {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: #1e3a8a;
  padding: 0 10px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #93c5fd;
}

/* PPT Tables, Badges, Deltas, Share Bars & Histograms */
html[data-mzo-theme="ppt"] .ui-table th {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color: #f8fafc !important;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  padding: 12px 14px;
  border-bottom: 3px solid #38bdf8 !important;
}
html[data-mzo-theme="ppt"] .ui-table th[data-sort]:hover,
html[data-mzo-theme="ppt"] .ui-table th[aria-sort] {
  background: #090d16 !important;
  color: #38bdf8 !important;
}
html[data-mzo-theme="ppt"] .ui-table td {
  padding: 11px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid #e2e8f0;
}
html[data-mzo-theme="ppt"] .ui-table tbody tr:nth-child(even) td {
  background: #f4f7fe;
}
html[data-mzo-theme="ppt"] .ui-table tbody tr:hover td {
  background: #dbeafe !important;
}
html[data-mzo-theme="ppt"] .ui-table tbody tr.click:hover td:first-child {
  box-shadow: inset 4px 0 0 #2563eb;
}
html[data-mzo-theme="ppt"] .ui-table tfoot td {
  background: linear-gradient(90deg, #dbeafe 0%, #e0e7ff 52%, #ccfbf1 100%) !important;
  color: #0f172a !important;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 14px;
  border-top: 2px solid #2563eb !important;
}
html[data-mzo-theme="ppt"] .ui-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
html[data-mzo-theme="ppt"] .ui-delta.ok {
  background: #dcfce7;
  color: #15803d;
  box-shadow: inset 0 0 0 1px #86efac;
}
html[data-mzo-theme="ppt"] .ui-delta.bad {
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px #fca5a5;
}
html[data-mzo-theme="ppt"] .ui-delta.flat {
  background: #f1f5f9;
  color: #475569;
}
html[data-mzo-theme="ppt"] .ui-badge {
  font-weight: 700;
  padding: 0 9px;
  height: 22px;
}
html[data-mzo-theme="ppt"] .ui-badge.ok { box-shadow: inset 0 0 0 1px #86efac; }
html[data-mzo-theme="ppt"] .ui-badge.warn { box-shadow: inset 0 0 0 1px #fcd34d; }
html[data-mzo-theme="ppt"] .ui-badge.bad { box-shadow: inset 0 0 0 1px #fca5a5; }
html[data-mzo-theme="ppt"] .ui-badge.info { box-shadow: inset 0 0 0 1px #93c5fd; }
html[data-mzo-theme="ppt"] .ui-bar i {
  height: 9px;
  border-radius: 999px;
  background: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
html[data-mzo-theme="ppt"] .ui-bar i b,
html[data-mzo-theme="ppt"] .ui-hist i b {
  border-radius: 999px;
  background: var(--bar, linear-gradient(90deg, #2563eb 0%, #06b6d4 100%));
}
html[data-mzo-theme="ppt"] .ui-bar span {
  font-weight: 700;
  color: #334155;
}

/* PPT Executive Briefing & Row Detail Drawer */
html[data-mzo-theme="ppt"] .bf-group {
  background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
  color: #1e3a8a !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 18px !important;
  border-bottom: 1px solid #dbeafe;
}
html[data-mzo-theme="ppt"] .bf-row {
  padding: 13px 16px 13px 18px !important;
  transition: background-color .12s;
}
html[data-mzo-theme="ppt"] .bf-row:hover {
  background: #e0f2fe !important;
}
html[data-mzo-theme="ppt"] .bf-row .t {
  font-weight: 700 !important;
  color: #0f172a;
}
html[data-mzo-theme="ppt"] .bf-row .m {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1e40af;
  font-weight: 800 !important;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #93c5fd;
}
html[data-mzo-theme="ppt"] .ui-drawer-h {
  background: linear-gradient(120deg, #090d16 0%, #1e3a8a 55%, #0d9488 100%);
  color: #ffffff;
  border-bottom: 3px solid #38bdf8;
}
html[data-mzo-theme="ppt"] .ui-drawer-h h3 { color: #ffffff; font-weight: 800; }
html[data-mzo-theme="ppt"] .ui-drawer-h p { color: rgba(226, 232, 240, 0.9); }
html[data-mzo-theme="ppt"] .ui-drawer-h .ui-btn.ghost { color: #ffffff; }
html[data-mzo-theme="ppt"] .ui-drawer-h .ui-btn.ghost:hover { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

/* PPT Filter Side Panel (.ui-side) */
html[data-mzo-theme="ppt"] .ui-side {
  border-radius: 16px;
  border: 1px solid #93c5fd;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.10);
}
html[data-mzo-theme="ppt"] .ui-side-h {
  background: linear-gradient(135deg, #090d16 0%, #1e3a8a 60%, #0d9488 100%);
  color: #ffffff;
  border-bottom: 3px solid #38bdf8;
}
html[data-mzo-theme="ppt"] .ui-side-h h2 {
  color: #ffffff;
  font-weight: 800;
}
html[data-mzo-theme="ppt"] .ui-side-h h2 small {
  color: #38bdf8;
  font-weight: 700;
}
html[data-mzo-theme="ppt"] .ui-side-h .ui-btn.ghost {
  color: #e2e8f0;
}
html[data-mzo-theme="ppt"] .ui-side-h .ui-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
html[data-mzo-theme="ppt"] .ui-opt[aria-checked="true"] {
  background: linear-gradient(90deg, #dbeafe 0%, #eff6ff 100%);
  color: #1e3a8a;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #93c5fd;
}
html[data-mzo-theme="ppt"] .ui-opt[aria-checked="true"] i {
  box-shadow: inset 0 0 0 4px #2563eb;
}

/* Legacy pages in PPT mode */
html[data-mzo-theme="ppt"]:not(.ui) :is(.dashboard-header, .header, header.header, .app-header):not([style*="background"]) {
  background: linear-gradient(120deg, #090d16 0%, #1e1b4b 38%, #1d4ed8 72%, #0d9488 100%) !important;
  color: #ffffff !important;
  border-bottom: 3px solid #38bdf8 !important;
}
html[data-mzo-theme="ppt"]:not(.ui) :is(.dashboard-header, .header, header.header, .app-header) :is(h1, h2, .header-title, .subtitle, p):not(.badge) {
  color: #ffffff !important;
}