/* โทเค็นที่หน้า Dashboard ได้จากรันไทม์ของ Claude (Artifact) · ใช้บนเว็บนี้แทน · สีชุดข้อมูลตรวจตาบอดสีแล้วทั้งโหมดสว่างและมืด */
:root {
  color-scheme: light;
  --font-anthropic-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Sukhumvit Set", Thonburi, "Helvetica Neue", "Noto Sans Thai", "Segoe UI", "Leelawadee UI", system-ui, sans-serif;
  --font-anthropic-serif: var(--font-anthropic-sans);

  --cds-font-size-caption: 0.875rem;
  --cds-font-size-body: 1rem;
  --cds-font-size-heading: 1.125rem;
  --cds-font-size-title: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --cds-font-weight-medium: 600;

  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 16px;
  --cds-gap-lg: 24px;
  --cds-gap-xl: 32px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 12px;
  --cds-pad-lg: 16px;
  --cds-pad-xl: 24px;
  --cds-radius: 10px;
  --cds-dur-slow: 400ms;
  --cds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --color-bg: #f5f5f7;
  --color-panel: #fcfcfb;
  --color-fg: #0b0b0b;
  --color-fg-muted: #5c5a55;
  --color-border-line: #e1e0d9;
  --color-ok: #006300;
  --color-warn: #8a5600;
  --color-bad: #b3261e;

  --cds-text-secondary: #52514e;
  --cds-border: rgba(11, 11, 11, 0.12);
  --cds-surface-popover: #ffffff;
  --cds-shadow-popover: 0 8px 24px rgba(11, 11, 11, 0.12);
  --cds-chart-muted: #898781;
  --cds-chart-grid: #e1e0d9;
  --cds-chart-axis: #c3c2b7;
  --cds-chart-reference: #6b6964;

  --cds-chart-categorical-1: #2a78d6;
  --cds-chart-categorical-2: #eb6834;
  --cds-chart-categorical-3: #1baf7a;
  --cds-chart-categorical-4: #eda100;
  --cds-chart-categorical-5: #e87ba4;
  --cds-chart-categorical-6: #008300;
  --cds-chart-categorical-7: #6250d6;
  --cds-chart-categorical-8: #e34948;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { /* data-theme=light = บังคับโหมดสว่าง (ภาพ PNG ที่ส่งออก) */
    color-scheme: dark;
    --color-bg: #161618;
    --color-panel: #1a1a19;
    --color-fg: #f0efec;
    --color-fg-muted: #b4b2a9;
    --color-border-line: #2f2f2c;
    --color-ok: #2fb52f;
    --color-warn: #fab219;
    --color-bad: #f07070;

    --cds-text-secondary: #c3c2b7;
    --cds-border: rgba(255, 255, 255, 0.12);
    --cds-surface-popover: #232321;
    --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5);
    --cds-chart-muted: #898781;
    --cds-chart-grid: #2c2c2a;
    --cds-chart-axis: #383835;
    --cds-chart-reference: #a3a199;

    --cds-chart-categorical-1: #3987e5;
    --cds-chart-categorical-2: #d95926;
    --cds-chart-categorical-3: #199e70;
    --cds-chart-categorical-4: #c98500;
    --cds-chart-categorical-5: #d55181;
    --cds-chart-categorical-6: #008300;
    --cds-chart-categorical-7: #9085e9;
    --cds-chart-categorical-8: #e66767;
  }
}

/* โครงหน้าแทนกรอบของ dashboard เดิม */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  font-size: var(--cds-font-size-body);
  -webkit-text-size-adjust: 100%;
}
#dash-root {
  --dash-gutter: clamp(16px, 3vw + 4px, 40px);
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--dash-gutter);
}
:where(#dash-root) :where(button, select, input) { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.dash-skeleton {
  display: inline-block;
  min-width: 8em;
  min-height: 1em;
  border-radius: 4px;
  color: transparent;
  background: color-mix(in srgb, var(--color-fg) 8%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .dash-skeleton { animation: site-pulse 1.2s var(--cds-ease-out) infinite alternate; }
}
@keyframes site-pulse { from { opacity: 0.55; } to { opacity: 1; } }