/* ════════════════════════════════════════════════════════════════════════
   69Store · панель управления
   Этап A редизайна: токены, шкалы, утилиты. Тихий бизнес-минимализм:
   нейтральная шкала, границы вместо теней, плотная типографика,
   цвет — только сигнал (красный индекс, минус по марже).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Токены ───────────────────────────────────────────────────────────── */
:root {
  /* Поверхности и текст */
  --bg:#fbfbfc;
  --card:#fff;
  --surface-2:#f4f4f6;      /* вложенные плашки, сегментные переключатели */
  --border:#e6e7ea;
  --border-strong:#d2d5da;
  --text:#16181c;
  --text2:#6b7076;
  --text3:#9ba0a7;
  --on-accent:#fff;         /* текст на тёмной кнопке */

  /* Сигналы */
  --red:#cf3229;    --red-bg:#fdf3f2;
  --amber:#b06a09;  --amber-bg:#fdf7ec;
  --green:#15803d;  --green-bg:#f0faf3;
  --blue:#2563eb;   --blue-bg:#eff4fe;
  --neutral:#7c848d; --neutral-bg:#f1f2f4;

  /* Тени сняты: карточку держит граница, а не подъём */
  --shadow:none;
  --shadow-pop:0 6px 24px rgba(16,18,22,.10);   /* только для всплывающего */

  /* Типографика */
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --fs-micro:10px;
  --fs-cap:11px;
  --fs-sm:12.5px;
  --fs-base:13.5px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-display:30px;

  /* Отступы */
  --sp-0:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px;
  --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* Радиусы */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --radius:var(--r-lg);     /* совместимость со старой разметкой */

  --focus:#16181c;

  --rail:216px;             /* ширина бокового меню на десктопе */

  /* Без этого браузер рисует свои поля, скроллбары и списки светлыми
     независимо от темы — поля получали белый фон и светлый текст. */
  color-scheme:light;
}

:root[data-theme="dark"] {
  --bg:#0d0e11;
  --card:#15171b;
  --surface-2:#1c1f25;
  --border:#282c33;
  --border-strong:#3a3f47;
  --text:#e9ebee;
  --text2:#9aa1a9;
  --text3:#6d747c;
  --on-accent:#0d0e11;

  --red:#f2726a;    --red-bg:#2a1a1a;
  --amber:#e0a44b;  --amber-bg:#2a2115;
  --green:#4ec27d;  --green-bg:#132318;
  --blue:#6b9dff;   --blue-bg:#161d2e;
  --neutral:#8b939c; --neutral-bg:#1e2127;

  --shadow:none;
  --shadow-pop:0 8px 28px rgba(0,0,0,.5);
  --focus:#e9ebee;
  color-scheme:dark;
}

/* ── База ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.45;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* Элементы формы наследуют шрифт — снимает 93 инлайновых font-family:inherit */
button,input,select,textarea{font:inherit;color:inherit}
/* Поля, у которых фон не задан явно (их много в JS-шаблонах), обязаны брать
   фон из темы, иначе браузер подставит свой белый. */
input,select,textarea{background:var(--bg);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--text3)}
button{cursor:pointer}
a{color:inherit}

:where(button,input,select,textarea,[tabindex],a):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:1px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Утилиты ──────────────────────────────────────────────────────────────
   Приёмник для инлайновых style= (этап B). Только шкала — никакой
   произвольной геометрии, чтобы разнобой не вернулся через утилиты. */
.u-row{display:flex;align-items:center;gap:var(--sp-2)}
.u-row-top{display:flex;align-items:flex-start;gap:var(--sp-2)}
.u-col{display:flex;flex-direction:column;gap:var(--sp-2)}
.u-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.u-wrap{flex-wrap:wrap}
.u-grow{flex:1;min-width:0}
.u-shrink0{flex-shrink:0}
.u-right{margin-left:auto}
.u-g1{gap:var(--sp-1)}.u-g2{gap:var(--sp-2)}.u-g3{gap:var(--sp-3)}.u-g4{gap:var(--sp-4)}
.u-grid{display:grid;gap:var(--sp-2)}
.u-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.u-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.u-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-2)}

.u-micro{font-size:var(--fs-micro)}
.u-cap{font-size:var(--fs-cap)}
.u-sm{font-size:var(--fs-sm)}
.u-base{font-size:var(--fs-base)}
.u-md{font-size:var(--fs-md)}
.u-lg{font-size:var(--fs-lg)}
.u-xl{font-size:var(--fs-xl)}
.u-display{font-size:var(--fs-display);letter-spacing:-.03em}

.u-w5{font-weight:500}.u-w6{font-weight:600}.u-w7{font-weight:700}.u-w8{font-weight:800}
.u-dim{color:var(--text2)}
.u-faint{color:var(--text3)}
.u-red{color:var(--red)}.u-green{color:var(--green)}
.u-amber{color:var(--amber)}.u-blue{color:var(--blue)}
.u-num{font-variant-numeric:tabular-nums}
.u-code{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:-.01em}
.u-text{color:var(--text)}
.u-on-accent{color:var(--on-accent)}
.u-flex{display:flex}
.u-split{display:flex;justify-content:space-between}
.u-click{cursor:pointer}
.u-center{text-align:center}
.u-tr{text-align:right}
.u-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.u-nowrap{white-space:nowrap}

.u-mt1{margin-top:var(--sp-1)}.u-mt2{margin-top:var(--sp-2)}.u-mt3{margin-top:var(--sp-3)}.u-mt4{margin-top:var(--sp-4)}
.u-mb1{margin-bottom:var(--sp-1)}.u-mb2{margin-bottom:var(--sp-2)}.u-mb3{margin-bottom:var(--sp-3)}.u-mb4{margin-bottom:var(--sp-4)}
.u-p2{padding:var(--sp-2)}.u-p3{padding:var(--sp-3)}.u-p4{padding:var(--sp-4)}
.u-hide{display:none}

/* ── Компоненты форм ──────────────────────────────────────────────────────
   Заменяют три разных вида инлайновых полей, которые раньше отличались
   отступом и фоном без причины. Один вид поля на всё приложение. */
.lbl{font-size:var(--fs-cap);color:var(--text2);margin-bottom:var(--sp-1)}
.field{width:100%;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-base);background:var(--bg);color:var(--text);outline:none;transition:border-color .15s}
.field:focus{border-color:var(--text)}
.field::placeholder{color:var(--text3)}
.btn-ghost{padding:var(--sp-2) var(--sp-4);background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-base);font-weight:600;color:var(--text);transition:border-color .12s,color .12s}
.btn-ghost:hover{border-color:var(--text)}
.btn-icon{padding:var(--sp-2);min-width:34px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text2);font-size:var(--fs-base);line-height:1;transition:border-color .12s,color .12s}
.btn-icon:hover{border-color:var(--text);color:var(--text)}
.subhead{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--sp-3)}
.eyebrow{font-size:var(--fs-micro);font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-2) 0 var(--sp-1)}
.toolbar-row{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* Мелкие варианты поля и кнопки — раньше в инлайнах жили пять разных
   отступов для одного и того же контрола */
.field-sm{padding:var(--sp-1) var(--sp-2);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-sm);background:var(--bg);color:var(--text);outline:none;transition:border-color .15s}
.field-sm:focus{border-color:var(--text)}
.btn-sm{padding:var(--sp-1) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);background:none;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.btn-sm:hover{border-color:var(--text)}
.btn-solid{padding:var(--sp-2) var(--sp-4);background:var(--text);color:var(--on-accent);border:none;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:700}
.btn-solid:hover{opacity:.88}
.link-btn{background:none;border:none;font-size:var(--fs-cap);color:var(--text2);padding:0;text-decoration:underline}
.link-btn:hover{color:var(--text)}
/* Вложенные («под-») вкладки внутри страницы */
.tab-sub{background:none;border:none;border-bottom:2px solid transparent;font-size:var(--fs-base);font-weight:600;color:var(--text2);padding:var(--sp-2) var(--sp-1);margin-right:var(--sp-2)}
.tab-sub:hover{color:var(--text)}
.chip{padding:2px var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-cap);border:1px solid var(--border);color:var(--text2)}
.strip{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);color:var(--text2);border-bottom:1px solid var(--border)}
.total-row{display:flex;justify-content:space-between;padding:var(--sp-2) 0;font-size:var(--fs-md);font-weight:800;margin-top:var(--sp-1)}

/* Карточка-контейнер: граница, без подъёма */
.u-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4)}
.u-inset{background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-3)}
.u-hr{height:1px;background:var(--border);border:0;margin:var(--sp-3) 0}

/* ── Логин ────────────────────────────────────────────────────────────── */
#login-screen{position:fixed;inset:0;background:var(--card);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--sp-5);padding:var(--sp-8) var(--sp-6);z-index:100}
#login-screen h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em}
.login-input{width:100%;max-width:320px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-md);background:var(--card);color:var(--text);outline:none;transition:border-color .15s}
.login-input:focus{border-color:var(--text)}
.btn-primary{width:100%;max-width:320px;padding:var(--sp-3) var(--sp-4);background:var(--text);color:var(--on-accent);border:none;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:700}
.btn-primary:hover{opacity:.88}
#login-error{color:var(--red);font-size:var(--fs-sm);display:none}

/* ── Приложение ───────────────────────────────────────────────────────── */
#app{display:none}

/* ── Шапка ────────────────────────────────────────────────────────────── */
.header{background:var(--card);border-bottom:1px solid var(--border);padding:var(--sp-3) var(--sp-5) 0;position:sticky;top:0;z-index:50}
.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.app-title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.03em}
.header-meta{font-size:var(--fs-cap);color:var(--text3);font-variant-numeric:tabular-nums}
.badge-critical{background:var(--red-bg);color:var(--red);font-size:var(--fs-sm);font-weight:700;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-sm);display:none}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:none;border-bottom:2px solid transparent;font-size:var(--fs-sm);font-weight:500;color:var(--text2);padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;margin-right:var(--sp-2);white-space:nowrap;flex-shrink:0;transition:color .15s,border-color .15s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--text);font-weight:700}

/* ── Контент ──────────────────────────────────────────────────────────── */
.content{padding:var(--sp-4)}

/* ── Показатели ───────────────────────────────────────────────────────── */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-bottom:var(--sp-4)}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);text-align:center}
.stat-val{font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-label{font-size:var(--fs-micro);color:var(--text2);margin-top:var(--sp-0);font-weight:500}

/* ── Панель списка ────────────────────────────────────────────────────── */
.list-toolbar{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.search-input{flex:1;padding:var(--sp-3) var(--sp-4);background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-base);color:var(--text);outline:none;transition:border-color .15s}
.search-input:focus{border-color:var(--text)}
.search-input::placeholder{color:var(--text3)}
.btn-select-all{padding:var(--sp-3);background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:700;color:var(--text2);white-space:nowrap}
.btn-select-all.active{border-color:var(--text);color:var(--text)}
.filter-bar{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3);flex-wrap:wrap;overflow-x:auto;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-btn{padding:var(--sp-1) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--card);font-size:var(--fs-sm);font-weight:600;color:var(--text2);white-space:nowrap;flex-shrink:0;transition:border-color .15s,color .15s}
.filter-btn:hover{border-color:var(--border-strong);color:var(--text)}
.filter-btn.active{border-color:var(--text);color:var(--text);background:var(--surface-2)}
.sort-select{padding:var(--sp-1) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--card);font-size:var(--fs-sm);font-weight:600;color:var(--text2);outline:none;flex-shrink:0}

/* ── Карточка товара ──────────────────────────────────────────────────── */
.product-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-1);display:flex;align-items:center;gap:var(--sp-3);transition:border-color .12s,background .12s;-webkit-user-select:none;user-select:none}
.product-card:hover{border-color:var(--border-strong)}
.product-card.selected{border-color:var(--text);background:var(--surface-2)}

.cb{width:22px;height:22px;border-radius:var(--r-sm);border:1.5px solid var(--border-strong);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .12s;font-size:var(--fs-sm);font-weight:800;color:transparent}
.cb.checked{background:var(--text);border-color:var(--text);color:var(--on-accent)}

.product-info{flex:1;min-width:0;cursor:pointer}
.product-name{font-size:var(--fs-base);font-weight:600;margin-bottom:var(--sp-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-sku{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--text3);letter-spacing:-.01em}
/* Строка мета-данных: на узком экране плашка остатка поставщика сжималась
   в узкий столбик и налезала на подпись «Ozon FBS». Переносим строку целиком. */
.product-sku{flex-wrap:wrap;row-gap:var(--sp-1)}
.product-sku button{flex-shrink:0;white-space:nowrap}
.pstock-wrap{text-align:right;flex-shrink:0;cursor:pointer}
.pstock{font-size:var(--fs-xl);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.pmin{font-size:var(--fs-micro);color:var(--text3);margin-top:1px;font-variant-numeric:tabular-nums}
.badge{font-size:var(--fs-cap);font-weight:700;padding:var(--sp-0) var(--sp-2);border-radius:var(--r-pill);white-space:nowrap;flex-shrink:0}
.badge-ok{background:var(--green-bg);color:var(--green)}
.badge-low{background:var(--amber-bg);color:var(--amber)}
.badge-crit{background:var(--red-bg);color:var(--red)}
.badge-frozen{background:var(--neutral-bg);color:var(--neutral)}

/* ── Плавающая панель действий ────────────────────────────────────────── */
.action-bar{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:var(--sp-3) var(--sp-5);padding-bottom:max(var(--sp-3),env(safe-area-inset-bottom));display:none;align-items:center;gap:var(--sp-2);z-index:60;box-shadow:var(--shadow-pop)}
.action-bar.show{display:flex}
.ab-info{flex:1}
.ab-count{font-size:var(--fs-base);font-weight:800;font-variant-numeric:tabular-nums}
.ab-hint{font-size:var(--fs-cap);color:var(--text2);margin-top:1px}
.ab-btns{display:flex;gap:var(--sp-2)}
.btn-ab{padding:var(--sp-2) var(--sp-3);border:1px solid transparent;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.btn-ab-clear{background:var(--card);color:var(--text2);border-color:var(--border-strong)}
.btn-ab-copy{background:var(--text);color:var(--on-accent)}
.btn-ab-freeze{background:var(--red-bg);color:var(--red)}

/* ── Нижний лист ──────────────────────────────────────────────────────── */
.drawer-overlay{position:fixed;inset:0;background:rgba(10,11,13,.42);z-index:200;display:none;align-items:flex-end}
.drawer-overlay.open{display:flex}
.drawer{background:var(--card);width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--sp-5);max-height:70vh;overflow-y:auto;border-top:1px solid var(--border)}
.drawer-handle{width:36px;height:4px;background:var(--border-strong);border-radius:var(--r-pill);margin:0 auto var(--sp-5)}
.drawer-title{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--sp-1)}
.drawer-sku{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text2);margin-bottom:var(--sp-5)}
.drawer-row{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border);font-size:var(--fs-base)}
.drawer-row:last-of-type{border-bottom:none}
.drawer-row span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4)}
.btn-outline{padding:var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);background:none;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.btn-outline:hover{border-color:var(--text)}
.btn-freeze{padding:var(--sp-3);border:1px solid transparent;border-radius:var(--r-md);background:var(--red-bg);font-size:var(--fs-sm);font-weight:600;color:var(--red)}
.btn-freeze.frozen{background:var(--green-bg);color:var(--green)}

/* ── Закупки ──────────────────────────────────────────────────────────── */
.btn-generate{width:100%;padding:var(--sp-4);background:var(--text);color:var(--on-accent);border:none;border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:700;margin-bottom:var(--sp-4);display:flex;align-items:center;justify-content:center;gap:var(--sp-2)}
.btn-generate:hover{opacity:.88}
.btn-generate.loading{opacity:.6;pointer-events:none}
.purchase-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-2)}
.purchase-header{display:flex;align-items:center;margin-bottom:var(--sp-3)}
.purchase-num{font-size:var(--fs-base);font-weight:700;flex:1}
.purchase-date{font-size:var(--fs-sm);color:var(--text2);font-variant-numeric:tabular-nums}
.purchase-status{font-size:var(--fs-cap);font-weight:700;padding:var(--sp-0) var(--sp-2);border-radius:var(--r-pill);margin-left:var(--sp-2)}
.status-draft{background:var(--neutral-bg);color:var(--neutral)}
.status-ordered{background:var(--amber-bg);color:var(--amber)}
.status-transit{background:var(--blue-bg);color:var(--blue)}
.status-received{background:var(--green-bg);color:var(--green)}
.purchase-items{margin-bottom:var(--sp-3)}
.purchase-item{font-size:var(--fs-base);padding:var(--sp-1) 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:var(--sp-3)}
.purchase-item:last-child{border-bottom:none;padding-bottom:0}
.purchase-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.btn-status{flex:1;padding:var(--sp-2);border:1px solid var(--border-strong);border-radius:var(--r-md);background:none;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;transition:all .12s}
.btn-status:hover{background:var(--text);color:var(--on-accent);border-color:var(--text)}
.btn-received{flex:1;padding:var(--sp-2);border:1px solid var(--green);border-radius:var(--r-md);background:none;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;color:var(--green);transition:all .12s}
.btn-received:hover{background:var(--green);color:#fff}
.btn-copy{padding:var(--sp-2) var(--sp-3);background:var(--text);color:var(--on-accent);border:none;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600}

/* ── Модальное окно ───────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(10,11,13,.5);z-index:300;display:none;align-items:center;justify-content:center;padding:var(--sp-5)}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);width:100%;max-width:420px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-pop)}
.modal-title{font-size:var(--fs-md);font-weight:800;margin-bottom:var(--sp-1)}
.modal-sub{font-size:var(--fs-sm);color:var(--text2);margin-bottom:var(--sp-5)}
.received-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.received-item:last-of-type{border-bottom:none}
.received-name{flex:1;font-size:var(--fs-base);font-weight:600}
.received-input{width:64px;padding:var(--sp-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:var(--fs-base);font-weight:700;text-align:center;font-variant-numeric:tabular-nums;background:var(--card);color:var(--text)}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ── Тост ─────────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%);background:var(--text);color:var(--on-accent);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-base);font-weight:600;z-index:999;opacity:0;transition:opacity .25s,bottom .2s;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-pop)}
.toast.show{opacity:1}

/* ── Пусто ────────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:var(--sp-8) var(--sp-5);color:var(--text2)}
.empty-icon{font-size:var(--fs-display);margin-bottom:var(--sp-3);opacity:.5}
.empty-text{font-size:var(--fs-base)}

/* ── Спиннер ──────────────────────────────────────────────────────────── */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.section-title{font-size:var(--fs-cap);font-weight:700;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin:var(--sp-4) 0 var(--sp-2)}

/* ── Мобильная адаптация ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Задачи: сайдбар → выпадающий селект */
  #tasks-sidebar{display:none!important}
  #tasks-mobile-bar{display:flex!important}
  #tasks-sidebar-mobile{display:block!important}
  #tab-tasks > div{flex-direction:column!important}

  .content{padding:var(--sp-2)}
  .header{padding:var(--sp-3) var(--sp-3) 0}
  .header-top{flex-wrap:wrap;gap:var(--sp-1)}
  .app-title{font-size:var(--fs-md)}

  /* Статистика: 2 колонки */
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat-val{font-size:var(--fs-lg)}

  /* Фильтры: горизонтальный скролл */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto}

  /* Touch-цели ≥44px */
  .btn-generate{padding:17px;font-size:var(--fs-md)}
  .btn-select-all{padding:13px 14px;min-height:44px}
  .filter-btn{padding:9px 14px;min-height:38px}
  .btn-ab{padding:12px 16px;font-size:var(--fs-sm)}
  .btn-outline,.btn-freeze{padding:14px 12px;font-size:var(--fs-base)}
  .btn-status,.btn-received{flex:auto;min-width:100px;padding:12px 8px}

  /* Инпуты: 16px предотвращает авто-зум на iOS */
  .search-input,.login-input,.received-input,.field{font-size:16px}
  #quick-task-input,#td-new-item,#td-comment-input{font-size:16px}

  .purchase-actions{flex-wrap:wrap;gap:var(--sp-1)}
  .task-card{padding:var(--sp-2) var(--sp-3)}

  /* Сборка: скрываем «summary» от auto margin при переносе */
  #assembly-summary{width:100%;margin-left:0!important;text-align:left}

  /* Новый товар: схлопываем 2- и 3-колоночные сетки */
  #tab-newproduct div[style*="grid-template-columns:1fr 1fr"],
  #tab-newproduct div[style*="grid-template-columns:1fr 1fr 1fr"],
  #tab-newproduct .u-grid-2,
  #tab-newproduct .u-grid-3{
    grid-template-columns:1fr!important
  }

  /* Конкуренты: 5 плашек в ряд не влезают, а подпись сортировки с margin-left:auto
     выдавливала страницу за 390px (был горизонтальный скролл) */
  #cmp-stats{grid-template-columns:repeat(2,1fr)!important}
  div:has(> #cmp-sortinfo){flex-wrap:wrap}
  #cmp-sortinfo{margin-left:0!important;min-width:0;flex:1 1 100%;white-space:normal}

  /* Тост не перекрывается action-bar */
  .toast{bottom:90px}
}
#tasks-mobile-bar{display:none;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);background:var(--card)}
#tasks-sidebar-mobile{display:none}


/* ═══ Аналитика ═══════════════════════════════════════════════════════ */
#tab-analytics{padding:var(--sp-4);padding-bottom:90px}
.an-toolbar{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.an-seg{display:flex;flex:1;background:var(--surface-2);border-radius:var(--r-md);padding:3px;gap:2px}
.an-seg button{flex:1;padding:var(--sp-2) 0;border:none;background:none;font-size:var(--fs-sm);font-weight:600;color:var(--text2);border-radius:var(--r-sm);transition:all .15s}
.an-seg button:hover{color:var(--text)}
.an-seg button.active{background:var(--card);color:var(--text);font-weight:700;border:1px solid var(--border)}
.an-snap{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--card);font-size:var(--fs-sm);font-weight:600;color:var(--text2);white-space:nowrap;transition:all .12s}
.an-snap:hover{color:var(--text);border-color:var(--text)}
.an-snap:active{transform:scale(.97)}
.an-note{font-size:var(--fs-cap);color:var(--text3);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-1)}
.an-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.an-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4)}
.an-kpi-label{font-size:var(--fs-cap);color:var(--text2);font-weight:600;margin-bottom:var(--sp-1)}
.an-kpi-val{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.an-kpi-val small{font-size:var(--fs-sm);font-weight:700;color:var(--text3)}
.an-kpi-sub{font-size:var(--fs-cap);color:var(--text3);margin-top:var(--sp-1)}
.an-chip{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-cap);font-weight:800;padding:2px var(--sp-2);border-radius:var(--r-pill);margin-top:var(--sp-2);font-variant-numeric:tabular-nums}
.an-chip.up{background:var(--green-bg);color:var(--green)}
.an-chip.down{background:var(--red-bg);color:var(--red)}
.an-chip.flat{background:var(--neutral-bg);color:var(--neutral)}
.an-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3)}
.an-card-head{display:flex;align-items:center;gap:var(--sp-2)}
.an-card-title{font-size:var(--fs-md);font-weight:800;letter-spacing:-.02em}
.an-card-sub{font-size:var(--fs-cap);color:var(--text3);margin:var(--sp-0) 0 var(--sp-2)}
.an-chart{position:relative;height:210px;margin:var(--sp-2) -4px 2px}
.an-list{margin-top:var(--sp-1)}
.an-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border)}
.an-row:first-child{border-top:none}
.an-row-main{flex:1;min-width:0}
.an-row-name{font-size:var(--fs-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-row-meta{font-size:var(--fs-cap);color:var(--text3);margin-top:2px;font-variant-numeric:tabular-nums}
.an-reason{display:inline-block;font-size:var(--fs-micro);font-weight:700;color:var(--amber);background:var(--amber-bg);padding:2px var(--sp-2);border-radius:var(--r-pill);margin-top:var(--sp-1)}
.an-delta{font-size:var(--fs-base);font-weight:800;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.an-delta small{display:block;font-size:var(--fs-micro);font-weight:600;color:var(--text3);margin-top:1px}
.an-toggle{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text2);user-select:none}
.an-switch{position:relative;width:38px;height:22px;background:var(--border-strong);border-radius:var(--r-pill);transition:.2s;flex-shrink:0}
.an-switch.on{background:var(--text)}
.an-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--card);border-radius:50%;transition:.2s}
.an-switch.on::after{transform:translateX(16px)}
.an-costhead{display:flex;gap:var(--sp-2);font-size:var(--fs-micro);color:var(--text3);font-weight:600;padding:2px 2px var(--sp-1)}
.an-costrow{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;border-top:1px solid var(--border)}
.an-costrow input{width:64px;padding:var(--sp-1);border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:var(--fs-base);text-align:center;font-variant-numeric:tabular-nums;outline:none;transition:border-color .12s;background:var(--card);color:var(--text)}
.an-costrow input:focus{border-color:var(--text)}
.an-skeleton{height:14px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);background-size:200% 100%;border-radius:var(--r-sm);animation:an-shimmer 1.2s infinite}
@keyframes an-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══ Переоценка ══════════════════════════════════════════════════════ */
.rp-formula{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base);color:var(--text2);line-height:1.55;margin-bottom:var(--sp-4)}
.rp-formula b{color:var(--text)}
.rp-bar{height:6px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.rp-bar-fill{height:100%;width:0;background:var(--text);border-radius:var(--r-pill);transition:width .3s}
.rp-prog-txt{font-size:var(--fs-sm);color:var(--text2);margin-top:var(--sp-1);font-weight:600;font-variant-numeric:tabular-nums}
.rp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-2)}
.rp-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3)}
.rp-k{font-size:var(--fs-cap);color:var(--text2);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.rp-v{font-size:var(--fs-xl);font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rp-gen{font-size:var(--fs-sm);color:var(--text3);margin:2px 2px var(--sp-3);font-weight:600}
.rp-controls{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-2)}
.rp-controls input[type=search]{flex:1;min-width:180px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--card);color:var(--text);font-size:var(--fs-base)}
.rp-controls input[type=search]:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.rp-seg{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.rp-seg button{border:0;background:transparent;color:var(--text2);font-size:var(--fs-sm);font-weight:700;padding:var(--sp-2) var(--sp-3)}
.rp-seg button:hover{color:var(--text)}
.rp-seg button.on{background:var(--text);color:var(--on-accent)}
.rp-cnt{font-size:var(--fs-sm);color:var(--text2);margin:0 2px var(--sp-2);font-weight:600}
.rp-tbl-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow-x:auto}
.rp-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.rp-tbl th,.rp-tbl td{padding:var(--sp-2) var(--sp-3);text-align:left;white-space:nowrap}
.rp-tbl th{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border-strong);font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.03em;color:var(--text2);font-weight:800;cursor:pointer;user-select:none}
.rp-tbl th:hover{color:var(--text)}
.rp-tbl th.num,.rp-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.rp-tbl tbody tr{border-bottom:1px solid var(--border)}
.rp-tbl tbody tr:hover{background:var(--surface-2)}
.rp-tbl tbody tr:last-child{border-bottom:0}
.rp-tbl td.name{white-space:normal;min-width:220px}
.rp-tbl td.off{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text2);font-weight:600}
.rp-badge{display:inline-block;font-size:var(--fs-cap);font-weight:800;padding:2px var(--sp-2);border-radius:var(--r-pill)}
.rp-badge.low{background:var(--blue-bg);color:var(--blue)}
.rp-badge.high{background:var(--amber-bg);color:var(--amber)}
.rp-old{color:var(--text3);text-decoration:line-through;font-size:var(--fs-sm)}
.rp-arr{color:var(--text3);margin:0 var(--sp-1)}
.rp-new{font-weight:800}
.rp-new.up{color:var(--red)}
.rp-net{color:var(--green);font-weight:800}
.rp-errbox{margin-top:var(--sp-4);background:var(--red-bg);border:1px solid var(--red);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.rp-err-h{font-size:var(--fs-base);color:var(--red);font-weight:800}
.rp-errbox li{font-size:var(--fs-base);margin:var(--sp-0) 0;color:var(--text2)}
.rp-actionbar{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--border);box-shadow:var(--shadow-pop);padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);z-index:40}
.rp-ab-txt{flex:1;font-size:var(--fs-base);color:var(--text2);font-weight:700}
.rp-ab-btn{padding:var(--sp-3) var(--sp-5);background:var(--green);color:#fff;border:0;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:800}
.rp-ab-btn:disabled{opacity:.5;cursor:default}
.rp-cfg{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.rp-cfg-f{display:flex;flex-direction:column;gap:var(--sp-1)}
.rp-cfg-f label{font-size:var(--fs-cap);color:var(--text2);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.rp-cfg-f input{width:120px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.rp-cfg-f input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.rp-cfg-btn{padding:var(--sp-3) var(--sp-4);background:var(--text);color:var(--on-accent);border:0;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:800}
.rp-cfg-btn:hover{opacity:.88}
.rp-cfg-btn:disabled{opacity:.5;cursor:default}
.rp-cfg-hint{font-size:var(--fs-sm);color:var(--text2);font-weight:600;flex-basis:100%}

/* ── Десктоп: боковое меню вместо 16 вкладок горизонтальным скроллом ───────
   Ту же разметку .tabs раскладываем в колонку — JS переключения не меняется. */
@media (min-width: 1024px) {
  #app{padding-left:var(--rail)}
  .tabs{
    position:fixed;left:0;top:0;bottom:0;width:var(--rail);
    flex-direction:column;align-items:stretch;
    background:var(--card);border-right:1px solid var(--border);
    padding:var(--sp-4) var(--sp-3);overflow-y:auto;z-index:70;
  }
  .tab{
    border-bottom:none;border-radius:var(--r-md);
    padding:var(--sp-2) var(--sp-3);margin:0 0 1px;
    text-align:left;font-size:var(--fs-base);
  }
  .tab:hover{background:var(--surface-2)}
  .tab.active{background:var(--surface-2);border-bottom-color:transparent}

  .header{padding:var(--sp-4) var(--sp-6)}
  .header-top{margin-bottom:0}

  /* Контент не растягиваем на всю ширину монитора — строки становятся нечитаемыми */
  .content{max-width:1200px;padding:var(--sp-5) var(--sp-6)}
  #tab-analytics{max-width:1200px;padding:var(--sp-5) var(--sp-6);padding-bottom:90px}

  /* Фиксированные панели не должны залезать под меню */
  .action-bar,.rp-actionbar{left:var(--rail)}
  .toast{left:calc(50% + var(--rail) / 2)}

  /* Плотнее: на большом экране в тот же экран влезает больше строк */
  .rp-tbl th,.rp-tbl td{padding:var(--sp-1) var(--sp-3)}
  .product-card{padding:var(--sp-2) var(--sp-3)}
  .stat-card{padding:var(--sp-2) var(--sp-3)}

  /* Элементы управления не растягиваем на всю ширину монитора:
     переключатель периода и главная кнопка должны быть по содержимому */
  /* по содержимому, но без сжатия: иначе «2 недели» переносилось в две строки */
  .an-seg{flex:0 0 auto;max-width:none}
  .an-seg button{flex:0 0 auto;white-space:nowrap;padding:var(--sp-2) var(--sp-5)}
  .btn-generate{width:auto;min-width:260px;padding:var(--sp-3) var(--sp-5)}
}