/* AwTable — таблица кругов кросс-маркетного арбитража CS2.
 *
 * AwTable — локальное рабочее место для сравнения цен и маршрутов CS2.
 * Главный объект — таблица; фильтры собраны в одну панель инструментов.
 * Холодный синий отмечает покупку, янтарный — продажу, зелёный — итог.
 * Страница не зависит от внешних шрифтов и ресурсов.
 */

:root {
  color-scheme: dark;
  /* Один спокойный графитовый слой по всему AwTable. Цветом выделяем
   * только действие, направление цены и значимые состояния. */
  --bg: #0b0c0e;
  --panel: #151619;
  --ink: #f2f4f7;
  --dim: #a5a6aa;
  --faint: #797b81;
  --line: #292a2e;
  --line-strong: #414247;
  --buy: #a9c3eb;
  --sell: #e5b66f;
  --good: #75d4a2;
  --bad: #ff929c;
  --warn-bg: #292318;
  --warn-line: #c99a45;
  --info-bg: #191a1d;
  --info-line: #414247;
  --ok-bg: #172820;
  --ok-line: #52916e;
  --row-hover: #202125;
  --bar: #65676d;
  --inset: #1b1c20;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 12px 30px rgba(0, 0, 0, .22);
  --ok-tint: rgba(93, 190, 132, .12);
  --wait-tint: rgba(214, 158, 68, .14);
  --err-tint: rgba(220, 96, 105, .14);
  --idle-tint: rgba(140, 151, 164, .12);
}

* { box-sizing: border-box; }

/* Атрибут hidden обязан скрывать. Правило браузера [hidden]{display:none}
 * имеет ту же специфичность, что класс, и любой наш display: flex его
 * перебивает — так пустые полосы «обновлено» и «защита ослаблена»
 * показывались, будучи hidden (найдено осмотром страницы 20.08.2026). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* --- Шапка ------------------------------------------------------------- */

.topbar {
  display: flex; align-items: center; justify-content: center;
  min-height: 118px; padding: .45rem 1.4rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px);
}
.brand {
  display: flex; flex-direction: column; align-items: center;
  gap: .2rem; width: 100%;
  justify-content: center;
}
@media (max-width: 1700px) {
  .topbar { padding-top: .35rem; padding-bottom: .35rem; }
}
@media (max-width: 900px) {
  .topbar { justify-content: center; }
}
/* Логотип. В файле надпись занимает среднюю треть по высоте: содержимое
 * начинается со строки 419 из 1254, поля симметричные. object-fit: cover
 * в коробке нужного отношения сторон обрезает эти поля — иначе надпись в
 * шапке оказалась бы втрое мельче, чем есть место. */
.logo {
  height: 60px; width: 176px; object-fit: cover; object-position: center;
  align-self: center; display: block;
}
/* Два файла вместо инверсии: чёрный логотип на светлой теме, белый на
 * тёмной. Оба с прозрачным фоном — проверено по пикселям, не по заголовку
 * PNG: он говорил RGBA, но это ничего не значит без взгляда на альфу. */
.logo-pic { display: flex; align-items: center; }
.brand .route { color: var(--dim); font-size: 14px; }
/* Выбор маршрута — тоже .route, но теперь <select>, а не текст: общий
 * правило `select { width: 100% }` растянуло бы его на всю .brand и
 * сдвинуло логотип, поэтому ширина и рамка переопределены здесь же. */
select.route {
  width: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .55rem; font-size: 14px;
}

.data-meta { margin: 0 0 1rem; }
.data-meta > summary { cursor: pointer; color: var(--dim); font-weight: 650; }
.data-meta[open] > summary { margin-bottom: .8rem; color: var(--ink); }
.data-meta .ages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .55rem; font-size: 14px;
}
.data-meta .age {
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
  padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px;
  background: var(--inset);
}
.data-meta .age b {
  color: var(--faint); font-size: 10px; font-weight: 700;
  letter-spacing: .055em; text-transform: uppercase;
}
.data-meta .age span {
  font: 13px/1.4 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.icon-btn {
  width: 2.25rem; height: 2.25rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

main { width: min(100%, 1920px); margin-inline: auto; padding: 1.15rem 1.4rem 2.5rem; }

.settings-panel {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 22, 26, .45);
  display: flex; align-items: flex-start; justify-content: flex-end;
  overflow: auto;
  padding: 4.5rem 1rem 1rem;
}
.settings-box {
  width: min(720px, 100%);
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow-card);
}
.settings-title {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .65rem;
}
.settings-title h1 { margin: .1rem 0 0; font-size: 21px; line-height: 1.2; }
.settings-box textarea {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 9px;
  padding: .5rem .6rem; font: 14px/1.4 ui-monospace, Consolas, monospace;
  width: 100%; resize: vertical;
}
.settings-section {
  margin-top: .9rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
/* Панель хода сбора. Стиль общий с логом архива базы, но переносы свои:
 * в строке транспорта URL — один неразрывный токен, и при overflow-wrap:
 * normal панель уезжала вбок на 6717px при ширине 1177 (замер 23.08.2026).
 * Читать причину отказа, прокручивая вправо, невозможно. */
#job-log { overflow-wrap: anywhere; }

.archive-log {
  min-height: 3.25rem;
  max-height: 8rem;
  overflow: auto;
  margin-top: .6rem;
  padding: .45rem .55rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--dim);
  font: 13px/1.45 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
}

/* --- Полосы ------------------------------------------------------------ */

.notice {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .5rem .75rem; margin-bottom: .6rem;
  border: 1px solid; border-radius: 10px; font-size: 14px;
}
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice-info { background: var(--info-bg); border-color: var(--info-line); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice-act { display: flex; align-items: center; gap: .5rem; }
/* Полоса про доход в балансе площадки. Не украшение: без неё «перегон
 * денег: скуп 0%, пополнение STEAM 0%» в шапке читается как бесплатный
 * перегон, то есть как удача, а не как отсутствие операции.
 *
 * display: block, а не flex общего .notice: здесь одна длинная фраза, и
 * space-between растянул бы её по краям коробки. */
#denomination { display: block; line-height: 1.45; }
#not-collected {
  display: block; padding: 0; margin: .4rem 0 .2rem;
  border: 0; background: transparent;
  color: var(--dim); font-size: 12px;
}
#not-collected b { color: var(--ink); }
/* Выбор маршрута двумя списками. Подпись над каждым, стрелка между —
 * читается как «откуда → куда», без нужды разбирать строку «LIS→TM».
 * align-items: end, чтобы поля выровнялись по низу при подписях разной
 * длины, а не по верху коробки. */
.route-pick {
  display: flex; align-items: end; justify-content: center; gap: .6rem;
}
.route-side { display: flex; flex-direction: column; gap: .25rem; }
.route-side > span {
  font-weight: 600; font-size: 12px; letter-spacing: 0;
  text-transform: none; color: var(--dim);
}
.route-arrow { color: var(--faint); padding-bottom: .45rem; font-size: 15px; }
@media (max-width: 900px) {
  /* Узкий экран: стрелка между полями теряет смысл, списки встают в
   * столбец и подписи их и различают. */
  .route-pick { flex-direction: column; align-items: stretch; }
  .route-arrow { display: none; }
}
.muted { color: var(--dim); }

/* --- Панели и поля ----------------------------------------------------- */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; padding: 1rem 1.1rem; margin-bottom: .8rem;
  box-shadow: none;
}
#presets {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: .1rem .1rem .6rem;
  margin: 0 0 .55rem;
}
#presets select, #presets input[type=text] { width: auto; }
.panel-label {
  font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--dim); font-weight: 600;
}
.view-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  margin: .1rem 0 1rem; padding: 0 .15rem;
}
.view-heading .panel-label { display: none; }
.view-heading h1 { margin: .1rem 0; font-size: clamp(1.8rem, 2.5vw, 2.35rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 680; }
.view-heading p { margin: .3rem 0 0; color: var(--dim); }
.view-heading-note { color: var(--dim); font-size: 13px; text-align: right; }
#filters {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: .15rem 1rem;
  border-top: 1px solid var(--line);
}
.primary-filters { grid-column: 1 / -1; }
.primary-filters { grid-template-columns: minmax(190px, 1.2fr) minmax(170px, 1fr) minmax(145px, .9fr) minmax(145px, .8fr); align-items: end; }
.advanced-filters { min-width: 0; margin-top: .2rem; border: 0; padding-top: 0; }
.advanced-filters[open] { grid-column: 1 / -1; }
.advanced-filters > summary, #guard > summary {
  display: flex; align-items: center; gap: .45rem; min-height: 2rem;
  color: var(--buy); font-weight: 650; cursor: pointer; list-style: none;
}
.advanced-filters > summary::-webkit-details-marker, #guard > summary::-webkit-details-marker { display: none; }
.advanced-filters > summary::before, #guard > summary::before { content: "＋"; color: var(--faint); }
.advanced-filters[open] > summary::before, #guard[open] > summary::before { content: "−"; }
#guard { margin: .55rem 0 0; background: var(--inset); }

.grid {
  display: grid; gap: .6rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.field.span2 { grid-column: span 2; }
.field > label {
  font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--dim); font-weight: 600;
}
.field small { color: var(--dim); font-size: 13.5px; line-height: 1.35; }
.pair { display: flex; gap: .35rem; }
.pair input { width: 100%; min-width: 0; }

input[type=number], input[type=text], input[type=password], input[type=file], select {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: .52rem .7rem; font: inherit; width: 100%;
}
input[type=number] { font-family: ui-monospace, Consolas, monospace; }
input:focus-visible, select:focus-visible, button:focus-visible,
summary:focus-visible { outline: 2px solid var(--buy); outline-offset: 1px; }
label.inline { display: inline-flex; align-items: center; gap: .3rem; }

.btn {
  background: var(--inset); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: .5rem .8rem; font: inherit; cursor: pointer; white-space: nowrap;
  transition: border-color .12s ease, background-color .12s ease;
}
.btn:hover { border-color: var(--buy); }
.btn-quiet { color: var(--dim); }
.btn:disabled, .btn[aria-disabled="true"] {
  color: var(--faint); background: var(--inset); border-color: var(--line);
  opacity: .65; cursor: not-allowed;
}
.btn:disabled:hover, .btn[aria-disabled="true"]:hover {
  border-color: var(--line);
}

.tags-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--line);
}
/* «Принять» прижата вправо: это конец работы с фильтрами, а не одна из
 * равных кнопок в ряду. */
.apply-box {
  margin-left: auto; display: flex; align-items: center; gap: .5rem;
}
.filter-actions { justify-content: flex-end; flex-wrap: wrap; margin: 0; }
.pending-note { color: var(--warn-line); font-size: 14px; font-weight: 600; }
.btn-apply {
  font-weight: 650; border-color: var(--line-strong);
  background: var(--inset); color: var(--ink);
}
/* Пока изменения не приняты, кнопка выделена, а таблица приглушена: она
 * показывает ПРЕЖНИЙ отбор, и выдавать его за новый нельзя. */
.btn-active {
  border-color: var(--warn-line); background: var(--warn-bg);
  color: var(--ink);
}
.table-wrap.stale { opacity: .55; }
.table-wrap.stale thead th { color: var(--faint); }
/* Категории — выпадающий список: их пятнадцать, строкой они занимали
 * всю ширину панели, а трогают их редко. Свёрнутый список прячет длину,
 * но счётчик на кнопке не даёт забыть, что исключения включены. */
.dropdown { position: relative; display: inline-block; }
.dd-btn { display: inline-flex; align-items: center; gap: .4rem; }
.dd-caret {
  width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid currentColor;
  opacity: .6;
}
.dd-btn[aria-expanded="true"] .dd-caret {
  border-top: none; border-bottom: 5px solid currentColor;
}
.dd-count {
  background: var(--warn-line); color: #14161a; border-radius: 999px;
  font-size: 10px; font-weight: 700; padding: 0 .35rem; min-width: 1.1em;
  text-align: center;
}

.dd-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 215px; max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: .25rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.dd-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .22rem .4rem; border-radius: 2px; cursor: pointer;
  font-size: 16px; margin: 0;
}
.dd-row:hover { background: var(--row-hover); }
/* Отступ и звезда: ножи и перчатки это ★-предметы, и в списке
 * они стоят подгруппой, как в таблице, на которую ориентируется
 * пользователь. Символы записаны БУКВАЛЬНО: escape тут дважды подводил —
 * последовательности вида 260 и 00 разбираются как восьмеричные ещё в
 * Python и оставили в файле знак градуса и NUL-байт. */
.dd-star { padding-left: 1.3rem; }
.dd-star .dd-label::before { content: "★ "; color: var(--sell); }
/* Флажок нужен форме и серверу, но человеку показываем крест: он прямо
 * говорит, что строка из таблицы убрана. */
.dd-row input { position: absolute; opacity: 0; pointer-events: none; }
.dd-x { width: .9em; color: var(--faint); opacity: .25; font-size: 11px; }
.dd-row input:checked ~ .dd-x { opacity: 1; color: var(--bad); }
.dd-row input:checked ~ .dd-label {
  color: var(--dim); text-decoration: line-through;
}
.dd-row input:focus-visible ~ .dd-label {
  outline: 2px solid var(--buy); outline-offset: 2px;
}

#guard {
  margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--line);
}
#guard summary {
  font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--warn-line); font-weight: 650; cursor: pointer;
}
#guard .why { color: var(--dim); margin: .4rem 0 .6rem; max-width: 68ch; }

/* --- Сводка ------------------------------------------------------------ */

.summary-bar {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin: .8rem 0 .4rem;
}
#summary { margin: 0; font-size: 19px; font-weight: 650; }
#summary b { font-family: ui-monospace, Consolas, monospace; }
#rejected { margin: 0; color: var(--dim); font-size: 14.5px; }
.why-item { white-space: nowrap; }
.why-guard::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--warn-line);
  margin-right: .25rem; vertical-align: middle;
}

/* --- Таблица ----------------------------------------------------------- */

.table-wrap { border: 1px solid var(--line); border-radius: 11px; overflow: auto; background: var(--panel); }
/* min-width обязателен. В table-layout: fixed колонка без объявленной
 * ширины получает ОСТАТОК, а остаток бывает нулевым: замер 23.08.2026 при
 * окне 1249px дал у колонки продаж ширину ровно 0px при содержимом в
 * 163px, и число рисовалось поверх цены покупки. Ниже этого предела
 * таблица не ужимается дальше, а прокручивается внутри .table-wrap —
 * пусть лучше уедет за край, чем нарисуется поверх соседа. */
table {
  border-collapse: collapse; width: 100%; min-width: 76rem;
  table-layout: fixed;
}

thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--line-strong);
  font-size: 12.5px; letter-spacing: 0; text-transform: none;
  font-weight: 650; color: var(--dim);
  padding: .62rem .7rem; text-align: left; white-space: nowrap;
  cursor: pointer; user-select: none;
}
thead th.num { text-align: right; }
thead th:hover { color: var(--ink); }
thead th.sorted { color: var(--ink); }
thead th.sorted::after { content: " \25BE"; font-size: 9px; }
thead th.sorted.asc::after { content: " \25B4"; }
thead th.buy.sorted, thead th.buy:hover { color: var(--buy); }
thead th.sell.sorted, thead th.sell:hover { color: var(--sell); }

/* Номер строки — позиция в ТЕКУЩЕМ порядке: пересортировали, значит
 * перенумеровалось. Приклеивать номер к предмету незачем, для этого есть
 * имя. */
.col-num { width: 3rem; }
.rownum { color: var(--faint); }
.col-money { width: 6.75rem; }
.col-pct { width: 5rem; }
/* «Без дрейфа» (решение владельца 04.10.2026). Своя ширина, а не
 * .col-pct: замер того дня при 1249px — заголовку в верхнем регистре
 * нужно 81px, со стрелкой сортировки больше, а .col-pct даёт 80. Ради
 * неё min-width поднят с 72 до 76rem: пол имени 18rem соблюдён, а при
 * окне 1249px таблица уезжает в прокрутку на 24px, а не ужимает имя. */
.col-flat { width: 5.5rem; }
/* Гибкая колонка ровно одна, и это ИМЯ: свободное место достаётся ему, а
 * при нехватке оно же и ужимается. Так было не всегда — до 23.08.2026
 * гибкой стояла колонка продаж, и при узком окне ей доставался нулевой
 * остаток, из-за чего число рисовалось поверх цены покупки.
 *
 * Выбор колонки не произволен: имя единственное умеет ужиматься без
 * потери смысла — у .item .nm стоит overflow: hidden с многоточием, а
 * полное имя остаётся в подсказке. Число обрезать нельзя, оно на то и
 * число, и наползающая цифра — это подменённый номер.
 *
 * Ширины числовых колонок выставлены ПО ЗАМЕРУ содержимого (23.08.2026),
 * а не на глаз: у восьми колонок было 167px запаса при нехватке 178px у
 * имени. При 150px имени четыре строки из семнадцати читались одинаково
 * («★ Skeleton Knife | …» — и Tiger Tooth, и Stained), при 242px
 * неразличимых не осталось. */
.col-sales { width: 9rem; }
.col-liq { width: 8.5rem; }
/* Оценка вместо измерения — тот же пунктир, что у допущения о сроке. */
td.estimated-cell { text-decoration: underline dotted; color: var(--dim); }
.col-lots { width: 6.5rem; }

tbody td {
  padding: .62rem .7rem; border-bottom: 1px solid var(--line);
  vertical-align: middle; font-size: 14px;
}
tbody tr:hover td { background: var(--row-hover); }
.num {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
/* Колонка продаж: число по центру со сдвигом вправо — не вплотную к имени
 * и не вплотную к цене покупки.
 *
 * Сдвиг в rem, а НЕ в процентах. Процентный отступ у ячейки считается от
 * ширины ТАБЛИЦЫ, а не своей колонки: замер 23.08.2026 при таблице 1192px
 * дал у padding-left: 12% отступ в 143px внутри ячейки шириной 128px, и
 * число уезжало за собственный правый край поверх цены покупки. Пока
 * колонка была широкой и гибкой, это наружу не выступало и не замечалось.
 *
 * Селектор с идентификатором намеренно: правило thead th.num задаёт
 * выравнивание вправо и по специфичности сильнее, чем th.col-sales —
 * из-за этого заголовок оставался справа, когда числа уже переехали. */
#rows th.col-sales, #rows td.col-sales {
  text-align: center; padding-left: .5rem;
}
td.buy { color: var(--buy); }
td.sell { color: var(--sell); }
td.net { font-weight: 650; }
td.net.plus { color: var(--good); }
td.net.minus { color: var(--bad); }

.item { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
/* Сердечко — кнопка, выглядящая как значок. Пустое означает «не слежу»,
 * залитое — «слежу». Цвет стороны продажи взят намеренно: именно ради неё
 * предмет и держат на глазу.
 *
 * Живёт ВНУТРИ ячейки имени, отдельной колонки нет: ширины расписаны по
 * замеру содержимого, и десятая колонка отняла бы место у имени. */
.nm-fav {
  background: none; border: 0; padding: 0 .1rem; margin: 0;
  font-size: 19px; line-height: 1; cursor: pointer;
  color: var(--faint); flex: none;
}
.nm-fav:hover { color: var(--sell); }
.nm-fav.on { color: var(--sell); }
.nm-fav:focus-visible { outline: 2px solid var(--buy); outline-offset: 1px; }
.item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Имя предмета — кнопка: клик открывает обе площадки сразу. Выглядит как
 * текст, потому что это и есть содержимое строки, а не действие рядом с ним. */
.nm-open {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; max-width: 100%;
}
.nm-open:hover { color: var(--buy); text-decoration: underline; }
.nm-open:focus-visible { outline: 2px solid var(--buy); outline-offset: 1px; }
.nm-details {
  flex: none; width: 1.25rem; height: 1.25rem; padding: 0; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--panel); color: var(--dim); font: 600 12px/1 system-ui, sans-serif;
  cursor: pointer;
}
.nm-details:hover, .nm-details[aria-expanded="true"] { color: var(--buy); border-color: var(--buy); }
.nm-details:focus-visible { outline: 2px solid var(--buy); outline-offset: 1px; }
.warn-inline { color: var(--warn-line); font-weight: 600; font-size: 12px; }
.links { display: flex; gap: .25rem; flex: none; }
.links a {
  font-size: 12.5px; letter-spacing: .06em; font-weight: 700;
  text-decoration: none; border: 1px solid currentColor; border-radius: 2px;
  padding: 0 .35rem; opacity: .55;
}
.links a:hover { opacity: 1; }
.links a.b { color: var(--buy); }
.links a.t { color: var(--sell); }

/* Площадка, чей адрес поиска не выяснен: та же метка, но БЕЗ ссылки и без
 * подчёркнутой кликабельности. Пунктирная рамка отличает её от рабочей
 * ссылки — иначе человек тыкал бы и не понимал, почему ничего не
 * происходит. Курсор help вместе с title объясняет причину. */
.links .nolink {
  font-size: 12.5px; letter-spacing: .06em; font-weight: 700;
  border: 1px dashed currentColor; border-radius: 2px;
  padding: 0 .35rem; opacity: .4; cursor: help;
}
.links .nolink.b { color: var(--buy); }
.links .nolink.t { color: var(--sell); }

.arb-item-details { margin: .9rem 0; scroll-margin: 1rem; }
.arb-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.arb-detail-head h2 { margin: .15rem 0 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.arb-detail-values {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem; margin: 1rem 0;
}
.arb-detail-values > div { min-width: 0; padding: .65rem .75rem; background: var(--inset); border-radius: 8px; }
.arb-detail-values dt { color: var(--dim); font-size: 12px; }
.arb-detail-values dd { margin: .2rem 0 0; font: 600 15px/1.35 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.arb-detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) {
  .arb-detail-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ликвидность: число — выбранная пользователем шкала со срезкой на 100,
 * полоска под ним — несрезанная оборачиваемость. После срезки больше
 * половины принятых стоят ровно на 100%, и без полоски они выглядят
 * одинаковыми, хотя различаются в десятки раз. */
.liq { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.liq-bar { height: 3px; width: 100%; background: var(--line); border-radius: 2px; }
.liq-bar i { display: block; height: 100%; background: var(--bar); border-radius: 2px; }
.liq-none { color: var(--faint); }
/* Оценка, а не измерение: история сделок упёрлась в потолок площадки.
 * Тот же пунктир, что у допущения о сроке — приём один, смысл один. */
td.estimated .liq > span:first-child { text-decoration: underline dotted; }

.lots i { font-style: normal; color: var(--faint); }

/* Квадратик истории избранного.
 *
 * position: fixed И элемент ВНЕ .table-wrap — обязательны оба. У обёртки
 * стоит overflow: auto, и подсказку, нарисованную внутри, обрезало бы
 * краем таблицы. absolute тоже не годится: он отсчитывался бы от
 * ближайшего позиционированного предка, а им окажется что угодно.
 *
 * Показывает ВИТРИНЫ площадок, не опору продажи из таблицы: витрина это
 * факт, записанный в тот день, а опору пришлось бы пересчитывать задним
 * числом по сегодняшней истории сделок. Расхождение не теоретическое —
 * 511 строк из 534, медиана +0,6%, максимум +29,4% (замер 23.08.2026). */
#fav-history {
  position: fixed; z-index: 50;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: .5rem .6rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  font-size: 14px; max-width: 24rem;
  pointer-events: auto;
}
#fav-history .fh-head, #sales-chart .fh-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .65rem; font-weight: 650; margin-bottom: .1rem;
}
.popover-close {
  flex: none; display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; padding: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--inset); color: var(--dim); font: inherit;
  line-height: 1; cursor: pointer;
}
.popover-close:hover { color: var(--ink); border-color: var(--line-strong); }
#fav-history .fh-sub {
  color: var(--faint); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .35rem;
}
/* Общее правило table { min-width: 72rem } растянуло бы квадратик на весь
 * экран: 72rem это 1152px. Здесь ширина по содержимому. */
#fav-history table { width: auto; min-width: 0; table-layout: auto; }
#fav-history th, #fav-history td {
  padding: .15rem .45rem; font-size: 13.5px; white-space: nowrap;
}
#fav-history thead th {
  position: static; border-bottom: 1px solid var(--line);
  font-size: 11px; cursor: default;
}
/* Черта на дате добавления: история показывается и ДО неё. */
#fav-history .fh-added td { border-top: 1px solid var(--warn-line); }
#fav-history .fh-empty { margin: 0; color: var(--dim); }

/* Число в колонке «продажа» — кнопка графика сделок. Внешне это то же
 * число: стиль кнопки сброшен целиком, иначе поля и рамка браузера
 * сдвинули бы его и отняли ширину у выверенной по замеру колонки. */
.sell-chart {
  font: inherit; color: inherit; background: none; border: 0;
  padding: 0; margin: 0; cursor: help;
}
.sell-chart:hover, .sell-chart:focus-visible { text-decoration: underline; }

/* Квадратик графика сделок. Те же два правила, что у истории избранного:
 * position: fixed и элемент ВНЕ .table-wrap (overflow: auto обрезал бы). */
#sales-chart {
  position: fixed; z-index: 50;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: .5rem .6rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  font-size: 14px; max-width: 24rem;
  pointer-events: auto;
}
#sales-chart .fh-sub {
  color: var(--faint); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .35rem;
}
#sales-chart .fh-empty { margin: 0; color: var(--dim); }
#sales-chart .sc-svg { display: block; }
#sales-chart .sc-frame { fill: none; stroke: var(--line); }
#sales-chart .sc-dot { fill: var(--sell); fill-opacity: .75; }
#sales-chart .sc-ref { stroke: var(--ink); stroke-width: 1.2; }
#sales-chart .sc-axis {
  fill: var(--dim); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
#sales-chart .sc-legend { font-size: 13px; margin-top: .25rem; }
#sales-chart .sc-note {
  margin: .25rem 0 0; color: var(--faint); font-size: 12px;
}

/* --- Чёрный список (05.10.2026) ----------------------------------------- */

/* Кнопка рядом с сердечком, в той же ячейке имени — отдельной колонки нет,
 * ширины выверены замером. Мельче сердечка: действие редкое, и каждый
 * пиксель здесь отнят у имени. */
/* Вариант А владельца (05.10.2026): в покое кнопка нулевой ширины и
 * прозрачна — 24 px возвращены имени в каждой строке. Видна при наведении
 * на строку и при фокусе внутри неё. Нулевая ширина, а не display: none:
 * такую кнопку не достать Tab'ом. Отрицательный отступ гасит gap флекса
 * .item, иначе невидимая кнопка всё равно отнимала бы .45rem. Стоит в
 * конце ячейки, после ссылок: появляясь, не сдвигает начало имени. */
.nm-block {
  background: none; border: 0; padding: 0; margin: 0 0 0 -.45rem;
  font-size: 15px; line-height: 1; cursor: pointer;
  color: var(--faint); flex: none; opacity: 0;
  width: 0; overflow: hidden;
}
tbody tr:hover .nm-block, tbody tr:focus-within .nm-block, .nm-block.on {
  width: auto; overflow: visible; margin: 0; padding: 0 .05rem;
  opacity: .55;
}
@media (hover: none) {
  .nm-block {
    width: auto; overflow: visible; margin: 0; padding: 0 .05rem;
    opacity: .55;
  }
}
/* Специфичность выше правила строки (tbody tr:hover .nm-block): иначе
 * наведение на саму кнопку и нажатая кнопка остались бы бледными. */
tbody tr .nm-block:hover, tbody tr .nm-block.on {
  color: var(--bad); opacity: 1;
}
.nm-block:focus-visible { outline: 2px solid var(--buy); outline-offset: 1px; }
/* Строка показана только в режиме избранных: имя приглушено, чтобы было
 * видно, что в обычной таблице её нет. */
tr.bl-row .nm-open { color: var(--dim); }

/* Квадратик выбора срока: position: fixed и ВНЕ .table-wrap, как история
 * избранного, — иначе его обрезало бы краем таблицы. В отличие от
 * подсказок, по нему кликают, поэтому pointer-events не выключены. */
#bl-pop {
  position: fixed; z-index: 60;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: .55rem .7rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  font-size: 14px; width: 20rem; max-width: calc(100vw - 16px);
}
#bl-pop p { margin: 0 0 .35rem; }
#bl-pop .bl-pop-head {
  color: var(--faint); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase;
}
#bl-pop .bl-pop-name { font-weight: 650; overflow-wrap: anywhere; }
#bl-pop .bl-opt {
  display: flex; align-items: center; gap: .35rem; margin: .2rem 0;
}
#bl-pop .bl-opt input[type=number] { width: 5rem; padding: .2rem .4rem; }
#bl-pop input[type=text] { margin: .35rem 0; }
#bl-pop .bl-pop-actions { display: flex; justify-content: flex-end; gap: .4rem; }

#blacklist summary {
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; cursor: pointer;
}
#blacklist summary .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
#blacklist .why { color: var(--dim); margin: .4rem 0 .6rem; max-width: 68ch; }
/* Общее правило table { min-width: 76rem; table-layout: fixed } растянуло
 * бы список на 1216px и дало прокрутку всей странице на узком окне. */
#bl-list { overflow-x: auto; }
#bl-list .bl-table { min-width: 0; width: 100%; table-layout: auto; }
#bl-list th { position: static; cursor: default; font-size: 11px; }
#bl-list td { padding: .3rem .5rem; vertical-align: baseline; }
#bl-list .bl-name { overflow-wrap: anywhere; }
#bl-list .bl-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
#bl-list .bl-note { color: var(--dim); overflow-wrap: anywhere; }
#bl-list .bl-remove { font-size: 12px; padding: 2px 8px; }
#bl-list tr.bl-expired td { color: var(--faint); }
#bl-list .bl-gone { color: var(--warn-line); font-weight: 600; }

.note { color: var(--dim); font-size: 14.5px; margin: 1rem 0 0; max-width: 90ch; }

/* --- Trading control ------------------------------------------------------- */

.tabs {
  display: flex; flex-direction: column; align-items: stretch;
  gap: .25rem; margin: 0; padding: .5rem;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel); position: sticky; top: 5.3rem;
}
.tab {
  display: flex; align-items: center; min-height: 2.65rem;
  background: transparent; color: var(--dim); text-align: left;
  border: 0; border-radius: 8px;
  padding: .5rem .75rem; font: inherit; font-size: 14px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); background: var(--inset); }
.tab.active {
  background: color-mix(in srgb, var(--buy) 13%, var(--panel));
  color: var(--buy);
  font-weight: 650;
}
.workspace-layout {
  display: grid; grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr);
  align-items: start; gap: clamp(1rem, 1.8vw, 1.75rem);
}
.workspace-sidebar { min-width: 0; position: sticky; top: 1rem; }
.nav-menu-toggle {
  display: none; width: 100%; align-items: center; gap: .55rem;
  padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.workspace-content { min-width: 0; }
.view { min-width: 0; }
.workspace-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 26rem); align-items: start; gap: .75rem 1rem; }
.workspace-account-context { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; min-width: 0; }
.workspace-account-context h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.workspace-account-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .35rem; }
.workspace-snapshot-time { display: block; margin-top: .3rem; color: var(--faint); font: 11px ui-monospace, Consolas, monospace; }
.workspace-account-picker { display: grid; gap: .3rem; min-width: min(100%, 14rem); margin-left: auto; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.workspace-account-picker select { width: 100%; min-height: 2.6rem; }
.workspace-account-add { min-width: 0; align-self: end; }
.workspace-account-add .add-account { width: 100%; margin: 0; }
.workspace-account-add .trading-add .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .workspace-toolbar { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .workspace-account-add { width: min(100%, 26rem); justify-self: end; }
}
.workspace-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: .75rem; }
.workspace-summary { margin-top: .75rem; }
.workspace-summary-grid .kpis { display: contents; margin: 0; }
.tm-overview { grid-column: 1 / span 2; grid-row: 2; justify-content: flex-start; align-self: start; min-width: 0; min-height: 114px; padding: .55rem .95rem; }
.tm-overview.tile { gap: .3rem; }
.tm-overview .tm-balance { align-items: center; gap: .35rem; }
.tm-overview .tm-balance-amount {
  font: 600 30px/1.1 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.tm-overview .tm-balance-amount small {
  font-size: .5em; font-weight: 600; margin-left: .35em; color: var(--dim);
}
.tm-overview .tm-balance-read { padding: .3rem .5rem; font-size: 12px; }
.workspace-tile-status { font-size: 11px; color: var(--dim); }
.workspace-attention { display: flex; align-items: center; gap: .4rem .6rem; flex-wrap: wrap; margin-top: .65rem; padding: .6rem .75rem; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--wait-tint); }
.workspace-alert-link { padding: .2rem .35rem; border: 0; background: transparent; color: var(--sell); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.workspace-alert-link:hover { color: var(--ink); text-decoration: underline; }
.workspace-tabs { display: flex; gap: 1.35rem; border-bottom: 1px solid var(--line); margin: 1.25rem 0 .85rem; }
.workspace-tab { position: relative; min-height: 2.7rem; padding: .45rem .1rem; border: 0; border-radius: 0; background: transparent; color: var(--dim); font: inherit; font-size: 14px; cursor: pointer; }
.workspace-tab:hover { color: var(--ink); }
.workspace-tab[aria-selected="true"] { color: var(--ink); font-weight: 650; }
.workspace-tab[aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--buy); border-radius: 2px 2px 0 0; }
.workspace-account { display: grid; gap: .9rem; min-width: 0; }
.workspace-platform { display: contents; }
.workspace-platform .acct-controls, .workspace-platform .tiles { display: contents; }
.workspace-account .tile { min-width: 0; }
.sales-platform-heading { grid-column: 1 / -1; margin: .5rem 0 -.2rem; font-size: 15px; font-weight: 650; }
.workspace-account[data-active-tab="inventory"] [data-workspace]:not([data-workspace~="inventory"]):not([data-workspace~="management"]),
.workspace-account[data-active-tab="sales"] [data-workspace]:not([data-workspace~="sales"]):not([data-workspace~="management"]),
.workspace-account[data-active-tab="events"] [data-workspace]:not([data-workspace~="events"]):not([data-workspace~="management"]) { display: none !important; }
.workspace-management { grid-row: 1; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.workspace-management > summary { padding: .65rem .85rem; cursor: pointer; color: var(--dim); font-size: 13px; font-weight: 600; }
.workspace-management[open] { padding: 0 .85rem .85rem; }
.workspace-management[open] > summary { margin: 0 -.85rem .75rem; border-bottom: 1px solid var(--line); }
.workspace-management .acct-common { margin: 0 0 .75rem; }
.workspace-management .actions-card { margin: 0; }
.balance-hold { display: flex; align-items: baseline; justify-content: flex-start; gap: .5rem; padding-top: .35rem; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; font-weight: 500; }
.balance-hold b { color: var(--ink); font: 600 11px/1.3 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.account-summary-list { display: grid; gap: .8rem; margin-top: 1rem; }
.account-summary-card, .data-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); box-shadow: var(--shadow-card);
}
.account-summary-card h2 { margin: 0; font-size: 1rem; }
.account-summary-card .muted { display: flex; align-items: center; gap: .35rem .6rem; flex-wrap: wrap; margin: .25rem 0 0; }
.account-summary-card { border-left: 4px solid var(--tone, var(--line)); }
.account-summary-card > div { min-width: min(100%, 23rem); flex: 1 1 22rem; }
.account-summary-stats {
  display: grid; grid-template-columns: repeat(4, minmax(4.5rem, 1fr));
  gap: .45rem; margin-top: .7rem; max-width: 38rem;
}
.account-summary-stat {
  display: grid; gap: .1rem; min-width: 0; padding: .35rem .5rem;
  border-radius: 8px; background: var(--inset);
}
.account-summary-stat small {
  color: var(--faint); font-size: 10px; font-weight: 650;
  letter-spacing: .045em; text-transform: uppercase;
}
.account-summary-stat b {
  color: var(--ink); font: 600 16px/1.2 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.account-summary-card > .btn { flex: 0 0 auto; }
.data-action-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: 1rem;
}
.data-action-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; justify-content: stretch; gap: .35rem 1rem;
  min-width: 0; padding: 1.15rem;
}
.data-action-icon {
  grid-row: span 2; width: 2.6rem; height: 2.6rem; display: grid;
  place-items: center; border-radius: 12px; background: var(--info-bg);
  color: var(--buy); font-size: 1rem; font-weight: 750;
}
.data-action-icon-tm { background: var(--wait-tint); color: var(--sell); font-size: .75rem; }
.data-action-copy { min-width: 0; }
.data-action-copy h2 { margin: .15rem 0 .3rem; font-size: 1.1rem; line-height: 1.3; }
.data-action-copy p { margin: 0; }
.data-action-controls {
  grid-column: 2; display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin-top: .45rem;
}
.data-action-controls .muted { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .account-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-summary-card > .btn { width: 100%; }
  .workspace-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-summary-grid .kpi-wide { grid-column: span 1; }
  .workspace-summary-grid .tm-overview { grid-column: span 1; grid-row: 2; }
  .workspace-toolbar { grid-template-columns: minmax(0, 1fr); }
  .workspace-account-add { width: 100%; justify-self: stretch; }
  .workspace-account-add .trading-add .grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-account-add .trading-add .field.span2 { grid-column: 1; }
  .workspace-tabs { gap: 1rem; overflow-x: auto; }
  .workspace-account-picker { margin-left: 0; }
}
@media (max-width: 520px) {
  .data-action-card { grid-template-columns: auto minmax(0, 1fr); padding: .9rem; }
  .data-action-controls { grid-column: 1 / -1; }
  .data-action-controls .btn { width: 100%; }
}
@media (max-width: 520px) {
  .view-heading { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .view-heading-note { text-align: left; font-size: 12px; }
  .primary-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-filters .field.span2 { grid-column: 1 / -1; }
  .filter-actions { justify-content: stretch; }
  .filter-actions > button { flex: 1 1 auto; }
  .topbar { display: flex; justify-content: center; padding: .45rem .75rem; }
  .brand {
    display: flex; flex-direction: column; align-items: center;
    gap: .4rem; justify-content: center; min-width: 0; width: 100%;
  }
  .logo-pic { min-width: 0; }
  .logo { width: 154px; height: 53px; object-fit: cover; }
  .route-pick {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end; gap: .35rem; min-width: 0; width: min(100%, 340px);
  }
  .route-side { min-width: 0; gap: .15rem; }
  .route-side > span { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
  select.route { width: 100%; min-width: 0; padding: .25rem .25rem; font-size: 12px; }
  .route-arrow { display: none; }
  #filters { display: block; }
  .filter-actions { margin-top: .25rem; }
  .data-meta .ages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
}
@media (min-width: 521px) and (max-width: 1100px) {
  .primary-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-filters .field.span2 { grid-column: 1 / -1; }
  .topbar { justify-content: center; text-align: center; }
  .brand { justify-content: center; gap: .8rem; }
  .route-pick { flex-direction: row; align-items: end; gap: .35rem; }
  .route-side { min-width: 0; }
  select.route { max-width: 145px; }
}
@media (max-width: 760px) {
  .workspace-layout { display: block; }
  .workspace-sidebar { position: relative; top: auto; z-index: 15; margin-bottom: .8rem; }
  .nav-menu-toggle { display: flex; }
  .tabs {
    position: absolute; top: calc(100% + .35rem); left: 0; right: 0;
    flex-direction: column; overflow: visible; margin: 0; padding: .45rem;
    border-radius: 10px; box-shadow: var(--shadow-card);
  }
  .tab { flex: 0 0 auto; min-height: 2.5rem; white-space: normal; }
}

.trading-add textarea {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: .5rem .6rem; font: 14px/1.4 ui-monospace, Consolas, monospace;
  width: 100%; min-height: 7.5rem; resize: vertical;
}
.form-actions {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: .65rem;
}
.toggle-line {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink); letter-spacing: 0; text-transform: none;
}

/* --- Журнал сделок ------------------------------------------------------
 *
 * Правила те же, что у таблицы кругов, и по той же причине: в
 * table-layout: fixed колонка без объявленной ширины получает ОСТАТОК, а
 * остаток бывает нулевым — тогда число рисуется поверх соседа. Гибкая
 * колонка ровно одна, и это ИМЯ: только оно умеет ужиматься без потери
 * смысла (многоточие плюс полное имя в подсказке). Ниже min-width таблица
 * не ужимается, а прокручивается внутри .table-wrap. */
.journal-wrap table { min-width: 72rem; }
/* Ширины выставлены ПО ЗАМЕРУ в браузере при 1249px, а не на глаз:
 * заголовкам «Баланс TM» и «Ожидалось» требовалось 86px, а .col-pct даёт
 * 80 — оба обрезались. Колонка «Куплено $» убрана там же: она в точности
 * выводится из «Куплено ¥» и курса, а таблица без неё перестала
 * прокручиваться (было 1216px при обёртке 1192). */
.journal-wrap .col-pct { width: 6rem; }
/* Колонка кнопки удаления шире общих 3rem: замер в браузере дал ячейке
 * нужду в 53px при ширине 48, и таблица из-за пяти пикселей уезжала в
 * горизонтальную прокрутку. */
.journal-wrap .col-num { width: 6rem; }
/* Имя класса НЕ повторяет то, под которым жила снятая 23.08.2026 колонка
 * «цикл» таблицы кругов: на её отсутствие стоит сторож
 * test_dead_styles_are_gone, и переиспользование обезоружило бы его. */
.journal-wrap .col-hold { width: 6rem; }

/* Автостроки журнала (21.10.2026). Колонки по образцу владельца; гибкая
 * одна — позиция. Под крупным числом — исходная сумма в валюте площадки
 * мелко. Ширины — проверить живым браузером на 1000/1249/1600. */
.journal-auto-head { display: flex; flex-direction: column; gap: .3rem; }
.journal-circle { margin: 0; line-height: 1.5; }
.journal-auto-wrap { margin-bottom: .4rem; }
/* Колонки фиксированной ширины занимают 960px (замер 21.10.2026); ещё
 * ~200 — имени, иначе при 1000px оно схлопывалось в ноль. Уже — таблица
 * прокручивается внутри обёртки. */
.journal-auto-wrap table { min-width: 73rem; }
.journal-auto-wrap .col-time { width: 8.5rem; }
.journal-auto-wrap .col-acc { width: 5.5rem; }
.journal-auto-wrap .col-money { width: 7rem; }
.journal-auto-wrap .col-pct { width: 5.5rem; }
.journal-auto-wrap .col-profit { width: 7rem; }
.journal-auto-wrap .col-market { width: 7.5rem; }
.journal-auto-wrap .col-act { width: 12rem; }
.journal-auto-wrap .sub {
  display: block; font-size: 12px; color: var(--dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Клетка цены и выбора переносится: в одну строку ей нужно 269px
 * (замер 21.10.2026 при 1249px), а таблица уезжала в прокрутку. */
.journal-auto-wrap td.row-actions { white-space: normal; }
/* Причина неизвестной прибыли — словами целиком, не многоточием. */
.journal-auto-wrap .sub.why { white-space: normal; }
.journal-auto-wrap .row-actions input { width: 4.5rem; }
.journal-auto-wrap .row-actions select { max-width: 6rem; }

.journal-add .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.journal-add-disclosure {
  margin: .8rem 0; padding: 1rem 1.1rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-card);
}
.journal-add-disclosure > summary {
  color: var(--buy); font-weight: 650; cursor: pointer; list-style: none;
}
.journal-add-disclosure > summary::-webkit-details-marker { display: none; }
.journal-add-disclosure > summary::before { content: "＋"; margin-right: .5rem; color: var(--faint); }
.journal-add-disclosure[open] > summary::before { content: "−"; }
.journal-add { margin-top: .9rem; }
.journal-tabs {
  display: flex; gap: .35rem; margin: .2rem 0 .8rem;
  border-bottom: 1px solid var(--line-strong);
}
.journal-tab {
  min-height: 2.8rem; padding: .55rem .85rem; border: 0;
  border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0;
  background: transparent; color: var(--dim); font: inherit; cursor: pointer;
}
.journal-tab:hover { background: var(--row-hover); color: var(--ink); }
.journal-tab.active { border-bottom-color: var(--buy); color: var(--ink); font-weight: 650; }
.journal-pane { min-width: 0; }
.journal-note {
  margin: .6rem 0 0; font-size: 13.5px; line-height: 1.45; max-width: 74rem;
}
.steam-inventory-wrap { max-height: 28rem; overflow: auto; }
.inventory-table { min-width: 0; }
.steam-inventory-wrap .mini { min-width: 64rem; }
.mini {
  table-layout: auto; font-size: 14px; border: 1px solid var(--line);
}
.mini thead th {
  position: static; padding: .35rem .45rem; font-size: 11px;
  cursor: default;
}
.mini tbody td { padding: .35rem .45rem; font-size: 14px; }
.confirmations-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .45rem;
}
.confirmations-list {
  display: grid; gap: .45rem;
}
.confirmation-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem; align-items: center;
  border: 1px solid var(--line); padding: .5rem .55rem;
}
.confirmation-main {
  min-width: 0; display: grid; gap: .15rem;
}
.confirmation-main p {
  margin: 0; overflow-wrap: anywhere;
}
.confirmation-actions {
  display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end;
}
/* Закупка у кнопки выставления (13.10.2026): узкое поле, а не во всю
   строку, как прочие input[type=text]. */
.confirmation-actions .inventory-cost {
  width: 9rem; flex: 0 0 auto; padding: .3rem .5rem;
  font-family: ui-monospace, Consolas, monospace;
}

@media (max-width: 760px) {
  .confirmation-item { grid-template-columns: 1fr; }
  .confirmation-actions { justify-content: flex-start; }
}

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

/* Журнал сделок: единая финансовая лента для автоматических и ручных строк.
   Сводные числа отделены от таблицы, а дата и пояснение под суммой читаются
   вторым уровнем. Таблица остаётся таблицей на узком экране и прокручивается
   только внутри собственного контейнера. */
.journal-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  padding: .35rem .1rem 1.15rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--line);
}
.journal-heading h1 {
  margin: .1rem 0 0; font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.1; letter-spacing: -.035em; font-weight: 680;
}
.journal-heading .panel-label, .journal-summary-title .panel-label {
  color: var(--faint); font-size: 11px; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase;
}
.journal-subtitle { margin: .42rem 0 0; color: var(--dim); }
.journal-costs {
  margin: .75rem 0 0; display: inline-flex; padding: .32rem .55rem;
  color: var(--dim); background: var(--inset); border-radius: 6px;
  font-size: 12.5px; line-height: 1.4;
}
.journal-tabs { margin-top: .75rem; gap: .25rem; }
.journal-tab {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.7rem; padding: .5rem .85rem; font-size: 14px;
}
.journal-count {
  min-width: 1.45rem; padding: .05rem .35rem; border-radius: 999px;
  background: var(--inset); color: var(--dim); font: 600 11px/1.5 ui-monospace, Consolas, monospace;
}
.journal-tab.active .journal-count { color: var(--buy); background: color-mix(in srgb, var(--buy) 12%, var(--panel)); }
.journal-auto-head {
  display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr);
  align-items: center; gap: 1rem; margin: .8rem 0 .65rem; padding: .8rem 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.journal-summary-title { display: flex; align-items: center; gap: .7rem; }
.journal-summary-title h2 { margin: .1rem 0 0; font-size: 15px; font-weight: 650; }
.journal-summary-mark {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 9px; background: var(--ok-tint); color: var(--good); font-size: 20px;
}
.journal-circle { color: var(--dim); font-size: 13px; line-height: 1.65; }
.journal-circle b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.journal-wrap {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 6px 24px rgba(8, 15, 24, .08);
}
.journal-wrap table { min-width: 77rem; }
.journal-wrap thead th {
  padding: .7rem .65rem; background: color-mix(in srgb, var(--panel) 88%, var(--inset));
  border-bottom: 1px solid var(--line-strong); font-size: 11px;
  font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
}
.journal-wrap tbody td { padding: .72rem .65rem; font-size: 14px; }
.journal-wrap tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--inset) 42%, var(--panel)); }
.journal-wrap tbody tr:hover td { background: var(--row-hover); }
.journal-wrap .col-time { width: 9.3rem; }
.journal-wrap .col-acc { width: 7.2rem; }
.journal-wrap .col-money { width: 7.4rem; }
.journal-wrap .col-pct { width: 6.5rem; }
.journal-wrap .col-profit { width: 8rem; }
.journal-wrap .col-market { width: 8.3rem; }
.journal-wrap .col-act { width: 12rem; }
.journal-auto-wrap table { min-width: 77rem; }
.journal-wrap .journal-time { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.journal-time > span { display: block; }
.journal-position .item { display: block; max-width: 100%; }
.journal-position .item .nm {
  display: block; min-width: 0; width: 100%;
  font-size: 14px; font-weight: 620;
}
.journal-wrap .sub { display: block; margin-top: .12rem; color: var(--faint); font-size: 11px; line-height: 1.35; }
.journal-wrap .num { font-size: 13px; }
.journal-wrap td.plus { color: var(--good); font-weight: 700; }
.journal-wrap td.minus { color: var(--bad); font-weight: 700; }
.journal-wrap td.net { font-weight: 700; }
.journal-wrap td.row-actions { white-space: normal; }
.journal-wrap .row-actions .btn { min-width: 2rem; min-height: 2rem; }
.journal-wrap .row-actions input, .journal-wrap .row-actions select { max-width: 6rem; }
#journal-summary {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0;
  color: var(--dim); font-size: 12.5px;
}
#journal-summary span {
  padding: .3rem .55rem; background: var(--inset); border-radius: 6px;
}
#journal-summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
.journal-note { max-width: 92ch; font-size: 12.5px; color: var(--faint); }
.journal-add-disclosure { margin-top: .8rem; }
.journal-close-row td { background: var(--inset) !important; }

@media (max-width: 760px) {
  .journal-heading { align-items: flex-start; }
  .journal-heading h1 { font-size: 1.8rem; }
  .journal-heading .btn { flex: none; }
  .journal-auto-head { grid-template-columns: 1fr; gap: .45rem; }
  .journal-circle { padding-left: 2.8rem; }
  .journal-tabs { overflow-x: auto; }
}

/* Состояния решений наблюдателя. Неизвестное состояние красится тем же
   тревожным цветом, что и блокировка: спокойный зелёный там означал бы,
   что мы понимаем происходящее, а мы не понимаем. */
.decision-ok { color: var(--good); font-weight: 600; }
.decision-done { color: var(--dim); font-weight: 600; }
.decision-attention { color: var(--sell); font-weight: 600; }
.decision-owner { color: var(--warn-line); font-weight: 700; }
.decision-stop { color: var(--bad); font-weight: 700; }
.decision-unknown { color: var(--bad); font-weight: 700; }

/* Ответы владельца стоят В СТРОКЕ решения, а не общей панелью: решение
   принимается по конкретному лоту, и кнопка вдали от него означала бы
   «применить к чему-то», а не «к этому». */
.owner-answers { gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.owner-answers .btn { font-size: 12px; padding: 2px 8px; }

.decision-when { white-space: nowrap; }
.decision-item { max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
/* Ответы владельца стоят отдельной строкой под решением: внутри ячейки
   причины они ломали ширины колонок. */
.decision-answers-row td { padding-top: 0; border-top: 0; }

/* Открытая покупка (03.10.2026): в последней колонке две кнопки —
 * «✓» вписать продажу и «×» удалить. Замер в браузере при 1249px: кнопкам
 * нужно 96px (было 56), «6 д 23 ч» и заголовку «Дней · лок» — 95 (было
 * 72); отсюда 6rem обеим колонкам, разницу отдаёт гибкая колонка имени.
 * Мини-форма закрытия встаёт строкой под покупкой. */
.journal-wrap .row-actions { white-space: nowrap; }
.journal-close-form {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
  padding: .4rem 0;
}
.journal-close-form label { display: flex; flex-direction: column; gap: .2rem; }

/* --- Вкладка «Аккаунты» (редизайн 03.10.2026) ---------------------------
 *
 * Здесь страница другая, чем таблица кругов: не плотная сверка чисел, а
 * пульт одного-двух аккаунтов. Поэтому карточки, а не таблица, и крупные
 * счётчики, которые читаются с одного взгляда.
 *
 * Тонов ровно четыре, и каждый несёт смысл: ok — готово или сверено, wait —
 * ждёт или занято, err — сбой, стоп или неизвестное, idle — пусто. Знак
 * тона всегда идёт рядом с цветом, чтобы состояние читалось и без цвета.
 * Неизвестное красится как err: спокойный цвет у него означал бы, что мы
 * понимаем происходящее. */

.tone-ok   { --tone: var(--good); --tone-bg: var(--ok-tint); }
.tone-wait { --tone: var(--sell); --tone-bg: var(--wait-tint); }
.tone-err  { --tone: var(--bad);  --tone-bg: var(--err-tint); }
.tone-idle { --tone: var(--dim);  --tone-bg: var(--idle-tint); }

.ic { width: 16px; height: 16px; flex: none; display: block; }

/* Шапка вкладки */
.trading-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .4rem 0 1.1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.trading-head h1 {
  margin: .15rem 0 0; font-size: 26px; line-height: 1.2; font-weight: 650;
  letter-spacing: -.01em;
}
.trading-meta {
  display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  margin-top: .6rem; font-size: 14px;
}
.tm-balance {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.tm-balance-value { min-width: 0; overflow-wrap: anywhere; }
.tm-balance b { font-family: ui-monospace, Consolas, monospace; color: var(--ink); }
.trading-meta b { font-family: ui-monospace, Consolas, monospace; color: var(--ink); }
.btn-refresh {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 10px;
}

/* Пилюли: статус, режим, чипы состояния. */
.pill, .chip, .status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  color: var(--tone, var(--dim)); background: var(--tone-bg, transparent);
}
.pill .ic, .chip .ic, .status .ic { width: 13px; height: 13px; }
.status { font-size: 13px; padding: .25rem .7rem; }

/* Добавление аккаунта свёрнуто: нужно оно редко, а место занимало всегда. */
.add-account {
  margin-bottom: 1rem; border: 1px dashed var(--line-strong);
  border-radius: 12px; background: transparent;
}
.add-account > summary {
  cursor: pointer; padding: .7rem 1rem; color: var(--dim); font-weight: 600;
  font-size: 14.5px; list-style: none; border-radius: 12px;
}
.add-account > summary::-webkit-details-marker { display: none; }
.add-account > summary::before { content: "+"; margin-right: .55rem; color: var(--buy); }
.add-account > summary:hover { color: var(--ink); }
.add-account[open] { border-style: solid; background: var(--panel); }
.add-account[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.add-account .trading-add { padding: 1rem; }

/* Карточка аккаунта */
.account-list { display: grid; gap: 1.1rem; }
.acct {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.15rem 1.3rem 1.3rem;
  box-shadow: var(--shadow-card);
  transition: border-color .15s ease;
}
.acct:hover { border-color: var(--line-strong); }
.acct-head {
  display: flex; align-items: center; gap: .9rem 1.1rem; flex-wrap: wrap;
}
/* Аватар обведён кольцом в тоне статуса: состояние аккаунта видно ещё
 * до того, как прочитано слово. */
.acct-avatar {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--inset); color: var(--ink);
  font-size: 20px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--tone, var(--line-strong));
}
.acct-id { min-width: 0; flex: 1 1 14rem; }
.acct-id h2 {
  margin: 0; font-size: 19px; font-weight: 650; line-height: 1.25;
  overflow-wrap: anywhere;
}
.acct-steamid {
  font: 13px/1.4 ui-monospace, Consolas, monospace; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.acct-flags { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
/* Шапка и сводка — одна кнопка раскрытия (11.10.2026). Свёрнутая
 * карточка кликабельна целиком, поэтому указатель — на всей карточке;
 * у раскрытой — только над шапкой и сводкой. */
.acct:not(.is-open) { cursor: pointer; }
.acct-summary { cursor: pointer; border-radius: 12px; outline: none; }
.acct-summary:focus-visible { box-shadow: 0 0 0 2px var(--buy); }
.acct-chevron {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; margin-left: auto; border-radius: 10px;
  color: var(--dim); border: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease;
}
.acct-chevron .ic { transition: transform .2s ease; }
.acct-summary[aria-expanded="true"] .acct-chevron .ic,
.acct-section-tile[aria-expanded="true"] .acct-chevron .ic { transform: rotate(180deg); }
.acct:not(.is-open):hover .acct-chevron,
.acct-summary:hover .acct-chevron { color: var(--buy); border-color: var(--buy); }
.stopped-reason {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: .9rem; padding: .6rem .8rem; border-radius: 10px;
  background: var(--err-tint); color: var(--bad); font-size: 14px;
}
.stopped-reason .ic { margin-top: .2rem; }

/* Счётчики. Ноль приглушён, ненулевое светится своим тоном, а прочерк —
 * число, которого сервер не прислал. */
.kpis {
  display: grid; gap: .75rem; margin-top: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.kpi {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .8rem .95rem; border-radius: 12px;
  background: var(--inset); border: 1px solid var(--line);
  transition: border-color .15s ease, transform .15s ease;
}
.kpi:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.kpi-label {
  display: flex; align-items: center; gap: .45rem;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
}
.kpi-value {
  font: 600 30px/1.1 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi[class*="tone-"] { background: var(--tone-bg); border-color: transparent; }
.kpi[class*="tone-"] .kpi-label .ic, .kpi[class*="tone-"] .kpi-value { color: var(--tone); }
.kpi-zero .kpi-value { color: var(--faint); }
/* Баланс шире прочих: «1 274,96 IDR» крупным моноширинным не влезает в
 * 150px. Валюта мельче суммы — читается число, а не подпись. */
.kpi-wide { grid-column: span 2; }
.kpi-value small, .balance-value small {
  font-size: .5em; font-weight: 600; margin-left: .35em; color: var(--dim);
}
.kpi-balance { border-color: var(--line-strong); }
.kpi-unknown .kpi-value { color: var(--bad); }

/* Раскрытая часть */
.account-detail {
  display: grid; gap: 1.1rem;
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.acct-controls {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
}
.card, .tile {
  min-width: 0; background: var(--inset); border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem 1.1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover, .tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.card-head, .tile-head { display: flex; align-items: center; gap: .6rem; }
.card-head { margin-bottom: .9rem; }
.card-head h3, .tile-head h3 {
  margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3;
}
.tile-head h3 { flex: 1; min-width: 0; font-size: 14.5px; }
.card-ic, .tile-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
}
.card-head-actions { margin-left: auto; }
.card-head-actions .btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 8px; padding: .3rem .65rem; font-size: 13.5px;
}
.card-head-actions .ic { width: 14px; height: 14px; }
.count {
  min-width: 1.8rem; height: 1.55rem; padding: 0 .45rem; border-radius: 999px;
  display: inline-grid; place-items: center;
  font: 700 13px ui-monospace, Consolas, monospace;
  color: var(--tone); background: var(--tone-bg);
}

/* Действия: три группы по смыслу, кнопка — знак, название и что делает. */
.action-groups {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.action-group h4 {
  margin: 0 0 .5rem; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.action-list { display: grid; gap: .5rem; }
.action-list .btn {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .6rem .75rem; border-radius: 10px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  white-space: normal;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.action-list .btn .ic { width: 18px; height: 18px; color: var(--dim); }
.action-list .btn:hover { border-color: var(--buy); transform: translateY(-1px); }
.action-list .btn:hover .ic { color: var(--buy); }
.action-list .btn:disabled { opacity: .55; cursor: progress; transform: none; }
.action-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.action-text b { font-size: 14px; font-weight: 600; }
.action-text small { font-size: 12px; color: var(--dim); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); }
.action-list .btn-danger, .action-list .btn-danger .ic { color: var(--bad); }
.action-list .btn-danger:hover { border-color: var(--bad); background: var(--err-tint); }
.action-list .btn-danger:hover .ic { color: var(--bad); }

/* Строка последнего действия. Ответ сервера приходит текстом, поэтому
 * моноширинный шрифт и перенос где угодно: в ответе бывают id и URL. */
.account-action-result {
  margin: .9rem 0 0; padding: .55rem .75rem; border-radius: 8px;
  background: var(--panel); border: 1px dashed var(--line-strong);
  font: 13px/1.45 ui-monospace, Consolas, monospace; color: var(--dim);
  overflow-wrap: anywhere;
}
.account-action-result:empty { display: none; }

/* Строка «Аккаунт» над плитками Steam/TM: режим и удаление. */
.acct-common h4 {
  margin: 0 0 .5rem; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.action-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.action-list.action-row .btn { width: auto; flex: 0 1 auto; }

/* Плитки Steam и TM: рядом, открыта одна. Свёрнутая показывает тон и
 * пару-тройку чисел — где проблема, видно без раскрытия. */
.acct-sections {
  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.acct-section-tile {
  display: flex; flex-direction: column; gap: .7rem; min-width: 0;
  padding: .9rem 1.1rem; border-radius: 12px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--inset); border: 1px solid var(--line);
  border-left: 4px solid var(--tone, var(--line));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.acct-section-tile:hover { border-color: var(--line-strong); border-left-color: var(--tone, var(--line-strong)); box-shadow: var(--shadow-card); }
.acct-section-tile:focus-visible { outline: 2px solid var(--buy); outline-offset: 2px; }
.acct-section-tile[aria-expanded="true"] {
  background: var(--panel); border-color: var(--buy); border-left-color: var(--tone, var(--buy));
}
.acct-section-title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 17px; font-weight: 650;
}
.acct-section-title .acct-chevron { width: 30px; height: 30px; }
.acct-section-tile:hover .acct-chevron { color: var(--buy); border-color: var(--buy); }
.acct-section-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.acct-section-stat { display: flex; flex-direction: column; min-width: 0; }
.acct-section-stat small {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}
.acct-section-stat b {
  font: 600 18px/1.25 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.acct-section-body { display: grid; gap: 1rem; min-width: 0; }

/* Подтверждения */
.confirm-card { display: flex; flex-direction: column; }
.confirm-card .card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.confirm-card .confirmations-head { margin-bottom: .6rem; }
.confirmation-item { border-radius: 10px; background: var(--panel); }

/* Разделы снизу */
.group-title {
  display: flex; align-items: center; gap: .75rem;
  margin: .4rem 0 -.2rem; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tiles { display: grid; gap: 1rem; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; gap: .8rem; }
.tile-wide { grid-column: 1 / -1; }
.tile-body { min-width: 0; display: grid; gap: .7rem; }
.tile-body .warn-inline { margin: 0; }
.tile .table-wrap { border-radius: 8px; }
.tile-table { max-height: 28rem; }
.tile-table .mini { min-width: 40rem; }

.sub + .sub { padding-top: .7rem; border-top: 1px solid var(--line); }
.sub-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .45rem;
  font-size: 13px; font-weight: 600; color: var(--dim);
}
.sub-note { margin: 0; color: var(--dim); font-size: 13.5px; }
.balance {
  display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap;
}
.balance-value {
  font: 600 26px/1.15 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.balance-side { color: var(--dim); font-size: 13.5px; }
.balance .stamp { margin-left: auto; }

/* Подписи снимков: подпись мелко, значение моноширинно. */
.meta-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .5rem 1rem; flex-wrap: wrap;
}
.meta {
  flex: 1; margin: 0; display: grid; gap: .5rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.meta dt {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint);
}
.meta dd {
  margin: 0; font: 15px/1.35 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stamp { font: 12px ui-monospace, Consolas, monospace; color: var(--faint); }

/* Пустое состояние: знак-заглушка и приглушённый текст, а не серая строка. */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.1rem .5rem; text-align: center; color: var(--faint);
  border-radius: 10px; background: var(--panel);
  border: 1px dashed var(--line);
}
.empty .ic { width: 26px; height: 26px; stroke-width: 1.5; opacity: .75; }
.empty p { margin: .2rem 0 0; color: var(--dim); font-size: 14px; font-weight: 500; }
.empty small { font-size: 12.5px; color: var(--faint); }

@media (max-width: 1350px) {
  .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .acct-controls { grid-template-columns: 1fr; }
  .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tiles-3, .tiles-4 { grid-template-columns: 1fr; }
  .acct { padding: 1rem; border-radius: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: 24px; }
  .acct-sections { grid-template-columns: 1fr; }
}

/* --- Публичный сайт (26.10.2026) ---------------------------------------
 * Вход, приглашение, страница владельца и блок пользователя в шапке.
 * Те же поверхности и кнопки, что у страницы; своих цветов нет. */
.site-user {
  position: absolute; right: 1.4rem; top: .7rem;
  display: flex; align-items: center; gap: .5rem;
}
.site-user .btn { text-decoration: none; padding: .35rem .7rem; }
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .site-user { position: static; width: 100%; justify-content: center; }
}
.site-auth-main {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem; padding-top: 12vh;
}
.site-auth-card {
  width: min(100%, 380px); display: flex; flex-direction: column;
  gap: .8rem; padding: 1.4rem;
}
.site-auth-card h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }
.site-auth-card p { margin: 0; }
.site-auth-msg { font-size: 14px; }
.site-admin { max-width: 1100px; }
.site-admin h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.site-admin a.btn { text-decoration: none; }
.site-invite-out { display: flex; gap: .5rem; margin-top: .6rem; }
.site-invite-out input { font-family: ui-monospace, Consolas, monospace; }
.site-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
/* Таблицы страницы владельца узкие: min-width таблицы кругов им не нужен. */
.site-admin table { min-width: 0; table-layout: auto; }
.site-admin th, .site-admin td { padding: .45rem .6rem; text-align: left; }