:root {
  --ink: #0a0b09;
  --panel: #121310;
  --panel-2: #191a15;
  --line: #26281f;
  --line-soft: #1c1e17;
  --text: #e9e7dd;
  --muted: #85857a;
  --mark: #f0c420;
  --mark-dim: #6b5a18;
  --ok: #8fbf6a;
  --gap: #c4674a;
  --rail: 208px;
  --display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Ссылка — цвета текста, как всё вокруг; под курсором желтеет. Без
   заливки и подчёркивания. Своё оформление у тех, кто и так читается
   как управление: кнопки, боковое меню, фишки отбора, плитки с числами. */
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--mark); }
a.sub { color: var(--muted); }
a.sub:hover { color: var(--mark); }

.chips a:hover { color: var(--mark); }
.rail nav a:hover { color: var(--text); }
a.fact:hover, .hero-count a:hover, .rail-money:hover { color: inherit; }

:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- shell */

.shell { display: flex; min-height: 100vh; }

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  border-right: 1px solid var(--line);
  padding: 22px 0 18px;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  z-index: 20;
}

.brand { padding: 0 20px 26px; display: flex; align-items: center; gap: 11px; }

.glyph {
  width: 26px; height: 26px; flex: none;
  display: grid; grid-template: repeat(6, 1fr) / repeat(6, 1fr);
}
.glyph i { background: transparent; }
.glyph i.on { background: var(--mark); }

.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.brand-name span { display: block; color: var(--muted); font-weight: 400; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }

.rail nav { display: flex; flex-direction: column; }
.rail nav a {
  padding: 9px 20px;
  color: var(--muted);
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.rail nav a:hover { color: var(--text); }
.rail nav a.on { color: var(--text); border-left-color: var(--mark); background: linear-gradient(90deg, rgba(240,196,32,.06), transparent 70%); }

/* Деньги на лицевом счёте — над подписью организации: заказ кодов упирается
   именно в них, и видеть остаток лучше со всех страниц. */
.rail-money {
  margin-top: auto; padding: 12px 20px 14px; display: block;
  border-top: 1px solid var(--line-soft);
}
.rail-money span {
  display: block; font-family: var(--display); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.rail-money b {
  font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--mark);
  letter-spacing: -.02em;
}
.rail-money:hover b { color: #ffd545; }
.rail-money + .rail-foot { margin-top: 12px; }

.rail-foot { margin-top: auto; padding: 0 20px; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.rail-foot a { display: block; margin-top: 6px; }

.main { margin-left: var(--rail); flex: 1; min-width: 0; padding: 34px 40px 80px; max-width: 1500px; }

/* ---------------------------------------------------------------- type */

.eyebrow {
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  margin: 0 0 14px;
}

.lede { color: var(--muted); margin: 0 0 26px; max-width: 62ch; }

.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- hero */

.hero { display: flex; gap: 44px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 26px; }

.hero-count {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 84px);
  line-height: .92;
  letter-spacing: -0.035em;
  color: var(--mark);
  font-variant-numeric: tabular-nums;
}
.hero-count small { display: block; font-family: var(--body); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 12px; }

.hero-facts { display: flex; gap: 34px; padding-bottom: 6px; }
.fact b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.fact span { font-size: 11.5px; color: var(--muted); }
/* Цифра, за которой стоит список, кликается — но выглядит как цифра, а не
   как ссылка: подчёркивание в ряду чисел читалось бы как мусор. */
a.fact { color: inherit; text-decoration: none; display: block; }
a.fact:hover b { color: var(--mark); }
a.fact:hover span { color: var(--text); }
.hero-count a:hover { color: var(--text); }

/* -------------------------------------------------- the module field */

.field-wrap { border: 1px solid var(--line); background: var(--panel); padding: 18px 20px 16px; margin-bottom: 30px; }

.field {
  display: grid;
  grid-template-columns: repeat(auto-fill, 9px);
  gap: 2px;
  margin-bottom: 14px;
}
.field.sm { grid-template-columns: repeat(auto-fill, 6px); gap: 1.5px; margin: 0; }
.field b { display: block; width: 7px; height: 7px; }
.field.sm b { width: 4.5px; height: 4.5px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; }
.legend div { display: flex; align-items: center; gap: 7px; }
.legend i { width: 8px; height: 8px; flex: none; }
.legend em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 11.5px; }

.strip-cell { min-width: 130px; width: 22%; }

/* ---------------------------------------------------------------- table */

.panel { border: 1px solid var(--line); background: var(--panel); margin-bottom: 30px; }
.panel > header { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: nowrap; }
.panel > header h2 { margin: 0; }

/* Панель-раскладушка: заголовок кликается, содержимое скрыто до нажатия.
   Нужна там, где раздел смотрят изредка, а место он занимает всегда. */
details.panel > summary {
  padding: 15px 18px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel[open] > summary { border-bottom: 1px solid var(--line); }
details.panel > summary:hover { background: var(--panel-2); }
details.panel > summary h2 { margin: 0; }
details.panel > summary .caret { color: var(--muted); font-size: 10px; transition: transform .15s; }
details.panel[open] > summary .caret { transform: rotate(90deg); }

table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--display);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }
.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
/* В шапке от .num нужен только правый край: моноширинный шрифт и тесные
   пробелы делают такой заголовок мельче соседних. */
th.num { font-family: var(--display); letter-spacing: .16em; }
.big { font-size: 15px; color: var(--mark); }

.thumb { width: 38px; height: 38px; object-fit: cover; background: var(--panel-2); border: 1px solid var(--line); }
.thumb.ph { display: grid; place-items: center; color: var(--muted); font-size: 15px; }

tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: var(--panel-2); }
/* Строка ведёт туда же, куда ссылка внутри неё, — значит и ссылка
   желтеет при наведении в любое место строки, не только на слово. */
tr[data-href]:hover a { color: var(--mark); }

.title { display: block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Описание из декларации обрезать нельзя: по первым сорока знакам «Соединители
   и контактные элементы для проводов из…» не отличить одну позицию от другой. */
.text { display: block; max-width: 52ch; }
.sub { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }

.tag {
  display: inline-block; padding: 2px 7px; font-size: 10.5px; font-family: var(--mono);
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
  /* Рядом с плашкой почти всегда стоит пояснение — без зазора они слипаются. */
  margin-right: 8px;
}
.tag:last-child { margin-right: 0; }
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.tag.gap { color: var(--gap); border-color: color-mix(in srgb, var(--gap) 40%, transparent); }
.tag.mark { color: var(--mark); border-color: var(--mark-dim); }

.dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; }

/* ---------------------------------------------------------------- forms */

.btn {
  display: inline-block; padding: 8px 15px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-family: var(--body);
  font-size: 13px; cursor: pointer; transition: border-color .12s, color .12s;
}
.btn:hover { border-color: var(--mark-dim); color: var(--mark); }
.btn.primary { background: var(--mark); border-color: var(--mark); color: #14140c; font-weight: 600; }
.btn.primary:hover { background: #ffd545; color: #14140c; }
.btn.quiet { background: transparent; }
.btn.danger:hover { border-color: var(--gap); color: var(--gap); }

input:not([type]), input[type="text"], input[type="password"], input[type="search"],
input[type="file"], input[type="number"], input[type="date"], input[type="email"],
input[type="tel"], textarea, select {
  background: var(--ink); border: 1px solid var(--line); color: var(--text);
  padding: 9px 12px; font-family: var(--body); font-size: 13.5px; width: 100%;
  border-radius: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--mark-dim); outline: none; }

/* Списки рисуем сами: системный вид тянет за собой светлую тему браузера
   и посреди тёмной страницы выглядит чужеродно. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2385857a' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
}
select:hover { border-color: var(--mark-dim); }
select:disabled { color: var(--muted); cursor: default; opacity: 1; }
select option { background: var(--panel); color: var(--text); }
/* Список внутри строки таблицы — по содержимому, а не во всю ширину. */
select.inline { width: auto; min-width: 160px; }

/* Выбор файла: системная кнопка светлая и с чужой рамкой — рисуем свою,
   а имя файла оставляем приглушённым текстом рядом. */
input[type="file"] { padding: 7px 12px; color: var(--muted); cursor: pointer; }
input[type="file"]::file-selector-button {
  margin: 0 12px 0 0; padding: 6px 13px; border-radius: 0; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-family: var(--body); font-size: 12.5px;
}
input[type="file"]::file-selector-button:hover { border-color: var(--mark-dim); color: var(--mark); }
input[type="file"]:focus { color: var(--text); }

/* Календарь и стрелки счётчика — тёмные, иначе браузер рисует белые. */
input[type="date"], input[type="number"] { color-scheme: dark; }
input[type="checkbox"] { accent-color: var(--mark); width: auto; vertical-align: -1px; }
input[type="radio"] { accent-color: var(--mark); width: auto; margin: 0; }

/* Выбор из пары вариантов — строкой, чтобы не отнимать высоту у формы. */
.choices { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.choices label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--text);
}
label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.field-row { margin-bottom: 18px; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* Ряд отбора и выгрузки — всегда одна строка. Стоило появиться «Сбросить»,
   как ряд переносился и «Excel» с «CSV» уезжали на второй этаж. Ужимается
   поле ввода: кнопки режутся хуже, чем поле, и читаются они по надписи. */
.panel > header { overflow-x: auto; }
.panel > header > * { min-width: 0; }
.searchbar { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
/* Ширина явным числом, а не percent: input с width:100% в паре с
   justify-content:space-between в шапке панели сжимался до своего же
   intrinsic-размера и ронял кнопку «Найти» на новую строку. */
.searchbar input { width: 260px; max-width: 100%; flex: 0 1 auto; }
/* Ужиматься полю есть куда, но не до неузнаваемости: поле в три символа
   и календарь без даты — это уже не поле. Дальше ряд едет вбок. */
.searchbar input[type="search"], .searchbar input[type="text"] { min-width: 150px; }
.searchbar input[type="date"] { min-width: 135px; }
.searchbar .btn, .searchbar button { flex: none; white-space: nowrap; }

.chips { display: flex; gap: 8px; flex: none; }
.chips a { padding: 5px 11px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); white-space: nowrap; }
.chips a.on { color: var(--mark); border-color: var(--mark-dim); }

.note { padding: 12px 16px; border: 1px solid var(--line); border-left: 2px solid var(--mark); background: var(--panel); margin-bottom: 22px; font-size: 13px; }
.note.bad { border-left-color: var(--gap); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 9px 18px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.codes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 20px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.codes-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty { padding: 46px 20px; text-align: center; color: var(--muted); }

/* ---------------------------------------------------------------- login */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login form { width: 300px; }
.login .glyph { width: 40px; height: 40px; margin: 0 auto 20px; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .rail { position: static; width: 100%; flex-direction: row; align-items: center; padding: 12px 16px; border-right: none; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .brand { padding: 0 18px 0 0; }
  .brand-name span { display: none; }
  .rail nav { flex-direction: row; }
  .rail nav a { padding: 6px 10px; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .rail nav a.on { border-left: none; border-bottom-color: var(--mark); background: none; }
  .rail-foot, .rail-money { display: none; }
  .shell { flex-direction: column; }
  .main { margin-left: 0; padding: 22px 16px 60px; }
  .hero { gap: 24px; }
  .hero-facts { gap: 22px; }
  .scroll-x { overflow-x: auto; }
  /* Уже этого одна строка отбора не помещается ни при каком сжатии. */
  .panel > header, .searchbar { flex-wrap: wrap; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
}

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

/* per-row declaration breakdown */
.mini { display: flex; height: 6px; min-width: 8px; gap: 1px; }
.mini span { display: block; min-width: 2px; }

/* Позиция декларации: сводная строка, а подробности — внутри неё. */
details.fold { border-bottom: 1px solid var(--line-soft); }
details.fold:last-of-type { border-bottom: none; }
details.fold > summary {
  list-style: none; cursor: pointer; padding: 13px 18px;
  display: flex; align-items: center; gap: 14px; font-size: 13px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: var(--panel-2); }
details.fold[open] > summary { background: var(--panel-2); }
details.fold > summary > .caret { color: var(--muted); font-size: 10px; transition: transform .15s; }
details.fold[open] > summary > .caret { transform: rotate(90deg); }
details.fold > summary > .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.fold > summary > .thumb { flex: none; width: 32px; height: 32px; }
details.fold > summary > .bar { flex: none; }
.fold-body { padding: 2px 18px 20px 46px; border-top: 1px solid var(--line-soft); }
.fold-body h3 {
  font-family: var(--display); font-size: 9.5px; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 18px 0 8px;
}
.fold-body table th, .fold-body table td { padding-left: 0; }

/* Доля объёма — полоской: глазами она читается быстрее процента. */
.bar { display: block; height: 6px; background: var(--panel-2); border: 1px solid var(--line-soft); min-width: 40px; }
.bar i { display: block; height: 100%; }

/* Сообщения о действиях — в углу, чтобы страница не прыгала. */
.toasts {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 44px));
}
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.45;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 2px solid var(--mark);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  animation: toast-in .18s ease-out;
}
.toast.leaving { animation: toast-out .18s ease-in forwards; }
.toast.bad { border-left-color: var(--gap); }
.toast button {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0; margin-left: auto;
}
.toast button:hover { color: var(--text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }

/* прогресс распознавания */
.progress { height: 8px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 12px; }
.progress i { display: block; height: 100%; background: var(--mark); transition: width .3s; }

/* Ожидание без известной длины: бегунок ходит туда-обратно. */
.progress.wait { overflow: hidden; }
.progress.wait i { width: 30%; animation: wait-run 1.1s ease-in-out infinite; }
@keyframes wait-run {
  0% { margin-left: -30%; }
  100% { margin-left: 100%; }
}

/* Список с ручным вводом: поле для своего значения встаёт под списком и
   показывается, только когда выбрано «другое». */
.pick { display: grid; gap: 8px; }