/* ============================================================
   dashboard.css — стили дашборда WB Monitor
   Вынесено из report_template.html
   Не редактировать вручную — при правках менять этот файл.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
@keyframes skuf-pulse{from{opacity:.4;width:20%}to{opacity:1;width:70%}}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
     background:#F5F5FF;color:#1E293B;height:100vh;overflow:hidden;font-size:var(--wbm-fs-sm);display:flex;flex-direction:column}
/* [2026-07-05, Alex — «статусы съедают строку меню и обрезаются; вынести статусы в отдельную
   строку, меню — отдельно»] Топбар — ДВА ряда на ВСЕХ ширинах (было: только на мобильном
   ≤768px; на десктопе все пилюли статуса шли в одну строку с кнопками меню и обрезались
   overflow:hidden, когда пилюль стало больше — Фин.канон/Перераспределение/ЧЗ). Ряд 1:
   Алерты + заголовок + кнопки меню (margin-left:auto на #topbar-diagnostics — первая по
   order кнопка меню — прижимает весь блок кнопок к правому краю). Ряд 2: строка статусов —
   flex-basis:100% переносит её на новую строку (.topbar{flex-wrap:wrap}), order:99 — всегда
   после кнопок меню; при нехватке места скроллится горизонтально, а не обрезается.
   --topbar-h (JS, см. report_template.html) держит актуальную высоту топбара для фикс.
   элементов (.ai-panel/#format-alert-banner), которые раньше предполагали топбар=48px. */
.topbar{background:white;border-bottom:1px solid #E5E7EB;padding:6px 18px;
         display:flex;align-items:center;flex-wrap:wrap;row-gap:4px;gap:12px;height:auto;min-height:48px;position:sticky;top:0;z-index:300}
.topbar-left{display:flex;align-items:center;gap:12px;flex-shrink:0}
.topbar-page-title{font-size:var(--wbm-fs-md);font-weight:700;color:var(--wbm-ink);letter-spacing:-.3px}
/* display:contents «растворяет» .topbar-right — #topbar-status-strip (см. ниже) и кнопки
   меню внутри становятся ПРЯМЫМИ flex-детьми .topbar (нужно, чтобы flex-basis:100% у
   status-strip переносило ЕГО на всю ширину топбара, а не только .topbar-right). */
.topbar-right{display:contents}
/* #topbar-diagnostics — первая по order (4) кнопка меню среди дочерних .topbar; margin-left:auto
   прижимает её и все следующие по order кнопки меню (тема/AI-разбор/справочник) к правому
   краю ряда 1, оставляя Алерты+заголовок слева (тот же эффект, что раньше давал
   .topbar-right{margin-left:auto} до display:contents). */
#topbar-diagnostics{margin-left:auto}
#topbar-status-strip{display:flex;align-items:center;gap:5px;flex-basis:100%;order:99;
  min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:2px}
#topbar-status-strip>*{flex-shrink:0}
.topbar-date{font-size:var(--wbm-fs-xs);color:#6B7280;background:#F9FAFB;
             padding:4px 11px;border-radius:var(--wbm-radius-btn);border:1px solid #E5E7EB}
.tg-timers{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:var(--wbm-fs-2xs);
           color:#6B7280;line-height:1.4;cursor:default}
.tg-timers span{white-space:nowrap}
.refresh-btn{padding:5px 14px;background:#7C3AED;color:white;border:none;
              border-radius:var(--wbm-radius-btn);cursor:pointer;font-size:var(--wbm-fs-xs);font-weight:600;transition:background .15s}
.refresh-btn:hover{background:#6D28D9}
.msg-btn{padding:5px 13px;background:#0EA5E9;color:white;border:none;
          border-radius:var(--wbm-radius-btn);cursor:pointer;font-size:var(--wbm-fs-xs);font-weight:600;transition:background .15s}
.msg-btn:hover{background:#0284C7}
.msg-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;
                     align-items:center;justify-content:center}
.msg-modal-backdrop.open{display:flex}
.msg-modal{background:white;border-radius:14px;padding:20px;width:440px;max-width:96vw;
            box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:12px}
.msg-modal-title{font-size:var(--wbm-fs-md);font-weight:700;color:#1E293B}
.msg-textarea{width:100%;height:220px;border:1.5px solid #E5E7EB;border-radius:8px;
               padding:10px;font-size:var(--wbm-fs-xs);line-height:1.6;resize:vertical;
               font-family:monospace;color:#374151;outline:none}
.msg-textarea:focus{border-color:#7C3AED}
.msg-copy-btn{padding:8px 18px;background:#059669;color:white;border:none;border-radius:var(--wbm-radius-btn);
               cursor:pointer;font-size:var(--wbm-fs-xs);font-weight:700;transition:background .15s}
.msg-copy-btn:hover{background:#047857}
.msg-close-btn{padding:8px 18px;background:var(--wbm-surface-2);color:var(--wbm-ink-3);border:none;border-radius:var(--wbm-radius-btn);
                cursor:pointer;font-size:var(--wbm-fs-xs);font-weight:600}
.shell{display:flex;flex:1 1 auto;min-height:0;overflow:hidden}
/* Баннер sync-bar — обычный блок в потоке сверху, занимает свою высоту (0 когда display:none). */
#global-sync-bar{flex:0 0 auto}
#sidebar-panel.sb-hidden{display:none!important}
.sidebar{width:280px;min-width:240px;max-width:1100px;background:var(--wbm-surface);border-right:1px solid var(--wbm-border);
          display:flex;flex-direction:column;height:100%;flex-shrink:0;position:relative}
.sidebar-head{padding:11px 14px 8px;border-bottom:1px solid var(--wbm-border);flex-shrink:0}
.sidebar-head-title{font-size:var(--wbm-fs-xs);font-weight:700;color:var(--wbm-ink-2);margin-bottom:3px;
                     display:flex;align-items:center;justify-content:space-between}
.sidebar-scroll{flex:1;overflow-y:auto;padding:8px 10px}
/* ── Правая панель AI (всегда видна справа) ── */
.ai-panel{width:296px;min-width:200px;max-width:600px;background:var(--wbm-surface);
           border-left:1.5px solid var(--wbm-accent-soft);display:flex;flex-direction:column;
           height:100%;flex-shrink:0;position:relative}
/* Ручка изменения ширины (левый край панели) */
#ai-panel-resizer{position:absolute;left:0;top:0;bottom:0;width:5px;cursor:col-resize;
  z-index:200;background:transparent;transition:background .2s}
#ai-panel-resizer:hover,#ai-panel-resizer.dragging{background:color-mix(in oklab,var(--wbm-accent) 27%,transparent)}
.ai-panel-head{padding:7px 10px 6px;border-bottom:1px solid var(--wbm-accent-soft);flex-shrink:0;
               display:flex;align-items:center;gap:5px;background:var(--wbm-bg)}
.ai-panel-section{font-size:var(--wbm-fs-2xs);font-weight:700;color:var(--wbm-accent-ink)}
/* Рекомендации AI — верхняя часть панели (растягивается) */
.ai-recs-section{flex:1 1 0;min-height:60px;overflow:hidden;display:flex;
                  flex-direction:column;border-bottom:none}
.ai-recs-head{padding:6px 10px 5px;flex-shrink:0;display:flex;align-items:center;
               justify-content:space-between;background:var(--wbm-surface);border-bottom:1px solid var(--wbm-border)}
.ai-recs-scroll{flex:1;overflow-y:auto;padding:7px 8px;background:var(--wbm-bg)}
/* Ручка вертикального разделителя (между рекомендациями и чатом) */
#ai-chat-resizer{flex-shrink:0;height:6px;cursor:row-resize;background:var(--wbm-accent-soft);
  display:flex;align-items:center;justify-content:center;position:relative}
#ai-chat-resizer::before{content:'';display:block;width:32px;height:2px;
  border-radius:2px;background:var(--wbm-accent-2)}
#ai-chat-resizer:hover,#ai-chat-resizer.dragging{background:color-mix(in oklab,var(--wbm-accent) 22%,transparent)}
/* Чат — нижняя часть панели (растягивается) */
.ai-chat-section{flex:0 0 38%;min-height:80px;display:flex;flex-direction:column}
.ai-chat-head{padding:6px 11px 5px;flex-shrink:0;display:flex;align-items:center;
               background:var(--wbm-surface);border-bottom:1px solid var(--wbm-accent-soft)}
.ai-chat-history{flex:1;overflow-y:auto;padding:8px 10px;
                  display:flex;flex-direction:column;gap:7px;background:var(--wbm-bg)}
.ai-chat-input-row{flex-shrink:0;padding:7px 9px;display:flex;gap:6px;
                    background:var(--wbm-surface);border-top:1px solid var(--wbm-accent-soft)}
.ai-chat-ta{flex:1;border:1.5px solid var(--wbm-border);border-radius:8px;padding:6px 9px;
             font-size:var(--wbm-fs-xs);resize:none;outline:none;font-family:inherit;
             line-height:1.4;color:var(--wbm-ink-2);background:var(--wbm-bg)}
.ai-chat-ta:focus{border-color:var(--wbm-accent);background:var(--wbm-surface)}
.ai-chat-send{background:var(--wbm-accent);color:white;border:none;border-radius:8px;
               padding:6px 11px;font-size:var(--wbm-fs-sm);cursor:pointer;align-self:flex-end;
               transition:background .15s;flex-shrink:0}
.ai-chat-send:hover{background:var(--wbm-accent-ink)}
/* Блок AI-алертов в левом сайдбаре */
.sdb-ai{background:var(--wbm-accent-soft);border:1.5px solid color-mix(in oklab,var(--wbm-accent) 25%,transparent);border-radius:10px;
         padding:8px 10px;margin-bottom:8px}
.sdb-ai-title{font-size:var(--wbm-fs-2xs);font-weight:700;color:var(--wbm-accent-ink);margin-bottom:6px;
               display:flex;align-items:center;justify-content:space-between}
.sdb-ai-item{padding:4px 0;border-bottom:1px solid color-mix(in oklab,var(--wbm-accent) 10%,transparent);
              font-size:var(--wbm-fs-2xs);line-height:1.5;display:flex;align-items:flex-start;gap:4px}
.sdb-ai-item:last-child{border-bottom:none}
.expand-btn{width:100%;margin-top:4px;padding:5px;background:var(--wbm-surface-2);border:1px solid var(--wbm-border);
             border-radius:6px;cursor:pointer;font-size:var(--wbm-fs-2xs);color:var(--wbm-ink-3);text-align:center}
.expand-btn:hover{background:var(--wbm-border)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.main-scroll{flex:1;overflow-y:auto;padding:0 14px 10px}
.sticky-top{position:sticky;top:0;z-index:160;background:white;flex-shrink:0;
             box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tab-bar{display:flex;gap:4px;background:#EDE9FE;border-radius:12px;padding:4px;margin-bottom:0;flex-shrink:0}

/* ── Индикатор статуса API ── */
#api-status-pill{display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  padding:3px 10px 3px 7px;border-radius:var(--wbm-radius-btn);font-size:var(--wbm-fs-2xs);font-weight:600;
  cursor:pointer;user-select:none;white-space:nowrap;flex-shrink:0;
  transition:background .2s,box-shadow .2s;position:relative}
#api-status-pill:hover{box-shadow:0 2px 8px rgba(0,0,0,.15)}
#api-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.7)}
#api-status-dot.green {background:#22C55E;animation:none}
#api-status-dot.yellow{background:#F59E0B}
#api-status-dot.red   {background:#EF4444;animation:api-pulse 1.5s infinite}
#api-status-dot.grey  {background:#94A3B8}
@keyframes api-pulse{0%,100%{box-shadow:0 0 0 2px rgba(239,68,68,.2)}
                     50%{box-shadow:0 0 0 5px rgba(239,68,68,.0)}}

/* ── Попап со статусами ── */
#api-status-popup{display:none;position:fixed;top:54px;right:8px;
  min-width:290px;max-width:360px;background:white;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);z-index:9300;padding:12px 14px;
  font-size:var(--wbm-fs-xs);line-height:1.7;border:1px solid #E5E7EB}
#api-status-popup.open{display:block}
#api-status-popup h4{margin:0 0 8px;font-size:var(--wbm-fs-xs);font-weight:700;color:#374151;
  border-bottom:1px solid #F3F4F6;padding-bottom:6px}
.api-row{display:flex;align-items:center;gap:7px;padding:2px 0}
.api-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.api-row .dot.ok  {background:#22C55E}
.api-row .dot.fail{background:#EF4444}
.api-row .dot.warn{background:#F59E0B}
.api-row .dot.skip{background:#94A3B8}
.api-row .aname{flex:1;color:#374151;font-weight:500}
.api-row .aerr {color:#9CA3AF;font-size:var(--wbm-fs-2xs);text-align:right;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#api-status-popup .footer{margin-top:8px;padding-top:6px;border-top:1px solid #F3F4F6;
  color:#9CA3AF;font-size:var(--wbm-fs-2xs);display:flex;justify-content:space-between}
#api-status-popup .footer a{color:#7C3AED;cursor:pointer;text-decoration:none}

/* ── WB Session пилюля (топбар) ── */
#wb-session-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;
  border-radius:var(--wbm-radius-btn);font-size:var(--wbm-fs-2xs);font-weight:600;cursor:pointer;
  user-select:none;white-space:nowrap;flex-shrink:0;
  transition:background .2s,box-shadow .2s;position:relative}
#wb-session-pill:hover{box-shadow:0 2px 8px rgba(0,0,0,.15)}
#wb-session-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.7)}
#wb-session-dot.green {background:#22C55E}
#wb-session-dot.yellow{background:#F59E0B}
#wb-session-dot.red   {background:#EF4444;animation:api-pulse 1.5s infinite}
#wb-session-dot.grey  {background:#94A3B8}
#wb-session-popup{display:none;position:fixed;top:52px;right:8px;
  min-width:280px;max-width:360px;background:white;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);z-index:9310;padding:12px 14px;
  font-size:var(--wbm-fs-xs);line-height:1.7;border:1px solid #E5E7EB}
#wb-session-popup.open{display:block}
#wb-session-popup h4{margin:0 0 8px;font-size:var(--wbm-fs-xs);font-weight:700;color:#374151;
  border-bottom:1px solid #F3F4F6;padding-bottom:6px}
.wbm-root.theme-dark #wb-session-pill{background:#1F2937;color:#9CA3AF}

/* ── JOBS-пилюля (фоновые задачи) ── */
#jobs-status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;
  border-radius:var(--wbm-radius-btn);font-size:var(--wbm-fs-2xs);font-weight:600;cursor:pointer;
  user-select:none;white-space:nowrap;flex-shrink:0;
  transition:background .2s,box-shadow .2s;position:relative}
#jobs-status-pill:hover{box-shadow:0 2px 8px rgba(0,0,0,.15)}
#jobs-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.7)}
#jobs-status-dot.green {background:#22C55E}
#jobs-status-dot.yellow{background:#F59E0B}
#jobs-status-dot.red   {background:#EF4444;animation:api-pulse 1.5s infinite}
#jobs-status-dot.grey  {background:#94A3B8}
#jobs-status-popup{display:none;position:fixed;top:54px;right:8px;
  min-width:260px;max-width:340px;background:white;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);z-index:9290;padding:12px 14px;
  font-size:var(--wbm-fs-xs);line-height:1.7;border:1px solid #E5E7EB}
#jobs-status-popup.open{display:block}
#jobs-status-popup h4{margin:0 0 8px;font-size:var(--wbm-fs-xs);font-weight:700;color:#374151;
  border-bottom:1px solid #F3F4F6;padding-bottom:6px}
.wbm-root.theme-dark #jobs-status-pill{background:#1F2937;color:#9CA3AF}

/* ── Пилюля «Фин.канон» (D25 — живое состояние финансового контура) ── */
#fin-canon-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;
  border-radius:var(--wbm-radius-btn);font-size:var(--wbm-fs-2xs);font-weight:600;cursor:pointer;
  user-select:none;white-space:nowrap;flex-shrink:0;
  transition:background .2s,box-shadow .2s;position:relative}
#fin-canon-pill:hover{box-shadow:0 2px 8px rgba(0,0,0,.15)}
#fin-canon-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.7)}
#fin-canon-dot.green {background:#22C55E}
#fin-canon-dot.yellow{background:#F59E0B}
#fin-canon-dot.red   {background:#EF4444;animation:api-pulse 1.5s infinite}
#fin-canon-dot.grey  {background:#94A3B8}
#fin-canon-popup{display:none;position:fixed;top:54px;right:8px;
  min-width:260px;max-width:340px;background:white;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);z-index:9290;padding:12px 14px;
  font-size:var(--wbm-fs-xs);line-height:1.7;border:1px solid #E5E7EB;text-align:left;font-weight:400}
#fin-canon-popup.open{display:block}
#fin-canon-popup h4{margin:0 0 8px;font-size:var(--wbm-fs-xs);font-weight:700;color:#374151;
  border-bottom:1px solid #F3F4F6;padding-bottom:6px}
.wbm-root.theme-dark #fin-canon-pill{background:#1F2937;color:#9CA3AF}

/* ── Лог активности ── */
#act-log-btn{display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  padding:3px 9px;border-radius:var(--wbm-radius-btn);font-size:var(--wbm-fs-2xs);font-weight:600;cursor:pointer;
  user-select:none;white-space:nowrap;flex-shrink:0;border:none;
  background:#F1F5F9;color:#64748B;transition:background .2s}
#act-log-btn:hover{background:#E2E8F0}
#act-log-btn.has-err{background:#FEF2F2;color:#991B1B}
#act-log-btn.has-warn{background:#FFFBEB;color:#92400E}
#act-log-panel{display:none;position:fixed;top:0;right:0;width:420px;height:100vh;
  background:white;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:2000;
  flex-direction:column;border-left:1px solid #E5E7EB;font-size:var(--wbm-fs-xs)}
#act-log-panel.open{display:flex}
#act-log-header{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #F3F4F6;background:#F9FAFB}
#act-log-header h4{margin:0;font-size:var(--wbm-fs-sm);font-weight:700;color:#111827}
#act-log-close{background:none;border:none;cursor:pointer;color:#9CA3AF;
  font-size:var(--wbm-fs-lg);line-height:1;padding:0 4px}
#act-log-close:hover{color:#374151}
#act-log-list{flex:1;overflow-y:auto;padding:8px 0}
#act-log-list::-webkit-scrollbar{width:4px}
#act-log-list::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}
.alog-row{display:grid;grid-template-columns:46px 62px 1fr;gap:4px;
  padding:5px 14px;border-bottom:1px solid #F9FAFB;line-height:1.4;
  transition:background .15s}
.alog-row:hover{background:#F8FAFC}
.alog-row.new{background:#EFF6FF}
.alog-ts{color:#9CA3AF;font-size:var(--wbm-fs-2xs);align-self:start;padding-top:1px}
.alog-lvl{font-size:var(--wbm-fs-2xs);font-weight:700;border-radius:4px;padding:1px 5px;
  text-align:center;align-self:start;margin-top:1px;white-space:nowrap}
.alog-lvl.INFO   {background:#EFF6FF;color:#3B82F6}
.alog-lvl.WARNING{background:#FFFBEB;color:#D97706}
.alog-lvl.ERROR  {background:#FEF2F2;color:#EF4444}
.alog-body{color:#374151}
.alog-src{font-size:var(--wbm-fs-2xs);color:#94A3B8;margin-top:1px}
#act-log-footer{padding:8px 14px;border-top:1px solid #F3F4F6;background:#F9FAFB;
  display:flex;align-items:center;justify-content:space-between;color:#9CA3AF;font-size:var(--wbm-fs-2xs)}
#act-log-empty{padding:24px;text-align:center;color:#9CA3AF;font-size:var(--wbm-fs-xs)}

.tab-btn{flex:1;padding:7px 6px;border:none;background:transparent;cursor:pointer;
          font-size:var(--wbm-fs-2xs);font-weight:600;color:#6D28D9;border-radius:9px;
          transition:all .18s;white-space:nowrap;letter-spacing:.01em}
.tab-btn:hover:not(.active){background:rgba(255,255,255,.6);color:#5B21B6}
.tab-btn.active{background:white;color:#7C3AED;box-shadow:0 2px 6px rgba(109,40,217,.18);font-weight:700}
.tab-panel{display:none}
.tab-panel.active{display:block;padding-top:10px}
/* ── Кнопки зума графиков ── */
.zbtn{padding:1px 7px;font-size:var(--wbm-fs-2xs);font-weight:700;background:#F3F4F6;color:#6B7280;
  border:1px solid #E5E7EB;border-radius:5px;cursor:pointer;transition:all .12s;white-space:nowrap}
.zbtn:hover{background:#E5E7EB;color:#374151}
.zbtn-act{background:#7C3AED!important;color:white!important;border-color:#7C3AED!important}
/* ── Легенда типов метрик на почасовом графике ── */
.hml-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:10.5px;
  font-weight:700;border:1.5px solid #E2E8F0;border-radius:5px;cursor:pointer;
  background:#F8FAFC;color:#6B7280;transition:all .12s;white-space:nowrap;user-select:none}
.hml-btn:hover{background:#F1F5F9;border-color:#CBD5E1;color:#374151}
.hml-btn.hml-on{background:#fff;color:#1E293B;border-color:#CBD5E1}
.hml-btn:not(.hml-on){opacity:.45;text-decoration:line-through}
/* ── Monitor 24 строка поиска товара ── */
#mon24-sku-box:focus-within{border-color:#7C3AED!important}
.mon24-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 6px;
  background:#EDE9FE;border:1px solid #C4B5FD;border-radius:5px;font-size:11px;
  font-weight:600;color:#5B21B6;white-space:nowrap}
.mon24-chip button{background:none;border:none;cursor:pointer;font-size:12px;
  color:#8B5CF6;padding:0;line-height:1}
/* ── Mon24 SKU dropdown ── */
.mon24-dd-hint{padding:5px 10px;font-size:10.5px;color:#9CA3AF;border-bottom:1px solid #F3F4F6}
.mon24-dd-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;
  border:none;background:none;cursor:pointer;text-align:left;font-size:12px;
  color:#1E293B;transition:background .1s}
.mon24-dd-item:hover,.mon24-dd-item.sel{background:#F5F3FF}
.mon24-dd-thumb{width:32px;height:42px;border-radius:4px;object-fit:cover;flex-shrink:0;
  border:1px solid #E5E7EB}
.mon24-dd-ph{width:32px;height:42px;border-radius:4px;background:#F1F5F9;display:flex;
  align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.mon24-dd-name{font-size:11.5px;font-weight:600;color:#1E293B}
.mon24-dd-ids{font-size:10px;color:#9CA3AF;margin-top:1px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:7px;margin-bottom:9px}
.kpi-card{background:white;border-radius:10px;padding:10px 12px;
           box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid #F3F4F6}
.kpi-card[title]{cursor:help}
.kpi-hint{font-size:var(--wbm-fs-2xs);color:#C4B5FD;float:right;font-weight:700;margin-left:2px;line-height:1}
/* .kpi-card.logi — убран, logi-карточки теперь единого стиля с остальными */
.kpi-label{font-size:var(--wbm-fs-2xs);font-weight:600;color:#9CA3AF;text-transform:uppercase;
            letter-spacing:.06em;margin-bottom:3px}
.kpi-val{font-size:var(--wbm-fs-lg);font-weight:800;margin-bottom:2px;line-height:1.2}
/* Компактный режим метрик — flex-контейнеры (Monitor 24, Finance) */
#global-kpi-row{display:flex!important;flex-wrap:wrap;gap:0;align-items:stretch;
  background:white;border-radius:10px;border:1px solid #E5E7EB;
  box-shadow:0 1px 3px rgba(0,0,0,.06);padding:4px 0;margin-bottom:9px}
#fin-kpi-row{display:flex!important;flex-wrap:wrap;gap:0;align-items:stretch;
  background:white;border-radius:10px;border:1px solid #E5E7EB;
  box-shadow:0 1px 3px rgba(0,0,0,.06);padding:4px 0;margin-bottom:9px}
#fin-report-kpi{display:flex!important;flex-wrap:wrap;gap:0;align-items:stretch;
  background:white;border-radius:10px;border:1px solid #E5E7EB;
  box-shadow:0 1px 3px rgba(0,0,0,.06);padding:4px 0;margin-bottom:9px}
/* Компактный режим метрик SKU — единый стиль с «Ключевые показатели» (Монитор 24) */
#sku-kpi-row{display:flex!important;flex-wrap:wrap;gap:0;align-items:stretch;
  background:white;border-radius:10px;border:1px solid #E5E7EB;
  box-shadow:0 1px 3px rgba(0,0,0,.06);padding:4px 0;margin-bottom:0}
.card{background:white;border-radius:12px;padding:13px 15px;
       box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid #F3F4F6;margin-bottom:9px}
.card-title{font-size:var(--wbm-fs-xs);font-weight:700;color:#111827;margin-bottom:9px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:7px}
.norm-mini{background:white;border-radius:8px;padding:9px 12px;
            box-shadow:0 1px 3px rgba(0,0,0,.05);border:1px solid #F3F4F6;flex:1}
.norm-title{font-size:var(--wbm-fs-2xs);font-weight:600;color:#9CA3AF;text-transform:uppercase;letter-spacing:.06em}
.tbl{width:100%;border-collapse:collapse;font-size:var(--wbm-fs-xs)}
.tbl th{text-align:left;padding:6px 8px;background:#F9FAFB;border-bottom:2px solid #E5E7EB;
         font-weight:600;color:#6B7280;font-size:var(--wbm-fs-2xs);white-space:nowrap}
.tbl td{padding:6px 8px;border-bottom:1px solid #F9FAFB;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#FAFAFA}
.tbl-label{color:#64748B;white-space:nowrap}
.tbl-bold{font-weight:700;font-size:var(--wbm-fs-sm)}
.tbl-muted{color:#94A3B8}
.badge{display:inline-block;padding:2px 8px;border-radius:var(--wbm-radius-btn);font-size:var(--wbm-fs-2xs);font-weight:700}
.badge-up{background:#DCFCE7;color:#15803D}
.badge-dn{background:#FEE2E2;color:#B91C1C}
.badge-gray{background:#F1F5F9;color:#94A3B8}
.tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:var(--wbm-fs-2xs);font-weight:700}
.tag-blue{background:#DBEAFE;color:#1D4ED8}
.tag-yellow{background:#FEF3C7;color:#D97706}
.tag-red{background:#FEE2E2;color:#DC2626}
.cnt{display:inline-block;padding:2px 8px;border-radius:12px;font-size:var(--wbm-fs-2xs);font-weight:700;margin-left:4px}
.cnt-red{background:#DC2626;color:white}
.cnt-yel{background:#F59E0B;color:white}
/* ── Alert groups ─────────────────────────────────── */
.ag{margin-bottom:0}
.ag-head{font-size:var(--wbm-fs-2xs);font-weight:700;color:var(--wbm-ink-3);text-transform:uppercase;
  letter-spacing:.04em;margin:8px 0 3px;display:flex;align-items:center;gap:3px;
  cursor:pointer;user-select:none;padding:2px 0}
.ag-head:hover{color:var(--wbm-ink-2)}
.ag-cnt{font-size:var(--wbm-fs-2xs);font-weight:700;color:var(--wbm-muted);margin-left:3px}
.ag-toggle{background:none;border:none;cursor:pointer;color:var(--wbm-muted);font-size:var(--wbm-fs-2xs);
  margin-left:auto;padding:0 2px;line-height:1;transition:color .15s}
.ag-toggle:hover{color:var(--wbm-ink-2)}
.ag-body{overflow:hidden;display:flex;flex-direction:column;gap:5px}
.ag-collapsed .ag-body{display:none}
.ag-hidden{display:none!important}
.ag-more{display:block;height:22px;border:none;background:transparent;
  font-size:var(--wbm-fs-2xs);font-weight:700;cursor:pointer;text-align:left;
  padding:0 4px;margin-top:3px;font-family:inherit;line-height:22px;
  color:var(--wbm-ink-3)}
.ag-more:hover{opacity:.75}
.alerts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;align-items:start;padding:4px 0}
#show-dismissed-btn:hover{background:var(--wbm-border);color:var(--wbm-ink-2);border-color:var(--wbm-border-strong)}
.period-btns{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.pbtn{padding:4px 11px;border-radius:var(--wbm-radius-btn);border:1.5px solid #E5E7EB;background:white;
       cursor:pointer;font-size:var(--wbm-fs-2xs);font-weight:600;color:#6B7280;transition:all .15s}
.pbtn:hover{border-color:#7C3AED;color:#7C3AED}
.pbtn.active{background:#7C3AED;border-color:#7C3AED;color:white}
/* Глобальный период */
.global-period-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:7px 14px;background:#FAFAFF;border-bottom:1px solid #EEF2FF;flex-shrink:0}
.gp-label{font-size:var(--wbm-fs-2xs);font-weight:700;color:#7C3AED;white-space:nowrap;margin-right:2px}
.gpbtn{height:28px;padding:0 12px;border-radius:var(--wbm-radius-btn);border:1px solid #E5E7EB;background:white;
  cursor:pointer;font-size:var(--wbm-fs-xs);font-weight:600;color:#6B7280;transition:all .12s;display:inline-flex;align-items:center}
.gpbtn:hover:not(.active){border-color:#64748B;color:#1E293B;background:#F1F5F9}
.gpbtn.active{background:#7C3AED;border-color:#7C3AED;color:white}
/* Чип даты — виден всегда, но без цветового акцента при пресете */
#gp-period-trigger{gap:4px;font-size:var(--wbm-fs-xs);padding:0 10px;min-width:max-content}
#gp-period-trigger-label{font-size:var(--wbm-fs-2xs);font-weight:600;opacity:.9}
.skuf-pbtn{padding:3px 10px;border:1.5px solid #E5E7EB;border-radius:14px;background:#fff;
  color:#374151;font-size:var(--wbm-fs-2xs);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s}
.skuf-pbtn:hover{background:#F5F3FF;border-color:#7C3AED;color:#7C3AED}
.skuf-pbtn.active{background:#7C3AED;border-color:#7C3AED;color:#fff}
.gp-info{margin-left:auto;font-size:var(--wbm-fs-2xs);color:#94A3B8;white-space:nowrap}
.gp-preset-btn{display:block;width:100%;text-align:left;padding:5px 10px;border:none;background:transparent;
  font-size:var(--wbm-fs-2xs);color:#374151;cursor:pointer;border-radius:8px;font-weight:500;transition:background .15s}
.gp-preset-btn:hover{background:#EDE9FE;color:#7C3AED}
.gp-preset-btn.active{background:#7C3AED;color:#fff;font-weight:700}
.gp-cal-day{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--wbm-fs-2xs);border-radius:50%;cursor:pointer;border:none;background:transparent;
  color:#374151;transition:background .12s,color .12s;font-weight:500}
.gp-cal-day:hover{background:#EDE9FE;color:#7C3AED}
.gp-cal-day.weekend{color:#EF4444}
.gp-cal-day.in-range{background:#EDE9FE;border-radius:0;color:#6D28D9}
.gp-cal-day.range-start,.gp-cal-day.range-end{background:#7C3AED;color:#fff;font-weight:700;border-radius:50%}
.gp-cal-day.range-start{border-radius:50% 0 0 50%}
.gp-cal-day.range-end{border-radius:0 50% 50% 0}
.gp-cal-day.range-start.range-end{border-radius:50%}
.gp-cal-day.today-mark{box-shadow:inset 0 0 0 1.5px #7C3AED}
.gp-cal-day.other-month{color:#CBD5E1;cursor:default}
.gp-cal-day.other-month:hover{background:transparent}
/* Инлайн-поля даты — общий стиль */
#gp-date-from:focus,#gp-date-to:focus{border-color:#7C3AED!important}
.muted{color:#9CA3AF}
.label-xs{font-size:var(--wbm-fs-2xs);font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.06em}
#ctip{position:fixed;display:none;background:#FFFFFF;color:#1E293B;padding:10px 14px;
       border-radius:12px;font-size:var(--wbm-fs-xs);line-height:1.7;z-index:9999;pointer-events:none;
       max-width:520px;border:1px solid #E5E7EB;box-shadow:0 10px 32px rgba(15,23,42,.16)}
#img-tip{position:fixed;display:none;background:white;padding:5px;
          border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.25);
          z-index:10000;pointer-events:none;border:1px solid #E5E7EB}
/* Товарная аналитика */
.sku-select-wrap{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sku-select{flex:1;padding:7px 12px;border:1.5px solid #E5E7EB;border-radius:10px;
             font-size:var(--wbm-fs-sm);font-weight:600;background:white;cursor:pointer}
.sku-search{padding:7px 12px;border:1.5px solid #E5E7EB;border-radius:10px;
             font-size:var(--wbm-fs-sm);background:white;width:100%;box-sizing:border-box}
.sku-dd-item{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;
              border-bottom:1px solid #F1F5F9;transition:background 0.1s}
.sku-dd-item:hover{background:#F8F0FF}
.sku-dd-item.selected{background:#F3EEFF;font-weight:600}
.sku-dd-item img{border-radius:6px;object-fit:cover;flex-shrink:0;background:#F3F4F6}
.sku-dd-name{font-size:var(--wbm-fs-xs);font-weight:600;color:#1E293B;line-height:1.3}
.sku-dd-art{font-size:var(--wbm-fs-2xs);color:#94A3B8;margin-top:1px}
.sku-preview{display:flex;gap:10px;align-items:center;margin-bottom:7px;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid #F3F4F6;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.sku-img-box{width:72px;height:96px;border-radius:8px;overflow:hidden;
              border:1px solid #E5E7EB;flex-shrink:0;background:#F8F9FF;
              display:flex;align-items:center;justify-content:center}
.sku-meta{flex:1}
.sku-period-btns{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:9px}
.spbtn{height:28px;padding:0 12px;border-radius:var(--wbm-radius-btn);border:1px solid #E5E7EB;background:white;
        cursor:pointer;font-size:var(--wbm-fs-xs);font-weight:600;color:#6B7280;transition:all .12s;display:inline-flex;align-items:center}
.spbtn:hover:not(.active){border-color:#64748B;color:#1E293B;background:#F1F5F9}
.spbtn.active{background:#7C3AED;border-color:#7C3AED;color:white}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#E2E8F0;border-radius:4px}
/* ── AI-инлайн блок (карточка, не сайдбар) ── */
.ai-inline-block{background:linear-gradient(135deg,#FAF5FF 0%,#EFF6FF 100%);
  border:1px solid #E9D5FF;border-radius:10px;padding:10px 14px;
  margin-bottom:10px;display:flex;align-items:flex-start;gap:10px}
.ai-panel-body{flex:1;min-width:0}
.ai-hint{font-size:var(--wbm-fs-2xs);color:#7C3AED;font-weight:500;line-height:1.4}
.ai-content{font-size:var(--wbm-fs-xs);color:#1E293B;line-height:1.75;margin-top:2px}
.ai-btn{background:#7C3AED;color:white;border:none;border-radius:8px;
  padding:7px 13px;font-size:var(--wbm-fs-2xs);font-weight:600;cursor:pointer;
  white-space:nowrap;flex-shrink:0;transition:background .15s}
.ai-btn:hover{background:#6D28D9}
.ai-btn:disabled{background:#A78BFA;cursor:wait}
/* ── Мобильные кнопки в блоке Спросить AI ── */
.mob-ai-block-btns{display:none}
.mob-ab-btn{display:inline-flex;align-items:center;gap:4px;border:none;border-radius:8px;
  padding:5px 10px;font-size:var(--wbm-fs-2xs);font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:opacity .15s}
.mob-ab-btn:active{opacity:.75}
.mob-ab-alerts{background:#DC2626;color:white}
.mob-ab-ai{background:#7C3AED;color:white}
.mob-ab-cnt{background:white;color:#DC2626;border-radius:8px;
  padding:0 5px;font-size:var(--wbm-fs-2xs);font-weight:800;min-width:16px;text-align:center;
  display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dashFlow{to{stroke-dashoffset:-14}}
.flow-anim{animation:dashFlow 0.9s linear infinite}
.heat-mode-btn{padding:5px 15px;border:none;border-radius:var(--wbm-radius-btn);font-size:var(--wbm-fs-2xs);font-weight:600;cursor:pointer;background:transparent;color:#6B7280;transition:all .2s}
.heat-mode-btn.active{background:#7C3AED;color:white}
.leaflet-tooltip.heat-tip{background:white;border:1px solid #E2E8F0;border-radius:6px;padding:5px 8px;font-size:var(--wbm-fs-2xs);line-height:1.5;box-shadow:0 2px 8px rgba(0,0,0,.12);color:#111827}
.leaflet-tooltip.heat-tip::before{display:none}
#heat-wh-list label:hover{background:#F5F3FF !important}

/* ══════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ LAYOUT (≤ 768px — телефоны Samsung, iPhone и др.)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ LAYOUT (≤ 768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { font-size:var(--wbm-fs-md); height: auto !important; min-height: 100vh !important; overflow-x: hidden; overflow-y: auto; }

  /* [2026-07-04, скриншоты Alex] Топбар — ДВА этажа:
     1-й этаж: бургер + Алерты + заголовок страницы (слева) и компактные кнопки 🤖/📖 (справа);
     2-й этаж: свайп-лента статусов (#topbar-status-strip: диагностика/сервер/наблюдение/
     JOBS/API/Фин.канон/Перераспред.) — не обрезается, попапы fixed/escape-в-body. */
  .topbar { padding: 4px 10px 5px; height: auto; min-height: 44px; gap: 6px;
    row-gap: 3px; flex-wrap: wrap; overflow: hidden; }
  .topbar-logo { font-size:var(--wbm-fs-sm); }
  .topbar-sub, .topbar-date, .tg-timers { display: none; }
  /* Длинный заголовок страницы (напр. «AI-ассистент») не распирает 1-й этаж */
  .topbar-page-title { font-size:var(--wbm-fs-sm); max-width: 32vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
  /* Скрываем не-первостепенные кнопки топбара */
  #auto-refresh-badge { display: none !important; }
  #topbar-diagnostics { display: none !important; }
  /* 1-й этаж, правая часть: только компактные кнопки (иконки без текста).
     [FIX 2026-07-04, Alex — «подними иконки 🌙/🤖/📖 в 1 ряд, не занимай отдельную полоску»]
     .topbar-right раньше был обычным flex-боксом: из-за ленты статусов внутри (flex-basis:100%)
     весь .topbar-right переносился 2-м рядом ЦЕЛИКОМ → иконки падали на отдельную полоску под
     заголовком. display:contents «растворяет» бокс — иконки становятся прямыми детьми .topbar и
     остаются в 1-м ряду рядом с заголовком, а на свой ряд уходит ТОЛЬКО лента статусов
     (#topbar-status-strip: flex-basis:100%; order:99). */
  .topbar-right { display: contents; }
  .tb-btn-label { display: none; }
  #btn-ai-analysis, #topbar-help { padding: 4px 9px; }
  /* [2026-07-04, revert] Топбарный 🤖 «AI разбор дня» (#btn-ai-analysis) НЕ скрываем — это НЕ
     дубль: FAB 🤖 внизу = AI-ЧАТ (общение с ботом), а топбарный = AI-РАЗБОР (страница
     AI-ассистента). Разные функции, оба нужны (уточнение Alex). */
  /* тема 🌙 — тот же компактный размер, отдельным правилом (не меняем селектор выше,
     иначе symbol-diff guard считает старый селектор «удалённым») */
  .wbm-theme-toggle { padding: 4px 9px !important; }
  /* 2-й этаж: лента статусов на всю ширину, свайп */
  #topbar-status-strip { display: flex; align-items: center; gap: 5px;
    flex-basis: 100%; order: 99; min-width: 0;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 1px; }
  #topbar-status-strip::-webkit-scrollbar { display: none; }
  #topbar-status-strip > * { flex-shrink: 0; }
  .refresh-btn, .msg-btn { padding: 4px 10px; font-size:var(--wbm-fs-2xs); }

  /* Shell — вертикальная колонка */
  .shell { flex-direction: column; height: auto; overflow: visible; min-height: calc(100vh - 44px); }

  /* Сайдбар — полностью скрыт из потока (управляется drawer) */
  .sidebar { display: none !important; }

  /* AI-панель — скрыта */
  .ai-panel { display: none !important; }
  #ai-panel-resizer { display: none; }

  /* Основной контент — полная ширина, отступ снизу для FAB */
  .main { min-width: 0; width: 100%; overflow: visible; }
  .main-scroll { overflow-y: visible; padding: 0 8px 80px; }

  /* Таб-бар — горизонтальная прокрутка */
  .tab-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 4px;
    scrollbar-width: none;
    border-radius: 10px;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size:var(--wbm-fs-2xs) !important;
    padding: 5px 10px !important;
  }

  /* Sticky top — статичный на мобиле */
  .sticky-top { position: static; box-shadow: none; }

  /* KPI карточки — 2 в ряд */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Таблицы — горизонтальная прокрутка */
  table { font-size:var(--wbm-fs-2xs); }
  .mob-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ── Resize-ручки в заголовках таблицы юнит-экономики ── */
.fin-th-resizer{position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;
  user-select:none;background:transparent;z-index:1}
.fin-th-resizer:hover,.fin-th-resizer.ftr-active{background:rgba(124,58,237,.35);border-radius:2px}
#fin-body table th{position:relative}
.fdt-resize-handle:hover{background:rgba(8,145,178,.35)!important;border-radius:2px}

  /* FAB кнопки — показываем на мобиле */
  #mob-alerts-fab { display: flex !important; }
  #mob-ai-fab     { display: flex !important; }
  /* ai-inline-block на мобиле — вертикально */
  .ai-inline-block { flex-direction: column; gap: 6px; padding: 8px 10px; }
  .ai-btn { align-self: flex-start; font-size:var(--wbm-fs-2xs); padding: 5px 10px; }
  /* Скрываем AI-блок внутри контента на мобиле (он открывается через FAB) */
  .ai-inline-block { display: none !important; }

  /* Строка поиска товара — переносится на мобиле */
  #sku-header-row { flex-wrap: wrap !important; }
  #sku-header-row > div { width: 100%; }
  #catalog-refresh-btn, #reviews-dl-btn { flex: 1; font-size:var(--wbm-fs-2xs) !important; padding: 6px 6px !important; }
  #sku-header-row button[onclick*="checkWbConnectivity"] { display: none !important; }
  #catalog-refresh-status { order: 99; width: 100%; }

  /* Все таблицы — горизонтальная прокрутка в контейнере, сжатый шрифт */
  .card { overflow-x: auto !important; }
  table { min-width: 0 !important; width: 100%; font-size:var(--wbm-fs-2xs); }
  th, td { white-space: nowrap; padding: 4px 6px !important; }
  /* Юнит-экономика */
  #tab-finance { overflow-x: auto; }
  #tab-finance .fin-table-wrap { overflow-x: auto; }
  /* Товарная аналитика */
  /* #skuf-table-wrap скролл управляется .tbl-scroll внутри .tbl-shell */
  /* Финансы */
  #tab-analytics .card { overflow-x: auto; }
  /* Графики — 100% ширина */
  canvas { max-width: 100% !important; }

  /* Строка периода — убираем лишние элементы чтобы не переполнялась */
  #api-status-pill { display: none !important; }
  #act-log-btn { display: none !important; }
  #gp-custom-range { display: none !important; }
  /* Длинные периоды — скрываем на узком экране */
  #gpbtn-90, #gpbtn-180, #gpbtn-365 { display: none !important; }
  .gp-label { display: none !important; }
  /* Период-бар — горизонтальная прокрутка без переноса */
  .global-period-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 5px 8px;
  }
  .global-period-bar::-webkit-scrollbar { display: none; }
  .gpbtn { font-size:var(--wbm-fs-2xs); padding: 3px 9px; flex-shrink: 0; }
  #gp-info-label { display: none !important; }
}

/* ── FAB (Floating Action Button) — кнопка алертов ── */
#mob-alerts-fab {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 8000;
  align-items: center;
  gap: 7px;
  background: #DC2626;
  color: white;
  border: none;
  border-radius: 28px;
  padding: 12px 18px 12px 14px;
  font-size:var(--wbm-fs-md);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(220,38,38,.45);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
#mob-alerts-fab:active { transform: scale(.95); box-shadow: 0 2px 8px rgba(220,38,38,.4); }
#mob-alerts-fab-count {
  background: white;
  color: #DC2626;
  border-radius: 10px;
  padding: 1px 7px;
  font-size:var(--wbm-fs-xs);
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}

/* ── AI FAB ── */
#mob-ai-fab {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 8000;
  align-items: center;
  justify-content: center;
  background: #7C3AED;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(124,58,237,.4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mob-ai-fab:active { transform: scale(.93); }

/* ── AI Drawer overlay ── */
#mob-ai-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 8500;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── AI Drawer ── */
#mob-ai-drawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: white;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.18);
  flex-direction: column;
  max-height: 85vh;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
#mob-ai-drawer.open { transform: translateY(0); }

/* ── Overlay (backdrop) ── */
#mob-alerts-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 8500;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Drawer (шторка снизу) ── */
#mob-alerts-drawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: white;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.18);
  flex-direction: column;
  max-height: 82vh;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
#mob-alerts-drawer.open { transform: translateY(0); }

/* Ручка шторки */
#mob-drawer-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #F3F4F6;
}
#mob-drawer-handle-bar {
  width: 36px; height: 4px;
  background: #D1D5DB;
  border-radius: 2px;
  margin: 0 auto 8px;
}
#mob-drawer-settings {
  background: #F3F4F6;
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size:var(--wbm-fs-md);
  cursor: pointer;
  color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-right: 6px;
}
#mob-drawer-settings.active {
  background: #EDE9FE;
  color: #7C3AED;
}
#mob-drawer-close {
  background: #F3F4F6;
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size:var(--wbm-fs-lg);
  cursor: pointer;
  color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Содержимое шторки — прокручивается */
#mob-drawer-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px 16px;
}

/* ── Анимация toast-уведомлений ── */
@keyframes toast-in{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Синхронизация финотчётов ── */
.sync-step{padding:2px 8px;border-radius:10px;font-size:var(--wbm-fs-2xs);color:#6B7280;background:#E5E7EB;white-space:nowrap}
.sync-step.active{background:#D1FAE5;color:#065F46;font-weight:700}
.sync-step.done{background:#059669;color:white}
.sync-step.error{background:#FEE2E2;color:#991B1B}
.fin-week-row{display:flex;align-items:center;gap:8px;padding:5px 14px;cursor:pointer;font-size:var(--wbm-fs-xs);color:#374151;transition:background .12s}
.fin-week-row:hover{background:#F9FAFB}
.fin-edit-input{width:80px;padding:3px 7px;border:1.5px solid #D1D5DB;border-radius:8px;font-size:var(--wbm-fs-xs);text-align:right;background:#F9FAFB;outline:none;transition:border .15s}
.fin-edit-input:focus{border-color:#7C3AED;background:#fff}
/* ── Иконка-вопросник → Справочник ── */
.help-q{font-size:var(--wbm-fs-2xs);color:#94A3B8;text-decoration:none;border:1px solid #CBD5E1;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:3px;flex-shrink:0;transition:all .12s;line-height:1}
.help-q:hover{color:#4F46E5;border-color:#4F46E5;background:#EEF2FF}
@keyframes pulse-dot{from{opacity:1;transform:scale(1)}to{opacity:.4;transform:scale(.8)}}

/* ══════════════════════════════════════════════════════════════
   MODERN UI REFRESH — v2.1
   Только добавляет правила, не ломает существующее
   ══════════════════════════════════════════════════════════════ */

/* ── Тело страницы — чуть теплее фон ── */
body { background: #F0EEFF; }

/* ── Топбар — более чёткая тень ── */
.topbar {
  background: white;
  border-bottom: none;
  box-shadow: 0 1px 0 #E5E7EB, 0 2px 12px rgba(124,58,237,.07);
}

/* ── Sticky panel — стеклянный эффект ── */
.sticky-top {
  background: rgba(255,255,255,.97);
  box-shadow: 0 1px 0 #EDE9FE, 0 4px 16px rgba(109,40,217,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Полоска глобального периода ── */
.global-period-bar {
  background: linear-gradient(90deg,#FAFAFF 0%,#F5F3FF 100%);
  border-bottom: 1px solid #EDE9FE;
  padding: 6px 16px;
}

/* ── КНОПКА ТАЙМБАРА — главная кнопка периода ── */
/* Делаем её заметной и современной */
#gp-period-trigger {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  border: none;
  color: white;
  padding: 6px 16px;
  border-radius: var(--wbm-radius-btn);
  font-size:var(--wbm-fs-xs);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(124,58,237,.35), 0 0 0 3px rgba(124,58,237,.12);
  transition: box-shadow .2s, transform .15s;
  letter-spacing: .01em;
}
#gp-period-trigger:hover {
  box-shadow: 0 4px 16px rgba(124,58,237,.45), 0 0 0 4px rgba(124,58,237,.15);
  transform: translateY(-1px);
}
#gp-period-trigger:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(124,58,237,.3); }
#gp-period-trigger #gp-period-trigger-label { color: white; font-weight: 700; }
#gp-period-trigger span[style*="color:#94A3B8"] { color: rgba(255,255,255,.7) !important; }

/* ── Кнопка периода Товарной аналитики — такой же стиль ── */
#skuf-period-trigger {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  border: none;
  color: white;
  padding: 5px 14px;
  border-radius: var(--wbm-radius-btn);
  font-size:var(--wbm-fs-xs);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(124,58,237,.3), 0 0 0 3px rgba(124,58,237,.1);
  transition: box-shadow .2s, transform .15s;
}
#skuf-period-trigger:hover {
  box-shadow: 0 4px 14px rgba(124,58,237,.4), 0 0 0 4px rgba(124,58,237,.14);
  transform: translateY(-1px);
}
#skuf-period-trigger span { color: white !important; }

/* ── Карточки — более современные тени ── */
.card {
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(109,40,217,.06);
  border: 1px solid #F0EEFF;
}
.kpi-card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(109,40,217,.05);
  border: 1px solid #F0EEFF;
  transition: box-shadow .18s, transform .18s;
}
.kpi-card:hover { box-shadow: 0 4px 16px rgba(124,58,237,.13); transform: translateY(-1px); }

/* ── Таблицы — зебра + лучше hover ── */
.tbl thead th {
  background: linear-gradient(0deg,#F3F0FF 0%,#F9F8FF 100%);
  border-bottom: 2px solid #DDD6FE;
  color: #5B21B6;
  font-size:var(--wbm-fs-2xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tbl tbody tr:nth-child(even) td { background: #FAFAFF; }
.tbl tr:hover td { background: #F5F3FF !important; }
/* Hover для JS-рендеримых таблиц (склады, рекомендации и др.) — сохраняет цвета светофора */
table tbody tr:hover { filter: brightness(0.91); cursor: default; }

/* ── Вкладки — активная с градиентом ── */
.tab-btn.active {
  background: white;
  color: #6D28D9;
  box-shadow: 0 2px 8px rgba(109,40,217,.2), 0 0 0 1.5px rgba(124,58,237,.15);
  font-weight: 700;
}
.tab-bar {
  background: linear-gradient(90deg,#EDE9FE 0%,#E9E4FF 100%);
  border-radius: 13px;
  padding: 4px 5px;
}

/* ── Кнопки обновления / действий ── */
.refresh-btn {
  background: linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%);
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
  border-radius: 22px;
  font-size:var(--wbm-fs-xs);
  padding: 5px 16px;
}
.refresh-btn:hover { background: linear-gradient(135deg,#6D28D9 0%,#5B21B6 100%); box-shadow: 0 4px 12px rgba(124,58,237,.4); }

/* ── Пресет-кнопки пикера ── */
.gp-preset-btn {
  padding: 6px 12px;
  border-radius: 9px;
  font-size:var(--wbm-fs-xs);
  transition: background .12s, color .12s, transform .1s;
}
.gp-preset-btn:hover { background: #EDE9FE; color: #6D28D9; transform: translateX(2px); }
.gp-preset-btn.active { background: linear-gradient(135deg,#7C3AED,#6D28D9); color: white; font-weight: 700; transform: none; }

/* ── Скроллбар — тонкий и фиолетовый ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #DDD6FE; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #A78BFA; }

/* ══════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ АДАПТИВ v2 — дополнения
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Период-бар на мобиле: скрыть лейбл, показать только кнопку */
  .global-period-bar { padding: 5px 10px; }
  .gp-label { display: none !important; }
  #gp-period-trigger { min-width: 120px; font-size:var(--wbm-fs-2xs); padding: 5px 12px; }
  #skuf-period-trigger { min-width: 110px; font-size:var(--wbm-fs-2xs); padding: 4px 11px; }

  /* KPI-карточки — всегда 2 в ряд на мобиле */
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .kpi-card { padding: 8px 10px !important; }
  .kpi-val { font-size:var(--wbm-fs-md) !important; }

  /* Карточки — полная ширина, меньше отступ */
  .card { border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; }

  /* card-grid — 2 колонки */
  .card-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }

  /* Таблицы — горизонтальный скролл + маленький шрифт */
  .tbl { font-size:var(--wbm-fs-2xs); }
  .tbl th, .tbl td { padding: 5px 6px; }
  /* Обёртка таблиц в overflow */
  .card > table, .card > .tbl { overflow-x: auto; display: block; max-width: 100%; }

  /* Таб-кнопки — компактнее */
  .tab-btn { font-size:var(--wbm-fs-2xs) !important; padding: 5px 8px !important; }

  /* Пикер календаря — полная ширина, одна колонка */
  #gp-picker-popup, #skuf-picker-popup {
    min-width: unset !important;
    width: 100vw !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  #gp-picker-popup > div:first-child,
  #skuf-picker-popup > div:first-child {
    flex-direction: column !important;
  }
  /* Левая панель пресетов → горизонтальная прокрутка сверху */
  #gp-picker-popup > div:first-child > div:first-child,
  #skuf-picker-popup > div:first-child > div:first-child {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px !important;
    padding: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB;
  }
  #gp-picker-popup .gp-preset-btn,
  #skuf-picker-popup .gp-preset-btn {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-block;
    width: auto !important;
  }
  /* Двухмесячный календарь → одна колонка */
  #gp-picker-popup [style*="display:flex;gap:24px"],
  #skuf-picker-popup [style*="display:flex;gap:24px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #gp-cal-m2, #skuf-cal-m2 { display: none; }
  /* Двойной заголовок — скрываем второй месяц */
  #gp-cal-m2-lbl, #skuf-cal-m2-lbl { display: none; }

  /* Таблица skuf-finance — горизонтальный скролл управляется tbl-scroll */
  #tab-sku-finance table { min-width: 640px; }

  /* Сводная аналитика — убираем переносы в заголовках */
  #skuf-totals { flex-wrap: wrap !important; }
  #skuf-totals > div { flex: 1 1 calc(50% - 8px) !important; min-width: 140px; }
}

/* ============================================================
   ТАБЛИЦЫ КАК КАРТОЧКИ — mobile card layout
   ============================================================ */
@media (max-width: 768px) {
  /* Трансформация таблицы в карточки */
  .tbl-cards-mob thead {
    display: none !important;
  }
  .tbl-cards-mob tbody {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .tbl-cards-mob tbody tr {
    display: block !important;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.09);
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
  }
  .tbl-cards-mob tbody tr:hover {
    box-shadow: 0 2px 8px rgba(124,58,237,.12);
    border-color: #C4B5FD;
  }

  /* Каждая ячейка — строка "label: value" */
  .tbl-cards-mob tbody td {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0 !important;
    border: none !important;
    font-size:var(--wbm-fs-xs);
    line-height: 1.4;
  }
  .tbl-cards-mob tbody td::before {
    content: attr(data-label);
    color: #9CA3AF;
    font-size:var(--wbm-fs-2xs);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Первая ячейка (название артикула) — крупно, без метки */
  .tbl-cards-mob tbody td:first-child {
    font-size:var(--wbm-fs-sm);
    font-weight: 700;
    color: #1E293B;
    border-bottom: 1px solid #F3F4F6 !important;
    padding-bottom: 7px !important;
    margin-bottom: 3px;
    justify-content: flex-start;
  }
  .tbl-cards-mob tbody td:first-child::before {
    display: none;
  }

  /* Вторичные поля — скрыты по умолчанию (без !important — JS переключает inline display) */
  .tbl-cards-mob .mob-td-sec { display: none; }

  /* Ячейка с кнопкой "развернуть" */
  .mob-expand-td {
    display: block !important;
    text-align: center;
    padding: 6px 0 2px !important;
    border: none !important;
  }
  .mob-expand-td::before { display: none !important; }

  .mob-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #7C3AED;
    font-size:var(--wbm-fs-2xs);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--wbm-radius-btn);
    background: #F5F3FF;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-expand-btn:active { background: #EDE9FE; }

  /* Состояние expand/collapse управляется JS через inline style.display */
}

/* ═══════════════════════════════════════════════
   ВКЛАДКА АССОРТИМЕНТ
   ═══════════════════════════════════════════════ */

/* Кнопка-группа (панель фильтров) */
.asg-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: box-shadow .15s, border-color .15s;
  user-select: none;
  white-space: nowrap;
}
.asg-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.09); border-color: #D1D5DB; }
.asg-active { border-width: 2px !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; }

/* Карточка товара (grid) */
.asg-card-item {
  padding: 12px 14px;
  border-bottom: 1px solid #F1F5F9;
  border-right: 1px solid #F1F5F9;
  cursor: pointer;
  transition: background .1s;
  background: #fff;
}
.asg-card-item:hover { background: #F8FAFC; }

/* Старая строка — оставляем для совместимости */
.asg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background .1s;
}
.asg-row:last-child { border-bottom: none; }
.asg-row:hover { background: #F9FAFB; }

/* Мобильная адаптация ассортимента */
@media (max-width: 768px) {
  .asg-card { padding: 4px 8px; gap: 5px; font-size:var(--wbm-fs-2xs); }
  .asg-card-item { padding: 10px 12px; }
  .asg-row { flex-wrap: wrap; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ АДАПТИВ — МОНИТОР24 (основные сетки)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* [FIX] Блок «Воронка + почасовой график: стэк вместо 2 колонок» на #monitor-top-grid
     удалён — этот id не существует в разметке с рефакторинга DOM (см. рабочий эквивалент
     ниже: #mon24-leaders-charts / #mon24-leaders-col / #mon24-lr-resizer). Заголовок графика
     уже переносится через inline flex-wrap:wrap в шаблоне — отдельное правило не нужно. */
  #chart-outer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    cursor: default !important;
  }
  /* Кнопки зума — компактнее */
  .zbtn { padding: 2px 7px !important; font-size:var(--wbm-fs-2xs) !important; }
  #chart-hour-controls span { display: none; }

  /* ── Лента заказов + отмен + выкуп: вертикальный стэк ── */
  /* Сбрасываем inline height:420px;max-height:420px — flex-direction:column из template не помогает без этого */
  #monitor-feeds-grid {
    height: auto !important;
    max-height: none !important;
  }

  /* ── Лидеры и аутсайдеры: 1 колонка + ограничение высоты ── */
  #monitor-leaders-grid {
    grid-template-columns: 1fr !important;
    max-height: 500px;
    overflow-y: auto;
  }
  /* Сброс grid-row:span 2 для колонки рейтинга */
  #leaders-rating-col {
    grid-row: auto !important;
  }
  /* Отступ между блоками топ-10 */
  #monitor-leaders-grid > div {
    padding-bottom: 4px;
  }

  /* ── FAB кнопка — поднять над системной навигацией ── */
  #mob-alerts-fab {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    touch-action: manipulation !important;
  }
  #mob-ai-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    touch-action: manipulation !important;
  }

  /* ── Статистика по дням — сброс min-width для мобильного ── */
  #day-stats-table { min-width: 0 !important; }

  /* ── KPI строка — 2 в ряд ── */
  #global-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }

  /* ── Убрать горизонтальный оверфлоу на всей странице ── */
  body { overflow-x: hidden; }

  /* ── Таб на мобиле — скрывать второстепенные ── */
  #tbtn-finance, #tbtn-seo { display: none !important; }

  /* ── P4-fix: Monitor 24 mobile adaptivity ── */

  /* Лидеры + почасовой график: flex-стек
     [FIX] id обновлён (monitor-top-grid не существует с рефакторинга DOM mon24-DEI) */
  #mon24-leaders-charts {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #mon24-leaders-col {
    width: 100% !important;
    max-width: 100% !important;
  }
  #mon24-lr-resizer {
    display: none !important;
  }
  #leaders-panel-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    flex-shrink: 0 !important;
  }
  /* Почасовой график — фиксированная высота на мобиле */
  #mon24-charts-row > div:first-child {
    min-height: 340px !important;
  }
  #chart-outer {
    min-height: 300px !important;
  }

  /* SKU share под графиком — ограниченная высота */
  #mon24-sku-share {
    flex: 0 0 200px !important;
    max-height: 200px !important;
  }

  /* KPI chips (#global-kpi-row) — горизонтальный скролл вместо 6 строк */
  #global-kpi-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  #global-kpi-row::-webkit-scrollbar { display: none !important; }
  /* Каждый KPI-чип — не сжимать, компактный шрифт */
  #global-kpi-row > div {
    flex-shrink: 0 !important;
    min-width: 90px !important;
    max-width: 140px !important;
    border-right: 1px solid #E5E7EB !important;
    padding: 4px 8px !important;
  }

  /* Кнопки метрик (Прибыль/Выручка/Маржа/ROI...) — горизонтальный скролл */
  #home-earners .wbm-btn,
  #home-earners [data-hmode] {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  /* Вкладки SKU-доли (sss-tab-*) — не переносить на 6 строк */
  #mon24-sku-share-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }
  #mon24-sku-share-tabs::-webkit-scrollbar { display: none !important; }

  /* 🔔 Алерты FAB — не перекрывать ленту, отступ от нижнего края */
  #mob-alerts-fab {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    z-index: 9000 !important;
  }
  /* Ленты на мобиле — не перекрываются FAB */
  #monitor-feeds-grid {
    padding-bottom: 64px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   WBM Token Overrides — Этап 2 редизайна (2026-05-12)
   Эти правила НЕ трогают структуру — только цвета/шрифты через CSS-переменные.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Topbar */
.wbm-root .topbar {
  background: color-mix(in oklab, var(--wbm-surface) 95%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--wbm-border);
  box-shadow: none;
  font-family: var(--wbm-font);
}
.wbm-root .topbar-logo {
  font-family: var(--wbm-font-display);
  font-weight: 800;
  color: var(--wbm-accent);
  letter-spacing: -0.03em;
}
.wbm-root .topbar-sub { color: var(--wbm-ink-3); }
.wbm-root .topbar-date {
  background: var(--wbm-surface-2);
  border-color: var(--wbm-border);
  color: var(--wbm-ink-3);
}

/* Sticky tab container */
.wbm-root .sticky-top {
  background: color-mix(in oklab, var(--wbm-surface) 97%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--wbm-border), 0 4px 16px -4px rgba(20,20,15,0.06);
}

/* Tab bar */
.wbm-root .tab-bar {
  background: var(--wbm-accent-soft);
  border-radius: var(--wbm-radius-sm);
  gap: 2px;
}

/* Tab buttons — сохраняем .tab-btn, добавляем токен-цвета */
.wbm-root .tab-btn {
  font-family: var(--wbm-font);
  font-size:var(--wbm-fs-xs);
  font-weight: 600;
  color: var(--wbm-accent);
  border-radius: 8px;
  letter-spacing: -0.01em;
  transition: all .15s;
}
.wbm-root .tab-btn:hover:not(.active) {
  background: rgba(255,255,255,0.65);
  color: var(--wbm-accent-ink);
}
.wbm-root .tab-btn.active {
  background: var(--wbm-surface);
  color: var(--wbm-accent);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--wbm-accent) 20%, transparent),
              0 0 0 1px color-mix(in oklab, var(--wbm-accent) 12%, transparent);
  font-weight: 700;
}

/* Dark theme adjustments */
.wbm-root.theme-dark .topbar {
  background: color-mix(in oklab, var(--wbm-surface) 90%, transparent);
}
.wbm-root.theme-dark .sticky-top {
  background: color-mix(in oklab, var(--wbm-surface) 92%, transparent);
}
.wbm-root.theme-dark .tab-btn.active {
  background: var(--wbm-surface-2);
}
.wbm-root.theme-dark body,
.wbm-root.theme-dark {
  background: var(--wbm-bg);
}

/* Theme toggle button */
.wbm-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--wbm-border);
  border-radius: 8px;
  background: var(--wbm-surface-2);
  color: var(--wbm-ink-2);
  font-size:var(--wbm-fs-md);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  padding: 0;
}
.wbm-theme-toggle:hover {
  background: var(--wbm-accent-soft);
  border-color: var(--wbm-accent);
  color: var(--wbm-accent);
}
.wbm-theme-toggle .icon-light { display: none; }
.wbm-theme-toggle .icon-dark  { display: block; }
.wbm-root.theme-dark .wbm-theme-toggle .icon-light { display: block; }
.wbm-root.theme-dark .wbm-theme-toggle .icon-dark  { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   WBM Token Overrides — Этап 2b: Dark mode hardening topbar (2026-05-12)
   Все правила под .wbm-root чтобы не трогать гипотетические внешние страницы.
   !important нужен там, где элемент имеет inline style="..." в HTML.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Refresh / Sync button — на токенах (светлая + тёмная) ── */
.wbm-root .refresh-btn {
  background: var(--wbm-accent);
  font-family: var(--wbm-font);
  border-radius: 10px;
  font-size:var(--wbm-fs-xs);
  font-weight: 600;
  transition: background .15s;
}
.wbm-root .refresh-btn:hover { background: var(--wbm-accent-2); }

/* ── Act-log button — на токенах ── */
.wbm-root #act-log-btn {
  background: var(--wbm-surface-2);
  color: var(--wbm-ink-2);
  font-family: var(--wbm-font);
  border-radius: 10px;
}
.wbm-root #act-log-btn:hover {
  background: var(--wbm-accent-soft);
  color: var(--wbm-accent);
}
.wbm-root #act-log-btn.has-err {
  background: var(--wbm-bad-bg) !important;
  color: var(--wbm-bad) !important;
}
.wbm-root #act-log-btn.has-warn {
  background: var(--wbm-warn-bg) !important;
  color: var(--wbm-warn) !important;
}

/* ── gp-info period label ── */
.wbm-root .gp-info { color: var(--wbm-ink-3); }

/* ══ DARK MODE: inline-styled topbar elements ═══════════════════════════════
   !important обязателен — эти элементы имеют background/color в style=""     */

/* Auto-refresh badge */
.wbm-root.theme-dark #auto-refresh-badge {
  background: var(--wbm-surface-2) !important;
  border-color: var(--wbm-border) !important;
  color: var(--wbm-ink-3) !important;
}
.wbm-root.theme-dark #arf-label { color: var(--wbm-ink-3) !important; }
.wbm-root.theme-dark #arf-dot   { background: var(--wbm-ink-3) !important; }

/* API status pill */
.wbm-root.theme-dark #api-status-pill {
  background: var(--wbm-surface-2) !important;
  color: var(--wbm-ink-3) !important;
}

/* gp-info label (has inline color) */
.wbm-root.theme-dark .gp-info { color: var(--wbm-ink-3) !important; }

/* Справочник link */
.wbm-root.theme-dark #topbar-help {
  border-color: color-mix(in oklab, var(--wbm-accent) 55%, transparent) !important;
  background: var(--wbm-accent-soft) !important;
  color: var(--wbm-accent-2) !important;
}

/* Диагностика link */
.wbm-root.theme-dark #topbar-diagnostics {
  border-color: var(--wbm-border-strong) !important;
  background: var(--wbm-surface-2) !important;
  color: var(--wbm-ink-3) !important;
}

/* Live-pulse badge (новые данные) */
.wbm-root.theme-dark #live-pulse-badge {
  background: color-mix(in oklab, #F59E0B 12%, var(--wbm-surface)) !important;
  border-color: rgba(245,158,11,.55) !important;
  color: #FCD34D !important;
}

/* topbar-date (уже в Stage 2, усиливаем для dark) */
.wbm-root.theme-dark .topbar-date {
  background: var(--wbm-surface-2) !important;
  border-color: var(--wbm-border) !important;
  color: var(--wbm-ink-3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   WBM Token Overrides — Этап 4 редизайна
   Period picker + KPI row контейнеры → токены + dark mode
   ═══════════════════════════════════════════════════════════════ */

/* ── Period picker bar ────────────────────────────────────────── */
.wbm-root .global-period-bar {
  background: var(--wbm-surface-2);
  border-bottom: 1px solid var(--wbm-border);
  font-family: var(--wbm-font);
}
.wbm-root .gp-label {
  color: var(--wbm-accent);
  font-family: var(--wbm-font);
  font-weight: 700;
}
.wbm-root .gpbtn {
  height: 28px; padding: 0 12px; border-radius: var(--wbm-radius-btn);
  border-width: 1px; border-color: var(--wbm-border-strong);
  background: var(--wbm-surface);
  color: var(--wbm-ink-2);
  font-family: var(--wbm-font);
  font-size:var(--wbm-fs-xs); font-weight: 600;
  display: inline-flex; align-items: center;
  transition: all .12s;
}
.wbm-root .gpbtn:hover:not(.active) {
  background: var(--wbm-surface-2);
  color: var(--wbm-ink);
  border-color: var(--wbm-border-strong);
}
.wbm-root .gpbtn.active {
  background: var(--wbm-accent);
  border-color: var(--wbm-accent);
  color: #fff;
}

/* ── KPI row контейнеры ───────────────────────────────────────── */
.wbm-root #global-kpi-row {
  background: var(--wbm-surface) !important;
  border: 1px solid var(--wbm-border) !important;
  border-radius: var(--wbm-radius) !important;
  box-shadow: var(--wbm-shadow-1) !important;
}
.wbm-root #fin-kpi-row {
  background: var(--wbm-surface) !important;
  border: 1px solid var(--wbm-border) !important;
  border-radius: var(--wbm-radius) !important;
  box-shadow: var(--wbm-shadow-1) !important;
}

/* ── "Ключевые показатели" label ─────────────────────────────── */
.wbm-root #kpi-section-label {
  color: var(--wbm-ink-3) !important;
  font-family: var(--wbm-font) !important;
  font-size:var(--wbm-fs-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ── Банеры (контейнеры) ─────────────────────────────────────── */
.wbm-root #fin-approx-banner,
.wbm-root #fin-migration-banner {
  border-radius: var(--wbm-radius-sm);
  font-family: var(--wbm-font);
}

/* ─── Dark mode overrides ────────────────────────────────────── */
.wbm-root.theme-dark .global-period-bar {
  background: var(--wbm-surface-2) !important;
  border-bottom-color: var(--wbm-border) !important;
}
.wbm-root.theme-dark .gp-label {
  color: var(--wbm-accent-2) !important;
}
.wbm-root.theme-dark .gpbtn {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border-strong) !important;
  color: var(--wbm-ink-2) !important;
}
.wbm-root.theme-dark .gpbtn:hover:not(.active) {
  border-color: var(--wbm-accent) !important;
  color: var(--wbm-accent-2) !important;
  background: var(--wbm-accent-soft) !important;
}
.wbm-root.theme-dark .gpbtn.active {
  background: var(--wbm-accent) !important;
  border-color: var(--wbm-accent) !important;
  color: #fff !important;
}
.wbm-root.theme-dark #global-kpi-row {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border) !important;
}
.wbm-root.theme-dark #fin-kpi-row {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border) !important;
}
.wbm-root.theme-dark #kpi-section-label {
  color: var(--wbm-ink-3) !important;
}
.wbm-root.theme-dark #fin-approx-banner {
  background: color-mix(in oklab, var(--wbm-warn) 12%, var(--wbm-surface)) !important;
  border-color: color-mix(in oklab, var(--wbm-warn) 35%, transparent) !important;
  color: #FCD34D !important;
}
.wbm-root.theme-dark #fin-migration-banner {
  background: var(--wbm-info-bg) !important;
  border-color: color-mix(in oklab, var(--wbm-info) 35%, transparent) !important;
  color: #93C5FD !important;
}

/* ═══════════════════════════════════════════════════════════════
   WBM Token Overrides — Этап 5 редизайна
   .card · .card-title · .tbl · финансовые панели → токены + dark mode
   ═══════════════════════════════════════════════════════════════ */

/* ── .card ────────────────────────────────────────────────────── */
.wbm-root .card {
  background: var(--wbm-surface);
  border: 1px solid var(--wbm-border);
  border-radius: var(--wbm-radius);
  box-shadow: var(--wbm-shadow-1);
  font-family: var(--wbm-font);
}
.wbm-root .card-title {
  color: var(--wbm-ink);
  font-family: var(--wbm-font);
  font-weight: 700;
}

/* ── .tbl (таблица сводок) ────────────────────────────────────── */
.wbm-root .tbl th {
  background: var(--wbm-surface-2);
  border-bottom-color: var(--wbm-border);
  color: var(--wbm-ink-2);
  font-family: var(--wbm-font);
}
.wbm-root .tbl td {
  border-bottom-color: var(--wbm-border);
  color: var(--wbm-ink);
}
.wbm-root .tbl tr:last-child td { border-bottom: none; }
.wbm-root .tbl tr:hover td {
  background: var(--wbm-accent-soft) !important;
}
.wbm-root .tbl-label { color: var(--wbm-ink-3); }
.wbm-root .tbl-muted { color: var(--wbm-muted); }

/* ── Dark mode: .card ─────────────────────────────────────────── */
.wbm-root.theme-dark .card {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border) !important;
}
.wbm-root.theme-dark .card-title {
  color: var(--wbm-ink) !important;
}

/* ── Dark mode: .tbl ─────────────────────────────────────────── */
.wbm-root.theme-dark .tbl th {
  background: var(--wbm-surface-2) !important;
  border-bottom-color: var(--wbm-border-strong) !important;
  color: var(--wbm-ink-2) !important;
}
.wbm-root.theme-dark .tbl td {
  border-bottom-color: var(--wbm-border) !important;
  color: var(--wbm-ink) !important;
}
.wbm-root.theme-dark .tbl tbody tr:nth-child(even) td {
  background: var(--wbm-surface-2) !important;
}
.wbm-root.theme-dark .tbl tr:hover td {
  background: var(--wbm-accent-soft) !important;
}
.wbm-root.theme-dark .tbl-label { color: var(--wbm-ink-3) !important; }
.wbm-root.theme-dark .tbl-muted { color: var(--wbm-muted) !important; }

/* ── Dark mode: финансовые панели (inline styles) ────────────── */
.wbm-root.theme-dark #fin-sync-panel {
  background: color-mix(in oklab, #059669 12%, var(--wbm-surface)) !important;
  border-color: color-mix(in oklab, #059669 35%, transparent) !important;
  color: #6EE7B7 !important;
}
.wbm-root.theme-dark #fin-recalc-banner {
  background: var(--wbm-info-bg) !important;
  border-color: color-mix(in oklab, var(--wbm-info) 35%, transparent) !important;
  color: #93C5FD !important;
}
.wbm-root.theme-dark #fin-pending-warning {
  background: color-mix(in oklab, var(--wbm-warn) 12%, var(--wbm-surface)) !important;
  border-color: color-mix(in oklab, var(--wbm-warn) 35%, transparent) !important;
  color: #FCD34D !important;
}
.wbm-root.theme-dark #fin-approx-banner-fin {
  background: color-mix(in oklab, var(--wbm-warn) 12%, var(--wbm-surface)) !important;
  border-color: color-mix(in oklab, var(--wbm-warn) 35%, transparent) !important;
  color: #FCD34D !important;
}

/* ── Dark mode: дропдауны финансового таба ───────────────────── */
.wbm-root.theme-dark #fin-weeks-dropdown {
  background: var(--wbm-surface-2) !important;
  border-color: var(--wbm-border-strong) !important;
  box-shadow: var(--wbm-shadow-3) !important;
}
.wbm-root.theme-dark #fin-more-menu {
  background: var(--wbm-surface-2) !important;
  border-color: var(--wbm-border-strong) !important;
  box-shadow: var(--wbm-shadow-3) !important;
}
.wbm-root.theme-dark #fin-weeks-btn {
  background: var(--wbm-surface-2) !important;
  border-color: var(--wbm-border-strong) !important;
  color: var(--wbm-ink-2) !important;
}
.wbm-root.theme-dark #fin-cache-info {
  color: var(--wbm-ink-3) !important;
}

/* ── Dark mode: прогресс-бар синхронизации ───────────────────── */
.wbm-root.theme-dark #fin-sync-bar {
  background: #34D399 !important;
}

/* ── Sku dropdown (shared across tabs) ───────────────────────── */
/* SKU detail responsive layout */
#tab-sku > .card:first-of-type {
  overflow: visible !important;
}
.sku-search-panel {
  position: relative;
  z-index: 30;
  background: #FFFFFF;
  border: 1px solid #EEF2F7;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  box-sizing: border-box;
}
#sku-search-wrap {
  min-width: 240px;
  z-index: 31;
}
#sku-dropdown {
  background: #fff !important;
  opacity: 1 !important;
  top: calc(100% + 6px);
  z-index: 5000 !important;
  backdrop-filter: none !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.22) !important;
}
.sku-kpi-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.sku-kpi-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 5px 14px 6px 10px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #F1F5F9;
  box-sizing: border-box;
}
.sku-kpi-group-title {
  font-size:var(--wbm-fs-2xs);
  font-weight: 700;
  color: #CBD5E1;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.sku-kpi-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  line-height: 1.35;
}
.sku-kpi-label {
  min-width: 0;
  color: #9CA3AF;
  font-size:var(--wbm-fs-2xs);
  overflow-wrap: anywhere;
}
.sku-kpi-value {
  min-width: 0;
  font-size:var(--wbm-fs-2xs);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  #tab-sku > .card:first-of-type {
    display: flex;
    flex-direction: column;
    overflow: visible !important;
  }
  #sku-period-row {
    order: 1;
    width: 100%;
  }
  #sku-header-row {
    order: 2;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 0 !important;
    flex-wrap: wrap;
  }
  #sku-search-wrap {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 1;
    min-width: 0;
  }
  #catalog-refresh-status {
    order: 3;
    flex: 1 1 100%;
  }
  #catalog-refresh-btn,
  #reviews-dl-btn,
  #sku-header-row > button {
    order: 2;
    flex: 1 1 calc(50% - 6px);
    min-width: 126px;
    justify-content: center;
  }
  #sku-dropdown {
    max-height: min(62vh, 420px);
    z-index: 7000 !important;
  }
  #sku-kpi-row {
    overflow: visible !important;
    padding: 0 !important;
  }
  .sku-kpi-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sku-kpi-group {
    padding: 7px 9px;
    border-right: none;
  }
  .sku-kpi-metric {
    grid-template-columns: minmax(0, 1fr) minmax(42px, auto);
    gap: 6px;
  }
  .sku-kpi-group:nth-child(odd) {
    border-right: 1px solid #E5E7EB;
  }
}

.wbm-root.theme-dark #sku-dropdown {
  background: var(--wbm-surface-2) !important;
  border-color: var(--wbm-border-strong) !important;
  box-shadow: var(--wbm-shadow-3) !important;
}
.wbm-root.theme-dark #connectivity-modal > div {
  background: var(--wbm-surface) !important;
  color: var(--wbm-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   WBM Token Overrides — Этап 6 редизайна
   .kpi-card · .badge · .muted · .spbtn · inputs · picker · feeds
   ═══════════════════════════════════════════════════════════════ */

/* ── .kpi-card ────────────────────────────────────────────────── */
.wbm-root .kpi-card {
  background: var(--wbm-surface);
  border: 1px solid var(--wbm-border);
  border-radius: var(--wbm-radius-sm);
  font-family: var(--wbm-font);
}

/* ── .badge ───────────────────────────────────────────────────── */
.wbm-root .badge-up   { background: var(--wbm-good-bg);  color: var(--wbm-good); }
.wbm-root .badge-dn   { background: var(--wbm-bad-bg);   color: var(--wbm-bad); }
.wbm-root .badge-gray { background: var(--wbm-surface-2); color: var(--wbm-ink-3); }

/* ── .muted ───────────────────────────────────────────────────── */
.wbm-root .muted { color: var(--wbm-ink-3); }

/* ── .spbtn (выкуп по периодам в лентах) ─────────────────────── */
.wbm-root .spbtn {
  height: 28px; padding: 0 12px; border-radius: var(--wbm-radius-btn);
  border-width: 1px; border-color: var(--wbm-border-strong);
  background: var(--wbm-surface);
  color: var(--wbm-ink-2);
  font-family: var(--wbm-font);
  font-size:var(--wbm-fs-xs); font-weight: 600;
  display: inline-flex; align-items: center;
  transition: all .12s;
}
.wbm-root .spbtn:hover:not(.active) {
  background: var(--wbm-surface-2);
  color: var(--wbm-ink);
  border-color: var(--wbm-border-strong);
}
.wbm-root .spbtn.active {
  background: var(--wbm-accent);
  border-color: var(--wbm-accent);
  color: #fff;
}

/* ── Inputs / select (глобально) ─────────────────────────────── */
.wbm-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.wbm-root select,
.wbm-root textarea {
  background: var(--wbm-surface);
  border-color: var(--wbm-border-strong);
  color: var(--wbm-ink);
  font-family: var(--wbm-font);
}
.wbm-root input:focus,
.wbm-root select:focus,
.wbm-root textarea:focus {
  outline: none;
  border-color: var(--wbm-accent);
  box-shadow: 0 0 0 3px var(--wbm-accent-soft);
}

/* ── .sku-dd-item, .sku-preview ──────────────────────────────── */
.wbm-root .sku-dd-item:hover { background: var(--wbm-accent-soft); }
.wbm-root .sku-dd-item.selected { background: var(--wbm-accent-soft); }
.wbm-root .sku-dd-name { color: var(--wbm-ink); }
.wbm-root .sku-dd-art  { color: var(--wbm-ink-3); }
.wbm-root .sku-preview {
  background: var(--wbm-surface);
  border-color: var(--wbm-border);
}

/* ── .gp-preset-btn ──────────────────────────────────────────── */
.wbm-root .gp-preset-btn {
  color: var(--wbm-ink-2);
  font-family: var(--wbm-font);
}
.wbm-root .gp-preset-btn:hover {
  background: var(--wbm-accent-soft);
  color: var(--wbm-accent);
}
.wbm-root .gp-preset-btn.active {
  background: var(--wbm-accent-grad);
  color: #fff;
}

/* ─── Dark mode overrides ────────────────────────────────────── */

/* .kpi-card dark */
.wbm-root.theme-dark .kpi-card {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border) !important;
}

/* .muted dark */
.wbm-root.theme-dark .muted { color: var(--wbm-ink-3) !important; }

/* .spbtn dark */
.wbm-root.theme-dark .spbtn {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border-strong) !important;
  color: var(--wbm-ink-2) !important;
}
.wbm-root.theme-dark .spbtn.active {
  background: var(--wbm-ink) !important;
  border-color: var(--wbm-ink) !important;
  color: var(--wbm-bg) !important;
}

/* Inputs dark */
.wbm-root.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.wbm-root.theme-dark select,
.wbm-root.theme-dark textarea {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border-strong) !important;
  color: var(--wbm-ink) !important;
}

/* .sku-dd-item dark */
.wbm-root.theme-dark .sku-dd-item { color: var(--wbm-ink) !important; }
.wbm-root.theme-dark .sku-dd-item:hover { background: var(--wbm-accent-soft) !important; }
.wbm-root.theme-dark .sku-dd-item.selected { background: var(--wbm-accent-soft) !important; }
.wbm-root.theme-dark .sku-dd-name { color: var(--wbm-ink) !important; }
.wbm-root.theme-dark .sku-dd-art  { color: var(--wbm-ink-3) !important; }
.wbm-root.theme-dark .sku-preview {
  background: var(--wbm-surface-2) !important;
  border-color: var(--wbm-border) !important;
}

/* Period picker popup dark */
.wbm-root.theme-dark #skuf-picker-popup,
.wbm-root.theme-dark #gp-picker-popup {
  background: var(--wbm-surface) !important;
  box-shadow: var(--wbm-shadow-3) !important;
}
.wbm-root.theme-dark #skuf-picker-popup > div > div:first-child,
.wbm-root.theme-dark #gp-picker-popup > div > div:first-child {
  background: var(--wbm-surface-2) !important;
  border-right-color: var(--wbm-border) !important;
}

/* Feed-карточки: акцентные рамки в dark */
.wbm-root.theme-dark #monitor-feeds-grid .card[style*="BBF7D0"],
.wbm-root.theme-dark #monitor-feeds-grid .card[style*="border-color:#BBF7D0"] {
  border-color: color-mix(in oklab, var(--wbm-good) 35%, transparent) !important;
}
.wbm-root.theme-dark #monitor-feeds-grid .card[style*="FEE2E2"],
.wbm-root.theme-dark #monitor-feeds-grid .card[style*="border-color:#FEE2E2"] {
  border-color: color-mix(in oklab, var(--wbm-bad) 35%, transparent) !important;
}

/* .sku-search, .sku-select dark */
.wbm-root.theme-dark .sku-search,
.wbm-root.theme-dark .sku-select {
  background: var(--wbm-surface) !important;
  border-color: var(--wbm-border-strong) !important;
  color: var(--wbm-ink) !important;
}

/* skuf inline period bar separator dark */
.wbm-root.theme-dark #skuf-inline-bar {
  border-bottom-color: var(--wbm-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Stage 9 — Nav Sidebar + Home Tab CSS  (2026-05-12)
   Additive — ни один существующий класс не изменён
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout-сдвиг при активном nav sidebar ──────────────────────────────── */
body.wbm-has-nav-sidebar .shell {
  margin-left: 76px;
}
/* topbar is now inside .main — no margin-left needed */

/* ── Nav Sidebar контейнер ──────────────────────────────────────────────── */
#wbm-nav-sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 76px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--wbm-surface);
  border-right: 1px solid var(--wbm-border);
  overflow: hidden;
  transition: width 200ms cubic-bezier(.2,.7,.3,1);
  box-shadow: var(--wbm-shadow-1);
}
#wbm-nav-sidebar:hover,
#wbm-nav-sidebar.nav-expanded {
  width: 252px;
  box-shadow: var(--wbm-shadow-2);
}

/* ── Brand ──────────────────────────────────────────────────────────────── */
.wbm-nav-brand {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-brand {
  padding: 0;
  justify-content: center;
}
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-brand > div {
  display: none;  /* hide "WB монитор / аналитика селлера" text in collapsed state */
}
.wbm-nav-brand-title {
  font-size:var(--wbm-fs-md); font-weight: 700;
  font-family: var(--wbm-font-display);
  letter-spacing: -0.01em; white-space: nowrap;
}
.wbm-nav-brand-sub { font-size:var(--wbm-fs-2xs); color: var(--wbm-ink-3); white-space: nowrap; }

/* ── Cabinet pill ───────────────────────────────────────────────────────── */
.wbm-nav-cabinet { flex-shrink: 0; padding: 0 12px 12px; overflow: hidden; }
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-cabinet {
  padding: 0 0 12px;
  display: flex;
  justify-content: center;
}
.wbm-nav-cabinet-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--wbm-surface-2); border: 1px solid var(--wbm-border);
  cursor: pointer; overflow: hidden;
  transition: background 120ms; white-space: nowrap;
}
.wbm-nav-cabinet-pill:hover { background: var(--wbm-surface); }
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-cabinet-pill {
  padding: 0; background: transparent; border-color: transparent;
  justify-content: center; width: 36px; height: 36px;
}
.wbm-nav-cabinet-avatar {
  width: 24px; height: 24px; border-radius: 8px;
  background: linear-gradient(135deg, var(--wbm-accent), color-mix(in oklab, var(--wbm-accent) 60%, #ec4899));
  color: white; font-size:var(--wbm-fs-2xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px color-mix(in oklab, var(--wbm-accent) 60%, transparent);
}
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-cabinet-avatar {
  width: 32px; height: 32px; border-radius: 10px; font-size:var(--wbm-fs-xs);
}
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-cabinet-text { display: none; }
.wbm-nav-cabinet-name { font-size:var(--wbm-fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbm-nav-cabinet-org  { font-size:var(--wbm-fs-2xs); color: var(--wbm-ink-3); }

/* ── Nav scroll area ────────────────────────────────────────────────────── */
.wbm-nav-groups {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 4px 8px; scrollbar-width: none;
}
.wbm-nav-groups::-webkit-scrollbar { display: none; }
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-groups { padding: 4px 0; }

/* ── Nav group ──────────────────────────────────────────────────────────── */
.wbm-nav-group { margin-bottom: 16px; }
.wbm-nav-group-label {
  font-size:var(--wbm-fs-2xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wbm-ink-3); padding: 8px 12px 4px;
  white-space: nowrap; opacity: 1; transition: opacity 120ms;
}
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-group-label { opacity: 0; }

/* ── Nav items ──────────────────────────────────────────────────────────── */
.wbm-nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; border: none; background: transparent;
  color: var(--wbm-ink-2); font-family: var(--wbm-font);
  font-size:var(--wbm-fs-sm); font-weight: 500; cursor: pointer;
  position: relative; border-radius: 10px;
  transition: background 120ms, color 120ms, box-shadow 120ms;
  white-space: nowrap; text-align: left; padding: 10px 12px;
}
.wbm-nav-item:hover { background: var(--wbm-surface-2); color: var(--wbm-ink); }
.wbm-nav-item[data-active="true"],
.wbm-nav-item.nav-active {
  background: var(--wbm-accent); color: white; font-weight: 600;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--wbm-accent) 70%, transparent);
}
.wbm-nav-item[data-active="true"]:hover,
.wbm-nav-item.nav-active:hover { background: var(--wbm-accent); }
.wbm-nav-icon { flex-shrink: 0; width: 20px; height: 20px; stroke: currentColor; fill: none; }
.wbm-nav-label { flex: 1; }

/* Collapsed: 44x44 icon tiles */
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-item {
  width: 44px; height: 44px; padding: 0;
  border-radius: 12px; justify-content: center; margin: 4px auto;
}
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-icon { width: 22px; height: 22px; }
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-label { display: none; }
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 14px; height: 14px; padding: 0 3px;
  font-size:var(--wbm-fs-2xs); box-shadow: 0 0 0 2px var(--wbm-surface);
}

/* ── Nav badge ──────────────────────────────────────────────────────────── */
.wbm-nav-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--wbm-bad); color: white;
  font-size:var(--wbm-fs-2xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.wbm-nav-badge:empty { display: none; }
.wbm-nav-item.nav-active .wbm-nav-badge { background: rgba(255,255,255,0.28); }

/* ── User pill ──────────────────────────────────────────────────────────── */
.wbm-nav-user {
  padding: 12px; border-top: 1px solid var(--wbm-border);
  flex-shrink: 0; overflow: hidden;
}
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-user {
  padding: 12px 0; display: flex; justify-content: center;
}
.wbm-nav-user-inner { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.wbm-nav-user-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: white; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wbm-nav-user-name { font-size: 12px; font-weight: 600; }
.wbm-nav-user-plan { font-size: 10px; color: var(--wbm-ink-3); }
#wbm-nav-sidebar:not(:hover):not(.nav-expanded) .wbm-nav-user-text { display: none; }

/* ── Скрыть tab-bar когда активен nav sidebar ───────────────────────────── */
body.wbm-has-nav-sidebar .tab-bar { display: none !important; }

/* ── Dark mode nav ──────────────────────────────────────────────────────── */
.wbm-root.theme-dark #wbm-nav-sidebar { background: var(--wbm-surface); border-right-color: var(--wbm-border); }
.wbm-root.theme-dark .wbm-nav-cabinet-pill { background: var(--wbm-surface-2); border-color: var(--wbm-border); }

/* Home Tab layout */
#tab-home { display: none; padding: 24px; flex-direction: column; gap: 16px; }
#tab-home.active { display: flex; }
.wbm-home-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wbm-home-row { display: grid; gap: 16px; }
.wbm-home-row.cols-2   { grid-template-columns: 1fr 1fr; }
.wbm-home-row.cols-3   { grid-template-columns: 1fr 1fr 1fr; }
.wbm-home-row.cols-3-2 { grid-template-columns: 3fr 2fr; }
.wbm-home-row.cols-2-3 { grid-template-columns: 2fr 3fr; }

/* KPI Home card */
.wbm-kpi-home {
  background: var(--wbm-surface); border: 1px solid var(--wbm-border);
  border-radius: var(--wbm-radius); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden; transition: box-shadow 150ms;
}
.wbm-kpi-home:hover { box-shadow: var(--wbm-shadow-2); }
.wbm-kpi-home-label {
  font-size:var(--wbm-fs-2xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wbm-ink-3);
}
.wbm-kpi-home-value {
  font-family: var(--wbm-font-display); font-size: 32px;
  font-weight: 700; line-height: 1; letter-spacing: -0.025em;
}
.wbm-kpi-home-sub { font-size:var(--wbm-fs-xs); color: var(--wbm-ink-3); display: flex; align-items: center; gap: 6px; }
.wbm-kpi-home-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size:var(--wbm-fs-xs); font-weight: 600; padding: 2px 7px; border-radius: 6px;
}
.wbm-kpi-home-delta.up   { background: var(--wbm-good-bg); color: var(--wbm-good); }
.wbm-kpi-home-delta.down { background: var(--wbm-bad-bg);  color: var(--wbm-bad); }
.wbm-kpi-home-delta.flat { background: var(--wbm-surface-2); color: var(--wbm-ink-3); }

/* Sparkline */
.wbm-sparkline { width: 100%; height: 32px; display: block; overflow: visible; }
.wbm-sparkline .spark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wbm-sparkline .spark-fill { stroke: none; opacity: 0.12; }

/* AlertsHero */
.wbm-alerts-hero {
  background: var(--wbm-ink); color: var(--wbm-bg);
  border-radius: var(--wbm-radius); padding: 20px 24px;
  display: flex; align-items: center; gap: 20px;
  cursor: pointer; transition: opacity 120ms;
}
.wbm-alerts-hero:hover { opacity: 0.92; }
.wbm-root.theme-dark .wbm-alerts-hero {
  background: var(--wbm-surface-2); color: var(--wbm-ink);
  border: 1px solid var(--wbm-border);
}
.wbm-alerts-hero-count {
  font-size: 40px; font-weight: 800; font-family: var(--wbm-font-display);
  letter-spacing: -0.03em; line-height: 1; flex-shrink: 0;
}
.wbm-alerts-hero-body { flex: 1; min-width: 0; }
.wbm-alerts-hero-title { font-size:var(--wbm-fs-md); font-weight: 700; margin-bottom: 6px; }
.wbm-alerts-hero-list { display: flex; flex-direction: column; gap: 3px; }
.wbm-alerts-hero-item { font-size:var(--wbm-fs-xs); opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbm-alerts-hero-item.critical { opacity: 1; font-weight: 600; }
.wbm-alerts-hero-arrow { flex-shrink: 0; font-size:var(--wbm-fs-xl); opacity: 0.5; }

/* Greeting */
.wbm-home-greeting-block { margin-bottom: 4px; }
.wbm-home-greeting {
  font-size: 26px; font-weight: 700; font-family: var(--wbm-font-display);
  letter-spacing: -0.02em; line-height: 1.2; color: var(--wbm-ink);
}
.wbm-home-greeting-sub { font-size:var(--wbm-fs-sm); color: var(--wbm-ink-3); margin-top: 4px; }

/* EarnersCard / LosingToday */
.wbm-home-earners-tabs {
  display: inline-flex; background: var(--wbm-surface-2); border-radius: 8px; padding: 3px; gap: 2px;
}
.wbm-home-earners-tab {
  height: 26px; padding: 0 10px; border: none; background: transparent;
  border-radius: 6px; font-size:var(--wbm-fs-xs); font-weight: 600;
  color: var(--wbm-ink-3); cursor: pointer; transition: background 120ms, color 120ms;
}
.wbm-home-earners-tab.active {
  background: var(--wbm-surface); color: var(--wbm-ink); box-shadow: var(--wbm-shadow-1);
}
.wbm-home-sku-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--wbm-border); font-size:var(--wbm-fs-sm);
}
.wbm-home-sku-row:last-child { border-bottom: none; }
.wbm-home-sku-thumb {
  width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
  flex-shrink: 0; background: var(--wbm-surface-2);
}
.wbm-home-sku-name { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbm-home-sku-val { font-weight: 700; flex-shrink: 0; }
.wbm-home-sku-val.good { color: var(--wbm-good); }
.wbm-home-sku-val.bad  { color: var(--wbm-bad); }

/* RatingSummary */
.wbm-rating-stars { color: #F59E0B; letter-spacing: 1px; }
.wbm-rating-score { font-size: 36px; font-weight: 800; font-family: var(--wbm-font-display); letter-spacing: -0.03em; line-height: 1; }

/* Responsive */
@media (max-width: 768px) {
  #wbm-nav-sidebar { display: none; }
  body.wbm-has-nav-sidebar .topbar,
  body.wbm-has-nav-sidebar .shell { margin-left: 0 !important; }
  body.wbm-has-nav-sidebar .tab-bar { display: flex !important; }
  #tab-home { padding: 12px; }
  .wbm-home-top3 { grid-template-columns: 1fr; }
  .wbm-home-row.cols-2,
  .wbm-home-row.cols-3,
  .wbm-home-row.cols-3-2,
  .wbm-home-row.cols-2-3 { grid-template-columns: 1fr; }
}

/* ── Floating AI Chat FAB (Stage 11) ────────────────────────── */
#wbm-fab-ai {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 28px;
  background: linear-gradient(135deg, var(--wbm-accent,#7C3AED), #EC4899);
  border: none; cursor: pointer;
  box-shadow: 0 8px 24px -4px rgba(124,58,237,.5);
  z-index: 900; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: transform .2s, box-shadow .2s;
}
#wbm-fab-ai:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px -4px rgba(124,58,237,.65);
}
#wbm-fab-ai.open { transform: rotate(135deg) scale(1.05); }

#wbm-fab-resizer {
  position: absolute;
  top: 9px; left: 9px;
  width: 22px; height: 22px;
  border-radius: 6px;
  cursor: nwse-resize;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65);
  font-size:var(--wbm-fs-sm); line-height: 1;
  transition: background .15s, color .15s;
  user-select: none;
}
#wbm-fab-resizer:hover,
#wbm-fab-resizer.dragging {
  background: rgba(255,255,255,.22);
  color: #fff;
}
#wbm-floating-ai-panel {
  position: fixed; bottom: 96px; right: 24px;
  width: 360px; height: 480px;
  min-width: 280px; min-height: 320px;
  max-width: min(720px, calc(100vw - 30px));
  max-height: calc(100vh - 120px);
  background: var(--wbm-surface,#fff);
  border-radius: 18px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.25);
  border: 1px solid var(--wbm-border,#E5E7EB);
  display: flex; flex-direction: column;
  z-index: 899; overflow: hidden;
  transform: scale(.92) translateY(16px);
  opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.9,.3,1), opacity .18s;
}
#wbm-floating-ai-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1; pointer-events: auto;
}
.wbm-fab-head {
  padding: 14px 18px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--wbm-accent,#7C3AED), #EC4899);
  color: #fff; display: flex; align-items: center; gap: 10px;
}
.wbm-fab-head-title { font-weight: 700; font-size:var(--wbm-fs-md); line-height: 1.3; }
.wbm-fab-head-sub   { font-size:var(--wbm-fs-2xs); opacity: .85; }
.wbm-fab-close {
  margin-left: auto; background: rgba(255,255,255,.2); border: none;
  border-radius: 8px; width: 28px; height: 28px;
  color: #fff; cursor: pointer; font-size:var(--wbm-fs-lg); line-height: 1; flex-shrink: 0;
}
.wbm-fab-close:hover { background: rgba(255,255,255,.35); }
#wbm-fab-history {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; font-size:var(--wbm-fs-sm);
}
.wbm-fab-input-row {
  flex-shrink: 0; padding: 10px 12px;
  border-top: 1px solid var(--wbm-border,#E5E7EB);
  display: flex; gap: 8px; align-items: center;
}
#wbm-fab-input {
  flex: 1; height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1.5px solid var(--wbm-border,#E5E7EB);
  background: var(--wbm-surface-2,#F9FAFB); color: var(--wbm-ink,#111);
  font-size:var(--wbm-fs-sm); font-family: inherit;
}
#wbm-fab-input:focus { outline: none; border-color: var(--wbm-accent,#7C3AED); }
#wbm-fab-send {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--wbm-accent,#7C3AED); border: none;
  color: #fff; cursor: pointer; font-size:var(--wbm-fs-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#wbm-fab-send:hover { background: #6D28D9; }
/* dark mode */
.wbm-root.theme-dark #wbm-floating-ai-panel {
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.55);
}
/* mobile: скрыть desktop FAB, оставить mob-ai-fab */
@media (max-width: 768px) {
  /* Desktop FAB-кнопка скрыта на мобиле — используется mob-ai-fab */
  #wbm-fab-ai { display: none !important; }
  /* Панель чата на мобиле — полноширинная (открывается через mob-ai-fab) */
  #wbm-floating-ai-panel {
    bottom: 0 !important; right: 0 !important; left: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 85vh !important; max-height: 85vh !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 9100 !important;
  }
}

/* ── Stage 12: ai-panel → overlay, FAB → real chat ──────────────── */

/* ai-panel: фиксированный оверлей справа (скрыт по умолчанию) */
.ai-panel {
  position: fixed !important;
  right: -340px !important;
  top: var(--topbar-h, 48px) !important;
  bottom: 0 !important;
  width: 320px !important;
  z-index: 200 !important;
  background: #fff !important;
  box-shadow: -4px 0 24px rgba(0,0,0,.18) !important;
  transition: right .25s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
}
.ai-panel.wbm-open {
  right: 0 !important;
}
/* скрыть чат-секцию и ресайзер внутри ai-panel (оба переехали) */
.ai-panel #ai-chat-section { display: none !important; }
.ai-panel #ai-chat-resizer  { display: none !important; }

/* #ai-chat-section внутри FAB-панели — растягивается на всю высоту */
#wbm-floating-ai-panel #ai-chat-section {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-top: none !important;
}
#wbm-floating-ai-panel #ai-chat-section .ai-chat-history {
  flex: 1 !important;
  overflow-y: auto !important;
}
#wbm-floating-ai-panel #ai-chat-section .ai-chat-head {
  flex-shrink: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--wbm-border,#E5E7EB);
  display: flex; align-items: center; gap: 6px;
  font-size:var(--wbm-fs-xs); font-weight: 600; color: var(--wbm-ink-2,#374151);
}
#wbm-floating-ai-panel #ai-chat-section .ai-chat-input-row {
  flex-shrink: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--wbm-border,#E5E7EB);
  display: flex; gap: 8px; align-items: flex-end;
}
#wbm-floating-ai-panel #ai-chat-section .ai-chat-ta {
  flex: 1;
  border-radius: 10px;
  border: 1.5px solid var(--wbm-border,#E5E7EB);
  background: var(--wbm-surface-2,#F9FAFB);
  font-size:var(--wbm-fs-sm); font-family: inherit;
  padding: 6px 10px; resize: none;
}
#wbm-floating-ai-panel #ai-chat-section .ai-chat-ta:focus {
  outline: none; border-color: var(--wbm-accent,#7C3AED);
}
#wbm-floating-ai-panel #ai-chat-section .ai-chat-send {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--wbm-accent,#7C3AED); border: none;
  color: #fff; cursor: pointer; font-size:var(--wbm-fs-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* прокси-элементы FAB больше не нужны */
#wbm-fab-history   { display: none !important; }
.wbm-fab-input-row { display: none !important; }

/* кнопка «AI разбор дня» в topbar */
#btn-ai-analysis {
  white-space: nowrap;
  padding: 5px 13px;
  font-size:var(--wbm-fs-xs);
  font-weight: 700;
  cursor: pointer;
  border: none;
  border-radius: var(--wbm-radius-btn);
  background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(124,58,237,.35);
  transition: opacity .15s, box-shadow .15s;
}
#btn-ai-analysis:hover {  opacity: .85;
  box-shadow: 0 4px 16px rgba(124,58,237,.45);
}

/* ── UE table: sticky thead ─────────────────────────────────────────────── */
/* Constrain shell height so .tbl-scroll becomes the vertical scroll container */
/* Heights: 48px topbar + 42px tab-bar + 10px padding + 52px ai-panel + 52px ue-toolbar + 6px gap */
#ue-tbl-shell {
  max-height: calc(100vh - 210px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   УНИФИЦИРОВАННЫЕ КЛАССЫ ДИЗАЙН-СИСТЕМЫ
   Единый источник истины — не дублировать в JS-модулях
   ════════════════════════════════════════════════════════════ */

/* Общий тулбар (фильтры/кнопки над таблицей или секцией) */
.wbm-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--wbm-surface);
  border-bottom: 1px solid var(--wbm-border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.wbm-toolbar-gap { flex: 1; }

/* Заголовок секции (над карточкой, над таблицей) */
.wbm-section-head {
  font-size:var(--wbm-fs-2xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wbm-ink-3);
  margin: 0 0 8px;
}

/* Универсальная панель (карточка с хедером) */
.wbm-panel {
  background: var(--wbm-surface);
  border: 1px solid var(--wbm-border);
  border-radius: var(--wbm-radius-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wbm-panel-head {
  padding: var(--wbm-pad-sm) 14px;
  border-bottom: 1px solid var(--wbm-border);
  display: flex; align-items: center; gap: 8px;
  font-size:var(--wbm-fs-xs); font-weight: 700; color: var(--wbm-ink-2);
  flex-shrink: 0;
}
.wbm-panel-body {
  flex: 1; overflow-y: auto;
  padding: var(--wbm-pad-sm) 12px;
}

/* ═══════════════════════════════════════════════════════
   Sidebar v2 — PinnedAlertsPanel
   ═══════════════════════════════════════════════════════ */

/* Resize handle — right edge of sidebar */
#sidebar-resizer {
  position: absolute;
  top: 0; right: -3px;
  width: 6px; height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background .15s;
}
#sidebar-resizer:hover,
#sidebar-resizer.dragging {
  background: var(--wbm-accent);
  opacity: .35;
}
/* elastic layout: sidebar is in-flow flex item (no position:fixed) */

/* Sidebar head rows */
.sb-head-row1 {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 3px;
}
.sb-title {
  font-size:var(--wbm-fs-sm); font-weight: 700; color: var(--wbm-ink);
  flex-shrink: 0;
}
.sb-counters {
  display: flex; align-items: center; gap: 4px;
  flex: 1; flex-wrap: wrap;
}
.sb-head-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.sb-dismissed-btn {
  font-size:var(--wbm-fs-2xs);
}

.sb-head-row2 {
  padding: 0 10px 4px;
}
.sb-subtitle {
  font-size:var(--wbm-fs-2xs); color: var(--wbm-ink-3);
}

/* Filter chips rows */
.sb-filter-chips {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px 4px;
  flex-wrap: wrap;
  border-top: 1px solid var(--wbm-border);
}
.sb-filter-cats {
  border-top: none;
  padding-top: 0;
  padding-bottom: 8px;
}

.sb-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--wbm-radius-btn);
  font-size:var(--wbm-fs-2xs); font-weight: 600;
  border: 1px solid var(--wbm-border);
  background: var(--wbm-surface);
  color: var(--wbm-ink-2);
  cursor: pointer; white-space: nowrap;
  transition: all .12s;
  flex-shrink: 0;
}
.sb-chip:hover { background: var(--wbm-surface-2); }
.sb-chip.active {
  background: var(--wbm-ink); color: var(--wbm-bg);
  border-color: var(--wbm-ink);
}
.sb-chip.bad.active  { background: var(--wbm-bad);  color: #fff; border-color: var(--wbm-bad); }
.sb-chip.warn.active { background: var(--wbm-warn); color: #fff; border-color: var(--wbm-warn); }
.sb-chip.good.active { background: var(--wbm-good); color: #fff; border-color: var(--wbm-good); }
/* Sidebar alerts: compact grid minmax=160px (design FloatingAlerts) */
#alerts-container .alerts-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px!important}
/* Category chip dots & active colors (by design/app-v5.jsx) */
.sb-chip-dot{display:inline-block;width:6px;height:6px;border-radius:3px;flex-shrink:0;transition:background .12s}
.sb-chip[data-cat="finance"].active   { background:#2563EB; color:#fff; border-color:#2563EB; }
.sb-chip[data-cat="logistics"].active { background:#D97706; color:#fff; border-color:#D97706; }
.sb-chip[data-cat="reviews"].active   { background:#7C3AED; color:#fff; border-color:#7C3AED; }
.sb-chip.active .sb-chip-dot          { background:#fff!important; }

/* Archive section */
.alert-archive-wrap {
  border-top: 1px solid var(--wbm-border);
  margin-top: 6px;
}
.alert-archive-toggle {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 8px;
  cursor: pointer;
  font-size:var(--wbm-fs-2xs); font-weight: 700;
  color: var(--wbm-ink-3);
  text-transform: uppercase; letter-spacing: .05em;
  user-select: none;
}
.alert-archive-toggle:hover { color: var(--wbm-ink-2); }

/* When NOT pinned: sidebar collapses on small viewports */
@media (max-width: 900px) {

/* GSB — в потоке; body{height:100vh;overflow:hidden} гарантирует layout:
   shell сжимается когда GSB появляется → topbar ниже GSB естественно. */
#format-alert-banner {
  position: fixed !important;
  top: var(--topbar-h, 48px);
  left: 76px;
  right: 0;
  z-index: 197;
  box-sizing: border-box;
}
}

/* gsb-reserve удалён: баннер — обычный блок в потоке (body=flex-column, .shell=flex:1),
   резервирование высоты через --gsb-h больше не нужно (structural fix). */

/* mobile burger nav */
.wbm-burger{display:none;align-items:center;justify-content:center;width:38px;height:32px;padding:0;
  border:1.5px solid var(--wbm-border);border-radius:var(--wbm-radius-btn);background:var(--wbm-surface);
  color:var(--wbm-ink);cursor:pointer;flex-shrink:0}
.wbm-burger svg{width:20px;height:20px}
#mob-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;display:none}
#mob-nav-drawer{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:330px;z-index:1201;
  background:var(--wbm-surface);box-shadow:2px 0 28px rgba(0,0,0,.32);display:none;flex-direction:column;
  transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.3,1);overflow:hidden}
#mob-nav-drawer.open{transform:translateX(0)}
.mob-nav-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--wbm-border);flex-shrink:0}
.mob-nav-logo{width:28px;height:28px;border-radius:8px;object-fit:cover;flex-shrink:0}
.mob-nav-title{font-weight:800;font-size:var(--wbm-fs-md);color:var(--wbm-ink)}
.mob-nav-x{margin-left:auto;background:transparent;border:none;font-size:24px;line-height:1;color:var(--wbm-ink-3);cursor:pointer;width:32px;height:32px;flex-shrink:0}
.mob-nav-scroll{flex:1;overflow-y:auto;padding:8px 8px 28px;-webkit-overflow-scrolling:touch}
.mob-nav-cabinet-wrap{padding:10px 12px 14px;margin-bottom:6px;border-bottom:1px solid var(--wbm-border)}
.mob-nav-cabinet-wrap .wbm-nav-cabinet-pill{cursor:pointer;width:100%}
.mob-nav-grp{font-size:var(--wbm-fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--wbm-ink-3);padding:12px 12px 4px}
.mob-nav-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:none;background:transparent;
  border-radius:10px;cursor:pointer;font-size:var(--wbm-fs-md);font-weight:500;color:var(--wbm-ink);text-align:left;font-family:inherit}
.mob-nav-row:hover,.mob-nav-row.active{background:var(--wbm-accent-soft);color:var(--wbm-accent)}
.mob-nav-row .wbm-nav-icon{width:22px;height:22px;flex-shrink:0;stroke:currentColor;fill:none}
.mob-nav-row .mob-nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--wbm-bad);color:#fff;font-size:var(--wbm-fs-2xs);font-weight:700;align-items:center;justify-content:center}
@media (max-width: 768px){
  .wbm-burger{display:inline-flex}
  body.wbm-has-nav-sidebar .tab-bar{display:none !important;}
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT FIXES (2026-06-08)
   Исправления адаптивности: карта, SEO, KPI-строка, таблицы
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Карта (tab-map): стек вместо flex-row, карта вверху ── */
  #tab-map > div {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  #tab-map > div > div:first-child {
    height: 55vw !important;
    min-height: 240px !important;
    max-height: 320px !important;
    width: 100% !important;
  }
  #tab-map > div > div:last-child {
    width: 100% !important;
    border-left: none !important;
    border-top: 1.5px solid var(--wbm-border, #E5E7EB) !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  /* ── SEO: 260px+1fr → одна колонка ── */
  #tab-seo > div > div[style*="260px"],
  #tab-seo div[style*="grid-template-columns"][style*="260px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── KPI-строка (global-kpi-row): KPI-группы по 2 в ряд ── */
  #global-kpi-row > div > div {
    flex: 0 0 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-right: none !important;
    border-bottom: 1px solid var(--wbm-border, #E5E7EB);
  }
  /* Убираем border-bottom у последних двух */
  #global-kpi-row > div > div:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  /* Правая граница у нечётных (левая колонка) */
  #global-kpi-row > div > div:nth-child(odd) {
    border-right: 1px solid var(--wbm-border, #E5E7EB) !important;
  }

  /* ── JS-модули: таблицы с фиксированными min-width → скролл ── */
  #tab-fulfillment .card,
  #tab-redist .card,
  #tab-abcxyz .card,
  #tab-warehouses .card,
  #tab-delivery .card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Тbl-scroll внутри tbl-shell: снимаем фиксированную ширину */
  #tab-fulfillment .tbl-scroll,
  #tab-redist .tbl-scroll,
  #tab-abcxyz .tbl-scroll,
  #tab-warehouses .tbl-scroll,
  #tab-delivery .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── SKU Finance inline bar: перенос на мобиле ── */
  #skuf-inline-bar { flex-wrap: wrap !important; }

  /* ── Сайдбар алертов на мобиле: кнопки FAB рядом, не поверх друг друга ── */
  #mob-alerts-fab {
    right: 16px !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mob-ai-fab {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
  }

  /* ── Чат-панель на мобиле: полноширинный bottom-sheet ── */
  #wbm-floating-ai-panel.open {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Убираем ресайзер (нет смысла на мобиле) */
  #wbm-fab-resizer { display: none !important; }

  /* ── Остатки (tab-stocks): 2-кол → 1-кол ── */
  #tab-stocks > div[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Аналитика (tab-analytics): 3-кол и 2-кол → 1-кол ── */
  #tab-analytics > div[style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #tab-analytics > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Финансы KPI (fin-report-kpi): JS ставит flex-wrap:nowrap → override ── */
  #fin-report-kpi {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  #fin-report-kpi > div {
    flex: 0 0 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-right: none !important;
    border-bottom: 1px solid var(--wbm-border, #E5E7EB);
  }
  #fin-report-kpi > div:nth-child(odd) {
    border-right: 1px solid var(--wbm-border, #E5E7EB) !important;
  }
  #fin-report-kpi > div:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  /* ── Ассортимент: плитки групп → ровная сетка 2 в ряд ──
     minmax(0,1fr): колонка 1fr не может сжаться ниже min-content плитки
     (описание с max-width:190px даёт ~242px/плитку → 512px > 412px экрана,
     блок фильтров выпадал за ширину страницы); minmax(0,·) разрешает сжатие,
     текст внутри уходит в ellipsis */
  #asg-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  #asg-bar .asg-card {
    white-space: normal !important;
    flex: unset !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ── Карточка товара: график+лента → 1 колонка ── */
  #tab-sku div[style*="3fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  /* ── Карточка товара: остатки+логистика+пополнение → 1 колонка ── */
  #tab-sku div[style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
/* ── Карточка товара: Остатки/Логистика/Рекомендации — стиль Монитор24:
   цветная шапка-бар (разные цвета) + таблица на всю ширину + без двойной рамки ── */
.sku-wh-card{ overflow:hidden; }
.sku-wh-card > .card-title{
  margin:-13px -15px 9px; padding:8px 14px;
  border-bottom:2px solid currentColor;
  font-size:var(--wbm-fs-xs); font-weight:800;
  display:flex; align-items:center; gap:6px;
}
.sku-wh-card--stocks  > .card-title{ color:#047857; background:#ECFDF5; }
.sku-wh-card--logi    > .card-title{ color:#0E7490; background:#ECFEFF; }
.sku-wh-card--restock > .card-title{ color:#6D28D9; background:#F5F3FF; }
/* таблица растягивается на всю ширину карточки (перебиваем table.tbl{width:max-content}) */
.sku-wh-card table.tbl{ width:100% !important; }
.sku-wh-card .tbl-shell{ border:none !important; box-shadow:none !important; border-radius:0 !important; background:transparent !important; }
.sku-wh-card .tbl-scroll{ max-height:260px; }
.sku-wh-card > input{ width:100%; box-sizing:border-box; }

/* ── Карточка товара: лёгкая тень у карточек отзыва (как на вкладке «Отзывы») ── */
#sku-reviews-content .wbm-card{ box-shadow:var(--wbm-shadow-1); }

/* ════════════════════════════════════════════════════════════
   СТАНДАРТ: Flush-header cards — цветная шапка от края до края
   Используй класс card-fh на .card когда весь контент карточки
   занимает скролл-зону (ленты заказов/выкупов/отмен/выкупа).
   ════════════════════════════════════════════════════════════ */
.card-fh {
  padding: 0 !important;
}
.card-fh > .card-title {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Лидеры — сегодня: цветная шапка через негативные отступы ──
   card сохраняет padding для контента, шапка выходит на края.   */
.card-leaders > .card-title {
  margin: -13px -15px 9px;
  padding: 9px 14px;
  background: #D97706;  /* золотой — amber-600 */
  color: #fff;
  border-radius: 0;
}

/* [refactor] Top-10 grid: prevent 1fr columns from expanding to min-content of inner table */
#monitor-leaders-grid > div {
  min-width: 0;
  overflow: hidden;
}

/* ── Монитор 24ч: предотвращаем непропорциональное масштабирование шрифтов ── */
#mon24-leaders-charts,
#monitor-feeds-grid,
#chart-inner,
#hourly-chart,
#yesterday-hourly-chart,
#daily-chart {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size:var(--wbm-fs-sm); /* фиксированный базовый размер */
}
#hourly-chart *,
#yesterday-hourly-chart *,
#daily-chart * {
  font-size: inherit; /* наследуем, не rem/em */
}

/* Лидеры: скроллбар резервирует место, не перекрывает цифры */
#funnel-container > div {
  scrollbar-gutter: stable;
}

/* monitor-feeds-grid: разрыв снизу перед следующим блоком */
#monitor-feeds-grid {
  margin-bottom: 9px;
}

/* P1-fix: гарантируем минимальную высоту почасового графика */
#chart-outer {
  min-height: 120px;
}

/* Ленты Monitor 24: таблица внутри — горизонтальный скролл */
#orders-feed table,
#sales-feed table,
#cancels-feed table,
#returns-feed table {
  min-width: 320px;
}

/* P3-fix: прямые родители лент — жёсткий скролл, не растём в бесконечность */
#orders-feed,
#sales-feed,
#cancels-feed,
#returns-feed {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: auto;
}
/* Desktop: ленты внутри фиксированной #monitor-feeds-grid (420px) — max-height не нужен,
   но задаём как страховку если flex-chain сломан */
@media (min-width: 901px) {
  #orders-feed,
  #sales-feed,
  #cancels-feed,
  #returns-feed {
    max-height: 360px;
  }
}
.mf-col > .card {
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: ленты на всю ширину, вертикальный стек */
@media (max-width: 900px) {
  #monitor-feeds-grid {
    flex-direction: column !important;
    height: auto !important;
    min-height: unset !important;
  }
  .mf-col {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mf-col > .card {
    height: 280px !important;
    overflow-x: auto !important;
  }
  .mf-resizer {
    display: none !important;
  }
  /* Resize-границы Лидеры/Доля-артикулов на мобиле скрыты
     [FIX] id обновлены (leaders-chart-resizer / monitor-top-grid не существуют
     с рефакторинга DOM mon24-DEI). Стек графиков (доля артикулов) обрабатывается
     отдельно ниже, в блоке "fix(mobile): Monitor 24 — новая структура". */
  #mon24-lr-resizer,
  #mon24-chart-share-resizer {
    display: none !important;
  }
  #mon24-leaders-charts {
    flex-direction: column !important;
  }
  #mon24-leaders-col {
    width: 100% !important;
    max-width: 100% !important;
  }
  #leaders-panel-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
  }
}

/* ── Monitor 24: SKU share chart scrollbar ── */
#mon24-sku-share-chart {
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
}
#mon24-sku-share-chart::-webkit-scrollbar {
  width: 4px;
}
#mon24-sku-share-chart::-webkit-scrollbar-track {
  background: transparent;
}
#mon24-sku-share-chart::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   fix(mon24): P1/P3/P4 layout fixes
   ══════════════════════════════════════════════════════════════ */

/* P1 — Hourly chart: гарантируем читаемую высоту (≥140px) */
#chart-outer {
  min-height: 140px;
}
/* [FIX] Правило "фиксируем высоту карточки графика" на #monitor-top-grid удалено —
   id не существует с рефакторинга DOM; эквивалент (min-height:420px) уже задан inline
   на обеих карточках #monitor-charts-row в шаблоне (report_template.html). */
/* mon24-charts-row уже flex:1 1 0 — гарантируем минимальную высоту ряда */
#mon24-charts-row {
  min-height: 140px;
}

/* P3 — Feed scroll cap: ограничиваем рост лент (overflow уже есть, cap на div с overflow) */
/* Внутренние скролл-зоны лент (flex:1;min-height:0;overflow-y:auto) */
#orders-feed,
#sales-feed,
#cancels-feed,
#returns-feed {
  max-height: 360px;
  overflow-y: auto;
}
/* Обёртки mf-col уже имеют overflow:hidden + высота ограничена monitor-feeds-grid height:420px */
/* Дополнительный фиксатор через .wbm-feed-table-wrap если в JS создаётся такой класс */
.wbm-feed-table-wrap {
  max-height: 360px;
  overflow-y: auto;
}

/* P4 — Mobile: Monitor 24 adaptivity fixes */
@media (max-width: 768px) {
  /* Карточка-контейнер графика: сброс фиксированной высоты
     [FIX] id обновлён (monitor-top-grid не существует); обе карточки графика
     сейчас — прямые дети #monitor-charts-row (см. также блок ниже
     "fix(mobile): Monitor 24 — новая структура", который стекает их в колонку —
     без сброса min-height:420px inline они не сжались бы до мобильного размера). */
  /* :not(#mon24-sku-share-card) — та карточка получает свою фиксированную мобильную
     высоту (280px) в блоке "fix(mobile): Monitor 24 — новая структура" ниже; не переопределяем. */
  /* [FIX 2026-07-05, Alex — «график не помещается, окошко должно быть выше»] Было
     min-height:200px — сам SVG графика имеет ФИКСИРОВАННУЮ высоту 314px (var H=314 в
     02_chart.js), а chart-outer ниже был зажат max-height:260px + overflow-y:hidden →
     нижняя часть графика (там растут бары — они рисуются снизу вверх от базовой линии)
     обрезалась, видна была только пустая верхняя часть. Подняли min-height карточки и
     max-height chart-outer выше высоты SVG (314px), чтобы график помещался целиком. */
  #monitor-charts-row > .card:not(#mon24-sku-share-card) {
    height: auto !important;
    min-height: 440px !important;
  }
  /* Гарантируем читаемую высоту chart-outer на мобиле — max-height (340px) больше
     фиксированной высоты SVG (314px), бары больше не обрезаются снизу. */
  #chart-outer {
    min-height: 300px !important;
    max-height: 340px !important;
    overflow-y: hidden !important;
  }
  /* SKU share chart — компактная высота под графиком */
  #mon24-sku-share {
    flex: 0 0 160px !important;
  }
  /* Кнопки метрик (Прибыль/Выручка/...) — 2 ряда максимум */
  #mon24-sku-share-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  #mon24-sku-share-tabs::-webkit-scrollbar { display: none; }
  /* KPI chips: не превышать 2 строки */
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  /* Алерты FAB: не перекрывать ленты — сдвигаем выше */
  #mob-alerts-fab {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Ленты на мобиле — не ограничены жёсткой высотой, скролл внутри */
  #orders-feed,
  #sales-feed,
  #cancels-feed,
  #returns-feed {
    max-height: 200px !important;
  }
  /* Зум-кнопки на мобиле: скрыть (нет смысла) */
  #chart-hour-controls,
  #chart-zoom-label,
  #hourly-metric-legend .hml-btn {
    font-size: var(--wbm-fs-2xs) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   feat(ui): inline metric tooltips + asterisk for approx data
   ══════════════════════════════════════════════════════════════ */

/* Метрика с подсказкой */
.wbm-metric {
  cursor: help;
  text-decoration: none;
}

/* Всплывающий тултип метрики */
#wbm-metric-tip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  background: #fff;
  color: #111827;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.55;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  display: none;
}
#wbm-metric-tip.visible { display: block; }
#wbm-metric-tip .tip-title { font-weight: 700; font-size: 13px; margin-bottom: 5px; color: #111827; }
#wbm-metric-tip .tip-formula { font-family: monospace; font-size: 11px; color: #D97706; margin-bottom: 4px; }
#wbm-metric-tip .tip-desc { color: #374151; }
#wbm-metric-tip .tip-example { margin-top: 5px; font-size: 11px; color: #6B7280; font-style: italic; }

/* Маркер приближённых данных */
.wbm-approx {
  color: var(--wbm-warn, #F59E0B);
  font-size: 0.85em;
  vertical-align: super;
  font-weight: 700;
  cursor: help;
}
.wbm-approx::before { content: '*'; }

/* Легенда приближённых данных */
.wbm-approx-legend {
  font-size: 11px;
  color: var(--wbm-ink-3, #94A3B8);
  margin-top: 4px;
  font-style: italic;
}
.wbm-approx-legend::before { content: '* '; color: var(--wbm-warn, #F59E0B); font-weight: 700; }
/* ════════════════════════════════════════════════════════════
   fix(mobile): URGENT — Monitor 24 real-selector overrides
   После PR #32 KPI overlap / leaders infinite-scroll остались.
   Этот блок — последний в файле, поэтому перебивает все прежние
   правила (cascade-by-order) без вопросов специфичности.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── KPI row: исправление overlap-каши ──
     Структура от JS: #global-kpi-row > inner-wrapper(flex) > KPI-cards.
     Прежние правила ставили inner-wrapper max-width:140px → 6-8 карточек
     паковались в 140px колонку → текст с white-space:nowrap наезжал.
     Здесь: горизонтальный scroll отключаем, wrapper во всю ширину,
     карточки 2 на ряд (1 на очень узких), текст ВНУТРИ может переноситься. */
  #global-kpi-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    grid-template-columns: none !important;
  }
  #global-kpi-row > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    border-right: none !important;
  }
  #global-kpi-row > div > div {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 4px) !important;
    padding: 6px 10px !important;
    border-right: none !important;
    border-bottom: none !important;
    border: 1px solid var(--wbm-border, #E5E7EB) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  /* Внутренние строки KPI (label + value): разрешаем перенос текста */
  #global-kpi-row > div > div > div {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  #global-kpi-row > div > div > div > span {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* Badge-чипы (+2% / +ΔN шт) — компактнее, не съедают всю строку */
  #global-kpi-row .badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    white-space: nowrap !important;
  }
  /* Иконка ? в углу — не наезжает */
  #global-kpi-row .kpi-hint-icon {
    top: 3px !important;
    right: 3px !important;
    width: 13px !important;
    height: 13px !important;
  }

  /* ── Лидеры: каждая внутренняя таблица — короче на мобиле ──
     _ldrMount() в 14_leaders_finweeks.js рендерит #leaders-{key}-tbl
     с inline max-height:280px. На мобиле снижаем до 180px чтобы все
     6 таблиц + рейтинг помещались в обозримое окно. */
  #leaders-sales-top, #leaders-sales-bot,
  #leaders-buyout-top, #leaders-buyout-bot,
  #leaders-returns-top, #leaders-returns-bot,
  #leaders-rating-top, #leaders-rating-bot {
    max-height: none !important;
  }
  div[id^="leaders-"][id$="-tbl"] {
    max-height: 180px !important;
  }
  /* Рейтинг-грид: стэк + ограничение (раньше 2-кол без cap → длинный хвост) */
  #monitor-rating-grid {
    grid-template-columns: 1fr !important;
    max-height: 450px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── «Рейтинг товаров» на мобиле: было overflow-y:hidden при max-height:240px —
     содержимое (карточки товаров) вертикальное, не горизонтальное, поэтому почти
     весь блок обрезался и был не виден ниже первых ~1-2 карточек [баг, 2026-07-03,
     репорт Alex: «в мобильной версии не видно рейтинга товаров, они прячутся»].
     Теперь блок скроллится вертикально, высота увеличена под тайловую вёрстку. */
  #monitor-groups-feed {
    max-height: 520px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Графики: гарантируем min-width:0 у всех flex-родителей,
     чтобы chart-outer не растягивал родительскую карточку ──
     [FIX] id обновлены (monitor-top-grid не существует) */
  #mon24-leaders-col,
  #monitor-charts-row > .card,
  #mon24-charts-row,
  #mon24-charts-row > div {
    min-width: 0 !important;
  }
  /* Доля артикулов: на мобиле под графиком, не растягивает страницу */
  #mon24-sku-share {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* [УБРАНО, 2026-07-03, репорт Alex] Раньше ≤420px откатывал KPI обратно в 1 колонку —
   на самых узких телефонах (типичная ширина iPhone) блоки снова растягивались на всю
   ширину. Alex явно попросил 2 в ряд ВЕЗДЕ на мобиле — 768px-блок выше уже это делает
   и уже переносит текст внутри карточек (word-break/overflow-wrap), доп. откат не нужен. */

/* ════════════════════════════════════════════════════════════
   fix(mobile): Monitor 24 — новая структура (после restructure)
   #monitor-top-grid удалён, заменён на #monitor-charts-row
   (Hourly chart card | Доля артикулов card).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Графики на узких — стэк, обе карточки на 100% ширины */
  #monitor-charts-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #monitor-charts-row > .card {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Доля артикулов — фиксированная высота на мобиле, не растягивает страницу */
  #mon24-sku-share-card {
    flex: 0 0 auto !important;
    height: 280px !important;
  }
}

/* ============================================================
   SKU Product Cell — КАНОН v4 (2026-06-30, фиксирован Alex)
   docs/sku_display_canon.md
   Реализация: window._renderProductCell в static/js/01_core.js §18

   Цель: фото товара растягивается на ВСЮ высоту текстового блока
         (название + 3 строки данных), а не фиксируется на md=64px.
   Ширина фото остаётся фиксированной (imgSize: sm=32 / md=48 / lg=60).
   ============================================================ */
.wbm-product-cell .wbm-pc-flex {
  align-items: stretch;
}
.wbm-product-cell .wbm-pc-img {
  align-self: stretch;
}
.wbm-product-cell .wbm-pc-img > div {
  /* Внешний div из _renderSkuImg: position:relative;width:Wpx;height:Hpx */
  height: 100% !important;
  min-height: 100%;
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}
.wbm-product-cell .wbm-pc-img > div > img {
  /* <img> от _renderSkuImg: width:Wpx;height:Hpx — растягиваем по высоте */
  height: 100% !important;
  min-height: 100%;
  width: 100% !important;
  object-fit: cover;
}
.wbm-product-cell .wbm-pc-img > div > div:not([style*="position:absolute"]) {
  /* Плейсхолдер 📦 (когда нет фото) — тоже на всю высоту.
     [FIX, 2026-07-04, Alex — «плашка на всю картинку»] :not(position:absolute) — это
     правило РАНЬШЕ растягивало и rank-badge (#N, position:absolute;top:3px;left:3px),
     из-за чего цветная плашка занимала всю площадь фото. Теперь стретчится только
     плейсхолдер, бейдж #N сохраняет свой малый размер. */
  height: 100% !important;
  min-height: 100%;
  width: 100% !important;
}