/* =========================================
 ЧАСТЬ 1: БАЗА, ШАПКА И ПЕРЕМЕННЫЕ (MOBILE FIRST)
 ========================================= */
:root {
 /* Неизменные цвета */
 --brand-red: #cc0000;
 --header-bg: #111111;
 --footer-bg: #111111;
 --font-main: 'Roboto', Arial, sans-serif;
 --article-font-size: 16px;

 /* Светлая тема (По умолчанию) */
 --bg-main: #f2f2f2; /* Фон сайта */
 --bg-card: #ffffff; /* Фон карточек, виджетов, статьи */
 --bg-secondary: #f9f9f9; /* Фон инпутов, цитат, доп. блоков */
 --bg-hover: #f0f0f0; /* Фон при наведении */
 
 --text-main: #111111; /* Заголовки, жирный текст */
 --text-regular: #444444; /* Основной текст статей, описания */
 --text-muted: #666666; /* Даты, мета-информация, плейсхолдеры */
 
 --border-color: #eeeeee; /* Границы, разделители */
 --shadow-color: rgba(0,0,0,0.05); /* Легкая тень */
}

/* =========================================
 ТЕМНАЯ ТЕМА (Включается по атрибуту data-theme="dark")
 ========================================= */
[data-theme="dark"] {
 --bg-main: #121212; /* Глубокий темный фон (почти черный) */
 --bg-card: #1e1e1e; /* Фон карточек (чуть светлее) */
 --bg-secondary: #2a2a2a; /* Фон инпутов и цитат */
 --bg-hover: #333333; /* Фон при наведении */
 
 --text-main: #ffffff; /* Белые заголовки */
 --text-regular: #cccccc; /* Светло-серый читаемый текст */
 --text-muted: #999999; /* Приглушенный текст */
 
 --border-color: #333333; /* Темные границы */
 --shadow-color: rgba(0,0,0,0.3); /* Более плотная тень */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
 font-family: var(--font-main); 
 background: var(--bg-main); 
 color: var(--text-regular); 
 line-height: 1.5; 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale;
 transition: background-color 0.3s ease, color 0.3s ease;
}

a { 
 text-decoration: none; color: inherit; 
 transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s; 
}

img { max-width: 100%; height: auto; display: block; object-fit: cover; }
ul { list-style: none; }

.container { 
 max-width: 1240px; margin: 0 auto; padding: 0 15px; 
 position: relative; height: 100%; 
 transform: translateZ(0); will-change: transform;
}

/* --- ТИПОГРАФИКА ВНУТРИ СТАТЬИ --- */
.article-body h1, 
.article-body h2, 
.article-body h3, 
.article-body h4 {
 color: var(--text-main); 
 font-weight: 600; line-height: 1.2; margin-top: 0px; margin-bottom: 26px; 
}

.article-body h2 { font-size: 19px; }
.article-body h3 { font-size: 19px; }
.article-body h4 { font-size: 17px; }

@media (min-width: 768px) {
 .article-body h2 { font-size: 22px; }
 .article-body h3 { font-size: 22px; }
 .article-body h4 { font-size: 19px; }
}

.article-body ul, .article-body ol { margin-bottom: 26px; padding-left: 20px; list-style: none; }
.article-body li { position: relative; margin-bottom: 12px; padding-left: 28px; line-height: 1.6; }
.article-body ul li::before {
 content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
 background: var(--brand-red); border-radius: 50%; 
}
.article-body ol { counter-reset: britball-counter; }
.article-body ol li { counter-increment: britball-counter; }
.article-body ol li::before {
 content: counter(britball-counter) "."; position: absolute; left: 0; top: 0;
 color: var(--brand-red); font-weight: 800; font-size: 15px;
}

/* =========================================
 2. ШАПКА САЙТА (HEADER)
 ========================================= */
.espn-top-bar { background: var(--header-bg); height: 50px; width: 100%; position: sticky; top: 0; z-index: 1000; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
.top-flex { display: flex; align-items: stretch; justify-content: space-between; height: 100%; }
.left-group { display: flex; align-items: center; height: 100%; }
.logo-area { background: var(--brand-red); height: 100%; display: flex; align-items: center; padding: 0 25px; position: relative; margin-right: 15px; margin-left: -15px; }
.logo-area::after { content: ''; position: absolute; top: 0; right: -15px; width: 30px; height: 100%; background: var(--brand-red); transform: skewX(-20deg); z-index: 1; }
.logo { color: #fff; font-weight: 900; font-size: 24px; text-transform: uppercase; line-height: 1; font-style: italic; letter-spacing: -1px; position: relative; z-index: 2; }
.header-tools, .mobile-right-area { display: flex; align-items: center; gap: 15px; height: 100%; }
.tool-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 5px; display: flex; align-items: center; }
.tool-btn:hover { color: var(--brand-red); }

.desktop-only { display: none !important; } 
.mobile-only { display: block !important; } 

@media (min-width: 992px) {
 .desktop-only { display: block !important; }
 .mobile-only { display: none !important; }
 .logo-area { margin-right: 25px; }
}

.auth-links-header { font-size: 12px; color: #fff; font-weight: 700; text-transform: uppercase; }
.auth-links-header a { color: #fff; }
.auth-links-header a:hover { text-decoration: underline; }
.sep { margin: 0 5px; color: var(--text-muted); }
.auth-logged-in { display: flex; align-items: center; gap: 5px; height: 100%; }
.header-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid #333; transition: border-color 0.2s; }
.profile-icon-link:hover .header-avatar { border-color: var(--brand-red); }
.header-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; color: #ccc; border: 1px solid #333; }

.top-nav-desktop ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.top-nav-desktop a { color: #ccc; text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; padding: 16px 0; border-bottom: 3px solid transparent; transition: color 0.2s, border-bottom-color 0.2s; }
.top-nav-desktop a:hover, .top-nav-desktop a.active-tab { color: #fff; border-bottom-color: var(--brand-red); }

.sub-header { background: var(--bg-card); border-bottom: 1px solid var(--border-color); height: 40px; width: 100%; position: sticky; top: 50px; z-index: 999; transform: translateZ(0); will-change: transform; backface-visibility: hidden; transition: background-color 0.3s; }
.sub-nav { display: none; align-items: center; height: 100%; gap: 20px; list-style: none; padding: 0; margin: 0; }
.sub-nav.active { display: flex; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.sub-nav a { color: var(--text-main); font-size: 12px; font-weight: 700; text-transform: uppercase; transition: color 0.2s; }
.sub-nav a:hover { color: var(--brand-red); }

.burger-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 0; line-height: 1; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; visibility: hidden; opacity: 0; transition: 0.3s; }
.mobile-menu-overlay.open { visibility: visible; opacity: 1; }
.mobile-menu-content { position: absolute; top: 0; right: -100%; width: 280px; height: 100%; background: var(--header-bg); transition: 0.3s; padding: 20px; display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.3); overflow-y: auto; }
.mobile-menu-overlay.open .mobile-menu-content { right: 0; }
.mm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 15px; }
.mm-title { color: #fff; font-weight: 900; text-transform: uppercase; font-size: 18px; }
.mm-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
.mm-auth { display: flex; gap: 10px; margin-top: 20px; }
.mm-auth-btn { flex: 1; text-align: center; padding: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 4px; }
.mm-auth-btn.login { border: 1px solid #fff; color: #fff; }
.mm-auth-btn.reg { background: var(--brand-red); color: #fff; border: 1px solid var(--brand-red); }
.accordion-menu { list-style: none; padding: 0; margin: 0; }
.accordion-menu li { border-bottom: 1px solid #222; }
.mm-link, .mm-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 0; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 14px; text-decoration: none; cursor: pointer; }
.mm-trigger:hover { color: var(--brand-red); }
.mm-submenu { display: none; padding-left: 15px; padding-bottom: 15px; background: #1a1a1a; list-style: none; margin: 0 -20px; padding: 15px 20px; }
.mm-submenu li { border: none; margin-bottom: 10px; }
.mm-submenu a { color: #ccc; text-decoration: none; font-size: 14px; }
.mm-submenu a:hover { color: #fff; }
.has-children.open .mm-submenu { display: block; }
.has-children.open .arrow { transform: rotate(180deg); }

/* =========================================
 ЧАСТЬ 2: КОНТЕНТ И СЕТКИ
 ========================================= */
.main-hero { margin-bottom: 20px; width: 100%; margin-top: 0px; }
.hero-card { position: relative; display: block; height: 300px; background: #000; border-radius: 12px; overflow: hidden; transform: translateZ(0); }
.hero-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.hero-card:hover .hero-img { transform: scale(1.03); opacity: 0.6; }
.hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%); color: #fff; }
.hero-title { font-size: 22px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; color:#fff;}

@media (min-width: 992px) {
 .hero-card { height: 450px; }
 .hero-title { font-size: 32px; }
}

.main-wrapper { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 20px auto; transform: translateZ(0); will-change: transform; }
@media (min-width: 992px) { .main-wrapper { grid-template-columns: 1fr 340px; align-items: start; } }

.block-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; padding-bottom: 10px; position: relative; }
.block-title { font-size: 20px; font-weight: 900; text-transform: uppercase; line-height: 1; margin: 0; position: relative; color: var(--text-main); }
.block-title::after { content: ''; position: absolute; bottom: -12px; left: 0; width: 100%; height: 2px; background: var(--brand-red); }
.block-link { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--brand-red); }

/* --- GRID A (MIXED) --- */
.layout-a-grid { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.card-a { display: flex; flex-direction: column; background: var(--bg-card); overflow: hidden; transition: background 0.3s, transform 0.2s; transform: translateZ(0); }
.card-a img { width: 100%; object-fit: cover; margin-bottom: 0; }
.card-a > a { display: block; width: 100%; position: relative; }
.card-a > div { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.card-a-title { font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--text-main); margin-top: 5px; display: block; transition: color 0.2s; }
.card-a-title:hover { color: var(--brand-red); }
.card-a-cat { color: var(--brand-red); font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 4px; display: block; line-height: 1; }

.date-mobile-only { display: none; font-size: 10px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.date-standard { display: block; font-size: 11px; color: var(--text-muted); margin-top: 8px; font-weight: 600; text-transform: uppercase; }

.mob-mixed:first-child { margin-bottom: 0; border-radius: 12px 12px 0 0; border: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--bg-card); z-index: 2; overflow: hidden; }
.mob-mixed:first-child > div { padding-bottom: 15px; }
.mob-mixed:first-child img { height: 220px; }
.mob-mixed:first-child .date-mobile-only { display: none; }
.mob-mixed:first-child .date-standard { display: block; } 

.mob-mixed:not(:first-child) { display: flex; flex-direction: column; background: var(--bg-card); padding: 12px 20px; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); min-height: auto; border-radius: 0; margin-bottom: 0; }
.mob-mixed:not(:first-child) .mob-mix-img { display: none; } 
.mob-mixed:not(:first-child) .card-a-cat { display: none; }
.mob-mixed:not(:first-child) .date-mobile-only { display: block; }
.mob-mixed:not(:first-child) .date-standard { display: none; }
.mob-mixed:not(:first-child) .card-a-title { font-size: 15px; margin-top: 0; font-weight: 200; line-height: 1.4; color: var(--text-main); }
.mob-mixed:not(:first-child) .mob-mix-content { padding: 0; }
.mob-mixed:last-child { border-radius: 0 0 12px 12px; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-color); margin-bottom: 0px; }

@media (min-width: 992px) {
 .layout-a-grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 20px; }
 .mob-mixed, .mob-mixed:first-child, .mob-mixed:not(:first-child), .mob-mixed:last-child { border: none !important; border-radius: 8px !important; box-shadow: 0 1px 3px var(--shadow-color); margin-bottom: 0; background: var(--bg-card); overflow: hidden !important; height: 100%; padding: 0 !important; }
 .mob-mixed:not(:first-child) .mob-mix-img { display: block; width: 100%; } 
 .mob-mixed:not(:first-child) .card-a-cat { display: block; }
 .mob-mixed .date-mobile-only { display: none !important; } 
 .mob-mixed .date-standard { display: block !important; margin-top: auto; font-size: 11px; }
 .mob-mixed:not(:first-child) .mob-mix-content { padding: 15px; height: 100%; display: flex; flex-direction: column; }

 .card-a:first-child { grid-row: 1 / 4; padding: 0; }
 .card-a:first-child .mob-mix-img { height: 350px; display: block; }
 .card-a:first-child .mob-mix-img img { height: 100%; width: 100%; object-fit: cover; }
 .card-a:first-child .mob-mix-content { padding: 25px; } 
 .card-a:first-child .card-a-title { font-size: 24px; font-weight: 800; }
 .card-a:not(:first-child) { flex-direction: row; align-items: stretch; height: 100%; }
 .card-a:not(:first-child) .mob-mix-img { width: 140px; flex-shrink: 0; height: auto; min-height: 100%; position: relative; } 
 .card-a:not(:first-child) .mob-mix-img img { position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; } 
 .card-a:not(:first-child) .mob-mix-content { padding: 15px; justify-content: center; } 
 .card-a:not(:first-child) .card-a-title { font-size: 15px; margin-top: 0; font-weight: 800; } 
 .card-a:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 20px var(--shadow-color) !important; }
}

/* --- GRID B --- */
.layout-b-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.card-b { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: background 0.3s, transform 0.2s, box-shadow 0.2s; }
.card-b-img { height: 200px; width: 100%; object-fit: cover;}
.card-b-body { padding: 15px; }
.card-b-cat { color: var(--brand-red); font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; display: block; }
.card-b-title { font-weight: 800; font-size: 18px; line-height: 1.3; margin-bottom: 0; color: var(--text-main); transition: color 0.2s; }
.card-b-title:hover { color: var(--brand-red); }
@media (min-width: 600px) { .layout-b-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .layout-b-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- GRID C --- */
.layout-c-grid { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.card-c { display: flex; flex-direction: column; background: var(--bg-card); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); transition: background 0.3s, transform 0.2s, box-shadow 0.2s; transform: translateZ(0); }
.card-c-img-link { width: 100%; height: 200px; flex-shrink: 0; overflow: hidden; display: block; }
.card-c-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card-c-body { padding: 20px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }
.card-c-title { font-size: 18px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: var(--text-main); transition: color 0.2s; text-decoration: none; }
.card-c-title:hover { color: var(--brand-red); }
.card-c .nf-desc { font-size: 14px; color: var(--text-regular); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-c-meta { margin-top: auto; font-size: 12px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border-color); }
.card-c .meta-right { display: flex; align-items: center; gap: 15px; }
.card-c .meta-el { font-size: 11px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; text-transform: uppercase; cursor: default; }
.card-c .meta-el svg { stroke: var(--text-muted); transition: 0.2s; }
@media (min-width: 768px) { .card-c { flex-direction: row; align-items: stretch; } .card-c-img-link { width: 280px; height: auto; min-height: 180px; } }

/* --- GRID D --- */
.layout-d-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.card-d { display: flex; flex-direction: column; background: var(--bg-card); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px var(--shadow-color); transition: background 0.3s, transform 0.3s, box-shadow 0.3s; height: 100%; transform: translateZ(0); }
.card-d-img-link { width: 100%; height: 260px; display: block; overflow: hidden; }
.card-d-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.card-d-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.card-d-title { font-size: 18px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: var(--text-main); transition: color 0.2s; text-decoration: none; }
.card-d-title:hover { color: var(--brand-red); }
.card-d-meta { margin-top: auto; font-size: 12px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-color); }
.card-d .meta-right { display: flex; align-items: center; gap: 15px; }
.card-d .meta-el { font-size: 11px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; text-transform: uppercase; cursor: default; }
.card-d .meta-el svg { stroke: var(--text-muted); transition: stroke 0.2s; }
@media (min-width: 768px) { .layout-d-grid { grid-template-columns: 1fr 1fr; } }

/* --- ГИБРИДНАЯ ЛЕНТА (Вид материалов) --- */
.nf-container { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 5px 20px; box-shadow: 0 4px 12px var(--shadow-color); margin-bottom: 20px; transition: background 0.3s; }
.nf-item { border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
.nf-item:last-child { border-bottom: none; }

.nf-mobile-view { display: block; padding: 12px 0; border-bottom: 1px solid var(--border-color);} 
.nf-desktop-view { display: none; }
.nf-mob-meta { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-bottom: 5px; }
.nf-time { color: var(--text-regular); font-weight: 700; }
.nf-hot { color: var(--brand-red); margin-right: 5px; font-size: 14px; vertical-align: middle; animation: blink 1.5s infinite; }
.nf-mob-title { display: block; font-size: 15px; line-height: 1.4; color: var(--text-main); text-decoration: none; transition: color 0.2s; }
.nf-mob-title:hover { color: var(--brand-red); }
.nf-mob-title b, .nf-bold { font-weight: 800; }

@media (min-width: 992px) {
 .nf-container { background: transparent; border: none; padding: 0; box-shadow: none; display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
 .nf-mobile-view { display: none; }
 .nf-desktop-view { display: flex; align-items: stretch; }
 .nf-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: background 0.3s, transform 0.2s, box-shadow 0.2s; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; transform: translateZ(0); }
 .nf-img-box { width: 260px; min-height: 180px; flex-shrink: 0; position: relative; overflow: hidden; display: block; }
 .nf-main-link { display: block; width: 100%; height: 100%; }
 .nf-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
 .nf-badge-cat { position: absolute; bottom: 10px; left: 10px; background: #cc0000; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); z-index: 5; text-decoration: none; transition: background 0.2s; }
 .nf-badge-cat:hover { background: #a30000; }
 .nf-card-body { padding: 20px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }
 .nf-card-title { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--text-main); margin-bottom: 10px; transition: color 0.2s; text-decoration: none; }
 .nf-card-title:hover { color: var(--brand-red); }
 .nf-desc { font-size: 14px; line-height: 1.5; color: var(--text-regular); margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .nf-card-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-color); }
 .meta-right { display: flex; align-items: center; gap: 15px; }
 .meta-el { font-size: 11px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; text-transform: uppercase; cursor: default; }
 .meta-el svg { stroke: var(--text-muted); }
}

/* =========================================
 ЧАСТЬ 3: САЙДБАР, ФУТЕР И ПРОЧЕЕ
 ========================================= */
.sidebar-area { width: 100%; transform: translateZ(0); }
.widget { background: var(--bg-card); border-radius: 8px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--border-color); box-shadow: 0 1px 3px var(--shadow-color); width: 100%; transition: background 0.3s; }
.sidebar-area .widget:last-child { margin-bottom: 0; }
.widget-title { font-size: 14px; font-weight: 800; text-transform: uppercase; margin-bottom: 15px; border-bottom: 2px solid var(--brand-red); padding-bottom: 8px; color: var(--text-main); }

.match-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); width: 100%; }
.match-row:last-child { border-bottom: none; }
.match-team { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-team:first-child { text-align: left; } .match-team:last-child { text-align: right; }
.match-score { width: 45px; background: var(--bg-secondary); padding: 4px 0; border-radius: 4px; font-weight: 800; text-align: center; margin: 0 10px; flex-shrink: 0; color: var(--text-main); }
.live-badge { background: var(--brand-red); color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 3px; text-transform: uppercase; margin-right: 5px; vertical-align: middle; }

.fw-item { display: flex; flex-direction: column; width: 100%; margin-bottom: 12px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.fw-item:last-child { border-bottom: none; margin-bottom: 0; }
.fw-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: block; }
.fw-meta span { margin-left: 8px; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
.fw-title { font-size: 15px; line-height: 1.4; display: block; color: var(--text-main); text-decoration: none; transition: color 0.2s; }
.fw-title:hover { color: var(--brand-red); }
.fw-title b { font-weight: 800; } .fw-title.fw-bold { font-weight: 700; }
.icon-hot { color: var(--brand-red); margin-right: 5px; font-size: 14px; vertical-align: middle; animation: blink 1s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.table-widget { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-widget th { text-align: left; color: var(--text-muted); font-weight: 400; padding-bottom: 10px; font-size: 12px; }
.table-widget td { padding: 8px 0; border-bottom: 1px solid var(--border-color); vertical-align: middle; color: var(--text-regular);}
.team-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-main);}
.team-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; display: block; }
.tbl-pts { font-weight: 800; text-align: right; color: var(--brand-red); }

.full-article { background: var(--bg-card); border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px var(--shadow-color); transition: background 0.3s; }
@media (min-width: 768px) { .full-article { padding: 40px; } }
.article-head { margin-bottom: 25px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
.article-category { display: inline-block; background: var(--brand-red); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 11px; padding: 4px 8px; border-radius: 4px; margin-bottom: 15px; }
.article-title { font-size: 26px; font-weight: 900; line-height: 1.2; color: var(--text-main); margin-bottom: 15px; }
@media (min-width: 768px) { .article-title { font-size: 36px; } }
.article-main-img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 30px; max-height: 500px; object-fit: cover; }
.article-body {
 /* ЗАМЕНИ font-size: 16px; НА ЭТО: */
 font-size: var(--article-font-size) !important;
 
 /* И ДОБАВЬ ПЛАВНОСТЬ, чтобы текст не прыгал резко: */
 transition: font-size 0.3s ease;
 
 line-height: 1.6; 
 color: var(--text-regular);
}
.article-body p { margin-bottom: 26px; } .article-body b, .article-body strong { font-weight: 700; color: var(--text-main); }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote { background: var(--bg-secondary); border: none; border-left: 4px solid var(--brand-red); padding: 15px 20px; margin: 30px 0 30px 20px; font-size: inherit; line-height: 1.6; color: var(--text-regular); font-style: italic; font-weight: 400; border-radius: 0 8px 8px 0; transition: background 0.3s;}
@media (max-width: 600px) { .article-body blockquote { padding-left: 15px; margin: 20px 0; } }

.article-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 20px; }
.share-block { display: flex; align-items: center; gap: 15px; }
.share-label { font-weight: 700; font-size: 14px; color: var(--text-main); }
.meta-footer { display: inline-flex; align-items: center; flex-wrap: wrap; background: var(--bg-secondary); border: 1px solid var(--border-color); padding: 8px 15px; border-radius: 50px; gap: 0; transition: background 0.3s; }
.meta-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); padding: 0 15px; position: relative; text-decoration: none; transition: color 0.2s; }
.meta-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: var(--border-color); }
.meta-item:first-child { padding-left: 0; } .meta-item:last-child { padding-right: 0; }
.meta-item svg { width: 16px; height: 16px; stroke: var(--text-muted); transition: stroke 0.2s; }
.meta-item.author { font-weight: 700; color: var(--text-main); } .meta-item.author svg { stroke: var(--brand-red); }
.meta-item.comments:hover { color: var(--brand-red); } .meta-item.comments:hover svg { stroke: var(--brand-red); }
@media (max-width: 600px) { .meta-footer { display: flex; border-radius: 8px; justify-content: space-between; width: 100%; } .meta-item { padding: 5px 0; font-size: 12px; } .meta-item::after { display: none; } .meta-item.date span { display: none; } }

.ad-placeholder {display: none !important; width: 100%; min-height: 120px; background: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: background 0.3s; }
.ad-label { color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; }
.ad-placeholder img, .ad-placeholder iframe { position: relative; z-index: 2; max-width: 100%; display: block; margin: 0 auto; }
.content-area > :last-child { margin-bottom: 0 !important; }

.ad-placeholderactive {important; width: 100%; max-height: 150px; min-height: 150px; background: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: background 0.3s; }
.ad-labelactive { color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; }
.ad-placeholdreactive img, .ad-placeholder iframe { position: relative; z-index: 2; max-width: 100%; display: block; margin: 0 auto; }
.content-areaactive > :last-child { margin-bottom: 0 !important; }

/* =========================================
 9. КОММЕНТАРИИ И ФОРМА
 ========================================= */
.comments-section { margin-top: 40px; background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
.comm-header-title { font-size: 24px; font-weight: 900; margin-bottom: 30px; color: var(--text-main); position: relative; display: inline-block; padding-bottom: 10px; border: none; padding-left: 0; }
.comm-header-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 4px; background: var(--brand-red); border-radius: 2px; }
.comm-list { display: block; }

.bb-comm-card, .comm-item { display: flex; gap: 20px; background: var(--bg-card); border-radius: 12px; padding: 25px; box-shadow: 0 5px 20px var(--shadow-color); border: 1px solid var(--border-color); transition: background 0.3s, transform 0.2s, box-shadow 0.2s; position: relative; margin-bottom: 25px !important; max-width: 100%; box-sizing: border-box; }

.bb-comm-side, .comm-avatar { flex-shrink: 0; }
.bb-avatar, .comm-avatar { width: 55px; height: 55px; border-radius: 50%; padding: 3px; border: 2px solid var(--border-color); overflow: hidden; }
.bb-avatar img, .comm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.bb-comm-body, .comm-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; }
.bb-comm-header, .comm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; flex-wrap: wrap; }
.bb-author, .comm-author-name { font-size: 16px; font-weight: 800; color: var(--text-main); }
.bb-author a, .comm-author-name a { text-decoration: none; color: var(--text-main); transition: color 0.2s; }

.bb-date, .comm-date { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.bb-time { color: var(--text-muted); margin-left: 5px; }

.bb-comm-text, .comm-text { font-size: 15px; line-height: 1.6; color: var(--text-regular); margin-bottom: 15px; }
.bb-comm-footer, .comm-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.bb-btn-reply, .comm-reply-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-regular); background: var(--bg-secondary); padding: 8px 16px; border-radius: 20px; transition: all 0.2s; text-decoration: none !important; border: none; cursor: pointer; }
.bb-btn-reply:hover, .comm-reply-btn:hover { background: var(--brand-red); color: #fff; box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3); }
.bb-btn-reply svg { stroke: currentColor; }
.bb-moder-panel { font-size: 11px; opacity: 0.4; transition: opacity 0.2s; color: var(--text-muted);}
.bb-comm-card:hover .bb-moder-panel { opacity: 1; }

@media (max-width: 600px) {
 .bb-comm-card, .comm-item { padding: 15px; gap: 15px; }
 .bb-avatar, .comm-avatar { width: 40px; height: 40px; }
 .bb-comm-header, .comm-header { flex-direction: column; align-items: flex-start; gap: 2px; }
 .bb-btn-reply, .comm-reply-btn { padding: 6px 12px; font-size: 11px; }
}

.comm-form-box { background: var(--bg-card); border-radius: 12px; padding: 25px; box-shadow: 0 5px 20px var(--shadow-color); margin-bottom: 30px; max-width: 100vw; overflow-x: hidden; transition: background 0.3s; }
.comm-form-inner { display: flex; gap: 20px; align-items: flex-start; }
.comm-form-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.comm-form-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comm-form-avatar svg { width: 24px; height: 24px; fill: var(--text-muted); }
.comm-form-body { flex-grow: 1; width: 100%; min-width: 0; }
.comm-form-field { margin-bottom: 15px; }
.comm-form-input { width: 100%; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 15px; font-family: var(--font-main); font-size: 16px; outline: none; resize: vertical; background: var(--bg-secondary); color: var(--text-main); transition: 0.2s; }
.comm-form-input:focus { background: var(--bg-card); border-color: var(--text-muted); box-shadow: 0 0 0 3px var(--shadow-color); }
.comm-form-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.comm-form-btn { background: var(--brand-red); color: #fff; border: none; padding: 10px 25px; border-radius: 20px; font-weight: 700; text-transform: uppercase; font-size: 12px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(204, 0, 0, 0.2); }
.comm-form-btn:hover { background: #a30000; box-shadow: 0 6px 15px rgba(204, 0, 0, 0.3); transform: translateY(-1px); }
.comm-form-options { display: flex; gap: 10px; }
.comm-option svg { width: 18px; height: 18px; fill: var(--text-muted); cursor: pointer; transition: 0.2s; }
.comm-option:hover svg { fill: var(--brand-red); }
.ucf-bb { display: none !important; }

.comm-form-box table, .comm-form-box form { width: 100% !important; max-width: 100% !important; table-layout: fixed; }
.comm-form-box input[type="text"], .comm-form-box textarea, .comm-form-box iframe { max-width: 100% !important; box-sizing: border-box !important; }
.comm-form-box img { max-width: 100%; height: auto; }

.tags-wrapper { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.tags-icon { flex-shrink: 0; color: var(--brand-red); display: flex; align-items: center; }
.tags-list { font-size: 0; line-height: 0; }
.tags-list a { display: inline-block; font-size: 11px; font-weight: 800; color: var(--text-regular); background: var(--bg-secondary); padding: 6px 12px; border-radius: 4px; margin-right: 8px; margin-bottom: 5px; text-decoration: none; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; }
.tags-list a:hover { background: var(--brand-red); color: #fff; transform: translateY(-1px); }

.bb-search-wrapper { position: relative; width: 100%; max-width: 100%; margin: 0 auto 20px auto; }
.bb-search-input { width: 100%; height: 55px; padding: 0 60px 0 25px; border: 2px solid var(--border-color); background: var(--bg-card); border-radius: 50px; font-family: var(--font-main); font-size: 16px; font-weight: 500; color: var(--text-main); outline: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 10px var(--shadow-color); }
.bb-search-input:focus { border-color: var(--brand-red); box-shadow: 0 8px 20px rgba(204, 0, 0, 0.15); background: var(--bg-card); }
.bb-search-input::placeholder { color: var(--text-muted); font-weight: 400; }
.bb-search-submit { position: absolute; top: 5px; right: 5px; width: 45px; height: 45px; background: var(--brand-red); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; }
.bb-search-submit svg { stroke: #fff; transition: stroke 0.2s; }
.bb-search-submit:hover { background: #a30000; transform: scale(1.05); }
@media (max-width: 600px) { .bb-search-input { height: 50px; font-size: 14px; padding-left: 20px; } .bb-search-submit { width: 40px; height: 40px; } }

.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 17, 17, 0.95); backdrop-filter: blur(10px); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.search-overlay.active { opacity: 1; visibility: visible; }
.search-close-btn { position: absolute; top: 30px; right: 30px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; transition: 0.2s; opacity: 0.7; }
.search-close-btn:hover { opacity: 1; color: var(--brand-red); transform: rotate(90deg); }
.search-overlay-content { width: 100%; max-width: 800px; padding: 20px; transform: translateY(30px); transition: 0.4s ease; }
.search-overlay.active .search-overlay-content { transform: translateY(0); }
.search-input-wrapper { position: relative; border-bottom: 2px solid #555; display: flex; align-items: center; transition: 0.3s; }
.search-input-wrapper:focus-within { border-bottom-color: var(--brand-red); }
.search-icon-big { color: #fff; margin-right: 20px; opacity: 0.5; }
#bigSearchInput { width: 100%; background: transparent; border: none; font-size: 32px; font-weight: 700; color: #fff; padding: 20px 0; font-family: 'Inter', sans-serif; outline: none; }
#bigSearchInput::placeholder { color: #666; font-weight: 500; }
.search-help-text { margin-top: 15px; color: #666; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 600px) { .search-close-btn { top: 20px; right: 20px; font-size: 30px; } #bigSearchInput { font-size: 20px; padding: 15px 0; } .search-icon-big { width: 24px; height: 24px; margin-right: 10px; } }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.6); backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-window { background: var(--bg-card); width: 90%; max-width: 380px; padding: 30px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; transform: translateY(30px); transition: all 0.3s ease; }
.modal-overlay.active .modal-window { transform: translateY(0); }
.modal-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 25px; color: var(--text-main); }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: var(--text-muted); line-height: 1; transition: 0.2s; }
.modal-close:hover { color: var(--text-main); }
.modal-input-group { margin-bottom: 15px; }
.modal-input-group input { width: 100%; height: 48px; padding: 0 15px; border: 1px solid var(--border-color); border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 15px; background: var(--bg-secondary); color: var(--text-main); box-sizing: border-box; }
.modal-input-group input:focus { background: var(--bg-card); border-color: var(--brand-red); outline: none; }
.modal-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 13px; color: var(--text-regular); }
.modal-remember { display: flex; align-items: center; cursor: pointer; }
.modal-remember input { margin-right: 6px; accent-color: var(--brand-red); }
.modal-forgot { color: var(--brand-red); text-decoration: none; font-weight: 600; }
.modal-submit { width: 100%; height: 48px; background: var(--brand-red); color: #fff; border: none; border-radius: 50px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.modal-submit:hover { background: #a30000; transform: translateY(-2px); }
.modal-footer { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color); font-size: 14px; color: var(--text-regular); }
.modal-footer a { color: var(--text-main); font-weight: 700; text-decoration: none; }

/* =========================================
 ПАГИНАЦИЯ (СОВРЕМЕННЫЙ МИНИМАЛИЗМ 4.0)
 ========================================= */
.catPages1, .pagesBlock1, .pagesBlockuz1, .bb-pagination { 
 display: flex; flex-flow: row wrap; gap: 8px; justify-content: center; margin: 50px 0; padding: 0; 
}

/* Базовый вид кнопок (и ссылок, и активной страницы) */
.catPages1 a, .pagesBlock1 a, .swchItem,
.catPages1 b, .pagesBlock1 b, .swchItemA { 
 display: inline-flex; align-items: center; justify-content: center; 
 min-width: 40px; height: 40px; padding: 0 10px;
 border-radius: 50px; 
 font-family: var(--font-main); font-size: 15px; font-weight: 800; 
 text-decoration: none !important; 
 transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); 
 box-sizing: border-box;
 line-height: 1; margin: 0;
}

/* Неактивные страницы (Вернули серую рамку и белый фон, как было в твоем оригинале) */
.catPages1 a, .pagesBlock1 a, .swchItem { 
 color: var(--text-main); 
 background: var(--bg-card); 
 border: 1px solid var(--border-color);
}

/* Наведение на ПК */
@media (hover: hover) and (pointer: fine) {
 .catPages1 a:hover, .pagesBlock1 a:hover, .swchItem:hover { 
 background: var(--bg-hover); 
 border-color: var(--text-muted); /* Благородная сероватая обводка */
 color: var(--text-main); /* Текст остается контрастным */
 transform: scale(1.05); 
 }
}

/* Тап на мобилке */
@media (max-width: 991px) {
 .catPages1 a:active, .pagesBlock1 a:active, .swchItem:active {
 background: var(--bg-hover); 
 border-color: var(--brand-red);
 color: var(--brand-red);
 transform: scale(0.95); 
 transition: none !important;
 }
}

/* АКТИВНАЯ СТРАНИЦА (Красный круг нужного размера) */
.catPages1 b, .pagesBlock1 b, .swchItemA, span.swchItemA { 
 background: var(--brand-red) !important; 
 color: #ffffff !important; 
 border: 1px solid var(--brand-red) !important; /* Уравниваем размер с неактивными */
 box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
 cursor: default; 
}

/* Строго БЕЛАЯ цифра внутри активной страницы */
.catPages1 b span, .pagesBlock1 b span, .swchItemA span {
 background: transparent !important;
 color: #ffffff !important; 
 padding: 0 !important; margin: 0 !important;
 min-width: 0 !important; height: auto !important;
 border: none !important; box-shadow: none !important;
}

/* ТОЧКИ (ПРОПУСКИ) */
.swchItemDots, 
.catPages1 > span:not(.swchItemA), 
.pagesBlock1 > span:not(.swchItemA) { 
 display: inline-flex; align-items: center; justify-content: center;
 color: var(--text-muted) !important; 
 width: auto; min-width: 24px; height: 40px; padding: 0; 
 pointer-events: none; background: transparent !important; border: none !important; box-shadow: none !important;
}

/* Адаптив для мобилок */
@media (max-width: 480px) { 
 .catPages1, .pagesBlock1, .pagesBlockuz1, .bb-pagination { gap: 6px; margin: 30px 0; }
 .catPages1 a, .pagesBlock1 a, .swchItem,
 .catPages1 b, .pagesBlock1 b, .swchItemA,
 .swchItemDots, .catPages1 > span:not(.swchItemA), .pagesBlock1 > span:not(.swchItemA) { 
 min-width: 36px; height: 36px; font-size: 14px; padding: 0 8px;
 } 
}

/* --- FOOTER STYLES --- */
.site-footer { background: var(--footer-bg); color: #fff; padding: 30px 0 15px; font-size: 14px; }
.footer-grid { display: block; margin-bottom: 20px; }
.footer-col { border-bottom: 1px solid #222; }
.footer-col:last-child { border-bottom: none; }
.footer-accordion-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; cursor: pointer; user-select: none; }
.footer-accordion-head .footer-title { margin: 0; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; }
.footer-accordion-head .arrow { width: 10px; height: 10px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg); transition: 0.3s; }
.footer-col.open .arrow { transform: rotate(-135deg); border-color: #cc0000; }
.footer-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.footer-col.open .footer-accordion-body { max-height: 300px; }
.footer-links { list-style: none; padding: 0; margin: 0 0 15px 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #bbb; text-decoration: none; transition: 0.2s; }
.footer-links a:hover { color: #fff; }
.app-buttons { display: flex; flex-direction: column; gap: 10px; }
.app-btn { display: block; text-align: center; background: #222; color: #fff; padding: 8px; border-radius: 6px; font-weight: 600; font-size: 12px; border: 1px solid #333; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 30px; padding-top: 20px; text-align: center; color: aaa; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.copy-text span { font-size: 11px; opacity: 0.85; display: block; margin-top: 5px; line-height: 1.4; }
@media (min-width: 768px) {
 .site-footer { padding: 50px 0 20px; }
 .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
 .footer-col { border: none; }
 .footer-accordion-head { pointer-events: none; padding: 0 0 20px 0; cursor: default; }
 .footer-accordion-head .arrow { display: none; }
 .footer-accordion-body { max-height: none !important; overflow: visible; }
 .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
 .copy-text { max-width: 70%; }
 .app-buttons { flex-direction: row; }
}

/* =========================================
 СТИЛЬ "МАТЧ-ЦЕНТР"
 ========================================= */
.s365-widget-wrapper.match-center-style a { text-decoration: none !important; color: inherit !important; display: block !important; pointer-events: none; cursor: default; }
.s365-widget-wrapper .wgt_hd, .s365-widget-wrapper .soccer365_widget12gs_ft { display: none !important; }
.s365-widget-wrapper .scr365_wgt { font-family: 'Roboto', sans-serif !important; width: 100% !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_game_block { background: var(--bg-card) !important; border-top: none !important; border-bottom: 1px solid var(--border-color) !important; padding: 10px 0 !important; margin: 0 !important; height: auto !important; position: relative !important; transition: background 0.3s;}
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_game_block:last-child { border-bottom: none !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_game_link { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; position: relative !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_status { position: static !important; transform: none !important; order: 1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin-bottom: 12px !important; gap: 5px !important; }
.s365-widget-wrapper.match-center-style .size11 { display: block !important; font-size: 11px !important; color: var(--text-muted) !important; }
.s365-widget-wrapper.match-center-style .size10 { font-size: 11px !important; color: var(--text-muted) !important; background: transparent !important; padding: 0 !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_result { order: 2 !important; display: flex !important; width: 100% !important; justify-content: space-between !important; align-items: center !important; position: relative !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_ht, .s365-widget-wrapper.match-center-style .soccer365_widget12gs_at { width: 45% !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: var(--bg-card) !important; z-index: 2 !important; position: static !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_ht { justify-content: flex-start !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_at { justify-content: flex-end !important; flex-direction: row !important; }
.s365-widget-wrapper.match-center-style .img16 { display: flex !important; align-items: center !important; gap: 8px !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_ht .img16 { flex-direction: row-reverse !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_at .img16 { flex-direction: row-reverse !important; }
.s365-widget-wrapper.match-center-style .img16 span { font-size: 14px !important; font-weight: 600 !important; color: var(--text-main) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.s365-widget-wrapper.match-center-style .img16 img { width: 25px !important; height: 25px !important; object-fit: contain !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_result::after { content: ":"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px !important; height: 20px !important; background: var(--bg-hover) !important; color: var(--text-main) !important; font-size: 11px !important; font-weight: 700 !important; text-align: center !important; line-height: 20px !important; z-index: 1; border-radius: 4px; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_gls { display: block !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 5 !important; font-size: 11px !important; width: 20px !important; background: transparent !important; color: var(--text-main) !important; font-weight: 700 !important; padding: 0 !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_ht .soccer365_widget12gs_gls { left: 50% !important; margin-left: -25px !important; text-align: right !important; }
.s365-widget-wrapper.match-center-style .soccer365_widget12gs_at .soccer365_widget12gs_gls { left: 50% !important; margin-left: 5px !important; text-align: left !important; }

/* =========================================
 СТИЛИ ВКЛАДОК
 ========================================= */
.widget-tabs-header { display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; }
.tab-btn { background: none; border: none; outline: none; cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); padding: 0 20px 8px 0; position: relative; transition: 0.3s; }
.tab-btn:hover { color: var(--text-regular); }
.tab-btn.active { color: var(--text-main); }
.tab-btn.active::after { content: ""; position: absolute; bottom: -1px; left: 0; width: calc(100% - 20px); height: 2px; background-color: var(--brand-red, #cc0000); }

/* =========================================
 СТИЛЬ "ТУРНИРНАЯ ТАБЛИЦА"
 ========================================= */
.s365-widget-wrapper.table-minimal-style a { text-decoration: none !important; color: inherit !important; pointer-events: none !important; cursor: default !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_ft, .s365-widget-wrapper.table-minimal-style .scr365_cl_both { display: none !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table { font-family: 'Roboto', sans-serif !important; width: 100% !important; background: var(--bg-card) !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table > .wgt_hd { display: flex !important; align-items: center !important; background: var(--bg-card) !important; border-bottom: 2px solid var(--border-color) !important; padding: 10px 0 !important; height: auto !important; color: var(--text-muted) !important; font-size: 10px !important; text-transform: uppercase !important; font-weight: 700 !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_plc { font-size: 0 !important; width: 30px !important; text-align: center !important; float: none !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_plc::after { content: "#"; font-size: 11px !important; color: var(--text-muted) !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_club { font-size: 0 !important; flex-grow: 1 !important; width: auto !important; float: none !important; padding-left: 10px !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_club img, .s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_club a { display: none !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_club::after { content: "Команда"; font-size: 11px !important; color: var(--text-muted) !important; display: block !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(4), .s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(5), .s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(6), .s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(7), .s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(8) { display: none !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item { float: none !important; font-size: 11px !important; color: var(--text-muted) !important; font-weight: 700 !important; text-align: center !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(3) { width: 25px !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(9) { width: 35px !important; }
.s365-widget-wrapper.table-minimal-style .wgt_hd .soccer365_widget12tb_table_item:nth-child(10) { width: 30px !important; color: var(--text-main) !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_position { display: flex !important; align-items: center !important; border-bottom: 1px solid var(--border-color) !important; padding: 8px 0 !important; background: var(--bg-card) !important; position: relative !important; transition: background 0.3s;}
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_position:nth-child(-n+4)::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: #007bff; border-radius: 2px; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_position:nth-child(5)::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: #fd7e14; border-radius: 2px; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_plc { width: 30px !important; font-size: 11px !important; color: var(--text-muted) !important; font-weight: 500 !important; text-align: center !important; flex-shrink: 0 !important; float: none !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_club { flex-grow: 1 !important; width: auto !important; float: none !important; text-align: left !important; padding-left: 10px !important; }
.s365-widget-wrapper.table-minimal-style .img16 { display: flex !important; align-items: center !important; gap: 10px !important; }
.s365-widget-wrapper.table-minimal-style .img16 img { width: 20px !important; height: 20px !important; object-fit: contain !important; }
.s365-widget-wrapper.table-minimal-style .img16 span, .s365-widget-wrapper.table-minimal-style .img16 a { font-size: 14px !important; font-weight: 600 !important; color: var(--text-main) !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item { float: none !important; text-align: center !important; font-weight: 400 !important; color: var(--text-regular) !important;}
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(4), .s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(5), .s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(6), .s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(7), .s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(8) { display: none !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(3) { color: var(--text-muted) !important; font-size: 11px !important; width: 25px !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(9) { color: var(--text-muted) !important; font-size: 11px !important; width: 35px !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item:nth-child(10) { font-weight: 800 !important; color: var(--text-main) !important; font-size: 13px !important; width: 30px !important; }
.s365-widget-wrapper.table-minimal-style .soccer365_widget12tb_table_item b { font-weight: 800 !important; }
@media (min-width: 992px) {
 .s365-widget-wrapper.table-full-mode .soccer365_widget12tb_table_item:nth-child(4), .s365-widget-wrapper.table-full-mode .soccer365_widget12tb_table_item:nth-child(5), .s365-widget-wrapper.table-full-mode .soccer365_widget12tb_table_item:nth-child(6), .s365-widget-wrapper.table-full-mode .soccer365_widget12tb_table_item:nth-child(7), .s365-widget-wrapper.table-full-mode .soccer365_widget12tb_table_item:nth-child(8) { display: block !important; width: 30px !important; font-size: 12px !important; color: var(--text-regular) !important; }
 .s365-widget-wrapper.table-full-mode .wgt_hd .soccer365_widget12tb_table_item:nth-child(4), .s365-widget-wrapper.table-full-mode .wgt_hd .soccer365_widget12tb_table_item:nth-child(5), .s365-widget-wrapper.table-full-mode .wgt_hd .soccer365_widget12tb_table_item:nth-child(6), .s365-widget-wrapper.table-full-mode .wgt_hd .soccer365_widget12tb_table_item:nth-child(7), .s365-widget-wrapper.table-full-mode .wgt_hd .soccer365_widget12tb_table_item:nth-child(8) { display: block !important; width: 30px !important; color: var(--text-muted) !important; text-align: center !important; }
 .s365-widget-wrapper.table-full-mode .soccer365_widget12tb_table_position { padding: 10px 0 !important; }
 .s365-widget-wrapper.table-full-mode .soccer365_widget12tb_table_club { padding-left: 15px !important; }
}

/* =========================================
 СТИЛЬ МИНИ-ЧАТА
 ========================================= */
/* Оболочка больше не имеет своего скролла, она просто служит фоном */
.mchat-box { background: var(--bg-card); padding: 10px; border-radius: 8px; overflow-y: auto !important; overflow-x: hidden !important; transition: background 0.3s;}
.mchat-box::-webkit-scrollbar { width: 4px; }
.mchat-box::-webkit-scrollbar-track { background: transparent; }
.mchat-box::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; }
.mchat-box::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }
.mchat-message-item { display: flex; gap: 10px; margin-bottom: 15px; animation: fadeChat 0.3s ease; }
@keyframes fadeChat { from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:translateY(0);} }
.mchat-avatar-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; cursor: pointer; }
.mchat-avatar-circle a { text-decoration: none; color: inherit; }
.mchat-content { flex: 1; background: var(--bg-secondary); padding: 8px 12px; border-radius: 0 12px 12px 12px; transition: background 0.3s;}
.mchat-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.mchat-name { font-size: 13px; font-weight: 700; color: var(--text-main); cursor: pointer; transition: color 0.2s; }
.mchat-time { font-size: 10px; color: var(--text-muted); }
.mchat-text { font-size: 13px; color: var(--text-regular); line-height: 1.4; word-break: break-word; }
.mchat-form-container { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.mchat-input-area { display: flex; align-items: flex-end; gap: 8px; }
.mchat-textarea-wrapper { flex-grow: 1; }
.mchat-textarea-wrapper textarea, .mchat-textarea-wrapper input[type="text"] { width: 100% !important; box-sizing: border-box !important; border: 1px solid var(--border-color) !important; border-radius: 20px !important; padding: 8px 12px !important; font-family: var(--font-main) !important; font-size: 13px !important; min-height: 76px !important; height: 36px !important; resize: none !important; outline: none !important; transition: 0.3s; background: var(--bg-secondary) !important; color: var(--text-main) !important;}
.mchat-textarea-wrapper textarea:focus { border-color: var(--text-muted) !important; }
.mchat-send-btn input[type="submit"] { background-color: var(--brand-red, #cc0000) !important; color: #fff !important; border: none !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; font-size: 0 !important; cursor: pointer !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; transition: 0.2s; }
.mchat-guest-fields { margin-top: 5px; display: flex; gap: 5px; font-size: 11px; }
.mchat-guest-fields input { border: 1px solid var(--border-color); border-radius: 4px; padding: 3px; width: 100%; background: var(--bg-secondary); color: var(--text-main);}
.mchat-login-msg { text-align: center; font-size: 12px; color: var(--text-muted); }

/* =========================================
 НАВИГАЦИЯ ПО СТАТЬЯМ
 ========================================= */
.article-navigation { display: flex; flex-direction: column; gap: 15px; margin: 40px 0 20px 0; border-top: 0px solid var(--border-color); padding-top: 0px; font-family: 'Roboto', sans-serif; }
.nav-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 10px; }
.nav-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 800; display: flex; align-items: center; gap: 5px; }
.nav-next .nav-label { justify-content: flex-end; }
.nav-empty { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.nav-link-wrapper a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-main); transition: color 0.2s; }
.nav-next .nav-link-wrapper a { flex-direction: row-reverse; text-align: right; }
.nav-title { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.nav-thumb { width: 60px; height: 60px; min-width: 60px; border-radius: 6px; background-color: var(--bg-hover); background-size: cover; background-position: center; border: 1px solid var(--border-color); transition: 0.3s; }
.nav-thumb.no-image { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 24px; background-repeat: no-repeat; }
@media (min-width: 768px) { .article-navigation { flex-direction: row; gap: 15px; } .nav-item { flex: 1; } }

/* =========================================
 АВТОР ПУБЛИКАЦИИ
 ========================================= */
.entry-author { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; margin-top: 20px; transition: background 0.3s;}
.entry-author-info { display: flex; align-items: center; gap: 12px; }
.entry-author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-hover); color: var(--brand-red, #cc0000); display: flex; align-items: center; justify-content: center; }
.entry-author-person { display: flex; flex-direction: column; }
.entry-author-name { font-size: 15px; font-weight: 800; color: var(--text-main);}
.entry-author-name a { color: var(--text-main); text-decoration: none; transition: color 0.2s; }
.entry-author-job { font-size: 12px; color: var(--text-muted); }
.entry-author-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stat-metrics-row { display: flex; align-items: center; gap: 15px; }
.stat-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-regular); }
.stat-item svg { color: var(--text-muted); }
.source-check a { color: var(--text-muted); display: flex; transition: color 0.2s; }

/* ИСТОЧНИК */
.entry-author-source { font-size: 11px; color: var(--text-muted); margin-top: 5px; display: inline-block; }
.entry-author-source .source-link { color: inherit; font-weight: 800; text-transform: uppercase; text-decoration: none; letter-spacing: 0.3px; transition: color 0.2s ease; margin-left: 3px; }

/* ПОДПИСЬ К ФОТО */
.article-main-figure { margin: 0 0 30px 0; position: relative; padding: 0; }
.article-main-img { width: 100%; height: auto; border-radius: 8px; max-height: 500px; object-fit: cover; display: block; margin-bottom: 0 !important; }
.article-main-figure:has(.article-img-caption) .article-main-img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.article-img-caption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 15px; background: var(--bg-secondary); border-radius: 0 0 8px 8px; border: 1px solid var(--border-color); border-top: none; transition: background 0.3s;}
.caption-text { font-size: 13px; color: var(--text-regular); flex: 1; line-height: 1.4; }
.caption-source { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; white-space: nowrap; }

/* ТАБЛИЦЫ ВНУТРИ СТАТЕЙ */
.full-article { overflow: hidden !important; min-width: 0 !important; }
.article-body table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; margin: 35px 0; font-size: 15px; background: var(--bg-card); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px var(--shadow-color); border: 1px solid var(--border-color); }
.article-body table thead, .article-body table thead tr { background: var(--brand-red); }
.article-body table thead td, .article-body table thead th { background: var(--brand-red); padding: 15px; font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; border: none; color: #fff; text-align: center; }
.article-body table thead td strong { color: #fff !important; }
.article-body table tbody td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); color: var(--text-regular); vertical-align: middle; text-align: center; }
.article-body table tbody td:nth-child(2) { text-align: left; font-weight: 800; color: var(--text-main); }
.article-body table tbody tr:nth-child(even) { background-color: var(--bg-secondary); }
.article-body table tbody tr:hover { background-color: var(--bg-hover); }

@media (max-width: 768px) {
 .full-article { overflow-x: hidden !important; }
 .article-body table { display: block !important; max-width: calc(100vw - 70px) !important; width: max-content !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin: 25px auto !important; border: 1px solid var(--border-color) !important; box-sizing: border-box !important; }
 .article-body table thead td, .article-body table thead th, .article-body table tbody td { padding: 8px 6px !important; font-size: 11px !important; white-space: nowrap !important; }
 .article-body table tbody td:nth-child(2) { white-space: normal !important; min-width: 90px !important; line-height: 1.2 !important; }
}

/* ПРОФИЛИ КЛУБОВ */
.club-hero { background-color: var(--header-bg, #111); background-image: linear-gradient(to right, #111, #1a1a1a); padding: 40px 0; margin-bottom: 30px; border-bottom: 3px solid var(--brand-red); }
.club-hero-inner { display: flex; align-items: center; gap: 25px; }
.club-hero-logo { width: 100px; height: 100px; background: #fff; border-radius: 12px; padding: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.club-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.club-hero-info { color: #fff; }
.club-name { font-size: 36px; font-weight: 900; line-height: 1.1; margin: 0 0 5px 0; text-transform: uppercase; }
.club-league { font-size: 14px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }
.club-content-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.club-info-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; box-shadow: 0 4px 15px var(--shadow-color); transition: background 0.3s;}
.club-info-title { font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--text-main); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color); }
.club-info-list { list-style: none; padding: 0; margin: 0; }
.club-info-list li { display: flex; flex-direction: column; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-color); }
.club-info-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.info-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.info-val { font-size: 15px; color: var(--text-main); font-weight: 600; }
.info-val a { color: var(--brand-red); text-decoration: none; transition: color 0.2s; }

@media (min-width: 992px) {
 .club-content-grid { grid-template-columns: 1fr 340px; }
 .club-hero-logo { width: 130px; height: 130px; }
 .club-name { font-size: 48px; }
}

/* БЛОК ЧИТАЙТЕ ТАКЖЕ В ТЕКСТЕ */
.custom-read-more { margin: 30px 0 30px 20px; padding: 20px; background-color: var(--bg-secondary); border-left: 4px solid var(--brand-red, #cc0000); border-radius: 0 8px 8px 0; font-family: var(--font-main); transition: background 0.3s;}
.read-more-label { display: block; font-size: 0.7em; font-weight: 800; color: var(--brand-red, #cc0000); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }
.read-more-title { display: block; font-size: 1.15em; font-weight: 700; color: var(--text-main) !important; text-decoration: none !important; line-height: 1.4; transition: color 0.2s; }
.read-more-desc { margin-top: 10px; font-size: 0.9em; color: var(--text-regular); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* =======================================
 СТИЛИ ДЛЯ СКРИПТА ЛС 
 ======================================= */
#pm-britball-container td { vertical-align: top; }
#pm-britball-container form { margin: 0; padding: 0; }
#pm-britball-container textarea { resize: none; }
#pm-britball-container textarea:focus, #pm-britball-container input:focus, #pm-britball-container select:focus { outline: none; }
.block { width: 100%; overflow: hidden; background: none; text-align: left; }
.big { padding-top: 15px; padding-bottom: 20px; background: transparent; }
#pm-britball-container hr { display: none; }
.nonemessage { background: var(--bg-secondary); padding: 50px 0; text-align: center; border-radius: 8px; color: var(--text-muted); font-weight: bold;}

.pmCatLink, .pmCatLinkActive { display: block; text-align: center; padding: 10px 15px; border-radius: 6px; font-weight: 800; text-transform: uppercase; font-size: 11px; margin-bottom: 8px; text-decoration: none !important; box-sizing: border-box; transition: 0.2s; }
.pmCatLink { background: var(--bg-secondary); color: var(--text-main); }
.pmCatLinkActive { background: #cc0000; color: #FFF !important; }

.writenew { display: block; text-align: center; padding: 10px 20px; background: #111; color: #fff; border-radius: 6px; font-weight: bold; text-decoration: none; margin-bottom: 10px; transition: background 0.2s; }

#pm-britball-container table[width="100%"], #addform { background: transparent; border: none; padding: 0; }
#newmess { margin-top: 20px; }
form[name="fuser"] { display: none; }
#pm-britball-container td[style="white-space: nowrap"] { color: var(--text-muted); }
.over_input_1, .over_input_2 { display: block; border: 1px solid var(--border-color); margin-bottom: 15px; border-radius: 6px; background: var(--bg-secondary); }
.over_input_2 { border-color: #cc0000; background: var(--bg-card); }
.input_1 { width: 100%; padding: 12px 15px; margin: 0; border: none; font-family: var(--font-main); font-size: 16px; color: var(--text-main); background: transparent; box-sizing: border-box; }
textarea.input_1 { height: 150px; }

#pm-britball-container #PMtoUser, #pm-britball-container #bc1, #pm-britball-container #bc2, #pm-britball-container #bc3, #pm-britball-container #bc4, #pm-britball-container #bc5, #pm-britball-container #bc6, #pm-britball-container #bc7, #pm-britball-container #bc8, #pm-britball-container #bc9, #pm-britball-container #bc10, #pm-britball-container #bc11, #pm-britball-container #bc12, #pm-britball-container #bc13, #pm-britball-container #bc14, #pm-britball-container #bc15, #pm-britball-container #bc16, #pm-britball-container #bc17, #pm-britball-container #bc18, #pm-britball-container #bc19, #pm-britball-container #bc20, #pm-britball-container #bc21, #pm-britball-container #bc22, #pm-britball-container #message, #pm-britball-container .smiles { display: none; }
#snewmes { display: block; padding: 10px 0; }
#eMessage { margin-bottom: 15px; font-weight: bold; font-size: 16px; color: var(--text-main); }

.prosm, #sbm { width: 100%; margin-top: 10px; cursor: pointer; border: none; padding: 14px 20px; border-radius: 6px; font-weight: bold; text-transform: uppercase; font-size: 12px; box-sizing: border-box; transition: background 0.2s; }
.prosm { color: var(--text-main); background: var(--bg-secondary); }
#sbm { color: white; background: #cc0000; }

.inputPM { border-left: 4px solid #cc0000; padding: 15px !important; background: var(--bg-card); margin-bottom: 10px !important; border-radius: 4px; }
.outputPM { border-left: 4px solid var(--border-color); padding: 15px !important; background: var(--bg-card); margin-bottom: 10px !important; border-radius: 4px; }
.inputPM img[width="5"], .outputPM img[width="5"] { display: none; }
#dg1,#dg2,#dg3,#dg4,#dg5,#dg6,#dg7,#dg8,#dg9,#dg10,#dg11,#dg12,#dg13,#dg14,#dg15,#dg16,#dg17,#dg18,#dg19,#dg20,#dg21 { display: none !important; }

.r_round { display: inline-block; margin-right: 15px; margin-bottom: 0px; border-radius: 50%; }
.m_title { display: inline-block; padding-top: 4px; font-size: 15px; font-weight: bold; line-height: 1.3;}
.m_title a { text-decoration: none !important; color: var(--text-main) !important; transition: color 0.2s; }
.m_author { display: block; padding-bottom: 5px; font-size: 12px; color: var(--text-muted); }
.m_author a { color: var(--text-muted); text-decoration: none; }
.m_date { display: block; padding-top: 5px; font-size: 12px; color: var(--text-muted); }

.msin_t { display: table; width: 100%; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 15px; }
.msin_l { display: table-cell; vertical-align: top; padding-right: 15px; width: 50px; }
.msin_r { display: table-cell; vertical-align: top; }
.m_title2 { padding-top: 0px; font-weight: bold; font-size: 16px; margin-bottom: 5px; color: var(--text-main); }
.avatarLetter { display: inline-block; font-size: 18px; font-weight: bold; text-transform: uppercase; height: 40px; line-height: 40px; width: 40px; text-align: center; color: #fff; border-radius: 50%; background: #111; }

#pm-britball-container, #pm-britball-container td, #pm-britball-container div { word-wrap: break-word !important; overflow-wrap: break-word !important; }
#pm-britball-container a { word-break: break-all !important; max-width: 100%; }

@media (min-width: 768px) {
 .pmCatLink, .pmCatLinkActive { display: inline-block; margin-right: 5px; padding: 8px 15px; }
 .writenew { display: inline-block; margin-bottom: 0; }
 .prosm, #sbm { width: auto; float: right; margin-top: 0; margin-left: 10px; padding: 10px 20px; }
 .m_date { display: inline-block; padding-top: 12px; }
 .m_author { padding-bottom: 10px; }
 textarea.input_1 { height: 250px; font-size: 14px; }
}

/* =========================================
 РЕДАКТИРОВАНИЕ ПРОФИЛЯ
 ========================================= */
.edit-profile-box { overflow-x: hidden !important; }
.edit-profile-box table.manTable { display: block; width: 100% !important; border: none !important; }
.edit-profile-box tbody { display: flex; flex-direction: column; width: 100%; gap: 20px; }
.edit-profile-box tr { display: flex; flex-direction: column; width: 100%; }
.edit-profile-box tr:has(.manTdSep), .edit-profile-box td.manTdSep, .edit-profile-box hr.manHr { display: none !important; }

.edit-profile-box td.manTd1 { display: block; width: 100% !important; padding: 0 0 5px 0 !important; border: none !important; text-align: left !important; font-weight: 800; color: var(--text-main); font-size: 13px; text-transform: uppercase; }
.edit-profile-box td.manTd2 { display: block; width: 100% !important; padding: 0 !important; border: none !important; }

.edit-profile-box input[type="text"], .edit-profile-box input[type="password"], .edit-profile-box select, .edit-profile-box textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 48px; padding: 0 15px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-main); font-family: var(--font-main); font-size: 16px; box-sizing: border-box; transition: 0.2s; }
.edit-profile-box textarea { height: auto; min-height: 120px; padding: 15px; }
.edit-profile-box input[type="text"]:focus, .edit-profile-box input[type="password"]:focus, .edit-profile-box select:focus, .edit-profile-box textarea:focus { background: var(--bg-card); border-color: var(--brand-red); outline: none; }
.edit-profile-box input[type="file"] { width: 100% !important; padding: 10px 0 !important; background: transparent !important; border: none !important; height: auto !important; font-size: 14px; color: var(--text-main); }
.edit-profile-box input[type="radio"], .edit-profile-box input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-red); vertical-align: middle; margin-right: 5px; cursor: pointer; }
.edit-profile-box label { vertical-align: middle; margin-right: 15px; font-size: 14px; color: var(--text-regular); }

.edit-profile-box .manTdError { display: block; background: #fff5f5; color: #cc0000; padding: 15px; border-radius: 8px; border: 1px solid #ffcccc; font-weight: 800; text-align: center; width: 100% !important; box-sizing: border-box; }
.edit-profile-box .manTdBut { display: block; width: 100% !important; padding: 10px 0 0 0 !important; border: none !important; text-align: left !important; }
.edit-profile-box input.manFlSbm { width: 100%; background: #111; color: #fff; border: none; padding: 14px 20px; border-radius: 8px; font-weight: 800; text-transform: uppercase; font-size: 14px; cursor: pointer; transition: background 0.2s; box-sizing: border-box; }

@media (min-width: 768px) {
 .edit-profile-box input[type="text"], .edit-profile-box input[type="password"], .edit-profile-box textarea { max-width: 100% !important; font-size: 15px; }
 .edit-profile-box select { width: auto !important; min-width: 140px !important; display: inline-block !important; margin-right: 15px; }
 .edit-profile-box td.manTd2 { line-height: 2.2; }
 .edit-profile-box input.manFlSbm { width: auto; min-width: 300px; font-size: 15px; }
}

/* =========================================
 ГЛОБАЛЬНАЯ ЗАЩИТА ОТ ЗАЛИПАНИЯ ХОВЕРОВ (ТОЛЬКО ДЛЯ ПК)
 ========================================= */
* { -webkit-tap-highlight-color: transparent !important; }

@media (hover: hover) and (pointer: fine) {
 .fw-title:hover, .nf-mob-title:hover, .nf-card-title:hover, .card-c-title:hover, .card-d-title:hover, .read-more-title:hover, .entry-author-name a:hover, .nav-link-wrapper a:hover .nav-title, .bb-author a:hover, .comm-author-name a:hover, .mchat-name:hover, .source-check a:hover, .info-val a:hover, .pmCatLink:hover, .m_title a:hover {
 color: var(--brand-red) !important;
 }

 .card-a:hover, .card-b:hover, .bb-comm-card:hover, .nav-item:hover { transform: translateY(-3px); }
 .card-c:hover .card-c-img, .card-d:hover .card-d-img, .nf-item:hover .nf-img, .hero-card:hover .hero-img { transform: scale(1.05); }
.card-b:hover, .card-c:hover, .card-d:hover, .nf-item:hover { 
 box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
 border-color: var(--border-color); /* Убрали резкую рамку */
 }
 [data-theme="dark"] .card-b:hover, 
 [data-theme="dark"] .card-c:hover, 
 [data-theme="dark"] .card-d:hover, 
 [data-theme="dark"] .nf-item:hover { 
 box-shadow: 0 8px 25px rgba(0,0,0,0.5); /* Глубокая тень для темной темы */
 }
 .nav-item:hover { border-color: var(--brand-red); box-shadow: 0 4px 15px var(--shadow-color); }
 .nav-item:hover .nav-thumb { filter: brightness(0.9); }
 .hero-card:hover .hero-img { opacity: 0.6; }
 .bb-comm-card:hover { box-shadow: 0 8px 25px var(--shadow-color); }
 
 .edit-profile-box input.manFlSbm:hover, .writenew:hover, .prosm:hover, #sbm:hover { background: var(--brand-red); }
}



/* =========================================
 ИКОНКИ ТЕМЫ (СМЕНА СОЛНЦА И ЛУНЫ)
 ========================================= */
.icon-sun { display: none; }
.icon-moon { display: block; }
.theme-text-dark { display: none !important; }
.theme-text-light { display: flex !important; }

[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .theme-text-dark { display: flex !important; }
[data-theme="dark"] .theme-text-light { display: none !important; }


/* =========================================================
 МИНИ-ЧАТ (Адаптировано для Britball)
 ========================================================= */
.chat {
 min-width: 300px;
 width: 100%;
 height: 540px;
 margin: auto;
 display: flex;
 flex-direction: column;
 position: relative;
 border-radius: 8px;
 border: 1px solid var(--border-color);
 background: var(--bg-card);
 box-shadow: 0 4px 15px var(--shadow-color);
 overflow: hidden;
 font-family: var(--font-main);
 transition: background 0.3s, border-color 0.3s;
}

.chat__ban {
 display: none; padding: 8px 10px; font-size: 12px;
 background: rgba(204, 0, 0, 0.1); color: var(--brand-red);
 border-bottom: 1px solid rgba(204, 0, 0, 0.22);
}

.chat__notify {
 position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
 border-radius: 999px; border: 1px solid var(--border-color);
 background: var(--bg-card); color: var(--text-main);
 display: none; align-items: center; justify-content: center;
 font-size: 14px; padding: 0; box-shadow: 0 4px 15px var(--shadow-color);
 z-index: 100; transition: background 0.2s, border-color 0.2s;
}
.chat__notify--active {
 border-color: rgba(204, 0, 0, 0.4);
 box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15), 0 4px 15px var(--shadow-color);
}
.chat__notify-badge {
 position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
 border-radius: 999px; background: var(--brand-red); color: #fff;
 font-size: 10px; line-height: 14px; text-align: center; font-weight: 700;
 border: 2px solid var(--bg-card);
}

.chat__messages {
 flex: 1 1 auto; min-height: 0; padding: 12px; overflow-y: auto;
 display: flex; flex-direction: column; gap: 8px; font-size: 14px;
 -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
 background-color: var(--bg-main);
 background-image: url('/assets/chat_301225/img/bg.webp');
 background-repeat: repeat; background-position: 50%; background-size: contain;
 border-bottom: 1px solid var(--border-color); transition: background-color 0.3s;
}
[data-theme="dark"] .chat__messages { background-blend-mode: multiply; opacity: 0.9; }

.chat__message {
 position: relative; max-width: 82%; display: inline-flex; flex-direction: column;
 padding: 8px 10px; border-radius: 12px;
 background: var(--bg-card); border: 1px solid var(--border-color);
 transition: transform 0.15s ease-out, background 0.3s, border-color 0.3s;
}
.chat__message--swipe-hint::after {
 content: "↩"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
 font-size: 22px; opacity: 0; color: var(--brand-red); transition: opacity 0.15s ease, transform 0.15s ease;
}
.chat__message--swipe-hint-active::after { opacity: 1; transform: translateY(-50%) scale(1.05); }

.chat__message--mine {
 margin-left: auto;
 background: rgba(204, 0, 0, 0.08);
 border-color: rgba(204, 0, 0, 0.15);
 align-items: flex-end;
}
.chat__message--mine .chat__more-btn { display: none; }

.chat__meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.chat__author { font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__time { opacity: 0.85; white-space: nowrap; }

.chat__more-btn { margin-left: 4px; border: none; background: transparent; color: var(--text-muted); padding: 0 4px; font-size: 16px; line-height: 1; border-radius: 8px; display: none; cursor: pointer; }
.chat__more-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.chat__text { white-space: pre-wrap; word-wrap: break-word; color: var(--text-regular); }
.chat__badge-muted { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(204, 0, 0, 0.1); color: var(--brand-red); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }

.chat__reply {
 margin-bottom: 6px; padding: 7px 8px; border-radius: 10px;
 background: var(--bg-secondary); border: 1px solid var(--border-color); border-left: 3px solid var(--brand-red);
 font-size: 11px; cursor: pointer; transition: background 0.3s;
}
.chat__message--mine .chat__reply { background: var(--bg-card); border-left-color: var(--brand-red); }
.chat__reply-author { font-weight: 700; margin-bottom: 2px; color: var(--text-main); }
.chat__reply-text { color: var(--text-muted); max-height: 2.4em; overflow: hidden; }
.chat__message--highlight { box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2); transition: box-shadow 0.2s ease-out; }

.chat__info-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 11px; color: var(--text-muted); min-height: 28px; background: var(--bg-card); transition: background 0.3s; }
.chat__status { flex: 1 1 auto; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__status--error { color: var(--brand-red); }
.chat__counter { flex: 0 0 auto; text-align: right; opacity: 0.85; }

.chat__reply-preview {
 display: none; padding: 10px 12px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
 background: var(--bg-secondary); font-size: 12px; align-items: center; gap: 10px; transition: background 0.3s;
}
.chat__reply-preview-main { flex: 1 1 auto; min-width: 0; }
.chat__reply-preview-title { font-weight: 800; color: var(--text-main); margin-bottom: 2px; }
.chat__reply-preview-text { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__reply-preview-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0; cursor: pointer; }
.chat__reply-preview-close:hover { background: var(--bg-hover); color: var(--brand-red); }

.chat__emoji-panel {
 position: absolute; right: 12px; left: 12px; bottom: 80px; padding: 8px; border-radius: 12px;
 background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 10px 30px var(--shadow-color);
 display: none; flex-wrap: wrap; gap: 5px; z-index: 30; transition: background 0.3s;
}
.chat__emoji-panel--open { display: flex; }
.chat__emoji-item { width: 32px; height: 32px; border-radius: 10px; border: 0 none; display: inline-flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; font-size: 20px; padding: 0; }
.chat__emoji-item:hover { background: var(--bg-hover); }
.chat__emoji-divider { flex-basis: 100%; height: 1px; margin: 4px 0; background: var(--border-color); }

.chat__composer { padding: 10px 12px; border-top: 1px solid var(--border-color); background: var(--bg-card); transition: background 0.3s; }
.chat__composer-bar { display: flex; align-items: stretch; gap: 8px; padding: 10px 10px; border-radius: 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.chat__composer-input {
 flex: 1 1 auto; min-width: 0; align-self: stretch; padding: 0;
 font: inherit; font-size: 13px !important; line-height: 1.35 !important;
 color: var(--text-main) !important; background-color: transparent !important; border: 0 none !important;
 overflow-y: hidden; resize: none; outline: none; max-height: 120px;
}
.chat__composer-input::placeholder { color: var(--text-muted); }
.chat__composer-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; border: 1px solid transparent; background: var(--bg-card); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.chat__composer-icon:hover { background: var(--bg-hover); color: var(--text-main); }
.chat__composer-send { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer; background: var(--brand-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(204, 0, 0, 0.2); transition: 0.2s; }
.chat__composer-send:hover { background: #a30000; transform: translateY(-1px); }
.chat__composer-send:disabled { opacity: 0.55; cursor: default; box-shadow: none; background: var(--border-color); color: var(--text-muted); }

.chat-context { position: fixed; z-index: 1000; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px; font-size: 12px; display: none; box-shadow: 0 10px 30px var(--shadow-color); transition: background 0.3s; }
.chat-context__btn { display: block; width: 100%; text-align: left; font-size: 12px; border: 0; background: transparent; color: var(--text-main); padding: 8px 10px; cursor: pointer; border-radius: 10px; transition: 0.2s;}
.chat-context__btn:hover { background: var(--bg-hover); color: var(--brand-red); }

.chat__message--enter { opacity: 0; transform: translateY(6px); }
.chat__message--enter.chat__message--enter-active { opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease; }
@media (prefers-reduced-motion: reduce) { .chat__message--enter, .chat__message--enter.chat__message--enter-active { opacity: 1; transform: none; transition: none; } }

/* --- КНОПКИ ИЗМЕНЕНИЯ ШРИФТА --- */
.font-resizer {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 20px;
 padding: 10px 0;
 border-bottom: 1px dashed var(--border-color);
}

.font-resizer-label {
 font-size: 11px;
 text-transform: uppercase;
 font-weight: 800;
 color: var(--text-muted);
 letter-spacing: 0.5px;
}

.font-btn {
 background: var(--bg-secondary);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 width: 34px;
 height: 34px;
 border-radius: 6px;
 cursor: pointer;
 font-weight: 800;
 font-size: 13px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
}

.font-btn:hover {
 background: var(--brand-red);
 color: #fff;
 border-color: var(--brand-red);
 transform: translateY(-1px);
}

.font-btn.active-size {
 border-color: var(--brand-red);
 color: var(--brand-red);
}


/* --- ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА (SMART BREVITY) --- */
.bb-mode-switch {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 25px;
 padding: 12px 15px;
 background: var(--bg-secondary);
 border-radius: 8px;
 border: 1px solid var(--border-color);
 width: fit-content;
}

.bb-mode-label { 
 font-size: 13px; 
 font-weight: 600; 
 color: var(--text-muted); 
 transition: color 0.3s; 
 cursor: pointer;
}

/* Сам тумблер */
.bb-toggle {
 position: relative;
 display: inline-block;
 width: 44px;
 height: 24px;
}
.bb-toggle input { opacity: 0; width: 0; height: 0; margin: 0; }
.bb-slider {
 position: absolute; cursor: pointer;
 top: 0; left: 0; right: 0; bottom: 0;
 background-color: var(--border-color);
 transition: .3s;
 border-radius: 24px;
}
.bb-slider:before {
 position: absolute; content: "";
 height: 18px; width: 18px;
 left: 3px; bottom: 3px;
 background-color: white;
 transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);
 border-radius: 50%;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.bb-toggle input:checked + .bb-slider { background-color: var(--brand-red); }
.bb-toggle input:checked + .bb-slider:before { transform: translateX(20px); }

/* --- КАРТОЧКА КРАТКОГО ТЕКСТА --- */
.bb-tldr-block {
 display: none; /* Скрыт по умолчанию */
 background: var(--bg-secondary);
 border-left: 4px solid var(--brand-red);
 padding: 20px;
 border-radius: 0 8px 8px 0;
 margin-bottom: 25px;
}
.bb-tldr-header { 
 font-size: 11px; 
 text-transform: uppercase; 
 font-weight: 900; 
 color: var(--brand-red); 
 margin-bottom: 12px; 
 letter-spacing: 0.5px; 
}
.bb-tldr-content { font-size: inherit; line-height: 1.6; color: var(--text-main); }

/* --- ЛОГИКА ПЕРЕКЛЮЧЕНИЯ (Класс вешается на body) --- */
/* Если включен краткий режим */
body.tldr-active .bb-full-text { display: none; }
body.tldr-active .bb-tldr-block { display: block; animation: fadeIn 0.3s ease; }
body.tldr-active #label-short { color: var(--text-main); font-weight: 800; }

/* Если включен полный режим (по умолчанию) */
body:not(.tldr-active) #label-full { color: var(--text-main); font-weight: 800; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* --- СТРОКА ИНСТРУМЕНТОВ (ШРИФТ + ТУМБЛЕР) --- */
.article-tools-row {
 display: flex;
 align-items: center;
 justify-content: space-between; /* Разносит кнопки по разным краям */
 flex-wrap: wrap; /* Позволяет переноситься на микро-экранах */
 gap: 15px;
 margin-bottom: 25px;
 padding-bottom: 15px;
 border-bottom: 1px dashed var(--border-color);
}

/* Корректируем старые отступы, так как теперь есть общая рамка */
.font-resizer { margin-bottom: 0; padding: 0; border-bottom: none; }
.bb-mode-switch { margin-bottom: 0; padding: 8px 12px; }

/* Скрываем вторую фразу на десктопе по умолчанию */
#label-short .text-full { display: none; }

/* --- МАГИЯ ДЛЯ МОБИЛОК (Умные надписи) --- */
@media (max-width: 600px) {
 /* Прячем левую надпись "Читать полностью" навсегда */
 #label-full { display: none; }
 
 /* Когда тумблер включен (режим TL;DR) */
 body.tldr-active #label-short .text-short { display: none; } /* Прячем "Только суть" */
 body.tldr-active #label-short .text-full { 
 display: inline; /* Показываем "Читать полностью" справа */
 color: var(--text-main); 
 font-weight: 800; 
 }
}


/* =========================================
 ВЫПАДАЮЩЕЕ МЕНЮ ДОБАВЛЕНИЯ (+)
 ========================================= */
.add-menu-wrapper {
 position: relative;
 display: flex;
 align-items: center;
 height: 100%;
}
.add-btn-trigger {
 background: none; 
 border: none; 
 color: #fff; 
 cursor: pointer; 
 padding: 5px; 
 display: flex; 
 align-items: center; 
 transition: color 0.2s;
}
.add-btn-trigger:hover, 
.add-menu-wrapper:hover .add-btn-trigger {
 color: var(--brand-red);
}

/* Сама плашка меню */
.add-menu-dropdown {
 position: absolute;
 top: 45px; /* Сдвигаем чуть ниже шапки */
 right: -10px; /* Выравниваем по правому краю плюсика */
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: 8px;
 box-shadow: 0 10px 30px var(--shadow-color);
 min-width: 240px;
 opacity: 0;
 visibility: hidden;
 transform: translateY(10px);
 transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
 z-index: 2000;
 display: flex;
 flex-direction: column;
 padding: 10px 0;
}


/* Эффект появления СТРОГО ПО КЛИКУ (Для всех устройств) */
.add-menu-wrapper.open .add-menu-dropdown {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

/* Ссылки внутри меню */
.add-menu-dropdown a {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 20px;
 color: var(--text-main);
 font-size: 13px;

 text-transform: uppercase;
 text-decoration: none;
 transition: background 0.2s, color 0.2s;
 border-left: 3px solid transparent;
}
.add-menu-dropdown a svg {
 stroke: var(--text-muted);
 transition: stroke 0.2s;
}

/* Ховер на ссылки */
@media (hover: hover) and (pointer: fine) {
 .add-menu-dropdown a:hover {
 background: var(--bg-hover);
 color: var(--brand-red);
 border-left-color: var(--brand-red);
 }
 .add-menu-dropdown a:hover svg {
 stroke: var(--brand-red);
 }
}

/* === ИСПРАВЛЕНИЕ ПОДСВЕТКИ ЗАГОЛОВКОВ В ИНФОРМЕРЕ 2 === */
.card-a-title:hover,
.mob-mixed:not(:first-child) .card-a-title:hover {
 color: var(--brand-red) !important;
}

@media (max-width: 991px) {
 .card-a-title:active,
 .mob-mixed:not(:first-child) .card-a-title:active {
 color: var(--brand-red) !important;
 /* Плавность теперь сохраняется из базовых стилей (0.2s), никаких резких вспышек */
 }
}

/* =========================================
 ФИНАЛЬНЫЙ РЕЙТИНГ (ЛАЙКИ / ДИЗЛАЙКИ)
 ========================================= */
.entry-author-stat {
 width: 100%;
 margin-top: 25px;
 padding-top: 15px;
 border-top: 1px solid var(--border-color); /* Та самая стильная полоска */
}

.stat-metrics-wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between; /* РАЗБРОС: рейтинг влево, метрики вправо */
 width: 100%;
}

.stat-metrics-row {
 display: flex;
 align-items: center;
 gap: 15px;
}

.custom-rating-box {
 display: flex;
 align-items: center;
 gap: 6px;
 background: var(--bg-secondary);
 border: 1px solid var(--border-color);
 border-radius: 8px;
 padding: 3px 10px;
 transition: background 0.3s;
}

.rating-count {
 font-size: 13px;
 font-weight: 800;
}

.count-up { color: #2e7d32; } /* Зеленый для лайков */
.count-down { color: var(--brand-red); } /* Красный для дизлайков */

.rating-sep {
 width: 1px;
 height: 14px;
 background: var(--border-color);
 margin: 0 2px;
}

.rating-btn {
 cursor: pointer;
 background: none;
 border: none;
 padding: 2px;
 display: flex;
 color: var(--text-muted);
 transition: 0.2s;
}

@media (hover: hover) and (pointer: fine) {
 .rating-btn.btn-up:hover { color: #2e7d32; }
 .rating-btn.btn-down:hover { color: var(--brand-red); }
}

@media (max-width: 600px) {
 .stat-metrics-row { gap: 10px; }
 .custom-rating-box { background: var(--bg-card); padding: 3px 6px; }
}


/* =========================================
 НАВИГАЦИЯ
 ========================================= */
.archive-breadcrumbs {
 margin-bottom: 25px;
 font-size: 11px;
 color: var(--text-muted); /* Стандартный цвет для светлого фона */
 font-weight: 700;
 text-transform: uppercase;
}

.archive-breadcrumbs span {
 display: inline;
}

.archive-breadcrumbs a {
 text-decoration: none;
 color: var(--text-muted); /* Стандартный цвет для светлого фона */
 transition: color 0.2s;
}

.archive-breadcrumbs a:hover {
 color: var(--brand-red); /* Ховер для светлого фона */
}

.archive-breadcrumbs .sep {
 margin: 0 5px;
 color: var(--text-muted);
}


/* --- МОДИФИКАТОР ДЛЯ ТЕМНЫХ ШАПОК (Например, в Базе Данных) --- */
.archive-breadcrumbs.breadcrumbs-dark {
 color: rgba(255,255,255,0.5);
 font-size: 11px;
 margin-bottom: 20px;
 text-align: left;
}

.archive-breadcrumbs.breadcrumbs-dark a {
 color: rgba(255,255,255,0.5);
}

.archive-breadcrumbs.breadcrumbs-dark a:hover {
 color: #fff; /* Ховер для темного фона */
}

.archive-breadcrumbs.breadcrumbs-dark .sep {
 color: rgba(255,255,255,0.5);
}

/* Активный/последний пункт на темном фоне */
.archive-breadcrumbs.breadcrumbs-dark > span:last-child > span {
 color: #fff; 
}

/* =========================================
 ПРОМО-БАННЕР (ТОТАЛИЗАТОР)
 ========================================= */
.toto-promo-banner {
 width: 100%;
 min-height: 120px; /* Тот самый размер рекламного блока */
 background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
 border-radius: 8px; /* Твой стандартный радиус */
 padding: 20px 25px;
 margin-bottom: 20px; /* Стандартный отступ снизу */
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 15px;
 border-left: 4px solid var(--brand-red);
 box-shadow: 0 4px 15px rgba(0,0,0,0.1);
 position: relative;
 overflow: hidden;
 transform: translateZ(0);
}

/* Эффект красного свечения на фоне (оставил, он крутой) */
.toto-promo-banner::before {
 content: ''; 
 position: absolute; 
 top: -50%; 
 right: 0; 
 width: 250px; 
 height: 250px;
 background: radial-gradient(circle, rgba(204,0,0,0.15) 0%, transparent 70%);
 pointer-events: none;
 z-index: 0;
}

.toto-promo-content { 
 flex: 1; 
 z-index: 1; 
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

/* ВЕРНУЛ ШИЛЬДИК */
.toto-promo-badge {
 display: inline-block; 
 background: var(--brand-red); 
 color: #fff;
 font-size: 10px; 
 font-weight: 800; 
 text-transform: uppercase; 
 letter-spacing: 1px;
 padding: 4px 8px; 
 border-radius: 4px; 
 margin-bottom: 8px; 
}

.toto-promo-title { 
 color: #fff; 
 font-size: 20px; /* Чуть уменьшил, чтобы влезло в 120px */
 font-weight: 900; 
 line-height: 1.2; 
 margin: 0 0 4px 0; 
 text-transform: uppercase; 
}

.toto-promo-desc { 
 color: #aaa; 
 font-size: 13px; 
 margin: 0; 
 line-height: 1.4; 
}

.toto-promo-action { 
 display: flex; 
 align-items: center; 
 z-index: 1; 
 flex-shrink: 0;
}

.toto-promo-btn {
 display: inline-flex; 
 align-items: center; 
 justify-content: center;
 background: var(--brand-red); 
 color: #fff !important; 
 text-decoration: none !important;
 font-weight: 800; 
 text-transform: uppercase; 
 font-size: 13px;
 padding: 12px 20px; 
 border-radius: 6px; 
 transition: 0.2s;
 box-shadow: 0 4px 10px rgba(204,0,0,0.2);
 white-space: nowrap;
 width: 100%;
}

@media (hover: hover) and (pointer: fine) {
 .toto-promo-btn:hover { 
 background: #a30000; 
 transform: translateY(-2px); 
 box-shadow: 0 6px 15px rgba(204,0,0,0.3); 
 }
}

/* АДАПТИВ ДЛЯ ПК (Выстраиваем в ровную горизонтальную линию) */
@media (min-width: 768px) {
 .toto-promo-banner { 
 flex-direction: row; 
 align-items: center; 
 }
 .toto-promo-btn {
 width: auto;
 }
}


/* =========================================
 ТЕЛЕГРАМ-ВИДЖЕТ (Адаптировано под Dark Mode и переменные)
 ========================================= */
/* Основной контейнер (Фон чата) */
/* Основной контейнер (Фон чата) */
.tg-sidebar-widget {
 background: #f0f2f5; /* Тот самый светло-серый фон для белой темы */
 border: 1px solid #e1e4e8; /* Твоя светлая обводка */
 border-radius: 12px;
 overflow: hidden;
 margin-bottom: 25px;
 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 transform: translateZ(0);
}

/* Для темной темы меняем фон И возвращаем темную рамку */
[data-theme="dark"] .tg-sidebar-widget {
 background: #0a0a0a; 
 border-color: var(--border-color); /* Переопределяем светлую рамку на темную переменную */
}

/* Шапка виджета */
.tg-sidebar-header {
 background: var(--bg-card); /* Авто-фон карточки */
 padding: 10px 15px;
 display: flex;
 align-items: center;
 border-bottom: 1px solid var(--border-color);
}
.tg-sidebar-avatar {
 width: 34px;
 height: 34px;
 background: var(--brand-red); /* Заменили на твой фирменный красный */
 border-radius: 50%;
 margin-right: 10px;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}
.tg-sidebar-title { font-weight: 700; font-size: 14px; color: var(--text-main); line-height: 1.2; }
.tg-sidebar-status { font-size: 11px; color: var(--text-muted); }

/* Зона сообщений */
.tg-sidebar-feed {
 padding: 12px;
 max-height: 500px;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
/* =========================================
 КРАСИВЫЙ СКРОЛЛ (Бронебойный кроссбраузерный)
 ========================================= */
/* Для Firefox и новых стандартов */
.tg-sidebar-feed {
 scrollbar-width: thin;
 scrollbar-color: #bcc3c7 transparent;
}

/* =========================================
 КРАСИВЫЙ СКРОЛЛ
 ========================================= */
.tg-sidebar-feed::-webkit-scrollbar { 
 width: 5px; 
} 
.tg-sidebar-feed::-webkit-scrollbar-track { 
 background: transparent; 
} 
.tg-sidebar-feed::-webkit-scrollbar-thumb { 
 background: #bcc3c7; /* Четко видимый серый цвет для белой темы */
 border-radius: 10px; 
}
.tg-sidebar-feed::-webkit-scrollbar-thumb:hover { 
 background: #a0aab2; /* При наведении на скролл он чуть темнеет */
}

/* Скролл для темной темы */
[data-theme="dark"] .tg-sidebar-feed::-webkit-scrollbar-thumb { 
 background: #444444; /* Темно-серый ползунок для черного фона */
}
[data-theme="dark"] .tg-sidebar-feed::-webkit-scrollbar-thumb:hover { 
 background: #555555;
}
/* Пузырь сообщения */
.tg-msg-item { display: flex; width: 100%; }
.tg-bubble {
 display: block;
 background: var(--bg-card); /* Авто-смена белый/темно-серый */
 padding: 8px 10px 4px 10px;
 border-radius: 12px 12px 12px 2px;
 box-shadow: 0 1px 3px var(--shadow-color);
 text-decoration: none !important;
 max-width: 95%;
 transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
/* Наведение для белой темы: делаем пузырь чуть-чуть темнее чистого белого, но добавляем тень */
.tg-bubble:hover { 
 background: #fafafa; 
 box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Тень приподнимает сообщение над фоном */
 transform: translateY(-2px); /* Эффект "всплытия" */
}

/* Наведение для темной темы: возвращаем твой классический серый ховер */
[data-theme="dark"] .tg-bubble:hover { 
 background: var(--bg-hover); 
 box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* Делаем тень более плотной для темной темы */
}

.tg-author {
 font-size: 12px;
 font-weight: 700;
 color: #2AABEE; /* Оставил классический голубой из ТГ, он читается везде */
 margin-bottom: 3px;
}
.tg-text {
 font-size: 13px;
 line-height: 1.4;
 color: var(--text-regular); /* Авто-смена цвета текста */
 margin-bottom: 4px;
}
/* Подвал сообщения (Комменты + Время) */
.tg-footer {
 display: flex;
 justify-content: space-between; /* Раскидывает элементы по краям */
 align-items: center;
 margin-top: 4px;
}

.tg-comments {
 font-size: 11px;
 color: var(--text-muted); /* Тот же цвет, что и у времени */
 display: flex;
 align-items: center;
 transition: color 0.2s;
}

/* Обновленный класс времени (убрали выравнивание вправо, так как теперь за это отвечает tg-footer) */
.tg-time {
 font-size: 10px;
 color: var(--text-muted);
 display: flex;
 align-items: center;
}


/* =========================================
 ВИДЖЕТ ФАБРИЦИО РОМАНО (Mobile First)
 ========================================= */
.romano-widget {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: 12px;
 overflow: hidden;
 margin-bottom: 25px;
 box-shadow: 0 4px 15px var(--shadow-color);
 transform: translateZ(0);
}

.romano-header {
 background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
 padding: 12px 15px;
 display: flex;
 align-items: center;
 border-bottom: 2px solid var(--brand-red);
}

.romano-avatar {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 margin-right: 12px;
 flex-shrink: 0;
 background: #ffffff; 
 border: 2px solid #ffffff;
 overflow: hidden;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}

.romano-avatar img { width: 100%; height: 100%; object-fit: cover; }

.romano-info { display: flex; flex-direction: column; }

.romano-name {
 font-weight: 800;
 font-size: 15px;
 color: #ffffff;
 display: flex;
 align-items: center;
 gap: 5px;
}

.romano-verified { color: #1DA1F2; display: flex; align-items: center; }
.romano-verified svg { width: 14px; height: 14px; fill: currentColor; }

.romano-handle {
 font-size: 11px;
 color: #aaaaaa;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.romano-feed {
 padding: 0;
 max-height: 400px;
 overflow-y: auto;
 scrollbar-width: thin;
 scrollbar-color: var(--border-color) transparent;
}

.romano-feed::-webkit-scrollbar { width: 5px; }
.romano-feed::-webkit-scrollbar-track { background: transparent; }
.romano-feed::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

.romano-item {
 display: flex;
 flex-direction: column;
 padding: 12px 15px;
 border-bottom: 1px solid var(--border-color);
 text-decoration: none !important;
 transition: background 0.2s;
}

.romano-item:last-child { border-bottom: none; }

@media (hover: hover) and (pointer: fine) {
 .romano-item:hover { background: var(--bg-hover); }
 .romano-item:hover .romano-item-title { color: var(--brand-red); }
}

.romano-item-title {
 font-size: 13px;
 line-height: 1.4;
 color: var(--text-main);
 font-weight: 600;
 margin-bottom: 6px;
 transition: color 0.2s;
}

.romano-item-meta {
 display: flex;
 align-items: center;
 gap: 5px;
 font-size: 10px;
 color: var(--text-muted);
 font-weight: 700;
 text-transform: uppercase;
}

.romano-hwg { color: #2e7d32; font-weight: 800; letter-spacing: 0.5px; }
[data-theme="dark"] .romano-hwg { color: #4caf50; } 

.romano-dot {
 width: 6px;
 height: 6px;
 background: var(--brand-red);
 border-radius: 50%;
 display: inline-block;
 animation: romanoPulse 1.5s infinite;
}

@keyframes romanoPulse {
 0% { box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.4); }
 70% { box-shadow: 0 0 0 4px rgba(204, 0, 0, 0); }
 100% { box-shadow: 0 0 0 0 rgba(204, 0, 0, 0); }
}

/* =========================================
 СОРТИРОВКА КОММЕНТАРИЕВ (КАСТОМНАЯ)
 ========================================= */

.com-order-block {
 margin-bottom: 25px;
}

.com-order-wrap {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 gap: 10px;
 cursor: pointer;
}

/* Стилизуем текст "Порядок вывода комментариев:" */
.com-order-title {
 font-size: 11px;
 font-weight: 700;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

/* Стилизуем сам выпадающий список */
.com-order-select {
 appearance: none; /* Убиваем стандартный стиль браузера */
 -webkit-appearance: none;
 -moz-appearance: none;
 background-color: var(--bg-secondary);
 color: var(--text-main);
 font-family: var(--font-main);
 font-size: 13px;
 font-weight: 700;
 border: 1px solid var(--border-color);
 border-radius: 8px;
 padding: 8px 35px 8px 15px; /* Место справа под кастомную стрелочку */
 outline: none;
 cursor: pointer;
 transition: all 0.2s ease;
 
 /* Рисуем красивую кастомную SVG-стрелочку */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
}

/* Эффекты при наведении и клике */
@media (hover: hover) and (pointer: fine) {
 .com-order-select:hover {
 border-color: var(--text-muted);
 background-color: var(--bg-hover);
 }
}

.com-order-select:focus {
 border-color: var(--brand-red);
 box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15);
 background-color: var(--bg-card);
}