/* Кабинет клиента. Тёмная тема — не украшение: заказы разбирают вечером, и
   светлый лист в тёмной комнате бьёт по глазам. Поэтому цвета собраны в
   переменные и переопределяются трижды: системная тема, явно светлая, явно
   тёмная. Ни один цвет не объявлен только внутри media-блока — иначе при
   явном выборе темы он остался бы неопределённым. */

:root {
  --фон: #f7f7f8;
  --фон-карточки: #fff;
  --фон-шапки: #fff;
  --фон-полосы: #fafafa;
  --фон-наведения: #f0f4f8;
  --текст: #1c1e21;
  --текст-тихий: #5d6470;
  --текст-совсем-тихий: #8b919c;
  --рамка: #e0e2e6;
  --рамка-жирная: #c9ccd2;
  --ссылка: #1a5fb4;
  --акцент: #1a5fb4;
  --акцент-текст: #fff;
  --беда-фон: #fdeeee;
  --беда-текст: #a3272b;
  --метка-фон: #eef1f5;
  --метка-текст: #45505f;
  --трек-фон: #e8f4ec;
  --трек-текст: #1f6b3a;
  --китайский: #7a8190;
  --тень: 0 1px 2px rgba(0, 0, 0, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --фон: #16181c;
    --фон-карточки: #1e2126;
    --фон-шапки: #1a1d21;
    --фон-полосы: #212429;
    --фон-наведения: #272c33;
    --текст: #e6e8ea;
    --текст-тихий: #a3a9b3;
    --текст-совсем-тихий: #767c86;
    --рамка: #2e333a;
    --рамка-жирная: #414751;
    --ссылка: #7fb2f0;
    --акцент: #3b82c4;
    --акцент-текст: #fff;
    --беда-фон: #3a1e1f;
    --беда-текст: #f2a0a2;
    --метка-фон: #2a2f36;
    --метка-текст: #b7bec8;
    --трек-фон: #1d3327;
    --трек-текст: #7fcf9c;
    --китайский: #868d99;
    --тень: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --фон: #16181c;
  --фон-карточки: #1e2126;
  --фон-шапки: #1a1d21;
  --фон-полосы: #212429;
  --фон-наведения: #272c33;
  --текст: #e6e8ea;
  --текст-тихий: #a3a9b3;
  --текст-совсем-тихий: #767c86;
  --рамка: #2e333a;
  --рамка-жирная: #414751;
  --ссылка: #7fb2f0;
  --акцент: #3b82c4;
  --акцент-текст: #fff;
  --беда-фон: #3a1e1f;
  --беда-текст: #f2a0a2;
  --метка-фон: #2a2f36;
  --метка-текст: #b7bec8;
  --трек-фон: #1d3327;
  --трек-текст: #7fcf9c;
  --китайский: #868d99;
  --тень: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--фон);
  color: var(--текст);
  font: 15px/1.45 system-ui, "Segoe UI", sans-serif;
}

a { color: var(--ссылка); }

/* ── шапка ── */

.шапка {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--фон-шапки);
  border-bottom: 1px solid var(--рамка);
  position: sticky;
  top: 0;
  z-index: 5;
}

.шапка-имя { font-weight: 650; font-size: 1.05rem; }
.шапка-кто { color: var(--текст-тихий); font-size: .9rem; }
/* Перенос: на 375 px кнопок в шапке четыре — тема, размер фото, «Мои
   устройства» и «Выйти», — и без него «Выйти» уходила на 30 px за край,
   утаскивая с собой горизонтальную прокрутку всей страницы. Замер
   24 сентября: шапка 405 px в окне 375. */
.шапка-кнопки { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }

/* ── кнопки и поля ── */

.кнопка, .кнопка-тихая {
  font: inherit;
  padding: .35rem .8rem;
  border-radius: 6px;
  cursor: pointer;
}

.кнопка {
  background: var(--акцент);
  color: var(--акцент-текст);
  border: 1px solid transparent;
}

.кнопка-тихая {
  background: var(--фон-карточки);
  color: var(--текст-тихий);
  border: 1px solid var(--рамка);
  font-size: .88rem;
}

/* Кнопка необратимого действия. Не акцентная: акцентом в кабинете помечено то,
   что человек и пришёл сделать, а удаление всех своих данных — не оно. Цвет
   берётся из переменных беды, поэтому в тёмной теме не слепит. */
.кнопка-опасная {
  background: var(--беда-фон);
  color: var(--беда-текст);
  border: 1px solid var(--беда-текст);
}

.кнопка-опасная:disabled { opacity: .55; }

.удаление p { margin: .5rem 0; }

.удаление-список {
  margin: .6rem 0;
  padding-left: 1.2rem;
  line-height: 1.6;
}

/* Поле для кода из письма: цифры, а не текст. Моноширинный шрифт и разрядка —
   чтобы человек видел, что набрал, и не искал пропущенную цифру глазами. */
.поле-код {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: .12em;
  width: 11rem;
  padding: .45rem .6rem;
  border: 1px solid var(--рамка);
  border-radius: .4rem;
  background: var(--фон-карточки);
  color: var(--текст);
}

.кнопка:hover, .кнопка-тихая:hover { filter: brightness(1.06); }
.кнопка:disabled, .кнопка-тихая:disabled { opacity: .55; cursor: default; }

input, select {
  font: inherit;
  padding: .3rem .45rem;
  color: var(--текст);
  background: var(--фон-карточки);
  border: 1px solid var(--рамка-жирная);
  border-radius: 6px;
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--акцент);
  outline-offset: 1px;
}

/* ── вход ── */

.вход {
  max-width: 30rem;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--фон-карточки);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  box-shadow: var(--тень);
}

.вход h1 { margin: 0 0 .6rem; font-size: 1.2rem; }
.вход p { color: var(--текст-тихий); margin: .5rem 0; }
.вход label { display: block; margin: 1rem 0 .25rem; font-size: .9rem; color: var(--текст-тихий); }
.вход input { width: 100%; }
.вход .кнопка { margin-top: .8rem; }
.сноска { font-size: .84rem; color: var(--текст-совсем-тихий); }

/* ── фильтры ── */

.фильтры {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem .9rem;
  padding: .8rem 1rem;
  background: var(--фон-карточки);
  border-bottom: 1px solid var(--рамка);
}

.поле { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--текст-тихий); }
.поле-широкое { flex: 1 1 14rem; }
.поле-широкое input { width: 100%; }
.поле-галочка { flex-direction: row; align-items: center; gap: .35rem; padding-bottom: .35rem; }
.поле-узкое { flex: 0 1 11rem; }
.поле-узкое input, .поле-узкое select { width: 100%; }

/* Панель групповых действий над списком заказов. Появляется вместе с первой
   отметкой и прилипает к верху: строк на экране двести, и человек отмечает их
   сверху вниз — уехавшая вверх панель заставляла бы прокручивать обратно. */
.панель-выбора {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  margin: .6rem 0;
  padding: .7rem .9rem;
  border: 1px solid var(--рамка);
  border-radius: .5rem;
  background: var(--фон-карточки);
}

.панель-выбора .беда { flex: 1 1 100%; margin: 0; }

/* Колонка «Отправка»: партий у позиции может быть две — метки идут в столбик,
   иначе они расталкивают строку по ширине. */
.к-отправка { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ── сводка ── */

.сводка {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .8rem 1rem 0;
}

.чип {
  background: var(--фон-карточки);
  border: 1px solid var(--рамка);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .85rem;
  color: var(--текст-тихий);
}

.чип b { color: var(--текст); font-weight: 650; }

/* ── группы по складам ── */

.склад {
  margin: 1rem;
  background: var(--фон-карточки);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  box-shadow: var(--тень);
  overflow: hidden;
}

.склад-шапка {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
  padding: .7rem .9rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--рамка);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.склад-шапка:hover { background: var(--фон-наведения); }
.склад-имя { font-weight: 650; }
.склад-город, .склад-счёт { color: var(--текст-тихий); font-size: .87rem; }
.склад-счёт { margin-left: auto; }
.склад-стрелка { color: var(--текст-совсем-тихий); width: 1rem; }

.склад-адрес {
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--рамка);
  font-size: .84rem;
  color: var(--текст-тихий);
  word-break: break-word;
}

/* ── таблица ── */

.обёртка-таблицы { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: .88rem; }

th {
  text-align: left;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--текст-совсем-тихий);
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--рамка);
  white-space: nowrap;
}

td { padding: .5rem .6rem; border-bottom: 1px solid var(--рамка); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--фон-полосы); }
tbody tr:hover { background: var(--фон-наведения); }
tbody tr:last-child td { border-bottom: 0; }

.к-дата, .к-число, .к-заказ { white-space: nowrap; }
.к-число { text-align: right; font-variant-numeric: tabular-nums; }
.к-товар { min-width: 18rem; }

.товар-ru { display: block; }
/* Китайский оригинал показываем всегда: по нему человек ищет товар у продавца
   и сверяет, что перевод не подменил вещь. Тише основного, но не спрятан. */
.товар-zh { display: block; color: var(--китайский); font-size: .82rem; margin-top: .1rem; }
.вариант { color: var(--текст-тихий); font-size: .82rem; }

.трек {
  display: inline-block;
  background: var(--трек-фон);
  color: var(--трек-текст);
  border-radius: 5px;
  padding: .1rem .4rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .84rem;
  cursor: copy;
}

.нет-трека { color: var(--текст-совсем-тихий); }
.перевозчик { display: block; color: var(--текст-тихий); font-size: .8rem; margin-top: .1rem; }

.метка {
  display: inline-block;
  background: var(--метка-фон);
  color: var(--метка-текст);
  border-radius: 5px;
  padding: .1rem .45rem;
  font-size: .8rem;
  white-space: nowrap;
}

/* ── состояния ── */

.пусто, .беда {
  margin: 1rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--рамка);
  background: var(--фон-карточки);
  color: var(--текст-тихий);
}

.беда { background: var(--беда-фон); color: var(--беда-текст); border-color: transparent; }

/* Перенос обязателен: в строке рядом с «Создать партию» встала вторая кнопка
   («Excel»), и на 375 px три элемента в ряд не помещались — надпись кнопки
   обрезалась до «Excel:», а сноска уезжала за край. */
.ещё-строка { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1rem; }

@media (max-width: 40rem) {
  .шапка-кто { display: none; }
  .склад { margin: .6rem; }

  /* Панель выбора на телефоне не липкая: поля встают в столбик, высота
     доходит до 245 px — треть экрана, — и прилипшая панель закрывала бы
     ровно тот список, из которого человек отмечает строки. Замер 24 сентября. */
  .панель-выбора { position: static; }
  .панель-выбора .поле-узкое { flex: 1 1 100%; }

  /* ── таблица на узком экране становится карточками ──
     Замер 20 сентября на 375 px: таблица заказов 943 px в окне 354 px, шесть
     колонок из восьми за кадром. Боком таблица не читается: человек видел дату
     и номер заказа, а товар, трек и статус — нет, и о том, что они есть,
     догадывался по горизонтальной полосе.
     Поэтому строка — карточка, ячейка — «подпись: значение»; подпись берётся
     из шапки (data-подпись проставляет таблица() в дом.js). */
  .обёртка-таблицы { overflow-x: visible; }

  table, tbody, tr, td { display: block; width: auto; }
  thead { display: none; }

  tbody tr {
    border: 1px solid var(--рамка);
    border-radius: 10px;
    background: var(--фон-карточки);
    margin: .6rem 0;
    padding: .2rem .1rem;
  }
  /* Полосы и подсветка наведением на карточках только мешают. */
  tbody tr:nth-child(even), tbody tr:hover { background: var(--фон-карточки); }

  td {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    border-bottom: 1px solid var(--рамка);
    padding: .4rem .6rem;
  }
  tr td:last-child { border-bottom: 0; }
  /* Пустая ячейка на карточке — пустая строка с подписью и ничем: прячем. */
  td:empty { display: none; }

  td[data-подпись]::before {
    content: attr(data-подпись);
    flex: 0 0 7.5rem;
    color: var(--текст-совсем-тихий);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  /* Подпись без текста (колонка кнопок) не должна занимать свои 7.5rem. */
  td[data-подпись=""]::before { display: none; }

  /* Название товара — заголовок карточки, ему подпись не нужна. */
  .к-товар { display: block; min-width: 0; }
  .к-товар::before { display: none; }
  .к-товар .товар-ru { font-weight: 600; }

  .к-число { text-align: left; }
  /* Ячейка с кнопками и так flex — ей хватает своего расположения. */
  td.к-кнопки { flex-wrap: wrap; }

  /* Форма ввода трека (#47) на карточке: ячейка — flex с подписью слева, и
     форма в остатке ширины не помещалась, уезжая за край экрана. Поймано на
     живой проверке на 375 px. Отдаём ей всю ширину карточки. */
  td.к-трек { flex-wrap: wrap; }
  .трек-форма { flex: 1 1 100%; }
  .трек-форма input, .трек-форма select { flex: 1 1 8rem; min-width: 0; }

  /* Галочка выбора позиции: на карточке она оказывается одна в строке, и без
     подписи это просто квадрат непонятно о чём. В шапке таблицы у колонки
     подписи нет намеренно — там всё ясно из соседних столбцов. */
  td.к-галочка::after {
    content: 'отметить в партию';
    color: var(--текст-тихий);
    white-space: nowrap;   /* иначе flex сжимает подпись в столбик по слову */
  }
}

/* ── вкладки разделов ── */

.вкладки {
  display: flex;
  /* Перенос: на 375 px три вкладки («Заказы», «Отправки в Россию», «Адреса
     складов») в строку не помещаются, и последняя уходила за край вместе с
     горизонтальной прокруткой всей страницы. Замер 24 сентября. */
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem 1rem 0;
  background: var(--фон-шапки);
  border-bottom: 1px solid var(--рамка);
}

.вкладка {
  font: inherit;
  padding: .45rem .9rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: none;
  color: var(--текст-тихий);
  cursor: pointer;
}

.вкладка:hover { background: var(--фон-наведения); }

/* Выбранная вкладка «сливается» с содержимым: её нижняя граница закрывает
   линию под полосой вкладок — иначе выбранной выглядят сразу две. */
.вкладка-выбрана {
  background: var(--фон);
  border-color: var(--рамка);
  color: var(--текст);
  font-weight: 600;
  margin-bottom: -1px;
  padding-bottom: calc(.45rem + 1px);
}

/* ── блоки раздела отправок ── */

.блок {
  margin: 1rem;
  background: var(--фон-карточки);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  box-shadow: var(--тень);
  overflow: hidden;
}

.блок-шапка {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--рамка);
}

.блок-шапка h2 { margin: 0; font-size: 1rem; }
.блок-шапка .сноска { flex: 1 1 16rem; }
.блок-шапка .кнопка-тихая { margin-left: auto; }

.блок .фильтры { border-top: 0; }
.блок .пусто { margin: .9rem; }
.блок .ещё-строка { margin: .9rem; }
.блок .беда { margin: .9rem; }
.блок > .сноска { display: block; padding: 0 .9rem .6rem; }

/* Поля партии: вес, объём, места, цена — вводятся вместе, поэтому стоят
   одной сеткой, а не столбцом в форме. */
.партия {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  padding: .8rem .9rem;
  border-top: 1px solid var(--рамка);
}

.партия input { width: 9rem; }
.партия .поле-широкое input { width: 100%; }

.поле-сколько { width: 5rem; text-align: right; }

/* Уехавшее целиком остаётся в списке, но приглушённым: человек должен видеть,
   что позиция не пропала, а уже отправлена. */
.строка-уехала { opacity: .55; }

.к-галочка { width: 2rem; }
.к-кнопки { white-space: nowrap; }
.к-кнопки .кнопка-тихая { margin-right: .3rem; }
.к-состав { background: var(--фон-полосы); padding: .6rem .9rem; }
.к-состав table { font-size: .84rem; }

/* ── полоса продуктов ── */

.продукты {
  display: flex;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--фон-шапки);
  border-bottom: 1px solid var(--рамка);
}

.продукт {
  font: inherit;
  font-size: .9rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--рамка);
  background: none;
  color: var(--текст-тихий);
  cursor: pointer;
}

.продукт:hover { background: var(--фон-наведения); }
.продукт-выбран { background: var(--акцент); border-color: transparent; color: var(--акцент-текст); font-weight: 600; }

/* Имя продукта в полосе вкладок: без него человек не видит, в какой он части,
   когда продукт всего один и полоса продуктов скрыта. */
.вкладки-имя {
  font-weight: 650;
  align-self: center;
  padding: 0 .8rem 0 0;
  margin-right: .3rem;
  border-right: 1px solid var(--рамка);
}

/* ── выданный токен ── */

.новый-токен {
  margin: .9rem;
  padding: .8rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--акцент);
  background: var(--фон-полосы);
}

.токен-значение {
  display: block;
  margin: .5rem 0;
  padding: .5rem .6rem;
  border-radius: 6px;
  background: var(--метка-фон);
  color: var(--текст);
  font-family: ui-monospace, Consolas, monospace;
  word-break: break-all;
  user-select: all;
}

.новый-токен .кнопка-тихая { margin-right: .4rem; }
.новый-токен .сноска { margin: .6rem 0 0; }

/* ── склады: карточка написания адреса ── */

.адрес {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--рамка);
}

.адрес:last-child { border-bottom: 0; }
.адрес-шапка { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }

/* Адрес — китайский, длинный и важен целиком: по нему человек и узнаёт склад. */
.адрес-строка {
  margin: .4rem 0;
  word-break: break-word;
  font-size: .92rem;
}

.адрес-подсказки { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0; }
.адрес-форма { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }

/* ── жалобы ── */

.жалоба {
  margin: 1rem;
  padding: .8rem .9rem;
  background: var(--фон-карточки);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  box-shadow: var(--тень);
}

.жалоба-шапка { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.жалоба-текст { margin: .5rem 0; }
.жалоба-пара { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .3rem 0; }

.жалоба-ответ {
  margin: .4rem 0;
  padding: .4rem .6rem;
  border-left: 3px solid var(--акцент);
  background: var(--фон-полосы);
  font-size: .9rem;
}

.жалоба-кнопки { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.жалоба-заметка { flex: 1 1 16rem; }
.жалоба-слепок { margin-top: .6rem; }

/* Слепок — чужая разметка, показанная текстом. Моноширинный, со своей полосой
   прокрутки: он длинный, и растягивать им страницу незачем. */
.слепок-текст {
  margin: .5rem 0 0;
  padding: .6rem;
  max-height: 24rem;
  overflow: auto;
  background: var(--фон-полосы);
  border: 1px solid var(--рамка);
  border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── вход по почте ── */

.вход form { display: block; }
.вход .кнопка { margin-top: 1rem; }

/* Поле пароля с кнопкой «Показать» рядом: кнопка не должна съедать ширину
   поля на телефоне, поэтому поле тянется, кнопка — нет. */
.поле-с-кнопкой { display: flex; gap: .4rem; align-items: stretch; }
.поле-с-кнопкой input { flex: 1 1 auto; min-width: 0; width: auto; }
.поле-с-кнопкой .кнопка-тихая { margin: 0; flex: 0 0 auto; }

/* Кнопка, которая выглядит как ссылка: «Забыли пароль?», «Ко входу».
   Кнопкой, а не <a href="#">, — иначе фрагмент в адресе спорил бы с ключом
   приглашения, который кабинет читает из того же места. */
.ссылка {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ссылка);
  text-decoration: underline;
  cursor: pointer;
}

.запасной { margin-top: 1.5rem; border-top: 1px solid var(--рамка); padding-top: .8rem; }
.запасной summary { cursor: pointer; color: var(--текст-совсем-тихий); font-size: .85rem; }
.запасной[open] summary { margin-bottom: .4rem; }

/* ── мои устройства: этот браузер ── */

.браузер { padding: .8rem .9rem; border-left: 4px solid var(--рамка-жирная); }
.браузер h3 { margin: 0 0 .4rem; font-size: 1rem; }
.браузер p { margin: .3rem 0; }
.браузер-да { border-left-color: var(--трек-текст); }
.браузер-нет { border-left-color: var(--акцент); }
.браузер .шаги { margin: .5rem 0 .2rem; padding-left: 1.3rem; }
.браузер .шаги li { margin: .25rem 0; }
.браузер-форма { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: .7rem 0 .3rem; }
.браузер-форма input { width: 16rem; max-width: 100%; }
#у-итог { margin: 0 .9rem .8rem; }

/* ── клиенты: почта в строке ── */
.к-почта { white-space: nowrap; }
.к-почта input { width: 13rem; max-width: 100%; }
.к-почта .кнопка-тихая { margin-left: .3rem; }
#к-итог-приглашения { margin: 0 .9rem .8rem; }

/* Пояснение прямо в строке таблицы: «у клиента нет кода». Цвет беды, но
   без плашки — строка остаётся строкой таблицы. */
.беда-в-строке { color: var(--беда-текст); font-size: .88rem; }

/* ── имя продукта ── */
.шапка-расшифровка { font-weight: 400; font-size: .82rem; color: var(--текст-совсем-тихий); margin-left: .35rem; }
.вход .подзаголовок { margin: -.35rem 0 .8rem; color: var(--текст-совсем-тихий); font-size: .9rem; }
/* На телефоне расшифровка в шапке уступает место кнопкам: имя остаётся. */
@media (max-width: 40rem) { .шапка-расшифровка { display: none; } }

/* ── русское чтение адреса склада ── */
/* Адрес склада: русское чтение — основной строкой, крупнее и в полный цвет;
   китайский оригинал — ниже, мельче, с кнопкой копирования для продавца. */
.склад-по-русски { color: var(--текст); font-size: .92rem; }
.склад-оригинал { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .3rem; }
.склад-оригинал .товар-zh { display: inline; margin: 0; }
.кнопка-мелкая { font-size: .78rem; padding: .15rem .5rem; }
.вариант .товар-zh { font-size: .78rem; }

/* ── карточка склада: адрес полями формы площадки (#30) ── */

.карточка-склада {
  margin: .6rem 0 1rem;
  padding: .8rem;
  border: 1px solid var(--рамка);
  border-radius: 10px;
  background: var(--фон-карточки);
}

.поле-формы {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--рамка);
}
.карточка-склада .поле-формы:last-of-type { border-bottom: 0; }

.поле-имя { flex: 0 0 11rem; color: var(--текст-тихий); font-size: .87rem; }
/* Китайская подпись поля — по ней человек находит поле в форме площадки. */
.поле-подпись { margin-left: .4rem; color: var(--китайский); }
.поле-значение { flex: 1 1 12rem; word-break: break-word; }
.поле-нет { flex: 1 1 12rem; color: var(--текст-тихий); font-size: .9rem; }
.поле-важное { flex: 1 1 100%; color: var(--беда-текст); font-size: .87rem; }
/* Пометка — не беда, а пояснение: код клиента в адресе склада появляется при
   выдаче, и это нормальный порядок вещей, а не поломка. */
.поле-пометка { flex: 1 1 100%; color: var(--текст-тихий); font-size: .87rem; }

.сноска-важная { margin: .4rem 0; color: var(--беда-текст); font-size: .9rem; }

.склад-правка {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--рамка);
}
.склад-правка .сноска { flex: 1 1 100%; }
.галочка { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }

@media (max-width: 40rem) {
  .поле-имя, .поле-значение, .поле-нет { flex: 1 1 100%; }
}

/* ── код клиента у склада в списке клиентов ── */
.к-код-склада { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.к-код-склада input { text-transform: uppercase; }

/* Китайский оригинал адреса под русским чтением: нужен — по нему сверяют, что
   прочитано то самое место, — но глазами человек идёт по русскому. */
.адрес-китайский {
  margin-top: .25rem;
  font-size: .84rem;
  color: var(--китайский);
  word-break: break-word;
}

/* ── мои коды у складов (#30) ── */

.код-строка, .код-вопрос {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--рамка);
}
.код-строка:last-child { border-bottom: 0; }

/* Вопрос про незнакомый код — не беда, но и не рядовая строка: пока на него не
   ответили, кабинет не знает, чья это посылка. */
.код-вопрос { background: var(--фон-наведения); border-radius: 8px; margin-bottom: .4rem; }

.код-имя {
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 650;
  letter-spacing: .02em;
}

.выбор-кода {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0 .7rem;
  border-bottom: 1px solid var(--рамка);
  margin-bottom: .3rem;
}
.выбор-кода .поле-имя { flex: 0 0 11rem; }

.блок-пояснение { flex: 1 1 100%; margin: .2rem 0 0; color: var(--текст-тихий); font-size: .87rem; }

@media (max-width: 40rem) {
  .выбор-кода .поле-имя { flex: 1 1 100%; }
}

/* ── подсказка в разделе (например, куда смотреть после первого письма) ── */
.подсказка {
  margin: .8rem 1rem 1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--рамка);
  border-left: 3px solid var(--акцент);
  border-radius: 8px;
  background: var(--фон-полосы);
}
.подсказка h3 { margin: 0 0 .3rem; font-size: .95rem; }
.подсказка p { margin: 0; }

/* Готовая строка для DNS: её копируют целиком, поэтому моноширинно и с рамкой,
   чтобы не спутать с обычным текстом подсказки. */
.подсказка-строка {
  display: inline-block;
  margin: .3rem .4rem .3rem 0;
  padding: .2rem .45rem;
  border: 1px solid var(--рамка);
  border-radius: 6px;
  background: var(--фон-карточки);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .86rem;
  word-break: break-all;
}

/* ── трек, вписанный вручную (#47) ── */

/* «Площадка не показывает трек» — не то же, что «ещё не собран»: ждать нечего,
   и подпись должна отличаться от тихого прочерка, иначе человек будет ждать. */
.трек-нет-совсем { color: var(--беда-текст); font-size: .84rem; }
.трек-вручную {
  display: inline-block;
  margin-left: .35rem;
  color: var(--текст-совсем-тихий);
  font-size: .78rem;
}
.кнопка-мелкая { padding: .15rem .5rem; font-size: .8rem; }

.трек-форма {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
}
.трек-беда { flex: 1 1 100%; color: var(--беда-текст); font-size: .82rem; }

/* ── миниатюра товара ── */

.товар-с-фото { display: flex; gap: .6rem; align-items: flex-start; }
.товар-текст { min-width: 0; }   /* иначе длинное название распирает строку */

/* Размер задан жёстко и одинаково для картинки и для её отсутствия: иначе
   строки скачут по высоте, пока грузятся, и список «дышит» под курсором. */
.товар-фото {
  flex: 0 0 auto;
  width: var(--размер-фото, 3rem);
  height: var(--размер-фото, 3rem);
  border-radius: 6px;
  object-fit: cover;
  background: var(--фон-полосы);
  border: 1px solid var(--рамка);
}

/* Место без картинки: тихая рамка, а не пустота — так видно, что фото просто
   нет, а не «не загрузилось». */
/* Место под фото со словом, почему его нет: «нет фото» — не собрано со
 страницы, «не вышло» — не смогли забрать с площадки. Пустая рамка молчала,
 и человек достраивал причину сам. */
.товар-фото-нет {
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .62rem;
  line-height: 1.1;
  /* Не «совсем тихий»: подпись здесь несёт смысл, а не украшает. При 10 px
     #8b919c даёт 3.2 к 1 в светлой теме и 3.7 в тёмной — ниже 4.5, нужных
     мелкому тексту, то есть слово читалось бы хуже, чем молчащая рамка,
     которую оно заменило. С «тихим» выходит 6.0 и 6.6. Считано, а не на
     глаз: контраст проверяется в ОБЕИХ темах, в тёмной он обычно и проседает. */
  color: var(--текст-тихий);
  overflow: hidden;
}

/* ── история адресов склада ──
   Тревога — заказ на прежний адрес после смены: посылка может не дойти.
   «Прежний» без даты смены — мягко: заказ мог быть и до смены.
   Цвета из общих переменных — тёмная тема приходит вместе с ними. */

.метка-тревога { background: var(--беда-фон); color: var(--беда-текст); white-space: normal; }
.метка-прежний {
  background: transparent;
  border: 1px dashed var(--рамка-жирная);
  color: var(--текст-тихий);
  white-space: normal;
}
/* Строка-предупреждение под заказом: прижата к нему, без своей верхней рамки. */
tr.строка-адреса td { padding-top: 0; border-top: 0; }
td.к-адрес-заказа .метка { display: inline-block; font-size: .85rem; padding: .25rem .6rem; }

.адреса-склада {
  margin: .5rem 1rem 1rem;
  padding: .75rem;
  border: 1px solid var(--рамка);
  border-radius: 10px;
  background: var(--фон-карточки);
}
.адрес-склада { padding: .6rem 0; border-bottom: 1px solid var(--рамка); }
.адрес-склада:last-child { border-bottom: 0; }
.адрес-склада.прежний .адрес-строка { color: var(--текст-тихий); }

.адрес-период { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-top: .5rem; }
.период-галка { align-self: center; white-space: nowrap; }
.период-дата { display: flex; flex-direction: column; gap: .15rem; }
.адрес-период .беда-в-строке { flex: 1 1 100%; }

/* Русское чтение адреса склада — между нашим названием и китайским оригиналом.
   Тише названия, но крупнее иероглифов: это адрес, его читают целиком. */
.склад-адрес-ру { margin-top: .15rem; color: var(--текст-тихий); font-size: .92rem; }

/* ── номер заказа: ссылка на площадку и копирование ──
   Номер и значок в одной строке; значок бледный, пока на ячейку не навели —
   он нужен изредка, а мозолит глаза в каждой строке таблицы. */
.заказ-ссылка { color: var(--ссылка); text-decoration: none; border-bottom: 1px dotted var(--ссылка); }
.заказ-ссылка:hover, .заказ-ссылка:focus-visible { text-decoration: none; border-bottom-style: solid; }
.кнопка-значок {
  margin-left: .35rem;
  padding: 0 .2rem;
  border: 0;
  background: transparent;
  color: var(--текст-совсем-тихий);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  opacity: .5;
}
td:hover > .кнопка-значок, .кнопка-значок:hover, .кнопка-значок:focus-visible { opacity: 1; color: var(--текст-тихий); }

/* Заметка партии: своей строкой под партией, прижата к ней. */
tr.строка-заметки td { padding-top: 0; border-top: 0; }
.к-заметка-партии { color: var(--текст-тихий); font-size: .88rem; white-space: normal; }

/* Отметить пачкой то, что на склад не похоже: гостиницы и квартиры из поездок.
   Стоит над списком неразобранных адресов, до самих карточек. */
.адреса-пачкой {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 1rem .6rem;
  padding: .5rem .75rem;
  border: 1px dashed var(--рамка-жирная);
  border-radius: 8px;
}
.адреса-пачкой .сноска { flex: 1 1 18rem; }

/* Почему у заказа нет адреса: строка «состояние — пояснение» в шапке группы.
   Метка и слова сервера рядом, чтобы читалось одной мыслью. */
.адрес-состояние { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-top: .35rem; }
td.к-статус .метка + .метка { display: inline-block; margin-top: .25rem; }