/* ═══════════════════════════════════════════════════════════════════════════
   СРАВНЕНИЕ — redesign 2026-07: единый повествовательный поток
   Порядок секций файла = порядок секций страницы:
   настройки → шапка/контролы → hero → линзы/бюджет → хэндофф → таблица →
   insights → честность → замок → минибар → пусто/solo → mobile → reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Настройки страницы ──
   Локальные алиасы репойнтятся на семантические токены (00-settings/colors.css). */
.cmp-page{
  --cmp-ok:var(--success);      /* плюсы, «в бюджете», рост */
  --cmp-risk:var(--warning);    /* минусы, риски, падение */
  --cmp-danger:var(--danger);  /* удаление, «не оправдано» */
  padding:var(--sp-10) var(--page-x) var(--sp-8);
  /* Ноль со слэшем: артикулы вроде «FD0131WM» не читаются как «FDO131WM» */
  font-variant-numeric:slashed-zero;
}
.cmp-page :is(h1,h2,h3,.cmp-prod-name,.cmp-minibar-name,.cmp-radar-model-name){
  font-variant-numeric:slashed-zero;
}
.cmp-inner{ max-width:var(--container-wide); margin:0 auto; }

/* ── Шапка страницы ── */
.cmp-head-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3);
}
.cmp-title{
  font-size:clamp(2.2rem,5.5vw,3.6rem); font-weight:800; color:var(--text-hi);
  margin:0; letter-spacing:-.01em;
}
.cmp-title-count{
  font-family:var(--font-mono); font-size:.34em; font-weight:500;
  color:var(--text-dim); letter-spacing:.04em; vertical-align:middle;
}
.cmp-cat-sub{ color:var(--text-soft); margin:6px 0 0; font-size:.92rem; }
.cmp-cat-sub strong{ color:var(--text-hi); }
.cmp-clear-form{ margin:14px 0 0; }
.cmp-clear{
  min-height:40px; padding:9px 18px; border-radius:var(--r-pill); cursor:pointer;
  background:transparent; border:1px solid var(--line);
  color:var(--text-soft); font-size:.85rem; font-family:var(--font-body);
  transition:border-color .2s, color .2s;
}
.cmp-clear:hover{ border-color:var(--cmp-danger); color:var(--cmp-danger); }

/* ── Действия шапки: поделиться / сохранить к себе / очистить ── */
.cmp-head-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 0; }
.cmp-head-actions .cmp-clear-form,
.cmp-head-actions .cmp-adopt-form{ margin:0; }
.cmp-share{
  display:inline-flex; align-items:center; gap:7px;
  min-height:40px; padding:9px 16px; border-radius:var(--r-pill); cursor:pointer;
  background:transparent; border:1px solid var(--line);
  color:var(--text-soft); font-size:.85rem; font-family:var(--font-body);
  transition:border-color .2s, color .2s;
}
.cmp-share .ic{ width:16px; height:16px; }
.cmp-share:hover{ border-color:var(--cyan); color:var(--cyan); }
.cmp-share.is-copied{ border-color:var(--mint); color:var(--mint); }
.cmp-adopt{
  display:inline-flex; align-items:center; min-height:var(--h-btn);
  padding:0 var(--sp-4); border-radius:var(--r-pill); cursor:pointer;
  background:var(--grad-cta); color:var(--cta-ink); border:1px solid transparent;
  font-weight:700; font-size:.85rem; font-family:var(--font-body);
  transition:transform .15s, box-shadow .2s;
}
.cmp-adopt:hover{ transform:translateY(-2px); box-shadow:var(--shadow-cta-hover); }
.cmp-shared-note{
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; margin:0 0 18px;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--r-md); color:var(--text-soft); font-size:.9rem;
}
.cmp-shared-note .ic{ width:18px; height:18px; color:var(--cyan); flex:0 0 auto; }
.cmp-kind-error{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--orange);
  border-radius:var(--r-panel);
  color:var(--text);
  background:var(--orange-a05);
}

/* ── Контролы намерения: единая стеклянная панель ── */
.cmp-controls{
  display:flex; flex-direction:column; gap:16px;
  padding:18px 20px; margin:8px 0 22px;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--r-md); backdrop-filter:blur(10px);
}
.cmp-controls-hint{
  margin:-6px 0 0; font-size:.8rem; color:var(--text-faint);
}
.cmp-intent{ margin:0; }
.cmp-intent-q{
  display:block; font-family:var(--font-mono); font-size:.74rem; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px;
}
.cmp-intent-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.cmp-intent-chip{
  display:inline-flex; align-items:center; min-height:40px;
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--bg2); border:1px solid var(--line);
  color:var(--text-soft); font-size:.85rem; font-weight:600;
  text-decoration:none; transition:color .2s, background .2s, border-color .2s;
}
.cmp-intent-chip:hover{ color:var(--text-hi); border-color:var(--cyan-a40); }
.cmp-intent-chip.is-on{ background:var(--cyan); color:var(--cta-ink); border-color:transparent; }
/* Мобильный дублёр: скрыт на десктопе — там чипы. NpSelect (main.js) оборачивает
   .cmp-intent-select в .nps (вставляется туда же, где был select) — скрываем
   и сырой select, и обёртку, чтобы не мелькнуло до инициализации JS. */
.cmp-intent-select, .cmp-intent > .nps{ display:none; }
.cmp-budget-form{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); }
.cmp-budget-q{
  width:100%; font-family:var(--font-mono); font-size:.74rem; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px;
}
.cmp-budget-input{
  flex:0 1 190px; min-height:40px; padding:7px 12px; border-radius:var(--r-pill);
  background:var(--bg2); border:1px solid var(--field-border);
  color:var(--text-hi); font-size:.9rem; font-variant-numeric:tabular-nums;
}
.cmp-budget-input:focus{ border-color:var(--cyan); }
.cmp-budget-input[aria-invalid="true"]{ border-color:var(--cmp-danger); }
.cmp-budget-apply{
  min-height:40px; padding:7px 16px; border-radius:var(--r-pill); cursor:pointer;
  background:var(--cyan); color:var(--cta-ink); border:none; font-size:.85rem; font-weight:700;
}
.cmp-budget-clear{
  display:inline-flex; align-items:center; min-height:40px; padding:0 8px;
  font-size:.82rem; color:var(--text-faint); text-decoration:none;
}
.cmp-budget-clear:hover{ color:var(--text-soft); }
.cmp-budget-error{
  width:100%; margin:2px 0 0; color:var(--cmp-danger); font-size:.82rem; line-height:1.45;
}
.cmp-compat-form{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px var(--sp-3); }
.cmp-compat-form fieldset{ min-width:0; margin:0; padding:0; border:0; }
.cmp-compat-form legend{
  margin:0 0 10px; padding:0; font-family:var(--font-mono); font-size:.74rem;
  color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em;
}
.cmp-compat-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cmp-compat-field{ display:flex; min-width:0; flex-direction:column; gap:5px; }
.cmp-compat-field > span:first-child{ color:var(--text-soft); font-size:.78rem; }
.cmp-compat-input-wrap{ position:relative; display:flex; align-items:center; }
.cmp-compat-input-wrap input{
  width:100%; min-height:40px; padding:7px 42px 7px 12px; border-radius:var(--r-pill);
  background:var(--bg2); border:1px solid var(--field-border); color:var(--text-hi);
  font-size:.86rem;
}
.cmp-compat-input-wrap input:focus{ border-color:var(--cyan); }
.cmp-compat-input-wrap input[aria-invalid="true"]{ border-color:var(--cmp-danger); }
.cmp-compat-input-wrap em{
  position:absolute; right:12px; color:var(--text-faint); font-size:.75rem; font-style:normal;
}
.cmp-compat-field small{ color:var(--cmp-danger); font-size:.75rem; }
.cmp-compat-actions{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:var(--sp-1); }
.cmp-compat-actions button{
  min-height:40px; padding:7px 16px; border:0; border-radius:var(--r-pill);
  background:var(--cyan); color:var(--cta-ink); cursor:pointer; font-size:.82rem; font-weight:700;
}
.cmp-compat-actions a{
  display:inline-flex; min-height:40px; align-items:center; padding:0 8px;
  color:var(--text-faint); font-size:.82rem; text-decoration:none;
}
.cmp-compat-actions a:hover{ color:var(--text-soft); }

/* На широком экране задача и бюджет образуют одну сбалансированную строку:
   сценарии заполняют левую часть панели, форма бюджета — правую. */
@media (min-width:1100px){
  .cmp-controls{
    display:grid; grid-template-columns:minmax(0,1fr) max-content;
    align-items:end; column-gap:var(--sp-4); row-gap:12px;
  }
  .cmp-intent{ min-width:0; }
  .cmp-budget-form{
    grid-column:2; align-self:end; justify-self:end;
    display:grid; grid-template-columns:190px auto auto; width:max-content;
  }
  .cmp-budget-q, .cmp-budget-error{ grid-column:1 / -1; }
  .cmp-budget-input{ width:190px; }
  .cmp-controls > .cmp-budget-form:first-child{ grid-column:1 / -1; justify-self:start; }
  .cmp-compat-form{ grid-column:1 / -1; }
  .cmp-controls-hint{ grid-column:1 / -1; }
}

.cmp-buy{
  display:inline-flex; align-items:center; min-height:var(--h-btn);
  background:var(--grad-cta); color:var(--cta-ink);
  padding:0 var(--sp-4); border-radius:var(--r-md); font-weight:700;
  text-decoration:none; box-shadow:var(--shadow-cta); white-space:nowrap;
  transition:transform .15s, box-shadow .2s;
}
.cmp-buy:hover{ transform:translateY(-3px); box-shadow:var(--shadow-cta-hover); }
.cmp-more{
  display:inline-flex; align-items:center; min-height:var(--h-btn);
  background:transparent; color:var(--text-hi); border:1px solid var(--line);
  padding:0 var(--sp-4); border-radius:var(--r-md); text-decoration:none;
  white-space:nowrap; transition:border-color .2s, color .2s;
}
.cmp-more:hover{ border-color:var(--cyan); color:var(--cyan); }
.cmp-buy--sm{ min-height:var(--h-btn-sm); padding:0 16px; font-size:.84rem; border-radius:var(--r-sm); }
.cmp-more--sm{ min-height:var(--h-btn-sm); font-size:.84rem; padding:0 14px; border-radius:var(--r-sm); }
.cmp-cart-form{ margin:0; padding:0; display:inline-flex; }
.cmp-cart-form .cmp-buy{ border:none; cursor:pointer; font-family:inherit; }

/* ── Хэндофф в конструктор ПК ── */
.cmp-handoff{
  display:flex; align-items:center; gap:14px;
  margin:18px 0 8px; padding:14px 18px;
  background:var(--volt-a10);
  border:1px solid var(--volt-a25); border-radius:var(--r-sm);
  text-decoration:none; transition:border-color .2s, transform .12s;
}
.cmp-handoff:hover{ border-color:var(--volt-a40); transform:translateY(-1px); }
.cmp-handoff-ic{ display:flex; flex-shrink:0; }
.cmp-handoff-ic .ic{ width:24px; height:24px; color:var(--volt); }
.cmp-handoff-txt{ display:flex; flex-direction:column; gap:2px; flex:1; }
.cmp-handoff-txt strong{ color:var(--text-hi); font-size:.95rem; }
.cmp-handoff-txt em{ color:var(--text-soft); font-style:normal; font-size:.84rem; }
.cmp-handoff-arrow{ color:var(--volt); font-size:1.2rem; font-weight:800; }

/* ═══ ТАБЛИЦА ХАРАКТЕРИСТИК ═══ */
/* Мобильный пикер колонок — на десктопе скрыт, см. @media ниже */
.cmp-colpick, .cmp-product-rail{ display:none; }

.cmp-colpick-status{
  min-height:1.3em; margin:8px 0 0; color:var(--orange); font-size:.78rem; line-height:1.4;
}
.cmp-colpick-winner{
  margin-left:5px; font-family:var(--font-mono); font-size:.62rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.cmp-product-rail{
  gap:var(--sp-1);
  position:sticky; top:calc(var(--nav-h-compact) + 6px); z-index:6;
  padding:8px; margin-top:12px; background:var(--bg2);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
}
.cmp-product-rail--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cmp-product-rail--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cmp-product-rail--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cmp-product-rail-item{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:56px; padding:6px 30px; color:var(--text-soft); text-decoration:none; text-align:center;
  border-radius:var(--r-sm); background:var(--bg);
}
.cmp-product-rail-item.is-winner{ color:var(--text-hi); box-shadow:inset 0 0 0 1px var(--cyan-a40); }
.cmp-product-rail-index{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--cyan-a10); color:var(--cyan);
  font-family:var(--font-mono); font-size:.68rem;
}
.cmp-product-rail-name{
  display:-webkit-box; width:100%; min-width:0; overflow:hidden;
  -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  font-size:.78rem; font-weight:600; line-height:1.18; white-space:normal;
}
.cmp-product-rail-pick{
  color:var(--cyan); font-family:var(--font-mono);
  font-size:.58rem; text-transform:uppercase; letter-spacing:.05em;
}

/* overflow-x:auto would compute overflow-y to auto and turn this into a scroll
   container, breaking the sticky header — поэтому горизонтальный скролл включаем
   только на узких экранах (см. медиазапрос ниже). */
/* Раньше ширина таблицы капалась по числу товаров (--cols), чтобы с 2 товарами
   auto-layout не растягивал 2 колонки на всю ширину контейнера с пусто-широкими
   ячейками. На практике с реальным контентом (длинные названия CPU/GPU,
   значения характеристик) колонки не выглядят пустыми — а сама таблица на
   фоне остальных full-width блоков страницы (линзы, hero) смотрелась куском
   не на своём месте. Простое width:100% — как у всего остального контента. */
.cmp-scroll{
  border:1px solid var(--line); border-radius:var(--r-md); margin-top:18px; width:100%;
  background:var(--bg2); box-shadow:inset 0 1px 0 var(--glass-line);
}
.cmp-scroll--same{ border:none; border-radius:0; margin-top:0; }
/* border-radius на .cmp-scroll ничего не клипует — overflow тут обязан
   остаться visible (см. предупреждение выше и в _compare_table.html), иначе
   сломается sticky-шапка. Поэтому скругление рисуем на самих угловых
   ячейках — их непрозрачный фон иначе перекрывает изгиб рамки прямыми
   углами, и таблица выглядит квадратной, хотя border-radius задан. */
.cmp-scroll:not(.cmp-scroll--same) .cmp-head th:first-child{ border-top-left-radius:var(--r-lg); }
.cmp-scroll:not(.cmp-scroll--same) .cmp-head th:last-child{ border-top-right-radius:var(--r-lg); }
.cmp-scroll:not(.cmp-scroll--same) tbody tr:last-child th:first-child{ border-bottom-left-radius:var(--r-lg); }
.cmp-scroll:not(.cmp-scroll--same) tbody tr:last-child td:last-child{ border-bottom-right-radius:var(--r-lg); }
/* Без diff_rows у таблицы вообще нет tbody — низ шапки и есть низ таблицы */
.cmp-scroll:not(.cmp-scroll--same) .cmp-table:not(:has(tbody)) .cmp-head th:first-child{ border-bottom-left-radius:var(--r-lg); }
.cmp-scroll:not(.cmp-scroll--same) .cmp-table:not(:has(tbody)) .cmp-head th:last-child{ border-bottom-right-radius:var(--r-lg); }
/* border-collapse:separate (не collapse) — иначе Chromium не делает sticky-шапку
   таблицы. Спейсинг 0, рамки у ячеек только снизу/слева, так что вид не меняется. */
.cmp-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:720px; table-layout:fixed; }
/* Колонка параметров остаётся компактной на широком desktop; товарные колонки
   делят всё оставшееся место поровну. Это устраняет пустой левый блок в 30–35%. */
.cmp-col--label{ width:clamp(13.5rem,16vw,17.5rem); }
.cmp-col--product{ width:auto; }
.cmp-table-caption, .cmp-sr-head{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.cmp-head th{
  position:sticky; top:var(--nav-h-compact); z-index:5; /* локальный стек внутри .cmp-scroll, не участвует в общесайтовой иерархии */
  background:var(--bg2); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:var(--sp-2); vertical-align:top; text-align:center;
}
.cmp-corner{ position:relative; background:var(--bg); }
.cmp-corner-summary{
  position:absolute; top:50%; right:24px; left:24px; transform:translateY(-50%);
  display:flex; flex-direction:column;
  align-items:center; gap:4px; text-align:center;
}
.cmp-corner-eyebrow{
  font-family:var(--font-mono); font-size:.63rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cyan);
}
.cmp-corner-summary strong{
  font-size:1rem; line-height:1.25; color:var(--text-hi); text-wrap:balance;
}
.cmp-corner-summary > span:last-child{ font-size:.78rem; color:var(--text-faint); }
/* Резервируем место под плашку «наш выбор» во ВСЕХ колонках — иначе карточка
   победителя съезжает вниз и фото перестают совпадать по высоте. */
.cmp-prod{ position:relative; }
.cmp-head th.cmp-prod{
  padding:0; vertical-align:top;
  border-left:1px solid var(--line); background:var(--bg2);
}
.cmp-head th.cmp-prod.is-winner{
  background:var(--cyan-a05);
  box-shadow:inset 0 0 0 2px var(--cyan), 0 0 26px color-mix(in srgb, var(--cyan) 26%, transparent);
}
/* Обёртка держит абсолютное позиционирование (position:relative на <th> ненадёжно) */
.cmp-prod-card{ position:relative; display:block; height:250px; overflow:hidden; }
/* Фото на всю ячейку (фон), подписи — overlay снизу поверх фото */
.cmp-head th.cmp-prod .cmp-prod-media{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border-radius:0;
  background:var(--pure-white);
}
.cmp-head th.cmp-prod .cmp-prod-media img{ width:100%; height:100%; object-fit:contain; object-position:center 30%; padding:16px 16px 6px; }
.cmp-head th.cmp-prod .cmp-prod-ph{ height:100%; }
.cmp-prod-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:38px 15px 14px; text-align:left;
  background:linear-gradient(180deg, transparent, var(--black-a55) 52%, var(--black-a70) 100%);
}
.cmp-head th.cmp-prod .cmp-prod-name{ min-height:0; color:var(--pure-white); text-shadow:0 2px 12px var(--black-a70); }
.cmp-head th.cmp-prod .cmp-prod-price{
  margin-top:8px; color:var(--pure-white); font-family:var(--font-mono); font-weight:700;
  font-size:1.5rem; font-variant-numeric:tabular-nums; text-shadow:0 0 16px color-mix(in srgb, var(--cyan) 60%, transparent);
}
.cmp-head th.cmp-prod .cmp-prod-price span{ font-size:.7rem; color:var(--text-soft); margin-left:5px; text-shadow:none; }
.cmp-pick-badge{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:var(--sp-1); white-space:nowrap; z-index:2;
  background:var(--cyan); color:var(--black);
  font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.06em;
  border-radius:var(--r-card); padding:3px 11px;
}
.cmp-remove-form{ position:absolute; top:6px; right:6px; margin:0; z-index:3; }
/* Крестик под форму рамки: видимый чип (скруглённый прямоугольник) в 44px-зоне нажатия */
.cmp-remove{
  width:44px; height:44px; border:0; background:transparent; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .2s;
}
.cmp-remove.is-loading{ opacity:.55; cursor:wait; }
.cmp-remove svg{
  width:26px; height:26px; padding:6px; box-sizing:border-box;
  color:var(--text-soft); background:color-mix(in srgb, var(--bg) 60%, transparent);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:color .2s, border-color .2s, background-color .2s;
}
.cmp-remove:hover svg{ color:var(--cmp-danger); border-color:var(--cmp-danger); background:color-mix(in srgb, var(--danger) 14%, transparent); }
.cmp-prod-media{
  display:block; width:92px; height:92px; margin:0 auto .65rem;
  background:var(--pure-white); border-radius:var(--r-md); padding:var(--sp-1);
}
.cmp-prod-media img{ width:100%; height:100%; object-fit:contain; }
.cmp-prod-ph{ display:flex; align-items:center; justify-content:center; height:100%; }
.cmp-prod-name{
  display:-webkit-box; min-height:2.5em; overflow:hidden; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; color:var(--text-hi); font-weight:650; font-size:.9rem;
  line-height:1.25; text-decoration:none; text-wrap:balance;
}
.cmp-prod-name:hover{ color:var(--cyan); }
.cmp-prod-price{
  margin-top:.45rem; color:var(--cyan); font-weight:700;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

/* Группы строк: «Ключевые различия» / «Заметные» / «Остальные» */
tr.cmp-group th{
  height:44px; text-align:center; vertical-align:middle; padding:0 18px;
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint);
  border-bottom:1px solid var(--line); background:transparent;
}
.cmp-group-title{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:44px; text-align:center;
}
tr.cmp-group:first-child th{ color:var(--cyan); }

.cmp-table tbody th.cmp-rowlabel{
  text-align:left; vertical-align:middle; height:var(--h-row); padding:.75rem 1.1rem; color:var(--text-soft);
  font-weight:600; font-size:.82rem; font-family:var(--font-body);
  letter-spacing:.01em; text-transform:none; border-bottom:1px solid var(--line);
  background:var(--glass); white-space:normal; overflow-wrap:anywhere;
}
.cmp-cell{
  text-align:center; height:var(--h-row); padding:.75rem 1.25rem; color:var(--text);
  border-bottom:1px solid var(--line); border-left:1px solid var(--line);
  font-size:.92rem; line-height:1.4; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.cmp-row:nth-child(odd) .cmp-cell:not(.is-best){ background:var(--glass); }
.cmp-cell.is-best{ color:var(--text-hi); font-weight:700; background:var(--cyan-a05); }
.cmp-best-mark{ color:var(--cyan); margin-left:var(--sp-0); font-size:.85em; }
/* Ключевые строки — заметнее остальных */
.cmp-row--high .cmp-rowlabel{ color:var(--text-soft); }
.cmp-row--high .cmp-cell{ font-size:1rem; }
/* Честное «нет данных» вместо прочерка */
.cmp-nodata{ color:var(--text-faint); font-size:.82rem; }
/* Чип «конфигурация» у RAM/SSD ноутбука (Принцип №2 — не влияет на вердикт) */
.cmp-cfg-chip{
  display:inline-block; margin-left:6px; padding:1px 8px; vertical-align:middle;
  border:1px dashed var(--line); border-radius:var(--r-card);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em;
  text-transform:lowercase; color:var(--text-faint); cursor:help;
}

/* «Характеристики идентичны» — полоса-сообщение вне таблицы */
.cmp-identical{
  margin-top:14px; padding:14px 18px; text-align:center;
  background:var(--bg2); border:1px dashed var(--line); border-radius:var(--r-sm);
  color:var(--text-soft); font-size:.92rem;
}

/* Одинаковые характеристики (свёрнуто) */
.cmp-same{ margin-top:14px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.cmp-same summary{
  padding:11px 16px; cursor:pointer; font-size:.86rem; color:var(--text-soft);
  background:var(--bg2); list-style:none;
}
.cmp-same summary::-webkit-details-marker{ display:none; }
.cmp-same summary::before{ content:"+ "; color:var(--cyan); }
.cmp-same[open] summary::before{ content:"− "; }
.cmp-same .cmp-cell, .cmp-same .cmp-rowlabel{ opacity:.55; }

/* ═══ Минибар: плавающий вердикт (появляется, когда hero ушёл из вьюпорта) ═══ */
.cmp-minibar{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%, 130%);
  z-index:var(--z-sticky-bar);
  display:flex; align-items:center; gap:var(--sp-3);
  width:min(720px, calc(100vw - 32px));
  padding:10px 12px 10px 18px;
  background:var(--surface-overlay); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .25s, visibility .25s;
}
.cmp-minibar.is-shown{ transform:translate(-50%, 0); opacity:1; visibility:visible; }
.cmp-minibar-info{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; flex:1; }
.cmp-minibar-badge{
  flex:0 0 auto; padding:3px 10px; border-radius:var(--r-card);
  background:var(--cyan); color:var(--black);
  font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.06em;
  white-space:nowrap;
}
.cmp-minibar-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text-hi); font-weight:600; font-size:.9rem; text-decoration:none;
}
.cmp-minibar-name:hover{ color:var(--cyan); }
.cmp-minibar-price{
  flex:0 0 auto; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  color:var(--cyan); font-weight:700; font-size:.9rem; white-space:nowrap;
}
.cmp-minibar-actions{ display:flex; align-items:center; gap:var(--sp-1); flex:0 0 auto; }
.cmp-minibar-up{
  color:var(--text-soft); text-decoration:none; font-size:.82rem; white-space:nowrap;
}
.cmp-minibar-up:hover{ color:var(--cyan); }

/* ═══ Пустое / solo состояния ═══ */
.cmp-solo{
  position:relative;
  display:flex; gap:28px; align-items:center; flex-wrap:wrap;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; max-width:780px;
}
.cmp-solo-media{
  flex:0 0 auto; width:180px; height:180px; background:var(--pure-white);
  border-radius:var(--r-md); padding:14px; display:block;
}
.cmp-solo-media img{ width:100%; height:100%; object-fit:contain; }
.cmp-solo-media .cmp-prod-ph{ height:100%; }
.cmp-solo-body{ flex:1 1 280px; }
.cmp-solo-name{ display:block; font-size:1.3rem; font-weight:700; color:var(--text-hi); text-decoration:none; line-height:1.25; }
.cmp-solo-name:hover{ color:var(--cyan); }
.cmp-solo-price{
  color:var(--cyan); font-weight:700; font-size:1.15rem; margin:8px 0 14px;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
.cmp-solo-msg{ color:var(--text-soft); line-height:1.6; margin:0 0 var(--sp-2); }

/* Пустое состояние («совсем пусто», 0 товаров): карточка-подсказка делит ту же
   узкую колонку, что и .cmp-guide (680px, центр) — иначе полноширинная карточка
   (общий компонент, используется и на wishlist/info-страницах без обёртки) и
   узкая форма ниже визуально не совпадают. CTA «Перейти в каталог» живёт ВНУТРИ
   этой карточки (естественное действие для «здесь пусто»), а не отдельной
   плавающей кнопкой после формы. */
.cmp-inner > .empty-state{ max-width:680px; margin:0 auto; }
.empty-state .info-cta-row{ margin-top:1.4rem; }

/* Guided entry «что сравнивать» */
.cmp-guide{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-2);
  margin:18px auto 8px; max-width:680px; padding:20px 22px;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm);
}
.cmp-guide-title{ width:100%; font-size:.95rem; font-weight:700; color:var(--text-hi); margin-bottom:4px; }
.cmp-guide-field{ display:flex; flex-direction:column; gap:5px; flex:1 1 150px; }
.cmp-guide-field span{
  font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-faint);
}
.cmp-guide-field select, .cmp-guide-field input{
  padding:8px 12px; border-radius:var(--r-sm);
  background:var(--bg); border:1px solid var(--field-border); color:var(--text-hi); font-size:.9rem;
}
.cmp-guide-field select:focus, .cmp-guide-field input:focus{ outline:none; border-color:var(--cyan); }
.cmp-guide-submit{ flex:1 0 100%; display:flex; justify-content:center; margin-top:var(--sp-1); }

/* ── Загрузка при AJAX-перестройке (удаление товара) ── */
.cmp-inner.is-refreshing{ opacity:.5; pointer-events:none; transition:opacity .2s; }
.cmp-prod.is-removing{ opacity:.35; }

/* ── Доступность: видимый фокус у всех интерактивов сравнения ── */
.cmp-buy:focus-visible, .cmp-more:focus-visible, .cmp-clear:focus-visible,
.cmp-share:focus-visible, .cmp-adopt:focus-visible,
.cmp-intent-chip:focus-visible, .cmp-budget-apply:focus-visible,
.cmp-budget-input:focus-visible, .cmp-budget-clear:focus-visible,
.cmp-compat-input-wrap input:focus-visible, .cmp-compat-actions button:focus-visible,
.cmp-compat-actions a:focus-visible,
.cmp-remove:focus-visible,
.cmp-colpick-chip:focus-visible, .cmp-minibar-up:focus-visible,
.cmp-product-rail-item:focus-visible,
.cmp-same summary:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}

@media (max-width:1099px){
  .cmp-product-rail{ display:grid; }
}

/* ═══ COMPACT (≤1099px): две выбранные товарные колонки без горизонтального
   разрыва. Широкая таблица включается только там, где ей хватает места. ═══ */
@media (max-width:1099px){
  /* На узких экранах убираем десктопные боковые поля 90px (--page-x): иначе сетка
     товаров сплющивается. Тот же приём, что у .acc-page. */
  .cmp-page{ padding-left:20px; padding-right:20px; }

  /* Пикер колонок: лимит 2 товара на телефоне — пользователь выбирает какие */
  .cmp-colpick{ display:block; margin-top:16px; }
  .cmp-colpick-msg{ font-size:.84rem; color:var(--text-soft); margin-bottom:10px; }
  .cmp-colpick-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
  .cmp-colpick-chip{
    display:inline-flex; align-items:center; min-height:40px;
    padding:7px 13px; border-radius:var(--r-pill); cursor:pointer;
    background:var(--bg2); border:1px solid var(--line);
    color:var(--text-soft); font-size:.82rem; font-weight:600; font-family:var(--font-body);
    transition:color .2s, background .2s, border-color .2s;
  }
  .cmp-colpick-chip.is-on{ background:var(--cyan); color:var(--cta-ink); border-color:transparent; }

  /* Скрытие невыбранных колонок — ТОЛЬКО в мобильной вёрстке */
  .cmp-table .is-mob-off, .cmp-product-rail .is-mob-off{ display:none !important; }
  .cmp-product-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Таблица превращается в вертикальные блоки: метка строки сверху на всю
     ширину, значения товаров в ряд под ней — без прокрутки вправо. */
  .cmp-scroll{ overflow:visible; border:none; border-radius:0; }
  .cmp-table{ min-width:0; display:block; }
  .cmp-table thead, .cmp-table tbody, .cmp-table tr{ display:block; }
  .cmp-corner{ display:none; }

  .cmp-head{ position:static; }
  .cmp-head tr{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-1); }
  .cmp-head th.cmp-prod{
    position:static; padding:0; height:196px; overflow:hidden;
    border:1px solid var(--line); border-radius:var(--r-md); backdrop-filter:none;
  }
  /* Карточка равна ячейке: при десктопных 250px низ с подписью срезался */
  .cmp-head th.cmp-prod .cmp-prod-card{ height:100%; }
  .cmp-pick-badge{ left:50%; transform:translateX(-50%); font-size:.62rem; padding:2px 8px; }
  .cmp-head th.cmp-prod .cmp-prod-media img{ padding:14px 14px 50px; }
  .cmp-head th.cmp-prod .cmp-prod-price{ font-size:1.2rem; }

  .cmp-table tbody tr{
    display:grid; grid-template-columns:repeat(2,1fr);
    column-gap:var(--sp-1); row-gap:var(--sp-1); margin-top:16px;
  }
  tr.cmp-group th, .cmp-rowlabel{
    grid-column:1 / -1; white-space:normal;
    border:none; background:none; padding:0 2px 3px;
  }
  tr.cmp-group{ width:100%; margin-top:22px; }
  tr.cmp-group th{ width:100%; height:44px; padding:0; text-align:center; vertical-align:middle; }
  .cmp-table tbody th.cmp-rowlabel{ text-align:center; padding-inline:2px; }
  .cmp-cell{
    height:auto;
    border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 8px;
    text-align:center; overflow-wrap:anywhere;
  }
  /* Мобильная таблица теряет колоночную привязку — подписываем ячейку моделью */
  .cmp-cell::before{
    content:attr(data-label);
    display:block; margin-bottom:4px;
    font-family:var(--font-mono); font-size:.6rem; letter-spacing:.04em;
    text-transform:uppercase; color:var(--text-faint);
    white-space:normal; overflow-wrap:anywhere;
  }

  /* Hero — стопка; линзы и intent-чипы — скролл-ряды */
  /* На телефоне вместо горизонтальной прокрутки чипов — выпадающий список */
  .cmp-intent-chips{ display:none; }
  .cmp-intent-select, .cmp-intent > .nps{ display:block; }

  /* Сетки insights — в одну колонку */

  /* Бюджет-форма — в столбик */
  .cmp-budget-form{ flex-direction:column; align-items:stretch; }
  .cmp-budget-input{ flex:1 1 auto; }
  .cmp-compat-form{ grid-template-columns:1fr; }
  .cmp-compat-fields{ grid-template-columns:1fr; }
  .cmp-compat-actions{ align-items:center; }

  /* Минибар — над мобильным bottom-nav */
  .cmp-minibar{
    bottom:calc(var(--sp-8) + 4px);
    gap:var(--sp-1); padding:8px 10px 8px 12px;
  }
  .cmp-minibar-badge{ display:none; }
  .cmp-minibar-up{ display:none; }
}

@media (max-width:560px){
  .cmp-solo{ flex-direction:column; text-align:center; padding:22px; }
  .cmp-solo-media{ width:150px; height:150px; }
  .cmp-solo-body{ flex:1 1 auto; }
}

/* ═══ Узкий телефон (≤480px) ═══ */
@media (max-width:480px){
  /* Плашки выбора колонок — во всю ширину, а не лесенкой по контенту */
  .cmp-colpick-chips{ flex-direction:column; align-items:stretch; }
  .cmp-colpick-chip{ width:100%; justify-content:center; text-align:center; }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce){
  .cmp-minibar{ transition:none; }
  .cmp-buy, .cmp-handoff{ transition:none; }
}
.cmp-alternatives {
  margin-top: var(--sp-10);
}

.cmp-alternatives__head {
  max-width: 720px;
  margin-bottom: var(--sp-5);
}

.cmp-alternatives__head > span,
.cmp-alternative > div > span {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.cmp-alternatives__head h2 {
  margin: var(--sp-1) 0;
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-wrap: balance;
}

.cmp-alternatives__head p {
  color: var(--text-soft);
  text-wrap: pretty;
}

.cmp-alternatives__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.cmp-alternative {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--glass);
  box-shadow: 0 0 0 1px var(--glass-line), inset 0 1px 0 var(--glass-line);
}

.cmp-alternative img {
  width: 112px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--r-xs);
  outline: 1px solid var(--pure-white-a10);
}

.cmp-alternative h3 {
  margin: var(--sp-1) 0;
  font-size: .95rem;
  text-wrap: balance;
}

.cmp-alternative h3 a,
.cmp-alternative__actions a {
  color: var(--text-hi);
}

.cmp-alternative strong {
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.cmp-alternative__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
}

.cmp-alternative__actions form {
  margin: 0;
}

.cmp-alternative__actions a,
.cmp-alternative__actions button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  transition-property: transform, color, background-color;
  transition-duration: var(--dur-base);
}

.cmp-alternative__actions button {
  border: 0;
  color: var(--black);
  background: var(--cyan);
  font-weight: 700;
  cursor: pointer;
}

.cmp-alternative__actions a:active,
.cmp-alternative__actions button:active {
  transform: scale(.96);
}

.cmp-alternative__actions a:focus-visible,
.cmp-alternative__actions button:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .cmp-alternatives__grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ Единая витрина сравнения 2026-07-23 ═══ */
.cmp-variant-static{
  display:block; margin-top:9px; color:var(--text-soft); font-size:.72rem; line-height:1.4;
}

.cmp-section-heading{ max-width:none; margin-bottom:20px; }
.cmp-section-heading > span{
  color:var(--cyan); font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.cmp-section-heading h2{
  margin:6px 0 0; color:var(--text-hi); font-family:var(--font-display);
  font-size:clamp(1.45rem,3vw,2.25rem); letter-spacing:-.025em; text-wrap:balance;
}
/* Мера строки — по решению владельца (31.07.2026): лид обязан держать ширину
   своей секции, иначе на 1725px он читался как обрезанный кусок.
   Прежнее ограничение было 70ch; ПЛАТА за отказ от него — строка до ~215
   символов на широком мониторе, это выше книжной нормы 65–75ch.
   Чтобы вернуть меру, достаточно вернуть сюда max-width:70ch. */
.cmp-section-heading p{ margin:8px 0 0; color:var(--text-soft); line-height:1.55; text-wrap:pretty; }
.cmp-config-principle{
  display:flex; align-items:center; gap:16px; margin:18px 0 0; padding:15px 18px;
  border-radius:var(--r-md); background:var(--cyan-a08);
  box-shadow:inset 0 0 0 1px var(--cyan-a25);
}
.cmp-config-principle-icon{
  flex:0 0 auto; padding:7px 9px; border-radius:var(--r-xs); background:var(--cyan-a12);
  color:var(--cyan); font:700 .66rem var(--font-mono); letter-spacing:.06em;
}
.cmp-config-principle strong{ color:var(--text-hi); font-size:.88rem; }
.cmp-config-principle p{ margin:3px 0 0; color:var(--text-soft); font-size:.78rem; line-height:1.45; text-wrap:pretty; }

.cmp-advice,.cmp-radar,.cmp-horizon,.cmp-watchouts,.cmp-care,.cmp-trust,.cmp-faq{ margin-top:clamp(34px,6vw,72px); }
.cmp-advice-grid,.cmp-horizon-grid,.cmp-watchouts-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px;
}
/* Рекомендованную модель показываем первой карточкой (порядок товаров не гарантирует победителя первым) */
.cmp-advice-card.is-pick{ order:-1; }
.cmp-advice-card,.cmp-horizon-card,.cmp-watchouts-grid article{
  min-width:0; padding:20px; border-radius:var(--r-lg); background:var(--glass);
  box-shadow:0 0 0 1px var(--glass-line);
}
.cmp-advice-card.is-pick{ box-shadow:0 0 0 1px var(--cyan-a40),0 16px 42px var(--cyan-a08); }
.cmp-advice-card-head span{
  color:var(--cyan); font-family:var(--font-mono); font-size:.67rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.cmp-advice-card-head h3,.cmp-horizon-card h3,.cmp-watchouts-grid h3{
  margin:7px 0 0; color:var(--text-hi); font-size:1rem; line-height:1.4; text-wrap:balance;
}
.cmp-advice-list{ display:grid; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.cmp-advice-list li{ position:relative; padding-left:18px; color:var(--text); font-size:.86rem; line-height:1.55; text-wrap:pretty; }
.cmp-advice-list li::before{ content:"+"; position:absolute; left:0; color:var(--volt); font-family:var(--font-mono); }
.cmp-advice-empty{ margin:18px 0 0; color:var(--text-soft); font-size:.86rem; line-height:1.55; }
.cmp-advice-limit{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.cmp-advice-limit strong{ color:var(--orange); font-size:.78rem; }
.cmp-advice-limit ul{ margin:8px 0 0; padding-left:17px; color:var(--text-soft); font-size:.82rem; line-height:1.5; }

/* ═══ Радар: слева диаграмма (края — только названия осей), справа дельты модели ═══ */
.cmp-radar-layout{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(240px,.95fr);
  gap:clamp(18px,3vw,40px); align-items:start;
  margin-top:22px; padding:clamp(18px,3vw,34px); border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--cyan-a08),var(--violet-a10));
  box-shadow:inset 0 0 0 1px var(--glass-line),0 24px 64px var(--black-a18);
}
.cmp-radar-plot{ position:relative; width:100%; max-width:460px; margin:0 auto; aspect-ratio:1.18; }
.cmp-radar-svg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64%; height:auto; overflow:visible;
}
.cmp-radar-grid polygon,.cmp-radar-grid line{ fill:none; stroke:var(--line); stroke-width:1; }
.cmp-radar-series{ stroke-width:2.2; vector-effect:non-scaling-stroke; transition:opacity .32s ease, stroke-width .32s ease, filter .32s ease; cursor:pointer; }
.cmp-radar-series--1{ fill:var(--cyan-a18); stroke:var(--cyan); }
.cmp-radar-series--2{ fill:var(--magenta-a16); stroke:var(--magenta); }
.cmp-radar-series--3{ fill:var(--violet-a16); stroke:var(--violet); }
.cmp-radar-series--4{ fill:var(--orange-a10); stroke:var(--orange); }
/* Ось без данных: вершины в контуре нет, вместо неё — полая метка на краю оси.
   Втянутая к центру вершина читалась бы как «очень слабо» там, где значение
   просто неизвестно. */
.cmp-radar-gap{ fill:none; stroke:var(--line); stroke-width:1.4; stroke-dasharray:2 2; vector-effect:non-scaling-stroke; }
.cmp-radar-plot[data-hover] .cmp-radar-gap{ opacity:.25; }
.cmp-radar-plot[data-hover="0"] .cmp-radar-gap--1,
.cmp-radar-plot[data-hover="1"] .cmp-radar-gap--2,
.cmp-radar-plot[data-hover="2"] .cmp-radar-gap--3,
.cmp-radar-plot[data-hover="3"] .cmp-radar-gap--4{ opacity:1; }
/* Наведение на модель — приглушаем остальные контуры */
.cmp-radar-plot[data-hover] .cmp-radar-series{ opacity:.18; }
.cmp-radar-plot[data-hover="0"] .cmp-radar-series--1,
.cmp-radar-plot[data-hover="1"] .cmp-radar-series--2,
.cmp-radar-plot[data-hover="2"] .cmp-radar-series--3,
.cmp-radar-plot[data-hover="3"] .cmp-radar-series--4{ opacity:1; }
/* Свечение активного контура (по цвету модели) */
.cmp-radar-plot[data-hover="0"] .cmp-radar-series--1{ filter:drop-shadow(0 0 5px var(--cyan-a40)); stroke-width:2.8; }
.cmp-radar-plot[data-hover="1"] .cmp-radar-series--2{ filter:drop-shadow(0 0 5px var(--magenta-a40)); stroke-width:2.8; }
.cmp-radar-plot[data-hover="2"] .cmp-radar-series--3{ filter:drop-shadow(0 0 5px color-mix(in srgb,var(--violet) 40%,transparent)); stroke-width:2.8; }
.cmp-radar-plot[data-hover="3"] .cmp-radar-series--4{ filter:drop-shadow(0 0 5px color-mix(in srgb,var(--orange) 40%,transparent)); stroke-width:2.8; }
/* Премиум-слой: аура, эталон-«промежуток» (лучшее в сравнении), маркеры, счёт */
.cmp-radar-aura{ pointer-events:none; }
.cmp-radar-reference{
  fill:color-mix(in srgb,var(--violet) 6%,transparent);
  stroke:var(--violet); stroke-width:1.4; stroke-dasharray:4 6;
  stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.8; pointer-events:none;
}
.cmp-radar-markers path{ fill:var(--bg); stroke:var(--cyan); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.cmp-radar-plot[data-hover="1"] .cmp-radar-markers path{ stroke:var(--magenta); }
.cmp-radar-plot[data-hover="2"] .cmp-radar-markers path{ stroke:var(--violet); }
.cmp-radar-plot[data-hover="3"] .cmp-radar-markers path{ stroke:var(--orange); }
.cmp-radar-score circle{ fill:color-mix(in srgb,var(--bg) 82%,transparent); stroke:var(--cyan-a40); stroke-width:1; }
.cmp-radar-score-val{ fill:var(--text-hi); font:700 13px var(--font-mono); font-variant-numeric:tabular-nums; }
.cmp-radar-score-cap{ fill:var(--text-faint); font:400 6.5px var(--font-mono); letter-spacing:.06em; }
/* По краям — только НАЗВАНИЯ осей */
/* Подписи осей позиционируются инлайн-координатами (left/top в %) из движка —
   так диаграмма адаптивна под 3–6 осей. Центрируем на точке. */
.cmp-radar-axis{ position:absolute; max-width:30%; transform:translate(-50%,-50%); text-align:center; }
.cmp-radar-axis-label{ color:var(--text-hi); font-size:.8rem; font-weight:700; line-height:1.2; }
.cmp-radar-axis-label.is-nodata{ color:var(--text-dim); }
.cmp-radar-axis-note{ display:block; font-size:.62rem; font-weight:500; font-style:normal; color:var(--text-faint); letter-spacing:.02em; }
/* Правая панель: дельты наведённой модели относительно рекомендованной */
.cmp-radar-readout{ min-width:0; }
.cmp-radar-model{ display:none; }
.cmp-radar-model.is-active{ display:block; }
.cmp-radar-model-name{
  position:relative; display:inline-block; padding-left:18px; margin-bottom:2px;
  color:var(--text-hi); font-weight:700; font-size:1.02rem;
}
.cmp-radar-model-name::before{ content:""; position:absolute; left:0; top:.42em; width:10px; height:10px; border-radius:50%; }
.cmp-radar-model--1 .cmp-radar-model-name::before{ background:var(--cyan); box-shadow:0 0 12px var(--cyan-a40); }
.cmp-radar-model--2 .cmp-radar-model-name::before{ background:var(--magenta); box-shadow:0 0 12px var(--magenta-a40); }
.cmp-radar-model--3 .cmp-radar-model-name::before{ background:var(--violet); }
.cmp-radar-model--4 .cmp-radar-model-name::before{ background:var(--orange); }
.cmp-radar-model-base{ margin:0 0 8px; color:var(--text-faint); font-size:.74rem; }
.cmp-radar-specs{ margin:0; }
.cmp-radar-spec{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); }
.cmp-radar-spec:last-child{ border-bottom:0; }
.cmp-radar-spec dt{ color:var(--text-soft); font-size:.82rem; }
.cmp-radar-spec dd{ margin:0; text-align:right; }
.cmp-radar-delta{ font-weight:700; font-size:.82rem; font-variant-numeric:tabular-nums; }
.cmp-radar-spec.is-up .cmp-radar-delta{ color:var(--cmp-ok); }
.cmp-radar-spec.is-down .cmp-radar-delta{ color:var(--cmp-risk); }
.cmp-radar-spec.is-equal .cmp-radar-delta{ color:var(--text-faint); }
.cmp-radar-own{ display:block; color:var(--text-faint); font-size:.72rem; font-variant-numeric:tabular-nums; }
.cmp-radar-nodata{ opacity:.55; }
.cmp-radar-nodata .cmp-radar-delta{ font-style:italic; color:var(--text-faint); }
.cmp-radar-hint{ margin:12px 0 0; color:var(--text-faint); font-size:.72rem; }
/* Легенда = переключатели моделей (ховер/фокус/клик) */
.cmp-radar-legend{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; margin:6px 0 0; padding:0; list-style:none; }
.cmp-radar-key{
  position:relative; padding:6px 13px 6px 27px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg2); color:var(--text-soft); font:600 .76rem var(--font-body); cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.cmp-radar-key::before{ content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; }
.cmp-radar-key--1::before{ background:var(--cyan); }
.cmp-radar-key--2::before{ background:var(--magenta); }
.cmp-radar-key--3::before{ background:var(--violet); }
.cmp-radar-key--4::before{ background:var(--orange); }
.cmp-radar-key:hover, .cmp-radar-key.is-active{ border-color:var(--cyan); color:var(--text-hi); }
.cmp-radar-key:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.cmp-radar-refkey{ position:relative; display:inline-flex; align-items:center; padding-left:24px; color:var(--text-soft); font-size:.74rem; }
.cmp-radar-refkey::before{ content:""; position:absolute; left:0; top:50%; width:16px; border-top:1.5px dashed var(--violet); }

/* ═══ Радар: оживление — ambient-декор, дыхание, entrance ═══ */
/* Цвет «света сзади» следует за выбранной моделью и плавно перетекает.
   Обычный transition не интерполирует градиент — типизируем цвет через @property. */
@property --radar-glow{ syntax:"<color>"; inherits:true; initial-value:#33ccff; }
@property --radar-glow2{ syntax:"<color>"; inherits:true; initial-value:#b031fc; }
.cmp-radar-ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cmp-radar-svg{ z-index:1; }
.cmp-radar-plot{
  --radar-glow:var(--cyan); --radar-glow2:var(--violet);
  transition:--radar-glow .7s ease, --radar-glow2 .7s ease;
}
.cmp-radar-plot[data-hover="1"]{ --radar-glow:var(--magenta); --radar-glow2:var(--violet); }
.cmp-radar-plot[data-hover="2"]{ --radar-glow:var(--violet); --radar-glow2:var(--blue); }
.cmp-radar-plot[data-hover="3"]{ --radar-glow:var(--orange); --radar-glow2:var(--magenta); }
/* Декор вокруг диаграммы (SVG занимает 64% плота — по краям пусто). */
.cmp-radar-plot::before{
  content:""; position:absolute; inset:14%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--radar-glow) 20%,transparent),
    color-mix(in srgb,var(--radar-glow2) 12%,transparent) 46%, transparent 72%);
  filter:blur(8px);
}
.cmp-radar-ring{
  position:absolute; top:50%; left:50%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--radar-glow) 14%,transparent);
}
.cmp-radar-ring--1{ width:70%; }
.cmp-radar-ring--2{ width:90%; border-color:color-mix(in srgb,var(--radar-glow2) 16%,transparent); }
.cmp-radar-ring::before{
  content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px;
  margin-left:-3px; border-radius:50%;
}
.cmp-radar-ring--1::before{ background:var(--radar-glow); box-shadow:0 0 8px color-mix(in srgb,var(--radar-glow) 40%,transparent); }
.cmp-radar-ring--2::before{ background:var(--radar-glow2); box-shadow:0 0 8px color-mix(in srgb,var(--radar-glow2) 40%,transparent); }

@media (prefers-reduced-motion: no-preference){
  /* Дыхание ауры и центрального свечения */
  .cmp-radar-aura{ transform-box:fill-box; transform-origin:center; animation:cmpRadarBreath 7s ease-in-out infinite; }
  .cmp-radar-plot::before{ animation:cmpRadarGlow 7s ease-in-out infinite; }
  @keyframes cmpRadarBreath{ 0%,100%{ opacity:.9; } 50%{ opacity:1; transform:scale(1.05); } }
  @keyframes cmpRadarGlow{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
  /* Медленное вращение орбитальных колец в разные стороны */
  .cmp-radar-ring--1{ animation:cmpRadarSpin 42s linear infinite; }
  .cmp-radar-ring--2{ animation:cmpRadarSpinRev 60s linear infinite; }
  @keyframes cmpRadarSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  @keyframes cmpRadarSpinRev{ to{ transform:translate(-50%,-50%) rotate(-360deg); } }
  /* Entrance: диаграмма проявляется масштабом из центра, подписи — следом */
  .cmp-radar.anim-in .cmp-radar-svg{ animation:cmpRadarDrawIn .7s cubic-bezier(.2,0,0,1) both; }
  .cmp-radar.anim-in .cmp-radar-axis{ animation:cmpRadarLabelIn .5s ease .34s both; }
  @keyframes cmpRadarDrawIn{
    from{ opacity:0; transform:translate(-50%,-50%) scale(.62); }
    to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  }
  @keyframes cmpRadarLabelIn{ from{ opacity:0; } to{ opacity:1; } }
}
/* Доступная таблица радара (скринридеры): визуально скрыта, но озвучивается */
/* sr-only для <table>: display:table игнорирует width:1px и тянет коробку по
   контенту (585px), расширяя scrollWidth → горизонтальный скролл на мобильном.
   Уводим за левый край — коробка off-screen, элемент остаётся в дереве доступности. */
.cmp-sr-only{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; padding:0; border:0;
  overflow:hidden; white-space:nowrap;
}

.cmp-horizon-grid--timeline{ align-items:stretch; }
.cmp-horizon-card{ overflow:hidden; }
.cmp-horizon-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
}
.cmp-horizon-card-head h3{ margin:0; }
.cmp-horizon-card-head > strong{
  flex:0 0 auto; max-width:48%; color:var(--cyan); font-family:var(--font-mono);
  font-size:.68rem; line-height:1.45; letter-spacing:.03em; text-align:right;
}
.cmp-horizon-timeline{
  position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:30px; padding-top:2px;
}
.cmp-horizon-rail{
  position:absolute; z-index:0; top:9px; left:16.666%; right:16.666%; height:4px;
  overflow:hidden; border-radius:var(--r-pill); background:var(--line);
}
.cmp-horizon-rail > span{
  display:block; width:0; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--volt));
  box-shadow:0 0 18px var(--cyan-a40);
}
.cmp-horizon-card--three .cmp-horizon-rail > span{ width:50%; }
.cmp-horizon-card--five .cmp-horizon-rail > span{ width:100%; }
.cmp-horizon-point{
  position:relative; z-index:1; min-width:0; padding:0 6px; text-align:center;
}
.cmp-horizon-dot{
  display:block; width:18px; height:18px; margin:0 auto 13px; border:4px solid var(--bg2);
  border-radius:50%; background:var(--text-faint); box-shadow:0 0 0 1px var(--line);
}
.cmp-horizon-point.is-fit .cmp-horizon-dot{
  background:var(--volt); box-shadow:0 0 0 1px var(--volt),0 0 18px var(--volt-a25);
}
.cmp-horizon-point.is-edge .cmp-horizon-dot{
  background:var(--orange); box-shadow:0 0 0 1px var(--orange),0 0 16px var(--orange-a25);
}
.cmp-horizon-point.is-fail .cmp-horizon-dot{
  background:var(--danger); box-shadow:0 0 0 1px var(--danger);
}
.cmp-horizon-year{
  display:block; color:var(--text-hi); font-family:var(--font-mono); font-size:.72rem;
}
.cmp-horizon-point strong{ display:block; margin-top:5px; color:var(--text-soft); font-size:.72rem; }
.cmp-horizon-point.is-fit strong{ color:var(--volt); }
.cmp-horizon-point.is-edge strong{ color:var(--orange); }
.cmp-horizon-point.is-fail strong{ color:var(--danger); }
.cmp-horizon-limit{
  margin:22px 0 0; padding:11px 12px; border-radius:var(--r-sm); background:var(--bg2);
  color:var(--text-soft); font-size:.74rem; line-height:1.45; text-wrap:pretty;
  box-shadow:inset 0 0 0 1px var(--line);
}

.cmp-upgrade{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-top:34px; padding:22px 24px; border-radius:var(--r-lg);
  background:var(--cyan-a08); box-shadow:inset 0 0 0 1px var(--cyan-a25);
}
.cmp-upgrade > div > span{ color:var(--cyan); font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; }
.cmp-upgrade h2{ margin:6px 0 0; color:var(--text-hi); font-size:1.1rem; text-wrap:balance; }
.cmp-upgrade p{ margin:7px 0 0; color:var(--text-soft); font-size:.86rem; line-height:1.5; text-wrap:pretty; }
.cmp-upgrade-form{ flex:0 0 auto; }
.cmp-upgrade-form button{
  min-height:44px; padding:0 18px; border:0; border-radius:var(--r-pill);
  background:var(--cyan); color:var(--cta-ink); font:700 .82rem var(--font-body);
  cursor:pointer; transition-property:transform,box-shadow; transition-duration:var(--dur-fast);
}
.cmp-upgrade-form button:hover{ box-shadow:var(--shadow-cta-hover); }
.cmp-upgrade-form button:active{ transform:scale(.96); }

.cmp-watchouts-grid article{ background:var(--bg2); }
.cmp-watchouts-grid p,.cmp-watchouts-grid li{ color:var(--text-soft); font-size:.84rem; line-height:1.55; text-wrap:pretty; }
.cmp-watchouts-grid ul{ margin:12px 0 0; padding-left:18px; }
/* Проактивные советы под задачу — акцентная карточка, отделяет их от предупреждений */
/* Проактивные советы под задачу — 3 карточки в ритме блока «Забота после покупки» */
.cmp-tips-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cmp-tip-card{
  position:relative; min-width:0; padding:22px; border-radius:var(--r-lg);
  background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-line);
}
.cmp-tip-card h3{ margin:0; color:var(--text-hi); font-size:1.02rem; line-height:1.35; text-wrap:balance; }
.cmp-tip-card p{ margin:10px 0 0; color:var(--text-soft); font-size:.85rem; line-height:1.6; text-wrap:pretty; }

.cmp-care-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.cmp-care-grid article{
  position:relative; min-width:0; padding:22px; overflow:hidden; border-radius:var(--r-lg);
  background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-line);
}
.cmp-care-grid h3{ margin:0; color:var(--text-hi); font-size:1rem; }
.cmp-care-grid p{ margin:9px 0 0; color:var(--text-soft); font-size:.8rem; line-height:1.6; text-wrap:pretty; }

.cmp-trust{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:34px;
  padding:clamp(24px,4vw,46px); border-radius:var(--r-xl);
  background:linear-gradient(125deg,var(--cyan-a10),var(--glass) 48%,var(--violet-a10));
  box-shadow:inset 0 0 0 1px var(--cyan-a25);
}
.cmp-trust-copy > span{ color:var(--cyan); font:700 .7rem var(--font-mono); letter-spacing:.09em; text-transform:uppercase; }
.cmp-trust h2{ margin:10px 0 0; color:var(--text-hi); font-size:clamp(1.55rem,3vw,2.5rem); text-wrap:balance; }
.cmp-trust-copy p{ margin:15px 0 0; max-width:720px; color:var(--text-soft); font-size:.88rem; line-height:1.65; text-wrap:pretty; }
.cmp-trust-points{ display:grid; align-content:center; gap:10px; margin:0; padding:0; list-style:none; }
.cmp-trust-points li{ padding:13px 15px; border-radius:var(--r-md); background:var(--black-a18); box-shadow:inset 0 0 0 1px var(--line); }
.cmp-trust-points strong{ display:block; color:var(--text-hi); font-size:.8rem; }
.cmp-trust-points span{ display:block; margin-top:4px; color:var(--text-soft); font-size:.74rem; line-height:1.45; }

.cmp-faq-list{ display:grid; gap:9px; margin-top:22px; }
.cmp-faq-list details{ border-radius:var(--r-md); background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-line); }
.cmp-faq-list summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:58px; padding:15px 18px; color:var(--text-hi); font-weight:700; font-size:.87rem;
  cursor:pointer; list-style:none;
  /* радиус плашки повторён явно: кольцо фокуса рисуется по форме summary,
     а наследовать радиус <details> нельзя — см. 01-base/accessibility.css */
  border-radius:var(--r-md);
}
.cmp-faq-list summary::-webkit-details-marker{ display:none; }
.cmp-faq-list summary::after{ content:"+"; flex:0 0 auto; color:var(--cyan); font:500 1.3rem var(--font-mono); }
.cmp-faq-list details[open] summary::after{ content:"−"; }
.cmp-faq-list details p{ margin:0; padding:0 18px 18px; max-width:940px; color:var(--text-soft); font-size:.82rem; line-height:1.6; text-wrap:pretty; }

.cmp-upgrade button:focus-visible{
  outline:3px solid var(--focus-ring-color); outline-offset:3px;
}

@media (max-width:900px){
  .cmp-radar-layout{ grid-template-columns:1fr; }
  .cmp-trust{ grid-template-columns:1fr; }
  .cmp-care-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .cmp-head-row{ margin-bottom:16px; }
  .cmp-title{ font-size:clamp(1.9rem,11vw,2.65rem); }
  .cmp-advice-grid,.cmp-horizon-grid,.cmp-watchouts-grid,.cmp-tips-grid{ grid-template-columns:1fr; }
  .cmp-upgrade{ align-items:flex-start; flex-direction:column; }
  .cmp-upgrade-form,.cmp-upgrade-form button{ width:100%; }
  .cmp-horizon-card-head{ display:block; }
  .cmp-horizon-card-head > strong{ display:block; max-width:none; margin-top:7px; text-align:left; }
  .cmp-radar-layout{ padding:16px 12px; }
  .cmp-radar-plot{ max-width:340px; }
  .cmp-radar-axis-label{ font-size:.72rem; }
  .cmp-radar-model-name{ font-size:.95rem; }
  .cmp-config-principle{ align-items:flex-start; }
}
@media (max-width:480px){
  .cmp-page{ padding-top:80px; padding-left:14px; padding-right:14px; }
  .cmp-head-actions{ width:100%; margin-top:4px; }
  .cmp-share,.cmp-clear{ flex:1; justify-content:center; }
  .cmp-trust{ padding:22px 16px; }

  /* Плашка над текстом по центру: в узкой колонке ряд «иконка + текст» не читается */
  .cmp-config-principle{
    flex-direction:column; align-items:center; gap:10px; text-align:center;
  }

  /* Боковые подписи осей стоят на 93% ширины плота и вылезали за карточку:
     сужаем плот, освобождая поля под них */
  .cmp-radar-plot{ max-width:230px; }
  .cmp-radar-axis-label{ font-size:.7rem; }
}
@media (prefers-reduced-motion:reduce){
  .cmp-upgrade-form button{ transition:none; }
}

/* ═══ Приглашение зарегистрироваться (гость видит таблицу, разбор — после входа) ═══ */
.cmp-reg-invite{
  margin-top:clamp(28px,5vw,56px); padding:clamp(24px,4vw,44px);
  border-radius:var(--r-xl); text-align:center;
  background:linear-gradient(135deg,var(--cyan-a10),var(--glass) 55%,var(--violet-a10));
  box-shadow:inset 0 0 0 1px var(--cyan-a25),0 24px 64px var(--black-a18);
}
.cmp-reg-invite-eyebrow{
  color:var(--cyan); font:700 .72rem var(--font-mono);
  letter-spacing:.1em; text-transform:uppercase;
}
.cmp-reg-invite h2{
  margin:10px auto 0; max-width:24ch; color:var(--text-hi);
  font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.35rem);
  line-height:1.08; letter-spacing:-.025em; text-wrap:balance;
}
.cmp-reg-invite-lead{
  margin:14px auto 0; max-width:62ch; color:var(--text-soft);
  font-size:.96rem; line-height:1.6; text-wrap:pretty;
}
.cmp-reg-invite-points{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  margin:18px 0 0; padding:0; list-style:none;
}
.cmp-reg-invite-points li{ position:relative; padding-left:20px; color:var(--text); font-size:.86rem; }
.cmp-reg-invite-points li::before{ content:"✓"; position:absolute; left:0; color:var(--cyan); font-weight:700; }
.cmp-reg-invite-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); margin-top:24px; }

/* Ниже базового правила намеренно: медиа-запрос не добавляет специфичности */
@media (max-width:480px){
  /* «Зарегистрируйтесь,» шире 244px — уменьшаем, чтобы слово не рвалось посередине */
  .cmp-reg-invite h2{ font-size:1.15rem; overflow-wrap:break-word; }
  .cmp-reg-invite-lead{ font-size:.88rem; }
}