/* ════════════════════════════════════════════════════════════════
   АнтиАвито — PREMIUM DARK v1.0
   «Живое фото»: глубокий графит, физически достоверные тени,
   стеклянные поверхности, зрелый терракотовый акцент.

   Файл подключается ПОСЛЕ встроенных стилей в base.html и
   аккуратно перекрывает их. Старые стили можно не трогать.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. ДИЗАЙН-ТОКЕНЫ ─────────────────────────────────────────── */
:root {
    /* Поверхности: матовый графит → приподнятые слои */
    --bg:            #0B0B0C;   /* базовая «столешница» */
    --surface-1:     #111113;   /* лёгкое возвышение */
    --surface-2:     #16161A;   /* карточки */
    --surface-3:     #1A1A1E;   /* hover-слой / панели */
    --dark:          #0B0B0C;   /* шапка/футер (перекрывает старый сине-чёрный) */
    --white:         #16161A;   /* ВАЖНО: старые «белые» панели становятся графитовыми */

    /* Текстовая иерархия */
    --text:          #E5E7EB;   /* первичный */
    --muted:         #9CA3AF;   /* вторичный: даты, города */
    --text-faint:    #6B7280;   /* третичный */

    /* Линии и разделители — ультратонкие, мягкие */
    --border:        #26262B;
    --border-soft:   rgba(255, 255, 255, 0.05);
    --border-hair:   rgba(255, 255, 255, 0.07);

    /* Зрелый акцент: глубокая терракота вместо кричащего красного */
    --red:           #C2410C;
    --orange:        #C2410C;
    --accent:        linear-gradient(135deg, #C2410C 0%, #9A3412 100%);
    --accent-solid:  #C2410C;
    --accent-hover:  #D9480F;
    --accent-press:  #9A3412;
    --accent-soft:   rgba(194, 65, 12, 0.14);
    --accent-ring:   rgba(194, 65, 12, 0.30);

    /* Физически достоверная многослойная тень */
    --shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.15);
    --shadow-lift:
        0 8px 12px -2px rgba(0, 0, 0, 0.22),
        0 4px 8px -2px rgba(0, 0, 0, 0.14),
        0 32px 48px -8px rgba(0, 0, 0, 0.38);
    --shadow-glass:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 20px 25px -5px rgba(0, 0, 0, 0.15);

    /* Геометрия и движение */
    --radius:        10px;
    --radius-sm:     8px;
    --radius-lg:     12px;
    --ease-photo:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── 2. БАЗА: «живой» матовый фон и типографика ───────────────── */
html { color-scheme: dark; }

body {
    font-family: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    /* Не плоская заливка, а мягкое студийное освещение сверху */
    background:
        radial-gradient(1100px 500px at 50% -10%, rgba(255, 255, 255, 0.045), transparent 60%),
        radial-gradient(800px 400px at 85% 0%, rgba(194, 65, 12, 0.05), transparent 55%),
        var(--bg) !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; color: var(--text); }
::selection { background: var(--accent-soft); color: #FDBA74; }

/* Скроллбар под стать поверхности */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A2A30; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3A3A42; }

/* ── 3. ШАПКА: тёмное стекло ──────────────────────────────────── */
header {
    background: rgba(11, 11, 12, 0.78) !important;
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
    border-bottom: 1px solid var(--border-hair);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px -12px rgba(0, 0, 0, 0.6) !important;
}
.logo { color: #F4F4F5 !important; font-weight: 800; }
.logo span { color: var(--accent-solid) !important; }

.search-form input {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.18s var(--ease-photo), box-shadow 0.18s var(--ease-photo);
}
.search-form input::placeholder { color: var(--text-faint); }
.search-form input:focus {
    border-color: var(--accent-solid) !important;
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.search-form button {
    background: var(--accent-solid) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(194, 65, 12, 0.35);
    transition: background 0.18s var(--ease-photo), transform 0.18s var(--ease-photo);
}
.search-form button:hover { background: var(--accent-hover) !important; transform: translateY(-1px); }

.nav-right a { color: var(--muted) !important; }
.nav-right a:hover { color: var(--text) !important; }

.btn-post,
.btn-login,
.btn-admin-panel {
    background: var(--accent-solid) !important;
    color: #FFF7ED !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 10px rgba(194, 65, 12, 0.30);
    transition: background 0.18s var(--ease-photo), transform 0.18s var(--ease-photo), box-shadow 0.18s var(--ease-photo);
}
.btn-post:hover,
.btn-login:hover,
.btn-admin-panel:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(194, 65, 12, 0.40);
}
.btn-post:active { transform: translateY(0); background: var(--accent-press) !important; }

/* ── 4. КАТЕГОРИИ: чистое стекло вместо пёстрых градиентов ────── */
.categories-bar { background: transparent !important; }

.category-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%),
        var(--surface-1) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-glass) !important;
    transition: transform 0.28s var(--ease-photo), box-shadow 0.28s var(--ease-photo), border-color 0.28s var(--ease-photo) !important;
}
.category-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--border-hair) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        var(--shadow-lift) !important;
}
.category-card.active {
    outline: 2px solid var(--accent-solid) !important;
    outline-offset: -2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 4px var(--accent-soft),
        var(--shadow) !important;
}
.category-title {
    /* Подпись утоплена в графит, без сине-чёрной плашки */
    background: linear-gradient(to top,
        rgba(8, 8, 9, 0.88) 0%,
        rgba(8, 8, 9, 0.45) 55%,
        rgba(8, 8, 9, 0) 100%) !important;
    color: #F4F4F5 !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
.category-img {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
    transition: transform 0.32s var(--ease-photo) !important;
}
.category-card:hover .category-img { transform: scale(1.05) !important; }

/* ── 5. КАРТОЧКИ ТОВАРОВ: физический объект на столе ──────────── */
.card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    transition: transform 0.28s var(--ease-photo), box-shadow 0.28s var(--ease-photo), border-color 0.28s var(--ease-photo) !important;
}
.card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--border-hair) !important;
    box-shadow: var(--shadow-lift) !important;
}
.card-img-wrap {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 70%),
        #101013 !important;
    border-bottom: 1px solid var(--border-soft);
}
.card-title { color: var(--text) !important; font-weight: 600; }
.card-price {
    color: #EA580C !important;          /* терракота, читаемая на графите */
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.card-meta { color: var(--muted) !important; }

.verified-badge {
    background: rgba(22, 101, 52, 0.85) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(134, 239, 172, 0.25);
}
.pin-badge {
    background: var(--accent) !important;
    box-shadow: 0 2px 10px rgba(194, 65, 12, 0.40) !important;
}

.btn-verify {
    background: var(--accent-solid) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: background 0.18s var(--ease-photo), transform 0.18s var(--ease-photo);
}
.btn-verify:hover { background: var(--accent-hover) !important; opacity: 1 !important; transform: translateY(-1px); }
.btn-verify.outline {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
}
.btn-verify.outline:hover { border-color: var(--accent-solid) !important; color: #EA580C !important; }

/* ── 6. САЙДБАР, РЕКЛАМА, СЕКЦИИ ──────────────────────────────── */
.sidebar-block,
.sidebar-ad-card,
.ad-slot,
.ad-slot.ad-feed-item {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}
.sidebar-ad-card { transition: transform 0.28s var(--ease-photo), box-shadow 0.28s var(--ease-photo); }
.sidebar-ad-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift) !important; }
.sidebar-ad-img { background: #101013 !important; }
.sidebar-ad-title { color: var(--text) !important; }
.sidebar-ad-desc { color: var(--muted) !important; }
.sidebar-ad-btn { background: var(--accent-solid) !important; border-radius: var(--radius-sm) !important; }
.sidebar-ad-btn:hover { background: var(--accent-hover) !important; }
.sidebar-ad-label { background: rgba(0, 0, 0, 0.65) !important; color: #FDBA74 !important; }

.sidebar-block h4 { color: var(--text) !important; }
.stat-row { border-bottom: 1px solid var(--border-soft) !important; color: var(--muted); }
.stat-row .val { color: #EA580C !important; }

.section-header h2 { color: var(--text); }
.section-header a { color: #EA580C !important; }
.pagination a { color: #EA580C !important; }
.pagination span { color: var(--muted) !important; }

.ad-banner {
    background: var(--surface-1) !important;
    border: 1px dashed var(--border) !important;
    color: var(--text-faint) !important;
}
.ad-slot .ad-text-inner { color: var(--text) !important; }
.ad-slot .ad-text-inner a { color: #EA580C !important; }

/* ── 7. ФОРМЫ: матовые поля, мягкий фокус ─────────────────────── */
.form-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}
.form-card h1 { color: var(--text); }
.form-group label { color: var(--muted) !important; }
.form-group input,
.form-group textarea,
.form-group select {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.18s var(--ease-photo), box-shadow 0.18s var(--ease-photo);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-faint); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent-solid) !important;
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn-submit {
    background: var(--accent-solid) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 10px rgba(194, 65, 12, 0.30);
    transition: background 0.18s var(--ease-photo), transform 0.18s var(--ease-photo);
}
.btn-submit:hover { background: var(--accent-hover) !important; opacity: 1 !important; transform: translateY(-1px); }
.form-footer { color: var(--muted) !important; }
.form-footer a { color: #EA580C !important; }

/* ── 8. ФУТЕР И СЛУЖЕБНОЕ ─────────────────────────────────────── */
footer {
    background: var(--bg) !important;
    border-top: 1px solid var(--border-hair);
}
.footer-links h4 { color: var(--text) !important; }
.footer-links a { color: var(--muted) !important; }
.footer-links a:hover { color: var(--text) !important; }
.footer-bottom { border-top: 1px solid var(--border-soft) !important; color: var(--text-faint) !important; }

.flash-wrap .flash,
.flash {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--accent-solid) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow) !important;
}
.flash.success { border-left-color: #16A34A !important; }
.flash.error   { border-left-color: #DC2626 !important; }
.flash.info    { border-left-color: #2563EB !important; }

/* Фокус с клавиатуры — видимый, но деликатный */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent-ring);
    outline-offset: 2px;
}

/* Уважение к пользователям с отключённой анимацией */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 2. СТРАНИЦЫ КАТЕГОРИЙ — единый вид как на главной
   (Недвижимость, Авто, Здоровье, Электроника, Одежда, Мебель,
    Животные, Спорт, Вакансии)
   ════════════════════════════════════════════════════════════════ */

/* ── 9. Логотип: не вылезает за шапку ─────────────────────────── */
.logo { display: flex !important; align-items: center; gap: 0.55rem; }
header .logo img {
    height: 38px !important;
    width: auto !important;
    max-height: 38px !important;
    object-fit: contain;
    display: block;
}

/* ── 10. Хиро-блоки категорий: убираем цветные заливки ────────── */
/* Недвижимость (инлайн тёмно-синий градиент) */
div[style*="135deg,#1e293b"] {
    background:
        radial-gradient(900px 320px at 50% -20%, rgba(255, 255, 255, 0.05), transparent 65%),
        transparent !important;
}
/* Здоровье (зелёный травяной хедер) и зелёная страница */
.hl-head { background: transparent !important; }
.hl-head::before { display: none !important; }
.hl-page { background: transparent !important; }
.hl-page-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
.hl-page-btn.active { background: var(--accent-solid) !important; border-color: var(--accent-solid) !important; color: #FFF7ED !important; }
/* Электроника / Вакансии / Спорт / Животные */
.el-hero { background: transparent !important; }
.vc-hero { background: transparent !important; }
.sp-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
        var(--surface-1) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-glass) !important;
}
.an-page-wrap { background: transparent !important; }
.an-hub {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow) !important;
}

/* ── 11. Заголовок страницы: по центру, иконка ×1.5 ───────────── */
.auto-header h1, .el-hero h1, .vc-hero h1 {
    justify-content: center !important;
    text-align: center !important;
    color: var(--text) !important;
}
.el-hero-inner, .vc-hero-inner { text-align: center; }
.el-hero-bread, .vc-hero-bread { justify-content: center; color: var(--text-faint) !important; }
.el-hero-bread a, .vc-hero-bread a { color: var(--muted) !important; }
/* Иконка категории в заголовке — в полтора раза крупнее */
.auto-header h1 img,
.el-hero h1 img,
.vc-hero h1 img,
.sp-hero h1 img,
.hl-head h1 img,
div[style*="135deg,#1e293b"] h1 img,
h1 img[src*="cats/"] {
    height: 66px !important;
    width: auto !important;
    max-height: 66px !important;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
.auto-header .total-badge {
    background: var(--surface-3) !important;
    color: var(--muted) !important;
    border: 1px solid var(--border-soft);
}

/* ── 12. Карточки подкатегорий: стекло, как на главной ────────── */
.realty-subcat-card, .subcat-pill, .el-subcat-card, .cl-subcat-card,
.fr-subcat-card, .an-subcat-card, .sp-subcat-card, .vc-subcat-card,
.hl-subcat-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%),
        var(--surface-1) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-glass) !important;
    transition: transform 0.28s var(--ease-photo), box-shadow 0.28s var(--ease-photo), border-color 0.28s var(--ease-photo) !important;
}
.realty-subcat-card:hover, .subcat-pill:hover, .el-subcat-card:hover,
.cl-subcat-card:hover, .fr-subcat-card:hover, .an-subcat-card:hover,
.sp-subcat-card:hover, .vc-subcat-card:hover, .hl-subcat-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--border-hair) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-lift) !important;
}
.subcat-pill.active, .el-subcat-card.active, .cl-subcat-card.active,
.fr-subcat-card.active, .an-subcat-card.active, .sp-subcat-card.active,
.vc-subcat-card.active, .hl-subcat-card.active, .realty-subcat-card.active {
    outline: 2px solid var(--accent-solid) !important;
    outline-offset: -2px;
    border-color: transparent !important;
    box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%),
        var(--surface-1) !important;
}
/* Подписи на карточках — графитовый градиент вместо сине-чёрного */
.realty-subcat-name, .subcat-pill span, .an-subcat-name, .sp-subcat-name,
.fr-subcat-label, .el-subcat-card span, .cl-subcat-card span,
.vc-subcat-card span {
    background: linear-gradient(to top,
        rgba(8, 8, 9, 0.88) 0%,
        rgba(8, 8, 9, 0.45) 55%,
        rgba(8, 8, 9, 0) 100%) !important;
    color: #F4F4F5 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
/* Здоровье: карточки с иконкой и текстом без оверлея */
.hl-subcat-card { color: var(--text) !important; }
.hl-subcat-card * { color: var(--text) !important; }
.hl-subcat-card img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.hl-subcat-card:hover { border-color: var(--border-hair) !important; }

/* Фото внутри карточек подкатегорий — лёгкая «предметная» тень */
.realty-subcat-card img, .subcat-pill img, .el-subcat-card img,
.cl-subcat-card img, .fr-subcat-img, .an-subcat-card img,
.sp-subcat-card img, .vc-subcat-card img {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

/* ── 13. Сетки подкатегорий: равномерно заполняют ширину ──────── */
.auto-subcats, .realty-subcats, .el-subcats-grid,
.an-subcat-grid, .sp-subcat-grid, .vc-subcats-grid, .hl-subcats-grid,
.fr-subcats-row, .cl-subcats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.85rem !important;
    width: 100%;
}
/* Каждая карточка растягивается — последний ряд заполняет всю ширину, дыр справа нет */
.auto-subcats > *, .realty-subcats > *, .el-subcats-grid > *,
.an-subcat-grid > *, .sp-subcat-grid > *, .vc-subcats-grid > *,
.hl-subcats-grid > *, .fr-subcats-row > *, .cl-subcats-row > * {
    flex: 1 1 150px !important;
    min-width: 0 !important;
}
/* Карточка обёрнута в <a> (animals, sport, clothing): ссылка тянется, карточка внутри заполняет её */
.an-subcat-grid > a, .sp-subcat-grid > a, .cl-subcats-row > a { display: flex !important; }
.an-subcat-grid > a > div, .sp-subcat-grid > a > div, .cl-subcats-row > a > div {
    flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important;
}

/* ── МОБИЛЬНАЯ ВЕРСИЯ: подкатегории одной строкой со свайпом (как категории на главной) ── */
@media (max-width: 768px) {
    .auto-subcats, .realty-subcats, .el-subcats-grid,
    .an-subcat-grid, .sp-subcat-grid, .vc-subcats-grid, .hl-subcats-grid,
    .fr-subcats-row, .cl-subcats-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .auto-subcats::-webkit-scrollbar, .realty-subcats::-webkit-scrollbar,
    .el-subcats-grid::-webkit-scrollbar, .an-subcat-grid::-webkit-scrollbar,
    .sp-subcat-grid::-webkit-scrollbar, .vc-subcats-grid::-webkit-scrollbar,
    .hl-subcats-grid::-webkit-scrollbar, .fr-subcats-row::-webkit-scrollbar,
    .cl-subcats-row::-webkit-scrollbar { display: none; }
    .auto-subcats > *, .realty-subcats > *, .el-subcats-grid > *,
    .an-subcat-grid > *, .sp-subcat-grid > *, .vc-subcats-grid > *,
    .hl-subcats-grid > *, .fr-subcats-row > *, .cl-subcats-row > * {
        flex: 0 0 auto !important;
        width: 135px !important;
        scroll-snap-align: start;
    }
}

/* ── 14. Марки авто: фарфоровые чипы, ровная сетка во всю ширину ─ */
.brands-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 0.6rem !important;
    width: 100%;
}
.brand-badge {
    width: 100% !important;
    justify-content: center !important;
    background: #F4F4F5 !important;          /* логотипы марок тёмные — оставляем светлый «фарфор» */
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: var(--radius) !important;
    color: #1F2430 !important;
    box-shadow: var(--shadow) !important;
    transition: transform 0.2s var(--ease-photo), box-shadow 0.2s var(--ease-photo) !important;
}
.brand-badge:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lift) !important;
    border-color: var(--accent-soft) !important;
}

/* ── 15. Переключатель темы ───────────────────────────────────── */
.theme-toggle {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s var(--ease-photo), background 0.2s var(--ease-photo);
}
.theme-toggle:hover { transform: translateY(-1px); background: #232329; }
.aa-theme-btn {
    flex: 1; padding: 0.6rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-1);
    color: var(--text); font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: all 0.18s var(--ease-photo);
}
.aa-theme-btn.active {
    border-color: var(--accent-solid); color: #FFF7ED;
    background: var(--accent-solid);
    box-shadow: 0 2px 10px rgba(194, 65, 12, 0.30);
}

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 3. СВЕТЛАЯ ТЕМА — «живое фото» на тёплой матовой бумаге
   Включается атрибутом  <html data-theme="light">
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] {
    --bg:            #F6F4F1;
    --surface-1:     #FCFBF9;
    --surface-2:     #FFFFFF;
    --surface-3:     #FFFFFF;
    --dark:          #F6F4F1;
    --white:         #FFFFFF;

    --text:          #1F2430;
    --muted:         #5B6472;
    --text-faint:    #9AA1AC;

    --border:        #E4E1DB;
    --border-soft:   rgba(20, 24, 33, 0.07);
    --border-hair:   rgba(20, 24, 33, 0.10);

    --shadow:
        0 4px 6px -1px rgba(31, 36, 48, 0.07),
        0 2px 4px -1px rgba(31, 36, 48, 0.04),
        0 20px 25px -5px rgba(31, 36, 48, 0.09);
    --shadow-lift:
        0 8px 12px -2px rgba(31, 36, 48, 0.10),
        0 4px 8px -2px rgba(31, 36, 48, 0.07),
        0 32px 48px -8px rgba(31, 36, 48, 0.16);
    --shadow-glass:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 4px 6px -1px rgba(31, 36, 48, 0.07),
        0 20px 25px -5px rgba(31, 36, 48, 0.09);
}

html[data-theme="light"] body {
    background:
        radial-gradient(1100px 500px at 50% -10%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(800px 400px at 85% 0%, rgba(194, 65, 12, 0.04), transparent 55%),
        var(--bg) !important;
    color: var(--text) !important;
}

html[data-theme="light"] header {
    background: rgba(252, 251, 249, 0.80) !important;
    border-bottom: 1px solid var(--border-hair);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 32px -16px rgba(31, 36, 48, 0.18) !important;
}
html[data-theme="light"] .logo { color: #1F2430 !important; }
html[data-theme="light"] .nav-right a { color: var(--muted) !important; }
html[data-theme="light"] .nav-right a:hover { color: var(--text) !important; }
html[data-theme="light"] .search-form input {
    background: #FFFFFF !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="light"] .theme-toggle:hover { background: #EDEAE4; }

html[data-theme="light"] .category-card,
html[data-theme="light"] .realty-subcat-card,
html[data-theme="light"] .subcat-pill,
html[data-theme="light"] .el-subcat-card,
html[data-theme="light"] .cl-subcat-card,
html[data-theme="light"] .fr-subcat-card,
html[data-theme="light"] .an-subcat-card,
html[data-theme="light"] .sp-subcat-card,
html[data-theme="light"] .vc-subcat-card,
html[data-theme="light"] .hl-subcat-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-glass) !important;
}
html[data-theme="light"] .subcat-pill.active,
html[data-theme="light"] .el-subcat-card.active,
html[data-theme="light"] .hl-subcat-card.active,
html[data-theme="light"] .category-card.active {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF6F0 100%) !important;
}
html[data-theme="light"] .category-img,
html[data-theme="light"] .realty-subcat-card img,
html[data-theme="light"] .subcat-pill img,
html[data-theme="light"] .el-subcat-card img,
html[data-theme="light"] .hl-subcat-card img {
    filter: drop-shadow(0 10px 14px rgba(31, 36, 48, 0.18));
}

html[data-theme="light"] .card { background: #FFFFFF !important; }
html[data-theme="light"] .card-img-wrap {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
        #F1EFEA !important;
}
html[data-theme="light"] .card-price { color: #C2410C !important; }
html[data-theme="light"] .stat-row .val,
html[data-theme="light"] .section-header a,
html[data-theme="light"] .pagination a,
html[data-theme="light"] .form-footer a,
html[data-theme="light"] .btn-verify.outline:hover,
html[data-theme="light"] .ad-slot .ad-text-inner a { color: #C2410C !important; }

html[data-theme="light"] .sp-hero,
html[data-theme="light"] .an-hub {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
}
html[data-theme="light"] .auto-header h1,
html[data-theme="light"] .el-hero h1,
html[data-theme="light"] .vc-hero h1 { color: var(--text) !important; }
html[data-theme="light"] div[style*="135deg,#1e293b"] h1 { color: var(--text) !important; }
html[data-theme="light"] div[style*="135deg,#1e293b"] {
    background:
        radial-gradient(900px 320px at 50% -20%, rgba(255, 255, 255, 0.8), transparent 65%),
        transparent !important;
}
html[data-theme="light"] .hl-head h1,
html[data-theme="light"] .hl-breadcrumb { color: var(--text) !important; }
html[data-theme="light"] .auto-header h1 img,
html[data-theme="light"] h1 img[src*="cats/"] {
    filter: drop-shadow(0 8px 12px rgba(31, 36, 48, 0.20));
}

html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .form-group select {
    background: #FFFFFF !important;
}

html[data-theme="light"] footer { background: var(--bg) !important; }
html[data-theme="light"] .footer-links h4 { color: var(--text) !important; }
html[data-theme="light"] .footer-bottom { color: var(--text-faint) !important; }

html[data-theme="light"] .flash {
    background: #FFFFFF !important;
    color: var(--text) !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #D6D2CA; border: 2px solid var(--bg); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #C4BFB5; }
html[data-theme="light"] ::selection { background: rgba(194, 65, 12, 0.16); color: #7C2D12; }

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 4 (v3). Доводка категорий по скриншотам
   ════════════════════════════════════════════════════════════════ */

/* Зелёная волна-разделитель — спрятать даже без обновления шаблона */
.hl-wave { display: none !important; }
/* Зелёный хвост секции под волной */
.hl-page > div { background: transparent; }

/* Мебель: зелёный хиро гасим даже со старым шаблоном */
div[style*="135deg,#1a2e1a"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
        var(--surface-1) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-glass) !important;
}
div[style*="135deg,#1a2e1a"] h1 { color: var(--text) !important; }
div[style*="135deg,#1a2e1a"] p { color: var(--muted) !important; }

/* Одежда: тёмно-синий хаб гасим даже со старым шаблоном */
div[style*="background:#0f172a"] { background: transparent !important; }

/* Заголовки с эмодзи-иконкой (⚡ 🌿 💼) — крупнее в полтора раза */
.el-hero h1, .vc-hero h1, .hl-title { font-size: 1.9rem !important; }
.el-hero h1 .count, .vc-hero h1 span { font-size: 0.95rem !important; }

/* Хабы категорий — на всю ширину контента, по центру */
.an-hub, .cl-page-wrap > div:first-child { width: 100%; }

/* Пустые состояния «Ничего не найдено» — приподнятая поверхность */
html:not([data-theme="light"]) .el-empty,
html:not([data-theme="light"]) .auto-empty {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--muted) !important;
}

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 5 (v4). Сетки на всю ширину + светлая тема: мебель
   ════════════════════════════════════════════════════════════════ */


/* ── СВЕТЛАЯ ТЕМА: мебель ──
   Заголовок «Мебель» был белым → на светлом фоне пропадал.
   Графитовый хиро (инлайн) перекрашиваем под бумагу, текст — тёмный. */
html[data-theme="light"] div[style*="rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.015)"] {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-glass) !important;
}
html[data-theme="light"] div[style*="rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.015)"] h1 {
    color: #1F2430 !important;
}
html[data-theme="light"] div[style*="rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.015)"] p {
    color: #5B6472 !important;
}
/* Спорт-хиро в светлой теме */
html[data-theme="light"] .sp-hero h1 { color: #1F2430 !important; }
html[data-theme="light"] .sp-hero p { color: #5B6472 !important; }
/* Любые белые заголовки категорий в светлой теме делаем тёмными */
html[data-theme="light"] h1[style*="color:white"],
html[data-theme="light"] h1[style*="color:#fff"] { color: #1F2430 !important; }

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 6 (v5). Читаемость текста в обеих темах
   ════════════════════════════════════════════════════════════════ */

/* ── СВЕТЛАЯ ТЕМА: оранжевые кнопки в шапке — белый текст ──
   На фото 6 «Подать объявление», «Админка», «Выйти» сливались.
   Оранжевая кнопка остаётся, текст на ней принудительно белый. */
html[data-theme="light"] .btn-post,
html[data-theme="light"] .btn-login,
html[data-theme="light"] .btn-admin-panel {
    color: #FFFFFF !important;
}
html[data-theme="light"] .btn-post *,
html[data-theme="light"] .btn-login *,
html[data-theme="light"] .btn-admin-panel * {
    color: #FFFFFF !important;
}
/* «Выйти» — это обычная ссылка в nav-right, не кнопка → тёмный текст */
html[data-theme="light"] .nav-right > a:not(.btn-post):not(.btn-login):not(.btn-admin-panel) {
    color: #1F2430 !important;
}
html[data-theme="light"] .nav-right > a:not(.btn-post):not(.btn-login):not(.btn-admin-panel):hover {
    color: #C2410C !important;
}

/* ── ТЁМНАЯ ТЕМА: белые поля-кнопки фильтров недвижимости ──
   На фото 2 белые «пилюли» фильтров с тёмным текстом — текст виден,
   но сами белые пилюли выбиваются из тёмной темы. Перекрашиваем
   их в графит с читаемым светлым текстом. */
html:not([data-theme="light"]) .realty-hero div[style*="background:white"],
html:not([data-theme="light"]) .realty-filters div[style*="background:white"] {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
/* Чипы-кнопки в hero недвижимости (Тип жилья, Комнаты, Цена) */
html:not([data-theme="light"]) [style*="background:white;border:1.5px solid"],
html:not([data-theme="light"]) [style*="background:white;border:1px solid #e2e8f0"] {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
html:not([data-theme="light"]) [style*="background:white;border:1.5px solid"] * {
    color: var(--text) !important;
}

/* ── ОБЩЕЕ: тёмно-синие подписи (#475569,#64748b,#1e293b) на графите ──
   Во многих инлайн-стилях категорий цвет текста = тёмно-синий, на
   тёмном фоне почти не виден. Подсвечиваем до читаемого серого. */
html:not([data-theme="light"]) [style*="color:#475569"],
html:not([data-theme="light"]) [style*="color:#64748b"],
html:not([data-theme="light"]) [style*="color: #475569"],
html:not([data-theme="light"]) [style*="color: #64748b"] {
    color: #9CA3AF !important;
}
/* Заголовки фильтров (#1e293b) — но только на тёмном фоне страницы,
   НЕ внутри светлых белых карточек фильтров (там оставляем тёмными) */
html:not([data-theme="light"]) .realty-hero [style*="color:#1e293b"],
html:not([data-theme="light"]) .realty-hero [style*="color: #1e293b"] {
    color: #E5E7EB !important;
}

/* ── СВЕТЛАЯ ТЕМА: иконка-логотип и "АнтиАвито" остаются читаемыми ── */
html[data-theme="light"] .logo,
html[data-theme="light"] .logo span:first-child { color: #1F2430 !important; }

/* ════════════════════════════════════════════════════════════════
   ЧАСТЬ 7 (v6). Жёсткий фикс: кнопки шапки + сетки во всю ширину
   ════════════════════════════════════════════════════════════════ */

/* ── КНОПКИ ШАПКИ: оранжевые с белым текстом в ОБЕИХ темах ──
   Задаём фон явным цветом (не переменной) + белый текст с !important
   на максимальной специфичности, чтобы перебить инлайн base.html. */
header .nav-right a.btn-post,
header .nav-right a.btn-admin-panel,
html[data-theme="light"] header .nav-right a.btn-post,
html[data-theme="light"] header .nav-right a.btn-admin-panel {
    background: #C2410C !important;
    color: #FFFFFF !important;
}
header .nav-right a.btn-post:hover,
header .nav-right a.btn-admin-panel:hover {
    background: #D9480F !important;
    color: #FFFFFF !important;
}
/* «Войти» — контурная кнопка: оранжевый текст и рамка в обеих темах */
header .nav-right a.btn-login {
    background: transparent !important;
    border: 1px solid #C2410C !important;
    color: #C2410C !important;
}
header .nav-right a.btn-login:hover {
    background: #C2410C !important;
    color: #FFFFFF !important;
}
/* «Выйти» (простая ссылка, без класса) — по теме */
html[data-theme="light"] header .nav-right > a:not([class]) { color: #1F2430 !important; }
html:not([data-theme="light"]) header .nav-right > a:not([class]) { color: #E5E7EB !important; }

/* ── СЕТКИ ПОДКАТЕГОРИЙ: auto-fit во ВСЕХ брейкпоинтах ──
   Дублируем правило внутри тех же медиазапросов, что и в шаблонах,
   чтобы гарантированно перебить repeat(N) по специфичности. */