/* ═══════════════════════════════════════════════════════════════════════════
   L2TOP.info — новый дизайн главной (2026), ревизия 3
   Той же логике JS нужны: #table1..#table10, .placeholder, .dadaok,
   .content__left-col/.content__right-col, #upcoming-btn/#opened-btn,
   #theme-toggle, .sun-icon/.moon-icon, body.dark-mode,
   tr.top-server / tr.VIP-server / tr.VІP-server (кирилл. І — «вип-1»),
   .date-today/.date-yesterday/.date-tomorrow, #pollForm/#pollResults(2).
   Без внешних шрифтов/CDN. Контраст текста ≥ 4.5:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── СВЕТЛАЯ тема: тёплый «пергамент», без слепящего белого ── */
:root {
    --bg: #e3ddcf;
    --bg-glow1: rgba(190, 130, 25, .10);
    --bg-glow2: rgba(120, 90, 40, .06);
    --card: #efe9da;
    --card-2: #e2dabf;
    --border: #c6ba9c;
    --border-strong: #a4956f;
    --text: #241e12;             /* ~13:1 на карточке */
    --text-dim: #4f4736;         /* ~7:1 */
    --text-faint: #675e49;       /* ~5:1 */
    --accent: #7e5305;           /* тёмное золото, ~6.5:1 */
    --accent-soft: rgba(200, 140, 25, .13);
    /* заголовки таблиц/меню — в светлой теме просто ЧЁРНЫЕ (максимальный контраст) */
    --title: #161616;
    --title-soft: rgba(0, 0, 0, .05);
    --title-glow: rgba(0, 0, 0, .3);
    --poll-text: #1c1710;        /* варианты голосовалок — чёрные */
    --cell-text: #141414;        /* рейты/хроники/даты — чёрные в светлой теме */
    /* семантические цвета старых текстов (города/NPC/предметы/мобы в квестах):
       тёмные насыщенные — читаются на пергаменте */
    --c-blue: #1d4f8a;
    --c-green: #1e6b33;
    --c-maroon: #8a1f1f;
    --c-purple: #7b2382;
    --link: #1d4f8a;
    --row-hover: #eae3d2;
    --gold-line: rgba(190, 130, 20, .5);
    --shadow: 0 1px 2px rgba(60, 45, 20, .07), 0 8px 24px -12px rgba(60, 45, 20, .18);
    --shadow-lift: 0 2px 4px rgba(60, 45, 20, .09), 0 14px 34px -14px rgba(60, 45, 20, .28);
    --radius: 14px;
    --radius-sm: 9px;
    --head-bg: rgba(237, 231, 217, .9);
    --banner-fade: #e3ddcf;
    /* статусы */
    --vip-row: linear-gradient(90deg, rgba(226, 142, 30, .16), rgba(226, 142, 30, .03) 55%, transparent);
    --vip-ring: rgba(200, 125, 25, .45);
    --vip-name: #8a5709;
    --vip2-row: linear-gradient(90deg, rgba(190, 40, 140, .12), rgba(190, 40, 140, .02) 55%, transparent);
    --vip2-ring: rgba(170, 30, 120, .45);
    --vip2-name: #8d1a66;
    --ok: #135f35; --ok-bg: rgba(30, 140, 75, .13); --ok-border: rgba(25, 120, 65, .45);
    --warn: #714b00; --warn-bg: rgba(210, 145, 25, .15); --warn-border: rgba(165, 110, 15, .5);
}

/* ── ТЁМНАЯ тема (класс ставит существующий JS) ── */
body.dark-mode {
    --bg: #0b0e15;
    --bg-glow1: rgba(245, 185, 66, .07);
    --bg-glow2: rgba(109, 79, 210, .10);
    --card: #121826;
    --card-2: #0f141f;
    --border: #202940;
    --border-strong: #2c3854;
    --text: #e8ecf4;
    --text-dim: #a7b2c7;
    --text-faint: #7e89a0;
    --accent: #f0b354;
    --accent-soft: rgba(240, 179, 84, .12);
    /* заголовки таблиц/меню — СВОЙ цвет для тёмной темы: ледяной голубой (~10:1) */
    --title: #8fd0f2;
    --title-soft: rgba(120, 190, 235, .10);
    --title-glow: rgba(140, 205, 245, .45);
    --poll-text: #a7b2c7;
    --cell-text: #ffffff;        /* рейты/хроники/даты — белые в тёмной теме */
    /* те же семантические цвета — СВЕТЛЫЕ версии для тёмной темы (контраст ≥4.5) */
    --c-blue: #8ab8f0;
    --c-green: #82d89e;
    --c-maroon: #f0a08e;
    --c-purple: #dca6e8;
    --link: #85bbee;
    --row-hover: #1a2235;
    --gold-line: rgba(240, 179, 84, .45);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px -14px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px -16px rgba(0, 0, 0, .75);
    --head-bg: rgba(11, 14, 21, .84);
    --banner-fade: #0b0e15;
    --vip-row: linear-gradient(90deg, rgba(240, 150, 40, .13), rgba(240, 150, 40, .02) 55%, transparent);
    --vip-ring: rgba(235, 155, 55, .38);
    --vip-name: #f5b967;
    --vip2-row: linear-gradient(90deg, rgba(220, 70, 170, .13), rgba(220, 70, 170, .02) 55%, transparent);
    --vip2-ring: rgba(230, 110, 190, .38);
    --vip2-name: #ef9ed9;
    --ok: #52d98b; --ok-bg: rgba(74, 222, 128, .10); --ok-border: rgba(74, 222, 128, .35);
    --warn: #fcc25c; --warn-bg: rgba(240, 179, 84, .10); --warn-border: rgba(240, 179, 84, .35);
}

/* ── База ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background:
        radial-gradient(900px 420px at 15% -60px, var(--bg-glow1), transparent 70%),
        radial-gradient(900px 480px at 90% -80px, var(--bg-glow2), transparent 70%),
        var(--bg);
    min-height: 100vh;
    transition: background-color .25s, color .25s;
}
a { color: var(--link); text-decoration: none; }
img { max-width: 100%; }

.page-shell { max-width: 1400px; margin: 0 auto; padding: 0 18px; }

/* ═══ ВЕРХНЯЯ ПОЛОСА ПОВЕРХ БАННЕРА (форма как в старом дизайне):
   лого · h1 по центру · язык · тема · «Добавить сервер».
   Поверхность всегда тёмная (арт баннера) — цвета фиксированные, не из темы. */
.head-strip {
    position: absolute; bottom: 26px; left: 0; right: 0; z-index: 5;
    padding: 0 18px;
}
/* затемнение НЕ на всю ширину экрана — только по ширине контента (как таблицы) */
.head-strip__inner {
    max-width: 1400px; margin: 0 auto; padding: 9px 16px;
    display: flex; align-items: center; gap: 16px;
    background: rgba(8, 10, 16, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(240, 179, 84, .32);
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}
/* в светлой теме полупрозрачная полоса сереет на светлом баннере — делаем ЧЁРНОЙ */
body:not(.dark-mode) .head-strip__inner { background: rgba(7, 8, 10, .94); }
/* лого в оригинале с белыми буквами — под ним всегда ЧЁРНЫЙ чип
   (в светлой теме полоса светлеет от бэкдропа, без чипа лого не читается) */
.brand {
    display: flex; align-items: center; flex-shrink: 0;
    background: #0b0e15; border-radius: 10px; padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
}
.brand img { display: block; height: 34px; width: auto; }

.head-strip h1 {
    flex: 1; min-width: 0; margin: 0; text-align: center;
    font-size: clamp(14px, 1.7vw, 24px); font-weight: 800; letter-spacing: .3px;
    color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.head-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.btn-ghost {
    padding: 8px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
    color: #ded9cb; border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .05);
    transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }

.language-switcher { display: flex; gap: 6px; }
.language-button {
    padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
    color: #ded9cb; border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .05);
}
.language-button:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }

/* иконки sun/moon в файлах белые — на тёмной полосе видны без фильтров */
.theme-toggle {
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .07);
    transition: border-color .15s, transform .15s;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle .icon { width: 20px; height: 20px; }

.btn-add {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 11px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
    color: #241a04 !important;
    background: linear-gradient(135deg, #ffd57a, #f0a830 55%, #e08a1a);
    box-shadow: 0 4px 14px -4px rgba(224, 150, 40, .55);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-add:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 20px -6px rgba(224, 150, 40, .65); }
.btn-add svg { width: 15px; height: 15px; }

/* ═══ МОБИЛЬНОЕ МЕНЮ (тот же toggleMenu/#menu-links) ═══ */
.mobile-menu { display: none; position: relative; }
.hamburger {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .26); border-radius: 10px;
    width: 40px; height: 38px; padding: 9px 10px; cursor: pointer;
    display: flex; flex-direction: column; justify-content: space-between;
}
.hamburger .bar { height: 2px; border-radius: 2px; background: #fff; }
.menu-links {
    display: none; position: absolute; right: 0; top: 46px; width: min(92vw, 460px);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lift); padding: 14px;
    grid-template-columns: 1fr 1fr; gap: 4px 14px; z-index: 70;
}
.menu-links.open { display: grid; }
.menu-links a {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--text-dim);
}
.menu-links a:hover { background: var(--row-hover); color: var(--text); }

/* ═══ ШАПКА-БАННЕР (кликабельный l2topheader.webp, как в оригинале) ═══ */
header.hero-banner {
    position: relative; display: block; width: 100%; height: 430px;
    background:
        linear-gradient(180deg, rgba(10, 8, 18, .18) 0, rgba(10, 8, 18, 0) 30%, var(--banner-fade) 99%),
        url("../img/bannerl2top/l2topheader.webp") 50% 18% / cover no-repeat;
}
/* баннер кликабелен (как в оригинале), НО ссылка не доходит до зоны
   полосы и промежутка над таблицами — там мёртвых кликов нет */
header.hero-banner > a.banner-link {
    position: absolute; left: 0; right: 0; top: 0; bottom: 96px; z-index: 2;
}

/* ═══ ХЛЕБНЫЕ КРОШКИ (все страницы кроме главной) ═══ */
.breadcrumbs {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 14px 2px 0; font-size: 12.5px;
}
.breadcrumbs a { color: var(--text-dim); font-weight: 600; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .bc-sep { color: var(--text-faint); }
.breadcrumbs .bc-here {
    color: var(--title); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72vw;
}

/* ═══ МОБИЛЬНЫЙ СЕГМЕНТ-КОНТРОЛ ═══ */
.mobile-buttons { display: none; margin: 14px 0 4px; gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.mobile-button {
    flex: 1; padding: 10px 8px; font-size: 13.5px; font-weight: 700; letter-spacing: .2px;
    color: var(--text-dim); background: transparent; border: 0; border-radius: 9px; cursor: pointer;
    font-family: inherit;
}
.mobile-button.active {
    color: #241a04;
    background: linear-gradient(135deg, #ffd57a, #f0a830 60%, #e08a1a);
    box-shadow: 0 3px 10px -3px rgba(224, 150, 40, .5);
}

/* ═══ КОНТЕНТНЫЕ СТРАНИЦЫ (page/, memes, crests, download, quest…) ═══
   Их собственные css отфильтрованы от каркасных правил; здесь — тематическая
   нормализация: текст читается в обеих темах, поля/таблицы под тему. */
.content-page { min-width: 0; color: var(--text); }
.content-page img { max-width: 100%; height: auto; }
.content-page :is(p, li, td, th, h2, h3, h4, h5, label, legend, figcaption) { color: var(--text); }
.content-page :is(td, th) { border-color: var(--border); }
/* старые css красят ячейки/шапки таблиц белым — фоны только от темы */
.content-page :is(table, tr, td, th) { background-color: transparent; }
.content-page thead th { background: var(--accent-soft); }
.content-page a { color: var(--link); }
.content-page table { border-collapse: collapse; max-width: 100%; }
.content-page :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], textarea, select) {
    color: var(--text); background: var(--card-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 10px; font-family: inherit;
}
.content-page :is(input, textarea, select):focus { outline: none; border-color: var(--accent); }
/* галерея значков: пока картинка не загрузилась — тихий плейсхолдер, а не alt-текст */
.crest-gallery img { color: transparent; overflow: hidden; background: var(--card-2); }
/* инлайн-синий из старых текстов (квесты и т.п.) нечитаем на тёмном — приводим к цвету ссылок */
.content-page [style*="0000ff" i],
.content-page [style*="0000FF"],
.content-page [style*="color: blue" i],
.content-page [style*="color:blue" i] { color: var(--link) !important; }

/* ═══ ОСНОВНАЯ СЕТКА ═══ */
.wraper__content-container {
    display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 20px;
    align-items: start; padding-top: 8px;
}
.placeholder {
    border-radius: var(--radius);
    background: linear-gradient(100deg, var(--card) 40%, var(--row-hover) 50%, var(--card) 60%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite linear;
    border: 1px solid var(--border);
    height: 900px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.dadaok { display: none; }

.table25 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.content__left-col, .content__right-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ── Карточка группы серверов ── */
.servers-group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow .2s;
}
.servers-group:hover { box-shadow: var(--shadow-lift); }
/* пустые таблицы (JS прячет их h2) не должны торчать пустыми карточками */
.servers-group:has(tbody:empty) { display: none; }
.table-container h2 {
    margin: 0; padding: 13px 18px 11px;
    font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--title);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, var(--title-soft), transparent);
}
.table-container h2::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--title); box-shadow: 0 0 8px var(--title-glow);
}

/* ── Таблица серверов ── */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; }
.table-container table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-container tbody tr {
    border-top: 1px solid var(--border);
    transition: background-color .12s;
}
.table-container tbody tr:first-child { border-top: 0; }
.table-container tbody tr:hover { background: var(--row-hover); }
.table-container td { padding: 9px 10px; vertical-align: middle; white-space: nowrap; }

/* колонка 1 — статус */
.table-container td:first-child { width: 58px; padding-left: 12px; padding-right: 2px; font-size: 0; }

/* ── СТАТУСЫ: три РАЗНЫХ характера (как в старом прайсе) ──
   TOP  — «огонь»: строка целиком залита красно-оранжевым градиентом, белое имя,
          золотой бейдж с короной и бликом (в обеих темах одинаково — заливка своя)
   VIP  — «янтарь»: янтарный бейдж + тёплая подсветка строки, янтарное имя
   VІP (кирилл. І, «вип-1») — «малина»: малиновый бейдж и имя, лёгкая подсветка */
tr.top-server {
    background: linear-gradient(90deg, #9e1207, #c9440a 55%, #9e1207);
    box-shadow: inset 0 0 0 1px rgba(255, 190, 90, .5);
}
/* заливка платных строк НЕ пропадает при наведении (перебиваем общий tr:hover) */
.table-container tbody tr.top-server:hover { background: linear-gradient(90deg, #ad1708, #d84f0c 55%, #ad1708); }
.table-container tbody tr.VIP-server:hover { background: var(--vip-row); }
.table-container tbody tr.VІP-server:hover { background: var(--vip2-row); }
/* у TOP и VIP жирная ВСЯ строка — рейты, хроники, дата */
tr.top-server td, tr.VIP-server td, tr.VІP-server td { font-weight: 800; }
/* рейты платных строк: моноширинный Consolas почти не имеет жирного начертания,
   поэтому здесь ОСНОВНОЙ шрифт — жирный по-настоящему */
tr.top-server td:nth-child(3),
tr.VIP-server td:nth-child(3),
tr.VІP-server td:nth-child(3) {
    font-family: inherit;
    font-weight: 800; font-size: 13px; letter-spacing: .2px;
}
/* реакция бейджа на наведение — лёгкое увеличение, цвет не меняем */
.table-container tbody tr.top-server:hover td:first-child::after,
.table-container tbody tr.VIP-server:hover td:first-child::after,
.table-container tbody tr.VІP-server:hover td:first-child::after { transform: scale(1.15); }
/* бейджи всех трёх статусов СТРОГО одного размера,
   текст статуса — того же размера, что шрифт колонки (14px) */
tr.top-server td:first-child::after,
tr.VIP-server td:first-child::after,
tr.VІP-server td:first-child::after {
    box-sizing: border-box;
    width: 42px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    font-size: 14px;
    transition: transform .15s;
}
/* TOP — белое слово на чёрном, без короны */
tr.top-server td:first-child::after {
    content: "TOP";
    font-weight: 900; letter-spacing: .8px;
    border-radius: 6px; color: #fff;
    background: #0d0d0d;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
tr.top-server td:nth-child(2) a { color: #fff; font-weight: 800; letter-spacing: .3px; text-shadow: 0 1px 4px rgba(60, 10, 0, .5); }
tr.top-server td:nth-child(2) a:hover { text-decoration: underline; color: #fff; }
/* у TOP всегда белые (на красной заливке отлично читаются в обеих темах) */
tr.top-server td:nth-child(3) { color: #fff; }
tr.top-server td:nth-child(4) { color: #fff; }
tr.top-server td:nth-child(5) { color: #fff; }
/* пилюли дат на огненной строке — на тёмной подложке, чтобы не терялись */
tr.top-server .date-today, tr.top-server .date-tomorrow {
    background: rgba(20, 10, 5, .55); border-color: rgba(255, 255, 255, .3); color: #7dffb2;
}
tr.top-server .date-tomorrow { color: #ffd66e; }
tr.top-server .date-yesterday { color: #ffe3c9; }

tr.VIP-server {
    background: var(--vip-row);
}
tr.VIP-server td:first-child::after {
    content: "VIP";
    font-weight: 800; letter-spacing: .6px;
    border-radius: 6px; color: #2b1c00;
    background: linear-gradient(135deg, #ffce76, #eb9a30);
    box-shadow: 0 2px 8px -2px rgba(230, 150, 40, .55), inset 0 0 0 1px rgba(130, 75, 0, .22);
}
tr.VIP-server td:nth-child(2) a { color: var(--vip-name); font-weight: 800; }

tr.VІP-server {
    background: var(--vip2-row);
}
tr.VІP-server td:first-child::after {
    content: "VIP";
    font-weight: 800; letter-spacing: .6px;
    border-radius: 6px; color: #fff;
    background: linear-gradient(135deg, #d43fa4, #a11877);
    box-shadow: 0 2px 8px -2px rgba(180, 40, 130, .55), inset 0 0 0 1px rgba(90, 10, 60, .35);
}
tr.VІP-server td:nth-child(2) a { color: var(--vip2-name); font-weight: 800; }

/* колонка 2 — имя сервера (обычные строки) */
.table-container td:nth-child(2) { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.table-container td:nth-child(2) a {
    font-weight: 700; color: var(--text); font-size: 14px; letter-spacing: .2px;
}
.table-container td:nth-child(2) a:hover { color: var(--accent); }

/* колонка 3 — рейт: белый в тёмной / чёрный в светлой теме */
.table-container td:nth-child(3) {
    font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; font-weight: 700;
    color: var(--cell-text); text-align: right;
}
/* колонка 4 — хроники */
.table-container td:nth-child(4) { color: var(--cell-text); font-size: 12.5px; text-transform: capitalize; }
/* колонка 5 — дата */
.table-container td:nth-child(5) { text-align: right; padding-right: 14px; font-size: 12.5px; color: var(--cell-text); font-variant-numeric: tabular-nums; }
.date-today {
    color: var(--ok); font-weight: 800; font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; background: var(--ok-bg); border: 1px solid var(--ok-border);
}
.date-tomorrow {
    color: var(--warn); font-weight: 800; font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; background: var(--warn-bg); border: 1px solid var(--warn-border);
}
.date-yesterday { color: var(--text-faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }

/* ═══ САЙДБАР — навигация как «кнопки», с золотым штрихом ═══ */
.wraper__sidebar { display: flex; flex-direction: column; gap: 16px; }
.side-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px;
    position: relative; overflow: hidden;
}
/* золотая нить сверху карточки */
.side-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent);
}
.side-card__title {
    margin: 2px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--title);
    display: flex; align-items: center; gap: 8px;
}
.side-card__title::before {
    content: ""; width: 8px; height: 8px; transform: rotate(45deg);
    background: var(--title);
    box-shadow: 0 0 8px var(--title-glow);
}
.sidebar__block, .sidebar__block2 { display: flex; flex-direction: column; gap: 6px; }
.sidebar__block a, .sidebar__block2 a {
    display: flex; align-items: center;
    padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
    letter-spacing: .3px; color: var(--text-dim);
    background: var(--card-2); border: 1px solid var(--border);
    transition: color .13s, border-color .13s, background-color .13s, transform .13s, box-shadow .13s;
}
/* шеврон справа */
.sidebar__block a::after, .sidebar__block2 a::after {
    content: "›"; margin-left: auto; font-size: 15px; font-weight: 800;
    color: var(--text-faint); transition: color .13s, transform .13s;
}
.sidebar__block a:hover, .sidebar__block2 a:hover {
    color: var(--accent); border-color: var(--gold-line);
    background: var(--accent-soft); transform: translateX(3px);
    box-shadow: 0 3px 12px -6px rgba(200, 140, 30, .5);
}
.sidebar__block a:hover::after, .sidebar__block2 a:hover::after { color: var(--accent); transform: translateX(2px); }

/* рейты — чипсы */
.sidebar__block3 { display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar__block3 a {
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    font-family: Consolas, "Cascadia Mono", monospace;
    color: var(--text-dim); border: 1px solid var(--border); background: var(--card-2);
    transition: color .12s, border-color .12s, transform .12s;
}
.sidebar__block3 a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

.sidebar__banner-container { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.sidebar__banner img { display: block; width: 100%; height: auto; transition: transform .3s; }
.sidebar__banner-container:hover .sidebar__banner img { transform: scale(1.03); }

/* ═══ ОПРОСЫ (те же формы/id) ═══ */
.voting-container, .voting-container2 {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.voting-container h2, .voting-container2 h2 {
    margin: 0 0 12px; font-size: 14.5px; font-weight: 800; color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.voting-container h2::before, .voting-container2 h2::before { content: "🗳️"; font-size: 16px; }
.voting-container form br, .voting-container2 form br { display: none; }
.voting-container input[type="radio"], .voting-container2 input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.voting-container label, .voting-container2 label {
    display: block; padding: 8px 12px; margin-bottom: 5px;
    border: 1px solid var(--border); border-radius: 9px;
    font-size: 13px; font-weight: 600; color: var(--poll-text); background: var(--card-2);
    cursor: pointer; transition: border-color .12s, color .12s, background-color .12s;
}
.voting-container label:hover, .voting-container2 label:hover { border-color: var(--border-strong); color: var(--text); }
.voting-container input[type="radio"]:checked + label,
.voting-container2 input[type="radio"]:checked + label {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.voting-container input[type="submit"], .voting-container2 input[type="submit"] {
    width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 10px;
    font-size: 13.5px; font-weight: 800; letter-spacing: .3px; cursor: pointer; font-family: inherit;
    color: #241a04; background: linear-gradient(135deg, #ffd57a, #f0a830 60%, #e08a1a);
    box-shadow: 0 4px 12px -4px rgba(224, 150, 40, .5);
    transition: transform .12s, filter .12s;
}
.voting-container input[type="submit"]:hover, .voting-container2 input[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.05); }
#pollResults h3, #pollResults2 h3 { margin: 0 0 10px; font-size: 13.5px; color: var(--text); }
#pollResults p, #pollResults2 p {
    margin: 0 0 6px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--text-dim); background: var(--card-2); border: 1px solid var(--border);
}
#pollResults p:first-of-type, #pollResults2 p:first-of-type {
    color: var(--accent); border-color: var(--gold-line); background: var(--accent-soft);
}

/* широкий экран (>=1860px): опросы «плавают» ВНИЗУ экрана по углам, не мешая контенту */
@media (min-width: 1860px) {
    .voting-container, .voting-container2 {
        position: fixed; bottom: 16px; width: 236px; z-index: 40;
        box-shadow: var(--shadow-lift);
    }
    .voting-container  { left: calc(50% - 700px - 252px); }
    .voting-container2 { right: calc(50% - 700px - 252px); }
}

/* ═══ SEO-ТЕКСТ ═══ */
.wrapper__text-container {
    margin-top: 26px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 30px;
}
.wrapper__text-container > h2 { margin-top: 0; }
.wrapper__text-container h2 { font-size: 20px; color: var(--text); }
.wrapper__text-container h3 { font-size: 16.5px; color: var(--text); margin: 22px 0 8px; }
.wrapper__text-container h4 { font-size: 14.5px; color: var(--text-dim); margin: 18px 0 6px; }
.wrapper__text-container p { color: var(--text-dim); font-size: 14px; margin: 0 0 10px; }
.wrapper__text-container strong { color: var(--text); }
.floating-image {
    float: right; margin: 4px 0 14px 22px; width: min(340px, 42%); height: auto;
    border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow);
}

/* ═══ ФУТЕР ═══ */
.wrapper__footer-container { margin-top: 30px; border-top: 1px solid var(--border); }
footer {
    max-width: 1400px; margin: 0 auto; padding: 18px;
    display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center;
}
footer a { font-size: 13px; font-weight: 600; color: var(--text-dim); }
footer a:hover { color: var(--accent); }
.wrapper__copyright-container {
    padding: 4px 18px 26px; text-align: center; font-size: 12px; color: var(--text-faint);
}

/* ═══ ВИДЕО-МОДАЛ ═══ */
.video-modal {
    visibility: hidden; position: fixed; inset: 0; z-index: 100;
    background: rgba(5, 8, 14, .8); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.video-content { position: relative; width: min(900px, 92vw); aspect-ratio: 16/9; }
.video-iframe { width: 100%; height: 100%; border-radius: var(--radius); }
.close-button {
    position: absolute; top: -38px; right: 0; font-size: 28px; color: #fff; cursor: pointer;
}

/* ═══ АДАПТИВ ═══ */
@media (max-width: 1180px) {
    .wraper__content-container { grid-template-columns: minmax(0, 1fr); }
    .wraper__sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
    .mobile-menu { display: block; }
    header.hero-banner { height: 340px; }
}
@media (max-width: 768px) {
    body { font-size: 14px; }
    .table25 { grid-template-columns: 1fr; }
    .content__right-col { display: none; }  /* управляется JS setupMobileColumns */
    .mobile-buttons { display: flex; }
    .wraper__sidebar { grid-template-columns: 1fr; }
    /* мобильная версия: без баннера, без рейтов, без голосовалок — только навигация */
    .sidebar__banner-container,
    .side-card--rates,
    .voting-container,
    .voting-container2 { display: none; }
    /* мобилка: баннер-арт убран, от шапки остаётся только полоса */
    header.hero-banner { height: auto; background: none; }
    header.hero-banner > a.banner-link { display: none; }
    .head-strip { position: static; padding: 0; }
    .head-strip__inner { border-radius: 0; padding: 7px 12px; gap: 10px; }
    .head-strip h1 { display: none; }  /* на телефоне полосе хватает лого и кнопок */
    .brand img { height: 26px; }
    .btn-add span { display: none; }
    .btn-add { padding: 9px 12px; }
    .btn-ghost { display: none; }  /* «Реклама» — в мобильном меню */
    /* дропдаун меню: на телефоне крепим к экрану, а не к гамбургеру —
       иначе колонка хроник уезжает за левый край; влезают ОБА меню */
    .menu-links {
        position: fixed; left: 10px; right: 10px; top: 60px;
        width: auto; max-height: calc(100vh - 80px); overflow-y: auto;
    }
    .table-container td:nth-child(4) { display: none; }
    .table-container td { padding: 8px 6px; }
    .table-container td:first-child { width: 54px; padding-left: 8px; }
    .table-container td:nth-child(5) { padding-right: 10px; }
    .wrapper__text-container { padding: 18px; }
    .floating-image { float: none; width: 100%; margin: 0 0 14px; }
}