/* ==========================================================================
ОБЪЕДИНЕННЫЙ ФАЙЛ СТИЛЕЙ ДЛЯ ФОРУМА (forum.css + style.css)
========================================================================== */

/* --- ПЕРЕМЕННЫЕ --- */
:root {
    --bg-main: #08080a;
    --bg-secondary: #121216;
    --bg-card: #222222;
    --primary: #ff6b57;
    --primary-hover: #ff523b;
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    --grad-vk: linear-gradient(135deg, #719ecc, #4a76a8);
    --grad-tg: linear-gradient(135deg, #5fcaff, #27a6e6);
    --grad-yt: linear-gradient(135deg, #ff6666, #e60000);
    --grad-ds: linear-gradient(135deg, #8ea1e1, #5865f2);
    --grad-inst: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    --golden: #fbee00;
    --font-primary: 'Inter', sans-serif;
}

/* --- БАЗОВЫЕ СТИЛИ --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-main, #0d0e12);
    color: var(--text-main, #ffffff);
    overflow-x: hidden;

    /* Мягкое трехслойное свечение без зерен и резких граней */
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 107, 87, 0.08), transparent 100%),
        linear-gradient(180deg, #121318 0%, #0d0e12 100%);
    background-attachment: fixed;
    height: 100%;
    margin: 0;
}

html {
    height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

main,
.container {
    flex: 1 0 auto;
}

.container-standard {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

/* --- КНОПКИ --- */
.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, #be3b29 0%, #9f2d20 100%) !important;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 107, 87, 0.3) !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 87, 0.5) !important;
}

.btn-secondary {
    background-color: #333333;
    color: #ffffff;
}

.btn-secondary:hover {
    background-color: #444444;
    transform: translateY(-2px);
}

.btn-glow {
    box-shadow: 0 0 20px rgba(255, 107, 87, 0.4) !important;
}

.btn-glow:hover {
    box-shadow: 0 0 30px rgba(255, 107, 87, 0.6) !important;
}

.glass-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* --- ГЛОБАЛЬНЫЕ UI ЭФФЕКТЫ (Glassmorphism) --- */
.glass-panel {
    background: rgba(30, 30, 35, 0.4) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-panel:hover {
    transform: translateY(-5px);
    background: rgba(40, 40, 45, 0.6) !important;
    border-color: rgba(255, 107, 87, 0.3);
    box-shadow: 0 15px 40px rgba(255, 107, 87, 0.15);
}

.text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
ИСПРАВЛЕНИЕ ШАПКИ НА ФОРУМЕ
========================================================================== */
.forum-main {
    padding: 130px 20px 50px 20px;
    /* Отступ 130px сверху, чтобы шапка не перекрывала */
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
    color: var(--text-muted, #a1a1aa);
    margin-bottom: 20px;
}

.breadcrumb a:hover {
    color: var(--primary, #ff6b57);
}

.breadcrumb .sep {
    font-size: 10px;
}

/* --- Двухблочная разметка форума --- */
.forum-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.forum-sections-wrapper,
.categories-container {
    min-width: 0;
    flex: 1;
    /* Основной контент занимает всё свободное место */
}

.forum-sidebar {
    width: 320px;
    /* Фиксированная ширина сайдбара как на скрине */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Стеклянные панели для разделов, постов и виджетов */
.forum-item,
.topic-item,
.post-block,
.sidebar-widget,
.reply-section,
.create-topic-box {
    background: rgba(30, 30, 35, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    border-radius: 12px !important;
    margin-bottom: 15px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Тактический эффект наведения (Hover) с легким свечением */
.forum-item:hover,
.topic-item:hover {
    transform: translateY(-3px);
    background: rgba(40, 40, 45, 0.6) !important;
    border-color: rgba(255, 107, 87, 0.3) !important;
    box-shadow: 0 10px 40px 0 rgba(255, 107, 87, 0.1);
}

/* --- Категории форума --- */
.category-block {
    margin-bottom: 30px;
}

/* Чистые, минималистичные заголовки категорий без громоздкого фона */
.category-header {
    background: transparent !important;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 5px 15px 5px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.forum-item {
    display: flex;
    align-items: center;
    padding: 20px;
}

/* Иконки форума — делаем их "светящимися" */
.forum-icon {
    color: var(--primary) !important;
    text-shadow: 0 0 15px rgba(255, 107, 87, 0.5);
    transform: scale(1.05);
    font-size: 28px;
    margin-right: 20px;
    width: 40px;
    text-align: center;
}

.forum-details {
    flex: 1;
}

.forum-details h3 {
    margin: 0;
    font-size: 16px;
}

.forum-details h3 a,
.forum-details h4 a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.forum-details h3 a:hover,
.forum-details h4 a:hover {
    color: var(--primary, #ff6b57);
}

.forum-details p {
    margin: 6px 0 0;
    color: var(--text-muted, #a1a1aa);
    font-size: 13px;
}

/* --- Стили для колонок статистики (Темы / Сообщения) --- */
.forum-stats-box {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-left: auto;
}

.stat-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted, #a1a1aa);
    margin-bottom: 6px;
}

.stat-value {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

/* --- СТИЛЬНЫЕ ТЕГИ ПОДРАЗДЕЛОВ --- */
.sub-forums {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sub-forums a {
    font-size: 11px;
    /* Чуть меньше для аккуратности */
    color: #bbb;
    text-decoration: none;
    display: inline-flex;
    /* Блок по размеру текста */
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    border: 1px solid #2a2a35;
    /* Красивая обводка */
    padding: 4px 10px;
    /* Отступы внутри рамки */
    border-radius: 6px;
    /* Мягкое скругление */
    background: rgba(255, 255, 255, 0.02);
    /* Легкая заливка */
}

.sub-forums a i {
    font-size: 11px;
}

.sub-forums a:hover {
    color: var(--primary, #ff6b57);
    border-color: var(--primary, #ff6b57);
    background: rgba(255, 107, 87, 0.05);
    transform: translateY(-1px);
}

/* --- Виджеты сайдбара --- */
/* Убираем лишние бордеры внутри виджетов */
.widget-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.widget-content {
    padding: 15px;
}

/* Статистика "Кто онлайн" */
.online-users-list {
    font-size: 13px;
    color: #ddd;
    line-height: 1.6;
}

.online-users-counter {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted, #a1a1aa);
    border-top: 1px solid #2a2a2a;
    padding-top: 8px;
}

/* Виджет "Новые сообщения" */
.sidebar-post-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05) !important;
}

.sidebar-post-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none !important;
}

/* Аватарки пользователей — добавляем обводку и глубину */
.post-avatar,
.sidebar-post-avatar,
.avatar {
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
    border-radius: 50%;
    background-color: #274f7d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-post-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: bold;
}

.avatar {
    width: 80px;
    height: 80px;
    font-size: 35px;
}

.post-avatar:hover,
.sidebar-post-avatar:hover {
    transform: scale(1.08);
    border-color: var(--primary);
}

/* Красное неоновое свечение для администрации */
.sidebar-post-avatar.admin-style,
.post-block.admin-post-border .post-avatar {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(255, 107, 87, 0.4);
    background: #cc2b14;
}

.sidebar-post-details {
    flex: 1;
    min-width: 0;
}

.sidebar-post-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-post-title a {
    color: var(--primary, #ff6b57);
    text-decoration: none;
}

.sidebar-post-title a:hover {
    text-decoration: underline;
}

.sidebar-post-meta {
    font-size: 11px;
    color: var(--text-muted, #a1a1aa);
}

.sidebar-post-meta span {
    color: #eee;
}

/* --- 🖼 БАННЕРЫ РАЗДЕЛОВ --- */
.section-banner-wrap {
    width: 100%;
    height: 350px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-edit-banner {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    z-index: 10;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s;
}

.btn-edit-banner:hover {
    background: #aa3223;
    border-color: #c84633;
    color: #fff;
}

/* Состояние, когда админ видит место под баннер, но картинки еще нет */
.section-banner-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px !important;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

/* Специфичные классы для страниц разделов и тем */
.action-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.action-bar-title {
    margin: 0;
    color: #fff;
    font-size: 24px;
}

.create-topic-box {
    margin-bottom: 30px;
    animation: fadeIn 0.3s ease;
}

/* Поля ввода (Инпуты) — матовый стиль */
.header-search-input,
.reply-form textarea,
.topic-title-input,
.prefix-select,
.sort-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.header-search-input:focus,
.reply-form textarea:focus,
.topic-title-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(255, 107, 87, 0.2);
    background: rgba(0, 0, 0, 0.5) !important;
    outline: none;
}

.sort-controls {
    text-align: right;
    margin-bottom: 15px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.sort-select {
    min-width: 230px;
    padding: 10px 38px 10px 13px;
    border-color: rgba(255, 107, 87, 0.28) !important;
    border-radius: 11px !important;
    background-color: #17171d !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #ff8a78 50%),
        linear-gradient(135deg, #ff8a78 50%, transparent 50%) !important;
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50% !important;
    background-size:
        5px 5px,
        5px 5px !important;
    background-repeat: no-repeat !important;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.sort-select:hover,
.sort-select:focus-visible {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 87, 0.09);
    outline: none;
}

.sort-select option {
    padding: 10px;
    background: #17171d;
    color: #f5f5f7;
}

.forum-item[role='link'] {
    cursor: pointer;
}

.forum-item[role='link']:focus-visible {
    border-color: rgba(255, 107, 87, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 107, 87, 0.12);
    outline: none;
}

.pinned-header {
    background: #2a2a2a;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    text-transform: none;
    color: #a1a1aa;
}

.pinned-list {
    border: 1px solid #2a2a2a;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 10px;
    background: var(--bg-card);
}

/* Стили для списка тем */
.topic-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.topic-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
}

.topic-info h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    gap: 15px;
}

.topic-stats {
    font-size: 13px;
    color: var(--text-muted);
    text-align: right;
}

.badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

/* ========================================================= */
/* СТИЛИ ДЛЯ ПОСТОВ (СООБЩЕНИЙ ВНУТРИ ТЕМЫ)                  */
/* ========================================================= */

.thread-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.thread-header h1 {
    font-size: 24px;
    color: #fff;
    font-weight: 600;
}

.thread-meta {
    font-size: 13px;
    color: var(--text-muted, #a1a1aa);
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.posts-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.post-block {
    display: flex;
    margin-bottom: 20px;
    overflow: hidden;
}

.post-sidebar {
    width: 180px;
    text-align: center;
    flex-shrink: 0;
    /* Жестко запрещаем сплющивать боковую панель */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.post-avatar {
    width: 80px;
    height: 80px;
    font-size: 32px;
    margin-bottom: 12px;
    background-size: cover;
}

.post-author {
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    font-size: 15px;
    word-break: break-all;
}

.post-author-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    text-align: center;
    word-break: break-all;
}

.post-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 5px;
    text-transform: uppercase;
}

.badge-user {
    background: #2a2a2a;
    color: #aaa;
}

.badge-admin {
    background: rgba(255, 107, 87, 0.1);
    color: var(--primary, #ff6b57);
    border: 1px solid rgba(255, 107, 87, 0.3);
}

.post-role {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    text-align: center;
    width: 100%;
}

.role-admin {
    background-color: #8b0000;
    color: #fff;
}

.role-user {
    background-color: #333;
    color: #bbb;
}

.post-main {
    flex: 1;
    /* Занимает всё оставшееся пространство */
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Спасает от разрыва контейнера длинным текстом */
}

.post-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.post-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted, #a1a1aa);
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.post-date {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-actions {
    display: flex;
    gap: 12px;
}

.action-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 13px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-btn:hover {
    color: #fff;
}

.vote-up:hover {
    color: #4caf50;
}

.delete-style:hover {
    color: var(--primary, #ff6b57);
}

.post-content {
    color: #ddd;
    font-size: 15px;
    line-height: 1.6;
    word-wrap: break-word;
    flex: 1;
}

.post-body {
    font-size: 15px;
    line-height: 1.6;
    color: #ddd;
}

.reply-section {
    padding: 30px;
}

.reply-section h3 {
    margin-bottom: 20px;
    color: #fff;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-muted, #a1a1aa);
}

/* === ВЛОЖЕНИЕ В ГЛАВНОМ ПОСТЕ (ПО СТРЕЛОЧКЕ) === */
.post-attachment-spoiler {
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.spoiler-btn {
    width: 100%;
    padding: 10px 15px;
    background: #1c1c24;
    border: none;
    color: #a1a1aa;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
}

.spoiler-btn:hover {
    background: #242430;
    color: #fff;
}

.spoiler-content {
    display: none;
    padding: 15px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.spoiler-content.active {
    display: block;
}

.spoiler-img {
    max-width: 100%;
    max-height: 600px;
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* === ВЛОЖЕНИЯ В КОММЕНТАРИЯХ (МАЛЕНЬКИЕ КВАДРАТИКИ) === */
.comment-attachment-box {
    margin-top: 12px;
}

.comment-thumb-link {
    display: inline-block;
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #2a2a35;
    position: relative;
    transition: 0.2s;
}

.comment-thumb-link:hover {
    transform: scale(1.04);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(255, 107, 87, 0.3);
}

.comment-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Квадратное кадрирование */
}

/* ==========================================================================
🛠️ БЕЗОПАСНЫЙ ФИКС ДЛИННОГО ТЕКСТА И ТРОЕТОЧИЕ В ПРОФИЛЕ
========================================================================== */

/* 1. Разрешаем flex-контейнерам сжиматься, не ломая кнопки */
.post-card,
.activity-item,
.profile-activity-item {
    min-width: 0;
}

/* 2. Безопасный перенос длинных ссылок ТОЛЬКО для текста (кнопки не трогаем!) */
.post-text,
.post-text-content,
.activity-text,
.user-bio {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word;
}

/* 3. Ограничиваем картинки в постах, чтобы они не ломали ширину */
.post-text img,
.post-text-content img,
.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* Для эстетики */
}

/* 4. СОКРАЩЕНИЕ ТЕКСТА С ТРОЕТОЧИЕМ (ТОЛЬКО ДЛЯ АКТИВНОСТИ В ПРОФИЛЕ) */
.activity-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Максимум 3 строки, дальше троеточие */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    /* Важно для правильной работы троеточия */
    margin-top: 5px;
    color: #a1a1aa;
}

/* Страница поиска */
.search-results-title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
}

.search-results-query {
    color: var(--primary);
}

.search-results-box {
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-card);
}

.search-results-loading {
    color: var(--text-muted);
    padding: 20px;
}

/* --- Выпадающее меню --- */
/* Выпадающий список на ПК — теперь он зафиксирован поверх сайта */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-card, #222) !important;
    min-width: 200px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1010;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 6px 0;
    margin-top: 10px;
}

/* Невидимый мост для мышки, чтобы меню не скрывалось на ПК */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -12px;
    /* Перекрывает зазор в 10px margin-top */
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
    /* Оставляем его невидимым */
}

/* Жестко возвращаем блочный вид для ссылок внутри выпадающего списка */
.dropdown-content a {
    color: #fff !important;
    padding: 10px 15px;
    display: block !important;
    white-space: normal !important;
    font-size: 14px;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--primary) !important;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Блок глобального поиска */
.header-search-box {
    position: relative;
    margin-left: auto;
    margin-right: 25px;
}

/* Модернизируем сам инпут (эффект стекла, скругление, расширение) */
.header-search-input {
    background: rgba(20, 20, 25, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 40px 10px 20px !important;
    /* Увеличенные отступы */
    border-radius: 50px !important;
    /* Делаем современную форму пилюли */
    font-size: 13px !important;
    width: 220px !important;
    max-width: 100%;
    outline: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Эффект при клике (фокусе): подсвечивается и плавно становится шире */
.header-search-input:focus {
    background: rgba(30, 30, 35, 0.8) !important;
    border-color: rgba(255, 107, 87, 0.5) !important;
    box-shadow:
        0 0 15px rgba(255, 107, 87, 0.2),
        inset 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    width: 280px !important;
}

/* Стилизуем иконку лупы */
.header-search-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary, #ff6b57) !important;
    /* Делаем лупу фирменного цвета */
    font-size: 15px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    z-index: 2;
    /* Чтобы всегда была кликабельна поверх инпута */
}

.header-search-btn:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.15);
    /* Плавно увеличивается при наведении */
}

.header-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Кнопка мобильного меню (бургер) */
.mobile-menu-btn {
    display: none;
    background: rgba(30, 30, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 22px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    z-index: 2005;
}

/* Применяем inline-flex ТОЛЬКО к главным ссылкам меню, не трогая выпадающий список */
.nav-links > a,
.dropdown > a {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

/* ========================================= */
/* 📱 СУПЕР-КОМПАКТНЫЙ СТИЛЬ ДЛЯ КАРТОЧЕК    */
/* ========================================= */

@media (max-width: 850px) {
    .forum-item {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex-wrap: wrap;
        padding: 15px !important;
    }

    .forum-icon {
        width: 40px !important;
        margin: 0 15px 0 0 !important;
        font-size: 24px !important;
    }

    .forum-details {
        flex: 1;
        min-width: 200px;
    }

    .sub-forums {
        justify-content: flex-start !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .sub-forums a {
        background: rgba(255, 255, 255, 0.05);
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 11px;
    }

    .sub-forums a i {
        display: none;
    }

    .forum-stats-box {
        width: 100% !important;
        margin-top: 15px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        justify-content: flex-start !important;
        gap: 20px !important;
    }

    .stat-col {
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
    }

    .stat-label {
        margin: 0 !important;
        font-size: 12px !important;
        text-transform: uppercase;
    }

    .stat-value {
        font-size: 13px !important;
    }

    /* Жестко фиксируем элементы в одну строку, запрещая им падать друг под друга */
    .header-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0 15px !important;
        width: 100% !important;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        /* Запрещаем кнопке сжиматься */
    }

    /* Меню превращается в тактическую выдвижную панель */
    .header-content-wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(20, 20, 25, 0.98) !important;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 90px 20px 30px;
        margin-left: 0;
        transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 2000;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
    }

    .header-content-wrapper.active {
        right: 0;
    }

    .header-content-wrapper .nav-links {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 30px;
    }

    .header-content-wrapper .dropdown-content {
        position: static;
        box-shadow: none;
        display: none;
        padding-left: 15px;
        background: transparent !important;
        border-left: 2px solid var(--primary) !important;
        margin-top: 10px;
        border-radius: 0 !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .header-content-wrapper .dropdown:hover .dropdown-content {
        display: block;
    }

    .header-content-wrapper .search-box {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .header-content-wrapper .header-search-input {
        width: 100%;
    }

    .header-content-wrapper .header-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .header-content-wrapper .btn {
        width: 100%;
        justify-content: center;
    }

    table,
    .table-responsive,
    .admin-panel-container {
        display: block !important;
        width: 100% !important;
        max-width: 100vw;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 15px 0;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .header-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .hero {
        text-align: center;
        padding: 80px 0;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 15px;
        margin: 0 auto 30px auto;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .about-grid,
    .steps-grid,
    .socials-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 24px;
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }

    .server-status {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 20px 15px;
    }

    .server-info {
        flex-direction: column;
        gap: 10px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .hero.glass-hero h1 {
        font-size: 42px;
    }

    .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .title-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .forum-layout {
        flex-direction: column;
    }

    .forum-sidebar {
        width: 100%;
    }

    .forum-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
        gap: 15px;
    }

    .forum-icon {
        margin: 0 auto;
        width: 100%;
    }

    .forum-stats-box {
        margin: 0 auto;
        width: 100%;
        justify-content: center;
        border-top: 1px solid #2a2a2a;
        padding-top: 15px;
    }

    .sub-forums {
        justify-content: center;
    }

    .header-search-box {
        width: 100%;
        margin: 10px 0 0 0;
    }

    .header-search-input {
        width: 100%;
        box-sizing: border-box;
    }

    .action-bar-container {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .action-bar-container .btn {
        width: 100%;
        justify-content: center;
    }

    .create-topic-box .form-group > div {
        flex-direction: column;
    }

    .prefix-select {
        width: 100%;
    }

    .sort-controls {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .topic-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        text-align: center;
    }

    .topic-info h3 {
        flex-direction: column;
    }

    .topic-stats {
        text-align: center;
        justify-content: center;
        padding-right: 0;
        width: 100%;
        border-top: 1px solid #2a2a2a;
        padding-top: 15px;
        margin-top: 5px;
    }

    .thread-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
        width: 100%;
    }

    .thread-meta {
        flex-direction: column;
        gap: 5px;
        align-items: center;
        width: 100%;
    }

    .forum-post {
        flex-direction: column;
    }

    .post-sidebar {
        flex-direction: row;
        text-align: center;
        justify-content: flex-start;
        border-right: none;
        border-bottom: 1px solid #2a2a2a;
        width: 100%;
        gap: 15px;
        padding: 15px;
    }

    .post-top {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .post-content > div {
        flex-direction: column;
    }

    .post-rating-arrows {
        flex-direction: row;
        width: 100%;
        padding: 10px;
        gap: 20px;
    }

    .avatar {
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin-bottom: 0;
    }

    .post-role {
        width: auto;
    }
}

@media (max-width: 1000px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .rich-grid,
    .factions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================================= */
/* 🧩 RICH CONTENT: Детализация и уплотнение блоков          */
/* ========================================================= */

/* Сетка из 3-х колонок для блока "О проекте" */
.rich-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.card-header .card-icon {
    margin-bottom: 0 !important;
    font-size: 28px;
    background: rgba(255, 107, 87, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.card-header h3 {
    margin-bottom: 0 !important;
    font-size: 22px;
}

/* Красивые тактические списки внутри карточек */
.card-list {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.card-list li {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-list li i {
    color: var(--primary);
    font-size: 12px;
}

/* ================= НОВЫЙ БЛОК: ФРАКЦИИ ================= */
.factions-section {
    padding: 80px 0;
    position: relative;
    background: linear-gradient(
        180deg,
        rgba(20, 20, 25, 0) 0%,
        rgba(255, 107, 87, 0.02) 50%,
        rgba(20, 20, 25, 0) 100%
    );
}

.factions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.faction-card {
    height: 280px;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;

    /* Затемнение для читаемости текста */
    box-shadow: inset 0 -100px 100px -20px rgba(0, 0, 0, 0.9);
}

/* Фоновые заглушки (потом заменишь на свои картинки копов/мафий из сампа) */
.faction-gov {
    background:
        radial-gradient(circle at 25% 30%, rgba(82, 190, 128, 0.3), transparent 36%),
        linear-gradient(135deg, #15251d, #0d1110);
}

.faction-crime {
    background:
        radial-gradient(circle at 75% 25%, rgba(156, 39, 176, 0.28), transparent 38%),
        linear-gradient(135deg, #241425, #100d12);
}

.faction-civil {
    background:
        radial-gradient(circle at 30% 20%, rgba(88, 166, 255, 0.26), transparent 38%),
        linear-gradient(135deg, #14202c, #0c1015);
}

.faction-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(15, 15, 18, 0.95) 0%, rgba(15, 15, 18, 0.2) 100%);
    z-index: 1;
}

.faction-content {
    position: relative;
    z-index: 2;
    transform: translateY(15px);
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faction-card:hover .faction-content {
    transform: translateY(0);
}

.faction-content h4 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.faction-content p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
    opacity: 0.8;
}

/* ================= Стилизация шагов старта ================= */
.step-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
    transition: 0.2s;
}

.step-link:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 107, 87, 0.5);
}

.step-ip-box {
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 107, 87, 0.4);
    font-family: monospace;
    color: #fff;
    font-size: 15px;
    text-align: center;
}

.stat-divider {
    color: #444;
    margin: 0 10px;
}

.stat-ping {
    color: #4caf50;
    font-weight: 600;
}

/* ========================================================= */
/* 💎 СТРАНИЦА ХАБА ДОНАТА (Обновленная)                     */
/* ========================================================= */

/* Верхняя панель (Dashboard) */
.store-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    margin-bottom: 40px;
}

.dash-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dash-avatar {
    width: 60px;
    height: 60px;
    background: rgba(255, 107, 87, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--primary);
    border: 1px solid rgba(255, 107, 87, 0.3);
}

.dash-welcome {
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.dash-balance {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.topup-btn {
    padding: 15px 30px;
    font-size: 16px;
}

/* Система вкладок (Tabs) */
.tactical-tabs {
    display: flex;
    gap: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
    overflow-x: auto;
    /* Для телефонов */
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 600;
    padding: 15px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    transition: 0.3s;
    font-family: inherit;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: 0.3s;
}

.tab-btn:hover {
    color: #fff;
}

.tab-btn.active {
    color: #fff;
}

.tab-btn.active::after {
    transform: scaleX(1);
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Инфо-карточки во вкладке "Обзор" */
.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.info-card {
    padding: 30px 20px;
    text-align: center;
}

.info-card i {
    font-size: 40px;
    margin-bottom: 20px;
}

.info-card h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #fff;
}

.info-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Сетка прямых покупок (shop-grid) */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.shop-item {
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.shop-icon {
    font-size: 45px;
    margin-bottom: 20px;
}

.shop-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.shop-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
    /* Чтобы кнопки всегда были внизу на одном уровне */
}

.shop-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 20px;
}

/* Заглушка для Казино */
.empty-state {
    padding: 100px 20px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.empty-icon-wrap {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.empty-state h2 {
    font-size: 28px;
    margin-bottom: 15px;
}

.empty-state p {
    color: var(--text-muted);
    line-height: 1.6;
}

.mt-3 {
    margin-top: 25px;
}

/* ========================================= */
/* МОДАЛКА ПОПОЛНЕНИЯ (Стили формы)          */
/* ========================================= */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 12, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topup-box {
    width: 100%;
    max-width: 450px;
    padding: 40px;
    position: relative;
}

.close-modal-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal-btn:hover {
    color: #fff;
    transform: rotate(90deg);
}

.topup-header {
    text-align: center;
    margin-bottom: 30px;
}

.topup-header h3 {
    font-size: 24px;
    margin: 15px 0 5px 0;
}

.topup-header p {
    font-size: 13px;
    color: var(--text-muted);
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 15px;
    color: #666;
    font-size: 16px;
}

.input-wrapper input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 15px 15px 15px 45px;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    font-family: inherit;
    transition: 0.3s;
}

.input-wrapper input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(255, 107, 87, 0.2);
}

.input-wrapper input:focus + i {
    color: var(--primary);
}

.quick-sums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 30px;
}

.sum-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.sum-btn:hover {
    background: rgba(255, 107, 87, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

/* =========================================================================
ФУТЕР (Изменен по ТЗ)
========================================================================= */
.footer {
    background: #08080a;
    border-top: 1px solid var(--glass-border);
    padding: 60px 0;
    color: var(--text-muted);
    font-size: 14px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    flex-wrap: wrap;
}

.footer-left {
    max-width: 400px;
}

.footer-left .logo {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-left p {
    line-height: 1.6;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-contacts p {
    margin: 0;
}

.footer-contacts a {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
    font-size: 18px;
}

.footer-contacts .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
    width: fit-content;
    display: block;
}

.footer-contacts .btn-secondary:hover {
    background: rgba(255, 82, 59, 0.1);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ==========================================================================
FORUM V3 — структура, публикации и ненавязчивый атмосферный фон
========================================================================== */
.forum-main {
    position: relative;
    z-index: 1;
}

.forum-flower-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.forum-flower {
    position: absolute;
    top: var(--flower-y);
    left: var(--flower-x);
    color: #ffffff;
    font-family: Georgia, serif;
    font-size: var(--flower-size);
    line-height: 1;
    opacity: var(--flower-opacity);
    filter: grayscale(1);
    transform: rotate(var(--flower-turn));
    user-select: none;
}

.forum-emoji {
    display: inline-block;
    opacity: 0.72;
    filter: saturate(0.38) brightness(0.82);
    text-shadow: none !important;
    transform: translateZ(0);
}

.forum-error,
.forum-empty-card {
    padding: 24px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    text-align: center;
}

.forum-error {
    color: #ff8b7b;
}

.forum-icon[style*='--section-accent'] {
    color: var(--section-accent) !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--section-accent), transparent 55%);
}

.category-header[style*='--section-accent'] i {
    color: var(--section-accent);
}

.forum-admin-manager {
    margin-bottom: 26px;
    overflow: hidden;
    background: rgba(23, 23, 29, 0.78);
    border: 1px solid rgba(255, 107, 87, 0.22);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.forum-admin-manager[hidden] {
    display: none;
}

.forum-admin-manager > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    color: #f5f5f7;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.forum-admin-manager > summary::-webkit-details-marker {
    display: none;
}

.forum-admin-manager > summary::after {
    content: '\f078';
    margin-left: auto;
    color: #8b8c96;
    font: 900 12px/1 'Font Awesome 6 Free';
    transition: transform 0.2s;
}

.forum-admin-manager[open] > summary::after {
    transform: rotate(180deg);
}

.forum-admin-manager-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr);
    gap: 18px;
    padding: 0 20px 20px;
}

.forum-section-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
}

.admin-manager-heading,
.forum-section-form .wide-field {
    grid-column: 1 / -1;
}

.admin-manager-heading strong,
.forum-section-delete strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.admin-manager-heading span,
.forum-section-delete span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.forum-section-form label {
    display: grid;
    gap: 7px;
    color: #a7a8b2;
    font-size: 11px;
    font-weight: 700;
}

.forum-section-form :is(input, select),
.forum-section-delete select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    color: #f5f5f7;
    background: #111117;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    font:
        600 12px/1.2 Inter,
        sans-serif;
    outline: none;
}

.forum-section-form input[type='color'] {
    padding: 4px;
    cursor: pointer;
}

.forum-section-delete {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: rgba(239, 68, 68, 0.035);
    border: 1px solid rgba(239, 68, 68, 0.13);
    border-radius: 13px;
}

.btn-danger-soft {
    justify-content: center;
    color: #ff8b7b;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.26);
}

.btn-danger-soft:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.22);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.section-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.15;
}

.section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.section-actions .sort-controls {
    margin: 0;
}

.section-actions .sort-select {
    min-width: 215px;
}

.nested-header {
    margin-top: 0;
}

.nested-sections-list {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}

.nested-section-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    background: rgba(30, 30, 35, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: 0.2s ease;
}

.nested-section-card:hover {
    border-color: color-mix(in srgb, var(--section-accent), transparent 48%);
    background: rgba(40, 40, 46, 0.72);
    transform: translateX(3px);
}

.nested-section-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--section-accent);
    background: color-mix(in srgb, var(--section-accent), transparent 88%);
    border-radius: 12px;
    font-size: 19px;
}

.nested-section-card strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.nested-section-card small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nested-section-card > i {
    color: #696a73;
    font-size: 12px;
}

.section-banner-wrap {
    height: auto;
    min-height: 190px;
    aspect-ratio: 60 / 11;
    background-color: #141419;
}

.section-banner-empty {
    aspect-ratio: auto;
}

.topic-meta-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field-label {
    display: block;
    margin-bottom: 9px;
    color: #a6a8b2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.forum-field-select,
.forum-field-input {
    width: 100%;
    min-height: 45px;
    padding: 11px 13px;
    color: #f3f4f6;
    background: #101016;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    font:
        600 13px/1.2 Inter,
        sans-serif;
    outline: none;
}

.forum-field-select:focus,
.forum-field-input:focus {
    border-color: rgba(255, 107, 87, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 107, 87, 0.1);
}

.forum-file-field {
    padding: 16px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 12px;
}

.file-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.styled-file-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 15px;
    color: #f4f4f6;
    background: linear-gradient(135deg, rgba(255, 107, 87, 0.2), rgba(255, 82, 59, 0.09));
    border: 1px solid rgba(255, 107, 87, 0.36);
    border-radius: 10px;
    font:
        800 12px/1 Inter,
        sans-serif;
    cursor: pointer;
    transition: 0.2s;
}

.styled-file-button:hover,
.styled-file-button.has-files {
    background: linear-gradient(135deg, #bd402e, #983124);
    border-color: #d75643;
    transform: translateY(-1px);
}

.file-picker-status {
    min-width: 0;
    overflow: hidden;
    color: #868993;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.layout-picker legend {
    margin-bottom: 10px;
    color: #a6a8b2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.layout-picker label {
    min-width: 0;
    cursor: pointer;
}

.layout-picker input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.layout-picker span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 9px;
    height: 100%;
    padding: 13px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    transition: 0.2s;
}

.layout-picker span > i {
    grid-row: 1 / 3;
    align-self: center;
    color: #7f818b;
    font-size: 17px;
}

.layout-picker b {
    color: #f1f1f3;
    font-size: 12px;
}

.layout-picker small {
    overflow: hidden;
    color: #777985;
    font-size: 9px;
    line-height: 1.3;
}

.layout-picker input:checked + span {
    background: rgba(255, 107, 87, 0.09);
    border-color: rgba(255, 107, 87, 0.58);
    box-shadow: 0 0 0 3px rgba(255, 107, 87, 0.06);
}

.layout-picker input:checked + span > i {
    color: var(--primary);
}

.form-actions {
    display: flex;
    gap: 12px;
}

.topic-item {
    gap: 18px;
}

.topic-main-info {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 14px;
}

.topic-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--primary);
    background: rgba(255, 107, 87, 0.08);
    border-radius: 11px;
    font-size: 17px;
}

.topic-icon.closed {
    color: #8a8b93;
    background: rgba(138, 139, 147, 0.1);
}

.topic-text {
    min-width: 0;
}

.topic-text h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #f7f7f8;
    font-size: 15px;
    line-height: 1.35;
}

.topic-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
}

.topic-meta a {
    color: #65c98e;
    font-weight: 700;
}

.topic-stats {
    display: flex;
    flex: 0 0 auto;
    gap: 22px;
}

.topic-stats > div {
    display: grid;
    min-width: 62px;
    text-align: center;
}

.topic-stats strong {
    color: #e5e5e8;
    font-size: 14px;
}

.topic-stats span {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.topic-tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 8px;
    color: color-mix(in srgb, var(--tag-color), white 22%);
    background: color-mix(in srgb, var(--tag-color), transparent 85%);
    border: 1px solid color-mix(in srgb, var(--tag-color), transparent 58%);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.thread-header-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 20px 22px;
    background: rgba(25, 25, 31, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    backdrop-filter: blur(16px);
}

.thread-kicker {
    display: block;
    margin-bottom: 7px;
    color: #777984;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.thread-header-modern h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    color: #fff;
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.28;
}

.thread-lock {
    color: #8a8b93;
    font-size: 0.7em;
}

.thread-admin-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.post-block {
    align-items: stretch;
    padding: 0 !important;
}

.post-block.main-post {
    border-color: rgba(82, 190, 128, 0.3) !important;
    background: linear-gradient(
        135deg,
        rgba(82, 190, 128, 0.035),
        rgba(30, 30, 35, 0.46)
    ) !important;
}

.post-user-info {
    display: flex;
    flex: 0 0 178px;
    flex-direction: column;
    align-items: center;
    padding: 22px 18px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.055);
}

.post-avatar-modern {
    position: relative;
    display: grid;
    width: 78px;
    height: 78px;
    margin-bottom: 12px;
    overflow: hidden;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #315f91, #203a61);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    font-size: 27px;
    font-weight: 900;
}

.post-avatar-modern img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-author-link {
    max-width: 100%;
    overflow: hidden;
    color: #65c98e;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
}

.post-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 8px;
    color: #a4a5ad;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
}

.post-role-badge.admin {
    color: #ff8b7b;
    background: rgba(255, 107, 87, 0.1);
}

.post-block > .post-content {
    padding: 21px 22px;
}

.post-header {
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 11px;
    color: #767883;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    font-size: 10px;
}

.post-header > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.post-header > strong {
    color: var(--primary);
    font-size: 12px;
}

.topic-author-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    color: #65c98e;
    background: rgba(82, 190, 128, 0.1);
    border: 1px solid rgba(82, 190, 128, 0.22);
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.post-text {
    color: #dedee2;
    font-size: 14px;
    line-height: 1.72;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.post-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.post-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    font:
        700 10px/1 Inter,
        sans-serif;
    cursor: pointer;
}

.post-action.edit {
    color: #70b7ff;
}

.post-action.delete {
    color: #ff8170;
}

.post-gallery {
    position: relative;
    margin-top: 18px;
}

.gallery-track {
    min-width: 0;
}

.gallery-image {
    display: block;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: #0c0c10;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    cursor: zoom-in;
}

.gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.25s,
        filter 0.25s;
}

.gallery-image:hover img {
    filter: brightness(1.06);
    transform: scale(1.015);
}

.layout-stack .gallery-track {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.layout-stack .gallery-image img {
    height: auto;
    max-height: 780px;
    object-fit: contain;
}

.layout-squares .gallery-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 140px));
    gap: 9px;
}

.layout-squares .gallery-image {
    aspect-ratio: 1;
}

.layout-mosaic .gallery-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, 180px);
    gap: 9px;
}

.layout-mosaic .gallery-image:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.layout-slider {
    overflow: hidden;
    border-radius: 12px;
}

.layout-slider .gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.layout-slider .gallery-track::-webkit-scrollbar {
    display: none;
}

.layout-slider .gallery-image {
    flex: 0 0 100%;
    height: clamp(260px, 46vw, 620px);
    border-radius: 0;
    scroll-snap-align: start;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: #fff;
    background: rgba(8, 8, 12, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
}

.gallery-prev {
    left: 12px;
}

.gallery-next {
    right: 12px;
}

.gallery-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 5px 9px;
    color: #fff;
    background: rgba(8, 8, 12, 0.7);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.forum-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: grid;
    padding: 60px 76px;
    place-items: center;
    background: rgba(3, 3, 6, 0.93);
    backdrop-filter: blur(18px);
}

.forum-image-viewer[hidden] {
    display: none;
}

.forum-image-viewer figure {
    display: grid;
    max-width: min(1400px, 90vw);
    max-height: 86vh;
    margin: 0;
    place-items: center;
}

.forum-image-viewer img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    object-fit: contain;
}

.forum-image-viewer figcaption {
    margin-top: 10px;
    color: #92949e;
    font-size: 11px;
}

.viewer-close,
.viewer-arrow {
    position: absolute;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
}

.viewer-close {
    top: 22px;
    right: 24px;
}

.viewer-arrow {
    top: 50%;
    transform: translateY(-50%);
}

.viewer-prev {
    left: 22px;
}

.viewer-next {
    right: 22px;
}

.forum-viewer-open {
    overflow: hidden;
}

.reply-locked {
    padding: 18px;
    color: #a6a8b1;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 10px;
    text-align: center;
}

.reply-locked a {
    color: var(--primary);
    font-weight: 800;
}

.edit-remove-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.edit-remove-row label {
    color: #ff8170;
    font-size: 11px;
    cursor: pointer;
}

.edit-layout-group {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    color: #a6a8b2;
    font-size: 11px;
    font-weight: 700;
}

.online-user-link {
    color: #f0f0f2;
    font-weight: 600;
}

.online-user-link.admin {
    color: #ff7e6b;
}

.online-empty,
.sidebar-empty {
    color: var(--text-muted);
    font-size: 11px;
}

.sidebar-post-item {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.sidebar-post-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.sidebar-avatar {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    background-color: #284e78;
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.sidebar-post-info {
    min-width: 0;
    flex: 1;
}

.sidebar-post-title {
    display: block;
    overflow: hidden;
    color: #f5f5f7;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-post-meta {
    margin-top: 3px;
    color: #777984;
    font-size: 9px;
    line-height: 1.45;
}

.sidebar-post-meta a {
    color: #65c98e;
    font-weight: 700;
}

@media (max-width: 920px) {
    .forum-admin-manager-body {
        grid-template-columns: 1fr;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .section-actions .sort-controls {
        justify-content: flex-start;
    }

    .layout-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thread-header-modern {
        align-items: flex-start;
        flex-direction: column;
    }

    .thread-admin-controls {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .forum-main {
        padding-inline: 12px;
    }

    .forum-flower {
        opacity: calc(var(--flower-opacity) * 0.72);
    }

    .forum-section-form {
        grid-template-columns: 1fr;
    }

    .forum-section-form label,
    .forum-section-form .wide-field {
        grid-column: auto;
    }

    .section-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .section-actions .sort-controls {
        display: grid;
        grid-template-columns: auto 1fr;
        width: 100%;
    }

    .section-actions .sort-controls > span {
        align-self: center;
    }

    .section-actions .sort-select {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .section-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .section-banner-wrap {
        min-height: 145px;
        border-radius: 10px;
    }

    .banner-controls {
        top: 9px !important;
        right: 9px !important;
    }

    .btn-edit-banner {
        padding: 7px 10px;
        font-size: 10px;
    }

    .topic-meta-fields {
        grid-template-columns: 1fr;
    }

    .layout-picker {
        grid-template-columns: 1fr;
    }

    .layout-picker small {
        white-space: normal;
    }

    .file-picker-row {
        align-items: stretch;
        flex-direction: column;
    }

    .styled-file-button {
        justify-content: center;
    }

    .file-picker-status {
        text-align: center;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        justify-content: center;
    }

    .nested-section-card {
        padding: 13px;
    }

    .nested-section-card small {
        white-space: normal;
    }

    .topic-item {
        align-items: stretch !important;
        text-align: left !important;
    }

    .topic-main-info {
        width: 100%;
        align-items: flex-start;
    }

    .topic-text h4 {
        align-items: flex-start;
        flex-direction: column;
    }

    .topic-stats {
        width: 100%;
        justify-content: flex-start;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .post-block {
        flex-direction: column;
    }

    .post-user-info {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 13px 15px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        text-align: left;
    }

    .post-avatar-modern {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        margin: 0;
        font-size: 18px;
    }

    .post-role-badge {
        margin: 0 0 0 auto;
    }

    .post-block > .post-content {
        padding: 16px;
    }

    .post-header {
        align-items: flex-start;
    }

    .topic-author-badge {
        display: none;
    }

    .post-footer {
        justify-content: stretch;
    }

    .post-action {
        flex: 1;
        justify-content: center;
    }

    .layout-squares .gallery-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .layout-mosaic .gallery-track {
        grid-auto-rows: 108px;
    }

    .layout-slider .gallery-image {
        height: min(62vw, 390px);
    }

    .forum-image-viewer {
        padding: 54px 12px;
    }

    .viewer-arrow {
        top: auto;
        bottom: 15px;
        transform: none;
    }

    .viewer-prev {
        left: calc(50% - 58px);
    }

    .viewer-next {
        right: calc(50% - 58px);
    }
}

/* Forum v4: более тёмный список тем и единое окно редактирования публикации. */
.pinned-header {
    padding: 13px 15px;
    color: #c0c2ca;
    background: linear-gradient(90deg, rgba(14, 14, 19, 0.96), rgba(22, 22, 29, 0.76)) !important;
    border: 1px solid rgba(255, 255, 255, 0.065) !important;
    border-bottom: 0 !important;
}

.pinned-list {
    padding: 12px;
    background: rgba(8, 8, 12, 0.7);
    border-color: rgba(255, 255, 255, 0.065);
}

.pinned-list .topic-item {
    background: linear-gradient(135deg, rgba(34, 26, 31, 0.97), rgba(24, 24, 33, 0.92)) !important;
    border-color: rgba(255, 107, 87, 0.16) !important;
    box-shadow:
        inset 3px 0 0 rgba(255, 107, 87, 0.42),
        0 10px 28px rgba(0, 0, 0, 0.24);
}

.pinned-list .topic-item:hover {
    background: linear-gradient(135deg, rgba(45, 31, 36, 0.98), rgba(30, 28, 38, 0.96)) !important;
    border-color: rgba(255, 107, 87, 0.38) !important;
}

.forum-item {
    scroll-margin-top: 130px;
}

.breadcrumb-section-path {
    display: contents;
}

.breadcrumb-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d2d3d8;
    font-weight: 700;
}

.breadcrumb-section-link i {
    color: var(--primary);
    font-size: 10px;
}

.post-action.tag {
    color: #d9a9ff;
}

.edit-post-modal {
    position: fixed;
    inset: 0;
    z-index: 100020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    overflow-y: auto;
    background: rgba(3, 3, 7, 0.86);
    backdrop-filter: blur(10px);
}

.edit-post-modal[hidden] {
    display: none;
}

.edit-post-dialog {
    width: min(720px, 96vw);
    max-height: calc(100vh - 44px);
    padding: 26px;
    overflow-y: auto;
    color: #f3f4f6;
    background: linear-gradient(145deg, rgba(25, 25, 32, 0.98), rgba(13, 13, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.edit-post-dialog h3 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 19px;
}

.edit-post-dialog h3 i {
    margin-right: 8px;
    color: var(--primary);
}

.edit-field-label {
    display: block;
    margin-bottom: 8px;
    color: #a6a8b2;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

#edit-post-content {
    width: 100%;
    min-height: 145px;
    margin-bottom: 16px;
    padding: 14px 15px;
    color: #ececf0;
    background: #0e0e14;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    outline: 0;
    resize: vertical;
    font:
        500 14px/1.55 Inter,
        sans-serif;
}

#edit-post-content:focus {
    border-color: rgba(255, 107, 87, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 107, 87, 0.1);
}

.edit-topic-meta-panel,
.edit-admin-meta-panel,
.edit-media-panel {
    margin-bottom: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
}

.edit-admin-meta-panel {
    background: rgba(255, 107, 87, 0.035);
    border-color: rgba(255, 107, 87, 0.16);
}

.edit-meta-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

.edit-meta-heading > i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--primary);
    background: rgba(255, 107, 87, 0.1);
    border-radius: 10px;
}

.edit-meta-heading strong,
.edit-meta-heading small {
    display: block;
}

.edit-meta-heading strong {
    color: #f4f4f6;
    font-size: 12px;
}

.edit-meta-heading small {
    margin-top: 2px;
    color: #858791;
    font-size: 9px;
}

.edit-post-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.forum-modal-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .forum-flower:nth-child(n + 9) {
        display: none;
    }

    .edit-post-modal {
        align-items: flex-start;
        padding: 10px;
    }

    .edit-post-dialog {
        width: 100%;
        max-height: calc(100vh - 20px);
        padding: 17px;
    }

    .edit-post-actions {
        flex-direction: column-reverse;
    }

    .edit-post-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Forum v7: закреплённые темы заметнее, но остаются в той же палитре. */
.pinned-header {
    color: #ffe2dd;
    background: linear-gradient(100deg, rgba(87, 42, 38, 0.98), rgba(48, 31, 35, 0.94)) !important;
    border-color: rgba(255, 139, 123, 0.34) !important;
}

.pinned-list {
    background: linear-gradient(145deg, rgba(54, 31, 34, 0.9), rgba(27, 25, 34, 0.92));
    border-color: rgba(255, 107, 87, 0.25);
    box-shadow: 0 14px 38px rgba(255, 82, 59, 0.08);
}

.pinned-list .topic-item {
    background: linear-gradient(135deg, rgba(69, 42, 43, 0.98), rgba(38, 34, 44, 0.96)) !important;
    border-color: rgba(255, 133, 116, 0.3) !important;
    box-shadow:
        inset 4px 0 0 rgba(255, 122, 103, 0.72),
        0 12px 30px rgba(0, 0, 0, 0.22);
}

.pinned-list .topic-item:hover {
    background: linear-gradient(135deg, rgba(83, 47, 47, 0.99), rgba(46, 39, 51, 0.97)) !important;
    border-color: rgba(255, 145, 129, 0.52) !important;
}

html[data-theme='light'] .pinned-header {
    color: #6e2118;
    background: linear-gradient(100deg, #ffd7d0, #f7e2df) !important;
    border-color: rgba(190, 59, 41, 0.28) !important;
}

html[data-theme='light'] .pinned-list {
    background: linear-gradient(145deg, #fff0ed, #f5f1f3);
    border-color: rgba(190, 59, 41, 0.18);
}

html[data-theme='light'] .pinned-list .topic-item {
    background: linear-gradient(135deg, #fff8f6, #f6f2f4) !important;
    border-color: rgba(190, 59, 41, 0.2) !important;
}

/* Forum v8: administrator-controlled topic and pinned-block surfaces. */
.pinned-header {
    --pinned-surface-color: #2b2d31;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #f2f2f4;
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--pinned-surface-color) 88%, #0d0d12),
        color-mix(in srgb, var(--pinned-surface-color) 54%, #15151c)
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--pinned-surface-color) 65%,
        rgba(255, 255, 255, 0.16)
    ) !important;
}

.pinned-list {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--pinned-surface-color) 42%, rgba(9, 9, 13, 0.94)),
        rgba(15, 15, 20, 0.92)
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--pinned-surface-color) 52%,
        rgba(255, 255, 255, 0.1)
    ) !important;
    box-shadow: 0 14px 38px color-mix(in srgb, var(--pinned-surface-color) 18%, transparent) !important;
}

.pinned-list .topic-item {
    --topic-surface-color: #2b2d31;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--topic-surface-color) 82%, #121219),
        color-mix(in srgb, var(--topic-surface-color) 50%, #1b1b23)
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--topic-surface-color) 62%,
        rgba(255, 255, 255, 0.13)
    ) !important;
    box-shadow:
        inset 4px 0 0 color-mix(in srgb, var(--topic-surface-color) 68%, #f1f1f3),
        0 12px 30px rgba(0, 0, 0, 0.22) !important;
}

.pinned-list .topic-item:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--topic-surface-color) 88%, #1e1e25),
        color-mix(in srgb, var(--topic-surface-color) 58%, #25252d)
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--topic-surface-color) 72%,
        rgba(255, 255, 255, 0.32)
    ) !important;
}

.forum-color-trigger,
.topic-color-trigger {
    display: inline-grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #e6e6e9;
    background: rgba(8, 8, 12, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.forum-color-trigger[hidden] {
    display: none;
}

.forum-color-trigger:hover,
.topic-color-trigger:hover {
    transform: translateY(-1px);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.topic-stats .topic-color-trigger {
    margin-left: 4px;
}

.forum-color-modal {
    position: fixed;
    inset: 0;
    z-index: 100030;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(3, 3, 7, 0.84);
    backdrop-filter: blur(10px);
}

.forum-color-modal[hidden] {
    display: none;
}

.forum-color-dialog {
    position: relative;
    width: min(520px, 96vw);
    padding: 27px;
    color: #f4f4f6;
    background: linear-gradient(145deg, #1b1b22, #111116);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

.forum-color-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #a9abb4;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.forum-color-kicker {
    display: block;
    margin-bottom: 8px;
    color: #ff8c7a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.forum-color-dialog h2 {
    margin: 0 42px 8px 0;
    color: #fff;
    font-size: 21px;
}

.forum-color-dialog > p {
    margin: 0 0 20px;
    color: #989aa4;
    font-size: 12px;
    line-height: 1.55;
}

.forum-color-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.forum-color-preset {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 2px 11px;
    padding: 12px;
    color: #ececef;
    text-align: left;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
}

.forum-color-preset > span {
    grid-row: 1 / 3;
    display: block;
    width: 40px;
    height: 40px;
    background: var(--swatch);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.forum-color-preset strong {
    align-self: end;
    font-size: 12px;
}

.forum-color-preset small {
    color: #858791;
    font-size: 10px;
}

.forum-color-preset.is-selected {
    background: rgba(255, 107, 87, 0.08);
    border-color: rgba(255, 107, 87, 0.48);
    box-shadow: 0 0 0 3px rgba(255, 107, 87, 0.07);
}

.forum-custom-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding: 12px 14px;
    color: #c7c8ce;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 750;
}

.forum-custom-color input {
    width: 64px;
    height: 38px;
    padding: 2px;
    background: #0d0d12;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    cursor: pointer;
}

.forum-color-message {
    display: block;
    min-height: 16px;
    margin-top: 10px;
    color: #9a9ca5;
    font-size: 11px;
}

.forum-color-message.error {
    color: #ff8272;
}

.forum-color-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 8px;
}

html[data-theme='light'] .pinned-header {
    color: #fff;
}

html[data-theme='light'] .pinned-list {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--pinned-surface-color) 11%, #fff),
        #f6f6f8
    ) !important;
}

html[data-theme='light'] .pinned-list .topic-item {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--topic-surface-color) 14%, #fff),
        #f7f7f9
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--topic-surface-color) 30%,
        rgba(30, 34, 44, 0.12)
    ) !important;
}

@media (max-width: 620px) {
    .forum-color-dialog {
        padding: 22px 17px 17px;
    }

    .forum-color-presets {
        grid-template-columns: 1fr;
    }

    .forum-color-actions {
        flex-direction: column-reverse;
    }

    .forum-color-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Forum v12: сезонное оформление и ненавязчивый знак у предложений. */
.ideas-attention-mark {
    display: inline;
    margin-right: 5px;
    color: #ff7865;
    background: none;
    box-shadow: none;
    font:
        950 13px/1 Inter,
        sans-serif;
}

.section-admin-subsection {
    margin: 0 0 24px;
    padding: 22px;
    background: linear-gradient(135deg, rgba(26, 27, 34, 0.96), rgba(15, 15, 21, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
}

.section-admin-subsection[hidden] {
    display: none;
}

.section-admin-subsection-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.section-admin-subsection-heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #ff8877;
    background: rgba(255, 107, 87, 0.1);
    border-radius: 11px;
}

.section-admin-subsection-heading h2 {
    margin: 0;
    color: #f3f3f5;
    font-size: 17px;
}

.section-admin-subsection-heading p {
    margin: 3px 0 0;
    color: #858791;
    font-size: 10px;
}

.section-admin-subsection form {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 0.8fr 0.45fr;
    gap: 12px;
}

.section-admin-subsection label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    color: #9b9da6;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.section-admin-subsection input,
.section-admin-subsection select {
    min-width: 0;
    height: 43px;
    padding: 0 12px;
    color: #eeeef1;
    background: #0d0d12;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    outline: 0;
}

.section-admin-subsection input[type='color'] {
    width: 100%;
    padding: 4px;
    cursor: pointer;
}

.section-admin-subsection .form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .section-admin-subsection form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .section-admin-subsection form {
        grid-template-columns: 1fr;
    }

    .section-admin-subsection .form-actions {
        grid-column: auto;
    }
}

.forum-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.forum-editor-toolbar button {
    padding: 6px 9px;
    color: #8eb5ff;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.forum-editor-toolbar span {
    color: #687282;
    font-size: 10px;
}

.forum-reply-preview {
    margin-top: 8px;
    padding: 14px;
    color: #d7dde6;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    white-space: pre-wrap;
}

.forum-file-field.dragging {
    outline: 2px dashed #60a5fa;
    outline-offset: 6px;
}

.post-action.solution {
    color: #6ee7b7 !important;
}

.thread-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.thread-subscription {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c7c7d2;
    font-size: 13px;
}

.thread-subscription select {
    min-height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid #333340;
    border-radius: 8px;
    background: #111117;
    color: #fff;
}

@media (max-width: 720px) {
    .thread-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .thread-subscription {
        width: 100%;
    }

    .thread-subscription select {
        flex: 1;
    }
}