/* Оболочка программы: сброс стилей браузера и общие переменные (цвета, отступы, шрифты),
   которыми пользуются стили страницы программы (app/index.html). Светлая и тёмная тема. */
*, ::before, ::after { box-sizing: border-box; border: 0 solid var(--color-border-line); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: var(--font-anthropic-sans); }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, hr, pre, ul, ol { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
hr { height: 0; border-top-width: 1px; color: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
table { border-collapse: collapse; border-color: inherit; text-indent: 0; }
th { font-weight: 700; }
button, input, optgroup, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; line-height: inherit; letter-spacing: inherit; }
button, select { text-transform: none; }
button, input:where([type=button], [type=reset], [type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none; }
button, [role=button] { cursor: pointer; }
:disabled { cursor: default; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--color-fg-muted); }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden=until-found])) { display: none; }
dialog { padding: 0; color: var(--color-fg); }

:root {
  --font-anthropic-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: "PT Serif", ui-serif, Georgia, "Times New Roman", serif;
  --cds-radius: .5rem;
  --cds-gap-xs: .5rem; --cds-gap-sm: .75rem; --cds-gap-md: 1rem; --cds-gap-lg: 1.75rem;
  --cds-pad-xs: .375rem; --cds-pad-sm: .5rem; --cds-pad-md: .75rem; --cds-pad-lg: 1rem; --cds-pad-xl: 1.5rem;
  --cds-font-size-caption: .75rem; --cds-font-size-body: .875rem; --cds-font-size-heading: .9375rem; --cds-font-size-title: 1.375rem;
  --cds-font-weight-medium: 500;
  --cds-dur-slow: .45s;
  --color-fg: #0b0b0b; --color-fg-secondary: #52514e; --color-fg-muted: #898781;
  --color-bg: #f9f9f7; --color-panel: #fff; --color-border-line: hsl(from #0b0b0b h s l / 10%);
  --color-ok: #006300; --color-warn: #734500; --color-bad: #8e2626;
  --cds-border: var(--color-border-line); --cds-text-secondary: var(--color-fg-secondary);
  --cds-chart-grid: hsl(from #0b0b0b h s l / 10%); --cds-chart-axis: #c3c2b7; --cds-chart-muted: #c3c2b7;
  --cds-surface-popover: #fff; --cds-shadow-popover: 0 8px 24px #0000001f, 0 2px 6px #00000014;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode=light]) {
    --color-fg: #f0efec; --color-fg-secondary: #c3c2b7; --color-fg-muted: #898781;
    --color-bg: #0b0b0b; --color-panel: #1a1a19; --color-border-line: hsl(from #fff h s l / 10%);
    --color-ok: #0ca30c; --color-warn: #db9300; --color-bad: #ec7e7e;
    --cds-chart-grid: hsl(from #fff h s l / 10%); --cds-chart-axis: #383835; --cds-chart-muted: #5f5e5a;
    --cds-surface-popover: #20201f; --cds-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
    color-scheme: dark;
  }
}
:root[data-mode=dark] {
  --color-fg: #f0efec; --color-fg-secondary: #c3c2b7; --color-fg-muted: #898781;
  --color-bg: #0b0b0b; --color-panel: #1a1a19; --color-border-line: hsl(from #fff h s l / 10%);
  --color-ok: #0ca30c; --color-warn: #db9300; --color-bad: #ec7e7e;
  --cds-chart-grid: hsl(from #fff h s l / 10%); --cds-chart-axis: #383835; --cds-chart-muted: #5f5e5a;
  --cds-surface-popover: #20201f; --cds-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
  color-scheme: dark;
}

#dash-root { color: var(--color-fg); font-size: 14px; line-height: 1.45; padding: clamp(var(--cds-pad-md), 2%, var(--cds-pad-xl)); }

/* верхняя полоса оболочки: название, пользователь, выход */
.osn-top { display: flex; align-items: center; gap: 12px; padding: 6px clamp(var(--cds-pad-md), 2%, var(--cds-pad-xl)); font-size: 13px; color: var(--color-fg-muted); border-bottom: 1px solid var(--color-border-line); }
.osn-top b { color: var(--color-fg); font-weight: 600; }
.osn-top .sp { flex: 1; }
.osn-top button { text-decoration: underline; color: var(--color-fg-muted); }
.osn-load { padding: 40px; color: var(--color-fg-muted); }