/* Компоненты. Имена короткие и плоские: .btn, .chip, .seg, .kpi, .dt … Варианты — модификаторы. */
@layer components {

  /* ---------- кнопки ---------- */
  :is(.v2, .side, .topbar) .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: var(--ctl-h); padding: 0 var(--s-4); border-radius: var(--r-md); border: 1px solid transparent;
    font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; text-decoration: none;
    background: var(--bg-sunken); color: var(--text-primary);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  :is(.v2, .side, .topbar) .btn:hover { background: var(--g-100); text-decoration: none; }
  :is(.v2, .side, .topbar) .btn:active { background: var(--g-150); }
  :is(.v2, .side, .topbar) .btn[disabled], :is(.v2, .side, .topbar) .btn.is-disabled { opacity: .45; pointer-events: none; }
  :is(.v2, .side, .topbar) .btn .icon { width: 16px; height: 16px; }
  :is(.v2, .side, .topbar) .btn--primary { background: var(--accent); color: var(--text-on-accent); }
  :is(.v2, .side, .topbar) .btn--primary:hover { background: var(--accent-hover); }
  :is(.v2, .side, .topbar) .btn--primary:active { background: var(--accent-press); }
  :is(.v2, .side, .topbar) .btn--outline { background: var(--bg-surface); border-color: var(--border-strong); }
  :is(.v2, .side, .topbar) .btn--outline:hover { background: var(--bg-hover); }
  :is(.v2, .side, .topbar) .btn--ghost { background: transparent; }
  :is(.v2, .side, .topbar) .btn--ghost:hover { background: var(--bg-hover); }
  :is(.v2, .side, .topbar) .btn--accent-ghost { background: transparent; color: var(--text-link); }
  :is(.v2, .side, .topbar) .btn--accent-ghost:hover { background: var(--accent-soft); }
  :is(.v2, .side, .topbar) .btn--danger { background: var(--negative-bg); color: var(--negative); }
  :is(.v2, .side, .topbar) .btn--danger:hover { background: var(--red-100); }
  :is(.v2, .side, .topbar) .btn--sm { height: var(--ctl-h-sm); padding: 0 var(--s-3); font-size: var(--fs-13); border-radius: var(--r-sm); }
  :is(.v2, .side, .topbar) .btn--lg { height: var(--ctl-h-lg); padding: 0 var(--s-6); font-size: var(--fs-16); border-radius: var(--r-lg); }
  :is(.v2, .side, .topbar) .btn--icon { width: var(--ctl-h); padding: 0; }
  :is(.v2, .side, .topbar) .btn--icon.btn--sm { width: var(--ctl-h-sm); }
  :is(.v2, .side, .topbar) .btn--block { width: 100%; }
  :is(.v2, .side, .topbar) .link { background: none; border: 0; padding: 0; color: var(--text-link); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 6px; }
  :is(.v2, .side, .topbar) .link:hover { text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- поля ---------- */
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .field__label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-secondary); }
  .field__hint { font-size: var(--fs-12); color: var(--text-tertiary); }
  .field__error { font-size: var(--fs-12); color: var(--negative); }
  .input, .select, .textarea {
    height: var(--ctl-h); padding: 0 var(--s-3); border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary);
    font-size: var(--fs-14); transition: border-color var(--dur), box-shadow var(--dur); width: 100%; min-width: 0;
  }
  .textarea { height: auto; padding: var(--s-2) var(--s-3); line-height: var(--lh); resize: vertical; }
  .input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
  .input.is-invalid { border-color: var(--negative-solid); background: var(--negative-bg); }
  .input--num { text-align: right; font-variant-numeric: tabular-nums; }
  .input--sm, .select--sm { height: var(--ctl-h-sm); font-size: var(--fs-13); border-radius: var(--r-sm); }
  .select { appearance: none; padding-right: 32px; cursor: pointer;
    background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
  .input-icon { position: relative; display: flex; align-items: center; }
  .input-icon > .icon { position: absolute; left: 10px; color: var(--text-tertiary); pointer-events: none; }
  .input-icon > .input { padding-left: 34px; }
  :is(.v2, .side, .topbar) .check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--fs-14); }
  :is(.v2, .side, .topbar) .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

  /* переключатель: настоящий checkbox, доступен с клавиатуры */
  :is(.v2, .side, .topbar) .switch { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--fs-14); user-select: none; }
  :is(.v2, .side, .topbar) .switch input { appearance: none; margin: 0; width: 34px; height: 20px; border-radius: var(--r-pill); background: var(--g-300);
    position: relative; cursor: pointer; transition: background var(--dur); flex: none; }
  :is(.v2, .side, .topbar) .switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); }
  :is(.v2, .side, .topbar) .switch input:checked { background: var(--accent); }
  :is(.v2, .side, .topbar) .switch input:checked::after { transform: translateX(14px); }

  /* ---------- чипы и сегменты ---------- */
  :is(.v2, .side, .topbar) .chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-md);
    background: var(--bg-sunken); border: 1px solid transparent; color: var(--text-primary);
    font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; text-decoration: none; cursor: pointer;
  }
  :is(.v2, .side, .topbar) .chip:hover { background: var(--g-100); text-decoration: none; }
  :is(.v2, .side, .topbar) .chip.is-active, :is(.v2, .side, .topbar) .chip[aria-pressed="true"] { background: var(--bg-surface); border-color: var(--text-primary); }
  :is(.v2, .side, .topbar) .chip .icon { width: 16px; height: 16px; color: var(--text-secondary); }
  :is(.v2, .side, .topbar) .chip__count { font-size: var(--fs-11); padding: 1px 6px; border-radius: var(--r-pill); background: var(--bg-surface); color: var(--text-secondary); }
  :is(.v2, .side, .topbar) .chip--action { color: var(--text-link); }
  :is(.v2, .side, .topbar) .chip--action .icon { color: var(--accent); }
  :is(.v2, .side, .topbar) .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

  :is(.v2, .side, .topbar) .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--bg-sunken); }
  :is(.v2, .side, .topbar) .seg > a, :is(.v2, .side, .topbar) .seg > button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s-3);
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary);
    font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; text-decoration: none; }
  :is(.v2, .side, .topbar) .seg > a:hover, :is(.v2, .side, .topbar) .seg > button:hover { color: var(--text-primary); text-decoration: none; }
  :is(.v2, .side, .topbar) .seg > .is-active, :is(.v2, .side, .topbar) .seg > [aria-pressed="true"] { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }

  :is(.v2, .side, .topbar) .tabs { display: flex; gap: var(--s-6); border-bottom: 1px solid var(--border); }
  :is(.v2, .side, .topbar) .tabs > a, :is(.v2, .side, .topbar) .tabs > button { display: inline-flex; align-items: center; gap: var(--s-2); padding: 10px 0; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary);
    font-size: var(--fs-14); font-weight: var(--fw-medium); text-decoration: none; }
  :is(.v2, .side, .topbar) .tabs > a:hover, :is(.v2, .side, .topbar) .tabs > button:hover { color: var(--text-primary); text-decoration: none; }
  :is(.v2, .side, .topbar) .tabs > .is-active { color: var(--text-primary); border-bottom-color: var(--accent); }

  /* ---------- бейджи, плашки ---------- */
  .badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-xs);
    font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .02em; white-space: nowrap;
    background: var(--bg-sunken); color: var(--text-secondary); }
  .badge--accent { background: var(--accent-soft-2); color: var(--accent-hover); }
  .badge--pos { background: var(--positive-bg); color: var(--positive); }
  .badge--neg { background: var(--negative-bg); color: var(--negative); }
  .badge--warn { background: var(--warning-bg); color: var(--warning); }
  .badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  :is(.v2, .side, .topbar) .status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); }
  :is(.v2, .side, .topbar) .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g-400); }
  :is(.v2, .side, .topbar) .status--ok::before { background: var(--positive-solid); } .status--warn::before { background: var(--warning-solid); }
  :is(.v2, .side, .topbar) .status--err::before { background: var(--negative-solid); }

  :is(.v2, .side, .topbar) .grp { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: var(--fs-12); font-weight: var(--fw-semibold); color: #fff; }
  :is(.v2, .side, .topbar) .grp--A { background: var(--abc-a); } .grp--B { background: var(--abc-b); } .grp--C { background: var(--abc-c); }
  :is(.v2, .side, .topbar) .grp--X { background: var(--xyz-x); } .grp--Y { background: var(--xyz-y); } .grp--Z { background: var(--xyz-z); }
  :is(.v2, .side, .topbar) .grp--soft { background: none; border: 1.5px solid currentColor; }
  :is(.v2, .side, .topbar) .grp--soft.grp--A { color: var(--abc-a); } .grp--soft.grp--B { color: var(--abc-b); } .grp--soft.grp--C { color: var(--abc-c); }

  :is(.v2, .side, .topbar) .mp { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #fff;
    font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0; flex: none; }
  :is(.v2, .side, .topbar) .mp--wb { background: var(--mp-wb); } .mp--ozon { background: var(--mp-ozon); }
  :is(.v2, .side, .topbar) .mp--lg { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }

  /* изменение к прошлому периоду: цвет по смыслу (good/bad), а не по знаку */
  .delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border-radius: var(--r-xs);
    font-size: var(--fs-12); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap;
    background: var(--bg-sunken); color: var(--text-secondary); }
  .delta .icon { width: 12px; height: 12px; stroke-width: 2.25; }
  .delta--good { background: var(--positive-bg); color: var(--positive); }
  .delta--bad { background: var(--negative-bg); color: var(--negative); }

  /* ---------- карточки, KPI ---------- */
  :is(.v2, .side, .topbar) .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); }
  :is(.v2, .side, .topbar) .card__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5) 0; }
  :is(.v2, .side, .topbar) .card__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
  :is(.v2, .side, .topbar) .card__actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
  :is(.v2, .side, .topbar) .card__body { padding: var(--s-4) var(--s-5) var(--s-5); }
  :is(.v2, .side, .topbar) .card--flush .card__body { padding: 0; }

  .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
  .kpi { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-4) var(--s-5);
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--s-3); row-gap: 2px; min-width: 0; }
  .kpi__icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-sunken);
    display: grid; place-items: center; color: var(--text-secondary); }
  .kpi__label { font-size: var(--fs-13); color: var(--text-secondary); font-weight: var(--fw-medium); display: flex; gap: 6px; align-items: center; }
  .kpi__value { font-size: var(--fs-20); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
  .kpi__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-12); color: var(--text-tertiary); min-height: 20px; }
  .kpi__spark { grid-column: 1 / -1; height: 28px; margin-top: var(--s-2); }
  .kpi__spark .spark { width: 100%; height: 28px; }

  /* ---------- заметки и плашки-задачи ---------- */
  :is(.v2, .side, .topbar) .note { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
    background: var(--info-bg); color: var(--text-primary); font-size: var(--fs-13); border: 1px solid var(--info-line); }
  :is(.v2, .side, .topbar) .note > .icon { color: var(--info); margin-top: 1px; }
  :is(.v2, .side, .topbar) .note__title { font-weight: var(--fw-semibold); }
  :is(.v2, .side, .topbar) .note__actions { margin-left: auto; display: flex; gap: var(--s-2); }
  :is(.v2, .side, .topbar) .note--pos { background: var(--positive-bg); border-color: var(--positive-line); } .note--pos > .icon { color: var(--positive); }
  :is(.v2, .side, .topbar) .note--warn { background: var(--warning-bg); border-color: var(--warning-line); } .note--warn > .icon { color: var(--warning); }
  :is(.v2, .side, .topbar) .note--neg { background: var(--negative-bg); border-color: var(--negative-line); } .note--neg > .icon { color: var(--negative); }

  /* ---------- тултип с формулой ---------- */
  .has-tip { cursor: help; text-decoration: underline dotted var(--g-400); text-underline-offset: 3px; }
  .ttip { position: fixed; z-index: var(--z-tooltip); max-width: 340px; padding: 10px 12px; border-radius: var(--r-md);
    background: var(--bg-tooltip); color: #f3f1f8; font-size: var(--fs-12); line-height: 1.45; box-shadow: var(--shadow-lg);
    pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
  .ttip.is-open { opacity: 1; transform: none; }
  .ttip b { color: #fff; font-weight: var(--fw-semibold); }
  .ttip__formula { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); color: #cfc9e2; font-variant-numeric: tabular-nums; }

  /* ---------- правая панель (drawer) и модалка ---------- */
  .overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-drawer); opacity: 0; pointer-events: none; transition: opacity var(--dur); }
  .overlay.is-open { opacity: 1; pointer-events: auto; }
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); z-index: calc(var(--z-drawer) + 1);
    background: var(--bg-surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .22s var(--ease); }
  .drawer.is-open { transform: none; }
  .drawer__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--divider); }
  .drawer__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
  .drawer__head .btn--icon { margin-left: auto; }
  .drawer__body { flex: 1; overflow: auto; padding: var(--s-5); }
  .drawer__foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--divider); display: flex; gap: var(--s-2); }
  .drawer__foot .btn--primary { flex: 1; }
  :is(.v2, .side, .topbar) .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-6);
    background: var(--bg-overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur); }
  :is(.v2, .side, .topbar) .modal.is-open { opacity: 1; pointer-events: auto; }
  :is(.v2, .side, .topbar) .modal__box { width: min(440px, 100%); background: var(--bg-surface); border-radius: var(--r-xl); padding: var(--s-8) var(--s-8) var(--s-6);
    box-shadow: var(--shadow-lg); text-align: center; transform: scale(.97); transition: transform var(--dur) var(--ease); }
  :is(.v2, .side, .topbar) .modal.is-open .modal__box { transform: none; }
  :is(.v2, .side, .topbar) .modal__icon { width: 52px; height: 52px; border-radius: var(--r-lg); margin: 0 auto var(--s-4); display: grid; place-items: center;
    background: var(--warning-bg); color: var(--warning); }
  :is(.v2, .side, .topbar) .modal__title { font-size: var(--fs-20); font-weight: var(--fw-semibold); margin-bottom: var(--s-2); }
  :is(.v2, .side, .topbar) .modal__text { color: var(--text-secondary); margin-bottom: var(--s-6); }
  :is(.v2, .side, .topbar) .modal__actions { display: grid; gap: var(--s-2); }

  /* ---------- пустое состояние и скелетон ---------- */
  :is(.v2, .side, .topbar) .empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-6); text-align: center; color: var(--text-secondary); }
  :is(.v2, .side, .topbar) .empty__icon { width: 56px; height: 56px; border-radius: var(--r-xl); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s-2); }
  :is(.v2, .side, .topbar) .empty__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--text-primary); }
  .sk { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--g-100) 25%, var(--g-50) 50%, var(--g-100) 75%);
    background-size: 200% 100%; animation: sk 1.3s linear infinite; height: 12px; }
 @keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

  /* ---------- таблица данных ---------- */
  .dt-wrap { overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-surface); position: relative; }
  /* общая горизонтальная прокрутка внизу окна (ui.js): у таблиц своя горизонтальная полоса скрыта, вертикальная остаётся */
  .has-xbar::-webkit-scrollbar:horizontal { height: 0; }
  @supports not selector(::-webkit-scrollbar) { .has-xbar { scrollbar-width: none; } }
  .xbar { position: fixed; bottom: 0; z-index: 30; height: 16px; overflow-x: auto; overflow-y: hidden; background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgb(0 0 0 / .06); border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .xbar[hidden] { display: none; }
  .xbar__in { height: 1px; }
  .xbar::-webkit-scrollbar { height: 16px; }
  .xbar::-webkit-scrollbar-track { background: transparent; }
  .xbar::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .xbar::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; min-width: 40px; }
  .xbar::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
  @supports not selector(::-webkit-scrollbar) { .xbar { scrollbar-width: auto; scrollbar-color: var(--scroll) transparent; } }
  body.xbar-on { padding-bottom: 18px; }
  .dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--dt-fs); font-variant-numeric: tabular-nums; }
  .dt th, .dt td { height: var(--dt-row); padding: 0 var(--dt-pad-x); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--divider); }
  .dt thead th { position: sticky; top: 0; z-index: 2; height: var(--dt-head); background: var(--bg-sunken); color: var(--text-secondary);
    font-size: var(--fs-12); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--border); box-shadow: inset -1px 0 0 var(--bg-surface); vertical-align: middle; }
  .dt thead tr.dt-groups th { height: 28px; font-size: var(--fs-11); letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary);
    text-align: center; background: var(--bg-surface); border-bottom: 1px solid var(--divider); }
  .dt thead tr.dt-groups + tr th { top: 28px; }
  .dt .l { text-align: left; }
  .dt tbody tr:hover td { background: var(--bg-hover); }
  .dt td.z, .dt th.z { background-color: var(--bg-num); }          /* числовая зона */
  .dt thead th.z { background: color-mix(in srgb, var(--g-150) 70%, var(--bg-sunken)); }
  .dt td.hl { background: var(--bg-highlight); }                     /* колонка-рекомендация */
  .dt thead th.hl { background: var(--mint-100); color: var(--green-700); }
  .dt tr.dt-total td { font-weight: var(--fw-semibold); background: var(--g-25); position: sticky; z-index: 1; border-bottom: 1px solid var(--border); }
  .dt td.zero { color: var(--text-disabled); }
  .dt td.neg { color: var(--negative); }
  .dt .sticky { position: sticky; left: 0; z-index: 1; background: var(--bg-surface); box-shadow: inset -1px 0 0 var(--border); }
  .dt thead .sticky { z-index: 3; background: var(--bg-sunken); }
  .dt tbody tr:hover .sticky { background: var(--bg-hover); }
  .dt th.sortable { cursor: pointer; user-select: none; }
  .dt th.sortable:hover { color: var(--text-primary); }
  .dt th .sort { display: inline-block; width: 12px; opacity: 0; }
  .dt th.is-sorted .sort { opacity: 1; color: var(--accent); }
  .dt .unit { color: var(--text-tertiary); font-weight: var(--fw-regular); }

  /* ячейка «Товар»: фото, название, артикул, магазин */
  :is(.v2, .side, .topbar) .prod { display: flex; align-items: center; gap: var(--s-3); min-width: 260px; max-width: 340px; text-align: left; }
  :is(.v2, .side, .topbar) .prod__img { position: relative; width: 36px; height: 44px; border-radius: var(--r-sm); background: var(--bg-sunken) center/cover no-repeat; flex: none; }
  :is(.v2, .side, .topbar) .prod__img .mp { position: absolute; top: -4px; right: -6px; width: 14px; height: 14px; font-size: 7px; border-radius: 4px; box-shadow: 0 0 0 2px var(--bg-surface); }
  :is(.v2, .side, .topbar) .prod__txt { min-width: 0; line-height: 1.3; }
  :is(.v2, .side, .topbar) .prod__name { font-weight: var(--fw-medium); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(.v2, .side, .topbar) .prod__meta { font-size: var(--fs-12); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* полоска в ячейке (доля) */
  :is(.v2, .side, .topbar) .bar { position: relative; display: inline-block; min-width: 64px; }
  :is(.v2, .side, .topbar) .bar__fill { position: absolute; left: 0; bottom: -3px; height: 3px; border-radius: 2px; background: var(--accent-line); }

  /* спарклайн */
  .spark { width: 72px; height: 22px; display: inline-block; vertical-align: middle; }
  .spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .spark .area { fill: var(--accent); fill-opacity: .08; stroke: none; }
  .spark.is-bad path { stroke: var(--negative-solid); } .spark.is-bad .area { fill: var(--negative-solid); }

  /* ---------- тост ---------- */
  .toast { position: fixed; left: 50%; bottom: var(--s-6); transform: translate(-50%, 16px); z-index: var(--z-toast);
    display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
    background: var(--bg-tooltip); color: #fff; box-shadow: var(--shadow-lg); font-size: var(--fs-14); opacity: 0; transition: all .22s var(--ease); }
  .toast.is-open { opacity: 1; transform: translate(-50%, 0); }
  .toast .icon { color: var(--green-300); }
  .toast.toast--err .icon { color: var(--red-300); }

  /* ---------- выбор периода и поповер ---------- */
  .period { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .pop-wrap { position: relative; }
  .popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-popover); min-width: 280px; padding: var(--s-4);
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: none; gap: var(--s-3); }
  .popover.is-open { display: grid; }
  .popover__title { font-weight: var(--fw-semibold); font-size: var(--fs-14); }
  .popover__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

  /* ---------- таблица: группы строк и подытоги ---------- */
  .dt tr.dt-group td { height: 30px; background: var(--bg-surface); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-tertiary); text-align: left; border-bottom: 1px solid var(--divider); }
  .dt tr.dt-sub td { font-weight: var(--fw-semibold); background: var(--g-25); }
  .dt tr.dt-hl td { background: var(--accent-soft); font-weight: var(--fw-semibold); }
  .dt tr.dt-hl .sticky { background: var(--accent-soft); }
  .dt tr.dt-total .sticky, .dt tr.dt-sub .sticky { background: var(--g-25); }
  .dt th.gs, .dt td.gs { box-shadow: inset 1px 0 0 var(--border); }
  .dt th.prelim { color: var(--warning); }
  .dt .dow { display: block; font-size: 10px; font-weight: var(--fw-regular); color: var(--text-tertiary); }
  .dt th.prelim .dow { color: var(--warning); }
  .dt td.lbl-cell { text-align: left; font-weight: var(--fw-medium); }

  .colset { list-style: none; margin: 0; padding: 0; }
  .colset li { border-bottom: 1px solid var(--divider); padding: 10px 0; }
  .colset li:last-child { border-bottom: 0; }
  :is(.v2, .side, .topbar) .prod__name a { color: var(--text-primary); }
  :is(.v2, .side, .topbar) .prod__name--warn { display: flex; align-items: center; gap: 4px; }
  :is(.v2, .side, .topbar) .prod__name--warn > a, :is(.v2, .side, .topbar) .prod__name--warn > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(.v2, .side, .topbar) .prod__warn { flex: none; display: inline-flex; color: var(--warning-solid); cursor: help; }
  :is(.v2, .side, .topbar) .prod__name a:hover { color: var(--accent); text-decoration: none; }
  .dt tr.dt-pin td { background: var(--g-25); color: var(--text-secondary); }
  .dt tr.dt-pin .sticky { background: var(--g-25); }

  /* ---------- полосы прокрутки внутренних областей (таблицы, списки, панели): тонкая серая полоса без стрелок ---------- */
  :is(.dt-wrap, .costs-scroll, .pick-items, .fsel__items, .drawer__body, .f-list, .cal-pop)::-webkit-scrollbar { width: 8px; height: 8px; }
  :is(.dt-wrap, .costs-scroll, .pick-items, .fsel__items, .drawer__body, .f-list, .cal-pop)::-webkit-scrollbar-track, :is(.dt-wrap, .costs-scroll, .pick-items, .fsel__items, .drawer__body, .f-list, .cal-pop)::-webkit-scrollbar-corner { background: transparent; }
  :is(.dt-wrap, .costs-scroll, .pick-items, .fsel__items, .drawer__body, .f-list, .cal-pop)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  :is(.dt-wrap, .costs-scroll, .pick-items, .fsel__items, .drawer__body, .f-list, .cal-pop)::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
  :is(.dt-wrap, .costs-scroll, .pick-items, .fsel__items, .drawer__body, .f-list, .cal-pop)::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
  @supports not selector(::-webkit-scrollbar) { :is(.dt-wrap, .costs-scroll, .pick-items, .fsel__items, .drawer__body, .f-list, .cal-pop) { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; } }

  /* ---------- календарь периода: одно окно, два месяца, клик — начало, второй клик — конец (ui.js, [data-cal]) ---------- */
  .cal-wrap { position: relative; display: inline-flex; }
  .cal-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-popover); background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-lg); }
  .cal-pop.to-left { left: auto; right: 0; }
  .cal-pop[hidden] { display: none; }
  .cal-months { display: flex; gap: var(--s-5); }
  .cal-mh { display: flex; align-items: center; justify-content: center; gap: 4px; height: 30px; font-weight: var(--fw-semibold); font-size: var(--fs-13); margin-bottom: 6px; position: relative; }
  .cal-nav { position: absolute; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-secondary); cursor: pointer; }
  .cal-nav[data-nav="-1"] { left: 0; } .cal-nav[data-nav="1"] { right: 0; }
  .cal-nav:hover { background: var(--bg-hover); color: var(--text-primary); }
  .cal-g { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px 0; }
  .cal-w { font-size: var(--fs-11); color: var(--text-tertiary); text-align: center; padding: 2px 0; }
  .cal-d { width: 34px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-primary); font: inherit;
    font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: pointer; }
  .cal-d:hover { background: var(--bg-hover); }
  .cal-d.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
  .cal-d.in { background: var(--accent-soft); border-radius: 0; }
  .cal-d.on { background: var(--accent); color: #fff; font-weight: var(--fw-semibold); }
  .cal-d:disabled { color: var(--text-disabled); background: none; cursor: default; box-shadow: none; }
  .cal-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--divider); }
  .cal-sel { flex: 1; color: var(--text-secondary); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .cal-months .cal-m + .cal-m { display: none; } .cal-pop { left: 0; right: auto; } }

  /* ---------- увеличенное фото при наведении на миниатюру товара ([data-zoom]) ---------- */
  [data-zoom] { cursor: zoom-in; transition: transform .12s; }
  [data-zoom]:hover { transform: scale(1.06); }
  .zoom-prev { position: fixed; left: 0; top: 0; z-index: var(--z-tooltip); padding: 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; transition: opacity .12s; }
  .zoom-prev.is-on { opacity: 1; }
  .zoom-prev img { display: block; width: 240px; height: 320px; object-fit: cover; border-radius: 8px; background: var(--bg-sunken); }

  /* ---------- выпадающий список вместо системного select ([data-fancy]) ---------- */
  .fsel { position: relative; display: inline-flex; vertical-align: middle; }
  .fsel > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
  .fsel__btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; height: var(--ctl-h); margin: 0; padding: 0 10px 0 12px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--fs-14); cursor: pointer; text-align: left; }
  .fsel--sm .fsel__btn { height: 32px; font-size: var(--fs-13); padding: 0 8px 0 10px; }
  .fsel__btn:hover { border-color: var(--border-strong); }
  .fsel__btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--focus-ring); }
  .fsel__cur { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
  .fsel__cur > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .fsel__btn > .icon { flex: none; color: var(--text-tertiary); transition: transform var(--dur); }
  .fsel__btn[aria-expanded="true"] > .icon { transform: rotate(180deg); }
  .fsel__list { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-dropdown); min-width: 100%; width: max-content; max-width: min(440px, 92vw);
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s-2); }
  .fsel__list[hidden] { display: none; }
  .fsel__list.to-left { left: auto; right: 0; }
  .fsel__in { width: 100%; height: 32px; margin: 0 0 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-13);
    background: var(--bg-sunken); color: var(--text-primary); }
  .fsel__in:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--bg-surface); }
  .fsel__items { max-height: 380px; overflow-y: auto; }
  .fsel__grp { display: flex; align-items: center; gap: 6px; padding: 10px 8px 4px; font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-tertiary); }
  .fsel__grp:first-child { padding-top: 2px; }
  .fsel__opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-13); line-height: 1.3; }
  .fsel__opt:hover, .fsel__opt.is-hl { background: var(--bg-hover); }
  .fsel__opt.is-on { background: var(--accent-soft); }
  .fsel__opt.is-on b { color: var(--accent-hover); }
  .fsel__opt b { font-weight: var(--fw-medium); }
  .fsel__opt small { display: block; color: var(--text-tertiary); font-size: var(--fs-12); }
  .fsel__opt > .icon { margin-left: auto; color: var(--accent); flex: none; }
  .fsel__txt { min-width: 0; }
  .fsel__none { padding: 8px; color: var(--text-tertiary); font-size: var(--fs-13); }
}