/* Theme tokens the page expects (the names the dashboard runtime provides), light then dark. */
:root {
  color-scheme: light;
  --color-bg: #f6f6f3;
  --color-panel: #ffffff;
  --color-fg: #1d1f23;
  --color-fg-muted: #61656d;
  --color-border-line: #e1e1dc;
  --color-ok: #2f7d4a;
  --color-warn: #a35f00;
  --color-bad: #c2362f;
  --series-1: #2b6cb0; --series-2: #d4612a; --series-3: #2f9a7a; --series-4: #8a55c9;
  --series-5: #c43d7a; --series-6: #3b9bd1; --series-7: #b08a1e; --series-8: #6b7280;
  --cds-chart-grid: #ebebe6;
  --cds-chart-axis: #c4c4bd;
  --cds-chart-reference: #8d9097;
  --cds-chart-muted: #b9bbbf;
  --cds-chart-status-critical: var(--color-bad);
  --cds-surface-popover: #ffffff;
  --cds-border: #dcdcd6;
  --cds-shadow-popover: 0 6px 20px rgba(20, 22, 26, .14);
  --cds-text-secondary: #61656d;
  --cds-font-size-caption: 0.78rem;
  --cds-font-size-body: 0.95rem;
  --cds-font-size-heading: 1.06rem;
  --cds-font-size-title: 1.9rem;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 0.35rem; --cds-gap-sm: 0.6rem; --cds-gap-md: 1rem; --cds-gap-lg: 1.5rem; --cds-gap-xl: 2.2rem;
  --cds-pad-xs: 0.3rem; --cds-pad-sm: 0.55rem; --cds-pad-md: 0.85rem; --cds-pad-lg: 1.15rem; --cds-pad-xl: 1.6rem;
  --cds-radius: 8px;
  --cds-dur-slow: 240ms;
  --cds-ease-out: cubic-bezier(.2, .7, .2, 1);
  --font-anthropic-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: #15171b;
    --color-panel: #1d2026;
    --color-fg: #eceef1;
    --color-fg-muted: #9aa0aa;
    --color-border-line: #2e323a;
    --color-ok: #5fcf8a;
    --color-warn: #f0b252;
    --color-bad: #ff7a70;
    --series-1: #6ea8ff; --series-2: #ff9a62; --series-3: #4fd1a5; --series-4: #b48cff;
    --series-5: #ff79b0; --series-6: #62c4ff; --series-7: #e3c25a; --series-8: #a3a9b5;
    --cds-chart-grid: #272b32;
    --cds-chart-axis: #3a3f48;
    --cds-chart-reference: #8a919c;
    --cds-chart-muted: #5b616c;
    --cds-surface-popover: #23272e;
    --cds-border: #353a43;
    --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .5);
    --cds-text-secondary: #9aa0aa;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  font-size: var(--cds-font-size-body);
  line-height: 1.45;
}
#dash-root {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 48px;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
.dash-skeleton { position: relative; color: transparent !important; }
.dash-skeleton::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--cds-radius);
  background: linear-gradient(90deg, var(--color-border-line), var(--cds-chart-grid), var(--color-border-line));
  background-size: 200% 100%; opacity: .6;
}
@media (prefers-reduced-motion: no-preference) {
  .dash-skeleton::after { animation: shim-pulse 1.4s ease-in-out infinite; }
  @keyframes shim-pulse { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}
b.dash-skeleton::after, span.dash-skeleton::after { inset: 15% 0; }
