/**
 * Дополнение к стилям сайта для карточки бренда.
 *
 * Здесь только то, чего нет в front_new/styles: блоки «No data»,
 * список роста ГЕО, выбор страны над графиком и мелкие правки.
 * Всё остальное берётся из profile.css и profile-chart.css.
 */

/* Подзаголовок карточки: источник данных под названием ключа */
.profileCardTitleSub {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: var(--color-default-soft);
}

/* Карточка без данных */
.noData {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    font-size: 15px;
    color: var(--color-default-thin);
}

/* Ссылка «Сохранить в закладки» */
.bookmark-wrap { margin-bottom: 20px; }
.bookmark-wrap a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--color-default);
    text-decoration: none;
}
.bookmark-wrap a:hover { color: var(--color-accent); }

.bookmark-icon {
    width: 20px;
    height: 20px;
    padding: 2px;
    border-radius: 4px;
    transition: background-color .15s ease;
}

.js-toggle-bookmark[aria-pressed="true"] .bookmark-icon {
    background-color: #000;
}

/* Выбор страны и периода над графиком */
.chartBlockTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.countrySelect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid var(--color-grid);
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-default);
    background: var(--color-white);
    cursor: pointer;
}
.countrySelect img { width: 18px; height: 18px; border-radius: 50%; }
.countrySelect:hover { border-color: var(--color-accent); }

/* ТОП-5 ГЕО по росту */
.growthList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}
.growthRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 2px;
    font-size: 17px;
    border-bottom: 1px solid var(--color-grid);
}
.growthRow:last-child { border-bottom: none; }
.growthName { color: var(--color-default); }
.growthValue { font-weight: 600; }
.growthValue.up { color: #17a34a; }
.growthValue.down { color: #d93838; }

/* Листание списка стран: видна одна страница, остальные скрыты.
   Ограничение высоты из profile.css здесь мешает — страницу показываем
   целиком, лишние строки и так скрыты. */
.profileCard--keyword .cardContent:not(.is-expanded) { max-height: none; }
.keywordList > li.is-hidden { display: none; }

/* Строка страны всегда одной высоты: длинное название обрезается
   многоточием, а не переносится на вторую строку — иначе карточки
   в ряду разъезжаются по высоте. */
.keywordList > li { min-height: 28px; }
.keywordList .value { white-space: nowrap; flex-shrink: 0; }
.keywordList .name { min-width: 0; flex: 1; }
.keywordList .name span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.listNav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 20px 4px;
}

/* Кнопки во всю ширину карточки, по половине на каждую —
   промахнуться мимо такой мишени трудно. */
.listNavBtn {
    flex: 1;
    min-width: 0;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-btn);
    /* Светло-фиолетовая подложка: на белой карточке кнопку должно быть
       видно, а тонкая рамка на ней теряется. */
    background: rgba(147, 99, 255, .12);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    color: var(--color-accent);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.listNavBtn:hover:not(:disabled) {
    background: var(--color-accent);
    color: var(--color-white);
}
.listNavBtn:disabled {
    background: var(--color-bg-soft);
    color: var(--color-default-thin);
    cursor: default;
}

/* Счётчик — отдельной строкой под кнопками */
.listNavCount {
    flex-basis: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--color-default-thin);
}

/* Строка страны всегда одной высоты: длинное название обрезается
   многоточием, а не переносится на вторую строку — иначе карточки
   в ряду разъезжаются по высоте. */
.keywordList > li { min-height: 28px; }
.keywordList .value { white-space: nowrap; flex-shrink: 0; }
.keywordList .name { min-width: 0; flex: 1; }
.keywordList .name span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



/* Высота области графика */
.chartSection .chartBlock .chartWrap { height: 230px; }

/* ---------- Мини-график под числом в Search Volume Global ----------
   Линия с заливкой, пунктир на уровне максимума и подписи по краям —
   без осей и сетки, чтобы не спорить с крупной цифрой над ним.
   Пик подписан над графиком, а не сбоку: сбоку он съедал ширину,
   из-за чего карточка не вставала в общую сетку. */
.sparkBox {
    position: relative;
    margin-top: 10px;
}
/* Chart.js сам выставляет размеры канваса по родителю, поэтому высоту
   задаёт обёртка — иначе график разрастается на всю карточку. */
.sparkCanvas { position: relative; height: 62px; }
.sparkCanvas canvas { position: absolute; inset: 0; display: block; }
.sparkAxis {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-default-thin);
}
.sparkMax {
    display: block;
    text-align: right;
    margin-bottom: 1px;
    font-size: 11px;
    line-height: 1;
    color: var(--color-default-thin);
}

/* Карточки Global и паспорт бренда идут подряд от левого края:
   колонки не растягиваются, поэтому между ними остаётся обычный отступ.
   Ширина и зазор — как у карточек Search Volume Local ниже, чтобы
   столбцы двух рядов стояли по одной сетке. */
.profileWrap .rightGrid { flex: 0 0 auto; width: auto; min-width: 0; }
.profileWrap .searchDetails { width: auto; }
.blocksWrap { grid-template-columns: repeat(2, 229px); gap: 22px; }
.searchCard { min-width: 0; }
.profileWrap .leftGrid { flex: 0 0 368px; }

/* Заголовок бренда вынесен над колонками */
.profileHead { margin-bottom: 22px; }
/* Заголовки колонок первого ряда стоят на одной линии */
.profileWrap .searchDetailsTitle { margin-bottom: 14px; }
.profileHead .profileTitle { margin-bottom: 10px; }
.profileWrap .searchDetails { margin-top: 0; }

@media (max-width: 900px) {
    .blocksWrap { grid-template-columns: 1fr; }
}

/* Подсказка мини-графика: живёт в разметке, а не внутри канваса */
.sparkTip {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -100%);
    margin-top: -10px;
    padding: 8px 12px;
    display: none;
    flex-direction: column;
    gap: 1px;
    white-space: nowrap;
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 6px 20px rgba(34, 34, 34, .14);
    pointer-events: none;
}
.sparkTip.is-visible { display: flex; }
.sparkTipDate { font-size: 11px; color: var(--color-default-soft); }
.sparkTipValue { font-size: 15px; font-weight: 600; color: var(--color-default); }

/* Блок Data по высоте равен карточкам Search Volume Global:
   колонки тянутся на высоту ряда, а список внутри встаёт по центру.
   Селектор с :not — чтобы не задеть ряд Search Volume Local ниже. */
.profileWrap:not(.profileWrap-js) { align-items: stretch; }
.profileWrap .leftGrid,
.profileWrap .rightGrid,
.profileWrap .searchDetails { display: flex; flex-direction: column; }
.profileWrap .leftGrid .infoCard { flex: 1; display: flex; }
.profileWrap .leftGrid .infoList {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------- Listings: уровень присутствия и ссылки на площадки ---------- */
.profileWrap:not(.profileWrap-js) { flex-wrap: wrap; }
.listingsGrid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 300px;
}
.listingsCard {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

/* Оценка словом: Low, Medium или High */
.listingsScore { display: flex; flex-direction: column; gap: 6px; }
.listingsValue {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-accent);
}
.listingsCaption {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-default-soft);
}

/* Шкала из десяти делений */
.listingsScale { display: flex; gap: 4px; }
.listingsScale span {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--color-tab-bg);
}
.listingsScale span.is-on { background: var(--color-accent); }

/* Цвет шкалы и слова зависит от уровня присутствия:
   мало — зелёный, средне — оранжевый графиков, много — тёмно-красный. */
.listingsCard[data-level="low"] .listingsScale span.is-on,
.listingsCard[data-level="low"] .listingsValue { color: #17a34a; background-color: #17a34a; }
.listingsCard[data-level="medium"] .listingsScale span.is-on,
.listingsCard[data-level="medium"] .listingsValue { color: #e09528; background-color: var(--color-chart-orange); }
.listingsCard[data-level="high"] .listingsScale span.is-on,
.listingsCard[data-level="high"] .listingsValue { color: #a32020; background-color: #a32020; }

/* У слова фон не нужен — только цвет текста */
.listingsValue { background-color: transparent !important; }

/* Перечисление площадок — тремя колонками */
.listingsLinksHead {
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-default-thin);
}
.listingsLinks {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 3;
    column-gap: 18px;
    font-size: 15px;
    line-height: 1.9;
}
.listingsLinks li { break-inside: avoid; }
.listingsLinks a { color: var(--color-accent); text-decoration: none; }
.listingsLinks a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .listingsLinks { columns: 2; }
}

/* Переключатель источника данных в заголовке Search Volume Global */
.searchDetailsTitle .sourceSwitch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 14px;
    font-size: 14px;
    font-weight: 400;
}
.sourceSwitch button {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--color-default-soft);
    cursor: pointer;
    transition: color .15s ease;
}
.sourceSwitch button:hover { color: var(--color-accent); }
.sourceSwitch button.is-active {
    color: var(--color-accent);
    font-weight: 500;
    cursor: default;
}
.sourceSep { color: var(--color-default-thin); }

/* ---------- ТОП-5 растущих ГЕО ---------- */
.growthSection .growthFilters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin: 18px 0 6px;
}
.growthFilter { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
/* Скрытый фильтр должен исчезать: атрибут hidden слабее, чем display выше */
.growthFilter[hidden] { display: none; }
.growthFilter > span { color: var(--color-default-soft); }
.growthFilter select {
    appearance: none;
    padding: 9px 38px 9px 18px;
    border: none;
    border-radius: var(--radius-btn);
    background-color: var(--color-bg-page);
    /* Стрелка — фиолетовый кружок справа, как в фильтрах сайта */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%239363FF'/%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 22px 22px;
    font-family: inherit;
    font-size: 15px;
    color: var(--color-default);
    cursor: pointer;
}

/* Таблица: зебра и скруглённые края строк — как в разделе брендов */
.growthTableWrap { width: 100%; overflow-x: auto; }
.growthTableWrap::-webkit-scrollbar { display: none; }
.growthTable {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.growthTable thead th {
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-default-thin);
    text-align: left;
    border: none;
}
.growthTable tbody td {
    padding: 13px 14px;
    font-size: 17px;
    color: var(--color-default);
    vertical-align: middle;
    border: none;
    background: var(--color-white);
}
.growthTable tbody tr:nth-child(odd) td { background: var(--color-bg-page-soft); }
.growthTable tbody td:first-child { border-radius: 25px 0 0 25px; }
.growthTable tbody td:last-child { border-radius: 0 25px 25px 0; }
.growthTable tbody a { color: var(--color-accent); text-decoration: none; }
.growthTable tbody a:hover { text-decoration: underline; }

/* Ячейка ГЕО: флаг, код страны и рост */
.geoCell { display: inline-flex; align-items: center; gap: 8px; }
.geoCell img { width: 22px; height: 22px; border-radius: 50%; }
.geoCode { color: var(--color-default); }
.geoGrowth { font-weight: 600; color: #17a34a; }
.geoGrowth.down { color: #d93838; }
.svCell { white-space: nowrap; color: var(--color-default-medium); }

/* Мини-график в строке таблицы ТОП-5 ГЕО */
.rowSpark {
    position: relative;
    width: 110px;
    height: 34px;
}
.rowSpark canvas { position: absolute; inset: 0; display: block; }

/* Колонка, по которой отсортирована таблица */
.growthTable td.is-sorted { font-weight: 600; }
.growthTable th.is-sorted { color: var(--color-default); }

/* Вкладки и поиск в блоке «Динамика по ГЕО и SERP» */
.growthTabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
}
.growthTab {
    padding: 9px 20px;
    border: none;
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    font-family: inherit;
    font-size: 15px;
    color: var(--color-default-medium);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.growthTab:hover:not(.is-active) { background: var(--color-tab-bg); }
.growthTab.is-active {
    background: var(--color-default);
    color: var(--color-white);
    cursor: default;
}
.growthSearch { margin-left: auto; }
.growthSearch input {
    width: 190px;
    padding: 9px 18px;
    border: 1px solid var(--color-grid);
    border-radius: var(--radius-btn);
    background: var(--color-white);
    font-family: inherit;
    font-size: 15px;
    color: var(--color-default);
}
.growthSearch input::placeholder { color: var(--color-default-thin); }
.growthSearch input:focus { outline: none; border-color: var(--color-accent); }

.growthEmpty {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--color-default-soft);
}

/* Сворачиваемый блок: заголовок работает переключателем */
.collapsible .collapseToggle {
    display: flex;
    /* .chartHeader на сайте выстроен в колонку — здесь нужен ряд.
       Стрелка стоит вплотную к заголовку, а не у края страницы,
       поэтому ряд прижат влево и ширина по содержимому. */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: fit-content;
    cursor: pointer;
    user-select: none;
}
.collapseIcon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    transition: transform .2s ease;
}
.collapsible:not(.is-collapsed) .collapseIcon { transform: rotate(180deg); }
.collapsible.is-collapsed .collapseBody { display: none; }
.collapsible .collapseToggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Кнопка подгрузки строк таблицы */
.growthMore {
    display: block;
    margin: 18px auto 2px;
    padding: 10px 30px;
    border: none;
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    font-family: inherit;
    font-size: 15px;
    color: var(--color-default);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.growthMore:hover { background: var(--color-default); color: var(--color-white); }

/* 3) Подзаголовок блока — некрупный, как подписи в карточке Data */
.chartSection .chartSubtitle {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-default-soft);
}

/* 5) Поиск по стране живёт в шапке первой колонки */
.geoHead { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.geoSearch {
    width: 100%;
    max-width: 210px;
    padding: 7px 14px;
    border: 1px solid var(--color-grid);
    border-radius: var(--radius-btn);
    background: var(--color-white);
    font-family: inherit;
    font-size: 14px;
    color: var(--color-default);
}
.geoSearch::placeholder { color: var(--color-default-thin); }
.geoSearch:focus { outline: none; border-color: var(--color-accent); }

/* 6) Кнопка подгрузки — фиолетовая */
.growthMore {
    background: var(--color-accent);
    color: var(--color-white);
}
.growthMore:hover { background: var(--color-accent-hover); color: var(--color-white); }

/* Первая колонка шире — в ней и заголовок, и поиск */
.growthTable th[data-col="geo"] { min-width: 230px; }

/* Вкладка «ТОП по объёму»: прирост и сила тренда не показываются */
.growthTable.is-volume [data-col="gain"],
.growthTable.is-volume [data-col="score"] { display: none; }

/* Колонка динамики показывается только в режиме объёма */
.growthTable:not(.is-volume) [data-col="dynamics"] { display: none; }
.growthTable.is-volume [data-col="dynamics"] { white-space: nowrap; }

/* Закладка на строке таблицы: контурная, в активном виде — залитая */
.growthTable [data-col="bookmark"] { white-space: nowrap; }
.rowBookmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-default);
    cursor: pointer;
}
.rowBookmark svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    transition: fill .15s ease, color .15s ease;
}
.rowBookmark:hover { color: var(--color-accent); }
.rowBookmark[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- Google Trends в первой строке ---------- */
.trendsGrid { display: flex; flex-direction: column; flex: 1; min-width: 300px; }
.trendsCard {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.trendsKeyword { font-size: 15px; color: var(--color-default-soft); }
.trendsCanvas { position: relative; height: 62px; }
.trendsCanvas canvas { position: absolute; inset: 0; display: block; }
.trendsMeta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--color-default-thin);
}

/* Listings переехал в отдельный блок под таблицей */
.listingsSection .listingsCard {
    margin-top: 16px;
    padding: 0;
    background: none;
    box-shadow: none;
}

/* Listings и Keyword ideas делят строку пополам */
.halfRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 33px;
}
.halfRow > .chartSection { margin-bottom: 0; }

/* Keyword ideas: два списка ключей */
.ideasGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 18px;
}
.ideasColTitle {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--color-default-thin);
}
.ideasList { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ideasList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--color-grid);
}
.ideasList li:last-child { border-bottom: none; }

.ideasList a,
.ideasList .keywordText {
    color: var(--color-accent);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ideasList a:hover { text-decoration: underline; }
.ideasList span { flex-shrink: 0; color: var(--color-default); }
.ideasMore {
    display: inline-block;
    margin-top: 12px;
    font-size: 15px;
    color: var(--color-accent);
    text-decoration: none;
}
.ideasMore:hover { text-decoration: underline; }

/* Пояснение по шкале в Google Trends */
.trendsHint { text-align: center; }

@media (max-width: 900px) {
    .halfRow, .ideasGrid { grid-template-columns: 1fr; }
}

/* Свёрнутый блок «Динамика за год» не должен тянуть на себя внимание:
   без карточки и с некрупным заголовком, пока он закрыт. */
.collapsible.is-collapsed {
    padding-top: 14px;
    padding-bottom: 14px;
    background: none;
    box-shadow: none;
}
.collapsible.is-collapsed .chartTitle {
    font-size: 19px;
    font-weight: 500;
    color: var(--color-default-medium);
}
.collapsible.is-collapsed .chartSubtitle { display: none; }
.collapsible.is-collapsed .collapseIcon {
    width: 22px;
    height: 22px;
    background-color: var(--color-tab-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23222' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 17px 17px;
}
.collapsible.is-collapsed .collapseToggle:hover .chartTitle { color: var(--color-accent); }

/* ---------- Parasite SEO ---------- */
.parasiteList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.parasiteItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 18px;
    border-radius: var(--radius-inner);
    background: var(--color-bg-page-soft);
    font-size: 16px;
}
.parasiteName { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.parasitePos {
    flex-shrink: 0;
    font-weight: 600;
    color: #17a34a;
}
/* Площадки, которых в ТОП-10 нет, приглушены */
.parasiteItem.is-absent { color: var(--color-default-thin); }
.parasiteItem.is-absent .parasitePos { color: var(--color-default-thin); font-weight: 400; }

/* В половинном блоке площадки встают в две колонки */
.halfRow .parasiteList { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .parasiteList,
    .halfRow .parasiteList { grid-template-columns: 1fr; }
}

/* ---------- Parasite SEO: таблица площадок и ГЕО ---------- */
/* В половине полосы таблице нужна компактная вёрстка */
.parasiteTable { min-width: 0; }
.parasiteTable .siteCell { width: 42%; font-weight: 500; }
.parasiteTable .geoListCell { display: table-cell; }

/* Найдена: флаг, код страны и позиция */
.geoTag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px 6px 2px 0;
    padding: 4px 10px 4px 5px;
    border-radius: var(--radius-btn);
    background: rgba(217, 56, 56, .1);
    font-size: 14px;
    color: #a32020;
    white-space: nowrap;
}
.geoTag img { width: 15px; height: 15px; border-radius: 50%; }
.parasiteTable tbody td { padding: 11px 14px; font-size: 16px; }
.geoTag b { font-weight: 600; }

/* Свободна — ниша не занята, это хорошо */
.geoFree {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    color: #17a34a;
}
.geoFree::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17a34a;
}

/* Занято — ниша уже кем-то занята */
.geoOccupied {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    color: #a32020;
}

.geoOccupied::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a32020;
}

/* ---------- Аффилиат-сайты: список доменов ---------- */
.affiliateList {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}
.affiliateList li {
    padding: 10px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--color-grid);
}
.affiliateList li:last-child { border-bottom: none; }

.affiliateList li.is-hidden {
    display: none;
}
.affiliateList a {
    color: var(--color-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.affiliateList a:hover { text-decoration: underline; }

.btn-show-all {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    background: none;
    border: 1px dashed var(--color-grid);
    border-radius: var(--radius-inner);
    color: var(--color-accent);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.btn-show-all:hover {
    background: rgba(147, 99, 255, 0.05);
    border-color: var(--color-accent);
}

.affiliateDownload {
    margin-top: 18px;
    padding: 10px 26px;
    background: var(--color-bg-page);
    color: var(--color-default);
    font-size: 15px;
    transition: background .15s ease, color .15s ease;
}
.affiliateDownload:hover { background: var(--color-default); color: var(--color-white); }

/* ---------- Пустые состояния ----------
   Приглушённый текст вместо данных: страница сохраняет структуру,
   поэтому видно, что именно появится, когда данные соберутся. */
.emptyState {
    padding: 16px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-default-thin);
}
/* На месте графика — пунктирная рамка, чтобы читалось как пустой блок */
.emptyState--chart {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 14px 18px;
    border: 1px dashed var(--color-grid);
    border-radius: var(--radius-inner);
    text-align: center;
}
.chartSection .emptyState--chart { min-height: 160px; }

/* Прочерк вместо значения */
.emptyValue { color: var(--color-default-thin); }
.searchCard.is-empty .value { color: var(--color-default-thin); }
.emptyNote {
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-default-thin);
}

/* Шкала без оценки */
.listingsCard[data-level="low"] .listingsValue { color: var(--color-default-thin); }

/* Пустая таблица ГЕО: картинка вместо данных, обесцвеченная,
   чтобы не спорить с остальной страницей */
.emptyMeme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 0 10px;
    text-align: center;
}
.emptyMeme img {
    width: 260px;
    max-width: 100%;
    border-radius: var(--radius-inner);
    filter: grayscale(1);
    opacity: .75;
}
.emptyMemeText {
    max-width: 440px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-default-thin);
}

/* Иллюстрация «нет данных»: нарисованный робот, серый и спокойный */
.brokenRobot {
    width: 170px;
    height: auto;
    stroke: var(--color-default-thin);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.brokenRobot .fillSoft {
    fill: var(--color-bg-hover);
    stroke: var(--color-default-thin);
}
.brokenRobot .stroke { stroke: var(--color-default-thin); fill: none; }
.emptyMeme .emptyMemeText { font-size: 16px; }