/* =========================================================
   ТЕХНОВАРИК — РЕДИЗАЙН v2
   Drop-in замена /css/style.css
   Палитра: indigo + pink + cyan + amber.
   Фон: четыре насыщенных световых пятна + микро-сетка
        с медленной анимацией и точечным узором.
   ========================================================= */

:root {
    /* Базовые токены сайта (перезаписаны) */
    --bg-color: #f4f5fb;
    --text-color: #0b1020;
    --card-bg: #ffffff;
    --primary-color: #0b1020;
    --accent-color: #4f46e5;
    --nav-bg: rgba(255, 255, 255, 0.72);
    --placeholder-color: #94a3b8;

    /* Палитра */
    --tv-text-muted: #5b657a;
    --tv-card-border: rgba(11, 16, 32, 0.08);
    --tv-card-shadow: 0 1px 2px rgba(11, 16, 32, 0.04), 0 14px 34px rgba(11, 16, 32, 0.07);
    --tv-card-shadow-hover: 0 6px 14px rgba(11, 16, 32, 0.06), 0 30px 60px rgba(79, 70, 229, 0.22);
    --tv-accent: #4f46e5;
    --tv-accent-h: #4338ca;
    --tv-accent-soft: rgba(79, 70, 229, 0.10);
    --tv-pink: #ec4899;
    --tv-pink-soft: rgba(236, 72, 153, 0.10);
    --tv-amber: #f59e0b;
    --tv-amber-soft: rgba(245, 158, 11, 0.12);
    --tv-rose: #e11d48;
    --tv-rose-soft: rgba(225, 29, 72, 0.10);
    --tv-emerald: #10b981;
    --tv-emerald-soft: rgba(16, 185, 129, 0.12);
    --tv-cyan: #06b6d4;
    --tv-cyan-soft: rgba(6, 182, 212, 0.12);
    --tv-radius: 22px;
    --tv-radius-sm: 14px;

    --tv-grad-hot: linear-gradient(135deg, #6366f1 0%, #ec4899 55%, #f59e0b 100%);
    --tv-grad-cool: linear-gradient(135deg, #06b6d4 0%, #4f46e5 60%, #7c3aed 100%);
}

html { scroll-behavior: smooth; height: 100%; }

body {
    font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
body, html { overflow-x: hidden !important; }

/* ==== ФОН САЙТА — насыщенные блобы + микро-сетка + точки ==== */
body::before {
    content: '';
    position: fixed; inset: -10%;
    z-index: -2;
    background-image:
        radial-gradient(900px 700px at 8% 0%, rgba(99, 102, 241, 0.32), transparent 55%),
        radial-gradient(900px 700px at 100% 5%, rgba(236, 72, 153, 0.22), transparent 55%),
        radial-gradient(800px 700px at 95% 60%, rgba(6, 182, 212, 0.18), transparent 55%),
        radial-gradient(900px 700px at 5% 80%, rgba(245, 158, 11, 0.18), transparent 55%),
        radial-gradient(700px 600px at 50% 110%, rgba(124, 58, 237, 0.15), transparent 60%);
    filter: saturate(115%);
    animation: tv-bg-drift 28s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes tv-bg-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-1.5%, -1%, 0) scale(1.035); }
    100% { transform: translate3d(1.5%, 1%, 0) scale(1); }
}

body::after {
    content: '';
    position: fixed; inset: 0;
    z-index: -1;
    background-image:
        /* точечный узор */
        radial-gradient(rgba(11, 16, 32, 0.10) 1.1px, transparent 1.4px),
        /* тонкая сетка */
        linear-gradient(rgba(11, 16, 32, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 16, 32, 0.04) 1px, transparent 1px);
    background-size: 28px 28px, 56px 56px, 56px 56px;
    background-position: 0 0, 0 0, 0 0;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 30%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 85% 75% at 50% 30%, #000 30%, transparent 85%);
    pointer-events: none;
}

main, footer, nav, .reading-progress-bar, .back-to-top, .recommend-widget { position: relative; z-index: 1; }
footer { margin-top: auto; width: 100%; }

/* ====================== ШАПКА ====================== */
.navbar {
    background-color: var(--nav-bg) !important;
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid rgba(11, 16, 32, 0.06);
    transition: background-color .3s;
    padding-top: 12px;
    padding-bottom: 12px;
}
.navbar-brand {
    font-weight: 900 !important;
    color: var(--primary-color) !important;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.navbar-brand i {
    color: #fff !important;
    background: var(--tv-grad-hot);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    font-size: 1.05rem;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.navbar-nav .nav-link { color: var(--text-color) !important; font-weight: 500; }
.navbar-nav .nav-link:hover { color: var(--accent-color) !important; }

.reading-progress-bar {
    position: fixed; top: 0; left: 0; width: 0%; height: 3px;
    background: var(--tv-grad-hot);
    z-index: 9999;
    transition: width .1s;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.6);
}

/* Кнопка «Категории» */
.categories-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.95rem;
    background: var(--card-bg) !important;
    border: 1px solid var(--tv-card-border) !important;
    color: var(--text-color) !important;
    box-shadow: 0 4px 10px rgba(11, 16, 32, 0.04);
    transition: all .2s ease !important;
}
.categories-btn:hover {
    border-color: var(--tv-accent) !important;
    color: var(--tv-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.18);
}
.categories-btn i { font-size: 1.1rem; color: var(--accent-color); }
.categories-btn::after { margin-left: 6px !important; font-size: 0.75rem; }

.categories-dropdown {
    border: 1px solid var(--tv-card-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(11, 16, 32, 0.16) !important;
    padding: 10px !important;
    min-width: 250px;
    background: var(--card-bg) !important;
    margin-top: 10px !important;
}
.categories-dropdown .dropdown-item {
    display: flex !important; align-items: center !important;
    gap: 12px;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    font-weight: 500;
    color: var(--text-color) !important;
    transition: all .15s ease;
    margin-bottom: 2px;
}
.categories-dropdown .dropdown-item:hover {
    background: var(--tv-accent-soft) !important;
    color: var(--tv-accent) !important;
    transform: translateX(3px);
}
.categories-dropdown .dropdown-item i {
    font-size: 1.2rem; width: 28px; text-align: center; color: var(--accent-color);
}
.cat-icon-windows { color: #0078d4 !important; }
.cat-icon-hardware { color: var(--tv-rose) !important; }
.cat-icon-usb { color: var(--tv-amber) !important; }
.cat-icon-internet { color: var(--tv-accent) !important; }
.cat-icon-games { color: #7c3aed !important; }

/* Кнопка «Распродажи Steam» в шапке (после «Категории»).
   Фиксированной ширины (flex:0 0 auto) — поэтому при её появлении ужимается
   только поиск (он flex-grow-1), а сам поиск остаётся справа на своём месте. */
.steam-sale-btn {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 0 0 auto; white-space: nowrap;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #2a6fdb 0%, #1f8fd0 45%, #16a34a 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 18px rgba(31, 111, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    position: relative; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.steam-sale-btn:hover {
    color: #fff !important;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 26px rgba(22, 163, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.steam-sale-btn:active { transform: translateY(0); }
.steam-sale-btn .bi-fire { color: #ffd34d; font-size: 1.05rem; line-height: 1; }
/* блик, мягко пробегающий по кнопке */
.steam-sale-btn::after {
    content: '';
    position: absolute; top: 0; left: -130%;
    width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: steam-sale-shine 5s ease-in-out infinite;
}
@keyframes steam-sale-shine { 0%, 62% { left: -130%; } 90%, 100% { left: 170%; } }
@media (prefers-reduced-motion: reduce) { .steam-sale-btn::after { animation: none; } }

/* Поиск в шапке */
.header-search { max-width: 760px; width: 100%; }
@media (min-width:992px) { .header-search { max-width: 820px; } }
.header-search .input-group {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(11, 16, 32, 0.07) !important;
    border: 1px solid var(--tv-card-border);
    background: var(--card-bg);
}
.header-search .form-control {
    border: 0 !important;
    background: var(--card-bg) !important;
    color: var(--text-color);
    padding-left: 18px;
    font-weight: 500;
}
.header-search .form-control:focus { box-shadow: none !important; }
.header-search .btn-primary {
    background: var(--tv-accent) !important;
    border-color: var(--tv-accent) !important;
    font-weight: 700;
}
.header-search .btn-primary:hover {
    background: var(--tv-accent-h) !important;
    border-color: var(--tv-accent-h) !important;
}

.search-dropdown {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: var(--card-bg);
    border: 1px solid var(--tv-card-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(11, 16, 32, 0.16);
    overflow: hidden;
    z-index: 9999;
}
.search-dropdown__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; text-decoration: none; color: var(--text-color); transition: background-color .15s ease; text-align: left; }
.search-dropdown__item:hover { background: var(--tv-accent-soft); }
.search-dropdown__title { font-weight: 800; line-height: 1.25; margin: 0; }
.search-dropdown__meta { font-size: 12px; opacity: .7; margin: 2px 0 0; }
.search-dropdown__icon { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--tv-accent-soft); color: var(--accent-color); flex: 0 0 auto; }
.search-dropdown__empty { padding: 14px; color: rgba(11, 16, 32, 0.6); }

/* ====================== ГЛАВНАЯ — ГЕРОЙ ====================== */
.hero-section {
    padding: 140px 0 60px;
    text-align: center;
    position: relative;
}

/* Декоративные «звёздные» точки в герое */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 80px 0 0 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 30%, rgba(99, 102, 241, 0.5), transparent 0.5%),
        radial-gradient(circle at 85% 25%, rgba(236, 72, 153, 0.5), transparent 0.45%),
        radial-gradient(circle at 12% 70%, rgba(245, 158, 11, 0.5), transparent 0.4%),
        radial-gradient(circle at 90% 75%, rgba(6, 182, 212, 0.5), transparent 0.45%),
        radial-gradient(circle at 30% 90%, rgba(124, 58, 237, 0.5), transparent 0.3%);
    z-index: 0;
}

.hero-section > .container { position: relative; z-index: 1; }

/* Бэйдж над заголовком */
.hero-section > .container::before {
    content: '⚡ Бесплатные гайды для всех';
    display: inline-flex;
    align-items: center; gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tv-accent);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--tv-accent-soft);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
    margin-bottom: 26px;
}

.hero-title {
    font-weight: 900 !important;
    font-size: clamp(2.2rem, 5.2vw, 4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 18px !important;
    color: var(--text-color);
}
/* Подчёркивающая черта-акцент под заголовком */
.hero-title::after {
    content: '';
    display: block;
    width: 72px; height: 4px;
    border-radius: 2px;
    margin: 24px auto 0;
    background: var(--tv-grad-hot);
}

.hero-subtitle {
    font-size: 1.18rem;
    color: var(--tv-text-muted);
    margin-bottom: 38px;
    font-weight: 500;
}

/* Поиск на главной */
.hero-section .search-box {
    max-width: 740px;
    margin: 0 auto;
    position: relative;
}
.hero-section .search-box .input-group {
    border-radius: 999px !important;
    background: var(--card-bg);
    border: 1px solid var(--tv-card-border);
    box-shadow: 0 18px 50px rgba(11, 16, 32, 0.10);
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
    position: relative;
}
/* «Сияние» вокруг поиска */
.hero-section .search-box::before {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 999px;
    background: var(--tv-grad-hot);
    z-index: -1;
    filter: blur(28px);
    opacity: 0.35;
    transition: opacity .3s ease;
}
.hero-section .search-box:focus-within::before { opacity: 0.55; }
.hero-section .search-box .input-group:focus-within {
    border-color: rgba(79, 70, 229, 0.45);
    box-shadow: 0 22px 56px rgba(79, 70, 229, 0.24);
}
.hero-section .search-box input.form-control {
    border: none !important;
    background: transparent !important;
    color: var(--text-color);
    font-size: 1.12rem;
    font-weight: 500;
    padding: 20px 24px !important;
    height: auto;
}
.hero-section .search-box input.form-control::placeholder {
    color: var(--placeholder-color); opacity: 1;
}
.hero-section .search-box .btn-primary {
    background: var(--text-color) !important;
    border-color: var(--text-color) !important;
    border-radius: 0 !important;
    font-weight: 800;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
.hero-section .search-box .btn-primary:hover {
    background: var(--tv-accent) !important;
    border-color: var(--tv-accent) !important;
}

/* Чипы под поиском (если есть .hero-chips в разметке — стилизуем) */
.hero-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    margin: 22px auto 0;
    max-width: 740px;
}
.hero-chips__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--tv-text-muted);
    align-self: center;
    margin-right: 4px;
}
.hero-chips a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--tv-card-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    transition: all .2s ease;
}
.hero-chips a:hover {
    border-color: var(--tv-accent);
    color: var(--tv-accent);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
}
.hero-chips a i { font-size: 0.95rem; opacity: 0.7; }

/* ====================== ПЛИТКИ БЫСТРОГО ДОСТУПА ====================== */
.quick-links { padding-bottom: 70px; }
.quick-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    display: block;
}
.quick-links .icon-box {
    width: 78px; height: 78px;
    border-radius: 22px;
    background: var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    color: var(--tv-accent);
    margin: 0 auto 14px;
    box-shadow: 0 1px 2px rgba(11, 16, 32, 0.04), 0 14px 32px rgba(11, 16, 32, 0.08);
    border: 1px solid var(--tv-card-border);
    transition: transform .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease;
    position: relative;
}
.quick-links .icon-box::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 22px;
    background: var(--tv-grad-hot);
    z-index: -1;
    opacity: 0;
    filter: blur(18px);
    transition: opacity .3s ease;
}
.quick-links a:hover .icon-box {
    transform: translateY(-5px);
    color: #fff;
    background: var(--tv-grad-hot);
    border-color: transparent;
}
.quick-links a:hover .icon-box::after { opacity: 0.65; }
.quick-links span { font-size: 0.95rem; }

/* Цветовые подсказки по позициям (4 плитки) */
.quick-links .col-6:nth-child(1) .icon-box i { color: var(--tv-amber); }
.quick-links .col-6:nth-child(2) .icon-box i { color: var(--tv-accent); }
.quick-links .col-6:nth-child(3) .icon-box i { color: var(--tv-rose); }
.quick-links .col-6:nth-child(4) .icon-box i { color: var(--tv-cyan); }
.quick-links a:hover .icon-box i { color: #fff !important; }

/* ====================== СЕКЦИИ И ЗАГОЛОВКИ ====================== */
.articles h2 {
    letter-spacing: -0.025em;
    font-weight: 900 !important;
    font-size: 1.65rem !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-bottom: 12px;
}
.articles h2::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 56px; height: 4px;
    border-radius: 2px;
    background: var(--tv-grad-hot);
}
.articles .col-lg-8 > h2 i { color: var(--tv-amber) !important; }

/* ====================== КАРТОЧКИ СТАТЕЙ ====================== */
.article-card {
    background-color: var(--card-bg) !important;
    border-radius: var(--tv-radius) !important;
    border: 1px solid var(--tv-card-border) !important;
    padding: 22px !important;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor: pointer;
    box-shadow: var(--tv-card-shadow);
    position: relative;
    overflow: hidden;
}
.article-card::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--tv-grad-hot);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--tv-card-shadow-hover);
    border-color: rgba(79, 70, 229, 0.30) !important;
}
.article-card:hover::before { transform: scaleX(1); }

.article-card .badge.bg-primary {
    background: var(--tv-accent-soft) !important;
    color: var(--tv-accent) !important;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 1 !important;
}
.article-card .card-title { font-weight: 800; font-size: 1.08rem; line-height: 1.3; color: var(--text-color); }
.article-card .card-text { color: var(--tv-text-muted); }
.article-card .text-muted { color: var(--tv-text-muted) !important; }

/* ===== Первая карточка — Featured (на всю ширину, крупнее) ===== */
@media (min-width: 768px) {
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card {
        padding: 36px !important;
        border: 1.5px solid transparent !important;
        background:
            linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
            var(--tv-grad-hot) border-box !important;
        box-shadow: 0 8px 22px rgba(11, 16, 32, 0.05), 0 30px 60px rgba(79, 70, 229, 0.18) !important;
        position: relative;
        overflow: hidden;
    }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card::before {
        transform: scaleX(1);
        height: 4px;
    }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card::after {
        content: 'TOP';
        position: absolute;
        top: 20px; right: 20px;
        background: var(--tv-grad-hot);
        color: #fff;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.1em;
        padding: 6px 12px;
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
    }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card .card-title {
        font-size: 1.55rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
        margin-top: 14px !important;
        margin-bottom: 10px !important;
        max-width: 92%;
    }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card .card-text {
        font-size: 1rem !important;
        max-width: 80%;
    }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card .badge.bg-primary {
        font-size: 0.78rem;
        padding: 7px 14px;
        background: var(--tv-grad-hot) !important;
        color: #fff !important;
    }
}

/* ====================== САЙДБАР (ПОПУЛЯРНОЕ) ====================== */
.articles .sticky-top .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--tv-card-border) !important;
    border-radius: var(--tv-radius) !important;
    box-shadow: var(--tv-card-shadow) !important;
}
.articles .sticky-top .card.bg-light { background-color: var(--card-bg) !important; }

.articles .sticky-top h3 {
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.015em;
}
.articles .sticky-top h3 i { font-size: 1.1em; }
.articles .sticky-top .badge {
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
}

.articles .list-group-item { color: var(--text-color) !important; background: transparent !important; transition: background-color .2s, border-radius .2s; }
.articles .list-group-item:hover { background: var(--tv-accent-soft) !important; border-radius: 12px; }
.articles .list-group-item .fw-bold { color: var(--text-color); }

/* «За 30 мин» — пульсирующий красный индикатор */
.articles .sticky-top h3 .text-danger { color: var(--tv-rose) !important; }
.articles .sticky-top > .d-flex .badge.text-bg-danger {
    background: var(--tv-rose-soft) !important;
    color: var(--tv-rose) !important;
    border: 1px solid rgba(225, 29, 72, 0.25) !important;
    display: inline-flex; align-items: center; gap: 6px;
}
.articles .sticky-top > .d-flex .badge.text-bg-danger::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--tv-rose);
    animation: tv-pulse 1.6s ease-out infinite;
}
@keyframes tv-pulse {
    0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

/* Цифры-маркеры в сайдбаре — топ-3 ярко */
.articles .sticky-top .list-group-item > div:first-child {
    width: 32px !important; height: 32px !important;
    border-radius: 10px !important;
    background: var(--tv-accent-soft) !important;
    color: var(--tv-accent) !important;
    flex: 0 0 32px !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}
.articles .sticky-top .list-group-item:nth-child(1) > div:first-child {
    background: var(--tv-grad-hot) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}
.articles .sticky-top .list-group-item:nth-child(2) > div:first-child {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--tv-amber) !important;
}
.articles .sticky-top .list-group-item:nth-child(3) > div:first-child {
    background: rgba(6, 182, 212, 0.15) !important;
    color: var(--tv-cyan) !important;
}

/* ====================== ОБЩИЕ КНОПКИ / БЭЙДЖИ ====================== */
.btn-primary {
    background-color: var(--tv-accent) !important;
    border-color: var(--tv-accent) !important;
    font-weight: 700;
    border-radius: 12px;
}
.btn-primary:hover {
    background-color: var(--tv-accent-h) !important;
    border-color: var(--tv-accent-h) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.25);
}
.btn-outline-primary {
    color: var(--tv-accent) !important;
    border-color: rgba(79, 70, 229, 0.35) !important;
    background: transparent !important;
    border-radius: 12px;
    font-weight: 700;
}
.btn-outline-primary:hover {
    background: var(--tv-accent) !important;
    color: #fff !important;
    border-color: var(--tv-accent) !important;
}

.text-primary { color: var(--tv-accent) !important; }
.bg-primary { background-color: var(--tv-accent) !important; }
.text-danger { color: var(--tv-rose) !important; }
.text-warning { color: var(--tv-amber) !important; }
.text-info { color: var(--tv-cyan) !important; }
.text-success { color: var(--tv-emerald) !important; }

/* ====================== СТАТЬЯ ====================== */
.breadcrumb {
    background: var(--card-bg);
    border: 1px solid var(--tv-card-border);
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(11, 16, 32, 0.05);
    display: inline-flex !important;
    font-size: 0.9rem;
}
.breadcrumb a { color: var(--tv-text-muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--tv-accent); }
.breadcrumb-item.active { color: var(--text-color); font-weight: 700; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(11, 16, 32, 0.25); }

.article-main-title, h1.fw-black {
    font-weight: 900 !important;
    font-size: clamp(1.8rem, 3.6vw, 2.9rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 1.25rem !important;
}

.col-lg-8 > .d-flex.flex-wrap.align-items-center.mb-4 { gap: 0 !important; flex-wrap: wrap; }
.col-lg-8 > .d-flex.flex-wrap.align-items-center.mb-4 > span {
    background: var(--card-bg);
    border: 1px solid var(--tv-card-border);
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--tv-text-muted) !important;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.col-lg-8 > .d-flex.flex-wrap.align-items-center.mb-4 > span i { color: var(--tv-accent); }

.article-cover-wrapper {
    aspect-ratio: 16/9;
    max-height: 520px;
    overflow: hidden;
    background-color: #eef0f6;
    width: 100%;
    border-radius: var(--tv-radius) !important;
    border: 1px solid var(--tv-card-border);
    box-shadow: 0 22px 56px rgba(11, 16, 32, 0.12);
}
.article-cover-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* TOC */
.article-toc {
    background: var(--card-bg) !important;
    border: 1px solid var(--tv-card-border) !important;
    border-radius: var(--tv-radius) !important;
    padding: 24px 28px !important;
    box-shadow: var(--tv-card-shadow);
    position: relative;
    overflow: hidden;
}
.article-toc::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--tv-grad-hot);
}
.article-toc h4 { font-weight: 800 !important; color: var(--text-color); }
.article-toc h4 i { color: var(--tv-accent) !important; }
.article-toc ul { counter-reset: tv-toc; padding-left: 0; list-style: none; }
.article-toc li {
    counter-increment: tv-toc;
    padding: 9px 0 9px 40px;
    position: relative;
}
.article-toc li::before {
    content: counter(tv-toc, decimal-leading-zero);
    position: absolute; left: 0; top: 9px;
    font-weight: 900; font-size: 0.82rem;
    color: var(--tv-accent);
    background: var(--tv-accent-soft);
    width: 30px; height: 30px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}
.article-toc a { color: var(--text-color) !important; font-weight: 600; transition: color .2s; }
.article-toc a:hover { color: var(--tv-accent) !important; }

/* Заголовки H2 в статье */
.article-content h2 {
    font-weight: 800 !important;
    font-size: 1.7rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-top: 3rem !important;
    margin-bottom: 1.2rem !important;
    padding-left: 18px;
    position: relative;
}
.article-content h2::before {
    content: '';
    position: absolute; left: 0; top: 0.25em; bottom: 0.2em;
    width: 5px;
    border-radius: 3px;
    background: var(--tv-grad-hot);
}
.article-content h3 { font-weight: 800 !important; letter-spacing: -0.01em; margin-top: 2rem !important; }

.article-content {
    font-size: 19px !important;
    line-height: 1.75 !important;
    color: var(--text-color);
    max-width: 850px;
    margin: 0 auto;
}
.article-content p { margin-bottom: 1.5rem !important; }
.article-content li { margin-bottom: 0.65rem !important; line-height: 1.7; }
.article-content a:not(.btn) {
    color: var(--tv-accent);
    text-decoration: underline;
    text-decoration-color: rgba(79, 70, 229, 0.35);
    text-underline-offset: 3px;
    font-weight: 600;
}
.article-content a:not(.btn):hover { color: var(--tv-accent-h); text-decoration-color: var(--tv-accent-h); }
.article-content strong { color: var(--text-color); font-weight: 700; }

/* Плашки «Внимание / Совет» */
.article-content .alert {
    border: 1px solid var(--tv-card-border) !important;
    border-left: none !important;
    border-radius: var(--tv-radius-sm) !important;
    padding: 18px 20px !important;
    background: var(--card-bg) !important;
    box-shadow: 0 4px 14px rgba(11, 16, 32, 0.04);
    position: relative;
    overflow: hidden;
}
.article-content .alert::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px;
}
.article-content .alert.alert-warning::before { background: var(--tv-amber); }
.article-content .alert.alert-info::before { background: var(--tv-cyan); }
.article-content .alert i { font-size: 1.4rem !important; }
.article-content .alert.alert-warning i { color: var(--tv-amber) !important; }
.article-content .alert.alert-info i { color: var(--tv-cyan) !important; }
.article-content .alert strong { color: var(--text-color); }

.article-content img:not(.recommend-widget__img) {
    border-radius: var(--tv-radius-sm) !important;
    box-shadow: 0 6px 18px rgba(11, 16, 32, 0.08) !important;
    border: 1px solid var(--tv-card-border);
}

.article-content code {
    background: var(--tv-accent-soft);
    color: var(--tv-accent-h);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: .88em;
    padding: .15em .45em;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid rgba(79, 70, 229, 0.18);
}

/* Inline code-чипа: <code> + кнопка копирования = единая «копи-таблетка» */
.article-content .code-inline-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: stretch !important;
    vertical-align: baseline;
    margin: 0 1px;
    border-radius: 7px;
    overflow: visible;
    line-height: 1;
    transition: box-shadow .18s ease, transform .18s ease;
}
.article-content .code-inline-wrapper:hover {
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.18);
    transform: translateY(-1px);
}

/* Сам код внутри чипы — без своей рамки/радиуса, потому что их даёт обёртка */
.article-content .code-inline-wrapper > code {
    background: var(--tv-accent-soft) !important;
    color: var(--tv-accent-h) !important;
    border: 1px solid rgba(79, 70, 229, 0.22) !important;
    border-right: none !important;
    border-radius: 7px 0 0 7px !important;
    padding: .28em .55em !important;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    font-size: .88em;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

/* Кнопка копирования — прикреплена справа, всегда видна */
.article-content .code-copy-btn-inline {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1px solid rgba(79, 70, 229, 0.22) !important;
    border-radius: 0 7px 7px 0 !important;
    background: rgba(79, 70, 229, 0.06) !important;
    color: var(--tv-accent) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    cursor: pointer;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: auto;
    box-shadow: none !important;
}
.article-content .code-copy-btn-inline:hover {
    background: var(--tv-accent) !important;
    color: #fff !important;
    border-color: var(--tv-accent) !important;
}
.article-content .code-copy-btn-inline--ok {
    background: var(--tv-emerald) !important;
    color: #fff !important;
    border-color: var(--tv-emerald) !important;
}
.article-content .code-copy-btn-inline--err {
    background: var(--tv-rose) !important;
    color: #fff !important;
    border-color: var(--tv-rose) !important;
}
/* Если кнопка содержит иконку bi — иконка по центру */
.article-content .code-copy-btn-inline i { font-size: 12px; line-height: 1; }

/* =====================================================
   Секция «Похожие решения» (внизу страницы статьи)
   ===================================================== */
section.bg-light.dark-mode-bg {
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 4rem 0 !important;
    padding: 2.5rem 0 !important;
    position: relative;
}
section.bg-light.dark-mode-bg h3 {
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.025em !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    position: relative;
    margin-bottom: 1.5rem !important;
}
section.bg-light.dark-mode-bg h3::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 56px; height: 4px;
    border-radius: 2px;
    background: var(--tv-grad-hot);
}
section.bg-light.dark-mode-bg h3 i.text-primary { color: var(--tv-accent) !important; }

/* Карточки в «Похожих решениях» — image-flush сверху */
section.bg-light.dark-mode-bg .article-card {
    padding: 0 !important;
    border-radius: var(--tv-radius) !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--tv-card-border) !important;
    box-shadow: var(--tv-card-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
section.bg-light.dark-mode-bg .article-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--tv-card-shadow-hover);
    border-color: rgba(79, 70, 229, 0.30) !important;
}
section.bg-light.dark-mode-bg .article-card::before { display: none; } /* не нужна верхняя цветная полоса (тут картинка вверху) */
section.bg-light.dark-mode-bg .article-card .card-body { padding: 18px !important; }
section.bg-light.dark-mode-bg .article-card .badge.bg-primary {
    background: var(--tv-accent-soft) !important;
    color: var(--tv-accent) !important;
    font-weight: 700 !important;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 1 !important;
}
section.bg-light.dark-mode-bg .article-card .card-title { color: var(--text-color); font-weight: 800; line-height: 1.35; }
section.bg-light.dark-mode-bg .article-card .card-text { color: var(--tv-text-muted); }
section.bg-light.dark-mode-bg .article-card .text-muted i { color: var(--tv-accent); }

@media (max-width: 991.98px) {
    section.bg-light.dark-mode-bg {
        margin: 2.5rem 0 !important;
        padding: 1.5rem 0 !important;
    }
    section.bg-light.dark-mode-bg h3 { font-size: 1.25rem !important; }
}
.article-content pre {
    background: #0b1220 !important;
    color: #cbd5e1 !important;
    padding: 22px !important;
    padding-top: 46px !important;
    border-radius: var(--tv-radius-sm) !important;
    overflow-x: auto;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 1.5rem 0 !important;
    position: relative;
    box-shadow: 0 22px 44px rgba(11, 18, 32, 0.28);
}
.article-content pre::before {
    content: '';
    position: absolute; top: 14px; left: 18px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #ff5f57;
    box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
}
.article-content pre code { background: transparent; color: inherit; padding: 0; font-weight: 400; border: 0; }

.article-content .table {
    border-radius: var(--tv-radius-sm);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--tv-card-border);
    background: var(--card-bg);
    box-shadow: 0 6px 18px rgba(11, 16, 32, 0.04);
}
.article-content .table thead th {
    background: var(--tv-accent-soft) !important;
    color: var(--tv-accent-h) !important;
    border-bottom: 1px solid var(--tv-card-border) !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.author-box {
    margin-top: 24px; margin-bottom: 24px;
    display: flex; gap: 16px; align-items: center;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--tv-card-border);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-card-shadow);
    position: relative;
    overflow: hidden;
}
.author-box::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--tv-grad-hot);
}
.author-box__avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: rgba(0, 0, 0, .04); border: 2px solid var(--tv-accent-soft); }
.author-box__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-box__label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tv-accent); margin-bottom: 2px; }
.author-box__name { font-size: 17px; font-weight: 900; line-height: 1.2; margin-bottom: 4px; }
.author-box__bio { font-size: 13px; line-height: 1.45; color: var(--tv-text-muted); }

.article-share {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--tv-card-border);
    border-radius: var(--tv-radius);
    background: var(--card-bg);
    box-shadow: var(--tv-card-shadow);
}
.article-share__title { font-weight: 900; margin-bottom: 14px; font-size: 1.05rem; }
.article-share__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 576px) { .article-share__actions { grid-template-columns: repeat(4, auto); justify-content: start; } }
.article-share__actions .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; font-weight: 700; padding: 10px 18px; }

.share-copy-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--text-color); color: #fff;
    padding: 11px 18px; border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(11, 16, 32, 0.25);
    z-index: 9999;
}

.comment-form {
    padding: 24px;
    border-radius: var(--tv-radius);
    border: 1px solid var(--tv-card-border);
    background: var(--card-bg);
    box-shadow: var(--tv-card-shadow);
}
.comment-form__title { font-weight: 900; font-size: 1.1rem; margin-bottom: 14px; }
.comment-form .form-control {
    border-radius: 12px;
    border: 1px solid var(--tv-card-border);
    background: #fafbfc;
    padding: 12px 14px;
    font-size: 0.97rem;
}
.comment-form .form-control:focus {
    border-color: var(--tv-accent);
    box-shadow: 0 0 0 4px var(--tv-accent-soft);
    background: var(--card-bg);
}
.comment-form__status { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--tv-accent-soft); border: 1px solid rgba(79, 70, 229, 0.18); font-weight: 600; }
.comment-form__status--ok { background: var(--tv-emerald-soft); border-color: rgba(16, 185, 129, 0.25); color: #065f46; }
.comment-form__status--err { background: var(--tv-rose-soft); border-color: rgba(225, 29, 72, 0.25); color: #881337; }

/* =====================================================
   Конец статьи: Telegram-CTA + «Поделиться» + комментарии
   ===================================================== */

/* Telegram CTA — фирменный голубой градиент, белый текст, белая кнопка */
.tg-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 30px;
    border-radius: var(--tv-radius);
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 55%, #1d8bc0 100%);
    color: #ffffff;
    box-shadow: 0 22px 50px rgba(34, 158, 217, 0.35);
    position: relative;
    overflow: hidden;
}
/* Декоративное сияние в углу */
.tg-cta::after {
    content: '';
    position: absolute;
    width: 280px; height: 280px;
    right: -110px; top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
    pointer-events: none;
}
.tg-cta__icon {
    flex: 0 0 auto;
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.9rem;
    position: relative; z-index: 1;
}
.tg-cta__body { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.tg-cta__title {
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: #ffffff;
}
.tg-cta__text {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}
.tg-cta__action { flex: 0 0 auto; text-align: center; position: relative; z-index: 1; }
.tg-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: #ffffff;
    color: #1577a8;
    font-weight: 800;
    font-size: 1rem;
    padding: 13px 26px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tg-cta__btn,
.tg-cta__btn:hover {
    text-decoration: none !important;
}
.tg-cta__btn:hover {
    color: #1577a8;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}
.tg-cta__handle {
    margin-top: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.tg-cta__handle span { font-weight: 700; color: #ffffff; }

@media (max-width: 767.98px) {
    .tg-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
    }
    .tg-cta__action { width: 100%; }
    .tg-cta__btn { width: 100%; justify-content: center; }
    .tg-cta__handle { text-align: center; }
}

/* Переключатель типа сообщения — ровные «таблетки», аккуратно переносятся */
.comment-form__types { display: flex; flex-wrap: wrap; gap: 8px; }
.comment-form__type {
    flex: 1 1 130px;
    text-align: center;
    cursor: pointer;
    margin: 0;
    padding: 11px 18px;
    border-radius: 12px;
    border: 1.5px solid var(--tv-card-border);
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 700;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.comment-form__type:hover { border-color: var(--tv-accent); color: var(--tv-accent); }
.comment-form__types .btn-check:checked + .comment-form__type {
    background: var(--tv-accent);
    border-color: var(--tv-accent);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}
.comment-form__types .btn-check:focus-visible + .comment-form__type {
    box-shadow: 0 0 0 4px var(--tv-accent-soft);
}

/* «Поделиться» — фирменные цвета */
.article-share { padding: 24px !important; }
.article-share__title { font-size: 1.1rem !important; font-weight: 900 !important; }

/* Telegram-кнопка (первая) */
.article-share__actions .btn-outline-primary:nth-child(1) {
    background: #229ED9 !important;
    border-color: #229ED9 !important;
    color: #ffffff !important;
}
.article-share__actions .btn-outline-primary:nth-child(1):hover {
    background: #1d8bc0 !important; border-color: #1d8bc0 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(34, 158, 217, 0.35) !important;
}

/* VK-кнопка (вторая) */
.article-share__actions .btn-outline-primary:nth-child(2) {
    background: #0077FF !important;
    border-color: #0077FF !important;
    color: #ffffff !important;
}
.article-share__actions .btn-outline-primary:nth-child(2):hover {
    background: #0064d6 !important; border-color: #0064d6 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 119, 255, 0.35) !important;
}

/* «Скопировать» — нейтральная, но в стиле */
.article-share__actions button.btn-outline-secondary,
.article-share__actions .btn-outline-secondary {
    background: var(--card-bg) !important;
    border: 1px solid var(--tv-card-border) !important;
    color: var(--text-color) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}
.article-share__actions button.btn-outline-secondary:hover,
.article-share__actions .btn-outline-secondary:hover {
    border-color: var(--tv-accent) !important;
    color: var(--tv-accent) !important;
    background: var(--card-bg) !important;
    transform: translateY(-1px);
}

/* Форма комментариев — ярче заголовок и индиго-кнопка «Отправить» */
.comment-form { padding: 26px !important; }
.comment-form__title {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    margin-bottom: 18px !important;
    display: flex; align-items: center; gap: 10px;
}
.comment-form .form-label {
    font-weight: 700 !important;
    color: var(--text-color);
    font-size: 0.92rem;
    margin-bottom: 6px;
}
.comment-form .btn.btn-primary {
    background: var(--tv-accent) !important;
    border-color: var(--tv-accent) !important;
    color: #fff !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    padding: 14px 26px !important;
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.32) !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.comment-form .btn.btn-primary:hover {
    background: var(--tv-accent-h) !important;
    border-color: var(--tv-accent-h) !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.45) !important;
}

@media (max-width: 575.98px) {
    .tg-cta { padding: 22px; }
    .tg-cta__title { font-size: 1.12rem; }
    .tg-cta__icon { width: 54px; height: 54px; font-size: 1.6rem; }
}

.col-lg-8 > .mt-5.p-4.rounded-4.bg-light.border.text-center {
    background: var(--card-bg) !important;
    border: 1px solid var(--tv-card-border) !important;
    border-radius: var(--tv-radius) !important;
    box-shadow: var(--tv-card-shadow) !important;
    padding: 28px !important;
}
.btn-success { background: var(--tv-emerald) !important; border-color: var(--tv-emerald) !important; font-weight: 700; border-radius: 12px; }
.btn-success:hover { background: #059669 !important; border-color: #059669 !important; }
.btn-danger { background: var(--tv-rose) !important; border-color: var(--tv-rose) !important; font-weight: 700; border-radius: 12px; }
.btn-danger:hover { background: #be123c !important; border-color: #be123c !important; }

/* Sticky TOC */
.article-toc-sticky {
    position: fixed; top: 100px; right: 18px; width: 320px;
    max-height: calc(100vh - 140px); overflow: auto;
    background: var(--card-bg); color: var(--text-color);
    border: 1px solid var(--tv-card-border);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-card-shadow);
    padding: 18px;
    z-index: 9997;
    display: none;
}
.article-left-ad-sticky { position: fixed; top: 180px; left: 18px; width: 300px; max-height: calc(100vh - 220px); overflow: hidden; z-index: 9996; display: none; }
@media (min-width: 1500px) { .article-left-ad-sticky { display: block; } }
@media (min-width: 1500px) {
    .article-toc-sticky { display: block; }
    .article-left-ad-sticky { display: block; }
}
.article-toc-sticky h4 { white-space: nowrap; font-weight: 800; }
.article-toc-sticky ul { list-style: none; padding-left: 0; margin: 0; }
.article-toc-sticky li { padding: 8px 10px 8px 26px; margin-bottom: 4px; border-radius: 12px; position: relative; }
.article-toc-sticky li::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--tv-accent); border-radius: 50%; opacity: .4; }
.article-toc-sticky a { text-decoration: none; color: var(--text-color); font-size: .92rem; font-weight: 500; display: block; transition: all .2s ease; line-height: 1.4; }
.article-toc-sticky a:hover { color: var(--tv-accent); }
.article-toc-sticky li.is-active { background: var(--tv-accent-soft); }
.article-toc-sticky li.is-active::before { opacity: 1; width: 8px; height: 8px; }
.article-toc-sticky li.is-active a { color: var(--tv-accent); font-weight: 700; }

.recommend-widget {
    position: fixed; left: 18px; bottom: 18px; z-index: 9998;
    width: 380px; max-width: calc(100vw - 36px);
    background: var(--card-bg); color: var(--text-color);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(11, 16, 32, 0.20);
    border: 1px solid var(--tv-card-border);
    overflow: hidden;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.recommend-widget--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.recommend-widget__close { position: absolute; top: 10px; right: 10px; border: none; background: rgba(11, 16, 32, .06); color: var(--text-color); width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.recommend-widget__close:hover { background: rgba(11, 16, 32, .12); }
.recommend-widget__badge { position: absolute; left: 12px; top: 12px; background: var(--tv-grad-hot); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35); }
.recommend-widget__body { display: grid; grid-template-columns: 148px 1fr; gap: 14px; padding: 50px 16px 16px; text-decoration: none; color: inherit; }
.recommend-widget__media { position: relative; width: 148px; height: 110px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; background: var(--tv-accent-soft); border: 1px solid var(--tv-card-border); }
.recommend-widget__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recommend-widget__title { font-weight: 900; font-size: 16px; line-height: 1.22; margin-bottom: 6px; display: block; }
.recommend-widget__cta { margin-top: 10px; font-weight: 900; color: var(--tv-accent); font-size: 13px; }
@media (max-width: 991.98px) { .recommend-widget { display: none !important; } }

.back-to-top {
    position: fixed; bottom: 24px; right: 24px;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--tv-grad-hot); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 14px 32px rgba(79, 70, 229, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: .25s; z-index: 999; text-decoration: none;
}
.back-to-top:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 44px rgba(236, 72, 153, 0.55); }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

footer {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--tv-card-border) !important;
    color: var(--text-color);
}
footer a { color: var(--tv-text-muted) !important; font-weight: 600; transition: color .2s; }
footer a:hover { color: var(--tv-accent) !important; }

/* Резерв высоты под РСЯ-слоты — фикс CLS НА МОБИЛЕ.
   До загрузки iframe браузер уже знает, что место занято — контент ниже не двигается.
   На ПК не резервируем (там CLS приемлемый, лишних пустот не нужно).
   При адблоке html.ya-blocked схлопывает слоты сразу через display:none. */
.ya-ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    margin: 0 !important;
    transition: min-height .25s ease, opacity .25s ease;
}
@media (max-width: 767.98px) {
    .ya-ad-slot { min-height: 280px; }
}
.ya-ad-slot > div { width: 100%; display: flex; justify-content: center; }

/* Блок «Под заголовком» (под обложкой, перед оглавлением): отступ снизу до «Содержания».
   Стоит ДО правил --collapsed / ya-blocked, чтобы при отсутствии рекламы отступ схлопывался. */
.ya-ad-slot--2 { margin-bottom: 2rem !important; }

.ya-ad-slot.loaded,
.ya-ad-slot.ya-ad-slot--loaded {
    min-height: 0;
}

.ya-ad-slot.ya-ad-slot--collapsed {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}

html.ya-blocked .ya-ad-slot {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Мобильный */
@media (max-width: 991.98px) {
    .navbar { padding-top: 8px !important; padding-bottom: 8px !important; }
    .navbar .container { padding-left: 14px; padding-right: 14px; }
    .navbar-brand { font-size: 1.2rem !important; }
    .navbar-brand i { width: 30px; height: 30px; font-size: 0.95rem; }
    .navbar-toggler { border: none !important; padding: 8px 10px !important; border-radius: 10px !important; background: var(--tv-accent-soft) !important; color: var(--tv-accent) !important; }
    .navbar-toggler:focus { box-shadow: none !important; }
    .navbar-content { padding-top: 10px; padding-bottom: 12px; }
    .header-search { max-width: none; }
    .hero-section { padding: 110px 0 40px; }
    .hero-section::before { display: none; }
    .hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 24px; }
    .hero-section .search-box input.form-control { font-size: 1rem; padding: 14px 18px !important; }
    .hero-chips { gap: 6px; }
    .hero-chips a { padding: 6px 10px; font-size: 12px; }
    .hero-chips__label { width: 100%; text-align: center; margin-right: 0; margin-bottom: 4px; }
    .quick-links .icon-box { width: 64px; height: 64px; border-radius: 18px; font-size: 1.55rem; }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card { padding: 24px !important; }
    .articles .col-lg-8 .row.g-4 > .col-md-6:first-child .article-card .card-title { font-size: 1.15rem !important; }
    .article-content { font-size: 16px !important; line-height: 1.65 !important; padding: 0 4px; }
    .article-content h2 { font-size: 1.4rem !important; margin-top: 2rem !important; }
    .article-toc { padding: 16px 18px !important; }
    .article-toc li { padding-left: 36px; }
    .article-toc li::before { width: 26px; height: 26px; font-size: 0.78rem; }
    .container.mt-5.pt-5 { padding-top: 1rem !important; margin-top: 4rem !important; }
    .col-lg-8 > .d-flex.flex-wrap.align-items-center.mb-4 > span { font-size: 0.78rem; padding: 6px 10px; }
    .back-to-top { bottom: 20px; right: 20px; width: 46px; height: 46px; font-size: 1.4rem; }
}

/* Совместимость */
.article-cover-wrapper { aspect-ratio: 16/9; max-height: 520px; overflow: hidden; width: 100%; }
.article-content img { content-visibility: auto; }
.article-content p img, .article-content figure img { max-width: 100%; height: auto; display: block; }
.article-content .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-content .table-responsive > table { width: 100%; }
@media (max-width: 576px) { .article-content .table-responsive > table { min-width: 640px; } }
.code-block { position: relative; }
.code-copy-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    border-radius: 10px; padding: 5px 10px; font-size: 11px; font-weight: 700;
    display: inline-flex; gap: 6px; align-items: center; line-height: 1;
}
.code-copy-btn:hover { background: rgba(255, 255, 255, .14); }
.code-copy-btn--ok { border-color: rgba(16, 185, 129, .55); color: #6ee7b7; }
.code-copy-btn--err { border-color: rgba(239, 68, 68, .55); color: #fca5a5; }

/* =====================================================
   Промо-CTA блок в теле статьи (контент-маркетинг)
   Подходит к разметке: <div class="p-4 my-4 bg-light rounded-4 border text-center dark-mode-invert shadow-sm">
   ===================================================== */
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%) border-box !important;
    border: 2px solid transparent !important;
    border-radius: 24px !important;
    padding: 32px 28px !important;
    box-shadow:
        0 4px 14px rgba(11, 16, 32, 0.04),
        0 28px 60px rgba(99, 102, 241, 0.14) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: box-shadow .3s ease, transform .3s ease;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(11, 16, 32, 0.05),
        0 36px 72px rgba(236, 72, 153, 0.20) !important;
}
/* Декоративные круги-свечения в углах */
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm::before {
    content: '';
    position: absolute;
    width: 280px; height: 280px;
    right: -100px; top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm::after {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    left: -90px; bottom: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm > * {
    position: relative;
    z-index: 1;
}
/* Заголовок промо */
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm h5 {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-color) !important;
    margin-bottom: 14px !important;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm h5 span,
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm p span {
    font-size: inherit !important;
    font-weight: inherit !important;
}
/* Описание промо */
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm p {
    font-size: 1rem !important;
    color: var(--tv-text-muted) !important;
    margin-bottom: 22px !important;
    line-height: 1.6 !important;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm p strong {
    color: var(--text-color) !important;
    font-weight: 800;
}
/* CTA-кнопка промо — объёмная + shimmer-блик на hover */
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .btn {
    padding: 16px 36px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow:
        0 2px 0 rgba(11, 16, 32, 0.08),
        0 18px 36px rgba(11, 16, 32, 0.22) !important;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.25;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .btn:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.08) !important;
    box-shadow:
        0 4px 0 rgba(11, 16, 32, 0.10),
        0 26px 56px rgba(11, 16, 32, 0.30) !important;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .btn:active {
    transform: translateY(-1px) !important;
}
/* Shimmer-блик */
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .btn::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .7s ease;
    pointer-events: none;
    z-index: 1;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .btn:hover::after {
    left: 120%;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .btn > * {
    position: relative;
    z-index: 2;
}
/* Trust-строка */
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .mt-3.small {
    font-size: 0.9rem !important;
    color: var(--tv-text-muted) !important;
    margin-top: 18px !important;
    font-weight: 600 !important;
}
.article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .text-success {
    color: var(--tv-emerald) !important;
}

/* Мобильный вид промо */
@media (max-width: 575.98px) {
    .article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm {
        padding: 24px 18px !important;
        border-radius: 20px !important;
    }
    .article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm::before { width: 200px; height: 200px; right: -70px; top: -70px; }
    .article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm::after { width: 200px; height: 200px; left: -70px; bottom: -70px; }
    .article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm h5 {
        font-size: 1.18rem !important;
        margin-bottom: 10px !important;
    }
    .article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm p {
        font-size: 0.93rem !important;
        margin-bottom: 18px !important;
    }
    .article-content .p-4.my-4.bg-light.rounded-4.border.text-center.dark-mode-invert.shadow-sm .btn {
        width: 100%;
        max-width: 420px;
        padding: 16px 18px !important;
        font-size: 1rem !important;
        white-space: normal;
        justify-content: center;
    }
}

/* =====================================================
   Фикс растяжки картинок в статье на мобиле
   (убираем фиксированный height из <img width=… height=…>)
   ===================================================== */
@media (max-width: 768px) {
    .article-content img:not(.recommend-widget__img) {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }
}

/* =========================================================
   ███  МОБИЛЬНЫЙ UX v3  ███
   Комфортное чтение, тап-зум фото, удобные формы,
   крупные тач-таргеты, отклик на нажатие, safe-area iPhone.
   Всё ниже — только для экранов ≤ 991.98px (десктоп не трогаем),
   кроме блока «Лайтбокс», который глобальный.
   ========================================================= */

/* ---------- ФОТО: ЛАЙТБОКС (тап, чтобы увеличить) — глобально ---------- */
.tv-zoomable { cursor: zoom-in; }

.tv-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 11, 20, 0.92);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.tv-lightbox.is-open { opacity: 1; visibility: visible; }
.tv-lightbox__img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    transform: scale(0.94);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1);
    touch-action: pinch-zoom;
    cursor: zoom-out;
}
.tv-lightbox.is-open .tv-lightbox__img { transform: scale(1); }
.tv-lightbox__img.is-zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.tv-lightbox__close {
    position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); color: #fff;
    font-size: 26px; line-height: 1; font-weight: 400;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background-color .18s ease;
}
.tv-lightbox__close:hover, .tv-lightbox__close:active { background: rgba(255, 255, 255, 0.28); }
.tv-lightbox__hint {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: max(18px, env(safe-area-inset-bottom)); z-index: 1;
    color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 600;
    background: rgba(0, 0, 0, 0.35); padding: 6px 14px; border-radius: 999px;
    pointer-events: none; white-space: nowrap;
}
body.tv-noscroll { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) {
    .tv-lightbox, .tv-lightbox__img { transition: none; }
}

/* ===================== ТОЛЬКО МОБИЛА (≤ 991.98px) ===================== */
@media (max-width: 991.98px) {

    /* ---------- FIX: iOS не зумит страницу при тапе в поле (нужно ≥16px) ---------- */
    input, textarea, select,
    .form-control, .comment-form .form-control,
    .header-search .form-control,
    .hero-section .search-box input.form-control {
        font-size: 16px !important;
    }

    /* ---------- ЧТЕНИЕ: крупнее и просторнее ---------- */
    .article-content {
        font-size: 17px !important;
        line-height: 1.72 !important;
        padding: 0 !important;
        letter-spacing: -0.002em;
        text-rendering: optimizeLegibility;
    }
    .article-content p { margin-bottom: 1.15rem !important; }
    .article-content li { margin-bottom: 0.55rem !important; line-height: 1.65; }
    .article-content h2 { font-size: 1.42rem !important; line-height: 1.24 !important; margin-top: 2.2rem !important; margin-bottom: 1rem !important; }
    .article-content h3 { font-size: 1.18rem !important; margin-top: 1.6rem !important; }
    .article-content ul, .article-content ol { padding-left: 1.25rem; }

    /* Заголовок статьи — спокойнее, без переполнения */
    .article-main-title, h1.fw-black {
        font-size: clamp(1.6rem, 6.6vw, 2.15rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.03em !important;
    }

    /* ---------- ФОТО ---------- */
    .article-cover-wrapper {
        border-radius: 16px !important;
        margin-bottom: 1.5rem !important;
        box-shadow: 0 10px 26px rgba(11, 16, 32, 0.14) !important;
    }
    .article-content img:not(.recommend-widget__img) {
        border-radius: 14px !important;
    }

    /* ---------- ШАПКА: меню удобнее на тап ---------- */
    .navbar-content { padding-top: 12px !important; gap: 12px !important; }
    .categories-btn {
        width: 100%; justify-content: center;
        min-height: 48px; font-size: 1rem !important;
    }
    .categories-dropdown { width: 100%; min-width: 0; }
    .steam-sale-btn { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
    .header-search .input-group { min-height: 50px; }
    .header-search .btn-primary { padding-left: 18px !important; padding-right: 18px !important; }
    /* выпадашка поиска во всю ширину контейнера, удобные пункты */
    .search-dropdown__item { padding: 14px 14px; }
    .search-dropdown__title { font-size: 0.95rem; }

    /* ---------- ПЛИТКИ БЫСТРОГО ДОСТУПА: как иконки приложений ---------- */
    .quick-links a { padding: 4px 0; }
    .quick-links .icon-box { transition: transform .12s ease, box-shadow .25s ease; }
    .quick-links a:active .icon-box { transform: scale(0.93); }
    .quick-links span { font-size: 0.9rem; line-height: 1.25; display: inline-block; }

    /* ---------- КАРТОЧКИ СТАТЕЙ: отклик на нажатие ---------- */
    .article-card { transition: transform .12s ease, box-shadow .3s ease, border-color .3s ease; }
    .article-card:active { transform: scale(0.985); }
    /* убираем «липкий» hover-подъём на тач-устройствах */
    .article-card:hover { transform: none; }
    .articles .list-group-item:active { background: var(--tv-accent-soft) !important; border-radius: 12px; }

    /* Сайдбар «Читают сейчас» / «Топ 7 дней» — побольше воздуха над ним */
    .col-lg-4.mt-5 { margin-top: 2rem !important; }
    .articles .sticky-top { position: static !important; }

    /* ---------- ФОРМЫ: крупные поля и кнопки во всю ширину ---------- */
    .comment-form { padding: 20px !important; border-radius: 18px !important; }
    .comment-form .form-control { padding: 13px 14px !important; border-radius: 12px !important; }
    .comment-form textarea.form-control { min-height: 130px; }
    .comment-form__type { min-height: 48px; display: flex; align-items: center; justify-content: center; flex: 1 1 calc(50% - 4px); }
    .comment-form .btn.btn-primary { width: 100%; justify-content: center; min-height: 52px; }
    .comment-form .mt-3.d-flex { width: 100%; }

    /* «Поделиться»: кнопки крупные, в две колонки, копирование — на всю ширину */
    .article-share__actions .btn { min-height: 48px; font-size: 0.95rem; }
    .article-share__actions button.btn-outline-secondary { grid-column: 1 / -1; }

    /* Блок оценки «Статья была полезна?» — крупные кнопки */
    .col-lg-8 > .mt-5.p-4.rounded-4.bg-light.border.text-center .btn { min-height: 48px; padding: 12px 22px !important; font-size: 1rem; }

    /* ---------- TELEGRAM CTA: кнопка крупная и читаемая ---------- */
    .tg-cta__btn { min-height: 52px; font-size: 1.02rem; }

    /* ---------- ОБЩИЕ ТАЧ-ТАРГЕТЫ ---------- */
    .breadcrumb { font-size: 0.82rem; padding: 8px 14px; flex-wrap: wrap; }
    .btn-lg, .btn.btn-primary.btn-lg { min-height: 50px; }

    /* ---------- КОД И ТАБЛИЦЫ: подсказка о горизонтальном скролле ---------- */
    .article-content pre { font-size: 13px !important; padding: 18px !important; padding-top: 42px !important; -webkit-overflow-scrolling: touch; }
    .article-content .table-responsive { border-radius: var(--tv-radius-sm); }

    /* ---------- ЗАЛИПАЮЩИЕ ЭЛЕМЕНТЫ: учитываем safe-area iPhone ---------- */
    .back-to-top {
        bottom: calc(18px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
        width: 48px; height: 48px;
    }
    .back-to-top svg { width: 22px; height: 22px; }
}

/* Кнопка «Наверх»: иконка-стрелка через SVG (без зависимости от шрифта иконок) */
.back-to-top svg { width: 22px; height: 22px; display: block; }
.back-to-top i { line-height: 1; }