/* Общий стиль виртуальной лаборатории ИТЛН: цвета светлой и тёмной тем, фон с лёгкой текстурой, переключатель темы.
   Подключается всеми страницами до их собственных стилей. Тема задаётся атрибутом data-theme на <html>
   ('light' | 'dark'); без атрибута — по настройке системы. Скрипт theme.js запоминает выбор. */

:root {
  /* светлая тема */
  --t-bg: #f3f5f8;
  --t-bg-2: #e9edf3;
  --t-surface: #ffffff;
  --t-surface-2: #f7f9fc;
  --t-raised: rgba(255, 255, 255, .86);
  --t-ink: #172030;
  --t-ink-2: #344055;
  --t-muted: #5f6a7d;
  --t-dim: #8a95a6;
  --t-line: #dfe4ec;
  --t-line-2: #cfd6e1;
  --t-accent: #1f6fd6;
  --t-accent-ink: #ffffff;
  --t-accent-soft: #e6f0fd;
  --t-accent-2: #0f9a84;
  --t-ok: #15803d; --t-ok-soft: #e7f6ec;
  --t-bad: #c62828; --t-bad-soft: #fdecec;
  --t-warn: #b26a00; --t-warn-soft: #fff4e2;
  --t-code: #eef1f6;
  --t-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 22px rgba(16, 24, 40, .06);
  --t-dot: rgba(23, 32, 48, .07);
  --t-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .62 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --t-glow: 0 0 0 rgba(0, 0, 0, 0);
  --t-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
/* тёмная тема: по выбору пользователя или по системе, если выбора нет */
:root[data-theme="dark"] {
  --t-bg: #070b12; --t-bg-2: #0b111b; --t-surface: #0f1724; --t-surface-2: #131d2c; --t-raised: rgba(14, 22, 36, .84);
  --t-ink: #e8eef7; --t-ink-2: #c8d3e2; --t-muted: #9aa9bd; --t-dim: #6c7b90; --t-line: rgba(140, 180, 240, .16); --t-line-2: rgba(140, 180, 240, .26);
  --t-accent: #4cc2ff; --t-accent-ink: #04121e; --t-accent-soft: rgba(76, 194, 255, .14); --t-accent-2: #7cf0c4;
  --t-ok: #5be39b; --t-ok-soft: rgba(91, 227, 155, .14); --t-bad: #ff6b78; --t-bad-soft: rgba(255, 107, 120, .14); --t-warn: #ffb347; --t-warn-soft: rgba(255, 179, 71, .14);
  --t-code: rgba(255, 255, 255, .08);
  --t-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --t-dot: rgba(160, 200, 255, .07); --t-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .62 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --t-glow: 0 0 30px rgba(76, 194, 255, .25);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-bg: #070b12; --t-bg-2: #0b111b; --t-surface: #0f1724; --t-surface-2: #131d2c; --t-raised: rgba(14, 22, 36, .84);
    --t-ink: #e8eef7; --t-ink-2: #c8d3e2; --t-muted: #9aa9bd; --t-dim: #6c7b90; --t-line: rgba(140, 180, 240, .16); --t-line-2: rgba(140, 180, 240, .26);
    --t-accent: #4cc2ff; --t-accent-ink: #04121e; --t-accent-soft: rgba(76, 194, 255, .14); --t-accent-2: #7cf0c4;
    --t-ok: #5be39b; --t-ok-soft: rgba(91, 227, 155, .14); --t-bad: #ff6b78; --t-bad-soft: rgba(255, 107, 120, .14); --t-warn: #ffb347; --t-warn-soft: rgba(255, 179, 71, .14);
    --t-code: rgba(255, 255, 255, .08);
    --t-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    --t-dot: rgba(160, 200, 255, .07); --t-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .62 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --t-glow: 0 0 30px rgba(76, 194, 255, .25);
    color-scheme: dark;
  }
}

/* Фон с текстурой: мелкая сетка точек (шаг 22 px) и едва заметное зерно (слой шума SVG, сила своя в каждой теме).
   Класс t-bg — для крупных областей, t-page — для body. Расположение элементов страницы не меняется. */
.t-bg, body.t-page {
  background-color: var(--t-bg);
  background-image: radial-gradient(var(--t-dot) 1px, transparent 1.3px), var(--t-noise), linear-gradient(180deg, var(--t-bg) 0%, var(--t-bg-2) 100%);
  background-size: 22px 22px, 160px 160px, 100% 100%;
  background-attachment: fixed;
}
body.t-page { color: var(--t-ink); font-family: var(--t-font); }

/* Переключатель темы */
.t-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--t-line-2); background: var(--t-raised); color: var(--t-ink); font: 500 13px/1 var(--t-font); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .15s, background .15s; }
.t-toggle:hover { border-color: var(--t-accent); }
.t-toggle .t-ic { font-size: 15px; line-height: 1; }
.t-toggle.t-float { position: fixed; z-index: 90; right: 14px; bottom: 14px; box-shadow: var(--t-shadow); }
@media print { .t-toggle { display: none !important; } }