/* Дизайн-токены клиента. Подход как в DEMETRA frontend: всё, что задаёт
   вид, — переменная здесь; примитивы в src/ui/ читают только токены,
   view и компоненты стилей не пишут вовсе. Палитра своя, игровая:
   тёмно-синий стол, циан для действия, золото для монет, яркие
   градиенты для промо.

   Семантические цвета — схема Tier 2: --{sem} (основной), --{sem}-bg
   (тонированная подложка), --on-{sem} (текст на заливке --{sem}),
   у primary и danger ещё --{sem}-hover. */
:root {
  color-scheme: dark;

  /* ==================== Поверхности ==================== */
  --bg-panel: #0a0f1c; /* фон страницы */
  --bg-card: #111a2e; /* карточки, модалки */
  --bg-card-2: #16213a; /* вложенные плитки внутри карточек */
  --bg-soft: #1d2a47; /* hover, поле ввода */
  --bg-overlay: rgba(4, 7, 14, 0.72); /* затемнение под модалкой */
  /* Поле ввода как в макете modal.png: насыщенный тёмно-синий фон чуть светлее
     модалки, синяя рамка, светлые значки. */
  --field-bg: #0a1d3f;
  --field-border: #24406e;
  --field-border-hover: #33578f;
  --field-placeholder: #8fa6c8;
  --field-icon: #c3d0e6;
  --field-label: #f2f5ff;
  /* Выбранный сегмент (tabs.png): тёмная бирюза, циановая кромка, светлый текст. */
  --seg-on-fill: linear-gradient(180deg, #087a9c 0%, #035a78 100%);
  --seg-on-border: #18b4d6;
  --seg-on-glow: rgba(24, 180, 214, 0.28);
  --seg-on-text: #b2eefc;
  --sidebar-bg: #0d1426;
  /* Выбранный пункт меню: зелёная плашка, гаснущая вправо, как в макете. */
  --nav-on-bg: linear-gradient(90deg, rgba(46, 224, 127, 0.24) 0%, rgba(46, 224, 127, 0.08) 55%, rgba(46, 224, 127, 0.02) 100%);
  --nav-on-text: #7cf0ad;

  /* ==================== Семантика ==================== */
  --primary: #3cc4ff;
  --primary-hover: #1fb0f0;
  --primary-bg: rgba(60, 196, 255, 0.14);
  --on-primary: #03121d;

  --success: #2ee07f;
  --success-bg: rgba(46, 224, 127, 0.14);
  --on-success: #032313;

  --warning: #ff9f1c;
  --warning-bg: rgba(255, 159, 28, 0.14);
  --on-warning: #2a1600;

  --danger: #ff6b6b;
  --danger-hover: #ff4d4d;
  --danger-bg: rgba(255, 107, 107, 0.14);
  --on-danger: #2b0606;

  --info: #8fd3ff;
  --info-bg: rgba(143, 211, 255, 0.14);
  --on-info: #04121d;

  /* Монеты: свой цвет, не semantic — золото читается как «деньги игры»
     и не путается с warning. */
  --coin: #ffc83d;
  --coin-bg: rgba(255, 200, 61, 0.14);
  --on-coin: #3a2500;

  /* Белый текст на любой яркой заливке (промо-градиенты). */
  --on-coloured: #ffffff;

  /* ==================== Заливки кнопок ====================
     «Сочная» кнопка: вертикальный градиент (светлее сверху), белый текст,
     светлая кромка сверху. --{sem}-fill — заливка, --{sem}-glow — мягкая
     цветная тень под кнопкой. */
  --primary-fill: linear-gradient(180deg, #5ad4ff 0%, #22a6f2 55%, #1590e0 100%);
  --primary-glow: rgba(34, 166, 242, 0.55);
  --success-fill: linear-gradient(180deg, #4fe68f 0%, #1fc266 55%, #15a855 100%);
  --success-glow: rgba(31, 194, 102, 0.5);
  --warning-fill: linear-gradient(180deg, #ffd85c 0%, #ffbd2e 55%, #f5a20f 100%);
  --warning-glow: rgba(255, 189, 46, 0.5);
  --danger-fill: linear-gradient(180deg, #ff8585 0%, #f05252 55%, #dc3b3b 100%);
  --danger-glow: rgba(240, 82, 82, 0.5);
  --default-fill: linear-gradient(180deg, #34426a 0%, #263354 55%, #1f2a47 100%);
  --default-glow: rgba(0, 0, 0, 0.45);
  /* Текст на заливке: белый с тенью, читается и на жёлтом. */
  --on-fill: #ffffff;
  --on-fill-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

  /* ==================== Градиенты промо и плиток ==================== */
  --grad-hero: linear-gradient(125deg, #1b3a94 0%, #3b22a0 52%, #8a2be2 100%);
  /* Тона значков и карточек лобби: приглушённая подложка + светлый знак.
     Не заливка — акцент один (--primary), тона только различают пункты. */
  --tone-blue-bg: #153a60;
  --tone-blue: #73d0ff;
  --tone-violet-bg: #2e2a4b;
  --tone-violet: #c2b7ff;
  --tone-mint-bg: #24433e;
  --tone-mint: #80dfc0;
  --tone-gold-bg: #3c3530;
  --tone-gold: #edc98c;
  /* Главный блок лобби: отсвет справа, где доска. */
  --grad-lobby-hero: radial-gradient(circle at 83% 30%, #24517d 0%, transparent 43%), linear-gradient(117deg, #172641, #102139 60%, #112038);
  --grad-tone-gold: linear-gradient(120deg, #1e2b40, #17233b);
  --grad-tone-mint: linear-gradient(120deg, #123237, #102632);
  --grad-tone-blue: linear-gradient(145deg, #1b2940, #112137);

  /* Спокойная поверхность для главного блока лобби: карточка с отсветом
     основного цвета — игра, а не витрина. */
  --grad-surface:
    radial-gradient(circle at 85% 20%, rgba(60, 196, 255, 0.16), transparent 55%),
    linear-gradient(160deg, #16223d 0%, #0f1729 100%);
  --grad-blue: linear-gradient(140deg, #2f6bff 0%, #22c8ee 100%);
  --grad-green: linear-gradient(140deg, #19c46b 0%, #0a8a72 100%);
  --grad-orange: linear-gradient(140deg, #ffa425 0%, #ff4f3a 100%);
  --grad-violet: linear-gradient(140deg, #7c4dff 0%, #e042f5 100%);
  --grad-gold: linear-gradient(140deg, #ffd25e 0%, #f08a24 100%);
  --grad-teal: linear-gradient(140deg, #13b8a6 0%, #2563eb 100%);

  /* ==================== Текст ==================== */
  --text: #f2f5ff;
  --text-dim: #b4bfdb;
  --text-faint: #7f8bab;

  /* ==================== Рамки ==================== */
  --border: rgba(140, 170, 255, 0.1);
  --border-strong: rgba(140, 170, 255, 0.22);
  --scrollbar-thumb: rgba(140, 170, 255, 0.16);

  /* ===== Отступы =====
     Та же лестница, что в DEMETRA: 1..8 — шаги по 2 px от 4 до 18,
     дальше смысловые lg/xl/2xl для крупных блоков. Других отступов нет. */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ===== Скругления =====
     sm — чипы, поля; md — кнопки, плитки; lg — карточки, модалки;
     xl — промо-баннеры и плитки игр. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ===== Высоты контролов =====
     Одна высота на size-шаг для Button, IconButton, полей и сегментов.
     md = 44 px — палец на телефоне. */
  --control-h-sm: 34px;
  --control-h-md: 44px;
  --control-h-lg: 54px;

  /* ===== Шрифт =====
     Атомарная шкала для примитивов (контролы, бейджи). Содержимое view
     размечается ролями .type-* (base.css), не этими токенами. */
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xxs: 10px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-glyph-xs: 12px;
  --text-glyph-sm: 14px;
  --text-glyph: 16px;
  --text-glyph-lg: 20px;
  --text-glyph-xl: 28px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ===== Тени ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --glow-primary: 0 8px 28px rgba(60, 196, 255, 0.35);
  --glow-coin: 0 8px 28px rgba(255, 200, 61, 0.3);

  /* ===== Рама приложения =====
     --gutter — поле страницы слева и справа; ленты «на вылет» (ScrollRow)
     выходят ровно на него и не шире, иначе телефон уменьшает масштаб. */
  --gutter: var(--space-lg);
  --chrome-header-h: 64px;
  --sidebar-w: 240px;
  --rail-w: 300px;
  --content-max-w: 1320px;
  --bottom-nav-h: 64px;

  /* ===== Брейкпоинты (для matchMedia; в @media — те же числа) ===== */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ===== Безопасные зоны (вырез, полоска «домой») ===== */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ===== Движение ===== */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.12s;
  --dur: 0.2s;
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--space-7);
  }
}

/* Статичные страницы: SEO (seo/layout.mjs), правила и политика. Вид — как у
   игры: при сборке scripts/seo.mjs ставит перед этим файлом токены
   src/styles/tokens.css (один источник цветов, отступов и радиусов) и
   кладёт рядом шрифт Rubik. Без сборки (vite dev) — запасные значения. */

@font-face {
  font-family: 'Rubik';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rubik-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rubik-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/rubik-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/rubik-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/rubik-cyrillic-800.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/rubik-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Турецкие и азербайджанские буквы (ş, ğ, İ, ə). Греческого у Rubik нет —
   там системный шрифт. */
@font-face {
  font-family: 'Rubik';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rubik-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/rubik-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/rubik-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Арабский и иврит (страницы ar, he). */
@font-face {
  font-family: 'Rubik';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rubik-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/rubik-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/rubik-arabic-800.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rubik-hebrew-400.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/rubik-hebrew-600.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Rubik';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/rubik-hebrew-800.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  color-scheme: dark;
  /* Ширина колонки текста: 65–75 знаков в строке. */
  --read-w: 760px;
  --page-w: 1120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-panel, #0a0f1c);
  color: var(--text, #f2f5ff);
  font: 16px/1.65 var(--font, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary, #3cc4ff);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--primary-hover, #1fb0f0);
}

main {
  max-width: calc(var(--read-w) + 2 * var(--space-7, 16px));
  margin: 0 auto;
  padding: var(--space-lg, 24px) var(--space-7, 16px) var(--space-2xl, 48px);
}

h1 {
  margin: 0 0 var(--space-5, 12px);
  font-size: 40px;
  line-height: 1.12;
  font-weight: var(--weight-black, 800);
  letter-spacing: -0.01em;
}
h2 {
  margin: var(--space-2xl, 48px) 0 var(--space-5, 12px);
  font-size: 26px;
  line-height: 1.25;
  font-weight: var(--weight-black, 800);
}
h3 {
  margin: var(--space-lg, 24px) 0 var(--space-3, 8px);
  font-size: 19px;
  line-height: 1.3;
  font-weight: var(--weight-semibold, 600);
}
p {
  margin: 0 0 var(--space-6, 14px);
}
b,
strong {
  font-weight: var(--weight-semibold, 600);
}
ul,
ol {
  margin: 0 0 var(--space-6, 14px);
  padding-inline-start: var(--space-lg, 24px);
}
li {
  margin: var(--space-2, 6px) 0;
}
li::marker {
  color: var(--primary, #3cc4ff);
}

.muted {
  color: var(--text-faint, #7f8bab);
  font-size: var(--text-md, 14px);
}
.todo {
  background: var(--warning-bg, rgba(255, 159, 28, 0.14));
  color: var(--warning, #ff9f1c);
  border-radius: var(--radius-sm, 8px);
  padding: 2px var(--space-2, 6px);
}

/* ---------- Шапка: как у игры — знак, имя, слоган, «Играть» ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--sidebar-bg, #0d1426) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, rgba(140, 170, 255, 0.1));
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5, 12px);
  max-width: var(--page-w);
  height: var(--chrome-header-h, 64px);
  margin: 0 auto;
  padding: 0 var(--space-7, 16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-4, 10px);
  color: var(--text, #f2f5ff);
  text-decoration: none;
}
.brand img {
  width: 38px;
  height: 38px;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-size: var(--text-xl, 18px);
  font-weight: var(--weight-black, 800);
  letter-spacing: 0.14em;
}
.brand-tag {
  margin-top: 3px;
  color: var(--text-faint, #7f8bab);
  font-size: var(--text-xxs, 10px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand:hover {
  color: var(--text, #f2f5ff);
}

/* ---------- Кнопка: «сочная» основная, как Button color=primary ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 8px);
  height: var(--control-h-sm, 34px);
  padding: 0 var(--space-7, 16px);
  border-radius: var(--radius-md, 12px);
  background: var(--primary-fill, #22a6f2);
  color: var(--on-fill, #fff);
  text-shadow: var(--on-fill-shadow, none);
  font-size: var(--text-md, 14px);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px var(--primary-glow, rgba(34, 166, 242, 0.55));
}
.btn:hover {
  color: var(--on-fill, #fff);
  filter: brightness(1.06);
}
.btn::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.38em 0 0.38em 0.62em;
  border-color: transparent transparent transparent currentColor;
}
.btn.big {
  height: var(--control-h-lg, 54px);
  padding: 0 var(--space-xl, 32px);
  font-size: var(--text-xl, 18px);
}
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 8px) var(--space-7, 16px);
  margin: var(--space-lg, 24px) 0;
}
.cta .muted {
  font-size: var(--text-sm, 13px);
}

/* ---------- Первый экран: карточка с отсветом, как герой лобби ---------- */
.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-xl, 32px);
  padding: var(--space-xl, 32px);
  border: 1px solid var(--border-strong, rgba(140, 170, 255, 0.22));
  border-radius: var(--radius-xl, 24px);
  background: var(--grad-lobby-hero, #16223d);
  box-shadow: var(--shadow-md, none);
}
.hero .cta {
  margin-bottom: 0;
}
.crumbs {
  margin-bottom: var(--space-5, 12px);
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.04em;
}
.crumbs a {
  color: var(--text-dim, #b4bfdb);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--text, #f2f5ff);
}
.lead {
  margin: 0;
  max-width: 640px;
  color: var(--text-dim, #b4bfdb);
  font-size: var(--text-xl, 18px);
}

/* ---------- Доска, таблицы, словарь — карточками ---------- */
.board {
  margin: var(--space-lg, 24px) 0;
  padding: var(--space-5, 12px);
  border: 1px solid var(--border, rgba(140, 170, 255, 0.1));
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-card, #111a2e);
}
.board svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
}
.board figcaption {
  margin: var(--space-4, 10px) var(--space-1, 4px) 0;
  color: var(--text-dim, #b4bfdb);
  font-size: var(--text-md, 14px);
}
.table {
  overflow-x: auto;
  margin: var(--space-6, 14px) 0 var(--space-lg, 24px);
  border: 1px solid var(--border, rgba(140, 170, 255, 0.1));
  border-radius: var(--radius-lg, 18px);
  background: var(--bg-card, #111a2e);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th,
td {
  padding: var(--space-4, 10px) var(--space-6, 14px);
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--border, rgba(140, 170, 255, 0.1));
}
th {
  background: var(--bg-card-2, #16213a);
  color: var(--text-dim, #b4bfdb);
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
tr:last-child td {
  border-bottom: 0;
}
dl {
  margin: 0 0 var(--space-6, 14px);
}
dt {
  margin-top: var(--space-7, 16px);
  font-weight: var(--weight-semibold, 600);
}
dd {
  margin: 2px 0 0;
  color: var(--text-dim, #b4bfdb);
}

/* ---------- Частые вопросы ---------- */
.faq details {
  margin: var(--space-3, 8px) 0;
  border: 1px solid var(--border, rgba(140, 170, 255, 0.1));
  border-radius: var(--radius-md, 12px);
  background: var(--bg-card, #111a2e);
}
.faq details[open] {
  border-color: var(--border-strong, rgba(140, 170, 255, 0.22));
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5, 12px);
  padding: var(--space-6, 14px) var(--space-8, 18px);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  color: var(--primary, #3cc4ff);
  font-size: 20px;
  line-height: 1.2;
}
.faq details[open] summary::after {
  content: '−';
}
.faq details p {
  margin: 0;
  padding: 0 var(--space-8, 18px) var(--space-6, 14px);
  color: var(--text-dim, #b4bfdb);
}

/* ---------- Читайте также: карточки-ссылки ---------- */
/* Главная языка: те же карточки, с описанием страницы. */
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3, 8px);
  margin: 0 0 var(--space-8, 18px);
  padding: 0;
  list-style: none;
}
.hub li {
  margin: 0;
}
.hub a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 6px);
  height: 100%;
  padding: var(--space-6, 14px) var(--space-8, 18px);
  border: 1px solid var(--border, rgba(140, 170, 255, 0.1));
  border-radius: var(--radius-md, 12px);
  background: var(--bg-card, #111a2e);
  text-decoration: none;
}
.hub a:hover {
  border-color: var(--border-strong, rgba(140, 170, 255, 0.22));
}
.hub span {
  color: var(--text-dim, #b4bfdb);
  font-size: var(--text-sm, 14px);
}
.related ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3, 8px);
  margin: 0 0 var(--space-6, 14px);
  padding: 0;
  list-style: none;
}
.related li {
  margin: 0;
}
.related a {
  display: block;
  height: 100%;
  padding: var(--space-6, 14px) var(--space-8, 18px);
  border: 1px solid var(--border, rgba(140, 170, 255, 0.1));
  border-radius: var(--radius-md, 12px);
  background: var(--bg-card, #111a2e);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}
.related a:hover {
  border-color: var(--border-strong, rgba(140, 170, 255, 0.22));
}

/* ---------- Подвал: все разделы языка сеткой ---------- */
footer {
  border-top: 1px solid var(--border, rgba(140, 170, 255, 0.1));
  background: var(--sidebar-bg, #0d1426);
}
.foot-in {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: var(--space-xl, 32px) var(--space-7, 16px) var(--space-2xl, 48px);
}
.foot-title {
  margin: 0 0 var(--space-5, 12px);
  color: var(--text-faint, #7f8bab);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
footer nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2, 6px) var(--space-lg, 24px);
  margin-bottom: var(--space-lg, 24px);
}
footer nav a {
  color: var(--text-dim, #b4bfdb);
  font-size: var(--text-md, 14px);
  text-decoration: none;
}
footer nav a:hover {
  color: var(--text, #f2f5ff);
}
footer nav a[aria-current] {
  color: var(--nav-on-text, #7cf0ad);
  font-weight: var(--weight-semibold, 600);
}

@media (max-width: 640px) {
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 22px;
    margin-top: var(--space-xl, 32px);
  }
  .hero {
    padding: var(--space-lg, 24px) var(--space-8, 18px);
    border-radius: var(--radius-lg, 18px);
  }
  .lead {
    font-size: var(--text-lg, 16px);
  }
  .brand-tag {
    display: none;
  }
  .btn.big {
    width: 100%;
  }
}