/* ==========================================================================
   Carhab — дизайн-система главной страницы.
   Тёмная тема «ночной авторынок»: сине-графитовый асфальт, несколько уровней
   поверхностей, единственный акцент — небесно-бирюзовый с флага Казахстана.
   Фирменный элемент — номерной знак: код региона с казахстанских номеров
   («02» Алматы, «17» Шымкент) там, где речь о месте.

   Пишется от телефона к десктопу: 90% посетителей — с телефона, поэтому
   базовые правила — телефонные, а широкие экраны добавляются поверх.
   Контраст всех текстовых пар проверен (WCAG), цвета карты — валидатором.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Поверхности: от асфальта к кабине */
  --asphalt: #0F141A;   /* фон страницы */
  --kerb:    #161D25;   /* карточки */
  --cab:     #1E2732;   /* поля, чипы, приподнятое */
  --cab-hi:  #26303D;   /* наведение на приподнятое */
  --seam:    #2B3542;   /* линии и границы */

  /* Текст */
  --chalk: #E7ECF1;     /* основной, 14.3:1 */
  --fog:   #A2ADBA;     /* вторичный, 7.5:1 */
  --dust:  #7C8896;     /* приглушённый, 4.7:1 */

  /* Акцент — небесный с флага. Текстом 6.5:1, под тёмным текстом кнопки 5.8:1 */
  --sky:      #00AFCA;
  --sky-ink:  #062A31;
  --sky-wash: rgba(0, 175, 202, .12);

  /* Карта: расходящаяся шкала вокруг медианы по стране (валидатор: CVD ΔE 17,
     норма 25, контраст с фоном ≥3:1). На насыщенных плитках — белый текст. */
  --div-b2: #2F74C4;
  --div-b1: #1C3A5C;
  --div-n:  #222B36;
  --div-r1: #4C2A31;
  --div-r2: #BE4F57;

  /* Статус «данные устарели» — только с текстовой подписью */
  --stale: #F2B24C;

  /* Закругления. Всё, что можно закруглить до конца — кнопки, поля, чипы,
     строки списков, знаки, — закруглено на 100% (999px). Крупные блоки с
     текстом (карточки, панели) держат 28px: при 100% у высокой карточки
     радиус равнялся бы половине её высоты и срезал бы содержимое. */
  --r-pill: 999px;
  --r-lg: 28px;
  --r-md: 999px;
  --r-sm: 999px;
  --r-note: 22px;

  /* Цвета, которые раньше были зашиты в правилах */
  --hover-card: #18202A; --hover-line: #3A4655;
  --peer-below-bg: #1A2A3D; --peer-below-ink: #8FC0FF;
  --peer-above-bg: #33222A; --peer-above-ink: #FF9EA3;
  --seen-bg: #131920; --seen-line: #222A34; --seen-title: #6F7B89; --seen-meta: #4E5966;
  --seen-link: #4E6F78; --seen-peer-bg: #1A2129; --seen-peer-ink: #56626F;
  --fab-bg: rgba(30, 39, 50, .92); --fab-line: rgba(255, 255, 255, .08);
  --pop-shadow: 0 24px 48px rgba(0, 0, 0, .5);
  --tile-shadow: 0 10px 22px rgba(0, 0, 0, .4);
  --tile-ring: var(--chalk);
  --hatch: rgba(255, 255, 255, .05);
  --ok: #3FB67A;

  /* Одна гарнитура — Montserrat; иерархия держится на начертаниях:
     400 текст · 500 подписи · 600 элементы управления · 700 заголовки
     карточек · 800 цены и крупные заголовки. */
  --f-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-plate: "Montserrat", system-ui, sans-serif;

  --gutter: 12px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px rgba(0, 0, 0, .28);
}

/* Светлая тема: тот же набор ролей, другие значения. Акцент темнее — бирюза
   #00AFCA на белом даёт лишь 2,6:1, а #007A91 — 5:1. Текст: 16:1, 7,6:1, 5,7:1. */
:root[data-theme="light"] {
  color-scheme: light;
  --asphalt: #F3F5F8;
  --kerb:    #FFFFFF;
  --cab:     #EBEFF3;
  --cab-hi:  #E0E6EC;
  --seam:    #D6DCE3;

  --chalk: #141A21;
  --fog:   #414C59;
  --dust:  #5B6776;

  --sky:      #007A91;
  --sky-ink:  #FFFFFF;
  --sky-wash: rgba(0, 122, 145, .10);

  --div-b2: #2F74C4;
  --div-b1: #BFD5EE;
  --div-n:  #E4E9EE;
  --div-r1: #F1CDD0;
  --div-r2: #BE4F57;

  --stale: #955700;

  --hover-card: #FBFCFD; --hover-line: #B9C3CE;
  --peer-below-bg: #E1EDFB; --peer-below-ink: #17508F;
  --peer-above-bg: #FCE6E8; --peer-above-ink: #A32D36;
  --seen-bg: #F1F4F7; --seen-line: #E1E6EB; --seen-title: #7F8B99; --seen-meta: #98A3B0;
  --seen-link: #7FA6B0; --seen-peer-bg: #EAEEF2; --seen-peer-ink: #8F9AA7;
  --fab-bg: rgba(255, 255, 255, .94); --fab-line: rgba(15, 20, 26, .10);
  --pop-shadow: 0 20px 44px rgba(15, 20, 26, .18);
  --tile-shadow: 0 10px 22px rgba(15, 20, 26, .18);
  --tile-ring: var(--chalk);
  --hatch: rgba(15, 20, 26, .07);
  --ok: #1F9A5F;
  --shadow: 0 1px 2px rgba(15, 20, 26, .06), 0 10px 28px rgba(15, 20, 26, .07);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--chalk);
  font: 400 14.5px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }
body.sheet-open { overflow: hidden; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.topbar, main, footer { width: calc(100% - 2 * var(--gutter)); max-width: 1180px; margin: 0 auto; }

/* ---------- Номерной знак ----------
   Белая табличка с бирюзовой полосой слева — как полоса с флагом на
   настоящем знаке — и кодом региона. Всегда светлая на тёмном: это
   предмет из реального мира, а не элемент интерфейса. */
.plate {
  display: inline-flex; align-items: stretch; flex: 0 0 auto;
  height: 18px; border-radius: var(--r-pill); overflow: hidden;
  background: #F2F4F6; color: #0F141A;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  font: 800 12px/1 var(--f-plate); letter-spacing: .3px;
  vertical-align: middle;
}
.plate::before { content: ""; width: 4px; background: var(--sky); }
.plate b { display: flex; align-items: center; padding: 0 7px 0 4px; font-weight: 800; }

/* ---------- Шапка ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
          gap: 4px 10px; padding: 10px 0 2px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--chalk); text-decoration: none;
         font: 800 18px/1 var(--f-display); letter-spacing: -.5px; }
.brand > span > span { color: var(--sky); }
.brand small { font: 500 12px var(--f-body); color: var(--dust); letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill);
              background: var(--sky); color: var(--sky-ink); }
.brand-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
                  stroke-linecap: round; stroke-linejoin: round; }
/* Телефон: в первой строке марка и переключатели, ниже — разделы на всю
   ширину. Три раздела и два переключателя в одну строку на 360px не встают. */
.top-actions { display: flex; align-items: center; gap: 12px; }
.top-controls { display: flex; align-items: center; gap: 8px; }
.source-state { display: none; }
.top-nav { order: 3; flex: 1 0 100%; display: flex; gap: 4px; margin-top: 4px; }
.nav-link { flex: 1; padding: 10px 10px; border-radius: var(--r-pill); color: var(--fog); text-decoration: none;
            font-size: 14px; font-weight: 600; text-align: center; }
.nav-link:hover { color: var(--chalk); background: var(--cab); }
.nav-link.active { color: var(--chalk); background: var(--cab); }

/* Язык и тема */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--cab); }
.seg-btn { min-width: 44px; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
           background: transparent; color: var(--fog); font-size: 13px; font-weight: 700; }
.seg-btn:hover { color: var(--chalk); }
.seg-btn.is-active { background: var(--sky); color: var(--sky-ink); }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
                border-radius: var(--r-pill); background: var(--cab); color: var(--chalk); }
.theme-toggle:hover { background: var(--cab-hi); }
.theme-toggle .ico { width: 19px; height: 19px; }

/* ---------- Первый экран ----------
   Не рекламный слоган, а вопрос, ради которого сюда приходят. */
.market-head { padding: 18px 2px 14px; }
.back-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--fog);
             font-size: 12.5px; font-weight: 600; }
.back-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky);
                     box-shadow: 0 0 0 3px var(--sky-wash); }
.market-title { margin-top: 10px; }
.market-title .eyebrow { display: none; }
.market-title h1 { margin: 0; font: 800 26px/1.12 var(--f-display); letter-spacing: -.8px; text-wrap: balance; }
.market-title h1 em { font-style: normal; color: var(--sky); }
.market-title > p { margin: 10px 0 0; max-width: 56ch; color: var(--fog); font-size: 14px; line-height: 1.55; }

/* ---------- Фильтры ---------- */
.search-panel { position: relative; margin: 6px 0 14px; padding: 18px; border-radius: var(--r-lg);
                background: var(--kerb); box-shadow: var(--shadow); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filters > * { min-width: 0; }
/* Телефон: город — отдельной строкой во всю ширину (там бывают
   «Карагандинская область»), а год, четыре цифры в каждом поле, спокойно
   встаёт в полстроки рядом с поколением. */
.filters > .pick-field:nth-child(4) { grid-column: 1 / -1; order: 5; }
.filters > .pick-field:nth-child(5) { order: 4; }
.pick-field { position: relative; min-width: 0; }
.field-label { display: block; margin: 0 0 5px 8px; color: var(--dust);
               font-size: 11.5px; font-weight: 600; letter-spacing: .2px; }

.pick-button, .range-inputs input {
  display: block; width: 100%; min-height: 46px; line-height: 44px; padding: 0 50px 0 18px;
  border: 1px solid transparent; border-radius: var(--r-md); background: var(--cab);
  color: var(--chalk); font-size: 15px; font-weight: 600; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, border-color .15s;
}
.pick-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M5.636 18.364A9 9 0 1 1 20.315 8.556' stroke='%237C8896' stroke-opacity='.55'/%3E%3Cpath d='M20.315 8.556A9 9 0 0 1 18.364 18.364' stroke='%23E5484D'/%3E%3Cline x1='12' y1='12' x2='12' y2='5.2' stroke='%237C8896' transform='rotate%28-101.25 12 12%29'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%237C8896' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.pick-button:hover:not(:disabled), .range-inputs input:hover { background-color: var(--cab-hi); }
.pick-button.is-set { border-color: rgba(0, 175, 202, .45); color: var(--chalk); }
.pick-button:disabled { padding-right: 14px; color: var(--dust); font-size: 14px; font-weight: 500; cursor: not-allowed; background-image: none; }
.pick-button[aria-expanded="true"] { border-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M5.636 18.364A9 9 0 1 1 20.315 8.556' stroke='%237C8896' stroke-opacity='.55'/%3E%3Cpath d='M20.315 8.556A9 9 0 0 1 18.364 18.364' stroke='%23E5484D'/%3E%3Cline x1='12' y1='12' x2='12' y2='5.2' stroke='%23E5484D' transform='rotate%2867.5 12 12%29'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23E5484D' stroke='none'/%3E%3C/svg%3E"); }

.range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.range-inputs input { padding: 0 12px; font-size: 16px; appearance: textfield; -moz-appearance: textfield; outline: 0; }
.range-inputs input::-webkit-outer-spin-button,
.range-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range-inputs input:focus { border-color: var(--sky); }
.range-inputs input::placeholder { color: var(--dust); font-size: 13px; font-weight: 500; }

/* Площадки */
.source-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.adv-sources { grid-column: 1 / -1; }
.adv-label { display: block; margin-left: 4px; color: var(--dust); font-size: 11.5px; font-weight: 600; }
.source-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px;
               border: 1px solid var(--seam); border-radius: var(--r-pill); background: transparent;
               color: var(--fog); font-size: 13px; font-weight: 600; transition: all .15s; }
.source-chip small { color: var(--dust); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.source-chip:hover { border-color: var(--dust); color: var(--chalk); }
.source-chip.is-active { border-color: var(--sky); background: var(--sky-wash); color: var(--chalk); }
.source-chip.is-active small { color: var(--sky); }

.search-actions { display: flex; flex-direction: column-reverse; gap: 6px; margin-top: 12px; }
.advanced-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                   min-height: 40px; border: 0; background: transparent; color: var(--fog);
                   font-size: 13.5px; font-weight: 600; }
.advanced-toggle:hover { color: var(--chalk); }
.adv-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
             background: var(--sky); color: var(--sky-ink); font-size: 11.5px; font-weight: 700; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                  min-height: 50px; padding: 0 24px; border: 0; border-radius: var(--r-md);
                  background: var(--sky); color: var(--sky-ink); font: 700 15px var(--f-body);
                  transition: filter .15s, transform .1s; }
.primary-button:hover { filter: brightness(1.08); }
.primary-button:active { transform: scale(.99); }
.primary-button span { font-size: 18px; line-height: 1; }

.advanced-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
                    padding-top: 14px; border-top: 1px solid var(--seam); }
.advanced-filters > * { min-width: 0; }
.advanced-filters label { position: relative; display: block; color: var(--dust); font-size: 11.5px; font-weight: 600; }
.advanced-filters label > span { margin-left: 4px; }
.advanced-filters input, .advanced-filters select {
  display: block; width: 100%; min-height: 44px; margin-top: 5px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-md); background: var(--cab);
  color: var(--chalk); font-size: 16px; font-weight: 600; appearance: none; outline: 0;
}
.advanced-filters select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M5.636 18.364A9 9 0 1 1 20.315 8.556' stroke='%237C8896' stroke-opacity='.55'/%3E%3Cpath d='M20.315 8.556A9 9 0 0 1 18.364 18.364' stroke='%23E5484D'/%3E%3Cline x1='12' y1='12' x2='12' y2='5.2' stroke='%237C8896' transform='rotate%28-101.25 12 12%29'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%237C8896' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 50px;
}
.advanced-filters input:focus, .advanced-filters select:focus { border-color: var(--sky); }
.advanced-filters input::placeholder { color: var(--dust); font-weight: 500; }

/* ---------- Панели выбора ----------
   Телефон: полноэкранный лист — заголовок с крестиком, поиск сверху, список
   ниже. Выпадашка на узком экране не помещается, а палец промахивается. */
.pick-panel {
  position: fixed; inset: 0; z-index: 100;
  padding: 0 14px calc(16px + env(safe-area-inset-bottom));
  background: var(--kerb); overflow-y: auto; overscroll-behavior: contain;
}
.pick-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
             justify-content: space-between; margin: 0 -14px;
             padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px;
             background: var(--kerb); border-bottom: 1px solid var(--seam); }
.pick-head b { font: 800 16px var(--f-display); letter-spacing: -.2px; }
.pick-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0;
              border-radius: var(--r-pill); background: transparent; color: var(--fog); font-size: 26px; line-height: 1; }
.pick-close:hover { background: var(--cab); color: var(--chalk); }
.pick-search { position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 1; display: block;
               width: 100%; min-height: 46px; margin: 12px 0 0; padding: 0 18px 0 44px;
               border: 1px solid var(--seam); border-radius: var(--r-md); outline: 0;
               background: var(--cab) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%237C8896' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m12.2 12.2 3.6 3.6'/%3E%3C/svg%3E") no-repeat 17px center;
               color: var(--chalk); font-size: 16px; }
.pick-search:focus { border-color: var(--sky); }
.pick-search::placeholder { color: var(--dust); }
.pick-list { margin-top: 6px; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--r-sm);
            background: transparent; color: var(--chalk); font-size: 15px; font-weight: 500; text-align: left; }
.pick-row:hover { background: var(--cab); }
.pick-row.is-active { background: var(--sky-wash); color: var(--chalk); font-weight: 700; }
.pick-row.is-reset { color: var(--fog); margin-bottom: 4px; box-shadow: inset 0 -1px 0 var(--seam); }
.pick-row small { color: var(--dust); font-size: 12.5px; font-weight: 600; white-space: nowrap;
                  font-variant-numeric: tabular-nums; }
.pick-row.is-active small { color: var(--sky); }

.geo-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.geo-chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--seam); border-radius: var(--r-pill);
            background: transparent; color: var(--chalk); font-size: 14px; font-weight: 600; }
.geo-chip:hover { border-color: var(--sky); }
.geo-list { margin-top: 10px; }
.geo-region { border-top: 1px solid var(--seam); }
.geo-region summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 12px;
                      list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; }
.geo-region summary::-webkit-details-marker { display: none; }
.geo-region summary > span:not(.plate) { flex: 1; min-width: 0; }
.geo-region summary small, .geo-row small { color: var(--dust); font-size: 12.5px; font-weight: 600;
                                            font-variant-numeric: tabular-nums; }
.geo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
           min-height: 46px; padding: 0 16px 0 22px; border: 0; border-radius: var(--r-sm);
           background: transparent; color: var(--fog); font-size: 14.5px; text-align: left; }
.geo-row:hover { background: var(--cab); color: var(--chalk); }
.geo-row > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.geo-empty { padding: 28px 8px; color: var(--dust); text-align: center; font-size: 14px; }

/* ---------- Аналитика ---------- */
.dashboard { display: block; }
.analysis-rail { display: none; }
.report-card, .offers-section { padding: 18px; border-radius: var(--r-lg); background: var(--kerb);
                                box-shadow: var(--shadow); }
.report-card + .report-card, .report-card + .offers-section { margin-top: 12px; }
.card-heading, .section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.eyebrow { margin: 0 0 4px; color: var(--dust); font-size: 11.5px; font-weight: 600; letter-spacing: .3px; }
.card-heading h2, .section-head h2 { margin: 0; font: 800 19px/1.2 var(--f-display); letter-spacing: -.4px; }
.sample-badge { display: inline-flex; padding: 6px 14px; border-radius: var(--r-pill); background: var(--cab);
                color: var(--fog); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Четыре показателя: две цены — крупно, они главное; ликвидность и
   дешёвая область — вторым рядом. */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; min-width: 0;
        border: 1px solid var(--seam); border-radius: var(--r-lg); background: var(--kerb); }
.stat-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill);
             background: var(--cab); color: var(--fog); }
.stat-icon .ico { width: 17px; height: 17px; }
.stat small { display: block; color: var(--fog); font-size: 12.5px; font-weight: 600; }
.stat strong { display: block; margin-top: 2px; font: 800 18px/1.2 var(--f-display); letter-spacing: -.3px;
               font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat p { margin: 4px 0 0; color: var(--dust); font-size: 12px; line-height: 1.4; }
.stat:nth-child(-n+2) strong { font-size: 20px; }
.stat:nth-child(1) .stat-icon, .stat:nth-child(2) .stat-icon { color: var(--sky); background: var(--sky-wash); }
.stats-note { margin: 12px 0 0; padding: 14px 20px; border-radius: var(--r-note);
              background: var(--cab); color: var(--fog); font-size: 13px; line-height: 1.5; }
.stats-note:empty { display: none; }

/* ---------- Графики по неделям (медиана/средняя) ----------
   Два одиночных ряда — не один график с двумя линиями: так читается
   быстрее и не нужна легенда, заголовок карточки уже называет ряд. */
.history-charts { display: grid; gap: 10px; margin-top: 14px; }
.history-chart { padding: 14px 14px 8px; border: 1px solid var(--seam); border-radius: var(--r-lg); background: var(--cab); }
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
           margin-bottom: 4px; color: var(--fog); font-size: 12.5px; font-weight: 700; }
.hc-delta { padding: 3px 9px; border-radius: var(--r-pill); background: var(--cab-hi); color: var(--dust);
            font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-delta.is-r1 { background: var(--peer-above-bg); color: var(--peer-above-ink); }
.hc-delta.is-b1 { background: var(--peer-below-bg); color: var(--peer-below-ink); }
.hc-body { position: relative; }
.hc-svg { display: block; width: 100%; height: 140px; overflow: visible; }
.hc-line { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-area { fill: var(--sky); opacity: .1; stroke: none; }
.hc-grid { stroke: var(--seam); stroke-width: 1; }
.hc-tick { fill: var(--dust); font-size: 9.5px; font-family: var(--f-body); dominant-baseline: text-after-edge; }
.hc-dot--thin { fill: var(--cab); stroke: var(--dust); stroke-width: 1.5; }
.hc-end { fill: var(--sky); stroke: var(--cab); stroke-width: 2; }
.hc-end.hc-dot--thin { fill: var(--dust); }
.hc-end-label { fill: var(--chalk); font: 700 13px var(--f-display); font-variant-numeric: tabular-nums; }
.hc-axis-label { fill: var(--dust); font-size: 10px; font-family: var(--f-body); }
.hc-axis-label--end { text-anchor: end; }
.hc-hit { fill: transparent; cursor: crosshair; }
.hc-cursor line { stroke: var(--dust); stroke-width: 1; }
.hc-cursor circle { fill: var(--sky); stroke: var(--cab); stroke-width: 2; }
.hc-tooltip { position: absolute; top: 0; z-index: 5; min-width: 90px;
              padding: 7px 10px; border-radius: var(--r-sm); background: var(--asphalt); color: var(--chalk);
              box-shadow: var(--shadow); pointer-events: none; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.hc-tooltip b { display: block; font: 800 13px var(--f-display); font-variant-numeric: tabular-nums; }
.hc-tooltip span { display: block; color: var(--fog); }
.hc-tooltip small { display: block; margin-top: 2px; color: var(--stale); font-weight: 600; }
@media (min-width: 641px) {
  .history-charts { grid-template-columns: 1fr 1fr; }
  .hc-svg { height: 160px; }
}


/* ---------- Карта рынка ----------
   Телефон: вся страна в ширину экрана — плитки с номером региона и цветом.
   Цифры — в рейтинге под картой. На широком экране цифры встают на плитку. */
.kz-map-scroll { margin-top: 14px; }
.kz-map { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: auto; gap: 4px; }
.kz-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
           aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: var(--r-pill);
           color: var(--chalk); font: inherit; text-align: left; transition: transform .12s, box-shadow .12s; }
.kz-tile > b, .kz-tile .t-med, .kz-tile .t-avg, .kz-tile .t-n, .kz-tile .t-empty { display: none; }
.kz-tile .t-abbr { display: block; font: 800 14px/1 var(--f-plate); letter-spacing: .2px; }
.kz-tile.is-b2, .sw.is-b2 { background: var(--div-b2); }
.kz-tile.is-b1, .sw.is-b1 { background: var(--div-b1); }
.kz-tile.is-n,  .sw.is-n  { background: var(--div-n); }
.kz-tile.is-r1, .sw.is-r1 { background: var(--div-r1); }
.kz-tile.is-r2, .sw.is-r2 { background: var(--div-r2); }
.kz-tile.is-b2, .kz-tile.is-r2 { color: #FFFFFF; }
/* Мало данных — без цвета, штриховкой: направление не утверждаем */
.kz-tile.is-thin, .sw.is-thin { background: var(--cab) repeating-linear-gradient(45deg, transparent 0 5px, var(--hatch) 5px 6px); }
.kz-tile.is-thin { color: var(--dust); }
.kz-tile.is-none { background: transparent; box-shadow: inset 0 0 0 1px var(--seam); color: var(--seam); cursor: default; }
.kz-tile.is-selected { box-shadow: 0 0 0 2px var(--kerb), 0 0 0 4px var(--tile-ring); z-index: 1; }
.kz-tile:not(.is-none):active { transform: scale(.96); }

.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--fog); font-size: 12px; }
.map-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-pill); flex: 0 0 auto; }

.rank-wrap { position: relative; margin-top: 14px; }
.region-rank { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--seam); }
/* Свёрнуто: первые три строки, к низу гаснут */
.rank-wrap:not(.is-open) .region-rank { max-height: 176px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 96%); mask-image: linear-gradient(#000 30%, transparent 96%); }
/* Кнопка закреплена у нижнего края экрана, пока список на виду; выше
   плавающей кнопки «Фильтры» (48px + отступы). */
.rank-toggle { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5;
               display: flex; align-items: center; justify-content: center; gap: 8px;
               min-height: 46px; margin: 10px auto 0; padding: 0 22px; border: 1px solid var(--seam);
               border-radius: var(--r-pill); background: var(--cab-hi); color: var(--chalk);
               box-shadow: var(--pop-shadow); font-size: 14px; font-weight: 600; }
.region-rank li + li { border-top: 1px solid var(--seam); }
.rank-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 6px 14px;
            border: 0; border-radius: var(--r-sm); background: transparent; color: var(--chalk); text-align: left; }
.rank-row:hover { background: var(--cab); }
.rank-row.is-selected { background: var(--sky-wash); }
.rank-row .sw { width: 4px; height: 34px; }
.rank-row.is-none { opacity: .5; cursor: default; }
.sw.is-none { background: transparent; box-shadow: inset 0 0 0 1px var(--seam); }
.rk-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.rk-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name small, .rk-nums small { display: block; color: var(--dust); font-size: 12px; font-weight: 500; }
.rk-nums { text-align: right; white-space: nowrap; }
.rk-nums b { font: 800 15px var(--f-display); letter-spacing: -.2px; font-variant-numeric: tabular-nums; }

/* ---------- Лента ---------- */
.offers-section { margin-top: 12px; }
.section-head { margin-bottom: 12px; }
.section-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.below-avg-field { display: inline-flex; align-items: center; gap: 8px; color: var(--fog); font-size: 13.5px; font-weight: 600; }
.below-avg-field input { width: 68px; min-height: 42px; padding: 0 8px; border: 1px solid transparent;
                         border-radius: var(--r-md); background: var(--cab); color: var(--chalk);
                         font-size: 16px; font-weight: 700; text-align: center; outline: 0; }
.below-avg-field input:focus { border-color: var(--sky); }
.section-controls select { flex: 1 1 100%; min-height: 44px; padding: 0 50px 0 18px; border: 1px solid transparent;
                           border-radius: var(--r-md); appearance: none; outline: 0;
                           background: var(--cab) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M5.636 18.364A9 9 0 1 1 20.315 8.556' stroke='%237C8896' stroke-opacity='.55'/%3E%3Cpath d='M20.315 8.556A9 9 0 0 1 18.364 18.364' stroke='%23E5484D'/%3E%3Cline x1='12' y1='12' x2='12' y2='5.2' stroke='%237C8896' transform='rotate%28-101.25 12 12%29'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%237C8896' stroke='none'/%3E%3C/svg%3E") no-repeat right 14px center;
                           color: var(--chalk); font-size: 16px; font-weight: 600; }
.section-controls select:focus { border-color: var(--sky); }

.listings { display: grid; gap: 8px; }
.listings > * { min-width: 0; }

/* Карточка: название и цена — одна строка, дальше во всю ширину.
   Вся карточка — одна цель для пальца: ссылка растянута на неё. */
.car { position: relative; display: grid; grid-template-columns: 1fr auto;
       grid-template-areas: "title price" "meta meta" "stale stale" "peer peer" "link days" "more more" "details details";
       gap: 6px 12px; padding: 18px 20px; border: 1px solid var(--seam); border-radius: var(--r-lg);
       background: var(--kerb); transition: border-color .15s, background .15s; }
.car > div { display: contents; }
.car:hover { border-color: var(--hover-line); background: var(--hover-card); }
.car h3 { grid-area: title; margin: 0; min-width: 0; font: 700 15px/1.3 var(--f-display); letter-spacing: -.2px; }
.car .price { grid-area: price; font: 800 16px/1.3 var(--f-display); letter-spacing: -.3px; white-space: nowrap;
              font-variant-numeric: tabular-nums; }
.car .meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
             color: var(--fog); font-size: 13px; line-height: 1.45; }
.car .stale { grid-area: stale; color: var(--stale); font-size: 12px; font-weight: 600; }
.car .peer { grid-area: peer; justify-self: start; }
.car .source { grid-area: link; justify-self: start; align-self: center; display: inline-flex; align-items: center;
               gap: 5px; color: var(--sky); font-size: 13px; font-weight: 600; text-decoration: none; }
.car .source .ico { width: 15px; height: 15px; }
.car .source::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.car .days { grid-area: days; align-self: center; color: var(--dust); font-size: 12px; text-align: right; }

.peer { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--r-pill);
        font-size: 12.5px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; cursor: help; }
.peer span { font-weight: 800; }
.peer.is-below { background: var(--peer-below-bg); color: var(--peer-below-ink); }
.peer.is-above { background: var(--peer-above-bg); color: var(--peer-above-ink); }
.peer.is-even  { background: var(--cab); color: var(--fog); }

/* Город со знаком региона в строке характеристик */
.car .place { display: inline-flex; align-items: center; gap: 6px; color: var(--chalk); font-weight: 600; }
.car .dot { color: var(--dust); }
.rk-name > span { display: block; }
.geo-region summary .plate { margin-right: 2px; }

/* Просмотренное: весь текст тускнеет — второй проход по рынку сразу
   показывает, что уже проверено. */
.car.is-visited { background: var(--seen-bg); border-color: var(--seen-line); }
.car.is-visited h3, .car.is-visited .price { color: var(--seen-title); }
.car.is-visited .meta, .car.is-visited .place, .car.is-visited .days, .car.is-visited .stale { color: var(--seen-meta); }
.car.is-visited .source { color: var(--seen-link); }
.car.is-visited .peer { background: var(--seen-peer-bg); color: var(--seen-peer-ink); }
.car.is-visited .plate { opacity: .45; }

.loading, .empty { grid-column: 1 / -1; padding: 32px 20px; border-radius: var(--r-lg); background: var(--kerb);
                   border: 1px dashed var(--seam); color: var(--fog); text-align: center; font-size: 14px; }

footer { display: flex; flex-direction: column; gap: 4px; padding: 28px 2px calc(96px + env(safe-area-inset-bottom));
         color: var(--dust); font-size: 12.5px; }
footer b { color: var(--fog); }

/* Кнопка возврата к фильтрам — когда они ушли за экран */
.filter-fab { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60;
              transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
              max-width: calc(100% - 28px); min-height: 48px; padding: 0 18px 0 14px;
              border: 1px solid var(--fab-line); border-radius: var(--r-pill);
              background: var(--fab-bg); color: var(--chalk);
              -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
              box-shadow: 0 12px 32px rgba(0,0,0,.45); font-size: 14px; font-weight: 600; }
.filter-fab .ico { color: var(--sky); width: 18px; height: 18px; }
#filterFabText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Планшет и шире
   ========================================================================== */
@media (min-width: 641px) {
  :root { --gutter: 24px; }
  /* Планшет и шире: одна строка — марка, разделы, переключатели */
  .topbar { flex-wrap: nowrap; height: 72px; padding: 0; gap: 16px; }
  .top-nav { order: 0; flex: 0 1 auto; margin: 0 auto 0 12px; }
  .nav-link { flex: 0 0 auto; padding: 9px 16px; }
  .top-actions { gap: 16px; }
  .source-state { display: none; }

  .market-head { padding: 26px 2px 20px; }
  .market-title h1 { font-size: 36px; letter-spacing: -1.2px; }

  .search-panel { padding: 22px; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .filters > .pick-field:nth-child(4), .filters > .pick-field:nth-child(5) { grid-column: auto; order: 0; }
  .search-actions { flex-direction: row; justify-content: space-between; align-items: center; }
  .primary-button { min-width: 220px; }
  .advanced-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Панель выбора снова выпадает под полем */
  .pick-panel { position: absolute; inset: auto; top: calc(100% + 6px); left: 0; z-index: 40;
                width: min(380px, 90vw); max-height: 440px; padding: 12px; border: 1px solid var(--seam);
                border-radius: var(--r-lg); box-shadow: var(--pop-shadow); }
  .pick-head { display: none; }
  .pick-search { position: static; margin-top: 0; }
  body.sheet-open { overflow: auto; }

  .report-card, .offers-section { padding: 26px; }
  .card-heading, .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .card-heading h2, .section-head h2 { font-size: 22px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

  /* Карта: на плитке — название, медиана, средняя и номер региона */
  .kz-map { gap: 5px; grid-auto-rows: minmax(108px, auto); }
  .kz-tile { aspect-ratio: auto; align-items: flex-start; justify-content: space-between; gap: 2px; padding: 12px 14px 10px; border-radius: 30px; }
  .kz-tile .t-abbr { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center;
                    height: 17px; padding: 0 7px 0 10px; border-radius: var(--r-pill); background: #F2F4F6; color: #0F141A;
                    font-size: 11.5px; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
                    background-image: linear-gradient(90deg, var(--sky) 0 4px, transparent 4px); }
  .kz-tile.is-none .t-abbr { opacity: .35; }
  .kz-tile > b, .kz-tile .t-med, .kz-tile .t-avg, .kz-tile .t-n, .kz-tile .t-empty { display: block; }
  /* Название — под знаком региона на всю ширину плитки: рядом со знаком
     остаётся ~50px, и «Қарағанды» рвалось посреди слова. */
  .kz-tile > b { margin-top: 20px; font-size: 11px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; }
  .kz-tile .t-med { margin-top: auto; font: 800 15px var(--f-display); letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
  .kz-tile .t-avg { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
  .kz-tile .t-n { font-size: 10.5px; opacity: .7; }
  .kz-tile .t-empty { margin-top: auto; font-size: 11px; color: var(--dust); }
  .kz-tile:not(.is-none):hover { transform: translateY(-2px); box-shadow: var(--tile-shadow); }
  .kz-tile.is-selected:hover { box-shadow: 0 0 0 2px var(--kerb), 0 0 0 4px var(--tile-ring); }
  .rank-wrap { display: none; }

  .section-controls { width: auto; flex-wrap: nowrap; }
  .section-controls select { flex: 0 0 auto; width: 200px; }
  .listings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  footer { flex-direction: row; justify-content: space-between; padding-bottom: 40px; }
  .filter-fab { display: none; }
}

/* ==========================================================================
   Десктоп
   ========================================================================== */
@media (min-width: 1024px) {
  .filters { grid-template-columns: 1.1fr 1.1fr 1fr 1.1fr 1fr; }
  .search-panel { display: grid; grid-template-columns: 1fr; }
  .dashboard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
  .analysis-rail { display: block; position: sticky; top: 16px; padding: 16px 12px; border-radius: var(--r-lg); background: var(--kerb); }
  .rail-title { padding: 4px 10px 10px; color: var(--dust); font-size: 11.5px; font-weight: 600; }
  .rail-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-pill);
               color: var(--fog); text-decoration: none; font-size: 14px; font-weight: 600; }
  .rail-link:hover, .rail-link.active { background: var(--cab); color: var(--chalk); }
  .rail-link .ico { width: 18px; height: 18px; color: var(--dust); }
  .rail-link.active .ico { color: var(--sky); }
  .rail-note { display: flex; gap: 8px; margin: 12px 6px 4px; padding-top: 12px; border-top: 1px solid var(--seam);
               color: var(--dust); font-size: 12px; line-height: 1.45; }
  .rail-note .dot { display: none; }
  .rail-note small { color: var(--dust); }
  .report-card + .report-card, .report-card + .offers-section, .offers-section { margin-top: 16px; }
  .market-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .market-title h1 { font-size: 44px; letter-spacing: -1.6px; max-width: 15ch; }
  .market-title > p { max-width: 38ch; margin: 0 0 6px; }
}

@media (min-width: 1100px) {
  .source-state { display: flex; align-items: center; gap: 8px; color: var(--dust); font-size: 12.5px; }
  .source-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(63,182,122,.15); }
}

@media (max-width: 370px) {
  .nav-link { padding: 10px 6px; font-size: 13px; }
  .brand > span { font-size: 17px; }
  .kz-tile .t-abbr { font-size: 12.5px; }
  .stat strong, .stat:nth-child(-n+2) strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Гараж и Обмен — те же поверхности и те же закругления
   ========================================================================== */
.garage-form, .exchange-form { display: flex; flex-direction: column; gap: 10px; }
.garage-url-input { display: block; width: 100%; min-height: 50px; padding: 0 20px; border: 1px solid transparent;
                    border-radius: var(--r-pill); background: var(--cab); color: var(--chalk);
                    font-size: 16px; font-weight: 500; outline: 0; }
.garage-url-input:focus { border-color: var(--sky); }
.garage-url-input::placeholder { color: var(--dust); }
.garage-error { margin: 10px 14px 0; color: var(--peer-above-ink); font-size: 13px; font-weight: 600; }
.garage-cars { display: grid; gap: 10px; margin-top: 14px; }
.garage-car { grid-template-areas: none; grid-template-columns: 1fr auto; align-items: start; }
.garage-car > div { display: block; }
.garage-car h3, .garage-car .price { grid-area: auto; }
.garage-car .meta { display: block; margin-top: 4px; }
.garage-car .source { display: inline-flex; margin-top: 10px; }
.garage-car .price { text-align: right; }
.remove-car { margin-top: 12px; min-height: 36px; padding: 0 16px; border: 1px solid var(--seam);
              border-radius: var(--r-pill); background: transparent; color: var(--fog); font-size: 13px; font-weight: 600; }
.remove-car:hover { border-color: var(--dust); color: var(--chalk); }
.verdict { font-weight: 700; }
.verdict-good { color: var(--ok); }
.verdict-bad { color: var(--peer-above-ink); }
.verdict-neutral { color: var(--dust); }
.exchange-result { margin-top: 14px; }
.exchange-sides { display: grid; grid-template-columns: 1fr; gap: 10px; }
.exchange-side { padding: 22px 24px; border: 1px solid var(--seam); border-radius: var(--r-lg); background: var(--kerb); box-shadow: var(--shadow); }
.exchange-side h3 { margin: 4px 0 6px; font: 700 17px/1.3 var(--f-display); }
.exchange-side .meta { color: var(--fog); font-size: 13px; }
.exchange-side .price { margin: 10px 0 4px; font: 800 20px var(--f-display); }
.exchange-side .source { display: inline-flex; margin-top: 10px; color: var(--sky); font-size: 13px; font-weight: 600; text-decoration: none; }
.exchange-winner { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), var(--shadow); }
.exchange-summary { margin: 12px 14px 0; color: var(--fog); font-size: 13px; }
@media (min-width: 641px) {
  .garage-form, .exchange-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .garage-form .garage-url-input { flex: 1; }
  .exchange-form .garage-url-input { flex: 1 1 260px; }
  .exchange-sides { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ==========================================================================
   Тахометр вместо стрелки-шеврона
   Закрыто — стрелка на 1000 об/мин, открыто — в красной зоне на 6000.
   Шкала 0–8000 идёт по дуге 270°: 1000 об/мин = −101°, 6000 = +67,5°.
   ========================================================================== */
:root { --redline: #E5484D; }
:root[data-theme="light"] { --redline: #C6282F; }
.gauge { width: 26px; height: 26px; flex: 0 0 auto; fill: none; stroke-linecap: round; }
.gauge .g-track { stroke: currentColor; stroke-width: 2; opacity: .5; }
.gauge .g-red { stroke: var(--redline); stroke-width: 2; }
.gauge .needle { stroke: currentColor; stroke-width: 2; transform-origin: 12px 12px; transform: rotate(-101.25deg);
                 transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), stroke .2s; }
.gauge .g-hub { fill: currentColor; stroke: none; }
[aria-expanded="true"] > .gauge .needle,
.geo-region[open] > summary .gauge .needle { transform: rotate(67.5deg); stroke: var(--redline); }
[aria-expanded="true"] > .gauge .g-hub,
.geo-region[open] > summary .gauge .g-hub { fill: var(--redline); }
.geo-region summary .gauge { margin-left: 4px; color: var(--dust); }

/* Сброс пункта фильтра: круглый × в правом верхнем углу, в строке подписи */
.clear-btn { position: absolute; top: -3px; right: 0; z-index: 2; display: grid; place-items: center;
             width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-pill);
             background: var(--cab-hi); color: var(--fog); }
.clear-btn::after { content: ""; position: absolute; inset: -9px; }
.clear-btn:hover { background: var(--seam); color: var(--chalk); }


/* ---------- «Подробнее» под объявлением ----------
   Кнопка и панель лежат поверх ссылки-подложки карточки (.source::after
   растянута на всю карточку), поэтому у них свой слой. */
.car-more { grid-area: more; position: relative; z-index: 1; justify-self: stretch; display: flex; align-items: center;
            justify-content: center; gap: 6px; min-height: 40px; margin-top: 4px; padding: 0 16px;
            border: 1px solid var(--seam); border-radius: var(--r-pill); background: transparent; color: var(--fog);
            font-size: 13px; font-weight: 600; }
.car-more:hover { color: var(--chalk); background: var(--cab); }
.car-more .ico { width: 16px; height: 16px; transition: transform .2s; }
.car-more[aria-expanded="true"] { color: var(--chalk); }
.car-more[aria-expanded="true"] .ico { transform: rotate(180deg); }
/* .car > div — display: contents для колонок карточки; панель — не колонка */
.car > .car-details { grid-area: details; position: relative; z-index: 1; display: grid; gap: 10px; margin-top: 4px;
               cursor: auto; }
.car.is-open:hover { border-color: var(--seam); background: var(--kerb); }

.det-block { padding: 14px 16px; border-radius: 20px; background: var(--cab); }
.det-block h4 { margin: 0 0 10px; color: var(--fog); font-size: 12.5px; font-weight: 700; }
.det-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.det-stats small { display: block; color: var(--dust); font-size: 11.5px; font-weight: 600; }
.det-stats strong { display: block; margin-top: 2px; font: 800 13px/1.25 var(--f-display); letter-spacing: -.3px;
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
.det-note { margin: 10px 0 0; color: var(--fog); font-size: 12.5px; line-height: 1.45; }
.det-block > .det-note:first-child { margin-top: 0; }
.det-range { margin-top: 14px; }
.det-track { position: relative; height: 6px; border-radius: var(--r-pill);
             background: linear-gradient(90deg, var(--peer-below-bg), var(--seam), var(--peer-above-bg)); }
.det-med { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--fog); }
.det-this { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
            background: var(--sky); box-shadow: 0 0 0 3px var(--cab); }
.det-ends { display: flex; justify-content: space-between; margin-top: 6px; color: var(--dust); font-size: 11.5px;
            font-variant-numeric: tabular-nums; }
.det-chart { display: flex; align-items: center; gap: 14px; }
.spark { flex: none; width: 120px; height: 36px; overflow: visible; }
.spark path { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
              vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--sky); }
.det-line { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; }
.det-line.is-down { color: var(--peer-below-ink); }
.det-line.is-up { color: var(--peer-above-ink); }

/* Закрытая панель: пример данных размыт, поверх — замок и предложение */
.det-locked { position: relative; border-radius: 20px; overflow: hidden; }
.det-sample { display: grid; gap: 10px; filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.det-sample-tag { position: absolute; top: 10px; left: 12px; z-index: 2; padding: 3px 10px; border-radius: var(--r-pill);
                  background: var(--cab-hi); color: var(--fog); font-size: 11px; font-weight: 700; }
.det-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 6px; padding: 18px; text-align: center;
            background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--kerb) 70%, transparent) 30%); }
.det-lock-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%;
                background: var(--sky-wash); color: var(--sky); }
.det-lock-ico .ico { width: 22px; height: 22px; }
.det-lock b { font: 800 15px/1.3 var(--f-display); letter-spacing: -.2px; }
.det-lock p { max-width: 34ch; margin: 0; color: var(--fog); font-size: 13px; line-height: 1.45; }
.det-lock .primary-button { min-height: 44px; margin-top: 8px; padding: 0 22px; font-size: 14px; text-decoration: none; }

.car.is-visited .car-more { color: var(--seen-meta); border-color: var(--seen-line); }

@media (min-width: 641px) {
  .car-more { justify-self: start; }
  /* Похожие — во всю ширину, история цены и тренд — рядом */
  .car > .car-details, .det-sample { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-details > .det-block:first-child, .det-sample > .det-block:first-child,
  .car-details > .det-note, .car-details > .det-locked { grid-column: 1 / -1; }
}

/* ---------- Гараж: полный расклад по каждой машине ---------- */
.garage-car > .car-details { grid-area: auto; grid-column: 1 / -1; margin-top: 12px; }
.garage-car .peer { margin-top: 8px; }
.garage-car .remove-car { position: relative; z-index: 1; }
.garage-was { margin-top: 2px; color: var(--dust); font-size: 12px; text-align: right; text-decoration: line-through;
              font-variant-numeric: tabular-nums; }
.garage-sold { color: var(--stale); font-weight: 600; }
.garage-lock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 22px; text-align: center; }
.garage-lock b { font: 800 18px/1.3 var(--f-display); letter-spacing: -.3px; }
.garage-lock p { max-width: 46ch; margin: 0; color: var(--fog); font-size: 14px; line-height: 1.5; }
.garage-lock .primary-button { margin-top: 8px; text-decoration: none; }
@media (min-width: 641px) {
  .garage-car > .car-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}