/* Токены оформления портала. Имена переменных — те же, что у страницы дашборда (dashboard/index.html писалась под
   артефакт Claude типа Dashboard), поэтому страница переносится без правок. Светлая и тёмная тема — по настройке системы. */
:root {
  color-scheme: light dark;
  --font-anthropic-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: "Source Serif 4", "PT Serif", Georgia, "Times New Roman", serif;
  --cds-font-size-caption: 12.5px;
  --cds-font-size-body: 14px;
  --cds-font-size-heading: 15.5px;
  --cds-font-size-title: 20px;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 16px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 12px;
  --cds-pad-lg: 20px;
  --cds-radius: 8px;
  --cds-dur-slow: .3s;

  --color-bg: #f6f5f1;
  --color-panel: #ffffff;
  --color-fg: #1d1c1a;
  --color-fg-muted: #66625b;
  --color-border-line: #e2ded6;
  --color-bad: #b93a32;
  --color-warn: #a86a12;
  --color-ok: #2c7a4f;
  --cds-chart-muted: #b8b3aa;
  --cds-chart-status-critical: #c8473d;
  --cds-chart-axis: #8b867d;
  --cds-chart-grid: #ebe7e0;
  --cds-chart-reference: #8b867d;
  --cds-text-secondary: var(--color-fg-muted);
  --cds-surface-popover: #ffffff;
  --cds-shadow-popover: 0 6px 20px rgba(20, 18, 15, .14);
  --cds-border: var(--color-border-line);
  --chart-1: #4f72c9; --chart-2: #2f9466; --chart-3: #c08a2c; --chart-4: #b3548a; --chart-5: #6c5ccf; --chart-6: #3f9aa6; --chart-7: #c4623b; --chart-8: #7d8a2e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #191816;
    --color-panel: #22211e;
    --color-fg: #ecebe7;
    --color-fg-muted: #a39e94;
    --color-border-line: #3a3833;
    --color-bad: #ef7b6f;
    --color-warn: #e0a54a;
    --color-ok: #6cc596;
    --cds-chart-muted: #5d5a54;
    --cds-chart-status-critical: #ec7568;
    --cds-chart-axis: #8e897f;
    --cds-chart-grid: #312f2b;
    --cds-chart-reference: #8e897f;
    --cds-surface-popover: #2b2a26;
    --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, .5);
    --chart-1: #7f9de6; --chart-2: #5cc192; --chart-3: #e0b45e; --chart-4: #df85b9; --chart-5: #9c8ff0; --chart-6: #6cc3cf; --chart-7: #ec8b63; --chart-8: #b2bf5a;
  }
}
:root[data-theme="dark"] {
  --color-bg: #191816;
  --color-panel: #22211e;
  --color-fg: #ecebe7;
  --color-fg-muted: #a39e94;
  --color-border-line: #3a3833;
  --color-bad: #ef7b6f;
  --color-warn: #e0a54a;
  --color-ok: #6cc596;
  --cds-chart-muted: #5d5a54;
  --cds-chart-status-critical: #ec7568;
  --cds-chart-axis: #8e897f;
  --cds-chart-grid: #312f2b;
  --cds-chart-reference: #8e897f;
  --cds-surface-popover: #2b2a26;
  --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, .5);
  --chart-1: #7f9de6; --chart-2: #5cc192; --chart-3: #e0b45e; --chart-4: #df85b9; --chart-5: #9c8ff0; --chart-6: #6cc3cf; --chart-7: #ec8b63; --chart-8: #b2bf5a;
}

html { background: var(--color-bg); }
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.4; -webkit-font-smoothing: antialiased; }

/* «Скелет» значения, пока данные грузятся (у артефакта это давала среда дашборда). */
.dash-skeleton { color: transparent !important; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-fg) 6%, transparent) 25%, color-mix(in srgb, var(--color-fg) 12%, transparent) 50%, color-mix(in srgb, var(--color-fg) 6%, transparent) 75%); background-size: 200% 100%; animation: dash-sk 1.4s ease-in-out infinite; }
@keyframes dash-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dash-skeleton { animation: none; } }