/* grade-table.css — интерфейс таблицы «Сравнение комплектаций» на сводке модели.
   Парный файл: js/grade-table.js. Базовые стили самой таблицы (.grade-comparison-table,
   .gct-photo, .gct-chip, липкие шапка/колонка) — в get_grade_table_styles() (api_catalog_2.php).
   Тёмная тема — через html[data-theme="dark"], как и везде на сайте. */

:root {
    --gct-accent: #1e4fe0;
    --gct-accent-2: #6c5ce7;
    --gct-ink: #12131a;
    --gct-ink-2: #3a3f4b;
    --gct-muted: #6b7280;
    --gct-faint: #9aa0ac;
    --gct-line: #e3e6ec;
    --gct-line-2: #eef0f4;
    --gct-surface: #ffffff;
    --gct-surface-2: #f6f7fa;
    --gct-surface-3: #fbfcfe;
    --gct-good: #10b981;
    --gct-bad: #ef4444;
    --gct-warn: #f59e0b;
    --gct-mark: #fff3a3;
}
html[data-theme="dark"] {
    --gct-accent: #5b8cff;
    --gct-accent-2: #8b6bff;
    --gct-ink: #eef1f6;
    --gct-ink-2: #c4cad6;
    --gct-muted: #9aa3b2;
    --gct-faint: #6b7482;
    --gct-line: #262b36;
    --gct-line-2: #1f2430;
    --gct-surface: #171b24;
    --gct-surface-2: #1c212b;
    --gct-surface-3: #12151d;
    --gct-mark: #5a4a00;
}

/* Страховка: у наших блоков display задан классом, а [hidden] из UA-стилей слабее */
.gct [hidden], .gct-floatbar[hidden], .gct-cards[hidden], .gct-facets[hidden] { display: none !important; }
/* ============ Обёртка: full-bleed полоса, контент по центру ============ */
/* Сама .grade-comparison-table-wrap.gct растянута на 100vw (get_grade_table_styles); внутри
   центрируем до разумного максимума — на широком экране входят все 12 колонок. */
.gct-inner { max-width: 1900px; margin: 0 auto; padding: 0 clamp(16px, 2vw, 40px); }
html[data-theme="dark"] .grade-comparison-table-wrap.gct { background: var(--gct-surface-3); border-color: var(--gct-line-2); }

/* ============ Панель инструментов ============ */
/* Одна строка [поиск][Сортировка ▾][Фильтры n][⚙], липкая под шапкой сайта (--gct-top ставит
   js/grade-table.js). Все контролы одной высоты (36px), один акцентный цвет. */
.gct-toolbar {
    position: sticky; top: var(--gct-top, 78px); z-index: 25;
    display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 10px 0 8px;
    background: #fbfcfe; box-shadow: 0 1px 0 var(--gct-line);
}
html[data-theme="dark"] .gct-toolbar { background: var(--gct-surface-3); }
.gct-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gct-title { flex: none; margin: 0 10px 0 0 !important; font-size: 18px !important; line-height: 1.2; }

.gct-search {
    position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 380px;
    padding: 0 12px; height: 36px; border-radius: 10px; border: 1px solid var(--gct-line); background: var(--gct-surface);
    transition: border-color .18s, box-shadow .18s;
}
.gct-search:focus-within { border-color: var(--gct-accent); box-shadow: 0 0 0 3px rgba(30,79,224,.12); }
.gct-search > i { color: var(--gct-faint); font-size: 13px; }
.gct-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; color: var(--gct-ink); }
.gct-search-input::placeholder { color: var(--gct-faint); }
.gct-search-input::-webkit-search-cancel-button { display: none; }
.gct-search-clear { border: 0; background: var(--gct-line-2); color: var(--gct-muted); width: 22px; height: 22px; border-radius: 50%; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gct-search-clear:hover { background: var(--gct-accent); color: #fff; }

.gct-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 10px;
    border: 1px solid var(--gct-line); background: var(--gct-surface); color: var(--gct-ink-2);
    font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.gct-btn > i { font-size: 12px; color: var(--gct-muted); }
.gct-btn:hover, .gct-btn.is-open { border-color: var(--gct-accent); color: var(--gct-accent); }
.gct-btn:hover > i, .gct-btn.is-open > i { color: var(--gct-accent); }
.gct-btn.has-value, .gct-btn.has-filters { border-color: var(--gct-accent); color: var(--gct-accent); background: rgba(30,79,224,.06); }
.gct-btn.has-value > i, .gct-btn.has-filters > i { color: var(--gct-accent); }
.gct-btn-icon { width: 36px; padding: 0; justify-content: center; }
.gct-btn-icon > i { font-size: 14px; }
.gct-caret { font-size: 10px !important; margin-left: -2px; transition: transform .2s; }
.gct-btn.is-open .gct-caret { transform: rotate(180deg); }
.gct-facets-count { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--gct-accent); color: #fff; font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.gct-link { border: 0; background: transparent; color: var(--gct-accent); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; }
.gct-link:hover { text-decoration: underline; }
.gct-menu { position: relative; }
.gct-settings { margin-left: auto; }

/* Поповеры: меню сортировки и настройки */
.gct-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 230px; padding: 6px;
    border-radius: 14px; border: 1px solid var(--gct-line); background: var(--gct-surface);
    box-shadow: 0 24px 48px -22px rgba(16,24,40,.45); animation: gct-fade .15s ease;
}
.gct-sort .gct-pop { left: 0; right: auto; }
@keyframes gct-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gct-pop-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
    background: transparent; color: var(--gct-ink-2); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.gct-pop-item > i:first-child { width: 16px; text-align: center; color: var(--gct-muted); font-size: 12px; }
.gct-pop-item span { flex: 1; }
.gct-pop-check { font-size: 11px; color: var(--gct-accent); opacity: 0; }
.gct-pop-item:hover { background: var(--gct-surface-2); color: var(--gct-accent); }
.gct-pop-item.is-active { color: var(--gct-accent); background: rgba(30,79,224,.06); }
.gct-pop-item.is-active .gct-pop-check { opacity: 1; }
.gct-settings-panel { min-width: 300px; padding: 10px; }
.gct-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 6px; margin: 0; font-size: 13px; }
.gct-set-label { font-weight: 700; color: var(--gct-ink-2); display: inline-flex; align-items: center; gap: 7px; }
.gct-set-label i { color: var(--gct-accent); font-size: 12px; }
.gct-set-switch { cursor: pointer; }
.gct-set-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.gct-switch-ui { flex: none; width: 34px; height: 18px; border-radius: 999px; background: #cfd4dd; position: relative; transition: background .18s; }
.gct-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s; }
.gct-set-switch input:checked + .gct-switch-ui { background: var(--gct-accent); }
.gct-set-switch input:checked + .gct-switch-ui::after { transform: translateX(16px); }
.gct-set-block { padding: 8px 6px 4px; margin-top: 4px; border-top: 1px solid var(--gct-line); }
.gct-set-title { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gct-faint); }
.gct-set-title i { color: var(--gct-accent); }
.gct-set-actions { display: flex; gap: 6px; }
.gct-set-actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 1px solid var(--gct-line); border-radius: 9px; background: transparent; color: var(--gct-ink-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.gct-set-actions button:hover { border-color: var(--gct-accent); color: var(--gct-accent); }
.gct-columns-inner .gct-columns-presets { display: flex; gap: 4px; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--gct-line); }
.gct-columns-inner .gct-columns-presets button { flex: 1; padding: 6px 4px; border: 1px solid var(--gct-line); border-radius: 8px; background: transparent; color: var(--gct-ink-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.gct-columns-inner .gct-columns-presets button:hover, .gct-columns-inner .gct-columns-presets button.is-active { border-color: var(--gct-accent); color: var(--gct-accent); }
.gct-columns-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; max-height: 220px; overflow: auto; }
.gct-columns-inner .gct-columns-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 4px; border-radius: 7px; font-size: 12.5px; color: var(--gct-ink-2); cursor: pointer; }
.gct-columns-inner .gct-columns-row:hover { background: var(--gct-surface-2); }
.gct-columns-inner .form-check-input { margin: 0; float: none; flex: none; cursor: pointer; }

.gct-seg-toggle { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--gct-line-2); }
.gct-seg-toggle button {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent;
    color: var(--gct-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s;
}
.gct-seg-toggle button:hover { color: var(--gct-ink); }
.gct-seg-toggle button.is-active { background: var(--gct-surface); color: var(--gct-ink); box-shadow: 0 2px 8px -4px rgba(16,24,40,.5); }
/* !important — inline-стили сегмента (get_grade_table_styles) идут в документе позже и иначе перебивают */
.gct .gct-expert-only { display: none !important; }
.gct.gct-expert .gct-expert-only { display: flex !important; }

/* Активные фильтры — чипы с крестиком */
.gct-active { display: flex; flex-wrap: wrap; gap: 6px; }
.gct-achip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--gct-accent); background: rgba(30,79,224,.07); color: var(--gct-accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.gct-achip i { font-size: 10px; opacity: .7; }
.gct-achip:hover { background: var(--gct-accent); color: #fff; }

.gct-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--gct-muted); }
.gct-status b { color: var(--gct-ink); font-weight: 800; }
.gct-status-sep { opacity: .5; margin: 0 2px; }

/* ============ Шторка фильтров ============ */
.gct-drawer-backdrop { position: fixed; inset: 0; z-index: 1049; background: rgba(16,24,40,.35); animation: gct-fade .2s ease; }
.gct-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050; width: min(440px, 100%);
    display: flex; flex-direction: column; background: var(--gct-surface); box-shadow: -24px 0 60px -30px rgba(0,0,0,.5);
    animation: gct-slide .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes gct-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.gct-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gct-line); }
.gct-drawer-head b { font-family: 'Unbounded', sans-serif; font-size: 15px; color: var(--gct-ink); }
.gct-drawer-head b i { color: var(--gct-accent); margin-right: 6px; font-size: 13px; }
.gct-drawer-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--gct-line); background: transparent; color: var(--gct-muted); cursor: pointer; }
.gct-drawer-close:hover { border-color: var(--gct-accent); color: var(--gct-accent); }
.gct-drawer-body { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.gct-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--gct-line); background: var(--gct-surface-3); }
.gct-drawer-apply { border-radius: 10px; font-weight: 700; height: 36px; padding: 0 18px; white-space: nowrap; }
body.gct-drawer-open { overflow: hidden; }

.gct-segments { display: flex; flex-wrap: wrap; gap: 6px; }
.gct-segment {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--gct-line);
    background: var(--gct-surface); color: var(--gct-ink-2); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: border-color .18s, color .18s, background .18s;
}
.gct-segment i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--gct-line-2); color: var(--gct-muted); }
.gct-segment:hover { border-color: var(--gct-accent); color: var(--gct-accent); }
.gct-segment.is-active { background: var(--gct-accent); border-color: var(--gct-accent); color: #fff; }
.gct-segment.is-active i { background: rgba(255,255,255,.18); color: #fff; }

/* ============ Фиксированная копия шапки (горизонтальное переполнение) ============ */
.gct-ghost { position: fixed; z-index: 30; overflow: hidden; background: #f4f6fa; box-shadow: 0 10px 22px -14px rgba(16,24,40,.5); }
.gct-ghost-inner { overflow: hidden; }
.gct-ghost table { table-layout: fixed; border-collapse: collapse; margin: 0; }
.gct-ghost thead th { top: 0 !important; }
html[data-theme="dark"] .gct-ghost { background: #1c212b; }

/* Гистограмма — сворачиваемая секция */
.gct-hist-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gct-faint); cursor: pointer; }
.gct-hist-toggle > i:first-child { color: var(--gct-accent); }
.gct-hist-toggle[aria-expanded="false"] .gct-caret { transform: rotate(-90deg); }

/* ============ Фасетные фильтры ============ */
/* Внутри шторки — одной колонкой */
.gct-facets { display: flex; flex-direction: column; gap: 18px; }
.gct-facet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gct-faint); }
.gct-facet-val { font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 800; color: var(--gct-ink); text-transform: none; letter-spacing: 0; }
.gct-facet.is-active .gct-facet-val { color: var(--gct-accent); }
.gct-range { position: relative; height: 26px; }
.gct-range-track { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 999px; background: var(--gct-line); }
.gct-range-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gct-accent), var(--gct-accent-2)); }
.gct-range input[type="range"] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 26px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.gct-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 26px; }
.gct-range input[type="range"]::-moz-range-track { background: transparent; height: 26px; }
.gct-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--gct-surface); border: 2px solid var(--gct-accent); box-shadow: 0 2px 6px rgba(16,24,40,.25); cursor: grab; }
.gct-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--gct-surface); border: 2px solid var(--gct-accent); box-shadow: 0 2px 6px rgba(16,24,40,.25); cursor: grab; }
.gct-facet-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.gct-fchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gct-line); background: var(--gct-surface); color: var(--gct-ink-2); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.gct-fchip i { font-style: normal; font-size: 10.5px; opacity: .6; }
.gct-fchip:hover { border-color: var(--gct-accent); color: var(--gct-accent); }
.gct-fchip[aria-pressed="true"] { background: var(--gct-accent); border-color: var(--gct-accent); color: #fff; }
.gct-fchip[aria-pressed="true"] i { opacity: .85; }
.gct-fchip-extra { display: none; }
.gct-facet-chipset.is-open .gct-fchip-extra { display: inline-flex; }
.gct-fchip-more { border-style: dashed; color: var(--gct-accent); }
.gct-facet-actions { display: flex; align-items: flex-end; }

/* ============ Строки таблицы ============ */
.gct .grade-comparison-table td { vertical-align: middle; }
.gct-name { display: flex; align-items: flex-start; gap: 8px; }
.gct-name-body { flex: 1; min-width: 0; }
.gct-name .grade-link { font-family: 'Unbounded', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--gct-accent); text-decoration: none; overflow-wrap: anywhere; }
.gct-name .grade-link:hover { text-decoration: underline; }
.gct-name mark { background: var(--gct-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.gct-name-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; }
.gct-name-group { color: var(--gct-faint); }
.gct-name-count { color: var(--gct-muted); text-decoration: none; white-space: nowrap; }
.gct-name-count i { font-size: 9px; }
.gct-name-count:hover { color: var(--gct-accent); }
.gct-expand, .gct-pin {
    flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--gct-line); background: var(--gct-surface);
    color: var(--gct-muted); font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s, background .15s, transform .2s;
}
.gct-expand:hover, .gct-pin:hover { border-color: var(--gct-accent); color: var(--gct-accent); }
.gct-expand i { transition: transform .2s ease; }
.gct-expand[aria-expanded="true"] i, tr.is-open .gct-expand i { transform: rotate(90deg); }
.gct-pin[aria-pressed="true"] { background: var(--gct-accent); border-color: var(--gct-accent); color: #fff; }
.gct-pin i { transform: rotate(35deg); }
.gct-pin[aria-pressed="true"] i { transform: none; }
tr.is-pinned td { background: rgba(30,79,224,.05) !important; }
tr.is-pinned .grade-name { box-shadow: inset 3px 0 0 var(--gct-accent); }

.gct-num { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--gct-ink); white-space: nowrap; }
.gct-muted { color: var(--gct-faint); }
.gct-cell { position: relative; }
.gct-price { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.gct-price a { color: var(--gct-ink); text-decoration: none; border-bottom: 1px dashed rgba(30,79,224,.4); }
.gct-price a:hover { color: var(--gct-accent); }
.gct-dash { margin: 0 4px; color: var(--gct-faint); }
.gct-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gct-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.gct-badge.is-price { background: #fee2e2; color: #b91c1c; }
.gct-badge.is-power { background: #fef3c7; color: #b45309; }
.gct-badge.is-mileage { background: #d1fae5; color: #047857; }
.gct-badge.is-popular { background: #dbeafe; color: #1d4ed8; }
html[data-theme="dark"] .gct-badge.is-price { background: rgba(239,68,68,.18); color: #fca5a5; }
html[data-theme="dark"] .gct-badge.is-power { background: rgba(245,158,11,.18); color: #fcd34d; }
html[data-theme="dark"] .gct-badge.is-mileage { background: rgba(16,185,129,.18); color: #6ee7b7; }
html[data-theme="dark"] .gct-badge.is-popular { background: rgba(59,130,246,.18); color: #93c5fd; }

.gct-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gct-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: var(--gct-line-2); color: var(--gct-ink-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.gct-tag i { font-style: normal; font-weight: 600; color: var(--gct-faint); font-size: 10.5px; }
.gct-tag-more { background: transparent; border: 1px dashed var(--gct-line); color: var(--gct-accent); cursor: pointer; }
.gct-tag-more:hover { border-color: var(--gct-accent); }
.gct-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 170px; }
.gct-colors .color-dot { width: 20px !important; height: 20px !important; margin: 1px !important; }
.gct-colors.is-all { max-width: none; }
.gct-col-value { display: none; }
.gct-expert .gct-col-value { display: table-cell; }

/* Полоски и тепловая раскраска — только в экспертном режиме */
.gct-bar { display: none; position: absolute; left: -8px; right: -8px; bottom: -8px; height: 3px; pointer-events: none; }
.gct-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: linear-gradient(90deg, var(--gct-accent), var(--gct-accent-2)); border-radius: 0 3px 3px 0; opacity: .8; }
.gct-expert .gct-bar { display: block; }
.gct-expert tr[data-heat="0"] td[data-field="price"] { background: rgba(16,185,129,.16); }
.gct-expert tr[data-heat="1"] td[data-field="price"] { background: rgba(16,185,129,.08); }
.gct-expert tr[data-heat="3"] td[data-field="price"] { background: rgba(239,68,68,.07); }
.gct-expert tr[data-heat="4"] td[data-field="price"] { background: rgba(239,68,68,.15); }

/* Группы (варианты одной базовой комплектации) */
tr.gct-group td { background: var(--gct-surface-2) !important; border-top: 2px solid var(--gct-line); cursor: pointer; }
tr.gct-group.is-open td { border-bottom: 1px solid var(--gct-line); }
tr.gct-group:hover td { background: var(--gct-line-2) !important; }
.gct-group-title { font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 800; color: var(--gct-ink); }
.gct-group-name .gct-name-sub { margin-top: 3px; }
.gct-group-photos { display: flex; gap: 4px; }
.gct-group-photos img { width: 48px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gct-line); }
tr.is-in-group .grade-name { box-shadow: inset 3px 0 0 var(--gct-line); }
tr.is-in-group .gct-name { padding-left: 8px; }

/* Деталь строки */
tr.gct-detail td { background: var(--gct-surface-3) !important; padding: 0 !important; border-top: 0 !important; }
.gct-detail-inner { padding: 16px 18px 14px; position: sticky; left: 0; max-width: var(--gct-scroller-w, calc(100vw - 80px)); box-sizing: border-box; }
.gct-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.gct-d-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gct-faint); margin-bottom: 8px; }
.gct-d-title i { color: var(--gct-accent); margin-right: 4px; }
.gct-d-ages-list { display: flex; flex-direction: column; gap: 5px; }
.gct-d-age { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding-bottom: 5px; border-bottom: 1px dashed var(--gct-line); }
.gct-d-age-label { color: var(--gct-muted); font-weight: 600; }
.gct-d-age-label i { font-style: normal; color: var(--gct-faint); }
.gct-d-age-val { font-family: 'Manrope', sans-serif; font-weight: 700; white-space: nowrap; }
.gct-d-age-val a { color: var(--gct-ink); text-decoration: none; border-bottom: 1px dashed rgba(30,79,224,.4); }
.gct-d-strip { display: flex; gap: 6px; overflow-x: auto; }
.gct-d-strip img { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gct-line); flex: none; }
.gct-detail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gct-line); }
.gct-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gct-muted); }
.gct-rating i { color: var(--gct-line); font-size: 11px; }
.gct-rating i.is-on { color: var(--gct-warn); }
.gct-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.gct-detail-actions .btn { border-radius: 9px; font-weight: 700; font-size: 12.5px; }

/* Итоговая строка */
.gct-agg td { background: var(--gct-surface-2) !important; position: sticky; bottom: 0; z-index: 3; border-top: 2px solid var(--gct-accent) !important; font-size: 12px; vertical-align: top; }
.gct-agg td.grade-name { z-index: 4; }
.gct-agg-label { display: block; font-family: 'Unbounded', sans-serif; font-size: 11.5px; color: var(--gct-ink); }
.gct-agg-sub { display: block; font-size: 11px; color: var(--gct-muted); margin-top: 2px; font-weight: 500; }
.gct-agg-stat { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--gct-ink); white-space: nowrap; line-height: 1.35; }
.gct-agg-stat i { font-style: normal; font-weight: 600; color: var(--gct-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.gct-agg-stat.is-med { color: var(--gct-accent); }

/* Экспертная панель: гистограмма */
.gct-expert-panel { margin: 0 0 14px; padding: 14px 18px 12px; border-radius: 16px; border: 1px solid var(--gct-line); background: var(--gct-surface-3); }
.gct-hist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.gct-hist-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gct-faint); }
.gct-hist-title i { color: var(--gct-accent); margin-right: 4px; }
.gct-hist-hint { font-size: 12px; color: var(--gct-faint); margin-left: auto; }
.gct-hist-reset { border: 0; background: transparent; color: var(--gct-accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.gct-hist { display: flex; align-items: flex-end; gap: 3px; height: 86px; cursor: crosshair; user-select: none; touch-action: none; }
.gct-hist-bin { position: relative; flex: 1; height: 100%; border-radius: 4px 4px 0 0; }
.gct-hist-bin:hover { background: rgba(30,79,224,.06); }
.gct-hist-all, .gct-hist-sel { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0; min-height: 1px; }
.gct-hist-all { background: var(--gct-line); }
.gct-hist-sel { background: linear-gradient(180deg, var(--gct-accent-2), var(--gct-accent)); }
.gct-hist-bin.is-sel .gct-hist-sel, .gct-hist-bin.is-brush .gct-hist-sel { background: linear-gradient(180deg, #ff8a3d, #ff5a1f); }
.gct-hist-bin.is-brush { background: rgba(255,90,31,.12); }
.gct-hist-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--gct-faint); font-family: 'Manrope', sans-serif; font-weight: 600; }

/* Плотность */
.gct-compact .grade-comparison-table td { padding: 5px 8px; font-size: 12.5px; }
.gct-compact .gct-photo { width: 92px; gap: 4px; }
.gct-compact .gct-photo-btn .car-image { height: 58px; }
.gct-compact .gct-photo-hover, .gct-compact .gct-photo-count { display: none; }
.gct-compact .gct-cmp { padding: 4px 6px; font-size: 11px; }
.gct-compact .gct-cmp span { display: none; }
.gct-compact .gct-badges { display: none; }
.gct-compact .gct-name-sub { display: none; }
.gct-compact .gct-colors { max-width: 120px; }
.gct-compact .gct-colors .color-dot { width: 14px !important; height: 14px !important; }
.gct-compact .gct-tag { padding: 1px 6px; font-size: 11px; }
.gct-compact .gct-expand, .gct-compact .gct-pin { width: 22px; height: 22px; }

/* Вид карточками */
.gct-view-cards .table-responsive, .gct-view-cards .gct-expert-panel { display: none; }
.gct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gct-view-cards .gct-cards { display: grid !important; }
.gct-card { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--gct-line); background: var(--gct-surface); overflow: hidden; box-shadow: 0 10px 26px -22px rgba(16,24,40,.5); transition: transform .2s, box-shadow .2s, border-color .2s; }
.gct-card:hover { transform: scale(1.03); box-shadow: 0 20px 38px -24px rgba(16,24,40,.6); }
.gct-card.is-pinned { border-color: var(--gct-accent); }
.gct-card-photo { position: relative; display: block; width: 100%; height: 150px; padding: 0; border: 0; background: var(--gct-line-2); cursor: pointer; overflow: hidden; }
.gct-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gct-card-photo:hover img { transform: scale(1.05); }
.gct-card-photo.is-empty { display: flex; align-items: center; justify-content: center; color: var(--gct-faint); font-size: 26px; cursor: default; }
.gct-card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.gct-card-head { display: flex; align-items: flex-start; gap: 8px; }
.gct-card-title { flex: 1; font-family: 'Unbounded', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--gct-ink); text-decoration: none; overflow-wrap: anywhere; }
.gct-card-title mark { background: var(--gct-mark); border-radius: 3px; }
.gct-card-price { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; color: var(--gct-ink); }
.gct-card-price a { color: inherit; text-decoration: none; }
.gct-card-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; color: var(--gct-muted); font-family: 'Manrope', sans-serif; font-weight: 600; }
.gct-card-specs i { color: var(--gct-faint); width: 14px; text-align: center; margin-right: 3px; }
.gct-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gct-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.gct-card-foot .gct-cmp { padding: 6px 9px; font-size: 12px; }
.gct-card-count { font-size: 12px; font-weight: 700; color: var(--gct-accent); text-decoration: none; white-space: nowrap; }
.gct-card-count i { font-size: 10px; }

/* Пусто / ещё */
.gct-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--gct-muted); border: 1px dashed var(--gct-line); border-radius: 16px; }
.gct-empty i { font-size: 30px; color: var(--gct-faint); }
.gct-empty strong { font-family: 'Unbounded', sans-serif; color: var(--gct-ink); }
.gct-more { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 0; }
.gct-more-btn { border-radius: 999px; padding: 10px 26px; font-weight: 700; }
.gct-more-hint { font-size: 12.5px; color: var(--gct-faint); }

/* Плавающая панель сравнения */
.gct-floatbar {
    position: fixed; left: 50%; bottom: 18px; z-index: 1040; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: 999px;
    background: var(--gct-ink); color: #fff; box-shadow: 0 20px 44px -16px rgba(0,0,0,.6);
    animation: gct-pop .25s cubic-bezier(.2,.8,.3,1.2);
}
html[data-theme="dark"] .gct-floatbar { background: #262b36; }
.gct-floatbar-text { font-size: 13.5px; font-weight: 600; }
.gct-floatbar-text b { font-family: 'Unbounded', sans-serif; }
.gct-floatbar-text { display: flex; flex-direction: column; line-height: 1.2; }
.gct-floatbar-text em { font-style: normal; font-size: 11.5px; font-weight: 500; opacity: .75; }
.gct-floatbar .btn:disabled { opacity: .45; }
.gct-floatbar .btn { border-radius: 999px; font-weight: 700; }
@keyframes gct-pop { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* Модалка сравнения: только отличия + дельты */
.cmp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--gct-surface-2); }
.cmp-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; color: var(--gct-ink); cursor: pointer; }
.cmp-switch input { margin: 0; width: 34px; height: 18px; appearance: none; border-radius: 999px; background: #cfd4dd; position: relative; cursor: pointer; transition: background .18s; }
.cmp-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s; }
.cmp-switch input:checked { background: var(--gct-accent); }
.cmp-switch input:checked::after { transform: translateX(16px); }
.cmp-tools-hint { font-size: 12px; color: var(--gct-muted); }
#comparisonContent.only-diff tr[data-diff="0"] { display: none; }
.cmp-delta { display: block; margin-top: 3px; font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 700; }
.cmp-delta.is-better { color: var(--gct-good); }
.cmp-delta.is-worse { color: var(--gct-bad); }

/* Печать: вся отфильтрованная таблица, без панелей */
@media print {
    .gct-toolbar, .gct-expert-panel, .gct-more, .gct-floatbar, .gct-drawer, .gct-drawer-backdrop, .gct-ghost, .gct-cards, .gct-photo, .gct-expand, .gct-pin, .gct-tag-more { display: none !important; }
    .gct .table-responsive { max-height: none !important; overflow: visible !important; }
    .gct .grade-comparison-table { font-size: 11px; }
    .gct .grade-comparison-table thead th { position: static !important; }
    .gct tr.gct-detail { display: none !important; }
}

@media (max-width: 900px) {
    .gct-title { width: 100%; margin-right: 0 !important; font-size: 16px !important; }
    .gct-search { max-width: none; }
    .gct-settings-panel { right: auto; left: 0; }
    .gct-sort .gct-pop { left: auto; right: 0; }
}
@media (max-width: 768px) {
    /* Шторка фильтров на телефоне — нижний лист */
    .gct-drawer { top: auto; width: 100%; max-height: 86vh; border-radius: 20px 20px 0 0; animation: gct-sheet .25s cubic-bezier(.2,.8,.3,1); }
    @keyframes gct-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    .gct-toolbar { top: var(--gct-top, 64px); padding-top: 8px; }
    /* На телефоне заголовок таблицы не нужен (сверху — заголовок страны), поиск и кнопки — в одну строку */
    .gct-title { display: none; }
    .gct-search { flex: 1 1 120px; }
    .gct-sort-label { display: none; }
    .gct-facets-btn > span:not(.gct-facets-count) { display: none; }
}

/* Гость: одна строка + пейволл, фильтровать нечего */
.gct-guest .gct-sort, .gct-guest .gct-facets-btn, .gct-guest .gct-more, .gct-guest .gct-active, .gct-guest .gct-groups-toggle, .gct-guest .gct-drawer, .gct-guest .gct-drawer-backdrop { display: none !important; }

/* Пейволл в виде карточек (мобильные) */
.gct-card-paywall { grid-column: 1 / -1; padding: 0; border-style: dashed; }
.gct-card-paywall .gct-paywall { position: static; width: 100%; flex-wrap: wrap; }
.gct-card-paywall .gct-paywall-btn { margin-left: 0; }

/* Плавающая горизонтальная прокрутка (таблица шире окна, настоящая полоса — далеко внизу) */
.gct-hscroll { position: fixed; bottom: 0; z-index: 30; height: 14px; overflow-x: auto; overflow-y: hidden; background: rgba(251,252,254,.9); border-top: 1px solid var(--gct-line); }
.gct-hscroll-inner { height: 1px; }
.gct-hscroll::-webkit-scrollbar { height: 10px; }
.gct-hscroll::-webkit-scrollbar-thumb { background: var(--gct-faint); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.gct-hscroll::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] .gct-hscroll { background: rgba(23,27,36,.9); }

/* Липкая панель инструментов перекрывает и поля .gct-inner до краёв окна */
.gct-toolbar { isolation: isolate; }
.gct-toolbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: inherit; box-shadow: inherit; z-index: -1; }

/* ---- телефон: меню сортировки/настроек — нижние листы, карточки по одной/две, фото целиком ---- */
.gct-mobile-only { display: none; }
@media (max-width: 768px) {
    .gct-mobile-only { display: flex; }
    .gct-desktop-only { display: none !important; }
    .gct-pop, .gct-sort .gct-pop, .gct-settings-panel {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1051; min-width: 0;
        border-radius: 20px 20px 0 0; max-height: 82vh; overflow: auto;
        padding: 18px 12px calc(12px + env(safe-area-inset-bottom, 0px)); animation: gct-sheet .25s cubic-bezier(.2,.8,.3,1);
    }
    .gct-pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gct-line); margin: -8px auto 12px; }
    .gct-pop-item { padding: 12px 12px; font-size: 15px; }
    .gct-set-row { padding: 10px 6px; font-size: 14.5px; }
    .gct-seg-toggle button { padding: 8px 12px; font-size: 13.5px; }
    body.gct-pop-open { overflow: hidden; }
    /* фото комплектации целиком, без обрезки (кадры 4:3 с площадок) */
    .gct-card-photo { height: auto; aspect-ratio: 4 / 3; }
    .gct-card-photo img { object-fit: contain; background: var(--gct-line-2); }
    /* две карточки в ряд */
    .gct-cards-grid .gct-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .gct-cards-grid .gct-card { border-radius: 12px; }
    .gct-cards-grid .gct-card-photo { aspect-ratio: 4 / 3; }
    .gct-cards-grid .gct-card-body { padding: 9px 10px 10px; gap: 5px; }
    .gct-cards-grid .gct-card-title { font-size: 11.5px; }
    .gct-cards-grid .gct-card-price { font-size: 13px; }
    .gct-cards-grid .gct-card-specs { grid-template-columns: 1fr; gap: 2px; font-size: 11px; }
    .gct-cards-grid .gct-card-specs span:nth-child(n + 3) { display: none; }
    .gct-cards-grid .gct-card-tags, .gct-cards-grid .gct-pin { display: none; }
    .gct-cards-grid .gct-card-foot { flex-direction: column; align-items: stretch; gap: 6px; }
    .gct-cards-grid .gct-card-foot .gct-cmp { justify-content: center; }
    .gct-cards-grid .gct-card-count { text-align: center; }
    .gct-cards-grid .gct-card-paywall { grid-column: 1 / -1; }
}
/* портал для меню на телефоне (см. gctPortal() в grade-table.js) */
.gct-portal { position: fixed; inset: 0; z-index: 1060; }
.gct-portal-back { position: absolute; inset: 0; background: rgba(16,24,40,.4); }
.gct-portal .gct-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1; min-width: 0; border-radius: 20px 20px 0 0; max-height: 82vh; overflow: auto; padding: 18px 12px calc(12px + env(safe-area-inset-bottom, 0px)); animation: gct-sheet .25s cubic-bezier(.2,.8,.3,1); display: block; }
.gct-portal .gct-pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gct-line); margin: -8px auto 12px; }
.gct-portal .gct-pop-item { padding: 12px; font-size: 15px; }
.gct-portal .gct-set-row { padding: 10px 6px; font-size: 14.5px; }
.gct-portal .gct-mobile-only { display: flex; }
.gct-portal .gct-desktop-only { display: none !important; }

/* ---- телефон: карточки-группы (аккордеон), бейдж цены, поля карточки, «Цифры» ---- */
.gct-card-group { cursor: pointer; }
.gct-card-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.gct-card-group-photos { display: flex; flex: none; }
.gct-card-group-photos img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; margin-left: -10px; border: 2px solid var(--gct-card, #fff); }
.gct-card-group-photos img:first-child { margin-left: 0; }
.gct-card-group-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gct-card-group-title { font-size: 14.5px; }
.gct-card-group-sub { font-size: 12px; color: var(--gct-muted, #7a838d); }
.gct-card-group-price { font-size: 13px; font-weight: 700; color: var(--gct-accent, #1e4fe0); }
.gct-card-group-caret { color: var(--gct-muted, #7a838d); transition: transform .2s; }
.gct-card-group.is-open .gct-card-group-caret { transform: rotate(180deg); }
.gct-card.is-in-group { margin-left: 14px; border-left: 3px solid var(--gct-accent, #1e4fe0); }
.gct-cards-grid .gct-card-group { grid-column: 1 / -1; }
.gct-cards-grid .gct-card.is-in-group { margin-left: 0; }
.gct-card-badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 7px; background: rgba(52,199,89,.14); color: #1f9d48; font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.gct-nospec-year .gct-card-specs span[title="Год"], .gct-nospec-power .gct-card-specs span[title="Мощность"], .gct-nospec-volume .gct-card-specs span[title="Объём"], .gct-nospec-mileage .gct-card-specs span[title="Пробег"], .gct-nospec-kpp .gct-card-tags { display: none; }
.gct-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gct-chip-row button { border: 1px solid var(--gct-line, #e4e8ef); background: transparent; color: inherit; border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 600; }
.gct-chip-row button.is-active { background: var(--gct-accent, #1e4fe0); border-color: var(--gct-accent, #1e4fe0); color: #fff; }
.gct-numbers-body { padding: 4px 0 8px; }
.gct-numbers-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.gct-numbers-head b { font-size: 16px; }
.gct-numbers-head span { font-size: 12.5px; color: var(--gct-muted, #7a838d); }
.gct-numbers-empty { padding: 20px 0; color: var(--gct-muted, #7a838d); text-align: center; }
.gct-num-block { margin: 0 0 14px; }
.gct-num-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--gct-muted, #7a838d); }
.gct-num-hint { font-size: 11.5px; color: var(--gct-muted, #7a838d); margin-bottom: 4px; }
.gct-num-row { display: grid; grid-template-columns: 92px 1fr 88px; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.gct-num-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gct-num-bar { height: 10px; border-radius: 5px; background: var(--gct-line, #e4e8ef); overflow: hidden; }
.gct-num-bar i { display: block; height: 100%; border-radius: 5px; background: var(--gct-accent, #1e4fe0); }
.gct-num-v { text-align: right; font-weight: 700; white-space: nowrap; }
.gct-num-v small { font-weight: 500; color: var(--gct-muted, #7a838d); }

/* Модалка сравнения: сводка над таблицей (window.GctCompareSummary в js/grade-table.js) */
.cmp-summary { margin: 0 0 16px; padding: 18px 18px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(30, 79, 224, .07), rgba(108, 92, 231, .07)); border: 1px solid rgba(30, 79, 224, .16); font-family: 'Manrope', sans-serif; }
html[data-theme="dark"] .cmp-summary { background: linear-gradient(135deg, rgba(91, 140, 255, .12), rgba(139, 107, 255, .1)); border-color: rgba(139, 160, 255, .25); }
.cmp-summary-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.cmp-summary-title { font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; color: var(--gct-ink); }
.cmp-summary-title i { color: var(--gct-accent-2); margin-right: 6px; }
.cmp-summary-sub { font-size: 12.5px; color: var(--gct-muted); }
.cmp-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cmp-sum-card { position: relative; padding: 12px 14px; border-radius: 14px; background: var(--gct-surface-1, #fff); border: 1px solid var(--gct-line); box-shadow: 0 6px 18px -12px rgba(20, 25, 40, .35); transition: transform .2s, box-shadow .2s; animation: cmp-sum-in .45s ease both; }
.cmp-sum-card:nth-child(2) { animation-delay: .06s; } .cmp-sum-card:nth-child(3) { animation-delay: .12s; } .cmp-sum-card:nth-child(4) { animation-delay: .18s; } .cmp-sum-card:nth-child(5) { animation-delay: .24s; }
.cmp-sum-card:hover { transform: scale(1.03); box-shadow: 0 14px 28px -14px rgba(30, 79, 224, .45); }
.cmp-sum-card.is-tie { border-style: dashed; }
.cmp-sum-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gct-muted); }
.cmp-sum-label i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; color: #fff; background: linear-gradient(135deg, var(--gct-accent), var(--gct-accent-2)); }
.cmp-sum-grade { display: block; margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--gct-ink); line-height: 1.25; }
.cmp-sum-grade small { font-size: 11px; font-weight: 700; color: var(--gct-muted); }
.cmp-sum-val { display: block; margin-top: 4px; font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; color: var(--gct-accent); }
.cmp-sum-note { display: block; margin-top: 4px; font-size: 11.5px; color: var(--gct-good); font-weight: 600; line-height: 1.35; }
.cmp-verdict { display: grid; grid-template-columns: 44px 1fr minmax(220px, .9fr); gap: 14px 16px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #1e4fe0, #6c5ce7); color: #fff; box-shadow: 0 16px 34px -18px rgba(30, 79, 224, .8); }
.cmp-verdict-crown { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 18px; color: #ffd166; animation: cmp-crown 2.4s ease-in-out infinite; }
.cmp-verdict-text > b { display: block; font-family: 'Unbounded', sans-serif; font-size: 14px; margin-bottom: 4px; }
.cmp-verdict-text p { margin: 0; font-size: 13px; line-height: 1.45; opacity: .92; }
.cmp-scores { display: grid; gap: 6px; }
.cmp-score { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; font-size: 12px; }
.cmp-score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; opacity: .9; }
.cmp-score.is-top .cmp-score-name { color: #ffd166; }
.cmp-score-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.cmp-score-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd166, #fff); width: 0; transition: width .9s cubic-bezier(.2, .8, .2, 1); animation: cmp-bar 1s ease both; }
.cmp-score-n { font-weight: 800; white-space: nowrap; }
@keyframes cmp-sum-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cmp-crown { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
@keyframes cmp-bar { from { width: 0 !important; } }
@media (max-width: 640px) {
    .cmp-summary { padding: 14px; }
    .cmp-verdict { grid-template-columns: 40px 1fr; }
    .cmp-scores { grid-column: 1 / -1; }
}

/* Модалка сравнения: достройка GctCompare (js/grade-table.js) — веса, шапка колонок, строки, панель */
.cmp-weights { margin-top: 12px; border-top: 1px dashed rgba(30, 79, 224, .25); padding-top: 10px; }
.cmp-weights summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--gct-ink); display: flex; align-items: center; gap: 8px; }
.cmp-weights summary::-webkit-details-marker { display: none; }
.cmp-weights summary i { color: var(--gct-accent-2); }
.cmp-weights summary span { font-weight: 600; color: var(--gct-muted); font-size: 12px; }
.cmp-weights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin-top: 10px; }
.cmp-weights-grid label { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--gct-ink-2); }
.cmp-weights-grid label b { font-size: 11px; color: var(--gct-accent); white-space: nowrap; }
.cmp-weights-grid input[type=range] { width: 100%; accent-color: var(--gct-accent); }
.cmp-hextra { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cmp-spark rect.on { fill: var(--gct-accent); opacity: .85; }
.cmp-spark rect.off { fill: var(--gct-line); }
.cmp-hbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-hbtn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--gct-line); background: var(--gct-surface); color: var(--gct-ink-2); font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.cmp-hbtn:hover { border-color: var(--gct-accent); color: var(--gct-accent); text-decoration: none; }
.cmp-hbtn.is-base { background: var(--gct-accent); border-color: var(--gct-accent); color: #fff; cursor: default; }
.cmp-muted { color: var(--gct-muted); font-weight: 500; }
.comparison-table td small { display: block; font-size: 11px; font-weight: 600; color: var(--gct-muted); margin-top: 2px; }
.comparison-table td strong small { display: inline; margin-left: 4px; }
.cmp-credit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--gct-muted); }
.cmp-credit input { width: 56px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--gct-line); background: var(--gct-surface); color: var(--gct-ink); font: inherit; font-size: 12px; font-weight: 700; }
.cmp-eq-link { font-size: 12px; font-weight: 700; color: var(--gct-accent); text-decoration: none; }
.cmp-eq-link:hover { text-decoration: underline; }
.cmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cmp-abtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--gct-line); background: var(--gct-surface); color: var(--gct-ink); font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .2s, transform .2s; }
.cmp-abtn:hover { border-color: var(--gct-accent); transform: scale(1.01); }
.cmp-abtn b { padding: 0 6px; border-radius: 999px; background: var(--gct-accent); color: #fff; font-size: 11px; }
.cmp-sets { position: relative; }
.cmp-sets-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; min-width: 300px; max-width: 420px; padding: 8px; border-radius: 12px; background: var(--gct-surface); border: 1px solid var(--gct-line); box-shadow: 0 20px 40px -20px rgba(20, 25, 40, .6); display: grid; gap: 4px; }
.cmp-sets-empty { padding: 8px 10px; font-size: 12.5px; color: var(--gct-muted); }
.cmp-set { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: stretch; }
.cmp-set > button:first-child { text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: var(--gct-surface-2); font: inherit; cursor: pointer; color: var(--gct-ink); }
.cmp-set > button:first-child:hover { background: rgba(30, 79, 224, .1); }
.cmp-set b { display: block; font-size: 13px; }
.cmp-set span { display: block; font-size: 11px; color: var(--gct-muted); }
.cmp-set-del { border: 0; background: transparent; color: var(--gct-muted); font-size: 18px; cursor: pointer; padding: 0 8px; }
.cmp-set-del:hover { color: var(--gct-bad); }
.cmp-client-toggle { margin-left: auto; }
/* режим для клиента: крупные цифры, без служебного */
#comparisonContent.cmp-client .cmp-delta, #comparisonContent.cmp-client .cmp-spark, #comparisonContent.cmp-client .cmp-hbtns, #comparisonContent.cmp-client .cmp-tools,
#comparisonContent.cmp-client .cmp-weights, #comparisonContent.cmp-client .cmp-scores, #comparisonContent.cmp-client .cmp-row-unit, #comparisonContent.cmp-client .cmp-row-eq,
#comparisonContent.cmp-client .cmp-abtn:not([data-cmp-print]) { display: none !important; }
#comparisonContent.cmp-client .comparison-table td, #comparisonContent.cmp-client .comparison-table th { font-size: 15px; padding: 12px 14px; }
#comparisonContent.cmp-client .comparison-table td.best-value { font-weight: 800; }
@media (max-width: 640px) {
    .cmp-weights-grid { grid-template-columns: 1fr; }
    .cmp-sets-list { left: auto; right: 0; }
    .cmp-client-toggle { margin-left: 0; }
}