/* GrainFlow — стили.
   Система: радиусы --r-s / --r-l (+ «таблетка» 999px), шрифты --fs-xs…--fs-xl,
   отступы кратны 4px, один акцентный цвет. Сначала телефон, потом широкий экран. */

@font-face {
  font-family: "Marck Script";
  src: url("../assets/fonts/MarckScript-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: light;
  --r-s: 10px;
  --r-l: 18px;
  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: 20px;
  --fs-xl: 30px;

  --bg: #f3f5f4;
  --bg-glow: radial-gradient(120% 60% at 10% -10%, rgba(52, 199, 123, 0.16), transparent 60%),
             radial-gradient(90% 50% at 100% 0%, rgba(56, 152, 236, 0.14), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f1f3f2;
  --field: #f1f3f2;
  --line: rgba(17, 24, 39, 0.08);
  --line-strong: rgba(17, 24, 39, 0.14);
  --text: #111827;
  --muted: #6b7280;
  --faint: #9ca3af;
  --accent: #0a7cff;
  --accent-soft: rgba(10, 124, 255, 0.10);
  --on-accent: #ffffff;
  --positive: #16a34a;
  --positive-soft: rgba(22, 163, 74, 0.10);
  --negative: #dc2626;
  --negative-soft: rgba(220, 38, 38, 0.09);
  --warning: #c2410c;
  --warning-soft: rgba(234, 88, 12, 0.11);
  --star: #f59e0b;
  --shadow-1: 0 1px 3px rgba(15, 23, 42, 0.10), 0 8px 22px rgba(15, 23, 42, 0.12); /* выраженная тень блоков — везде одинаково */
  --shadow-2: 0 8px 30px rgba(17, 24, 39, 0.12);
  --tabbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

:root.dark {
  color-scheme: dark;
  --bg: #0b0e0d;
  --bg-glow: radial-gradient(120% 60% at 10% -10%, rgba(34, 160, 98, 0.18), transparent 60%),
             radial-gradient(90% 50% at 100% 0%, rgba(30, 110, 180, 0.16), transparent 60%);
  --surface: #161a19;
  --surface-2: #1d2221;
  --field: #20262a;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --text: #f3f4f6;
  --muted: #9aa3ad;
  --faint: #6b7480;
  --accent: #3b9bff;
  --accent-soft: rgba(59, 155, 255, 0.14);
  --positive: #34d27b;
  --positive-soft: rgba(52, 210, 123, 0.12);
  --negative: #ff6b6b;
  --negative-soft: rgba(255, 107, 107, 0.12);
  --warning: #fb923c;
  --warning-soft: rgba(251, 146, 60, 0.13);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ---------- База ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; } /* страница не ездит вбок даже во время въезда вкладки */
body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-m)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-glow);
  pointer-events: none;
}
body.modal-open { overflow: hidden; overscroll-behavior: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, label { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-s { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }

/* ---------- Каркас ---------- */

#app {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 16px calc(var(--tabbar-h) + var(--safe-b) + 24px);
}

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-family: "Marck Script", cursive; font-size: 30px; line-height: 1; }
.brand-signature { color: var(--faint); font-size: var(--fs-xs); font-weight: 600; }

.view { display: none; }
.view.is-active { display: block; animation: viewIn 0.2s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}
.view-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
#calculatorView > .view-title { margin: 4px 0 12px; }
.view-head .view-title { margin: 0; }
.count { color: var(--faint); font-weight: 700; font-size: var(--fs-l); }

/* Нижняя панель вкладок */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px max(8px, calc((100vw - 720px) / 2)) calc(6px + var(--safe-b));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.tab {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 0;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tab .icon { width: 24px; height: 24px; }
.tab.is-active { color: var(--accent); }
.tab:active { background: var(--surface-2); }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-s);
  font-size: var(--fs-m);
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--negative); color: #fff; }
.btn-ghost { background: none; min-height: 40px; padding: 0 8px; color: var(--accent); }
.btn-danger-text { color: var(--negative); }
.btn-s { min-height: 40px; padding: 0 12px; font-size: var(--fs-s); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn-accent { background: var(--accent); color: var(--on-accent); }
.icon-btn-plain { background: none; box-shadow: none; color: var(--muted); }
.icon-btn-plain:active { background: var(--surface-2); }

/* Кнопки действий с иконкой и подписью (Позвонить, Маршрут…) */
.action-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
.action {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 60px;
  padding: 8px 4px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-align: center;
  cursor: pointer;
}
.action span { color: var(--text); }
.action:active { transform: scale(0.97); }
.action.is-danger, .action.is-danger span { color: var(--negative); }

/* ---------- Карточки и поля ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}

.form { display: grid; gap: 16px; }
.card.form { padding: 16px; }

.field { display: grid; gap: 6px; min-width: 0; position: relative; }
.field-label { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--field);
  font-size: var(--fs-m);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
textarea { padding: 12px 14px; resize: vertical; min-height: 88px; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.is-invalid { border-color: var(--negative) !important; box-shadow: 0 0 0 4px var(--negative-soft) !important; }

.input-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: var(--r-s);
  background: var(--field);
}
.input-group input { background: transparent; }
.input-group input:focus { background: transparent; box-shadow: none; border-color: transparent; }
.input-group:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.input-suffix { padding: 0 14px; color: var(--muted); font-weight: 600; }

/* Ползунок «Хочу заработать» (0,50–5,00 ₽/кг, шаг 0,10) */
.profit-slider { display: grid; gap: 6px; margin: 14px 0 12px; }
.ps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ps-head span { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.ps-head strong { font-size: var(--fs-l); font-weight: 800; color: var(--text); }
.ps-scale { display: flex; justify-content: space-between; color: var(--faint); font-size: var(--fs-xs); }
input[type="range"]:is([data-profit-range], [data-card-range]) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 0;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: pan-y;
}
input[type="range"]:is([data-profit-range], [data-card-range]):focus { box-shadow: none; border: 0; background: transparent; }
input[type="range"]:is([data-profit-range], [data-card-range])::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct, 0%), var(--line-strong) var(--pct, 0%));
}
input[type="range"]:is([data-profit-range], [data-card-range])::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line-strong); }
input[type="range"]:is([data-profit-range], [data-card-range])::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
input[type="range"]:is([data-profit-range], [data-card-range])::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease;
}
input[type="range"]:is([data-profit-range], [data-card-range]):active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:is([data-profit-range], [data-card-range])::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }

/* ---------- Списки заводов и фермеров ---------- */
/* Фильтры списков — лента с прокруткой вбок; края уходят в «туман» */
.chips-scroll.filter-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: -12px; /* до края экрана: отступ страницы на узких телефонах — 12 px */
  margin-right: -12px;
  padding: 2px 12px;
  scroll-padding: 0 12px;
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.chips-scroll.filter-chips::-webkit-scrollbar { display: none; }
.chips-scroll.filter-chips.fade-l { --fade-l: 40px; }
.chips-scroll.filter-chips.fade-r { --fade-r: 40px; }
.chips-scroll.filter-chips .chip { flex: 0 0 auto; }
.list-tools { display: flex; align-items: center; gap: 6px; margin: -4px 0 6px; flex-wrap: nowrap; }
.list-tools .sort-pill { margin-left: auto; }
.list-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
.list-tools .chip, .list-tools .sort-pill { min-height: 32px; height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; gap: 5px; }
.list-tools .icon { width: 15px; height: 15px; }
.list-tools .sort-pill select { height: 30px; font-size: 13px; font-weight: 600; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.list-tools .sort-pill { flex: 0 1 auto; min-width: 0; }
.chip-call .icon { color: var(--accent); }

.entity-row { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 10px 12px; }
.entity-row .entity-sub { display: flex; align-items: center; gap: 6px; }
.entity-price {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 72px;
  min-height: 44px;
  padding: 4px 6px;
  margin: -4px -6px -4px 0;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  text-align: right;
  cursor: pointer;
}
.entity-price:active { background: var(--surface-2); }
.entity-price strong { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-l); font-weight: 800; }
.entity-price small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.history-time { margin-left: 8px; color: var(--faint); font-size: var(--fs-xs); font-weight: 600; }
/* Вкладка «Все»: столбик цен по всем культурам строки */
.row-prices { display: grid; justify-items: end; gap: 1px; margin: -4px -6px -4px 0; }
.entity-price-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 26px;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: inherit;
  cursor: pointer;
}
.entity-price-line:active { background: var(--surface-2); }
.entity-price-line small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.entity-price-line strong { min-width: 46px; text-align: right; font-size: 15px; font-weight: 800; }
.best-badge { padding: 1px 6px; border-radius: 999px; background: var(--positive-soft); color: var(--positive); font-size: 10px; font-weight: 800; text-transform: uppercase; }

.fresh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.fresh-fresh { background: var(--positive); }
.fresh-week { background: #eab308; }
.fresh-stale { background: var(--warning); }
.fresh-unknown { background: var(--faint); }
.inline-label .fresh-dot { margin-left: 6px; vertical-align: middle; }

.status-pill { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--muted); }
.status-work { background: var(--accent-soft); color: var(--accent); }
.status-thinking { background: rgba(234, 179, 8, 0.15); color: #a16207; }
.status-sold { background: var(--positive-soft); color: var(--positive); }
.status-no { background: var(--negative-soft); color: var(--negative); }
:root.dark .status-thinking { color: #facc15; }

/* История цен в карточке */
.history-block + .history-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.history-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.history-head strong { font-size: var(--fs-s); }
.history-head .num { margin-left: auto; font-size: var(--fs-s); font-weight: 700; }
.sparkline { flex: 1 1 auto; height: 28px; min-width: 60px; }
.sparkline polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sparkline.muted { color: var(--faint); }

/* Шапка результата: маленькая кнопка сортировки и «Поделиться» */
.results-tools { display: flex; align-items: center; gap: 4px; }
.sort-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-s);
  font-weight: 600;
  cursor: pointer;
}
.sort-pill .icon { color: var(--accent); }
.sort-pill select {
  width: auto;
  min-height: 0;
  height: 34px;
  padding: 0 14px 0 0;
  border: 0;
  background: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 6px) 15px, calc(100% - 2px) 15px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  font-size: var(--fs-s);
  font-weight: 600;
  cursor: pointer;
}
.sort-pill select:focus { box-shadow: none; border: 0; background-color: transparent; }
.sort-pill:focus-within { border-color: var(--accent); }

/* Карточки результата: первая выделена, остальные — такие же по составу, но спокойнее */
.hero.is-secondary {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
.hero.is-secondary .hero-profit { font-size: 28px; }

/* Карточка результата: главное — прибыль, цена завода, расстояние */
.stats.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 14px; }
/* Три плашки в карточке результата: цена завода · логистика · расстояние — всегда в одну строку */
.hero .stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 14px; gap: 6px; }
.hero .stats.stats-3 .stat { grid-column: auto; padding: 9px 8px; }
.hero .stats.stats-3 dd { white-space: nowrap; overflow-wrap: normal; }
.hero .hero-profit { margin-top: 10px; }

/* Цена фермеру — второстепенный блок внизу карточки, без ярких цветов */
.farmer-offer {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.fo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fo-head span { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.fo-head strong { font-size: var(--fs-m); font-weight: 700; }
.fo-sub { color: var(--faint); font-size: var(--fs-xs); }
.fo-sub b { font-weight: 700; }
.fo-verdict { font-size: var(--fs-s); font-weight: 700; }
/* Ползунок «Целевая прибыль» в карточке результата: подпись и значение над ним, шкала под ним */
.card-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.card-slider-head strong { color: var(--text); font-size: var(--fs-m); font-weight: 800; }
.farmer-offer .ps-scale { display: flex; justify-content: space-between; margin-top: -2px; color: var(--faint); font-size: 11px; }
.farmer-offer input[type="range"]:is([data-profit-range], [data-card-range]) { height: 24px; margin-top: 2px; }
.farmer-offer input[type="range"]:is([data-profit-range], [data-card-range])::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, var(--muted) 0%, var(--muted) var(--pct, 0%), var(--line-strong) var(--pct, 0%));
}
.farmer-offer input[type="range"]:is([data-profit-range], [data-card-range])::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
.farmer-offer input[type="range"]:is([data-profit-range], [data-card-range])::-moz-range-progress { background: var(--muted); }
.farmer-offer-row { margin: 0 0 10px; padding-top: 0; border-top: 0; }

/* «Предложить фермеру до 13,30 ₽/кг» и прибыль под ним */
.offer-live { display: grid; gap: 8px; margin-bottom: 14px; }
.offer-big {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 14px;
  border-radius: var(--r-s);
  background: var(--accent-soft);
}
.offer-big-label { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.offer-big strong { color: var(--accent); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.offer-big.is-low strong { color: var(--negative); }
.profit-sum { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
.profit-sum > span:first-child { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.profit-sum strong { font-size: var(--fs-l); font-weight: 800; }
.profit-sum .muted { margin-left: auto; font-size: var(--fs-s); font-weight: 600; }
.offer-note-line { margin: 0; padding: 0 2px; color: var(--muted); font-size: var(--fs-s); }
.offer-note-line b { font-weight: 800; }
.row-body .offer-live { margin-bottom: 10px; }
.deal-toolbar .profit-slider { margin: 4px 0 0; }

/* Колокольчик уведомлений */
.appbar-actions { display: flex; gap: 8px; }
.notify-btn { position: relative; }
.notify-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--negative);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
  animation: badgePop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* Список уведомлений */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
}
.notice:last-child { border-bottom: 0; }
.notice > .icon { margin-top: 1px; color: var(--muted); }
.notice.is-unread { background: var(--accent-soft); }
.notice.is-unread > .icon { color: var(--accent); }
.notice-main { display: grid; gap: 2px; min-width: 0; }
.notice-text { font-size: var(--fs-s); font-weight: 600; overflow-wrap: anywhere; }
.notice-time { color: var(--muted); font-size: var(--fs-xs); }
.notice:active { background: var(--surface-2); }

/* Компактный блок ввода (Вес / Закупка / Логистика): подпись слева, число справа */
.inline-list {
  border-radius: var(--r-s);
  background: var(--field);
  overflow: hidden;
}
.inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  cursor: text;
  transition: background 0.15s ease;
}
.inline-row:last-child { border-bottom: 0; }
.inline-row:focus-within { background: var(--accent-soft); }
.inline-label { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-s); font-weight: 600; cursor: text; }
.inline-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-m);
  font-weight: 650;
  text-align: right;
}
.inline-input:focus { background: transparent; box-shadow: none; border-color: transparent; }
.inline-unit { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.inline-row .tax-switch { margin-left: 6px; }
/* Строка-кнопка «Расчёт: нал 0,87 · посредник 0,2 ₽/кг ›» */
.inline-row-button { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; text-align: left; cursor: pointer; }
.inline-row-button:active { background: var(--surface-2); }
.inline-summary { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: var(--fs-s); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-row-button .row-chevron { color: var(--faint); }
.inline-row .tax-switch-text { min-width: 34px; text-align: right; }

/* Тумблер «нал / НДС» внутри поля «Закупка» */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 20px; }
.field-label-row .field-label { white-space: nowrap; }
.tax-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Видимый тумблер маленький, а зона нажатия — под палец (44 px) */
.tax-switch::before { content: ""; position: absolute; inset: -12px -8px; }
.tax-switch-text { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-align: right; transition: color 0.2s ease; }
.tax-switch-track {
  position: relative;
  width: 32px;
  height: 20px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.2s ease;
}
.tax-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.tax-switch[aria-checked="true"] .tax-switch-track { background: var(--accent); }
.tax-switch[aria-checked="true"] .tax-switch-knob { transform: translateX(12px); }
@media (max-width: 380px) {
  .field-label-row .field-label { font-size: 13px; }
}
.tax-switch[aria-checked="true"] .tax-switch-text { color: var(--accent); }
.tax-switch:active .tax-switch-knob { width: 19px; }

/* Строка «Можно предложить фермеру» в результате */
.offer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--r-s);
  background: var(--accent-soft);
}
.offer-line span { font-size: var(--fs-s); font-weight: 600; }
.offer-line small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.offer-line strong { color: var(--accent); font-size: var(--fs-l); font-weight: 800; white-space: nowrap; }
.offer-line.is-low strong { color: var(--negative); }

/* Сегменты */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-s);
  background: var(--field);
}
.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: var(--fs-s);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.segment small { font-size: var(--fs-xs); font-weight: 600; opacity: 0.75; }
.segment.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.segmented-inline { margin: 4px; background: var(--surface-2); }
:root.dark .segmented-inline { background: var(--surface); }
:root.dark .segmented-inline .segment.active { background: var(--field); }

/* Чипы (культуры, фильтры) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Культуры и фильтры переносятся на новую строку — без прокрутки вбок и без обрезанных чипов */
.chips-scroll { flex-wrap: wrap; gap: 6px; }
/* Чипы растягиваются и заполняют строку целиком — ровные «плитки» без дыр справа */
.chips-scroll .chip { flex: 1 1 auto; justify-content: center; min-height: 38px; padding: 0 9px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-s);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
}
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.chip .icon { width: 16px; height: 16px; }
/* Невидимая галочка внутри чипа: размер 1 px, иначе (width:100% у input) она растягивала форму вбок */
.chip-check { position: relative; }
.chip-check input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filter-chips { margin-bottom: 12px; }
#farmerFilters:has(+ .filter-chips-2:not([hidden])), #plantFilters:has(+ .filter-chips-2:not([hidden])) { margin-bottom: 6px; } /* две строки фильтров фермеров — ближе друг к другу */
.unknown-volume { color: var(--warning); font-weight: 600; }
/* Карточка фермера: заголовки групп с иконками, партии строками */
.detail-group-title { display: flex; align-items: center; gap: 8px; }
.detail-group-title .icon { width: 17px; height: 17px; color: var(--accent); }
.culture-detail { align-items: flex-start; flex-wrap: wrap; }
.culture-detail-main { min-width: 0; flex: 1 1 0; }
/* партии — на всю ширину под культурой */
.lot-lines { display: grid; gap: 3px; flex: 1 0 100%; grid-column: 1 / -1; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line); }
.lot-line { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-s); white-space: nowrap; }
.lot-line span:first-child { color: var(--muted); font-weight: 600; }
/* качество культуры/партии — мелко, в одну-две строки */
.quality-line { display: flex; align-items: flex-start; gap: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.quality-line .icon { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 1px; color: var(--accent); }
.lot-line + .quality-line { margin-bottom: 4px; }

/* Поиск */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-left: 14px;
  border-radius: var(--r-s);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--faint);
}
.search input { background: transparent; padding-left: 0; }
.search input:focus { box-shadow: none; border-color: transparent; background: transparent; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Подсказки адреса */
.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60; /* выше нижней панели вкладок (50), но ниже шторок (100+) */
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.suggestion {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
}
.suggestion:last-child { border-bottom: 0; }
.suggestion span { color: var(--muted); font-size: var(--fs-s); }
.suggestion.is-active, .suggestion:hover { background: var(--accent-soft); }

/* Культуры в формах */
.culture-rows { display: grid; gap: 8px; }
.culture-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  background: var(--surface-2);
}
.culture-row.is-selected { background: var(--accent-soft); }
.culture-toggle { display: flex; align-items: center; gap: 10px; min-height: 28px; font-weight: 650; cursor: pointer; }
.culture-toggle input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--accent); }
.culture-values { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.culture-row.is-selected .culture-values { display: grid; }
.culture-values input { min-height: 44px; background: var(--surface); }
.culture-values label { display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
[data-culture-rows="plant"] .culture-values { grid-template-columns: minmax(0, 1fr); }

/* ---------- Калькулятор: результаты ---------- */

#summary { margin-top: 16px; }
.results { display: grid; gap: 12px; margin-top: 20px; }
.results:empty { display: none; }

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.results-head h2 { font-size: var(--fs-l); font-weight: 750; }
.results-head p { color: var(--muted); font-size: var(--fs-s); }

.hero {
  padding: 16px;
  border-radius: var(--r-l);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 55%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: var(--shadow-2);
}
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-name { font-size: var(--fs-l); font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.hero-sub { margin-top: 2px; color: var(--muted); font-size: var(--fs-s); }
.hero-profit { margin: 14px 0 2px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.hero-profit-sub { color: var(--muted); font-size: var(--fs-s); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.pill-positive { background: var(--positive-soft); color: var(--positive); }
.pill-negative { background: var(--negative-soft); color: var(--negative); }
.pill-warning { background: var(--warning-soft); color: var(--warning); }
.pill-muted { background: var(--surface-2); color: var(--muted); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.stat { padding: 10px; border-radius: var(--r-s); background: var(--surface-2); min-width: 0; }
.stat dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.stat dd { margin: 2px 0 0; font-weight: 700; font-size: var(--fs-s); overflow-wrap: anywhere; }
.hero .stat { background: color-mix(in srgb, var(--surface-2) 75%, transparent); }

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: var(--fs-s);
}
.meta-line span { display: inline-flex; align-items: center; gap: 4px; }

/* Остальные варианты — компактные строки, раскрываются по нажатию */
.rows { overflow: hidden; }
.row-item { border-bottom: 1px solid var(--line); }
.row-item:last-child { border-bottom: 0; }
.row-item > summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
}
.row-item > summary::-webkit-details-marker { display: none; }
.row-item[open] > summary .row-chevron { transform: rotate(90deg); }
.row-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 750;
}
.row-main { min-width: 0; display: grid; gap: 2px; }
.row-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { color: var(--muted); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-value { text-align: right; font-weight: 750; white-space: nowrap; }
.row-value small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.row-chevron { width: 18px; height: 18px; color: var(--faint); transition: transform 0.15s ease; }
.row-body { padding: 0 14px 14px; }
.row-body .stats { margin-top: 0; }

.compare-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

/* Загрузка */
.skeleton { display: grid; gap: 12px; margin-top: 20px; }
.skeleton div {
  height: 72px;
  border-radius: var(--r-l);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skeleton div:first-child { height: 200px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.status-card { margin-top: 16px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; color: var(--negative); }
.status-card p { color: var(--text); }

.fade-up { animation: fadeUp 0.28s ease-out both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Списки: заводы, фермеры ---------- */

.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } /* колонка не шире экрана, даже если строка длинная */
.entity {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: left;
  cursor: pointer;
}
.entity:active { transform: scale(0.99); background: var(--surface-2); }
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  font-size: var(--fs-s);
  font-weight: 750;
}
/* Плашка слева в строке: объём фермера / спека завода, без разноцветья */
.row-tile {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  line-height: 1;
}
.row-tile b { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.row-tile small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.row-tile.is-contract { background: var(--accent-soft); color: var(--accent); }
.row-tile-unit { margin-left: 1px; font-size: 9px; font-style: normal; font-weight: 700; }
.row-tile.is-contract small { color: var(--accent); opacity: 0.8; }
.row-tile.is-contract .icon { width: 18px; height: 18px; }
.row-tile.is-empty { color: var(--faint); }
.row-tile.is-empty .icon { width: 20px; height: 20px; }
/* Поле «т по спеке» видно, только когда договор подписан */
#plantForm:not(:has([name="contract"][value="signed"]:checked)) .spec-field { display: none; }

/* ---------- «Кто вы?» ---------- */
/* Шапка на узких телефонах: имя «Кто вы?» + колокольчик + тема должны влезать — подпись «by Plaxey23» прячем */
@media (max-width: 400px) {
  .brand-signature { display: none; }
  .appbar-actions { gap: 6px; }
}
.appbar { min-width: 0; }
.brand { min-width: 0; }
.user-chip { height: 36px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.user-chip:active { background: var(--surface-2); }
.user-picker { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeUp 0.18s ease-out; }
.user-picker-card { width: min(100%, 340px); padding: 22px 18px 18px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2); text-align: center; }
.user-picker-card h2 { margin: 0; font-size: 22px; }
.user-picker-card .muted { margin: 6px 0 16px; font-size: var(--fs-s); }
.user-picker-list { display: grid; gap: 8px; }
.user-picker-btn { display: grid; gap: 2px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.user-picker-btn small { color: var(--accent); font-size: 11px; font-weight: 700; }
.user-picker-btn.is-last { border-color: var(--accent); background: var(--accent-soft); }
.user-picker-btn:active { transform: scale(0.98); }

/* ---------- База хозяйств: культуры, погрузка, партии, история ---------- */
/* Культура фермера: название сверху, под ним три равных поля с подписями — цена · наличие · площадь */
.culture-lines.is-farmer .culture-line { display: grid; gap: 6px; padding: 10px 14px 12px; cursor: default; }
.culture-lines.is-farmer .culture-line-name { width: auto; }
/* Выбор культур в формах — компактно, ровно 2 строки по 4 чипа */
/* колонки по длине названий (auto), лишнее место делится поровну — 2 строки без обрезки */
.culture-rows .culture-pick { display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); gap: 5px; }
.culture-rows .culture-pick .chip { justify-content: center; min-width: 0; min-height: 34px; padding: 0 5px; font-size: 13px; white-space: nowrap; }
@media (max-width: 400px) { .culture-rows .culture-pick .chip { font-size: 12px; padding: 0 4px; } }
.culture-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.culture-trio label { display: grid; gap: 3px; min-width: 0; }
.culture-trio small { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.culture-trio .inline-input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: right; font-size: 16px; }
.culture-trio .inline-input:focus { border-color: var(--accent); }
/* Группы формы фермера: отдельные блоки с заголовками */
.form { grid-template-columns: minmax(0, 1fr); } /* колонка формы не шире экрана, даже если поле длинное */
.form-group { min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* группы формы — выраженная тень, чтобы блоки читались отдельно (в тёмной теме — темнее и плотнее) */
.form-group { box-shadow: var(--shadow-1); }
/* фон формы — как фон приложения, чтобы белые блоки выделялись */

.form-group { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.form-group-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.form-group-title .icon { width: 18px; height: 18px; color: var(--accent); }
.form-group-sub { margin-top: 2px; }
.form-group textarea { width: 100%; }
.form-list .inline-label.inline-label-wide { width: 112px; flex: 0 0 112px; } /* «Общая площадь», «Ближайшие» — не слипаются с текстом поля */
.culture-sub-field { display: flex; align-items: center; gap: 4px; }
.culture-sub-field .inline-input { width: 54px; flex: 0 0 54px; min-height: 34px; }
.culture-harvest { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.culture-harvest button { white-space: nowrap; padding: 5px 9px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.culture-harvest button.is-active { background: var(--accent-soft); color: var(--accent); }
.scales-far { margin-top: 8px; }
/* Посредник: ФИО и телефон видны, только когда отмечено «Через посредника» */
.broker-rows { margin-top: 8px; }
.broker-field:not(:has([name="viaBroker"]:checked)) .broker-rows { display: none; }
.status-broker { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
/* Ставка НДС закупки рядом с тумблером «Нал / НДС» */
.vat-rate-select { flex: 0 0 auto; width: auto; min-height: 0; height: 30px; padding: 0 22px 0 8px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--surface); font-size: 13px; font-weight: 700; }
.field:has([name="scales"][value="no"]:not(:checked)) .scales-far { display: none; }
.price-row-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sold-btn { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.sold-btn:active { background: var(--surface-2); }
/* Контакты в карточке фермера: человек + роль, под ним телефон, справа кнопка звонка */
.person-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.person-role { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.person-role.role-farmer { background: var(--accent-soft); color: var(--accent); }
.person-role.role-broker { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.person-phone { margin-top: 2px; font-size: var(--fs-s); font-weight: 600; color: var(--text); }
.person-phone.muted { color: var(--faint); font-weight: 500; }
.person-call { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.person-row:active .person-call { transform: scale(0.94); }
/* ---------- Форма завода: контакты, выбор, отсрочка, приёмка ---------- */
.contact-list { display: grid; gap: 10px; }
.contact-block-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 4px; color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.call-pick-role { color: var(--accent); font-size: 12px; font-weight: 700; }
.contact-remove { flex: 0 0 auto; width: 32px; height: 32px; color: var(--faint); }
.add-contact { justify-self: start; padding: 2px 4px; font-size: var(--fs-s); }
.inline-select { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 22px 0 0; border: 0; background-color: transparent; text-align: right; text-align-last: right; font-size: var(--fs-m); font-weight: 650; color: var(--text); }
.inline-select:focus { box-shadow: none; border: 0; }
.quick-days .chip { min-height: 32px; padding: 0 11px; font-size: 13px; }
.quick-days .chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.time-input { flex: 1 1 0; min-width: 0; text-align: center; font-size: 16px; }
.week-days .chip { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 4px; }
.person-role.role-manager { background: var(--surface-2); color: var(--muted); }

/* ---------- История: расчёты, группы изменений по объекту, удаление записи ---------- */
.history-day { position: sticky; top: 0; z-index: 2; margin-left: -4px; margin-right: -4px; padding: 6px 8px; background: var(--bg); }
.history-item.change-item.calc-item { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; } /* прибыль — справа, а не под строкой */
.change-fields { color: var(--muted); }
.history-sub-title { margin: 10px 6px 6px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
/* строка расчёта: название переносится, сумма справа не наезжает */
.calc-item .entity-main { min-width: 0; }
.calc-item .row-title { white-space: normal; overflow-wrap: anywhere; }
.calc-item .row-value { justify-self: end; text-align: right; white-space: nowrap; padding-left: 8px; }
.change-price { font-weight: 600; }
.calc-icon { color: var(--accent); background: var(--accent-soft); }
.change-group > summary { list-style: none; cursor: pointer; }
.change-group > summary::-webkit-details-marker { display: none; }
.change-count { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.change-group[open] > summary { border-bottom: 1px dashed var(--line); }
.change-group-body { display: grid; padding: 4px 14px 8px 60px; }
.change-sub { display: grid; gap: 1px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.change-sub:last-child { border-bottom: 0; }
.change-sub-time { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.history-full-row { grid-template-columns: minmax(0, 1fr) auto; }
.history-del { width: 34px; height: 34px; color: var(--faint); }
.history-del:active { color: var(--negative); }
.confirm-text { margin: 4px 2px 0; font-size: var(--fs-s); line-height: 1.45; }
/* окно «Кому позвонить?» */
.call-pick-list { display: grid; gap: 8px; padding-top: 2px; }
.call-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: inherit; text-decoration: none; }
.call-pick-row:active { transform: scale(0.99); }
.call-pick-main { display: grid; gap: 2px; min-width: 0; }
.call-pick-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-pick-phone { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
/* уведомления: справа — кто сделал */
.notice-who { margin-left: auto; flex: 0 0 auto; align-self: center; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* тоннаж в наличии рядом с ценой культуры в карточке фермера */
.tons-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 800; white-space: nowrap; }
.tons-chip.is-empty { color: var(--faint); font-weight: 700; }
.lot-chips { margin: -4px 0 8px; }
.chip-add { color: var(--accent); border-style: dashed; }
.lot-note { margin: -2px 0 8px; font-size: var(--fs-xs); }
.lot-info { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -2px 0 10px; padding: 8px 12px; border-radius: var(--r-s); background: var(--surface-2); font-size: var(--fs-s); font-weight: 600; }
.btn-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.btn-link.danger { color: var(--warning); }
button.history-head { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.history-open { color: var(--faint); transform: rotate(0deg); }
.history-more { margin-top: 4px; padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-s); font-weight: 700; cursor: pointer; }
.history-full-row.is-sold .info-row-label { color: var(--warning); }

/* ---------- История: журнал изменений ---------- */
#historyView .search { margin-bottom: 10px; }
.change-item { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.change-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.change-icon .icon { width: 18px; height: 18px; }
.change-item.is-delete .change-icon { color: var(--warning); }
.change-badge { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.change-item.is-delete .change-badge { background: rgba(234, 88, 12, 0.12); color: var(--warning); }
.change-line { display: block; color: var(--text); font-size: var(--fs-s); line-height: 1.35; overflow-wrap: anywhere; }
.change-line.muted { color: var(--muted); }
.change-item .entity-sub { margin-top: 2px; }
.history-item.change-item { grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
.change-item .entity-main { flex: 1 1 auto; min-width: 0; justify-items: start; text-align: left; }

/* ---------- Форма завода/фермера: компактные блоки ---------- */
.form-list { overflow: visible; }
.form-list > .inline-row:first-child { border-radius: var(--r-s) var(--r-s) 0 0; }
.form-list > .inline-row:last-child { border-radius: 0 0 var(--r-s) var(--r-s); }
.form-list .inline-label { width: 78px; }
.inline-text { text-align: left; font-size: var(--fs-m); font-weight: 600; }
.inline-row.autocomplete { position: relative; }
.inline-row.autocomplete .suggestions { left: -1px; right: -1px; }
.inline-row.is-invalid, .inline-row:has(.is-invalid) { box-shadow: inset 3px 0 0 var(--warning); }
.chips-compact { gap: 6px; }
.chips-compact .chip { min-height: 34px; padding: 0 12px; font-size: 14px; }
.culture-rows { display: grid; gap: 8px; }
.culture-lines .culture-line { gap: 6px; }
.culture-line-name { width: 104px; color: var(--text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.culture-line .inline-input { min-width: 0; width: 100%; }
.culture-line-extra { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.culture-line-extra .inline-input { width: 46px; flex: 0 0 46px; }
.chip-days { gap: 2px; padding: 0 10px; cursor: text; }
.chip-days input { width: 44px; min-height: 0; height: 30px; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 650; text-align: right; }
.chip-days input:focus { box-shadow: none; background: transparent; }
.chip-days:has(input:not(:placeholder-shown)) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.form-sticky { padding-top: 4px; } /* кнопка «Сохранить» — в конце формы, не плавает поверх полей */
.entity-main { min-width: 0; display: grid; gap: 2px; }
.entity-title { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.entity-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-title .icon { width: 15px; height: 15px; color: var(--star); fill: var(--star); }
.entity-sub { color: var(--muted); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-prices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.entity-prices .pill { font-weight: 650; }
.entity .row-chevron { color: var(--faint); }

.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 16px;
  color: var(--muted);
  text-align: center;
}
.empty .icon { width: 40px; height: 40px; color: var(--faint); stroke-width: 1.5; }
.empty strong { color: var(--text); font-size: var(--fs-m); }

/* ---------- История ---------- */

.group-title {
  margin: 20px 4px 8px;
  color: var(--muted);
  font-size: var(--fs-s);
  font-weight: 700;
}
.group-title:first-child { margin-top: 4px; }
.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
}
.history-item:last-child { border-bottom: 0; }
.history-item:active { background: var(--surface-2); }

/* ---------- Шторки ---------- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.22s ease;
}
/* Окна поверх: затемнение + лёгкое размытие заднего плана (текст сзади угадывается, но не отвлекает) */
.sheet-overlay.is-open { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* «Вся история» — окно поверх карточки */
.popover-overlay { position: fixed; inset: 0; z-index: 250; display: flex; align-items: flex-end; justify-content: center; padding: 0 8px 8px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeUp 0.18s ease-out; }
.popover-card { display: flex; flex-direction: column; width: min(100%, 560px); max-height: 72dvh; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; margin-bottom: env(safe-area-inset-bottom); }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 10px 8px 18px; }
.popover-head h2 { margin: 0; font-size: 18px; }
.popover-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 16px; }
.sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 720px);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)));
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform;
}
.sheet-overlay.is-open .sheet { transform: translateY(0); }
.sheet.is-dragging { transition: none; }
.sheet-tall .sheet { height: calc(100dvh - max(24px, env(safe-area-inset-top))); }
.sheet-grabber {
  width: 38px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--line-strong);
  flex: 0 0 auto;
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 4px 8px 4px 20px;
  flex: 0 0 auto;
}
.sheet-head:has(#detailBack:not([hidden])) { padding-left: 4px; }
.sheet-title { flex: 1; min-width: 0; font-size: var(--fs-l); font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.sheet-head-actions { display: flex; gap: 4px; }
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px calc(20px + var(--safe-b));
  overflow-x: hidden; /* шторка не должна гулять вбок, даже если что-то шире экрана */
}

/* Диалог подтверждения — по центру */
.sheet-dialog { align-items: center; padding: 16px; z-index: 120; }
.sheet-dialog .sheet { width: min(100%, 360px); border-radius: var(--r-l); transform: scale(0.94); opacity: 0; transition: transform 0.18s ease, opacity 0.18s ease; }
.sheet-dialog.is-open .sheet { transform: none; opacity: 1; }
.confirm { display: grid; gap: 8px; padding: 22px 20px 20px; text-align: center; }
.confirm-title { font-size: var(--fs-l); font-weight: 750; }
.confirm-text { color: var(--muted); font-size: var(--fs-s); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

/* Содержимое шторки «карточка завода/фермера» */
.detail { display: grid; gap: 20px; }
.detail-section { display: grid; gap: 8px; }
.detail-section h3 { color: var(--muted); font-size: var(--fs-s); font-weight: 700; }
.info-list { border-radius: var(--r-s); background: var(--surface-2); overflow: hidden; }
.info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.info-row:last-child { border-bottom: 0; }
.info-row-label { font-weight: 600; }
.info-row-sub { color: var(--muted); font-size: var(--fs-xs); }
.info-row-sub.is-stale { color: var(--warning); font-weight: 600; }
.info-row-value { text-align: right; font-weight: 700; }
.info-row-value small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.info-text { padding: 12px 14px; color: var(--text); white-space: pre-line; }
.price-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  margin-right: -10px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  font-weight: 750;
  cursor: pointer;
}
.price-btn .icon { width: 15px; height: 15px; color: var(--accent); }
.price-btn:active { background: var(--surface); }
.price-edit { display: grid; grid-template-columns: minmax(0, 120px) auto; gap: 6px; }
.price-edit input { min-height: 40px; background: var(--surface); text-align: right; }
.price-edit .btn { min-height: 40px; padding: 0 12px; }

.detail-danger { justify-self: center; }

/* Показатели качества */
.indicator-section { border-radius: var(--r-s); background: var(--surface-2); padding: 12px 14px; }
.indicator-section h3 { margin-bottom: 8px; color: var(--text); font-size: var(--fs-s); }
.indicator-grid { display: grid; gap: 8px; }
.indicator-row { display: grid; grid-template-columns: minmax(0, auto) minmax(12px, 1fr) minmax(0, auto); align-items: baseline; gap: 6px; font-size: var(--fs-s); }
.indicator-row.is-empty { color: var(--faint); }
.indicator-dots { border-bottom: 1px dotted var(--line-strong); transform: translateY(-3px); }
.indicator-value { font-weight: 700; text-align: right; }
.indicator-input-field { display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.indicator-input-field input, .indicator-input-field select { min-height: 44px; background: var(--surface); }
.indicator-panel { display: grid; gap: 10px; }

.compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.compare-table th, .compare-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.compare-table th { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.compare-table td:last-child { text-align: center; }
.compare-table .icon { width: 18px; height: 18px; }

/* Карта связки */
.deal-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.deal-toolbar .field-label { font-size: var(--fs-xs); }
.deal-status { color: var(--muted); font-size: var(--fs-s); margin-bottom: 8px; }
.deal-map-canvas { height: 38dvh; min-height: 220px; border-radius: var(--r-l); overflow: hidden; background: var(--surface-2); margin-bottom: 12px; }
.deal-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.deal-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.deal-list-head h3 { font-size: var(--fs-m); font-weight: 750; white-space: nowrap; }
.deal-list-head select { width: auto; min-height: 40px; font-size: var(--fs-s); }
.deal-list { display: grid; gap: 8px; }
.deal-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.deal-item.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.deal-item-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-item-sub { grid-column: 1; color: var(--muted); font-size: var(--fs-s); }
.deal-item-offer { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; color: var(--accent); font-weight: 800; }
.deal-item-offer small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.deal-detail { margin-bottom: 16px; padding: 14px; border-radius: var(--r-s); background: var(--surface-2); display: grid; gap: 10px; }
.deal-detail h3 { font-size: var(--fs-m); }

/* ---------- Тосты ---------- */

.toast-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
  z-index: 200;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}
body.modal-open .toast-host { bottom: calc(var(--safe-b) + 16px); }
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 440px);
  min-height: 52px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r-s);
  background: #1f2328;
  color: #f3f4f6;
  box-shadow: var(--shadow-2);
  font-size: var(--fs-s);
  font-weight: 600;
  pointer-events: auto;
  animation: toastIn 0.22s ease-out;
}
:root.dark .toast { background: #2b3138; }
.toast.is-error { background: #b91c1c; }
.toast span { flex: 1; }
.toast .btn-ghost { color: #7cc0ff; min-height: 36px; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Цена фермеру ---------- */

.field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field-hint { color: var(--faint); font-size: var(--fs-xs); font-weight: 600; }
[data-profit-control] .chips { flex-wrap: nowrap; }
[data-profit-control] .chip { flex: 1 1 0; justify-content: center; padding: 0 8px; }
[data-profit-custom] { animation: fadeUp 0.2s ease-out; }

.offer {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: var(--r-s);
  background: var(--accent-soft);
}
.offer-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-label { display: block; font-size: var(--fs-s); font-weight: 700; }
.offer-note { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.offer-value { text-align: right; }
.offer-value strong { display: block; color: var(--accent); font-size: var(--fs-l); font-weight: 800; white-space: nowrap; letter-spacing: -0.01em; }
.offer-value small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.offer.is-low .offer-value strong { color: var(--negative); }

/* Коридор торга */
.corridor { display: grid; gap: 6px; }
.corridor-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--positive);
  overflow: hidden;
}
.corridor-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, var(--surface));
  animation: growBar 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.corridor.is-short .corridor-bar { background: var(--negative-soft); }
.corridor.is-short .corridor-fill { background: var(--negative); }
@keyframes growBar { from { width: 0; } }
.corridor-labels { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.corridor-labels b { color: var(--text); }
.corridor-margin { color: var(--positive); font-size: var(--fs-s); font-weight: 700; }
.corridor.is-short .corridor-margin { color: var(--negative); }

/* «Как посчитано» */
.breakdown { border-radius: var(--r-s); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.breakdown > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--accent);
  font-size: var(--fs-s);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}
.breakdown > summary::-webkit-details-marker { display: none; }
.bd-chevron { margin-left: auto; transition: transform 0.2s ease; }
.breakdown[open] .bd-chevron { transform: rotate(90deg); }
.bd-body { display: grid; gap: 2px; padding: 0 12px 10px; animation: fadeUp 0.22s ease-out; }
.bd-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--fs-s); }
.bd-row span:first-child { color: var(--muted); }
.bd-total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-weight: 750; }
.bd-total span:first-child { color: var(--text); }
.bd-note { font-size: var(--fs-xs); }

/* Карта: лучший вариант и запас */
.deal-toolbar { grid-template-columns: 1fr; }
.deal-best { margin-bottom: 12px; }
.deal-best-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-l);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface)) 0%, var(--surface) 60%);
  text-align: left;
  cursor: pointer;
  animation: fadeUp 0.3s ease-out;
}
.deal-best-card .pill { justify-self: start; }
.deal-best-name { font-size: var(--fs-l); font-weight: 750; }
.deal-best-sub { color: var(--muted); font-size: var(--fs-s); }
.deal-best-card .offer-value { text-align: left; }
.deal-margin { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; }

/* На Android, пока открыта клавиатура, нижняя панель не должна всплывать над ней */
body.keyboard-open .tabbar { transform: translateY(110%); }
.tabbar { transition: transform 0.2s ease; }

/* ---------- Минималистичный результат ---------- */

.results-head { align-items: center; }
.results-caption { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.hero-kicker { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.hero-kicker.negative { color: var(--negative); }
.hero .hero-name { margin-top: 4px; }
.hero .hero-profit { margin-top: 12px; }
.hero .hero-profit-sub { margin-bottom: 14px; }

/* «Фермеру до 13,30 ₽/кг  +5,30» */
.offer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 0 14px;
  border-radius: var(--r-s);
  background: var(--accent-soft);
}
.offer-row-label { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.offer-row strong { color: var(--accent); font-size: var(--fs-l); font-weight: 800; letter-spacing: -0.01em; }
.offer-row .pill { margin-left: auto; }
.offer-row.is-low strong { color: var(--negative); }

/* «Подробнее» */
.more { margin-top: 10px; }
.more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  color: var(--muted);
  font-size: var(--fs-s);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.more > summary::-webkit-details-marker { display: none; }
.more-chevron { transform: rotate(90deg); transition: transform 0.2s ease; }
.more[open] .more-chevron { transform: rotate(-90deg); }
.more[open] .dl { animation: fadeUp 0.22s ease-out; }

.dl { display: grid; gap: 2px; padding: 4px 2px 0; }
.dl-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: var(--fs-s); }
.dl-row span:first-child { color: var(--muted); }
.dl-row.positive span, .dl-row.negative span { color: inherit; font-weight: 700; }
.dl-total { margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-weight: 750; }
.dl-total span:first-child { color: var(--text); }
.dl-sep { height: 8px; }
.dl-address { margin: 6px 0 8px; color: var(--muted); font-size: var(--fs-xs); }
.row-body .offer-row { margin-bottom: 8px; }
.row-body .dl { margin-bottom: 12px; }

/* Списки: цены одной строкой */
.entity-prices { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 2px 0 0; color: var(--text); font-size: var(--fs-s); font-weight: 600; }
.entity-prices .is-stale { color: var(--warning); }
.entity-prices .dot { color: var(--faint); }
.deal-detail .offer-row, .deal-best-card .offer-row { margin: 4px 0 0; }

/* ---------- Анимации ---------- */

.view.is-active { animation: viewSlide 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes viewSlide {
  from { opacity: 0; transform: translateX(calc(var(--view-dir, 0) * 18px)); }
  to { opacity: 1; transform: none; }
}

.stagger > * { animation: fadeUp 0.32s ease-out both; }
.stagger > *:nth-child(2) { animation-delay: 0.03s; }
.stagger > *:nth-child(3) { animation-delay: 0.06s; }
.stagger > *:nth-child(4) { animation-delay: 0.09s; }
.stagger > *:nth-child(5) { animation-delay: 0.12s; }
.stagger > *:nth-child(6) { animation-delay: 0.15s; }
.stagger > *:nth-child(7) { animation-delay: 0.18s; }
.stagger > *:nth-child(n+8) { animation-delay: 0.21s; }

.results.is-silent * { animation: none !important; }

.tab .icon { transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tab.is-active .icon { transform: translateY(-2px) scale(1.08); }
.tab::after {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.tab.is-active::after { transform: scaleX(1); }

.chip { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.chip:active { transform: scale(0.95); }
.segment:active { transform: scale(0.97); }
.row-item[open] .row-body { animation: fadeUp 0.22s ease-out; }
.entity, .history-item, .action, .deal-item { transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; }
.deal-item:active, .deal-best-card:active { transform: scale(0.99); }
.hero-profit { transition: color 0.2s ease; }

/* ---------- Telegram: главная кнопка внизу заменяет кнопку формы ---------- */

html.tg-main-button .calc-submit { display: none; }

/* ---------- Узкие экраны ---------- */

@media (max-width: 380px) {
  #app { padding-inline: 12px; }
  .view-title { font-size: 26px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat:nth-child(3) { grid-column: span 2; }
  .hero-profit { font-size: 30px; }
  .sheet-body { padding-inline: 16px; }
}

/* ---------- Широкий экран: шторки по центру ---------- */

@media (min-width: 760px) {
  .sheet-overlay { align-items: center; padding: 24px; }
  .sheet { border-radius: var(--r-l); max-height: min(86dvh, 860px); }
  .sheet-tall .sheet { height: min(86dvh, 860px); }
  .sheet-grabber { display: none; }
  .tabbar { grid-template-columns: repeat(4, 120px); justify-content: center; }
}

@media (hover: hover) {
  .entity:hover, .history-item:hover { background: var(--surface-2); }
  .btn-primary:hover { filter: brightness(1.06); }
}

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

/* ---------- Единый приём «серый фон — белые блоки с тенью» во всех вкладках и окнах (21.10) ---------- */
.sheet-body, .popover-body { background: var(--bg); }
.sheet-body .info-list, .popover-body .info-list { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.sheet-body .action { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.deal-item { background: var(--surface); box-shadow: var(--shadow-1); }
.call-pick-row { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.sheet-body .inline-list:not(.form-list):not(.culture-lines) { box-shadow: var(--shadow-1); }
.detail-section > h3 { margin-left: 4px; }
/* Прибыль: сумма + ₽/кг — главное в карточке, крупно и одним цветом */
.hero-profit-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 12px 0 14px; }
.hero-profit-main { min-width: 0; }
.hero .hero-profit-row .hero-profit { margin: 0; }
.hero-profit-label, .hero-profit-kg span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.hero-profit-kg { flex: none; text-align: right; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 10%, transparent); }
.hero-profit-kg strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.hero.is-secondary .hero-profit-kg strong { font-size: 18px; }
@media (max-width: 400px) { .hero-profit-kg { padding: 6px 10px; } .hero-profit-kg strong { font-size: 17px; } }

/* Две раскрывашки внизу карточки: «Цена фермеру» и «Расчёт» — рядом, открыта одна */
.card-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.card-tab { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, var(--bg)); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.card-tab > .icon { flex: none; color: var(--accent); }
.card-tab-text { display: grid; min-width: 0; flex: 1; }
.card-tab-text > span { font-size: var(--fs-s); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-tab-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-tab [data-offer-hint] { color: var(--accent); }
.card-tab-chevron { flex: none; color: var(--muted); transform: rotate(90deg); transition: transform .2s ease; }
.card-tab.is-open { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.card-tab.is-open .card-tab-chevron { transform: rotate(-90deg); color: var(--accent); }
.card-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); animation: fade-in .2s ease; }
.card-panel[hidden] { display: none; }
.card-panel.farmer-offer { border-top: 1px solid var(--line); }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) { .card-tab { gap: 6px; padding: 9px 8px; } .card-tab > .icon:first-child { display: none; } }

/* «Фермеру»: крупная цена → сравнение с закупкой → ползунок */
.card-panel.farmer-offer { gap: 0; padding: 14px; }
.fo-hero { display: grid; justify-items: center; gap: 2px; text-align: center; }
.fo-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.fo-price { color: var(--accent); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.fo-price small { color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.fo-note { color: var(--muted); font-size: var(--fs-xs); }
.fo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fo-cell { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.fo-cell span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.fo-cell b { color: var(--text); font-size: var(--fs-m); font-weight: 800; }
.fo-cell.negative, .fo-cell.positive { border-color: transparent; background: color-mix(in srgb, currentColor 10%, transparent); }
.fo-cell.negative b, .fo-cell.positive b { color: inherit; }
.card-panel.farmer-offer .card-slider-head { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); align-items: center; }
.card-slider-head span small { display: block; color: var(--faint); font-size: 11px; font-weight: 500; }
.card-panel.farmer-offer .card-slider-head strong { color: var(--accent); }
.card-panel.farmer-offer input[type="range"][data-card-range]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct, 0%), var(--line-strong) var(--pct, 0%));
}
.card-panel.farmer-offer input[type="range"][data-card-range]::-moz-range-progress { background: var(--accent); }

/* «Расчёт»: Получаем (+) → Платим (−) → Итог (=); знак в кружке слева, сумма и ₽/кг справа */
.calc-sheet { display: grid; gap: 10px; }
.cs-group { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cs-title { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.cs-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 7px 0; }
.cs-row + .cs-row { border-top: 1px dashed var(--line); }
.cs-sign { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 15px; font-weight: 800; line-height: 1; }
.cs-row.is-income .cs-sign { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
.cs-group:not(.cs-result) .cs-row:not(.is-income):not(.cs-subtotal) .cs-sign { background: color-mix(in srgb, var(--negative) 12%, transparent); color: var(--negative); }
.cs-name { min-width: 0; font-size: var(--fs-s); font-weight: 600; }
.cs-name small, .cs-sum small, .cs-ref small { display: block; margin-top: 1px; color: var(--faint); font-size: 11px; font-weight: 500; }
.cs-sum { text-align: right; font-size: var(--fs-s); font-weight: 700; white-space: nowrap; }
.cs-subtotal { border-top: 1px solid var(--line-strong) !important; }
.cs-subtotal .cs-sign { background: none; }
.cs-subtotal .cs-name, .cs-subtotal .cs-sum { font-weight: 800; }
.cs-result .cs-sign { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cs-net { margin-top: 2px; padding: 10px 0 4px; border-top: 1px solid var(--line-strong) !important; }
.cs-net .cs-name { font-size: var(--fs-m); font-weight: 800; color: var(--text); }
.cs-net .cs-sum { font-size: 18px; font-weight: 800; }
.cs-net.negative .cs-sum, .cs-net.negative .cs-sign { color: var(--negative); }
.cs-net.positive .cs-sum, .cs-net.positive .cs-sign { color: var(--positive); }
.cs-net .cs-sum small { font-size: 12px; font-weight: 700; color: inherit; opacity: .85; }
.cs-ref { padding: 0 4px; }
.cs-ref .dl-row { font-size: var(--fs-xs); }

/* Населённый пункт под названием завода в карточке расчёта; «при прибыли …» на кнопке «Фермеру» */
.hero-place { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.card-tab-text small.card-tab-note { color: var(--faint); font-size: 10.5px; font-weight: 500; }
.cs-ref .dl-row > span:last-child { text-align: right; font-weight: 600; }
.card-tab-text small.card-tab-note { white-space: normal; overflow: visible; line-height: 1.2; }

/* Отсрочка чипами: два нажатия — диапазон; концы — активные, середина — подсвечена */
.quick-days .chip.is-between { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-style: dashed; border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.quick-days .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.quick-days-hint { margin: 6px 2px 0; color: var(--faint); font-size: 11.5px; }

/* Две строки фильтров (культуры / области) — разделены тонкой линией */
#farmerFilters:has(+ .filter-chips-2:not([hidden])), #plantFilters:has(+ .filter-chips-2:not([hidden])) { margin-bottom: 8px; }
.filter-chips-2:not([hidden]) { padding-top: 8px; border-top: 1px solid var(--line-strong); }
.filter-chips-2:not([hidden]) { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }

/* Блок фильтров: обе строки (культуры/договор и области) в одной белой рамке, между ними линия */
.filter-box { margin: 0 0 12px; padding: 8px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.filter-box .chips-scroll.filter-chips { margin: 0 !important; padding: 2px 10px; scroll-padding: 0 10px; }
.filter-box .filter-chips-2:not([hidden]) { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--line-strong); }
.filter-box .filter-chips-2:not([hidden]) { border-top: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }

/* Список заводов/фермеров — на отдельной подложке с заголовком «24 завода»: отделён от фильтров и кнопок */
.list-tray { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 8px 8px; border-radius: 20px; background: color-mix(in srgb, var(--text) 5%, var(--bg)); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05); }
.list-tray-title { display: flex; align-items: baseline; gap: 6px; margin: 0 6px 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.list-tray-title small { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html.dark .list-tray { background: color-mix(in srgb, #fff 3%, var(--bg)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
.list-tray { margin: 0 -6px; padding: 10px 6px 6px; }
.list-tray-stats { margin-left: auto; color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* Поиск: вводимый текст — обычным тёмным цветом (раньше наследовал серый), поле ниже — чуть выше текста и лупы */
.search { padding-left: 12px; gap: 8px; }
.search input { color: var(--text); height: 38px; min-height: 38px; padding-top: 0; padding-bottom: 0; }
.search input::placeholder { color: var(--faint); }
.search > .icon { width: 18px; height: 18px; flex: none; }
.search input { height: 32px; min-height: 32px; } .search > .icon { width: 16px; height: 16px; }

/* История: по 3 записи в блоке, остальное — под «Показать все · ещё N» */
.history-rest[hidden] { display: none; }
.history-expand { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; border: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); color: var(--accent); font: inherit; font-size: var(--fs-s); font-weight: 700; cursor: pointer; }
.history-expand .icon { transform: rotate(90deg); transition: transform .2s ease; }
.history-expand[aria-expanded="true"] .icon { transform: rotate(-90deg); }

/* История: заголовок дня — заметная плашка с датой и линия до края, чтобы дни не сливались */
.history-day { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 4px; font-size: var(--fs-s); }
.history-day:first-child { margin-top: 0; }
.history-day::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.hd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 800; white-space: nowrap; }
.hd-pill .icon { width: 14px; height: 14px; }
.hd-date { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* «Что нового»: значок версии (в шапке у логотипа и в углу окна «Кто вы?») и окно со списком обновлений */
.version-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; align-self: center; }
.version-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--negative); border: 2px solid var(--surface); }
.version-dot[hidden] { display: none; }
.brand-signature + .version-chip { margin-left: 2px; }

.user-picker-card { position: relative; }
.user-picker-version { position: absolute; top: 12px; right: 12px; }
.whats-new { z-index: 400; }
.wn-card { max-height: 82dvh; }
.wn-intro { margin: 0 18px 10px; color: var(--muted); font-size: var(--fs-xs); }
.wn-list { display: grid; gap: 8px; background: var(--bg); padding-top: 10px; }
.wn-release { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.wn-release > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; list-style: none; cursor: pointer; }
.wn-release > summary::-webkit-details-marker { display: none; }
.wn-ver { flex: none; min-width: 42px; padding: 4px 8px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 13px; font-weight: 800; text-align: center; }
.wn-head { display: grid; min-width: 0; flex: 1; }
.wn-head b { font-size: var(--fs-s); }
.wn-head small { color: var(--faint); font-size: 11px; font-weight: 600; }
.wn-chevron { flex: none; color: var(--muted); transform: rotate(90deg); transition: transform .2s ease; }
.wn-release[open] .wn-chevron { transform: rotate(-90deg); }
.wn-body { display: grid; gap: 10px; padding: 2px 14px 14px; border-top: 1px solid var(--line); }
.wn-label { display: inline-block; margin: 10px 0 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.wn-new .wn-label { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); }
.wn-better .wn-label { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.wn-fix .wn-label { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
html.dark .wn-fix .wn-label { color: #fbbf24; }
.wn-group ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.wn-group li { font-size: var(--fs-s); line-height: 1.4; }
.wn-body > .wn-group:first-child .wn-label { margin-top: 12px; }
.wn-list { display: block; } .wn-release + .wn-release { margin-top: 8px; }

[data-app-version], .wn-ver { display: inline-block; } [data-app-version]::first-letter, .wn-ver::first-letter { font-size: .8em; font-weight: 600; opacity: .75; }

/* Подпись автора — как подпись под логотипом: мелко, капсом, с разрядкой, прижата к правому краю «GrainFlow».
   Места по ширине не занимает, поэтому видна и на узких телефонах. */
.brand { display: inline-grid; justify-items: end; align-items: end; gap: 0; }
.brand .brand-name { justify-self: start; }
.brand .brand-signature { display: block !important; margin-top: -3px; margin-right: 2px; color: var(--faint); font-size: 8.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1; opacity: .85; }

/* Логотип: Cinzel, внутри букв — «поле»: небо сверху, спелая пшеница снизу, тонкие колосья-штрихи */
.brand .brand-name {
  font-family: "Cinzel", "Marck Script", serif; font-weight: 900; font-size: 25px; letter-spacing: .01em; line-height: 1.05;
  background:
    repeating-linear-gradient(100deg, rgba(110, 62, 8, .35) 0 1px, transparent 1px 3.5px),
    linear-gradient(180deg, #8ec5ea 0%, #cfe6f2 26%, #f7dc85 40%, #e9b44c 62%, #b8761f 84%, #8a5214 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(90, 50, 5, .25));
}
.brand .brand-name {
  background:
    repeating-linear-gradient(100deg, rgba(90, 50, 5, .35) 0 1px, transparent 1px 3.5px),
    linear-gradient(180deg, #2f78bd 0%, #5aa0d6 24%, #e8c25a 42%, #d99a2b 64%, #a5651a 84%, #6f400e 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(60, 35, 5, .35));
}
@media (max-width: 360px) { .brand .brand-name { font-size: 20px; } }

/* Логотип: Righteous (решение Алексея 21.10) — обычным цветом текста, без «поля» в буквах */
.brand .brand-name { font-family: "Righteous", "Marck Script", sans-serif; font-weight: 400; font-size: 28px; letter-spacing: 0; line-height: 1; background: none; color: var(--text); -webkit-text-fill-color: currentColor; filter: none; }
.brand .brand-signature { margin-top: 1px; }
@media (max-width: 360px) { .brand .brand-name { font-size: 24px; } }

/* Шрифт логотипа Righteous — файлом в приложении (OFL), без Google Fonts */
@font-face { font-family: "Righteous"; src: url("../assets/fonts/Righteous-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* Шапка: колокольчик и тема — той же высоты, что чип пользователя (36 px) */
.appbar .icon-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; }
.appbar .icon-btn .icon { width: 18px; height: 18px; }
.appbar .notify-badge { top: -3px; right: -3px; }
/* Заголовок страницы (Расчёт рейса, Заводы, Фермеры, История) — меньше и ближе к шапке */
.view-head { margin-top: 0; margin-bottom: 10px; }
.view-title { font-size: 22px; letter-spacing: -0.01em; }
.view-head .icon-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }

/* Заголовки всех вкладок на одной высоте: строка заголовка всегда 36 px (как кнопка «+»), одинаковые отступы */
.view-head { min-height: 36px; margin: 0 0 10px; }
.view-title { display: flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; line-height: 1; }
#calculatorView > .view-title { margin: 0 0 10px; }

/* Шапка — отдельная полоса: светлая подложка во всю ширину, линия и лёгкая тень снизу */
.appbar {
  margin: calc(-1 * max(8px, env(safe-area-inset-top))) -16px 14px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  min-height: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  border-radius: 0 0 18px 18px;
}
html.dark .appbar { box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
@media (max-width: 380px) { .appbar { margin-inline: -12px; padding-inline: 12px; } }

/* Фон насыщеннее: зелёное и синее свечение крупнее и ярче + тёплое снизу (поле), чтобы градиент читался и под шапкой */
:root {
  --bg-glow:
    radial-gradient(130% 70% at 0% 0%, rgba(52, 199, 123, 0.32), transparent 62%),
    radial-gradient(110% 60% at 100% 8%, rgba(56, 152, 236, 0.30), transparent 62%),
    radial-gradient(120% 55% at 50% 110%, rgba(240, 180, 60, 0.22), transparent 65%);
}
:root.dark {
  --bg-glow:
    radial-gradient(130% 70% at 0% 0%, rgba(34, 170, 104, 0.34), transparent 62%),
    radial-gradient(110% 60% at 100% 8%, rgba(30, 120, 200, 0.32), transparent 62%),
    radial-gradient(120% 55% at 50% 110%, rgba(200, 140, 40, 0.20), transparent 65%);
}
/* Логотип с тенью */
.brand .brand-name { text-shadow: 0 2px 4px rgba(15, 23, 42, .22), 0 6px 14px rgba(15, 23, 42, .14); }
html.dark .brand .brand-name { text-shadow: 0 2px 6px rgba(0, 0, 0, .7), 0 6px 18px rgba(0, 0, 0, .5); }

/* Шапка в три колонки: пользователь слева, логотип строго по центру, уведомления и тема справа */
.appbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.appbar-left { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.appbar-left .user-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .brand { justify-self: center; }
.appbar-actions { justify-self: end; }

/* Окно «Кто вы?»: слева вверху — кнопка «Что нового», справа — номер версии (просто подпись) */
.user-picker-news { position: absolute; top: 12px; left: 12px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.user-picker-version { position: absolute; top: 15px; right: 14px; color: var(--faint); font-size: 11px; font-weight: 700; }
.user-picker-card h2 { margin-top: 18px; }

/* Кнопка обновлений в «Кто вы?»: свежая — яркая с искоркой и точкой, просмотренная — спокойная серая */
.user-picker-news { gap: 5px; padding: 4px 10px; color: var(--muted); border-color: var(--line); background: var(--surface-2); }
.user-picker-news.is-fresh { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #34c77b)); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.news-spark { width: 13px; height: 13px; fill: currentColor; flex: none; }
.user-picker-news.is-fresh .news-spark { animation: sparkle 1.8s ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(15deg); } }
.user-picker-version { display: none; }

/* Красная точка на имени в шапке — есть непросмотренное обновление */
#userButton { position: relative; }
#userButton.has-news::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--negative); border: 2px solid var(--surface); }

/* Плашка «Вышло обновление» над нижним меню */
.news-banner { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 260; display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: fadeUp .25s ease-out; }
.news-banner-text { display: grid; flex: 1; min-width: 0; }
.news-banner-text b { font-size: var(--fs-s); }
.news-banner-text small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-banner-open { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; }
.news-banner-later { flex: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 4px; cursor: pointer; }
.appbar-left .user-chip { overflow: visible; }

/* Единый шаг 12 px сверху вниз: шапка → заголовок раздела → первый блок → первая подпись внутри блока */
.appbar { margin-bottom: 9px; }
.view-head, #calculatorView > .view-title { margin-bottom: 8px; }
#calculatorView > .card.form { padding-top: 12px; }
.search, .filter-box { margin-bottom: 12px; }

/* Ровные 12 px между фильтрами, строкой «обновить / Обзвон / сортировка» и списком */
.list-tools { margin: 0 0 4px; }
/* Строка заголовка раздела ниже: 30 px, кнопка «+» тоже 30 px */
.view-head { min-height: 30px; }
.view-title { min-height: 30px; }
.view-head .icon-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
.view-head .icon-btn .icon { width: 17px; height: 17px; }
/* Подпись поля («Культура», «Откуда везём») не прилипает к чипам */
.field { gap: 9px; }
/* Подпись BY PLAXEY23 — по центру под логотипом */
.appbar .brand { justify-items: center; }
.brand .brand-signature { margin-right: 0; justify-self: center; }
.appbar { margin-bottom: 8px; } .view-head, #calculatorView > .view-title { margin-bottom: 8px; }
.appbar { margin-bottom: 12px; } .view-head, #calculatorView > .view-title { margin-bottom: 11px; }

/* ===== Единый шаг между блоками по всему приложению: 12 px (решение Алексея 21.10) =====
   Блок от блока — 12 px; строки внутри одного списка — 8 px; чипы в строке — 6 px. */
:root { --space: 12px; --space-row: 8px; }
.form { gap: var(--space); }
.form-group { gap: var(--space); }
.results { gap: var(--space); margin-top: var(--space); }
.detail { gap: var(--space); }
.calc-sheet { gap: var(--space); }
.card-tabs, .card-panel { margin-top: var(--space); }
.history-day { margin-top: var(--space); }
.history-sub-title { margin: var(--space) 6px var(--space-row); }
.list, .list-tray { gap: var(--space-row); }
.wn-release + .wn-release { margin-top: var(--space-row); }

/* Уведомления: предмет изменения строкой под заголовком; «Очистить» — в шапке окна рядом с крестиком */
.notice-subject { display: block; margin-top: 2px; color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.notice-clear { padding: 6px 8px; color: var(--negative); font-size: 13px; font-weight: 700; }

/* Заголовок раздела компактнее: строка 26 px, кнопка «+» 26 px; шапка → заголовок 10 px, заголовок → поиск/окно 8 px */
.view-head, .view-title { min-height: 26px; }
.view-head .icon-btn { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }
.view-head .icon-btn .icon { width: 15px; height: 15px; }
.appbar { margin-bottom: 8px; }
.view-head, #calculatorView > .view-title { margin-bottom: 6px; }
/* Список заводов/фермеров — ровно по краям с поиском и фильтрами (подложка больше не выступает) */
.list-tray { margin: 0; padding: 10px 6px 6px; }
.appbar { margin-bottom: 10px; } .view-head, #calculatorView > .view-title { margin-bottom: 9px; }

/* Шапка не «прыгает» между вкладками: место под полосу прокрутки зарезервировано всегда
   (короткая страница «Расчёт» без прокрутки была на 15 px шире, чем длинные «Заводы»/«История») */
html { scrollbar-gutter: stable; }
/* История: заголовок дня без серой подложки (и не липнет при прокрутке — иначе просвечивал бы список) */
.history-day { position: static; background: transparent; }
html { overflow-y: scroll; } /* на компьютере полоса прокрутки всегда на месте — ширина страницы одинаковая на всех вкладках */

/* Логотип: без размытого ореола (на телефоне он «размывал» название) — только чёткая тонкая тень */
.brand .brand-name { text-shadow: 0 1px 0 rgba(15, 23, 42, .18); }
html.dark .brand .brand-name { text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }

/* Карточки ближе к краю экрана: боковой отступ страницы 8 px (было 16, на узких 12) */
:root { --page-x: 8px; }
#app { padding-inline: var(--page-x); }
.appbar { margin-inline: calc(-1 * var(--page-x)); padding-inline: 12px; }
@media (max-width: 380px) { #app { padding-inline: var(--page-x); } .appbar { margin-inline: calc(-1 * var(--page-x)); padding-inline: 10px; } }
.news-banner { left: var(--page-x); right: var(--page-x); }
/* Тот же боковой отступ 8 px внутри окон: карточки завода/фермера, формы, «Цена фермеру», всплывающие окна */
.sheet-body { padding-left: var(--page-x); padding-right: var(--page-x); }
.sheet-head { padding-left: 14px; padding-right: 8px; }
.popover-overlay { padding-left: var(--page-x); padding-right: var(--page-x); }
.popover-body { padding-left: var(--page-x); padding-right: var(--page-x); }

/* Прокрутка во всплывающих окнах: тело окна ограничено высотой карточки и прокручивается само,
   прокрутка не «проваливается» на страницу за окном */
.popover-card { min-height: 0; }
.popover-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.popover-overlay, .user-picker { overscroll-behavior: contain; touch-action: pan-y; }

/* ===== 22.10: поиск наверху, заголовок-вкладка слит с фильтрами / окном расчёта ===== */
/* Строка поиска с кнопкой «+» (у истории — «Очистить») */
.view-top { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space); }
.view-top .search { flex: 1; min-width: 0; margin: 0; }
.view-top .icon-btn { flex: none; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
.view-top .icon-btn .icon { width: 18px; height: 18px; }
.view-top .btn { flex: none; }
/* Вкладка: белая «табличка» с названием раздела, приросшая к верхнему левому углу блока под ней */
.tabbed { display: grid; margin-bottom: var(--space); }
.tabbed > .view-tab {
  justify-self: start; position: relative; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 0;
  margin: 0 0 -1px !important; padding: 8px 16px 7px;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 14px 14px 0 0;
  font-size: 19px; line-height: 1.1;
  box-shadow: 0 -3px 8px rgba(15, 23, 42, .05);
}
.tabbed > .view-tab .count { font-size: 15px; }
.tabbed > .filter-box, .tabbed > .card { margin: 0 !important; border-top-left-radius: 0; position: relative; z-index: 1; }
.tabbed > .filter-box { border-top-left-radius: 0; }
/* у истории фильтры-чипы внутри рамки — ровно как у заводов */
.tabbed #historyTabs { margin: 0; padding: 2px 10px; }

/* Шапка продолжается вверх: при оттягивании страницы вниз на телефоне над шапкой тот же белый цвет, а не фон */
.appbar { position: relative; }
.appbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--surface); pointer-events: none; }

/* Подложка списка заводов/фермеров — лёгкий нейтральный мятный градиент (#e4f2f1) */
.list-tray { background: linear-gradient(180deg, #e4f2f1 0%, color-mix(in srgb, #e4f2f1 55%, var(--bg)) 100%); border-color: color-mix(in srgb, #9fcfc9 35%, transparent); box-shadow: none; }
html.dark .list-tray { background: linear-gradient(180deg, color-mix(in srgb, #1e5a54 34%, var(--bg)) 0%, color-mix(in srgb, #1e5a54 14%, var(--bg)) 100%); border-color: color-mix(in srgb, #3f8f86 30%, transparent); box-shadow: none; }

/* Окна «Качество» и «Цены фермерам»: блоки белые с тенью на сером фоне окна — ничего не сливается */
.indicator-section, .deal-toolbar, .deal-detail, .deal-best-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1);
}
.deal-toolbar { padding: 12px; }
.indicator-section { padding: 12px 14px; }
.deal-map-canvas { border: 1px solid var(--line); box-shadow: var(--shadow-1); background: var(--surface); }
/* Поля выбора, стоящие прямо на сером фоне окна (культура и т. п.), — белые с рамкой */
.sheet-body .detail > .field select, .sheet-body .detail > .field input,
.deal-toolbar select, .deal-list-head select {
  background-color: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1);
}
.deal-toolbar .field select { box-shadow: none; background-color: var(--surface-2); border-color: var(--line); }
.indicator-row .indicator-dots { border-bottom-color: var(--line-strong); }
/* История: длинные названия переносятся, пометка «добавлен/изменён» не уходит за край */
.change-item .entity-main { min-width: 0; }
.change-item .row-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.change-item .change-badge, .change-item .change-count { display: inline-block; white-space: nowrap; }

/* Вкладка-папка: слева скруглённый угол, справа скошенный край с обводкой (как у папки); текст ближе к левому краю */
.tabbed > .view-tab { padding: 8px 6px 7px 12px; border-right: 0; border-radius: 14px 0 0 0; margin-right: 22px !important; box-shadow: none; }
.tabbed > .view-tab::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -20px; width: 34px; z-index: -1;
  background: var(--surface); border: 1px solid var(--line); border-left: 0; border-bottom: 0;
  border-radius: 0 10px 0 0; transform: skewX(28deg); transform-origin: bottom left;
}

/* ===== Плавные анимации (22.10): одна «мягкая» кривая и длительности для всего приложения ===== */
:root { --ease-soft: cubic-bezier(.22, 1, .36, 1); --dur-open: .42s; --dur-fold: .38s; }
/* Раскрывающиеся блоки («Фермеру», «Расчёт», «Показать все»): плавно меняется высота, без рывка */
.fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-fold) var(--ease-soft), opacity .3s ease, margin-top var(--dur-fold) var(--ease-soft); margin-top: 0; }
.fold.is-open { grid-template-rows: 1fr; opacity: 1; }
.fold > .fold-inner { min-height: 0; overflow: hidden; }
.fold[data-card-panel].is-open { margin-top: var(--space); }
.fold > .fold-inner > .card-panel { margin-top: 0 !important; animation: none; }
.history-rest.fold[hidden] { display: grid; }
/* Окна снизу: открываются и закрываются мягче и дольше; затемнение — в такт */
.sheet { transition: transform var(--dur-open) var(--ease-soft); }
.sheet-overlay { transition: background var(--dur-open) ease, backdrop-filter var(--dur-open) ease; }
.sheet-dialog .sheet { transition: transform .3s var(--ease-soft), opacity .25s ease; }
/* Всплывающие окна и окно «Кто вы?» — плавное появление снизу */
@keyframes softUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.popover-overlay, .user-picker { animation: fadeIn .3s ease; }
.popover-card, .user-picker-card { animation: softUp var(--dur-open) var(--ease-soft); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Раскрывающиеся списки (версии в «Что нового», группы в «Истории») — плавно, где браузер умеет */
:root { interpolate-size: allow-keywords; }
details::details-content { height: 0; overflow: clip; transition: height var(--dur-fold) var(--ease-soft), content-visibility var(--dur-fold) allow-discrete; }
details[open]::details-content { height: auto; }
/* Стрелки, переключение вкладок, плашка обновления — тоже мягче */
.card-tab-chevron, .history-expand .icon, .wn-chevron, .more-chevron, .bd-chevron, .row-chevron { transition: transform .3s var(--ease-soft); }
.card-tab { transition: background .25s ease, border-color .25s ease, color .25s ease; }
.view.is-active { animation: viewIn .32s var(--ease-soft); }
.news-banner { animation: softUp .45s var(--ease-soft); }
/* Ручка окна — шире область касания, видно, что за неё тянут */
.sheet-grabber { cursor: grab; }
@media (prefers-reduced-motion: reduce) { .fold, .sheet, details::details-content { transition: none; } }

/* Подложка списка — мятный чуть насыщеннее (22.10) */
.list-tray { background: linear-gradient(180deg, #cfe9e5 0%, color-mix(in srgb, #d6ece9 70%, var(--bg)) 100%); border-color: color-mix(in srgb, #7fc0b7 40%, transparent); }
html.dark .list-tray { background: linear-gradient(180deg, color-mix(in srgb, #1e6a62 46%, var(--bg)) 0%, color-mix(in srgb, #1e6a62 22%, var(--bg)) 100%); border-color: color-mix(in srgb, #3f9f94 36%, transparent); }

/* iPhone: верх шапки чуть ниже — логотип не попадает в полосу размытия у края экрана (Safari / Telegram) */
.appbar { padding-top: max(14px, calc(env(safe-area-inset-top) + 6px)); margin-top: calc(-1 * max(8px, env(safe-area-inset-top))); }

/* Подложка списка — ещё насыщеннее (25.10) */
.list-tray { background: linear-gradient(180deg, #bde2dc 0%, color-mix(in srgb, #c8e7e2 75%, var(--bg)) 100%); border-color: color-mix(in srgb, #5fb0a5 45%, transparent); }
html.dark .list-tray { background: linear-gradient(180deg, color-mix(in srgb, #1e7a70 55%, var(--bg)) 0%, color-mix(in srgb, #1e7a70 28%, var(--bg)) 100%); border-color: color-mix(in srgb, #3fae9f 42%, transparent); }

/* ===== Перевозчики (25.10) ===== */
/* 4 кнопки (История ушла в меню ☰ в v0.58): на телефоне — во всю ширину, на широком экране действует правило выше (по 120 px по центру) */
@media (max-width: 759px) { .tabbar { grid-template-columns: repeat(4, 1fr); } }
.tab span { font-size: 10.5px; letter-spacing: -0.01em; white-space: nowrap; }
.person-role.role-carrier { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.person-role.role-driver { background: color-mix(in srgb, #0f9d8a 14%, transparent); color: #0b7d6e; }
html.dark .person-role.role-driver { color: #5fd3c2; }
.person-sub { margin-top: 1px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.carrier-rate { cursor: default; }
.carrier-rate-big { font-size: 20px; font-weight: 800; }
.info-row-caption { padding-bottom: 0; }
.field-hint { margin: 4px 4px 0; color: var(--faint); font-size: 11.5px; }

/* Перевозчик: вкладки «Общее / Водители», автопарк, карточки водителей */
.carrier-tabs { margin-top: 2px; }
.carrier-pane { display: grid; gap: var(--space); }
.carrier-pane[hidden] { display: none; }
.fleet-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); }
.fleet-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface); font-size: var(--fs-s); font-weight: 650; }
.fleet-chip b { color: var(--accent, var(--text)); font-weight: 800; }
.fleet-note { margin: 0 4px; }
.driver-card { gap: 0; border-radius: var(--r-s); background: var(--surface-2); overflow: hidden; }
.driver-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--line); }
.driver-who { min-width: 0; }
.driver-who .info-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-call { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--accent, var(--text)); }
.driver-vehicle { display: grid; gap: 8px; padding: 10px 14px 12px; }
.driver-type { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--surface); font-size: var(--fs-xs); font-weight: 700; }
.driver-type.is-empty { color: var(--faint); font-weight: 600; }
.driver-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.driver-plate { display: grid; gap: 2px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.driver-plate small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.driver-plate b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); letter-spacing: 0.02em; }
.driver-types { margin-top: 8px; }
.contact-block.is-focus { box-shadow: 0 0 0 2px var(--accent, #2a9d8f); border-radius: var(--r-s); transition: box-shadow 0.3s var(--ease-soft, ease); }
.driver-who .info-row-label { white-space: normal; overflow: visible; }

/* Расчёт → «Перевозчику»: сколько можно отдать за перевозку + кто возит в этой области */
.fo-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--warning, #e0a000) 12%, transparent); color: var(--text); font-size: var(--fs-xs); line-height: 1.35; }
.carrier-pick { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cp-title { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.cp-empty, .cp-more { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.cp-list { display: grid; gap: 6px; }
.cp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cp-main { display: grid; gap: 1px; min-width: 0; padding: 2px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cp-name { overflow: hidden; font-size: var(--fs-s); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cp-main small { overflow: hidden; color: var(--muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.cp-row .driver-call { background: var(--surface-2); }
/* Три кнопки под карточкой: «Фермеру» и «Перевозчику» рядом, «Расчёт» — строкой ниже */
.card-tabs { grid-template-columns: 1fr 1fr; }
.card-tabs > .card-tab:nth-child(3), .card-tabs > .card-tab:only-child { grid-column: 1 / -1; }
.card-tabs > .card-tab:nth-child(3) { padding-top: 8px; padding-bottom: 8px; }
.card-tabs > .card-tab:nth-child(3) .card-tab-text { display: flex; align-items: baseline; gap: 8px; }

/* Подбор сделок: фермер → завод, прибыль, цены, перевозчики */
.match-submit { margin-top: 8px; }
.match-head { display: grid; gap: 8px; margin-bottom: var(--space); }
.match-head .results-head { margin: 0; }
.match-note { margin: 0 4px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.match-card { display: grid; gap: 10px; margin-bottom: var(--space); }
.match-route { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.match-rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 800; }
.match-names { display: grid; gap: 2px; min-width: 0; }
.match-names strong { font-size: var(--fs-m, 16px); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.match-arrow { color: var(--accent); }
.match-names small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.match-profit { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--positive, #1f9d55) 10%, transparent); }
.match-profit > div { display: grid; gap: 1px; }
.match-profit > div:last-child { text-align: right; }
.match-profit b { color: var(--positive, #1f9d55); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.match-profit > div:last-child b { font-size: var(--fs-m, 16px); }
.match-profit small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.match-stats { margin: 0; }
.match-stats dd { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.match-card .carrier-pick { margin-top: 0; }
.match-open { margin-top: 2px; }
.result-card.is-picked { box-shadow: 0 0 0 2px var(--accent); }
.match-card { padding: 12px; }
.match-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.match-chips::-webkit-scrollbar { display: none; }
.match-chips .chip { flex: none; }
.match-chips-label { flex: none; align-self: center; min-width: 52px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.match-card .cp-title { margin-left: 2px; }

/* Логистика «авто»: крестик в поле ставки и блок «Перевозчику до» в карточке завода */
.rate-clear { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-right: 6px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.rate-clear[hidden] { display: none; }
.match-km { display: block; width: 100%; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
/* Пометка ставки к рынку: зелёный — в рынке / выше, жёлтый — ниже рынка, красный — не поедут */
:root { --market-warn: #b7791f; }
:root.dark { --market-warn: #f6c343; }
.mk-line { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.mk { font-weight: 800; }
.mk-ok { color: var(--positive); }
.mk-warn { color: var(--market-warn); }
.mk-bad { color: var(--negative); }
.fo-market { margin: 6px 0 0; }
.inline-row .target-switch { margin-left: auto; }

/* Вкладки над окном расчёта: «Расчёт рейса» | «Подбор» (26.10). Активная слита с окном, вторая — приглушённая рядом */
.calc-tabs { display: flex; align-items: flex-end; justify-self: start; position: relative; z-index: 2; margin-bottom: -1px; }
.calc-tabs > .view-tab {
  position: relative; display: inline-flex; align-items: baseline; min-height: 0; margin: 0 22px 0 0 !important;
  padding: 8px 6px 7px 12px; font: inherit; font-size: 19px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); border-right: 0; border-bottom: 0;
  border-radius: 14px 0 0 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background-color .2s ease;
}
.calc-tabs > .view-tab::after {
  content: ""; position: absolute; top: -1px; bottom: 0; right: -20px; width: 34px; z-index: -1;
  background: inherit; border: 1px solid var(--line); border-left: 0; border-bottom: 0;
  border-radius: 0 10px 0 0; transform: skewX(28deg); transform-origin: bottom left;
}
.calc-tabs > .view-tab:not(.is-active) {
  z-index: -1; margin-left: -14px !important; padding-left: 22px; color: var(--muted); font-size: 16px;
  background: color-mix(in srgb, var(--line) 45%, var(--bg)); border-bottom: 1px solid var(--line);
}
.calc-tabs > .view-tab:first-child:not(.is-active) { margin-left: 0 !important; padding-left: 12px; }
.calc-tabs > .view-tab.is-active { z-index: 1; }
.calc-tabs > .view-tab.is-active ~ .view-tab:not(.is-active) { z-index: 0; }
.tabbed > .calc-tabs + .card, .tabbed > .card[data-pane] { margin: 0 !important; border-top-left-radius: 0; position: relative; z-index: 1; }
#matchForm { padding-top: 12px; }
.match-intro { margin: 0 4px 10px; color: var(--muted); }
.match-target { margin-top: 12px; }

/* ===== Вход по PIN (02.11): экран на весь экран поверх приложения ===== */
.auth-screen {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--bg); outline: none; animation: fadeIn .25s ease;
}
.auth-screen.is-sheet { background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(6px); }
.auth-card { width: min(340px, 100%); display: grid; justify-items: center; gap: 6px; text-align: center; }
.auth-brand .brand-name { font-family: "Righteous", "Marck Script", sans-serif; font-size: 34px; color: var(--text); line-height: 1; }
.auth-brand { margin-bottom: 18px; }
.auth-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.auth-sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.auth-form { width: 100%; display: grid; gap: 10px; }
.auth-input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 18px; text-align: center; }
.auth-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: transparent; }
.auth-dots { display: flex; gap: 16px; margin: 6px 0 22px; }
.auth-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); transition: background-color .12s ease, border-color .12s ease, transform .12s ease; }
.auth-dots i.is-on { background: var(--text); border-color: var(--text); transform: scale(1.05); }
.auth-dots.is-error i { border-color: var(--negative, #d64545); }
.auth-dots.is-shake { animation: authShake .38s ease; }
@keyframes authShake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.auth-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 22px; justify-content: center; }
.auth-key {
  width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text);
  font: inherit; font-size: 30px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-1, 0 1px 3px rgba(15,23,42,.08));
  -webkit-tap-highlight-color: transparent; transition: background-color .12s ease, transform .08s ease;
}
.auth-key:active { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); transform: scale(.94); }
.auth-key.is-del { background: transparent; box-shadow: none; color: var(--muted); }
.auth-key .icon { width: 26px; height: 26px; }
.auth-error { min-height: 20px; margin: 10px 0 0; color: var(--negative, #d64545); font-size: 14px; font-weight: 600; }
.auth-links { display: grid; gap: 8px; margin-top: 6px; }
.auth-links .btn-link { font-size: 15px; }
.auth-screen.is-busy .auth-keys, .auth-screen.is-busy .auth-form { opacity: .5; pointer-events: none; }
@media (max-height: 640px) { .auth-key { width: 64px; height: 64px; font-size: 26px; } .auth-keys { grid-template-columns: repeat(3, 64px); gap: 10px 20px; } .auth-brand { margin-bottom: 8px; } }

/* Профиль (имя в шапке) */
.profile-card { text-align: left; }
.profile-card h2 { margin-bottom: 0; }
.profile-list { display: grid; gap: 6px; margin-top: 12px; width: 100%; }
.profile-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.profile-item .icon { flex: none; color: var(--accent); }
.profile-item small { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }

/* Сотрудники */
.staff-note { margin: 0 4px 12px; }
.staff-row { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.staff-row:last-child { border-bottom: 0; }
.staff-row.is-blocked .staff-main b { color: var(--muted); text-decoration: line-through; }
.staff-main { display: grid; gap: 2px; }
.staff-main small { color: var(--muted); font-size: var(--fs-xs); }
.staff-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-actions .chip.is-danger { color: var(--negative, #d64545); }
.staff-empty { padding: 12px; margin: 0; }
.detail-author { margin: 4px 4px 0; color: var(--muted); font-size: var(--fs-xs); }

/* Сотрудник видит только «Фермеры»: нижнее меню и остальные разделы скрыты */
html[data-role="worker"] .tabbar, html[data-role="worker"] #calculatorView, html[data-role="worker"] #plantsView,
html[data-role="worker"] #carriersView, html[data-role="worker"] #historyView { display: none !important; }
html[data-role="worker"] main { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Экран входа — список имён (как прежнее «Кто вы?») */
.auth-users { width: 100%; max-height: min(52vh, 420px); overflow-y: auto; margin-bottom: 4px; }
.auth-new { margin-top: 4px; gap: 8px; }
.auth-skeleton { width: 100%; }

/* ===== Меню слева (03.11): кнопка ☰ в шапке, панель выезжает слева ===== */
.menu-btn { position: relative; }
.menu-btn.has-news::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--negative); border: 2px solid var(--surface); }
.drawer-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(15, 23, 42, 0); transition: background-color .28s ease; }
.drawer-overlay.is-open { background: rgba(15, 23, 42, .38); }
.drawer {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: 8px 0 32px rgba(15, 23, 42, .18);
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  transform: translateX(-104%); transition: transform .28s var(--ease-soft, ease); overflow: hidden;
}
.drawer-overlay.is-open .drawer { transform: translateX(0); }
html.drawer-open, html.drawer-open body { overflow: hidden; }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.drawer-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 800; font-size: 18px; }
.drawer-who { flex: 1; min-width: 0; display: grid; }
.drawer-who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-who small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.drawer-label { margin: 14px 8px 4px; color: var(--faint, var(--muted)); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 10px; border: 0; border-radius: 12px;
  background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.drawer-switch .tax-switch-track { flex: none; margin-left: auto; }
.drawer-switch[aria-checked="true"] .tax-switch-track { background: var(--accent); }
.drawer-switch[aria-checked="true"] .tax-switch-knob { transform: translateX(12px); }
.drawer-item .icon { flex: none; width: 20px; height: 20px; color: var(--muted); }
.drawer-item small { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.drawer-item:active { background: var(--surface-2); }
.drawer-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.drawer-item.is-active .icon { color: var(--accent); }
.drawer-item.has-news::after { content: ""; position: absolute; top: 14px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--negative); }
.drawer-foot { border-top: 1px solid var(--line); padding-top: 6px; }
.drawer-foot .drawer-item { color: var(--negative); }
.drawer-foot .drawer-item .icon { color: var(--negative); }

/* ===== Расчёт ставки (03.11) ===== */
#rateForm { padding-top: 12px; }
#rateForm .autocomplete { position: relative; }
.rate-card { display: grid; gap: var(--space); }
/* Карточка (10.11): маршрут мелко, на виду только цифры — слева км и ₽/км, справа ставка с диапазоном */
.rate-route { margin: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
.rate-warn { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--market-warn); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.rate-warn .icon { flex: none; margin-top: 1px; }
.rate-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rate-hero > div { display: grid; gap: 2px; min-width: 0; }
.rate-price { text-align: right; }
.rate-hero strong { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; }
.rate-price strong { color: var(--accent); }
.rate-hero small { color: var(--muted); font-size: var(--fs-s); font-weight: 700; white-space: nowrap; }
.rate-km small { color: var(--text); }
@media (max-width: 380px) { .rate-hero { padding: 12px; gap: 8px; } .rate-hero strong { font-size: 22px; } }
.rate-details { display: grid; gap: var(--space-row, 8px); }
.rate-details .match-note { margin: 0; }
/* Форма: «Откуда» и «Куда» без подписей, вплотную */
.rate-points { display: grid; gap: 6px; }
.rate-factors { display: grid; gap: var(--space-row, 8px); }
.rate-factor { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-s); font-weight: 650; }
.rate-factor small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.rate-factor b { flex: none; }
.rate-factor b.is-up { color: var(--negative); }
.rate-factor b.is-down { color: var(--positive); }
/* Три вкладки над окном расчёта: на телефоне — помельче, чтобы влезли в строку */
@media (max-width: 480px) {
  .calc-tabs > .view-tab { font-size: 14px; white-space: nowrap; margin-right: 16px !important; padding: 8px 2px 7px 9px; }
  .calc-tabs > .view-tab:not(.is-active) { font-size: 12.5px; padding-left: 16px; }
  .calc-tabs > .view-tab:first-child:not(.is-active) { padding-left: 10px; }
}
.rate-card { padding: 16px; }
.rate-card .rate-trucks { margin: 0; }

/* ===== Разгрузка (черновик): шапка карточки завода со значками ===== */
.rc-head { display: flex; align-items: flex-start; gap: 8px; }
.rc-title { flex: 1 1 auto; min-width: 0; }
.rc-icons { flex: none; display: flex; gap: 6px; }
.rc-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.rc-icon:active { transform: scale(.94); }
/* Тихая пометка в карточке: «закупка не указана» */
.hero-note { display: block; margin-top: 2px; color: var(--faint, var(--muted)); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
/* Где реально нашёлся адрес */
.route-found { margin: 0 2px 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; line-height: 1.35; }
.route-found b { color: var(--text); font-weight: 700; }
.rate-card .route-found { margin: 0; }
/* Подбор: разделитель перед старыми ценами и пометка в карточке */
.match-divider { margin: 4px 2px 8px; color: var(--market-warn); font-size: var(--fs-xs); font-weight: 700; }
.match-stale { margin: 8px 0 0; color: var(--market-warn); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }

/* ===== Карточка перевозчика: кому звонить (06.11) ===== */
.carrier-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.carrier-card .entity-main { gap: 3px; }
.cc-facts { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.cc-facts b { color: var(--text); font-weight: 750; }
.cc-miss { color: var(--market-warn); font-style: normal; font-weight: 600; }
.cc-rows { display: grid; gap: 3px; margin-top: 3px; }
.cc-fit { display: grid; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.cc-fit .cc-row { grid-template-columns: 96px minmax(0, 1fr); }
.cc-fit .cc-note { margin-top: 0; }
.cc-row { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: baseline; gap: 6px; color: var(--text); font-size: var(--fs-xs); font-weight: 500; line-height: 1.35; }
.cc-row small { color: var(--muted); font-size: 12px; font-weight: 500; }
.cc-row b { font-weight: 750; }
.cc-note { margin-top: 4px; color: var(--accent); font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; }
.cc-note b { color: var(--text); font-weight: 800; }
.carrier-card.is-bad { opacity: .7; }
.carrier-card.is-bad .cc-note { color: var(--negative); }
.carrier-card .driver-call { background: var(--accent); color: #fff; }
.carrier-finder-box { margin-bottom: var(--space); }
.carrier-finder { display: grid; gap: 8px; padding: 0 12px 12px; }
.finder-title { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; font-size: 15px; font-weight: 800; list-style: none; cursor: pointer; }
.finder-title::-webkit-details-marker { display: none; }
.finder-title .icon-s { color: var(--accent); }
.finder-chevron { margin-left: auto; transition: transform .2s ease; }
.carrier-finder-box[open] .finder-chevron { transform: rotate(180deg); }
.finder-actions { display: flex; gap: 8px; }
.finder-actions .btn { flex: 1; }

/* ===== Окна редактирования: отдельный раздел, контраст, никакого белого на белом (06.11) ===== */
:root { --edit-head: #17324a; --edit-bg: #e3e8ec; --edit-card: #ffffff; --edit-line: #c5ced6; --edit-input: #ffffff; --edit-label: #3a4653; }
:root.dark { --edit-head: #1d3b55; --edit-bg: #0d1113; --edit-card: #181e21; --edit-line: rgba(255, 255, 255, .2); --edit-input: #222a2e; --edit-label: #c9d2da; }
.sheet-edit.sheet-overlay.is-open { background: rgba(10, 18, 26, .74); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.sheet-edit .sheet { height: calc(100dvh - max(16px, env(safe-area-inset-top))); max-height: calc(100dvh - max(16px, env(safe-area-inset-top))); overflow: hidden; background: var(--edit-head); box-shadow: 0 -8px 28px rgba(0, 0, 0, .4); }
.sheet-edit .sheet-grabber { background: rgba(255, 255, 255, .45); }
.sheet-edit .sheet-head { min-height: 60px; background: var(--edit-head); color: #fff; }
.sheet-edit .sheet-title { color: #fff; font-size: 19px; font-weight: 800; }
.sheet-edit .sheet-head .icon-btn { background: rgba(255, 255, 255, .14); color: #fff; }
.sheet-edit .sheet-body { flex: 1 1 auto; gap: 12px; padding-top: 12px; padding-bottom: 0; background: var(--edit-bg); }
.sheet-edit .form-list .inline-label { width: 96px; }
.sheet-edit .form-group { padding: 14px; border: 1px solid var(--edit-line); border-radius: 14px; background: var(--edit-card); box-shadow: none; }
.sheet-edit .form-group-title { margin: -2px 0 2px; padding-bottom: 10px; border-bottom: 1px solid var(--edit-line); color: var(--text); font-size: 16px; }
.sheet-edit .inline-list { border: 1px solid var(--edit-line); background: var(--edit-input); box-shadow: none !important; }
.sheet-edit .inline-row { min-height: 50px; border-bottom-color: var(--edit-line); }
.sheet-edit .inline-label, .sheet-edit .field-label { color: var(--edit-label); font-weight: 650; }
.sheet-edit .inline-input { color: var(--text); font-weight: 650; }
.sheet-edit .field-hint { color: var(--muted); }
.sheet-edit input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not(.inline-input), .sheet-edit textarea, .sheet-edit select { border: 1px solid var(--edit-line); background: var(--edit-input); color: var(--text); }
.sheet-edit input:not(.inline-input):focus, .sheet-edit textarea:focus, .sheet-edit select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sheet-edit .inline-row:focus-within { background: var(--accent-soft); }
.sheet-edit ::placeholder { color: #7c8894; }
.sheet-edit .chip { border-color: var(--edit-line); background: var(--edit-input); color: var(--text); font-weight: 600; }
.sheet-edit .chip-check:has(input:checked), .sheet-edit .chip.is-active { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.sheet-edit .contact-block { padding: 10px; border: 1px solid var(--edit-line); border-radius: 12px; background: var(--edit-bg); }
.sheet-edit .form-sticky { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--page-x)); padding: 10px var(--page-x) max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--edit-line); background: var(--edit-bg); }
.sheet-edit .form-sticky .btn { min-height: 50px; font-size: 16px; font-weight: 800; }
/* Короткие окна (цена, настройки, качество) — по содержимому, а не на весь экран */
#detailSheet.sheet-edit .sheet { height: auto; }
#detailSheet.sheet-edit .sheet-body { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.cc-hint { color: var(--muted); font-size: 11px; font-weight: 500; }

/* Карточки и остальные окна — в стиле окон редактирования (06.11) */
.sheet-edit .detail-section { padding: 12px 14px; border: 1px solid var(--edit-line); border-radius: 14px; background: var(--edit-card); }
.sheet-edit .detail-section > h3 { margin: -2px 0 2px; padding-bottom: 10px; border-bottom: 1px solid var(--edit-line); color: var(--text); font-size: 16px; font-weight: 800; }
.sheet-edit .detail-section .info-list { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sheet-edit .detail-section .info-row { padding-left: 0; padding-right: 0; border-bottom-color: var(--edit-line); }
.sheet-edit .detail > .info-list, .sheet-edit .carrier-pane > .info-list { border: 1px solid var(--edit-line); background: var(--edit-card); box-shadow: none; }
.sheet-edit .sheet-body .action { border-color: var(--edit-line); background: var(--edit-card); box-shadow: none; }
/* Расчёт ставки: строка адресов под названиями фермера/завода (11.11) */
.rate-routes { display: grid; gap: 2px; }
/* ===== Автопарк перевозчика (11.11) ===== */
.fleet-form { display: grid; gap: 10px; }
.fleet-line { display: grid; gap: 6px; }
.fleet-line-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.fleet-with-us { margin-left: 5px; color: var(--accent); font-size: 10.5px; font-weight: 700; }
.chip.is-auto { opacity: 1; }
.chip.is-auto input:disabled + span { cursor: default; }
.chip.is-none, .fleet-chip.is-none { font-weight: 600; }
.chip.is-none i, .fleet-chip.is-none i { color: var(--muted); font-style: normal; font-weight: 500; }
span.chip.is-auto.is-none { display: inline-flex; align-items: center; border: 1px dashed var(--line); background: var(--surface); }
.fleet-hint { margin: 0; }
.detail-section .fleet-line + .fleet-line { margin-top: 8px; }
.detail-section .fleet-line { padding: 0 2px; }
/* Водители в форме — свёрнутым блоком */
.drivers-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.drivers-box > summary::-webkit-details-marker { display: none; }
.drivers-count { color: var(--muted); font-weight: 600; }
.drivers-chevron { margin-left: auto; color: var(--muted); transform: rotate(90deg); transition: transform .2s ease; }
.drivers-box[open] .drivers-chevron { transform: rotate(-90deg); }
.drivers-box[open] > summary { margin-bottom: 8px; }
/* Расчёт ставки: строка маршрута и значок «Маршрут» справа (11.11) */
.rate-head { display: flex; align-items: flex-start; gap: 8px; }
.rate-head .rate-routes { flex: 1 1 auto; min-width: 0; }
.rate-head .rc-icon { flex: none; margin-top: -4px; }

/* «Расчёт ставки»: 4 кнопки сеткой 2×2 (Своим, Перевозчику / Расчёт, Кто повезёт) */
.card-tabs.is-four > .card-tab:nth-child(3) { grid-column: auto; padding-top: 10px; padding-bottom: 10px; }
.card-tabs.is-four > .card-tab:nth-child(3) .card-tab-text { display: grid; gap: 0; }
.rate-carriers .cp-title { margin-bottom: 8px; }

/* «Обзвоны» (11.11) */
html[data-role="worker"] .admin-only { display: none !important; }
.call-form { display: grid; gap: 12px; }
.call-hint { display: grid; gap: 3px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-s); color: var(--muted); }
.call-hint b { color: var(--text); font-weight: 700; }
.call-hint .cc-facts { font-size: var(--fs-xs); }
.call-nophone { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); font-size: var(--fs-s); }
.call-callback { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.call-callback[hidden] { display: none; }
.call-agreed { justify-self: start; }
.rate-call-btn { margin-bottom: 10px; }
.call-row .entity-main, .call-entry .entity-main { display: grid; gap: 2px; min-width: 0; }
.call-agreed-line { color: var(--positive, #16a34a); font-size: var(--fs-xs); font-weight: 650; }
.call-wait-line { color: var(--warning); font-size: var(--fs-xs); font-weight: 650; }
.call-session-sub { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-s); }
.call-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; vertical-align: 1px; }
.call-badge-ready, .call-badge-agreed { background: color-mix(in srgb, var(--positive, #16a34a) 14%, transparent); color: var(--positive, #16a34a); }
.call-badge-callback { background: rgba(234, 88, 12, 0.12); color: var(--warning); }
.call-badge-expensive, .call-badge-busy, .call-badge-noanswer { background: var(--surface-2); color: var(--muted); }
.call-entry.is-agreed { background: color-mix(in srgb, var(--positive, #16a34a) 7%, transparent); }
.call-entry.is-agreed .change-icon { color: var(--positive, #16a34a); }
.call-entry .row-title { white-space: normal; }
.call-terms { color: var(--text); font-weight: 600; }
.call-note { white-space: pre-wrap; }
.call-row .entity-sub, .call-entry .entity-sub { white-space: normal; overflow: visible; }
/* Обзвон блоками (12.11): белые блоки с тенью на сером фоне — как остальные блоки приложения */
.sheet-edit .call-form .form-group, .sheet-edit .call-session .card { box-shadow: var(--shadow-1); }
.call-form { gap: 14px; }
.call-facts { display: grid; gap: 6px; }
.call-fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: var(--fs-s); }
.call-fact small { color: var(--edit-label, var(--muted)); font-size: var(--fs-xs); font-weight: 650; }
.call-fact span { font-weight: 650; }
.call-carrier-facts { font-size: var(--fs-s); }
.call-contacts { display: grid; gap: 8px; }
.call-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--edit-line, var(--line)); border-radius: 12px; background: var(--edit-input, var(--surface)); color: var(--text); text-decoration: none; }
.call-contact-main { display: grid; min-width: 0; }
.call-contact-main b { overflow: hidden; font-size: var(--fs-m); text-overflow: ellipsis; white-space: nowrap; }
.call-contact-main small { color: var(--muted); font-size: var(--fs-xs); }
.call-contact-phone { color: var(--muted); font-size: var(--fs-s); font-weight: 650; }
.call-contact-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; }
.call-contact:active { transform: scale(.99); }
.call-summary { margin: 0; font-size: var(--fs-s); font-weight: 650; }
.call-contact-name { color: var(--muted); font-weight: 600; }
.call-form .call-agreed { justify-self: start; }
.call-form .call-agreed .icon { width: 16px; height: 16px; }
.call-form .call-callback { border: 1px solid var(--edit-line, var(--line)); }
@media (max-width: 380px) { .call-contact { grid-template-columns: minmax(0, 1fr) 40px; } .call-contact-phone { display: none; } .call-fact { grid-template-columns: 96px minmax(0, 1fr); } }
/* контакты в обзвоне: имя целиком, под ним кто и телефон */
.call-contact { grid-template-columns: minmax(0, 1fr) 40px; }
.call-contact-main b { white-space: normal; overflow: visible; line-height: 1.25; }
.call-contact-main small { margin-top: 2px; font-weight: 600; }
.call-more summary { display: flex; align-items: center; gap: 6px; padding: 4px 2px; color: var(--accent); font-size: var(--fs-s); font-weight: 700; list-style: none; cursor: pointer; }
.call-more summary::-webkit-details-marker { display: none; }
.call-more summary .icon { transform: rotate(90deg); transition: transform .2s ease; }
.call-more[open] summary .icon { transform: rotate(-90deg); }
.call-more > .call-contacts { margin-top: 8px; }
.call-fact span { white-space: pre-wrap; overflow-wrap: anywhere; }
.call-miss { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }

/* ===== Пружины (13.11, принципы Apple) ===== */
/* Шторка на телефоне двигается пружиной из JS (core.js spring): CSS-переходы ей не мешают */
.sheet-overlay.js-motion, .sheet-overlay.js-motion .sheet { transition: none; }
@media (max-width: 759px) { .sheet-grabber, .sheet-head { touch-action: none; } .sheet-grabber { padding-block: 6px; margin-top: 2px; box-sizing: content-box; background-clip: content-box; } }
/* Кривые-пружины для CSS: --spring без отскока, --spring-bounce с лёгким отскоком. Старые браузеры берут прежнюю --ease-soft */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.029, 0.097, 0.186, 0.282, 0.376, 0.466, 0.547, 0.619, 0.682, 0.736, 0.782, 0.821, 0.854, 0.881, 0.903, 0.921, 0.936, 0.949, 0.959, 0.967, 0.973, 0.979, 0.983, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 1); --spring-bounce: linear(0, 0.032, 0.11, 0.214, 0.328, 0.443, 0.552, 0.649, 0.734, 0.805, 0.864, 0.91, 0.946, 0.972, 0.992, 1.005, 1.013, 1.018, 1.02, 1.02, 1.019, 1.017, 1.015, 1.012, 1.01, 1.008, 1.006, 1.005, 1.003, 1.002, 1.001, 1.001, 1); --dur-spring: .5s; }
  .fold { transition: grid-template-rows var(--dur-spring) var(--spring), opacity .3s ease, margin-top var(--dur-spring) var(--spring); }
  details::details-content { transition: height var(--dur-spring) var(--spring), content-visibility var(--dur-spring) allow-discrete; }
  .card-tab-chevron, .history-expand .icon, .wn-chevron, .more-chevron, .bd-chevron, .row-chevron, .drivers-chevron, .finder-chevron { transition: transform .45s var(--spring-bounce); }
  .view.is-active { animation: viewIn .5s var(--spring); }
  .toast { animation: toastIn .55s var(--spring-bounce); }
  .popover-card, .user-picker-card { animation: softUp .55s var(--spring-bounce); }
  .news-banner { animation: softUp .55s var(--spring-bounce); }
  .sheet { transition: transform var(--dur-spring) var(--spring); }
  .sheet-dialog .sheet { transition: transform .45s var(--spring-bounce), opacity .25s ease; }
}
@media (prefers-reduced-motion: reduce) { .fold, .sheet, details::details-content, .card-tab-chevron, .row-chevron { transition: none; } .toast, .view.is-active, .popover-card { animation: none; } }

/* ===== Этап 2–3 дизайна (13.11, принципы Apple) ===== */
/* Шапка остаётся наверху; пока страница не прокручена — как была, при прокрутке — полупрозрачная,
   содержимое просвечивает под ней, вместо жёсткой линии снизу — мягкий край */
.appbar { position: sticky; top: 0; z-index: 40; transition: background .25s ease, box-shadow .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease; }
html.is-scrolled .appbar {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: transparent;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
}
html.dark.is-scrolled .appbar { box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
html.is-scrolled .appbar::before { background: color-mix(in srgb, var(--surface) 76%, transparent); }
@media (prefers-reduced-transparency: reduce) { html.is-scrolled .appbar, html.is-scrolled .appbar::before { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* закреплённые подзаголовки («Сегодня» в Истории) — под шапкой, а не за ней */
.history-day { top: var(--appbar-h, 0px); }

/* Длинные названия в списках — в две строки, а не «Моршанск…» */
.entity-title span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow-wrap: anywhere; }

/* Отклик сразу при касании — у всех нажимаемых элементов одинаково */
.card-tab, .cp-main, .call-contact, .info-row a, .drawer-item, .history-item, .entity { transition: transform .3s var(--spring, ease), background .15s ease; }
.card-tab:active, .cp-main:active, .call-contact:active { transform: scale(.97); transition-duration: .06s; }
.drawer-item:active, .history-item:active { transform: scale(.985); transition-duration: .06s; }

/* Шрифты: размеры от размера текста в настройках телефона (rem), крупный текст — плотнее, мелкие подписи КАПСОМ — чуть свободнее */
:root { --fs-xs: .75rem; --fs-s: .875rem; --fs-m: 1rem; --fs-l: 1.25rem; --fs-xl: 1.875rem; }
.view-title, .fo-price, .rate-hero strong, .match-profit b, .detail-group-title { letter-spacing: -.015em; }
.fo-price, .rate-hero strong, .match-profit b { letter-spacing: -.025em; }
.cp-title, .history-sub-title { letter-spacing: .03em; }

/* ===== Навигация v0.72 (принципы Apple): вкладка «Ещё» вместо ☰, крупные заголовки, сегмент расчётов ===== */
/* Шапка: наверху страницы прозрачная (только колокольчик), при прокрутке — полупрозрачная с названием раздела.
   Логотип — только на «Расчёте». Меню ☰ и смена темы ушли во вкладку «Ещё». */
#menuButton, #themeButton { display: none !important; }
html:not(.is-scrolled) .appbar { background: transparent; border-bottom-color: transparent; box-shadow: none; }
html:not(.is-scrolled) .appbar::before { background: transparent; }
.appbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 48px; }
.appbar .brand, .appbar-title { grid-column: 2; grid-row: 1; justify-self: center; }
html:not([data-view="calculator"]) .appbar .brand { visibility: hidden; }
.appbar-title { font-weight: 700; font-size: var(--fs-m); letter-spacing: -.01em; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .35s var(--spring, ease); pointer-events: none; }
html.is-scrolled:not([data-view="calculator"]) .appbar-title { opacity: 1; transform: none; }
.appbar-back { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 8px 0 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-m); font-weight: 600; }
.appbar-back[hidden] { display: none; }
.appbar-back .icon { width: 22px; height: 22px; }

/* Крупный заголовок раздела: «Заводы 28» */
.large-title { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 12px; font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.large-title .count { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
html[data-view="calculator"] #calcTitle { display: none; } /* на «Расчёте» вместо заголовка — логотип в шапке и сегмент */
/* Фильтры больше не «вкладка» под заголовком — обычный блок со скруглёнными углами */
.tabbed > .filter-box, .tabbed > .card, .tabbed > .card[data-pane], .tabbed > .calc-tabs + .card { border-top-left-radius: var(--r-l) !important; }

/* Сегмент «Рейс / Подбор / Ставка» — как переключатель в iPhone */
.seg-nav { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; justify-self: stretch !important; margin: 0 0 12px !important; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.seg-nav > .seg-btn { position: relative; min-height: 34px; margin: 0 !important; padding: 6px 4px !important; border: 0 !important; border-radius: 9px !important; background: none; color: var(--muted); font: inherit; font-size: var(--fs-s) !important; font-weight: 650; box-shadow: none !important; transition: background .25s ease, color .2s ease, box-shadow .25s ease; }
.seg-nav > .seg-btn::after, .seg-nav > .seg-btn::before { display: none !important; }
.seg-nav > .seg-btn.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 0 0 .5px rgba(15, 23, 42, .04) !important; }
html.dark .seg-nav > .seg-btn.is-active { background: color-mix(in srgb, var(--text) 16%, var(--surface)); }

/* Нижняя панель: пять вкладок; точка «вышла новая версия» — на «Ещё» */
.tabbar { grid-template-columns: repeat(5, 1fr) !important; }
@media (min-width: 760px) { .tabbar { grid-template-columns: repeat(5, 110px) !important; } }
.tab { position: relative; }
.tab.has-news::before { content: ""; position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--negative); border: 2px solid var(--surface); }
/* Сотрудник: только «Фермеры» и «Ещё» */
html[data-role="worker"] nav.tabbar { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
html[data-role="worker"] .tab:not([data-view="farmers"]):not([data-view="more"]) { display: none; }

/* «Ещё» — как «Настройки» iPhone: сгруппированные строки с цветными значками */
.more-list { display: grid; gap: 20px; }
.more-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.more-profile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.more-label { margin: 0 0 6px 16px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.more-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; transition: background .15s ease; }
.more-row + .more-row::before { content: ""; position: absolute; top: 0; right: 0; left: 58px; height: 1px; background: var(--line); }
.more-row:active { background: var(--surface-2); }
.more-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; }
.more-ico .icon { width: 17px; height: 17px; }
.more-ico-green { background: #34c759; } .more-ico-blue { background: #0a7cff; } .more-ico-violet { background: #8e5cf7; }
.more-ico-red { background: #ff453a; } .more-ico-dark { background: #3a3f4b; } .more-ico-orange { background: #ff9500; }
.more-ico-gray { background: #8e8e93; } .more-ico-yellow { background: #ffb800; }
.more-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.more-text > span, .more-text > b { font-weight: 600; }
.more-text small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
.more-value { color: var(--muted); font-size: var(--fs-s); white-space: nowrap; }
.more-value.is-new { color: var(--negative); font-weight: 700; }
.more-chev { flex: none; width: 16px; height: 16px; color: var(--faint, var(--muted)); }
.more-row.is-danger .more-text > span { color: var(--negative); }
.more-switch .tax-switch-track { flex: none; }
.more-switch[aria-checked="true"] .tax-switch-track { background: var(--positive, #34c759); }
.more-switch[aria-checked="true"] .tax-switch-knob { transform: translateX(12px); }

/* ===== v0.72, шаг 4: списки одним блоком со строками через тонкие линии (как в iPhone) =====
   Мятная подложка списка остаётся (решение Алексея 22.10/25.10), внутри неё — один белый блок. */
.list-tray { gap: 0 !important; }
.list-tray > .entity { position: relative; margin: 0; border-radius: 0; border-top: 0; border-bottom: 0; box-shadow: none; min-height: 64px; }
.list-tray > .entity:active { transform: none; background: var(--surface-2); }
.list-tray > .list-tray-title { margin-bottom: 6px; }
.list-tray > .list-tray-title + .entity { border-top: 1px solid var(--line); border-radius: var(--r-l) var(--r-l) 0 0; }
.list-tray > .entity:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-l) var(--r-l); }
.list-tray > .list-tray-title + .entity:last-child { border-radius: var(--r-l); }
.list-tray > .entity + .entity::before { content: ""; position: absolute; top: 0; right: 0; left: 70px; height: 1px; background: var(--line-strong); }
.list-tray > .carrier-card + .carrier-card::before { left: 14px; }
.list-tray { box-shadow: none; }
.list-tray > .list-tray-title ~ .entity { box-shadow: 0 1px 0 rgba(15, 23, 42, .02); }
.list-tray > .entity:focus-visible { z-index: 1; }

/* ===== шаг 5: действия в карточке — круглые значки с подписью снизу (как в карточке контакта iPhone) ===== */
.sheet-body .action-grid { gap: 4px; }
.sheet-body .action, .sheet-edit .sheet-body .action { min-height: 0; padding: 4px 2px 2px; gap: 6px; border: 0; background: none; box-shadow: none; }
.sheet-body .action > .icon { box-sizing: content-box; width: 22px; height: 22px; padding: 13px; border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .08); transition: transform .3s var(--spring, ease), background .15s ease; }
.sheet-edit .sheet-body .action > .icon { background: var(--edit-card); border: 1px solid var(--edit-line); }
.sheet-body .action span { color: var(--text); font-size: var(--fs-xs); font-weight: 650; line-height: 1.2; }
.sheet-body .action:active { transform: none; }
.sheet-body .action:active > .icon { transform: scale(.92); background: var(--surface-2); transition-duration: .06s; }
.sheet-body .action.is-danger > .icon { color: var(--negative); }
.sheet-body a.action[href^="tel:"] > .icon, .sheet-body .action[data-detail-action="call-pick"] > .icon { background: var(--positive); color: #fff; border-color: transparent; }

/* ===== шаг 6: единая сетка — одинаковые блоки выглядят одинаково ===== */
.card, .filter-box, .more-card { border-radius: var(--r-l); }
.large-title + .view-top, .large-title + .tabbed { margin-top: 0; }