/*
  Складской учёт - Telegram Mini App.

  Замысел: внутри Telegram приложение должно выглядеть родным (цвета берём из
  темы клиента, главное действие - нативная кнопка), но говорить языком
  складской накладной: моноширинные табличные цифры, полоса «ИТОГО» и штемпель
  статуса оплаты. Всё остальное намеренно тихое, чтобы цифры читались сразу.
*/

:root {
  /* Значения по умолчанию - на случай открытия вне Telegram. */
  --tg-bg: #ffffff;
  --tg-bg-secondary: #f2f4f8;
  --tg-text: #14192b;
  --tg-hint: #79839c;
  --tg-link: #2a67d4;
  --tg-button: #2a67d4;
  --tg-button-text: #ffffff;
  --tg-separator: #e2e6ef;

  /* Семантика учёта: долг и минус - цвет штемпеля, а не «просто красный». */
  --stamp: #b4245a;
  --warn: #a8781a;
  --ok: #1b7a5a;

  --radius: 14px;
  --radius-sm: 10px;
  --gap: 12px;
  --pad: 16px;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --shadow: 0 1px 2px rgba(15, 22, 41, 0.06), 0 10px 30px -24px rgba(15, 22, 41, 0.5);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-scheme="dark"] {
  --stamp: #ff6b9a;
  --warn: #e0b341;
  --ok: #4fd1a1;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body.sheet-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  /* 16px базовый: iOS не станет зумить поля ввода при фокусе. */
  font-size: 16px;
  line-height: 1.4;
  color: var(--tg-text);
  background: var(--tg-bg-secondary);
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }

.num, .row__value, .tile__value, .total-bar__value, .stepper__input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--tg-hint); font-size: 14px; }
.danger { color: var(--stamp); }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
.strong { font-weight: 700; }

/* --------------------------------------------------------------------- */
/* Каркас                                                                 */
/* --------------------------------------------------------------------- */
.appbar {
  display: flex;
  align-items: center;
  padding: calc(var(--safe-top) + 8px) 8px 8px;
  background: var(--tg-bg);
  border-bottom: 1px solid var(--tg-separator);
  position: relative;
}

.appbar__btn {
  flex: 0 0 40px;
  width: 40px;
  height: 36px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  color: var(--tg-link);
  display: flex;
  align-items: center;
  justify-content: center;
}
.appbar__btn[hidden] {
  display: none; /* вместо visibility: hidden */
}

.appbar__title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.appbar__btn:active { background: var(--tg-bg-secondary); }
.in-telegram #back-btn { display: none; }

.screen {
  padding: var(--gap) var(--gap) calc(84px + var(--safe-bottom));
  max-width: 760px;
  margin: 0 auto;
}

.boot { padding: 40px 0; text-align: center; color: var(--tg-hint); }

/* Нижняя навигация - основной способ перемещения на телефоне. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  padding: 6px 4px calc(6px + var(--safe-bottom));
  background: var(--tg-bg);
  border-top: 1px solid var(--tg-separator);
}

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border: 0;
  background: none;
  border-radius: 10px;
  color: var(--tg-hint);
  cursor: pointer;
  min-height: 48px;
}

.tabbar__icon { display: grid; place-items: center; height: 22px; }
.tabbar__label { font-size: 11px; }
.tabbar__item--active { color: var(--tg-link); font-weight: 600; }
.tabbar__item:focus-visible { outline: 2px solid var(--tg-link); }
.no-session .tabbar { display: none; }

/* Внутри Telegram главное действие - нативная кнопка, дубль не нужен. */
.in-telegram .fallback-action { display: none; }
.fallback-action { margin-top: var(--gap); }

/* --------------------------------------------------------------------- */
/* Блоки                                                                  */
/* --------------------------------------------------------------------- */
.section { margin-bottom: 18px; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 8px;
}

.section__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-hint);
}

.section__value { font-family: var(--mono); font-size: 13px; color: var(--tg-hint); }

.card {
  background: var(--tg-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card + .card, .card + .empty { margin-top: var(--gap); }

.greeting { padding: 4px 4px 16px; }
.greeting__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.greeting__subtitle { color: var(--tg-hint); font-size: 14px; text-transform: capitalize; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--tg-separator);
  min-height: 56px;
}

.row:last-child { border-bottom: 0; }
.row--tappable { cursor: pointer; }
.row--tappable:active { background: var(--tg-bg-secondary); }
.row:focus-visible { outline: 2px solid var(--tg-link); outline-offset: -2px; }

.row__icon {
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--tg-bg-secondary);
  color: var(--tg-hint);
}

/* Номер места в топах - вместо медалек и прочих эмодзи. */
.row__rank {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--tg-bg-secondary);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tg-hint);
}

.icon { display: block; flex: none; }

.row__main { flex: 1; min-width: 0; }
.row__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }

.row__subtitle {
  font-size: 13px;
  color: var(--tg-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__side { text-align: right; flex-shrink: 0; }
.row__value { font-size: 15px; font-weight: 600; }
.row__note { font-size: 12px; color: var(--tg-hint); }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-bottom: 18px; }
.tiles--home { margin-bottom: var(--gap); }

.tile {
  background: var(--tg-bg);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.tile__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tg-hint);
}

.tile__value { font-size: 20px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }

.actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  border: 0;
  border-radius: var(--radius);
  background: var(--tg-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  min-height: 74px;
}

.action:active { transform: scale(0.97); }
.action__icon { display: grid; place-items: center; height: 24px; color: var(--tg-link); }
.action__label { font-size: 11px; color: var(--tg-hint); text-align: center; line-height: 1.2; }

/* Полоса итогов - «ИТОГО» из накладной. */
.total-bar {
  display: flex;
  gap: 18px;
  padding: 10px 14px;
  margin-bottom: var(--gap);
  background: var(--tg-bg);
  border-radius: var(--radius);
  border-left: 3px solid var(--stamp);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.total-bar__item { display: flex; flex-direction: column; white-space: nowrap; }
.total-bar__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tg-hint); }
.total-bar__value { font-size: 17px; font-weight: 700; }

.stamp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  color: var(--tg-hint);
  white-space: nowrap;
}

.stamp--ok { color: var(--ok); }
.stamp--warn { color: var(--warn); }
.stamp--danger { color: var(--stamp); }

/* --------------------------------------------------------------------- */
/* Поля и кнопки                                                          */
/* --------------------------------------------------------------------- */
.input {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;
  color: var(--tg-text);
  background: var(--tg-bg);
  border: 1px solid var(--tg-separator);
  border-radius: var(--radius-sm);
  min-height: 44px;
}

.input:focus-visible { outline: 2px solid var(--tg-link); outline-offset: -1px; border-color: transparent; }
.input--filter { min-width: 0; flex: 1; }
/* Поля цен и фасовки: крупные, чтобы попадать пальцем и видеть число. */
.input--inline {
  padding: 10px 12px;
  min-height: 46px;
  font-family: var(--mono);
  font-size: 16px;
  text-align: right;
}

.field { display: block; padding: 10px var(--pad); }
.card > .field + .field { border-top: 1px solid var(--tg-separator); }
.field__label { display: block; font-size: 12px; color: var(--tg-hint); margin-bottom: 4px; }
.field__hint { display: block; font-size: 12px; color: var(--tg-hint); margin-top: 4px; line-height: 1.3; }

.mini-field { display: flex; flex-direction: column; gap: 4px; }
.mini-field__label { font-size: 12px; color: var(--tg-hint); }

.checkbox { width: 22px; height: 22px; accent-color: var(--tg-button); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  min-height: 44px;
  border: 1px solid var(--tg-separator);
  border-radius: var(--radius-sm);
  background: var(--tg-bg);
  cursor: pointer;
  font-size: 15px;
}

.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--tg-link); outline-offset: 2px; }
.btn--primary { background: var(--tg-button); border-color: var(--tg-button); color: var(--tg-button-text); font-weight: 600; }
.btn--ghost { background: transparent; }
.btn--wide { width: 100%; }
.btn--link { border: 0; background: none; color: var(--stamp); padding: 4px 6px; min-height: 32px; font-size: 13px; }
.btn--danger { color: var(--stamp); border-color: color-mix(in srgb, var(--stamp) 35%, transparent); }
.btn[disabled] { opacity: 0.6; pointer-events: none; }

.stepper { display: inline-flex; align-items: center; gap: 2px; }

.stepper__btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--tg-separator);
  background: var(--tg-bg);
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.stepper__btn:active { background: var(--tg-bg-secondary); }

.stepper__input {
  width: 62px;
  height: 38px;
  text-align: center;
  font-size: 16px;
  border: 1px solid var(--tg-separator);
  border-radius: 10px;
  background: var(--tg-bg);
  color: var(--tg-text);
  -moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 10px var(--pad);
  background: var(--tg-bg-secondary);
  border-radius: 11px;
}

.segmented__item {
  flex: 1;
  padding: 8px 6px;
  border: 0;
  background: none;
  border-radius: 9px;
  font-size: 14px;
  color: var(--tg-hint);
  cursor: pointer;
  min-height: 40px;
}

.segmented__item--active { background: var(--tg-bg); color: var(--tg-text); font-weight: 600; box-shadow: var(--shadow); }

.sticky-tools {
  position: sticky;
  top: calc(var(--safe-top) + 52px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 10px;
  margin-bottom: 4px;
  background: var(--tg-bg-secondary);
}

.filters { display: flex; flex-direction: column; gap: 8px; }
.filters__row { display: flex; gap: 8px; }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  padding: 7px 13px;
  border: 1px solid var(--tg-separator);
  border-radius: 999px;
  background: var(--tg-bg);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  min-height: 38px;
}

.chip--active { background: var(--tg-button); border-color: var(--tg-button); color: var(--tg-button-text); font-weight: 600; }

/* Поле выбора из справочника: выглядит как поле, работает как список. */
.picker-field { padding: 10px var(--pad); }

.picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  text-align: left;
  background: var(--tg-bg);
  border: 1px solid var(--tg-separator);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
}

.picker:active { background: var(--tg-bg-secondary); }
.picker:focus-visible { outline: 2px solid var(--tg-link); outline-offset: 1px; }
.picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__value--empty { color: var(--tg-hint); }
.picker__chevron { color: var(--tg-hint); transform: rotate(90deg); }

.picker-list {
  margin-top: 10px;
  background: var(--tg-bg);
  border-radius: var(--radius);
  overflow: hidden;
}

.picker-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 13px var(--pad);
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--tg-separator);
  background: none;
  cursor: pointer;
  font-size: 16px;
}

.picker-option:last-child { border-bottom: 0; }
.picker-option:active { background: var(--tg-bg-secondary); }
.picker-option--new { color: var(--tg-link); font-weight: 600; }
.picker-option--active { background: var(--tg-bg-secondary); font-weight: 600; }
.picker-option__name { overflow: hidden; text-overflow: ellipsis; }
.picker-option__hint { font-family: var(--mono); font-size: 13px; color: var(--tg-hint); white-space: nowrap; }

/* Каталог с отметками: строка-переключатель для массового ввода. */
.select-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px 2px;
  font-size: 13px;
  color: var(--tg-hint);
}

.catalog-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px var(--pad);
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--tg-separator);
  background: none;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.catalog-option:last-child { border-bottom: 0; }
.catalog-option:active { background: var(--tg-bg-secondary); }
.catalog-option--new { color: var(--tg-link); font-weight: 600; }

.catalog-option__box {
  flex: 0 0 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--tg-separator);
  border-radius: 6px;
  color: var(--tg-button-text);
}

.catalog-option--checked .catalog-option__box {
  background: var(--tg-button);
  border-color: var(--tg-button);
}

.catalog-option__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.catalog-option__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-option__hint { font-family: var(--mono); font-size: 12px; color: var(--tg-hint); }
.catalog-option__added { font-size: 11px; color: var(--ok); white-space: nowrap; }

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--tg-separator);
}

.cart-item:last-child { border-bottom: 0; }
.cart-item__main { flex: 1; min-width: 0; }
.cart-item__title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.cart-item__price { display: flex; align-items: center; gap: 6px; }
.cart-item__price { flex-wrap: wrap; }
.cart-item__price .input { width: 132px; }
.cart-item__grid { display: flex; gap: 10px; flex-wrap: wrap; }
.cart-item__grid { gap: 12px; }
.cart-item__grid .input { width: 118px; }
.cart-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.receipt { font-size: 15px; }
.receipt__head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px dashed var(--tg-separator); }

.receipt__line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--tg-separator);
  font-size: 14px;
}

.receipt__total { display: flex; justify-content: space-between; padding: 8px 0; }
.receipt__total--debt { color: var(--stamp); }
.receipt__stamp { display: flex; justify-content: flex-end; padding-top: 6px; }

.count-row {
  display: grid;
  grid-template-columns: 1fr auto 44px;
  align-items: center;
  gap: 10px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--tg-separator);
}

.count-row:last-child { border-bottom: 0; }
.count-row--diff { background: color-mix(in srgb, var(--stamp) 8%, transparent); }
.count-row__title { font-size: 15px; }
.count-row__hint { font-size: 12px; color: var(--tg-hint); }
.count-row__diff { font-family: var(--mono); text-align: right; font-weight: 700; }

.import-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px var(--pad); border-bottom: 1px solid var(--tg-separator); }
.import-row:last-child { border-bottom: 0; }
.import-row__main { flex: 1; min-width: 0; }
.import-row__title { font-size: 15px; }
.import-row__hint { font-size: 13px; color: var(--tg-hint); }
.import-row__warn { font-size: 12px; color: var(--warn); margin-top: 2px; }

.inline-form { display: flex; gap: 8px; margin-bottom: var(--gap); }

.thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--tg-bg-secondary);
}

.product-photo {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--tg-bg);
}

.chart { padding: 12px var(--pad) 4px; }
.chart__canvas svg { width: 100%; height: 130px; }
.chart__bar { fill: var(--tg-button); opacity: 0.85; }
.chart__label { fill: var(--tg-hint); font-size: 9px; font-family: var(--mono); }
.chart__line { fill: none; stroke: var(--tg-button); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart__area { fill: var(--tg-button); opacity: 0.12; }
.chart__zero { stroke: var(--stamp); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.6; }
.chart__legend { display: flex; justify-content: space-between; gap: 8px; padding: 4px 2px 8px; font-size: 11px; color: var(--tg-hint); }

.empty { padding: 28px 20px; text-align: center; color: var(--tg-hint); display: grid; gap: 12px; justify-items: center; }
.empty__text { font-size: 15px; max-width: 320px; }

.skeleton { display: grid; gap: 8px; }

.skeleton__row {
  height: 58px;
  border-radius: var(--radius);
  background: var(--tg-bg);
  opacity: 0.7;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.35; } }

.footnote { padding: 16px 6px 0; font-size: 12px; color: var(--tg-hint); text-align: center; }

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 14, 25, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.sheet-backdrop--open { opacity: 1; }

.sheet {
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--tg-bg-secondary);
  border-radius: 18px 18px 0 0;
  padding-bottom: var(--safe-bottom);
  transform: translateY(16px);
  transition: transform 0.18s ease;
}

.sheet-backdrop--open .sheet { transform: translateY(0); }
.sheet__grip { width: 38px; height: 4px; border-radius: 2px; background: var(--tg-separator); margin: 8px auto 0; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--pad) 4px; }
.sheet__title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tg-hint); }
.sheet__close { border: 0; background: none; font-size: 18px; cursor: pointer; padding: 6px 8px; color: var(--tg-hint); }
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--gap) var(--gap);
}
.sheet__subtitle { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.sheet__section { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tg-hint); margin: 18px 0 8px; }
.sheet__buttons { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.sheet__buttons .btn { flex: 1; }
.sheet__actions { padding: var(--gap); border-top: 1px solid var(--tg-separator); background: var(--tg-bg); }

.login { padding: 40px 8px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.login__title { font-size: 26px; font-weight: 700; }
.login__text { color: var(--tg-hint); font-size: 15px; max-width: 380px; }
.login .field { width: 100%; max-width: 320px; }
.login .btn { max-width: 320px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom));
  z-index: 50;
  transform: translate(-50%, 12px);
  max-width: min(92vw, 460px);
  padding: 11px 16px;
  border-radius: 12px;
  background: #1c2436;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast--visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--stamp); }

/* Планшет и десктоп: те же экраны, просто шире. */
@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .actions { grid-template-columns: repeat(8, 1fr); }
  .screen { padding-bottom: calc(96px + var(--safe-bottom)); }
  .sheet { border-radius: 18px; margin-bottom: 5vh; max-height: 88vh; }
  .sheet-backdrop { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Дата документа - отдельной строкой над формой: её меняют редко, но метко. */
.doc-date { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--pad); }
.doc-date__label { font-size: 13px; color: var(--tg-hint); }
.doc-date .input { width: auto; min-width: 150px; }

.range { display: flex; gap: 8px; align-items: center; }
.range .input { flex: 1; min-width: 0; }
.range__dash { color: var(--tg-hint); }

.switch { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tg-hint); padding: 2px 2px 0; }
/* Полоса режима правки: видно, что документ не создаётся, а исправляется. */
.edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: var(--gap);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 14%, var(--tg-bg));
  border-left: 3px solid var(--warn);
  font-size: 14px;
}

.cart-item__stock { font-size: 12px; margin-bottom: 6px; }

.appbar__btn { display: grid; place-items: center; }
.sheet__close { display: grid; place-items: center; }

/* Кнопка «выбрать позиции»: крупная цель, видно, что документ пополняется. */
.add-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px;
  border: 0;
  background: none;
  color: var(--tg-link);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.add-line:active { background: var(--tg-bg-secondary); }

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tg-hint);
}

.doc-currency { display: flex; flex-direction: column; padding: 4px 0 6px; }
.doc-currency .doc-date__label { padding: 0 var(--pad); }
.doc-currency .field__hint { padding: 0 var(--pad); }

/* Ввод количества: коробки и штуки рядом, итог в штуках под ними. */
.quantity { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.quantity__row { display: flex; align-items: center; gap: 8px; }
.quantity__label { font-size: 12px; color: var(--tg-hint); min-width: 58px; text-align: right; }
.quantity__total { font-family: var(--mono); font-size: 12px; color: var(--tg-hint); }
.quantity--boxes-first .quantity__row:first-child .quantity__label { color: var(--tg-text); font-weight: 600; }

/* Фотографии товара: форма загрузки и галерея в карточке. */
.photos { display: flex; flex-wrap: wrap; gap: 10px; }

.photos__item {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--tg-bg-secondary);
}

.photos__image { width: 100%; height: 100%; object-fit: cover; display: block; }

.photos__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 2px 4px;
  font-size: 10px;
  text-align: center;
  color: #fff;
  background: rgba(15, 22, 41, 0.6);
}

.photos__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 22, 41, 0.65);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.photos__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 92px;
  height: 92px;
  border: 1.5px dashed var(--tg-separator);
  border-radius: var(--radius-sm);
  color: var(--tg-hint);
  font-size: 12px;
  cursor: pointer;
}

.photos__file { display: none; }

.gallery { margin-bottom: 10px; }
.photo-strip { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }

.photo-strip__item {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  flex: none;
}

.photo-strip__item--active { border-color: var(--tg-button); }

/* Экран разбора товаров по категориям. */
.sort-target { display: flex; flex-direction: column; padding: 10px var(--pad) 4px; }
.sort-target__label { font-size: 12px; color: var(--tg-hint); }
.sort-target .picker-field { padding: 8px 0 4px; }

.undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 20px;
  padding: 8px 4px 0;
  font-size: 13px;
  color: var(--tg-hint);
}

.undo-bar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }