/* Redesign 2026-05-08 — soft-modern overrides поверх app.css/public.css.
 * Загружается ПОСЛЕДНИМ в base.html, чтобы перекрывать старые radius/colors.
 * Никакой новой бизнес-логики — только визуал.
 *
 * Цели:
 *  1. Заменить старые pill'ы (radius 4-10px, тёмные accents) на soft (12-24px).
 *  2. Заменить таблицу-карточку на rounded-2xl panels.
 *  3. Hero-block: title + counter справа.
 *  4. QuickTools: раскрываемые блоки «Регионы» / «Избранное».
 *  5. Floating bottom-bar на мобиле (Избранное + Фильтры).
 *  6. Sticky filter-summary при применённых фильтрах.
 */

/* ── Hero-block (главная: «Актуальные заявки на перевозку») ───────────── */
/* JSX: rounded-3xl panel с h1 слева и counter справа в боксе. */
.page-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 26px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.page-hero h1,
.page-hero .hero-title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.page-hero p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.5;
}
.hero-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: 14px 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  min-width: 140px;
}
.hero-counter .counter-value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}
.hero-counter .counter-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .page-hero {
    grid-template-columns: 1fr;
    padding: 18px 20px;
    gap: 14px;
  }
  .page-hero h1, .page-hero .hero-title { font-size: 22px; }
  .hero-counter { align-items: flex-start; text-align: left; padding: 10px 14px; }
  .hero-counter .counter-value { font-size: 24px; }
}

/* ── Hero regions (override) ───────────────────────────────────────── */
.hero-regions {
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.hero-regions-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.hero-regions-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.hero-regions-grid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
  gap: 12px;
  min-width: 0;
}
.hero-regions-grid a:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
}
.hero-regions-grid .region-name {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-regions-grid .region-count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hero-regions-grid a:hover .region-count { color: var(--accent-text); }

@media (max-width: 600px) {
  .hero-regions { padding: 14px 16px; }
  .hero-regions-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
  }
  .hero-regions-grid a { padding: 8px 12px; }
  .hero-regions-grid .region-name { font-size: 13px; }
  .hero-regions-grid .region-count { font-size: 12px; }
}

/* ── VK hero (override — soft, без терракот) ──────────────────────────── */
.vk-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--vk-bg);
  border: 1px solid var(--vk-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.vk-hero-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vk-hero-text strong { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.005em; }
.vk-hero-text span { font-size: 13px; color: var(--text-muted); }
.vk-hero-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  background: var(--vk-text);
  color: #ffffff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 150ms var(--ease);
}
.vk-hero-cta:hover { opacity: 0.9; color: #ffffff; text-decoration: none; }
@media (max-width: 600px) {
  .vk-hero { flex-direction: column; align-items: stretch; padding: 12px 14px; }
  .vk-hero-cta { justify-content: center; height: 44px; }
}

/* ── Nearby regions (override) ────────────────────────────────────────── */
.nearby-regions {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
}
.nearby-regions-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--info-text);
  line-height: 1.4;
}
.nearby-regions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.nearby-regions-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  gap: 8px;
  min-width: 0;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.nearby-regions-list a:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
}
.nearby-region-name {
  font-size: 14px; font-weight: 600;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nearby-region-count {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nearby-regions-list a:hover .nearby-region-count { color: var(--accent-text); }

/* ── Orders: dual rendering ──────────────────────────────────────────── */
/* По умолчанию (≤1200): cards visible, table hidden.
 * На ≥1201: table visible, cards hidden. */
.orders-cards { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
.loads-table-wrap { display: none; }

@media (min-width: 1201px) {
  .orders-cards { display: none; }
  .loads-table-wrap {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin: 0 0 18px;
  }
  /* table-layout: fixed → колонки строго по colgroup-ширинам, не растягиваются
   * по длинному content. Иначе info-block в груз-колонке растягивает Контакт. */
  .loads-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.4;
  }
  /* Ширины колонок: Опубл / Откуда / Куда / Маршрут / Груз / Ставка / Контакт. */
  .loads-table thead th:nth-child(1) { width: 9%; }    /* Опубл — «вчера 17:06» nowrap */
  .loads-table thead th:nth-child(2) { width: 13%; }
  .loads-table thead th:nth-child(3) { width: 13%; }
  .loads-table thead th:nth-child(4) { width: 9%; }    /* Маршрут — узкий */
  .loads-table thead th:nth-child(5) { width: 25%; }   /* Груз / доп.информация */
  .loads-table thead th:nth-child(6) { width: 12%; }
  .loads-table thead th:nth-child(7) { width: 19%; }   /* Контакт — phone+показать */

  .loads-table thead th {
    text-align: left;
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 16px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
  }
  .loads-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);     /* visual-разделитель */
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    overflow: hidden;       /* всё что вылезло — режется по границе ячейки */
  }
  .loads-table tbody td:last-child { border-right: 0; }
  .loads-table thead th {
    border-right: 1px solid var(--border-soft);
  }
  .loads-table thead th:last-child { border-right: 0; }
  .loads-table tbody tr:last-child td { border-bottom: none; }
  .loads-table tbody tr:hover td { background: var(--surface-2); }

  .loads-table .col-date {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
    overflow-wrap: normal;
    word-wrap: normal;
  }
  .loads-table .col-date .muted {
    display: block; font-size: 11px; margin-top: 2px; white-space: normal;
  }
  .loads-table .endpoint-city {
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .loads-table .endpoint-rest {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  /* «Маршрут» — узкая колонка: distance над «на карте», обе по ширине ячейки. */
  .loads-table .col-route { padding-left: 12px; padding-right: 12px; }
  .loads-table .col-route .distance-badge {
    display: flex;
    width: 100%;
    margin: 0 0 6px;
    justify-content: center;
  }
  .loads-table .col-route .route-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0 8px;
  }

  /* «Груз / доп.информация» — сверху meta-line, снизу info-block (warm yellow). */
  .loads-table .meta-line {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .loads-table .info-block {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  .loads-table .info-block .info-block-text { word-break: break-word; overflow-wrap: anywhere; }
  .loads-table .info-block-label { font-weight: 600; }

  /* Контакт — кнопка вписана в свою колонку (16%), не вылазит. */
  .loads-table .col-phone .phone-reveal,
  .loads-table .col-phone .tg-contact {
    max-width: 100%;
    width: 100%;
    justify-content: center;
  }
}

/* ── Order card (mobile, ≤1200) — JSX RequestCard layout ───────────── */
.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.order-card-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.order-card-time .icon { color: var(--text-muted); }
.order-card-time time { font-variant-numeric: tabular-nums; }

.order-card-route .route-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.005em;
  word-break: break-word;
}
.order-card-route .route-regions {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}

.order-card-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.order-card-meta .meta-text {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
}

.order-card-info {
  padding: 8px 10px;
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.45;
}
.order-card-info .info-block-label { font-weight: 700; }

.order-card-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-top: 2px;
}
.order-card-rate .rate-line { display: inline-flex; align-items: baseline; gap: 6px; }
.order-card-rate .rate-line-alt { font-size: 13px; }
.order-card-rate .rate-val {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.order-card-rate .rate-val-alt {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.order-card-rate .rate-label {
  font-size: 12px;
  color: var(--text-muted);
}

.order-card-contact { margin-top: 2px; }
.order-card-contact .phone-reveal,
.order-card-contact .tg-contact { width: 100%; height: 44px; justify-content: center; font-size: 14px; }

/* Desktop rate styles (rate-val в таблице) */
@media (min-width: 1201px) {
  .loads-table .rate-line { display: flex; align-items: baseline; gap: 6px; line-height: 1.2; }
  .loads-table .rate-line-alt { margin-top: 4px; }
  .loads-table .rate-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-strong);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }
  .loads-table .rate-val-alt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }
  .loads-table .rate-label { font-size: 11px; color: var(--text-muted); }
}

/* ── Phone reveal / TG / Route / Distance (button-pills override) ────── */
.phone-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background 150ms var(--ease);
  letter-spacing: -0.01em;
}
.phone-reveal:hover { background: var(--accent-hover); color: var(--on-accent); }
.phone-reveal .phone-masked { font-family: var(--font-mono); font-weight: 700; }
.phone-reveal .phone-action { font-size: 11px; opacity: 0.85; font-weight: 500; }

.tg-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--tg-bg);
  color: var(--tg-text);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 150ms var(--ease);
}
.tg-contact::before { content: "✈"; font-size: 12px; flex-shrink: 0; }
.tg-contact:hover { background: var(--tg-hover-bg); color: var(--tg-text); text-decoration: none; }
.tg-contact .tg-arrow { color: var(--tg-text); opacity: 0.7; font-size: 11px; }

.route-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  background: var(--map-bg);
  color: var(--map-text);
  border: 1px solid var(--map-border);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: background 150ms var(--ease);
}
.route-btn::after { content: "↗"; font-size: 13px; }
.route-btn:hover { background: var(--map-hover-bg); color: var(--map-text); text-decoration: none; }

.distance-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-bottom: 6px;
  padding: 0 10px;
  background: var(--accent-weak);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

/* ── Sticky filter summary (JSX FilterSummary) ──────────────────────── */
/* Виден только на mobile (≤720). Прилипает к top при скролле.
 * Структура: title (filter_label) + meta (количество) + favourite-toggle. */
.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.filter-summary-text {
  flex: 1;
  min-width: 0;
}
.filter-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-summary-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}
.filter-summary .favourite-toggle-inline {
  flex-shrink: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--radius-pill);
}

@media (max-width: 720px) {
  .filter-summary {
    position: sticky;
    top: 8px;
    z-index: 20;
    backdrop-filter: blur(8px);
    /* surface-токен меняется по теме автоматически (light/dark) */
    background: var(--surface);
  }
}

/* ── Floating mobile bottom-bar (Избранное + Фильтры) — JSX-style pills ── */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.mobile-bottom-bar-inner {
  display: inline-flex;
  gap: 10px;
  pointer-events: auto;
  margin: 0 auto;
  width: 100%;
  max-width: 460px;
  justify-content: center;
}
.mobile-bottom-bar a,
.mobile-bottom-bar button {
  flex: 1;
  height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-pill);   /* pill-shape, как в JSX */
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 150ms var(--ease), transform 100ms var(--ease);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
.mobile-bottom-bar a:active,
.mobile-bottom-bar button:active { transform: scale(0.97); }

.bb-favourites {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  flex: 0 0 auto;       /* «Избранное» компактнее, не растягивается */
  padding: 0 20px;
}
.bb-favourites:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.bb-filters {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  flex: 1 1 auto;       /* «Фильтры» — главная кнопка, шире */
}
.bb-filters:hover { background: var(--accent-hover); }

@media (max-width: 720px) {
  .mobile-bottom-bar { display: block; }
  body { padding-bottom: 100px; }
  /* На страницах БЕЗ фильтр-формы скрываем кнопку «Фильтры», оставляем
   * только «Избранное» по центру. */
  body:not(:has([data-filters-sheet])) .bb-filters { display: none; }
  body:not(:has([data-filters-sheet])) .bb-favourites { flex: 0 0 auto; min-width: 180px; }
  /* Если cookie-bar открыт — поднимаем bottom-bar чтобы не перекрывались. */
  body:has(.cookie-bar:not([hidden])) .mobile-bottom-bar {
    bottom: 64px;
  }
}

/* ── QuickTools (главная) — JSX desktop.jsx QuickTools panel ─────────── */
/* Collapsible панель с 2 кнопками сверху: «Избранные сохранения» и
 * «Популярные регионы». При клике на одну — раскрывается панель ниже. */
.quick-tools {
  margin: 0 0 18px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.quick-tools-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.quick-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease),
              color 150ms var(--ease);
}
.quick-toggle:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.quick-toggle[aria-expanded="true"] {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent-text);
}
.quick-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.quick-toggle-chevron {
  transition: transform 200ms var(--ease);
  flex-shrink: 0;
}
.quick-toggle[aria-expanded="true"] .quick-toggle-chevron {
  transform: rotate(180deg);
}
.quick-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.quick-toggle-count[hidden] { display: none; }

/* Раскрываемые панели — появляются с border-top через slide-down. */
.quick-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.quick-panel[hidden] { display: none; }

.quick-panel-head { margin-bottom: 12px; }
.quick-panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.quick-panel-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .quick-tools-toggles { grid-template-columns: 1fr; }
}

/* Favourites — теперь живёт внутри quick-panel, без своего фона. */
.favourites-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.favourites-section h2 { display: none; }   /* заголовок дублирует quick-panel-title */
.favourite-list-empty {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Page-intro override ─────────────────────────────────────────────── */
.page-intro {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 880px;
}
.page-intro a { color: var(--text); border-bottom: 1px dotted var(--text-muted); transition: color 150ms; }
.page-intro a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Related links (override) ────────────────────────────────────────── */
.related-links {
  margin-top: 32px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.related-links h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 0;
  padding: 0;
}
.related-links .link-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
}
.related-links .link-list a {
  display: block;
  padding: 6px 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 150ms var(--ease);
}
.related-links .link-list a:hover { color: var(--accent); text-decoration: none; }

/* ── Pagination — JSX desktop/mobile style ──────────────────────────── */
/* Desktop: «Показано X-Y из N» слева, [‹] [1][2][3]…[N] [›] справа.
 * Mobile: panel с заголовком сверху и actions полной шириной снизу. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pager-info { min-width: 0; }
.pager-info-current {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.pager-info-range {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}
.pager-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pager-link, .pager-current, .pager-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease),
              color 150ms var(--ease);
  user-select: none;
}
.pager-link:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}
.pager-current {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent-text);
}
.pager-arrow[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 24px;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 720px) {
  .pager {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pager-actions {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    width: 100%;
  }
  .pager-actions .pager-link:not(.pager-arrow),
  .pager-actions .pager-current,
  .pager-actions .pager-ellipsis {
    grid-column: auto;
  }
  .pager-actions > .pager-arrow:first-child { grid-column: 1; }
  .pager-actions > .pager-arrow:last-child { grid-column: 3; }
  /* Pages по центру в одну строку, overflow scroll если не помещаются. */
  .pager-actions .pager-link:not(.pager-arrow),
  .pager-actions .pager-current,
  .pager-actions .pager-ellipsis {
    grid-row: 1;
  }
}

/* ── Misc cleanup ───────────────────────────────────────────────────── */
.breadcrumbs {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { margin: 0 6px; color: var(--border-strong); }

/* «Запомнить регион/маршрут» — favourite-toggle на region/route page */
.favourite-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              border-color 150ms var(--ease);
}
.favourite-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.favourite-toggle[aria-pressed="true"] {
  background: var(--accent-weak);
  color: var(--accent-text);
  border-color: var(--accent);
}