:root {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-text: #1f2430;
  --color-muted: #6b7280;
  --color-border: #e2e5ea;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-error: #dc2626;
  --color-error-bg: #fdecec;
  --color-ok: #16a34a;
  --color-ok-bg: #eafaf0;
  --radius: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
}

h3[id], h2[id] { scroll-margin-top: 72px; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

/* ---- Навигация ---- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  height: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.topnav__brand { font-weight: 700; font-size: 1.05rem; }
.topnav__center { display: flex; gap: 4px; flex-wrap: wrap; }
.topnav__link {
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.topnav__link:hover { background: var(--color-bg); color: var(--color-text); }
.topnav__link.is-active { color: var(--color-accent); font-weight: 600; background: #eef2ff; }
.topnav__right { display: flex; align-items: center; gap: 12px; }
.topnav__settings { font-size: 0.9rem; color: var(--color-muted); }
.topnav__settings:hover { color: var(--color-text); }

.usermenu { position: relative; }
.usermenu__trigger {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--color-text);
  padding: 6px 8px;
  border-radius: var(--radius);
}
.usermenu__trigger:hover { background: var(--color-bg); }
.usermenu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.usermenu__dropdown a,
.usermenu__logout {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.usermenu__dropdown a:hover,
.usermenu__logout:hover { background: var(--color-bg); }
.usermenu__logout { color: var(--color-error); }

/* ---- Контент ---- */
.content { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }

/* ---- Логин ---- */
.login-page { display: flex; justify-content: center; align-items: center; min-height: 80vh; }
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-card__title { margin: 0 0 4px; font-size: 1.3rem; }

/* ---- Формы ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 0.85rem; color: var(--color-muted); }
.field__input {
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
.field__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--color-bg); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--block { width: 100%; }
.btn--sm { padding: 5px 10px; font-size: 0.85rem; }

.alert { padding: 10px 12px; border-radius: var(--radius); font-size: 0.9rem; }
.alert--error { background: var(--color-error-bg); color: var(--color-error); }
.alert--ok { background: var(--color-ok-bg); color: var(--color-ok); }

/* ---- Карточки настроек ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.card h2 { margin-top: 0; font-size: 1.1rem; }
.form-grid { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.form-actions { display: flex; gap: 10px; align-items: center; }
.hint { color: var(--color-muted); font-size: 0.88rem; }

/* ---- Себестоимость: плитки ---- */
.costs-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
  color: var(--color-text);
  display: block;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.tile--link { cursor: pointer; }
.tile--link:hover { border-color: var(--color-accent); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12); transform: translateY(-1px); }
.tile--link.is-active { border-color: var(--color-accent); background: #eef2ff; }
.tile--warn { box-shadow: inset 3px 0 0 var(--color-error); }
.tile__value { font-size: 1.4rem; font-weight: 700; }
.tile__label { color: var(--color-muted); font-size: 0.85rem; margin-top: 2px; }

/* ---- Прибыль: плашки сводки ---- */
.tile__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tile__pct { font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.tile__sub { color: var(--color-muted); font-size: 0.78rem; text-align: right; }
.tile--profit-summary { background: #e3f5e1; border-color: #2f6b23; }
.tile--margin-summary { background: #dcedfb; border-color: #1d6fa5; }
.tile--roe { background: #f8efdc; border-color: #b98a34; }
.tile--roi { background: #ece3f7; border-color: #7c4fb0; }
.tile__growth { font-size: 0.8rem; font-weight: 600; margin-top: 2px; }
.tile__growth--up { color: #1a8a3f; }
.tile__growth--down { color: #c53030; }

.tile--full { grid-column: 1 / -1; }
.section-title { margin: 20px 0 8px; font-size: 1rem; }
.costs-header--3col { grid-template-columns: repeat(3, 1fr); }
.costs-header--logistics { grid-template-columns: 1fr 2fr; }
.costs-header--1col { grid-template-columns: 1fr; }

/* ---- Продажи/Заказы: компактные плашки в стиле кабинета маркетплейса ---- */
.profit-layout { display: grid; grid-template-columns: 280px 1fr; align-items: start; gap: 12px; margin: 16px 0; }
.profit-layout__side { display: flex; flex-direction: column; gap: 12px; }
.summary-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; }
.summary-card__head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.summary-card__head--sub { margin: 0 0 6px; }
.summary-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #eef2ff; font-size: 0.9rem; }
.summary-card__icon--accent { background: #e3f5e1; }
.summary-card__icon--warn { background: #fdecec; }
.summary-card__divider { border-top: 1px solid var(--color-border); margin: 10px 0; }
.summary-card__row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 0.88rem; color: var(--color-muted); }
.summary-card__val { color: var(--color-text); font-weight: 700; white-space: nowrap; }
.summary-card__growth { font-style: normal; font-weight: 500; font-size: 0.78rem; color: var(--color-muted); margin-left: 6px; }
.summary-card__growth--na { font-style: italic; }
.profit-layout__main .costs-header { margin: 12px 0; }
.tile--flat { background: var(--color-bg); border-color: var(--color-border); }
@media (max-width: 900px) { .profit-layout { grid-template-columns: 1fr; } }

.deductions-list { display: flex; flex-direction: column; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px 16px; margin-bottom: 16px; }
.deductions-list--inline { background: none; border: none; padding: 0; margin: 0; justify-content: center; }
.deductions-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.deductions-row:last-child { border-bottom: none; }
.deductions-row__icon { background: #7c4fb0; color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 5px; padding: 2px 5px; }
.deductions-row__label { flex: 1; color: var(--color-text); }
.deductions-row__amount { font-weight: 600; min-width: 110px; text-align: right; }

@media (max-width: 900px) {
  .costs-header--3col, .costs-header--logistics { grid-template-columns: 1fr; }
}

.costs-syncbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.costs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.costs-toolbar input[type="text"] { flex: 1 1 240px; }
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn {
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.85rem;
  background: var(--color-surface);
}
.filter-btn:hover { color: var(--color-text); }
.filter-btn.is-active { color: var(--color-accent); border-color: var(--color-accent); font-weight: 600; }

.table-scroll { overflow-x: auto; }
.costs-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; }
.costs-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}
.costs-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.costs-table tr.row--no-cost td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.cell-photo img, .photo-placeholder { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: #e5e7eb; display: block; }
.offer-id { color: var(--color-muted); font-size: 0.85rem; }
.chevron { background: none; border: none; cursor: pointer; color: var(--color-muted); margin-left: 4px; }
.chevron.is-open { transform: rotate(180deg); display: inline-block; }
.cost-value { cursor: pointer; padding: 4px 6px; border-radius: 4px; display: inline-block; }
.cost-value:hover { background: var(--color-bg); }
.cost-form { display: flex; gap: 6px; align-items: center; }
.cost-form input[type="text"] { width: 90px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; }
.cost-form input[type="date"] { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; }
.history-row td { background: var(--color-bg); }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th, .history-table td { padding: 6px 10px; text-align: left; font-size: 0.85rem; border-bottom: 1px solid var(--color-border); }
.badge { background: var(--color-ok-bg); color: var(--color-ok); padding: 2px 6px; border-radius: 999px; font-size: 0.75rem; }
.empty-state { text-align: center; color: var(--color-muted); padding: 24px; }
.is-hidden { display: none; }
.import-form { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.import-preview__table-wrap { max-height: 300px; overflow-y: auto; margin: 10px 0; }
.row--error { background: var(--color-error-bg); }

@media (max-width: 720px) {
  .costs-header { grid-template-columns: repeat(2, 1fr); }
  .costs-table thead { display: none; }
  .costs-table, .costs-table tbody, .costs-table tr, .costs-table td { display: block; width: 100%; }
  .costs-table tr { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 10px; padding: 8px; }
  .costs-table td { border-bottom: none; padding: 4px 6px; }
}

.admin-actions { display: flex; gap: 6px; }

/* ---- Заглушка раздела ---- */
.stub-page { padding: 60px 0; text-align: center; color: var(--color-muted); }

/* ---- Тосты ---- */
#toast-container {
  position: fixed;
  top: 68px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--color-text);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  max-width: 320px;
}

@media (max-width: 720px) {
  .topnav { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; }
  .topnav__center { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
}

/* ---- A/B-тесты ---- */
.page-title { font-size: 20px; margin: 12px 0; }

.ab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.ab-card {
  display: flex; gap: 12px; padding: 12px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); color: inherit;
}
.ab-card:hover { border-color: var(--color-accent); }
.ab-card__img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ab-card__name { font-weight: 600; margin-bottom: 4px; }
.ab-card__meta { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ab-card__leader { font-size: 13px; color: var(--color-muted); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--color-border); }
.badge--running { background: var(--color-ok-bg); color: var(--color-ok); }
.badge--paused { background: #fff4e5; color: #b45309; }
.badge--maturing { background: #eef2ff; color: #4338ca; }
.badge--done { background: var(--color-border); color: var(--color-muted); }
.badge--cancelled { background: var(--color-error-bg); color: var(--color-error); }

.ab-form { max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.ab-variant-row { display: flex; gap: 8px; margin-bottom: 8px; }

.ab-verdict { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }

.ab-table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--color-surface); }
.ab-table th, .ab-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 13px; }
.ab-table tr.is-current { background: var(--color-ok-bg); }
.ab-table tr.is-excluded { opacity: 0.5; }

.ab-notif-list { list-style: none; padding: 0; }
.ab-notif-list li { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.ab-notif-list li.is-unread { font-weight: 600; }

.profit-table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; }
.profit-table th, .profit-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 13px; white-space: nowrap; }
.profit-table th { color: var(--color-muted); font-weight: 600; }
.profit-table tbody tr:nth-child(even) { background: #fdf3ee; }
.profit-table tr.row--no-cost td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.profit-cell { color: #1a7f4f; font-weight: 700; }
.profit-cell--neg { color: var(--color-error); }

/* ---- Прибыль по позициям: цветные смысловые зоны колонок ---- */
.tile--payout { border-color: #0f6b5c; box-shadow: inset 3px 0 0 #0f6b5c; }
.tile--profit { border-color: #2f6b23; box-shadow: inset 3px 0 0 #2f6b23; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; font-size: 12px; color: var(--color-muted); }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.legend .sw--sales { background: #d7e6df; }
.legend .sw--fees { background: #f6ddc0; }
.legend .sw--payout { background: #bfe3db; }
.legend .sw--costs { background: #f0d5d2; }
.legend .sw--profit { background: #cfe6c6; }

.profit-table--grouped { border-collapse: separate; border-spacing: 0; }
.profit-table--grouped th, .profit-table--grouped td { border-right: 1px solid var(--color-border); }
.profit-table--grouped th:last-child, .profit-table--grouped td:last-child { border-right: none; }
.profit-table--grouped thead tr.group-row th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 8px 14px 4px;
    border-bottom: none;
    text-align: center;
}
.profit-table--grouped thead tr:not(.group-row) th { padding-top: 4px; }
.profit-table--grouped tbody tr:nth-child(even) { background: transparent; }

.g-name, .c-name { background: var(--color-surface) !important; }

.g-sales { background: #e4ece7; color: #2d4842; }
.g-fees { background: #fbeee0; color: #7a4413; }
.g-payout { background: #d9ede8; color: #0b5548; }
.g-costs { background: #f7e9e7; color: #78302b; }
.g-profit { background: #e2f0dc; color: #255419; }

.c-sales { background: #f2f6f4; }
.c-fees { background: #fdf6ee; }
.c-payout { background: #eaf5f2; color: #0f6b5c; }
.c-costs { background: #fbf1f0; }
.c-profit { background: #edf5ea; color: #2f6b23; }
.c-profit--neg { background: #fbeceb; color: var(--color-error); }

/* ===== Warehouse (Мой склад) — bordeaux design system ===== */
.wh-page {
  --wh-bg: #faf9f6;
  --wh-surface: #ffffff;
  --wh-surface-2: #f4f2ee;
  --wh-border: #e6e1d8;
  --wh-text: #26221d;
  --wh-text-muted: #8a8175;
  --wh-text-faint: #b3aa9c;
  --wh-accent: #7c1f2b;
  --wh-accent-hover: #611722;
  --wh-accent-soft: #f7e9ea;
  --wh-success: #2f7a4d;
  --wh-success-soft: #e8f3ec;
  --wh-warning: #a5620f;
  --wh-warning-soft: #fbeed9;
  --wh-danger: #c0392b;
  --wh-danger-soft: #fbeae7;
  --wh-shadow: 0 1px 2px rgba(40,30,20,.05), 0 4px 14px rgba(40,30,20,.06);
  --wh-radius: 12px;
  background: var(--wh-bg);
  color: var(--wh-text);
}

.wh-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.wh-title { font-size: 1.4rem; font-weight: 700; color: var(--wh-text); margin: 0; }

.wh-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wh-border); overflow-x: auto; margin: 12px 0 16px; }
.wh-tab {
  padding: 10px 14px; font-size: 0.86rem; font-weight: 600; color: var(--wh-text-muted);
  border: none; background: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.wh-tab:hover { color: var(--wh-text); }
.wh-tab.is-active { color: var(--wh-accent); border-bottom-color: var(--wh-accent); }

.wh-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wh-total { font-size: 0.86rem; color: var(--wh-text-muted); }
.wh-total strong { color: var(--wh-text); font-size: 1.1rem; }

.wh-section-title { font-size: 0.95rem; font-weight: 700; color: var(--wh-text); margin: 18px 0 10px; }

.wh-panel {
  background: var(--wh-surface); border: 1px solid var(--wh-border); border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow); padding: 16px; margin-bottom: 16px;
}

.wh-form { display: flex; flex-direction: column; gap: 12px; }
.wh-form__row { display: flex; gap: 12px; flex-wrap: wrap; }
.wh-form__row > * { flex: 1 1 160px; min-width: 140px; }
.wh-form__flags { flex-direction: column; gap: 6px; }
.wh-form__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.wh-cost-parts { display: flex; gap: 10px; flex-wrap: wrap; background: var(--wh-surface-2); border-radius: 8px; padding: 10px; }
.wh-autocomplete { position: relative; }
.wh-china-item-row { background: var(--wh-surface-2); border-radius: 8px; padding: 10px; border: 1px solid var(--wh-border); }
.wh-arrive-form { background: var(--wh-surface-2); }

.wh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-bottom: 24px; }
.wh-card {
  display: flex; gap: 12px; padding: 14px; border: 1px solid var(--wh-border); border-radius: var(--wh-radius);
  background: var(--wh-surface); box-shadow: var(--wh-shadow); transition: box-shadow .15s, transform .15s;
}
.wh-card--clickable { cursor: pointer; }
.wh-card--clickable:hover { border-color: var(--wh-accent); transform: translateY(-1px); }
.wh-card__img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--wh-surface-2); flex-shrink: 0; }
.wh-card__body { min-width: 0; flex: 1; }
.wh-card__name { font-weight: 600; margin-bottom: 6px; color: var(--wh-text); }
.wh-card__meta { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; color: var(--wh-text-muted); }
.wh-card--warn { border-color: var(--wh-warning); background: var(--wh-warning-soft); }
.wh-card--empty { opacity: 0.6; }

.badge.wh-badge--success { background: var(--wh-success-soft); color: var(--wh-success); }
.badge.wh-badge--warning { background: var(--wh-warning-soft); color: var(--wh-warning); }
.badge.wh-badge--danger { background: var(--wh-danger-soft); color: var(--wh-danger); }

.wh-order-list, .wh-return-list, .wh-supplies, .wh-china-orders { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.wh-order-row, .wh-return-row, .wh-supply {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px;
  background: var(--wh-surface); border: 1px solid var(--wh-border); border-radius: var(--wh-radius); box-shadow: var(--wh-shadow);
}
.wh-order-row__meta, .wh-return-row__meta, .wh-supply__info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wh-order-row__actions, .wh-return-row__actions, .wh-supply__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wh-supply__name { font-weight: 600; color: var(--wh-text); }

.wh-china-order { flex-direction: column; align-items: stretch; }
.wh-china-items-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.84rem; }
.wh-china-items-table th, .wh-china-items-table td { padding: 6px 8px; border-bottom: 1px solid var(--wh-border); text-align: left; }
.wh-china-items-table th { color: var(--wh-text-faint); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: .03em; }

.wh-product-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--wh-surface); border: 1px solid var(--wh-border); border-radius: 9px; box-shadow: var(--wh-shadow); max-height: 200px; overflow-y: auto; z-index: 5; }
.wh-product-option { padding: 8px 12px; font-size: 0.86rem; cursor: pointer; }
.wh-product-option:hover { background: var(--wh-surface-2); }

.wh-modal-backdrop { position: fixed; inset: 0; background: rgba(38,34,29,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 100; }
.wh-modal { background: var(--wh-surface); border-radius: var(--wh-radius); padding: 22px; max-width: 640px; width: 100%; box-shadow: 0 8px 40px rgba(40,30,20,.25); }
.wh-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.wh-modal__close { border: none; background: none; font-size: 1.3rem; color: var(--wh-text-muted); cursor: pointer; line-height: 1; padding: 4px; }
.wh-modal__close:hover { color: var(--wh-text); }
.wh-modal__row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.wh-modal__img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; background: var(--wh-surface-2); flex-shrink: 0; }

.wh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.wh-tiles > * { background: var(--wh-surface-2); border-radius: 8px; padding: 10px 12px; }

.wh-meta { font-size: 0.84rem; color: var(--wh-text-muted); display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.wh-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.wh-batches { display: flex; flex-direction: column; gap: 8px; }
.wh-batch { border: 1px solid var(--wh-border); border-radius: 9px; background: var(--wh-surface-2); padding: 10px 12px; }
.wh-batch--spent { opacity: 0.55; }
.wh-batch__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.wh-batch__arrow { color: var(--wh-text-faint); }
.wh-batch__actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wh-batch__detail { margin-top: 8px; font-size: 0.82rem; color: var(--wh-text-muted); }

.wh-links { display: flex; flex-direction: column; gap: 8px; }

/* ===== Рука на пульсе (ABC -> tab=pulse) ===== */
.pulse-modal-backdrop { position: fixed; inset: 0; background: rgba(31,36,48,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 100; }
.pulse-modal { background: var(--color-surface); border-radius: var(--radius); padding: 22px; max-width: 720px; width: 100%; box-shadow: 0 8px 40px rgba(20,20,30,.25); }
.pulse-modal .wh-modal__close { border: none; background: none; font-size: 1.3rem; color: var(--color-muted); cursor: pointer; line-height: 1; padding: 4px; }
.pulse-modal .wh-modal__close:hover { color: var(--color-text); }
.pulse-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.pulse-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pulse-card__head { display: flex; gap: 10px; align-items: center; }
.pulse-card__img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--color-bg); flex-shrink: 0; }
.pulse-card__name { font-weight: 600; }
.pulse-delta { font-size: 0.78rem; font-weight: 600; margin-left: 6px; }
.pulse-delta--up { color: #1a8a3f; }
.pulse-delta--down { color: #c53030; }
.pulse-cell--anomaly { background: #fff6da; border-radius: 4px; }
.pulse-cell--anomaly.pulse-delta--down { background: #fbeceb; }
.pulse-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0 14px; }
.pulse-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--color-muted); }
.pulse-toggle input[type="number"] { width: 60px; }
.pulse-subperiod-th--current, .pulse-subperiod-td--current { border: 2px solid var(--color-accent, #3a6df0) !important; }
.pulse-plan-form { display: flex; align-items: center; gap: 6px; }
.pulse-plan-form input[type="number"] { width: 70px; }
.pulse-plan-pct { font-weight: 600; }
.pulse-plan-pct--ok { color: #1a8a3f; }
.pulse-plan-pct--bad { color: #c53030; }

/* Спарклайны (п.1 задачи «Рука на пульсе» — референс со скриншотов) */
.pulse-spark-cell { padding: 2px 6px; }
.pulse-spark-bar--pos { fill: var(--color-accent, #3a6df0); }
.pulse-spark-bar--neg { fill: #c53030; }
.pulse-spark-axis { stroke: var(--color-border); stroke-width: 1; }
.pulse-summary-spark { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }

/* Фильтр «Категории» на странице pulse (п.3) */
.pulse-cat-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pulse-cat-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 10px; cursor: pointer; }

/* Сохранённый фильтр (п.4) */
.pulse-saved-filter { margin-bottom: 10px; }
.pulse-filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-accent, #3a6df0); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.85rem; }
.pulse-filter-chip__apply, .pulse-filter-chip__x { border: none; background: none; cursor: pointer; color: var(--color-muted); padding: 2px 6px; }
.pulse-filter-chip__apply { color: var(--color-accent, #3a6df0); font-weight: 600; }
.pulse-filter-chip__x { font-size: 1rem; line-height: 1; }
.pulse-filter-save { display: inline-flex; align-items: center; gap: 8px; }

/* Модалка «Настроить товары РНП» (п.2) */
.pulse-modal-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pulse-modal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pulse-modal-tab { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; color: var(--color-muted); }
.pulse-modal-tab--active { border-color: var(--color-accent, #3a6df0); color: var(--color-accent, #3a6df0); font-weight: 600; }
.pulse-modal-indicators { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 10px; }
.pulse-modal-indicators__add b { color: #1a8a3f; }
.pulse-modal-indicators__remove b { color: #c53030; }
.pulse-modal-footer { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pulse-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; }
.pulse-status--on { color: #1a8a3f; }
.pulse-status--off { color: var(--color-muted); }
.pulse-status--pending { color: #6b3fa0; }
.pulse-status__undo { border: none; background: none; color: #6b3fa0; text-decoration: underline; cursor: pointer; font-size: 0.78rem; padding: 0; }


/* ---- География заказов (вкладка ABC): доля кластера ---- */
.geo-bar-track { width: 100%; height: 8px; border-radius: 999px; background: var(--color-bg); overflow: hidden; }
.geo-bar-fill { height: 100%; background: var(--color-accent); border-radius: 999px; }

/* ---- География заказов: карта кластеров ---- */
.heat-legend { display: inline-flex; vertical-align: middle; margin: 0 6px; }
.heat-legend span { width: 18px; height: 12px; }
.geo-map { position: relative; }
.geo-map__hint { position: absolute; top: 34px; left: 20px; z-index: 2; margin: 0; }
.geo-map__svg { width: 100%; height: auto; display: block; }
.geo-map__region { cursor: pointer; stroke: #c7d2e8; stroke-width: 0.75; transition: stroke 0.15s, stroke-width 0.15s; }
.geo-map__region:hover, .geo-map__region.is-hover { stroke: #1f2430; stroke-width: 2; }
.geo-map__tooltip {
  position: fixed; z-index: 60; background: #1f2430; color: #fff; font-size: 0.82rem;
  padding: 8px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  pointer-events: none; max-width: 240px;
}
.geo-map__foreign {
  cursor: pointer; fill: #a78bfa; stroke: #7c3aed; stroke-width: 1; stroke-dasharray: 2 1.5;
  opacity: 0.85; transition: opacity 0.15s;
}
.geo-map__foreign:hover, .geo-map__foreign.is-hover { opacity: 1; stroke-width: 1.5; }
.geo-map__foreign-label { font-size: 9px; fill: var(--color-muted); pointer-events: none; }

/* ---- Аналитика: сетка плиток по товару (вкладка «Выкупы»/«Капитал») ---- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}