/* Theme tokens the dashboard pages use (named as in the Claude dashboard), light first, dark under the media query. */
:root {
  --color-bg: #fbfbfa;
  --color-panel: #ffffff;
  --color-fg: #1d2127;
  --color-fg-muted: #5f6873;
  --color-border-line: #e2e4e8;
  --color-ok: #1f7a4d;
  --color-warn: #a35c00;
  --color-bad: #c0362c;
  --series-1: #2f6fd6;
  --series-2: #8a5bd6;
  --series-3: #0f8a8a;
  --series-4: #c2410c;
  --series-5: #4d7c0f;
  --series-6: #be185d;
  --series-7: #64748b;
  --series-8: #a16207;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --cds-font-size-caption: 12.5px;
  --cds-font-size-body: 14px;
  --cds-font-size-heading: 18px;
  --cds-font-size-title: 26px;
  --cds-font-weight-medium: 500;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 14px; --cds-gap-lg: 22px; --cds-gap-xl: 32px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 18px; --cds-pad-xl: 26px;
  --cds-radius: 8px;
  --cds-border: var(--color-border-line);
  --cds-surface-popover: var(--color-panel);
  --cds-shadow-popover: 0 6px 24px rgba(15, 20, 30, .12);
  --cds-text-secondary: var(--color-fg-muted);
  --cds-chart-muted: #c3c8cf;
  --cds-chart-grid: #eceef1;
  --cds-chart-axis: #b9bec6;
  --cds-chart-reference: #8b939d;
  --cds-chart-status-critical: var(--color-bad);
  --cds-dur-slow: 320ms;
  --cds-ease-out: cubic-bezier(.2, .7, .2, 1);
  --dash-gutter: clamp(16px, 3vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121418;
    --color-panel: #1a1d22;
    --color-fg: #e7e9ec;
    --color-fg-muted: #9aa3ad;
    --color-border-line: #2c3138;
    --color-ok: #4cc38a;
    --color-warn: #f0a742;
    --color-bad: #f2766b;
    --series-1: #6ea2ff;
    --series-2: #b292ff;
    --series-3: #4fc7c7;
    --series-4: #ff9a62;
    --series-5: #9bd25a;
    --series-6: #f27bb3;
    --series-7: #9aa8ba;
    --series-8: #e0b44f;
    --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .5);
    --cds-chart-muted: #4a515a;
    --cds-chart-grid: #262a30;
    --cds-chart-axis: #3a4048;
    --cds-chart-reference: #7d8692;
    color-scheme: dark;
  }
}
html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: 14px; }
[hidden] { display: none !important; }
img { max-width: 100%; }
.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--color-border-line); background: var(--color-panel); font-size: var(--cds-font-size-caption); }
.site-bar b { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 16px; }
.site-bar nav { display: flex; gap: 14px; align-items: center; color: var(--color-fg-muted); }
.site-bar a, .site-bar button { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.site-bar a:focus-visible, .site-bar button:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
#dash-root { padding: 18px max(var(--dash-gutter), env(safe-area-inset-right, 0px)) 40px max(var(--dash-gutter), env(safe-area-inset-left, 0px)); min-width: 0; }
.dash-skeleton { }