/* Theme tokens for the standalone Garmin Dashboard: a dark, sporty look. */
:root {
  color-scheme: dark;
  --font-anthropic-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-anthropic-serif: var(--font-display);
  --cds-font-size-caption: 12px;
  --cds-font-size-body: 14px;
  --cds-font-size-heading: 15px;
  --cds-font-size-title: 28px;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 12px; --cds-gap-lg: 18px; --cds-gap-xl: 28px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 16px; --cds-pad-xl: 24px;
  --cds-radius: 8px;
  --cds-dur-slow: 240ms;
  --cds-ease-out: cubic-bezier(.2, .8, .2, 1);

  --color-bg: #0c0e11;
  --side-bg: #090b0d;
  --color-panel: #14171b;
  --panel-hover: #171b20;
  --inset: #0f1215;
  --color-fg: #eef1f4;
  --color-fg-muted: #8a94a0;
  --color-border-line: #20252b;
  --border-hover: #333a43;
  --line-soft: #1b1f24;
  --hover: rgba(255, 255, 255, .04);
  --active: #1f242b;
  --accent: #5ea0ff;
  --accent-2: #36d6c1;
  --color-ok: #3ddc84;
  --color-warn: #ffb547;
  --color-bad: #ff6b6b;
  --cds-chart-grid: #1b1f24;
  --cds-chart-axis: #2a3038;
  --cds-chart-reference: #6c7682;
  --cds-chart-muted: #4b545e;
  --cds-surface-popover: #1b1f25;
  --cds-border: #2c333b;
  --cds-shadow-popover: 0 12px 32px rgba(0, 0, 0, .55);
  --cds-text-secondary: #8a94a0;
  --skeleton: #171b20;
}
html, body { margin: 0; }
body { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
#dash-root *, #dash-root *::before, #dash-root *::after { box-sizing: border-box; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.dash-skeleton:empty { background: var(--skeleton); border-radius: 12px; animation: dash-pulse 1.4s ease-in-out infinite; }
@keyframes dash-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .dash-skeleton:empty { animation: none; } }

.app-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ok) 18%, transparent); }
.app-dot.busy { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); animation: dash-pulse 1s ease-in-out infinite; }
.app-dot.bad { background: var(--color-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-bad) 18%, transparent); }
.app-btn { font: inherit; cursor: pointer; }
.app-btn:disabled { opacity: .55; cursor: default; }
.app-btn:focus-visible, .app-key input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-link { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--color-fg-muted); cursor: pointer; }
.app-link:hover { color: var(--color-fg); text-decoration: underline; }
.app-key-box { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: 16px; padding: 18px; display: grid; gap: 8px; max-width: 42rem; }
.app-key-box h2 { margin: 0; font-size: 16px; }
.app-key-box p { margin: 0; color: var(--color-fg-muted); font-size: 13px; }
.app-key-row { display: flex; gap: 8px; flex-wrap: wrap; }
.app-key input { flex: 1 1 16rem; font: inherit; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--color-border-line); background: var(--inset); color: var(--color-fg); }
.app-err { color: var(--color-bad); font-size: 12px; }
.app-log pre { margin: 0; padding: 12px 14px; background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: 12px; font-size: 11px; max-height: 14rem; overflow: auto; white-space: pre-wrap; color: var(--color-fg-muted); }