:root {
  color-scheme: light;
  /* Файлы лежат у нас, см. brand-fonts.css. Первым в стеке обязан стоять
     наш шрифт: названный, но отсутствующий даёт свой вид у каждого. */
  --brand-sans: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --brand-serif: "Source Serif 4", Charter, Cambria, Georgia, "Times New Roman", serif;
  --bg: #f0eee6;
  --card: #faf9f5;
  --side: #ebe8df;
  --side-bg: #f4f2ea;
  --side-bg-end: #ece9df;
  --side-text: #262624;
  --side-muted: #6d6a62;
  --side-line: #ddd8ca;
  --side-hover: #e9e5d9;
  --side-active: #f2e2d9;
  --side-active-border: #cc785c;
  --side-icon: #8b8679;
  --table-search-width: 240px;
  --long-table-max-height: 1680px;
  --line: #ddd8ca;
  --line-soft: #e8e4d8;
  --text: #191917;
  --muted: #6d6a62;
  --surface-2: #eae6da;
  --head-text: #57544a;
  --hover: #f2efe6;
  --cell: #f7f5ee;
  --arch: #e6e2d5;
  --switch-off: #cdc6b4;
  --knob: #fffdf8;
  --shadow: rgba(60, 50, 30, .14);
  --tag-text: #a3512f;
  --tag-x: #b98a2e;
  --rec-border: #e6cfae;
  --blue: #4f6d92;
  --blue-soft: #e4e8ee;
  --green: #3d7a55;
  --green-soft: #e2ebe1;
  --orange: #a3512f;
  --orange-soft: #f4e3d8;
  --priority-medium: #8a7327;
  --red: #b3503f;
  --red-soft: #f4e0da;
  --purple: #6f5b9e;
  --purple-soft: #eae5f3;
  --topic-campaigns: #4f6d92;
  --topic-owner: #3d7a55;
  --topic-ai: #6f5b9e;
  --topic-competitors: #a3512f;
  --topic-keys: #3f7f8f;
  --modal-backdrop: rgba(38, 30, 16, .44);
  --modal-bg: #faf9f5;
  --modal-head-bg: #f1ece1;
  --modal-foot-bg: #f5f2e9;
  --modal-control-bg: #fffdf8;
  --modal-border: rgba(89, 78, 51, .24);
  --modal-shadow: 0 24px 72px rgba(60, 50, 30, .2);
  --create-canvas-bg: #eeece3;
  --create-card-bg: #faf9f5;
  --create-card-border: #ddd8ca;
  --create-control-bg: #fffdf8;
  --create-control-border: #c9c2b0;
  --create-header-bg: #f4f1e8;
  --create-card-shadow: 0 8px 24px rgba(70, 58, 32, .07), 0 1px 2px rgba(70, 58, 32, .08);
}

/* Hidden operational advertising workspace (A-7/A-8). */
.operational-ads-view {
  --op-accent: var(--blue);
  --op-warm: var(--orange);
  --op-metric-label-size: 13px;
  --op-metric-note-size: 10px;
  display: flex;
  min-height: calc(100vh - 64px);
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  background:
    radial-gradient(circle at 94% 0, color-mix(in srgb, var(--blue) 11%, transparent) 0, transparent 30%),
    radial-gradient(circle at 4% 0, color-mix(in srgb, var(--orange) 9%, transparent) 0, transparent 25%),
    color-mix(in srgb, var(--create-canvas-bg) 88%, var(--orange-soft));
}
.operational-ads-view.hidden { display: none; }
.op-hero,
.op-picker-card,
.op-section,
.op-product-strip,
.op-empty {
  border: 1px solid var(--create-card-border);
  background: var(--create-card-bg);
  box-shadow: var(--create-card-shadow);
}
.op-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(108deg,var(--create-card-bg) 0 70%,color-mix(in srgb,var(--orange-soft) 46%,var(--create-card-bg)) 100%);
  box-shadow: var(--create-card-shadow), inset 0 -3px 0 color-mix(in srgb,var(--orange) 58%,transparent);
}
.op-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg,#75a6f2 0 58%,var(--blue) 58% 72%,var(--orange) 72% 100%); }
.op-hero::after { content: ""; position: absolute; width: 280px; height: 280px; right: 240px; top: -220px; border-radius: 50%; background: color-mix(in srgb,var(--blue) 8%,transparent); pointer-events: none; }
.op-hero-main { position: relative; z-index: 1; display: flex; min-width: 0; gap: 16px; align-items: flex-start; }
.op-hero-icon,
.op-section-icon,
.op-empty-icon,
.op-metric-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid color-mix(in srgb,var(--blue) 70%,#203d67);
  background: linear-gradient(145deg,#77a7ef 0%,var(--blue) 62%,#244f89 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44),0 7px 16px color-mix(in srgb,var(--blue) 24%,transparent),0 2px 3px rgba(35,67,111,.2);
}
.op-hero-icon::after,
.op-section-icon::after,
.op-metric-icon::after { content: ""; position: absolute; inset: 1px 1px 48%; border-radius: inherit; background: linear-gradient(180deg,rgba(255,255,255,.28),transparent); pointer-events: none; }
.op-hero-icon { width: 58px; height: 58px; border-radius: 16px; }
.op-hero-icon svg { width: 31px; height: 31px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.op-kicker { display: flex; align-items: center; gap: 7px; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.op-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb,var(--green) 14%,transparent); }
.op-hero h2 { margin: 3px 0 7px; color: var(--text); font-size: 25px; line-height: 1.2; }
.op-hero p { max-width: 770px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.op-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.op-badges span { padding: 5px 9px; border: 1px solid color-mix(in srgb,var(--blue) 18%,var(--create-card-border)); border-radius: 999px; background: color-mix(in srgb,var(--blue) 6%,var(--create-control-bg)); color: var(--muted); font-size: 10px; }
.op-badges span:nth-child(2) { border-color: color-mix(in srgb,var(--orange) 34%,var(--create-card-border)); background: color-mix(in srgb,var(--orange-soft) 68%,var(--create-control-bg)); }
.op-badges b { color: var(--text); }
.op-freshness { position: relative; z-index: 1; display: flex; min-width: 220px; flex-direction: column; gap: 3px; padding: 13px 15px; border: 1px solid color-mix(in srgb,var(--orange) 30%,var(--create-card-border)); border-radius: 14px; background: color-mix(in srgb,var(--orange-soft) 55%,var(--create-card-bg)); }
.op-freshness small { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.op-freshness b { color: var(--text); font-size: 13px; }
.op-freshness span { color: var(--muted); font-size: 10px; }
.op-freshness.is-stale { border-color: color-mix(in srgb,var(--red) 45%,var(--create-card-border)); background: color-mix(in srgb,var(--red-soft) 45%,var(--create-card-bg)); }
.op-freshness.is-stale span { color: var(--red); font-weight: 650; }
.op-key-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 7px; margin-left: auto; }
.op-metric-settings { position: relative; }
.op-metric-settings > summary { cursor: pointer; list-style: none; padding: 6px 11px; border: 1px solid var(--create-card-border); border-radius: 10px; background: var(--create-card-bg); color: var(--text); font-size: 11px; font-weight: 800; white-space: nowrap; }
.op-metric-settings > summary::-webkit-details-marker { display: none; }
.op-metric-reset-visible { display: inline-flex; width: 34px; min-width: 34px; height: 34px; min-height: 34px; align-items: center; justify-content: center; padding: 0; border-color: color-mix(in srgb,var(--orange) 34%,var(--create-card-border)); color: var(--text); background: color-mix(in srgb,var(--orange-soft) 42%,var(--create-card-bg)); }
.op-metric-reset-visible svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.op-metric-reset-visible:hover:not(:disabled) { border-color: var(--orange); background: color-mix(in srgb,var(--orange-soft) 72%,var(--create-card-bg)); }
.op-metric-reset-visible:disabled { cursor: default; opacity: .48; }
.op-metric-hidden-count { color: var(--muted); font-weight: 650; }
.op-metric-settings-body { position: absolute; right: 0; z-index: 20; width: 360px; max-width: calc(100vw - 36px); margin-top: 6px; padding: 12px; border: 1px solid var(--create-card-border); border-radius: 12px; background: var(--create-card-bg); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.op-metric-settings-body p { margin: 0 0 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.op-metric-settings-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.op-key-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.op-key-settings > b { grid-column: 1/-1; color: var(--text); font-size: 11px; }
.op-key-setting { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 750; }
.op-key-setting select { width: 100%; min-width: 0; height: 32px; padding: 0 28px 0 8px; border: 1px solid var(--create-control-border); border-radius: 8px; color: var(--text); background: var(--create-control-bg); font-size: 10px; }
.op-key-setting select:focus { border-color: var(--blue); outline: 2px solid color-mix(in srgb,var(--blue) 16%,transparent); }
.op-settings-divider { margin: 7px 0 2px; padding-top: 8px; border-top: 1px solid var(--create-card-border); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.op-metric-toggle { display: flex; align-items: center; gap: 7px; min-height: 21px; font-size: 11px; color: var(--text); cursor: pointer; }
.op-metric-toggle span { min-width: 0; flex: 1; }
.op-metric-toggle em { padding: 2px 5px; border-radius: 999px; color: var(--blue); background: color-mix(in srgb,var(--blue) 9%,var(--create-control-bg)); font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.op-metric-toggle.is-key { cursor: default; }
.op-metric-toggle.is-key input { opacity: .55; }
.op-metric[draggable="true"],.op-decision-card[draggable="true"] { cursor: grab; }
.op-metric.is-dragging,.op-decision-card.is-dragging { opacity: .45; cursor: grabbing; }
.op-metric.is-op-drop-target,.op-decision-card.is-op-drop-target { border-color: var(--blue); outline: 3px solid color-mix(in srgb,var(--blue) 14%,transparent); }


.op-picker-card { position: relative; display: grid; grid-template-columns: auto minmax(220px,.8fr) minmax(320px,1.5fr) minmax(180px,.55fr); gap: 16px; align-items: center; padding: 17px; border-radius: 16px; }
.op-section-icon { width: 43px; height: 43px; border-radius: 13px; }
.op-section-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.op-section-icon-search { background: linear-gradient(145deg,#f0bd62,var(--orange) 66%,#65400d); border-color: color-mix(in srgb,var(--orange) 70%,#51320b); box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 7px 16px color-mix(in srgb,var(--orange) 22%,transparent); }
.op-step { color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.op-picker-copy h3,.op-section-head h3 { margin: 2px 0 4px; color: var(--text); font-size: 15px; }
.op-picker-copy p,.op-section-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.op-mode-toggle { display: inline-flex; gap: 3px; margin-top: 7px; padding: 3px; border: 1px solid var(--create-control-border); border-radius: 9px; background: var(--create-control-bg); }
.op-mode-toggle button { min-height: 28px; padding: 5px 10px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.op-mode-toggle button:hover { color: var(--text); background: var(--surface-2); }
.op-mode-toggle button:focus-visible { outline: 3px solid color-mix(in srgb,var(--blue) 18%,transparent); outline-offset: 1px; }
.op-mode-toggle button.is-active { color: #fff; background: var(--blue); box-shadow: 0 2px 7px color-mix(in srgb,var(--blue) 25%,transparent); }
.op-picker-control,.op-target-control { position: relative; display: flex; flex-direction: column; gap: 6px; }
.op-picker-control.hidden,.op-target-control.hidden { display: none; }
.op-picker-control-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.op-picker-control-head > label,.op-target-control > span { color: var(--head-text); font-size: 10px; font-weight: 750; }
/* Обе шапки одной высоты, иначе при выравнивании по центру поле «Целевой ДРР» встаёт выше поиска SKU. */
.op-picker-control-head,.op-target-control > span { min-height: 17px; }
.op-target-control > span { display: flex; align-items: center; }
.op-available-sku-count { color: var(--muted); font-size: 10px; white-space: nowrap; }
.op-available-sku-count b { color: var(--green); font-size: 12px; font-weight: 850; }
.op-picker-control .input,.op-target-control .input { width: 100%; min-height: 42px; border-color: var(--create-control-border); background: var(--create-control-bg); box-shadow: inset 0 1px 2px rgba(45,68,99,.07),0 1px 0 rgba(255,255,255,.5); }
.op-picker-control .input:hover,.op-target-control .input:hover { border-color: color-mix(in srgb,var(--blue) 62%,var(--create-control-border)); }
.op-picker-control .input:focus,.op-target-control .input:focus { border-color: var(--blue); outline: 3px solid color-mix(in srgb,var(--blue) 18%,transparent); }
.op-search-wrap { position: relative; }
.op-search-wrap .input { padding-right: 38px; }
.op-search-clear { position: absolute; right: 7px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.op-search-clear:hover { color: var(--text); background: var(--surface-2); }
.op-target-control small { position: absolute; top: calc(100% + 5px); left: 0; right: 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.op-sku-results { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; right: 0; max-height: 330px; overflow: auto; padding: 7px; border: 1px solid var(--create-control-border); border-radius: 12px; background: var(--modal-bg); box-shadow: var(--modal-shadow); }
.op-sku-option { display: grid; width: 100%; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 9px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.op-sku-option:hover,.op-sku-option:focus-visible { border-color: color-mix(in srgb,var(--blue) 36%,var(--create-card-border)); background: color-mix(in srgb,var(--blue) 7%,var(--create-control-bg)); outline: none; }
.op-sku-option img,.op-product-image { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; border: 1px solid var(--create-card-border); background: var(--surface-2); }
.op-sku-option-copy { min-width: 0; }
.op-sku-option-copy b,.op-sku-option-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-sku-option-copy b { font-size: 11px; }
.op-sku-option-copy span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.op-sku-stock { padding: 4px 7px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 800; white-space: nowrap; }

.op-empty { display: flex; min-height: 190px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 24px; border-style: dashed; border-radius: 16px; text-align: center; }
.op-empty-icon { width: 48px; height: 48px; border-radius: 15px; font-size: 27px; }
.op-empty h3 { margin: 5px 0 0; color: var(--text); }
.op-empty p { margin: 0; color: var(--muted); font-size: 11px; }
.op-workspace { display: flex; flex-direction: column; gap: 16px; }
.op-product-strip { display: grid; grid-template-columns: auto minmax(320px,1.25fr) minmax(460px,1.35fr) minmax(240px,300px); gap: 13px; align-items: center; padding: 13px 15px; border-radius: 14px; box-shadow: var(--create-card-shadow),inset 4px 0 0 color-mix(in srgb,var(--orange) 70%,transparent); }
.op-product-strip.is-category { grid-template-columns: minmax(260px,.8fr) minmax(460px,1.35fr); }
.op-product-strip.is-category .op-product-copy h3 { font-size: 17px; }
.op-product-copy { min-width: 0; }
.op-product-copy h3 { margin: 0; color: var(--text); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; white-space: normal; }
.op-product-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; color: var(--muted); font-size: 10px; }
.op-product-meta span { padding-right: 7px; border-right: 1px solid var(--create-card-border); }
.op-product-meta span:last-child { border: 0; }
.op-product-flow { align-self: stretch; min-width: 0; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--create-card-border); border-radius: 11px; background: var(--create-control-bg); }
.op-product-flow.is-ok { border-color: color-mix(in srgb,var(--green) 34%,var(--create-card-border)); background: color-mix(in srgb,var(--green-soft) 45%,var(--create-card-bg)); }
.op-product-flow.is-warning { border-color: color-mix(in srgb,var(--orange) 44%,var(--create-card-border)); background: color-mix(in srgb,var(--orange-soft) 55%,var(--create-card-bg)); }
.op-product-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-product-flow-head span { color: var(--text); font-size: 11px; font-weight: 900; }
.op-product-flow-head strong { color: var(--green); font-size: 10px; text-align: right; }
.op-product-flow.is-warning .op-product-flow-head strong { color: var(--orange); }
.op-product-flow-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px 12px; margin-top: 8px; }
.op-product-flow-item { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 6px; padding-top: 5px; border-top: 1px solid color-mix(in srgb,var(--create-card-border) 78%,transparent); }
.op-product-flow-item span { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.op-product-flow-item b { flex: 0 0 auto; color: var(--text); font-size: 13px; }
.op-product-flow-item.is-zero span,.op-product-flow-item.is-zero b { color: var(--muted); }
.op-position-pill { display: flex; align-self: stretch; min-width: 240px; max-width: 300px; box-sizing: border-box; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 12px; border: 1px solid var(--create-card-border); border-radius: 11px; background: var(--create-control-bg); }
.op-position-pill small { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.op-position-pill b { color: var(--text); font-size: 16px; }
.op-position-pill.is-good { border-color: color-mix(in srgb,var(--green) 38%,var(--create-card-border)); background: color-mix(in srgb,var(--green-soft) 68%,var(--create-card-bg)); }
.op-position-pill.is-danger { border-color: color-mix(in srgb,var(--red) 42%,var(--create-card-border)); background: color-mix(in srgb,var(--red-soft) 72%,var(--create-card-bg)); }

.op-key-section { padding: 15px; border: 1px solid var(--create-card-border); border-radius: 16px; background: linear-gradient(145deg,color-mix(in srgb,var(--blue) 4%,var(--create-card-bg)),var(--create-card-bg) 62%); box-shadow: var(--create-card-shadow),inset 0 3px 0 color-mix(in srgb,var(--blue) 32%,transparent); }
.op-key-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.op-key-head > div { min-width: 0; flex: 1; }
.op-key-head > .op-key-actions { flex: 0 0 auto; }
.op-key-head h3 { margin: 2px 0 4px; color: var(--text); font-size: 15px; }
.op-key-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.op-decision-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.op-decision-card { position: relative; min-height: 120px; overflow: hidden; padding: 14px; border: 1px solid var(--create-card-border); border-radius: 15px; background: var(--create-card-bg); box-shadow: var(--create-card-shadow); }
.op-decision-card::after { content: ""; position: absolute; width: 74px; height: 74px; right: -24px; bottom: -34px; border-radius: 50%; background: color-mix(in srgb,var(--blue) 8%,transparent); }
.op-decision-card.is-primary { border-color: color-mix(in srgb,var(--blue) 48%,var(--create-card-border)); background: linear-gradient(145deg,color-mix(in srgb,var(--blue) 8%,var(--create-card-bg)),var(--create-card-bg) 68%); }
.op-decision-card.is-warm { border-color: color-mix(in srgb,var(--orange) 38%,var(--create-card-border)); background: linear-gradient(145deg,color-mix(in srgb,var(--orange-soft) 68%,var(--create-card-bg)),var(--create-card-bg) 70%); }
.op-decision-card.is-danger { border-color: color-mix(in srgb,var(--red) 46%,var(--create-card-border)); background: linear-gradient(145deg,color-mix(in srgb,var(--red-soft) 74%,var(--create-card-bg)),var(--create-card-bg) 72%); }
.op-decision-card.is-success { border-color: color-mix(in srgb,var(--green) 44%,var(--create-card-border)); background: linear-gradient(145deg,color-mix(in srgb,var(--green-soft) 72%,var(--create-card-bg)),var(--create-card-bg) 72%); }
.op-decision-role { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.op-decision-label { display: block; min-height: 31px; color: var(--blue); font-size: var(--op-metric-label-size); font-weight: 850; line-height: 1.3; }
.op-decision-label[title],.op-metric-label[title],.op-campaign-kpi small[title] { cursor: help; text-decoration: underline dotted color-mix(in srgb,var(--blue) 48%,transparent); text-underline-offset: 3px; }
.op-decision-value { display: block; margin-top: 9px; color: var(--text); font-size: 26px; font-weight: 850; line-height: 1; }
.op-decision-foot { display: block; margin-top: 9px; color: var(--muted); font-size: var(--op-metric-note-size); line-height: 1.4; }

.op-section { padding: 17px; border-radius: 16px; }
.op-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.op-section-head > div { min-width: 0; flex: 1; }
.op-metrics-section { box-shadow: var(--create-card-shadow),inset 0 3px 0 color-mix(in srgb,var(--orange) 32%,transparent); }
.op-metrics-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.op-metric { display: flex; min-width: 0; min-height: 112px; flex-direction: column; padding: 13px; border: 1px solid color-mix(in srgb,var(--blue) 24%,var(--create-card-border)); border-top-width: 3px; border-radius: 12px; background: color-mix(in srgb,var(--blue) 3%,var(--create-control-bg)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.op-metric-label { display: block; min-height: 31px; color: var(--blue); font-size: var(--op-metric-label-size); font-weight: 850; line-height: 1.3; white-space: normal; }
.op-metric-value { display: block; margin-top: 8px; overflow: hidden; color: var(--text); font-size: 19px; font-weight: 850; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.op-metric-foot { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; align-items: end; margin-top: auto; padding-top: 7px; }
.op-metric-note { display: block; min-width: 0; min-height: 14px; color: var(--muted); font-size: var(--op-metric-note-size); line-height: 1.4; }
.op-metric-delta { align-self: end; color: var(--muted); font-size: var(--op-metric-note-size); font-style: normal; font-weight: 850; line-height: 1.4; text-align: right; white-space: nowrap; }
.op-metric-delta.is-good { color: var(--green); }
.op-metric-delta.is-bad { color: var(--red); }
.op-two-columns { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(310px,.75fr); gap: 16px; align-items: start; }
.op-two-columns.is-category { grid-template-columns: minmax(0,1fr); }
.op-section-icon-campaign { background: linear-gradient(145deg,#d4a27f,#cc785c 62%,#a3512f); }
.op-section-icon-hint { background: linear-gradient(145deg,#aa8ee6,var(--purple) 62%,#4e368a); border-color: color-mix(in srgb,var(--purple) 70%,#36245f); }
.op-section-icon-competitors { background: linear-gradient(145deg,#ebb46d,var(--orange) 64%,#69430e); border-color: color-mix(in srgb,var(--orange) 70%,#51320b); }
.op-campaigns { display: grid; gap: 13px; }
.op-campaign-group { display: grid; gap: 9px; padding: 10px; border: 1px solid color-mix(in srgb,var(--blue) 18%,var(--create-card-border)); border-radius: 14px; background: color-mix(in srgb,var(--blue) 3%,var(--create-control-bg)); }
.op-campaign-status-block { display: grid; gap: 10px; padding: 11px; border: 1px solid var(--create-card-border); border-radius: 16px; background: var(--create-card-bg); }
.op-campaign-status-block + .op-campaign-status-block { margin-top: 10px; }
.op-campaign-status-block.is-active { border-color: color-mix(in srgb,var(--green) 34%,var(--create-card-border)); background: color-mix(in srgb,var(--green-soft) 38%,var(--create-card-bg)); }
.op-campaign-status-block.is-paused { border-color: color-mix(in srgb,var(--orange) 27%,var(--create-card-border)); }
.op-campaign-status-block.is-technical { border-style: dashed; }
.op-campaign-status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; color: var(--text); }
details.op-campaign-status-block > summary { cursor: pointer; list-style: none; }
details.op-campaign-status-block > summary::-webkit-details-marker { display: none; }
details.op-campaign-status-block > summary::after { content: "Раскрыть ↓"; flex: 0 0 auto; color: var(--blue); font-size: 9px; font-weight: 800; }
details.op-campaign-status-block[open] > summary::after { content: "Свернуть ↑"; }
.op-campaign-status-head div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.op-campaign-status-head span { font-size: 12px; font-weight: 900; }
.op-campaign-status-head b { padding: 4px 7px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: 9px; }
.op-campaign-status-head small { margin-left: auto; color: var(--muted); font-size: 9px; text-align: right; }
.op-campaign-status-groups { display: grid; gap: 10px; }
.op-campaign-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.op-campaign-group-head div { display: flex; align-items: center; gap: 7px; }
.op-campaign-group-head span { color: var(--text); font-size: 11px; font-weight: 850; }
.op-campaign-group-head b { padding: 3px 6px; border-radius: 999px; color: var(--blue); background: color-mix(in srgb,var(--blue) 9%,var(--create-card-bg)); font-size: 8px; }
.op-campaign-group-head strong { color: var(--muted); font-size: 10px; }
.op-campaign-card { display: grid; gap: 10px; padding: 11px; border: 1px solid var(--create-card-border); border-radius: 12px; background: var(--create-card-bg); box-shadow: 0 3px 9px rgba(45,68,99,.05); }
.op-campaign-card.is-mixed { border-color: color-mix(in srgb,var(--orange) 55%,var(--create-card-border)); box-shadow: inset 3px 0 0 var(--orange),0 3px 9px rgba(45,68,99,.05); }
.op-campaign-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.op-campaign-copy { min-width: 0; }
.op-campaign-copy b,.op-campaign-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-campaign-copy b { color: var(--text); font-size: 11px; }
.op-campaign-copy span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.op-campaign-meta { display: flex; min-width: 0; align-items: baseline; margin-top: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.op-campaign-copy .op-campaign-meta span { display: inline; min-width: 0; margin-top: 0; }
.op-campaign-id-link { flex: 0 0 auto; color: var(--blue); font-weight: 850; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.op-campaign-id-link:hover { text-decoration-style: solid; }
.op-campaign-id-link:focus-visible { border-radius: 3px; outline: 3px solid color-mix(in srgb,var(--blue) 18%,transparent); outline-offset: 2px; }
.op-campaign-auction { display: grid; grid-template-columns: repeat(2,minmax(104px,auto)); gap: 9px; }
.op-campaign-auction > div { display: flex; min-width: 104px; flex-direction: column; gap: 3px; padding: 7px 9px; border: 1px solid var(--create-card-border); border-radius: 9px; background: var(--create-control-bg); }
.op-campaign-auction small,.op-campaign-kpi small { color: var(--blue); font-size: 10px; font-weight: 800; line-height: 1.3; }
.op-campaign-auction b { color: var(--text); font-size: 12px; }
.op-campaign-kpis { display: grid; grid-template-columns: repeat(5,minmax(82px,1fr)); gap: 7px; }
.op-campaign-kpi { min-width: 0; padding: 7px 8px; border: 1px solid var(--create-card-border); border-radius: 8px; background: var(--create-control-bg); }
.op-campaign-kpi small,.op-campaign-kpi b,.op-campaign-kpi span { display: block; overflow: hidden; text-overflow: ellipsis; }
.op-campaign-kpi small { min-height: 26px; overflow: visible; white-space: normal; }
.op-campaign-kpi b { margin-top: 5px; color: var(--text); font-size: 14px; white-space: nowrap; }
.op-campaign-kpi span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; white-space: normal; }
.op-campaign-metric-block { display: grid; gap: 7px; }
.op-campaign-metric-title { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.op-campaign-funnel { display: grid; grid-template-columns: repeat(4,minmax(82px,1fr)); gap: 15px; }
.op-campaign-funnel-step { position: relative; }
@media (min-width: 861px) {
  .op-campaign-funnel-step:not(:last-child)::after { content: "›"; position: absolute; top: 50%; right: -12px; color: var(--blue); font-size: 18px; font-weight: 850; line-height: 1; transform: translateY(-50%); }
}
.op-state { display: inline-flex; width: max-content; padding: 4px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 8px; font-weight: 800; }
.op-state.run { color: var(--green); background: var(--green-soft); }
.op-bid-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 9px; border: 1px solid color-mix(in srgb,var(--blue) 40%,var(--create-card-border)); border-radius: 9px; color: var(--blue); background: color-mix(in srgb,var(--blue) 7%,var(--create-card-bg)); font: inherit; font-weight: 800; cursor: pointer; }
.op-bid-button:hover { border-color: var(--blue); background: color-mix(in srgb,var(--blue) 12%,var(--create-card-bg)); }
.op-bid-button:focus-visible { outline: 3px solid color-mix(in srgb,var(--blue) 18%,transparent); }
.op-hints { display: grid; gap: 9px; }
.op-workspace > .op-hints-section .op-hints { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.op-hint { padding: 11px; border: 1px solid var(--create-card-border); border-left-width: 4px; border-radius: 10px; background: var(--create-control-bg); }
.op-hint b { display: block; color: var(--text); font-size: 10px; }
.op-hint span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.op-hint.info { border-left-color: var(--blue); }
.op-hint.success { border-left-color: var(--green); background: color-mix(in srgb,var(--green-soft) 42%,var(--create-control-bg)); }
.op-hint.warning { border-left-color: var(--orange); background: color-mix(in srgb,var(--orange-soft) 44%,var(--create-control-bg)); }
.op-hint.danger { border-left-color: var(--red); background: color-mix(in srgb,var(--red-soft) 48%,var(--create-control-bg)); }
.op-competitor-head .btn { margin-left: auto; }
.op-competitors { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.op-two-columns .op-competitors { grid-template-columns: 1fr; }
.op-competitor-card { position: relative; min-width: 0; padding: 12px; border: 1px solid var(--create-card-border); border-radius: 12px; background: var(--create-control-bg); }
.op-competitor-rank { position: absolute; top: 9px; right: 9px; display: inline-flex; min-width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 8px; color: var(--blue); background: color-mix(in srgb,var(--blue) 9%,var(--create-card-bg)); font-size: 9px; font-weight: 850; }
.op-competitor-card h4 { min-height: 32px; margin: 0 32px 8px 0; overflow: hidden; color: var(--text); font-size: 10px; line-height: 1.45; }
.op-competitor-card h4 a { color: inherit; text-decoration: none; }
.op-competitor-card h4 a:hover { color: var(--blue); text-decoration: underline; }
.op-competitor-price { display: block; color: var(--text); font-size: 16px; font-weight: 850; }
.op-competitor-price-line { display: flex; min-height: 22px; align-items: baseline; gap: 7px; }
.op-competitor-price-line del { color: var(--muted); font-size: 9px; }
.op-competitor-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.op-competitor-badges span { padding: 3px 5px; border-radius: 999px; color: var(--blue); background: color-mix(in srgb,var(--blue) 8%,var(--create-card-bg)); font-size: 7px; font-weight: 750; }
.op-competitor-seller { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--create-card-border); }
.op-competitor-seller small,.op-competitor-seller b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-competitor-seller small { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.op-competitor-seller b { margin-top: 3px; color: var(--text); font-size: 9px; }
.op-competitor-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; color: var(--muted); font-size: 8px; }
.op-technical-empty { padding: 15px; border: 1px dashed var(--create-control-border); border-radius: 11px; color: var(--muted); background: var(--create-control-bg); font-size: 10px; text-align: center; }

@media (max-width: 1500px) {
  .op-product-strip { grid-template-columns: auto minmax(0,1fr) minmax(240px,300px); }
  .op-product-flow { grid-column: 1/-1; grid-row: 2; }
  .op-position-pill { grid-column: 3; grid-row: 1; }
}
@media (max-width: 1180px) {
  .op-picker-card { grid-template-columns: auto minmax(180px,.8fr) minmax(280px,1.4fr); }
  .op-target-control { grid-column: 3; }
  /* На узком экране поле уезжает на свою строку, выравнивать не с чем — подсказка снова в потоке. */
  .op-target-control small { position: static; }
  .op-decision-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-metrics-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .op-competitors { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .operational-ads-view { padding: 12px; }
  .op-hero { align-items: stretch; flex-direction: column; }
  .op-freshness { min-width: 0; }
  .op-picker-card { grid-template-columns: auto minmax(0,1fr); }
  .op-picker-control,.op-target-control { grid-column: 1/-1; }
  .op-two-columns { grid-template-columns: 1fr; }
  .op-product-strip { grid-template-columns: auto minmax(0,1fr); }
  .op-product-flow { grid-column: 1/-1; grid-row: 2; }
  .op-position-pill { grid-column: 1/-1; grid-row: 3; width: auto; min-width: 0; max-width: none; }
  .op-metrics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .op-campaign-kpis { grid-template-columns: repeat(3,minmax(82px,1fr)); }
  .op-campaign-funnel { grid-template-columns: repeat(2,minmax(82px,1fr)); gap: 7px; }
}
@media (max-width: 600px) {
  .operational-ads-view { padding: 9px; gap: 11px; }
  .op-hero,.op-picker-card,.op-section,.op-key-section { padding: 13px; border-radius: 14px; }
  .op-hero-icon { width: 48px; height: 48px; border-radius: 14px; }
  .op-picker-control-head { align-items: flex-start; flex-wrap: wrap; }
  .op-hero h2 { font-size: 21px; }
  .op-badges { display: grid; }
  .op-key-head { align-items: stretch; flex-direction: column; }
  .op-key-actions { display: flex; width: 100%; justify-content: flex-end; }
  .op-metric-settings { width: auto; }
  .op-metric-settings > summary { text-align: left; }
  .op-metric-reset-visible { width: 34px; }
  .op-metric-settings-body { left: auto; right: 0; }
  .op-decision-grid,.op-metrics-grid,.op-competitors { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-decision-value { font-size: 22px; }
  .op-product-strip { align-items: start; }
  .op-product-flow-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-product-flow-head { align-items: flex-start; flex-direction: column; }
  .op-product-flow-head strong { text-align: left; }
  .op-position-pill { width: 100%; }
  .op-campaign-status-head { align-items: flex-start; flex-wrap: wrap; }
  .op-campaign-status-head small { order: 3; width: 100%; margin-left: 0; text-align: left; }
  .op-campaign-top { grid-template-columns: 1fr; }
  .op-campaign-auction { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-campaign-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-competitor-head { align-items: flex-start; flex-wrap: wrap; }
  .op-competitor-head .btn { width: 100%; margin-left: 0; }
}
@media (max-width: 390px) {
  .op-key-settings { grid-template-columns: 1fr; }
  .op-decision-grid,.op-metrics-grid,.op-competitors,.op-campaign-kpis,.op-campaign-funnel,.op-campaign-auction { grid-template-columns: 1fr; }
}

/* Competitor sales SPP: layered read-only decision surface (P-17). */
.competitor-sales-view {
  --competitor-accent: #a3512f;
  --competitor-accent-deep: #7d3a1f;
  --competitor-green: #2d8a68;
  --competitor-warm: var(--orange);
  --competitor-warm-soft: color-mix(in srgb, var(--surface-2) 72%, var(--orange-soft));
  display: flex;
  min-height: calc(100vh - 64px);
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  background:
    radial-gradient(circle at 94% 2%, color-mix(in srgb, var(--competitor-accent) 11%, transparent) 0, transparent 31%),
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--competitor-warm) 9%, transparent) 0, transparent 25%),
    color-mix(in srgb, var(--create-canvas-bg) 88%, var(--competitor-warm-soft));
}
.competitor-sales-view.hidden { display: none; }
.competitor-sales-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--create-card-border);
  border-radius: 18px;
  background: linear-gradient(108deg,var(--create-card-bg) 0 72%,color-mix(in srgb,var(--competitor-warm-soft) 42%,var(--create-card-bg)) 100%);
  box-shadow: var(--create-card-shadow), inset 0 -3px 0 color-mix(in srgb,var(--competitor-warm) 58%,transparent);
}
.competitor-sales-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg,#75a6f2 0 58%,var(--competitor-accent-deep) 58% 72%,var(--competitor-warm) 72% 100%);
}
.competitor-sales-head::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: 210px;
  top: -210px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--competitor-accent) 8%, transparent);
  pointer-events: none;
}
.competitor-sales-hero-main { display: flex; min-width: 0; align-items: flex-start; gap: 16px; }
.competitor-sales-hero-icon,
.competitor-sales-section-icon,
.competitor-sales-stat-icon,
.competitor-seller-icon,
.competitor-sales-empty-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgba(38, 75, 128, .64);
  background: linear-gradient(145deg, #77a7ef 0%, var(--competitor-accent) 62%, var(--competitor-accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 7px 16px rgba(53,111,214,.22), 0 2px 3px rgba(35,67,111,.2);
}
.competitor-sales-hero-icon::after,
.competitor-sales-section-icon::after,
.competitor-sales-stat-icon::after,
.competitor-seller-icon::after {
  content: "";
  position: absolute;
  inset: 1px 1px 48%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.26), transparent);
  pointer-events: none;
}
.competitor-sales-hero-icon { width: 58px; height: 58px; border-radius: 16px; }
.competitor-sales-hero-icon svg { width: 31px; height: 31px; }
.competitor-sales-hero-copy { min-width: 0; }
.competitor-sales-head h2 { margin: 3px 0 7px; color: var(--text); font-size: 24px; line-height: 1.2; }
.competitor-sales-head p { max-width: 780px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.competitor-sales-kicker { display: flex; align-items: center; gap: 7px; color: var(--competitor-accent); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.competitor-sales-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: var(--competitor-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--competitor-green) 14%, transparent); }
.competitor-sales-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.competitor-sales-badges span { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--competitor-accent) 18%, var(--create-card-border)); border-radius: 999px; background: color-mix(in srgb, var(--competitor-accent) 6%, var(--create-control-bg)); color: var(--muted); font-size: 10px; }
.competitor-sales-badges span:first-child { border-color: color-mix(in srgb,var(--competitor-warm) 34%,var(--create-card-border)); background: color-mix(in srgb,var(--competitor-warm-soft) 68%,var(--create-control-bg)); }
.competitor-sales-badges b { color: var(--text); }
.competitor-sales-date {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 218px;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border: 1px solid color-mix(in srgb,var(--competitor-warm) 30%,var(--create-card-border));
  border-radius: 14px;
  background: color-mix(in srgb,var(--competitor-warm-soft) 58%,var(--create-card-bg));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.competitor-sales-date-label { display: flex; align-items: center; gap: 9px; }
.competitor-sales-date-label svg { width: 22px; height: 22px; color: var(--competitor-warm); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.competitor-sales-date-label > span { display: flex; flex-direction: column; gap: 1px; }
.competitor-sales-date-label small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.competitor-sales-date-label b { color: var(--text); font-size: 12px; }
.competitor-sales-date .input { width: 100%; min-height: 38px; border-color: var(--create-control-border); background: var(--create-control-bg); box-shadow: inset 0 1px 2px rgba(45,68,99,.07), 0 1px 0 rgba(255,255,255,.5); font-weight: 750; }
.competitor-sales-date .input:hover { border-color: color-mix(in srgb, var(--competitor-accent) 62%, var(--create-control-border)); }
.competitor-sales-date .input:focus { border-color: var(--competitor-accent); outline: 3px solid color-mix(in srgb, var(--competitor-accent) 18%, transparent); }
.competitor-sales-meta {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb,var(--competitor-warm) 22%,var(--create-card-border));
  border-radius: 11px;
  background: color-mix(in srgb,var(--competitor-warm-soft) 36%,var(--create-card-bg));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 30%, transparent);
  font-size: 11px;
}
.competitor-sales-meta-primary { color: var(--text); }
.competitor-sales-meta-primary::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--competitor-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--competitor-green) 13%, transparent); }
.competitor-sales-warning { margin-left: auto; color: #b36a00; font-weight: 750; }
.competitor-sales-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.competitor-sales-stat {
  position: relative;
  display: flex;
  min-height: 136px;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--create-card-border);
  border-radius: 15px;
  background: var(--create-card-bg);
  box-shadow: var(--create-card-shadow);
}
.competitor-sales-stat::after { content: ""; position: absolute; inset: auto -32px -48px auto; width: 105px; height: 105px; border-radius: 50%; background: color-mix(in srgb, var(--competitor-accent) 6%, transparent); }
.competitor-sales-stat-head { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 700; }
.competitor-sales-stat-icon { width: 32px; height: 32px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 9px rgba(53,111,214,.18); }
.competitor-sales-stat-icon svg { width: 18px; height: 18px; }
.competitor-sales-stat-2 .competitor-sales-stat-icon { border-color: rgba(47,100,83,.68); background: linear-gradient(145deg,#69ad98,#3f7d68 64%,#2f6453); box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 4px 9px rgba(63,125,104,.2); }
.competitor-sales-stat-4 .competitor-sales-stat-icon { border-color: rgba(105,78,27,.55); background: linear-gradient(145deg,#e0b56b,#aa7625 64%,#805817); box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 4px 9px rgba(145,99,31,.2); }
.competitor-sales-stat-4 { border-color: color-mix(in srgb,var(--competitor-warm) 34%,var(--create-card-border)); background: linear-gradient(145deg,color-mix(in srgb,var(--competitor-warm-soft) 58%,var(--create-card-bg)),var(--create-card-bg) 68%); }
.competitor-sales-stat > strong { position: relative; z-index: 1; margin-top: 2px; color: var(--text); font-size: 25px; line-height: 1.05; }
.competitor-sales-stat > small { position: relative; z-index: 1; margin-top: auto; color: var(--muted); line-height: 1.35; }
.competitor-sales-stat.accent { border-color: color-mix(in srgb,#d4a27f 70%,var(--create-card-border)); background: linear-gradient(145deg,#cc785c 0%,#b3603f 58%,#93482b 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 12px 28px rgba(140,70,45,.24); }
.competitor-sales-stat.accent::after { background: rgba(255,255,255,.07); }
.competitor-sales-stat.accent .competitor-sales-stat-head,
.competitor-sales-stat.accent > small { color: #f7e7de; }
.competitor-sales-stat.accent > strong { color: #fff; }
.competitor-sales-stat.accent .competitor-sales-stat-icon { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 5px 12px rgba(0,0,0,.12); }
.competitor-sales-section { padding: 17px; border: 1px solid var(--create-card-border); border-radius: 16px; background: var(--create-card-bg); box-shadow: var(--create-card-shadow); }
.competitor-sales-sku-section { border-color: color-mix(in srgb,var(--competitor-warm) 25%,var(--create-card-border)); box-shadow: var(--create-card-shadow),inset 0 3px 0 color-mix(in srgb,var(--competitor-warm) 34%,transparent); }
.competitor-sales-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.competitor-sales-section-icon { width: 42px; height: 42px; border-radius: 12px; }
.competitor-sales-section-icon svg,
.competitor-sales-stat-icon svg,
.competitor-seller-icon svg,
.competitor-sales-empty-icon svg,
.competitor-sales-hero-icon svg { stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.competitor-sales-section-icon svg { width: 23px; height: 23px; }
.competitor-sales-section-icon-sellers { border-color: rgba(47,100,83,.7); background: linear-gradient(145deg,#69ad98,#3f7d68 62%,#2f6453); box-shadow: inset 0 1px 0 rgba(255,255,255,.42),0 6px 14px rgba(63,125,104,.2),0 2px 3px rgba(38,83,68,.2); }
.competitor-sales-section-icon-skus { border-color: rgba(105,78,27,.58); background: linear-gradient(145deg,#e0b56b,#aa7625 62%,#805817); box-shadow: inset 0 1px 0 rgba(255,255,255,.42),0 6px 14px rgba(145,99,31,.2),0 2px 3px rgba(105,76,28,.18); }
.competitor-sales-section-copy { min-width: 0; }
.competitor-sales-step { display: block; margin-bottom: 1px; color: var(--competitor-accent); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.competitor-sales-section-head h3 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.3; }
.competitor-sales-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.competitor-sales-sellers { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.competitor-seller-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 13px; border: 1px solid var(--create-card-border); border-radius: 13px; background: color-mix(in srgb,var(--create-control-bg) 76%,var(--create-card-bg)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 3px 10px color-mix(in srgb,var(--shadow) 34%,transparent); }
.competitor-seller-head { display: flex; min-width: 0; align-items: center; gap: 9px; }
.competitor-seller-icon { width: 32px; height: 32px; border-radius: 9px; border-color: rgba(47,100,83,.65); background: linear-gradient(145deg,#69ad98,#3f7d68 62%,#2f6453); box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 4px 9px rgba(63,125,104,.18); }
.competitor-seller-icon svg { width: 17px; height: 17px; }
.competitor-seller-title { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.competitor-seller-title b { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.competitor-seller-title span { color: var(--muted); font-size: 10px; }
.competitor-seller-spp { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.competitor-seller-spp span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.competitor-seller-spp strong { font-size: 20px; line-height: 1.05; }
.competitor-seller-spp .good,.competitor-sales-table .good { color: #11864b; }
.competitor-seller-spp .warn,.competitor-sales-table .warn { color: #b36a00; }
.competitor-seller-spp .bad,.competitor-sales-table .bad { color: #c53030; }
.competitor-seller-metrics { grid-column: 1/-1; display: grid; gap: 6px; padding: 10px 2px 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 10px; }
.competitor-seller-metrics span { display: flex; justify-content: space-between; gap: 10px; }
.competitor-seller-metrics b { color: var(--text); }
.competitor-sales-table-wrap { max-height: none; overflow: auto; border: 1px solid var(--create-card-border); border-radius: 11px; background: var(--create-control-bg); box-shadow: inset 0 1px 3px rgba(45,68,99,.05); }
.competitor-sales-table { min-width: 1080px; }
.competitor-sales-table.grid thead th { position: sticky; top: 0; z-index: 2; height: 42px; border-bottom-color: color-mix(in srgb,var(--competitor-warm) 24%,var(--create-card-border)); background: color-mix(in srgb,var(--competitor-warm-soft) 66%,var(--create-card-bg)); color: var(--head-text); font-size: 10px; letter-spacing: .02em; }
.competitor-sales-table.grid td { padding-top: 10px; padding-bottom: 10px; border-bottom-color: var(--line-soft); vertical-align: middle; }
.competitor-sales-table.grid tr.is-incomplete { background: color-mix(in srgb,#e6a100 5%,transparent); }
.competitor-sales-table td.num small,.competitor-observed+small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.competitor-product { display: flex; max-width: 360px; flex-direction: column; gap: 4px; }
.competitor-product b { color: var(--text); font-size: 11px; }
.competitor-product span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-price-status { display: inline-flex; padding: 4px 7px; border: 1px solid color-mix(in srgb,#e6a100 30%,var(--create-card-border)); border-radius: 999px; background: color-mix(in srgb,#e6a100 10%,var(--create-card-bg)); color: #9a6200; font-size: 9px; font-weight: 750; white-space: nowrap; }
.competitor-observed { font-size: 10px; white-space: nowrap; }
.competitor-sales-empty { grid-column: 1/-1; display: flex; min-height: 140px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 22px; border: 1px dashed var(--create-control-border); border-radius: 15px; background: var(--create-card-bg); box-shadow: var(--create-card-shadow); text-align: center; }
.competitor-sales-empty > span:not(.competitor-sales-empty-icon) { max-width: 640px; color: var(--muted); line-height: 1.45; }
.competitor-sales-empty-icon { width: 42px; height: 42px; border-radius: 12px; }
.competitor-sales-empty-icon svg { width: 23px; height: 23px; }

@media (max-width:1250px) {
  .competitor-sales-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .competitor-sales-sellers { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .competitor-sales-view { padding: 12px; }
  .competitor-sales-head { flex-direction: column; align-items: stretch; padding: 18px; }
  .competitor-sales-date { width: auto; min-width: 0; }
  .competitor-sales-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .competitor-sales-section { padding: 14px; }
}
@media (max-width:560px) {
  .competitor-sales-hero-icon { width: 46px; height: 46px; border-radius: 13px; }
  .competitor-sales-hero-icon svg { width: 25px; height: 25px; }
  .competitor-sales-head h2 { font-size: 20px; }
  .competitor-sales-summary,.competitor-sales-sellers { grid-template-columns: 1fr; }
  .competitor-sales-stat { min-height: 122px; }
  .competitor-sales-meta { align-items: flex-start; flex-direction: column; }
  .competitor-sales-warning { margin-left: 0; }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1f1e1d;
  --card: #262624;
  --side: #262624;
  --side-bg: #232221;
  --side-bg-end: #1c1b1a;
  --side-text: #f0eee6;
  --side-muted: #a5a199;
  --side-line: #3a3835;
  --side-hover: #2e2c2a;
  --side-active: #3b2e26;
  --side-active-border: #e08d6d;
  --side-icon: #99948b;
  --line: #3a3835;
  --line-soft: #2f2d2b;
  --text: #e8e5da;
  --muted: #a5a199;
  --surface-2: #2e2c2a;
  --head-text: #b4b0a5;
  --hover: #302e2b;
  --cell: #262624;
  --arch: #333130;
  --switch-off: #4a4640;
  --knob: #d6d2c7;
  --shadow: rgba(0, 0, 0, .55);
  --tag-text: #d9a173;
  --tag-x: #b08d5e;
  --rec-border: #4a3c26;
  --blue: #8aa8cc;
  --blue-soft: #262b31;
  --green: #6bb58b;
  --green-soft: #232c26;
  --orange: #e08d6d;
  --orange-soft: #3a2b23;
  --priority-medium: #c9b26a;
  --red: #e0897a;
  --red-soft: #342723;
  --purple: #a893d9;
  --purple-soft: #2c2739;
  --topic-campaigns: #8aa8cc;
  --topic-owner: #6bb58b;
  --topic-ai: #a893d9;
  --topic-competitors: #e08d6d;
  --topic-keys: #7fc4d3;
  --modal-backdrop: rgba(0, 0, 0, .66);
  --modal-bg: #262624;
  --modal-head-bg: #302e2b;
  --modal-foot-bg: #232221;
  --modal-control-bg: #1c1b1a;
  --modal-border: rgba(200, 195, 180, .2);
  --modal-shadow: 0 28px 86px rgba(0, 0, 0, .6);
  --create-canvas-bg: #1f1e1d;
  --create-card-bg: #262624;
  --create-card-border: #3a3835;
  --create-control-bg: #1c1b1a;
  --create-control-border: #4a4640;
  --create-header-bg: #302e2b;
  --create-card-shadow: 0 10px 28px rgba(0, 0, 0, .24), 0 1px 2px rgba(0, 0, 0, .3);
}
/* Chromium/Windows может не передать наследуемый color-scheme нативному
   popup списка. Задаём его и палитру option явно для всех select дашборда. */
html[data-theme="light"] select,
html[data-theme="light"] option,
html[data-theme="light"] optgroup { color-scheme: light; }
html[data-theme="dark"] select,
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup { color-scheme: dark; }
select option,
select optgroup {
  background-color: var(--card);
  color: var(--text);
}
html[data-theme="dark"] select option:checked {
  background-color: var(--blue);
  color: #101722;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 13px/1.45 var(--brand-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Поля и кнопки нативно не наследуют шрифт страницы — задаём явно, иначе
   половина дашборда осталась бы на системном Arial. */
button, input, select, textarea, optgroup { font-family: var(--brand-sans); }
h1, h2, h3, h4, .brand, .side-brand, .side-item-title { letter-spacing: -.015em; }
/* Цифры в таблицах должны стоять в колонку, иначе суммы не сравнить глазами. */
table, .num, .num-input, .strong-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Серифом — только длинный читаемый текст: пояснения и разборы ИИ.
   Таблицы, кнопки и цифры остаются гротеском. */
.seo-hero p,
.seo-disclaimer,
.op-section p,
.op-hero p,
.aa-ai-result,
.passive-ai-result,
.passive-ai-summary,
.assistant-msg,
.business-queue-body p,
.empty-state p {
  font-family: var(--brand-serif);
  font-size: 14px;
  line-height: 1.6;
}
.muted { color: var(--muted); }
.spacer { flex: 1; }
.hidden { display: none !important; }
.num { text-align: right; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { font-size: 15px; font-weight: 700; }
.topbar-right { display: flex; gap: 12px; align-items: center; }
.topbar-actions { display: inline-flex; gap: 8px; align-items: center; }

.statusbar {
  display: flex; gap: 18px; padding: 10px 16px; flex-wrap: wrap;
  align-items: center;
}
.stat-chip { display: flex; align-items: center; gap: 6px; }
.stat-chip.guard-ok,
.stat-chip.guard-alert {
  padding: 2px 8px;
  border-radius: 999px;
}
.stat-chip.guard-ok {
  background: var(--green-soft);
  color: var(--green);
}
.stat-chip.guard-alert {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid var(--red);
  font-weight: 700;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.passive-topic-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 16px 16px;
}
/* Короткие тематические разделы не должны схлопывать высоту страницы и
   сбрасывать позицию прокрутки при возврате к таблице кампаний. */
#view-ads { min-height: calc(100vh + 120px); }
#view-ads.passive-campaigns-viewport { min-height: 0; }
.passive-topic-tab {
  --topic-accent: var(--topic-campaigns);
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon label new"
    "icon meta new";
  align-items: center;
  gap: 2px 10px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--topic-accent) 45%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--topic-accent) 12%, var(--card));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow) 40%, transparent);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.passive-topic-tab[data-passive-topic="campaigns"] { --topic-accent: var(--topic-campaigns); }
.passive-topic-tab[data-passive-topic="owner"] { --topic-accent: var(--topic-owner); }
.passive-topic-tab[data-passive-topic="ai"] { --topic-accent: var(--topic-ai); }
.passive-topic-tab[data-passive-topic="competitors"] { --topic-accent: var(--topic-competitors); }
.passive-topic-tab[data-active-topic="campaigns"] { --topic-accent: var(--topic-campaigns); }
.passive-topic-tab[data-active-topic="ai"] { --topic-accent: var(--topic-ai); }
.passive-topic-tab:hover {
  border-color: color-mix(in srgb, var(--topic-accent) 75%, var(--line));
  background: color-mix(in srgb, var(--topic-accent) 17%, var(--card));
}
.passive-topic-tab.active {
  border-color: var(--topic-accent);
  background: color-mix(in srgb, var(--topic-accent) 22%, var(--card));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--topic-accent) 88%, transparent),
    0 0 0 1px color-mix(in srgb, var(--topic-accent) 32%, transparent),
    0 7px 20px color-mix(in srgb, var(--topic-accent) 20%, var(--shadow));
}
.passive-topic-tab.active .passive-topic-label { color: var(--topic-accent); }
.passive-topic-tab.active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--topic-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--topic-accent) 26%, transparent),
              0 0 9px color-mix(in srgb, var(--topic-accent) 62%, transparent);
  pointer-events: none;
}
.passive-topic-tab.has-new:not(.active) {
  border-color: color-mix(in srgb, var(--topic-accent) 78%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--topic-accent) 24%, transparent);
}
.passive-topic-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--topic-accent) 22%, var(--surface-2));
  color: var(--topic-accent);
  font-size: 17px;
  font-weight: 800;
}
.passive-topic-label { grid-area: label; font-weight: 750; }
.passive-topic-meta { grid-area: meta; color: var(--muted); font-size: 12px; }
.passive-topic-new {
  grid-area: new;
  align-self: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--topic-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
[data-theme="dark"] .passive-topic-tab {
  background: color-mix(in srgb, var(--topic-accent) 16%, var(--card));
  border-color: color-mix(in srgb, var(--topic-accent) 50%, var(--line));
}
[data-theme="dark"] .passive-topic-tab:hover {
  background: color-mix(in srgb, var(--topic-accent) 21%, var(--card));
}
[data-theme="dark"] .passive-topic-tab.active {
  border-color: var(--topic-accent);
  background: color-mix(in srgb, var(--topic-accent) 27%, var(--card));
  box-shadow:
    inset 0 0 0 1px var(--topic-accent),
    0 0 0 1px color-mix(in srgb, var(--topic-accent) 42%, transparent),
    0 8px 24px color-mix(in srgb, var(--topic-accent) 24%, rgba(0, 0, 0, .5));
}
.passive-topic-pane { min-width: 0; }
.passive-ai-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.passive-ai-workspace-head .muted { margin-top: 3px; }
@media (max-width: 1100px) {
  .passive-topic-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.toolbar {
  display: flex; gap: 8px; padding: 0 16px 10px; align-items: center; flex-wrap: wrap;
}
@media (max-width: 760px) {
  .passive-topic-tabs { grid-template-columns: 1fr; margin-inline: 12px; }
  .passive-topic-tab { min-height: 58px; }
}
.filterbar .input,
.filterbar .drop-btn { border-radius: 999px; background: var(--surface-2); }
.actionbar #aaRowsInfo,
.actionbar #rowsInfo { white-space: nowrap; }
.campaign-filterbar {
  display: grid;
  grid-template-columns: var(--table-search-width) minmax(430px, 1fr) minmax(270px, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-soft);
}
.campaign-filter-set,
.campaign-table-settings,
.campaign-create-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
}
.control-set-label {
  padding: 0 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.campaign-period-set { justify-self: end; }
.campaign-reset {
  min-height: 32px;
  padding-inline: 8px;
  border-color: transparent;
  color: var(--muted);
}
.campaign-reset:hover { color: var(--text); background: var(--hover); }
.campaign-actionbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0 12px;
}
.campaign-table-settings .input,
.campaign-table-settings .btn,
.campaign-create-actions .btn {
  min-height: 32px;
  background: var(--card);
}
.campaign-create-actions #createBtn { background: var(--blue); }
.campaign-actionbar #createBtn { min-height: 38px; }
.campaign-actionbar #draftsBtn { min-height: 38px; }
@media (max-width: 1250px) {
  .campaign-filterbar { grid-template-columns: var(--table-search-width) minmax(250px, 1fr) auto; }
  .campaign-filter-set { grid-column: 1 / -1; grid-row: 2; }
  .campaign-period-set { grid-column: 2; grid-row: 1; justify-self: start; }
  .campaign-reset { grid-column: 3; grid-row: 1; }
  .campaign-actionbar { grid-template-columns: minmax(220px, 1fr) auto; }
  .campaign-table-settings { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .campaign-actionbar #rowsInfo { grid-column: 1; grid-row: 1; }
  .campaign-create-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  .campaign-filterbar,
  .campaign-actionbar { grid-template-columns: 1fr; }
  .campaign-filterbar > *,
  .campaign-filter-set,
  .campaign-period-set,
  .campaign-reset,
  .campaign-actionbar > * { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .campaign-actionbar #rowsInfo,
  .campaign-actionbar .campaign-table-settings,
  .campaign-actionbar .campaign-create-actions { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .campaign-filter-set,
  .campaign-table-settings,
  .campaign-create-actions { align-items: stretch; flex-direction: column; }
  .campaign-filter-set > *,
  .campaign-table-settings > *,
  .campaign-create-actions > *,
  .campaign-period-set .aa-range-btn,
  .campaign-actionbar #createBtn,
  .campaign-actionbar #draftsBtn { width: 100%; }
}
.input, .btn {
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  min-height: 36px; padding: 7px 10px; font: inherit; color: inherit;
}
.input:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
:where(button, input, select, textarea, a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 72%, transparent);
  outline-offset: 2px;
}
.search-wrap { position: relative; display: inline-flex; align-items: center; }
#search, #aaSearch, .sales-search-wrap #salesSearch { width: var(--table-search-width); padding-right: 28px; }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 13px; line-height: 1; padding: 4px 5px; border-radius: 50%;
}
.search-clear { min-height: 0; }
.search-clear:hover { background: var(--hover); color: var(--text); }
.btn { cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--blue); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.ghost { background: transparent; }
.btn.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}
.btn.close { font-size: 14px; }
.btn.ai { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.ai:hover { border-color: var(--purple); filter: brightness(1.08); }
.btn.ai-lite { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); }
.btn.ai-lite:hover { border-color: var(--purple); filter: brightness(1.04); }
.ai-help-tooltip {
  position: fixed;
  z-index: 4000;
  width: min(380px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid var(--purple);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  pointer-events: none;
}
.ai-help-title {
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 5px;
}
.ai-help-body {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
}
.btn:disabled,
button:disabled {
  opacity: .68;
  cursor: not-allowed;
}
.global-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(8, 12, 20, .16);
}
[data-theme="light"] .global-loader { background: rgba(243, 241, 234, .38); }
.global-loader-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  justify-content: center;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 18px 48px var(--shadow);
  font-weight: 700;
}
.global-loader-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .75s linear infinite;
  flex: 0 0 auto;
}

.view[aria-busy="true"] .table-wrap,
.view[aria-busy="true"] .sales-body,
.view[aria-busy="true"] .rep-wrap { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.badge { background: var(--blue-soft); color: var(--blue); border-radius: 10px; padding: 0 6px; font-size: 11px; }
.badge:empty { display: none; }

.period { display: inline-flex; align-items: center; gap: 6px; }
.period .input { padding: 6px 8px; }
.period input[type=date] { width: 140px; }
.aa-range-wrap { position: relative; }
.aa-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 276px;
  min-height: 36px;
  cursor: pointer;
  text-align: left;
}
.aa-range-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex: 0 0 auto;
}
.aa-range-label {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.aa-range-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2200;
  width: 360px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 40px var(--shadow);
}
.aa-range-menu.floating {
  position: fixed;
  top: var(--range-menu-top, 120px);
  left: var(--range-menu-left, 16px);
  right: auto;
  max-height: var(--range-menu-max-height, calc(100vh - 24px));
}
.aa-range-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.aa-range-quick button,
.aa-range-nav button,
.aa-range-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.aa-range-quick button {
  height: 32px;
  padding: 0 8px;
}
.aa-range-quick button:hover,
.aa-range-nav button:hover,
.aa-range-day:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.aa-range-nav {
  display: grid;
  grid-template-columns: 36px 36px 1fr 36px 36px;
  gap: 8px;
  align-items: center;
  padding: 14px 0 10px;
}
.aa-range-nav button {
  height: 36px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.aa-range-title {
  text-align: center;
  font-size: 15px;
}
.aa-range-weekdays,
.aa-range-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  gap: 4px;
}
.aa-range-weekdays {
  padding: 8px 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.aa-range-day {
  height: 38px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.aa-range-day.outside { color: var(--muted); }
.aa-range-day.outside:not(.selected):not(.start):not(.end) { opacity: .55; }
.aa-range-day.today { outline: 1px solid var(--blue); outline-offset: -3px; }
.aa-range-day.selected { background: var(--blue-soft); color: var(--text); }
.aa-range-day.start,
.aa-range-day.end,
.aa-range-day.anchor {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  font-weight: 700;
}
@media (max-width: 760px) {
  .aa-range-btn { min-width: min(100%, 320px); }
  .aa-range-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 126px;
    width: auto;
  }
  .aa-range-menu.floating {
    left: var(--range-menu-left, 12px);
    right: auto;
    top: var(--range-menu-top, 126px);
    width: min(360px, calc(100vw - 24px));
  }
}

.dropdown { position: relative; }
.drop-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow); padding: 8px; min-width: 240px;
  max-height: 320px; overflow: auto;
}
.drop-menu.open { display: block; }
.drop-menu label { display: flex; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; align-items: center; }
.drop-menu label:hover { background: var(--blue-soft); }
.drop-menu .cnt { margin-left: auto; color: var(--muted); }
.drop-sep { border-top: 1px solid var(--line); margin: 6px 0; }
.drop-menu .menu-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text);
  font: inherit; padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.drop-menu .menu-item:hover { background: var(--purple-soft); color: var(--purple); }
.drop-menu .menu-item .menu-hint { display: block; color: var(--muted); font-size: 11px; }
.ai-panel { border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; }
.tag-mode { display: flex; gap: 10px; padding: 4px 6px; }

.table-wrap {
  margin: 0 16px 70px;
  /* Таблица скроллится внутри себя — и по горизонтали (широкие колонки),
     и по вертикали. Тогда sticky-шапка липнет к верху таблицы, а не окна,
     и строки не прячутся под заголовком даже когда их одна-две. */
  overflow: auto;
  max-height: calc(100vh - 200px);
  border: 1px solid var(--line); border-radius: 10px;
}
table.grid {
  width: 100%; border-collapse: collapse; background: var(--card);
}
.grid th, .grid td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.grid th.num, .grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.num, .grid tfoot td { white-space: nowrap; }
.grid thead th {
  background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--head-text);
  position: sticky; top: 0; z-index: 10;
}
.grid tfoot td {
  position: sticky; bottom: 0; z-index: 9;
}
.grid tbody tr:hover { background: var(--hover); }
.grid tfoot td { font-weight: 700; background: var(--surface-2); }
.c-check { width: 30px; }
.campaign-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
}
.camp-id { color: var(--blue); font-weight: 600; }
.sku-link, .camp-id-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.sku-link:hover, .camp-id-link:hover { text-decoration: underline; }
.camp-title { color: var(--muted); font-size: 12px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.availability-filter { min-width: 128px; }
.availability-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 3px;
}
.stock-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line);
  vertical-align: middle;
}
.stock-light.available { background: var(--green); }
.stock-light.unavailable { background: var(--red); }
.stock-light.unknown { background: var(--muted); }
.campaign-main .stock-light {
  width: 9px;
  height: 9px;
}

.chip {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.chip.run { background: var(--green-soft); color: var(--green); }
.chip.pause { background: var(--orange-soft); color: var(--orange); }
.chip.arch { background: var(--arch); color: var(--muted); }
.chip.over { background: var(--red-soft); color: var(--red); }

.tag-chip {
  display: inline-flex; align-items: center; gap: 4px; margin: 1px 2px;
  background: var(--orange-soft); color: var(--tag-text); border-radius: 10px;
  padding: 1px 7px; font-size: 11px; white-space: nowrap;
}
.tag-chip .x { cursor: pointer; color: var(--tag-x); font-weight: 700; }
.tag-add { cursor: pointer; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 0 7px; font-size: 12px; }
.tag-add:hover { color: var(--blue); border-color: var(--blue); }

.gswitch {
  width: 34px; height: 18px; border-radius: 10px; background: var(--switch-off); position: relative; cursor: pointer;
  display: inline-block; vertical-align: middle; transition: background .15s;
}
.gswitch::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--knob); top: 2px; left: 2px; transition: left .15s;
}
.gswitch.on { background: var(--green); }
.gswitch.on::after { left: 18px; }
.gswitch.pending {
  cursor: wait;
  opacity: .72;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  animation: guard-pending 1s ease-in-out infinite alternate;
}
@keyframes guard-pending {
  from { opacity: .55; }
  to { opacity: .9; }
}

.row-actions { display: flex; gap: 4px; }
.icon-btn { border: 1px solid var(--line); background: var(--card); border-radius: 6px; cursor: pointer; padding: 3px 7px; font-size: 12px; }
.icon-btn:hover { border-color: var(--blue); color: var(--blue); }

.table-footer { padding: 10px 0; text-align: center; }

.bulkbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 50;
  background: #262624; color: #fff; border-radius: 12px; padding: 9px 14px;
  display: flex; gap: 7px; align-items: center; box-shadow: 0 10px 30px rgba(10,20,40,.35);
  max-width: calc(100vw - 24px);
}
.bulkbar .bulk-count { white-space: nowrap; font-weight: 650; margin-right: 2px; }
.bulkbar .bulk-sep { width: 1px; align-self: stretch; background: #45536d; margin: 2px 2px; }
.bulkbar .btn { background: #37352f; border-color: #4c4840; color: #fff; }
.bulkbar .btn:hover { border-color: #fff; }
.bulkbar .btn.primary { background: var(--blue); border-color: var(--blue); }
.bulkbar .btn.danger { background: #7c2d32; border-color: #a54850; }
.bulkbar .btn.danger:hover { background: #913941; }
.bulkbar .bulk-clear { padding-inline: 10px; }
.bulk-menu { position: relative; }
.bulk-menu > summary { list-style: none; cursor: pointer; user-select: none; white-space: nowrap; }
.bulk-menu > summary::-webkit-details-marker { display: none; }
.bulk-menu[open] > summary { border-color: #f0eee6; background: #413d36; }
.bulk-menu-pop {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: max-content; min-width: 220px;
  display: grid; gap: 6px; padding: 8px; border: 1px solid #45536d; border-radius: 10px;
  background: #262624; box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.bulk-menu-pop .btn { width: 100%; text-align: left; }
.bulk-menu-pop .muted { max-width: 260px; padding: 3px 5px 1px; font-size: 11px; line-height: 1.35; }
.bulk-more .bulk-menu-pop { left: auto; right: 0; min-width: 190px; }

.bulk-edit-drawer { width: min(920px, 72vw); }

.rep-unit-bulk-modal { width: min(900px, calc(100vw - 32px)); max-height: min(880px, calc(100dvh - 28px)); overflow: auto; }
.rep-unit-bulk-heading { display: flex; align-items: center; gap: 12px; }
.rep-unit-bulk-icon {
  display: inline-grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center;
  border: 1px solid color-mix(in srgb, var(--orange) 68%, var(--line)); border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--orange-soft) 78%, var(--card)), color-mix(in srgb, var(--blue) 16%, var(--card)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 7px 18px color-mix(in srgb, var(--shadow) 55%, transparent);
  color: var(--orange); font-size: 19px; font-weight: 800;
}
.rep-unit-bulk-section {
  margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--card));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent);
}
.rep-unit-bulk-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.rep-unit-bulk-section-head strong, .rep-unit-bulk-section-head span { display: block; }
.rep-unit-bulk-section-head strong { font-size: 14px; }
.rep-unit-bulk-section-head span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.rep-unit-bulk-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rep-unit-bulk-field {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px 9px; min-width: 0;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rep-unit-bulk-field:hover { border-color: color-mix(in srgb, var(--blue) 52%, var(--line)); transform: translateY(-1px); }
.rep-unit-bulk-field.is-enabled { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 14%, transparent); }
.rep-unit-bulk-field > input { margin-top: 2px; accent-color: var(--blue); }
.rep-unit-bulk-field-copy { min-width: 0; }
.rep-unit-bulk-field-copy b, .rep-unit-bulk-field-copy small { display: block; }
.rep-unit-bulk-field-copy b { font-size: 13px; }
.rep-unit-bulk-field-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.rep-unit-bulk-input { position: relative; display: block; grid-column: 1 / -1; }
.rep-unit-bulk-input .input { width: 100%; padding-right: 28px; background: var(--surface-2); }
.rep-unit-bulk-input .input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent); }
.rep-unit-bulk-input .input:disabled { opacity: .56; cursor: not-allowed; }
.rep-unit-bulk-input i { position: absolute; top: 50%; right: 10px; translate: 0 -50%; color: var(--muted); font-style: normal; pointer-events: none; }
.rep-unit-bulk-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.rep-unit-bulk-summary-card { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.rep-unit-bulk-summary-card span, .rep-unit-bulk-summary-card b { display: block; }
.rep-unit-bulk-summary-card span { color: var(--muted); font-size: 10px; }
.rep-unit-bulk-summary-card b { margin-top: 4px; font-size: 18px; }
.rep-unit-bulk-orphans { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--orange); border-radius: 9px; background: var(--orange-soft); font-size: 11px; line-height: 1.45; }
.rep-unit-bulk-orphans.is-blocked { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--card)); color: var(--red); font-weight: 650; }
.rep-unit-bulk-list { max-height: 240px; margin-top: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.rep-unit-bulk-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.rep-unit-bulk-row:last-child { border-bottom: 0; }
.rep-unit-bulk-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-unit-bulk-row span { color: var(--muted); white-space: nowrap; }
.rep-unit-bulk-warning { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--orange); border-radius: 8px; background: var(--orange-soft); font-size: 11px; line-height: 1.45; }
@media (max-width: 760px) {
  .rep-unit-bulk-modal { width: calc(100vw - 16px); }
  .rep-unit-bulk-fields, .rep-unit-bulk-summary { grid-template-columns: 1fr; }
  .rep-unit-bulk-row { grid-template-columns: 1fr; gap: 3px; }
  .rep-unit-bulk-row span { white-space: normal; }
  .rep-unit-bulk-modal .modal-foot { align-items: stretch; }
  .rep-unit-bulk-modal .modal-foot .btn { width: 100%; }
}
.bulk-edit-overview {
  display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 18px;
  border-bottom: 1px solid var(--modal-border); background: color-mix(in srgb, var(--modal-head-bg) 72%, transparent);
}
.bulk-edit-overview .info-item { white-space: nowrap; }
.bulk-edit-tabs { display: flex; gap: 6px; padding: 12px 18px 0; overflow-x: auto; }
.bulk-edit-tabs .btn { white-space: nowrap; }
.bulk-edit-body { padding: 14px 18px 18px; overflow: auto; flex: 1 1 auto; }
.bulk-edit-panel { display: grid; gap: 13px; }
.bulk-field-mask { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.bulk-field-mask label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.bulk-template-field { min-width: 220px; }
.bulk-template-field .input { width: 220px; }
.bulk-sch-grid { margin: 0; overflow: auto; }
.bulk-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 4px; }
.bulk-budget-field { max-width: 440px; }
.bulk-bid-field { max-width: 440px; }
.bulk-budget-total {
  padding: 16px; border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 9px; background: color-mix(in srgb, var(--blue) 10%, var(--card));
  font-size: 18px; font-weight: 700;
}
.bulk-tag-remove-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.bulk-tag-remove-field legend { margin-bottom: 8px; padding: 0; }
.bulk-tag-options { display: flex; flex-wrap: wrap; gap: 8px; min-height: 38px; }
.bulk-tag-choice {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  cursor: pointer; user-select: none;
}
.bulk-tag-choice:hover { border-color: var(--blue); }
.bulk-tag-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--red) 60%, var(--line));
  background: color-mix(in srgb, var(--red) 12%, var(--card)); color: var(--red);
}
.bulk-tag-choice input { margin: 0; accent-color: var(--red); }
.bulk-tag-choice em { color: var(--muted); font-size: 11px; font-style: normal; }
.bulk-tag-empty { align-self: center; color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .bulkbar { left: 8px; right: 8px; bottom: 8px; transform: none; padding: 8px; overflow: visible; }
  .bulkbar .bulk-count { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
  .bulk-menu > summary, .bulkbar > .btn { padding-inline: 9px; }
  .bulk-edit-drawer { width: calc(100vw - 16px); max-width: none; }
  .bulk-edit-overview { gap: 5px 12px; }
  .bulk-panel-foot { align-items: stretch; flex-direction: column; }
  .bulk-panel-foot .btn { width: 100%; }
}

.modal-back {
  position: fixed; inset: 0; background: var(--modal-backdrop); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px;
  overflow: auto;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--modal-bg); border: 1px solid var(--modal-border); border-radius: 8px;
  padding: 16px; width: 460px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px); overflow: auto;
  box-shadow: var(--modal-shadow);
  outline: 1px solid rgba(111, 155, 240, .08);
}
.modal-wide { width: min(980px, calc(100vw - 48px)); }
.rep-add-modal { width: min(880px, calc(100vw - 48px)); }
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin: -16px -16px 14px; padding: 14px 16px 12px;
  background: var(--modal-head-bg); border-bottom: 1px solid var(--modal-border);
  position: sticky; top: -16px; z-index: 2;
}
.modal-head b { color: var(--text); }
.modal-foot {
  display: flex; gap: 8px; margin: 16px -16px -16px; padding: 12px 16px 14px;
  align-items: center; background: var(--modal-foot-bg); border-top: 1px solid var(--modal-border);
  position: sticky; bottom: -16px; z-index: 2;
}
.modal .input { width: 100%; margin: 4px 0; }
.modal .input,
.modal select.input {
  background: var(--modal-control-bg);
  border-color: color-mix(in srgb, var(--modal-border) 80%, var(--line) 20%);
}
.modal select.input, .sch-controls .input { width: auto; }
.modal .btn.close {
  width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-color: var(--modal-border); background: rgba(255, 255, 255, .03);
  font-size: 17px; line-height: 1;
}
.modal .btn.close:hover { background: var(--hover); color: var(--blue); }
.modal-back-drawer {
  align-items: stretch;
  justify-content: flex-end;
  padding: 16px;
}
.modal-drawer {
  width: min(1180px, 68vw);
  max-width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  border-left-color: color-mix(in srgb, var(--blue) 34%, var(--modal-border) 66%);
  box-shadow: -28px 0 90px rgba(0, 0, 0, .46);
}
.modal-drawer .modal-head,
.modal-drawer .modal-foot {
  margin: 0;
  position: relative;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
}
.modal-drawer .modal-head { padding: 16px 18px 14px; }
.modal-drawer .modal-foot { padding: 12px 18px 14px; margin-top: 14px; }
.modal-drawer > .editor-info,
.modal-drawer > .editor-tags,
.modal-drawer > .sch-controls,
.modal-drawer > .hint,
.modal-drawer > .create-mode-switch,
.modal-drawer > .create-form,
.modal-drawer > .sch-grid {
  margin-left: 18px;
  margin-right: 18px;
}
.modal-drawer > .editor-info,
.modal-drawer > .create-form { margin-top: 16px; }
.modal-drawer > .sch-grid {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  padding-bottom: 4px;
}
.create-campaign-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  background: var(--create-canvas-bg);
  scrollbar-gutter: stable;
}
.create-campaign-body > .create-section + .create-section { margin-top: 16px; }
.create-campaign-body .create-mode-switch { margin-top: 16px; }
.create-campaign-body .create-form { margin-top: 16px; }
.create-campaign-body .sch-grid {
  min-height: 220px;
  max-height: 280px;
  overflow: auto;
  padding-bottom: 4px;
}
.create-campaign-drawer > .modal-foot { margin-top: 0; }
.create-campaign-drawer .modal-head {
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--create-header-bg);
  box-shadow: 0 1px 0 var(--modal-border);
  z-index: 3;
}
.create-campaign-drawer .modal-foot {
  background: var(--create-card-bg);
  box-shadow: 0 -5px 18px rgba(45, 68, 99, .06);
}
.create-campaign-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.create-campaign-title b { display: block; margin-bottom: 2px; font-size: 16px; }
.create-title-icon,
.create-section-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #6c9ae1 0%, #35619e 62%, #294d82 100%);
  border: 1px solid rgba(38, 75, 128, .64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px rgba(53, 97, 158, .22), 0 2px 3px rgba(35, 67, 111, .22);
}
.create-title-icon::after,
.create-section-icon::after {
  content: "";
  position: absolute;
  inset: 1px 1px 48%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), transparent);
  pointer-events: none;
}
.create-title-icon { width: 40px; height: 40px; border-radius: 11px; }
.create-title-icon svg { width: 23px; height: 23px; }
.create-section-icon { width: 42px; height: 42px; border-radius: 12px; }
.create-section-icon svg { width: 24px; height: 24px; }
.create-title-icon svg,
.create-section-icon svg,
.create-campaign-drawer .btn.close svg {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.create-campaign-drawer .btn.close svg { width: 19px; height: 19px; }
.create-campaign-drawer .btn.close {
  border-radius: 10px;
  background: var(--create-card-bg);
  box-shadow: 0 2px 5px rgba(45, 68, 99, .08);
}
.create-section {
  padding: 16px;
  border: 1px solid var(--create-card-border);
  border-radius: 14px;
  background: var(--create-card-bg);
  box-shadow: var(--create-card-shadow);
}
.create-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.create-section-copy { min-width: 0; }
.create-section-copy h3 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.3; }
.create-section-copy p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.create-step-label {
  display: block;
  margin-bottom: 1px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.create-section-icon-schedule {
  color: #fff;
  background: linear-gradient(145deg, #69ad98 0%, #3f7d68 62%, #2f6453 100%);
  border-color: rgba(47, 100, 83, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 6px 14px rgba(63, 125, 104, .2), 0 2px 3px rgba(38, 83, 68, .2);
}
.create-campaign-drawer .create-section .input,
.create-campaign-drawer .create-section select.input {
  background: var(--create-control-bg);
  border-color: var(--create-control-border);
  box-shadow: inset 0 1px 2px rgba(45, 68, 99, .06), 0 1px 0 rgba(255, 255, 255, .65);
}
[data-theme="dark"] .create-campaign-drawer .create-section .input,
[data-theme="dark"] .create-campaign-drawer .create-section select.input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .24), 0 1px 0 rgba(255, 255, 255, .03);
}
.create-campaign-drawer .create-section .input:hover,
.create-campaign-drawer .create-section select.input:hover { border-color: color-mix(in srgb, var(--blue) 60%, var(--create-control-border)); }
.create-campaign-drawer .create-section .input:focus,
.create-campaign-drawer .create-section select.input:focus {
  border-color: var(--blue);
  outline: 3px solid color-mix(in srgb, var(--blue) 18%, transparent);
  outline-offset: 0;
}
.create-campaign-drawer .create-mode-switch {
  width: fit-content;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--create-card-border);
  border-radius: 11px;
  background: var(--create-canvas-bg);
}
.create-campaign-drawer .create-mode-switch .btn.seg {
  min-height: 34px;
  padding: 6px 16px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
.create-campaign-drawer .create-mode-switch .btn.seg.on {
  border-color: color-mix(in srgb, var(--blue) 72%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 86%, #fff), var(--blue));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 7px rgba(53, 97, 158, .2);
}
.create-schedule-section .sch-controls {
  margin: 14px 0 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--create-canvas-bg) 68%, var(--create-card-bg));
}
.create-schedule-section > .hint { margin: 0 2px 8px; }
.create-schedule-section .sch-grid {
  padding: 9px;
  border: 1px solid var(--create-card-border);
  border-radius: 10px;
  background: var(--create-control-bg);
  box-shadow: inset 0 1px 3px rgba(45, 68, 99, .05);
}
.create-schedule-section .sch-table td { border-color: var(--create-card-border); }
.create-schedule-section .sch-table td:not(.on) { background: color-mix(in srgb, var(--create-canvas-bg) 46%, var(--create-control-bg)); }
.create-campaign-drawer #crSummary {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--create-canvas-bg);
  color: var(--text);
  font-weight: 650;
}
.hint { font-size: 12px; margin: 6px 0; }

/* ---------- AI-помощник (плавающая кнопка + шторка чата) ---------- */
.assistant-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  z-index: 60;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .30);
}
.assistant-drawer {
  width: min(520px, 92vw);
  border-left: 3px solid var(--purple);
}
.assistant-body {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chip {
  border: 1px solid var(--purple);
  background: var(--purple-soft);
  color: var(--purple);
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.as-chip:hover { filter: brightness(1.05); }
.as-msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.as-msg.user {
  align-self: flex-end;
  background: var(--purple-soft);
  border: 1px solid var(--purple);
  white-space: pre-wrap;
}
.as-msg.ai {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
}
.as-msg.error {
  align-self: flex-start;
  border: 1px solid var(--red, #c0392b);
  color: var(--red, #c0392b);
  background: transparent;
}
.as-msg .as-note { display: block; margin-top: 6px; font-size: 11px; opacity: .65; }
.as-retry { margin-top: 6px; }
.as-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--purple);
  font-size: 13px;
  padding: 6px 2px;
}
.as-typing .dots { display: inline-flex; gap: 3px; }
.as-typing .dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  animation: as-pulse 1.2s infinite ease-in-out;
}
.as-typing .dots i:nth-child(2) { animation-delay: .2s; }
.as-typing .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes as-pulse {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}
.assistant-foot { display: flex; gap: 10px; align-items: flex-end; }
.assistant-foot textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 40px;
  font-family: inherit;
}

.comp-modal {
  width: min(860px, calc(100vw - 48px));
}
.aa-ozz-modal {
  width: min(980px, calc(100vw - 48px));
}
.aa-ozz-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}
.aa-ozz-summary b {
  color: var(--text);
}
.aa-ozz-body {
  max-height: min(62vh, 620px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.aa-ozz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.aa-ozz-table th,
.aa-ozz-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.aa-ozz-table th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
  text-align: left;
}
.aa-ozz-table .is-aggregated {
  color: var(--muted);
}

@media (max-width: 760px) {
  .modal-back {
    padding: 12px;
  }
  .modal,
  .modal-wide,
  .comp-modal,
  .aa-ozz-modal,
  .passive-ai-modal {
    width: 100%;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .modal-foot {
    flex-wrap: wrap;
  }
  .modal-back-drawer {
    padding: 0;
  }
  .modal-drawer {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .modal-drawer .modal-head,
  .modal-drawer .modal-foot {
    padding-left: 12px;
    padding-right: 12px;
  }
  .modal-drawer > .editor-info,
  .modal-drawer > .editor-tags,
  .modal-drawer > .sch-controls,
  .modal-drawer > .hint,
  .modal-drawer > .create-form,
  .modal-drawer > .sch-grid {
    margin-left: 12px;
    margin-right: 12px;
  }
  .create-campaign-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .comp-controls {
    align-items: stretch;
    flex-direction: column;
  }
}

.passive-ai-modal {
  width: min(980px, calc(100vw - 48px));
}
.passive-ai-controls {
  display: grid;
  grid-template-columns: 220px 260px 120px 130px;
  justify-content: start;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.passive-ai-controls .input { width: 100%; }
.passive-ai-controls label {
  min-width: 0;
}
.passive-ai-controls label > span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
}
.passive-ai-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  margin-top: 12px;
}
.passive-ai-tile {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.passive-ai-tile.good { border-color: var(--green); background: var(--green-soft); }
.passive-ai-tile.warn { border-color: var(--orange); background: var(--orange-soft); }
.passive-ai-tile.bad { border-color: var(--red); background: var(--red-soft); }
.passive-ai-tile .tile-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.passive-ai-tile .tile-value { font-size: 17px; font-weight: 700; }
.passive-ai-tile .tile-delta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.passive-ai-tile .tile-delta.up { color: var(--green); }
.passive-ai-tile .tile-delta.down { color: var(--red); }
.passive-ai-cards { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.passive-ai-group-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.passive-ai-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.passive-ai-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
.passive-ai-money {
  white-space: nowrap;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
}
.passive-ai-money.bad { color: var(--red); background: var(--red-soft); }
.passive-ai-money.good { color: var(--green); background: var(--green-soft); }
.passive-ai-why {
  margin: 4px 0 6px;
  padding-left: 18px;
}
.passive-ai-why li { margin: 2px 0; }
.passive-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px 0;
}
.passive-ai-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
}
.passive-ai-chip {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  cursor: pointer;
}
.passive-ai-chip:hover { border-color: var(--blue); background: var(--blue-soft); }
.passive-ai-chip .chip-metrics { color: var(--muted); white-space: normal; }
.passive-ai-sku-copy {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.passive-ai-sku-copy:hover { background: var(--surface-2); color: var(--text); }
.passive-ai-sku-copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.passive-ai-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 2px;
}
.passive-ai-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.passive-ai-lifecycle {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.passive-ai-lifecycle.is-unavailable { color: var(--orange); }
.passive-ai-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}
.btn.small { padding: 4px 10px; font-size: 12px; }
.passive-ai-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.passive-ai-result {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cell);
  white-space: pre-wrap;
  line-height: 1.48;
}
.passive-ai-result.error {
  color: var(--red);
  background: var(--red-soft);
}
.passive-spp-panel {
  margin: 0 16px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.passive-spp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.passive-spp-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.passive-spp-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.passive-spp-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.passive-spp-card {
  min-height: 66px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-2);
}
.passive-spp-card b {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}
.passive-spp-card span {
  color: var(--muted);
  font-size: 12px;
}
.passive-spp-actions {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--cell);
}
.passive-spp-actions div,
.passive-spp-row-actions div {
  position: relative;
  padding-left: 14px;
}
.passive-spp-actions div::before,
.passive-spp-row-actions div::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
.passive-spp-rows {
  display: grid;
  gap: 8px;
}
.passive-spp-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(280px, 1.2fr) minmax(320px, 1.6fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cell);
}
.passive-spp-title,
.passive-spp-sku {
  color: var(--text);
  font-weight: 700;
}
.passive-spp-sku {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.passive-spp-name {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passive-spp-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 4px 10px;
  font-variant-numeric: tabular-nums;
}
.passive-spp-metrics span {
  color: var(--muted);
}
.passive-spp-metrics b {
  color: var(--text);
  font-weight: 700;
}
.passive-spp-row-actions {
  display: grid;
  gap: 5px;
  color: var(--text);
}
.passive-spp-empty {
  padding: 10px 0;
  color: var(--muted);
}
.passive-spp-group {
  margin-top: 14px;
}
.passive-spp-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.passive-spp-group-advice {
  font-size: 12px;
  margin-bottom: 8px;
}
.passive-spp-tests {
  margin-top: 14px;
}
.passive-spp-tests.hidden { display: none; }
.spp-test-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.spp-test-card.due {
  background: var(--orange-soft);
}
.spp-test-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.spp-test-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.spp-test-badge.bad { color: var(--red); background: var(--red-soft); }
.spp-test-verdict {
  margin: 6px 0;
  font-size: 12px;
}
.spp-test-verdict.good { color: var(--green); font-weight: 600; }
.spp-test-verdict.bad { color: var(--red); font-weight: 600; }
.spp-test-lifecycle,
.spp-test-plan,
.spp-test-manual {
  font-size: 12px;
  margin: 2px 0 6px;
}
.spp-test-recent {
  font-size: 12px;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .passive-ai-controls {
    grid-template-columns: 1fr 1fr;
  }
  .passive-ai-summary {
    grid-template-columns: 1fr 1fr;
  }
  .passive-spp-summary {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
  .passive-spp-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .passive-ai-controls {
    grid-template-columns: 1fr;
  }
  .passive-ai-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* М-8: SEO и поиск */
.seo-search-view { display: grid; gap: 16px; }
.seo-search-view.hidden { display: none; }
.seo-hero {
  display: flex; justify-content: space-between; gap: 24px; align-items: end;
  padding: 24px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, var(--card)), var(--card) 58%);
}
.seo-hero h2 { margin: 4px 0 6px; font-size: clamp(24px, 3vw, 34px); }
.seo-hero p { margin: 0; max-width: 720px; color: var(--muted); }
.seo-kicker { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.seo-hero-counts { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 700; white-space: nowrap; }
.seo-tabs { margin: 0; }
.seo-panel { display: grid; gap: 16px; }
.seo-disclaimer { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--blue) 7%, var(--card)); color: var(--muted); }
/* align-items: start — иначе строка сетки тянется по самой высокой карточке
   и между рядами появляются пустые провалы в пол-экрана. */
.seo-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.seo-card-grid .seo-card p { max-height: 7.5em; overflow: hidden; }
.seo-gap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.seo-gap-grid .table-scroll { max-height: 60vh; overflow: auto; }
.seo-cell-nodata { color: var(--muted); font-style: italic; }
.seo-matrix-kind { margin-left: 6px; color: var(--muted); font-size: 11px; }
.seo-word-brand td { color: var(--muted); }
/* Цвет = смысл. Раздел «наше» синий, «чужое» коричневый, «что делать»
   зелёный, разбор ИИ фиолетовый: по цвету видно, о чём экран, не читая. */
.seo-tabs .passive-topic-tab[data-seo-tab="audit"] { --topic-accent: var(--topic-campaigns); }
.seo-tabs .passive-topic-tab[data-seo-tab="positions"] { --topic-accent: var(--topic-owner); }
.passive-topic-tab[data-seo-audit-section="own"] { --topic-accent: var(--topic-campaigns); }
.passive-topic-tab[data-seo-audit-section="rivals"] { --topic-accent: var(--topic-competitors); }
.passive-topic-tab[data-seo-audit-section="gaps"] { --topic-accent: var(--topic-owner); }
.passive-topic-tab[data-seo-audit-section="matrix"] { --topic-accent: var(--topic-keys); }
.passive-topic-tab[data-seo-audit-section="ai"] { --topic-accent: var(--topic-ai); }
.passive-topic-tab[data-seo-section="matrix"] { --topic-accent: var(--topic-campaigns); }
.passive-topic-tab[data-seo-section="competitors"] { --topic-accent: var(--topic-competitors); }
.passive-topic-tab[data-seo-section="phrases"] { --topic-accent: var(--topic-owner); }
.passive-topic-tab[data-seo-section="ideas"] { --topic-accent: var(--topic-keys); }
.passive-topic-tab[data-seo-section="ai"] { --topic-accent: var(--topic-ai); }
/* Разделы вкладки — второй уровень: ниже и мельче главных вкладок. */
.seo-section-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.seo-section-tab { min-height: 50px; padding: 8px 11px; border-radius: 9px; }
.seo-section-tab .passive-topic-label { font-size: 13px; }
.seo-section-tab .passive-topic-meta { font-size: 11px; }

/* Источник карточки виден по цвету полосы и подписи. */
.seo-card.seo-card-origin-own { border-top-color: var(--topic-campaigns); }
.seo-card.seo-card-origin-manual { border-top-color: var(--topic-owner); }
.seo-card.seo-card-origin-ladder_top { border-top-color: var(--topic-competitors); }
.seo-card.seo-card-origin-manual .seo-kind { color: var(--topic-owner); }
.seo-card.seo-card-origin-ladder_top .seo-kind { color: var(--topic-competitors); }
.seo-card-group { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.seo-card-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.seo-card-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.seo-card-group-head b { font-size: 14px; }
.seo-card-group-manual .seo-card-group-head b { color: var(--topic-owner); }
.seo-card-group-ladder_top .seo-card-group-head b { color: var(--topic-competitors); }
.seo-card-group-head span { font-size: 12px; color: var(--muted); }

/* Плашка поля: зелёная — факт получен, жёлтая — закрыто продавцом,
   серая — не собрано, красная — ошибка в нашем тексте. */
.seo-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 11px; }
.seo-chip-ok { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); background: color-mix(in srgb, var(--green) 12%, var(--card)); color: var(--green); }
.seo-chip-warn { border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); background: color-mix(in srgb, var(--orange) 14%, var(--card)); color: var(--orange); }
.seo-chip-bad { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); background: color-mix(in srgb, var(--red) 12%, var(--card)); color: var(--red); }
.seo-chip-muted { color: var(--muted); }

.seo-script-card { border-top: 3px solid var(--orange); }
.seo-script-word { display: inline-flex; gap: 1px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.seo-letter { padding: 1px 3px; border-radius: 4px; }
.seo-letter.foreign { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); font-weight: 800; }
.seo-script-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; flex-wrap: wrap; }
.seo-script-kind { color: var(--muted); font-size: 11px; }
.seo-script-hint { display: block; margin-top: 2px; color: var(--red); font-size: 10px; }
.seo-word-flag { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.seo-recommendations { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.seo-recommendation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.seo-recommendation-grid article { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.seo-recommendation-grid article > div { display: grid; gap: 3px; margin: 8px 0; color: var(--muted); font-size: 11px; }
.seo-recommendation-grid article p { margin: 0; font-size: 12px; line-height: 1.45; }
.seo-exact { color: #138a4a; }
.seo-card, .seo-table-card, .seo-position-group, .seo-empty { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); }
.seo-card { display: grid; align-content: start; gap: 10px; border-top: 3px solid var(--blue); }
.seo-card-missing, .seo-card-error, .seo-card-blocked { border-top-color: var(--muted); }
.seo-card-partial { border-top-color: #d89100; }
.seo-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.seo-kind, .seo-status { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.seo-kind { color: var(--blue); }
.seo-status { padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.seo-card h3, .seo-position-group h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.seo-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.seo-card small { color: var(--muted); }
.seo-field-meta, .seo-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.seo-field-meta span, .seo-tags span { padding: 4px 7px; border-radius: 7px; background: var(--surface-2); font-size: 11px; color: var(--muted); }
.seo-tags span { color: var(--blue); }
.seo-section-head { display: flex; gap: 20px; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.seo-section-head h3 { margin: 3px 0 0; }
.seo-section-head p { max-width: 520px; margin: 0; color: var(--muted); }
.seo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.seo-table th, .seo-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.seo-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.seo-filters { display: grid; grid-template-columns: minmax(170px, .6fr) minmax(170px, .7fr) minmax(240px, 1fr) minmax(260px, 1.2fr); gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.seo-filters label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.seo-filters > span { color: var(--muted); font-size: 12px; }
.seo-measure-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seo-measure-control .muted { font-size: 12px; }
.seo-measure-control .muted.error { color: var(--red); }
.seo-position-groups { display: grid; gap: 14px; }
.seo-position-table-card { padding: 0; overflow: hidden; }
.seo-position-table-card .seo-section-head { padding: 16px 18px 12px; margin: 0; background: linear-gradient(110deg, color-mix(in srgb, var(--blue-soft) 72%, var(--card)), var(--card) 62%); }
.seo-table-note { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 9px 18px; border-block: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.seo-table-note [title], .seo-position-table th [title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.seo-position-table { min-width: 1120px; }
.seo-position-table th { background: color-mix(in srgb, var(--surface-2) 64%, var(--card)); white-space: nowrap; }
.seo-position-table td { vertical-align: middle; }
.seo-position-table th:nth-child(1) { min-width: 180px; }
.seo-position-table th:nth-child(2) { min-width: 110px; }
.seo-position-table th:nth-child(3) { min-width: 190px; }
.seo-position-table th:nth-child(4) { min-width: 190px; }
.seo-position-table th:nth-child(5), .seo-position-table th:nth-child(6) { min-width: 135px; }
.seo-table-bid { display: grid; gap: 2px; }
.seo-table-bid + .seo-table-bid { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.seo-table-bid strong { color: var(--blue); font-size: 16px; }
.seo-table-bid small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.seo-history-position { color: var(--text); font-size: 15px; }
.seo-latest-point td { background: color-mix(in srgb, var(--blue-soft) 58%, var(--card)); font-weight: 700; }
.seo-latest-point td:first-child { border-left: 4px solid var(--blue); }
.seo-latest-point .seo-history-position { color: var(--blue); font-size: 18px; }
.seo-current-mark { display: block; width: max-content; margin-bottom: 3px; padding: 2px 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.seo-no-data { color: var(--muted); font-weight: 500; }
.table-scroll { overflow-x: auto; max-width: 100%; }

/* Матрица «товар × запрос»: запросы сверху, товары слева, замер в клетке. */
.seo-matrix-card, .seo-drill-card { padding: 0; overflow: hidden; }
.seo-matrix-card .seo-section-head, .seo-drill-card .seo-section-head {
  padding: 16px 18px 12px;
  margin: 0;
  background: linear-gradient(110deg, color-mix(in srgb, var(--blue-soft) 72%, var(--card)), var(--card) 62%);
}
.seo-matrix-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.seo-mode-btn.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.seo-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.seo-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--line); }
.seo-legend i.seo-band-top { background: var(--green); }
.seo-legend i.seo-band-near { background: color-mix(in srgb, var(--green) 55%, var(--card)); }
.seo-legend i.seo-band-deep { background: var(--orange); }
.seo-legend i.seo-band-far { background: var(--muted); }
.seo-legend i.seo-band-lost { background: var(--red); }
.seo-legend i.seo-band-none { background: var(--card); }
.seo-matrix-table { min-width: 900px; font-size: 13px; }
.seo-matrix-table th { background: color-mix(in srgb, var(--surface-2) 64%, var(--card)); vertical-align: bottom; }
.seo-matrix-table thead th { position: sticky; top: 0; z-index: 2; }
.seo-matrix-table th small, .seo-drill-table th small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.seo-matrix-table th.seo-matrix-head-query { cursor: pointer; min-width: 130px; text-transform: none; font-size: 12.5px; letter-spacing: 0; color: var(--text); }
.seo-matrix-table th.seo-matrix-head-query:hover { color: var(--blue); }
.seo-matrix-table th.seo-matrix-head-query.seo-sorted { color: var(--blue); }
.seo-matrix-head-sku { min-width: 250px; }
.seo-matrix-head-total { min-width: 96px; }
.seo-matrix-table tbody tr { cursor: pointer; }
.seo-matrix-table tbody tr:hover .seo-matrix-sku { background: var(--hover); }
.seo-matrix-table tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.seo-matrix-table tbody tr.seo-row-active .seo-matrix-sku { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.seo-matrix-sku { vertical-align: top; }
.seo-matrix-name {
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seo-matrix-links { margin-top: 3px; font-size: 11px; color: var(--muted); }
.seo-campaign-link { color: var(--muted); font-weight: 500; }
.seo-matrix-bids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.seo-bid-button {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cell);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.seo-bid-button:hover { border-color: var(--blue); background: var(--blue-soft); }
.seo-bid-button b { color: var(--blue); font-size: 13px; }
.seo-bid-button small { color: var(--muted); font-size: 10px; }
.seo-matrix-table td.seo-cell { padding: 0; vertical-align: top; }
.seo-cellbox {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  min-width: 108px;
  height: 100%;
}
.seo-cell-pos { font-size: 18px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.seo-cell-move, .seo-cell-note { font-size: 11px; color: var(--muted); }
.seo-cell-up { color: var(--green); font-weight: 700; }
.seo-cell-down { color: var(--red); font-weight: 700; }
.seo-cell-flat { color: var(--muted); }
.seo-cell-flag { font-size: 10px; font-weight: 700; color: var(--orange); }
.seo-cell-total .seo-cellbox { min-width: 80px; }
.seo-band-top { background: var(--green-soft); border-left-color: var(--green); }
.seo-band-top .seo-cell-pos, .seo-drill-pos.seo-band-top { color: var(--green); }
.seo-band-near { background: color-mix(in srgb, var(--green-soft) 55%, var(--card)); border-left-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.seo-band-near .seo-cell-pos, .seo-drill-pos.seo-band-near { color: color-mix(in srgb, var(--green) 80%, var(--text)); }
.seo-band-deep { background: var(--orange-soft); border-left-color: var(--orange); }
.seo-band-deep .seo-cell-pos, .seo-drill-pos.seo-band-deep { color: var(--orange); }
.seo-band-far { background: var(--surface-2); border-left-color: var(--muted); }
.seo-band-far .seo-cell-pos, .seo-drill-pos.seo-band-far { color: var(--muted); }
.seo-band-lost { background: var(--red-soft); border-left-color: var(--red); }
.seo-band-lost .seo-cell-pos, .seo-drill-pos.seo-band-lost { color: var(--red); }
.seo-band-none { background: transparent; border-left-color: var(--line); }
.seo-drill-table { min-width: 760px; font-size: 13px; }
.seo-drill-table th { background: color-mix(in srgb, var(--surface-2) 64%, var(--card)); white-space: nowrap; vertical-align: bottom; }
.seo-drill-table td { vertical-align: top; }
.seo-drill-table td small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.seo-drill-query { font-weight: 700; min-width: 210px; }
.seo-query-stats { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--blue); letter-spacing: 0; text-transform: none; line-height: 1.35; }
.seo-drill-stats { min-width: 150px; }
.seo-drill-demand { font-size: 14px; font-variant-numeric: tabular-nums; }
.seo-drill-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.seo-history-days, .seo-ideas-limit { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.seo-history-days select, .seo-ideas-limit select { width: auto; min-width: 104px; }
.seo-drill-loading { padding: 16px 18px; }
.seo-ideas-card { padding: 0; overflow: hidden; }
.seo-ideas-card .seo-section-head { padding: 16px 18px 12px; margin: 0; background: linear-gradient(110deg, color-mix(in srgb, var(--green-soft) 60%, var(--card)), var(--card) 62%); }
.seo-ideas-table { min-width: 780px; font-size: 13px; }
.seo-ideas-table th { background: color-mix(in srgb, var(--surface-2) 64%, var(--card)); white-space: nowrap; }
.seo-ideas-table td { vertical-align: middle; }
.seo-idea-query { min-width: 300px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seo-idea-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seo-idea-copy {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--cell);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.seo-ideas-table tr:hover .seo-idea-copy, .seo-idea-copy:focus-visible { opacity: 1; }
.seo-idea-copy:hover { border-color: var(--blue); color: var(--blue); }
.seo-ai-panel { margin: 0 0 4px; }
.seo-ai-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; margin-top: 10px; }
.seo-ai-finding {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  display: grid;
  gap: 6px;
}
.seo-ai-finding header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.seo-ai-finding header b { font-size: 14px; line-height: 1.3; }
.seo-ai-finding header span { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.seo-ai-finding p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.seo-ai-finding .seo-ai-action { color: var(--muted); }
.seo-ai-finding .seo-ai-action span { font-weight: 700; color: var(--text); }
.seo-ai-finding.bad { border-left-color: var(--red); background: color-mix(in srgb, var(--red-soft) 55%, var(--card)); }
.seo-ai-finding.bad header span { color: var(--red); }
.seo-ai-finding.warn { border-left-color: var(--orange); background: color-mix(in srgb, var(--orange-soft) 50%, var(--card)); }
.seo-ai-finding.warn header span { color: var(--orange); }
.seo-ai-finding.good { border-left-color: var(--green); background: color-mix(in srgb, var(--green-soft) 55%, var(--card)); }
.seo-ai-finding.good header span { color: var(--green); }
.seo-ladder-card { padding: 0; overflow: hidden; }
.seo-ladder-card .seo-section-head { padding: 16px 18px 12px; margin: 0; background: linear-gradient(110deg, color-mix(in srgb, var(--orange-soft) 46%, var(--card)), var(--card) 62%); }
.seo-ladder-query { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.seo-ladder-query select { width: auto; min-width: 220px; }
.seo-ladder-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.seo-ladder-metric { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.seo-ladder-metric-label { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.seo-ladder-metric b { font-size: 15px; font-variant-numeric: tabular-nums; }
.seo-ladder-metric small { font-size: 11px; color: var(--muted); }
.seo-ladder-metric.good { background: color-mix(in srgb, var(--green-soft) 60%, var(--card)); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.seo-ladder-metric.good b { color: var(--green); }
.seo-ladder-metric.bad { background: color-mix(in srgb, var(--red-soft) 55%, var(--card)); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.seo-ladder-metric.bad b { color: var(--red); }
.seo-ladder-table { min-width: 1040px; font-size: 13px; }
.seo-ladder-table th { background: color-mix(in srgb, var(--surface-2) 64%, var(--card)); white-space: nowrap; }
.seo-ladder-table td { vertical-align: middle; }
.seo-ladder-table td small { color: var(--muted); font-size: 11px; }
.seo-ladder-pos { width: 74px; }
.seo-ladder-pos b { font-size: 15px; font-variant-numeric: tabular-nums; background: none; padding: 0; }
.seo-ladder-title { min-width: 320px; }
.seo-ladder-flag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.seo-ladder-table tr.seo-ladder-own td { background: var(--blue-soft); font-weight: 600; }
.seo-section-tabs { margin: 0 0 4px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .seo-section-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .seo-section-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seo-phrases-card { padding: 0; overflow: hidden; }
.seo-phrases-card .seo-section-head { padding: 16px 18px 12px; margin: 0; background: linear-gradient(110deg, color-mix(in srgb, var(--purple-soft) 55%, var(--card)), var(--card) 62%); }
.seo-phrases-table { min-width: 720px; font-size: 13px; }
.seo-phrases-table th { background: color-mix(in srgb, var(--surface-2) 64%, var(--card)); white-space: nowrap; }
.seo-phrases-table td { vertical-align: middle; }
.seo-phrases-table tr.seo-phrase-tracked td { background: color-mix(in srgb, var(--blue-soft) 45%, var(--card)); }
.seo-phrases-table .seo-ladder-flag { margin-left: 8px; margin-right: 0; }
.seo-drill-pos { font-size: 15px; font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; }

@media (max-width: 820px) {
  .seo-hero, .seo-section-head { align-items: start; flex-direction: column; }
  .seo-hero-counts { white-space: normal; }
  .seo-filters { grid-template-columns: 1fr; }
  .seo-card-grid { grid-template-columns: 1fr; }
  .seo-matrix-modes { width: 100%; }
  .seo-matrix-head-sku, .seo-drill-query { min-width: 190px; }
}

.create-form { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.create-mode-switch { display: flex; gap: 6px; margin-top: 14px; }
.create-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 3px; }
.create-form .input { width: 220px; }
.create-form .num-input { width: 110px; }
.create-form .campaign-budget-input { width: 180px; }
.create-budget-min {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.create-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}
.create-tags-field { width: 100%; }
.create-tags-entry { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.create-form .create-tags-entry .input { width: min(320px, 100%); }
.create-tags-selected {
  min-height: 25px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.create-tags-selected .tag-chip .x {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
}
.create-products-field { width: min(390px, 100%); }
.create-form .create-combine-products {
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.create-combine-products input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--blue);
}
.create-combine-products span { display: grid; gap: 2px; }
.create-combine-products b { font-size: 12px; }
.create-combine-products small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.create-auto-names {
  margin-top: 2px;
  padding: 8px 10px;
  border-left: 3px solid var(--blue);
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.create-auto-names b { color: var(--text); }
.create-auto-names.warning { border-left-color: var(--red); background: var(--red-soft); }
.create-collection-picker { width: min(430px, 100%); }
.create-form .create-collection-picker .input { width: 100%; }
.create-collection-search-meta {
  min-height: 15px;
  font-size: 11px;
  line-height: 1.3;
}
.create-collection-field { width: 100%; }
.create-collection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.create-collection-products {
  max-height: min(320px, 38vh);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}
.create-form .create-collection-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.create-collection-row:last-child { border-bottom: 0; }
.create-collection-row:hover { background: var(--hover); }
.create-collection-row.selected { background: var(--blue-soft); }
.create-collection-row.unavailable { cursor: not-allowed; opacity: .72; }
.create-collection-row > input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.create-collection-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.create-collection-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.create-collection-copy span,
.create-collection-status { color: var(--muted); font-size: 11px; }
.create-collection-status {
  justify-self: end;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 650;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}
.create-collection-status.empty,
.create-collection-status.unavailable { color: var(--red); background: var(--red-soft); }
.create-batch-budget {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.campaign-schedule-recommendation {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 9px;
  background: var(--surface-2);
}
.campaign-schedule-recommendation-title {
  margin-bottom: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.campaign-schedule-recommendation-body {
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.4;
}
.campaign-schedule-recommendation-body b { color: var(--text); }
.campaign-schedule-recommendation-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.campaign-schedule-recommendation[data-state="error"] {
  border-left-color: var(--red);
}
.create-field-label { min-height: 15px; }
.product-select-button {
  width: 100% !important;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.product-select-button:hover {
  border-color: var(--blue);
}
.product-select-action {
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap;
}
.create-products-selected {
  min-height: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.create-product-chip {
  max-width: 190px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
}
.create-product-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-product-chip button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.create-product-chip button:hover { background: var(--hover); color: var(--red); }
.create-product-more { color: var(--muted); font-size: 11px; }
.campaign-products-back { z-index: 130; }
.campaign-products-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.campaign-products-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.campaign-products-toolbar .input {
  width: 100%;
  margin: 0;
}
.campaign-products-toolbar .btn.on {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}
.campaign-products-head,
.campaign-product-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 150px 110px;
  gap: 12px;
  align-items: center;
}
.campaign-products-head {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.campaign-products-list {
  flex: 1 1 auto;
  min-height: 280px;
  overflow: auto;
}
.campaign-product-row {
  min-height: 76px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  cursor: pointer;
}
.campaign-product-row:hover { background: var(--hover); }
.campaign-product-row.selected { background: var(--blue-soft); }
.campaign-product-row > input { width: 18px; height: 18px; accent-color: var(--blue); }
.campaign-product-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.campaign-product-image {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--card);
}
.campaign-product-image img { width: 100%; height: 100%; object-fit: cover; }
.campaign-product-no-image {
  padding: 4px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}
.campaign-product-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.campaign-product-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.campaign-product-copy span,
.campaign-product-stock {
  color: var(--muted);
  font-size: 12px;
}
.campaign-product-stock.empty { color: var(--red); }
.campaign-product-price {
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.campaign-products-empty {
  padding: 48px 16px;
  color: var(--muted);
  text-align: center;
}
.campaign-products-pagination {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 0;
  border-top: 1px solid var(--line);
}
.campaign-products-pagination .btn { min-width: 36px; padding-left: 8px; padding-right: 8px; }
.campaign-products-modal .modal-foot { flex: 0 0 auto; }
.prelaunch-bid-modal {
  width: min(980px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.prelaunch-bid-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--text);
  font-size: 12px;
}
.prelaunch-bid-head,
.prelaunch-bid-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 110px 140px 150px;
  gap: 12px;
  align-items: center;
}
.prelaunch-bid-head {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.prelaunch-bid-rows {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
}
.prelaunch-bid-row {
  min-height: 70px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.prelaunch-bid-row.blocked { background: color-mix(in srgb, var(--red) 7%, transparent); }
.prelaunch-bid-campaign { min-width: 0; }
.prelaunch-bid-campaign b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.prelaunch-bid-campaign span,
.prelaunch-bid-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.prelaunch-bid-value { font-variant-numeric: tabular-nums; }
.prelaunch-bid-value.stale { color: var(--orange); }
.prelaunch-bid-row .input { width: 100%; margin: 0; }
.prelaunch-bid-error {
  grid-column: 1 / -1;
  color: var(--red);
  font-size: 11px;
}
.prelaunch-bid-modal .modal-foot { flex: 0 0 auto; }
@media (max-width: 760px) {
  .prelaunch-bid-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .prelaunch-bid-head { display: none; }
  .prelaunch-bid-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .prelaunch-bid-campaign { grid-column: 1 / -1; }
  .prelaunch-bid-row > .prelaunch-bid-value::before,
  .prelaunch-bid-row > label::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
  }
  .prelaunch-bid-row > .prelaunch-current::before { content: "Текущая"; }
  .prelaunch-bid-row > .prelaunch-competitive::before { content: "Конкуренты"; }
  .prelaunch-bid-row > label::before { content: "Ваша ставка, ₽"; }
}
.sales-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.tab-btn { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 6px 12px; }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.sales-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sales-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sales-toolbar .sales-controls { margin-bottom: 0; }
.btn.seg { padding: 5px 12px; }
.btn.seg.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.sales-body { max-height: 58vh; overflow: auto; }
.sales-body table { width: 100%; border-collapse: collapse; }
.sales-body th, .sales-body td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; text-align: left; }
.sales-body th.num, .sales-body td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sales-body thead th, .sales-body tr:first-child th { background: var(--surface-2); position: sticky; top: 0; }
/* Управление таблицей — вверху справа: снизу оно съедает высоту таблицы. */
.sales-rows-picker { margin-left: auto; }
#salesMeta { margin: 10px 0 10px; color: var(--text); }
.sales-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.sales-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--card);
  white-space: nowrap;
}
.sales-summary-label {
  color: var(--head-text);
  font-size: 12px;
  font-weight: 650;
}
.sales-summary-value {
  color: var(--blue);
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .sales-summary { padding: 8px; gap: 6px; }
  .sales-summary-item { width: 100%; justify-content: space-between; white-space: normal; }
  .sales-summary-value { text-align: right; }
}

#draftsModal > .modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#draftsModal .modal-head { flex: 0 0 auto; }
.drafts-list {
  min-width: 0;
  min-height: 0;
  max-height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.draft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}
.draft-row > :first-child,
.draft-batch-main > :first-child,
.draft-batch-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.draft-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.draft-actions .btn { white-space: normal; text-align: center; }
.draft-batch { display: block; }
.draft-batch-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.draft-batch details { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.draft-batch summary { color: var(--muted); cursor: pointer; font-size: 12px; }
.draft-batch-items { display: grid; gap: 4px; margin-top: 7px; }
.draft-batch-item { display: flex; justify-content: space-between; gap: 12px; padding: 5px 7px; border-radius: 6px; background: var(--surface-2); font-size: 12px; }
.draft-batch-item.error { color: var(--red); }

@media (max-width: 760px) {
  .create-products-field { width: 100%; }
  .create-collection-picker { width: 100%; }
  .create-section { padding: 13px; border-radius: 12px; }
  .create-section-head { align-items: flex-start; }
  .create-section-copy p { line-height: 1.35; }
  .create-campaign-drawer .create-mode-switch { width: 100%; }
  .create-campaign-drawer .create-mode-switch .btn.seg { flex: 1 1 50%; }
  .create-schedule-section .sch-controls { align-items: stretch; gap: 8px; }
  .create-schedule-section .sch-controls .spacer { display: none; }
  .create-schedule-section .sch-controls label,
  .create-schedule-section .sch-controls select,
  .create-schedule-section .sch-controls .btn { width: 100%; }
  .create-schedule-section .sch-controls label { justify-content: space-between; }
  .create-form .create-collection-row { grid-template-columns: 22px minmax(0, 1fr); }
  .create-collection-status { grid-column: 2; justify-self: start; text-align: left; }
  .draft-row:not(.draft-batch),
  .draft-batch-main { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .draft-actions { width: 100%; justify-content: flex-start; }
  .draft-actions .btn { flex: 1 1 180px; }
  .campaign-products-back { padding: 0; }
  .campaign-products-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .campaign-products-toolbar {
    grid-template-columns: minmax(0, 1fr) 140px;
  }
  .campaign-products-toolbar .btn { width: 100%; }
  .campaign-products-head { display: none; }
  .campaign-product-row {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px 10px;
  }
  .campaign-product-stock,
  .campaign-product-price {
    grid-column: 2;
    text-align: left;
    padding-left: 64px;
  }
  .campaign-product-price { margin-top: -3px; }
}

.editor-info { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 10px; background: var(--hover); border-radius: 8px; margin-bottom: 8px; }
.editor-info .info-item { font-size: 12.5px; }
.editor-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.editor-tags .input { width: 160px; padding: 5px 8px; }

.sch-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.sch-controls label { display: flex; gap: 6px; align-items: center; }
.num-input { width: 90px; }
.switch { font-weight: 600; }

.sch-grid { overflow-x: auto; user-select: none; margin-top: 8px; }
.sch-table { border-collapse: collapse; }
.sch-table th {
  font-size: 10px; color: var(--muted); padding: 2px; min-width: 34px; cursor: pointer; font-weight: 600;
}
.sch-table th.day { min-width: 36px; text-align: right; padding-right: 6px; font-size: 12px; }
.sch-table th.day.we { color: var(--red); }
.sch-table td {
  border: 1px solid var(--line); width: 36px; height: 26px; text-align: center;
  font-size: 10px; cursor: pointer; color: transparent; background: var(--cell);
}
.sch-table td.on { background: var(--blue); color: #fff; font-weight: 600; }
.sch-table td:hover { outline: 2px solid var(--blue); outline-offset: -2px; }

.history-back {
  background: rgba(4, 9, 18, .76);
  backdrop-filter: blur(3px);
}
.history-modal {
  width: min(1280px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 75%, var(--text) 25%);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.history-modal .modal-head {
  margin: 0;
  padding: 18px 20px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.history-modal .modal-head b {
  font-size: 15px;
  color: var(--text);
}
.history-modal .modal-head .muted {
  margin-top: 3px;
  color: var(--head-text);
}
#histRecommend { padding: 14px 20px 0; background: var(--surface-2); }
#histRecommend:empty { display: none; }
.hist-body {
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding: 14px 20px 18px;
  background: var(--surface-2);
}
.hist-day {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 85%, var(--text) 15%);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--card);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.hist-day-head {
  display: grid;
  grid-template-columns: 118px repeat(5, minmax(130px, 1fr)) 44px;
  gap: 8px;
  padding: 11px 12px;
  cursor: pointer;
  align-items: center;
  border-bottom: 1px solid transparent;
}
.hist-day-head:hover { background: var(--hover); }
.hist-day-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.hist-date {
  font-size: 14px;
  letter-spacing: 0;
}
.hist-toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--head-text);
}
.hist-hours {
  border-top: 1px solid var(--line);
  padding: 10px 12px 12px;
  background: color-mix(in srgb, var(--card) 72%, var(--surface-2) 28%);
  overflow-x: auto;
}
.hist-hours table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}
.hist-hours th,
.hist-hours td {
  padding: 7px 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hist-hours th {
  color: var(--head-text);
  font-weight: 700;
  background: var(--surface-2);
}
.hist-hours th:first-child,
.hist-hours td:first-child { text-align: left; }
.hist-hours tr:last-child td { border-bottom: 0; }
@media (max-width: 920px) {
  .history-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .history-modal .modal-head,
  #histRecommend,
  .hist-body { padding-left: 12px; padding-right: 12px; }
  .hist-body { max-height: calc(100vh - 170px); }
  .hist-day-head {
    grid-template-columns: 1fr 1fr;
  }
  .hist-toggle { grid-column: 2; justify-self: end; }
}
.over-cell { color: var(--red); font-weight: 700; }
.recommend {
  background: var(--orange-soft); border: 1px solid var(--rec-border); color: var(--tag-text);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px;
}

.toast {
  position: fixed; bottom: 70px; right: 18px; z-index: 200;
  background: #262624; color: #fff; padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(10,20,40,.35); font-size: 13px;
}
.toast.err { background: var(--red); }

.column-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 360px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 12px 32px var(--shadow);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}
.column-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

#themeToggle { padding: 6px 9px; line-height: 1; font-size: 14px; }

/* --- Навигация по разделам (сайдбар) + раздел «Репрайсинг» --- */
.layout { display: flex; align-items: flex-start; width: 100%; max-width: 100vw; overflow-x: hidden; }
.sidebar {
  width: 248px; flex-shrink: 0; display: flex; flex-direction: column;
  color: var(--side-text); background: linear-gradient(180deg, var(--side-bg), var(--side-bg-end));
  border-right: 1px solid var(--side-line); padding: 16px 12px 14px;
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 31;
  box-shadow: 8px 0 28px rgba(15, 23, 42, .04);
}
.side-brand-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  min-height: 82px; padding: 3px 7px 17px; border-bottom: 1px solid var(--side-line);
}
.side-brand-lockup { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.side-client-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.side-client-logo {
  width: 48px; height: 48px; flex: 0 0 48px; display: block; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--side-line) 72%, transparent); border-radius: 13px;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .12);
}
.side-client-copy { min-width: 0; display: flex; flex-direction: column; }
.side-brand { max-width: 185px; overflow: hidden; color: var(--side-text); font-size: 16px; font-weight: 760; line-height: 1.25; text-overflow: ellipsis; }
.side-brand-sub { margin-top: 3px; color: var(--side-muted); font-size: 11px; line-height: 1.25; }
.sidebar-close { display: none; }
/* Переключатель магазинов: активен, только если у учётки портала больше одного кабинета */
.side-client-identity.switchable { cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }
.side-client-identity.switchable:hover { background: color-mix(in srgb, var(--side-line) 42%, transparent); }
.side-shop-caret { margin-left: 2px; color: var(--side-muted); font-size: 11px; flex: 0 0 auto; }
.side-shop-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 205px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: #fff; border: 1px solid var(--side-line); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}
.side-shop-menu.hidden { display: none; }
.side-shop-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: none; background: none; border-radius: 9px; font: inherit; font-size: 13px;
  text-align: left; color: #23272f; cursor: pointer;
}
.side-shop-item:hover { background: #f1f3f8; }
.side-shop-item.current { font-weight: 700; cursor: default; }
.side-shop-item .shop-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #c8ccd6; }
.side-shop-item .shop-dot.online { background: #34a463; }
.side-shop-item .shop-check { margin-left: auto; color: var(--side-muted); }
.side-nav { display: flex; flex-direction: column; gap: 6px; padding-top: 17px; }
.side-nav-label {
  padding: 0 10px 4px; color: var(--side-muted); font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.side-item {
  position: relative; width: 100%; min-height: 60px; display: grid;
  grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 9px;
  text-align: left; border: 1px solid transparent; background: transparent;
  color: var(--side-text); cursor: pointer; padding: 8px 9px; border-radius: 13px; font: inherit;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.side-item::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 4px 4px 0; background: var(--side-active-border); opacity: 0;
  transform: scaleY(.45); transition: opacity .16s ease, transform .16s ease;
}
.side-item:hover { background: var(--side-hover); transform: translateX(1px); }
.side-item.entitlement-disabled,
.side-item.entitlement-disabled:hover {
  cursor: not-allowed; opacity: .48; background: transparent; transform: none;
}
.side-item.entitlement-disabled .side-item-arrow { opacity: 0; }
.side-item.active {
  border-color: color-mix(in srgb, var(--side-active-border) 24%, transparent);
  background: var(--side-active); color: var(--side-active-border);
  box-shadow: 0 8px 22px rgba(30, 64, 120, .09);
}
.side-item.active::before { opacity: 1; transform: scaleY(1); }
.side-item-icon {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  color: var(--side-icon); background: color-mix(in srgb, var(--side-text) 6%, transparent);
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.side-item-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.side-item:hover .side-item-icon { color: var(--side-text); }
.side-item.active .side-item-icon {
  color: var(--side-active-border); background: color-mix(in srgb, var(--side-active-border) 15%, transparent);
  transform: scale(1.03);
}
.side-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.side-item-title { overflow: hidden; color: currentColor; font-size: 13px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; }
.side-item-caption { overflow: hidden; color: var(--side-muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; }
.side-item-arrow { position: absolute; right: 10px; color: var(--side-muted); font-size: 19px; line-height: 1; opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; }
.side-item:hover .side-item-arrow, .side-item.active .side-item-arrow { opacity: 1; transform: translateX(0); }
.side-footer {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 8px; align-items: center; gap: 10px;
  margin-top: auto; padding: 15px 6px 1px; border-top: 1px solid var(--side-line);
}
.side-footer-logo { display: block; width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
.side-footer-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.side-footer-copy strong { overflow: hidden; color: var(--side-text); font-size: 12px; line-height: 1.3; text-overflow: ellipsis; }
.side-footer-copy span { overflow: hidden; color: var(--side-muted); font-size: 9px; line-height: 1.3; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; }
.side-footer-status { width: 7px; height: 7px; border-radius: 50%; background: #4fc394; box-shadow: 0 0 0 4px rgba(79, 195, 148, .1); }
.content { flex: 1; min-width: 0; max-width: 100%; overflow-x: hidden; }
.view.hidden { display: none; }
.sidebar-backdrop { display: none; }

#view-repricing { padding-top: 10px; }
.repricing-topic-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.passive-topic-tab[data-repricing-topic="unit"] { --topic-accent: var(--topic-campaigns); }
.passive-topic-tab[data-repricing-topic="history"] { --topic-accent: var(--topic-owner); }
.passive-topic-tab[data-repricing-topic="parse"] { --topic-accent: var(--topic-competitors); }
.passive-topic-tab[data-repricing-topic="ai"] { --topic-accent: var(--topic-ai); }
@media (max-width: 1100px) {
  .repricing-topic-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .repricing-topic-tabs { grid-template-columns: 1fr; }
}
.rep-meta { padding: 8px 16px 0; font-size: 12px; }
.rep-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 16px 0;
}
.rep-toolbar .rep-meta {
  flex: 1 1 240px;
  min-width: 180px;
  overflow: hidden;
  padding: 0;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rep-columns { position: relative; flex-shrink: 0; }
.rep-columns-btn { padding: 5px 10px; }
.rep-columns-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 45;
  width: 390px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px var(--shadow);
  padding: 8px;
}
.rep-columns-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.rep-column-action {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
}
.rep-column-action:hover { border-color: var(--blue); color: var(--blue); }
.rep-columns-caption { padding: 8px 6px 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.rep-columns-list { max-height: 250px; overflow: auto; }
.rep-column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.rep-column-option:hover { background: var(--hover); }
.rep-column-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-group-order { padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
.rep-group-order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; font-size: 12px; }
.rep-group-order-list { max-height: 260px; overflow: auto; padding-right: 2px; }
.rep-group-order-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: grab;
  user-select: none;
}
.rep-group-order-row:hover { background: var(--hover); }
.rep-group-order-row.dragging { opacity: .48; }
.rep-group-order-row.drop-before { border-top-color: var(--blue); }
.rep-group-order-row.drop-after { border-bottom-color: var(--blue); }
.rep-group-order-row.is-pinned { cursor: default; color: var(--muted); }
.rep-group-drag { color: var(--muted); text-align: center; font-weight: 800; }
.rep-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.rep-group-move {
  width: 28px;
  height: 27px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.rep-group-move:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.rep-group-move:disabled { opacity: .3; cursor: default; }
.aa-metrics-menu {
  width: 540px;
}
.aa-metrics-actions {
  justify-content: space-between;
  gap: 6px;
}
.aa-metrics-toggle-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.aa-metrics-toggle-all:hover { border-color: var(--blue); color: var(--blue); }
.aa-metrics-toggle-all input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.aa-metrics-toggle-box {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card);
}
.aa-metrics-toggle-all input:checked + .aa-metrics-toggle-box,
.aa-metrics-toggle-all input:indeterminate + .aa-metrics-toggle-box {
  border-color: var(--blue);
  background: var(--blue);
}
.aa-metrics-toggle-all input:checked + .aa-metrics-toggle-box::after,
.aa-metrics-toggle-all input:indeterminate + .aa-metrics-toggle-box::after {
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  font-weight: 800;
}
.aa-metrics-toggle-all input:checked + .aa-metrics-toggle-box::after { content: "✓"; }
.aa-metrics-toggle-all input:indeterminate + .aa-metrics-toggle-box::after { content: "−"; }
.aa-metrics-toggle-all input:focus-visible + .aa-metrics-toggle-box {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}
.aa-metrics-summary {
  padding: 0 4px 6px;
  color: var(--muted);
  font-size: 12px;
}
.aa-metric-order-list {
  max-height: min(520px, calc(100vh - 240px));
  overflow: auto;
  padding-right: 2px;
}
.aa-metric-order-row {
  display: grid;
  grid-template-columns: 26px 22px 30px minmax(0, 1fr) 98px 30px 30px;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: grab;
  user-select: none;
}
.aa-metric-order-row:hover {
  background: var(--hover);
}
.aa-metric-order-row.dragging {
  opacity: .55;
}
.aa-metric-order-row.is-hidden .aa-drag-handle,
.aa-metric-order-row.is-hidden .aa-metric-order-index,
.aa-metric-order-row.is-hidden .aa-metric-order-label {
  opacity: .52;
}
.aa-metric-order-row.drop-before {
  border-top-color: var(--blue);
}
.aa-metric-order-row.drop-after {
  border-bottom-color: var(--blue);
}
.aa-metric-visible {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  cursor: pointer;
}
.aa-metric-visible input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.aa-metric-visible span {
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px transparent;
}
.aa-metric-visible input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
}
.aa-metric-visible input:checked + span::after {
  content: "✓";
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  font-weight: 800;
}
.aa-metric-visible input:focus-visible + span {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}
.aa-metric-visible input:disabled + span {
  opacity: .55;
  cursor: not-allowed;
}
.aa-drag-handle {
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}
.aa-metric-order-index {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.aa-metric-order-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.aa-metric-highlight-select {
  width: 98px;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  padding: 0 4px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.aa-metric-highlight-select:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 1px;
}
.aa-metric-move {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.aa-metric-move:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}
.aa-metric-move:disabled {
  opacity: .35;
  cursor: default;
}
.rep-wrap {
  margin: 10px 16px 40px;
  max-height: var(--long-table-max-height);
  width: auto;
  max-width: none;
}
/* Длинные листы (UNIT, последний парсинг) шире и длиннее окна. Держим их
   нижний край внутри экрана, чтобы горизонтальная полоса была под рукой
   и не приходилось листать всю страницу через сотни строк. */
.rep-wrap.rep-sheet-viewport {
  max-height: var(--rep-sheet-viewport-height, calc(100dvh - 320px));
  margin-bottom: 10px;
  contain: paint;
  scrollbar-gutter: stable;
}
.rep-wrap.rep-sheet-viewport::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.rep-wrap.rep-sheet-viewport::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  background-clip: padding-box;
}
.rep-wrap.rep-sheet-viewport::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
.rep-mobile-tools,
.rep-mobile-card-toggle-cell { display: none; }
.rep-readiness-alert {
  margin: 10px 16px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--red) 52%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--red) 10%, var(--card));
  color: var(--text);
  line-height: 1.45;
}
.rep-readiness-alert strong { color: var(--red); }
.rep-readiness-alert .rep-readiness-skus {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
[data-theme="dark"] .rep-readiness-alert {
  background: color-mix(in srgb, var(--red) 16%, var(--card));
}
#repTable {
  --rep-sheet-input-head: #a4c2f4;
  --rep-sheet-input-cell: #e6f0fa;
  --rep-sheet-formula-head: #ffe599;
  --rep-sheet-formula-cell: #fffbe1;
  --rep-sheet-base-price: #ff9900;
  --rep-sheet-base-price-head: var(--rep-sheet-base-price);
  --rep-sheet-base-price-cell: var(--rep-sheet-base-price);
  --rep-sheet-buyer-price: #00ff00;
  --rep-sheet-buyer-price-head: var(--rep-sheet-buyer-price);
  --rep-sheet-buyer-price-cell: var(--rep-sheet-buyer-price);
  --rep-sheet-color: #292b36;
  --rep-sheet-buyer-color: #18331b;
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
#repTable th, #repTable td {
  width: 150px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#repTable th:last-child, #repTable td:last-child { border-right: none; }
#repTable th.num, #repTable td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#repTable thead th {
  position: sticky;
  background: var(--surface-2);
  font-weight: 700;
  z-index: 20;
}
#repTable .rep-summary-head-row th { height: 38px; }
#repTable .rep-summary-head-row .rep-summary-group {
  text-align: center;
  padding: 8px 12px;
  color: var(--text);
  border-bottom: 2px solid color-mix(in srgb, var(--blue) 38%, var(--line));
  overflow: hidden;
  text-overflow: ellipsis;
}
#repTable .rep-summary-group-0,
#repTable .rep-summary-group-4 { background: color-mix(in srgb, var(--blue-soft) 72%, var(--surface-2)); }
#repTable .rep-summary-group-1,
#repTable .rep-summary-group-5 { background: color-mix(in srgb, var(--green-soft) 68%, var(--surface-2)); }
#repTable .rep-summary-group-2,
#repTable .rep-summary-group-6 { background: color-mix(in srgb, var(--orange-soft) 58%, var(--surface-2)); }
#repTable .rep-summary-group-3,
#repTable .rep-summary-group-7 { background: color-mix(in srgb, var(--purple-soft) 62%, var(--surface-2)); }
#repTable .rep-main-head-row th {
  height: 116px;
  padding-block: 6px;
  text-align: center !important;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
  vertical-align: middle;
}
#repTable .rep-main-head-row th.rep-unit-name-head {
  padding-bottom: 30px;
}
.rep-column-resizer {
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  z-index: 30;
  width: 12px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}
.rep-column-resizer::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 5px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
  transition: width .12s ease, right .12s ease, background .12s ease;
}
.rep-column-resizer:hover::after,
.rep-column-resizer:focus-visible::after,
.rep-column-resizer.is-resizing::after {
  right: 4px;
  width: 4px;
  background: var(--blue);
}
.rep-column-resizer:focus-visible {
  box-shadow: inset -2px 0 0 var(--blue);
}
body.rep-column-resizing,
body.rep-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.rep-unit-expand-all {
  position: absolute;
  left: 8px;
  bottom: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.rep-unit-expand-all:hover,
.rep-unit-expand-all:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
  outline: none;
}
.rep-unit-expand-all[aria-pressed="true"] {
  background: color-mix(in srgb, var(--blue-soft) 65%, var(--card));
  color: var(--blue);
}
.rep-unit-expand-all-icon {
  font-size: 12px;
  line-height: 1;
}
.rep-sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0;
  width: 100%;
  padding-inline: 16px;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  cursor: pointer;
}
.rep-sort-button > span:first-child {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  text-align: center;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.rep-sort-mark {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  opacity: .55;
}
.rep-sort-button:hover .rep-sort-mark,
.rep-sort-button:focus-visible .rep-sort-mark,
#repTable .rep-sort-active .rep-sort-mark {
  color: var(--blue);
  opacity: 1;
}
.rep-sort-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-radius: 6px;
}
#repTable .rep-sort-active {
  box-shadow: inset 0 -3px 0 var(--blue);
}
#repTable .rep-main-head-row th.rep-key-input-head {
  border-top: 3px solid color-mix(in srgb, #6f93ca 72%, var(--line));
}
#repTable .rep-main-head-row th.rep-key-result-head {
  border-top: 3px solid color-mix(in srgb, #d2b84f 70%, var(--line));
}
#repTable .rep-main-head-row th.rep-hero-head {
  border-top: 4px solid var(--blue);
  font-weight: 800;
}
#repTable .rep-filter-row th {
  height: 34px;
  padding: 4px 6px;
  background: var(--surface-2);
  z-index: 21;
}
.rep-filter-input,
.rep-filter-select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  padding: 4px 26px 4px 6px;
  font: inherit;
  font-size: 12px;
}
.rep-filter-select {
  height: 26px;
  padding: 3px 22px 3px 6px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.rep-filter-input:focus,
.rep-filter-select:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
.rep-filter-empty {
  display: block;
  color: var(--muted);
  text-align: center;
  opacity: .55;
}
.rep-filter-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.rep-filter-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.rep-filter-wrap.has-value .rep-filter-clear {
  opacity: 1;
  pointer-events: auto;
}
.rep-filter-clear:hover {
  background: var(--hover);
  color: var(--text);
}
#repTable tbody td {
  background: var(--card);
  text-align: center !important;
}
#repTable tbody tr:nth-child(even) td { background: var(--cell); }
#repTable .rep-sticky {
  position: sticky;
  z-index: 8;
  background: var(--card);
}
#repTable tbody tr:nth-child(even) .rep-sticky { background: var(--cell); }
#repTable thead .rep-sticky { z-index: 24; background: var(--surface-2); }
#repTable .rep-sticky-last { box-shadow: 2px 0 0 var(--line), 8px 0 12px rgba(10,20,40,.08); }
[data-theme="dark"] #repTable .rep-sticky-last { box-shadow: 2px 0 0 var(--line), 8px 0 12px rgba(0,0,0,.3); }
#repTable tbody td.rep-low-spp { background: #ffc8cc; color: #351014; }
#repTable tbody tr:nth-child(even) td.rep-low-spp { background: #ffc8cc; }
[data-theme="dark"] #repTable tbody td.rep-low-spp { background: #3b3346; color: #f3d8e1; }
[data-theme="dark"] #repTable tbody tr:nth-child(even) td.rep-low-spp { background: #3b3346; }
#repTable .rep-spp-alert-title { background: #ffc8cc !important; color: #241012; }
[data-theme="dark"] #repTable .rep-spp-alert-title { background: #46364f !important; color: #f4dbe4; }
#repTable tbody tr:hover td, #repTable tbody tr:hover .rep-sticky { background: var(--hover); }
#repTable tbody tr:hover td.rep-low-spp { background: #f7b7bd; }
[data-theme="dark"] #repTable tbody tr:hover td.rep-low-spp { background: #463b52; }
#repTable tbody tr.rep-row-dirty td { box-shadow: inset 3px 0 0 var(--blue); }
#repTable tbody tr.rep-row-editing td { border-top-color: color-mix(in srgb, var(--blue) 55%, var(--line)); border-bottom-color: color-mix(in srgb, var(--blue) 55%, var(--line)); }
#repTable tbody td.rep-cell-dirty {
  background: color-mix(in srgb, #ffd166 35%, var(--card)) !important;
  box-shadow: inset 0 0 0 2px #c89416 !important;
}
/* Значение общей строки не менялось, но у части SKU коллекции это поле
   пустое — сохранение впишет им это же значение (Ю-5). */
#repTable tbody td.rep-cell-blank-fill {
  background: color-mix(in srgb, var(--blue) 16%, var(--card)) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 55%, transparent) !important;
}
#repTable .rep-edit-cell { padding: 5px 8px; }
#repTable .rep-manual-cell { background: color-mix(in srgb, var(--blue-soft) 28%, var(--card)); }
#repTable .rep-calculated-cell {
  background: color-mix(in srgb, var(--surface-2) 76%, var(--card));
  color: var(--muted);
}
#repTable tbody tr:nth-child(even) .rep-manual-cell { background: color-mix(in srgb, var(--blue-soft) 34%, var(--cell)); }
#repTable tbody tr:nth-child(even) .rep-calculated-cell { background: color-mix(in srgb, var(--surface-2) 82%, var(--cell)); }
#repTable td.rep-key-input-cell {
  font-weight: 650;
}
#repTable td.rep-key-input-cell .rep-edit-input { font-weight: 700; }
#repTable td.rep-key-result-cell {
  font-weight: 700;
}
#repTable td.rep-hero-cell { font-weight: 800; }
.rep-competitor-observation-cell {
  font-variant-numeric: tabular-nums;
}
.rep-competitor-observation-layout {
  display: flex;
  min-height: 36px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
}
.rep-competitor-spp-link,
.rep-competitor-spp-value {
  display: block;
  padding: 0 2px;
  color: var(--blue);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}
.rep-competitor-spp-link:hover {
  color: color-mix(in srgb, var(--blue) 78%, #0b2b5f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rep-competitor-spp-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.rep-competitor-spp-value {
  color: var(--muted);
}
.rep-competitor-observation-value {
  white-space: nowrap;
}
.rep-competitor-observation-date {
  display: block;
  width: 100%;
  padding-right: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
#repTable tbody td.rep-competitor-observation-stale {
  background: color-mix(in srgb, #aeb5bf 42%, var(--cell)) !important;
  color: var(--muted);
}
#repTable tbody td.rep-competitor-observation-stale .rep-competitor-spp-link,
#repTable tbody td.rep-competitor-observation-stale .rep-competitor-spp-value {
  color: var(--muted);
}
[data-theme="dark"] #repTable tbody td.rep-competitor-observation-stale {
  background: color-mix(in srgb, #89919d 24%, var(--cell)) !important;
}
[data-theme="dark"] .rep-competitor-spp-link,
[data-theme="dark"] .rep-competitor-spp-value {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.rep-competitor-marketing-cell {
  min-width: 148px;
  max-width: 230px;
}
.rep-competitor-marketing-link,
.rep-competitor-marketing-text {
  display: block;
  padding: 0 2px;
  color: var(--blue);
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}
.rep-competitor-marketing-link:hover {
  color: color-mix(in srgb, var(--blue) 78%, #0b2b5f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rep-competitor-marketing-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.rep-competitor-marketing-value {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
#repTable tbody td.rep-competitor-observation-stale .rep-competitor-marketing-link,
#repTable tbody td.rep-competitor-observation-stale .rep-competitor-marketing-text {
  color: var(--muted);
}

/* Палитра исходного клиентского UNIT OZON. Классы назначаются по ключу поля,
   поэтому цвета не съезжают при скрытии или переносе блоков колонок. */
#repTable .rep-main-head-row th.rep-sheet-tone-input,
#repTable .rep-filter-row th.rep-sheet-tone-input {
  background: var(--rep-sheet-input-head) !important;
  color: var(--rep-sheet-color);
}
#repTable tbody td.rep-sheet-tone-input {
  background: var(--rep-sheet-input-cell) !important;
  color: var(--rep-sheet-color);
}
#repTable .rep-main-head-row th.rep-sheet-tone-formula,
#repTable .rep-filter-row th.rep-sheet-tone-formula {
  background: var(--rep-sheet-formula-head) !important;
  color: var(--rep-sheet-color);
}
#repTable .rep-main-head-row th.rep-competitor-head,
#repTable .rep-filter-row th.rep-competitor-head {
  background: color-mix(in srgb, var(--blue-soft) 62%, var(--rep-sheet-formula-head)) !important;
  color: color-mix(in srgb, var(--blue) 72%, var(--rep-sheet-color));
}
#repTable .rep-main-head-row th.rep-competitor-head-first,
#repTable .rep-filter-row th.rep-competitor-head-first {
  border-left-color: color-mix(in srgb, var(--blue) 42%, var(--line));
}
#repTable .rep-main-head-row th.rep-competitor-head-last,
#repTable .rep-filter-row th.rep-competitor-head-last {
  border-right-color: color-mix(in srgb, var(--blue) 42%, var(--line));
}
[data-theme="dark"] #repTable .rep-main-head-row th.rep-competitor-head,
[data-theme="dark"] #repTable .rep-filter-row th.rep-competitor-head {
  background: color-mix(in srgb, var(--blue) 17%, var(--rep-sheet-formula-head)) !important;
  color: var(--rep-sheet-color);
}
#repTable tbody td.rep-sheet-tone-formula {
  background: var(--rep-sheet-formula-cell) !important;
  color: var(--rep-sheet-color);
}
#repTable .rep-main-head-row th.rep-sheet-tone-base-price,
#repTable .rep-filter-row th.rep-sheet-tone-base-price {
  background: var(--rep-sheet-base-price-head) !important;
  color: var(--rep-sheet-color);
}
#repTable tbody td.rep-sheet-tone-base-price {
  background: var(--rep-sheet-base-price-cell) !important;
  color: var(--rep-sheet-color);
}
#repTable .rep-main-head-row th.rep-sheet-tone-buyer-price,
#repTable .rep-filter-row th.rep-sheet-tone-buyer-price {
  background: var(--rep-sheet-buyer-price-head) !important;
  color: var(--rep-sheet-buyer-color);
}
#repTable tbody td.rep-sheet-tone-buyer-price {
  background: var(--rep-sheet-buyer-price-cell) !important;
  color: var(--rep-sheet-buyer-color);
}
#repTable th.rep-sheet-tone-base-price,
#repTable th.rep-sheet-tone-buyer-price,
#repTable td.rep-sheet-tone-base-price,
#repTable td.rep-sheet-tone-buyer-price {
  font-weight: 800;
}
#repTable .rep-summary-group.rep-sheet-group-product { background: #e6eef9 !important; }
#repTable .rep-summary-group.rep-sheet-group-controls { background: var(--rep-sheet-input-head) !important; }
#repTable .rep-summary-group.rep-sheet-group-dimensions { background: #c8d9f1 !important; }
#repTable .rep-summary-group.rep-sheet-group-cost { background: var(--rep-sheet-formula-head) !important; }
#repTable .rep-summary-group.rep-sheet-group-price { background: var(--rep-sheet-base-price) !important; color: var(--rep-sheet-color); }
#repTable .rep-summary-group.rep-sheet-group-services { background: #e4d9f2 !important; }
#repTable .rep-summary-group.rep-sheet-group-logistics { background: #d8e5f5 !important; }
#repTable .rep-summary-group.rep-sheet-group-tax { background: #fce5cd !important; }
#repTable .rep-summary-group.rep-sheet-group-other-costs { background: #eadcf3 !important; }
#repTable .rep-summary-group.rep-sheet-group-result { background: #b7e1cd !important; }
#repTable .rep-summary-group.rep-sheet-group-history { background: #d9d2e9 !important; }
#repTable .rep-summary-group.rep-sheet-group-service { background: #eceff3 !important; }

[data-theme="dark"] #repTable {
  /* Чистый чёрный превращал жёлтый и оранжевый в оливковый/коричневый.
     Холодная slate-база сохраняет порядок цветов светлого UNIT, но делает
     заливки спокойными и согласованными с тёмной темой. */
  --rep-sheet-dark-base: #2b3a4d;
  --rep-sheet-dark-cell: #253345;
  --rep-sheet-input-head: color-mix(in srgb, #a4c2f4 30%, var(--rep-sheet-dark-base));
  --rep-sheet-input-cell: color-mix(in srgb, #e6f0fa 12%, var(--rep-sheet-dark-cell));
  --rep-sheet-formula-head: color-mix(in srgb, #ffe599 16%, var(--rep-sheet-dark-base));
  --rep-sheet-formula-cell: color-mix(in srgb, #fffbe1 7%, var(--rep-sheet-dark-cell));
  /* Для двух ключевых цен не смешиваем акцент с синей базой: такое
     смешивание убивает исходный hue и даёт коричневый/бирюзовый. */
  --rep-sheet-base-price-head: #df9949;
  --rep-sheet-base-price-cell: #d37f31;
  --rep-sheet-buyer-price-head: #6f9b6c;
  --rep-sheet-buyer-price-cell: #56855c;
  --rep-sheet-color: #eef2f7;
  --rep-sheet-buyer-color: #eef7f0;
}
[data-theme="dark"] #repTable th.rep-sheet-tone-base-price,
[data-theme="dark"] #repTable td.rep-sheet-tone-base-price {
  box-shadow: inset 3px 0 0 #c9822f;
}
[data-theme="dark"] #repTable th.rep-sheet-tone-buyer-price,
[data-theme="dark"] #repTable td.rep-sheet-tone-buyer-price {
  box-shadow: inset 3px 0 0 #55a56e;
}
[data-theme="dark"] #repTable .rep-summary-group[class*="rep-sheet-group-"] { color: #edf1f7; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-product { background: color-mix(in srgb, #e6eef9 16%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-controls { background: color-mix(in srgb, #a4c2f4 26%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-dimensions { background: color-mix(in srgb, #c8d9f1 18%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-cost { background: color-mix(in srgb, #ffe599 16%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-price { background: #d37f31 !important; box-shadow: inset 0 -3px 0 #f2b36f; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-services { background: color-mix(in srgb, #e4d9f2 18%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-logistics { background: color-mix(in srgb, #d8e5f5 16%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-tax { background: color-mix(in srgb, #fce5cd 14%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-other-costs { background: color-mix(in srgb, #eadcf3 18%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-result { background: color-mix(in srgb, #b7e1cd 18%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-history { background: color-mix(in srgb, #d9d2e9 18%, #2b3a4d) !important; }
[data-theme="dark"] #repTable .rep-summary-group.rep-sheet-group-service { background: color-mix(in srgb, #eceff3 14%, #2b3a4d) !important; }
.rep-edit-select { text-align: center; text-align-last: center; min-width: 100%; }
.rep-edit-input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 7px;
  font-size: 13px;
  text-align: center;
}
.rep-edit-input:disabled {
  border-color: transparent;
  background: transparent;
  color: inherit;
  cursor: default;
  opacity: .82;
}
.rep-row-editing .rep-edit-input:not(:disabled) { border-color: var(--blue); background: var(--panel); }
.rep-name-editor { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rep-name-editor > .rep-edit-input { flex: 1 1 auto; min-width: 90px; text-align: center; }
.rep-unit-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 64px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.rep-unit-group-toggle:hover { color: var(--text); border-color: var(--blue); }
.rep-row-editing .rep-unit-group-toggle {
  min-width: 27px;
  width: 27px;
  padding-inline: 4px;
  overflow: hidden;
  font-size: 0;
}
.rep-row-editing .rep-unit-group-toggle > span { font-size: 11px; }
.rep-row-editing .rep-name-editor > .rep-edit-input { min-width: 64px; }
.rep-unit-child-mark { flex: 0 0 14px; color: var(--muted); text-align: center; }
.rep-sku-readonly { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.rep-sku-edit-input { display: none; }
.rep-row-editing .rep-sku-readonly { display: none; }
.rep-row-editing .rep-sku-edit-input { display: block; width: 100%; }
#repTable tbody tr.rep-unit-collection-band-0 > td.rep-name-edit-cell { background: #fff3dc; }
#repTable tbody tr.rep-unit-collection-band-1 > td.rep-name-edit-cell { background: #cfe1f4; }
[data-theme="dark"] #repTable tbody tr.rep-unit-collection-band-0 > td.rep-name-edit-cell { background: color-mix(in srgb, #fff3dc 9%, #253345); }
[data-theme="dark"] #repTable tbody tr.rep-unit-collection-band-1 > td.rep-name-edit-cell { background: color-mix(in srgb, #cfe1f4 14%, #253345); }
#repTable tbody tr.rep-unit-collection-band-0:hover > td.rep-name-edit-cell { background: #f5dfb9; }
#repTable tbody tr.rep-unit-collection-band-1:hover > td.rep-name-edit-cell { background: #b9d3ee; }
[data-theme="dark"] #repTable tbody tr.rep-unit-collection-band-0:hover > td.rep-name-edit-cell { background: color-mix(in srgb, #fff3dc 13%, #2d4055); }
[data-theme="dark"] #repTable tbody tr.rep-unit-collection-band-1:hover > td.rep-name-edit-cell { background: color-mix(in srgb, #cfe1f4 18%, #2d4055); }
#repTable td.rep-inherited-cell { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--blue) 35%, transparent); }
#repTable td.rep-override-cell { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--orange) 60%, transparent); }
#repTable td.rep-collection-local-empty { color: var(--muted); text-align: center; }
.rep-client-check-summary { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.rep-client-check-status { color: var(--muted); font-size: 12px; }
.rep-client-conflict-block { padding: 8px 0; border-bottom: 1px solid var(--line); }
.rep-client-conflict-block:last-child { border-bottom: 0; }
.rep-client-field-option { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; cursor: pointer; color: var(--text); }
.rep-client-field-option input { flex: 0 0 auto; margin-top: 3px; }
.rep-client-add-options { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#repUnitClientApplyFoot { flex-wrap: wrap; }
.rep-client-add-options label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rep-client-add-options input { accent-color: var(--blue); }
.app-confirm-modal { width: min(560px, calc(100vw - 32px)); }
#appConfirmModal { z-index: 5000; }
.app-confirm-message {
  white-space: pre-line;
  line-height: 1.55;
  padding: 4px 2px 10px;
  color: var(--text);
}
.app-confirm-modal.is-danger .app-confirm-message { border-left: 3px solid var(--red); padding-left: 12px; }
/* Список полей в подтверждении: снятая галочка = «это поле не трогаем». */
.app-confirm-choices { padding: 0 2px 10px; }
.app-confirm-choices-list { display: flex; flex-direction: column; gap: 6px; }
.app-confirm-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  line-height: 1.45;
  cursor: pointer;
}
.app-confirm-choice:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.app-confirm-choice input { accent-color: var(--blue); margin-top: 2px; flex: 0 0 auto; }
.app-confirm-choice:has(input:not(:checked)) { opacity: .55; }
.app-confirm-choices-note { padding: 8px 2px 0; color: var(--muted); line-height: 1.45; }
.rep-inline-edit-actions { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.rep-inline-edit-actions .btn { padding: 5px 7px; font-size: 11px; white-space: nowrap; }
.rep-inline-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.rep-inline-edit-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rep-inline-edit-icon:hover { color: var(--text); background: var(--hover); border-color: var(--line); }
.rep-inline-edit-icon:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.rep-name-edit-cell { min-width: 290px; }
.rep-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.rep-switch input { position: absolute; opacity: 0; pointer-events: none; }
.rep-switch span {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: var(--line);
  transition: background .16s ease;
}
.rep-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .16s ease;
}
.rep-switch input:checked + span { background: var(--blue); }
.rep-switch input:checked + span::after { transform: translateX(18px); }
.rep-switch:has(input:disabled) { cursor: default; opacity: .68; }
.rep-switch-runtime {
  display: flex;
  min-height: 34px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.rep-runtime-status {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
.rep-runtime-live { color: var(--green); }
.rep-runtime-reprice, .rep-runtime-parse { color: var(--blue); }
.rep-runtime-no_stock, .rep-runtime-awaiting_sync, .rep-runtime-reprice_wait,
.rep-runtime-not_in_current_catalog { color: var(--muted); }
.rep-runtime-parser_without_stock, .rep-runtime-awaiting_disable { color: var(--red); }
.rep-actions-cell {
  min-height: 38px;
}
.rep-actions-inline {
  display: flex;
  gap: 6px;
  align-items: center;
}
.rep-unit-actions { min-width: 330px; }
.rep-dirty-count { font-variant-numeric: tabular-nums; }
#repTable td.rep-unit-negative { color: var(--red); font-weight: 700; }
#repTable td.rep-unit-positive { color: var(--green); font-weight: 700; }
.rep-unit-missing { color: var(--red); font-weight: 700; }
[data-theme="dark"] #repTable td.rep-unit-negative { color: #ff9ca5; }
[data-theme="dark"] #repTable td.rep-unit-positive { color: #72d7a0; }
/* Фактическая зелёная цена — то, что реально видит покупатель. Зелёным,
   чтобы отличать от расчётных цен в соседних колонках.
   Селектор с классом палитры обязателен: колонки помечены как расчётные,
   а правило `td.rep-sheet-tone-formula` специфичнее и иначе перебивает цвет. */
#repTable tbody td.rep-sheet-tone-formula.rep-green-price,
#repTable tbody td.rep-green-price { color: var(--green); font-weight: 700; }
[data-theme="dark"] #repTable tbody td.rep-sheet-tone-formula.rep-green-price,
[data-theme="dark"] #repTable tbody td.rep-green-price { color: #72d7a0; }
.rep-actions-cell .btn {
  padding: 5px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.rep-history-body {
  padding: 0 16px 16px;
  max-height: 65vh;
  overflow: auto;
}

.metriclab-import-modal { width: min(1180px, 94vw); }
.metriclab-upload { display: grid; gap: 14px; padding: 8px 0 18px; }
.metriclab-upload label { display: grid; gap: 7px; }
.metriclab-meta { margin: 4px 0 12px; }
.metriclab-period-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.metriclab-period-label .input { width: min(420px, 100%); }
.metriclab-summary { margin-bottom: 12px; }
.metriclab-headline { margin-bottom: 14px; }
.metriclab-headline-main { display: grid; gap: 5px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; background: var(--panel); transition: border-color .15s ease, background .15s ease; }
.metriclab-headline-main:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--panel)); }
.metriclab-headline-main.active { border-color: var(--blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent); }
.metriclab-headline-main:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.metriclab-headline-label { color: var(--muted); font-size: 12px; }
.metriclab-headline-value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.metriclab-headline-value b { font-size: 30px; line-height: 1; color: var(--blue); }
.metriclab-headline-value span { color: var(--muted); font-size: 13px; }
.metriclab-headline-note { margin-top: 8px; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.metriclab-headline-note.warn { background: var(--orange-soft); color: var(--orange); }
.metriclab-headline-note.info { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); }
.metriclab-headline-note.danger { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--red); }
.metriclab-decision-title { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.metriclab-decision { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.metriclab-tile { display: grid; gap: 8px; align-content: start; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: var(--panel); }
.metriclab-tile.empty { opacity: .6; }
.metriclab-tile-main { display: grid; gap: 3px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 0; padding: 0; background: none; }
.metriclab-tile-main:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.metriclab-tile-main b { font-size: 22px; line-height: 1.15; }
.metriclab-tile-label { font-size: 13px; }
.metriclab-tile-hint { color: var(--muted); font-size: 11px; line-height: 1.35; }
.metriclab-tile:hover { border-color: var(--blue); }
.metriclab-tile:has(.metriclab-tile-main.active) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent); }
.metriclab-tile-action { width: 100%; padding: 6px 8px; font-size: 11px; white-space: nowrap; }
.metriclab-rest { border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; background: var(--panel); margin-bottom: 12px; }
.metriclab-rest > summary { cursor: pointer; font-size: 13px; }
.metriclab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.metriclab-chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.metriclab-chip:hover { border-color: var(--blue); color: var(--blue); }
.metriclab-chip.active { border-color: var(--blue); color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.metriclab-chip.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.metriclab-chip.empty { opacity: .55; }
.metriclab-rows-meta { margin: -3px 0 8px; font-size: 12px; }
.metriclab-sku { display: inline-flex; align-items: center; gap: 7px; }
.metriclab-sku .stock-light { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); }
.metriclab-candidate-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; min-height: 36px; margin: -3px 0 8px; }
.metriclab-candidate-actions .btn { white-space: nowrap; }
.metriclab-candidate-actions .muted { flex: 1 1 440px; padding-top: 5px; line-height: 1.45; }
.metriclab-confirm-back { z-index: 140; align-items: center; }
.metriclab-confirm-modal { width: min(560px, calc(100vw - 32px)); overflow: hidden; }
.metriclab-confirm-count { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; border: 1px solid var(--modal-border); border-radius: 10px; background: color-mix(in srgb, var(--blue) 7%, var(--modal-bg)); }
.metriclab-confirm-count .muted { margin-right: auto; }
.metriclab-confirm-count b { color: var(--blue); font-size: 28px; line-height: 1; }
.metriclab-confirm-rule { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--modal-border); border-radius: 10px; background: var(--surface-2); }
.metriclab-confirm-rule ul { margin: 8px 0 0; padding-left: 20px; }
.metriclab-confirm-rule li + li { margin-top: 5px; }
.metriclab-confirm-note { margin-top: 14px; padding: 11px 13px; border-left: 3px solid var(--green); border-radius: 6px; background: var(--green-soft); color: var(--text); line-height: 1.5; }
.metriclab-action-confirm-modal { width: min(620px, calc(100vw - 32px)); }
.metriclab-action-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.metriclab-action-stat { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid var(--modal-border); border-radius: 10px; background: var(--surface-2); }
.metriclab-action-stat span { color: var(--muted); font-size: 12px; }
.metriclab-action-stat b { color: var(--text); font-size: 24px; line-height: 1; }
.metriclab-action-stat.primary { border-color: color-mix(in srgb, var(--blue) 55%, var(--modal-border)); background: color-mix(in srgb, var(--blue) 9%, var(--modal-bg)); }
.metriclab-action-stat.primary b { color: var(--blue); }
.metriclab-action-stat.warning b { color: var(--orange); }
.metriclab-empty { text-align: center; padding: 28px 12px !important; }
.metriclab-table-wrap { max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.metriclab-table { min-width: 1080px; }
.metriclab-table thead { position: sticky; top: 0; z-index: 2; }
.metriclab-table td { vertical-align: top; }
.metriclab-status { white-space: nowrap; font-weight: 600; }
.metriclab-candidate-badge { display: block; width: max-content; margin-top: 4px; padding: 2px 6px; border-radius: 999px; background: var(--orange-soft); color: var(--orange); font-size: 10px; font-weight: 700; white-space: nowrap; }
.metriclab-reactivated-badge { display: block; width: max-content; margin-top: 4px; padding: 2px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 700; white-space: nowrap; }
.metriclab-anomaly-badge { display: block; width: max-content; margin-top: 4px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); font-size: 10px; font-weight: 700; white-space: nowrap; }
.metriclab-conflict-badge { display: block; width: max-content; margin-top: 4px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); font-size: 10px; font-weight: 700; white-space: nowrap; }
.metriclab-row-candidate:not(.metriclab-row-excluded) { box-shadow: inset 3px 0 0 var(--orange); }
.metriclab-row-reactivated { box-shadow: inset 3px 0 0 var(--green); }
.metriclab-row-unavailable-anomaly:not(.metriclab-row-candidate):not(.metriclab-row-excluded) { box-shadow: inset 3px 0 0 var(--blue); }
.metriclab-row-above-sale-conflict:not(.metriclab-row-excluded) { box-shadow: inset 3px 0 0 var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
.metriclab-row-excluded { opacity: .68; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.metriclab-row-excluded td { text-decoration-color: var(--muted); }
.metriclab-import-action { width: 142px; min-width: 142px; }
.metriclab-exclude-btn { width: 100%; padding: 6px 8px; font-size: 11px; white-space: nowrap; }
.metriclab-exclude-btn.active { border-color: var(--orange); color: var(--orange); background: var(--orange-soft); }
.metriclab-row-error, .metriclab-row-unmatched { background: color-mix(in srgb, var(--red) 8%, transparent); }
.metriclab-row-protected { background: color-mix(in srgb, #e5a000 9%, transparent); }
.metriclab-row-change, .metriclab-row-new { background: color-mix(in srgb, #1f9d55 7%, transparent); }
@media (max-width: 900px) { .metriclab-decision { grid-template-columns: 1fr; } }
.rep-history-item {
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
}
.rep-history-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.rep-history-changes {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.rep-history-group-title {
  margin-top: 6px;
}
.rep-history-manual-block {
  background: rgba(245, 158, 11, 0.12);
  border-left: 3px solid #d97706;
  border-radius: 6px;
  padding: 6px 10px;
  display: grid;
  gap: 4px;
}
.rep-history-manual-block .rep-history-group-title {
  margin-top: 0;
  color: #b45309;
}
.rep-history-auto-block {
  color: var(--muted);
  padding: 0 10px;
  display: grid;
  gap: 4px;
}
.rep-history-auto-block .rep-history-group-title {
  margin-top: 4px;
}
.rep-history-reason {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 6px;
}
.rep-collection-modal {
  width: min(620px, calc(100vw - 48px));
}
.rep-collection-form {
  display: grid;
  grid-template-columns: 1fr 130px 150px;
  gap: 12px;
  align-items: end;
  padding: 0 16px 10px;
}
.rep-collection-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.rep-collection-form select.input {
  width: 100%;
}
.rep-collection-form .rep-add-check {
  grid-column: 1 / -1;
  min-height: 26px;
}
.rep-collection-status {
  padding: 0 16px 4px;
  min-height: 22px;
}
.rep-add-form {
  display: grid;
  gap: 14px;
  padding: 0 16px 10px;
}
.rep-add-mode-row {
  display: flex;
  align-items: center;
}
.rep-add-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: min(340px, 100%);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.rep-add-toggle button {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 8px 14px;
}
.rep-add-toggle button:hover {
  color: var(--text);
  background: var(--hover);
}
.rep-add-toggle button.active {
  background: var(--blue-soft);
  border-color: rgba(75, 127, 245, .45);
  color: var(--blue);
  font-weight: 700;
}
.rep-add-fields {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(150px, .7fr) minmax(170px, .8fr) minmax(120px, auto);
  gap: 12px;
  align-items: end;
}
.rep-add-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.rep-add-check {
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  min-height: 34px;
  color: var(--text) !important;
}
.rep-add-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 10px;
}
.rep-add-results {
  padding: 0 16px 12px;
  max-height: 48vh;
  overflow: auto;
}
.rep-add-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rep-add-table th,
.rep-add-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 8px;
  text-align: left;
}
.rep-add-table th {
  color: var(--head-text);
  font-weight: 700;
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.rep-add-table .num { text-align: right; }
.rep-add-table .muted-row td { color: var(--muted); }
.rep-add-decision-cell { white-space: nowrap; }
.rep-add-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.rep-add-badge.add { background: var(--green-soft); color: var(--green); }
.rep-add-badge.exists { background: var(--blue-soft); color: var(--blue); }
.rep-add-badge.blocked { background: var(--red-soft); color: var(--red); }
@media (max-width: 980px) {
  .rep-add-fields { grid-template-columns: 1fr 1fr; }
  .rep-collection-form { grid-template-columns: 1fr; }
}
#repTable .rep-empty {
  color: var(--muted);
  text-align: left;
  padding: 18px;
}
.rep-clear {
  flex-shrink: 0;
  padding: 5px 9px;
}
.rep-clear:hover { border-color: var(--blue); color: var(--blue); }

/* --- Сворачивание сайдбара --- */
.topbar-left { display: flex; align-items: center; gap: 10px; }
#sidebarToggle { padding: 6px 9px; line-height: 1; font-size: 16px; }
.sidebar { transition: width .15s ease, padding .15s ease; overflow: hidden; }
.side-brand, .side-item, .side-footer { white-space: nowrap; }
body.sidebar-collapsed .sidebar { width: 0; padding-left: 0; padding-right: 0; border-right: none; }

@media (max-width: 760px) {
  body { font-size: 14px; }
  .layout { display: block; }
  .content { width: 100%; }
  .sidebar,
  body.sidebar-collapsed .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 304px);
    height: 100dvh;
    padding: 14px 12px;
    border-right: 1px solid var(--side-line);
    transform: translateX(-102%);
    transition: transform .18s ease;
    z-index: 80;
    overflow-y: auto;
  }
  body.sidebar-mobile-open { overflow: hidden; }
  body.sidebar-mobile-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(25, 28, 34, .46);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 79;
  }
  body.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .side-brand-row { min-height: 82px; padding: 3px 7px 17px; }
  .side-brand { font-size: 17px; }
  .sidebar-close {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--side-line);
    border-radius: 8px;
    background: var(--side-hover);
    color: var(--side-text);
    font: inherit;
    cursor: pointer;
  }
  .side-item { min-height: 60px; }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: start;
    padding: 10px 12px;
  }
  .topbar-left { min-width: 0; align-items: flex-start; }
  .brand { min-width: 0; line-height: 1.3; }
  .brand > span { display: block; }
  #brandMain { font-size: 15px; }
  #brandSub { margin-top: 2px; font-size: 12px; }
  .topbar-right { display: contents; }
  .topbar-actions { grid-column: 2; grid-row: 1; align-self: start; }
  #sidebarToggle,
  #themeToggle,
  .modal .btn.close { min-width: 44px; min-height: 44px; }
  .input, .btn { min-height: 44px; }
  .search-clear { min-width: 40px; min-height: 40px; }
  .toolbar { padding-left: 12px; padding-right: 12px; }
  .filterbar > *,
  .filterbar .search-wrap,
  .filterbar .search-wrap > input { max-width: 100%; }
  #search, #aaSearch, .sales-search-wrap #salesSearch { width: min(100%, 360px); }
  .aa-ai-panel { margin-left: 12px; margin-right: 12px; }
  .active-wrap { margin-left: 12px; margin-right: 12px; }
}



/* --- Раздел «Активная реклама» --- */
#view-activeAds { padding-top: 10px; }
.active-topic-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.active-topic-hidden { display: none !important; }
#view-activeAds #aaAiPanel {
  margin-bottom: 40px;
  padding: 16px;
  border-left: 1px solid var(--line);
}
#view-activeAds #aaAiPanel > .aa-ai-controls {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
/* Базовый режим сохраняет обычную прокрутку страницы (в том числе на узких
   экранах). На десктопе JS добавляет класс ниже и удерживает нижнюю границу
   таблицы вместе с горизонтальной полосой внутри видимой части окна. */
#passiveCampaignsPanel {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
}
#passiveCampaignsPanel.passive-viewport-scroll {
  max-height: var(--passive-table-viewport-height, calc(100dvh - 390px));
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#passiveCampaignsPanel.passive-viewport-scroll::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
#passiveCampaignsPanel.passive-viewport-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  background-clip: padding-box;
}
#passiveCampaignsPanel.passive-viewport-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
#passiveCampaignsWorkspace,
#activeCampaignsWorkspace {
  margin: 0 16px 70px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow) 45%, transparent);
}
#passiveCampaignsWorkspace > .toolbar,
#activeCampaignsWorkspace > .toolbar {
  padding-right: 0;
  padding-left: 0;
}
#passiveCampaignsWorkspace #passiveCampaignsPanel {
  margin: 0;
}
#view-ads.passive-campaigns-viewport #passiveCampaignsWorkspace {
  margin-bottom: 0;
}
#activeCampaignsWorkspace { margin-bottom: 40px; }
#activeCampaignsWorkspace .active-wrap { margin: 0; }
.active-campaign-filter-set { flex-wrap: nowrap; }
.active-campaign-filter-set .input { min-width: 128px; }
.active-campaign-filter-set #aaScope { min-width: 190px; }
.active-campaign-actionbar #aaRowsInfo { min-width: 0; white-space: normal; }
.active-campaign-actionbar { position: relative; z-index: 70; }
.active-table-settings { flex-wrap: nowrap; }
.active-table-settings #aaGroupBy { min-width: 156px; }
.active-source-note { margin: -3px 0 10px; }
.aa-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.aa-seg button {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.aa-seg button + button { border-left: 1px solid var(--line); }
.aa-seg button:hover { color: var(--text); background: var(--hover); }
.aa-seg button.active {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 600;
}
.aa-date-order-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 72px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
}
.aa-date-order-icon { font-size: 17px; transition: transform .15s ease; }
.aa-date-order-toggle[data-current-order="desc"] .aa-date-order-icon { transform: scaleX(-1); }
.aa-sources-info {
  color: var(--muted);
  cursor: help;
  font-size: 13px;
  line-height: 1;
  padding: 2px;
}
@media (max-width: 1250px) {
  .active-campaign-filter-set,
  .active-table-settings { flex-wrap: wrap; }
}
.aa-sources-info:hover { color: var(--text); }
.source-note {
  margin: 0 16px 8px;
  color: var(--tag-text);
  font-size: 12px;
}
.aa-ai-panel {
  margin: 0 16px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow) 45%, transparent);
}
@media (max-width: 1100px) {
  .active-topic-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .active-topic-tabs { grid-template-columns: 1fr; }
}
#passiveSppBtn.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
#passiveSppBtn.warn:not(.active) {
  color: var(--orange);
  background: var(--orange-soft);
  border-color: color-mix(in srgb, var(--orange) 55%, var(--line));
  font-weight: 700;
}
.aa-ai-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.aa-ai-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aa-ai-target input {
  width: 92px;
}
.aa-ai-result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 13px;
}
.aa-ai-result.error {
  color: var(--red);
}
#aaManagerToggle.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.aa-manager-panel {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.aa-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.aa-manager-body {
  margin-top: 10px;
  font-size: 12px;
}
.aa-manager-source {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--purple);
  color: var(--purple);
  background: var(--purple-soft);
  font-size: 11px;
  font-weight: 700;
}
.aa-manager-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aa-manager-chip,
.aa-manager-status,
.aa-manager-metric {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.aa-manager-chip.good { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.aa-manager-chip.warn { border-color: var(--orange); color: var(--orange); background: var(--orange-soft); }
.aa-manager-chip.bad { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.aa-manager-summary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  line-height: 1.45;
}
.aa-manager-table-wrap {
  margin-top: 10px;
  overflow: auto;
}
.aa-manager-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}
.aa-manager-table th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 5px 8px;
}
.aa-manager-table th.num { text-align: right; }
.aa-manager-table td {
  padding: 7px 8px;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
}
.aa-manager-action {
  font-weight: 700;
  white-space: nowrap;
}
.aa-manager-action.bid_down { color: var(--red); }
.aa-manager-action.bid_up { color: var(--green); }
.aa-manager-action.pause_candidate { color: var(--orange); }
.aa-manager-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0 8px 0 0;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.aa-manager-link:hover {
  text-decoration: underline;
}
.rep-floor-panel.collapsed .aa-ai-cards,
.rep-floor-panel.collapsed .aa-ai-result {
  display: none;
}
.error-text {
  color: var(--red);
}
.active-wrap {
  margin: 0 16px 40px;
  max-height: var(--long-table-max-height);
  width: auto;
  max-width: none;
  position: relative;
}
/* Один экран для таблицы РНП: высоту считает скрипт от реального
   положения таблицы, ниже неё ничего не остаётся. */
.active-wrap.aa-viewport {
  max-height: var(--aa-viewport-height, calc(100dvh - 320px));
  margin-bottom: 10px;
  contain: paint;
  scrollbar-gutter: stable;
}
.active-wrap.aa-viewport::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.active-wrap.aa-viewport::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  background-clip: padding-box;
}
.active-wrap.aa-viewport::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
#activeCampaignsWorkspace:has(.active-wrap.aa-viewport) { margin-bottom: 0; }
.aa-mobile-cards { display: none; }
.aa-source-warning {
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--orange-soft) 42%, var(--card));
}
.aa-source-warning summary {
  padding: 8px 10px;
  color: var(--orange);
  cursor: pointer;
  font-weight: 700;
}
.aa-source-warning > div {
  padding: 0 10px 9px;
  line-height: 1.45;
}
.active-grid {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.active-grid th, .active-grid td {
  width: 120px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-clip: border-box;
}
.active-grid th:last-child, .active-grid td:last-child { border-right: none; }
.active-grid th.num, .active-grid td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Мобильная активная реклама: вместо таблицы с 670px закреплённых колонок
   показываем карточки. Внутреннего вертикального скролла нет — прокручивается
   обычная страница, поэтому предупреждение сверху не блокирует показатели. */
@media (max-width: 900px) {
  #activeCampaignsWorkspace .active-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  #activeCampaignsWorkspace #aaTable { display: none; }
  #activeCampaignsWorkspace .aa-mobile-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #activeCampaignsWorkspace .active-source-note {
    margin: 0 0 10px;
  }
  #activeCampaignsWorkspace .aa-source-warning summary {
    min-height: 44px;
    padding: 12px;
  }
  .aa-mobile-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow) 38%, transparent);
  }
  .aa-mobile-card-heading {
    display: grid;
    gap: 3px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--blue-soft) 34%, var(--card));
  }
  .aa-mobile-card-heading strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
  }
  .aa-mobile-card-heading span {
    color: var(--muted);
    font-size: 10px;
  }
  .aa-mobile-product-head {
    min-height: 70px;
    overflow: hidden;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .aa-mobile-product-head .aa-art-img {
    float: left;
    width: 58px;
    height: 58px;
    margin: 0 10px 8px 0;
  }
  .aa-mobile-product-head .aa-art-offer { margin-top: 0; }
  .aa-mobile-product-head .aa-cost-cap,
  .aa-mobile-product-head .aa-mobile-bids-details,
  .aa-mobile-product-head .aa-bids { clear: both; }
  .aa-mobile-product-head .aa-cost-btn { min-height: 38px; }
  .aa-mobile-bids-details {
    margin-top: 9px;
    border-top: 1px solid var(--line);
  }
  .aa-mobile-bids-details > summary {
    min-height: 40px;
    padding: 10px 2px 6px;
    color: var(--blue);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
  }
  .aa-mobile-bids-details[open] > summary { margin-bottom: 6px; }
  .aa-mobile-product-head .aa-bids {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 8px;
  }
  .aa-mobile-product-head .aa-bid-card { min-width: 0; }
  .aa-mobile-metrics { display: grid; }
  .aa-mobile-metric {
    border-bottom: 1px solid var(--line);
    background: var(--card);
  }
  .aa-mobile-metric.is-strong {
    background: color-mix(in srgb, var(--green-soft) 54%, var(--card));
  }
  .aa-mobile-metric.is-highlighted {
    background: color-mix(in srgb, var(--aa-highlight) 16%, var(--card));
  }
  .aa-mobile-metric-detail { display: none; }
  .aa-mobile-card.metrics-expanded .aa-mobile-metric-detail { display: block; }
  .aa-mobile-metric summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 4px 10px;
    min-height: 58px;
    padding: 9px 34px 9px 11px;
    list-style: none;
    cursor: pointer;
  }
  .aa-mobile-metric summary::-webkit-details-marker { display: none; }
  .aa-mobile-metric summary::after {
    content: "⌄";
    position: absolute;
    right: 12px;
    top: 50%;
    color: var(--muted);
    transform: translateY(-50%);
    transition: transform .15s ease;
  }
  .aa-mobile-metric[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .aa-mobile-metric-label {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.28;
  }
  .aa-mobile-metric-current {
    color: var(--text);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }
  .aa-mobile-metric-compare {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
  .aa-mobile-metric-compare > span { white-space: nowrap; }
  .aa-mobile-metric-compare .dyn-rel { margin-left: 4px; }
  .aa-mobile-metric-days-label {
    grid-column: 1 / -1;
    color: var(--blue);
    font-size: 9px;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
  }
  .aa-mobile-days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 6px;
    padding: 8px 10px 11px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
  }
  .aa-mobile-day {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--card);
    text-align: right;
  }
  .aa-mobile-day small {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
  }
  .aa-mobile-day b {
    overflow: hidden;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .aa-mobile-card-expand {
    width: calc(100% - 16px);
    min-height: 44px;
    margin: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--blue);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  #activeCampaignsWorkspace .table-footer {
    padding: 10px 0 0;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 620px) {
  #activeCampaignsWorkspace .aa-mobile-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.active-grid thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-weight: 700;
  z-index: 20;
}
.active-grid .aa-head-row th[data-help] { cursor: help; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.active-grid .aa-head-row th[data-help]:hover,
.active-grid .aa-head-row th[data-help]:focus {
  background: var(--blue-soft);
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.active-grid .aa-head-row th {
  height: 56px;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.2;
  vertical-align: middle;
}
.active-grid .aa-filter-row th {
  top: 56px;
  height: 34px;
  padding: 4px 6px;
  background: var(--surface-2);
  z-index: 21;
}
.aa-filter-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
}
.aa-filter-input:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
.active-grid tbody td { background: var(--card); }
.active-grid tbody tr:nth-child(even) td { background: var(--cell); }
/* Виртуализация отрисовки: таблица — это 490 строк × ~18 колонок (~21000px,
   8800+ ячеек, из них ~2000 sticky). Без этого Chrome красит всю простыню и
   каждая перерисовка при скролле занимает >1с (рендерер буквально виснет).
   content-visibility:auto заставляет красить/раскладывать только видимые
   строки; contain-intrinsic-size резервирует высоту, чтобы скролл не прыгал.
   rowSpan колонки артикула при этом сохраняется (проверено). */
.active-grid tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 50px;
}
.active-grid tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 18;
  background: var(--surface-2);
  font-weight: 700;
}
.active-grid .aa-campaign {
  position: sticky;
  left: 0;
  z-index: 8;
  background: var(--card);
  box-shadow: 2px 0 0 var(--line), 8px 0 12px rgba(10,20,40,.08);
}
.active-grid tbody tr:nth-child(even) .aa-campaign { background: var(--cell); }
.active-grid thead .aa-campaign { z-index: 24; background: var(--surface-2); }
.active-grid tfoot .aa-campaign { z-index: 23; background: var(--surface-2); }
[data-theme="dark"] .active-grid .aa-campaign { box-shadow: 2px 0 0 var(--line), 8px 0 12px rgba(0,0,0,.3); }
.active-grid tbody tr:hover td, .active-grid tbody tr:hover .aa-campaign { background: var(--hover); }
.active-grid .strong-num { font-weight: 700; }
.metric-missing { color: var(--muted); }
.aa-estimated-value {
  color: #d5a34f;
  text-decoration: underline dotted rgba(213, 163, 79, 0.65);
  text-underline-offset: 3px;
  cursor: help;
}

/* Дневной вид по артикулам: липкие левые колонки Артикул / Метрика / Итого /
   сравнение / Динамика, затем колонки дней с тепловой заливкой.
   left-смещения должны совпадать с AA_W в app.js (art134 metric246 sum92 dyn110). */
.active-grid .aa-sticky {
  position: sticky;
  --aa-sticky-bg: var(--card);
  z-index: 30;
  background: var(--aa-sticky-bg) !important;
  background-clip: border-box;
  /* сплошная (без блюра) заливка на 6px вправо — перекрывает субпиксельные
     щели между липкими колонками, через которые просвечивали ячейки дней.
     Блюр-тень убрали отдельно — тормозила именно она, а не эта заливка. */
  box-shadow: 6px 0 0 var(--aa-sticky-bg);
}
.active-grid tbody tr:nth-child(even) .aa-sticky { --aa-sticky-bg: var(--cell); }
.active-grid tbody tr:hover .aa-sticky { --aa-sticky-bg: var(--hover); }
.active-grid thead .aa-sticky { --aa-sticky-bg: var(--surface-2); z-index: 60; }

.active-grid .aa-c-art    { left: 0;     width: 134px; max-width: 134px; z-index: 34; }
.active-grid thead .aa-c-art { z-index: 62; }
.active-grid .aa-c-metric {
  left: 133px;
  width: 246px;
  max-width: 246px;
  text-align: left;
  font-weight: 600;
  z-index: 35;
}
.active-grid .aa-metric-name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  cursor: grab;
}
.active-grid .aa-metric-name:active { cursor: grabbing; }
.aa-row-drag-handle {
  display: inline-block;
  width: 16px;
  margin-right: 6px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
  vertical-align: middle;
}
.aa-row-metric-label {
  vertical-align: middle;
}
.aa-row-action {
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  vertical-align: middle;
}
.aa-row-action:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.aa-row-action-static {
  cursor: help;
  display: inline-block;
}
.aa-row-action-static:focus {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}
.active-grid tbody tr.dragging td {
  opacity: .58;
}
.active-grid tbody tr.drop-before td {
  box-shadow: inset 0 2px 0 var(--blue);
}
.active-grid tbody tr.drop-after td {
  box-shadow: inset 0 -2px 0 var(--blue);
}
/* left-смещения дают 1px нахлёст соседних липких колонок (а не стык впритык):
   на точных границах оставалась субпиксельная щель, сквозь которую при
   горизонтальном скролле просвечивали проезжающие сзади ячейки дней.
   Нахлёст перекрывается старшим z-index'ом того же цвета — шва не видно. */
.active-grid .aa-c-sum1   { left: 378px; width: 92px;  max-width: 92px;  font-weight: 700; z-index: 36; }
.active-grid .aa-c-sum2   { left: 469px; width: 92px;  max-width: 92px;  color: var(--muted); z-index: 37; }
.active-grid .aa-c-dyn {
  left: 560px; width: 110px; max-width: 110px;
  z-index: 38;
  /* чёткая граница вместо размытой box-shadow: тень на липкой колонке
     перерисовывается каждый кадр (лаги) и оставляет «хвосты» при скролле */
  border-right: 2px solid var(--line);
}
[data-theme="dark"] .active-grid .aa-sticky {
  background: var(--aa-sticky-bg) !important;
}

/* колонка артикула: миниатюра + реквизиты, объединена по строкам метрик группы */
.active-grid .aa-art-cell { vertical-align: top; text-align: left; padding: 8px; white-space: normal; }
.aa-art-img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-2); }
.aa-art-noimg { background: var(--surface-2); }
.aa-art-offer { font-weight: 700; margin-top: 6px; line-height: 1.25; white-space: normal; word-break: break-word; }
.aa-art-sku, .aa-art-rk { font-size: 11px; color: var(--muted); margin-top: 3px; }
.aa-fulfillment-badge { display: inline-flex; margin-top: 5px; padding: 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.aa-fulfillment-badge.unknown { background: var(--surface-2); color: var(--muted); }
.aa-art-all { font-weight: 700; }
.aa-art-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.aa-cost-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 7px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.aa-cost-cap { font-size: 11px; color: var(--muted); margin-top: 6px; }
/* Ставки по кампаниям — карточки-блоки в липкой колонке артикула */
.aa-bids-cap { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 10px; margin-bottom: 5px; }
.aa-bids { display: flex; flex-direction: column; gap: 6px; }
.aa-bid-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--surface-2);
}
.aa-bid-card .aa-bid-strat {
  font-size: 11px;
  color: var(--text);
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}
.aa-bid-card .aa-bid-place {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 1px;
  white-space: normal;
  word-break: break-word;
}
.aa-bid-state {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--orange) 48%, var(--line));
  border-radius: 999px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}
.aa-bid-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 8px;
  align-items: center;
  justify-content: start;
  margin-top: 6px;
}
.aa-bid-lbl { font-size: 10px; color: var(--muted); }
.aa-bid-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s ease;
}
.aa-bid-pill b { color: var(--blue); font-weight: 700; }
.aa-bid-pill .aa-bid-pen { font-size: 10px; opacity: .55; }
.aa-bid-pill:hover { background: var(--blue); color: #fff; }
.aa-bid-pill:hover b { color: #fff; }
.aa-bid-pill:hover .aa-bid-pen { opacity: .9; }
.aa-bid-pill.is-readonly { cursor: default; border-color: var(--line); color: var(--text); }
.aa-bid-pill.is-readonly b { color: var(--text); }
.aa-bid-pill.is-readonly:hover { background: transparent; color: var(--text); }
.aa-bid-pill.is-readonly:hover b { color: var(--text); }
.aa-bid-comp { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.aa-bid-comp-empty { color: var(--muted); font-weight: 400; }
.aa-cost-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.aa-cost-btn span {
  color: var(--muted);
}
.aa-cost-btn b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aa-cost-modal label {
  display: block;
  margin-top: 10px;
}

.aa-th-sub { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }

/* «Динамика»: абсолют + относительный %, цвет по направлению метрики */
.aa-c-dyn .dyn-abs { display: block; font-weight: 700; }
.aa-c-dyn .dyn-rel { display: block; font-size: 11px; opacity: .85; }
.dyn-up { color: var(--green); }
.dyn-down { color: var(--red); }
.dyn-flat { color: var(--muted); }

.active-grid .aa-day-col { width: 78px; max-width: 78px; }
.active-grid tbody .aa-day-col {
  background-color: var(--card);
}
.active-grid tbody tr:nth-child(even) .aa-day-col { background-color: var(--cell); }
.active-grid tbody tr:hover .aa-day-col { background-color: var(--hover); }
.active-grid .aa-day-col.aa-current-day {
  box-shadow: inset 1px 0 0 rgba(111, 145, 220, .28), inset -1px 0 0 rgba(111, 145, 220, .28);
}
.active-grid thead .aa-day-col.aa-current-day {
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.active-grid tbody .aa-day-col.aa-fresh-cell {
  cursor: help;
}
.active-grid tbody .aa-day-col.aa-fresh-cell:hover {
  background-image:
    linear-gradient(rgba(111, 145, 220, .20), rgba(111, 145, 220, .20)),
    linear-gradient(var(--aa-heat, transparent), var(--aa-heat, transparent));
  outline: 1px solid rgba(111, 145, 220, .72);
  outline-offset: -1px;
}
.aa-forecast-value {
  display: inline-block;
  cursor: help;
  border-bottom: 1px dashed color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 3px;
}
.aa-forecast-value:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.aa-forecast-tooltip {
  position: fixed;
  z-index: 1400;
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #fff 22%);
  border-radius: 22px;
  background: #232323;
  color: #f7f7f7;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: none;
  white-space: normal;
  text-align: left;
}
.aa-forecast-tip-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 750;
}
.aa-forecast-tip-section {
  display: grid;
  gap: 3px;
  margin: 0 0 15px;
}
.aa-forecast-tip-section b,
.aa-forecast-tip-result b { font-weight: 650; }
.aa-forecast-tip-section span,
.aa-forecast-tip-result span { font-variant-numeric: tabular-nums; }
.aa-forecast-tip-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.aa-forecast-tip-note {
  margin-top: 14px;
  color: #c9c9c9;
  font-size: 12px;
}
.aa-forecast-tip-warning {
  padding: 10px 12px;
  border: 1px solid rgba(255, 179, 71, .42);
  border-radius: 10px;
  background: rgba(255, 179, 71, .10);
  color: #ffd18e;
}
/* Тепловую заливку кладём отдельным фоновым слоем поверх цвета ячейки.
   Раньше использовался absolute ::before c position:relative+z-index на td —
   из-за этого каждая ячейка дня создавала свой stacking context, и при
   горизонтальном скролле липкие колонки просвечивали «вторым слоем».
   background-image не требует позиционирования и слоёв композитинга. */
.active-grid tbody .aa-day-col.aa-heat {
  background-image: linear-gradient(var(--aa-heat), var(--aa-heat));
}
.active-grid .aa-daily-head th { height: 48px; vertical-align: middle; }
.active-grid .aa-weekend { background: var(--surface-2); }
.aa-day-date { display: block; font-weight: 700; }
.aa-day-wd { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.active-grid .aa-row-strong td { font-weight: 700; }
.active-grid tbody tr.aa-row-highlight td:not(.aa-c-art) {
  background-color: color-mix(in srgb, var(--aa-highlight) 18%, var(--card)) !important;
}
.active-grid tbody tr.aa-row-highlight .aa-sticky:not(.aa-c-art) {
  --aa-sticky-bg: color-mix(in srgb, var(--aa-highlight) 18%, var(--card));
}
.active-grid tbody tr.aa-row-highlight:nth-child(even) td:not(.aa-c-art) {
  background-color: color-mix(in srgb, var(--aa-highlight) 18%, var(--cell)) !important;
}
.active-grid tbody tr.aa-row-highlight:nth-child(even) .aa-sticky:not(.aa-c-art) {
  --aa-sticky-bg: color-mix(in srgb, var(--aa-highlight) 18%, var(--cell));
}
.active-grid tbody tr.aa-row-highlight:hover td:not(.aa-c-art) {
  background-color: color-mix(in srgb, var(--aa-highlight) 26%, var(--hover)) !important;
}
.active-grid tbody tr.aa-row-highlight:hover .aa-sticky:not(.aa-c-art) {
  --aa-sticky-bg: color-mix(in srgb, var(--aa-highlight) 26%, var(--hover));
}
/* Разделитель между блоками-артикулами: зазор цветом фона страницы — блоки
   читаются как отдельные карточки (в тёмной теме тёмный разрыв, в светлой —
   светлый). Заметно нагляднее тонкой линии, не теряется на heat-ячейках. */
.active-grid .aa-group-first td { border-top: 7px solid var(--bg); }

/* подпись группировки в тулбаре */
.group-by { display: inline-flex; align-items: center; gap: 6px; }

/* --- Раздел «Заказы Ozon» (вынесен из модалки) --- */
#view-sales { padding: 10px 16px 40px; }
#view-sales .sales-tabs { margin-top: 4px; }
#view-sales .sales-body { max-height: calc(100vh - 230px); }
/* Высоту считает скрипт от реального положения таблицы: над ней вкладки,
   фильтры и плитки итогов, и формулой их не угадать. */
#view-sales .sales-body.sales-viewport {
  max-height: var(--sales-viewport-height, calc(100dvh - 230px));
  margin-bottom: 10px;
  contain: paint;
  scrollbar-gutter: stable;
}
#view-sales .sales-body.sales-viewport::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
#view-sales .sales-body.sales-viewport::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  background-clip: padding-box;
}
#view-sales .sales-body.sales-viewport::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

/* --- Таблица пассивной рекламы v2: товар, расход·лимит, ДРР, группы, сортировка --- */
#campTable .ad-col-product { width: 28%; min-width: 260px; }
#campTable .ad-col-price-spp { width: 118px; min-width: 108px; }
#campTable .ad-col-status { width: 130px; min-width: 130px; }
#campTable .ad-col-conversion { width: 92px; min-width: 86px; }
#campTable .ad-col-ctr { width: 72px; min-width: 64px; }
#campTable .ad-col-tags { min-width: 92px; }
#campTable .ad-col-actions { min-width: 118px; }
#campTable th.ad-draggable-col {
  cursor: grab;
  user-select: none;
}
#campTable th.ad-draggable-col:active { cursor: grabbing; }
#campTable th.dragging { opacity: .55; }
#campTable th.drop-before { box-shadow: inset 3px 0 0 var(--blue); }
#campTable th.drop-after { box-shadow: inset -3px 0 0 var(--blue); }
.prod-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prod-thumb {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 6px; object-fit: cover;
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.prod-thumb.empty, .prod-thumb.broken { visibility: visible; object-position: -99px; }
.prod-info { min-width: 0; flex: 1; }
.prod-name {
  max-width: 330px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-sub {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--muted); font-size: 11px;
}
.prod-sub .stock-light { margin: 0; }

.row-badge {
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.row-badge.bad { color: var(--red); background: var(--red-soft); border-color: transparent; }
.row-badge.warn { color: var(--orange); background: var(--orange-soft); border-color: transparent; }
.row-badge.good { color: var(--green); background: var(--green-soft); border-color: transparent; }

.status-cell { display: flex; align-items: center; gap: 8px; }

.spend-cell { min-width: 110px; }
.spend-bar {
  width: 64px;
  height: 3px; border-radius: 2px;
  background: var(--surface-2);
  margin: 3px 0 0 auto;
}
.spend-bar-fill { height: 3px; border-radius: 2px; background: var(--blue); opacity: .75; }
.spend-bar-fill.over { background: var(--red); }

.drr-good { color: var(--green); font-weight: 600; }
.drr-warn { color: var(--orange); font-weight: 600; }
.drr-bad { color: var(--red); font-weight: 600; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable.sort-desc::after { content: " ↓"; color: var(--blue); }
th.sortable.sort-asc::after { content: " ↑"; color: var(--blue); }

tr.group-row td {
  background: var(--surface-2);
  cursor: pointer;
  padding: 7px 10px;
  border-top: 6px solid var(--bg);
}
tr.group-row:hover td { background: var(--hover); }
.group-arrow { display: inline-block; width: 14px; color: var(--muted); font-size: 10px; }
td.muted { color: var(--muted); }

/* --- Аналитик активной рекламы: мгновенные карточки + markdown-пояснение --- */
.aa-ai-cards {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.rep-floor-panel .aa-ai-cards {
  max-height: min(560px, calc(100vh - 250px));
  overflow: auto;
  padding-right: 6px;
}
.rep-floor-panel .aa-ai-result {
  max-height: min(420px, calc(100vh - 270px));
  overflow: auto;
}
.aa-tiles {
  display: grid;
  /* авто-число колонок: плиток может быть 4 или 5 (с «Органикой») */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.aa-tile {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.aa-tile.good { border-color: var(--green); background: var(--green-soft); }
.aa-tile.warn { border-color: var(--orange); background: var(--orange-soft); }
.aa-tile.bad { border-color: var(--red); background: var(--red-soft); }
.aa-tile-label { font-size: 11px; color: var(--muted); }
.aa-tile-value { font-size: 16px; font-weight: 700; }
.aa-tile-delta { display: block; font-size: 11px; color: var(--muted); }
.aa-tile-delta.up { color: var(--green); }
.aa-tile-delta.down { color: var(--red); }
.aa-cards-title { font-weight: 700; margin: 12px 0 6px; }
.aa-cards-title.bad-text { color: var(--red); }
.aa-cards-hint { font-size: 12px; margin: 4px 0; }
.aa-channels {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.aa-channels th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 8px;
}
.aa-channels th.num { text-align: right; }
.aa-channels td {
  padding: 5px 8px;
  border-top: 1px solid var(--line-soft);
}
.aa-verdict {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.aa-verdict.good { color: var(--green); background: var(--green-soft); }
.aa-verdict.warn { color: var(--orange); background: var(--orange-soft); }
.aa-verdict.bad { color: var(--red); background: var(--red-soft); }
.aa-skew {
  margin: 10px 0 4px;
  padding: 8px 12px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--green-soft);
  font-size: 12px;
}
.aa-ai-result.md { white-space: normal; }
.aa-ai-result.md ul { margin: 4px 0; padding-left: 20px; }
.aa-ai-result.md li { margin: 2px 0; }
.aa-ai-result.md .md-gap { height: 8px; }
@media (max-width: 900px) {
  .aa-tiles { grid-template-columns: 1fr 1fr; }
}

/* Анализ конкурентов (пассивная реклама) */
.competitor-summary {
  margin: 0 16px 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: 12px;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow) 45%, transparent);
}
.competitor-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.competitor-summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.competitor-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--cell);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.competitor-summary-row:hover { border-color: var(--purple); }
.competitor-summary-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.competitor-summary-row em { color: var(--muted); font-style: normal; font-size: 12px; }
.competitor-summary-row strong { white-space: nowrap; }
.competitor-summary-row.bad strong { color: var(--red); }
.competitor-summary-row.good strong { color: var(--green); }
.competitor-watch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.competitor-watch span { padding: 4px 8px; border: 1px solid var(--line); background: var(--cell); color: var(--muted); font-size: 12px; }
.competitor-ai { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.competitor-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.competitor-ai-head b { color: var(--purple); }
.competitor-ai-head > span { color: var(--muted); font-size: 11px; }
.competitor-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.competitor-ai-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 9px;
  background: var(--cell);
}
.competitor-ai-card.critical { border-left-color: var(--red); background: color-mix(in srgb, var(--red-soft) 45%, var(--cell)); }
.competitor-ai-card.action { border-left-color: var(--orange); }
.competitor-ai-card.opportunity { border-left-color: var(--green); background: color-mix(in srgb, var(--green-soft) 35%, var(--cell)); }
.competitor-ai-card.limit { border-left-color: var(--purple); background: color-mix(in srgb, var(--purple-soft) 30%, var(--cell)); }
.competitor-ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.competitor-ai-kind { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.competitor-ai-card.critical .competitor-ai-kind { color: var(--red); }
.competitor-ai-card.action .competitor-ai-kind { color: var(--orange); }
.competitor-ai-card.opportunity .competitor-ai-kind { color: var(--green); }
.competitor-ai-card.limit .competitor-ai-kind { color: var(--purple); }
.competitor-ai-order { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.competitor-ai-card p { margin: 0; line-height: 1.45; }
.competitor-ai-sku { font-weight: 750; }
@media (max-width: 900px) {
  .competitor-ai-grid { grid-template-columns: 1fr; }
}
.comp-controls { display: flex; gap: 12px; align-items: flex-end; margin: 12px 0 4px; }
.comp-query-label { flex: 1; display: block; }
.comp-query-label .input { width: 100%; }
.comp-badge { white-space: nowrap; }
.comp-running { margin: 10px 0 4px; color: var(--orange); font-weight: 600; }
.comp-verdict { font-size: 15px; font-weight: 700; margin: 10px 0 4px; }
.comp-our { margin: 6px 0 4px; }
.comp-body { max-height: 62vh; overflow: auto; }
.comp-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.comp-table th, .comp-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.comp-table th { color: var(--muted); font-weight: 600; }
.comp-table .num { text-align: right; white-space: nowrap; }
.comp-excluded td { opacity: 0.62; }
.price-tag { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.price-tag-card { background: rgba(46, 160, 67, 0.16); color: #2ea043; }
.price-tag-plain { background: var(--line); color: var(--muted); }
.business-queue {
  margin: 10px 16px 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--purple, #7c5cff) 38%, var(--line));
  border-left: 4px solid var(--purple);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow) 45%, transparent);
}
.business-queue-head,
.business-action-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.business-queue-head { justify-content: space-between; margin-bottom: 8px; }
.business-queue-heading { min-width: 0; }
.business-queue-head .muted { margin-left: 8px; }
.business-queue-freshness {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  font-size: 11px;
}
.business-queue-quality,
.business-queue-freshness-note,
.business-queue-history-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.business-queue-quality::before {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.business-queue-quality.is-complete { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); color: var(--green); }
.business-queue-quality.is-incomplete,
.business-queue-quality.is-unknown,
.business-queue-quality.is-pending,
.business-queue-freshness-note.is-warning { border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); color: var(--orange); }
.business-queue-quality.is-error,
.business-queue-quality.is-missing { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); color: var(--red); }
.business-queue-sources { min-width: min(360px, 100%); }
.business-queue-sources summary { width: max-content; max-width: 100%; color: var(--muted); font-weight: 650; cursor: pointer; }
.business-queue-source-list { display: grid; gap: 5px; margin-top: 7px; }
.business-queue-source {
  display: grid;
  grid-template-columns: minmax(100px, auto) auto minmax(160px, 1fr);
  align-items: baseline;
  gap: 5px 10px;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--card);
}
.business-queue-source span { color: var(--muted); }
.business-queue-source em { color: var(--muted); font-style: normal; }
.business-queue-source.is-fresh span,
.business-queue-source.is-complete span { color: var(--green); }
.business-queue-source.is-not_applicable span { color: var(--muted); }
.business-queue-source.is-stale span,
.business-queue-source.is-incomplete span,
.business-queue-source.is-degraded span { color: var(--orange); }
.business-queue-source.is-error span,
.business-queue-source.is-missing span { color: var(--red); }
.business-queue-body { display: grid; gap: 6px; }
.business-queue-notice {
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue-soft) 36%, transparent);
  color: var(--muted);
  font-size: 12px;
}
.business-queue-notice.is-warning { border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); color: var(--orange); }
.business-queue-notice.is-error { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); color: var(--red); }
.business-action {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #8090a8;
  border-radius: 10px;
  background: var(--surface-2);
}
.business-action.priority-critical { --business-priority-color: var(--red); }
.business-action.priority-high { --business-priority-color: var(--orange); }
.business-action.priority-waiting { --business-priority-color: var(--priority-medium); }
.business-action.priority-medium { --business-priority-color: var(--priority-medium); }
.business-action.priority-critical,
.business-action.priority-high,
.business-action.priority-waiting,
.business-action.priority-medium {
  border-left-color: color-mix(in srgb, var(--business-priority-color) 72%, var(--line));
}
.business-action-rank {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--purple, #7c5cff) 14%, transparent);
  font-weight: 700;
}
.business-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.business-action-head-buttons { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.business-action-title { min-width: 0; flex-wrap: wrap; }
.business-action-title strong { line-height: 1.25; }
.business-priority {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.business-action.priority-critical .business-priority,
.business-action.priority-high .business-priority,
.business-action.priority-waiting .business-priority,
.business-action.priority-medium .business-priority {
  border-color: color-mix(in srgb, var(--business-priority-color) 38%, var(--line));
  background: color-mix(in srgb, var(--business-priority-color) 14%, var(--surface-2));
  color: color-mix(in srgb, var(--business-priority-color) 82%, var(--text));
}
.business-action-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.business-action-toggle:hover { color: var(--text); border-color: color-mix(in srgb, var(--purple, #7c5cff) 55%, var(--line)); }
.business-action-toggle span { display: inline-block; transition: transform .15s ease; }
.business-action.is-expanded .business-action-toggle span { transform: rotate(180deg); }
.business-cost-open {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--purple, #7c5cff) 65%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--purple, #7c5cff) 12%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.business-cost-open:hover { background: color-mix(in srgb, var(--purple, #7c5cff) 20%, transparent); }
.business-action-target-coverage { margin-top: 4px; color: var(--muted); font-size: 10px; }
.business-action-summary { display: grid; gap: 6px; margin: 9px 0 0; }
.business-action-summary-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.business-action-summary-row dt { font-size: 11px; font-weight: 800; line-height: 1.4; }
.business-action-summary-row dd { margin: 0; font-size: 12px; line-height: 1.45; }
.business-action-summary-row.is-problem { border-left-color: var(--red); }
.business-action-summary-row.is-next-step { border-left-color: var(--blue); }
.business-action-summary-row.is-automation { border-left-color: var(--green); }
.business-action-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.business-action-details-title { font-size: 12px; font-weight: 800; }
.business-action-evidence { margin-top: 5px; color: var(--muted); font-size: 13px; }
.business-action-targets { display: grid; gap: 6px; margin-top: 8px; }
.business-action-target {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--purple, #7c5cff) 5%, transparent);
}
.business-action-target-title { font-size: 13px; font-weight: 700; }
.business-action-target-name { margin-top: 2px; color: var(--muted); font-size: 12px; }
.business-action-target-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.business-action-target-facts span { color: var(--muted); font-size: 12px; }
.business-action-target-facts span::before { content: "• "; color: var(--purple, #7c5cff); }
.business-target-id { white-space: nowrap; color: var(--muted); font-weight: 600; }
.business-target-link { white-space: nowrap; }
.business-action-next { margin-top: 6px; font-size: 13px; }
.business-action-automation { margin-top: 5px; color: var(--muted); font-size: 12px; }
.business-cost-modal { width: min(680px, calc(100vw - 32px)); }
.business-cost-date { margin: 14px 16px 6px; padding: 9px 11px; border-radius: 8px; background: color-mix(in srgb, var(--purple, #7c5cff) 9%, transparent); font-size: 13px; }
.business-cost-rows { display: grid; gap: 8px; padding: 6px 16px 10px; }
.business-cost-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.business-cost-row > span { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
.business-cost-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-cost-row em { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.business-cost-modal > .hint { padding: 0 16px 10px; }
.business-queue-empty { padding: 8px 2px; color: var(--muted); }
.business-queue-empty.is-complete { color: var(--green); }
.business-queue-empty.is-pending,
.business-queue-empty.is-warning { color: var(--orange); }
.business-queue-empty.is-error { color: var(--red); }
.business-queue-error { color: var(--red, #e34b5f); }
.business-queue-history { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.business-queue-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.business-queue-history-body { display: grid; gap: 5px; }
.business-queue-history-row {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) max-content minmax(180px, 1.2fr);
  align-items: center;
  gap: 8px 12px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.business-queue-history-date,
.business-queue-history-result { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.business-queue-history-date span,
.business-queue-history-result span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.business-queue-history-row.is-complete .business-queue-history-status { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); color: var(--green); }
.business-queue-history-row.is-incomplete .business-queue-history-status,
.business-queue-history-row.is-unknown .business-queue-history-status,
.business-queue-history-row.is-pending .business-queue-history-status { border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); color: var(--orange); }
.business-queue-history-row.is-error .business-queue-history-status,
.business-queue-history-row.is-missing .business-queue-history-status { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); color: var(--red); }
.business-queue-history-row.is-not-recorded { opacity: .72; }
.business-queue-history-empty { padding: 5px 2px; color: var(--muted); font-size: 12px; }
.business-queue-history-empty.is-error { color: var(--red); }

/* Решение менеджера: слоистая спокойная поверхность по стандарту И-1—И-5. */
.business-queue-layered {
  --business-canvas: #dfe4ea;
  --business-panel: #fffdf9;
  --business-warm: #f1e5d4;
  --business-warm-end: #e7d4ba;
  --business-field: #cbd3dc;
  --business-ink: #282b30;
  --business-bronze: #986326;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.business-queue-layered .business-queue-freshness {
  order: 1;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 12px;
  border-color: color-mix(in srgb, var(--create-card-border) 82%, var(--line));
  border-radius: 11px;
  background: var(--business-panel);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow) 30%, transparent);
}
.business-queue-layered .business-queue-head {
  order: 2;
  min-height: 72px;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--business-bronze) 28%, var(--line));
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, var(--business-warm), var(--business-warm-end));
  box-shadow: inset 0 1px rgba(255,255,255,.72), 0 5px 16px color-mix(in srgb, var(--shadow) 32%, transparent);
}
.business-queue-title-wrap {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.business-queue-title-icon {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--business-bronze) 74%, #654017);
  border-radius: 12px;
  background: linear-gradient(145deg, #c7924c, var(--business-bronze) 66%, #704415);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 5px 12px rgba(84,54,19,.18);
}
.business-queue-title-icon::after {
  position: absolute;
  inset: 2px 2px 52%;
  border-radius: 9px 9px 6px 6px;
  background: linear-gradient(rgba(255,255,255,.3), transparent);
  content: "";
}
.business-queue-title-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.business-queue-layered .business-queue-heading { display: grid; gap: 3px; }
.business-queue-layered .business-queue-heading > strong { color: var(--business-ink); font-size: 17px; line-height: 1.2; }
.business-queue-layered .business-queue-head .muted { margin: 0; color: color-mix(in srgb, var(--business-ink) 72%, transparent); font-size: 11px; }
.business-queue-layered #businessQueueRefresh {
  border-color: color-mix(in srgb, var(--business-ink) 30%, transparent);
  background: color-mix(in srgb, #fff 72%, transparent);
  color: var(--business-ink);
}
.business-queue-layered .business-queue-body {
  order: 3;
  gap: 12px;
  margin-top: -10px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, #738092 28%, var(--line));
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--business-field);
  box-shadow: inset 0 1px 2px rgba(55,64,76,.08), 0 8px 22px color-mix(in srgb, var(--shadow) 25%, transparent);
}
.business-queue-layered .business-queue-notice { background: var(--business-panel); }
.business-queue-layered .business-action {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #788596 34%, var(--line));
  border-left-width: 1px;
  border-radius: 13px;
  background: var(--business-panel);
  box-shadow: 0 5px 13px rgba(55,64,76,.11), inset 0 1px rgba(255,255,255,.7);
}
.business-queue-layered .business-action-rank {
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, #667385 46%, var(--line));
  background: linear-gradient(145deg, #f8fafc, #cfd6df);
  color: var(--business-ink);
  box-shadow: inset 0 1px #fff, 0 3px 7px rgba(55,64,76,.13);
  font-size: 12px;
}
.business-queue-layered .business-action.priority-critical .business-action-rank {
  border-color: color-mix(in srgb, var(--red) 62%, #7d2d27);
  background: linear-gradient(145deg, #e8796e, var(--red) 62%, #87332c);
  color: #fff;
}
.business-queue-layered .business-action-title { align-items: flex-start; }
.business-action-title-copy { display: grid; min-width: 0; gap: 3px; }
.business-action-title-copy strong { color: var(--business-ink); font-size: 15px; line-height: 1.2; }
.business-action-title-copy small { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.3; }
.business-queue-layered .business-priority { font-size: 10px; }
.business-queue-layered .business-action-toggle {
  border-color: color-mix(in srgb, var(--business-ink) 28%, var(--line));
  background: color-mix(in srgb, var(--business-warm) 30%, #fff);
  color: var(--business-ink);
}
.business-queue-layered .business-action-toggle:hover {
  border-color: var(--business-bronze);
  color: var(--business-ink);
}
.business-queue-layered .business-target-link {
  color: var(--business-ink);
  text-decoration-color: color-mix(in srgb, var(--business-ink) 52%, transparent);
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.business-target-identity,
.business-target-sku-control {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  vertical-align: middle;
}
.business-target-identity { gap: 4px; }
.business-target-sku-control { gap: 3px; }
.business-sku-copy {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--business-ink) 68%, transparent);
}
.business-sku-copy:hover,
.business-sku-copy:focus-visible {
  background: transparent;
  color: var(--business-bronze);
}
.business-sku-copy:focus-visible { outline: 2px solid color-mix(in srgb, var(--business-bronze) 55%, transparent); outline-offset: 1px; }
.business-sku-copy svg { width: 14px; height: 14px; }
.business-queue-layered .business-action-details { border-top-color: color-mix(in srgb, #738092 28%, transparent); }
.business-queue-layered .business-action-summary-row {
  border-color: color-mix(in srgb, #788596 26%, var(--line));
  background: color-mix(in srgb, var(--business-warm) 18%, #fff);
  color: var(--business-ink);
}
.business-queue-layered .business-action-summary-row.is-problem { border-left-color: var(--red); }
.business-queue-layered .business-action-summary-row.is-next-step { border-left-color: var(--blue); }
.business-queue-layered .business-action-summary-row.is-automation { border-left-color: var(--green); }
.business-queue-layered .business-action-details-title { color: var(--business-ink); }
.business-queue-layered .business-action-evidence {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--business-bronze) 24%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--business-warm) 62%, #fff);
  color: var(--business-ink);
  font-size: 12px;
  line-height: 1.45;
}
.business-queue-layered .business-action-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.business-queue-layered .business-action-target {
  padding: 11px 12px;
  border-color: color-mix(in srgb, #788596 34%, var(--line));
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(55,64,76,.09);
}
.business-queue-layered .business-action-target-title { color: var(--business-ink); font-size: 12px; }
.business-queue-layered .business-action-target-name { font-size: 11px; }
.business-queue-layered .business-action-target-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, #788596 22%, var(--line));
}
.business-queue-layered .business-action-target-facts span { font-size: 11px; line-height: 1.35; }
.business-queue-layered .business-action-target-facts span::before { color: var(--business-bronze); }
.business-queue-layered .business-action-next {
  padding: 8px 11px;
  border-left: 3px solid var(--business-bronze);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--business-warm) 34%, #fff);
  color: var(--business-ink);
  font-size: 12px;
}
.business-queue-layered .business-queue-history { order: 4; margin-top: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--business-panel); }
[data-theme="dark"] .business-queue-layered {
  --business-canvas: #202731;
  --business-panel: #20242a;
  --business-warm: #3b3328;
  --business-warm-end: #302a23;
  --business-field: #171c23;
  --business-ink: #f0eee8;
  --business-bronze: #c69352;
}
[data-theme="dark"] .business-queue-layered .business-action-target { background: #252a31; }
[data-theme="dark"] .business-queue-layered .business-action-summary-row { background: #252a31; }
[data-theme="dark"] .business-queue-layered .business-queue-head,
[data-theme="dark"] .business-queue-layered .business-action-rank { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.2); }

@media (max-width: 900px) {
  .business-queue-layered .business-action-targets { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .business-queue-layered .business-queue-head { min-height: 0; padding: 11px 12px; }
  .business-queue-title-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .business-queue-layered .business-queue-body { padding: 10px; }
  .business-queue-layered .business-action { grid-template-columns: 26px minmax(0, 1fr); padding: 10px; }
  .business-queue-layered .business-action-rank { width: 24px; height: 24px; }
  .business-queue-layered .business-action-target-facts { grid-template-columns: 1fr; }
  .business-action-summary-row { grid-template-columns: 1fr; gap: 3px; }
}

/* История СПП: дневное среднее + все внутридневные замеры в tooltip. */
.spp-history-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.spp-history-title strong { font-size: 18px; }
.spp-history-panel {
  display: grid;
  gap: 12px;
  margin: 0 16px 40px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow) 45%, transparent);
}
.spp-history-search-wrap,
#sppHistorySearch { width: var(--table-search-width); min-width: 0; }
#sppHistorySearch { padding-right: 28px; }
.spp-history-toolbar {
  grid-template-columns: var(--table-search-width) max-content max-content max-content minmax(0, 1fr);
  justify-content: start;
}
/* Выбор количества строк живёт над таблицей, а не под ней: всё, что стоит
   снизу, отнимает у таблицы высоту. Один вид на всех таблицах дашборда. */
.table-rows-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.table-rows-picker label { color: var(--muted); font-size: 12px; }
.aa-cards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.table-rows-picker select { min-width: 96px; }
.spp-history-rows { justify-self: end; }
.spp-history-filter-set { justify-content: flex-start; }
.spp-history-filter-set #sppHistoryLevel { min-width: 156px; }
.spp-history-range-wrap .aa-range-btn { width: auto; min-width: 276px; }
@media (max-width: 760px) {
  .spp-history-toolbar { grid-template-columns: 1fr; }
  .spp-history-rows { justify-self: start; }
}
.spp-history-nav { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.spp-history-meta { min-height: 18px; }
.spp-history-infobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.spp-heatmap-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
/* Тепловая карта СПП длиннее экрана. Держим её нижний край внутри окна,
   чтобы прокручивалась сама таблица, а не вся страница (как в UNIT). */
.spp-history-panel.spp-history-panel-viewport { margin-bottom: 10px; }
.spp-heatmap-wrap.spp-heatmap-viewport {
  max-height: var(--spp-heatmap-viewport-height, calc(100dvh - 320px));
  contain: paint;
  scrollbar-gutter: stable;
}
.spp-heatmap-wrap.spp-heatmap-viewport::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.spp-heatmap-wrap.spp-heatmap-viewport::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  background-clip: padding-box;
}
.spp-heatmap-wrap.spp-heatmap-viewport::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
.spp-heatmap { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 3px; padding: 5px; }
.spp-heatmap th, .spp-heatmap td { height: 42px; min-width: 64px; padding: 5px 7px; text-align: center; }
.spp-heatmap thead th { position: sticky; top: 0; z-index: 3; background: var(--card); color: var(--muted); font-size: 11px; }
.spp-heatmap .spp-heat-name {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  text-align: left;
  background: var(--card);
  box-shadow: 4px 0 8px color-mix(in srgb, var(--shadow) 24%, transparent);
}
.spp-heatmap thead .spp-heat-name { z-index: 4; }
.spp-heat-name button { max-width: 100%; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.spp-heat-name > a { display: block; overflow: hidden; color: var(--text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.spp-heat-name > span, .spp-heat-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.spp-heat-cell {
  position: relative;
  border: 1px solid var(--spp-heat-border, var(--line));
  border-radius: 7px;
  background-color: var(--card);
  background-image: linear-gradient(var(--spp-heat, transparent), var(--spp-heat, transparent));
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.spp-heat-cell:hover { z-index: 5; transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow) 55%, transparent); }
.spp-heat-cell b { font-size: 12px; }
.spp-heat-cell .spp-heat-spend {
  position: absolute;
  right: 4px;
  bottom: 2px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.spp-heat-cell .spp-heat-spend.zero { color: var(--muted); font-size: 10px; font-weight: 500; }
.spp-heat-cell i { position: absolute; top: 2px; right: 4px; color: var(--text); font-size: 10px; font-style: normal; }
.spp-heat-empty { border-radius: 7px; background: var(--surface-2); color: var(--muted); }
.spp-history-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 11px; }
.spp-history-legend span { display: inline-flex; align-items: center; gap: 5px; }
.spp-history-legend i { width: 13px; height: 13px; border-radius: 3px; }
.spp-history-legend i.below { border: 1px solid rgba(199,98,84,.58); background: linear-gradient(rgba(199,98,84,.30), rgba(199,98,84,.30)), var(--card); }
.spp-history-legend i.target { border: 1px solid rgba(96,148,96,.58); background: linear-gradient(rgba(96,148,96,.30), rgba(96,148,96,.30)), var(--card); }
.spp-day-detail { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.spp-day-detail-head, .spp-day-stats { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.spp-day-stats { justify-content: flex-start; margin: 10px 0; }
.spp-day-stats span { padding: 5px 8px; border-radius: 7px; background: var(--surface-2); }
.spp-day-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(300px, 1.2fr); gap: 12px; }
.spp-day-grid table { width: 100%; border-collapse: collapse; }
.spp-day-grid th, .spp-day-grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.spp-day-actions { display: grid; align-content: start; gap: 7px; }
.spp-day-actions > div { display: grid; grid-template-columns: 55px minmax(120px, auto) 1fr; gap: 8px; padding: 7px 8px; border-left: 3px solid var(--blue); background: var(--surface-2); }

/* Пассивная реклама: ровная сетка без вложенных цветных полос слева. */
#view-ads .passive-ai-workspace {
  min-width: 0;
  margin: 0 16px 24px;
  padding: 16px;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow) 38%, transparent);
}
#view-ads .passive-ai-group + .passive-ai-group { margin-top: 16px; }
#view-ads .passive-ai-group-title { margin: 0 0 8px 2px; }
#view-ads .passive-ai-card,
#view-ads .passive-spp-row,
#view-ads .spp-test-card,
#view-ads .business-action {
  border-left: 1px solid var(--line);
}
#view-ads .business-queue,
#view-ads .competitor-summary {
  margin-top: 0;
  border-left: 1px solid var(--line);
  border-radius: 12px;
}
#view-ads .passive-spp-panel {
  margin: 0 16px 24px;
  padding: 16px;
  border-radius: 12px;
}
#view-ads .passive-topic-pane { scroll-margin-top: 64px; }

@media (max-width: 720px) {
  #view-ads .passive-ai-workspace,
  #view-ads .passive-spp-panel,
  #view-ads .business-queue,
  #view-ads .competitor-summary {
    margin-left: 12px;
    margin-right: 12px;
  }
  #view-ads .passive-ai-workspace,
  #view-ads .passive-spp-panel { padding: 12px; }
  #view-ads .passive-ai-workspace-head { align-items: stretch; flex-direction: column; }
  #view-ads .passive-ai-workspace-head #passiveSppBtn { align-self: flex-start; }
  #view-ads .passive-ai-card { padding: 10px; }
  #view-ads .passive-ai-chips { align-items: stretch; flex-direction: column; }
  #view-ads .passive-ai-chip { width: 100%; }
  .business-queue-head { align-items: flex-start; }
  .business-queue-head .muted { display: block; margin: 3px 0 0; }
  .business-queue-freshness { align-items: flex-start; flex-direction: column; }
  .business-queue-sources { min-width: 0; width: 100%; }
  .business-queue-source { grid-template-columns: 1fr; gap: 2px; }
  .business-queue-history-row { grid-template-columns: minmax(0, 1fr) max-content; }
  .business-queue-history-result { grid-column: 1 / -1; }
  .business-action-head { align-items: flex-start; }
  .business-action-head-buttons { flex-direction: column; align-items: stretch; }
  .business-action-title { gap: 6px; }
  .business-action-toggle { padding: 4px 6px; }
  .business-action-compact-foot { flex-wrap: wrap; gap: 3px 10px; }
  .business-cost-row { grid-template-columns: 1fr; gap: 8px; }
  .business-cost-row .num-input { width: 100%; }
  .spp-history-panel { margin-inline: 12px; padding-inline: 8px; }
  .spp-history-search-wrap, #sppHistorySearch, .spp-history-range-wrap .aa-range-btn { width: 100%; min-width: 0; }
  .spp-heatmap .spp-heat-name { width: 190px; min-width: 190px; max-width: 190px; }
  .spp-day-grid { grid-template-columns: 1fr; }
  .spp-day-actions > div { grid-template-columns: 50px 1fr; }
  .spp-day-actions .muted { grid-column: 1 / -1; }
}

/* На телефоне и небольшом планшете строки репрайсинга становятся карточками.
   Это убирает оба вложенных скролла и оставляет ключевые цены/СПП видимыми
   без горизонтального сдвига. Полный набор полей раскрывается внутри строки. */
@media (max-width: 900px) {
  #view-repricing .rep-column-resizer { display: none; }
  #view-repricing .rep-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px 0;
  }
  #view-repricing .rep-toolbar .rep-meta,
  #view-repricing .rep-columns {
    grid-column: 1 / -1;
    width: 100%;
  }
  #view-repricing .rep-toolbar .rep-meta {
    flex: none;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  #view-repricing .rep-toolbar > .btn,
  #view-repricing .rep-columns-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  #view-repricing .rep-clear {
    margin: 0;
  }
  #view-repricing .rep-wrap {
    width: calc(100% - 24px);
    max-width: calc(100vw - 24px);
    margin: 10px 12px 40px;
    max-height: none;
    overflow: visible;
    contain: none;
    border: 0;
    border-radius: 0;
  }
  #view-repricing .rep-mobile-tools {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 10px 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
  }
  #view-repricing .rep-mobile-search {
    display: grid;
    flex: 1 1 280px;
    gap: 5px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }
  #view-repricing .rep-mobile-search .search-wrap,
  #view-repricing #repMobileSearch {
    width: 100%;
    max-width: none;
  }
  #view-repricing .rep-mobile-hint {
    flex: 0 1 320px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
  }
  #view-repricing #repTable,
  #view-repricing #repBody {
    display: block;
    width: 100% !important;
    min-width: 0;
    background: transparent;
  }
  #view-repricing #repColgroup,
  #view-repricing #repHead { display: none; }
  #view-repricing #repBody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #view-repricing #repBody > tr[data-row-index] {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow) 38%, transparent);
  }
  #view-repricing #repBody > tr.rep-unit-sku-row {
    margin-left: 12px;
    border-left: 3px solid color-mix(in srgb, var(--blue) 45%, var(--line));
  }
  #view-repricing #repTable tbody td.rep-mobile-summary,
  #view-repricing #repTable tbody tr.rep-mobile-card-expanded td.rep-mobile-detail {
    position: static !important;
    display: grid;
    grid-template-columns: minmax(108px, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 10px;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    padding: 8px 11px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  #view-repricing #repTable tbody tr:nth-child(even) td.rep-mobile-summary,
  #view-repricing #repTable tbody tr:nth-child(even).rep-mobile-card-expanded td.rep-mobile-detail {
    background: var(--card);
  }
  #view-repricing #repTable tbody td.rep-mobile-detail { display: none; }
  #view-repricing #repTable tbody td.rep-mobile-primary {
    grid-template-columns: 1fr;
    min-height: 62px;
    padding-top: 11px;
    background: color-mix(in srgb, var(--blue-soft) 34%, var(--card));
  }
  #view-repricing #repTable tbody tr.rep-unit-collection-band-0 td.rep-name-edit-cell { background: #fff3dc; }
  #view-repricing #repTable tbody tr.rep-unit-collection-band-1 td.rep-name-edit-cell { background: #cfe1f4; }
  [data-theme="dark"] #view-repricing #repTable tbody tr.rep-unit-collection-band-0 td.rep-name-edit-cell { background: color-mix(in srgb, #fff3dc 9%, #253345); }
  [data-theme="dark"] #view-repricing #repTable tbody tr.rep-unit-collection-band-1 td.rep-name-edit-cell { background: color-mix(in srgb, #cfe1f4 14%, #253345); }
  #view-repricing #repTable tbody td[data-mobile-label]::before {
    content: attr(data-mobile-label);
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
  }
  #view-repricing #repTable tbody td.rep-mobile-primary::before {
    color: var(--blue);
    letter-spacing: .035em;
  }
  #view-repricing #repTable tbody td.num { text-align: center; }
  #view-repricing #repTable tbody td.num::before { text-align: left; }
  #view-repricing #repTable .rep-sticky-last { box-shadow: none; }
  #view-repricing #repTable .rep-edit-input {
    height: 36px;
    font-size: 14px;
  }
  #view-repricing #repTable .rep-name-editor { width: 100%; }
  #view-repricing #repTable .rep-actions-inline { flex-wrap: wrap; }
  #view-repricing #repTable tbody td.rep-mobile-card-toggle-cell {
    display: block;
    width: 100% !important;
    max-width: none !important;
    padding: 8px;
    border: 0;
    background: var(--surface-2);
  }
  #view-repricing .rep-mobile-card-toggle {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--blue);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  #view-repricing #repBody > tr:not([data-row-index]) {
    display: block;
    grid-column: 1 / -1;
  }
  #view-repricing #repBody > tr:not([data-row-index]) > td {
    display: block;
    width: 100% !important;
    max-width: none !important;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    text-align: center;
  }
}

@media (max-width: 620px) {
  #view-repricing .rep-mobile-tools {
    display: grid;
    align-items: stretch;
  }
  #view-repricing .rep-mobile-hint { display: none; }
  #view-repricing #repBody { grid-template-columns: minmax(0, 1fr); }
  #view-repricing #repBody > tr.rep-unit-sku-row { margin-left: 8px; }
  #view-repricing #repTable tbody td.rep-mobile-summary,
  #view-repricing #repTable tbody tr.rep-mobile-card-expanded td.rep-mobile-detail {
    grid-template-columns: minmax(102px, .82fr) minmax(0, 1.18fr);
  }
}