@charset "UTF-8";
/* putya: обнаружено на shared-admin-nav.css — без явного @charset браузер иногда брал не UTF-8
   для файла с кириллическими комментариями, из-за чего разбор CSS ломался и целые правила молча
   выпадали из стиля. Ставим тот же щит здесь на всякий случай (@charset обязан быть первым байтом
   файла). Дальше — оригинальный комментарий: "добавь все что есть на основной странице" — общая
   шапка/раскладка/переменные (:root,
   body, main, .main-container, карточки функций, info-cards, footer) теперь берутся из
   ../styles.css, подключённого в color-wheel.html. Здесь остаются только переопределения, которых
   там нет, и стили, специфичные для самого круга. */
:root {
    --border-color: rgba(255, 255, 255, .14); /* в styles.css --border-color: #fff — слишком ярко для рамок дропдауна */
    --accent: #2563eb;
}

/* putya: "другая ширина у главной секции, должна быть такая же" — на Монохромах/Тематиках/Похожих
   .main-container исторически 900px (background-finder.css/gift-page.css/themes.css), а тут
   наследуется дефолт 950px из styles.css. Сужаем только эту страницу до 900px, чтобы совпадало
   со всеми остальными тремя, вместо того чтобы менять публичную ширину других страниц. */
.main-container { max-width: 900px; overflow: visible; }

/* putya: "убери свечение поверх всего слева и справа экрана... сделай эффект на фоне за основным
   фреймом main-container что от него идет свечение синее и всё" — прошлые попытки двигали/растили
   те же два div'а (.glow-effect), которые тянулись через весь экран по краям, а не светились от
   самой карточки. box-shadow на самом main-container — свечение растёт прямо от его собственных
   границ со всех 4 сторон, без отдельных элементов, которые можно неправильно спозиционировать. */
/* Синее свечение карточки — в общем glow.css (один источник для всех страниц). */
.main-container .glow-effect { display: none !important; }

/* putya: "Основным будет вот эта диаграма... сделай красиво" — карточка круга чуть светлее
   основного фона main-container (surface-elevated, как у info-card), чтобы выделяться как главный
   блок страницы, а не сливаться с фоном. */
.cw-container {
    width: 100%;
    background: var(--surface-elevated);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cw-title { font-size: 20px; font-weight: 800; text-align: center; }

/* putya: "добавь легкое описание про MatchV2, про сам проект и тд перед cw-panel-home" — тот же
   .cw-about, что раньше убирали ("пока убери текст по нфт матч"), теперь снаружи cw-panel-home
   (над карточкой с диаграммой, не внутри неё), с текстом про MatchV2 вместо прежнего "NFT MATCH". */
/* putya: "сделай побольше текст и оформление, без доп. секции, просто оформление хорошее, и чтобы
   лучше читалось" — без рамки/фона: крупнее кегль, свободный интерлиньяж, первая фраза (что такое
   NFT Match) отдельной строкой и крупнее, ключевые слова акцентным синим. */
.cw-about {
    width: 100%; max-width: 760px; margin: 6px auto 4px; padding: 0 8px;
    font-size: 15px; line-height: 1.7; color: var(--text-secondary); text-align: center;
    letter-spacing: .01em;
}
.cw-about-lead { display: block; font-size: 17px; margin-bottom: 4px; color: var(--text-primary); }
.cw-about b { color: #7cb4ff; font-weight: 700; }
.cw-about-lead b { font-size: 18px; color: #fff; }
@media (max-width: 600px) {
    .cw-about { font-size: 14px; line-height: 1.6; }
    .cw-about-lead { font-size: 15.5px; }
    .cw-about-lead b { font-size: 16.5px; }
}
/* putya: "чтобы он был только на главном экране, сейчас он и на Похожих отображается" — .hidden
   в этом коде всегда парный класс (.cw-panel.hidden, .cw-tooltip.hidden и т.д.), голого
   ".hidden{display:none}" нигде нет — без этого правила classList.toggle('hidden') на .cw-about
   в setActiveTab ничего не скрывал. */
.cw-about.hidden { display: none; }
/* putya: "нижние блоки... только на главной странице" — те же парные правила для карточек внизу
   и футера index.html (переключаются в setActiveTab вместе с .cw-about). */
#home-info-cards.hidden { display: none; }
#home-footer-credits.hidden { display: none; }

/* putya: "все страницы... были адаптированы под главную страницу" — header-бар (иконки) и ряд
   вкладок вынесены в общий ../shared-admin-nav.css (подключён в color-wheel.html), чтобы те же
   стили переиспользовать на Монохромах/Тематиках/Похожих. Здесь остаётся только то, что специфично
   для этой страницы. */

.cw-panel.hidden { display: none; }

/* putya: "убери впринципе cw-panel-search" — в отличие от #cw-panel-home эта панель больше не
   отдельная приподнятая карточка (.cw-container даёт align-items:center, из-за чего дочерний
   .content-wrapper не сжимается до ширины родителя и вылезает за края по бокам симметрично —
   ровно баг с "вылезает за пределы при добавлении цвета"), а плоский блок прямо на фоне
   .main-container, как #cw-admin-tabs/.mode-switcher-container/.content-wrapper на Монохромах. */
#cw-panel-search { width: 100%; }

.custom-dropdown-container { position: relative; flex: 1 1 auto; }

.dropdown-header {
    display: flex; align-items: center; justify-content: space-between;
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
}
.dropdown-header.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

.dropdown-header .arrow {
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
    transition: transform .2s;
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-60%) rotate(45deg);
}
.dropdown-header.active .arrow { transform: translateY(-40%) rotate(225deg); }

.dropdown-header.with-search {
    padding: 0; display: flex; align-items: center; justify-content: space-between;
}
.dropdown-header .dropdown-search {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    box-sizing: border-box; background: transparent; border: none; outline: none;
    z-index: 2; opacity: 0; transition: opacity .2s;
    color: var(--text-primary); font-size: 13px; padding: 10px 30px 10px 14px;
    pointer-events: none;
}
.dropdown-header .selected-value-placeholder {
    font-size: 13px; color: var(--text-secondary); padding: 10px 30px 10px 14px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    flex-grow: 1; transition: opacity .2s;
}
.dropdown-header.open .dropdown-search,
.dropdown-header.value-active .dropdown-search { opacity: 1; pointer-events: auto; }
.dropdown-header.open .selected-value-placeholder,
.dropdown-header.value-active .selected-value-placeholder { opacity: 0; pointer-events: none; }

.dropdown-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    z-index: 50; padding: 6px;
    max-height: 280px; overflow-y: auto;
}
.dropdown-list.hidden { display: none; }
.dropdown-list::-webkit-scrollbar { width: 7px; }
.dropdown-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.list-option {
    padding: 6px 10px; cursor: pointer; border-radius: 7px;
    font-size: 13px; color: var(--text-secondary); transition: background-color .15s;
    display: flex; align-items: center; gap: 8px;
}
.list-option:hover { background-color: var(--surface-elevated); }
.list-option.selected {
    background-color: rgba(37, 99, 235, .18);
    border-left: 3px solid var(--accent);
    color: var(--text-primary); font-weight: 600;
}
.list-option.hidden-by-search { display: none; }

/* putya: "вот это вот как-то красивее оформи" — вместо строки текста две карточки-статы. */
.cw-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.cw-stat-chip {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--surface-color); border-radius: 12px; padding: 10px 20px; min-width: 130px;
}
.cw-stat-value { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.cw-stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* putya: "на пк... слева была диаграмма, справа блок с моделями" — на мобильном остаётся
   одна колонка (диаграмма, потом фильтр+модели), на ПК становится двумя. */
.cw-charts-row {
    width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: stretch;
}

.cw-view {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}

.cw-models-panel {
    width: 100%; display: flex; flex-direction: column; gap: 10px;
}

@media (min-width: 860px) {
    .cw-charts-row { flex-direction: row; align-items: flex-start; }
    /* putya: "можно даже чтобы левая часть пошире была" */
    #cw-wheel-view { flex: 0 0 430px; }
    .cw-models-panel { flex: 1 1 auto; min-width: 0; }
}

.cw-diagram-box {
    width: 100%; max-width: 430px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center; position: relative;
}

#cw-svg { width: 100%; height: 100%; overflow: visible; }

.cw-sector { cursor: pointer; stroke: rgba(255,255,255,.08); stroke-width: 1; transition: opacity .15s; }
.cw-sector:hover { opacity: .82; }
/* putya: "добавь обводку на выбранный цвет чтобы было видно" */
.cw-sector.selected {
    stroke: #ffffff; stroke-width: 3px;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.55));
}
.cw-sector-extreme { stroke: rgba(255,255,255,.2); stroke-width: 1; }

/* hover-тултип диаграммы (#cw-tooltip) убран по просьбе putya. */

/* putya: "0 это просто черный, а 100 просто белый" — ползунок среза по светлоте. */
.cw-slider-row {
    width: 100%; max-width: 430px; display: flex; align-items: center; gap: 8px;
}
.cw-slider-label { font-size: 11.5px; color: var(--text-muted); flex: 0 0 auto; }
.cw-slider {
    flex: 1 1 auto; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #000, #fff); outline: none; cursor: pointer;
}
.cw-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); border: 2px solid #fff; cursor: pointer;
}
.cw-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); border: 2px solid #fff; cursor: pointer;
}
.cw-slider-value { font-size: 11px; color: var(--text-muted); flex: 0 0 auto; min-width: 62px; text-align: right; }
.cw-slider-reset {
    background: none; border: none; color: var(--text-muted); font-size: 16px; line-height: 1;
    cursor: pointer; padding: 0 2px; flex: 0 0 auto;
}
.cw-slider-reset:hover { color: var(--text-primary); }
.cw-slider-reset.hidden { visibility: hidden; }

.cw-error {
    font-size: 14px; color: #ff8080; text-align: center; padding: 30px 10px;
}
.cw-error.hidden { display: none; }

/* putya: "не в окне отдельном, а блок внизу" — список подарков для выбранного цвета рендерится
   прямо на странице, под блоком с диаграммами, а не всплывающим окном. */
.cw-drilldown {
    width: 100%;
    background: rgba(255,255,255,.03); border: 1px solid var(--border-color);
    border-radius: 12px; overflow: hidden;
}
.cw-drilldown.hidden { display: none; }

.cw-drilldown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 14px; font-weight: 700;
}
/* putya: "вместо Оранжевый (30°–60°) выводи просто превью с цветами данного кластера" —
   цветовой кружок вместо текстового названия/диапазона градусов. */
.cw-drilldown-swatch {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 2px 6px rgba(0,0,0,.4);
}
.cw-drilldown-close {
    background: none; border: none; color: var(--text-muted); font-size: 20px;
    line-height: 1; cursor: pointer; padding: 0 4px;
}
.cw-drilldown-close:hover { color: var(--text-primary); }

/* putya: "убери базовый скрол... сделай по высоте таким же как и левая часть" — max-height на
   мобильном фиксированная (420px), на ПК её вычисляет и проставляет inline JS (syncModelsPanelHeight
   в color-wheel.js), чтобы правая колонка по факту совпадала по высоте с диаграммой слева. Тонкий
   скроллбар вместо стандартного браузерного — тот же стиль, что у .dropdown-list. */
.cw-drilldown-body {
    max-height: 420px; overflow-y: auto; padding: 8px;
}
.cw-drilldown-body::-webkit-scrollbar { width: 7px; }
.cw-drilldown-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

@media (min-width: 860px) {
    .cw-drilldown-body { max-height: none; }
}

.cw-model-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 6px 6px; border-radius: 8px; font-size: 13px; color: var(--text-secondary);
}
.cw-model-row:hover { background: var(--surface-elevated); }
.cw-model-photo {
    width: 36px; height: 36px; flex: 0 0 auto; border-radius: 8px; object-fit: contain;
    background: rgba(255,255,255,.06);
}
.cw-model-swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; box-shadow: 0 0 4px rgba(0,0,0,.3); }
.cw-model-name { flex: 1 1 auto; color: var(--text-primary); min-width: 0; }
.cw-model-name .gift { color: var(--text-muted); font-weight: 400; }
.cw-model-weight { color: var(--text-muted); font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.cw-drilldown-note { font-size: 12px; color: var(--text-muted); padding: 8px 10px; }

/* putya: "точный подбор по HEX/цвету" / "выбрать несколько цветов, а не только один" — список
   строк-фильтров (пикер + hex + мин.%); первая строка всегда есть, дальше можно добавлять. Одна
   строка = обычный поиск ближайших (GetGlobalColorWheelNearestModels), 2+ = поиск по всем цветам
   сразу (GetGlobalColorWheelMultiColorModels) — см. color-wheel.js runColorSearch(). */
.cw-color-filters-list {
    display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 460px;
}
.cw-color-filter-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.filter-color-picker {
    width: 44px; height: 40px; padding: 0; border: 1px solid var(--border-color);
    border-radius: 10px; background: none; cursor: pointer; flex: 0 0 auto;
}
.filter-color-picker::-webkit-color-swatch-wrapper { padding: 3px; }
.filter-color-picker::-webkit-color-swatch { border: none; border-radius: 7px; }
.cw-hex-input {
    flex: 1 1 auto; min-width: 0; background: var(--surface-elevated);
    border: 1px solid var(--border-color); border-radius: 10px;
    color: var(--text-primary); font-size: 13px; font-family: inherit;
    padding: 10px 12px; text-transform: uppercase;
}
.cw-hex-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.cw-remove-filter-btn {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,.06); border: none; color: var(--text-muted);
    font-size: 16px; cursor: pointer; line-height: 1;
}
.cw-remove-filter-btn:hover { background: rgba(239,68,68,.18); color: #f87171; }

.cw-color-search-actions {
    display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px;
}
.cw-add-color-btn {
    background: none; border: 1px dashed var(--border-color); border-radius: 10px;
    color: var(--text-secondary); font-size: 12.5px; font-weight: 600; font-family: inherit;
    padding: 9px 14px; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.cw-add-color-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.cw-color-search-btn {
    flex: 0 0 auto; background: var(--accent); color: #fff; border: none; border-radius: 10px;
    padding: 10px 18px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
    transition: background-color .15s ease;
}
.cw-color-search-btn:hover { background: #1d4ed8; }

/* putya: "исключить модели должна быть под cw-color-search-actions" — своя строка ниже, а не
   внутри ряда действий. "должна быть возможность... исключить далекие от заданных цветов" —
   чекбокс активен только при 2+ цветах (см. JS), выключен и приглушён при одном. */
.cw-exclude-toggle {
    display: flex; align-items: center; gap: 6px; width: 100%; max-width: 460px;
    font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
}
.cw-exclude-toggle input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
/* putya: "cw-exclude-toggle disabled был лучше виден" — раньше просто opacity:.45 на весь ряд,
   почти нечитаемо и непонятно ПОЧЕМУ выключено; теперь текст остаётся читаемым, курсор явно
   not-allowed, а причина ("нужно 2+ цвета") видна сразу отдельной плашкой, не только в title. */
.cw-exclude-toggle.disabled { color: var(--text-secondary); cursor: not-allowed; pointer-events: none; }
.cw-exclude-toggle.disabled input[type="checkbox"] { opacity: .5; }
.cw-exclude-toggle-hint {
    display: none; font-size: 10.5px; color: var(--text-muted);
    background: rgba(255,255,255,.06); border-radius: 6px; padding: 2px 7px; margin-left: 2px;
}
.cw-exclude-toggle.disabled .cw-exclude-toggle-hint { display: inline-block; }

/* putya: "сделай такие же карточки моделей как у меня везде... сделай чтобы их можно было
   открывать" — те же классы карточки, что на background-finder.html (.result-card-bg). */
.cw-color-search-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;
    width: 100%;
}
.result-card-bg {
    border-radius: 16px; overflow: hidden; border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    display: flex; flex-direction: column; text-decoration: none; cursor: pointer;
    background: var(--surface-color);
    transition: transform .2s, box-shadow .2s;
}
.result-card-bg:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.result-card-bg .image-container {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 10%; box-sizing: border-box; z-index: 1;
}
.result-card-bg .model-image { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(0,0,0,.4)); }
.result-card-bg .info-container {
    padding: 24px 12px 12px 12px; margin-top: -20px; position: relative; z-index: 2;
    background: linear-gradient(to top, rgba(14, 21, 38, .95) 20%, rgba(14, 21, 38, .6) 70%, transparent 100%);
    display: flex; flex-direction: column; gap: 8px;
}
.info-text { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.info-collection {
    font-size: .65rem; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,.7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.info-model {
    font-size: .95rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.info-badges { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.badge-percent {
    width: 100%; text-align: center; padding: 4px 0; border-radius: 6px;
    font-size: .8rem; font-weight: 800; color: #fff;
    background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; gap: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.multi-swatches { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.multi-swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,.4); flex: 0 0 auto; }

/* putya: "надо чтобы оформление было таким же как в монохромах, сейчас слишком отличается" —
   ниже .mode-switcher-container/.mode-switcher/.mode-tab/.content-wrapper/.selection-block/
   .dropdowns-row/.sort-group-col/.filter-label/.bgs2-filter-block* СКОПИРОВАНЫ БУКВАЛЬНО из
   background-finder.css (он не подключён на этой странице) — плоско, без рамок-карточек вокруг
   групп полей, подпись НАД полем, дропдауны в 2 колонки на ПК/1 на мобиле, как на Монохромах. */
.cw-search-subpanel {
    width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
.cw-search-subpanel.hidden { display: none; }
.cw-search-content-wrapper { padding: 1.25rem 0 0; }
/* putya: "сделать выше по умолчанию секцию чтобы не обрезался выпадающий список" —
   .main-container (styles.css) имеет overflow:hidden и без своего min-height подстраивается под
   контент; когда на Похожих убрали поля порога, карточка стала короче открытого списка коллекций
   (.dropdown-list, до 280px) — список обрезался по нижнему краю карточки. Даём панели запас высоты. */
#cw-search-similar { min-height: 480px; }

.mode-switcher-container {
    width: 100%; background-color: transparent; padding: 0; margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mode-switcher {
    display: flex; background: transparent; border-radius: 0; padding: 4px; position: relative;
    box-shadow: none; height: auto; border: none;
}
.mode-switcher::before {
    content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px;
    background: rgba(37, 99, 235, .15); border: 1px solid rgba(37, 99, 235, .25);
    border-radius: 8px; z-index: 1; transition: transform .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mode-switcher.mode-switcher-2::before { width: calc((100% - 8px) / 2); }
.mode-switcher.mode-switcher-2[data-active-mode="colors"]::before,
.mode-switcher.mode-switcher-2[data-active-mode="exact"]::before { transform: translateX(0%); }
.mode-switcher.mode-switcher-2[data-active-mode="similar"]::before,
.mode-switcher.mode-switcher-2[data-active-mode="dominant"]::before { transform: translateX(100%); }
.mode-tab {
    flex: 1; border: none; background: transparent; color: var(--text-muted);
    font-size: 0.92rem; line-height: 1.2; font-weight: 700; padding: 12px 2px; z-index: 2; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px;
    transition: color .3s ease; font-family: inherit;
}
.mode-tab.active { color: var(--text-primary); }

/* --- Коллекция/Модель (Похожие) — те же .dropdowns-row/.sort-group-col/.filter-label, что и на
   background-finder.html (Фоны/Модели): подпись сверху, 2 колонки на ПК. --- */
.selection-block { display: flex; flex-direction: column; gap: 1rem; }
.dropdowns-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 100; }
.sort-group-col { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.filter-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; padding-left: 4px; }
@media (max-width: 600px) {
    .dropdowns-row { grid-template-columns: 1fr; }
}

/* putya: "будет только доминирующий... всегда будет до 50ти процентов" — режим/пороги рецепта
   и похожих теперь захардкожены в JS, отдельных полей ввода (и .bgs2-filter-block под них) больше
   нет на этой странице. */

.cw-search-btn-wide { width: 100%; padding: 12px 18px; font-size: 14px; }

/* putya: "оформи similar-gift-value и similar-model-value так же как dropdown-header with-search"
   [на Монохромах] — .dropdown-header тут (color-wheel.css) компактнее, чем на
   background-finder.css (10px/13px vs 0.75rem/0.95rem) — эту пару дропдаунов подгоняем под тот же
   размер, не трогая остальные (Коллекции на Главной) — те уже устоялись в своём виде. */
/* putya: "ты же видишь, тут разные стили? другой цвет" — --border-color на этой странице
   rgba(255,255,255,.14) (белёсая), на background-finder.css #22305a (синеватая) — граница
   дропдаунов из-за этого заметно отличалась даже при одинаковых размере/шрифте. */
#cw-search-similar .dropdown-header,
#cw-search-similar .dropdown-list { border-color: #22305a; }
#cw-search-similar .dropdown-header { border-radius: var(--radius); }
#cw-search-similar .dropdown-header .arrow { width: 12px; height: 12px; right: 1rem; }
#cw-search-similar .dropdown-header.active .arrow { transform: translateY(-50%) rotate(225deg); }
#cw-search-similar .dropdown-header .selected-value-placeholder,
#cw-search-similar .dropdown-header .dropdown-search {
    font-size: 0.95rem; line-height: 1.2; padding: 0.75rem 2.5rem 0.75rem 1rem;
}

/* putya: "выпадающий список должен быть в таком же стиле как... на монохромах" — сам
   РАСКРЫТЫЙ список (не только закрытый header выше) тоже был мельче: .list-option 6px/10px
   вместо 0.75rem/1rem, картинка 22px (.list-option-preview, как у "Коллекции" на Главной) вместо
   35px (.option-image на background-finder.css) — то же самое разночтение, что и в прошлый раз,
   только теперь для списка опций, а не для закрытого дропдауна. */
#cw-search-similar .dropdown-list { padding: 0.5rem; border-radius: var(--radius); }
#cw-search-similar .list-option { padding: 0.75rem 1rem; border-radius: 0.5rem; gap: 15px; }
#cw-search-similar .list-option .option-image {
    width: 35px; height: 35px; object-fit: contain; border-radius: 4px; flex-shrink: 0; align-self: center;
}
#cw-search-similar .list-option .option-text {
    font-size: 1.05rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1;
}
#cw-search-similar .list-option.selected {
    background-color: rgba(56, 189, 248, 0.15); border-left: 3px solid var(--primary-color); border-radius: 8px;
}
#cw-search-similar .list-option.selected .option-text { color: var(--text-primary); font-weight: 700; }

#similar-model-header.disabled { opacity: .5; pointer-events: none; }

.cw-similar-radar-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cw-similar-radar-box.hidden { display: none; }
.cw-similar-radar-caption { font-size: 11px; color: var(--text-secondary); text-align: center; max-width: 420px; }
.cw-similar-radar-hint { font-size: 10.5px; color: var(--text-muted); text-align: center; }

/* putya: "убери предпросмотр модели, там где она рядом с диаграмой... на телефонах её побольше
   сделай" — .cw-similar-preview убран, в ряду только радар; на ПК 250px, на телефоне почти во всю
   ширину карточки вместо прежних 130px. */
.cw-similar-radar-row { display: flex; align-items: center; justify-content: center; width: 100%; }
#similar-target-radar { width: 250px; max-width: 100%; }
.cw-similar-radar-svg circle[data-hex] { cursor: pointer; }

@media (max-width: 600px) {
    #similar-target-radar { width: min(320px, 92vw); }
}

@media (max-width: 480px) {
    .cw-container { padding: 16px; }
}