/* FROZEN — пульт. Плотнее витрины и без украшений: сюда приходят читать
   цифры, а не любоваться. Крупные значения, спокойный фон, никакого фото
   шахты под таблицами — на нём не читается ни одна колонка. */

/* Фоновые слои brand.css гасим: фотография шахты под таблицами делает
   нечитаемой каждую колонку. Пульт — не витрина, красоваться тут нечем. */
body::before,body::after{display:none !important}

body{margin:0; background:var(--deep); color:var(--cream);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,select,input,textarea{font:inherit; color:inherit}
button{border:0; background:none; cursor:pointer}
button:disabled{opacity:.5; cursor:default}

.pult{max-width:1180px; margin:0 auto; padding:0 18px 60px}

/* ─── шапка ────────────────────────────────────────────────────────────── */
/* Шапка ЛИПКАЯ и не переполняется. Раньше она была одной нерушимой строкой:
   на телефоне «Выйти» уезжала за край экрана вместе с половиной страницы, и
   вся страница начинала ездить вбок. Теперь она переносится по строкам, а
   поиск занимает всю ширину второй строки. */
.pult-top{position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:10px 14px; flex-wrap:wrap; margin:0 -18px; padding:12px 18px;
  background:linear-gradient(180deg, var(--deep) 78%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--seam)}
.brand{display:flex; align-items:center; gap:9px; color:var(--sand); flex:none}
.brand svg{width:24px; height:24px; color:var(--lamp)}
.brand b{font-size:13px; font-weight:800; letter-spacing:.18em}
.brand span{font-size:12px; color:var(--sand-dim)}

.top-right{display:flex; align-items:center; gap:8px; margin-left:auto; flex:none}
.freshness{font-size:12px; color:var(--sand-dim); font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* Поиск. Главное поле пульта: всё остальное — способы дойти до строки, а
   поиск — прямой путь к ней. */
.find{flex:1 1 260px; min-width:180px; display:flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:11px; background:rgba(0,0,0,.35);
  border:1px solid var(--seam-2); transition:border-color 140ms}
.find[hidden]{display:none}
.find:focus-within{border-color:var(--lamp)}
.find svg{width:16px; height:16px; flex:none; color:var(--sand-dim)}
.find input{flex:1; min-width:0; padding:9px 0; background:none; border:0; outline:none;
  font-size:14px}
.find input::-webkit-search-cancel-button{display:none}
.find-x{flex:none; width:22px; height:22px; border-radius:50%; font-size:16px;
  line-height:1; color:var(--sand-dim); background:rgba(255,246,230,.08)}
.find-x:hover{color:var(--cream)}

.ghost{padding:9px 14px; border-radius:10px; font-size:13px; font-weight:600;
  color:var(--sand); background:rgba(255,246,230,.07);
  border:1px solid rgba(245,207,138,.16); white-space:nowrap}
.ghost:hover{background:rgba(255,246,230,.12)}
.ghost.small{padding:6px 11px; font-size:12px}
/* Переключатель валюты — один знак. Кнопка узкая нарочно: она нажимается
   часто и должна стоять рядом с «Обновить», не отъедая места у поиска. */
.ghost.валюта{width:38px; padding:9px 0; text-align:center; font-size:15px;
  font-weight:700}
.ghost.валюта.on{color:var(--on-lamp); background:var(--metal); border-color:transparent}
.gold{padding:11px 16px; border-radius:11px; font-size:13.5px; font-weight:700;
  color:var(--on-lamp); background:var(--metal); white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.gold:hover{filter:brightness(1.06)}
.gold.small{padding:7px 13px; font-size:12.5px}

/* Пока идёт шумная загрузка — тонкая полоса под шапкой. Тихое обновление
   раз в полминуты её не зажигает: мигающая полоса на пустом месте учит
   не обращать на неё внимания. */
body.грузим .pult-top::after{content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:linear-gradient(90deg, transparent, var(--lamp), transparent);
  animation:ползёт 1s linear infinite}
@keyframes ползёт{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ─── запертый пульт ───────────────────────────────────────────────────── */
/* display:grid перебивает [hidden], поэтому прячем явно */
.locked[hidden]{display:none}
.locked{display:grid; justify-items:center; gap:9px; max-width:520px;
  margin:16vh auto; padding:34px 26px; border-radius:20px; text-align:center;
  background:rgba(255,246,230,.05); border:1px solid var(--seam)}
.locked .ic{width:34px; height:34px; color:var(--lamp)}
.locked b{font-size:19px}
.locked p{margin:0; font-size:13.5px; color:var(--sand-dim); text-wrap:pretty}
.locked.bad .ic{color:var(--rust)}

/* ─── вкладки ──────────────────────────────────────────────────────────── */
/* Тоже липкие, под шапкой. Раньше они уезжали вверх вместе со страницей, и
   переключить вкладку из середины длинной таблицы было нельзя, не пролистав
   всё обратно. */
.pult-tabs{position:sticky; z-index:15; top:var(--шапка, 57px); display:flex; gap:7px;
  overflow-x:auto; margin:0 -18px 18px; padding:10px 18px;
  background:var(--deep); scrollbar-width:none}
.pult-tabs::-webkit-scrollbar{display:none}
/* Скрытая вкладка (сейчас — «Склад») не рисуется, даже если стили кнопки
   когда-нибудь зададут ей display. */
.pult-tabs button[hidden]{display:none}
.pult-tabs button{position:relative; flex:none; padding:10px 17px; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--sand);
  background:rgba(255,246,230,.06); border:1px solid var(--seam)}
.pult-tabs button.on{color:var(--on-lamp); border-color:transparent;
  background:var(--metal)}
/* Точка беды на вкладке: полосу можно свернуть прокруткой, а точка едет
   вместе с липкими вкладками и видна всегда. */
.pult-tabs button.точка-bad::after,.pult-tabs button.точка-warn::after{
  content:''; position:absolute; top:6px; right:8px; width:7px; height:7px;
  border-radius:50%; box-shadow:0 0 0 2px var(--deep)}
.pult-tabs button.точка-bad::after{background:var(--rust)}
.pult-tabs button.точка-warn::after{background:var(--lamp)}

.tabpage{display:none}
.tabpage.show{display:block}

/* ─── плитки ───────────────────────────────────────────────────────────── */
/* 224, а не 200: подпись плюс слово состояния в двести пикселей не влезают,
   и каждая вторая плитка ломала заголовок надвое. */
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(224px, 1fr));
  gap:11px; margin-bottom:18px}
.tile{padding:16px 17px 15px; border-radius:16px;
  background:rgba(255,246,230,.055); border:1px solid var(--seam)}
.tile span{display:block; font-size:12px; color:var(--sand-dim); margin-bottom:6px}
/* Цифра — главное на плитке, поэтому крупно и табличными знаками:
   так столбцы значений не пляшут при обновлении. */
.tile b{display:block; font-size:27px; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tile em{display:block; margin-top:5px; font-style:normal; font-size:11.5px;
  color:var(--sand-dim)}
.tile.wide{grid-column:span 2}
.tile.warn{border-color:color-mix(in oklab, var(--lamp) 40%, transparent);
  background:color-mix(in oklab, var(--lamp) 9%, transparent)}
.tile.bad{border-color:color-mix(in oklab, var(--rust) 44%, transparent);
  background:color-mix(in oklab, var(--rust) 10%, transparent)}
.tile.bad b{color:var(--rust)}
/* Прибыль — единственная плитка, которую красим в «хорошо». Это главное
   число пульта, и оно должно находиться глазом, а не поиском. */
.tile.good{border-color:color-mix(in oklab, var(--ore) 34%, transparent);
  background:color-mix(in oklab, var(--ore) 7%, transparent)}
.tile.good b{color:var(--ore)}

/* Стрелка сравнения с прошлым периодом. Мелко и под числом: сравнение важно,
   но само число важнее. */
.тренд{display:block; margin-top:6px; font-style:normal; font-size:12px;
  font-weight:600; color:var(--sand-dim)}
.тренд u{font-weight:400; text-decoration:none; color:var(--sand-dim);
  font-size:11px}
.тренд.рост{color:var(--ore)}
.тренд.спад{color:var(--rust)}
.под{display:block; margin-top:6px; font-style:normal; font-size:11.5px;
  color:var(--sand-dim)}
/* Та же сумма во второй валюте. Приглушённее основной и в скобках по смыслу:
   это сверка, а не второе число, которое надо читать наравне. */
.вторая{font-style:normal; color:var(--sand-dim); opacity:.72}
.chart-foot .вторая{font-size:11.5px}

/* ─── карточки ─────────────────────────────────────────────────────────── */
.card{margin-bottom:18px; padding:18px; border-radius:18px;
  background:rgba(255,246,230,.04); border:1px solid var(--seam)}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;
  flex-wrap:wrap}
.card-head h2{margin:0; font-size:16px; letter-spacing:-.01em}
.card-head .hint{font-size:12px; color:var(--sand-dim)}
.card-tools{display:flex; align-items:center; gap:8px; margin-left:auto;
  flex-wrap:wrap}
select,textarea,input{background:rgba(0,0,0,.35); color:var(--cream);
  border:1px solid var(--seam-2); border-radius:10px; padding:9px 11px;
  outline:none}
select:focus,textarea:focus,input:focus{border-color:var(--lamp)}
.card-head select{font-size:13px; padding:7px 10px}

/* ─── воронка ──────────────────────────────────────────────────────────── */
.funnel{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.step{flex:1; min-width:120px; padding:15px; border-radius:14px; text-align:center;
  background:rgba(0,0,0,.3); border:1px solid var(--seam)}
.step b{display:block; font-size:25px; font-variant-numeric:tabular-nums}
.step span{font-size:12px; color:var(--sand-dim)}
.step.done{border-color:color-mix(in oklab, var(--ore) 40%, transparent)}
.step.done b{color:var(--ore)}
.arrow{flex:none; padding:0 4px; color:var(--sand-dim)}
.arrow i{font-style:normal; font-size:13px; font-weight:700; color:var(--lamp)}

/* ─── график ───────────────────────────────────────────────────────────── */
.chart{display:flex; align-items:flex-end; gap:3px; height:180px;
  padding-top:10px; overflow-x:auto}
.bar{flex:1; min-width:14px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; height:100%; gap:5px}
/* Столбик двухслойный: тусклая часть — деньги поставщика, золотая снизу —
   наши. Оба вопроса («растёт ли оборот» и «растёт ли заработок») читаются
   с одной картинки. */
.bar i{display:flex; align-items:flex-end; width:100%; border-radius:4px 4px 2px 2px;
  background:color-mix(in oklab, var(--lamp) 22%, transparent);
  transition:filter 150ms}
.bar i u{display:block; width:100%; border-radius:3px 3px 2px 2px; text-decoration:none;
  background:linear-gradient(180deg, var(--lamp-hi), var(--lamp-lo))}
.bar:hover i{filter:brightness(1.25)}
.bar.минус i{background:color-mix(in oklab, var(--rust) 40%, transparent)}
.bar span{font-size:9.5px; color:var(--sand-dim); white-space:nowrap}

.chart-foot{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--seam); font-size:12.5px;
  color:var(--sand-dim)}
.chart-foot b{font-size:14px; color:var(--cream); font-variant-numeric:tabular-nums}
.chart-foot b.ore{color:var(--ore)}
.warn-txt{color:var(--lamp)}

/* ─── уровни ───────────────────────────────────────────────────────────── */
.levels{display:grid; gap:8px}
.lvl{display:grid; grid-template-columns:150px 1fr 48px; align-items:center; gap:11px}
.lvl span{font-size:13px}
.lvl i{display:block; height:10px; border-radius:999px; min-width:4px;
  background:linear-gradient(90deg, var(--lamp-lo), var(--lamp-hi))}
.lvl b{text-align:right; font-variant-numeric:tabular-nums}

/* ─── таблицы ──────────────────────────────────────────────────────────── */
.scroll{overflow-x:auto; margin:0 -4px; padding:0 4px}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{padding:8px 10px; text-align:left; font-size:11.5px; font-weight:600;
  color:var(--sand-dim); text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--seam); white-space:nowrap}
td{padding:11px 10px; border-bottom:1px solid rgba(43,36,27,.5); vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,246,230,.035)}
.r{text-align:right}
.strong{font-weight:700; font-variant-numeric:tabular-nums}
.dim{color:var(--sand-dim)}
.small{font-size:12px}
.red{color:var(--rust)}
.amber{color:var(--lamp)}
.ore{color:var(--ore)}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em}
td .mono.dim{display:block; font-size:11.5px; margin-top:2px}
tr.off td{opacity:.5}
tr.warn td:first-child{box-shadow:inset 3px 0 0 var(--lamp)}
.empty{padding:22px 10px; color:var(--sand-dim); text-align:center}

/* Копирование по нажатию. Игровой ID и номер заказа переносят в переписку
   руками, а выделить число в плотной таблице на телефоне нельзя вовсе. */
[data-copy]{cursor:copy; border-radius:5px; transition:background 160ms}
[data-copy]:hover{background:rgba(245,207,138,.12)}
[data-copy].скопировано{background:color-mix(in oklab, var(--ore) 26%, transparent)}
[data-copy].скопировано::after{content:' скопировано'; font-size:10px; color:var(--ore)}

.more{display:flex; justify-content:center; margin-top:14px}

/* Сколько нашлось. Нужна там, где рядом стоят счётчики по всему магазину:
   без неё «Все 823» над таблицей из пяти строк читается как поломка. */
.итог{margin:0 0 10px; font-size:12.5px; color:var(--sand-dim)}
.итог[hidden]{display:none}
.итог b{color:var(--cream); font-variant-numeric:tabular-nums}

.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px;
  font-weight:600; background:rgba(255,255,255,.07); color:var(--sand);
  white-space:nowrap}
.pill.s-done{background:color-mix(in oklab, var(--ore) 18%, transparent); color:var(--ore)}
.pill.s-failed{background:color-mix(in oklab, var(--rust) 18%, transparent); color:var(--rust)}
.pill.s-paid,.pill.s-issuing{background:color-mix(in oklab, var(--lamp) 18%, transparent);
  color:var(--lamp)}

/* ─── приёмка кодов ────────────────────────────────────────────────────── */
/* Склад — это деньги вперёд, и самая дорогая ошибка тут не опечатка, а коды,
   легшие не на тот артикул. Поэтому все номиналы игры видны на одном экране:
   выбирать артикул в выпадающем списке больше не нужно, а значит и промахнуться
   мимо строки почти нельзя — у каждой подписано имя, артикул и остаток. */
/* Как вводить коды. Стоит ДО полей, а не подсказкой под ними: правила
   вставки нужны до того, как вставили, а не после. */
.как-вводить{margin:0 0 12px; padding:11px 14px; border-radius:11px;
  background:rgba(0,0,0,.2); border:1px solid var(--seam);
  font-size:12.5px; line-height:1.65; color:var(--sand-dim); max-width:78ch}

/* Закупка. Кто продал и в какой валюте — свойство всей партии, а не строки:
   у одной поставки один поставщик и один счёт. */
.закупка{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px;
  margin-bottom:14px; padding:12px 14px; border-radius:11px;
  background:rgba(0,0,0,.2); border:1px solid var(--seam)}
.закупка label,.закупка .валюта{display:grid; gap:5px}
.закупка span{font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--sand-dim)}
.закупка input{width:200px; padding:8px 11px; border-radius:9px;
  border:1px solid var(--seam-2); background:rgba(0,0,0,.28); color:var(--cream);
  font-size:13px}
.закупка em{flex:1 1 260px; font-style:normal; font-size:11.5px;
  color:var(--sand-dim); line-height:1.55}
.закупка-итог{margin-top:4px; font-size:12px; color:var(--sand)}
.закупка-итог b{font-size:13px; color:var(--ore)}

.приёмка{display:grid; gap:8px}
.стр{display:grid;
  grid-template-columns:minmax(130px, 1fr) auto minmax(170px, 2fr) auto;
  align-items:start; gap:10px 12px; padding:10px 12px; border-radius:12px;
  background:rgba(0,0,0,.24); border:1px solid var(--seam)}
.стр-имя{min-width:0}
.стр-имя b{display:block; font-size:13.5px; font-weight:600}
.стр-имя span{display:block; font-size:11px; margin-top:1px}
.стр-склад{font-size:11.5px; color:var(--sand-dim); white-space:nowrap; padding-top:3px}
.стр-склад.мало{color:var(--lamp)}
.стр textarea{width:100%; min-height:38px; resize:none; overflow:hidden;
  font-family:ui-monospace, SFMono-Regular, monospace; font-size:12.5px;
  line-height:1.5; padding:8px 10px}
/* Итог строки: что случится именно с этими кодами. Стоит под полем, а не в
   общем подвале, — промах виден там же, где сделан. */
/* Цена партии стоит В ТОЙ ЖЕ СТРОКЕ, что и коды. Отдельным полем внизу её
   пришлось бы соотносить с номиналом в уме — а ошибка тут стоит ровно той
   суммы, которую вписали не в ту строку. */
.стр-цена{display:flex; align-items:center; gap:5px; padding-top:1px}
.стр-цена input{width:104px; padding:8px 9px; border-radius:9px;
  border:1px solid var(--seam-2); background:rgba(0,0,0,.3); color:var(--cream);
  font-size:12.5px; font-variant-numeric:tabular-nums}
.стр-цена input::placeholder{color:var(--sand-dim); font-size:11.5px}
.стр-цена u{text-decoration:none; font-size:12px; color:var(--sand-dim)}

.стр-итог{grid-column:3 / -1; font-size:11.5px; color:var(--sand-dim)}
.стр-итог:empty{display:none}
.стр-итог b{color:var(--ore)}
.стр-итог i{font-style:normal}
.стр-итог u{text-decoration:none; color:var(--rust); font-weight:600}
.стр-итог.плохо{color:var(--rust)}
.стр-итог .цена{color:var(--ore); font-weight:600; font-style:normal}
.стр-итог .убыток{color:var(--rust); font-weight:600; font-style:normal}
/* Каждый непрошедший код называет себя и причину. Список, а не число: по
   числу непонятно, переделывать всю вставку или поправить одну строку. */
.отсев{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:3px}
.отсев li{display:flex; gap:7px; align-items:baseline; font-size:11.5px;
  line-height:1.45}
.отсев code{font-family:ui-monospace, SFMono-Regular, monospace; font-size:11px;
  padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.35); white-space:nowrap}
.отсев .нет{color:var(--rust)}
.отсев .нет code{color:var(--rust)}
/* Непохожий — не приговор, а повод посмотреть: он может оказаться настоящим
   кодом нового формата. Поэтому лампа, а не кровь. */
.отсев .под-вопросом{color:var(--lamp)}
.отсев .под-вопросом code{color:var(--lamp)}

/* Счёт и кнопка прилипают к низу экрана, пока список приёмки длиннее его.
   Иначе, вставив коды в третью строку из тридцати, до кнопки надо листать —
   а по дороге не видно, сколько всего набралось. */
.приёмка-низ{position:sticky; bottom:0; z-index:5; display:flex; align-items:center;
  gap:14px; flex-wrap:wrap; margin:14px -18px -18px; padding:13px 18px;
  border-top:1px solid var(--seam);
  background:linear-gradient(180deg, rgba(19,16,12,.86), var(--deep));
  backdrop-filter:blur(8px); border-radius:0 0 18px 18px}
.приёмка-низ:empty{display:none}
.приёмка-счёт{font-size:13px; color:var(--sand-dim)}
.приёмка-счёт b{font-size:16px; color:var(--cream); font-variant-numeric:tabular-nums}
.вердикт{font-size:12.5px; color:var(--sand-dim)}
.вердикт b{color:var(--ore)}
.вердикт i{font-style:normal; color:var(--sand)}
.вердикт u{text-decoration:none; color:var(--rust); font-weight:700}
.вердикт.хорошо{color:var(--sand)}
.вердикт.плохо{color:var(--rust)}
.приёмка-кнопки{margin-left:auto; display:flex; gap:10px}

.итог-приёмки{display:grid; gap:10px; justify-items:start; margin-top:14px;
  padding:13px 15px; border-radius:12px; font-size:13px;
  border:1px solid var(--seam); border-left-width:4px; background:rgba(0,0,0,.28)}
.итог-приёмки[hidden]{display:none}
.итог-приёмки.хорошо{border-left-color:var(--ore)}
.итог-приёмки.плохо{border-left-color:var(--rust)}
.итог-приёмки .лента{width:100%}
.итог-приёмки .лента .отсев{margin-top:5px}
.итог-приёмки .dim{font-size:11.5px}

/* Полка внутри склада игры: UC, костюмы, машины — разные полки, и подытог по
   каждой нужен ровно затем, зачем на склад и смотрят. */
tr.полка td{padding:14px 10px 6px; border-bottom:1px solid var(--seam)}
tr.полка:first-child td{padding-top:2px}
tr.полка b{font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--sand)}
tr.полка span{margin-left:10px; font-size:11.5px; color:var(--sand-dim)}
tbody tr.полка:hover{background:none}

/* Чипсы игр крупнее прочих: это выбор склада, а не фильтр внутри него. */
.chips.игры{margin-bottom:12px}
.chips.игры .chip{padding:9px 15px; font-size:13px}

.say{font-size:12.5px; color:var(--sand-dim)}
.say.ok{color:var(--ore)}
.say.bad{color:var(--rust)}

.notes-list p{margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--sand)}
.notes-list p:last-child{margin-bottom:0}
.notes-list .bad{color:var(--rust)}

/* ─── правка товара ────────────────────────────────────────────────────── */
.sheet{position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  padding:20px}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute; inset:0; background:rgba(6,5,4,.72)}
.sheet-card{position:relative; width:min(100%, 480px); max-height:90vh; overflow-y:auto;
  display:grid; gap:12px; padding:22px; border-radius:20px;
  background:linear-gradient(180deg, var(--stone), var(--deep));
  border:1px solid var(--seam-2); box-shadow:0 30px 70px -30px #000}
.sheet-card h2{margin:0 0 2px; font-size:18px}
.sheet-card label{display:grid; gap:6px; font-size:12px; color:var(--sand-dim)}
.sheet-card input,.sheet-card select{font-size:15px}
.sheet-card input[readonly]{opacity:.6}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label.check{display:flex; align-items:center; gap:9px; align-self:end;
  padding-bottom:10px}
label.check input{width:18px; height:18px; accent-color:var(--lamp)}
label.check span{font-size:13px; color:var(--cream)}
.sheet-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:4px}

/* Наценка при наборе цены: закупка поставщика в долларах, и в уме её никто
   не пересчитывает. Строка меняет цвет раньше, чем прочитано число. */
.говорит{padding:10px 13px; border-radius:11px; font-size:12.5px; line-height:1.45;
  border:1px solid var(--seam); background:rgba(0,0,0,.28)}
.говорит.ok{border-color:color-mix(in oklab, var(--ore) 34%, transparent);
  color:var(--ore)}
.говорит.warn{border-color:color-mix(in oklab, var(--lamp) 40%, transparent);
  color:var(--lamp)}
.говорит.bad{border-color:color-mix(in oklab, var(--rust) 46%, transparent);
  color:var(--rust)}

/* ═══ состояние видно раньше числа ═══════════════════════════════════════ */

/* Состояние одним словом у подписи плитки. Точка красит смысл: её видно
   боковым зрением, слово уточняет. */
/* Состояние прижимаем к ПЕРВОЙ строке подписи: длинная подпись переносится
   («Застрявших кодов»), и по центру слово повисало между строк. */
.tile span{display:flex; align-items:flex-start; gap:8px}
.сост{margin-left:auto; font-style:normal; font-size:11px; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:5px; color:var(--sand-dim);
  white-space:nowrap; flex:none; padding-top:1px}
.сост::before{content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ore); flex:none}
.tile.warn .сост{color:var(--lamp)}
.tile.warn .сост::before{background:var(--lamp)}
.tile.bad .сост{color:var(--rust)}
.tile.bad .сост::before{background:var(--rust)}

/* Полоса беды над вкладками. Слева широкая цветная кромка — по ней полосу
   отличают от обычной карточки, не читая. */
.беда{display:grid; gap:8px; margin:0 0 14px}
.беда p{margin:0; padding:12px 15px; border-radius:12px; font-size:13.5px;
  line-height:1.45; text-wrap:pretty; border:1px solid var(--seam);
  border-left-width:4px; background:rgba(26,22,17,.55)}
.беда p.warn{border-left-color:var(--lamp);
  background:color-mix(in oklab, var(--lamp) 7%, rgba(26,22,17,.55))}
.беда p.bad{border-left-color:var(--rust); color:var(--sand);
  background:color-mix(in oklab, var(--rust) 8%, rgba(26,22,17,.55))}

/* ── воронка: процент — главное число ─────────────────────────────────── */
/* Счётчики заказов уже стоят в плитках выше; из воронки хотят узнать не
   «сколько», а «где теряем». Поэтому проценты крупные, а количества при них. */
.arrow{flex:1 1 90px; min-width:90px; padding:0 6px; text-align:center;
  color:var(--sand-dim)}
.arrow i{display:block; font-style:normal; font-size:26px; font-weight:800;
  letter-spacing:-.02em; line-height:1.1; color:var(--lamp);
  font-variant-numeric:tabular-nums}
.arrow u{display:block; margin-top:3px; font-size:11px; text-decoration:none;
  color:var(--sand-dim)}
.arrow.хорошо i{color:var(--ore)}
.arrow.плохо i{color:var(--rust)}
.step{flex:1 1 110px}
.step b{font-size:19px; color:var(--sand)}
.step.done b{color:var(--ore)}

/* ── фишки-фильтры ───────────────────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px}
.chips.tight{margin:0}
.chip{display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:8px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:var(--sand); border:1px solid var(--seam); background:rgba(0,0,0,.25);
  cursor:pointer; transition:color 160ms var(--ease-out),
    border-color 160ms var(--ease-out), background 160ms var(--ease-out)}
.chip.small{padding:6px 11px; font-size:12px}
.chip:hover{border-color:color-mix(in oklab, var(--lamp) 35%, var(--seam))}
.chip.on{color:var(--on-lamp); border-color:transparent; background:var(--metal)}
.chip i{font-style:normal; font-size:11px; font-variant-numeric:tabular-nums;
  padding:1px 6px; border-radius:999px; background:rgba(255,246,230,.12)}
.chip.on i{background:rgba(0,0,0,.22)}
/* Число сбоев — единственное, что красим: за ним в этот раздел и приходят. */
.chip i.кровь{background:color-mix(in oklab, var(--rust) 26%, transparent);
  color:var(--rust); font-weight:700}
.chip.on i.кровь{background:rgba(0,0,0,.3)}

/* ── разбор заказа ───────────────────────────────────────────────────── */
/* Строка нажимается и раскрывается под собой во всю ширину. Раньше так вели
   себя только провалившиеся, но вопрос «что там с моим заказом» приходит про
   любой — и по выданному тоже надо уметь ответить. */
tr.жмётся{cursor:pointer}
tr.жмётся:hover td{background:rgba(255,246,230,.04)}
tr.открыт td{background:rgba(255,246,230,.05)}
tr.открыт.горе td{background:color-mix(in oklab, var(--rust) 6%, transparent)}
.раскрыть{display:inline-block; width:20px; height:20px; line-height:19px;
  text-align:center; border-radius:6px; font-size:14px; color:var(--sand-dim);
  background:rgba(255,246,230,.07)}
tr.разбор td{padding:0 0 14px; background:rgba(255,246,230,.05)}
tr.разбор.горе td{background:color-mix(in oklab, var(--rust) 6%, transparent)}
.разбор-в{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;
  padding:14px 16px; border-radius:12px; border:1px solid var(--seam);
  border-left:4px solid var(--seam-2); background:rgba(26,22,17,.6)}
tr.разбор.горе .разбор-в{border-left-color:var(--rust)}
.разбор-слева{flex:1 1 260px; min-width:240px}
.разбор-справа{flex:1 1 300px; min-width:260px}
.загол{display:block; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sand-dim); margin:0 0 5px}
.разбор-слева .загол:not(:first-child),.разбор-справа .загол:not(:first-child){margin-top:12px}
.причина{margin:0 0 12px; font-size:13.5px; line-height:1.45; text-wrap:pretty}

.пары{display:grid; gap:6px}
.пара{display:flex; gap:10px; align-items:baseline; font-size:12.5px}
.пара > span{flex:none; width:88px; color:var(--sand-dim)}
.пара > b{font-weight:600; font-size:13px}
.пара em{font-style:normal; font-size:11.5px}

/* Лента событий: попытки выдачи, платежи, след поставщика, коды. Одинаковая
   форма у всех четырёх — читать приходится по очереди, и переучиваться на
   каждом блоке незачем. */
.лента{margin:0; padding:0; list-style:none; display:grid; gap:5px}
.лента li{display:flex; gap:9px; align-items:baseline; flex-wrap:wrap;
  padding:7px 10px; border-radius:9px; font-size:12px;
  background:rgba(0,0,0,.28); border-left:3px solid var(--seam-2)}
.лента li.ok{border-left-color:var(--ore)}
.лента li.bad{border-left-color:var(--rust)}
.лента li b{flex:none; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--sand-dim)}
.лента li span{flex:1 1 120px; min-width:0; word-break:break-word}
.лента li u{flex:none; text-decoration:none; font-size:11px; color:var(--sand-dim)}

.разбор-кнопки{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:14px}

/* ── товары ──────────────────────────────────────────────────────────── */
.действия{white-space:nowrap}
.действия button + button{margin-left:6px}
.маржа{display:block; margin-top:2px; font-style:normal; font-size:11.5px;
  font-weight:700}

/* ── бесконечный товар ───────────────────────────────────────────────── */
/* У товара от поставщика склада нет вовсе, и честный ноль в колонке «Свободно»
   читался как «кончилось». Знак бесконечности говорит правду: считать нечего. */
.беск{color:var(--sand-dim); font-size:17px; line-height:1}

/* ═══ телефон ════════════════════════════════════════════════════════════
   Пульт открывают с телефона чаще, чем с компьютера: он живёт в телеграме.
   Всё, что не помещается, должно переноситься само, а не уезжать за край —
   уехавшая за край страница ездит вбок целиком, и тогда не читается ничто. */
@media (max-width: 760px){
  .pult{padding:0 12px 48px}
  .pult-top{margin:0 -12px; padding:10px 12px; gap:8px}
  .pult-tabs{margin:0 -12px 14px; padding:8px 12px}
  /* Поиск уходит на свою строку целиком: на 360 пикселях он не ужимается
     ни во что читаемое рядом с двумя кнопками. */
  .find{order:3; flex:1 0 100%}
  .freshness{display:none}
  .brand span{display:none}
  /* Прокрутили — оставляем только поиск и валюту. Вывеска и «Выйти» нужны в
     начале работы, поиск — всё время, пока листаешь список. */
  body.ужато .brand,body.ужато #refresh,body.ужато #exit{display:none}
  body.ужато .find{order:0; flex:1 1 auto}
  body.ужато .top-right{margin-left:0}
  body.ужато .pult-top{padding-top:8px; padding-bottom:8px}
  /* Колонки, без которых строка остаётся понятной. Прятать их честнее, чем
     оставлять таблицу, которую всё равно придётся листать вбок: сумму и
     состояние нужно видеть сразу, а время создания — почти никогда. */
  .узко{display:none}
  .card{padding:14px}
  .tiles{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px}
  .tile{padding:12px 13px}
  .tile b{font-size:22px}
  .разбор-в{gap:14px; padding:12px}
  /* На телефоне строка приёмки складывается в столбик: имя с остатком сверху,
     поле под ним во всю ширину — вставлять коды пальцем иначе нечем. */
  .стр{grid-template-columns:1fr auto; gap:8px 10px}
  .стр textarea{grid-column:1 / -1}
  .стр-цена{grid-column:1 / -1}
  .стр-цена input{width:100%}
  .стр-итог{grid-column:1 / -1}
  .закупка input{width:100%}
  .приёмка-кнопки{margin-left:0; width:100%}
  .приёмка-кнопки .gold{width:100%}
  .разбор-слева,.разбор-справа{min-width:0; flex-basis:100%}
}

@media (max-width: 620px){
  .tile.wide{grid-column:span 1}
  .lvl{grid-template-columns:110px 1fr 40px}
  .two{grid-template-columns:1fr}
  .sheet{padding:0; align-items:end}
  .sheet-card{width:100%; max-height:92vh; border-radius:20px 20px 0 0}
}

/* ─── от выручки к чистой прибыли ──────────────────────────────────────── */
/* Строка на каждый вычет, полоса длиной в долю от выручки. Цветом сказано
   ровно три вещи — основа, вычет, итог, — и каждая строка вдобавок подписана
   словами: различать вычеты между собой цветом не нужно, их называют имена. */
.каскад{display:grid; gap:2px}
.шаг{display:grid; grid-template-columns:minmax(150px, 1.1fr) minmax(90px, 2fr) auto;
  align-items:center; gap:8px 14px; padding:9px 12px; border-radius:10px}
.шаг:hover{background:var(--stone-2)}
.шаг-имя{font-size:13px; min-width:0}
.шаг-имя span{display:block; font-size:11px; color:var(--sand-dim); margin-top:1px}
.шаг-полоса{height:10px; border-radius:5px; background:rgba(0,0,0,.3); overflow:hidden}
.шаг-полоса i{display:block; height:100%; border-radius:5px}
.шаг-сумма{text-align:right; font-size:14.5px; font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.шаг-сумма .вторая{display:block; font-size:11px; font-weight:400}

.шаг.основа .шаг-полоса i{background:var(--sand-dim)}
.шаг.основа .шаг-сумма{color:var(--cream)}
/* Вычеты — одним цветом на все три: это одна и та же беда, деньги уходят. */
.шаг.вычет .шаг-полоса i{background:var(--rust); opacity:.75}
.шаг.вычет .шаг-сумма{color:var(--rust)}
.шаг.итог{border-top:1px solid var(--seam); margin-top:3px; padding-top:11px}
.шаг.итог .шаг-полоса i{background:var(--ore); opacity:.5}
.шаг.итог .шаг-сумма{color:var(--sand)}
/* Итог итогов. Ради этой строки открывают вкладку. */
.шаг.чисто{border-top:1px solid var(--seam-2); margin-top:3px; padding-top:12px;
  background:linear-gradient(90deg, rgba(127,214,160,.07), transparent 70%)}
.шаг.чисто .шаг-имя{font-weight:600}
.шаг.чисто .шаг-полоса i{background:var(--ore)}
.шаг.чисто .шаг-сумма{color:var(--ore); font-size:17px; font-weight:700}
.шаг.чисто.минус .шаг-полоса i{background:var(--rust)}
.шаг.чисто.минус .шаг-сумма{color:var(--rust)}

/* Ставки. Меняются без выката — касса пересмотрела тариф, самозанятый стал
   ИП, — и держать их числом в коде значит раз в год врать в главном расчёте. */
.ставки{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--seam)}
.ставки[hidden]{display:none}
.ставки label{display:grid; gap:4px; font-size:12px; color:var(--sand-dim)}
.ставки input{width:110px; padding:8px 10px; border-radius:9px;
  border:1px solid var(--seam-2); background:rgba(0,0,0,.25); color:var(--cream);
  font-variant-numeric:tabular-nums}
.ставки u{text-decoration:none; font-size:10.5px}
.ставки-низ{display:flex; align-items:center; gap:12px; flex:1 1 240px}
.ставки-низ .dim{font-size:11.5px}

/* ─── меры ─────────────────────────────────────────────────────────────── */
/* Полоса, а не круглый циферблат: доля читается длиной, и три полосы рядом
   сравниваются между собой, чего с тремя циферблатами не сделать. */
.меры{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:18px}
.мера-верх{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.мера-верх b{font-size:13px; font-weight:600}
.мера-верх u{text-decoration:none; font-size:22px; font-weight:700;
  font-variant-numeric:tabular-nums}
/* Незаполненная часть — тот же цвет, погашенный: состояние читается по всей
   полосе, а не только по её началу. */
.мера-жёлоб{height:8px; border-radius:4px; margin:7px 0 6px; overflow:hidden}
.мера-жёлоб i{display:block; height:100%; border-radius:4px}
.мера p{margin:0; font-size:11.5px; color:var(--sand-dim); line-height:1.5}
.худо{color:var(--rust)} .средне{color:var(--lamp)} .ладно{color:var(--ore)}
.мера-жёлоб{background:rgba(139,127,106,.16)}
.мера-жёлоб i.худо{background:var(--rust)}
.мера-жёлоб i.средне{background:var(--lamp)}
.мера-жёлоб i.ладно{background:var(--ore)}

/* ─── на чём зарабатываем ──────────────────────────────────────────────── */
/* Свой склад и поставщик — разные дела с разными деньгами, и сводка по ним
   стоит ПЕРЕД списком: первое, что нужно знать про склад, — сколько он вообще
   приносит против покупки под заказ. */
.истоки{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px; margin-bottom:20px}
.исток{padding:14px 16px; border-radius:13px; background:rgba(0,0,0,.22);
  border:1px solid var(--seam); border-left-width:3px}
.исток.склад{border-left-color:var(--ore)}
.исток.поставщик{border-left-color:var(--sand-dim)}
.исток span{display:block; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--sand-dim)}
.исток b{display:block; margin:4px 0 5px; font-size:24px; font-weight:700}
.исток u{display:block; text-decoration:none; font-size:12.5px; color:var(--sand)}
.исток em{display:block; margin-top:3px; font-style:normal; font-size:11.5px;
  color:var(--sand-dim)}

/* Строка в две полки: сверху имя и числа, под ними полоса во всю ширину.
   Раньше всё жалось в три колонки, полоса выходила в палец шириной, а имя
   игры обрезалось многоточием — читать это было нечем. */
.полосы{display:grid; gap:2px}
.полоса-стр{padding:11px 12px 13px; border-radius:11px}
.полоса-стр:hover{background:var(--stone-2)}
.полоса-верх{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:8px}
.полоса-имя{min-width:0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.полоса-имя b{font-size:15px; font-weight:600}
.полоса-имя span{font-size:11.5px; color:var(--sand-dim)}
/* Метка написана СЛОВАМИ, а не только цветом: откуда товар — это не оттенок,
   а факт, от которого зависят деньги. */
.метка{font-style:normal; font-size:10.5px; padding:2px 7px; border-radius:6px;
  white-space:nowrap; letter-spacing:.02em}
.метка.склад{background:rgba(127,214,160,.14); color:var(--ore)}
.метка.поставщик{background:rgba(139,127,106,.16); color:var(--sand)}
.полоса-числа{text-align:right; white-space:nowrap; margin-left:auto}
.полоса-числа b{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.полоса-числа span{display:block; font-size:11.5px; color:var(--sand-dim);
  font-variant-numeric:tabular-nums}
.полоса-числа .под-вопросом{color:var(--lamp)}
/* Жёлоб — это ВЫРУЧКА, а не подложка: он несёт величину и обязан читаться. */
.жёлоб{height:14px; border-radius:7px; background:var(--seam-2); overflow:hidden;
  min-width:8px}
.жёлоб i{display:block; height:100%; border-radius:7px; background:var(--ore)}
/* Ключ обязателен: две части полосы — две величины, и по цвету одному
   догадаться, какая из них какая, нельзя. */
.полоса-ключ{display:flex; align-items:center; gap:7px; margin:12px 0 0 12px;
  font-size:11.5px; color:var(--sand-dim)}
.полоса-ключ i{width:11px; height:11px; border-radius:3px; display:inline-block}
.полоса-ключ i+*{margin-right:10px}
.ключ-выручка{background:var(--seam-2)}
.ключ-чистая{background:var(--ore)}

/* Молчавшие. Не пустая строка, а вывод: игра, занявшая место в меню и не
   принёсшая ничего, стоит внимания ровно столько же, сколько кормящая. */
.молчали{margin-top:18px; padding-top:15px; border-top:1px solid var(--seam)}
.молчали b{font-size:12.5px; color:var(--sand)}
.молчали p{display:flex; flex-wrap:wrap; gap:7px; margin:9px 0 0}
.молчали span{display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  border-radius:8px; background:rgba(0,0,0,.24); border:1px solid var(--seam);
  font-size:12px; color:var(--sand)}
.молчали u{text-decoration:none; font-size:10.5px; color:var(--sand-dim);
  font-variant-numeric:tabular-nums}
.молчали em{display:block; margin-top:9px; font-style:normal; font-size:11px;
  color:var(--sand-dim)}

/* ─── когда покупают ───────────────────────────────────────────────────── */
/* Один оттенок, гуще к частому: это величина, а не разные сущности, и радуга
   соврала бы про порядок. */
.часы{display:grid; gap:3px; overflow-x:auto; padding-bottom:4px}
.часы-шапка,.часы-ряд{display:grid; grid-template-columns:26px repeat(24, minmax(11px, 1fr));
  gap:3px; align-items:center; min-width:420px}
.часы-шапка u{text-decoration:none; font-size:10.5px; color:var(--sand-dim);
  text-align:center; font-variant-numeric:tabular-nums}
.часы-ряд span{font-size:11.5px; color:var(--sand-dim)}
.часы-ряд i{display:block; height:21px; border-radius:4px; background:var(--lamp);
  min-width:0}
/* Шкала обязательна: без неё густота клетки говорит «больше», но не говорит
   «больше чего» — а два часа подряд могут отличаться в десять раз. */
.часы-ключ{display:flex; align-items:center; gap:4px; margin-top:10px;
  font-size:11px; color:var(--sand-dim)}
.часы-ключ i{width:16px; height:11px; border-radius:3px; background:var(--lamp)}
.часы-ключ i.пусто{background:rgba(139,127,106,.13)}
.часы-ключ span:first-child{margin-right:4px}
.часы-ключ span:last-child{margin-left:7px}
/* Пустой час — не «мало заказов», а «их не было»: своя заливка, чтобы ноль
   не сливался с единицей. Отдельным классом, а не по инлайновому стилю:
   «opacity:0» как подстрока ловит и 0.16, и 0.84 — то есть все клетки
   разом, и вся сетка выцветала до пустой. */
.часы-ряд i.пусто{background:rgba(139,127,106,.13)}

@media (max-width: 720px){
  .шаг{grid-template-columns:1fr auto; gap:6px 10px}
  .шаг-полоса{grid-column:1 / -1; order:3}
  .шаг-сумма{text-align:right}
  .исток b{font-size:21px}
  .полоса-числа{margin-left:0; text-align:left}
  .полоса-числа span{display:inline}
}

/* Потолок шкалы графика. Без него высота столбика говорит только «выше» — но
   не во сколько раз и не от какого числа. */
.chart-верх{display:flex; justify-content:flex-end; font-size:11.5px;
  color:var(--sand-dim); margin-bottom:4px; font-variant-numeric:tabular-nums}

/* Доля в колонке выручки. По одним числам в столбце не видно, кто из
   двенадцати кормит, а кто попал в список по одному дорогому заказу. */
.доля{min-width:150px}
.доля-в{display:flex; align-items:center; gap:9px}
.доля-в i{display:block; height:9px; border-radius:5px; background:var(--seam-2);
  flex:0 0 auto; min-width:4px}
.доля-в b{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ─── что закупить ─────────────────────────────────────────────────────── */
/* Главное число этой карточки — не «сколько осталось», а «сколько взять и во
   что это обойдётся»: закупка вперёд замораживает оборотные деньги, и
   решение принимают по сумме, а не по списку. */
.закупить-итог{margin-bottom:16px}
.закупить-число{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px;
  font-size:13px; color:var(--sand)}
.закупить-число b{font-size:21px; font-weight:700; color:var(--cream)}
.закупить-число u{text-decoration:none; font-weight:700; color:var(--ore)}
.закупить-число em{font-style:normal; font-size:11.5px}
.закупить-число.ладно{color:var(--ore)}
/* Потерянное — отдельной строкой и красным. Это уже случилось, это деньги,
   которые вернули покупателю, и рядом с планом закупки оно объясняет, зачем
   план вообще нужен. */
.потеряно{margin-top:10px; padding:10px 13px; border-radius:10px; font-size:12.5px;
  color:var(--rust); background:rgba(217,119,87,.09);
  border-left:3px solid var(--rust)}
.потеряно b{font-weight:700}
/* Вторая сторона решения о закупке. Цену закупки знаем не всегда, а цену
   продажи — всегда: она на витрине. «Взять 22 кода» без неё висит расходом
   без повода, хотя повод как раз и есть. */
.выручит{display:block; font-size:10.5px; color:var(--ore)}

/* ─── пересчёт цен ─────────────────────────────────────────────────────── */
/* Цена — единственное в пульте, что видит покупатель. Поэтому расчёт и запись
   разведены: план показывается целиком, и только второе нажатие пишет. */
.пересчёт{margin-bottom:16px; padding:14px 16px; border-radius:12px;
  background:rgba(0,0,0,.22); border:1px solid var(--seam)}
.пересчёт[hidden]{display:none}
.пересчёт-верх{display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px 16px}
.пересчёт-верх label{display:grid; grid-template-columns:auto auto; gap:4px 6px;
  align-items:center}
.пересчёт-верх label span{grid-column:1 / -1; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sand-dim)}
.пересчёт-верх input{width:86px; padding:8px 10px; border-radius:9px;
  border:1px solid var(--seam-2); background:rgba(0,0,0,.28); color:var(--cream);
  font-variant-numeric:tabular-nums}
.пересчёт-верх u{text-decoration:none; color:var(--sand-dim)}
.пересчёт-верх em{flex:1 1 240px; font-style:normal; font-size:11.5px; line-height:1.55}
.пересчёт-план{margin-top:14px; padding-top:14px; border-top:1px solid var(--seam)}
.пересчёт-план table{width:100%}
.пересчёт-план p{margin:10px 0 0; font-size:11.5px}
.пересчёт-низ{display:flex; align-items:center; gap:12px; margin-top:14px}
.пересчёт-низ .dim{font-size:11.5px}
/* Полоса конверсии. Красная — заметно ниже средней по магазину: это не
   поломка кассы, а цена или сам товар. */
.доля-в i.худо{background:var(--rust)}
.доля-в u{text-decoration:none; font-size:10px; white-space:nowrap}

/* ─── сторож склада ────────────────────────────────────────────────────── */
.сторож{margin-bottom:16px; padding:13px 15px; border-radius:12px;
  background:rgba(0,0,0,.22); border:1px solid var(--seam)}
.сторож[hidden]{display:none}
.сторож-вкл{display:flex; align-items:center; gap:9px; font-size:13px;
  cursor:pointer; margin-bottom:12px}
.сторож-вкл input{width:17px; height:17px; accent-color:var(--lamp); cursor:pointer}
.сторож-поля{display:flex; flex-wrap:wrap; gap:12px 16px}
.сторож-поля label{display:grid; grid-template-columns:auto auto; gap:4px 6px;
  align-items:center}
.сторож-поля span{grid-column:1 / -1; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sand-dim)}
.сторож-поля input{width:74px; padding:7px 9px; border-radius:9px;
  border:1px solid var(--seam-2); background:rgba(0,0,0,.28); color:var(--cream);
  font-variant-numeric:tabular-nums}
.сторож-поля u{text-decoration:none; font-size:11.5px; color:var(--sand-dim)}
.сторож-низ{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px;
  margin-top:13px}
.сторож-низ .dim{font-size:11.5px}
.сторож-ответ{margin:11px 0 0; font-size:12.5px; color:var(--sand)}
.сторож-ответ.плохо{color:var(--rust)}
.сторож-ответ.ладно{color:var(--ore)}

/* ─── цены поставщиков ─────────────────────────────────────────────────── */
/* Дешёвого отмечаем и цветом, и словом: строка читается по диагонали, и
   зелёная плашка без подписи требует помнить, что она значит. */
.цены{display:flex; flex-wrap:wrap; gap:6px}
.цены span{display:inline-flex; align-items:baseline; gap:6px; padding:4px 9px;
  border-radius:8px; background:rgba(0,0,0,.26); border:1px solid var(--seam);
  font-size:11.5px; color:var(--sand-dim)}
.цены b{font-size:12.5px; color:var(--cream); font-variant-numeric:tabular-nums}
.цены .дешевле{border-color:rgba(127,214,160,.4); color:var(--ore)}
.цены .дешевле b{color:var(--ore)}
.цены .дешевле::after{content:'дешевле'; font-size:9.5px; letter-spacing:.04em;
  text-transform:uppercase; opacity:.75}

/* ─── долг перед покупателями ──────────────────────────────────────────── */
/* Красная кайма и место в самом верху вкладки: это чужие деньги, лежащие у
   нас, и они важнее любой нашей потери. */
.card.долговая{border-color:rgba(217,119,87,.4)}
.card.долговая[hidden]{display:none}
.долг-низ{margin:14px 0 0; padding-top:13px; border-top:1px solid var(--seam);
  font-size:12px; color:var(--sand-dim); line-height:1.6; max-width:82ch}
.долг-низ b{color:var(--sand)}
#debtTable td span.red{display:block; font-size:11px}

/* ─── когорты ──────────────────────────────────────────────────────────── */
/* Два столбика в одном: доля вернувшихся и сколько принёс один пришедший.
   Порознь они отвечают на половину вопроса — можно удержать всех и не
   заработать, а можно удержать треть и жить на ней. */
.когорты{display:flex; align-items:flex-end; gap:8px; overflow-x:auto;
  padding-bottom:4px}
.когорта{flex:1 1 44px; min-width:44px; display:grid; justify-items:center; gap:3px}
.когорта-полоса{position:relative; width:100%; height:120px; display:flex;
  align-items:flex-end; gap:3px; justify-content:center}
.когорта-полоса i,.когорта-полоса u{display:block; width:13px; border-radius:3px 3px 0 0}
.когорта-полоса i{background:var(--ore)}
.когорта-полоса u{background:var(--lamp); opacity:.65}
.когорта b{font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.когорта span{font-size:10.5px; color:var(--sand-dim); font-variant-numeric:tabular-nums}
.когорта em{font-style:normal; font-size:10px; color:var(--sand-dim)}
.когорты-ключ{display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:12px;
  font-size:11.5px; color:var(--sand-dim)}
.когорты-ключ span{display:inline-flex; align-items:center; gap:6px}
.когорты-ключ i,.когорты-ключ u{width:11px; height:11px; border-radius:3px}
.когорты-ключ i{background:var(--ore)}
.когорты-ключ u{background:var(--lamp); opacity:.65}
/* Оговорка обязательна: у свежих месяцев доля всегда ниже, и без неё «0%»
   за сентябрь читается как обвал, хотя это просто вчерашние покупатели. */
.когорты-низ{margin:12px 0 0; font-size:11.5px; color:var(--sand-dim);
  line-height:1.6; max-width:78ch}

/* ─── не готово к продаже ──────────────────────────────────────────────── */
.card.готовность{border-color:rgba(217,119,87,.4)}
.card.готовность[hidden]{display:none}
.готово-список{display:grid; gap:10px}
.готово-игра{padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.22);
  border:1px solid var(--seam); border-left-width:3px}
.готово-игра.беда{border-left-color:var(--rust)}
.готово-игра:not(.беда){border-left-color:var(--lamp)}
.готово-имя{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:7px}
.готово-имя b{font-size:14px}
.готово-имя span{font-size:11.5px; color:var(--sand-dim)}
.готово-игра ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.готово-игра li{font-size:12px; line-height:1.5; color:var(--sand-dim)}
.готово-игра li b{font-weight:600}
.готово-игра li u{text-decoration:none; font-size:10.5px; margin-left:6px;
  padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.35); cursor:pointer}
.готово-игра li.нет,.готово-игра li.нет b{color:var(--rust)}
.готово-игра li.под-вопросом,.готово-игра li.под-вопросом b{color:var(--lamp)}

/* ─── сколько ждут товар ───────────────────────────────────────────────── */
/* Ступени, а не средняя: человек, ждущий десять секунд, считает, что получил
   сразу, а ждущий пять минут — что сломалось. Между ними нет середины,
   которую можно усреднить. */
.ступени{display:grid; gap:7px; margin-bottom:18px}
.ступень{display:grid; grid-template-columns:minmax(110px, auto) 1fr auto auto;
  align-items:center; gap:12px}
.ступень>span{font-size:12.5px; color:var(--sand)}
.ступень-полоса{height:12px; border-radius:6px; background:rgba(0,0,0,.28)}
.ступень-полоса i{display:block; height:100%; border-radius:6px; background:var(--sand-dim)}
.ступень-полоса i.ладно{background:var(--ore)}
.ступень-полоса i.худо{background:var(--rust)}
.ступень b{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  min-width:42px; text-align:right}
.ступень u{text-decoration:none; font-size:11px; color:var(--sand-dim);
  font-variant-numeric:tabular-nums; min-width:42px; text-align:right}

@media (max-width: 720px){
  .ступень{grid-template-columns:1fr auto auto; gap:6px 10px}
  .ступень-полоса{grid-column:1 / -1; order:3}
}

/* ─── имя товара ───────────────────────────────────────────────────────── */
/* Три уровня, и порядок именно такой: что это (номинал), откуда (сервис и
   страна), артикул. «450 RON» само по себе не говорит ничего — ни какой
   сервис, ни какая страна; «PlayStation · Румыния» под ним говорит всё.
   Артикул нужен для поиска и разговора с поставщиком, но он техническая
   строка, и место ей последнее. */
.где{display:block; font-size:11.5px; color:var(--sand); margin-top:1px}
.арт{display:inline-block; margin-top:2px; font-size:10px; color:var(--sand-dim);
  letter-spacing:.01em; cursor:pointer; opacity:.65; text-decoration:none}
.арт:hover{opacity:1; color:var(--lamp)}
/* В приёмке строка узкая, и три яруса её распирают: там артикул рядом. */
.стр-имя .где{font-size:11px}
.стр-имя .арт{margin-top:1px}
.готово-игра li i{font-style:normal; color:var(--sand)}

/* ─── витрина ──────────────────────────────────────────────────────────── */
/* Дерево, а не таблица: решение принимается про целое — убрать игру, спрятать
   раздел, — и тысячу строк для этого листать не надо. */
.витрина-обещание{margin:0 0 16px; padding:11px 14px; border-radius:11px;
  background:rgba(127,214,160,.07); border:1px solid rgba(127,214,160,.22);
  border-left-width:3px; border-left-color:var(--ore);
  font-size:12.5px; line-height:1.6; color:var(--sand); max-width:80ch}
.витрина-обещание b{color:var(--ore)}

.дерево{display:grid; gap:6px}
.ветка{border-radius:13px; background:rgba(0,0,0,.2);
  border:1px solid var(--seam); overflow:hidden}
.ветка.открыта{border-color:var(--seam-2); background:rgba(0,0,0,.3)}
/* Убранная игра гасится целиком: по одному взгляду на список видно, что
   продаётся, а что стоит. */
.ветка.с-убрана{opacity:.55}
.ветка.с-скоро .ветка-имя b::after{content:' · скоро'; color:var(--lamp);
  font-weight:400; font-size:11.5px}
.ветка-верх{display:grid; grid-template-columns:auto minmax(150px, 1.4fr) auto auto;
  align-items:center; gap:10px 14px; padding:13px 15px; cursor:pointer}
.ветка-верх:hover{background:var(--stone-2)}
.стрелка{font-style:normal; color:var(--sand-dim); font-size:11px; width:10px}
.ветка-имя{min-width:0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.ветка-имя b{font-size:15px; font-weight:600}
.ветка-имя span{flex:1 1 100%; font-size:11.5px; color:var(--sand-dim)}
.ветка-числа{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.ветка-числа b{font-size:14px; font-weight:600}
.ветка-числа span{display:block; font-size:11px; color:var(--sand-dim)}
.ветка-числа em{display:block; font-style:normal; font-size:11px; margin-top:2px}
.ветка-числа u{text-decoration:none; color:var(--sand)}
.ветка-числа u.кровь{color:var(--rust); font-weight:600}

/* Три состояния рядом, а не выпадающим списком: их всего три, и разница
   между «скоро» и «убрана» должна быть видна без открывания. */
.ветка-вид{display:flex; gap:3px; padding:3px; border-radius:10px;
  background:rgba(0,0,0,.32)}
.сост{padding:6px 11px; border-radius:8px; font-size:11.5px; color:var(--sand-dim);
  white-space:nowrap; transition:background .12s, color .12s}
.сост:hover{color:var(--cream)}
.сост.on{background:var(--seam-2); color:var(--cream); font-weight:600}
.ветка.с-продаём .сост.on{background:rgba(127,214,160,.18); color:var(--ore)}
.ветка.с-скоро .сост.on{background:rgba(232,181,92,.16); color:var(--lamp)}
.ветка.с-убрана .сост.on{background:rgba(217,119,87,.16); color:var(--rust)}

.ветки{border-top:1px solid var(--seam); padding:6px 15px 13px 38px; display:grid; gap:2px}
.лист{display:grid; grid-template-columns:minmax(140px, 1.6fr) auto auto;
  align-items:center; gap:8px 14px; padding:9px 11px; border-radius:10px}
.лист:hover{background:rgba(0,0,0,.25)}
.лист.скрыт{opacity:.5}
.лист-имя b{font-size:13.5px; font-weight:600}
.лист-имя span{display:block; font-size:11px; color:var(--sand-dim); margin-top:1px}
.лист-имя u{text-decoration:none}
.лист-имя u.кровь{color:var(--rust)}
.лист-числа{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.лист-числа b{font-size:13px; font-weight:600}
.лист-числа span{display:block; font-size:10.5px; color:var(--sand-dim)}
.лист-кнопки{display:flex; align-items:center; gap:8px}

/* Переключатель, а не галочка: у галочки состояние читается только по
   заливке, а тут его ещё и написано словом. */
.переключ{display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 6px;
  border-radius:20px; background:rgba(0,0,0,.34); border:1px solid var(--seam-2);
  font-size:11.5px; color:var(--sand-dim); white-space:nowrap}
.переключ i{width:30px; height:17px; border-radius:9px; background:var(--seam-2);
  position:relative; transition:background .15s}
.переключ i::after{content:''; position:absolute; top:2px; left:2px;
  width:13px; height:13px; border-radius:50%; background:var(--sand-dim);
  transition:transform .15s, background .15s}
.переключ.on{color:var(--ore); border-color:rgba(127,214,160,.35)}
.переключ.on i{background:rgba(127,214,160,.35)}
.переключ.on i::after{transform:translateX(13px); background:var(--ore)}

@media (max-width: 720px){
  .ветка-верх{grid-template-columns:auto 1fr; gap:8px 10px}
  .ветка-числа{grid-column:2; text-align:left}
  .ветка-вид{grid-column:1 / -1; justify-content:stretch}
  .ветка-вид .сост{flex:1; text-align:center}
  .ветки{padding-left:15px}
  .лист{grid-template-columns:1fr auto}
  .лист-кнопки{grid-column:1 / -1; justify-content:flex-end}
}

/* ─── сверка с кассой ──────────────────────────────────────────────────── */
/* Четыре кучи, и они не равны: две означают потерянные деньги, две — повод
   посмотреть. Разделены каймой, а не только заголовком. */
.сверка{display:grid; gap:14px}
.сверка-куча{padding:13px 15px; border-radius:13px; background:rgba(0,0,0,.22);
  border:1px solid var(--seam); border-left-width:3px;
  border-left-color:var(--sand-dim)}
.сверка-куча.беда{border-left-color:var(--rust)}
.сверка-верх{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap}
.сверка-верх b{font-size:14px}
.сверка-куча.беда .сверка-верх b{color:var(--rust)}
.сверка-верх u{text-decoration:none; font-size:12px; color:var(--sand);
  font-variant-numeric:tabular-nums}
.сверка-куча>p{margin:5px 0 10px; font-size:11.5px; color:var(--sand-dim);
  line-height:1.55; max-width:78ch}
.сверка-куча table{width:100%}
.сверка-куча .dim{font-size:11px}

/* ─── черновик витрины ─────────────────────────────────────────────────── */
/* Липкая полоса внизу: пока правки не сохранены, их видно, куда ни прокрути.
   Это и снимает вопрос «применилось ли», из-за которого нажатие повторяли. */
.черновик{position:sticky; bottom:0; z-index:6; margin:16px -18px -18px;
  padding:14px 18px; border-top:1px solid var(--lamp);
  background:linear-gradient(180deg, rgba(19,16,12,.9), var(--deep));
  backdrop-filter:blur(8px); border-radius:0 0 18px 18px}
.черновик[hidden]{display:none}
.черновик-верх{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.черновик-верх b{font-size:14px; color:var(--lamp)}
.черновик-верх span{font-size:12px; color:var(--sand-dim)}
.черновик-список{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px;
  max-height:180px; overflow-y:auto}
.черновик-список li{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:12px; padding:4px 9px; border-radius:8px; background:rgba(0,0,0,.28)}
.черновик-список b{font-weight:600}
.черновик-список span{color:var(--sand-dim)}
.черновик-список u{text-decoration:none; font-size:11px; color:var(--sand-dim)}
.черновик-список .прячем b{color:var(--rust)}
.черновик-список .вернём b{color:var(--ore)}
/* Цена решения — там же, где кнопка. Подтверждения больше нет, и всё, что оно
   пыталось сказать, должно быть сказано здесь и не исчезать. */
.черновик-цена{margin:10px 0 0; font-size:11.5px; color:var(--sand-dim);
  line-height:1.55; max-width:80ch}
.черновик-цена b{color:var(--rust)}
.черновик-низ{display:flex; align-items:center; gap:10px; margin-top:12px}
.черновик-низ .gold{margin-left:auto}
.черновик-ответ{margin:10px 0 0; font-size:12.5px}
.черновик-ответ.плохо{color:var(--rust)}
.черновик-готово{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.черновик-готово b{color:var(--ore); font-size:13.5px}
.черновик-готово span{flex:1 1 320px; font-size:11.5px; color:var(--sand-dim);
  line-height:1.55}

/* Правленая, но не сохранённая ветка помечена лампой: видно, что тронуто. */
.ветка.правлена,.лист.правлена{outline:1px solid rgba(232,181,92,.45);
  outline-offset:-1px}
.не-сохр{font-style:normal; font-size:10.5px; color:var(--lamp);
  padding:1px 6px; border-radius:6px; background:rgba(232,181,92,.13);
  white-space:nowrap}

/* ─── полоска в плитке ─────────────────────────────────────────────────── */
/* Число без хода ничего не значит: «83 тысячи прибыли» — это рост или
   падение, видно только рядом с прошлыми днями. Линия тонкая и приглушённая,
   последняя точка акцентом: глаз сам идёт к «сегодня». */
.спарк{display:block; width:100%; height:26px; margin:6px 0 2px; overflow:visible}
.спарк path{fill:none; stroke:var(--sand-dim); stroke-width:1.6;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.спарк circle{fill:var(--ore)}
.tile.good .спарк path{stroke:rgba(127,214,160,.5)}
.tile.bad .спарк path{stroke:rgba(217,119,87,.5)}
.tile.bad .спарк circle{fill:var(--rust)}

/* ─── месяц против прошлого ────────────────────────────────────────────── */
.гонка-холст{width:100%; height:auto; display:block}
.гонка-холст .сеть{stroke:var(--seam); stroke-width:1; vector-effect:non-scaling-stroke}
.гонка-холст .подпись{fill:var(--sand-dim); font-size:9px}
.гонка-холст .ось{fill:var(--sand-dim); font-size:9px; text-anchor:middle}
/* Прошлый месяц — фон, этот — рассказ. Толщина и цвет говорят об этом раньше,
   чем человек дочитает подпись. */
.гонка-холст .было{fill:none; stroke:var(--sand-dim); stroke-width:1.8;
  stroke-dasharray:none; opacity:.55; vector-effect:non-scaling-stroke}
.гонка-холст .стало{fill:none; stroke:var(--ore); stroke-width:2.4;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.гонка-холст .точка{fill:var(--ore)}
.гонка-холст .метка-день{stroke:var(--seam-2); stroke-width:1;
  vector-effect:non-scaling-stroke}
.гонка-ключ{display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:10px;
  font-size:11.5px; color:var(--sand-dim)}
.гонка-ключ span{display:inline-flex; align-items:center; gap:7px}
.гонка-ключ i{width:14px; height:3px; border-radius:2px}
.к-стало{background:var(--ore)}
.к-было{background:var(--sand-dim); opacity:.55}

/* ─── полки чека ───────────────────────────────────────────────────────── */
/* Полоса держит ВЫРУЧКУ, потому что решают по ней; число заказов стоит рядом
   цифрой — двух шкал на одной картинке быть не должно. */
.полки{display:grid; gap:4px}
.полка-стр{display:grid; grid-template-columns:minmax(110px, auto) 1fr auto;
  align-items:center; gap:12px; padding:7px 11px; border-radius:10px}
.полка-стр:hover{background:var(--stone-2)}
.полка-стр.середина{background:rgba(232,181,92,.07)}
.полка-имя{font-size:12.5px; color:var(--sand); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.полка-жёлоб{height:12px; border-radius:6px; background:rgba(0,0,0,.26)}
.полка-жёлоб i{display:block; height:100%; border-radius:6px; background:var(--sand-dim)}
.полка-стр.середина .полка-жёлоб i{background:var(--lamp)}
.полка-числа{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.полка-числа b{font-size:13px; font-weight:600}
.полка-числа span{display:block; font-size:10.5px; color:var(--sand-dim)}

/* ─── малые графики по играм ───────────────────────────────────────────── */
/* Шесть подписанных картинок рядом сравниваются сами — в отличие от восьми
   цветов на тёмном фоне, которые всё равно не различить. */
.малые{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px}
.малый{padding:12px 13px; border-radius:12px; background:rgba(0,0,0,.22);
  border:1px solid var(--seam)}
.малый-верх{display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin-bottom:9px}
.малый-верх b{font-size:13px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.малый-верх u{text-decoration:none; font-size:12px; color:var(--sand);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.малый-график{display:flex; align-items:flex-end; gap:2px; height:44px}
.малый-график i{flex:1; border-radius:2px 2px 0 0; background:var(--seam-2);
  min-height:2px}
.малый-график i.край{background:var(--ore)}
.малый-низ{display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin-top:8px; font-size:10.5px; color:var(--sand-dim)}
.малый-низ em{font-style:normal; font-weight:600}

@media (max-width: 720px){
  .полка-стр{grid-template-columns:1fr auto; gap:5px 10px}
  .полка-жёлоб{grid-column:1 / -1; order:3}
}
/* Текущая неделя — не результат, а начало: рисуем её бледной и в сравнение не
   берём, иначе у всех игр разом выходит «минус сто процентов». */
.малый-график i.идёт{background:rgba(232,181,92,.28)}