/* СУЧОК — оформление.
   Основа взята из локального books/web/style.css: тёмный графит, кожаный акцент.
   Добавлены темы магазинов, кабинет, экран входа и адаптивность.

   Про адаптивность главное правило: на узком экране таблицы становятся
   карточками, а не едут вбок. Заполняя продажу, человек не должен возить
   экран, чтобы увидеть поле, которое заполняет. */

:root {
  --bg-top: #2c2925;
  --bg-bot: #14130f;
  --panel: #221f1c;
  --panel-2: #2a2723;
  --line: #3a3630;
  --text: #ece6dc;
  --dim: #9a9187;
  --accent: #c89b6a;          /* дерево — тот же тон, что кольца на знаке */
  --accent-ink: #1b1815;      /* текст на акценте */
  --good: #7fb069;
  --bad: #d1685f;
  --radius: 10px;
  --wrap: 1500px;             /* шире растягивать нельзя: глаз теряет строку */
  --tap: 44px;                /* палец меньше не попадает */
}

/* Темы магазина. Цвет — не украшение: у мастера с тремя лавками главный риск
   завести продажу не туда, и разный фон ловится боковым зрением. */
[data-theme="wood"]    { --bg-top: #302722; --bg-bot: #17110d; --accent: #c8894a; }
[data-theme="forest"]  { --bg-top: #232b26; --bg-bot: #0f1512; --accent: #7cb342; }
[data-theme="ink"]     { --bg-top: #232830; --bg-bot: #0f1218; --accent: #7aa7d9; }
[data-theme="clay"]    { --bg-top: #302426; --bg-bot: #170f11; --accent: #cc7f7f; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(var(--bg-top), var(--bg-bot)) fixed;
  color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

/* ---------- шапка ---------- */

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .25);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand img { height: 34px; width: auto; display: block; }
.brand b { font-size: 15px; letter-spacing: .12em; font-weight: 600; }

/* Название магазина — оно же переключатель: отдельная кнопка рядом была бы
   дублированием, а на телефоне съела бы половину строки. */
.shopname {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; color: var(--text);
  font: inherit; font-weight: 600; font-size: 16px;
  padding: 7px 11px; border-radius: 9px; cursor: pointer;
  min-height: var(--tap);
  border-bottom: 2px solid var(--accent);
  max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shopname:hover { border-color: var(--line); border-bottom-color: var(--accent); }
.shopname .caret { color: var(--dim); font-size: 12px; }

.grow { flex: 1; }

/* Выбор периода. На узком экране уезжает на свою строку целиком: ужать его
   до читаемого размера в одной строке с названием магазина невозможно,
   а прятать нельзя — период тут нужен не реже, чем на компьютере. */
.period { display: flex; align-items: center; gap: 7px; }
.period > span { color: var(--dim); font-size: 13px; }
.period select { min-width: 150px; }

/* Утилиты видимости. Правила глобальные: класс должен значить одно и то же
   везде, где его повесили, иначе он тихо перестаёт работать при переносе. */
@media (max-width: 1099px) { .hide-m { display: none !important; } }
@media (max-width: 767px)  { .hide-s { display: none !important; } }

.menu { position: relative; }
.menu > .sheet {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px; z-index: 30; box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  display: none;
  /* Панель шире кнопки, поэтому в узком окне её надо ограничить —
     иначе она вылезает за край экрана и часть пунктов не прочитать. */
  max-width: calc(100vw - 24px);
}
/* Кнопка в левом углу: панель растёт вправо, а не за край экрана */
.menu.left > .sheet { left: 0; right: auto; }
.menu.open > .sheet { display: block; }
.sheet a, .sheet button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; color: var(--text); font: inherit;
  text-align: left; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  text-decoration: none; min-height: var(--tap);
}
.sheet a:hover, .sheet button:hover { background: var(--panel-2); color: var(--accent); }
.sheet .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.sheet .who { padding: 8px 12px; color: var(--dim); font-size: 13px; }

/* ---------- вкладки ---------- */

nav {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 10px max(16px, env(safe-area-inset-left)) 0;
  max-width: var(--wrap); margin: 0 auto;
}
nav button {
  background: none; border: 1px solid transparent; border-bottom: none;
  color: var(--dim); padding: 9px 16px; border-radius: 8px 8px 0 0;
  cursor: pointer; font-size: 15px; min-height: var(--tap);
}
nav button.on { background: var(--panel); border-color: var(--line); color: var(--accent); }

main {
  padding: 0 max(16px, env(safe-area-inset-left)) max(60px, env(safe-area-inset-bottom));
  max-width: var(--wrap); margin: 0 auto;
}
section { display: none; }
section.on { display: block; }

/* ---------- панели ---------- */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.panel > h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dim); margin: 0 0 12px; font-weight: 600;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tile {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
}
.tile .k { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tile .v { font-size: 24px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile .n { color: var(--dim); font-size: 12px; margin-top: 4px; }
.pos { color: var(--good); }
.neg { color: var(--bad); }

/* ---------- таблицы ---------- */

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); font-weight: 600; padding: 6px 8px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 2px 4px; border-bottom: 1px solid rgba(58, 54, 48, .5); }
td.num, th.num { text-align: right; }
td.calc { color: var(--accent); padding-right: 10px; }

input, select, textarea {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text); font: inherit; padding: 6px 7px; width: 100%;
}
input:hover, select:hover { border-color: var(--line); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: rgba(0, 0, 0, .25);
}
input.num { text-align: right; }
select option { background: var(--panel); color: var(--text); }
/* Длинное название не должно упираться в стрелку списка. У материалов имена
   вроде «Кожа растительного дубления 1.8-2.0 мм» шире поля, и без этого
   текст обрезается вплотную к краю: стрелки не видно, и поле перестаёт
   читаться как выпадающий список. */
select { text-overflow: ellipsis; padding-right: 22px; }
textarea { border-color: var(--line); background: rgba(0, 0, 0, .2); resize: vertical; min-height: 70px; }

.btn {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 9px 15px; border-radius: 8px; cursor: pointer; font: inherit;
  width: auto; min-height: var(--tap); display: inline-flex;
  align-items: center; justify-content: center; gap: 7px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn.slim { min-height: 34px; padding: 5px 11px; font-size: 13px; }
/* Необратимое действие выглядит необратимым — но не кричит, чтобы не пугать
   тех, кто просто листает настройки. */
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #1b1815; }
.warn { color: var(--bad); font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.btn:disabled { opacity: .45; cursor: default; }

/* Кнопка удаления видна всегда. Прятать её под :hover нельзя: на телефоне
   наведения не существует, и спрятанное становится недоступным. */
.del {
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: 19px; padding: 0 8px; width: auto; min-height: 34px;
}
.del:hover { color: var(--bad); }

.quick { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.quick label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); }
.quick label input, .quick label select {
  border-color: var(--line); background: rgba(0, 0, 0, .2); min-width: 110px; min-height: 40px;
}
.quick .wide input, .quick .wide select { min-width: 190px; }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center; font-size: 14px; }
.bar .track { position: relative; height: 24px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6b533a, var(--accent)); }
.bar .lab { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 9px; gap: 8px; }
.bar .val { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Заголовки категорий. Своя таблица на каждую категорию, а не строка-разделитель
   внутри общей: на телефоне таблица становится карточками, и такая строка
   разъехалась бы. */
.catgroup { margin-bottom: 18px; }
.catgroup > h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); margin: 0 0 6px; padding: 8px 2px 7px;
  border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none; min-height: 40px;
}
.catgroup > h3:hover { border-bottom-color: var(--accent); }
.catgroup > h3 .n {
  color: var(--dim); font-weight: 400; letter-spacing: 0; font-size: 12px;
  background: var(--panel-2); border-radius: 20px; padding: 1px 8px;
}
.catgroup > h3 .sum {
  margin-left: auto; color: var(--dim); font-weight: 400;
  letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}

/* Стрелка сворачивания. Свой класс, а не общий .chev: тот уже занят карточкой
   товара, и внутри свёрнутой группы правило поворота задело бы и её. */
.catchev { color: var(--dim); display: inline-block; transition: transform .15s; }
.catgroup:not(.off) > h3 .catchev { transform: rotate(90deg); }
.catgroup.off .catbody { display: none; }
.catgroup.off > h3 { margin-bottom: 0; opacity: .75; }

/* Сужение списка по категории в формах ввода */
.quick .catfilter { min-width: 130px; }

.prodcard { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.prodhead {
  display: grid; grid-template-columns: 1fr 130px 110px 110px 120px 34px;
  gap: 8px; align-items: center; padding: 10px; background: var(--panel-2); cursor: pointer;
}
.prodhead .name { font-weight: 600; }
.prodbody { padding: 10px 14px 14px; display: none; }
.prodcard.open .prodbody { display: block; }
.chev { color: var(--dim); transition: transform .15s; display: inline-block; }
.prodcard.open .chev { transform: rotate(90deg); }

.pill {
  display: inline-block; justify-self: start; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--dim);
}

.banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(200, 155, 106, .1); border: 1px solid rgba(200, 155, 106, .35);
  border-radius: var(--radius); padding: 12px 16px; margin: 14px 0; font-size: 14px;
}
.banner.err { background: rgba(209, 104, 95, .12); border-color: rgba(209, 104, 95, .4); }

.empty { color: var(--dim); padding: 20px 4px; text-align: center; }
.hint { color: var(--dim); font-size: 13px; margin-top: 10px; }

#toast {
  position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 11px 20px; border-radius: 22px; opacity: 0; transition: .2s;
  pointer-events: none; z-index: 50; max-width: 92vw; text-align: center;
}
#toast.on { opacity: 1; transform: translateX(-50%); }
#toast.err { border-color: var(--bad); color: var(--bad); }

/* ---------- вход ---------- */

.gate { max-width: 430px; margin: 8vh auto; padding: 0 18px 60px; }
.gate .logo { display: block; margin: 0 auto 18px; width: 132px; height: auto; }
.gate h1 { text-align: center; font-size: 22px; letter-spacing: .14em; margin: 0 0 6px; }
.gate .sub { text-align: center; color: var(--dim); font-size: 14px; margin: 0 0 26px; }
.gate .panel { padding: 22px; }
.gate label { display: block; margin-bottom: 13px; font-size: 13px; color: var(--dim); }
.gate label input { border-color: var(--line); background: rgba(0, 0, 0, .2); margin-top: 4px; min-height: var(--tap); }
.gate .btn { width: 100%; }
/* Согласие на обработку данных. Строка заметная, а не мелким шрифтом внизу:
   согласие обязано быть осознанным, и спрятанная галочка этому противоречит. */
/* Селектор с тегом (`label.consent`) не для красоты: рядом живёт `.gate label`
   с `display:block`, и по весу он перебил бы просто `.consent`. */
label.consent { display: flex; align-items: flex-start; gap: 11px; margin: 6px 0 18px;
                font-size: 13px; color: var(--dim); line-height: 1.45; cursor: pointer; }
label.consent input { width: 20px; height: 20px; flex: none; min-height: 0;
                      margin: 2px 0 0; accent-color: var(--accent); }
label.consent span { flex: 1; }
label.consent a { color: var(--accent); }

/* Вход через Telegram заперт, пока не отмечено согласие: первый вход
   через него — это и есть регистрация. */
.locked { opacity: .4; pointer-events: none; filter: grayscale(1); }

/* Сторонние способы входа — Telegram-виджет и ссылки на Яндекс/VK — стоят
   в столбик под общей галочкой согласия. */
#oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
#tgbox { display: flex; justify-content: center; }
.oauth-btn { text-decoration: none; }

.or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 13px; margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.swap { text-align: center; margin-top: 16px; font-size: 14px; }
.swap button { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

/* ---------- документ (политика) ---------- */

.doc { max-width: 820px; margin: 0 auto; padding: 26px 18px 80px; }
.doc h1 { font-size: 24px; margin: 0 0 6px; }
.doc h2 { font-size: 16px; margin: 28px 0 8px; color: var(--accent); }
.doc p, .doc li { color: #d6cfc4; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 5px; }
.doc code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.doc .ver { color: var(--dim); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- кабинет ---------- */

.cab { max-width: var(--wrap); margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left)) 70px; }
.cab h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 600; }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.shopcard {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.shopcard h3 { margin: 0; font-size: 18px; }
.shopcard .descr { color: var(--dim); font-size: 13px; margin: 0; min-height: 1.5em; }
.shopcard .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.shopcard .nums div { background: var(--panel-2); border-radius: 8px; padding: 9px; }
.shopcard .nums span { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.shopcard .nums b { font-size: 16px; font-variant-numeric: tabular-nums; }
.shopcard .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.shopcard.add {
  border-style: dashed; border-left-width: 1px; align-items: center; justify-content: center;
  cursor: pointer; color: var(--dim); min-height: 190px; text-align: center;
}
.shopcard.add:hover { border-color: var(--accent); color: var(--accent); }

.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow: auto;
}
.modal .box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; width: 100%; max-width: 470px;
}
.modal h3 { margin: 0 0 16px; font-size: 18px; }
.modal label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--dim); }
.modal label input, .modal label select, .modal label textarea {
  border-color: var(--line); background: rgba(0, 0, 0, .2); margin-top: 4px; min-height: var(--tap);
}
.swatches { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
.swatch { width: 38px; height: 38px; border-radius: 9px; border: 2px solid var(--line); cursor: pointer; }
.swatch.on { border-color: var(--text); }
.modal .row { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px; margin: 10px 0; }
.checks label { display: flex; align-items: center; gap: 9px; padding: 7px; font-size: 14px; color: var(--text); margin: 0; cursor: pointer; }
.checks input { width: 20px; height: 20px; flex: none; }
.checks .u { color: var(--dim); font-size: 12px; margin-left: auto; }

/* ---------- адаптивность ---------- */

/* планшет и ниже: карточка товара теряет средние колонки */
@media (max-width: 1099px) {
  .prodhead { grid-template-columns: 1fr 110px 120px 34px; }
}

/* телефон: таблицы становятся карточками */
@media (max-width: 767px) {
  header { gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
  .brand b { display: none; }
  .shopname { font-size: 15px; max-width: 52vw; }
  .period { order: 10; flex: 1 1 100%; }
  .period > span { display: none; }
  .period select { min-width: 0; width: 100%; }
  nav { padding: 8px 10px 0; gap: 3px; }
  nav button { padding: 9px 12px; font-size: 14px; flex: 1 1 auto; }
  main, .cab { padding-left: 10px; padding-right: 10px; }
  .panel { padding: 13px; }
  .prodhead { grid-template-columns: 1fr 110px var(--tap); }
  .prodhead .hide-s { display: none; }
  .prodhead .del { min-height: var(--tap); }

  .scroll { overflow-x: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 10px; padding: 6px 10px 10px; background: var(--panel-2);
    position: relative;
  }
  td {
    display: grid; grid-template-columns: 42% 1fr; align-items: center;
    gap: 8px; border: none; border-bottom: 1px solid rgba(58, 54, 48, .45); padding: 4px 0;
  }
  td:last-child { border-bottom: none; }
  td::before {
    content: attr(data-label);
    color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  }
  td.num { text-align: left; }
  td.num input { text-align: left; }
  /* Здесь, на узком экране, правят пальцем — значит действует общее правило
     --tap, а не отдельная величина «на глаз». Строка тут уже карточка, места
     под полноразмерное поле хватает. */
  td input, td select {
    min-height: var(--tap); border-color: var(--line); background: rgba(0, 0, 0, .18);
  }
  td.act { position: absolute; top: 4px; right: 4px; width: auto; display: block; }
  td.act::before { content: none; }
  /* Кнопка удаления висит в углу карточки поверх содержимого, поэтому первая
     строка обязана этот угол освободить. Иначе она ложится ровно на поле даты —
     а у него справа своя иконка календаря, и палец попадает в удаление вместо
     выбора числа. Совпадение неочевидное: на мышке крестик мельче и промах
     не так заметен, а на телефоне оба элемента одного размера. */
  tr > td:first-child { padding-right: calc(var(--tap) + 8px); }
  /* Удаление строки — из тех кнопок, по которым промахиваться всего обиднее:
     отменить нечем. На мышке 34 px хватало, пальцем — нет. */
  td.act .del { min-height: var(--tap); min-width: var(--tap); }

  .quick { flex-direction: column; align-items: stretch; }
  .quick label { width: 100%; }
  .quick label input, .quick label select, .quick .wide input, .quick .wide select {
    min-width: 0; width: 100%; min-height: var(--tap);
  }
  .quick .btn { width: 100%; }
  /* Мелкая кнопка мелкая только на мышке: «Скачать шаблон», «Попробовать
     сейчас» и соседи пальцем нажимаются так же, как остальные. */
  .btn.slim { min-height: var(--tap); }
  .bar { grid-template-columns: 1fr 84px; font-size: 13px; }
  .shopgrid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Палец не зависит от ширины окна. Телефон, повёрнутый набок, — это 812 px,
   то есть мимо мобильной раскладки, а рука та же. Поэтому раскладку выбираем
   по ширине, а размер цели — по виду указателя: где тыкают пальцем, там
   действует --tap, даже если места на экране много. */
@media (pointer: coarse) {
  td input, td select, .del, .btn.slim { min-height: var(--tap); }
  td.act .del { min-width: var(--tap); }
}

@media (max-width: 479px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile .v { font-size: 20px; }
  .shopcard .nums { grid-template-columns: 1fr; }
  td { grid-template-columns: 1fr; gap: 2px; }
  td::before { margin-bottom: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Выданный код доступа на время закрытого теста. Крупно и моноширинно:
   его переписывают руками и диктуют голосом, а user-select:all даёт выделить
   всё одним касанием там, где буфер обмена странице недоступен. */
.code-out {
  font: 600 26px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .08em; text-align: center; padding: 16px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(0, 0, 0, .25); color: var(--accent);
  user-select: all; overflow-wrap: anywhere;
}
.hint.tight { margin-top: 0; }

/* Полоса с действиями над разделом (загрузка таблицы, шаблон) */
.tools {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
.tools .hint { margin: 0; flex: 1 1 220px; min-width: 0; }