/* ===== ANTEKS GROUP · дизайн-токены ===== */
:root {
  --color-primary: #6E1620;        /* бордовый из логотипа */
  --color-primary-dark: #500F17;
  --color-secondary: #C39A3E;      /* золото из логотипа */
  --color-secondary-soft: #E7D6A8;
  --color-background: #F3F4F6;
  --color-surface: #FFFFFF;
  --color-success: #1E9E5A;
  --color-danger: #D43A2C;
  --color-text-primary: #1B1F24;
  --color-text-secondary: #6B7280;
  --color-border: #E6E8EC;

  --font-app-title: 30px;
  --font-warehouse-title: 23px;
  --font-section-title: 17px;
  --font-metric: 30px;
  --font-body: 15px;
  --font-caption: 13px;

  --space-xs: 4px; --space-sm: 8px; --space-md: 12px;
  --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(27,31,36,.06);
  --shadow-md: 0 2px 6px rgba(27,31,36,.07), 0 8px 22px rgba(27,31,36,.06);
  --shadow-lg: 0 6px 16px rgba(110,22,32,.12), 0 14px 40px rgba(27,31,36,.10);

  --transition-fast: 150ms; --transition-normal: 250ms; --transition-slow: 350ms;

  /* совместимость со старыми переменными в разметке */
  --bg: var(--color-background);
  --secondary-bg: var(--color-background);
  --text: var(--color-text-primary);
  --hint: var(--color-text-secondary);
  --accent: var(--color-primary);
  --accent-text: #fff;
  --danger: var(--color-danger);
  --positive: var(--color-success);
  --border: var(--color-border);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-md);

  /* Safe Area (фолбэк через env(); уточняется из JS по данным Telegram в Full Screen) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

/* Гасим горизонтальную прокрутку только на корне (не на body — иначе body стал бы
   скролл-контейнером и сломал sticky-шапку). Боковые «уезды» панели Telegram
   Desktop при этом обрезаются. */
html { overflow-x: hidden; }

html, body {
  margin: 0; padding: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, sans-serif;
  font-size: var(--font-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1;
}

/* Водяной знак-логотип */
#watermark {
  position: fixed;
  inset: 0;
  background-image: url('anteks-logo.png');
  background-repeat: no-repeat;
  background-position: center 38%;
  background-size: 78% auto;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}

#app { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding-bottom: calc(48px + var(--safe-bottom)); }

/* ===== Шапка ANTEKS ===== */
#topbar {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: calc(var(--space-md) + var(--safe-top)) calc(var(--space-lg) + var(--safe-right)) var(--space-lg) calc(var(--space-lg) + var(--safe-left));
  border-bottom: 3px solid var(--color-secondary);
  box-shadow: var(--shadow-md);
}
/* PWA на домашнем экране (iPhone): в установленном приложении iOS часто отдаёт
   env(safe-area-inset-top)=0, из-за чего шапка не опускается под статус-бар и
   часы/батарея налезают на логотип. Даём гарантированный запас под статус-бар
   (max с фиксированной величиной) и заливаем эту зону фирменным бордо. */
@media (display-mode: standalone) {
  #topbar {
    padding-top: calc(var(--space-md) + max(var(--safe-top, 0px), 54px));
  }
  #topbar::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0;
    height: max(var(--safe-top, 0px), 54px);
    background: var(--color-primary);
    z-index: 4;
    pointer-events: none;
  }
}
#brand { display: flex; align-items: center; gap: var(--space-md); }
#brand-logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; object-fit: cover;
  box-shadow: 0 0 0 2px var(--color-secondary);
  flex-shrink: 0;
}
#brand-text { flex: 1; min-width: 0; }
#brand-name { font-size: 18px; font-weight: 800; letter-spacing: .14em; }
#brand-sub { font-size: var(--font-caption); color: var(--color-secondary-soft); letter-spacing: .04em; }
/* Курс ЦБ в шапке — компактная пилюля в углу под РУ/ЎЗ: подпись «Курс ЦБ» + курс + дата мелким шрифтом. */
/* Нижний ряд шапки: «тонна/кг» слева, курс ЦБ справа. */
#topbar #topbar-lower { display: flex; align-items: center; gap: 8px; margin-top: 6px; justify-content: flex-end; }
#topbar #topbar-lower:empty { display: none; }
#topbar #usd-banner-slot { display: flex; justify-content: flex-end; }
#topbar #usd-banner-slot:empty { display: none; }
#topbar .usd-banner.compact {
  width: auto;
  background: rgba(255,255,255,.12);
  background-image: none;
  border: 1px solid rgba(255,255,255,.20);
  border-left: 3px solid var(--color-secondary);
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  padding: 3px 4px 3px 9px;
  gap: 6px;
  margin: 0;
}
#topbar .usd-banner.compact .usd-ic { font-size: 12px; }
#topbar .usd-banner.compact .usd-label { color: rgba(255,255,255,.80); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
#topbar .usd-banner.compact .usd-date { color: rgba(255,255,255,.72); font-size: 9px; }
#topbar .usd-banner.compact .usd-rate { color: #fff; font-size: 13px; font-weight: 700; }
#topbar .usd-banner.compact .usd-rate .usd-cur { color: rgba(255,255,255,.82); font-size: 11px; }
#topbar .usd-banner.compact .usd-refresh {
  width: 22px; height: 22px; font-size: 11px;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.30);
}
#topbar .usd-banner.usd-banner-empty {
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.20); box-shadow: none;
}
/* Курс ЦБ: развёрнутая плашка кликабельна (сворачивается), свёрнутый значок «ЦБ» */
#topbar .usd-banner.compact { cursor: pointer; }
#topbar .usd-banner.usd-collapsed {
  display: inline-flex; align-items: center; gap: 5px; width: auto; cursor: pointer;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  border-left: 3px solid var(--color-secondary);
  border-radius: 999px;
  color: #fff;
  padding: 3px 10px;
  font: inherit;
}
#topbar .usd-banner.usd-collapsed .usd-ic { font-size: 12px; }
#topbar .usd-banner.usd-collapsed .usd-cb { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
#topbar .usd-banner.usd-collapsed:active { transform: scale(.96); }
/* Анимация сворачивания/разворачивания плашки курса (складывается к правому краю) */
#topbar .usd-banner.usd-anim-out { animation: usdFoldOut .24s ease forwards; transform-origin: right center; }
#topbar .usd-banner.usd-anim-in { animation: usdFoldIn .32s cubic-bezier(.34,1.56,.64,1); transform-origin: right center; }
@keyframes usdFoldOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.82); } }
@keyframes usdFoldIn { 0% { opacity: 0; transform: scale(.82); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
#title { margin-top: 0; font-size: var(--font-warehouse-title); font-weight: 800; letter-spacing: -.01em; }
.title-row { display: flex; align-items: center; gap: 10px; margin-top: var(--space-md); }
.back-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  border: none; background: var(--color-secondary); color: var(--color-primary-dark);
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  cursor: pointer; line-height: 1; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.back-btn::before { content: '‹'; font-size: 20px; font-weight: 900; line-height: 1; margin-top: -2px; }
.back-btn:active { transform: scale(.95); box-shadow: 0 1px 5px rgba(0,0,0,.25); filter: brightness(.96); }
.back-btn.hidden { display: none; }

.badge {
  font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.25);
}
.badge.admin { background: var(--color-secondary); color: var(--color-primary-dark); border-color: transparent; }

#view { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.hidden { display: none !important; }

/* ===== Карточки складов ===== */
.wh-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-md);
  cursor: pointer;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-normal) ease;
}
.wh-card:active { transform: scale(.985); box-shadow: var(--shadow-lg); }
.wh-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.wh-name {
  font-size: var(--font-warehouse-title);
  font-weight: 750;
  color: var(--color-text-primary);
  letter-spacing: -.015em;
  line-height: 1.2;
}
/* По умолчанию — одна колонка на строку. Цифры всегда читаются целиком. */
.wh-mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.wh-mini .cell {
  background: var(--color-background);
  border-radius: var(--radius-md);
  padding: 10px var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wh-mini .cell:nth-child(2) { border-left-color: var(--color-secondary); }
.wh-mini .cell:nth-child(3) { border-left-color: var(--color-success); }
/* Правая часть строки: число-чип, под ним единицы (кип/мешки). Чип не наезжает на
   подпись слева даже при больших числах — они в разных колонках грид-а. */
.wh-mini .cell-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.wh-mini .cell .label { min-width: 0; }
/* Каждый продукт — цифра в СОБСТВЕННОМ цветном «чипе» + лёгкий тон строки, чтобы
   цифры читались сразу (для слабого зрения). Хлопок — зелёный, Пряжа — синий, Угар — золотой. */
.wh-mini .cell .val { justify-self: end; padding: 5px 12px; border-radius: 10px; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wh-mini .cell-cotton { background: #EAF6EF; border-color: #C7E7D3; border-left-color: #1E9E5A; }
.wh-mini .cell-cotton .val { background: #1E9E5A; }
.wh-mini .cell-yarn { background: #EAF1FD; border-color: #CBDCF7; border-left-color: #2563EB; }
.wh-mini .cell-yarn .val { background: #2563EB; }
.wh-mini .cell-ugar { background: #FBF2DC; border-color: #ECD9AC; border-left-color: #C39A3E; }
.wh-mini .cell-ugar .val { background: #B7860F; }
html[data-theme="dark"] .wh-mini .cell-cotton { background: rgba(30,158,90,.14); border-color: rgba(30,158,90,.32); }
html[data-theme="dark"] .wh-mini .cell-yarn { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.34); }
html[data-theme="dark"] .wh-mini .cell-ugar { background: rgba(195,154,62,.16); border-color: rgba(195,154,62,.34); }
html[data-theme="dark"] .wh-mini .cell-cotton .val { background: #22a05c; }
html[data-theme="dark"] .wh-mini .cell-yarn .val { background: #3b82f6; }
html[data-theme="dark"] .wh-mini .cell-ugar .val { background: #b7860f; }
.wh-mini .cell .label {
  font-size: 17px;
  color: var(--color-text-primary);
  font-weight: 800;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.wh-mini .cell .val {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: keep-all;
  white-space: nowrap;
  min-width: 0;
}
.wh-mini .cell .sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  text-align: right;
}
/* На широких экранах (планшет/десктоп) — снова три колонки. */
@media (min-width: 640px) {
  .wh-mini { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .wh-mini .cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
    gap: 4px;
  }
  .wh-mini .cell-fig { align-items: flex-start; }
  .wh-mini .cell .val { text-align: left; font-size: 22px; }
  .wh-mini .cell .sub { text-align: left; }
}

/* ===== Кнопки ===== */
.btn {
  border: none; border-radius: var(--radius-md);
  padding: 12px 16px; font-size: var(--font-body); font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-ghost { background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); }
.btn-danger { background: rgba(212,58,44,.12); color: var(--color-danger); }
.btn-gold { background: linear-gradient(135deg, #D4AF37, #C39A3E); color: #3a2a08; box-shadow: 0 4px 12px rgba(195,154,62,.32); }
.btn-sm { padding: 8px 12px; font-size: var(--font-caption); border-radius: var(--radius-sm); }
.btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.btn-block { width: 100%; }

/* Большие цветные кнопки операций (по data-act, без правок логики) */
.btn-row .btn[data-act] { flex: 1 1 0; min-width: 92px; padding: 13px 10px; font-size: var(--font-body); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.btn[data-act="income"] { background: var(--color-success); color: #fff; }
.btn[data-act="expense"] { background: var(--color-danger); color: #fff; }
.btn[data-act="opening"] { background: var(--color-secondary); color: var(--color-primary-dark); }

.icon-btn { background: none; border: none; color: var(--color-danger); font-size: var(--font-caption); font-weight: 700; cursor: pointer; padding: 4px 6px; }
.icon-btn.edit { color: var(--color-primary); }

/* ===== Вкладки товаров ===== */
.tabs { display: flex; background: var(--secondary-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 6px; gap: 6px; box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
/* Каждая вкладка — отдельная «пилюля» с рамкой, чтобы сразу читалась как отдельный
   раздел. Активная — фирменная бордовая заливка. */
.tab { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; text-align: center; padding: 15px 6px; min-height: 24px; border-radius: var(--radius-md); font-weight: 800; font-size: 15.5px; color: var(--color-text-primary); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); cursor: pointer; transition: all var(--transition-normal) ease; white-space: nowrap; }
.tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: var(--shadow-md); }

/* ===== Карточки остатков ===== */
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.stat-row.triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* На телефоне три плашки в строку жмутся и третья (Угар) уезжает за край.
   Складываем в столбик и делаем все три плашки одинаковыми. */
@media (max-width: 700px) {
  .stat-row.triple { grid-template-columns: 1fr; gap: 8px; }
  /* Сбрасываем «парадный» border первой плашки в triple — все равные. */
  .stat-row.triple .stat {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: 12px var(--space-lg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
  }
  .stat-row.triple .stat:nth-child(1) { border-left-color: var(--color-secondary); }
  .stat-row.triple .stat:nth-child(2) { border-left-color: var(--color-primary); }
  .stat-row.triple .stat:nth-child(3) { border-left-color: var(--color-success); }
  .stat-row.triple .stat .label {
    margin: 0;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .07em;
  }
  .stat-row.triple .stat .kg {
    margin: 0;
    text-align: right;
    font-size: 22px;
    white-space: nowrap;
    line-height: 1.1;
  }
  .stat-row.triple .stat .units {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .stat-row.triple .stat { grid-template-columns: minmax(95px, auto) 1fr auto; padding: 10px var(--space-md); gap: 10px; }
  .stat-row.triple .stat .kg { font-size: 20px; }
}
/* ===== Дашборд: компактные KPI-карточки итогов в ряд (главный экран) ===== */
.stat-row.triple.dash { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-row.triple.dash .stat {
  display: block;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.stat-row.triple.dash .stat:nth-child(1) { border-top-color: var(--color-secondary); }
.stat-row.triple.dash .stat:nth-child(2) { border-top-color: var(--color-primary); }
.stat-row.triple.dash .stat:nth-child(3) { border-top-color: var(--color-success); }
.stat-row.triple.dash .stat .label { margin: 0; font-size: 10px; letter-spacing: .03em; white-space: nowrap; text-align: center; }
.stat-row.triple.dash .stat .kg { margin-top: 4px; font-size: 16px; font-size: clamp(11px, 3.4vw, 20px); white-space: nowrap; text-align: center; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stat-row.triple.dash .stat .units { margin: 2px 0 0; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }

.stat { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.stat:first-child { box-shadow: var(--shadow-lg); border: 2px solid var(--color-secondary); }
.stat .label {
  font-size: var(--font-caption);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  line-height: 1.2;
}
.stat .kg {
  /* Крупные суммы (7 знаков, «1 565 773 кг») не влезали в половину карточки при
     фиксированных 32px и обрезались/переносились. clamp — число комфортно
     ужимается под ширину, а неразрывный пробел (groupInt) не даёт ломать цифры. */
  font-size: clamp(19px, 5.8vw, 32px);
  font-weight: 800;
  margin-top: var(--space-sm);
  letter-spacing: -.025em;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  word-break: keep-all;
}
.stat .units {
  font-size: var(--font-body);
  color: var(--color-text-secondary);
  margin-top: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.section-title { font-size: var(--font-section-title); font-weight: 800; color: var(--color-primary); letter-spacing: -.01em; margin: var(--space-sm) 2px 0; }

/* ===== Раздел ПТЗ · «Остатки ПТЗ» (компактная таблица остатков) ===== */
.ptz-hero { text-align: center; margin: 6px 0 12px; }
.ptz-hero-title { font-size: 27px; font-weight: 800; color: var(--color-primary); letter-spacing: -.01em; line-height: 1.1; }
.ptz-hero-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
.ptz-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 2px 8px; }
.ptz-table { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ptz-thead, .ptz-row, .ptz-total { display: grid; grid-template-columns: 1fr 86px 86px; gap: 6px; align-items: center; padding: 12px 13px; }
.ptz-table.adm .ptz-thead, .ptz-table.adm .ptz-row, .ptz-table.adm .ptz-total { grid-template-columns: 1fr 76px 76px 32px; }
.ptz-thead { background: rgba(110, 22, 32, .05); }
.ptz-thead > div { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-secondary); }
.ptz-thead .ptz-col { text-align: right; }
.ptz-row { border-top: 1px solid var(--color-border); cursor: pointer; transition: background var(--transition-fast); }
.ptz-row:active { background: rgba(110, 22, 32, .05); }
.ptz-name { min-width: 0; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptz-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; color: var(--color-text-primary); }
.ptz-col .v { font-weight: 700; color: var(--color-primary); }
.ptz-col.cond { color: var(--color-text-primary); font-weight: 600; }
.ptz-total { border-top: 2px solid var(--color-secondary); background: rgba(195, 154, 62, .12); }
.ptz-total .ptz-name { font-weight: 800; color: var(--color-primary); }
.ptz-total .ptz-col .v { font-weight: 800; }
.ptz-total .ptz-col.cond { color: var(--color-text-primary); font-weight: 700; }
.ptz-edit { border: none; background: rgba(110, 22, 32, .07); color: var(--color-primary); font-size: 15px; line-height: 1; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; justify-self: end; }
.ptz-edit:active { background: rgba(110, 22, 32, .16); transform: scale(.92); }
.ptz-hint { font-size: 12px; color: var(--color-text-secondary); text-align: center; margin: 10px 8px 0; line-height: 1.45; }

/* Карточка завода ПТЗ на главном — как склад, но выделенная (золотая рамка + бейдж «ЗАВОД») */
.ptz-wh-card { border: 2px solid var(--color-secondary); background: linear-gradient(180deg, rgba(195, 154, 62, .12), var(--color-surface) 55%); box-shadow: var(--shadow-md); }
.wh-avatar.ptz-av { background: linear-gradient(135deg, var(--color-primary), #97202d); color: #fff; font-size: 20px; }
.ptz-hub-card { border-left: 4px solid var(--color-secondary); }
.ptz-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--color-secondary); color: #3a2c08; font-size: 10px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }

/* ===== Таблицы движения ===== */
.table-wrap { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); overflow-x: auto; }
table.ledger { border-collapse: collapse; width: 100%; min-width: 560px; }
table.ledger th, table.ledger td { padding: 12px 14px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
table.ledger th { font-size: 11px; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; font-weight: 800; background: rgba(110,22,32,.04); }
table.ledger td:first-child, table.ledger th:first-child { text-align: left; position: sticky; left: 0; background: var(--color-surface); }
table.ledger th:first-child { background: rgba(110,22,32,.04); }
table.ledger .num { font-weight: 750; font-size: 15px; color: var(--color-text-primary); letter-spacing: -.01em; }
table.ledger .sub { font-size: 12px; color: var(--color-text-secondary); font-weight: 600; }
table.ledger tr:last-child td { border-bottom: none; }
table.ledger .end .num { color: var(--color-primary); font-weight: 850; }
/* Строка «Итого / Жами» — жирная, выделенная, с верхней линией. */
table.ledger tfoot .ledger-total td { background: rgba(110,22,32,.06); border-top: 2px solid var(--color-primary); border-bottom: none; }
table.ledger tfoot .ledger-total td:first-child { background: rgba(110,22,32,.06); }
table.ledger tfoot .ledger-total .num { font-weight: 850; color: var(--color-primary); }
table.ledger tfoot .ledger-total .sub { font-weight: 750; }
html[data-theme="dark"] table.ledger tfoot .ledger-total td, html[data-theme="dark"] table.ledger tfoot .ledger-total td:first-child { background: rgba(234,217,168,.10); }

/* ===== Список операций (карточки с цветной полосой) ===== */
.op {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.op:has(.op-kind.income) { border-left-color: var(--color-success); }
.op:has(.op-kind.expense) { border-left-color: var(--color-danger); }
.op:has(.op-kind.return) { border-left-color: #2563EB; }
.op:has(.op-kind.opening) { border-left-color: var(--color-secondary); }
.op-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.op-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.op-kind.income { color: var(--color-success); }
.op-kind.expense { color: var(--color-danger); }
.op-kind.return { color: #2563EB; }
.op-kind.opening { color: var(--color-secondary); }
.op-kind.move { color: var(--color-secondary); }
.op:has(.op-kind.move) { border-left-color: var(--color-secondary); }
.op-val { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--color-text-primary); letter-spacing: -.015em; line-height: 1.2; }
.op-meta { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; line-height: 1.35; }
.op-meta.neg { color: #C0341D; font-weight: 700; }
.op-actions { display: flex; gap: var(--space-xs); flex-shrink: 0; }

.empty { text-align: center; color: var(--color-text-secondary); padding: 28px 12px; font-size: var(--font-body); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }

/* ===== Модалка ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(27,31,36,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.modal { background: var(--color-surface); width: 100%; max-width: 720px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: calc(var(--space-lg) + 6px) var(--space-lg) calc(var(--space-xl) + var(--safe-bottom)); max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: slideup .34s cubic-bezier(.2,.8,.2,1) both; border-top: 3px solid var(--color-secondary); }
/* Bottom-sheet: выезд снизу целиком (как нативный лист) */
@keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Ручка-грабер вверху листа */
.modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--color-text-secondary) 40%, transparent); margin: 0 auto 12px; }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } #bottom-nav { animation: none; } .bn-item .bn-ic { transition: none; } }
.modal h3 { margin: 0 0 var(--space-lg); font-size: 19px; color: var(--color-primary); }
.field { margin-bottom: var(--space-md); }
.field label { display: block; font-size: var(--font-caption); color: var(--color-text-secondary); margin-bottom: var(--space-xs); font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-primary); font-size: 16px; font-family: inherit; box-sizing: border-box; }
.field textarea { resize: vertical; min-height: 62px; line-height: 1.4; display: block; }
.field input:disabled { opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-secondary); border-color: transparent; }
.field label .fopt { font-weight: 600; font-style: italic; color: var(--color-text-secondary); opacity: .85; }
/* Оверлей на input[type=date]: на iOS системный пикер рисует значение локалью телефона
   («10 сент. 2026 г.») — не совпадает с форматом дат по всему приложению (ДД.ММ.ГГГГ).
   Сам input остаётся кликабельным (открывает нативный пикер), его текст скрыт (color:
   transparent — на пиктограмму пикера в Chrome/Android это не влияет), поверх — свой
   текст в привычном формате (enhanceDateInputs() в app.js). */
.date-wrap { position: relative; display: inline-block; }
.date-wrap input[type="date"] { color: transparent; }
.date-disp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: inherit; font-size: 16px; color: var(--color-text-primary); white-space: nowrap; }
.field .date-wrap, .ds-cbar-date .date-wrap { display: block; width: 100%; }
.ds-cbar-date .date-disp { justify-content: flex-start; padding-left: 10px; font-size: 15px; font-weight: 800; color: #fff; }
.svod-bar .date-wrap { flex: 0 0 auto; }
.svod-bar .date-disp { font-size: 15px; }
.modal-actions { display: flex; gap: var(--space-md); margin-top: var(--space-sm); }
.modal-actions .btn { flex: 1; }

/* ===== Тост ===== */
.toast { position: fixed; bottom: calc(22px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: var(--font-body); font-weight: 700; z-index: 30; box-shadow: var(--shadow-lg); }

.muted { color: var(--color-text-secondary); }
.center { text-align: center; }

/* ===== Иконки ===== */
.ic { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.btn-row .btn[data-act] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-row .btn[data-act] .ic { width: 17px; height: 17px; }

.cell .label { display: flex; align-items: center; gap: 6px; }
.cell-ic { display: inline-flex; }
.cell-ic .ic { width: 15px; height: 15px; }
.cell-ic.cotton { color: var(--color-primary); }
.cell-ic.yarn { color: var(--color-secondary); }
.cell-ic.ugar { color: #6B7280; }

.op-ic { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.op-ic .ic { width: 18px; height: 18px; }
.op-ic.income { background: rgba(30,158,90,.12); color: var(--color-success); }
.op-ic.expense { background: rgba(212,58,44,.12); color: var(--color-danger); }
.op-ic.return { background: rgba(37,99,235,.12); color: #2563EB; }
.op-ic.opening { background: rgba(195,154,62,.18); color: var(--color-secondary); }

.updated { font-size: var(--font-caption); color: var(--color-text-secondary); text-align: right; margin: -2px 2px 0; }

/* ===== Движение по датам (карточки) ===== */
.datecard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.datecard-head { background: rgba(110,22,32,.05); color: var(--color-primary); font-weight: 800; font-size: var(--font-body); padding: 10px var(--space-lg); border-bottom: 1px solid var(--color-border); }
.datecard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border); }
.dc { background: var(--color-surface); padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 3px; }
.dc span { font-size: 12px; color: var(--color-text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dc b { font-size: 19px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.015em; line-height: 1.15; }
.dc i { font-size: var(--font-caption); color: var(--color-text-secondary); font-style: normal; font-variant-numeric: tabular-nums; font-weight: 600; }
.dc.in b { color: var(--color-success); }
.dc.out b { color: var(--color-danger); }
.dc.end { background: rgba(195,154,62,.08); }
.dc.end b { color: var(--color-primary); }

/* Карточки дней внутри сгруппированного по месяцам «Движение по датам». */
.month-body .datecard { margin-bottom: 8px; }

/* Отметка «Сегодня расхода не было» */
.noexp-note { margin: 2px 0 10px; font-size: 13px; color: #1E7A44; background: #e7f6ec; border-radius: 10px; padding: 8px 12px; }
.noexp-undo { background: none; border: none; color: var(--color-primary); font-weight: 700; cursor: pointer; padding: 0 2px; font-size: 13px; }
html[data-theme="dark"] .noexp-note { color: #6fdc97; background: rgba(46,166,106,.14); }

/* Приход/Расход — цветовое разделение, чтобы не путать (зелёный = на склад, красный = со склада) */
.btn-income { background: #2EA66A; color: #fff; border-color: #2EA66A; }
.btn-expense { background: #D2452E; color: #fff; border-color: #D2452E; }
.btn-return {
  background: #2563EB; color: #fff; border-color: #1d4ed8;
  font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 3px 12px rgba(37,99,235,.5), inset 0 0 0 1px rgba(255,255,255,.18);
  animation: retPulse 2.4s ease-in-out infinite;
}
.btn-return span { font-weight: 800; }
.btn-income svg, .btn-expense svg, .btn-return svg { stroke: #fff; }
/* Иконка «отматывается» назад — сразу читается как ВОЗВРАТ. */
.btn-return .ic { transform-origin: 50% 50%; animation: retSpin 2.4s ease-in-out infinite; }
@keyframes retSpin {
  0%, 55%, 100% { transform: translateX(0) rotate(0deg); }
  22%           { transform: translateX(-4px) rotate(-40deg); }
  38%           { transform: translateX(-1px) rotate(-8deg); }
}
@keyframes retPulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(37,99,235,.5), inset 0 0 0 1px rgba(255,255,255,.18); }
  50%      { box-shadow: 0 4px 18px rgba(37,99,235,.75), inset 0 0 0 1px rgba(255,255,255,.28); }
}
/* Облегчённый режим и «уменьшить движение» — без анимаций. */
html.lite .btn-return, html.lite .btn-return .ic { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn-return, .btn-return .ic { animation: none; } }
/* «Яркие карточки»: шапка операции — насыщенный цветной градиент (Приход=бордо,
   Расход=красный, Перемещение/возврат=бирюза, Остаток=золото), белый текст. */
.mv-head { border-radius: 14px; padding: 13px 15px; margin: 0 0 14px; color: #fff; box-shadow: 0 6px 16px rgba(60,15,30,.18); }
.mv-head-t { font-weight: 800; font-size: 17px; }
.mv-head-s { font-size: 12px; margin-top: 3px; opacity: .9; }
.mv-head.mv-in { background: linear-gradient(135deg, #8A1526, #550D18); color: #fff; }
.mv-head.mv-out { background: linear-gradient(135deg, #D8455F, #A31D33); color: #fff; }
.mv-head.mv-ret { background: linear-gradient(135deg, #22A79C, #12938A); color: #fff; }
.mv-head.mv-mv { background: linear-gradient(135deg, #22A79C, #0E7C74); color: #fff; }
.mv-head.mv-open { background: linear-gradient(135deg, #D89A2E, #B7791F); color: #fff; }
.mv-preview { background: var(--color-background, #f3f4f6); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin-bottom: 10px; }
.mv-preview .mv-in { color: #1E7A44; }
.mv-preview .mv-out { color: #C0341D; }
.mv-arrow { opacity: .55; margin: 0 3px; }
.mv-sub { font-size: 12px; color: var(--color-text-secondary); }
.mv-warn { color: #C0341D; }
/* Проверка ввода движения: предупреждение «проверьте данные» + кнопка подтверждения */
.mv-check {
  background: #fdecea; border: 1px solid #f0b4ab; border-left: 4px solid #C0341D;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; color: #8a2417;
  animation: mvCheckIn .2s ease;
}
.mv-check-h { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.mv-check-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.mv-check-foot { font-size: 12px; margin-top: 6px; opacity: .85; }
.btn.btn-warn { background: #C0341D; color: #fff; }
.btn.btn-warn:active { background: #a32a16; }
@keyframes mvCheckIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ==== Окно подтверждения операции (крупная карточка) ==== */
.mvc { display: flex; flex-direction: column; gap: 12px; }
.mvc-head { padding: 14px 16px; border-radius: 14px; color: #fff; }
.mvc-head.in { background: linear-gradient(120deg, #8A1526, #550D18); }
.mvc-head.out { background: linear-gradient(120deg, #D8455F, #A31D33); }
.mvc-head .t { font-weight: 800; font-size: 17px; }
.mvc-head .s { font-size: 12.5px; opacity: .92; margin-top: 3px; }
.mvc-who { font-size: 13.5px; color: var(--color-text-secondary); }
.mvc-who b { color: var(--color-text-primary); }
.mvc-pos { font-weight: 800; font-size: 15.5px; color: var(--color-primary); }
.mvc-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mvc-figs.one { grid-template-columns: 1fr; }
.mvc-fig { background: var(--secondary-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 11px 13px; }
.mvc-fig .k { font-size: 11.5px; color: var(--color-text-secondary); font-weight: 700; }
.mvc-fig .v { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.mvc-bal { background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 12px; padding: 11px 13px; text-align: center; font-size: 14px; }
.mvc-bal b { font-size: 18px; }
.mvc-bal .arw { color: var(--color-secondary, #C39A3E); font-weight: 800; margin: 0 7px; }
.mvc-bal .aft-in { color: #1E7A44; }
.mvc-bal .aft-out { color: #C0341D; }
.mvc-neg { text-align: center; font-weight: 800; color: #C0341D; font-size: 14px; }
.mvc-warn { background: #fdecea; border: 1px solid #f0b4ab; border-radius: 12px; padding: 10px 12px; }
.mvc-warn .wh { font-weight: 800; color: #C0341D; font-size: 13.5px; }
.mvc-warn ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #8a2417; }
.mvc-actions { display: flex; gap: 9px; margin-top: 2px; }
.mvc-actions .btn { flex: 1; padding: 14px; font-size: 15.5px; font-weight: 800; }
.mvc-actions .btn-edit { flex: 0 0 42%; }
html[data-theme="dark"] .mvc-warn { background: rgba(210,69,46,.16); border-color: rgba(210,69,46,.5); }
html[data-theme="dark"] .mvc-warn ul { color: #f3a08f; }
html[data-theme="dark"] .mv-check { background: rgba(210,69,46,.16); border-color: rgba(210,69,46,.5); color: #f3a08f; }
/* Тёмная тема: шапки остаются градиентными (белый текст читается на обоих фонах) */
html[data-theme="dark"] .mv-head.mv-in { background: linear-gradient(135deg, #8A1526, #550D18); color: #fff; }
html[data-theme="dark"] .mv-head.mv-out { background: linear-gradient(135deg, #D8455F, #A31D33); color: #fff; }
html[data-theme="dark"] .mv-head.mv-ret { background: linear-gradient(135deg, #22A79C, #12938A); color: #fff; }
html[data-theme="dark"] .mv-head.mv-mv { background: linear-gradient(135deg, #22A79C, #0E7C74); color: #fff; }
/* Крупное поле веса — главный ввод операции */
#m-kg, #t-kg { font-size: 22px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* Аналитика · KPI-герой выработки («Яркие карточки») */
.prod-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 16px; margin: 6px 0 14px;
  color: #fff; background: linear-gradient(145deg, #8A1526, #550D18); box-shadow: 0 8px 22px rgba(60,15,30,.20); }
.prod-hero::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(233,200,107,.12); }
.prod-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.prod-hero-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #E9C86B; }
.prod-hero-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.prod-hero-badge { flex: none; font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.prod-hero-badge.up { background: rgba(143,227,180,.22); color: #8FE3B4; }
.prod-hero-badge.down { background: rgba(255,180,180,.20); color: #FFC2C2; }
.prod-hero-spark { display: block; width: 100%; height: 34px; margin: 8px 0 6px; position: relative; z-index: 1; }
.prod-hero-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: rgba(255,255,255,.8); position: relative; z-index: 1; }
.prod-hero-row b { color: #fff; font-weight: 800; }

/* Единый акцент заголовков разделов на всех экранах: короткая золото→бордо
   полоска перед текстом (кроме сворачиваемых summary в Настройках — там свой вид). */
.section-title:not(summary)::before,
.sum-title::before {
  content: ""; display: inline-block; width: 4px; height: 14px; border-radius: 3px;
  background: linear-gradient(var(--color-secondary, #C39A3E), var(--color-primary, #550D18));
  vertical-align: -2px; margin-right: 8px;
}
/* Пустые состояния — мягче и «премиальнее» */
html.premium .empty {
  border-style: solid; border-color: var(--color-border); background: var(--color-surface);
  border-radius: 18px; padding: 32px 18px; box-shadow: var(--shadow-sm); line-height: 1.55;
}
/* Прайс-лист: карточки (КП и позиции пряжи) всплывают над матовым фоном */
.pk-card, .pk-lc { box-shadow: 0 1px 2px rgba(45,10,20,.05), 0 8px 20px rgba(45,10,20,.07); }
html[data-theme="dark"] .pk-card, html[data-theme="dark"] .pk-lc { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.28); }
.pk-lc:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(45,10,20,.07), 0 14px 30px rgba(45,10,20,.11); }
html.lite .pk-card, html.lite .pk-lc { box-shadow: var(--shadow-sm); }
html.lite .pk-lc:hover { transform: none; }

/* Пилюля страны контракта: настоящий флаг (SVG) + название */
.cty-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--color-secondary-soft, #f6efda);
  border: 1px solid color-mix(in srgb, var(--color-secondary, #C39A3E) 34%, transparent); border-radius: 999px;
  padding: 3px 11px 3px 5px; font-size: 12.5px; font-weight: 800; color: var(--color-primary-dark, #4a0e16); line-height: 1; }
.cty-fl { width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.25); display: block; flex: none; }
.cty-emoji { font-size: 15px; line-height: 1; }
.cty-nm { white-space: nowrap; }
.exp-cty-row { margin: 6px 0 2px; }
.xhero-cty { margin: 7px 0 2px; }
.xhero-cty .cty-pill { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.30); color: #fff; }
html[data-theme="dark"] .cty-pill { background: color-mix(in srgb, var(--color-secondary, #C39A3E) 18%, transparent); color: var(--color-secondary, #E0BD5C); }
html[data-theme="dark"] .mv-preview { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .mv-preview .mv-in { color: #6fdc97; }
html[data-theme="dark"] .mv-preview .mv-out { color: #f3a08f; }

/* Упаковка пряжи: карточка позиции + интерактивная цепочка бобина→мешок→машина→контейнер */
.pk-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.pk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pk-name { font-weight: 800; font-size: 16px; color: var(--color-primary-dark, #4a0e16); }
.pk-stock { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.pk-flow { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pk-step { flex: 1 0 92px; min-width: 92px; text-align: center; background: var(--color-secondary-soft, #f6efda); border-radius: 10px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; }
.pk-ic { font-size: 22px; line-height: 1; }
.pk-pic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.pk-svg { width: 46px; height: 46px; display: block; }
.pk-lbl { font-size: 11.5px; font-weight: 700; color: var(--color-primary-dark, #4a0e16); margin: 3px 0 0; }
.pk-desc { font-size: 9.5px; color: var(--color-text-secondary); line-height: 1.15; margin: 1px 0 3px; }
.pk-val { font-size: 12.5px; font-weight: 700; color: var(--color-primary-dark, #4a0e16); line-height: 1.25; margin-top: auto; }
.pk-arrow { align-self: center; color: var(--color-secondary, #C39A3E); font-weight: 800; }
.pk-stockinfo { margin-top: 8px; font-size: 12.5px; color: var(--color-text-secondary); }
.pk-stockinfo b { color: var(--color-primary, #6E1620); }
.pk-form { margin-top: 12px; }
.pk-form .field { margin-bottom: 8px; }
/* Компактная карточка позиции в списке */
.pk-lc { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: transform .08s ease, box-shadow .15s ease; }
.pk-lc:active { transform: scale(.99); }
.pk-lc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pk-lc-name { font-weight: 800; font-size: 16px; color: var(--color-primary-dark, #4a0e16); }
.pk-lc-stock { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.pk-lc-sum { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 6px; font-size: 12.5px; color: var(--color-text-primary); }
.pk-lc-empty { margin-top: 6px; font-size: 12.5px; color: var(--color-text-secondary); }
.pk-lc-go { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--color-secondary, #C39A3E); text-align: right; }
/* Вертикальная цепочка упаковки — всё видно сразу, без прокрутки вбок.
   Фон строки кремовый (--color-secondary-soft) в обеих темах → текст всегда тёмный. */
.pk-chainwrap { margin: 4px 0 2px; }
.pk-chain { display: flex; flex-direction: column; gap: 0; }
.pk-row { display: flex; align-items: center; gap: 12px; background: var(--color-secondary-soft, #E7D6A8); border-radius: 12px; padding: 9px 12px; }
.pk-row .pk-pic { width: 50px; height: 50px; flex: none; }
.pk-row .pk-svg { width: 50px; height: 50px; }
.pk-rtext { flex: 1 1 auto; min-width: 0; }
.pk-rtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pk-rlbl { font-weight: 800; font-size: 15px; color: #500F17; }
.pk-rprimary { flex: none; font-weight: 800; font-size: 14px; color: #6E1620; white-space: nowrap; }
.pk-rdesc { font-size: 11px; color: #8a7140; line-height: 1.2; margin-top: 1px; }
.pk-rcalc { font-size: 12.5px; font-weight: 700; color: #500F17; line-height: 1.25; margin-top: 2px; }
.pk-dash { color: #9a8458; }
.pk-conn { text-align: center; color: var(--color-secondary, #C39A3E); font-size: 16px; font-weight: 800; line-height: 1; padding: 3px 0; }
/* Тёмная тема: названия на тёмной поверхности карточки делаем светло-золотыми */
html[data-theme="dark"] .pk-lc-name,
html[data-theme="dark"] .pk-name { color: #EAD9A8; }
html[data-theme="dark"] .pk-stockinfo b { color: var(--color-secondary, #C39A3E); }

/* Подсказка-инструкция для новичка в фильтре аналитики пряжи */
.ya-hint { background: var(--color-secondary-soft, #f6efda); border-radius: 12px; padding: 11px 13px; margin: 8px 0 12px; }
.ya-hint-title { font-weight: 700; color: var(--color-primary, #6E1620); font-size: 14px; margin-bottom: 3px; }
.ya-hint-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.45; }
.mode-tab {
  background: transparent;
  border: 0;
  padding: 10px 8px;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mode-tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  margin: 8px 0 12px;
}
.number-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-weight: 700;
  font-size: var(--font-body);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  text-align: center;
}
.number-chip input { position: absolute; opacity: 0; pointer-events: none; }
.number-chip.on {
  border-color: var(--color-primary);
  background: rgba(110,22,32,.06);
  color: var(--color-primary);
}
.number-chip.on::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 800;
}

.analytics-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px var(--space-lg);
  margin-bottom: 10px;
}
.analytics-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.analytics-card .ya-num {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -.01em;
}
.analytics-card .ya-factories {
  font-size: var(--font-caption);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.analytics-metric {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--color-success);
  text-align: left;
}
.analytics-card.ya-grand {
  background: linear-gradient(180deg, rgba(195,154,62,.12), rgba(195,154,62,.04));
  border-color: var(--color-secondary);
}
.analytics-card.ya-grand .ya-num { color: var(--color-secondary); font-size: 14px; }
.analytics-card.ya-grand .ya-total {
  color: var(--color-primary);
  font-size: 38px;
  text-align: center;
}

.ya-wh-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ya-wh-row {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) minmax(80px, 2fr) auto auto;
  align-items: center;
  gap: 8px;
  font-size: var(--font-body);
}
.ya-wh-row.dim { opacity: .45; }
.ya-wh-name { font-weight: 600; color: var(--color-text-primary); }
.ya-wh-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.ya-wh-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  border-radius: 999px;
  transition: width var(--transition-normal) ease;
}
.ya-wh-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: right;
  min-width: 80px;
}
.ya-wh-pct {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-caption);
  color: var(--color-text-secondary);
  min-width: 50px;
  text-align: right;
}

/* Поле поиска для аналитики */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 16px;
  box-sizing: border-box;
}
input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(110,22,32,.10);
}

@media (max-width: 360px) {
  .ya-wh-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name val' 'bar pct';
    row-gap: 4px;
  }
  .ya-wh-name { grid-area: name; }
  .ya-wh-bar  { grid-area: bar; }
  .ya-wh-val  { grid-area: val; }
  .ya-wh-pct  { grid-area: pct; }
}

/* ---------- Электроэнергия ---------- */
.el-rating { display: flex; flex-direction: column; gap: 10px; }
.el-rate-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
}
.el-rate-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.el-place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-caption);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.el-name { font-weight: 700; color: var(--color-text-primary); flex: 1; }
.el-dur {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  white-space: nowrap;
}
.el-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin: 7px 0 5px;
}
.el-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  border-radius: 999px;
  transition: width var(--transition-normal) ease;
}
.el-rate-meta { font-size: var(--font-caption); color: var(--color-text-secondary); }

/* График по дням */
.el-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding: 8px 4px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.el-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 8px;
  height: 100%;
}
.el-col-bar {
  width: 70%;
  min-height: 2px;
  background: var(--color-border);
  border-radius: 3px 3px 0 0;
  transition: height var(--transition-normal) ease;
}
.el-col-bar.on {
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
}
.el-col-day {
  margin-top: 3px;
  font-size: 9px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ===== Учёт энергии: Обзор / Потребление / Реактив / Солнечная станция ===== */
/* Крупные, явно «нажимаемые» вкладки-разделы электроэнергии: каждая — как отдельная
   карточка-кнопка (фон, рамка, тень), крупный шрифт; активная — фирменная бордовая. */
.el-subtabs { margin-bottom: 12px; flex-wrap: wrap; gap: 8px; background: transparent; padding: 0; }
.el-subtabs .seg-btn {
  flex: 1 1 44%;
  font-size: 15px;
  font-weight: 750;
  padding: 14px 10px;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.el-subtabs .seg-btn.on {
  background: var(--color-primary, #6E1620);
  color: #fff;
  border-color: var(--color-primary, #6E1620);
  box-shadow: 0 3px 11px rgba(110,22,32,.32);
}
.el-subtabs .seg-btn:active { transform: translateY(1px); }
@media (max-width: 420px) {
  .el-subtabs .seg-btn { font-size: 13.5px; padding: 13px 6px; }
}
/* Легенда обзора — простыми словами для первого захода */
.en-legend { background: var(--color-surface, #f4f4f6); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; }
.en-legend-t { font-weight: 800; color: var(--color-primary, #6E1620); margin-bottom: 8px; font-size: 14px; }
.en-legend-i { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; margin-bottom: 6px; color: var(--color-text); }
.en-legend-i:last-child { margin-bottom: 0; }
.en-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; margin-top: 3px; }
.en-dot.c-exp { background: #1565C0; }
.en-dot.c-gen { background: #C39A3E; }
.en-dot.c-give { background: #1E7A44; }
.en-dot.c-debt { background: #C0341D; }
/* Помесячные карточки обзора */
.en-ov-card { border: 1px solid var(--color-border); border-left: 6px solid var(--color-primary, #6E1620); border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 10px; background: var(--color-background); }
.en-ov-month { font-weight: 800; font-size: 16px; color: var(--color-primary-dark, #4a0e16); margin-bottom: 8px; }
.en-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.en-ov-cell { border-radius: 10px; padding: 8px 10px; border: 1px solid var(--color-border); background: var(--color-surface, #f4f4f6); }
.en-ov-cell .l { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.en-ov-cell .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.en-ov-cell .v .u { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.en-ov-cell.c-exp { background: rgba(21,101,192,.10); border-color: rgba(21,101,192,.30); }
.en-ov-cell.c-exp .v { color: #1565C0; }
.en-ov-cell.c-gen { background: rgba(195,154,62,.14); border-color: rgba(195,154,62,.34); }
.en-ov-cell.c-gen .v { color: #8a6300; }
.en-ov-cell.c-give { background: rgba(30,122,68,.10); border-color: rgba(30,122,68,.30); }
.en-ov-cell.c-give .v { color: #1E7A44; }
.en-ov-cell.c-debt { background: rgba(192,52,29,.11); border-color: rgba(192,52,29,.34); }
.en-ov-cell.c-debt .v { color: #C0341D; }
.en-ov-cell.c-ok { background: rgba(30,122,68,.10); border-color: rgba(30,122,68,.30); }
.en-ov-cell.c-ok .v { color: #1E7A44; }
html[data-theme="dark"] .en-ov-month { color: #EAD9A8; }
html[data-theme="dark"] .en-ov-cell { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .en-ov-cell.c-exp .v { color: #5FA8F0; }
html[data-theme="dark"] .en-ov-cell.c-gen .v { color: #E0BD5C; }
html[data-theme="dark"] .en-ov-cell.c-give .v, html[data-theme="dark"] .en-ov-cell.c-ok .v { color: #4FC17E; }
html[data-theme="dark"] .en-ov-cell.c-debt .v { color: #F0715A; }
/* Полная разбивка по фабрикам внутри карточки месяца */
.en-ov-det { margin-top: 10px; border-top: 1px dashed var(--color-border); padding-top: 8px; }
.en-ov-det > summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 13px; color: var(--color-primary, #6E1620); padding: 6px 8px; border-radius: 8px; background: rgba(110,22,32,.06); user-select: none; }
.en-ov-det > summary::-webkit-details-marker { display: none; }
.en-ov-det > summary::before { content: '▸ '; font-size: 11px; }
.en-ov-det[open] > summary::before { content: '▾ '; }
.en-ov-det > summary:hover { background: rgba(110,22,32,.11); }
.en-ov-sub { font-weight: 750; font-size: 12px; color: var(--color-text-secondary); margin: 10px 2px 4px; }
.tbl-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Внутри горизонтального скролла таблицы показывают числа ПОЛНОСТЬЮ (без обрезки),
   подстраивая ширину под содержимое; узкий экран — просто прокручивается вбок. */
.tbl-scroll .mrep-table { table-layout: auto; width: auto; min-width: 100%; }
.tbl-scroll .mrep-table th, .tbl-scroll .mrep-table td { overflow: visible; text-overflow: clip; padding-left: 8px; padding-right: 8px; }
.tbl-scroll .mrep-table th.nm, .tbl-scroll .mrep-table td.nm { width: auto; }
/* Аналитика энергии: дельты и горизонтальные бары */
.en-dl { font-weight: 800; font-size: 11px; white-space: nowrap; }
.en-dl.ok { color: #1E7A44; }
.en-dl.low { color: #C0341D; }
.en-bars { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 6px; }
.en-bar-row { display: grid; grid-template-columns: minmax(84px, 34%) 1fr auto; align-items: center; gap: 8px; }
.en-bar-lbl { font-size: 12.5px; font-weight: 750; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-bar-track { height: 16px; border-radius: 8px; background: rgba(128,128,128,.16); overflow: hidden; }
.en-bar-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, #8a1c2a, #6E1620); min-width: 4px; transition: width .3s ease; }
.en-bar-fill.best { background: linear-gradient(90deg, #E0BD5C, #C39A3E); }
.en-bar-fill.top { background: linear-gradient(90deg, #C0341D, #8a1c2a); }
.en-bar-val { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-secondary); }
html[data-theme="dark"] .en-dl.ok { color: #4FC17E; }
html[data-theme="dark"] .en-dl.low { color: #F0715A; }
/* Прогнозы */
.fc-intro { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); background: var(--color-surface, #f4f4f6); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.fc-hero { border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; background: linear-gradient(135deg, #6E1620, #8a1c2a); color: #fff; box-shadow: 0 6px 16px rgba(110,22,32,.26); }
.fc-hero-l { font-size: 12px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .3px; }
.fc-hero-v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fc-hero-v .u { font-size: 13px; font-weight: 600; opacity: .8; }
.fc-hero-sub { font-size: 12.5px; margin-top: 4px; opacity: .95; }
.fc-hero-sub b.low { color: #F4B0A2; } .fc-hero-sub b.ok { color: #A8E0BE; }
.fc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.fc-card { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--color-border); background: var(--color-surface, #f4f4f6); }
.fc-card .l { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.fc-card .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fc-card .v .u { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.fc-card .s { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 1px; }
.fc-card.fc-accent { grid-column: 1 / -1; background: var(--color-secondary-soft, #f6efda); border-color: rgba(195,154,62,.5); }
.fc-card.fc-accent .v { color: #8a6300; }
html[data-theme="dark"] .fc-card.fc-accent .v { color: #E0BD5C; }
html[data-theme="dark"] .en-ov-det > summary { color: #EAD9A8; background: rgba(255,255,255,.05); }
html[data-theme="dark"] .en-ov-det > summary:hover { background: rgba(255,255,255,.09); }

/* ===== Пользователи: свёрнутые карточки (имя + роль), раскрытие по клику ===== */
.user-head { cursor: pointer; align-items: center; }
.user-body { display: none; }
.user-card.open .user-body { display: block; margin-top: 6px; }
.user-chev { flex: none; align-self: center; font-size: 16px; color: var(--color-text-secondary); transition: transform .18s ease; }
.user-card.open .user-chev { transform: rotate(90deg); }
.urow-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: #6E7780; border-radius: 999px; padding: 1px 9px; vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.urow-badge-admin { background: var(--color-primary, #6E1620); }
.urow-badge-off { background: #b0b6bf; }

/* Итоговые карточки сверху */
.en-tot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.en-tot { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--color-border); background: var(--color-surface, #f4f4f6); }
.en-tot .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--color-text-secondary); }
.en-tot .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.en-tot .s { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.en-tot.en-t-grand { grid-column: 1 / -1; background: var(--color-secondary-soft, #f6efda); border-color: rgba(195,154,62,.5); }
.en-t-grid { background: rgba(21,101,192,.10); border-color: rgba(21,101,192,.30); }
.en-t-grid .v { color: #1565C0; }
.en-t-react { background: rgba(30,122,68,.10); border-color: rgba(30,122,68,.30); }
.en-t-react .v { color: #1E7A44; }
.en-t-pf { background: rgba(180,83,9,.10); border-color: rgba(180,83,9,.30); }
.en-t-pf .v { color: #B45309; }
html[data-theme="dark"] .en-t-pf { background: rgba(217,119,6,.16); }
html[data-theme="dark"] .en-t-pf .v { color: #E0913A; }
.en-t-grand .v { color: #8a6300; }
.en-t-solar { background: rgba(214,175,55,.16); border-color: rgba(214,175,55,.42); }
.en-t-solar .v { color: #8a6300; }
.en-t-debt { background: rgba(192,52,29,.11); border-color: rgba(192,52,29,.34); }
.en-t-debt .v { color: #C0341D; }
.en-t-ok { background: rgba(30,122,68,.10); border-color: rgba(30,122,68,.30); }
.en-t-ok .v { color: #1E7A44; }
/* Два счёта: государству и SOLAR ENERGIE + общий итог */
.en-pay2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 8px; }
.en-pay { border-radius: 14px; padding: 12px 14px; border: 1px solid var(--color-border); position: relative; overflow: hidden; }
.en-pay .pk { font-size: 12px; font-weight: 800; letter-spacing: .2px; }
.en-pay .pv { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; }
.en-pay .ps { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 2px; }
.en-pay-gov { background: rgba(21,101,192,.10); border-color: rgba(21,101,192,.32); }
.en-pay-gov .pk, .en-pay-gov .pv { color: #1565C0; }
.en-pay-solar { background: rgba(214,175,55,.16); border-color: rgba(214,175,55,.44); }
.en-pay-solar .pk, .en-pay-solar .pv { color: #8a6300; }
.en-paytot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px;
  padding: 13px 16px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #6E1620, #8a1c2a); box-shadow: 0 6px 16px rgba(110,22,32,.28); }
.en-paytot .l { font-size: 13px; font-weight: 800; }
.en-paytot .l em { font-style: normal; font-weight: 600; opacity: .85; font-size: 11.5px; }
.en-paytot .v { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; color: #F4D77A; white-space: nowrap; }
html[data-theme="dark"] .en-pay-gov .pk, html[data-theme="dark"] .en-pay-gov .pv { color: #5FA8F0; }
html[data-theme="dark"] .en-pay-solar .pk, html[data-theme="dark"] .en-pay-solar .pv { color: #E0BD5C; }
/* Карточка строки */
.en-card { border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--color-border); border-left: 5px solid var(--color-border); background: var(--color-background); }
.en-card.en-grid { border-left-color: #1565C0; background: rgba(21,101,192,.06); }
.en-card.en-solar { border-left-color: #D4AF37; background: rgba(214,175,55,.09); }
.en-card.en-react { border-left-color: #1E7A44; background: rgba(30,122,68,.06); }
.en-card.en-solar-card { border-left-color: #D4AF37; background: rgba(214,175,55,.10); }
.en-card.en-empty-card { background: var(--color-surface, #f4f4f6); opacity: .9; }
.en-head { display: flex; align-items: center; gap: 8px; }
.en-pt { font-weight: 800; font-size: 15px; color: var(--color-primary-dark, #4a0e16); }
.en-badge { font-size: 11px; font-weight: 700; color: #fff; background: #6E7780; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.en-grid .en-badge { background: #1565C0; }
.en-solar .en-badge, .en-solar-card .en-badge { background: #C39A3E; }
.en-react .en-badge { background: #1E7A44; }
.en-actions { margin-left: auto; display: flex; gap: 4px; }
.en-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; margin-top: 7px; }
.en-figs .f { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.en-figs .f .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--color-text-secondary); }
.en-figs .f .v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-figs .f-amt .v { color: var(--color-primary-dark, #4a0e16); }
.en-figs .f .v.neg { color: #C0341D; }
.en-figs .f .v.pos { color: #1E7A44; }
.en-note { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 6px; }
.en-solarprice { font-size: 13px; margin: 2px 2px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(214,175,55,.14); border: 1px solid rgba(214,175,55,.4); }
.en-solarprice b { color: #8a6300; }
.en-hint { font-size: 11.5px; margin-top: 4px; }
/* Тёмная тема */
html[data-theme="dark"] .en-pt { color: #EAD9A8; }
html[data-theme="dark"] .en-figs .f-amt .v { color: #EAD9A8; }
html[data-theme="dark"] .en-tot { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .en-t-grid { background: rgba(33,120,210,.16); }
html[data-theme="dark"] .en-t-grid .v { color: #5FA8F0; }
html[data-theme="dark"] .en-t-react, html[data-theme="dark"] .en-t-ok { background: rgba(46,160,90,.16); }
html[data-theme="dark"] .en-t-react .v, html[data-theme="dark"] .en-t-ok .v { color: #4FC17E; }
html[data-theme="dark"] .en-t-solar { background: rgba(214,175,55,.20); }
html[data-theme="dark"] .en-t-solar .v, html[data-theme="dark"] .en-t-grand .v, html[data-theme="dark"] .en-solarprice b { color: #E0BD5C; }
html[data-theme="dark"] .en-t-debt { background: rgba(210,70,50,.20); }
html[data-theme="dark"] .en-t-debt .v, html[data-theme="dark"] .en-figs .f .v.neg { color: #F0715A; }
html[data-theme="dark"] .en-figs .f .v.pos { color: #4FC17E; }
html[data-theme="dark"] .en-card.en-grid { background: rgba(33,120,210,.12); }
html[data-theme="dark"] .en-card.en-solar, html[data-theme="dark"] .en-card.en-solar-card { background: rgba(214,175,55,.13); }
html[data-theme="dark"] .en-card.en-react { background: rgba(46,160,90,.12); }

/* ===== Плашка курса USD ЦБ Узбекистана (главный экран сверху) ===== */
.usd-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-secondary);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xs);
}
.usd-banner .usd-ic {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.usd-banner .usd-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.usd-banner .usd-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-secondary-soft);
}
.usd-banner .usd-rate {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.usd-banner .usd-rate .usd-cur {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary-soft);
}
.usd-banner .usd-date {
  font-size: 11px;
  color: var(--color-secondary-soft);
  margin-top: 1px;
}
.usd-banner.usd-banner-empty {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.usd-banner.usd-banner-empty .usd-text {
  font-size: var(--font-body);
  font-weight: 600;
}
.usd-banner .usd-refresh {
  flex-shrink: 0;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.usd-banner .usd-refresh:active { transform: scale(.94); background: rgba(255,255,255,.32); }
.usd-banner .usd-refresh:disabled { opacity: .6; cursor: progress; }
.usd-banner.usd-banner-empty .usd-refresh {
  background: var(--color-background);
  color: var(--color-primary);
  border-color: var(--color-border);
}
.usd-banner .usd-refresh.spinning { animation: usd-spin 1s linear infinite; }
@keyframes usd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Компактный лёгкий чип курса ЦБ — для главного экрана (компактно и удобно). */
.usd-banner.compact {
  padding: 7px 12px;
  gap: 8px;
  background: var(--color-surface);
  background-image: none;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
}
.usd-banner.compact .usd-ic { font-size: 15px; filter: none; }
.usd-banner.compact .usd-text { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.usd-banner.compact .usd-label { align-self: center; color: var(--color-text-secondary); font-size: 10px; letter-spacing: .06em; }
.usd-banner.compact .usd-rate { font-size: 16px; color: var(--color-text-primary); }
.usd-banner.compact .usd-rate .usd-cur { color: var(--color-text-secondary); font-size: 12px; }
.usd-banner.compact .usd-date { color: var(--color-text-secondary); font-size: 11px; }
.usd-banner.compact .usd-refresh {
  width: 28px; height: 28px; font-size: 13px;
  background: var(--color-background);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

/* Курс ЦБ в шапке Прайс-листа: кнопка 🔄 и метка времени обновления */
.rate-op { display: flex; align-items: center; gap: var(--space-md); }
.rate-op .op-main { flex: 1; min-width: 0; }
.rate-op .rate-updated { color: var(--color-text-secondary); font-size: 11px; margin-top: 2px; }
.rate-refresh {
  flex-shrink: 0;
  background: var(--color-background);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.rate-refresh:active { transform: scale(.94); background: var(--color-secondary-soft); }
.rate-refresh:disabled { opacity: .6; cursor: progress; }
.rate-refresh.spinning { animation: usd-spin 1s linear infinite; }

/* ===== Аналитика пряжи: вкладки Остатки/Выработка + дашборд ===== */
.ya-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--color-border);
  padding: 6px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.ya-tab {
  background: transparent;
  border: 0;
  padding: 16px 12px;
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.ya-tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Лучшая фабрика месяца */
.best-factory {
  background: linear-gradient(135deg, rgba(195,154,62,.14), rgba(195,154,62,.04));
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  margin-bottom: 4px;
}
.best-factory.empty-best { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.best-head { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary); }
.best-name { font-size: 22px; font-weight: 800; color: var(--color-primary); margin-top: 4px; letter-spacing: -.01em; }
.best-metric { font-size: 30px; font-weight: 800; color: var(--color-text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.best-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; font-weight: 600; }

/* KPI карточки */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.kpi-card.wide { grid-column: 1 / -1; }
.kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.kpi-value { font-size: 20px; font-weight: 800; color: var(--color-text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.015em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value.pos { color: var(--color-success); }
.kpi-value.neg { color: var(--color-danger); }
.kpi-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; font-weight: 500; }

/* Бар-чарт по дням */
.daily-chart {
  display: grid;
  grid-template-columns: repeat(var(--day-cols, 31), 1fr);
  align-items: end;
  gap: 2px;
  height: 110px;
  padding: 6px 6px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.bar-col { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; min-width: 0; }
.bar-col .bar {
  flex: none;            /* высота задаётся inline-стилем и отражает выработку */
  width: 100%;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height var(--transition-normal) ease;
}
.bar-col.best .bar { background: linear-gradient(180deg, var(--color-secondary), #b08529); }
/* Цвет столбика по плану: зелёный — выполнен, красный — ниже плана */
.bar-col .bar.ok { background: linear-gradient(180deg, #36b37e, #1E7A44); }
.bar-col .bar.low { background: linear-gradient(180deg, #ef6f59, #C0341D); }
/* Дни без выработки — короткая нейтральная полоска */
.bar-col .bar.empty { background: var(--color-border, #e2e8f0); }
.bar-col .bar-label { font-size: 8px; color: var(--color-text-secondary); text-align: center; margin-top: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .daily-chart .bar-col .bar-label { display: none; } }

/* Рейтинг фабрик */
.factory-rank { display: flex; flex-direction: column; gap: 8px; }
.rank-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
}
.rank-place {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-background); color: var(--color-text-secondary);
  font-weight: 800; font-size: 14px;
  border: 1px solid var(--color-border);
}
.rank-place.gold   { background: var(--color-secondary); color: var(--color-primary-dark); border-color: transparent; }
.rank-place.silver { background: #C5CACF; color: #2A2D32; border-color: transparent; }
.rank-place.bronze { background: #C58A56; color: #fff; border-color: transparent; }
.rank-main { min-width: 0; }
.rank-name { font-weight: 700; color: var(--color-text-primary); font-size: 15px; }
.rank-bar { height: 8px; background: var(--color-border); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.rank-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); border-radius: 999px; transition: width var(--transition-normal) ease; }
.rank-right { text-align: right; min-width: 80px; }
.rank-kg { font-size: 15px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.rank-pct { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Тренд за 6 месяцев */
.trend-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 6px 4px;
  box-shadow: var(--shadow-sm);
}
.trend-svg { width: 100%; height: 96px; display: block; }
.trend-line { stroke: var(--color-primary); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.trend-area { fill: rgba(110,22,32,.10); }
.trend-dots circle { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 2; }
.trend-labels { display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 6px; font-size: 10px; color: var(--color-text-secondary); text-transform: capitalize; text-align: center; font-weight: 600; }

/* Топ номеров */
.top-numbers { display: flex; flex-direction: column; gap: 6px; }
.topnum-row {
  display: grid;
  grid-template-columns: minmax(78px, auto) 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.topnum-name { font-weight: 700; color: var(--color-primary); font-size: 14px; white-space: nowrap; }
.topnum-bar { height: 8px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.topnum-fill { height: 100%; background: linear-gradient(90deg, var(--color-success), var(--color-secondary)); border-radius: 999px; }
.topnum-kg { font-size: 13px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.topnum-pct { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; white-space: nowrap; }

/* Раздел «Экспортные контракты» — табличный отчёт в кг */
.report-title { font-weight: 800; text-align: center; color: var(--color-primary); margin: 6px 2px 2px; font-size: 14px; letter-spacing: .01em; }
.report-date { text-align: center; color: var(--color-text-secondary); margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.kgtable-wrap { overflow-x: auto; margin: 4px 0 10px; -webkit-overflow-scrolling: touch; }
.kgtable { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.kgtable th, .kgtable td { border: 1px solid var(--color-border); padding: 5px 7px; text-align: right; white-space: nowrap; }
.kgtable th:first-child, .kgtable td:first-child { text-align: left; }
.kgtable thead th { background: var(--color-primary); color: #fff; font-weight: 700; font-size: 11px; }
.kgtable .kg-total td { background: var(--color-secondary-soft); font-weight: 800; color: var(--color-primary-dark); }
.kgtable .kg-act { text-align: center; }
.kgtable .kg-act .icon-btn { padding: 0 4px; }
/* Текстовые колонки (наименование, комментарий) — влево и с переносом, иначе
   длинный текст в паре с nowrap-колонками справа обрезается слева (видна только
   середина/хвост фразы вместо её начала). */
.kgtable td.nm, .kgtable th.nm { text-align: left; white-space: normal; word-break: break-word; min-width: 160px; }
.free-vol { margin: 8px 0; border: 2px solid var(--color-secondary); }
.free-vol .kg { color: var(--color-primary); font-weight: 850; }
/* Свободный объём — карточки позиций: фирменно-цветные строки + анимированная полоса. */
.fv-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.fv-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.fv-row .fv-ic { font-size: 15px; flex-shrink: 0; }
.fv-row .fv-lbl { flex: 1; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); }
.fv-row .fv-val { font-size: 17px; font-weight: 800; color: var(--color-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fv-row .fv-val i { font-size: 12px; font-style: normal; font-weight: 600; color: var(--color-text-secondary); margin-left: 1px; }
.fv-contract { background: linear-gradient(90deg, rgba(110,22,32,.10), rgba(110,22,32,.02)); border-left: 4px solid var(--color-primary); }
.fv-remain { background: linear-gradient(90deg, rgba(195,154,62,.14), rgba(195,154,62,.03)); border-left: 4px solid var(--color-secondary); }
.fv-free { background: linear-gradient(90deg, rgba(30,158,90,.18), rgba(30,158,90,.05)); border-left: 4px solid var(--color-success); }
.fv-free .fv-lbl { color: var(--color-success); font-weight: 800; }
.fv-free .fv-val { color: var(--color-success); font-size: 20px; }
.fv-bar { margin: 3px 2px 0; height: 8px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.fv-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-secondary), var(--color-success)); transform-origin: left; animation: growRight .7s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .fv-bar-fill { animation: none; } }
/* Большая кнопка «Просмотр таблицы» — сразу открывает печатный вид всей свободной
   таблицы (чтобы менеджер увидел всё на одном экране, не заходя в позиции). */
.fv-view-btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 18px 18px; margin-bottom: 14px; border: none; border-radius: 18px;
  background: linear-gradient(135deg, #1E9E5A, #16824a);
  color: #fff; box-shadow: 0 8px 22px rgba(30,158,90,.34);
  cursor: pointer; text-align: left; transition: transform .08s ease, box-shadow .2s ease;
}
.fv-view-btn:active { transform: translateY(1px) scale(.995); box-shadow: 0 4px 12px rgba(30,158,90,.30); }
.fv-view-btn .fv-view-ic { font-size: 30px; line-height: 1; flex-shrink: 0; }
.fv-view-btn .fv-view-tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fv-view-btn .fv-view-tx b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.fv-view-btn .fv-view-tx small { font-size: 12.5px; font-weight: 600; opacity: .92; line-height: 1.25; }
.fv-view-btn .fv-view-go { font-size: 26px; font-weight: 700; opacity: .85; flex-shrink: 0; }
html[data-theme="dark"] .fv-view-btn { box-shadow: 0 8px 22px rgba(0,0,0,.4); }

/* Подсказка при первом заходе в «Свободный объём»: кнопка «Просмотр таблицы»
   пульсирует золотым свечением + всплывает подсказка-пузырь. Один раз на
   пользователя (localStorage-флаг fvTableHintSeen), дальше не мешает —
   исчезает и по клику на саму кнопку, и по своей кнопке «Понятно, скрыть». */
.fv-view-wrap { position: relative; }
.fv-view-btn.fv-hint-pulse { animation: fvHintPulse 1.6s ease-in-out infinite; }
@keyframes fvHintPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(30,158,90,.34), 0 0 0 0 rgba(195,154,62,.55); }
  50% { box-shadow: 0 8px 22px rgba(30,158,90,.34), 0 0 0 8px rgba(195,154,62,0); }
}
@media (prefers-reduced-motion: reduce) { .fv-view-btn.fv-hint-pulse { animation: none; } }
.fv-hint-tip {
  position: relative; margin: -6px 0 14px; padding: 10px 12px; border-radius: 12px;
  background: var(--color-primary); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 8px 18px rgba(0,0,0,.18); animation: fvHintIn .3s cubic-bezier(.2,.7,.2,1) both;
}
.fv-hint-tip::before {
  content: ''; position: absolute; top: -6px; left: 28px; width: 11px; height: 11px;
  background: var(--color-primary); transform: rotate(45deg);
}
.fv-hint-close {
  display: inline-block; margin-top: 5px; font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--color-secondary, #E4C877);
  cursor: pointer;
}
@keyframes fvHintIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fv-hint-tip { animation: none; } }

.pos-chips { flex-wrap: wrap; gap: 6px; }

/* Теги номеров пряжи внутри раздела «Экспортные контракты» */
.pos-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--color-secondary-soft); color: var(--color-primary-dark); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.pos-tag-x { border: none; background: transparent; color: var(--color-primary); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 0 0 2px; }
.pos-count { font-size: 11px; font-weight: 700; color: #fff; background: var(--color-secondary); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.ec-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 10px; padding: 6px 10px; }
.ec-pick { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; cursor: pointer; }
.ec-pick input { width: auto; margin: 0; flex: none; }
/* Свободный объём: галочка «Считать по спецификации» + тег пряжи в отчёте */
.rc-byspec-row { display: flex; align-items: center; gap: 9px; padding: 11px 12px; margin: 0 0 12px; border: 1.5px solid color-mix(in srgb, var(--color-secondary, #C39A3E) 50%, transparent); background: color-mix(in srgb, var(--color-secondary, #C39A3E) 10%, var(--color-surface)); border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer; }
.rc-byspec-row input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-primary, #6E1620); }
#rc-csel { width: 100%; padding: 11px 12px; font-size: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text-primary); font-weight: 600; }
/* Свод для клиента: список контрактов, сгруппированный по покупателю */
.cs-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 2px; min-height: 0; }
.cs-grp { flex: 0 0 auto; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.cs-grp-h { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); border-bottom: 1px solid var(--color-border); }
.cs-av { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; }
.cs-buyer { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cnt { font-size: 11px; font-weight: 700; color: var(--color-muted); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 8px; flex: none; }
.cs-all { flex: none; border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); background: transparent; color: var(--color-primary); font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
.cs-all:active { transform: scale(.96); }
.cs-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; background: var(--color-surface); position: relative; }
.cs-row + .cs-row { border-top: 1px solid var(--color-border); }
.cs-row.sel { background: var(--color-secondary-soft); }
.cs-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-ck { width: 21px; height: 21px; flex: none; border-radius: 7px; border: 2px solid var(--color-border); background: var(--color-background); position: relative; transition: background .15s, border-color .15s; }
.cs-ck::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.6px 2.6px 0; transform: rotate(45deg) scale(0); transition: transform .15s; }
.cs-row.sel .cs-ck { background: var(--color-primary); border-color: var(--color-primary); }
.cs-row.sel .cs-ck::after { transform: rotate(45deg) scale(1); }
.cs-cno { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cs-yarn { flex: none; font-size: 11.5px; font-weight: 700; color: var(--color-secondary); background: var(--color-secondary-soft); border: 1px solid color-mix(in srgb, var(--color-secondary) 34%, transparent); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }

/* Результат выработки против дневного плана (окно омборчи) */
.plan-pop { position: relative; overflow: hidden; text-align: center; padding: 6px 4px 2px; }
.plan-emoji { font-size: 54px; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 4px 10px rgba(17,17,17,.18)); animation: plan-pop-in .4s ease; }
.plan-title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--color-text-primary); text-wrap: balance; }
.plan-sub { font-size: 14px; color: var(--color-text-secondary); margin-top: 5px; }
.plan-ring { --p: 100; position: relative; width: 104px; height: 104px; border-radius: 50%; margin: 16px auto 4px;
  background: conic-gradient(var(--color-secondary) calc(var(--p) * 1%), rgba(17,17,17,.10) 0); display: grid; place-items: center; }
html[data-theme="dark"] .plan-ring { background: conic-gradient(var(--color-secondary) calc(var(--p) * 1%), rgba(255,255,255,.13) 0); }
.plan-ring::before { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; background: var(--color-surface); }
.plan-ring b { position: relative; font-size: 22px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.plan-chip { display: inline-block; font-size: 14px; font-weight: 800; border-radius: 999px; padding: 6px 16px; margin-top: 12px; }
.plan-chip-plus { color: #1E7F4E; background: #E7F4EC; }
html[data-theme="dark"] .plan-chip-plus { color: #4FD08A; background: rgba(34,197,94,.16); }
.plan-line { font-size: 13px; color: var(--color-text-secondary); margin-top: 10px; display: flex; justify-content: center; gap: 14px; }
.plan-under .plan-line { justify-content: space-between; }
.plan-line b, .plan-line span b { color: var(--color-text-primary); }
.plan-bar-wrap { height: 13px; border-radius: 999px; background: rgba(17,17,17,.09); overflow: hidden; margin: 16px 0 0; }
html[data-theme="dark"] .plan-bar-wrap { background: rgba(255,255,255,.12); }
.plan-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #D69A2E, #B4791E); transition: width .55s ease; }
/* конфетти (только при перевыполнении) */
.plan-confetti { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.plan-confetti i { position: absolute; top: -12px; width: 9px; height: 9px; border-radius: 2px; opacity: .95; animation: plan-fall 1.9s cubic-bezier(.3,.6,.4,1) forwards; }
.plan-confetti i:nth-child(7n+1) { left: 8%;  background: #D4AF37; animation-delay: 0s;   }
.plan-confetti i:nth-child(7n+2) { left: 22%; background: #6F1025; animation-delay: .12s; }
.plan-confetti i:nth-child(7n+3) { left: 37%; background: #22A05B; animation-delay: .05s; }
.plan-confetti i:nth-child(7n+4) { left: 52%; background: #2B5B9E; animation-delay: .2s;  }
.plan-confetti i:nth-child(7n+5) { left: 67%; background: #D4AF37; animation-delay: .08s; }
.plan-confetti i:nth-child(7n+6) { left: 81%; background: #6F1025; animation-delay: .16s; }
.plan-confetti i:nth-child(7n)   { left: 93%; background: #22A05B; animation-delay: .02s; }
@keyframes plan-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(380px) rotate(430deg); opacity: 0; } }
@keyframes plan-pop-in { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plan-confetti i { animation: none; opacity: 0; } .plan-emoji { animation: none; } }

/* Главный экран — «Яркие карточки»: крупные цветные градиентные плитки товаров */
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.dtile { position: relative; overflow: hidden; border-radius: 18px; padding: 14px; color: #fff;
  display: flex; flex-direction: column; gap: 7px; min-height: 98px;
  box-shadow: 0 8px 22px rgba(60, 15, 30, .16); }
.dtile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: rgba(255, 255, 255, .10); pointer-events: none; }
.dt-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 13px; min-height: auto; padding: 15px 16px; }
.dt-yarn { background: linear-gradient(145deg, #8A1526 0%, #550D18 100%); }
.dt-cot  { background: linear-gradient(145deg, #D89A2E 0%, #B7791F 100%); }
.dt-ugar { background: linear-gradient(145deg, #2E9C6E 0%, #1E6B45 100%); }
.dt-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .93);
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .14); position: relative; z-index: 1; }
.dt-ic svg { width: 26px; height: 26px; display: block; }
.dt-wide .dt-ic { width: 46px; height: 46px; }
.dt-wide .dt-ic svg { width: 30px; height: 30px; }
.dt-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; position: relative; z-index: 1; }
.dt-wide .dt-body { flex: 1; }
.dt-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.dt-kg { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.1; }
.dt-wide .dt-kg { font-size: 26px; }
.dt-sub { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .74); }
.dt-spark { width: 74px; height: 40px; flex: none; position: relative; z-index: 1; }
@media (max-width: 360px) { .dt-kg { font-size: 18px; } .dt-wide .dt-kg { font-size: 22px; } .dt-spark { display: none; } }
.yarn-tag { font-weight: 800; color: var(--color-primary, #6E1620); }
:root[data-theme="dark"] .yarn-tag { color: var(--color-secondary, #C39A3E); }

/* Версия — в потоке в самом низу страницы (раньше была fixed и полупрозрачно
   висела ПОВЕРХ контента при прокрутке на каждом экране). */
.app-version { position: static; margin: 18px auto calc(8px + var(--safe-bottom)); text-align: center; font-size: 11px; color: var(--color-muted, #94a3b8); opacity: 0.7; letter-spacing: 0.04em; pointer-events: none; }

.lang-switch { margin-left: auto; display: inline-flex; gap: 4px; }
.lang-btn { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: rgba(255,255,255,0.75); cursor: pointer; line-height: 1; }
.lang-btn.active { background: var(--color-secondary, #C39A3E); color: #fff; border-color: var(--color-secondary, #C39A3E); }
/* Сводная таблица по хлопку (раздел «Экспортные контракты») */
.sum-title { font-weight: 700; color: var(--color-primary, #6E1620); margin: 2px 2px 8px; font-size: 16px; }
.sumwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; }
/* Свод пряжи/хлопка: шрифт крупнее для читаемости (в т.ч. пожилым). Было 11px. */
.sumtable { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
.sumtable th, .sumtable td { border: 1px solid var(--color-border, #e2e8f0); padding: 5px 9px; text-align: center; }
.sumtable thead th { background: var(--color-primary, #6E1620); color: #fff; font-weight: 700; line-height: 1.15; }
.sumtable td.nm, .sumtable th.nm { text-align: left; }
.sumtable td.c { color: var(--color-muted, #94a3b8); }
.sumtable td.n { text-align: right; font-variant-numeric: tabular-nums; }
.sumtable td.in { color: #1E9E5A; }
.sumtable td.out { color: #D43A2C; }
.sumtable td.move { color: #1565C0; }
.sumtable td.yarn { font-weight: 700; color: var(--color-primary-dark, #4a0e16); }
.sumtable tr.tot td { background: var(--color-secondary-soft, #f6efda); font-weight: 700; }
/* Свод по пряже: строки-группы по типу и общий итог */
.sumtable tr.grp td { background: var(--color-primary, #6E1620); color: #fff; text-align: left; font-weight: 700; }
.sumtable tr.grand td { background: var(--color-secondary, #C39A3E); color: #fff; font-weight: 700; }
/* Баннер «учёт за сегодня не внесён» (кладовщики) — на главном экране */
.daily-warn { background: #FFF4E5; border: 1px solid #F0B37E; border-left: 4px solid #E8833A; border-radius: 10px; padding: 9px 12px; margin: 6px 0 12px; }
.daily-warn .dw-title { font-weight: 800; color: #B5460F; font-size: 13px; margin-bottom: 4px; }
.daily-warn .dw-item { font-size: 13px; color: #6b4a2b; line-height: 1.45; }
.daily-warn .dw-item b { color: #8a3b0c; }
.daily-warn .dw-actions { display: flex; gap: 8px; margin-top: 9px; }
/* Экран профилактики (режим обслуживания) */
.maint-screen { text-align: center; padding: 56px 22px; }
.maint-emoji { font-size: 64px; line-height: 1; }
.maint-title { font-size: 22px; font-weight: 800; color: var(--color-primary, #6E1620); margin: 14px 0 8px; }
.maint-text { font-size: 15px; color: var(--color-text-secondary); max-width: 440px; margin: 0 auto; line-height: 1.55; }
.maint-brand { margin-top: 22px; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--color-secondary, #C39A3E); }
/* Таблица суточной выработки на телефоне: крупный шрифт, «замороженные»
   шапка и столбец даты, контейнер со скроллом — читабельно и наглядно. */
.prod-wrap { max-height: 74vh; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border, #e2e8f0); border-radius: 12px; margin-bottom: 16px; }
.prod-matrix { font-size: 13px; min-width: 100%; }
.prod-matrix th, .prod-matrix td { padding: 8px 10px; white-space: nowrap; }
.prod-matrix thead th { position: sticky; top: 0; z-index: 2; font-size: 12.5px; }
.prod-matrix tbody td.nm, .prod-matrix thead th.nm { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 700; }
.prod-matrix thead th.nm { z-index: 3; }
.prod-matrix tbody td.nm { background: var(--color-surface, #fff); box-shadow: 1px 0 0 var(--color-border, #e2e8f0); }
.prod-matrix tbody tr.plan-row td.nm { background: var(--color-secondary-soft, #f6efda); }
.prod-matrix tbody tr.grand td.nm { background: var(--color-primary, #6E1620); color: #fff; }
.prod-matrix td.n { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Зебра для строк-дней (не трогаем план/итог/цветные ячейки), тема-независимо */
.prod-matrix tbody tr:not(.plan-row):not(.grand):not(.today):nth-child(odd) td:not(.prod-ok):not(.prod-low) { background: var(--color-surface, #fff); }
.prod-matrix tbody tr:not(.plan-row):not(.grand):not(.today):nth-child(even) td:not(.prod-ok):not(.prod-low) { background: var(--color-background, #f4f6f9); }
/* Подсветка сегодняшнего дня */
.prod-matrix tbody tr.today td { background: #fff6df; }
.prod-matrix tbody tr.today td.nm { background: #ffefc2; box-shadow: inset 3px 0 0 var(--color-secondary, #C39A3E); color: var(--color-primary-dark, #4a0e16); }
/* В строке «сегодня» цветные ячейки сохраняют цвет плана */
.prod-matrix tbody tr.today td.prod-ok { background: #e7f6ec; }
.prod-matrix tbody tr.today td.prod-low { background: #fde8e6; }
.prod-matrix tbody tr.today td.tot-ok { background: #bfe8cd; }
.prod-matrix tbody tr.today td.tot-low { background: #f6c3bb; }
/* Итоги месяца «план/факт» — компактная таблица (всё видно сразу, без скролла) */
.mrep-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; margin-bottom: 10px; }
.mrep-table th, .mrep-table td { padding: 7px 3px; text-align: right; border-bottom: 1px solid var(--color-border, #e2e8f0); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrep-table th { font-size: 10.5px; font-weight: 800; color: var(--color-primary, #6E1620); text-transform: uppercase; letter-spacing: .3px; background: rgba(110,22,32,.07); border-bottom: 2px solid var(--color-primary, #6E1620); }
.mrep-table th.nm, .mrep-table td.nm { text-align: left; width: 26%; }
.mrep-table td.nm { font-weight: 750; color: var(--color-primary-dark, #4a0e16); }
.mrep-table td.ok { color: #1E7A44; font-weight: 800; }
.mrep-table td.low { color: #C0341D; font-weight: 800; }
/* Зебра — чтобы взгляд не терял строку (не трогаем строку ИТОГО) */
.mrep-table tbody tr:nth-child(even):not(.mrep-tot) td { background: rgba(110,22,32,.04); }
.mrep-table tr.mrep-tot td { border-top: 2px solid var(--color-secondary, #C39A3E); border-bottom: none; font-weight: 800; background: var(--color-secondary-soft, #f6efda); }
/* Тёмная тема */
html[data-theme="dark"] .mrep-table th { color: #EAD9A8; background: rgba(255,255,255,.05); border-bottom-color: var(--color-secondary, #C39A3E); }
html[data-theme="dark"] .mrep-table td.nm { color: #EAD9A8; }
html[data-theme="dark"] .mrep-table tbody tr:nth-child(even):not(.mrep-tot) td { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .mrep-table td.ok { color: #4FC17E; }
html[data-theme="dark"] .mrep-table td.low { color: #F0715A; }
html[data-theme="dark"] .mrep-table tr.mrep-tot td { background: rgba(195,154,62,.20); }

/* Общий план над таблицей */
.prod-plan-total { margin: 2px 2px 8px; font-size: 13px; color: var(--color-text-secondary); }
.prod-plan-total b { color: var(--color-primary, #6E1620); }
.plan-total-row { margin: 6px 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--color-secondary-soft, #f6efda); font-weight: 600; color: var(--color-primary-dark, #4a0e16); }

/* План выработки: подсветка ячеек и строка плана */
.sumtable td.prod-ok { background: #e7f6ec; color: #1E7A44; font-weight: 700; }
.sumtable td.prod-low { background: #fde8e6; color: #C0341D; font-weight: 700; }
/* Колонка «Жами» (общая выработка) — насыщеннее и жирнее, чтобы итог выделялся */
.sumtable td.tot-ok { background: #bfe8cd; color: #14622f; font-weight: 800; }
.sumtable td.tot-low { background: #f6c3bb; color: #9c1d0e; font-weight: 800; }
.sumtable tr.plan-row td { background: var(--color-secondary-soft, #f6efda); color: var(--color-primary-dark, #4a0e16); font-weight: 700; }
.prod-legend { display: flex; gap: 14px; margin: 2px 2px 8px; font-size: 12px; }
.prod-legend .lg.ok { color: #1E7A44; }
.prod-legend .lg.low { color: #C0341D; }
/* История цен: кто менял + тип действия */
.price-by { margin-top: 6px; color: var(--color-text-secondary); font-size: 12px; }
.hist-act { font-weight: 750; }
.hist-act.in { color: #1E9E5A; }
.hist-act.out { color: #D43A2C; }
.hist-act.move { color: #1565C0; }
/* Отзывы: окно оценки (звёзды 1–5) */
.fb-modal h3 { margin: 0 0 6px; }
.fb-intro { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 12px; }
.fb-cat { margin-bottom: 12px; }
.fb-q { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.fb-stars { display: flex; gap: 4px; }
.fb-star { font-size: 30px; line-height: 1; background: none; border: none; padding: 2px 4px; cursor: pointer; color: var(--color-border, #d8dee6); transition: color .12s, transform .08s; }
.fb-star.on { color: #F5B301; }
.fb-star:active { transform: scale(1.2); }
/* Звёзды только для показа (сводка/список отзывов) */
.fb-stars-view { white-space: nowrap; letter-spacing: 1px; }
.fb-stars-view span { color: var(--color-border, #d8dee6); font-size: 13px; }
.fb-stars-view span.on { color: #F5B301; }
.fb-row { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }
.fb-comment-row { margin-top: 6px; font-style: italic; color: var(--color-text); font-size: 13px; }
/* Коммерческое предложение: выбор позиций в модалке */
.offer-list { max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; padding: 4px 8px; }
.offer-pick { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--color-border, #eef1f5); font-size: 13px; cursor: pointer; }
.offer-pick:last-child { border-bottom: none; }
.offer-pick input { width: 18px; height: 18px; flex: none; }
/* Аналитика экспорта: имя покупателя + полоса доли по отгрузкам */
.anl-buyer { font-weight: 700; color: var(--color-primary-dark, #4a0e16); white-space: nowrap; }
.anl-nums { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; margin-top: 2px; white-space: normal; line-height: 1.3; }
.anl-bar { margin-top: 3px; height: 5px; border-radius: 999px; background: var(--color-secondary-soft, #f6efda); overflow: hidden; }
.anl-bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-secondary, #C39A3E); }
/* Аналитика экспорта — пояснения и прогресс */
.anl-intro { color: var(--color-text-secondary); font-size: 13px; line-height: 1.4; margin: 2px 2px 10px; }
.anl-cap { color: var(--color-text-secondary); font-size: 12px; line-height: 1.35; margin: -4px 2px 8px; }
.anl-note { color: var(--color-text-secondary); font-size: 12px; line-height: 1.4; margin: 8px 2px 4px; background: var(--color-secondary-soft, #f6efda); border-radius: 10px; padding: 8px 10px; }
.anl-note b.pos, .val.pos, .sumtable td.pos { color: #1E7A44; }
.anl-note b.neg, .val.neg, .sumtable td.neg { color: #C0341D; }
.anl-progress { margin: 6px 2px 4px; }
.anl-progress-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; }
.anl-bar.big { height: 12px; }
/* Главное меню разделов — две колонки (3 слева, 3 справа) */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--space-md, 12px); }
.menu-grid .btn { width: 100%; height: 100%; }
/* Плавный «вход» в раздел: плитка «ныряет» (увеличивается и растворяется), иконка реагирует по теме. */
.menu-grid .m-ic { display: inline-block; margin-right: 6px; }
.menu-grid .btn.m-enter { animation: mEnter .22s ease-in both; pointer-events: none; }
@keyframes mEnter { to { transform: scale(1.07); opacity: .45; } }
.menu-grid .btn[data-act="yarn-analytics"].m-enter .m-ic { animation: mSpin .22s ease both; }
.menu-grid .btn[data-act="uster"].m-enter .m-ic { animation: mShake .22s ease both; }
.menu-grid .btn[data-act="packing"].m-enter .m-ic { animation: mBounce .22s ease both; }
.menu-grid .btn[data-act="prices"].m-enter .m-ic { animation: mSwing .22s ease both; }
.menu-grid .btn[data-act="electricity"].m-enter .m-ic { animation: mZap .22s ease both; }
@keyframes mSpin { to { transform: rotate(360deg); } }
@keyframes mShake { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-20deg); } 65% { transform: rotate(16deg); } }
@keyframes mBounce { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-5px) scale(1.12); } }
@keyframes mSwing { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-22deg); } 70% { transform: rotate(12deg); } }
@keyframes mZap { 0% { transform: scale(1); } 50% { transform: scale(1.3); filter: brightness(1.8); } 100% { transform: scale(1.05); } }
/* Плитки разделов — премиум-карточки (как хаб «Аналитики пряжи»): светлая
   поверхность, цветной чип-иконка и тонкая акцентная полоса слева в цвет раздела.
   Цвет различает разделы, но не «кричит» — бренд бордо/золото остаётся главным. */
.menu-grid .btn[data-act]:not(.menu-svod):not(.menu-analytics) {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.18), rgba(255,255,255,0) 52%), linear-gradient(140deg, color-mix(in srgb, var(--mc,#6E1620) 90%, #000), color-mix(in srgb, var(--mc,#6E1620) 60%, #000));
  color: #fff;
  font-weight: 750;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 14px 8px;
}
.menu-grid .btn[data-act] .m-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; margin-right: 0; font-size: 20px; flex: none; background: rgba(255,255,255,.20); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); filter: none; }
.menu-grid .btn[data-act="yarn-analytics"] { --mc: #2563eb; }
.menu-grid .btn[data-act="electricity"] { --mc: #d97706; }
.menu-grid .btn[data-act="uster"] { --mc: #7c3aed; }
.menu-grid .btn[data-act="packing"] { --mc: #b45309; }
.menu-grid .btn[data-act="prices"] { --mc: #0d9488; }
.menu-grid .btn[data-act="tasks"] { --mc: #6E1620; }
html[data-theme="dark"] .menu-grid .btn[data-act]:not(.menu-svod):not(.menu-analytics) { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 5px 14px rgba(0,0,0,.25); }
html[data-theme="dark"] .menu-grid .btn[data-act] .m-ic { background: rgba(255,255,255,.20); }
/* Хаб «Аналитики пряжи»: крупные цветные плитки-разделы. */
/* Премиум-хаб «Аналитика пряжи»: аккуратные карточки — иконка в чипе + название + подпись */
.ya-hub { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-md, 12px); }
.ya-tile { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 16px; cursor: pointer; position: relative; overflow: hidden;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(27,31,36,.05), 0 6px 16px rgba(27,31,36,.045);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ya-tile::before { display: none; }
.ya-tile-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 66%, #fff), var(--c));
  box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.ya-tile-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ya-tile-t { font-size: 16px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -.01em; line-height: 1.15; }
.ya-tile-d { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); line-height: 1.25; }
.ya-tile-arr { flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--color-text-secondary); opacity: .5; transition: transform .16s ease, opacity .16s ease; }
.ya-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 42%, var(--color-border)); box-shadow: 0 2px 6px rgba(27,31,36,.08), 0 12px 26px rgba(27,31,36,.10); }
.ya-tile:hover .ya-tile-arr { opacity: 1; transform: translateX(3px); }
.ya-tile:active { transform: translateY(0) scale(.99); }
html[data-theme="dark"] .ya-tile { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.28); }
html[data-theme="dark"] .ya-tile-ic { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); }
html.lite .ya-tile { transition: none; box-shadow: var(--shadow-sm); }
html.lite .ya-tile:hover { transform: none; }
/* Большие разделы «Свод и экспорт» и «Аналитика пряжи» — матовое цветное стекло
   (вариант H): мягкий цветной градиент + стеклянный блик, иконка-чип слева. */
.menu-grid .menu-svod, .menu-grid .menu-analytics {
  grid-column: 1 / -1;
  display: flex; flex-direction: row; align-items: center; gap: 13px;
  padding: 15px 16px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.menu-grid .menu-svod {
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(135deg, #7d1826 0%, #4d0f17 100%);
}
.menu-grid .menu-analytics {
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,0) 55%), linear-gradient(135deg, #2b93a3 0%, #12525d 100%);
}
.menu-grid .mh-ic {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.32);
}
.menu-grid .mh-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.menu-grid .menu-svod .svod-title, .menu-grid .menu-analytics .svod-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.menu-grid .menu-svod .svod-sub, .menu-grid .menu-analytics .svod-sub { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.22); }
html.lite .menu-grid .menu-analytics { animation: none; background-position: 0% 50%; }
/* Уважаем системное «уменьшение движения» (в облегчённом режиме анимации и так выключены). */
@media (prefers-reduced-motion: reduce) {
  .menu-grid .menu-svod, .menu-grid .menu-analytics { animation: none; background-position: 0% 50%; }
}
/* Аккуратный сворачиваемый блок действий «Скачать и печать» на экране «Свод». */
.tools-panel {
  margin: 10px 0 2px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tools-panel > summary.tools-title {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-secondary);
}
.tools-panel > summary.tools-title::-webkit-details-marker { display: none; }
.tools-panel > summary.tools-title::after { content: '▾'; font-size: 14px; transition: transform .2s ease; }
.tools-panel[open] > summary.tools-title::after { transform: rotate(180deg); }
.tools-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tools-lbl { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); min-width: 58px; }
.tools-group .btn { flex: 1 1 0; min-width: 84px; }
/* Свод → две большие плитки «Скачать Excel / Печать»: новичок сразу видит, где скачать таблицы. */
.svod-dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.svod-dl-tile.period { background: linear-gradient(180deg, color-mix(in srgb, #2b5fae 12%, var(--color-surface)), var(--color-surface)); border-color: color-mix(in srgb, #2b5fae 32%, transparent); }
.svod-dl-tile.period .svod-dl-ic { background: linear-gradient(160deg, #3f7fd6, #2b5fae); color: #fff; box-shadow: 0 6px 16px rgba(43,95,174,.32); }
@media (max-width: 380px) { .svod-dl { grid-template-columns: 1fr 1fr; } .svod-dl-tile.period { grid-column: 1 / -1; } }
/* «Свод за период»: две даты в ряд + счётчик файлов */
.period-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.period-range .arrow { color: var(--color-text-secondary); font-weight: 700; }
.period-count { background: rgba(120,120,120,.08); border: 1px dashed var(--color-border); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; color: var(--color-text-primary); }
.period-count b { color: var(--color-primary, #6E1620); }
.svod-dl-tile {
  border: 1px solid var(--color-border); border-radius: 16px; padding: 20px 14px 18px;
  text-align: center; background: var(--color-surface); box-shadow: var(--shadow-sm);
  cursor: pointer; user-select: none; transition: transform .18s ease, box-shadow .18s ease;
}
.svod-dl-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(110,22,32,.14); }
.svod-dl-tile:active { transform: translateY(0) scale(.99); }
.svod-dl-tile:focus-visible { outline: 3px solid var(--color-secondary, #C39A3E); outline-offset: 2px; }
.svod-dl-tile.excel { background: linear-gradient(180deg, color-mix(in srgb, #C39A3E 16%, var(--color-surface)), var(--color-surface)); border-color: color-mix(in srgb, #C39A3E 42%, transparent); }
.svod-dl-tile.print { background: linear-gradient(180deg, color-mix(in srgb, #6E1620 12%, var(--color-surface)), var(--color-surface)); border-color: color-mix(in srgb, #6E1620 30%, transparent); }
.svod-dl-ic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; }
.svod-dl-tile.excel .svod-dl-ic { background: linear-gradient(160deg, #D4AF37, #C39A3E); box-shadow: 0 6px 16px rgba(195,154,62,.38); }
.svod-dl-tile.print .svod-dl-ic { background: linear-gradient(160deg, #8a1c2a, #6E1620); color: #fff; box-shadow: 0 6px 16px rgba(110,22,32,.32); }
.svod-dl-h { font-size: 19px; font-weight: 800; color: var(--color-text-primary); }
.svod-dl-d { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }
.svod-dl-resend { width: 100%; margin: 2px 0 4px; }
@media (prefers-reduced-motion: reduce) { .svod-dl-tile { transition: none; } .svod-dl-tile:hover { transform: none; } }
/* Модалка выбора Пряжа/Хлопок — крупные строки */
.dl-pick { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 2px; }
.dl-pick .btn { justify-content: flex-start; font-size: 16px; padding: 15px 16px; gap: 12px; width: 100%; }
/* Экран ввода кода доступа (защита от чужих заявок) */
.gate-wrap { max-width: 380px; margin: 8vh auto 0; text-align: center; padding: 0 6px; }
.gate-ic { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; background: linear-gradient(160deg, #8a1c2a, #6E1620); color: #fff; box-shadow: 0 8px 20px rgba(110,22,32,.32); }
.gate-title { font-size: 21px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 6px; }
.gate-hint { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 18px; }
.gate-input { width: 100%; padding: 14px 16px; font-size: 17px; text-align: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.gate-input:focus { outline: none; border-color: var(--color-secondary, #C39A3E); }
.gate-err { color: var(--color-danger); font-size: 14px; font-weight: 600; margin: 10px 0 4px; }
.gate-wrap .btn-block { margin-top: 14px; padding: 15px; font-size: 16px; }
.user-quickblock { flex: 0 0 auto; margin-right: 8px; }
/* 🔒 Пользователь без доступа: скрываем ВСЕ контролы шапки (шестерёнка, язык,
   тумблер кг/тонна, курс ЦБ) и нижнее меню — виден только запрос доступа/кода. */
body.access-locked #settings-btn,
body.access-locked #lang-switch,
body.access-locked #topbar-unit-slot,
body.access-locked #usd-banner-slot,
body.access-locked #topbar-lower,
body.access-locked #back-btn,
body.access-locked #bottom-nav { display: none !important; }
/* «Экспорт» — отдельный крупный блок-«отдел» внутри «Свод и экспорт»: яркий бегающий
   разноцветный градиент, крупный текст, хорошо читается, сразу понятно что внутри. */
.export-block {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  margin: 14px 0;
  padding: 20px 18px;
  border: 0;
  border-radius: var(--radius-xl);
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background-image: linear-gradient(100deg,
    #6E1620 0%, #9c2230 14%, #b3402f 28%, #C39A3E 42%, #f0d27e 50%, #C39A3E 58%, #b3402f 72%, #9c2230 86%, #6E1620 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-lg);
  animation: svodFlow 4s ease-in-out infinite, svodGlow 2.6s ease-in-out infinite;
}
.export-block-ic { font-size: 32px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); display: flex; }
/* Промышленные линейные значки разделов (SVG): белый контур, чётко на любом экране. */
.export-block-ic .ex-svg { width: 34px; height: 34px; display: block; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.export-block-tt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.export-block-tt b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.40); }
.export-block-tt small { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.export-block-go { font-size: 24px; font-weight: 800; flex-shrink: 0; opacity: .9; text-shadow: 0 1px 3px rgba(0,0,0,.40); }
.export-block.active { outline: 3px solid rgba(255,255,255,.70); outline-offset: -3px; }
/* Каждый раздел меню «Свод и экспорт» — свой цвет, чтобы блоки отделялись друг от
   друга с первого взгляда. «Свод» — фирменный бордо/золото (как было). */
.export-block { transition: transform .12s ease, box-shadow .12s ease; }
.export-block:active { transform: scale(.97); box-shadow: var(--shadow-sm); }
.export-block.blk-volume {
  background-image: linear-gradient(100deg,
    #065f46 0%, #0d9488 14%, #14b8a6 28%, #2dd4bf 42%, #99f6e4 50%, #2dd4bf 58%, #14b8a6 72%, #0d9488 86%, #065f46 100%);
}
.export-block.blk-export {
  background-image: linear-gradient(100deg,
    #1e2a5e 0%, #2c3e8c 14%, #3b52b0 28%, #6366f1 42%, #c7d2fe 50%, #6366f1 58%, #3b52b0 72%, #2c3e8c 86%, #1e2a5e 100%);
}
.export-block.blk-import {
  background-image: linear-gradient(100deg,
    #7c2d12 0%, #9a3412 14%, #c2410c 28%, #ea580c 42%, #fed7aa 50%, #ea580c 58%, #c2410c 72%, #9a3412 86%, #7c2d12 100%);
}
.export-block.blk-daily {
  background-image: linear-gradient(100deg,
    #4a148c 0%, #6a1b9a 14%, #7b1fa2 28%, #9c27b0 42%, #e1bee7 50%, #9c27b0 58%, #7b1fa2 72%, #6a1b9a 86%, #4a148c 100%);
}
.export-block.blk-cottonbuy {
  background-image: linear-gradient(100deg,
    #14532d 0%, #166534 14%, #15803d 28%, #4d9c53 42%, #cdeccf 50%, #4d9c53 58%, #15803d 72%, #166534 86%, #14532d 100%);
}
@media (prefers-reduced-motion: reduce) {
  .export-block { animation: none; background-position: 0% 50%; }
}

/* ===== Покупка хлопка (Вариант 1 — карточки сделок) ===== */
.cb-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cb-kpi { flex: 1 1 30%; min-width: 96px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 9px 11px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 3px; }
.cb-kpi .k { font-size: 11.5px; font-weight: 700; color: var(--color-text-secondary); }
.cb-kpi .num { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.cb-list { display: flex; flex-direction: column; gap: 11px; }
.deal { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 13px 14px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.deal:active { transform: scale(.99); box-shadow: var(--shadow-md); }
.deal .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.deal .no { font-weight: 800; font-size: 15px; }
.deal .seller { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.deal .seller .sic { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(160deg, #3f7fd6, #2b5fae); display: grid; place-items: center; font-size: 12px; color: #fff; flex: none; }
.deal .seller small { font-weight: 500; color: var(--color-text-secondary); font-size: 11.5px; }
.deal .grade { color: var(--color-text-secondary); font-size: 12.5px; margin-top: 4px; }
.deal .figs { display: flex; gap: 14px; margin-top: 9px; flex-wrap: wrap; }
.deal .fig { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--color-text-secondary); font-weight: 700; }
.deal .fig .num { font-size: 14px; color: var(--text); font-weight: 800; }
.deal .bar { height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--color-secondary) 22%, var(--color-surface)); overflow: hidden; margin-top: 10px; }
.deal .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #1E7A44, #37a163); }
.deal .bar.part > i { background: linear-gradient(90deg, #d9a63f, #cf7d1f); }
.deal .foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--color-text-secondary); flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.c-cnt { background: #f3ecdd; color: #8a6d1f; }
@media (prefers-color-scheme: dark) { .c-cnt { background: #2e2713; color: #e0c46a; } }
.cb-hint-sm { font-size: 11.5px; color: var(--color-text-secondary); margin: 0 2px 8px; }
.deal-seller .no { font-size: 15.5px; }
.deal-seller .seller { margin-top: 3px; }
.deal-seller .seller small { font-size: 11.5px; color: var(--color-text-secondary); font-weight: 600; }
.cb-seller-head { margin-bottom: 12px; }
.cb-seller-head .nm { font-weight: 800; font-size: 17px; }
.cb-seller-head .sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; font-weight: 600; }
.c-birja { background: #e7effb; color: #2b5fae; }
.c-dog { background: #eaf6ee; color: #1e7a44; }
.c-ok { background: #e6f6ec; color: #1e7a44; }
.c-open { background: #fdecec; color: #c0392b; }
@media (prefers-color-scheme: dark) {
  .c-birja { background: #16283f; color: #8fb4e6; }
  .c-dog { background: #16301f; color: #7ecb97; }
  .c-ok { background: #16301f; color: #7ecb97; }
  .c-open { background: #3a1c1c; color: #e69a94; }
}
.cb-seller-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 11px 13px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.cb-seller-card .k { font-size: 11px; color: var(--color-text-secondary); font-weight: 700; }
.cb-seller-card .nm { font-weight: 800; font-size: 15.5px; margin-top: 2px; }
.cb-seller-card .sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.cb-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.cb-sum .box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 9px; box-shadow: var(--shadow-sm); }
.cb-sum .box .k { font-size: 10.5px; color: var(--color-text-secondary); font-weight: 700; }
.cb-sum .box .v { font-size: 14px; font-weight: 800; margin-top: 2px; letter-spacing: -.01em; }
.cb-sum .cb-ok { color: #1E7A44; }
@media (max-width: 400px) { .cb-sum { grid-template-columns: repeat(2, 1fr); } }
.cb-sf-row { margin-bottom: 12px; }
.cb-sw { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.cb-sw input { width: 20px; height: 20px; }
.cb-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 15px; margin: 14px 2px 7px; }
.cb-h-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cb-mtable { min-width: 660px; width: 100%; }
.cb-mtable .cb-macts { white-space: nowrap; }
.cb-mtable .cb-mtot td { border-top: 2px solid var(--color-border); font-weight: 800; color: var(--color-primary); padding-top: 8px; }
.cb-fac-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 4px 13px; box-shadow: var(--shadow-sm); }
.cb-fac-card .fac { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
.cb-fac-card .fac:last-child { border-bottom: 0; }
.cb-fac-card .cb-fac-tot { font-weight: 800; color: var(--color-primary); }
/* Excel-таблица машин (ТТН): сетка + группировка по фабрикам + бордовый итог */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.cb-xtable { min-width: 600px; width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; background: var(--color-surface); }
.cb-xtable th, .cb-xtable td { border: 1px solid var(--color-border); padding: 7px 9px; white-space: nowrap; text-align: left; }
.cb-xtable thead th { background: rgba(110,22,32,.06); color: var(--color-primary); font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.cb-xtable .r { text-align: right; }
.cb-xtable tbody td:first-child { font-weight: 700; }
.cb-xtable .cb-xgrp td { background: var(--color-secondary-soft, #f6efda); color: var(--color-primary-dark, #550D18); font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.cb-xtable .cb-macts { white-space: nowrap; }
.cb-xtable .cb-xtot td { background: linear-gradient(160deg, #7a1a26, var(--color-primary-dark, #550D18)); color: #fff; font-weight: 800; border-color: var(--color-primary-dark, #550D18); }
@media (prefers-color-scheme: dark) {
  .cb-xtable thead th { background: rgba(229,132,154,.10); }
  .cb-xtable .cb-xgrp td { background: #2c2820; color: #e5cf93; }
}
/* Окно «Скачать свод» */
.cbsv-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 6px; }
.cbsv-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 12px; }
.cbsv-grp:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.cbsv-gh { font-weight: 800; font-size: 12px; color: var(--color-primary); background: rgba(110,22,32,.05); padding: 7px 12px; }
.cbsv-row { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid var(--color-border); font-size: 13px; }
.cbsv-row:first-of-type { border-top: 0; }
.cbsv-ck { width: 18px; height: 18px; flex: none; }
.cbsv-main { flex: 1; min-width: 0; }
.cbsv-main small { color: var(--color-text-secondary); font-size: 11.5px; }
.cbsv-fig { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-sellers { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin-bottom: 6px; }
.cb-seller-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cb-seller-row .m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-seller-row .m small { color: var(--color-text-secondary); font-size: 11.5px; }
.lnk { background: none; border: 0; font-size: 16px; cursor: pointer; padding: 4px 6px; line-height: 1; }
.lnk-dan { opacity: .9; }
/* Оплата */
.cb-h-sub { font-size: 13.5px; margin-top: 12px; color: var(--color-text-secondary); }
.cb-foot-pay { margin-top: 4px; }
.cb-foot-pay span { font-weight: 700; color: var(--color-primary); }
.cb-pay-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 13px; box-shadow: var(--shadow-sm); }
.cb-pl { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.cb-pl .num { font-weight: 800; }
.cb-pl-mut { color: var(--color-text-secondary); }
.cb-pl-mut .num { font-weight: 700; }
.cb-pbar { height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--color-secondary) 22%, var(--color-surface)); overflow: hidden; margin: 8px 0 4px; }
.cb-pbar > i { display: block; height: 100%; background: linear-gradient(90deg, #1E7A44, #37a163); }
.cb-due { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cb-due .box { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 10px; background: var(--secondary-bg); }
.cb-due .box .k { font-size: 11px; color: var(--color-text-secondary); font-weight: 700; display: flex; flex-direction: column; }
.cb-due .box .k .cb-due-hint { font-weight: 500; opacity: .8; font-size: 10px; }
.cb-due .box .v { font-size: 15px; font-weight: 800; margin-top: 3px; letter-spacing: -.01em; }
.cb-due .cb-due-now { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.cb-due .cb-due-now .v { color: var(--color-primary); }
.cb-pays { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.cb-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cb-pay-row .m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-pay-row .m small { color: var(--color-text-secondary); font-size: 11.5px; }
.cb-pays-empty { color: var(--color-text-secondary); font-size: 12.5px; padding: 8px 2px; }
/* Файлы */
.cb-files { display: flex; flex-direction: column; gap: 7px; }
.cb-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cb-file-row .m { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; flex: 1; }
.cb-file-row .m b { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-primary); text-decoration: underline; }
.cb-file-row .fic { flex: none; font-size: 18px; }

/* ===== Отгрузка за день ===== */
.ds-wrap { display: flex; flex-direction: column; gap: 12px; }
.ds-daybar { display: flex; align-items: stretch; gap: 8px; }
.ds-dayfield { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ds-dayfield label { font-weight: 700; font-size: 12.5px; color: var(--hint); }
.ds-daybar input[type="date"] { width: 100%; padding: 10px 12px; font-size: 16px; font-weight: 600; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--color-surface); color: var(--text); }
.ds-daynav { align-self: flex-end; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--border); background: var(--color-surface); color: var(--violet-deep, #6a1b9a); border-radius: var(--radius-md); font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; }
.ds-daynav:active { transform: scale(.94); }
.ds-daynav[disabled] { opacity: .35; cursor: default; }
/* Верхняя панель отчёта: скачать / в чат */
.ds-report { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--secondary-bg); }
.ds-report-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-report-lbl { font-size: 13px; font-weight: 800; min-width: 96px; }
.ds-report .btn-sm.btn-soft { min-width: 74px; }
/* Секция «в простое с прошлых дней» */
.ds-carry { border-color: #E0A800; }
.ds-carry > summary { list-style: none; cursor: pointer; }
.ds-carry > summary::-webkit-details-marker { display: none; }
.ds-ghead-warn { background: linear-gradient(90deg, #b8860b, #E0A800); }
/* Итог дня — заметная карточка сверху */
/* Чистый iOS: три отдельных белых KPI-плитки вместо фиолетовой полосы. */
.ds-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: none; color: var(--text); border-radius: 0; overflow: visible; }
.ds-sum-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px; background: var(--color-surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.ds-sum-item span { font-size: 11px; font-weight: 600; color: var(--hint); text-transform: uppercase; letter-spacing: .04em; }
.ds-sum-item b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ds-sum-item b i { font-size: 12px; font-weight: 600; font-style: normal; color: var(--hint); }
.ds-addbtn { width: 100%; padding: 14px; font-size: 16px; font-weight: 800; }
/* ⚜️ Премиум control-bar: дата + итог + инструменты одним бордовым блоком */
.ds-cbar { border-radius: 18px; overflow: hidden; box-shadow: 0 10px 26px rgba(110,22,32,.26); }
.ds-cbar-top { background: linear-gradient(120deg, #6E1620, #8a1c2a); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.ds-cbar-arw { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
.ds-cbar-arw:active { transform: scale(.94); }
.ds-cbar-arw[disabled] { opacity: .4; cursor: default; }
.ds-cbar-date { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-cbar-date label { font-size: 10.5px; font-weight: 700; color: #E0BD5C; text-transform: uppercase; letter-spacing: .05em; }
.ds-cbar-date input[type="date"] { width: 100%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-weight: 800; font-size: 15px; padding: 7px 10px; border-radius: 9px; }
.ds-cbar-date input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; }
.ds-cbar-metrics { display: flex; background: linear-gradient(120deg, #8a1c2a, #6E1620); padding: 2px 6px 13px; }
.ds-cm { flex: 1; text-align: center; padding: 2px 4px; }
.ds-cm b { display: block; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.ds-cm span { font-size: 9.5px; color: #E0BD5C; text-transform: uppercase; letter-spacing: .04em; }
.ds-cm + .ds-cm { border-left: 1px solid rgba(255,255,255,.15); }
.ds-cbar-tools { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 12px; background: var(--color-surface); }
.ds-ctool { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--secondary-bg); color: var(--text); cursor: pointer; }
.ds-ctool:active { transform: scale(.96); }
.ds-files summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-md); }
.ds-files[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ds-files .ds-filebar { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.ds-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px; text-align: center; background: var(--secondary-bg); border-radius: var(--radius-lg); }
.ds-empty-ic { font-size: 42px; line-height: 1; }
.ds-empty-t { font-size: 17px; font-weight: 800; color: var(--text); }
.ds-empty-s { font-size: 13.5px; color: var(--hint); max-width: 42ch; line-height: 1.5; }
.ds-group { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(45,10,20,.05), 0 8px 20px rgba(45,10,20,.07); }
html[data-theme="dark"] .ds-group { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.28); }
html.lite .ds-group { box-shadow: var(--shadow-sm); }
.ds-ghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 15px; font-weight: 800; font-size: 15.5px; color: var(--text); background: var(--color-surface); border-bottom: 1px solid var(--border); }
.ds-ghead .ds-price { font-size: 12.5px; font-weight: 700; color: var(--color-primary, #6E1620); background: var(--color-secondary-soft, #f6efda); border: 1px solid #ecdfc0; padding: 3px 10px; border-radius: 999px; }
/* «В простое» — шапка остаётся янтарной (это предупреждение), текст белый.
   Правило идёт ПОСЛЕ .ds-ghead и задаёт фон явно, иначе .ds-ghead перекрыл бы его. */
/* Спокойный вид (раньше был кричащий сплошной янтарь): мягкий фон + акцент слева. */
.ds-ghead-warn { color: var(--text); background: color-mix(in srgb, #E0A800 12%, var(--color-surface)); border-bottom-color: var(--border); box-shadow: inset 4px 0 0 #D9A21B; }
.ds-ghead-warn .ds-price { color: #8a6a16; background: color-mix(in srgb, #E0A800 18%, var(--color-surface)); border-color: color-mix(in srgb, #E0A800 32%, transparent); }
.ds-carry { border-color: color-mix(in srgb, #E0A800 40%, var(--border)); }
.ds-group > summary.ds-ghead { list-style: none; cursor: pointer; }
.ds-group > summary.ds-ghead::-webkit-details-marker { display: none; }
.ds-ghead-r { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ds-gcaret { font-size: 12px; transition: transform .15s ease; }
.ds-group[open] > summary .ds-gcaret { transform: rotate(180deg); }
.ds-ghead-done { font-size: 12px; font-weight: 700; color: #1E9E5A; background: var(--color-secondary-soft, #eef7f0); border: 1px solid #cfe9d8; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ds-group-closed > summary.ds-ghead { background: var(--secondary-bg); color: var(--hint); }
html[data-theme="dark"] .ds-ghead-done { background: rgba(46,166,106,.16); border-color: rgba(46,166,106,.4); color: #6fdc97; }
/* Компактный список машин: одна строка на машину, тап — детали. */
.ds-mcards { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 4px; }
.ds-mrow { border: 1px solid var(--border); border-left: 3px solid #E0A800; border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.ds-mrow.is-go { border-left-color: #2EA66A; }
.ds-mrow.is-stay { border-left-color: #E0A800; }
.ds-mrow > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.ds-mrow > summary::-webkit-details-marker { display: none; }
.ds-mc-n { font-size: 11px; font-weight: 800; color: var(--hint); background: var(--secondary-bg); border-radius: 7px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.ds-mrow-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ds-mrow-id b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-mrow-id small { font-size: 12px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-mrow-kg { font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-mrow-kg i { font-size: 11px; font-weight: 700; font-style: normal; color: var(--hint); margin-left: 2px; }
.ds-rowdot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ds-rowdot.is-stay { background: #E0A800; }
.ds-rowdot.is-go { background: #2EA66A; }
.ds-mrow-car { color: var(--hint); font-size: 12px; transition: transform .15s; flex-shrink: 0; }
.ds-mrow[open] .ds-mrow-car { transform: rotate(180deg); }
.ds-mrow-body { padding: 4px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--border); margin-top: 2px; }
.ds-mrow-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; padding-top: 8px; }
.ds-mrow-facts b { font-weight: 800; }
.ds-mrow-facts .ds-sum { color: var(--color-primary, #6E1620); }
.ds-mc-note { font-size: 13px; font-weight: 700; display: block; }
.ds-note-stay { color: #92600a; }
.ds-note-go { color: #1b7a44; }
.ds-note-added { color: #1565c0; margin-top: 2px; }
/* Закрытая (добавленная в контракт) машина — компактная «готовая» строка. */
.ds-mrow.ds-done { border-left-color: #7e57c2; opacity: .82; }
.ds-done-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.ds-done-foot { padding: 0 10px 8px; }
.ds-mc-done { background: #2EA66A; }
.ds-rowdot.is-done { background: #7e57c2; }
.ds-mc-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-xs.btn-soft { background: var(--secondary-bg); color: var(--text); border: 1px solid var(--border); }
.btn-xs.ds-btn-del { color: #c0341d; }
.btn-xs.ds-btn-toexp { font-weight: 800; }
html[data-theme="dark"] .ds-note-stay { color: #f0c674; }
html[data-theme="dark"] .ds-note-go { color: #7fd6a2; }
html[data-theme="dark"] .ds-note-added { color: #7fb3f0; }
html[data-theme="dark"] .ds-mrow-facts .ds-sum { color: #ce93d8; }
.ds-gsub { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 15px; background: var(--secondary-bg); font-weight: 700; font-size: 13.5px; color: var(--text); border-top: 1px solid var(--border); }
.ds-gsub b { color: var(--color-primary, #6E1620); font-weight: 800; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .ds-gsub { background: rgba(255,255,255,.03); }
/* «В простое с прошлых дней» — группировка по контрактам (карточки внутри янтарной секции). */
.ds-carry-groups { padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.ds-carry-grp { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ds-carry-ghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; font-weight: 800; font-size: 14.5px; border-bottom: 1px solid var(--border); }
.ds-carry-ghead .ds-price { font-size: 12.5px; font-weight: 700; color: var(--color-primary, #6E1620); background: var(--color-secondary-soft, #f6efda); border: 1px solid #ecdfc0; padding: 3px 10px; border-radius: 999px; }
html[data-theme="dark"] .ds-carry-ghead .ds-price { border-color: rgba(195,154,62,.35); }
.ds-scroll { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ds-table th { background: var(--secondary-bg); font-weight: 700; font-size: 13px; padding: 8px 8px; text-align: left; white-space: nowrap; border-bottom: 2px solid var(--border); }
.ds-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ds-table td.ds-c { text-align: center; white-space: nowrap; }
.ds-table td.ds-sum, .ds-table td.ds-c { font-variant-numeric: tabular-nums; }
.ds-table .ds-sum { font-weight: 700; color: #7b1fa2; white-space: nowrap; }
.ds-table .ds-sub td { background: #f3e5f5; font-weight: 800; border-top: 2px solid #ce93d8; }
.ds-table .ds-act { white-space: nowrap; text-align: right; }
.ds-addrow { margin: 10px 14px 14px; }
.ds-total { padding: 14px; text-align: center; font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(90deg, #4a148c, #7b1fa2); border-radius: var(--radius-lg); }
.ds-hist summary { cursor: pointer; font-weight: 700; padding: 10px 4px; font-size: 15px; }
.ds-hist-list { display: flex; flex-direction: column; gap: 6px; }
.ds-hist-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--text); font-family: inherit; cursor: pointer; }
.ds-hist-item b { font-size: 15px; }
.ds-hist-item span { font-size: 13px; color: var(--hint); }
.ds-sum-preview { padding: 10px 12px; border-radius: var(--radius-md); background: #f3e5f5; color: #4a148c; font-size: 16px; text-align: center; margin: 4px 0; }
.ds-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-md); }
.ds-filelbl { font-size: 12.5px; font-weight: 700; color: var(--hint); }
.ds-spec { font-size: 11.5px; color: var(--hint); margin-top: 2px; }
.ds-specnote { padding: 8px 12px; border-radius: var(--radius-md); background: var(--secondary-bg); color: var(--hint); font-size: 13.5px; font-weight: 600; }
#ds-contract-sel, #ds-spec, #ds-factory { width: 100%; padding: 10px 12px; font-size: 15px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--color-surface); color: var(--text); }
input.ds-auto { background: #f3e5f5; font-weight: 700; color: #4a148c; }
.ds-status { white-space: nowrap; }
.ds-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ds-pill .ds-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ds-pill.ds-stay { background: #fdecc8; color: #92600a; }
.ds-pill.ds-go { background: #dcf3e4; color: #1b7a44; }
.btn-xs { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; border: 0; font-family: inherit; cursor: pointer; }
.btn-xs.btn-go { background: #2EA66A; color: #fff; }
html[data-theme="dark"] .ds-pill.ds-stay { background: rgba(214,158,46,.22); color: #f0c674; }
html[data-theme="dark"] .ds-pill.ds-go { background: rgba(46,166,106,.22); color: #7fd6a2; }
html[data-theme="dark"] input.ds-auto { background: rgba(156,39,176,.18); color: #e1bee7; }
.mv-head.mv-daily { background: #f3e5f5; color: #6a1b9a; }
html[data-theme="dark"] .ds-table .ds-sub td { background: rgba(156,39,176,.18); border-top-color: rgba(206,147,216,.5); }
html[data-theme="dark"] .ds-table .ds-sum { color: #ce93d8; }
html[data-theme="dark"] .ds-sum-preview { background: rgba(156,39,176,.18); color: #e1bee7; }
html[data-theme="dark"] .mv-head.mv-daily { background: rgba(156,39,176,.18); color: #e1bee7; }
/* Под-переключатель внутри вкладки «Свод» (Пряжа / Хлопок) */
.sub-tabs { margin-top: 4px; margin-bottom: 10px; }
/* ===== Сплеш-экран (Apple-style) при открытии ===== */
.splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(130% 120% at 50% 32%, #7d1a26 0%, #4a0e16 58%, #2a070c 100%);
  opacity: 1; visibility: visible;
  transition: opacity .4s cubic-bezier(.4,0,.2,1), visibility .4s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.splash-inner::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 220px; height: 220px;
  transform: translateX(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(195,154,62,.30) 0%, rgba(195,154,62,0) 65%);
  animation: splashGlow 2.6s ease-in-out infinite;
}
/* Интро «Сборка системы»: модули учёта слетаются в сетку, «защёлкиваются» и
   сворачиваются в логотип, затем поднимаются название и подпись. */
.splash-logo-wrap { position: relative; width: 100px; height: 100px; display: grid; place-items: center; }
.splash-logo {
  width: 100px; height: 100px; border-radius: 26px; object-fit: cover;
  box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
  animation: splashLogo .55s cubic-bezier(.2,.7,.2,1.15) 1s both;
}
.splash-asm {
  position: absolute; inset: -44px; display: grid; place-content: center;
  grid-template-columns: repeat(3, 42px); grid-auto-rows: 42px; gap: 10px;
  opacity: 0; z-index: 2; pointer-events: none;
  animation: asmGrid 1.45s cubic-bezier(.4,0,.2,1) both;
}
.splash-tile {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(228,200,119,.42);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  animation: asmTile .5s cubic-bezier(.2,.8,.3,1.2) both;
}
.splash-tile svg { width: 22px; height: 22px; }
.splash-tile:nth-child(1) { animation-delay: .02s; }
.splash-tile:nth-child(2) { animation-delay: .10s; }
.splash-tile:nth-child(3) { animation-delay: .18s; }
.splash-tile:nth-child(4) { animation-delay: .26s; }
.splash-tile:nth-child(5) { animation-delay: .34s; }
.splash-tile:nth-child(6) { animation-delay: .42s; }
.splash-brand {
  margin-top: 20px; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .16em;
  animation: splashUp .5s cubic-bezier(.2,.7,.2,1) 1.28s both;
}
.splash-sub {
  margin-top: 6px; color: rgba(255,255,255,.72); font-size: 13px; letter-spacing: .07em;
  animation: splashUp .5s cubic-bezier(.2,.7,.2,1) 1.46s both;
}
.splash-slogan {
  margin-top: 16px; color: var(--color-secondary, #C39A3E);
  font-size: 14px; font-style: italic; letter-spacing: .03em;
  max-width: 320px; line-height: 1.4;
  animation: splashUp .55s cubic-bezier(.2,.7,.2,1) 1.6s both;
}
.splash-powered {
  margin-top: 36px; color: var(--color-secondary, #C39A3E);
  font-size: 12px; letter-spacing: .12em;
  animation: splashUp .55s cubic-bezier(.2,.7,.2,1) 1.74s both;
}
@keyframes splashLogo {
  0%   { opacity: 0; transform: scale(.6); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes splashUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes asmTile { from { opacity: 0; transform: translate(var(--dx,0), var(--dy,0)) scale(.5) rotate(var(--dr,0)); } to { opacity: 1; transform: none; } }
@keyframes asmGrid {
  0%   { opacity: 0; transform: scale(1); }
  16%  { opacity: 1; }
  58%  { opacity: 1; transform: scale(1); }
  82%  { opacity: 0; transform: scale(.6); }
  100% { opacity: 0; transform: scale(.6); }
}
@keyframes splashGlow { 0%,100% { opacity: .55; transform: translateX(-50%) scale(.92); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-brand, .splash-sub, .splash-tile, .splash-slogan, .splash-powered, .splash-inner::before { animation: none; }
  .splash-asm { display: none; }
}
/* Раздел «История»: бейдж количества заходов */
.visit-badge { background: var(--color-secondary, #C39A3E); color: #fff; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; align-self: flex-start; }
.wh-mini .val.sm { font-size: 12px; font-weight: 600; line-height: 1.25; }
/* Фильтр даты в своде */
.date-field { margin: 2px 0 12px; }
.date-field label { display: block; font-size: 12px; color: var(--color-muted, #94a3b8); margin-bottom: 4px; }
.date-field input { width: 100%; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; }

/* ============================================================
   GLASS THEME · Apple-style «матовое стекло» (v1.12.0)
   Цвета и вёрстка прежние — добавлен полупрозрачный «стеклянный»
   слой (backdrop-filter: blur) поверх панелей.
   Откат дизайна: удалить ВЕСЬ этот блок (и вернуть версию).
   ============================================================ */

/* Мягкий градиентный фон с бликами бренда, чтобы стекло «преломляло» свет */
html, body {
  background:
    radial-gradient(120% 90% at 12% -6%, rgba(195,154,62,.16) 0%, rgba(195,154,62,0) 42%),
    radial-gradient(120% 90% at 92% 3%, rgba(110,22,32,.14) 0%, rgba(110,22,32,0) 46%),
    radial-gradient(150% 120% at 50% 112%, rgba(110,22,32,.08) 0%, rgba(110,22,32,0) 55%),
    linear-gradient(165deg, #f6f4f1 0%, #eceef3 55%, #e9ebf1 100%);
  background-attachment: fixed;
}

:root {
  --glass-bg: rgba(255,255,255,.55);
  --glass-bg-strong: rgba(255,255,255,.70);
  --glass-bg-soft: rgba(255,255,255,.42);
  --glass-border: rgba(255,255,255,.60);
  --glass-blur: saturate(180%) blur(20px);
  --glass-shadow: 0 8px 30px rgba(27,31,36,.10), 0 2px 8px rgba(27,31,36,.06);
}

/* Общий рецепт «стекла» для панелей */
.wh-card, .stat, .table-wrap, .op,
.datecard, .analytics-card, .kpi-card, .el-rate-row, .el-chart,
.daily-chart, .rank-row, .trend-chart, .topnum-row, .best-factory,
.empty, .sumwrap, .number-chip {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Контейнеры вкладок / переключателей */
.tabs, .ya-tabs {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* Активные таб-кнопки — плотнее стекло */
.mode-tab.active, .ya-tab.active {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Внутренние ячейки карточек складов — лёгкое стекло */
.wh-mini .cell { background: var(--glass-bg-soft); }

/* Поля ввода — матовые */
.field input, .field select, input[type="search"], .date-field input {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Кнопки-призраки — стеклянные */
.btn-ghost {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: var(--glass-border);
}

/* Шапка — frosted бордовое стекло (цвет сохранён) */
#topbar {
  background: linear-gradient(135deg, rgba(110,22,32,.86) 0%, rgba(80,15,23,.90) 100%);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

/* Модалка — более плотное стекло, размытый фон-затемнение */
.modal {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
}
.modal-overlay {
  background: rgba(27,31,36,.34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Восстанавливаем акцентные (золотые) рамки, перекрытые общим рецептом */
.stat:first-child, .free-vol, .best-factory, .analytics-card.ya-grand { border-color: var(--color-secondary); }
.modal { border-top-color: var(--color-secondary); }

/* ============================================================
   РАЗДЕЛ «⚙️ Общие настройки» (v1.13.0)
   ============================================================ */
.settings-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: var(--space-lg);
  margin-bottom: 6px;
}
/* Закрытие месяца: акцентная карточка действия + бордовый кант у закрытых месяцев */
.mc-new {
  border-color: color-mix(in srgb, var(--color-secondary) 55%, var(--glass-border));
  box-shadow: 0 6px 22px -12px color-mix(in srgb, var(--color-secondary) 70%, transparent), var(--glass-shadow);
}
.mc-new .set-label { color: var(--color-secondary); }
.mc-card { border-left: 3px solid var(--color-primary); }
/* Детализация периода: строка продукта с потоком начало→приход→расход→конец */
.mc-prow { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--glass-border); }
.mc-prow:first-of-type { border-top: 0; }
.mc-pname { font-weight: 700; font-size: var(--font-caption); color: var(--color-text); }
.mc-pflow { font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.5; }
.mc-in { color: var(--color-success, #1e9e5a); }
.mc-out { color: var(--color-danger, #d43a2c); }

/* Операции по месяцам: сворачиваемые блоки (аккордеон) */
.month-group {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md, 12px);
  background: var(--glass-bg);
  margin-bottom: 8px;
  overflow: hidden;
}
.month-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
  font: inherit;
}
.month-head:active { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.mg-row1 { display: flex; align-items: center; gap: 8px; }
.mg-chev { color: var(--color-text-secondary); font-size: .85em; transition: transform .18s ease; }
.month-group.open .mg-chev { transform: rotate(90deg); }
.mg-title { font-weight: 700; }
.mg-cnt {
  margin-left: auto;
  font-size: var(--font-caption);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
  border-radius: 999px;
  padding: 1px 8px;
}
.mg-sum { font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.5; }
.month-body { display: none; padding: 0 8px 8px; }
.month-group.open .month-body { display: block; }

/* 🤖 Помощник склада (Уровень 2): подсказки из истории. Мягкая карточка, не тревожная. */
.assist { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
  box-shadow: var(--shadow-sm); padding: 12px 14px; margin: 4px 0 12px; border-left: 4px solid var(--color-secondary, #C39A3E); }
.assist.warn { border-left-color: #E0A400; }
.assist.alert { border-left-color: #D43A2C; }
.assist > summary { list-style: none; cursor: pointer; }
.assist > summary::-webkit-details-marker { display: none; }
.assist-head { display: flex; align-items: center; gap: 10px; }
.assist-hh { flex: 1; min-width: 0; }
.assist-caret { flex-shrink: 0; color: var(--color-text-secondary); font-size: 14px; transition: transform .18s ease; }
.assist:not([open]) .assist-caret { transform: rotate(-90deg); }
.assist-body { margin-top: 8px; }
.assist-ic { font-size: 22px; line-height: 1; }
.assist-title { font-size: 14px; font-weight: 800; color: var(--color-text-primary); }
.assist-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.assist-row { font-size: 13px; line-height: 1.5; color: var(--color-text-primary); padding: 7px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-secondary, #C39A3E) 12%, transparent); margin-top: 6px; }
.assist-row.warn { background: color-mix(in srgb, #E0A400 16%, transparent); }
.assist-row.alert { background: color-mix(in srgb, #D43A2C 14%, transparent); font-weight: 700; }
.assist-row.info { background: color-mix(in srgb, var(--color-text-secondary) 12%, transparent); }

/* Месяц как БОЛЬШОЙ РАЗДЕЛ: крупная карточка, тап → отдельный экран месяца. */
.months-hint { font-size: var(--font-caption); color: var(--color-text-secondary); margin: -2px 2px 10px; }
.month-cards { display: flex; flex-direction: column; gap: 10px; }
.month-card {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; font: inherit; cursor: pointer;
  background: var(--color-surface); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 14px 16px; transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.month-card:active { transform: scale(.99); box-shadow: var(--shadow-md); }
.mcard-main { min-width: 0; }
.mcard-title { font-size: 16px; font-weight: 800; color: var(--color-text-primary); }
.mcard-sum { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5; }
.mcard-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mcard-cnt { font-size: 13px; font-weight: 800; color: var(--color-primary);
  background: var(--color-secondary-soft, #f6efda); border-radius: 999px; padding: 3px 11px; }
.mcard-arrow { font-size: 22px; font-weight: 700; color: var(--color-primary); line-height: 1; }
html.lite .month-card { transition: none; }
html.lite .month-card:active { transform: none; }
/* Сводка на экране месяца (Приход · Расход · Остаток) — карточками в ряд. */
.mmonth-sum { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mms { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm); padding: 10px 8px; text-align: center; }
.mms span { display: block; font-size: 11px; color: var(--color-text-secondary); font-weight: 700; margin-bottom: 4px; }
.mms b { font-size: 15px; font-weight: 800; color: var(--color-text-primary); }
.set-label { font-size: var(--font-caption); color: var(--color-text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.set-hint { font-size: var(--font-caption); color: var(--color-text-secondary); margin-top: 8px; }
.seg-row { margin: 0; }
.notif-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.notif-pref-row:last-child { border-bottom: none; padding-bottom: 0; }
.notif-pref-row:first-child { padding-top: 0; }
.notif-pref-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
/* «Генератор контрактов»: карточка «Продавец» (заблокирована, не форма) + авто-сумма. */
.gen-lock { background: rgba(120,120,120,.08); border: 1px dashed var(--color-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.gen-lock-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin-bottom: 4px; }
.gen-lock-row { font-size: 14px; color: var(--color-text-primary); font-weight: 600; }
.gen-lock-row.muted { font-weight: 500; font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
.gen-total { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-background); font-size: 16px; font-weight: 800; color: var(--color-primary, #6E1620); font-variant-numeric: tabular-nums; }
.about-card .btn { margin-top: 12px; }
.about-name { font-size: 20px; font-weight: 800; color: var(--color-primary); letter-spacing: .04em; margin-bottom: 8px; }
.about-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.about-row:last-of-type { border-bottom: none; }
.about-row span { color: var(--color-text-secondary); font-size: var(--font-body); }
.about-row b { color: var(--color-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.about-copy { text-align: center; color: var(--color-text-secondary); font-size: var(--font-caption); margin-top: 12px; letter-spacing: .04em; }
.cl-list { display: flex; flex-direction: column; gap: 10px; }
.cl-item { border-left: 3px solid var(--color-secondary); padding: 2px 0 2px 10px; }
.cl-v { font-weight: 800; color: var(--color-primary); font-size: 13px; font-variant-numeric: tabular-nums; }
.cl-t { color: var(--color-text-primary); font-size: 14px; margin-top: 2px; }

/* ===== Печать «Свод склада»: ряд кнопок + полноэкранный предпросмотр ===== */
.print-row { margin-bottom: 8px; }
#print-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: #3a3d42;
}
#print-overlay .pp-bar {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
  /* Отступ сверху: часы/статус-бар телефона НЕ должны накрывать кнопки.
     Берём максимум из системной безопасной зоны и зоны Telegram-fullscreen
     (--tg-safe-area-inset-* задаёт сам Telegram при полноэкранном режиме). */
  padding: calc(8px + max(var(--safe-top, 0px), var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)))
           calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left));
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; border-bottom: 2px solid var(--color-secondary);
}
/* PWA на домашнем экране (iPhone): env(safe-area-inset-top) часто равен 0 —
   гарантированный запас под статус-бар, как у главной шапки (#topbar). */
@media (display-mode: standalone) {
  #print-overlay .pp-bar { padding-top: calc(8px + max(var(--safe-top, 0px), 54px)); }
}
#print-overlay .pp-top,
#print-overlay .pp-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#print-overlay .pp-tools { flex-wrap: wrap; }
#print-overlay .pp-title { font-weight: 700; font-size: 14px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#print-overlay .pp-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* Масштаб: − / % / + / «по ширине» — одной пилюлей, как значки РУ/ЎЗ на шапке. */
#print-overlay .pp-zoom {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 2px;
}
#print-overlay .pp-zbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; border: 0; border-radius: 999px;
  background: transparent; color: #fff; font: inherit; font-size: 20px; font-weight: 700; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#print-overlay .pp-zbtn:active { background: rgba(255,255,255,.24); }
#print-overlay .pp-zfit { border-left: 1px solid rgba(255,255,255,.35); border-radius: 0 999px 999px 0; margin-left: 2px; }
#print-overlay .pp-zval { min-width: 42px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
/* Прокручивается ОБЁРТКА (в обе стороны), а iframe растянут ровно под лист —
   поэтому один и тот же скролл/масштаб на iOS (где iframe сам раздвигается
   под содержимое), Android и ПК. */
#print-overlay .pp-scroll {
  flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  background: #525659; overscroll-behavior: contain; touch-action: pan-x pan-y;
}
#print-overlay #pp-frame { display: block; width: 100%; height: 100%; border: 0; background: #525659; }
/* Кнопки панели печати задаются напрямую, а не через .btn-primary/.btn-ghost —
   в Bordo + Tilla .btn-ghost прозрачный с бордовым текстом (расчёт на белую
   подложку) и на бордовой панели становится практически невидимым («сверху не
   видно кнопки»). Тот же приём, что уже у #role-badge/.lang-btn на шапке —
   всегда контрастно на бордо, независимо от темы. */
#print-overlay .pp-bar .btn { border-radius: 999px; box-shadow: none; flex-shrink: 0; }
#print-overlay #pp-print { background: var(--color-secondary); color: var(--color-primary-dark); border: none; }
#print-overlay #pp-pdf,
#print-overlay #pp-close { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
#print-overlay #pp-pdf:active,
#print-overlay #pp-close:active { background: rgba(255,255,255,.24); }

/* Маленькая кнопка-шестерёнка «Настройки» в шапке (справа от языка) */
.settings-btn {
  flex-shrink: 0;
  margin-left: 6px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: 15px; line-height: 1;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.settings-btn:active { transform: scale(.92); background: rgba(255,255,255,.30); }

/* ============================================================
   ТЁМНАЯ ТЕМА · [data-theme="dark"] (v1.13.0)
   Переопределяем дизайн-токены; бренд-акценты (бордо/золото) сохранены.
   Совместимые переменные (--bg/--text/--border…) тянутся из --color-*.
   ============================================================ */
html[data-theme="dark"] {
  --color-background: #14161a;
  --color-surface: #1e2127;
  --color-text-primary: #e8eaed;
  --color-text-secondary: #9aa0a8;
  --color-border: #2c3038;
  --color-muted: #7a818b;

  --glass-bg: rgba(36,39,46,.55);
  --glass-bg-strong: rgba(40,43,50,.74);
  --glass-bg-soft: rgba(36,39,46,.40);
  --glass-border: rgba(255,255,255,.10);
  --glass-shadow: 0 8px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 2px 6px rgba(0,0,0,.40), 0 8px 22px rgba(0,0,0,.35);
  --shadow-lg: 0 6px 16px rgba(0,0,0,.50), 0 14px 40px rgba(0,0,0,.45);
}
html[data-theme="dark"], html[data-theme="dark"] body {
  background:
    radial-gradient(120% 90% at 12% -6%, rgba(195,154,62,.12) 0%, rgba(195,154,62,0) 42%),
    radial-gradient(120% 90% at 92% 3%, rgba(110,22,32,.32) 0%, rgba(110,22,32,0) 48%),
    linear-gradient(165deg, #15171c 0%, #0e1014 100%);
  background-attachment: fixed;
  color: var(--color-text-primary);
}
/* Водяной знак в тёмной теме приглушаем сильнее */
/* Водяной знак в тёмной теме: инвертируем (белый фон JPG становится чёрным и
   сливается с фоном, контур логотипа — светлым), убираем «серый прямоугольник». */
html[data-theme="dark"] #watermark { opacity: .05; filter: grayscale(1) invert(1); }
/* Читаемость тёмной темы: заголовки секций и кнопка «изм.» были тёмно-бордовыми
   на чёрном (не переопределён --color-primary) — почти невидимы. Золото — принятый
   акцент тёмной темы. */
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .sum-title,
html[data-theme="dark"] .report-title,
html[data-theme="dark"] .ptz-hero-title,
html[data-theme="dark"] table.ledger th { color: #EAD9A8; }
html[data-theme="dark"] .icon-btn.edit { color: #E0BD5C; }
/* Входящее перемещение («в пути») — карточка на главном экране с Принять/Отклонить */
/* Входящее перемещение — заметная карточка-уведомление для омборчи. */
.tr-inbox { border: 1px solid rgba(21,101,192,.35); border-radius: 14px; margin: 10px 0; overflow: hidden; box-shadow: 0 4px 14px rgba(21,101,192,.20); animation: trPulse 2.6s ease-in-out infinite; }
.tr-inbox .tr-title { background: linear-gradient(90deg, #1565C0, #1e88e5); color: #fff; font-weight: 800; font-size: 15.5px; padding: 12px 14px; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tr-inbox .tr-body { font-size: 14px; padding: 10px 14px; line-height: 1.5; background: rgba(21,101,192,.06); }
.tr-inbox .tr-line { margin: 3px 0; }
.tr-inbox .tr-lbl { color: var(--color-text-secondary); font-weight: 700; }
.tr-inbox .tr-amount b { font-size: 15.5px; color: var(--color-text-primary); }
.tr-inbox .tr-hint { font-size: 12.5px; font-weight: 600; color: #10508f; background: rgba(21,101,192,.12); padding: 8px 14px; line-height: 1.4; }
.tr-inbox .tr-actions { display: flex; gap: 8px; padding: 10px 14px 12px; }
.tr-inbox .tr-actions .btn { flex: 1; padding: 13px 8px; font-size: 15px; font-weight: 800; }
@keyframes trPulse { 0%, 100% { box-shadow: 0 4px 14px rgba(21,101,192,.20); } 50% { box-shadow: 0 4px 22px rgba(21,101,192,.40); } }
html.lite .tr-inbox { animation: none; }
@media (prefers-reduced-motion: reduce) { .tr-inbox { animation: none; } }
html[data-theme="dark"] .tr-inbox .tr-body { background: rgba(33,120,210,.14); }
html[data-theme="dark"] .tr-inbox .tr-hint { background: rgba(33,120,210,.20); color: #9cc4f5; }
/* Статус исходящих перемещений для отправителя (⏳ в пути / ✅ принято / ❌ отклонено) */
.tr-outbox { border: 1px solid var(--color-border); border-radius: 12px; padding: 8px 12px; margin: 8px 0; background: var(--color-surface, #f4f4f6); }
.tr-out-title { font-weight: 800; font-size: 13px; color: var(--color-primary); margin-bottom: 4px; }
.tr-out-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--color-border); font-size: 12.5px; }
.tr-out-row:first-of-type { border-top: none; }
.tr-out-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-st { flex: none; font-weight: 800; font-size: 11.5px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.tr-st.st-wait { background: rgba(214,175,55,.18); color: #8a6300; }
.tr-st.st-ok { background: rgba(30,122,68,.14); color: #1E7A44; }
.tr-st.st-no { background: rgba(192,52,29,.12); color: #C0341D; }
html[data-theme="dark"] .tr-out-title { color: #EAD9A8; }
html[data-theme="dark"] .tr-st.st-wait { color: #E0BD5C; }
html[data-theme="dark"] .tr-st.st-ok { color: #4FC17E; }
html[data-theme="dark"] .tr-st.st-no { color: #F0715A; }
/* Крупная двуязычная «просто проверка» дневного объёма (РУС + ЎЗБ одновременно) */
.mv-check-big { background: #FFF7E6; border: 2px solid #E5B94E; border-radius: 14px; padding: 14px 14px 12px; margin: 2px 0 8px; color: #5a4300; }
.mv-check-big .t { font-size: 17px; font-weight: 800; line-height: 1.35; margin-bottom: 8px; }
.mv-check-big .uz { font-size: 15.5px; font-weight: 700; line-height: 1.35; border-top: 1px dashed rgba(160,120,20,.4); padding-top: 8px; color: #6b5410; }
.mv-check-big .num { color: #B25E09; white-space: nowrap; }
html[data-theme="dark"] .mv-check-big { background: rgba(214,175,55,.14); border-color: rgba(214,175,55,.5); color: #EAD9A8; }
html[data-theme="dark"] .mv-check-big .uz { color: #D9C68F; border-top-color: rgba(214,175,55,.35); }
html[data-theme="dark"] .mv-check-big .num { color: #F0B35C; }
/* Подсказка «это перемещение, а не расход» в форме ручного расхода */
.mv-transfer-hint { font-size: 12.5px; line-height: 1.45; background: rgba(21,101,192,.08); border: 1px solid rgba(21,101,192,.3); border-radius: 10px; padding: 8px 10px; margin: 8px 0 4px; }
html[data-theme="dark"] .mv-transfer-hint { background: rgba(33,120,210,.14); }
/* Настройки: сворачиваемые разделы (страница была ~8000px — пункт было не найти) */
.set-acc { margin-top: 6px; }
.set-acc > summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--color-surface, #f4f4f6); border: 1px solid var(--color-border); margin: 0 0 6px; }
.set-acc > summary::-webkit-details-marker { display: none; }
.set-acc .set-chev { font-size: 12px; color: var(--color-text-secondary); transition: transform .18s ease; }
.set-acc[open] .set-chev { transform: rotate(180deg); }
.set-acc[open] > summary { border-color: color-mix(in srgb, var(--color-primary, #6E1620) 35%, var(--color-border)); }
html[data-theme="dark"] .set-acc > summary { background: rgba(255,255,255,.04); }
/* Лёгкие фоновые подложки таблиц/строк — делаем их видимыми на тёмном */
html[data-theme="dark"] table.ledger th,
html[data-theme="dark"] table.ledger th:first-child { background: rgba(195,154,62,.10); }
html[data-theme="dark"] .datecard-head { background: rgba(195,154,62,.10); }
html[data-theme="dark"] .dc.end { background: rgba(195,154,62,.10); }

/* ============================================================
   ЭМОЦИИ И ПОЛИРОВКА UX (v1.19.0)
   Чистый фронт: приветствие, аватары, празднование, скелетон,
   плавные появления, липкие действия модалки. Уважают reduced-motion.
   ============================================================ */

/* Приветствие по времени суток */
.greeting {
  font-size: 14px; font-weight: 700; color: var(--color-text-primary);
  letter-spacing: -.01em; margin: 2px 2px 6px;
  animation: fadeUp .4s ease both;
}

/* Буквенный аватар фабрики */
.wh-head { display: flex; align-items: center; gap: var(--space-sm); }
.wh-avatar {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 130%);
  box-shadow: 0 2px 6px rgba(110,22,32,.25);
}
.wh-head .wh-name { flex: 1; min-width: 0; }
/* Имя закреплённого Омборчи под названием склада — аккуратная подпись */
.wh-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* ===== Цвет фабрики: каждая карточка склада — своя мягкая пастель =====
   Цвет привязан к id фабрики (класс wh-c0…wh-c7 из app.js), поэтому у каждой
   фабрики он ПОСТОЯННЫЙ — пожилым проще узнавать «свою» карточку по цвету.
   Фон светлый пастельный (текст остаётся тёмным и читабельным), слева цветная
   полоса, аватар и название — в цвет фабрики. */
.wh-card[class*=" wh-c"] {
  background: linear-gradient(150deg, var(--whc-bg) 0%, rgba(255,255,255,.92) 130%);
  border-left: 6px solid var(--whc-a);
}
.wh-card[class*=" wh-c"] .wh-avatar { background: var(--whc-a); box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.wh-card[class*=" wh-c"] .wh-name { color: var(--whc-a); }
.wh-card[class*=" wh-c"] .wh-mini .cell { background: rgba(255,255,255,.62); }
.wh-c0 { --whc-a: #6E1620; --whc-bg: #F9EDEE; } /* бордо (фирменный) */
.wh-c1 { --whc-a: #1E6B45; --whc-bg: #EAF5EE; } /* зелёный */
.wh-c2 { --whc-a: #2A5D8F; --whc-bg: #EAF2F9; } /* синий */
.wh-c3 { --whc-a: #8A6300; --whc-bg: #FAF3DF; } /* золото */
.wh-c4 { --whc-a: #5B3E8E; --whc-bg: #F1EDF9; } /* фиолетовый */
.wh-c5 { --whc-a: #A34A2A; --whc-bg: #FAEFE8; } /* терракота */
.wh-c6 { --whc-a: #0E6E6E; --whc-bg: #E7F5F4; } /* бирюза */
.wh-c7 { --whc-a: #973A5B; --whc-bg: #F9EDF2; } /* малина */
/* Тёмная тема: лёгкая тонировка цветом фабрики, текст — как обычно (светлый). */
html[data-theme="dark"] .wh-card[class*=" wh-c"] {
  background: linear-gradient(150deg, var(--whc-dk) 0%, rgba(255,255,255,.03) 130%);
  border-left-color: var(--whc-ad, var(--whc-a));
}
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-name { color: var(--whc-ad, #fff); }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-avatar { background: var(--whc-ad, var(--whc-a)); color: #1b1f24; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .wh-c0 { --whc-dk: rgba(158,42,58,.20); --whc-ad: #E8A2AC; }
html[data-theme="dark"] .wh-c1 { --whc-dk: rgba(30,107,69,.20); --whc-ad: #93D8B3; }
html[data-theme="dark"] .wh-c2 { --whc-dk: rgba(42,93,143,.22); --whc-ad: #9CC4E8; }
html[data-theme="dark"] .wh-c3 { --whc-dk: rgba(138,99,0,.22); --whc-ad: #E5C56E; }
html[data-theme="dark"] .wh-c4 { --whc-dk: rgba(91,62,142,.24); --whc-ad: #C3AEE8; }
html[data-theme="dark"] .wh-c5 { --whc-dk: rgba(163,74,42,.22); --whc-ad: #E8AD90; }
html[data-theme="dark"] .wh-c6 { --whc-dk: rgba(14,110,110,.22); --whc-ad: #8DD6D6; }
html[data-theme="dark"] .wh-c7 { --whc-dk: rgba(151,58,91,.22); --whc-ad: #E8A6BF; }
.sort-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 700; align-self: center; margin-right: 2px; }
/* Компактная карточка экспорт-контракта */
.exp-card { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 6px solid var(--color-primary); border-radius: 16px; padding: 13px 15px; margin-bottom: 11px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(45,10,20,.05), 0 8px 20px rgba(45,10,20,.07); transition: transform .14s ease, box-shadow .16s ease; }
.exp-card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(45,10,20,.07), 0 14px 30px rgba(45,10,20,.11); }
.exp-card:active { transform: scale(.995); }
html.lite .exp-card { transition: none; box-shadow: var(--shadow-sm); }
html.lite .exp-card:hover { transform: none; }
.exp-card-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.exp-num { font-weight: 800; font-size: 16px; color: var(--color-primary-dark, #4a0e16); white-space: nowrap; }
.exp-buyer { font-size: 14px; font-weight: 800; color: var(--color-primary, #6E1620); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.exp-sub { font-size: 12.5px; color: var(--color-text-secondary); margin: 3px 0 8px; }
.exp-price { color: #8a6300; font-weight: 800; font-size: 13.5px; }
/* Цена контракта на карточке списка: единая цена или блок цен по спецификациям. */
.exp-price-row { font-size: 12.5px; color: var(--color-text-primary); margin: -2px 0 8px; }
.exp-price-row b { color: #8a6300; font-weight: 800; }
.exp-specs { margin: -2px 0 8px; padding: 7px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-secondary, #C39A3E) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-secondary, #C39A3E) 30%, transparent); }
.exp-specs-h { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--color-text-secondary); text-transform: uppercase; margin-bottom: 4px; }
.exp-spec { font-size: 12.5px; color: var(--color-text-primary); line-height: 1.7; }
.exp-spec .es-n { font-weight: 800; color: var(--color-primary); }
.exp-spec b { color: #8a6300; font-weight: 800; }
html[data-theme="dark"] .exp-price-row b, html[data-theme="dark"] .exp-spec b { color: var(--color-secondary, #C39A3E); }
.exp-progress { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 4px; }
.exp-bar { height: 10px; border-radius: 999px; background: var(--color-secondary-soft, #f6efda); overflow: hidden; margin-bottom: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.exp-bar span { display: block; height: 100%; background: var(--color-secondary, #C39A3E); border-radius: 999px; }
.exp-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.exp-figs .f { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; padding: 7px 10px; border-radius: 10px; background: var(--color-surface, #f4f4f6); border: 1px solid var(--color-border); }
.exp-figs .f-ship { background: rgba(30,122,68,.10); border-color: rgba(30,122,68,.30); }
.exp-figs .f-rem  { background: rgba(195,154,62,.15); border-color: rgba(195,154,62,.36); }
.exp-figs .f-paid { background: rgba(21,101,192,.10); border-color: rgba(21,101,192,.30); }
.exp-figs .f-debt.neg { background: rgba(192,52,29,.12); border-color: rgba(192,52,29,.34); }
.exp-figs .f-debt.pos { background: rgba(30,122,68,.10); border-color: rgba(30,122,68,.30); }
html[data-theme="dark"] .exp-num, html[data-theme="dark"] .exp-buyer { color: #EAD9A8; }
html[data-theme="dark"] .exp-price { color: var(--color-secondary, #C39A3E); }
.exp-figs .f .k { color: var(--color-text-secondary); white-space: nowrap; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.exp-figs .f .v { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-figs .f-ship .v { color: #1E7A44; }
.exp-figs .f-rem  .v { color: #8a6300; }
.exp-figs .f-paid .v { color: #1565C0; }
.exp-figs .f .v.neg { color: #C0341D; }
.exp-figs .f .v.pos { color: #1E7A44; }
html[data-theme="dark"] .exp-figs .f { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .exp-figs .f-ship { background: rgba(46,160,90,.17); border-color: rgba(46,160,90,.34); }
html[data-theme="dark"] .exp-figs .f-rem  { background: rgba(195,154,62,.20); border-color: rgba(195,154,62,.40); }
html[data-theme="dark"] .exp-figs .f-paid { background: rgba(33,120,210,.17); border-color: rgba(33,120,210,.34); }
html[data-theme="dark"] .exp-figs .f-debt.neg { background: rgba(210,70,50,.18); border-color: rgba(210,70,50,.38); }
html[data-theme="dark"] .exp-figs .f-debt.pos { background: rgba(46,160,90,.17); border-color: rgba(46,160,90,.34); }
html[data-theme="dark"] .exp-figs .f-ship .v { color: #4FC17E; }
html[data-theme="dark"] .exp-figs .f-rem  .v { color: #E0BD5C; }
html[data-theme="dark"] .exp-figs .f-paid .v { color: #5FA8F0; }
html[data-theme="dark"] .exp-figs .f .v.neg { color: #F0715A; }
html[data-theme="dark"] .exp-figs .f .v.pos { color: #4FC17E; }
.exp-badge { font-size: 11px; font-weight: 800; color: #fff; background: #1E7A44; border-radius: 999px; padding: 2px 9px; vertical-align: middle; white-space: nowrap; flex: none; }
/* Цвет карточки контракта по состоянию оплаты — чтобы было понятно сразу */
.exp-card.st-paid { border-left-color: #1E7A44; background: rgba(30,122,68,.11); }
.exp-card.st-debt { border-left-color: #C0341D; background: rgba(192,52,29,.12); }
.exp-card.st-advance { border-left-color: #1565C0; background: rgba(21,101,192,.11); }
.exp-card.st-new { border-left-color: #8a8f98; background: rgba(138,143,152,.08); }
.exp-badge.b-paid { background: #1E7A44; }
.exp-badge.b-debt { background: #C0341D; }
.exp-badge.b-advance { background: #1565C0; }
.exp-badge.b-new { background: #6E7780; }
.exp-badge.b-closed { background: #6E7780; }
.exp-legend { font-size: 11.5px; color: var(--color-text-secondary); font-weight: 600; margin: 0 2px 8px; }
/* Шапка-итоги по всем контрактам — понятными строками */
.exp-dash { background: rgba(128,128,128,.08); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 13px; margin: 2px 0 8px; }
.exp-dash-title { font-size: 12px; font-weight: 800; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.exp-dash-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--color-border); }
.exp-dash-row .dk { font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); min-width: 0; }
.exp-dash-row .dv { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-dash-row .dv.neg { color: #C0341D; }
.exp-dash-row .dv.pos { color: #1E7A44; }
/* (старый стиль шапки-итогов, на случай переиспользования) */
.exp-summary { display: flex; gap: 8px; margin: 2px 0 8px; }
.exp-summary .es-item { flex: 1; background: rgba(128,128,128,.10); border-radius: 10px; padding: 8px 6px; text-align: center; min-width: 0; }
.es-k { display: block; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.es-v { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.es-v.neg { color: #C0341D; } .es-v.pos { color: #1E7A44; }
/* Должники (свёрнутый блок) */
.exp-debtors { margin: 0 0 9px; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 11px; background: rgba(192,52,29,.06); }
.exp-debtors > summary { font-size: 13px; font-weight: 800; color: #C0341D; cursor: pointer; }
.exp-debtors .ed-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0 0; }
.exp-debtors .ed-row .b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); font-weight: 600; }
.exp-debtors .ed-row .d { color: #C0341D; font-weight: 800; white-space: nowrap; }
.exp-nodebt { font-size: 12.5px; color: #1E7A44; font-weight: 700; margin: 0 2px 9px; }
/* Полоса прогресса — цвет по статусу оплаты */
.exp-card.st-paid .exp-bar span { background: #1E7A44; }
.exp-card.st-debt .exp-bar span { background: #C0341D; }
.exp-card.st-advance .exp-bar span { background: #1565C0; }
/* Шапка контракта: крупный флаг + покупатель (солидно) */
.exp-detail-buyer { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--color-primary-dark, #4a0e16); margin: 3px 0 4px; text-align: center; }
.exp-detail-buyer .exp-flag { font-size: 26px; line-height: 1; }
html[data-theme="dark"] .exp-detail-buyer { color: #EAD9A8; }
.transport-hint { font-size: 12px; color: var(--color-text-secondary); margin: -4px 0 10px; line-height: 1.35; }
.transport-hint.on { color: var(--color-primary, #6E1620); font-weight: 700; font-size: 13px; }
html[data-theme="dark"] .transport-hint.on { color: #EAD9A8; }
/* Импорт: № контракта + ИДН + страна — крупно и сразу видно */
.imp-id-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.imp-num { font-weight: 800; font-size: 19px; color: var(--color-primary-dark, #4a0e16); }
.imp-idn { font-weight: 800; font-size: 17px; color: var(--color-primary, #6E1620); }
.imp-country-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.imp-country { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
html[data-theme="dark"] .imp-num, html[data-theme="dark"] .imp-idn { color: #EAD9A8; }
.imp-detail-header { text-align: center; margin: 4px 0 6px; }
.imp-detail-idrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 16px; }
.imp-detail-num { font-weight: 900; font-size: 22px; color: var(--color-primary-dark, #4a0e16); }
.imp-detail-idn { font-weight: 800; font-size: 18px; color: var(--color-primary, #6E1620); }
.imp-detail-country { font-size: 16px; font-weight: 700; margin-top: 4px; color: var(--color-text-primary); }
html[data-theme="dark"] .imp-detail-num, html[data-theme="dark"] .imp-detail-idn { color: #EAD9A8; }
.kgtable td.nowrap { white-space: nowrap; }
.stor-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; border-top: 1px solid var(--color-border); }
.stor-row:first-child { border-top: 0; }
.stor-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stor-row b.pos { color: #1E7A44; }
/* Сегментные переключатели (фильтр/сортировка) — аккуратный iOS-style */
.seg-full { display: flex; width: 100%; gap: 3px; background: rgba(128,128,128,.14); border-radius: 11px; padding: 3px; margin-bottom: 7px; }
.seg-btn { flex: 1; min-width: 0; border: none; background: transparent; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; padding: 7px 4px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s; }
.seg-btn.on { background: var(--color-primary, #6E1620); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* На узких экранах сегментные вкладки ужимаются, чтобы подписи с счётчиками
   («Актуальные (12)») не обрезались многоточием. */
@media (max-width: 420px) {
  .seg-btn { font-size: 11px; padding: 7px 2px; letter-spacing: -.01em; }
}
.exp-card.exp-closed { opacity: .72; border-left-color: #1E7A44; }
/* Меню «Файлы экспорта» */
.fmenu { display: flex; flex-direction: column; gap: 8px; }
.fmenu .btn { text-align: left; height: auto; padding: 11px 14px; line-height: 1.3; white-space: normal; font-weight: 700; }
.fmenu-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--color-text-secondary); margin-top: 2px; }
/* KPI-карточки аналитики экспорта: ярлык+значение в строку, подпись снизу */
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 4px; }
@media (min-width: 560px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
.kpi { background: var(--color-background); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: 9px 12px; min-width: 0; }
.kpi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.kpi-label { font-weight: 700; font-size: 13px; color: var(--color-text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-val { font-weight: 800; font-size: 18px; color: var(--color-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; letter-spacing: -.01em; }
.kpi-val.pos { color: #1E7A44; }
.kpi-val.neg { color: #C0341D; }
.kpi-sub { font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); margin-top: 2px; }
.wh-stopped {
  display: inline-block; font-size: 11px; font-weight: 800; color: #fff;
  background: #9a6a00; border-radius: 999px; padding: 1px 8px; vertical-align: middle;
  letter-spacing: .01em; white-space: nowrap;
}
.wh-keeper {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 650; line-height: 1.25;
  color: var(--color-primary, #6E1620);
  letter-spacing: .005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.wh-keeper .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--color-secondary, #C39A3E);
  box-shadow: 0 0 0 3px rgba(195,154,62,.18);
}

/* Плавное появление контента */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wh-card, .stat, .analytics-card, .settings-card, .datecard, .sumwrap,
.kpi-card, .rank-row, .el-rate-row, .op, .best-factory, .empty, .usd-banner {
  animation: fadeUp .28s ease both;
}

/* Празднование успеха: ✓ по центру */
.celebrate {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; pointer-events: none;
  transition: opacity .35s ease;
}
.celebrate.hide { opacity: 0; }
.celebrate-badge {
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 50px; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--color-success) 0%, #15803d 100%);
  box-shadow: 0 12px 40px rgba(30,158,90,.45), 0 0 0 10px rgba(30,158,90,.14);
  animation: celebratePop .45s cubic-bezier(.2,.8,.2,1.4) both;
}
.celebrate-text {
  background: rgba(27,31,36,.82); color: #fff; font-weight: 700; font-size: 14px;
  padding: 7px 16px; border-radius: 999px;
  animation: fadeUp .4s ease .08s both;
}
@keyframes celebratePop {
  0% { opacity: 0; transform: scale(.3); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Скелетон-загрузка */
.skeleton-wrap { display: flex; flex-direction: column; gap: var(--space-md); }
.skeleton-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.sk-line {
  height: 13px; border-radius: 7px; width: 100%;
  background: linear-gradient(90deg, rgba(120,120,120,.14) 25%, rgba(120,120,120,.28) 37%, rgba(120,120,120,.14) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.sk-line.sk-w60 { width: 60%; }
.sk-line.sk-w40 { width: 40%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Липкие кнопки действий внизу модалки + удобный тач */
.modal-actions {
  position: sticky; bottom: calc(-1 * var(--space-xl));
  background: var(--color-surface);
  padding-top: var(--space-md);
  margin-bottom: calc(-1 * var(--space-xl));
  padding-bottom: var(--space-xl);
}
.modal-actions .btn { padding: 14px 16px; }

/* Лёгкий «блеск» на карточке лучшей фабрики */
.best-factory { position: relative; overflow: hidden; }
.best-factory::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: shine 3.4s ease-in-out infinite;
}
html[data-theme="dark"] .best-factory::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .greeting, .wh-card, .stat, .analytics-card, .settings-card, .datecard, .sumwrap,
  .kpi-card, .rank-row, .el-rate-row, .op, .best-factory, .empty, .usd-banner,
  .celebrate-badge, .celebrate-text, .sk-line { animation: none !important; }
  .best-factory::after { display: none; }
}

/* ============================================================
   АНИМАЦИИ v1.21.0 (фронт-онли, под prefers-reduced-motion)
   ============================================================ */

/* #1 Разворот карточки склада в экран */
@keyframes viewExpand { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
#view.view-expand { animation: viewExpand .32s cubic-bezier(.2,.7,.2,1) both; transform-origin: center top; }

/* #2 Лесенка появления карточек — задержка задаётся inline (animation-delay) */

/* #4 Золотое свечение при нажатии (выбран вариант 5 из пяти показанных).
   Лёгкое сжатие + вспышка золотого свечения вокруг кнопки — вспышку добавляет
   JS (см. bindPressGlow() в app.js): при pointerdown вставляет .glow-элемент,
   он сам себя убирает после анимации. position:relative нужен, чтобы .glow
   (position:absolute) позиционировался относительно самой кнопки. */
.btn, .tab, .pos-chip, .number-chip, .mode-tab, .ya-tab, .icon-btn, .lang-btn, .settings-btn {
  position: relative;
  transition: transform .14s cubic-bezier(.34,1.2,.64,1), box-shadow .2s ease, background .2s ease, opacity .18s ease;
}
.btn:active, .tab:active, .pos-chip:active, .number-chip:active,
.mode-tab:active, .ya-tab:active, .icon-btn:active, .lang-btn:active, .settings-btn:active {
  transform: scale(.95);
}
.press-glow {
  position: absolute; inset: -8px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(195,154,62,.55);
  animation: pressGlowPulse .5s ease-out forwards;
}
@keyframes pressGlowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(195,154,62,.55); }
  100% { box-shadow: 0 0 14px 6px rgba(195,154,62,0); }
}
@media (prefers-reduced-motion: reduce) {
  .press-glow { animation: none; display: none; }
}

/* #6 Рост баров (через transform — не влияет на разметку) */
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growRight { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.daily-chart .bar, .el-col-bar { transform-origin: bottom; animation: growUp .5s cubic-bezier(.2,.8,.2,1) both; }
.rank-bar-fill, .ya-wh-bar-fill, .topnum-fill, .el-bar-fill { transform-origin: left; animation: growRight .6s cubic-bezier(.2,.8,.2,1) both; }

/* #7 Плавный морфинг темы (включается на ~0.4с при переключении) */
html.theme-morph, html.theme-morph * {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important;
}

/* #9 Скелетон появляется мягко (контент уже уезжает через fadeUp) */
.skeleton-wrap { animation: fadeUp .2s ease both; }

/* #10 Тост с полоской автозакрытия */
.toast { overflow: hidden; }
.toast-msg { position: relative; z-index: 1; }
.toast-prog {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: rgba(255,255,255,.55); transform-origin: left;
  animation: toastProg 2.2s linear forwards;
}
@keyframes toastProg { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  #view.view-expand, .daily-chart .bar, .el-col-bar,
  .rank-bar-fill, .ya-wh-bar-fill, .topnum-fill, .el-bar-fill,
  .skeleton-wrap, .toast-prog { animation: none !important; }
  html.theme-morph, html.theme-morph * { transition: none !important; }
}

/* ============================================================
   ПРИЯТНЫЕ МИКРО-АНИМАЦИИ v1.22.0 (деликатные, под reduced-motion)
   ============================================================ */

/* Плавные вкладки + мягкий «поп» активной */
.tab { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.tab.active, .mode-tab.active, .ya-tab.active { animation: tabPop .26s cubic-bezier(.2,.8,.2,1.2) both; }
@keyframes tabPop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Мягкое затемнение фона модалки (дополняет slide-up самой модалки) */
.modal-overlay:not(.hidden) { animation: overlayFade .25s ease both; }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }

/* Плавное свечение поля при фокусе */
.field input, .field select, input[type="search"], .date-field input {
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.field input:focus, .field select:focus, input[type="search"]:focus, .date-field input:focus {
  box-shadow: 0 0 0 3px rgba(195,154,62,.22);
}

/* «Поп» чипа при выборе (номера пряжи / позиции) */
.number-chip.on, .pos-chip[data-on="1"] { animation: chipPop .24s cubic-bezier(.2,.8,.2,1.3) both; }
@keyframes chipPop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Пульс значения курса при обновлении */
.usd-rate.pulse-once { animation: pulseOnce .7s ease; }
@keyframes pulseOnce {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); text-shadow: 0 0 12px rgba(195,154,62,.55); }
  100% { transform: scale(1); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tab.active, .mode-tab.active, .ya-tab.active,
  .modal-overlay:not(.hidden), .number-chip.on, .pos-chip[data-on="1"],
  .usd-rate.pulse-once { animation: none !important; }
}

/* ===== Объёмные вкладки аналитики: тактильные кнопки разделов =====
   Размещено после всех правил .ya-tab (стекло/нажатие/поп), чтобы переопределить их. */
/* Неактивные вкладки — приподнятые «плитки» (раньше были плоским текстом без фона). */
.ya-tab {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 4px rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.07);
}
/* Активная вкладка — залита фирменным бордо, явно выделяется (чувствуется переход). */
.ya-tab.active {
  background: var(--color-primary);
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.08));
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(110,22,32,.30), 0 10px 22px rgba(110,22,32,.18);
}
/* ===== Тематические вкладки аналитики: иконка + цвет фона активной + анимация по теме ===== */
.ya-tab { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ya-tab .ya-ic { display: inline-block; font-size: 16px; line-height: 1; }
/* Выработка 🧵 — зелёный «рост» */
.ya-tab.active[data-yatab="production"] { background: linear-gradient(180deg, #2bb177, #1e9e5a); border-color: #1e9e5a; box-shadow: 0 4px 10px rgba(30,158,90,.30), 0 10px 22px rgba(30,158,90,.18); }
/* Угар ♻️ — переработанный хлопок/мусор, коричневый */
.ya-tab.active[data-yatab="ugar"] { background: linear-gradient(180deg, #9a7b46, #6f5631); border-color: #6f5631; box-shadow: 0 4px 10px rgba(111,86,49,.32), 0 10px 22px rgba(111,86,49,.20); }
/* Электроэнергия ⚡ — электрический золотисто-жёлтый со свечением */
.ya-tab.active[data-yatab="electricity"] { background: linear-gradient(180deg, #e8a91e, #c8870f); border-color: #c8870f; box-shadow: 0 4px 10px rgba(200,135,15,.32), 0 0 16px rgba(242,194,0,.5); }
/* Тематические анимации-реакции при выборе вкладки (нажатие) — по смыслу раздела */
.ya-tab.active[data-yatab="balance"] .ya-ic { animation: yaDrop .55s cubic-bezier(.2,.8,.2,1.4) both; }
.ya-tab.active[data-yatab="production"] .ya-ic { animation: yaWind .7s cubic-bezier(.2,.7,.2,1) both; }
.ya-tab.active[data-yatab="ugar"] .ya-ic { animation: yaRecycle .75s ease-in-out both; }
.ya-tab.active[data-yatab="electricity"] .ya-ic { animation: yaZap .6s ease-out both; }
@keyframes yaDrop { 0% { transform: translateY(-9px) scale(.7); opacity: .4; } 60% { transform: translateY(2px) scale(1.14); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
@keyframes yaWind { 0% { transform: rotate(0) scale(.85); } 70% { transform: rotate(380deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes yaRecycle { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes yaZap { 0% { transform: scale(1); } 15% { transform: scale(1.35) rotate(-12deg); filter: brightness(1.8); } 40% { transform: scale(1.12) rotate(10deg); } 60% { transform: rotate(-6deg); } 100% { transform: rotate(0) scale(1); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .ya-tab .ya-ic { animation: none !important; } }
/* Нажатие — вкладка «вдавливается»: тень схлопывается (вместе с общим scale .92). */
.ya-tab:active {
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
}

/* ===== «Себестоимость» — крупный выделенный раздел (золотая тема + монета) ===== */
/* Вкладка заметна даже неактивной: золотая рамка/текст. */
.ya-tab.ya-cost {
  grid-column: 1 / -1; /* большой важный раздел — на всю ширину строки вкладок */
  border: 1px solid color-mix(in srgb, var(--color-secondary) 65%, var(--glass-border));
  color: var(--color-secondary);
  font-weight: 800;
  font-size: calc(var(--font-body) + 1px);
  padding: 18px 12px;
}
.ya-tab.active[data-yatab="cost"] {
  background: linear-gradient(180deg, #e7c14a, #c39a3e);
  border-color: #b8860b; color: #3a2a05;
  box-shadow: 0 4px 10px rgba(195,154,62,.38), 0 0 18px rgba(231,193,74,.55);
}
.ya-tab.active[data-yatab="cost"] .ya-ic { animation: yaCoin .7s ease-in-out both; }
@keyframes yaCoin {
  0% { transform: rotateY(0) scale(.9); }
  50% { transform: rotateY(180deg) scale(1.18); }
  100% { transform: rotateY(360deg) scale(1); }
}
.cost-intro {
  font-size: var(--font-caption); color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-radius: 10px; padding: 8px 12px; margin: 8px 0;
}
/* Карточка месяца — крупная, золотой кант сверху, «герой» — себестоимость за кг. */
.cost-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: var(--space-lg);
  margin-bottom: 12px;
  animation: costIn .28s ease both;
}
.cost-card.cost-empty { border-top-color: color-mix(in srgb, var(--color-secondary) 40%, var(--glass-border)); opacity: .96; }
.cost-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cost-month { font-size: 17px; font-weight: 800; }
.cost-perkg { text-align: right; line-height: 1.1; }
.cost-perkg span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); }
.cost-perkg b { font-size: 20px; font-weight: 900; color: var(--color-secondary); }
.cost-perkg i.cost-usd { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: #1e7a44; margin-top: 1px; }
html[data-theme="dark"] .cost-perkg i.cost-usd { color: #6fdc97; }
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cost-cell { background: color-mix(in srgb, var(--color-text-secondary) 7%, transparent); border-radius: 10px; padding: 8px 10px; }
.cost-cell .cl { font-size: 11px; color: var(--color-text-secondary); }
.cost-cell .cv { font-size: 15px; font-weight: 700; margin-top: 2px; }
.cost-cell.cost-prod { background: color-mix(in srgb, #1e9e5a 14%, transparent); }
.cost-cell.cost-prod .cv { color: #1e7a44; }
.cost-cell.cost-total { grid-column: 1 / -1; background: color-mix(in srgb, var(--color-secondary) 16%, transparent); }
.cost-cell.cost-total .cv { color: var(--color-primary); }
@keyframes costIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.lite .cost-card { animation: none; }
html[data-theme="dark"] .cost-cell.cost-prod .cv { color: #6fdc97; }
/* Себестоимость: 2 уровня (месяцы → склады/офис) */
.cost-open { display: flex; gap: 8px; margin: 8px 0; }
.cost-open input[type="month"] { flex: 1; min-width: 0; }
button.cost-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: block; }
.cost-month-card .cost-tap { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--color-secondary); }
.cost-month-card:active { transform: scale(.99); }
.cost-month.sm { font-size: 15px; }
.cost-summary { border-top-width: 4px; background: color-mix(in srgb, var(--color-secondary) 9%, var(--glass-bg)); }
.cost-hero { text-align: center; padding: 4px 0 12px; }
.cost-hero-l { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); }
.cost-hero-big { font-size: 30px; font-weight: 900; line-height: 1.1; color: var(--color-secondary); margin-top: 4px; }
.cost-hero-usd { font-size: 16px; font-weight: 800; color: #1e7a44; margin-top: 2px; }
html[data-theme="dark"] .cost-hero-usd { color: #6fdc97; }
.cost-office { border-top-color: var(--color-primary); }
.cost-wh .cost-cell.cost-prod { grid-column: 1 / -1; } /* выработка склада — на всю ширину */
.cost-wh .cost-cell.cost-alloc { grid-column: 1 / -1; background: color-mix(in srgb, #1565c0 12%, transparent); }
.cost-wh .cost-cell.cost-alloc .cv { color: #1565c0; }
.cost-distrib { border-top-color: #1565c0; }
.cost-distrib .cost-perkg b { color: #1565c0; }
/* Прочие расходы — компактный список статей */
.oth-list { margin-top: 8px; }
.oth-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-top: 1px dashed var(--glass-border); font-size: 14px; }
.oth-row:first-child { border-top: 0; }
.oth-name { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--color-text); }
.oth-name > b { font-weight: 600; }
.oth-perkg { font-style: normal; font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.oth-amt { font-weight: 700; white-space: nowrap; }
.cost-rate { border-top-color: #1565c0; }
.cost-rate .cost-perkg b { color: #1565c0; }
.oth-del { width: 22px; height: 22px; border: 0; background: transparent; color: var(--color-danger, #d43a2c); font-size: 18px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.oth-total { border-top: 2px solid var(--glass-border); margin-top: 2px; font-weight: 800; }
.oth-total .oth-name, .oth-total .oth-amt { color: #1565c0; }
html[data-theme="dark"] .oth-total .oth-name, html[data-theme="dark"] .oth-total .oth-amt { color: #7eb6f0; }
.cost-manual { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--color-secondary); border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.cost-auto { font-size: 10px; font-weight: 700; color: #1565c0; background: #e7f0fb; border: 1px solid #bcd6f5; border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.cost-novat { font-size: 9.5px; font-weight: 700; color: #1e7a44; background: #e6f4ec; border: 1px solid #b7e0c6; border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
html[data-theme="dark"] .cost-novat, :root[data-theme="dark"] .cost-novat { color: #7fd6a2; background: rgba(30,122,68,.18); border-color: rgba(127,214,162,.4); }
html[data-theme="dark"] .cost-auto, :root[data-theme="dark"] .cost-auto { color: #7fb3f0; background: rgba(21,101,192,.18); border-color: rgba(124,179,240,.4); }
html[data-theme="dark"] .cost-wh .cost-cell.cost-alloc .cv { color: #7eb6f0; }

/* ===== Телефон ответственного (Омборчи) на карточке склада ===== */
.wh-phone { margin-top: -2px; }
.phone-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(30,158,90,.12); color: var(--color-success);
  border: 1px solid rgba(30,158,90,.30);
  border-radius: 999px; padding: 6px 12px;
  font-size: var(--font-caption); font-weight: 700; cursor: pointer;
  font-family: inherit; max-width: 100%;
}
.phone-chip.add { background: var(--glass-bg, rgba(255,255,255,.5)); color: var(--color-text-secondary); border-color: var(--color-border); border-style: dashed; }
.phone-chip:active { transform: scale(.95); }
.phone-big {
  font-size: 24px; font-weight: 800; letter-spacing: .02em;
  color: var(--color-text-primary); text-align: center;
  margin: 4px 0 14px; font-variant-numeric: tabular-nums;
}

/* ===== Красивая карточка звонка ответственному склада ===== */
.call-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 6px; }
.call-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22c17e 0%, #16a34a 100%);
  box-shadow: 0 8px 22px rgba(22,163,74,.35);
  margin-bottom: 12px;
}
.call-avatar svg { width: 36px; height: 36px; }
.call-name { font-size: 20px; font-weight: 800; color: var(--color-text-primary); line-height: 1.2; }
.call-role { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
.call-num {
  display: block; margin: 14px 0 16px; text-decoration: none;
  font-size: 27px; font-weight: 800; letter-spacing: .01em;
  color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.call-go {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; border-radius: 16px; text-decoration: none;
  font-size: 18px; font-weight: 800; color: #fff; border: 0;
  background: linear-gradient(135deg, #22c17e 0%, #16a34a 100%);
  box-shadow: 0 8px 22px rgba(22,163,74,.38);
  animation: callPulse 1.8s ease-in-out infinite;
}
.call-go:active { transform: scale(.98); }
.call-go-ic svg { width: 22px; height: 22px; display: block; }
@keyframes callPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(22,163,74,.38); }
  50% { box-shadow: 0 8px 30px rgba(22,163,74,.60); }
}
html.lite .call-go, html.lite .call-avatar { animation: none; }
@media (prefers-reduced-motion: reduce) { .call-go { animation: none; } }
.call-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.call-actions:has(> :only-child) { grid-template-columns: 1fr; }
.call-actions .btn { width: 100%; }

/* ===== Кнопки операций склада: аккуратная сетка 2×2 (v1.32.1) ===== */
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--space-md); }
.op-grid .btn {
  width: 100%; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 10px; font-size: var(--font-body); font-weight: 700;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.op-grid .btn .ic { width: 17px; height: 17px; }
.op-grid .op-emoji { font-size: 17px; line-height: 1; }
.op-grid .btn[data-act="income"]   { background: var(--color-success); color: #fff; }
.op-grid .btn[data-act="expense"]  { background: var(--color-danger);  color: #fff; }
.op-grid .btn[data-act="transfer"] { background: #1565C0; color: #fff; }
.op-grid .btn[data-act="opening"]  { background: var(--color-secondary); color: var(--color-primary-dark); }

/* ============================================================
   ОБЛЕГЧЁННЫЙ РЕЖИМ · html.lite (v1.45.0)
   Для слабых/старых телефонов (Android и т.п.): убираем самые дорогие
   для GPU эффекты — backdrop-filter/блюр, тени и декоративные анимации,
   фиксированный градиентный фон. Панели «стекла» делаем непрозрачными,
   чтобы текст оставался читаемым. Размещено в конце файла, чтобы
   переопределять и светлую, и тёмную тему.
   ============================================================ */
html.lite {
  --glass-bg: var(--color-surface);
  --glass-bg-strong: var(--color-surface);
  --glass-bg-soft: var(--color-surface);
  --glass-border: var(--color-border);
  --glass-blur: none;
  --glass-shadow: none;
}
html.lite, html.lite body {
  background: var(--color-background) !important;
  background-attachment: scroll !important;
}
html.lite *, html.lite *::before, html.lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ---------- Экран браузерного входа (логин/пароль) ---------- */
body.login-mode #settings-btn { display: none; }
.login-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 18px 14px 40px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--color-surface, var(--bg));
  border: 1px solid var(--border); border-radius: 18px; padding: 24px 20px;
  box-shadow: var(--shadow-lg); text-align: center;
}
.login-logo { width: 76px; height: 76px; object-fit: contain; border-radius: 16px; margin-bottom: 10px; }
.login-brand { font-weight: 800; font-size: 20px; letter-spacing: .04em; color: var(--color-primary, var(--text)); }
.login-sub { font-size: 13px; color: var(--color-text-secondary, var(--muted)); margin-bottom: 16px; }
.login-card .field { text-align: left; margin-bottom: 12px; }
.login-card .field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px;
}
.login-err { min-height: 18px; color: var(--color-danger, #c0392b); font-size: 13px; font-weight: 600; margin: 2px 0 10px; }
.login-hint { font-size: 12px; color: var(--color-text-secondary, var(--muted)); margin-top: 14px; line-height: 1.4; }

/* ---------- Задания от админа ---------- */
.task-banner {
  margin: 8px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--color-secondary-soft, #E7D6A8); color: var(--color-primary-dark, #5a1018);
  font-weight: 700; cursor: pointer; border: 1px solid var(--color-secondary, #C39A3E);
}
.install-banner { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
.install-x { margin-left: auto; flex: none; padding: 0 6px; font-weight: 800; opacity: .65; }
.task-card.task-done { opacity: .68; }
.task-hist-row { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); }
.task-hist-row .thr-main { flex: 1; min-width: 0; word-break: break-word; }

/* ---------- Десктоп-вёрстка (только браузер, не Telegram) ---------- */
@media (min-width: 1000px) {
  /* Боковые панели: колонка приложения зафиксирована по ширине и центрирована —
     на широком мониторе по бокам была плоская пустая заливка --color-background.
     Бордо слева / золото справа, погуще и с мягким свечением сверху — перекликаются
     с разделённым экраном входа. Тёмную тему не трогаем — у неё уже свой градиентный
     фон (см. html[data-theme="dark"]).
     #view — отдельная «плавающая» панель (скруглена, тень, светлая поверхность):
     иначе контент сливался с фоном плоским прямоугольником без ощущения глубины.
     #topbar намеренно не трогаем (остаётся flush/sticky) — не рискуем его прилипанием. */
  body.browser, html.bordotilla body.browser {
    background:
      linear-gradient(100deg, rgba(110, 22, 32, .32) 0%, rgba(110, 22, 32, 0) 34%),
      linear-gradient(260deg, rgba(195, 154, 62, .36) 0%, rgba(195, 154, 62, 0) 34%),
      radial-gradient(120% 60% at 50% -8%, rgba(110, 22, 32, .12), transparent 62%),
      var(--color-background);
  }
  body.browser #app { max-width: 1120px; }
  body.browser #view {
    padding: 22px 26px calc(56px + var(--safe-bottom));
    gap: 16px;
    margin-top: 18px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
  body.browser .menu-grid { grid-template-columns: repeat(3, 1fr); }
  /* Список складов на главной — плиткой в несколько колонок. */
  body.browser .wh-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
  body.browser .wh-list .wh-card { margin: 0; }
  /* Карточки складов на десктопе: продукты построчно (метка · число · единицы),
     чтобы крупные числа не теснились в узких колонках и подписи не переносились. */
  body.browser .wh-mini { grid-template-columns: 1fr; gap: 8px; }
  body.browser .wh-mini .cell { display: grid; grid-template-columns: minmax(104px, auto) 1fr auto; align-items: center; gap: 14px; padding: 10px 14px; }
  body.browser .wh-mini .cell .label { white-space: nowrap; font-size: 16px; }
  body.browser .wh-mini .cell .val { font-size: 19px; text-align: right; }
  body.browser .wh-mini .cell .sub { text-align: right; font-size: 12px; }
}
@media (min-width: 1400px) {
  body.browser #app { max-width: 1280px; }
  body.browser .wh-list { grid-template-columns: repeat(3, 1fr); }
  body.browser .menu-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   ТЕМА «ТЁПЛАЯ» · html[data-theme="warm"]  (COMBO 10)
   Палитра: SKIN TONE #FFC6A8 (мягкий персик) + BRIDAL #741A2F (винный).
   Светлая по сути: переопределяет базовые токены --color-*, поэтому всё
   наследуется автоматически. Фирменные бордо+золото НЕ тронуты — это
   отдельная тема, выбирается в Настройках рядом со светлой/тёмной.
   ============================================================ */
html[data-theme="warm"] {
  --color-primary: #741A2F;          /* BRIDAL — винный (вместо бордо) */
  --color-primary-dark: #5C1424;
  --color-secondary: #9C2230;        /* светлее винный — читаемый акцент вместо золота */
  --color-secondary-soft: #FFC6A8;   /* SKIN TONE — мягкий персиковый акцент */
  --color-background: #FFF3EC;       /* мягкий персиковый фон */
  --color-surface: #FFFBF8;          /* тёплый белый */
  --color-border: #F1D9CC;
  --color-text-primary: #3A2026;     /* тёплый тёмный текст */
  --color-text-secondary: #9A7E80;
  --shadow-sm: 0 2px 8px rgba(116,26,47,.06);
  --shadow-md: 0 4px 16px rgba(116,26,47,.07), 0 12px 30px rgba(116,26,47,.05);
  --shadow-lg: 0 10px 28px rgba(116,26,47,.14), 0 20px 50px rgba(116,26,47,.10);
}
html[data-theme="warm"] body {
  background: radial-gradient(125% 95% at 50% -6%, #FFF8F3 0%, var(--color-background) 56%);
  background-attachment: fixed;
}

/* ============================================================
   СТИЛЬ «МЯГКИЙ» · html[data-ui="soft"]  (v1.68.0)
   Тёплый кремовый фон, крупнее радиусы, мягкие тени, золотые
   тонкие рамки. Фирменные бордо/золото и логотип сохранены.
   Цвета/тени даны раздельно для светлой и тёмной темы
   (двухатрибутные селекторы перебивают базовую тёмную тему).
   ============================================================ */
html[data-ui="soft"] {
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 26px;
  --glass-blur: saturate(165%) blur(16px);
}
/* Светлая + мягкий */
html[data-ui="soft"][data-theme="light"] {
  --color-background: #F7F2E9;
  --color-border: #EADFC9;
  --color-secondary-soft: #EFE4C6;
  --glass-bg: rgba(255,253,248,.62);
  --glass-bg-strong: rgba(255,253,248,.80);
  --glass-bg-soft: rgba(255,253,248,.46);
  --glass-border: rgba(195,154,62,.30);
  --glass-shadow: 0 10px 34px rgba(110,22,32,.10), 0 2px 10px rgba(27,31,36,.06);
  --shadow-sm: 0 2px 8px rgba(110,22,32,.05);
  --shadow-md: 0 4px 18px rgba(110,22,32,.06), 0 12px 34px rgba(27,31,36,.05);
  --shadow-lg: 0 12px 34px rgba(110,22,32,.13), 0 22px 54px rgba(27,31,36,.10);
}
html[data-ui="soft"][data-theme="light"] body {
  background: radial-gradient(125% 95% at 50% -6%, #FCF7EE 0%, var(--color-background) 56%);
  background-attachment: fixed;
}
/* Тёмная + мягкий (теплее обычной тёмной) */
html[data-ui="soft"][data-theme="dark"] {
  --color-background: #16120e;
  --color-surface: #211b16;
  --color-border: #352c22;
  --glass-bg: rgba(40,33,26,.55);
  --glass-bg-strong: rgba(46,38,30,.74);
  --glass-border: rgba(195,154,62,.16);
  --glass-shadow: 0 10px 34px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.32);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 4px 18px rgba(0,0,0,.45), 0 12px 34px rgba(0,0,0,.38);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.55), 0 22px 54px rgba(0,0,0,.48);
}
/* Мягкие формы компонентов (общие для обеих тем) */
html[data-ui="soft"] .btn { border-radius: 999px; }
html[data-ui="soft"] #topbar { border-radius: 0 0 22px 22px; }
html[data-ui="soft"] .field input,
html[data-ui="soft"] .field select { border-radius: 14px; }
html[data-ui="soft"] .modal { border-radius: 28px 28px 0 0; }
html[data-ui="soft"] .wh-card,
html[data-ui="soft"] .stat,
html[data-ui="soft"] .datecard,
html[data-ui="soft"] .settings-card,
html[data-ui="soft"] .pk-card,
html[data-ui="soft"] .pk-lc { border-radius: var(--radius-xl); }
html[data-ui="soft"] .seg-row { border-radius: 999px; }
html[data-ui="soft"] .tab.seg-btn { border-radius: 999px; }

/* Крупное красное окно-предупреждение о дубле (v1.71.1) */
.dup-warn { text-align: center; background: #FDECEA; border: 2px solid #ef9a8f; border-radius: 16px; padding: 14px 14px 16px; }
.dup-warn-ic { font-size: 56px; line-height: 1.05; letter-spacing: 4px; margin: 2px 0 8px; animation: dupPulse 1s ease-in-out infinite; }
@keyframes dupPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.dup-warn-title { font-size: 24px; font-weight: 900; color: #C0341D; letter-spacing: .02em; line-height: 1.15; margin-bottom: 10px; }
.dup-warn-text { font-size: 16px; font-weight: 700; color: #C0341D; line-height: 1.4; margin-bottom: 4px; }
.dup-warn-text u { text-decoration: underline; }
.dup-warn-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dup-info { margin: 8px auto 2px; padding: 10px 12px; background: #fff; border: 1px solid #ef9a8f; border-radius: 12px; font-weight: 800; color: #6E1620; font-size: 14.5px; text-align: center; }
/* Облегчённый режим: без пульсации */
html.lite .dup-warn-ic { animation: none; }

/* Дубликаты инвойсов в разделе отгрузок экспорта (v1.270.0) */
.dup-banner { margin: 6px 0 10px; padding: 10px 12px; background: #FDECEA; border: 1px solid #ef9a8f; border-left: 4px solid #C0341D; border-radius: 12px; color: #A11; font-weight: 700; font-size: 14px; line-height: 1.4; }
/* Экран поиска дублей отгрузок */
.dup-ok { padding: 18px; text-align: center; font-size: 16px; font-weight: 800; color: #1b7a44; }
.dup-sum { padding: 10px 12px; background: #FDECEA; border-radius: 10px; color: #A11; font-weight: 700; font-size: 14px; }
.dup-group { border: 1px solid var(--color-border); border-radius: 12px; margin: 10px 0; overflow: hidden; }
.dup-ghead { padding: 9px 12px; background: var(--secondary-bg); font-size: 14px; border-bottom: 1px solid var(--color-border); }
.dup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--color-border); }
.dup-row:first-of-type { border-top: none; }
.dup-info { min-width: 0; font-size: 14px; }
.dup-info small { color: var(--hint); }
.dup-nobuyer { color: #C0341D; font-weight: 700; }
.dup-arch { display: inline-block; font-size: 11px; font-weight: 700; color: #8a6d00; background: #fdf3d0; border: 1px solid #e6cf7a; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
html[data-theme="dark"] .dup-sum, :root[data-theme="dark"] .dup-sum { background: rgba(192,52,29,.18); color: #ffb3a6; }
html[data-theme="dark"] .dup-arch, :root[data-theme="dark"] .dup-arch { background: rgba(230,207,122,.18); color: #e6cf7a; }
.cdup-live { display: inline-block; font-size: 11px; font-weight: 700; color: #1e7d3a; background: #e2f5e8; border: 1px solid #9dd6ae; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
html[data-theme="dark"] .cdup-live, :root[data-theme="dark"] .cdup-live { background: rgba(157,214,174,.18); color: #9dd6ae; }
.cdup-acts { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.dup-tag { display: inline-block; font-size: 11px; font-weight: 800; color: #C0341D; background: #FDE0DB; border: 1px solid #ef9a8f; border-radius: 8px; padding: 1px 6px; vertical-align: middle; white-space: nowrap; }
.xitem.xship-dup { outline: 2px solid #ef9a8f; outline-offset: -2px; }
tr.row-dup td { background: #FDECEA; }
html[data-theme="dark"] .dup-banner, :root[data-theme="dark"] .dup-banner { background: rgba(192,52,29,.18); color: #ffb3a6; }
html[data-theme="dark"] tr.row-dup td, :root[data-theme="dark"] tr.row-dup td { background: rgba(192,52,29,.16); }
html[data-theme="dark"] .dup-tag, :root[data-theme="dark"] .dup-tag { background: rgba(192,52,29,.25); color: #ffb3a6; }

/* Полоса «дата + скачать свод» вверху раздела склада (v1.71.0) */
.svod-bar { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; }
.svod-date { flex: 0 0 auto; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px); background: var(--color-background); color: var(--color-text-primary); font-size: 15px; font-family: inherit; }
.svod-bar .btn { flex: 1 1 auto; }

/* Окно-благодарность омборчи за закрытый день (v1.72.0) */
.congrats { text-align: center; padding: 6px 4px 2px; }
.congrats-ic { font-size: 60px; line-height: 1.05; margin: 2px 0 6px; animation: congratsPop .5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes congratsPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.congrats-title { font-size: 22px; font-weight: 900; color: var(--color-primary, #6E1620); margin-bottom: 8px; }
.congrats-text { font-size: 15px; line-height: 1.45; color: var(--color-text-primary); }
html.lite .congrats-ic { animation: none; }

/* Демонстрация обновлений (для админа) — v1.72.1 */
.demo-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.demo-msg { white-space: pre-line; text-align: left; background: var(--color-secondary-soft, #E7D6A8); color: var(--color-primary-dark, #500F17); border-radius: 12px; padding: 11px 13px; margin-top: 8px; font-size: 13.5px; line-height: 1.4; }
.demo-msg-ok { background: #E7F6EC; color: #1E7A44; }

/* Прогресс дня омборчи на главном (v1.73.0) */
.day-prog { margin: -2px 0 10px; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; background: var(--color-secondary-soft, #E7D6A8); color: var(--color-primary-dark, #500F17); border-left: 4px solid var(--color-secondary, #C39A3E); }
.day-prog b { font-weight: 800; }
.day-prog-done { background: #E7F6EC; color: #1E7A44; border-left-color: #1E9E5A; font-weight: 700; }

/* ===== Лаборатория Устера — большая карточка входа (внутри раздела «Устер») ===== */
.uster-lab-card {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 16px; margin-bottom: 12px;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.20);
  box-shadow: var(--shadow-md); cursor: pointer; text-align: left;
  color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,0) 55%), linear-gradient(135deg, #6d4bb0 0%, #3a2270 100%);
}
.uster-lab-card:active { transform: scale(.985); }
.uster-lab-card .ul-ic {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 24px;
  background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.32);
}
.uster-lab-card .ul-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; align-items: flex-start; }
.uster-lab-card .ul-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.uster-lab-card .ul-sub { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.22); line-height: 1.3; }
.uster-lab-card .ul-arrow { font-size: 26px; font-weight: 700; color: rgba(255,255,255,.85); flex: none; }

/* ===== Лаборатория Устера — карточки ежедневных проверок ===== */
.lab-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 12px 13px; margin-bottom: 10px; }
.lab-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lab-date { font-weight: 800; font-size: 14px; color: var(--color-text-primary); min-width: 0; }
.lab-yarn { color: var(--color-primary, #6E1620); font-weight: 700; }
.lab-acts { display: flex; gap: 4px; flex-shrink: 0; }
.lab-params { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.lab-prow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 9px; background: rgba(120,120,120,.07); border-radius: 9px; }
.lab-pn { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-pv { font-size: 14px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lab-note { margin-top: 8px; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.4; }
/* Форма проверки: подсказка + строки «показатель + значение» */
.lab-hint { font-size: 12px; color: var(--color-text-secondary); margin: -2px 0 9px; line-height: 1.35; }
.lab-params-edit { display: flex; flex-direction: column; gap: 10px; }
/* Ряд показателя: сверху имя, снизу степпер (крупные ±) — набор значения без клавиатуры.
   Без горизонтальных отступов у самого ряда — поле имени и кнопки степпера начинаются и
   заканчиваются РОВНО там же, где Дата/Ип рақами/Изоҳ выше и ниже (единая линия краёв). */
.lab-prow-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; background: rgba(120,120,120,.07); border-radius: 12px; }
.lab-prow-edit input { min-width: 0; margin: 0; }
.lab-prow-top { display: flex; align-items: center; gap: 8px; }
.lab-prow-top .lab-in-name { flex: 1; min-width: 0; }
.lab-prow-del { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border: none; background: transparent; color: #C0341D; font-size: 16px; line-height: 1; cursor: pointer; border-radius: 9px; padding: 0; }
.lab-prow-del:active { background: rgba(192,52,29,.14); transform: scale(.9); }
.lab-stepper { display: flex; align-items: stretch; gap: 0; }
.lab-step-btn { width: 48px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary, #6E1620); font-size: 21px; font-weight: 700; line-height: 1; border-radius: 0; cursor: pointer; padding: 0; user-select: none; }
.lab-step-btn:first-child { border-radius: 12px 0 0 12px; border-right: none; }
.lab-step-btn:last-child { border-radius: 0 12px 12px 0; border-left: none; }
.lab-step-btn:active { background: rgba(110,22,32,.14); transform: scale(.96); }
.lab-stepper .lab-in-val { flex: 1; min-width: 0; height: 44px; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 0; border-left: none; border-right: none; }
.lab-addp { margin-top: 10px; }
@media (max-width: 360px) { .lab-params { grid-template-columns: 1fr; } }

/* ===== «Полоска дня» омборчи — прогресс заполнения (loader-стиль) ===== */
.dayprog2 { margin: -2px 0 12px; padding: 12px 13px 13px; border-radius: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm); }
.dayprog2.is-done { background: #E9F7EE; border-color: #B7E6C8; }
.dayprog2 .dp2-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.dp2-ic { font-size: 17px; line-height: 1; }
.dp2-title { font-weight: 800; font-size: 14px; color: var(--color-text-primary); flex: 1; min-width: 0; }
.dayprog2.is-done .dp2-title { color: #1E7A44; }
.dp2-pct { font-weight: 900; font-size: 15px; color: var(--color-secondary, #C39A3E); font-variant-numeric: tabular-nums; }
.dayprog2.is-done .dp2-pct { color: #1E9E5A; }
.dp2-track { height: 9px; border-radius: 6px; background: rgba(120,120,120,.16); overflow: hidden; }
.dp2-fill { height: 100%; border-radius: 6px; min-width: 0;
  background: linear-gradient(90deg, var(--color-secondary, #C39A3E), #E0C56B);
  transition: width .5s cubic-bezier(.22,.61,.36,1); }
.dayprog2.is-done .dp2-fill { background: linear-gradient(90deg, #1E9E5A, #57C98A); }
.dp2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dp2-chip { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  color: var(--color-text-secondary); background: rgba(120,120,120,.10);
  border: 1px solid var(--color-border); white-space: nowrap; }
.dp2-chip.done { color: #fff; background: var(--dpc, #1E9E5A);
  border-color: color-mix(in srgb, var(--dpc, #1E9E5A) 70%, #000 0%); }
.dp2-chip b { font-weight: 900; }
.dp2-todo { margin-top: 11px; border-top: 1px dashed var(--color-border); padding-top: 9px; }
.dp2-todo-head { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-text-secondary); margin-bottom: 7px; }
.dp2-todo-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 0; }
.dp2-todo-item + .dp2-todo-item { border-top: 1px solid var(--color-border); }
.dp2-todo-name { font-size: 13px; font-weight: 700; color: var(--color-text-primary); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--dpc, #C39A3E);
  padding-left: 8px; }
.dp2-todo-btns { display: flex; gap: 6px; flex-shrink: 0; }
.dp2-open, .dp2-no { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 9px;
  border: 1px solid var(--color-border); cursor: pointer; white-space: nowrap;
  background: var(--color-surface); color: var(--color-text-primary); }
.dp2-open { color: var(--color-primary, #6E1620); border-color: color-mix(in srgb, var(--color-primary, #6E1620) 35%, transparent); }
.dp2-no { color: var(--color-text-secondary); }
.dp2-open:active, .dp2-no:active { transform: scale(.94); }

/* ============================================================
   Запуск в боковой панели Telegram Desktop (кнопка «Открыть» из списка
   чатов, без входа в чат). layout-вьюпорт там бывает шире/смещён, поэтому
   корневые fixed-слои с `inset:0` центрировали контент мимо видимой области
   («экран загрузки уезжал вбок»). Привязываем их по ГОРИЗОНТАЛИ к реально
   видимой ширине/смещению (--app-vw / --app-vx из fitViewport в app.js).
   Вертикаль (top/bottom/height) не трогаем — баг был только горизонтальный.
   Fallback 100vw / 0px = прежнее поведение, так что обычный запуск не меняется.
   ============================================================ */
body:not(.browser) { width: var(--app-vw, 100%); margin-left: var(--app-vx, 0px); margin-right: auto; }
#watermark, .splash, .modal-overlay, #print-overlay, .celebrate {
  left: var(--app-vx, 0px); right: auto; width: var(--app-vw, 100vw);
}
.toast { left: calc(var(--app-vx, 0px) + var(--app-vw, 100vw) / 2); }
/* .app-version теперь в потоке — позиционный override для широкого браузера не нужен. */

/* Персональный водяной знак (имя + ID + дата/время), повторяется по диагонали поверх
   всего контента. Картинку (SVG) задаёт app.js → applyWatermark(). Не кликается
   (pointer-events:none), полупрозрачный — читать не мешает, но в скриншоте/видео
   виден и выдаёт, кто смотрел. Поверх модалок и тостов, но под заставкой. */
#wm-overlay {
  position: fixed; top: 0; left: var(--app-vx, 0px);
  width: var(--app-vw, 100vw); height: 100vh;
  pointer-events: none; z-index: 9000;
  background-repeat: repeat; background-position: top left;
}

/* ============================================================
   КОМПАКТНЫЙ ИНТЕРФЕЙС (html.compact)
   Админ включает его пользователю с «Увеличенным» режимом экрана на iPhone
   (Display Zoom). Тогда система iOS и так всё увеличивает, а наше приложение
   ужимаем по шрифтам и отступам — чтобы на экран помещалось больше и не было
   тесно. Переопределяем дизайн-токены (они используются по всему UI) + пара
   точечных правок там, где отступы заданы в px. Поле ввода оставляем 16px,
   чтобы iOS не зумил при фокусе.
   ============================================================ */
html.compact {
  --font-app-title: 23px;
  --font-warehouse-title: 18px;
  --font-section-title: 15px;
  --font-metric: 24px;
  --font-body: 13px;
  --font-caption: 12px;
  --space-xs: 3px; --space-sm: 6px; --space-md: 9px;
  --space-lg: 11px; --space-xl: 16px; --space-2xl: 22px;
  --radius-lg: 13px; --radius-xl: 16px;
}
html.compact .btn { padding: 9px 12px; }
html.compact .btn-row .btn[data-act] { padding: 10px 8px; min-width: 76px; }
html.compact .tab { padding: 8px 6px; }
html.compact #view { padding-top: 10px; }
html.compact .wh-card { padding: 10px 11px; }
html.compact .kpi { padding: 9px 11px; }
html.compact .ledger th, html.compact .ledger td { padding: 6px 7px; }

/* ===== Тумблер единиц веса (тонна/кг) — рядом с курсом ЦБ и на экранах остатков.
   Мгновенно переключает отображение без перезагрузки приложения. ===== */
.unit-row { display: flex; justify-content: flex-end; margin: 2px 0 8px; }
.unit-switch { display: inline-flex; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px; box-shadow: var(--shadow-sm); }
.unit-switch .unit-btn { border: none; background: transparent; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background var(--transition-fast) ease, color var(--transition-fast) ease; }
.unit-switch .unit-btn.on { background: var(--color-primary); color: #fff; }
.unit-switch .unit-btn:active { transform: scale(0.96); }
html.lite .unit-switch .unit-btn { transition: none; }
html.lite .unit-switch .unit-btn:active { transform: none; }
/* Тумблер «тонна/кг» в ШАПКЕ — под пилюлей курса ЦБ, справа. На бордовом фоне
   делаем полупрозрачную белую пилюлю (в тон РУ/ЎЗ), активная — золотая. */
#topbar #topbar-unit-slot { display: flex; justify-content: flex-start; margin-right: auto; }
#topbar #topbar-unit-slot.hidden { display: none; }
#topbar .unit-switch.on-topbar { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); box-shadow: none; padding: 2px; }
#topbar .unit-switch.on-topbar .unit-btn { color: rgba(255,255,255,.80); font-size: 11px; letter-spacing: .04em; padding: 4px 12px; }
#topbar .unit-switch.on-topbar .unit-btn.on { background: var(--color-secondary, #C39A3E); color: #fff; }

/* ============================================================
   ✨ PREMIUM DESIGN (v1.199.0) — включается классом html.premium
   (Настройки → «🎨 Дизайн приложения» → Premium). Весь блок
   скоуплен под html.premium: при классическом дизайне ни одно
   правило отсюда НЕ действует. Новая тема в будущем = свой
   класс + свой такой же блок.
   Палитра: primary #6F1025 · gold #D4AF37 · bg #F7F7F8 · dark #111.
   ============================================================ */
html.premium {
  --color-primary: #6F1025;
  --color-primary-dark: #4E0B1A;
  --color-secondary: #D4AF37;
  --color-success: #22C55E;
  --color-danger: #EF4444;
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(17,17,17,.04), 0 2px 8px rgba(17,17,17,.05);
  --shadow-md: 0 2px 6px rgba(17,17,17,.05), 0 12px 32px rgba(17,17,17,.08);
  --shadow-lg: 0 4px 10px rgba(17,17,17,.06), 0 20px 50px rgba(17,17,17,.12);
  --glass-bg: rgba(255,255,255,.66);
  --glass-bg-strong: rgba(255,255,255,.82);
  --glass-bg-soft: rgba(255,255,255,.5);
  --glass-border: rgba(255,255,255,.72);
  --glass-shadow: 0 8px 30px rgba(17,17,17,.07), 0 2px 8px rgba(17,17,17,.04);
}
/* Чистый светлый фон Apple-стиля с едва заметными бликами бренда */
html.premium, html.premium body {
  /* «Матовый лён»: приглушённая тёплая база + мягкие РАЗМЫТЫЕ пятна бренда
     (бордо сверху-слева, золото снизу-справа). Диффузные радиальные градиенты дают
     эффект frosted-фона без бликов — спокойно для чтения. */
  background:
    radial-gradient(85% 55% at 2% -4%, rgba(122,21,38,.20) 0%, rgba(122,21,38,0) 46%),
    radial-gradient(95% 62% at 100% 104%, rgba(195,154,62,.30) 0%, rgba(195,154,62,0) 48%),
    radial-gradient(85% 55% at 48% 122%, rgba(18,147,138,.18) 0%, rgba(18,147,138,0) 46%),
    radial-gradient(70% 48% at 98% 20%, rgba(122,21,38,.14) 0%, rgba(122,21,38,0) 46%),
    #E7E1D8;
  background-attachment: fixed;
}
html.premium body { letter-spacing: -.008em; }

/* ---- Шапка: ФИРМЕННОЕ бордовое frosted-стекло (бренд ANTEKS сохранён) ----
   Цвета текста шапки не переопределяем — белый/золотой из классики читается
   на бордовом как раньше (в т.ч. плашка «Курс ЦБ»). */
html.premium #topbar {
  background: linear-gradient(135deg, rgba(110,22,32,.90) 0%, rgba(78,11,26,.94) 100%);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(212,175,55,.35);
}

/* Тёмная тема шапки и фона. ВАЖНО: тёмные переменные «стекла» задаём здесь же,
   иначе светлые из html.premium перекрывают тёмную тему (одинаковая
   специфичность — побеждает более поздний блок). */
html.premium[data-theme="dark"] {
  --glass-bg: rgba(28,28,30,.72);
  --glass-bg-strong: rgba(28,28,30,.86);
  --glass-bg-soft: rgba(28,28,30,.55);
  --glass-border: rgba(255,255,255,.10);
  --glass-shadow: 0 8px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.20);
  --shadow-md: 0 2px 6px rgba(0,0,0,.28), 0 12px 32px rgba(0,0,0,.30);
}
html.premium[data-theme="dark"], html.premium[data-theme="dark"] body {
  background:
    radial-gradient(110% 70% at 85% -4%, rgba(212,175,55,.07) 0%, rgba(212,175,55,0) 46%),
    #111113;
}
html.premium[data-theme="dark"] .btn-ghost { border-color: rgba(255,255,255,.14); }
/* Шапка в тёмной теме — глубокий бордовый (бренд), чуть темнее светлой. */
html.premium[data-theme="dark"] #topbar {
  background: linear-gradient(135deg, rgba(84,16,25,.92) 0%, rgba(52,8,15,.95) 100%);
  border-bottom-color: rgba(212,175,55,.28);
}

/* ---- Hero: приветствие (дата входит в него) + бейдж беты ---- */
html.premium .greeting { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
html.premium .hero-sub { display: flex; align-items: center; gap: 8px; margin: -6px 0 2px; }
.premium-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: #8a6300; background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(212,175,55,.30));
  border: 1px solid rgba(212,175,55,.4); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
html.premium[data-theme="dark"] .premium-badge { color: #E9C86B; }

/* ---- Карточка курса ЦБ — маленькое стекло ---- */
html.premium .usd-banner {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(17,17,17,.06);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
html.premium[data-theme="dark"] .usd-banner { background: rgba(28,28,30,.8); border-color: rgba(255,255,255,.08); }

/* ---- Статкарточки: белые, воздушные, с цветными иконками ---- */
html.premium .stat {
  background: #fff; border: 1px solid rgba(17,17,17,.05);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
html.premium .stat .label { font-weight: 700; color: rgba(17,17,17,.5); }
/* Настоящие «стикеры» товаров — SVG в разметке (STICKERS в app.js) */
html.premium .stat-stick { display: block; width: 42px; height: 42px; margin: 0 auto 6px; filter: drop-shadow(0 2px 4px rgba(17,17,17,.14)); }
html.premium .stat-stick svg { width: 100%; height: 100%; display: block; }
html.premium .stat .kg { font-weight: 800; letter-spacing: -.02em; }
html.premium[data-theme="dark"] .stat { background: #1C1C1E; border-color: rgba(255,255,255,.07); }
html.premium[data-theme="dark"] .stat .label { color: rgba(255,255,255,.5); }

/* ---- Быстрые разделы: те же цвета, современная пластика ---- */
html.premium .menu-grid { gap: 10px; }
html.premium .menu-grid .btn { border-radius: 18px; padding: 15px 14px; font-weight: 750; }
html.premium .menu-grid .btn[data-act] { box-shadow: 0 6px 18px rgba(17,17,17,.10); }
html.premium .menu-grid .menu-svod { border-radius: 22px; border: none; }

/* ---- Склады: Apple Card ---- */
html.premium .wh-card {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(17,17,17,.05);
  box-shadow: var(--shadow-md);
  padding: 18px;
}
html.premium .wh-card[class*=" wh-c"] { border-left: 6px solid var(--whc-a); }
html.premium .wh-avatar { width: 40px; height: 40px; border-radius: 14px; font-size: 18px; }
html.premium .wh-mini .cell { border-radius: 14px; border: none; }
html.premium .wh-card:active { transform: scale(.98); }
html.premium[data-theme="dark"] .wh-card { border-color: rgba(255,255,255,.07); }

/* ---- Кнопки и сегменты — iOS-пластика ---- */
html.premium .btn { border-radius: 14px; }
html.premium .btn-primary { background: linear-gradient(135deg, #6F1025 0%, #8E1B33 100%); box-shadow: 0 6px 16px rgba(111,16,37,.28); }
html.premium .btn-ghost { border-color: rgba(17,17,17,.10); }
html.premium .tabs { border-radius: 14px; padding: 5px; gap: 6px; background: rgba(17,17,17,.05); border: none; box-shadow: none; }
html.premium .tab { border-radius: 11px; background: #fff; border: 1px solid rgba(17,17,17,.10); box-shadow: 0 1px 2px rgba(17,17,17,.06); color: #333; }
html.premium .tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 3px 10px rgba(110,22,32,.28); }
html.premium[data-theme="dark"] .tabs { background: rgba(255,255,255,.07); }
html.premium[data-theme="dark"] .tab { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e8e8ea; }
html.premium[data-theme="dark"] .tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---- Модалки и поля ---- */
html.premium .modal { border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); }
html.premium .field input, html.premium .field select, html.premium .field textarea { border-radius: 14px; }
html.premium .settings-card { border-radius: var(--radius-lg); border: 1px solid rgba(17,17,17,.05); box-shadow: var(--shadow-sm); }
html.premium[data-theme="dark"] .settings-card { border-color: rgba(255,255,255,.07); }

/* ---- Нижнее меню (создаётся только в Premium) ---- */
#bottom-nav {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  /* НИЖЕ модалок (.modal-overlay z-index: 20) и тостов (30): панель не должна
     перекрывать открытые формы — «очень мешает на работе». */
  z-index: 10;
  display: flex; gap: 4px; padding: 6px;
  border-radius: 26px;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 34px rgba(17,17,17,.18), 0 2px 8px rgba(17,17,17,.08);
  animation: bnUp .4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bnUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border: none; background: none; border-radius: 20px;
  font-family: inherit; font-size: 10.5px; font-weight: 750; color: rgba(17,17,17,.5);
  cursor: pointer; transition: all .22s cubic-bezier(.2,.7,.2,1);
}
.bn-item .bn-ic { font-size: 21px; line-height: 1; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.bn-item.active { background: linear-gradient(135deg, #8A1526 0%, #550D18 100%); color: #fff; box-shadow: 0 6px 16px rgba(85,13,24,.38); }
.bn-item.active .bn-ic { transform: translateY(-1px) scale(1.06); }
.bn-item:active { transform: scale(.94); }
html.premium[data-theme="dark"] #bottom-nav { background: rgba(28,28,30,.82); border-color: rgba(255,255,255,.10); }
html.premium[data-theme="dark"] .bn-item { color: rgba(255,255,255,.55); }
/* Контенту — место под меню, чтобы низ списка не прятался за панелью */
html.premium body.has-bottom-nav #view { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
html.premium body.has-bottom-nav .app-version { margin-bottom: 70px; }
/* Широкий экран (компьютер: браузер или Telegram Desktop): панель не на всю
   ширину, а компактная по центру. */
@media (min-width: 700px) {
  #bottom-nav { width: 440px; left: calc(50% - 220px); right: auto; }
}
/* Пока открыта модалка — панель прячется (не перекрывает кнопки формы). */
body.modal-open #bottom-nav { display: none !important; }

/* ---- Анимации появления: карточки мягко «всплывают» ---- */
@keyframes pmUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
html.premium .stat, html.premium .settings-card { animation: pmUp .4s cubic-bezier(.2,.7,.2,1) both; }

/* ---- Облегчённый режим и «меньше движения»: без стекла и анимаций ---- */
html.premium.lite #bottom-nav, html.premium.lite .usd-banner {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--color-surface, #fff);
}
/* Лайт-режим: шапка без blur, но ФИРМЕННАЯ бордовая (не белая). */
html.premium.lite #topbar {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(135deg, #6E1620 0%, #4E0B1A 100%);
}
html.premium.lite #bottom-nav { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #bottom-nav, html.premium .stat, html.premium .settings-card { animation: none !important; }
}

/* ---- ✨ Premium: раздел Экспорт (список, карточка контракта) ---- */
/* Секции контракта: в классике .xsec — нейтральная обёртка (всё видно подряд),
   в Premium показывается только выбранная вкладка. */
html.premium .xsec { display: none; }
html.premium .xsec.on { display: block; animation: pmUp .32s cubic-bezier(.2,.7,.2,1) both; }

/* Hero контракта */
html.premium .xhero {
  background: linear-gradient(140deg, #6F1025 0%, #8E1B33 62%, #a8324b 100%);
  border-radius: var(--radius-xl); padding: 18px;
  color: #fff; box-shadow: 0 14px 38px rgba(111,16,37,.30);
  animation: pmUp .4s cubic-bezier(.2,.7,.2,1) both;
}
html.premium .xhero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html.premium .xhero-num { font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
html.premium .xhero-buyer { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; margin-top: 8px; }
html.premium .xhero-flag { font-size: 26px; line-height: 1; }
html.premium .xhero-meta { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); margin-top: 6px; }
html.premium .xhero .xdebt { color: #FFD9D9; }
html.premium .xstatus { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 5px 11px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); white-space: nowrap; }
html.premium .xstatus.xst-done { background: rgba(34,197,94,.30); }
html.premium .xstatus.xst-part { background: rgba(245,158,11,.32); }
html.premium .xstatus.xst-closed { background: rgba(17,17,17,.35); }

/* Финансовые карточки */
html.premium .xfin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.premium .xfin-card {
  background: #fff; border: 1px solid rgba(17,17,17,.05);
  border-radius: var(--radius-lg); padding: 13px 14px;
  box-shadow: var(--shadow-sm); animation: pmUp .4s cubic-bezier(.2,.7,.2,1) both;
}
html.premium .xfin-card:first-child, html.premium .xfin-card.full { grid-column: 1 / -1; }
html.premium .xf-ic { font-size: 20px; line-height: 1; margin-bottom: 6px; }
html.premium .xf-k { font-size: 12px; font-weight: 700; color: rgba(17,17,17,.5); }
html.premium .xf-v { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
html.premium .xf-s { font-size: 11.5px; font-weight: 600; color: rgba(17,17,17,.45); margin-top: 2px; }
html.premium .xfin-card.xf-neg .xf-v { color: #EF4444; }
html.premium .xfin-card.xf-pos .xf-v { color: #22C55E; }
html.premium[data-theme="dark"] .xfin-card { background: #1C1C1E; border-color: rgba(255,255,255,.07); }
html.premium[data-theme="dark"] .xf-k { color: rgba(255,255,255,.5); }
html.premium[data-theme="dark"] .xf-s { color: rgba(255,255,255,.42); }

/* Прогресс-дашборд */
html.premium .xprog {
  background: #fff; border: 1px solid rgba(17,17,17,.05); border-radius: var(--radius-lg);
  padding: 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 11px;
}
html.premium .xp-row { display: flex; align-items: center; gap: 10px; }
html.premium .xp-k { font-size: 12.5px; font-weight: 700; color: rgba(17,17,17,.6); min-width: 106px; }
html.premium .xp-v { font-size: 13px; font-weight: 800; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
html.premium .xp-bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(17,17,17,.07); overflow: hidden; }
html.premium .xp-bar.sm { height: 7px; margin-top: 9px; }
html.premium .xp-fill { display: block; height: 100%; border-radius: 999px; transform-origin: left center; animation: xgrow .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes xgrow { from { transform: scaleX(0); } }
html.premium .xp-gold { background: linear-gradient(90deg, #D4AF37, #E9C86B); }
html.premium .xp-blue { background: linear-gradient(90deg, #2563EB, #60A5FA); }
html.premium .xp-green { background: linear-gradient(90deg, #16A34A, #4ADE80); }
html.premium[data-theme="dark"] .xprog { background: #1C1C1E; border-color: rgba(255,255,255,.07); }
html.premium[data-theme="dark"] .xp-k { color: rgba(255,255,255,.6); }
html.premium[data-theme="dark"] .xp-bar { background: rgba(255,255,255,.10); }

/* Вкладки-«пилюли» */
html.premium .xtabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html.premium .xtabs::-webkit-scrollbar { display: none; }
html.premium .xtab {
  flex: 1 0 auto; border: 1px solid rgba(17,17,17,.08); background: #fff; color: rgba(17,17,17,.6);
  font-family: inherit; font-size: 13px; font-weight: 750; border-radius: 999px; padding: 9px 14px;
  cursor: pointer; white-space: nowrap; transition: all .22s cubic-bezier(.2,.7,.2,1); box-shadow: var(--shadow-sm);
}
html.premium .xtab b { font-weight: 800; opacity: .65; }
html.premium .xtab.on { background: linear-gradient(135deg, #6F1025, #8E1B33); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(111,16,37,.30); }
html.premium .xtab.on b { opacity: .9; }
html.premium .xtab:active { transform: scale(.95); }
html.premium[data-theme="dark"] .xtab { background: #1C1C1E; border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.6); }

/* Карточки записей (спецификации / отгрузки / оплаты / допы) */
html.premium .xitem {
  background: #fff; border: 1px solid rgba(17,17,17,.05); border-radius: var(--radius-lg);
  padding: 13px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
  animation: pmUp .35s cubic-bezier(.2,.7,.2,1) both;
}
html.premium .xi-head { display: flex; align-items: center; gap: 8px; }
html.premium .xi-ic { font-size: 20px; line-height: 1; }
html.premium .xi-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
html.premium .xi-amt { font-size: 18px; color: #16A34A; font-variant-numeric: tabular-nums; }
html.premium .xi-amt.neg { color: #C0341D; }
/* Переброска аванса — карточка оплаты с золотым акцентом слева (⇄ пара оплат) */
html.premium .xpay-tr { border-left: 3px solid var(--color-secondary, #C39A3E); }
.kgtable td.neg { color: #C0341D; }
.xi-amt.neg { color: #C0341D; }
html.premium .xi-date { font-size: 12px; font-weight: 700; color: rgba(17,17,17,.45); white-space: nowrap; }
html.premium .xi-act { display: flex; gap: 2px; }
html.premium .xi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin-top: 9px; }
html.premium .xi-grid .g { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
html.premium .xi-grid .k { color: rgba(17,17,17,.5); font-weight: 600; }
html.premium .xi-grid .v { font-weight: 750; font-variant-numeric: tabular-nums; }
html.premium .xi-grid .v.pos { color: #22C55E; }
html.premium .xi-note { font-size: 12.5px; color: rgba(17,17,17,.55); margin-top: 8px; }
html.premium[data-theme="dark"] .xitem { background: #1C1C1E; border-color: rgba(255,255,255,.07); }
html.premium[data-theme="dark"] .xi-date { color: rgba(255,255,255,.45); }
html.premium[data-theme="dark"] .xi-grid .k { color: rgba(255,255,255,.5); }
html.premium[data-theme="dark"] .xi-note { color: rgba(255,255,255,.55); }

/* Timeline отгрузок: вертикальная золотая линия слева */
html.premium .xtimeline { position: relative; padding-left: 14px; }
html.premium .xtimeline::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #D4AF37, rgba(212,175,55,.15)); }
html.premium .xtimeline .xitem { position: relative; }
html.premium .xtimeline .xitem::before { content: ''; position: absolute; left: -15px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,.25); }

/* Прогресс-кольцо оплат */
html.premium .xring-wrap { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid rgba(17,17,17,.05); border-radius: var(--radius-lg); padding: 13px 14px; box-shadow: var(--shadow-sm); margin-bottom: 10px; }
html.premium .xring {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(#22C55E calc(var(--rp) * 1%), rgba(17,17,17,.08) 0);
  display: flex; align-items: center; justify-content: center;
}
html.premium .xring span { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
html.premium .xring-txt { font-size: 13.5px; line-height: 1.45; }
html.premium[data-theme="dark"] .xring-wrap { background: #1C1C1E; border-color: rgba(255,255,255,.07); }
html.premium[data-theme="dark"] .xring { background: conic-gradient(#22C55E calc(var(--rp) * 1%), rgba(255,255,255,.10) 0); }
html.premium[data-theme="dark"] .xring span { background: #1C1C1E; }

/* Итоги под списками и поиск */
html.premium .xtotal { font-size: 13px; color: rgba(17,17,17,.6); background: rgba(212,175,55,.10); border: 1px solid rgba(212,175,55,.28); border-radius: 14px; padding: 10px 13px; margin: 2px 0 8px; }
html.premium[data-theme="dark"] .xtotal { color: rgba(255,255,255,.7); }
html.premium .xsearch input { border-radius: 14px; }
html.premium .seg-full .seg-btn { border-radius: 999px; font-weight: 750; }

/* (Переопределения плашки «Курс ЦБ» под светлую шапку удалены в v1.204.0:
   шапка Premium снова фирменная бордовая, классический белый текст плашки
   читается на ней как раньше.) */

/* ---- ✨ Premium: контрастный проход (жалоба «очень бело, трудно читать») ----
   Все светло-серые подписи затемнены, границы карточек заметнее — читабельно
   на солнце и для пожилых. Идёт ПОСЛЕ остальных premium-правил и перекрывает их. */
html.premium .stat .label,
html.premium .xf-k,
html.premium .xi-grid .k,
html.premium .xp-k { color: rgba(17,17,17,.68); }
html.premium .xf-s,
html.premium .xi-date,
html.premium .xi-note,
html.premium .hero-date,
html.premium .xtotal { color: rgba(17,17,17,.62); }
html.premium .xtab { color: rgba(17,17,17,.72); }
html.premium .bn-item { color: rgba(17,17,17,.62); }
html.premium .stat,
html.premium .xfin-card,
html.premium .xprog,
html.premium .xitem,
html.premium .xring-wrap,
html.premium .settings-card,
html.premium .wh-card { border-color: rgba(17,17,17,.10); }
html.premium .muted { color: rgba(17,17,17,.6); }
/* Тёмная тема: те же элементы — светлее, чем были */
html.premium[data-theme="dark"] .stat .label,
html.premium[data-theme="dark"] .xf-k,
html.premium[data-theme="dark"] .xi-grid .k,
html.premium[data-theme="dark"] .xp-k { color: rgba(255,255,255,.72); }
html.premium[data-theme="dark"] .xf-s,
html.premium[data-theme="dark"] .xi-date,
html.premium[data-theme="dark"] .xi-note,
html.premium[data-theme="dark"] .xtotal { color: rgba(255,255,255,.66); }
html.premium[data-theme="dark"] .xtab { color: rgba(255,255,255,.75); }
html.premium[data-theme="dark"] .bn-item { color: rgba(255,255,255,.66); }
html.premium[data-theme="dark"] .muted { color: rgba(255,255,255,.62); }
html.premium[data-theme="dark"] .stat,
html.premium[data-theme="dark"] .xfin-card,
html.premium[data-theme="dark"] .xprog,
html.premium[data-theme="dark"] .xitem,
html.premium[data-theme="dark"] .xring-wrap,
html.premium[data-theme="dark"] .settings-card,
html.premium[data-theme="dark"] .wh-card { border-color: rgba(255,255,255,.12); }

/* ============================================================
   «ТИХАЯ ПОДМЕНА» · волна 1 (html.q1, с 03.07) — мягкий слой в
   классике: скругления, тени, кнопки, сегменты, статкарточки со
   стикерами. Активна только ДО волны 2 (потом html.premium у всех,
   и этот слой снимается). Расположение элементов не меняется.
   ============================================================ */
html.q1 {
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(17,17,17,.04), 0 2px 8px rgba(17,17,17,.05);
  --shadow-md: 0 2px 6px rgba(17,17,17,.05), 0 12px 32px rgba(17,17,17,.08);
  --shadow-lg: 0 4px 10px rgba(17,17,17,.06), 0 20px 50px rgba(17,17,17,.12);
}
/* Шаг 2: кнопки и поля */
html.q1 .btn { border-radius: 14px; }
html.q1 .btn-primary { background: linear-gradient(135deg, #6F1025 0%, #8E1B33 100%); box-shadow: 0 6px 16px rgba(111,16,37,.28); }
html.q1 .field input, html.q1 .field select, html.q1 .field textarea { border-radius: 14px; }
/* Шаг 3: сегменты/вкладки — iOS-стиль */
html.q1 .tabs { border-radius: 14px; padding: 5px; gap: 6px; background: rgba(17,17,17,.05); border: none; box-shadow: none; }
html.q1 .tab { border-radius: 11px; background: #fff; border: 1px solid rgba(17,17,17,.10); box-shadow: 0 1px 2px rgba(17,17,17,.06); color: #333; }
html.q1 .tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 3px 10px rgba(110,22,32,.28); }
html.q1[data-theme="dark"] .tabs { background: rgba(255,255,255,.07); }
html.q1[data-theme="dark"] .tab { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e8e8ea; }
html.q1[data-theme="dark"] .tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* Шаг 4: статкарточки — белые, воздушные (стикеры добавляет app.js) */
html.q1 .stat { background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
html.q1 .stat .label { font-weight: 700; color: rgba(17,17,17,.65); }
html.q1[data-theme="dark"] .stat { background: #1C1C1E; border-color: rgba(255,255,255,.10); }
html.q1[data-theme="dark"] .stat .label { color: rgba(255,255,255,.65); }
html.q1 .stat-stick { display: block; width: 42px; height: 42px; margin: 0 auto 6px; filter: drop-shadow(0 2px 4px rgba(17,17,17,.14)); }
html.q1 .stat-stick svg { width: 100%; height: 100%; display: block; }
/* Шаг 5: карточки/модалки — премиальная пластика */
html.q1 .wh-card, html.q1 .settings-card { border-radius: var(--radius-xl); border: 1px solid rgba(17,17,17,.08); }
html.q1 .exp-card, html.q1 .imp-card { border-radius: var(--radius-lg); }
html.q1 .modal { border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); }
html.q1 .menu-grid .btn { border-radius: 18px; }
html.q1 .menu-grid .btn[data-act] { box-shadow: 0 6px 18px rgba(17,17,17,.10); }
html.q1[data-theme="dark"] .wh-card, html.q1[data-theme="dark"] .settings-card { border-color: rgba(255,255,255,.10); }

/* ---- ✨ Premium: карточка «ИТОГО» (заметная, для пожилых) ----
   Вместо одной мелкой строки — золотая карточка с построчными цифрами. */
html.premium .xtotal-card {
  background: linear-gradient(150deg, rgba(212,175,55,.16) 0%, rgba(212,175,55,.06) 100%);
  border: 1.5px solid rgba(212,175,55,.55);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  margin: 4px 0 10px;
  box-shadow: var(--shadow-sm);
}
html.premium .xt-title { font-size: 12.5px; font-weight: 850; letter-spacing: .05em; color: #8a6300; margin-bottom: 7px; }
html.premium .xt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; }
html.premium .xt-row span { font-size: 14px; font-weight: 650; color: rgba(17,17,17,.72); }
html.premium .xt-row b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.premium .xt-row.xt-main { border-top: 1px dashed rgba(212,175,55,.55); margin-top: 4px; padding-top: 8px; }
html.premium .xt-row.xt-main b { font-size: 19px; color: #6F1025; }
html.premium .xt-row b.neg { color: #C0341D; }
html.premium .xt-row b.pos { color: #1E7A44; }
html.premium[data-theme="dark"] .xtotal-card { background: linear-gradient(150deg, rgba(212,175,55,.14) 0%, rgba(212,175,55,.05) 100%); border-color: rgba(212,175,55,.4); }
html.premium[data-theme="dark"] .xt-title { color: #E9C86B; }
html.premium[data-theme="dark"] .xt-row span { color: rgba(255,255,255,.72); }
html.premium[data-theme="dark"] .xt-row.xt-main b { color: #E9C86B; }

/* ===== Раздел «Активность» (v1.298) ===== */
.act-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.act-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 10px 9px; }
.act-tile .k { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted); font-weight: 700; line-height: 1.2; }
.act-tile .v { font-size: 21px; font-weight: 800; margin-top: 3px; letter-spacing: -.5px; }
.act-tile .v.live { color: var(--color-success); }
.act-tile .u { font-size: 10.5px; color: var(--color-muted); font-weight: 600; }
.act-chips { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.act-chip { background: var(--color-background); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--color-muted); cursor: pointer; }
.act-chip.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.act-chip .b { opacity: .7; font-weight: 600; }
.act-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; margin-bottom: 11px; overflow: hidden; }
.act-card.ison { border-color: var(--color-success); }
.act-crow { display: flex; align-items: center; gap: 11px; padding: 12px 13px; }
.act-av { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; }
.act-who { flex: 1; min-width: 0; }
.act-who .nm { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.act-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--color-muted); background: var(--color-background); border-radius: 6px; padding: 1px 7px; }
.act-who .sub { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.act-status { flex-shrink: 0; text-align: right; }
.act-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.act-pill.on { color: var(--color-success); background: rgba(30,158,74,.12); }
.act-pill.off { color: var(--color-muted); background: var(--color-background); }
.act-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.act-pill.on .dot { background: var(--color-success); animation: actPulse 1.8s infinite; }
.act-pill.off .dot { background: var(--color-muted); }
@keyframes actPulse { 0% { box-shadow: 0 0 0 0 rgba(30,158,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(30,158,74,0); } 100% { box-shadow: 0 0 0 0 rgba(30,158,74,0); } }
@media (prefers-reduced-motion: reduce) { .act-pill.on .dot { animation: none; } }
.act-status .now { font-size: 11px; color: var(--color-success); font-weight: 700; margin-top: 3px; }
.act-status .ago { font-size: 11px; color: var(--color-muted); margin-top: 3px; }
.act-strip { display: flex; border-top: 1px solid var(--color-border); }
.act-strip .st { flex: 1; padding: 8px 6px; text-align: center; border-right: 1px solid var(--color-border); }
.act-strip .st:last-child { border-right: none; }
.act-strip .sv { font-weight: 800; font-size: 14px; }
.act-strip .sk { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--color-muted); font-weight: 700; margin-top: 1px; }
.act-did { padding: 10px 13px 11px; border-top: 1px solid var(--color-border); }
.act-did .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted); font-weight: 800; margin-bottom: 6px; }
.act { display: flex; gap: 9px; font-size: 13px; padding: 3px 0; align-items: flex-start; }
.act .t { color: var(--color-muted); font-size: 11.5px; font-weight: 700; flex-shrink: 0; width: 40px; text-align: right; padding-top: 1px; }
.act .ic { flex-shrink: 0; }
.act .tx { flex: 1; min-width: 0; }
.act .tx .m { color: var(--color-muted); font-size: 12px; }
.act-more-in { font-size: 12px; color: var(--color-muted); padding: 3px 0 0 49px; }
.empty-did { font-size: 12.5px; color: var(--color-muted); padding: 2px 0; }
.act-foot { padding: 4px 13px 11px; }
.act-more { background: none; border: none; padding: 4px 0; font-size: 12.5px; color: var(--color-primary); font-weight: 700; cursor: pointer; }
html[data-theme="dark"] .act-more, :root[data-theme="dark"] .act-more { color: var(--color-secondary); }
.ad-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted); font-weight: 800; margin: 12px 0 6px; }
.ad-acts .act { border-bottom: 1px solid var(--color-border); padding: 6px 0; }
.ad-acts .act .t { width: 92px; font-size: 11px; }
.ad-ses { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.ad-ses span { color: var(--color-muted); }

/* ===================================================================
   Карточка склада — «Матовое стекло» (вариант 2, v1.301):
   цветная стеклянная ШАПКА в цвет фабрики (--whc-a у каждой свой),
   ниже — чистое тело со строками продуктов (без «кричащих» плиток).
   Всё под .wh-card[class*=" wh-c"] — обычные склады (ПТЗ не трогаем).
   =================================================================== */
.wh-card[class*=" wh-c"] { padding: 0; overflow: hidden; background: var(--color-surface); border-left: 1px solid var(--color-border); }
html.premium .wh-card[class*=" wh-c"] { padding: 0; border-left: 1px solid rgba(17,17,17,.10); }
html[data-theme="dark"] .wh-card[class*=" wh-c"] { background: var(--color-surface); }
html.premium[data-theme="dark"] .wh-card[class*=" wh-c"] { border-left-color: rgba(255,255,255,.07); }

/* Шапка — цветная стеклянная полоса во всю ширину */
.wh-card[class*=" wh-c"] .wh-head {
  padding: 13px 15px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--whc-a) 92%, #000), color-mix(in srgb, var(--whc-a) 62%, #000));
}
.wh-card[class*=" wh-c"] .wh-name { color: #fff; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-name { color: #fff; }
.wh-card[class*=" wh-c"] .wh-keeper { color: rgba(255,255,255,.9); }
.wh-card[class*=" wh-c"] .wh-keeper .dot { background: rgba(255,255,255,.75); }
.wh-card[class*=" wh-c"] .wh-head .icon-btn { color: #ffd9d0; }
.wh-card[class*=" wh-c"] .wh-avatar,
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-avatar {
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.34); color: #fff; box-shadow: none;
}

/* Телефон и тело — с отступами (у карточки padding убран) */
.wh-card[class*=" wh-c"] .wh-phone { padding: 0 15px; }
.wh-card[class*=" wh-c"] .wh-mini { padding: 0 15px 14px; gap: 0; }

/* Продукты — чистые строки с тонким разделителем, цифра цветным ТЕКСТОМ */
.wh-card[class*=" wh-c"] .wh-mini .cell,
html.premium .wh-card[class*=" wh-c"] .wh-mini .cell {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 11px 2px;
}
.wh-card[class*=" wh-c"] .wh-mini .cell:last-child,
html.premium .wh-card[class*=" wh-c"] .wh-mini .cell:last-child { border-bottom: none; }
.wh-card[class*=" wh-c"] .wh-mini .cell .label { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.wh-card[class*=" wh-c"] .wh-mini .cell .val {
  background: none; box-shadow: none; padding: 0; border-radius: 0; font-size: 18px;
  color: var(--color-text-primary);
}
/* «Яркие карточки»: товарный акцент (полоса слева) + цифра в цвете товара — канон
   Пряжа=бордо · Хлопок=золото · Угар=зелёный (единый на всех экранах). */
.wh-card[class*=" wh-c"] .wh-mini .cell { position: relative; padding-left: 14px; }
.wh-card[class*=" wh-c"] .wh-mini .cell::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px;
  border-radius: 3px; background: var(--color-border);
}
.wh-card[class*=" wh-c"] .wh-mini .cell-cotton::before { background: #B7791F; }
.wh-card[class*=" wh-c"] .wh-mini .cell-yarn::before   { background: #550D18; }
.wh-card[class*=" wh-c"] .wh-mini .cell-ugar::before   { background: #1E6B45; }
.wh-card[class*=" wh-c"] .wh-mini .cell-cotton .val { color: #B7791F; }
.wh-card[class*=" wh-c"] .wh-mini .cell-yarn .val   { color: #550D18; }
.wh-card[class*=" wh-c"] .wh-mini .cell-ugar .val   { color: #1E6B45; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-yarn::before { background: #B33A4E; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-cotton .val { color: #E3B457; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-yarn .val   { color: #E5849A; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-ugar .val   { color: #5FD08A; }

/* Карточка склада: активная вкладка товара и карточки остатка — в цвете товара */
.wh-detail.det-cotton .tab.active { background: #B7791F; border-color: #B7791F; box-shadow: 0 3px 10px rgba(183,121,31,.28); }
.wh-detail.det-yarn   .tab.active { background: #550D18; border-color: #550D18; box-shadow: 0 3px 10px rgba(85,13,24,.28); }
.wh-detail.det-ugar   .tab.active { background: #1E6B45; border-color: #1E6B45; box-shadow: 0 3px 10px rgba(30,107,69,.28); }
html[data-theme="dark"] .wh-detail.det-yarn .tab.active { background: #8A1526; border-color: #8A1526; }
.wh-detail .stat { position: relative; }
.wh-detail .stat::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-border); }
.wh-detail.det-cotton .stat::before { background: #B7791F; }
.wh-detail.det-yarn   .stat::before { background: #550D18; }
.wh-detail.det-ugar   .stat::before { background: #1E6B45; }
.wh-detail.det-cotton .stat .kg { color: #B7791F; }
.wh-detail.det-yarn   .stat .kg { color: #550D18; }
.wh-detail.det-ugar   .stat .kg { color: #1E6B45; }
html[data-theme="dark"] .wh-detail.det-cotton .stat .kg { color: #E3B457; }
html[data-theme="dark"] .wh-detail.det-yarn   .stat .kg { color: #E5849A; }
html[data-theme="dark"] .wh-detail.det-ugar   .stat .kg { color: #5FD08A; }
/* Канон цветов товаров (цифра + иконка): Пряжа=бордо, Хлопок=золото, Угар=зелёный.
   Единый на всех экранах — этот блок последний, поэтому он и определяет цвет. */
.wh-card[class*=" wh-c"] .wh-mini .cell-cotton .val { color: #B7791F; }
.wh-card[class*=" wh-c"] .wh-mini .cell-yarn .val { color: #550D18; }
.wh-card[class*=" wh-c"] .wh-mini .cell-ugar .val { color: #1E6B45; }
.wh-card[class*=" wh-c"] .wh-mini .cell-cotton .cell-ic { color: #B7791F; }
.wh-card[class*=" wh-c"] .wh-mini .cell-yarn .cell-ic { color: #550D18; }
.wh-card[class*=" wh-c"] .wh-mini .cell-ugar .cell-ic { color: #1E6B45; }
/* Значок продукта — крупнее под увеличенную подпись (26px), чтобы не смотрелся мелким. */
.wh-card[class*=" wh-c"] .wh-mini .cell .cell-ic .ic { width: 22px; height: 22px; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-cotton .val { color: #E3B457; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-yarn .val { color: #E5849A; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-ugar .val { color: #5FD08A; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-cotton .cell-ic { color: #E3B457; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-yarn .cell-ic { color: #E5849A; }
html[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell-ugar .cell-ic { color: #5FD08A; }

.req { color: #c0392b; font-weight: 800; }
.mute-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: #c0392b; color: #fff; vertical-align: middle; }
/* Переотправка плана выработки — список складов */
.pr-whs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.pr-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--color-border); cursor: pointer; }
.pr-row.pr-all { margin-bottom: 6px; background: rgba(110,22,32,.05); }
.pr-row input { width: 18px; height: 18px; accent-color: var(--color-primary, #6E1620); flex: 0 0 auto; }
.pr-nm { font-weight: 700; font-size: 14px; }
.pr-st { margin-left: auto; font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.pr-row.pr-dis { opacity: .55; cursor: default; }
.digest-preview { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; margin: 6px 0 2px; font-family: inherit; }

/* Ряд кнопок прайс-листа/экспорта — ровные иконка-карточки (эмодзи сверху, подпись
   снизу). Плиток бывает 5-6 (напр. Контракт/Аналитика/Свод для клиента/Депозит/
   Файлы/Отчёты) — раньше все запихивались в ОДНУ строку (flex-wrap: nowrap) и
   бесконечно сжимались, из-за чего подписи ломались посреди слова. Теперь ряд
   переносится на вторую строку, если по ~3 плитки в ней не помещаются, вместо
   того чтобы сплющивать всё в одну. */
.btn-row.price-actions, .btn-row.icon-actions { flex-wrap: wrap; gap: 8px; align-items: stretch; }
.btn-row.price-actions .btn[data-act], .btn-row.icon-actions .btn[data-act] { flex: 1 1 calc(33.333% - 6px); min-width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 6px; line-height: 1.12; }
.price-actions .pa-ic, .icon-actions .pa-ic { font-size: 21px; line-height: 1; }
.price-actions .pa-tx, .icon-actions .pa-tx { font-size: 12.5px; font-weight: 700; text-align: center; text-wrap: balance; white-space: normal; }
/* iOS-плитки: значок в цветном квадрате сверху, подпись снизу (стиль «Настройки» iPhone). */
.icon-actions.ios-tiles .btn[data-act] { gap: 7px; }
.ios-tiles .pa-chip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.16); }
.ios-tiles .pa-chip.ch-add { background: linear-gradient(160deg, #8a1d2b, #6E1620); }
.ios-tiles .pa-chip.ch-anl { background: linear-gradient(160deg, #3f7fd6, #2b5fae); }
.ios-tiles .pa-chip.ch-cli { background: linear-gradient(160deg, #2bb2a3, #1c8577); }
.ios-tiles .pa-chip.ch-fil { background: linear-gradient(160deg, #d9a63f, #b9832a); }
.ios-tiles .pa-chip.ch-lst { background: linear-gradient(160deg, #2f7d5a, #1e6b45); }
.ios-tiles .pa-chip.ch-dep { background: linear-gradient(160deg, #3f9c5a, #2f7d46); }
.ios-tiles .pa-chip.ch-rep { background: linear-gradient(160deg, #8a5cd6, #5f3aae); }
.ios-tiles .pa-chip.ch-gen { background: linear-gradient(160deg, #d4af37, #9c7328); }

/* Конструктор отчётов */
.rb-head { margin: 2px 2px 12px; }
.rb-head h2 { margin: 0 0 3px; font-size: 19px; font-weight: 800; }
.rb-lbl { font-size: 11px; color: var(--color-text-secondary); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin: 14px 2px 7px; }
.rb-seg, .rb-seg2 { margin-bottom: 4px; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rb-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 9px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.rb-chip .bx { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--color-border); display: inline-grid; place-items: center; font-size: 10px; color: #fff; }
.rb-chip.on { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface)); }
.rb-chip.on .bx { background: var(--color-primary); border-color: var(--color-primary); }
.rb-opts { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 2px 4px; }
.rb-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.rb-sw input { width: 18px; height: 18px; }
.rb-prev { margin-top: 14px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.rb-prev-h { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); color: var(--color-primary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 7px 11px; border-bottom: 1px solid var(--color-border); }
.rb-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--color-surface); }
.rb-table th, .rb-table td { border: 1px solid var(--color-border); padding: 6px 8px; white-space: nowrap; text-align: left; }
.rb-table thead th { background: rgba(110,22,32,.06); color: var(--color-primary); font-weight: 800; font-size: 10.5px; text-transform: uppercase; }
.rb-table .r { text-align: right; }
.rb-table .hl { background: #fff6bf; }
.rb-table .rb-grp td { background: var(--color-secondary-soft, #f6efda); color: var(--color-primary-dark, #550D18); font-weight: 800; font-size: 10.5px; text-transform: uppercase; }
.rb-table .rb-tot td { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); font-weight: 800; color: var(--color-primary); }
.rb-table .rb-tot td.hl { background: #f2e58a; color: #6b5320; }
@media (prefers-color-scheme: dark) {
  .rb-table thead th { background: rgba(229,132,154,.10); }
  .rb-table .hl, .rb-table .rb-tot td.hl { background: #5a5220; color: #fff7bf; }
  .rb-table .rb-grp td { background: #2c2820; color: #e5cf93; }
}

/* ===== Депозит: множественный выбор контрактов ===== */
.dep-selbar { display: flex; gap: 8px; margin: 2px 0 4px; }
.dep-selbar .btn { flex: 1 1 0; }
.dep-pick2 { display: flex; align-items: center; gap: 11px; width: 100%; border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; background: var(--color-surface); box-shadow: var(--shadow-sm); cursor: pointer; margin-bottom: 8px; }
.dep-pick2.on { border-color: color-mix(in srgb, var(--color-secondary, #C39A3E) 60%, transparent); background: color-mix(in srgb, var(--color-secondary, #C39A3E) 10%, var(--color-surface)); }
.dep-pick2 .dep-cb { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--color-primary, #6E1620); }
.dep-showbar { position: sticky; bottom: 0; padding: 10px 0 4px; margin-top: 6px; background: linear-gradient(180deg, transparent, var(--color-background) 40%); }
.dep-showbar .btn[disabled] { opacity: .5; }

/* ===== Депозит: выбор контракта (старый одиночный — совместимость) ===== */
.dep-pick-wrap { display: flex; flex-direction: column; gap: 8px; }
.dep-pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--color-border); border-radius: 14px; padding: 13px 14px; background: var(--color-surface); box-shadow: var(--shadow-sm); cursor: pointer; font-family: inherit; }
.dep-pick.all { background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary, #C39A3E) 12%, var(--color-surface)), var(--color-surface)); }
.dep-pick-main { flex: 1; min-width: 0; }
.dep-pick-no { font-size: 16px; font-weight: 800; }
.dep-pick-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dep-pick-arrow { color: var(--color-text-secondary); font-size: 20px; opacity: .5; flex: 0 0 auto; }
.dep-pick .pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; flex: 0 0 auto; }
.dep-pick .pill.ok { background: rgba(63,156,90,.16); color: #2f7d46; }
.dep-pick .pill.go { background: rgba(195,154,62,.18); color: #8a6a16; }
.dep-pick .pill.wait { background: rgba(154,160,166,.2); color: #61656b; }
.dep-pick .pill.warn { background: rgba(192,57,43,.14); color: #a53125; }
:root[data-theme="dark"] .dep-pick .pill.ok { color: #7fd39a; }
:root[data-theme="dark"] .dep-pick .pill.go { color: #e0bd5c; }
:root[data-theme="dark"] .dep-pick .pill.wait { color: #c3c7cc; }
:root[data-theme="dark"] .dep-pick .pill.warn { color: #e88b7f; }

/* ===== Депозит-отчёт (залог клиента, шкала 20/80) ===== */
.dep-report { display: flex; flex-direction: column; gap: 10px; }
.dep-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dep-kpi { background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary, #C39A3E) 12%, var(--color-surface)), var(--color-surface)); border: 1px solid var(--color-border); border-radius: 13px; padding: 10px 6px; text-align: center; }
.dep-kpi .v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dep-kpi .l { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 2px; text-transform: uppercase; letter-spacing: .02em; }
.dep-legend { display: flex; gap: 16px; justify-content: center; font-size: 11.5px; color: var(--color-text-secondary); margin: 2px 0; }
.dep-lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.dep-lg.dep { background: var(--color-secondary, #C39A3E); }
.dep-lg.rel { background: var(--color-primary, #6E1620); }
.dep-card { border: 1px solid var(--color-border); border-radius: 15px; padding: 13px 13px 12px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.dep-card.ok { border-left: 4px solid #3f9c5a; }
.dep-card.go { border-left: 4px solid var(--color-secondary, #C39A3E); }
.dep-card.wait { border-left: 4px solid #9aa0a6; }
.dep-card.warn { border-left: 4px solid #c0392b; }
.dep-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dep-no { font-size: 17px; font-weight: 800; }
.dep-buyer { font-size: 12px; color: var(--color-text-secondary); }
.dep-meta { font-size: 12px; color: var(--color-text-secondary); margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.dep-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 20px; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-secondary, #C39A3E) 12%, var(--color-surface)); color: var(--color-text-primary); cursor: pointer; margin-bottom: 11px; font-variant-numeric: tabular-nums; }
.dep-chip .dep-pen { opacity: .6; margin-left: 2px; }
.dep-bar { position: relative; height: 26px; border-radius: 8px; background: var(--color-background); overflow: hidden; border: 1px solid var(--color-border); }
.dep-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3f9c5a, #2f7d46); border-radius: 8px 0 0 8px; transition: width .35s ease; }
.dep-fill.warn { background: linear-gradient(90deg, #e0bd5c, #C39A3E); }
.dep-fill.empty { background: transparent; }
.dep-bar-lab { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); font-size: 10.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.dep-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; }
.dep-mark.dep { background: var(--color-secondary, #C39A3E); }
.dep-mark.rel { background: var(--color-primary, #6E1620); }
.dep-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-secondary); margin-top: 3px; }
.dep-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 11px; }
.dep-fig { text-align: center; padding: 8px 4px; border-radius: 12px; }
.dep-fig .fl { font-size: 10.5px; color: var(--color-text-secondary); line-height: 1.25; }
.dep-fig .fv { font-size: 13.5px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
/* Ключевая цифра — «Отгрузка сверх депозита» — выделена, чтобы сразу бросалась в глаза. */
.dep-fig.hi { background: color-mix(in srgb, var(--color-secondary, #C39A3E) 16%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-secondary, #C39A3E) 42%, transparent); }
.dep-fig.hi .fl { color: #8a6a16; font-weight: 700; }
.dep-fig.hi .fv { font-size: 15.5px; color: var(--color-primary, #6E1620); }
:root[data-theme="dark"] .dep-fig.hi .fl { color: #e0bd5c; }
:root[data-theme="dark"] .dep-fig.hi .fv { color: #e6c25a; }
/* Аванс отрицательный (клиент должен) — красный акцент. */
.dep-fig.hi.debt { background: color-mix(in srgb, #c0392b 12%, var(--color-surface)); border-color: color-mix(in srgb, #c0392b 40%, transparent); }
.dep-fig.hi.debt .fl { color: #a53125; }
.dep-fig.hi.debt .fv { color: #c0392b; }
:root[data-theme="dark"] .dep-fig.hi.debt .fl,
:root[data-theme="dark"] .dep-fig.hi.debt .fv { color: #e88b7f; }
.dep-explain-row { margin-top: 9px; font-size: 12px; color: var(--color-text-secondary); text-align: center; font-variant-numeric: tabular-nums; }
.dep-explain-row b { color: var(--color-text-primary); }
.dep-explain-row.dep-adv { margin-top: 5px; padding-top: 7px; border-top: 1px dashed var(--color-border); }
.dep-explain-row .dep-over { color: var(--color-primary, #6E1620); font-weight: 800; }
:root[data-theme="dark"] .dep-explain-row .dep-over { color: #e6c25a; }
.dep-howto { margin: 2px 0 10px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--color-secondary, #C39A3E) 9%, var(--color-surface)); border: 1px solid var(--color-border); font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); }
.dep-howto b { color: var(--color-text-primary); }
@media (prefers-reduced-motion: reduce) { .dep-fill { transition: none; } }
.dep-card .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.dep-card .pill.ok { background: rgba(63,156,90,.16); color: #2f7d46; }
.dep-card .pill.go { background: rgba(195,154,62,.18); color: #8a6a16; }
.dep-card .pill.wait { background: rgba(154,160,166,.2); color: #61656b; }
.dep-card .pill.warn { background: rgba(192,57,43,.14); color: #a53125; }
:root[data-theme="dark"] .dep-card .pill.ok { color: #7fd39a; }
:root[data-theme="dark"] .dep-card .pill.go { color: #e0bd5c; }
:root[data-theme="dark"] .dep-card .pill.wait { color: #c3c7cc; }
:root[data-theme="dark"] .dep-card .pill.warn { color: #e88b7f; }

/* Калькулятор цен (в прайс-листе) */
.calc-hint { font-size: 12.5px; color: var(--color-text-secondary); margin: 8px 2px 10px; }
.calc-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.calc-pos { border: 1px solid var(--color-border); border-radius: 13px; padding: 11px 12px; margin-bottom: 9px; background: var(--color-surface); }
.calc-pos-h { display: flex; align-items: center; gap: 8px; }
.calc-yarn { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-background); font-weight: 700; font-size: 14px; color: var(--color-text-primary); }
.calc-del { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--color-border); background: var(--color-background); color: #c0392b; font-weight: 800; cursor: pointer; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.calc-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.calc-l { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.calc-price, .calc-qty { width: 100%; padding: 10px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-background); font-weight: 800; font-size: 15px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.calc-vat { padding: 10px 11px; border: 1px dashed var(--color-border); border-radius: 10px; font-weight: 800; font-size: 15px; color: var(--color-secondary, #9c7a2a); font-variant-numeric: tabular-nums; }
.calc-usd { margin-top: 4px; font-size: 12px; font-weight: 700; color: #1e7a44; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .calc-usd { color: #6ac48c; }
.calc-line { text-align: right; margin-top: 9px; font-size: 13px; color: var(--color-text-secondary); }
.calc-line b { color: #1e7a44; font-size: 15px; }
.calc-grand { margin: 12px 0; padding: 14px 16px; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(160deg, #E7C976, #C39A3E); color: #3a2a10; }
.calc-grand .calc-tv { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-grand .calc-tw { font-variant-numeric: tabular-nums; }
.imp-sum { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(195,154,62,.12); border: 1px solid rgba(195,154,62,.34); font-size: 13.5px; }
.imp-det { margin-top: 8px; font-size: 12.5px; }
.imp-det > summary { cursor: pointer; font-weight: 700; color: var(--color-primary, #6E1620); padding: 5px 0; }
.imp-line { padding: 3px 6px; color: var(--color-text-secondary); border-top: 1px solid var(--color-border); }

/* Выполнение по спецификациям (карточка экспорт-контракта) */
.spp-wrap { margin: 8px 0 4px; }
.spp-title { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 7px; }
.spp-c { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid #8a94a3; border-radius: 11px; padding: 9px 11px; margin-bottom: 7px; }
.spp-c.done { border-left-color: #1e7a44; } .spp-c.work { border-left-color: #2f6fed; } .spp-c.none { border-left-color: #c98a12; }
.spp-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spp-name { font-size: 13px; font-weight: 800; color: var(--color-text-primary); min-width: 0; }
.spp-name b { color: var(--color-primary, #6E1620); }
.spp-name span { color: var(--color-text-secondary); font-weight: 600; font-size: 11.5px; }
.spp-chip { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.spp-chip.done { background: rgba(30,122,68,.14); color: #1e7a44; }
.spp-chip.work { background: rgba(47,111,237,.14); color: #2f6fed; }
.spp-chip.none { background: rgba(201,138,18,.16); color: #b07d10; }
.spp-bar { height: 7px; border-radius: 999px; background: #f7cba6; overflow: hidden; margin: 8px 0 7px; }
.spp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f6fed, #5b93ff); }
.spp-c.done .spp-bar i { background: linear-gradient(90deg, #1e7a44, #37a563); }
.spp-c.none .spp-bar i { background: #c98a12; }
.spp-grid { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 11.5px; }
.spp-grid .kv { display: flex; gap: 5px; align-items: baseline; }
.spp-grid .kv .l { color: var(--color-text-secondary); }
.spp-grid .vs { color: #2f6fed; font-weight: 800; }
.spp-grid .vp { color: #1e7a44; font-weight: 800; }
.spp-grid .vr { color: #b07d10; font-weight: 800; }
html[data-theme="dark"] .spp-bar { background: rgba(247,203,166,.25); }
html[data-theme="dark"] .spp-grid .vs { color: #6ea8ff; }
html[data-theme="dark"] .spp-chip.work { color: #6ea8ff; }
html[data-theme="dark"] .spp-grid .vr, html[data-theme="dark"] .spp-chip.none { color: #e5c56e; }
.spp-c.over { border-left-color: #c0392b !important; }
.spp-warn { margin-top: 7px; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #a02617; background: rgba(192,57,29,.10); border: 1px solid rgba(192,57,29,.28); }
.spp-warn b { color: #c0392b; }

/* Свод перемещений — матрица «кто → кому» */
.tr-period { display: flex; gap: 10px; margin: 10px 0 4px; }
.tr-period .field { flex: 1; }
table.mtx-tr { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.mtx-tr th, .mtx-tr td { padding: 8px 10px; text-align: right; white-space: nowrap; border: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.mtx-tr thead th { background: var(--color-primary, #6E1620); color: #fff; font-weight: 700; font-size: 12px; }
.mtx-tr thead th:first-child { text-align: left; }
.mtx-tr thead th.tot { background: #4d0e16; }
.mtx-tr tbody th { background: rgba(110,22,32,.07); text-align: left; font-weight: 800; color: var(--color-primary, #6E1620); }
.mtx-tr td.z { color: var(--color-text-secondary); opacity: .45; }
.mtx-tr td.val { font-weight: 700; color: var(--color-text-primary); }
.mtx-tr td.tot, .mtx-tr .tot { background: #F6EFDA; font-weight: 800; color: var(--color-primary, #6E1620); }
.mtx-tr tfoot th, .mtx-tr tfoot td { background: #F6EFDA; font-weight: 800; color: var(--color-primary, #6E1620); }
html[data-theme="dark"] .mtx-tr tbody th, html[data-theme="dark"] .mtx-tr td.tot, html[data-theme="dark"] .mtx-tr tfoot th, html[data-theme="dark"] .mtx-tr tfoot td { color: #e5c56e; }
html[data-theme="dark"] .mtx-tr td.tot, html[data-theme="dark"] .mtx-tr tfoot th, html[data-theme="dark"] .mtx-tr tfoot td { background: #3a2f1a; }
html[data-theme="dark"] .mtx-tr tbody th { background: rgba(195,154,62,.10); }
html[data-theme="dark"] .spp-warn { color: #f3a99b; background: rgba(192,57,29,.16); border-color: rgba(192,57,29,.4); }
html[data-theme="dark"] .spp-warn b { color: #ff9c8a; }

/* Pull-to-refresh (только браузерная/standalone-версия) */
body.browser { overscroll-behavior-y: contain; }
.ptr-ind {
  position: fixed; top: 0; left: 50%; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface, #fff); color: var(--color-primary, #6E1620);
  box-shadow: 0 4px 16px rgba(78, 14, 22, .28);
  transform: translate(-50%, -46px); opacity: 0; pointer-events: none;
  transition: opacity .16s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ptr-ind.show { opacity: 1; }
.ptr-ind svg { width: 22px; height: 22px; transition: transform .08s linear; }
.ptr-ind.ready { color: var(--color-secondary, #C39A3E); }
/* Взведено (порог + удержание) — залитый золотой кружок «теперь отпусти» */
.ptr-ind.armed { background: var(--color-secondary, #C39A3E); color: #fff; box-shadow: 0 5px 18px rgba(195, 154, 62, .5); }
.ptr-ind.refreshing svg { animation: ptr-rot .7s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }

/* ======================= ПРАЙС-ЛИСТ · «Бордовая витрина» ======================= */
.pl-card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 18px 30px 55px -34px rgba(78, 14, 22, .5), 0 2px 8px rgba(78, 14, 22, .08);
  margin-bottom: 16px;
}
.pl-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px;
  color: #fff;
  background: radial-gradient(130% 150% at 0% 0%, #8d1c2a, #6E1620 55%, #4d0e16);
}
.pl-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #9c7a2a, #E7C976, #9c7a2a);
}
.pl-name { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.pl-type { font-size: 12px; opacity: .86; margin-top: 2px; }
.pl-type-inline { font-size: 13px; font-weight: 600; opacity: .8; }
.pl-sub { font-size: 11.5px; opacity: .85; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-cur-chip { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.pl-cur-chip.usd { background: rgba(63,156,90,.16); color: #2f7d46; }
.pl-cur-chip.uzs { background: rgba(195,154,62,.18); color: #8a6a16; }
:root[data-theme="dark"] .pl-cur-chip.usd { background: rgba(63,156,90,.24); color: #7fd39a; }
:root[data-theme="dark"] .pl-cur-chip.uzs { background: rgba(212,175,55,.2); color: #e0bd5c; }
.pl-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.pl-act {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(231, 201, 118, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--transition-normal) ease;
}
.pl-act:hover { background: rgba(255, 255, 255, .26); }
.pl-act.del { color: #ffd7db; border-color: rgba(255, 170, 178, .5); }
.pl-body { padding: 6px 18px 10px; }
.pl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0;
}
.pl-row + .pl-row { border-top: 1px dashed var(--color-border); }
.pl-lab { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.pl-lab small { display: block; font-weight: 500; font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
.pl-price {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.pl-price.exp { color: #9c7a2a; }
.pl-price.loc { color: #6E1620; }
html[data-theme="dark"] .pl-price.exp { color: #E7C976; }
html[data-theme="dark"] .pl-price.loc { color: #e58a95; }
.pl-foot {
  padding: 10px 18px;
  background: rgba(195, 154, 62, .10);
  border-top: 1px solid var(--color-border);
  font-size: 12px; color: var(--color-text-secondary);
}
html.lite .pl-act { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ============================================================
   🟥🟨 BORDO + TILLA — экспериментальный дизайн, СТАДИЯ 1
   (v1, 09.09.2026). Включается классом html.bordotilla
   (Настройки → «Bordo + Tilla», ПОКА ТОЛЬКО у админа — см.
   isBordoTilla() в app.js). Работает поверх html.premium (текущий
   дефолтный дизайн) — переопределяет только шапку, кнопки, общие
   карточки и главный экран (список складов). Остальные экраны
   (аналитика, формы, модалки, таблицы, тёмная тема, сплэш) —
   следующими стадиями, катятся отдельно, когда эта стадия одобрена.
   Продуктовые цвета складов (пряжа/хлопок/угар) и радужная раскраска
   карточек по фабрикам НАМЕРЕННО не тронуты в этой стадии — решаем
   после отзыва по стадии 1.
   ============================================================ */
/* Радиусы НЕ трогаем — сознательно наследуем от html.premium (16/20/24px),
   чтобы карточки, кнопки, вкладки, KPI-плитки — вообще всё на экране — были
   скруглены ОДИНАКОВО. Именно рассинхрон радиусов (одно скруглено, другое
   острое) был причиной «не совмещается» в стадии 1v0 — теперь везде общий
   масштаб скругления, меняются только заливка/тень/шрифт/цвет. */
html.bordotilla {
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --glass-bg: var(--color-surface); --glass-bg-strong: var(--color-surface); --glass-bg-soft: var(--color-surface);
  --glass-border: var(--color-primary); --glass-shadow: none;
}
html.bordotilla, html.bordotilla body {
  background: #f2f2f3;
  background-attachment: initial;
  letter-spacing: normal;
}
html.bordotilla[data-theme="dark"], html.bordotilla[data-theme="dark"] body { background: #17120f; }

/* ---- Шапка: плоское бордо, без стекла/блюра, тонкая золотая линия ---- */
html.bordotilla #topbar {
  background: var(--color-primary);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 2px solid var(--color-secondary);
  box-shadow: none;
}
html.bordotilla[data-theme="dark"] #topbar { background: #4E0B1A; border-bottom-color: rgba(195,154,62,.5); }
html.bordotilla #brand-name {
  font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
html.bordotilla .greeting {
  font-weight: 600;
  font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary);
}
html.bordotilla[data-theme="dark"] .greeting { color: var(--color-secondary); }
html.bordotilla .section-title,
html.bordotilla .set-label {
  font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---- Кнопки: плоские (без тени), скругление как у всего экрана, uppercase на системном шрифте ---- */
html.bordotilla .btn {
  box-shadow: none;
  font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
html.bordotilla .btn-primary { background: var(--color-primary); box-shadow: none; }
html.bordotilla .btn-ghost { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
html.bordotilla[data-theme="dark"] .btn-ghost { border-color: rgba(195,154,62,.6); color: var(--color-secondary-soft, #E7D6A8); }
/* Подписи под иконками (плитки действий: «Прайс», «Экспорт» и т.п.) — заглавные
   ОДНОСЛОВНЫЕ подписи («КАЛЬКУЛЯТОР», «ОТЧЁТЫ») переносить по пробелам НЕЧЕМ —
   в обычном регистре умещались, а в uppercase+разрядке стали шире плитки и
   налезали на соседнюю. Разрешаем перенос внутри слова и чуть сжимаем разрядку. */
html.bordotilla .pa-tx { overflow-wrap: break-word; word-break: break-word; letter-spacing: .01em; }

/* ---- Сегменты/вкладки (переключатели в Настройках) — тот же язык, что у кнопок,
   чтобы не выглядели «чужеродной» серой пилюлей рядом с бордо-карточками. ---- */
html.bordotilla .tabs {
  background: transparent; border: 1px solid var(--color-primary); box-shadow: none;
}
html.bordotilla .tab {
  background: transparent; border: 0; color: var(--color-primary); box-shadow: none;
  font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
html.bordotilla .tab.active { background: var(--color-primary); color: #fff; }
html.bordotilla[data-theme="dark"] .tabs { border-color: rgba(195,154,62,.5); }
html.bordotilla[data-theme="dark"] .tab { color: var(--color-secondary-soft, #E7D6A8); }
html.bordotilla[data-theme="dark"] .tab.active { background: var(--color-primary); color: #fff; }

/* ---- Общие карточки: рамка вместо заливки/тени ---- */
html.bordotilla .settings-card,
html.bordotilla .stat {
  box-shadow: none;
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
}
html.bordotilla[data-theme="dark"] .settings-card,
html.bordotilla[data-theme="dark"] .stat { border-color: rgba(195,154,62,.5); }

/* ---- Главный экран: список складов — фирменный цвет фабрики возвращён, но
   аккуратно: мягкая пастельная подложка (--whc-bg) + цветное название и
   аватар (--whc-a) + тонкая цветная рамка — каждая фабрика узнаваема с
   первого взгляда, а не одинаковый плоский бордо-квадрат. Это возрождение
   уже существовавшего в проекте «пастельного» дизайна карточки (см. .wh-c0…
   .wh-c7 ниже), который был не виден из-за более позднего правила шапки
   «Матовое стекло» (v1.301, тёмный градиент) — карточка выглядела то
   нечитаемо тёмной, то (после починки контраста) плоско-однообразной. ---- */
html.bordotilla .wh-card {
  box-shadow: none;
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
}
html.bordotilla .wh-card:active { transform: none; box-shadow: none; }
html.bordotilla .wh-card[class*=" wh-c"] {
  background: linear-gradient(150deg, var(--whc-bg) 0%, var(--color-surface) 130%);
  border: 1px solid color-mix(in srgb, var(--whc-a) 28%, transparent);
  border-left: 4px solid var(--whc-a);
}
/* Цветной градиент шапки из «Матового стекла» убран — карточка сама уже
   цветная (пастель+рамка), второй слой цвета поверх был бы лишним и не давал
   бы тексту названия читаться (см. историю правок этого блока). */
html.bordotilla .wh-card[class*=" wh-c"] .wh-head { background: none; }
html.bordotilla .wh-card[class*=" wh-c"] .wh-avatar {
  background: var(--whc-a); box-shadow: 0 2px 6px color-mix(in srgb, var(--whc-a) 45%, transparent);
}
html.bordotilla .wh-card[class*=" wh-c"] .wh-name { color: var(--whc-a); }
html.bordotilla .wh-card[class*=" wh-c"] .wh-mini .cell { background: rgba(255,255,255,.55); }
html.bordotilla .wh-card[class*=" wh-c"] .wh-keeper { color: var(--color-text-secondary); }
html.bordotilla .wh-card[class*=" wh-c"] .wh-keeper .dot { background: var(--whc-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--whc-a) 18%, transparent); }
html.bordotilla .wh-card[class*=" wh-c"] .wh-head .icon-btn { color: var(--color-danger); }
html.bordotilla[data-theme="dark"] .wh-card { border-color: rgba(195,154,62,.45); }
html.bordotilla[data-theme="dark"] .wh-card[class*=" wh-c"] {
  background: linear-gradient(150deg, var(--whc-dk, rgba(255,255,255,.05)) 0%, var(--color-surface) 130%);
  border-color: color-mix(in srgb, var(--whc-ad, var(--whc-a)) 35%, transparent);
  border-left-color: var(--whc-ad, var(--whc-a));
}
html.bordotilla[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-name { color: var(--whc-ad, #fff); }
html.bordotilla[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-avatar { background: var(--whc-ad, var(--whc-a)); color: #1b1f24; }
html.bordotilla[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-mini .cell { background: rgba(255,255,255,.06); }
html.bordotilla[data-theme="dark"] .wh-card[class*=" wh-c"] .wh-keeper { color: var(--color-text-secondary); }
html.bordotilla .wh-name {
  font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
}
/* Числа складов и карточек — моноширинные пропорции цифр (как в паспорте) */
html.bordotilla .wh-mini .cell .val,
html.bordotilla .stat .kg { font-variant-numeric: tabular-nums; }

/* Отключаем анимации/эффекты стадии для «облегчённого» режима — как у остального дизайна. */
html.bordotilla.lite .wh-card,
html.bordotilla.lite .settings-card,
html.bordotilla.lite .stat { transition: none; }

/* ============================================================
   СТАДИЯ 2 — карточка склада: дневной баланс (На начало/Приход/
   Расход/На конец), карточки месяцев, свод за месяц, лента операций.
   ============================================================ */
/* Полоса дневного баланса — «На конец» получает золотую заливку,
   как ячейка Oxiriga в паспорте (одинаково в обеих темах). */
html.bordotilla .datecard { box-shadow: none; border: 1px solid var(--color-primary); }
html.bordotilla .datecard-head {
  font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; font-size: 15px;
}
html.bordotilla .datecard-grid { background: var(--color-primary); }
html.bordotilla .dc span { letter-spacing: .06em; }
html.bordotilla .dc.end { background: var(--color-secondary); }
html.bordotilla .dc.end span, html.bordotilla .dc.end b { color: var(--color-primary-dark); }
html.bordotilla[data-theme="dark"] .datecard { border-color: rgba(195,154,62,.5); }
html.bordotilla[data-theme="dark"] .datecard-grid { background: rgba(195,154,62,.4); }

/* Карточки месяцев (тап → операции за месяц) */
html.bordotilla .month-card { box-shadow: none; border: 1px solid var(--color-primary); background: var(--color-surface); }
html.bordotilla .month-card:active { transform: none; box-shadow: none; }
html.bordotilla .mcard-title {
  font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
}
html.bordotilla[data-theme="dark"] .month-card { border-color: rgba(195,154,62,.45); }

/* Свод за месяц (Приход/Расход/Остаток на конец) — та же грамматика, что у дня:
   последняя ячейка («Остаток на конец») — золотая. */
html.bordotilla .mms { box-shadow: none; border: 1px solid var(--color-primary); }
html.bordotilla .mms span { letter-spacing: .06em; }
html.bordotilla .mms:last-child { background: var(--color-secondary); border-color: var(--color-secondary); }
html.bordotilla .mms:last-child span, html.bordotilla .mms:last-child b { color: var(--color-primary-dark); }
html.bordotilla[data-theme="dark"] .mms { border-color: rgba(195,154,62,.5); }

/* Лента операций (приход/расход/возврат/начальный остаток) — цветной левый край
   остаётся смысловым сигналом (зелёный/красный/синий/золото), рамка — в цвет темы. */
html.bordotilla .op { box-shadow: none; border-color: rgba(110,22,32,.25); }
html.bordotilla .op-kind { letter-spacing: .06em; }
html.bordotilla[data-theme="dark"] .op { border-color: rgba(195,154,62,.28); }

/* Поле даты свода за день — рамка в цвет темы вместо нейтральной. */
html.bordotilla .svod-date { border-color: var(--color-primary); }
html.bordotilla[data-theme="dark"] .svod-date { border-color: rgba(195,154,62,.5); }

/* ============================================================
   СТАДИЯ 3 — модалки и формы. Это один общий компонент (showModal),
   через который проходит КАЖДАЯ форма приложения (добавить приход,
   изменить склад, любое редактирование) — переработка сразу даёт
   эффект на все экраны, а не только на перечисленные в стадиях 1–2.
   ============================================================ */
/* Верхняя золотая полоса модалки и «ручка» уже фирменные — просто перекрашиваем
   ручку под золото (была нейтрально-серой). */
html.bordotilla .modal::before { background: color-mix(in srgb, var(--color-secondary) 75%, transparent); }
html.bordotilla .modal h3 {
  font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; font-size: 21px;
}
/* Подписи полей — как остальные ярлыки в теме (uppercase, разрядка). */
html.bordotilla .field label {
  font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
}
/* Поля ввода: рамка в цвет темы вместо нейтральной. Шрифт задан явно тем же
   системным стеком, что у body — инпуты САМИ не наследуют font-family от body,
   без этой строки они брали бы шрифт браузера по умолчанию и выглядели бы
   «чужими» на фоне остального интерфейса. */
html.bordotilla .field input,
html.bordotilla .field select,
html.bordotilla .field textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, sans-serif;
  border-color: var(--color-primary);
  background: var(--color-surface);
}
html.bordotilla .field input:focus,
html.bordotilla .field select:focus,
html.bordotilla .field textarea:focus { outline-color: var(--color-secondary); }
html.bordotilla[data-theme="dark"] .field input,
html.bordotilla[data-theme="dark"] .field select,
html.bordotilla[data-theme="dark"] .field textarea { border-color: rgba(195,154,62,.5); }

/* Пустое состояние (списков без записей) — рамка вместо серого пунктира. */
html.bordotilla .empty { border: 1px dashed var(--color-primary); background: var(--color-surface); }
html.bordotilla[data-theme="dark"] .empty { border-color: rgba(195,154,62,.4); }

/* ============================================================
   СТАДИЯ 4 — тёмная тема (лёгкая правка контраста) + сплэш-экран.
   ============================================================ */
/* Бордовый текст (--color-primary, #6E1620) на тёмном фоне читается хуже,
   чем на светлом — на нескольких уже переработанных ярлыках/заголовках
   меняем его на золото (только в тёмной теме bordotilla; остальной
   классический дизайн этого не касается). */
html.bordotilla[data-theme="dark"] .section-title,
html.bordotilla[data-theme="dark"] .set-label,
html.bordotilla[data-theme="dark"] .modal h3,
html.bordotilla[data-theme="dark"] .mcard-cnt,
html.bordotilla[data-theme="dark"] .mcard-arrow { color: var(--color-secondary); }

/* Сплэш-экран (вход): уже фирменно бордо+золото со сборкой иконок в лого —
   у названия чуть шире разрядка, чтобы первый экран сразу задавал тон теме.
   Цвета, шрифт (системный, как везде) и анимация — не трогаем. */
html.bordotilla .splash-brand {
  font-weight: 700; letter-spacing: .22em;
}

/* ============================================================
   СТАДИЯ 5 — карточка экспортного контракта (.xhero/.xfin/.xprog/
   .xtabs/.xitem/.xring) — единственный крупный экран, оставшийся
   нетронутым: фон и шапка уже бордо-золото, а карточки внутри были
   белыми/серыми premium-карточками с разноцветными эмодзи-иконками
   без рамки — отсюда «несовместимо, трудно читать» (жалоба с
   скриншотами). Разноцветные эмодзи (💰🚚💵📦💳✏️📋✅🔓) в этом экране
   заменены на общую SVG-тему иконок (ICONS, currentColor — та же, что
   уже применяется в приложении) — сама заменена в app.js, здесь только
   цвет/подложка. Карточки и подписи переводим на единый язык темы. */
html.bordotilla .xhero-num,
html.bordotilla .xhero-buyer {
  font-weight: 800; letter-spacing: .02em;
}
html.bordotilla .xhero-buyer { text-transform: uppercase; }

/* Финансовые карточки, прогресс-дашборд, карточки записей, кольцо оплат —
   рамка в цвет темы вместо нейтрально-серой, заливка — токен поверхности
   (сам подстраивается под тёмную тему). */
html.bordotilla .xfin-card,
html.bordotilla .xprog,
html.bordotilla .xitem,
html.bordotilla .xring-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  box-shadow: none;
}
html.bordotilla[data-theme="dark"] .xfin-card,
html.bordotilla[data-theme="dark"] .xprog,
html.bordotilla[data-theme="dark"] .xitem,
html.bordotilla[data-theme="dark"] .xring-wrap { border-color: rgba(195,154,62,.4); }

/* Круглая подложка под SVG-иконку — сама иконка через currentColor красится
   в цвет темы (бордо на светлом, золото на тёмном). */
html.bordotilla .xf-ic,
html.bordotilla .xi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 6px;
  border-radius: 50%; color: var(--color-primary);
  background: rgba(111,16,37,.07); border: 1px solid rgba(111,16,37,.18);
}
html.bordotilla .xi-head .xi-ic { margin-bottom: 0; }
html.bordotilla[data-theme="dark"] .xf-ic,
html.bordotilla[data-theme="dark"] .xi-ic {
  color: var(--color-secondary);
  background: rgba(195,154,62,.14); border-color: rgba(195,154,62,.32);
}

/* Подписи карточек — как остальные ярлыки темы (uppercase, разрядка). */
html.bordotilla .xf-k,
html.bordotilla .xp-k,
html.bordotilla .xi-grid .k,
html.bordotilla .xt-title {
  font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
html.bordotilla .xi-title {
  font-weight: 700; letter-spacing: .01em;
}

/* Вкладки контракта (Спецификации/Отгрузки/Оплаты/Допы) — тот же язык,
   что у остальных сегментов приложения, вместо нейтрально-серых пилюль. */
html.bordotilla .xtab {
  background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
html.bordotilla .xtab b { opacity: .75; }
html.bordotilla .xtab.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: none; }
html.bordotilla[data-theme="dark"] .xtab { border-color: rgba(195,154,62,.5); color: var(--color-secondary-soft, #E7D6A8); }
html.bordotilla[data-theme="dark"] .xtab.on { background: var(--color-primary); color: #fff; }

/* Замена цветных эмодзи-глифов (💰🚚💵📦💳✏️📋✅🔓 и т.п.) на общую тему темы
   SVG-иконок (currentColor) — это же исправление действует и в Классике,
   не только в Bordo + Tilla: раньше эмодзи не подчинялись CSS вообще. */
.xtab .ic, .xp-k .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 1px; }
.icon-btn .ic { width: 15px; height: 15px; vertical-align: -3px; }
.xi-head .icon-btn .ic { vertical-align: -2px; }

/* ===== ПТЗ · Приёмка сырца (заготпункт / район / физ / конд / сумма) ===== */
.intake-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }
.intake-tbl { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; }
.intake-tbl th { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); padding: 10px 11px; text-align: left; white-space: nowrap; border-bottom: 2px solid var(--color-border); }
.intake-tbl th.r { text-align: right; }
.intake-tbl td { padding: 11px 11px; border-top: 1px solid var(--color-border); white-space: nowrap; vertical-align: middle; color: var(--color-text-primary); }
.intake-tbl tbody tr:first-child td { border-top: 0; }
.intake-tbl tbody tr:nth-child(even) td { background: rgba(110, 22, 32, .025); }
.intake-tbl .no { width: 36px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.intake-tbl td.src { font-weight: 700; color: var(--color-primary); }
.intake-tbl td.dist { color: var(--color-text-secondary); }
.intake-tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.intake-tbl td.phys, .intake-tbl td.sum { font-weight: 700; }
.intake-tbl td.zero { color: var(--color-text-secondary); font-weight: 500; }
.intake-tbl tfoot td { font-weight: 800; color: var(--color-primary); background: rgba(195, 154, 62, .16); border-top: 2px solid var(--color-secondary); }
.intake-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 auto 10px; width: 100%; max-width: 860px; }
@media (max-width: 560px) { .intake-stats { grid-template-columns: 1fr 1fr; } }
.ist { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ist .k { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.ist .v { font-size: clamp(15px, 4.4vw, 19px); font-weight: 800; line-height: 1.1; margin-top: 3px; color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ist.g .v { color: var(--color-secondary); }
.intake-avg { width: 100%; max-width: 860px; margin: 8px auto 0; text-align: right; font-size: 13px; color: var(--color-text-secondary); padding: 0 4px; }
.intake-avg b { color: var(--color-text-primary); }
.intake-avg span { font-size: 12px; }
.intake-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 14px; cursor: pointer; }
.intake-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--color-primary); }
.intake-check small { display: block; font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.35; }
.intake-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.intake-chip { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast); }
.intake-chip:active { background: rgba(110, 22, 32, .07); }
.intake-chip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.intake-tbl.adm tbody tr { cursor: pointer; transition: background var(--transition-fast); }
.intake-tbl.adm tbody tr:active { background: rgba(110, 22, 32, .06); }
.intake-tbl td.ed { text-align: center; opacity: .7; padding-left: 4px; padding-right: 8px; }
.intake-bar { display: flex; gap: 8px; align-items: stretch; margin: 0 0 10px; }
.intake-bar .date-wrap { flex: 1; min-width: 0; }
.intake-bar input[type="date"] { width: 100%; height: 100%; }
.intake-bar .btn { flex: none; white-space: nowrap; }

/* ===== ПТЗ · Остатки плитками (вместо таблицы) ===== */
.stock-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .stock-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .stock-tiles { grid-template-columns: 1fr; } }
.stock-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 12px 14px; cursor: pointer; min-width: 0; transition: transform var(--transition-fast), background var(--transition-fast); }
.stock-tile:active { transform: scale(.985); background: rgba(110, 22, 32, .04); }
.stock-tile.z { border-top-color: var(--color-border); }
.stock-tile.z .st-big, .stock-tile.z .st-v { color: var(--color-text-secondary); }
.st-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; line-height: 1.15; color: var(--color-text-primary); min-width: 0; }
.st-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-name .ptz-edit { flex: none; }
.st-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); margin-top: 8px; }
.st-big { font-size: clamp(24px, 7vw, 30px); font-weight: 800; line-height: 1; color: var(--color-primary); margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-big.cond { color: var(--color-text-primary); }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.st-two .st-k { margin-top: 4px; }
.st-v { font-size: 16px; font-weight: 700; line-height: 1.1; margin-top: 2px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-tile.total { grid-column: 1 / -1; cursor: default; background: rgba(195, 154, 62, .14); border-top-color: var(--color-secondary); display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; }
.stock-tile.total:active { transform: none; background: rgba(195, 154, 62, .14); }
.stock-tile.total .st-name { font-size: 18px; color: var(--color-primary); }
.stock-tile.total .st-k { margin-top: 0; }
.stock-tile.total .st-big { font-size: clamp(20px, 6vw, 26px); }
@media (max-width: 460px) { .stock-tile.total { grid-template-columns: 1fr 1fr; } .stock-tile.total .st-name { grid-column: 1 / -1; } }

/* ===== Устер · «Что изменилось» (сводка по переходам) ===== */
.lch-bar { display: flex; gap: 8px; align-items: stretch; margin: 0 0 8px; }
.lch-bar .date-wrap { flex: 1; min-width: 0; }
.lch-bar input[type="date"] { width: 100%; height: 100%; }
.lch-bar .btn { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lch-sum { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 2px 10px; line-height: 1.45; }
.lch-sum b { color: var(--color-text-primary); }
.lch-worse { color: #B3261E; font-weight: 700; }
.lch-card { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 11px 13px; margin-bottom: 9px; cursor: pointer; }
.lch-card:active { background: rgba(110, 22, 32, .04); }
.lch-card.worse { border-left-color: #C94A40; }
.lch-card.attn { border-left-color: #E0955A; }
.lch-card.better { border-left-color: #4E9F6A; }
.lch-card.same { border-left-color: var(--color-border); }
.lch-card.first { border-left-color: #8A7A6B; }
.lch-card.none { border-style: dashed; border-left-style: solid; opacity: .8; }
.lch-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lch-name { font-weight: 800; font-size: 16px; color: var(--color-text-primary); min-width: 0; }
.lch-chip { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(120,120,120,.12); color: var(--color-text-secondary); }
.lch-chip.worse { background: #F9E2E0; color: #B3261E; }
.lch-chip.attn { background: #F7E6D4; color: #A2561B; }
.lch-chip.better { background: #E3F2E7; color: #2E7D4A; }
.lch-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.4; }
.lch-old { color: #A2561B; font-weight: 600; }
.lch-inline { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 7px; font-size: 13px; font-variant-numeric: tabular-nums; }
.lch-inline span { font-weight: 800; color: var(--color-text-primary); }
.lch-inline i { font-style: normal; font-weight: 600; color: var(--color-text-secondary); }
.lch-tbl { margin-top: 8px; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; font-variant-numeric: tabular-nums; }
.lch-tr { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr 1.1fr; gap: 6px; padding: 7px 9px; border-top: 1px solid var(--color-border); font-size: 13px; align-items: center; }
.lch-tr:first-child { border-top: 0; }
.lch-tr.lch-th { background: rgba(110, 22, 32, .05); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-secondary); }
.lch-tr.hot { background: rgba(201, 74, 64, .07); }
.lch-tr .r { text-align: right; }
.lch-pn { font-weight: 600; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lch-prev { color: var(--color-text-secondary); }
.lch-cur { font-weight: 800; color: var(--color-text-primary); }
.lch-d { font-weight: 800; white-space: nowrap; }
.lch-d.up { color: #B3261E; }
.lch-d.dn { color: #2E7D4A; }
.lch-d.attn { color: #A2561B; }
.lch-d.eq { color: var(--color-text-secondary); font-weight: 600; }

/* ===== Устер · график «Динамика по дням» ===== */
.lchart { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 12px 13px 10px; margin: 0 0 12px; }
.lchart-load { text-align: center; color: var(--color-text-secondary); font-size: 13px; padding: 24px 0; }
.lchart-head { margin-bottom: 8px; }
.lchart-title { font-weight: 800; font-size: 15px; color: var(--color-text-primary); line-height: 1.25; }
.lchart-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.lchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lchips::-webkit-scrollbar { display: none; }
.lchips.row2 { margin-top: 4px; align-items: center; }
.lchips-sep { flex: none; width: 1px; height: 18px; background: var(--color-border); margin: 0 4px; }
.lchip { flex: none; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.lchip.sm { padding: 4px 9px; font-size: 11.5px; }
.lchip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.lc-wrap { position: relative; margin-top: 8px; }
.lc-svg { width: 100%; height: auto; display: block; }
.lc-grid { stroke: var(--color-border); stroke-width: 1; }
.lc-ax { font: 600 10.5px system-ui, sans-serif; fill: var(--color-text-secondary); }
.lc-note { font: 600 10.5px system-ui, sans-serif; fill: var(--color-text-secondary); }
.lc-val { font: 800 13px system-ui, sans-serif; fill: var(--color-text-primary); }
.lc-band { fill: rgba(168, 48, 63, .10); }
.lc-prev { stroke: var(--color-secondary); stroke-width: 1.5; stroke-dasharray: 4 4; }
.lc-line { fill: none; stroke: #A8303F; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-hit { fill: transparent; cursor: pointer; }
.lc-dot { fill: #A8303F; stroke: var(--color-surface); stroke-width: 2; pointer-events: none; }
.lc-dot.bad { fill: #B3261E; }
.lc-dot.good { fill: #2E7D4A; }
.lc-tip { position: absolute; z-index: 3; background: var(--color-text-primary); color: var(--color-surface); font-size: 12px; line-height: 1.35; padding: 6px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.lc-tip span { opacity: .8; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 6px; }
.lc-legend i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.lc-legend i.ln { width: 14px; height: 3px; border-radius: 2px; background: #A8303F; }
.lc-legend i.ln.prev { height: 2px; background: var(--color-secondary); }
.lc-legend i.dot { width: 9px; height: 9px; border-radius: 50%; }
.lc-legend i.dot.bad { background: #B3261E; } .lc-legend i.dot.good { background: #2E7D4A; }
html[data-theme="dark"] .lc-line, html[data-theme="dark"] .lc-dot, html[data-theme="dark"] .lc-legend i.ln { stroke: #D65C6C; fill: #D65C6C; background: #D65C6C; }
html[data-theme="dark"] .lc-dot.bad { fill: #E57368; } html[data-theme="dark"] .lc-dot.good { fill: #6CC08A; }
html[data-theme="dark"] .lc-band { fill: rgba(214, 92, 108, .14); }

/* ===== Устер-лаборатория · подтверждение сохранения ===== */
.lab-card.just-saved { border-color: #2E7D4A; box-shadow: 0 0 0 3px rgba(46, 125, 74, .18), var(--shadow-sm); animation: labSavedPulse 1.6s ease-out 1; }
@keyframes labSavedPulse { 0% { background: rgba(46, 125, 74, .22); } 100% { background: var(--color-surface); } }
.lab-saved-badge { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: #E3F2E7; color: #2E7D4A; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
html[data-theme="dark"] .lab-saved-badge { background: #1E3326; color: #6CC08A; }
@media (prefers-reduced-motion: reduce) { .lab-card.just-saved { animation: none; } }

/* ===== Вход (веб) · «Сплит»: бордовая панель + карточка (вариант 1) ===== */
.login-side { display: none; }
.login-h3 { display: none; }
@media (min-width: 900px) {
  /* Вся ширина окна и без шапки: вход — самостоятельный экран. */
  body.login-mode #app { max-width: none; padding-bottom: 0; }
  body.login-mode #topbar, body.login-mode #bottom-nav, body.login-mode .app-version { display: none !important; }
  body.login-mode #view { padding: 0; gap: 0; }
  body.login-mode #watermark, body.login-mode #wm-overlay { display: none; }
  .login-wrap.login-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; padding: 0; align-items: stretch; }
  .login-side { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 44px 52px; color: #fff; overflow: hidden;
    background: linear-gradient(160deg, #5A0F1A 0%, #6E1620 55%, #8E1F2E 100%); }
  .login-side::before { content: ''; position: absolute; right: 40px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(195, 154, 62, .16); }
  .login-side::after { content: ''; position: absolute; right: -110px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; border: 52px solid rgba(255, 255, 255, .05); }
  .ls-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
  .ls-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #C39A3E; background: #fff; }
  .ls-brand { font-weight: 800; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
  .ls-brand small { display: block; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; opacity: .82; margin-top: 5px; }
  .ls-mid { position: relative; z-index: 1; margin-top: 8vh; }
  .ls-h { font-weight: 800; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.01em; max-width: 14ch; text-wrap: balance; }
  .ls-h em { font-style: normal; color: #E4C877; }
  .ls-sub { font-size: 15px; line-height: 1.5; opacity: .84; max-width: 44ch; margin-top: 16px; }
  .ls-facts { position: relative; z-index: 1; display: flex; gap: 34px; flex-wrap: wrap; margin-top: auto; }
  .ls-facts b { display: block; font-size: 22px; font-weight: 800; color: #E4C877; line-height: 1; }
  .ls-facts span { display: block; font-size: 12px; opacity: .78; margin-top: 5px; }
  .ls-foot { position: relative; z-index: 1; font-size: 12px; opacity: .62; }
  .login-split .login-card { align-self: center; justify-self: center; margin: 40px 24px; max-width: 400px; padding: 30px 30px 26px; box-shadow: 0 30px 60px -36px rgba(110, 22, 32, .45); }
  .login-split .login-card .login-logo { display: none; }
  .login-split .login-card .login-brand { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-align: left; }
  .login-split .login-card .login-sub { text-align: left; margin-bottom: 18px; }
  .login-split .login-h3 { display: block; text-align: left; font-weight: 800; font-size: 24px; line-height: 1.15; margin: 0 0 14px; color: var(--text); }
  .login-split .login-card .login-hint { text-align: left; }
  /* Правая половина — светлый фон, чтобы карточка читалась как отдельный объект. */
  .login-wrap.login-split { background: var(--bg); }
}
html[data-theme="dark"] .login-side { background: linear-gradient(160deg, #3E0B12 0%, #5A0F1A 55%, #7A1727 100%); }
.ls-lang { margin-left: auto; display: flex; gap: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 3px; }
.ls-lang button { border: none; background: transparent; color: rgba(255,255,255,.85); font: 700 12px/1 inherit; letter-spacing: .04em; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.ls-lang button.on { background: #E4C877; color: #3A0B12; }

/* ===== Вход (телефон) · «Бордовый герой и белый лист» (вариант 1) ===== */
/* Экран входа — самостоятельный на любой ширине: без шапки, футера и водяного знака. */
body.login-mode #topbar, body.login-mode #bottom-nav, body.login-mode .app-version { display: none !important; }
body.login-mode #app { max-width: none; padding-bottom: 0; }
body.login-mode #view { padding: 0; gap: 0; }
body.login-mode #watermark, body.login-mode #wm-overlay { display: none; }
@media (max-width: 899px) {
  .login-wrap.login-split { display: block; padding: 0; min-height: 100vh; min-height: 100dvh; background: var(--color-surface, #fff); }
  .login-side { display: flex; flex-direction: column; gap: 0; position: relative; overflow: hidden; color: #fff;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 46px;
    background: linear-gradient(165deg, #5A0F1A 0%, #6E1620 60%, #8E1F2E 100%); }
  .login-side::before { display: none; }
  .login-side::after { content: ''; position: absolute; right: -70px; top: -50px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(195, 154, 62, .16); }
  .ls-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
  .ls-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #C39A3E; background: #fff; }
  .ls-brand { font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
  .ls-brand small { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; opacity: .82; margin-top: 4px; }
  .ls-mid { position: relative; z-index: 1; margin-top: 22px; }
  .ls-h { font-weight: 800; font-size: clamp(26px, 7.4vw, 32px); line-height: 1.05; letter-spacing: -.01em; max-width: 13ch; text-wrap: balance; }
  .ls-h em { font-style: normal; color: #E4C877; }
  .ls-sub { font-size: 12.5px; line-height: 1.45; opacity: .84; max-width: 34ch; margin-top: 8px; }
  .ls-facts, .ls-foot { display: none; }
  /* Белый лист наезжает на героя скруглёнными углами. */
  .login-split .login-card { position: relative; max-width: none; width: 100%; margin: -26px 0 0; border: 0; border-radius: 22px 22px 0 0;
    padding: 22px 20px calc(28px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .4); text-align: left; }
  .login-split .login-card .login-logo, .login-split .login-card .login-brand { display: none; }
  .login-split .login-card:has(.login-h3) .login-sub { display: none; }
  .login-split .login-h3 { display: block; font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0 0 6px; color: var(--text); }
  .login-split .login-card .login-sub { text-align: left; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
  .login-split .login-card .login-hint { text-align: left; }
}
html[data-theme="dark"] .login-wrap.login-split { background: var(--color-surface, #1D1611); }

/* Фирменные тонкие иконки (aicon): выравнивание в тексте заголовков/кнопок. */
/* Плашка-градиент «Тёплый закат» (выбран из вариантов «Яркий градиент»):
   золото → бордо → тёмное бордо, залитый белый силуэт внутри, вместо
   прежних тонких контурных линий (§8.1 CLAUDE.md). */
.aicon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 30%;
  background: linear-gradient(145deg, var(--color-secondary) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(110,22,32,.30);
  vertical-align: -4px;
}
.aicon-tile svg { width: 62%; height: 62%; }
.section-title .aicon-tile, .ptz-hero-title .aicon-tile, .lchart-title .aicon-tile { vertical-align: -4px; margin-right: 3px; }
/* На цветных поверхностях (бордовая шапка, синяя кнопка Telegram) плашке
   не нужна своя тень — она и так на контрастном фоне. */
#lg-tg .aicon-tile, .mini-top .aicon-tile { box-shadow: inset 0 1px 1px rgba(255,255,255,.35); }
html.lite .aicon-tile { box-shadow: none; }