/* ==========================================================================
   1. ДИЗАЙН-ТОКЕНЫ (ПЕРЕМЕННЫЕ САЙТА)
   ========================================================================== */
:root {
    --primary-maroon: #800000;
    --dark-maroon: #631a10;
    --accent-red: #b71c1c;
    --danger-red: #c62828;
    --primary-blue: #004b8d;
    --accent-blue: #2b5797;
    --hover-blue: #1c3b6f;
    
    --bg-site: #f4f6f8;
    --bg-card: #ffffff;
    --bg-alt: #fafafa;
    --text-main: #222222;
    --text-muted: #4a5568;
    --border-color: #e2e8f0;
    --border-dark: #cbd5e1;

    --font-main: "Segoe UI", Arial, sans-serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-sm: 4px;
}

/* ==========================================================================
   2. СБРОС И БАЗОВЫЕ СТИЛИ (RESET & BASE)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-site);
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.7;
    min-height: 100vh;
}

p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: var(--danger-red);
}

h1, h2, h3, h4 {
    font-family: var(--font-main);
    color: var(--text-main);
    font-weight: bold;
}

table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 12px;
    width: 100%;
    text-align: center;
}

th, td {
    border: 1px solid #000000;
    padding: 6px;
}

th {
    font-weight: bold;
    background-color: #f2f2f2;
}

.bg-pink   { background-color: #ffccd5; color: #b30000; }
.bg-green  { background-color: #d4edda; color: #155724; }
.text-red  { color: #ff0000; font-weight: bold; }
.text-bold { font-weight: bold; }
/* ==========================================================================
   3. ГЛОБАЛЬНЫЙ КАРКАС И ШАПКА (LAYOUT & HEADER)
   ========================================================================== */
.main-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--bg-card);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

.site-header {
    height: 85px; 
    border-bottom: 3px solid var(--primary-maroon);
    padding: 0 20px;
    background-image: url('img/header_sm.jpg'), url('img/header_fn.jpg');
    background-repeat: no-repeat, repeat-x;
    background-position: left top, left top;
    background-color: #535353; 
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
}

.site-branding {
    width: 320px;
    height: 85px;
    flex-shrink: 0;
}

.site-branding .site-logo-text {
    font-size: 32px;
    font-weight: 900;
    color: var(--primary-maroon);
    padding: 2px 10px;
    margin-left: 20px;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0px 0px 8px rgba(255,255,255,1);
}

.top-navigation ul {
    display: flex;
    list-style: none;
    gap: 20px;
    align-items: center;
}

.top-navigation .nav-link {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    padding: 5px 10px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); 
}

.top-navigation .nav-link:hover, 
.top-navigation .nav-link.active {
    color: var(--accent-red);
}

.top-navigation .highlight-btn {
    background: var(--primary-maroon);
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    text-shadow: none !important;
}

.main-content-area {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 20px 15px;
    flex: 1;
}

.sidebar-left {
    flex: 0 0 270px;
    width: 270px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-main {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   4. КОМПОНЕНТЫ И СЕТКИ (MENU, BUTTONS, CARDS)
   ========================================================================== */
ul.accordion-menu, ul.accordion-menu li { list-style: none; }
ul.accordion-menu > li { margin-bottom: 8px; }
ul.accordion-menu > li > a.category-toggle,
ul.accordion-menu > li > a.single-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; font-weight: bold; font-size: 15px; color: #333;
    background: #e4e3e0; border: 1px solid #dcdcdc; border-radius: var(--radius-sm);
    transition: all 0.2s ease-in-out;
}

ul.accordion-menu > li > a.category-toggle:hover,
ul.accordion-menu > li > a.single-link:hover {
    background: var(--primary-maroon); color: #ffffff; border-color: var(--primary-maroon);
}

.menu-arrow { font-size: 11px; transition: transform 0.2s ease; display: inline-block; }
ul.accordion-menu > li > a.category-toggle:hover .menu-arrow { color: #ffffff; }
ul.accordion-menu li.is-open > a.category-toggle { background: #b3b3b3; color: #000000; border-color: #999999; }
ul.accordion-menu li.is-open .menu-arrow { transform: rotate(180deg); }
ul.accordion-menu li ul.sub-menu { padding: 5px 0 10px 20px; display: none; }
ul.accordion-menu li.is-open ul.sub-menu { display: block; }

ul.accordion-menu li ul.sub-menu li a {
    display: block; padding: 8px 0; color: #555555; font-size: 14px; font-weight: 500; transition: color 0.2s ease-in-out;
}
ul.accordion-menu li ul.sub-menu li a:hover { color: var(--primary-maroon); text-decoration: underline; }

.menu-toggle {
    display: none; background: var(--primary-maroon); border: none; padding: 12px;
    cursor: pointer; z-index: 1001; border-radius: var(--radius-sm); box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.hamburger { display: block; width: 22px; height: 2px; background: #fff; position: relative; }
.hamburger::before, .hamburger::after {
    content: ''; width: 22px; height: 2px; background: #fff; position: absolute; left: 0; transition: transform 0.2s ease, top 0.2s ease;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }
.menu-toggle.active .hamburger { background: transparent; }
.menu-toggle.active .hamburger::before { top: 0; transform: rotate(45deg); }
.menu-toggle.active .hamburger::after { top: 0; transform: rotate(-45deg); }
/* Красивая и рабочая кнопка Telegram */
.tg-btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0088cc;
    color: #ffffff !important;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    margin-top: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: 0.2s;
}
.tg-btn-block:hover { background-color: #006699; }
.tg-icon { width: 20px; height: 20px; fill: #ffffff; margin-right: 10px; flex-shrink: 0; }

/* ИСПРАВЛЕНО: Жесткое сжатие расползающейся картинки */
.sidebar-illustration-container {
    width: 100%;
    max-width: 270px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: var(--radius-md);
}
.sidebar-illustration-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.content-block { background: var(--bg-card); border-radius: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.07); padding: 30px; margin-bottom: 35px; }
.content-block h2 { margin-top: 0; margin-bottom: 28px; font-size: 25px; color: #111; border-left: 6px solid var(--accent-red); padding-left: 16px; }

.hero-facts, .docs-grid, .stats-grid, .analysis-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px;
}
.fact-card, .doc-card, .stat-box, .analysis-card {
    background: #fafafa; border: 1px solid var(--border-color); border-radius: 14px; padding: 22px; 
    transition: 0.25s; display: flex; flex-direction: column; gap: 12px;
}
.doc-card:hover, .analysis-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); border-color: var(--accent-red); }
.fact-number, .stat-value { font-size: 30px; font-weight: 700; color: var(--danger-red); margin-bottom: 10px; }
.doc-card h3, .analysis-card h3 { margin-top: 0; color: var(--accent-red); font-size: 18px; font-weight: 700; }

/* --- Модули страниц --- */
.faq-page-container { max-width: 1000px; margin: 20px auto; font-family: var(--font-ui); color: var(--text-main); }
.faq-view-header { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); margin-bottom: 30px; }
.section-title-lined { font-size: 28px; font-weight: 800; color: #1a1a1a; margin: 0 0 15px 0; border-left: 5px solid var(--primary-maroon); padding-left: 15px; line-height: 1.2; }
.faq-accordion-group { display: flex; flex-direction: column; gap: 16px; }
.faq-item-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.01); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.faq-item-card.danger-faq-card { border-left: 4px solid var(--primary-maroon); }
.faq-item-card.no-danger-faq-card { border-left: 4px solid var(--accent-blue); }

.faq-item-summary { cursor: pointer; padding: 18px 24px; font-size: 17px; font-weight: 700; color: var(--accent-blue); background: var(--bg-card); display: flex; justify-content: space-between; align-items: center; user-select: none; outline: none; }
.faq-item-card.danger-faq-card .faq-item-summary { color: var(--primary-maroon); }
.faq-item-summary:hover { background: #f8fafc; }
.faq-item-card[open] { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.faq-item-card[open] .faq-item-summary { border-bottom: 1px solid #edf2f7; background: #f8fafc; }
.faq-answer-block { padding: 24px; background: var(--bg-card); }
.faq-answer-block p { margin: 0 0 16px 0; font-size: 15px; color: var(--text-main); }

.faq-item-card summary::-webkit-details-marker { display: none; }
.faq-item-card summary { list-style: none; }
.faq-item-summary::after {
    content: ""; display: inline-block; width: 8px; height: 8px; border-bottom: 2px solid var(--accent-blue); border-right: 2px solid var(--accent-blue); transform: rotate(45deg); transition: transform 0.2s ease, border-color 0.2s ease; flex-shrink: 0; margin-left: 15px;
}
.faq-item-card.danger-faq-card .faq-item-summary::after { border-color: var(--primary-maroon); }
.faq-item-card[open] .faq-item-summary::after { transform: rotate(-135deg); }

.official-profile-card { display: flex; gap: 40px; max-width: 1000px; margin: 20px auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 30px; box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.05); font-family: var(--font-ui); }
.profile-sidebar { flex: 0 0 260px; }
.profile-main { flex: 1; }
.profile-photo-wrapper { width: 100%; height: 340px; border-radius: 8px; overflow: hidden; background-color: #f7fafc; margin-bottom: 20px; border: 1px solid #edf2f7; display: flex; align-items: center; justify-content: center; }
.profile-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.profile-name { font-size: 28px; font-weight: 700; color: #1a202c; margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 2px solid #edf2f7; }

.court-decision-summary { max-width: 1140px; margin: 20px auto; font-family: var(--font-ui); color: var(--text-main); line-height: 1.6; }
.ssz-main-title { font-size: 28px; font-weight: 800; color: #1a1a1a; margin: 0 0 20px 0; padding-left: 15px; border-left: 5px solid var(--primary-maroon); line-height: 1.2; }
.ssz-lead-text { font-size: 16px; color: var(--text-muted); margin: 0 0 35px 0; line-height: 1.7; }
.section-sub-title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 40px 0 20px 0; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; }

.sub-menu .menu-item-nested > a { display: block; padding: 6px 0 4px 10px; font-size: 14px; font-weight: bold; color: #444444; }
.sub-menu-nested { list-style: none; padding-left: 15px; border-left: 1px dashed var(--border-dark); margin-bottom: 5px; }
.sub-menu-nested li a { padding: 4px 0 !important; font-size: 13px !important; }

/* ==========================================================================
   6. ОБЪЕДИНЕННАЯ МОБИЛЬНАЯ АДАПТИВНОСТЬ
   ========================================================================== */
@media (max-width: 768px) {
    .main-content-area { flex-direction: column; position: relative; padding: 10px; }
    .sidebar-left { display: none; width: 100%; position: absolute; top: 0; left: 0; background: #fff; z-index: 100; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid #ddd; border-radius: 4px; }
    .sidebar-left.active { display: block !important; }
    .menu-toggle { display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 101; }
    .top-navigation { display: none; }
    
    .hero-facts, .docs-grid, .stats-grid, .photo-one-column-grid, .video-grid-gallery, .analysis-grid {
        grid-template-columns: 1fr !important; gap: 16px;
    }
    
    .official-profile-card { flex-direction: column; gap: 20px; padding: 20px; }
    .profile-sidebar { width: 100%; }
    .profile-photo-wrapper { max-width: 260px; margin: 0 auto 20px auto; }
    
    .person-row-card, .doc-row-card { flex-direction: column; align-items: flex-start; padding: 15px; gap: 10px; background: #fafafa; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 6px; }
    .p-col, .d-col { width: 100% !important; text-align: left !important; padding: 0; }
    
    .faq-page-container { padding: 0 10px; }
    .faq-view-header { padding: 20px; }
    .section-title-lined { font-size: 22px; }
    .faq-item-summary { padding: 14px 16px; font-size: 15px; }
    .faq-answer-block { padding: 16px; }
}
/* Дополнительные утилиты для страниц с документами */
.shifted-list {
    margin-left: 40px;
    margin-bottom: 20px;
    padding-left: 0;
}
.shifted-list li {
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--text-main);
}
.official-quote {
    background: #f8fafc;
    border-left: 4px solid var(--border-dark);
    padding: 15px 20px;
    margin: 15px 0 25px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Стили для судебных решений и аналитики */
.decision-table {
    margin: 20px 0;
    background: #fff;
    border: 1px solid var(--border-color);
}
.decision-table td {
    text-align: left;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    font-size: 14px;
}
.findings-list {
    margin-left: 20px;
    margin-bottom: 25px;
    list-style-type: square;
}
.findings-list li {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
}
.decision-result {
    background: #fdf2f2;
    border-left: 5px solid var(--primary-maroon);
    padding: 15px 20px;
    margin: 25px 0;
    font-size: 16px;
    color: var(--danger-red);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.analysis-block {
    background: #f8fafc;
    padding: 25px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-top: 30px;
}
/* Принудительная верстка карточек в одну вертикальную колонку */
.analysis-one-column-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
    width: 100%;
}
.analysis-one-column-grid .analysis-card {
    width: 100%;
    margin-bottom: 0;
}
/* ==========================================================================
   7. КОМПОНЕНТ ИИ-АНАЛИТИКА (ECO-BOT ИНТЕРФЕЙС)
   ========================================================================== */
.eco-bot-container {
    max-width: 1000px;
    margin: 10px auto;
    font-family: var(--font-ui);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.eco-title {
    color: var(--primary-maroon);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--primary-maroon);
    padding-bottom: 8px;
}
.eco-descr {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 25px;
    line-height: 1.5;
}
.chat-area {
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.input-group {
    display: flex;
    gap: 12px;
}
.user-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}
.user-input:focus {
    border-color: var(--primary-blue);
}
.send-btn {
    background: var(--primary-maroon);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    transition: background 0.2s;
}
.send-btn:hover {
    background: var(--dark-maroon);
}
.loading {
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 10px;
}
.source-tag {
    font-size: 12px;
    color: var(--primary-blue);
    display: block;
    margin-top: 12px;
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
}

/* Адаптивность для ИИ-интерфейса */
@media (max-width: 768px) {
    .eco-bot-container { padding: 15px; }
    .eco-title { font-size: 18px; }
    .input-group { flex-direction: column; }
    .send-btn { width: 100%; }
}
/* ==========================================================================
   8. КОМПОНЕНТ ТАЙМЛАЙНА (ХРОНОЛОГИЯ ИСТОРИИ)
   ========================================================================== */
.timeline {
    max-width: 900px;
    margin: 20px auto;
    background: var(--bg-card);
    padding: 10px 20px;
}
.timeline-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 30px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}
.timeline-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.timeline-item:first-child {
    padding-top: 0;
}
.timeline-year {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-blue);
}
/* Карточки экологических нарушений и уголовных дел подсвечиваются бордовым */
.timeline-item.warning {
    background: #fffdfd;
    border-left: 4px solid var(--primary-maroon);
    padding-left: 15px;
    margin: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.timeline-item.warning .timeline-year {
    color: var(--primary-maroon);
}
.timeline-content {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-main);
    text-align: justify;
}

/* Мобильная адаптация таймлайна */
@media (max-width: 600px) {
    .timeline-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 0;
    }
    .timeline-year {
        border-bottom: 2px solid var(--primary-blue);
        padding-bottom: 4px;
        display: inline-block;
    }
    .timeline-item.warning .timeline-year {
        border-bottom-color: var(--primary-maroon);
    }
}
/* ==========================================================================
   9. СТИЛИ СТРАНИЦЫ РАССЛЕДОВАНИЯ СЗЗ (ВИДЕОПЛЕЕР И ХРОНИКА)
   ========================================================================== */
/* Резиновый адаптивный контейнер для YouTube (Сохраняет пропорции 16:9) */
.yt-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Пропорция 16:9 */
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    margin: 20px auto;
    max-width: 800px; /* Ограничиваем максимальную ширину плеера на ПК */
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.yt-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Стили карт вертикальной хроники СЗЗ */
.ssz-timeline-vertical {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
    width: 100%;
}
.timeline-node-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.timeline-node-card.danger-node {
    border-left: 4px solid var(--primary-maroon);
    background: #fffdfd;
}
.timeline-node-card.danger-node h3 {
    color: var(--primary-maroon);
}
.node-date-badge {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.timeline-node-card.danger-node .node-date-badge {
    color: var(--primary-maroon);
}
.node-content-body h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}
.node-content-body p {
    font-size: 15.5px;
    line-height: 1.6;
    margin-bottom: 12px;
}
.node-content-body p:last-child {
    margin-bottom: 0;
}
/* ==========================================================================
   10. СТ СТИЛИ СТРАНИЦЫ КАРТ (MAP.PHP КОМПОНЕНТЫ)
   ========================================================================== */
/* Резиновый адаптивный контейнер для фрейма Google карт */
.media-responsive-container {
    position: relative;
    padding-bottom: 54%; /* Идеальное соотношение высоты и ширины для карт */
    height: 0;
    overflow: hidden;
    margin: 25px 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.media-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Оранжевые стильные разделители между картами */
.map-orange-divider {
    border: none;
    border-top: 2px dashed #f59e0b; /* Красивый янтарно-оранжевый пунктир */
    margin: 35px 0;
    opacity: 0.6;
}

/* Контейнеры архивных исторических карт */
.map-image-block {
    width: 100%;
    max-width: 900px;
    margin: 25px auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    background: #fff;
    padding: 6px;
}
.map-image-block img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Стилизация текстового сопровождения карт */
.map-page-content .poem {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-muted);
    background: var(--bg-alt);
    padding: 15px 20px;
    border-radius: var(--radius-sm);
    border-left: 4px solid #f59e0b;
    margin: 15px 0 30px 0;
}
/* ==========================================================================
   11. СТИЛИ СТРАНИЦЫ АНАЛИТИКИ МЕДИА (MEDIA.PHP КОМПОНЕНТЫ)
   ========================================================================== */
/* Контейнеры для аналитических карт и схем Генплана */
.media-image-block {
    width: 100%;
    max-width: 900px;
    margin: 30px auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    background: #fff;
    padding: 6px;
}
.media-image-block img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Резиновая обертка для таблицы регламентов градостроительства */
.media-table-responsive {
    width: 100%;
    overflow-x: auto;
    margin: 25px 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

/* Стилизация таблицы ПЗЗ */
.media-regulations-table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}
.media-regulations-table td {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    font-size: 14.5px;
    text-align: left;
    line-height: 1.5;
    color: var(--text-main);
}
/* Выделение строк заголовков групп ПЗЗ */
.media-regulations-table .table-group-row {
    background: var(--bg-alt);
}
.media-regulations-table .table-group-row td {
    font-size: 15px;
    color: var(--primary-maroon);
}
/* Первая колонка с номерами пунктов */
.media-regulations-table td:first-child {
    font-weight: bold;
    width: 70px;
    color: var(--text-muted);
}
/* Последняя колонка с кодами зон */
.media-regulations-table td:last-child {
    font-weight: 600;
    width: 110px;
    color: var(--primary-blue);
    text-align: center;
}

/* Оформление блоков текста регламентов */
.rules-text-block {
    background: var(--bg-alt);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-size: 15px;
}
/* ==========================================================================
   12. СТИЛИ НОВОСТНОГО АРХИВА И ГАРМОШКИ (NEWS.PHP)
   ========================================================================== */
.news-container {
    max-width: 900px;
    margin: 10px auto;
    background: var(--bg-card);
    padding: 10px 20px;
}
.news-item {
    border-bottom: 1px solid var(--border-color);
    padding: 24px 0;
}
.news-item:last-child {
    border-bottom: none;
}
.news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.news-item-title-container h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    transition: color 0.2s;
}
.news-item-header:hover .news-item-title-container h3 {
    color: var(--accent-red);
}
.news-date {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: bold;
}
.news-arrow {
    font-size: 13px;
    color: var(--border-dark);
    transition: transform 0.2s ease, color 0.2s;
    padding-left: 15px;
}
.news-item-header:hover .news-arrow {
    color: var(--accent-red);
}

/* Логика отображения контента гармошки */
.news-body-wrapper {
    padding-top: 12px;
}
.news-full-zone {
    display: none;
}
.news-preview-zone {
    display: block;
}
.news-preview-zone p, .news-full-content p {
    margin: 0 0 12px 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-main);
    text-align: justify;
}
.read-more-accent {
    color: var(--primary-blue);
    font-weight: bold;
    display: inline-block;
    margin-top: 6px;
    cursor: pointer;
    transition: color 0.2s;
}
.read-more-accent:hover {
    color: var(--accent-red);
}

/* Стили для адаптивных iframe видеороликов YouTube внутри полного текста */
.news-full-content iframe {
    max-width: 100%;
    margin: 15px 0;
    border-radius: var(--radius-sm);
}

/* Состояние когда новость РАСКРЫТА */
.news-item.is-news-open .news-full-zone {
    display: block;
}
.news-item.is-news-open .news-preview-zone {
    display: none;
}

/* Стили кнопки "Показать еще" AJAX пагинации */
.load-more-container {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 20px;
}
.btn-load-more {
    background-color: var(--primary-blue);
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: background-color 0.2s, transform 0.1s;
}
.btn-load-more:hover {
    background-color: var(--hover-blue);
}
.btn-load-more:disabled {
    background-color: var(--border-dark);
    cursor: not-allowed;
    box-shadow: none;
}
/* ==========================================================================
   13. СТИЛИ ГАЛЕРЕИ ФОТО И ВИДЕОМАТЕРИАЛОВ (PHOTO.PHP КОМПОНЕНТЫ)
   ========================================================================== */
.media-page-container {
    max-width: 900px;
    margin: 10px auto;
}
.media-view-header {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 25px 0;
    margin-bottom: 25px;
}
.media-block-title {
    font-size: 22px;
    color: var(--text-main);
    border-left: 5px solid var(--primary-maroon);
    padding-left: 14px;
    margin-bottom: 25px;
    font-weight: bold;
}

/* Сетка карточек фотоанализа источников шума (В одну колонку) */
.photo-one-column-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}
.media-analysis-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}
.media-image-wrapper {
    width: 100%;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    padding: 6px;
}
.media-image-wrapper.double-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.media-img-element {
    width: 100%;
    height: auto;
    max-height: 480px;
    display: block;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.media-text-wrapper {
    padding: 25px;
}
.media-text-wrapper h3 {
    font-size: 19px;
    color: var(--primary-blue);
    margin-bottom: 12px;
    font-weight: 700;
}
.media-text-wrapper p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 15px;
    text-align: justify;
}
.media-counter-evidence {
    background: #fdf2f2;
    border-left: 4px solid var(--primary-maroon);
    padding: 15px 20px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-main);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Двухколоночная сетка видеогалереи YouTube */
.video-grid-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 25px;
    margin-top: 20px;
}
.video-yt-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}
.responsive-video-container {
    position: relative;
    padding-bottom: 56.25%; /* Пропорции 16:9 */
    height: 0;
    overflow: hidden;
}
.responsive-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.yt-card-info {
    padding: 15px 20px;
    background: var(--bg-alt);
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.yt-card-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    margin: 0;
}

/* Адаптивность для мобильных экранов */
@media (max-width: 768px) {
    .video-grid-gallery {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .media-image-wrapper.double-images {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .media-text-wrapper {
        padding: 15px;
    }
}
/* ==========================================================================
   14. СТИЛИ ПОЭТИЧЕСКИХ СТРАНИЦ И САМОДЕЯТЕЛЬНОСТИ (POEM.PHP)
   ========================================================================== */
.poem-page-container {
    max-width: 800px;
    margin: 10px auto;
    background: var(--bg-card);
}
.poem-divider {
    border: none;
    border-top: 3px solid var(--primary-maroon);
    margin: 15px 0 30px 0;
}
.poem-divider-thin {
    border: none;
    border-top: 1px dashed var(--border-dark);
    margin: 40px 0 25px 0;
}
.poem-section-wrapper h2 {
    font-size: 24px;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 35px;
}

/* Оформление глав и строф */
.poem-chapter {
    margin-bottom: 40px;
}
.poem-chapter h3 {
    font-size: 18px;
    color: var(--primary-maroon);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.poem-stanza {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
    font-family: Georgia, serif; /* Традиционный литературный шрифт для стихов */
    font-style: italic;
    margin-bottom: 24px;
    padding-left: 30px;
    border-left: 3px solid var(--border-color);
}
.poem-stanza-ps {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
    font-family: Georgia, serif;
    font-style: italic;
    margin-bottom: 24px;
    padding: 15px 20px;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-blue);
}

/* Сноски и примечания внизу */
.poem-notes-block {
    background: var(--bg-alt);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}
.poem-notes-block p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.poem-notes-block p:last-child {
    margin-bottom: 0;
}

/* Блок источника */
.poem-source-footer {
    font-size: 14px;
    color: var(--text-muted);
    text-align: right;
}
.poem-source-footer a {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Мобильная адаптация стихов */
@media (max-width: 600px) {
    .poem-stanza {
        padding-left: 15px;
        font-size: 15px;
    }
    .poem-stanza-ps {
        font-size: 15px;
    }
    .poem-section-wrapper h2 {
        font-size: 20px;
    }
}
/* ==========================================================================
   15. СТИЛИ СТРАНИЦЫ ПРЕСС-ПАКЕТА (PRESS.PHP КОМПОНЕНТЫ)
   ========================================================================== */
.press-page-container {
    max-width: 900px;
    margin: 10px auto;
}
.press-section h2 {
    font-size: 22px;
    color: var(--text-main);
    margin-bottom: 18px;
    font-weight: bold;
}
.press-section h4 {
    font-size: 16px;
    color: var(--primary-maroon);
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Красивый нумерованный список официальных документов */
.press-documents-list {
    margin-left: 25px;
    margin-top: 15px;
}
.press-documents-list > li {
    margin-bottom: 18px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--text-main);
    padding-left: 8px;
}
.press-documents-list > li > a {
    font-weight: bold;
    color: var(--primary-blue);
    text-decoration: underline;
}
.press-documents-list > li > a:hover {
    color: var(--accent-red);
}
.doc-annotation {
    font-size: 14.5px;
    color: var(--text-muted);
    display: inline-block;
    margin-top: 3px;
}
.doc-sub-links {
    margin-top: 6px;
}
.doc-sub-links a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-blue);
    background: var(--bg-alt);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.doc-sub-links a:hover {
    background: var(--primary-maroon);
    color: #fff !important;
    border-color: var(--primary-maroon);
}

/* Почтовый блок */
.mail-box-section .official-quote {
    background: #f0fdf4; /* Легкий экологичный зеленоватый оттенок для блока контактов */
    border-left-color: #22c55e;
}
/* ==========================================================================
   16. СТИЛИ ИНТЕРФЕЙСА ПРОСМОТРА СКАheaderНОВ И PDF (SHOW_DOC.PHP)
   ========================================================================== */
.doc-popup-body {
    background-color: var(--bg-site);
    margin: 0;
    padding: 0;
}
.doc-wrapper {
    max-width: 1000px; /* Идеальная ширина для чтения бланков документов */
    margin: 20px auto;
    background: var(--bg-card);
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.doc-view-header h1 {
    font-size: 22px;
    color: var(--primary-maroon);
    border-bottom: 2px solid var(--primary-maroon);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: bold;
}
.doc-meta-info {
    background: var(--bg-alt);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.doc-meta-info p {
    margin: 0;
    font-size: 15px;
    color: var(--text-main);
}
.doc-meta-info p strong {
    color: var(--text-muted);
}
/* Стилизация важного красного комментария к документу */
.doc-alert-comment {
    color: var(--danger-red) !important;
    font-weight: bold;
    background: #fdf2f2;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--danger-red);
    display: inline-block;
}

/* Резиновый адаптивный контейнер самого скана или PDF файла */
.doc-image-scan {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #f8fafc;
    padding: 10px;
}
.doc-image-scan img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.doc-image-scan object {
    width: 100%;
    min-height: 800px; /* Оптимальная стартовая высота для прокрутки PDF на ПК */
    border: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    .doc-wrapper { margin: 10px; padding: 15px; }
    .doc-view-header h1 { font-size: 18px; }
    .doc-meta-info { padding: 12px; gap: 6px; }
    .doc-image-scan object { min-height: 500px; }
}
/* ==========================================================================
   17. СТИЛИ РЕЕСТРА ПИСЕМ И ДИНАМИЧЕСКИХ ФИЛЬТРОВ (SHOW_DOCS.PHP)
   ========================================================================== */
.docs-page-container {
    max-width: 950px;
    margin: 10px auto;
}
/* Адаптивная панель фильтров */
.docs-filter-container {
    background: var(--bg-alt);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}
.docs-filter-container form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-muted);
}
.filter-select {
    padding: 6px 12px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    background-color: #fff;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

/* Одноколоночные карточки архивных писем */
.doc-row-card-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s;
}
.doc-row-card-item:hover {
    border-color: var(--border-dark);
}
.doc-card-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}
.d-badge-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-muted);
    background: var(--bg-alt);
    padding: 2px 8px;
    border-radius: 20px;
}
.d-info-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}
.d-org-label {
    font-size: 12px;
    font-weight: bold;
    background: var(--bg-site);
    color: var(--text-main);
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}
.d-person-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}
.d-person-link:hover {
    color: var(--primary-maroon);
    text-decoration: underline;
}
.d-file-group {
    display: flex;
    align-items: center;
    gap: 15px;
}
.d-doc-link-btn {
    font-size: 14px;
    font-weight: bold;
    color: #fff !important;
    background: var(--primary-blue);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.d-doc-link-btn:hover {
    background: var(--hover-blue);
}
.d-card-date {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Оформление вложенных примечаний модератора */
.doc-card-comment-inline {
    background: #fff5f5;
    border-left: 3px solid var(--primary-maroon);
    padding: 8px 12px;
    font-size: 13.5px;
    color: #444;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Окно приветствия при первом заходе */
.docs-welcome-alert {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-alt);
    border: 1px dashed var(--border-dark);
    border-radius: var(--radius-md);
}

/* Мобильная адаптация реестра */
@media (max-width: 768px) {
    .docs-filter-container form { flex-direction: column; align-items: stretch; }
    .filter-group { justify-content: space-between; }
    .doc-card-main-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .d-info-group { width: 100%; }
    .d-file-group { width: 100%; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 10px; }
}
/* ==========================================================================
   18. СТИЛИ ПРОФИЛЯ ВЕДОМСТВА И КАРТОЧЕК ЧИНОВНИКОВ (SHOW_ORG.PHP)
   ========================================================================== */
.org-profile-container {
    max-width: 900px;
    margin: 10px auto;
}
.org-main-header h1 {
    font-size: 26px;
    color: var(--text-main);
    border-left: 5px solid var(--primary-maroon);
    padding-left: 15px;
    margin-bottom: 30px;
    font-weight: 800;
    line-height: 1.2;
}
.org-external-link {
    color: var(--text-main);
    text-decoration: underline;
    transition: color 0.2s;
}
.org-external-link:hover {
    color: var(--primary-blue);
}

/* Одноколоночные карточки должностных лиц */
.org-staff-row-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: border-color 0.2s;
}
.org-staff-row-card:hover {
    border-color: var(--border-dark);
}
.org-staff-avatar-zone {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
.org-staff-num-badge {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    background: var(--bg-site);
    padding: 3px 8px;
    border-radius: 20px;
}
.org-staff-photo-holder {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Идеальный круглый аватар чиновника */
    overflow: hidden;
    background-color: var(--bg-alt);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.org-staff-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.org-staff-placeholder-svg {
    width: 32px;
    height: 32px;
    display: block;
}

/* Информационное текстовое поле */
.org-staff-text-zone {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}
.org-staff-name-link {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-blue);
}
.org-staff-name-link:hover {
    color: var(--accent-red);
    text-decoration: underline;
}
.org-staff-job-label {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Заглушка пустого списка */
.org-staff-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
    background: var(--bg-alt);
    border: 1px dashed var(--border-dark);
    border-radius: var(--radius-md);
    font-size: 14px;
}

/* Мобильная адаптация карточек */
@media (max-width: 600px) {
    .org-main-header h1 { font-size: 20px; }
    .org-staff-row-card { flex-direction: column; align-items: flex-start; gap: 15px; padding: 15px; }
    .org-staff-avatar-zone { width: 100%; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
}
/* ==========================================================================
   19. СТИЛИ РЕКУРСИВНОГО ДЕРЕВА ВЕДОМСТВ И ОРГАНИЗАЦИЙ (SHOW_ORGS.PHP)
   ========================================================================== */
.orgs-tree-page-container {
    max-width: 900px;
    margin: 10px auto;
}
.orgs-tree-container {
    background: var(--bg-card);
    margin-top: 25px;
}

/* Стилизация списков разных уровней вложенности */
.orgs-list-level {
    list-style: none;
    padding-left: 0;
}
/* Сдвигаем лесенкой каждый следующий уровень дерева */
.orgs-list-level.level-2,
.orgs-list-level.level-3,
.orgs-list-level.level-4 {
    padding-left: 25px;
    border-left: 1px dashed var(--border-dark);
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Элементы дерева */
.orgs-item {
    margin-bottom: 10px;
}
.orgs-row {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: var(--bg-alt);
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.orgs-row:hover {
    background: #f1f5f9;
    border-color: var(--border-dark);
}
.orgs-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}
.orgs-link:hover {
    color: var(--primary-blue);
}
.orgs-icon {
    font-size: 14px;
    margin-right: 4px;
}

/* Внешняя ссылка на сайт ведомства */
.orgs-site-link {
    font-size: 12px;
    font-weight: bold;
    color: var(--primary-blue) !important;
    background: #fff;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}
.orgs-site-link:hover {
    background: var(--primary-blue);
    color: #fff !important;
    border-color: var(--primary-blue);
}

/* Финальный информер-плашка количества ведомств */
.orgs-total-badge {
    text-align: center;
    margin-top: 35px;
    padding: 15px 20px;
    background: #f0fdf4; /* Легкий зеленоватый оттенок */
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    color: #166534;
    font-size: 15px;
}
.orgs-total-badge strong {
    font-size: 18px;
    color: #14532d;
}

/* Мобильная адаптация дерева */
@media (max-width: 600px) {
    .orgs-list-level.level-2,
    .orgs-list-level.level-3,
    .orgs-list-level.level-4 { padding-left: 15px; }
    .orgs-row { width: 100%; }
}
/* ==========================================================================
   20. СТИЛИ ДОСЬЕ И ЛИЧНОЙ КАРТОЧКИ ЧИНОВНИКА (SHOW_PERSON.PHP)
   ========================================================================== */
.person-profile-container {
    max-width: 1000px;
    margin: 10px auto;
}
.profile-meta {
    margin-bottom: 15px;
    font-size: 14.5px;
    line-height: 1.4;
}
.avatar-css-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
}
.avatar-css-placeholder svg {
    width: 120px;
    height: 120px;
    opacity: 0.5;
}

/* Оформление списков связанных писем и протоколов */
.section-title {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 35px 0 15px 0;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 6px;
    font-weight: bold;
}
.key-docs-list, .other-docs-list {
    margin: 0;
    padding-left: 20px;
}
.key-doc-item {
    margin-bottom: 20px;
}
.doc-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 10px;
}
.doc-title, .btn-read-doc, .doc-link:hover {
    color: var(--primary-blue);
    text-decoration: underline;
    font-weight: bold;
}
.doc-title {
    font-size: 15.5px;
}
.doc-date {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}
.doc-description {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 8px 0;
    line-height: 1.5;
    text-align: justify;
}
.btn-read-doc {
    display: inline-block;
    font-size: 13.5px;
    text-decoration: none;
}
.btn-read-doc:hover {
    color: var(--accent-red);
}
.other-doc-item {
    margin-bottom: 10px;
}
.doc-link {
    font-size: 14.5px;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.15s ease;
}
.doc-link:hover {
    color: var(--primary-maroon);
    text-decoration: underline;
}
.doc-link-comment {
    color: var(--text-muted);
    font-style: italic;
}
/* ==========================================================================
   21. СТИЛИ АЛФАВИТНОГО РЕЕСТРА ДОЛЖНОСТНЫХ ЛИЦ (SHOW_PERSONS.PHP)
   ========================================================================== */
.persons-list-container {
    max-width: 900px;
    margin: 10px auto;
}
/* Панель алфавитных букв */
.alphabet-filter-panel {
    background: var(--bg-alt);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.alphabet-letters-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.alphabet-letter-link {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-blue);
    background: #fff;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    min-width: 32px;
    text-align: center;
}
.alphabet-letter-link:hover {
    background: var(--primary-blue);
    color: #fff !important;
    border-color: var(--primary-blue);
}
/* Подсветка активной выбранной буквы */
.alphabet-letter-link.active-letter {
    background: var(--primary-maroon);
    color: #fff !important;
    border-color: var(--primary-maroon);
}

/* Счетчик общего количества справа */
.alphabet-total-badge {
    font-size: 13.5px;
    font-weight: bold;
    color: var(--text-muted);
    background: var(--bg-site);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}
.alphabet-total-badge span {
    color: var(--primary-maroon);
    font-size: 15px;
    font-weight: 800;
}

/* Приглашение выбрать букву фамилии */
.alphabet-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-alt);
    border: 1px dashed var(--border-dark);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 14.5px;
    max-width: 600px;
    margin: 30px auto;
}

/* Адаптивность панели для мобильных экранов */
@media (max-width: 650px) {
    .alphabet-filter-panel { flex-direction: column; align-items: stretch; padding: 12px; }
    .alphabet-total-badge { text-align: center; }
    .alphabet-letter-link { padding: 4px 8px; min-width: 28px; font-size: 13px; }
}
/* ==========================================================================
   22. СТИЛИ СТРАНИЦЫ СТАТИСТИКИ И ГРАФИКОВ (STAT.PHP КОМПОНЕНТЫ)
   ========================================================================== */
.stat-page-container {
    max-width: 950px;
    margin: 10px auto;
}
.stat-page-header {
    margin-bottom: 25px;
}
.stat-src-link {
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-blue);
    text-transform: uppercase;
    text-decoration: underline;
}
.stat-src-link:hover {
    color: var(--accent-red);
}
.stat-section-title {
    font-size: 18px;
    color: var(--text-main);
    border-left: 5px solid var(--primary-maroon);
    padding-left: 12px;
    margin: 35px 0 20px 0;
    font-weight: bold;
}

/* Стилизация таблицы использования реактивных стендов */
.stat-regulations-table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}
.stat-regulations-table th {
    font-size: 11px;
    padding: 10px 4px;
    border: 1px solid var(--border-dark);
    font-weight: bold;
    background-color: var(--bg-alt);
    color: var(--text-main);
}
.stat-regulations-table td {
    padding: 10px 4px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    text-align: center;
    color: var(--text-main);
}
/* Оформление пустых технических колонок-заглушек в таблице */
.stat-regulations-table .table-blank-cell {
    background-color: #fff !important;
    border: none !important;
    width: 25px;
}
.stat-count-row td {
    font-weight: 600;
}
.stat-percent-row td {
    color: var(--primary-blue);
    font-weight: bold;
}

/* Контейнеры графиков библиотек SimplePlot */
.stat-plot-container {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 15px 0 30px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    overflow-x: auto; /* Защита от переполнения если графики очень широкие */
}
/* ==========================================================================
   23. СТИЛИ ИНТЕРФЕЙСА ЖУРНАЛА ВИДЕОФИКСАЦИИ (VIDEO.PHP КОМПОНЕНТЫ)
   ========================================================================== */
.video-page-content {
    max-width: 1000px;
    margin: 10px auto;
}
.video-main-title {
    font-size: 24px;
    color: var(--text-main);
    line-height: 1.3;
    margin-bottom: 25px;
    font-weight: 800;
}
.video-main-title span {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Стилизация панели мультифильтрации */
.video-filter-panel {
    background: var(--bg-alt);
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.video-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end; /* Кнопки будут выровнены по нижней линии селекторов */
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Аккуратный отступ между текстом и списком */
}
.filter-mini-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0; /* Сброс старого отступа */
    display: block;
}
.filter-select {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
    font-size: 13px;
    background-color: #fff;
    min-width: 130px; /* Чтобы списки имели одинаковую аккуратную ширину */
}
.filter-btn-group {
    display: flex;
    gap: 12px;
    margin-left: auto;
    padding-bottom: 1px; /* Тонкая подгонка под нижний край селектов */
}
.video-submit-btn {
    background: var(--primary-blue);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.video-submit-btn:hover { background: var(--hover-blue); }
.video-reset-btn {
    background: #fff;
    color: var(--text-main);
    border: 1px solid var(--border-dark);
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-weight: bold;
    font-size: 13px;
    transition: background 0.2s;
}
.video-reset-btn:hover { background: var(--bg-site); }

/* Заглушка пустого выбора фильтров */
.video-empty-state {
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border: 1px dashed var(--border-dark);
    border-radius: var(--radius-lg);
}
.video-empty-state p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Резиновая обертка для огромной адаптивной таблицы логов */
.video-table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.video-data-table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}
.video-data-table th {
    font-size: 11px;
    padding: 10px 4px;
    border: 1px solid var(--border-color) !important;
    font-weight: bold;
    text-align: center;
    color: var(--text-main);
}
.video-data-table td {
    padding: 8px 4px;
    border: 1px solid var(--border-color) !important;
    font-size: 12px;
    text-align: center;
    color: var(--text-main);
}
.table-primary-header { background-color: var(--bg-alt); }
.table-sub-header { background-color: #fafafa; }

/* Подсветка строк критических перегрузок (3 и более стенда вместе) */
.table-danger-alert-row {
    background-color: #fff5f5 !important;
}
.table-action-cell {
    padding: 6px 4px !important;
}
.video-yt-link-btn {
    font-weight: bold;
    color: var(--primary-blue);
    font-size: 11.5px;
}
.video-yt-link-btn:hover {
    color: var(--accent-red);
    text-decoration: underline;
}
.table-empty-row {
    padding: 25px !important;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

/* Мобильная адаптация фильтра */
@media (max-width: 768px) {
    .video-filter-form { flex-direction: column; align-items: stretch; }
    .filter-group { width: 100%; }
    .filter-select { width: 100%; }
    .filter-btn-group { width: 100%; justify-content: space-between; margin-top: 10px; }
    .video-submit-btn, .video-reset-btn { width: 48%; text-align: center; }
}
/* ==========================================================================
   24. СТИЛИ ГЛАВНОГО ПРИВЕТСТВЕННОГО ЛЕНДИНГА (INDEX.PHP СТРУКТУРА)
   ========================================================================== */
.hero-block {
    position: relative;
    width: 100%;
    background-color: #535353; /* Чистый плотный серый цвет сразу от бордовой линии */
    overflow: hidden;
    margin: 0 !important; 
    padding: 0 !important;
}
.hero-overlay {
    position: relative;
    z-index: 5;
    max-width: 1140px;
    margin: 0 auto;
    padding: 30px 20px 50px 20px !important; 
    box-sizing: border-box;
}
.hero-overlay h1 {
    margin-top: 0 !important;
    margin-bottom: 15px; 
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
    font-weight: 800;
}
.hero-lead {
    font-size: 19px;
    line-height: 1.5;
    max-width: 900px;
    margin-bottom: 30px;
}

/* ИСПРАВЛЕНО: Возвращаем компактную сетку в 4 колонки на ПК */
.hero-facts {
    display: grid;
    /* Автоматически распределяет блоки по колонкам шириной от 180px */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    max-width: 1140px; /* Растягиваем сетку во всю ширину текстового контента */
    width: 100%;
    margin-top: 30px;
}

/* Карточки становятся аккуратными блоками с центрированием текста */
.hero-facts .fact-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 15px;
    display: flex;
    flex-direction: column; /* Цифра строго НАД текстом */
    align-items: center;    /* Центрируем содержимое по горизонтали */
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.hero-facts .fact-number {
    font-size: 22px; /* Чуть уменьшили размер для компактности */
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    min-width: auto; /* Сброс старого ограничения */
}

.hero-facts .fact-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}


/* ИСПРАВЛЕНО: Заменяем одну колонку на гибкую адаптивную сетку для главной страницы */
.content-block .analysis-one-column-grid {
    display: grid;
    /* Автоматически создает 2-3 колонки на ПК (минимум 280px на карточку) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 25px;
}

/* Оформление самих карточек документов на главной странице */
.content-block .doc-card {
    display: flex;
    flex-direction: column;
    background: #fafafa; /* Чистый светлый фон */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    height: 100%; /* Чтобы все карточки в одном ряду были одинаковой высоты */
}

.content-block .doc-card:hover {
    transform: translateY(-3px); /* Легкое приподнятие при наведении */
    background: #ffffff;
    border-color: var(--primary-maroon);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}

.content-block .doc-card h3 {
    margin-top: 0;
    font-size: 16px;
    color: var(--primary-maroon);
    margin-bottom: 10px;
    font-weight: 700;
}

.content-block .doc-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-main);
    text-align: left;
}


/* Адаптивность блока HERO на мобильных телефонах */
@media (max-width: 600px) {
    .hero-overlay h1 { font-size: 20px; }
    .hero-lead { font-size: 16px; }
    .hero-facts .fact-card { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hero-facts .fact-number { min-width: auto; }
}