/* ==========================================================================
1. ПЛЕЕР И НАВИГАЦИЯ ШАПКИ
========================================================================== */
.mc-player-controls {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: var(--bg-elements);
 border: 1px solid var(--border-color);
 padding: 4px 10px;
 border-radius: 30px;
 transition: all 0.3s ease;
}
.mc-player-controls:hover {
 border-color: var(--accent-color);
 box-shadow: 0 0 15px rgba(255, 0, 85, 0.15);
}
.mc-player-controls .social-btn {
 border: none !important;
 background: transparent !important;
 padding: 4px 8px !important;
}
.audio-nav-btn {
 cursor: pointer;
 font-size: 13px;
 transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.audio-nav-btn:hover {
 transform: scale(1.3);
}

/* ==========================================================================
2. СИСТЕМА ТЕМ ОФОРМЛЕНИЯ
========================================================================== */
.theme-cyber-dark, body.theme-cyber-dark {
 --bg-site: #06060a;
 --bg-style: radial-gradient(circle at top, #16162b 0%, #090912 50%, #06060a 100%);
 --bg-header: linear-gradient(135deg, #14141f 0%, #0d0d16 100%);
 --bg-nav: #0b0b11;
 --accent-color: #ff0055;
 --gold-color: #f5af19;
 --text-color: #ffffff;
 --text-muted: #8a8a9e;
 --border-color: rgba(255, 255, 255, 0.08);
 --bg-elements: rgba(255, 255, 255, 0.04);
 --bg-elements-hover: rgba(255, 255, 255, 0.09);
 --bg-card: #14141f;
 --btn-grad: linear-gradient(135deg, #ff0055 0%, #b3003b 100%);
 --border-radius: 10px;
 --btn-radius: 8px;
}

.theme-cyber-light, body.theme-cyber-light {
 --bg-site: #eef1f6;
 --bg-style: radial-gradient(circle at top, #ffffff 0%, #e4e9f2 70%, #dbe3f0 100%);
 --bg-header: linear-gradient(135deg, #f5f5fa 0%, #eef0f6 100%);
 --bg-nav: #ffffff;
 --accent-color: #ff0055;
 --gold-color: #e65c00;
 --text-color: #1a1a24;
 --text-muted: #5a5a6e;
 --border-color: rgba(0, 0, 0, 0.08);
 --bg-elements: rgba(0, 0, 0, 0.04);
 --bg-elements-hover: rgba(0, 0, 0, 0.07);
 --bg-card: #ffffff;
 --btn-grad: linear-gradient(135deg, #ff0055, #cc0044);
 --border-radius: 10px;
 --btn-radius: 8px;
}

.theme-red-neon, body.theme-red-neon {
 --bg-site: #080808;
 --bg-style: radial-gradient(circle at top, #2d0a0a 0%, #140b0b 35%, #080808 80%);
 --bg-header: #0d0d0d;
 --bg-nav: #111111;
 --accent-color: #ff2b2b;
 --gold-color: #ff4545;
 --text-color: #e8e8e8;
 --text-muted: #9d9d9d;
 --border-color: rgba(255, 43, 43, 0.25);
 --bg-elements: #161616;
 --bg-elements-hover: rgba(255, 43, 43, 0.15);
 --bg-card: #1a1a1a;
 --btn-grad: linear-gradient(135deg, #ff2b2b, #b11111);
 --border-radius: 10px;
 --btn-radius: 8px;
}

.theme-matrix, body.theme-matrix {
 --bg-site: #020202;
 --bg-style: linear-gradient(rgba(0, 20, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%), radial-gradient(circle at center, #051a05 0%, #010501 80%);
 --bg-header: #040d04;
 --bg-nav: #020602;
 --accent-color: #00ff66;
 --gold-color: #00ffcc;
 --text-color: #d0ffd0;
 --text-muted: #4e804e;
 --border-color: rgba(0, 255, 102, 0.25);
 --bg-elements: #030803;
 --bg-elements-hover: rgba(0, 255, 102, 0.18);
 --bg-card: #061706;
 --btn-grad: linear-gradient(135deg, #00ff66, #008833);
 --border-radius: 4px;
 --btn-radius: 2px;
}

.theme-minecraft, body.theme-minecraft {
 --bg-site: #2c2c2c;
 --bg-style: linear-gradient(45deg, #1e1e1e 25%, transparent 25%), linear-gradient(-45deg, #1e1e1e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1e1e1e 75%), linear-gradient(-45deg, transparent 75%, #1e1e1e 75%);
 --bg-header: #4c4c4c;
 --bg-nav: #3c3c3c;
 --accent-color: #55ff55;
 --gold-color: #ffaa00;
 --text-color: #ffffff;
 --text-muted: #aaaaaa;
 --border-color: #2c2c2c;
 --bg-elements: #8d8d8d;
 --bg-elements-hover: #adadad;
 --bg-card: #2e2e2e;
 --btn-grad: #7c7c7c;
 --border-radius: 0px;
 --btn-radius: 0px;
}

.theme-sixseven, body.theme-sixseven {
 --bg-site: #060b13;
 --bg-style: radial-gradient(circle at top, #0f2038 0%, #060b13 70%);
 --bg-header: #0c1524;
 --bg-nav: #111e33;
 --accent-color: #00bfff;
 --gold-color: #33d1ff;
 --text-color: #e2f1ff;
 --text-muted: #6f95c2;
 --border-color: #1c457d;
 --bg-elements: #162640;
 --bg-elements-hover: #1d3357;
 --bg-card: #0c1524;
 --btn-grad: linear-gradient(135deg, #00bfff 0%, #0077ff 100%);
 --border-radius: 10px;
 --btn-radius: 8px;
}

.theme-dragon, body.theme-dragon {
 --bg-site: #0f0a0a;
 --bg-style: radial-gradient(circle at top, #2b1111 0%, #0f0a0a 80%);
 --bg-header: #171010;
 --bg-nav: #241414;
 --accent-color: #ff2e2e;
 --gold-color: #ff9900;
 --text-color: #fcebeb;
 --text-muted: #a67c7c;
 --border-color: #4a2323;
 --bg-elements: #331a1a;
 --bg-elements-hover: #4d2222;
 --bg-card: #171010;
 --btn-grad: linear-gradient(135deg, #ff2e2e 0%, #990000 100%);
 --border-radius: 10px;
 --btn-radius: 6px;
}

.theme-tokyo, body.theme-tokyo {
 --bg-site: #1a1b26;
 --bg-style: radial-gradient(circle at top, #24283b 0%, #1a1b26 80%);
 --bg-header: #202231;
 --bg-nav: #24283b;
 --accent-color: #bb9af3;
 --gold-color: #ff9e64;
 --text-color: #a9b1d6;
 --text-muted: #565f89;
 --border-color: #414868;
 --bg-elements: #2f354f;
 --bg-elements-hover: #3b4261;
 --bg-card: #202231;
 --btn-grad: linear-gradient(135deg, #bb9af3 0%, #7aa2f7 100%);
 --border-radius: 10px;
 --btn-radius: 8px;
}

.theme-marshmallow, body.theme-marshmallow {
 --bg-site: #f4f5f9;
 --bg-style: radial-gradient(circle at top, #ffffff 0%, #f4f5f9 100%);
 --bg-header: #ebeff5;
 --bg-nav: #ebeff5;
 --accent-color: #ff76a3;
 --gold-color: #f39c12;
 --text-color: #2c3e50;
 --text-muted: #7f8c8d;
 --border-color: #cfe0f0;
 --bg-elements: #ffffff;
 --bg-elements-hover: #e1e7f0;
 --bg-card: #ffffff;
 --btn-grad: linear-gradient(135deg, #ff76a3 0%, #b18eff 100%);
 --border-radius: 10px;
 --btn-radius: 8px;
}

/* ==========================================================================
3. ОСНОВНЫЕ НАСТРОЙКИ СТРАНИЦЫ И ШАПКИ
========================================================================== */
#site-logo { position: relative; }
.mc-splash-text {
 color: #ffff55;
 font-family: monospace;
 font-size: 12px;
 font-weight: bold;
 position: absolute;
 bottom: -12px;
 right: 0;
 transform: rotate(-10deg);
 text-shadow: 1px 1px #3f3f00;
 animation: splashPulse 0.5s infinite alternate;
 pointer-events: none;
}
@keyframes splashPulse {
 from { transform: rotate(-10deg) scale(1); }
 to { transform: rotate(-10deg) scale(1.08); }
}

body.theme-minecraft { background-size: 32px 32px !important; image-rendering: pixelated; }

html, body { 
 background: var(--bg-style) !important; 
 background-color: var(--bg-site) !important; 
 color: var(--text-color) !important; 
 transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease; 
 position: relative; 
}

.header-block { 
 background: var(--bg-header) !important; 
 padding: 16px 0; 
 border-bottom: 1px solid var(--border-color); 
 position: relative; 
 z-index: 100; 
}

.header-block .wrapper { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 max-width: 1400px; 
 margin: 0 auto; 
 padding: 0 20px; 
}

.head-l { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.header-block .site-n a { 
 background: linear-gradient(45deg, #ffe066, var(--gold-color), #e65c00) !important; 
 -webkit-background-clip: text !important; 
 -webkit-text-fill-color: transparent !important; 
 font-size: 32px !important; 
 font-weight: 900 !important; 
 text-transform: uppercase !important; 
 letter-spacing: 3px !important; 
 text-decoration: none !important; 
 display: inline-block !important; 
 transition: transform 0.2s ease;
}
.header-block .site-n a:hover {
 transform: scale(1.03);
}

.header-block .site-d { 
 display: block !important;
 margin-left: 2px !important;
 margin-top: -4px !important;
 color: var(--text-muted) !important; 
 font-size: 11px !important; 
 font-weight: 700 !important; 
 text-transform: lowercase !important; 
 letter-spacing: 2px !important; 
}

.social-btn {
 text-decoration: none !important; 
 font-size: 12px; 
 font-weight: 700;
 color: var(--text-color); 
 background: var(--bg-elements);
 border: 1px solid var(--border-color); 
 padding: 6px 14px; 
 border-radius: 30px;
 cursor: pointer; 
 display: inline-flex; 
 align-items: center; 
 gap: 6px;
 transition: all 0.25s ease;
}
.social-btn:hover { 
 border-color: var(--accent-color); 
 background: var(--bg-elements-hover); 
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.head-top-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.header-block .date-w { 
 color: var(--text-muted); 
 background: var(--bg-elements); 
 border: 1px solid var(--border-color); 
 padding: 6px 14px; 
 border-radius: 30px; 
 display: flex; 
 align-items: center; 
 font-size: 12px;
}

.head-u { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.theme-selector-wrapper { position: relative !important; display: inline-block !important; z-index: 999999 !important; }
.theme-select-btn { 
 background: var(--bg-elements); 
 border: 1px solid var(--border-color); 
 color: var(--text-color); 
 font-size: 12px; 
 font-weight: 700; 
 cursor: pointer; 
 padding: 6px 14px; 
 border-radius: 30px; 
 display: inline-flex; 
 align-items: center; 
 gap: 6px;
 transition: all 0.25s ease;
}
.theme-select-btn:hover {
 border-color: var(--accent-color);
 background: var(--bg-elements-hover);
}

.theme-dropdown-menu { 
 position: absolute !important; 
 top: calc(100% + 8px) !important; 
 right: 0 !important; 
 background: var(--bg-nav) !important; 
 border: 1px solid var(--border-color) !important; 
 border-radius: var(--border-radius) !important; 
 box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important; 
 padding: 6px 0 !important; 
 min-width: 200px !important; 
 z-index: 999999 !important; 
 opacity: 0; 
 visibility: hidden; 
 transform: translateY(-8px); 
 transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-dropdown-menu.active { 
 opacity: 1 !important; 
 visibility: visible !important; 
 transform: translateY(0) !important; 
}

.theme-option { 
 padding: 9px 16px; 
 color: var(--text-muted); 
 font-size: 13px; 
 font-weight: 600; 
 cursor: pointer; 
 text-align: left; 
 display: block; 
 transition: all 0.2s ease;
}
.theme-option:hover { 
 background: var(--bg-elements-hover); 
 color: var(--text-color) !important; 
 padding-left: 20px; 
}

.nav-home-link, .user-btn {
 background: var(--bg-elements); 
 border: 1px solid var(--border-color);
 padding: 6px 14px; 
 border-radius: var(--btn-radius); 
 font-size: 13px;
 font-weight: 700; 
 color: var(--text-color) !important; 
 text-decoration: none !important;
 transition: all 0.25s ease;
}
.nav-home-link:hover, .user-btn:hover {
 border-color: var(--accent-color);
 background: var(--bg-elements-hover);
 transform: translateY(-2px);
}

.highlight-btn { 
 background: var(--btn-grad) !important; 
 color: #ffffff !important; 
 border: none !important; 
}
.highlight-btn:hover {
 filter: brightness(1.15);
}

.toast-notification {
 position: fixed; 
 bottom: 25px; 
 right: 25px; 
 background: var(--bg-card);
 border: 1px solid var(--border-color); 
 color: var(--text-color);
 padding: 12px 20px; 
 border-radius: 10px; 
 font-size: 13px; 
 font-weight: 700;
 z-index: 999999; 
 opacity: 0; 
 transform: translateY(20px); 
 transition: all 0.3s ease; 
 pointer-events: none;
 box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.toast-notification.show { opacity: 1; transform: translateY(0); }

/* ==========================================================================
4. КОМПОНЕНТ КОМАНДЫ СЕРВЕРА (STAFF TABS, CARDS & MODALS)
========================================================================== */
.css-tabs {
 background-color: var(--bg-card, #121316);
 display: flex; flex-direction: column; width: 100%; max-width: 1400px; 
 margin: 15px auto; padding: 25px; border-radius: var(--border-radius, 16px);
 font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
 box-sizing: border-box; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
 box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); position: relative;
}
.tab-input { display: none !important; }

.tabs-nav { 
 display: flex; justify-content: space-between; align-items: center;
 background: var(--bg-nav, #1a1c23); border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
 padding: 12px 20px; border-radius: var(--btn-radius, 12px); gap: 15px; margin-bottom: 25px; 
}
.nav-links-group { display: flex; flex-wrap: wrap; gap: 12px; }
.tab-label {
 display: inline-flex; align-items: center; padding: 10px 20px;
 background: linear-gradient(135deg, #ff3b38 0%, #d32f2f 100%); color: #ffffff;
 font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer;
 user-select: none; transition: all 0.25s ease; box-shadow: 0 4px 20px rgba(255, 59, 56, 0.4);
}
.tab-icon { margin-right: 8px; font-size: 16px; }

.staff-stats-counter {
 display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, 0.25);
 padding: 6px 14px; border-radius: 8px; font-size: 13px; color: #a0a5b5;
 border: 1px solid rgba(255, 255, 255, 0.05);
}
.staff-stats-counter b { color: #fff; }
.staff-stats-counter b.vacant-color { color: #ff4d4d; }

.header-banner-block { margin-bottom: 25px; }
.section-title { 
 color: #ffffff !important; border-left: 5px solid var(--accent-color, #ff3b38); 
 padding-left: 15px; margin: 0 0 6px 0; text-transform: uppercase; 
 letter-spacing: 0.8px; font-weight: 800; font-size: 24px; 
}
.section-subtitle { margin: 0; padding-left: 20px; font-size: 14px; color: #787d8f; }

.controls-panel { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.search-wrapper { position: relative; flex: 1; min-width: 280px; max-width: 480px; }
#staffSearch { 
 width: 100%; background-color: var(--bg-elements, #1a1c23); 
 border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; 
 padding: 11px 40px 11px 16px; color: #fff; font-size: 14px; outline: none; box-sizing: border-box;
}
#staffSearch:focus { border-color: var(--accent-color, #ff3b38); box-shadow: 0 0 15px rgba(255, 59, 56, 0.3); }
.clear-search-btn {
 position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
 background: none; border: none; color: #787d8f; font-size: 18px; cursor: pointer; display: none;
}

.filter-buttons-group { display: flex; gap: 6px; }
.filter-btn {
 background: #1a1c23; border: 1px solid rgba(255, 255, 255, 0.08); color: #a0a5b5;
 padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.filter-btn:hover { background: #232630; color: #fff; }
.filter-btn.active { background: #ff3b38; color: #fff; border-color: #ff3b38; }

.sub-tabs-nav { display: flex; gap: 8px; margin-bottom: 25px; flex-wrap: wrap; border-bottom: 2px solid rgba(255, 255, 255, 0.06); padding-bottom: 15px; }
.sub-tab-label { 
 background-color: #1a1c23; border: 1px solid rgba(255, 255, 255, 0.08); color: #a0a5b5; 
 padding: 10px 18px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.25s ease; 
}
.sub-tab-label:hover { color: #ffffff; background-color: #232630; transform: translateY(-2px); }

.sub-tab-content { display: none; margin-bottom: 25px; }

#sub-dept1:checked ~ .sub-tabs-nav label[for="sub-dept1"],
#sub-dept2:checked ~ .sub-tabs-nav label[for="sub-dept2"],
#sub-dept3:checked ~ .sub-tabs-nav label[for="sub-dept3"],
#sub-dept4:checked ~ .sub-tabs-nav label[for="sub-dept4"],
#sub-dept5:checked ~ .sub-tabs-nav label[for="sub-dept5"],
#sub-dept6:checked ~ .sub-tabs-nav label[for="sub-dept6"],
#sub-dept7:checked ~ .sub-tabs-nav label[for="sub-dept7"],
#sub-dept8:checked ~ .sub-tabs-nav label[for="sub-dept8"],
#sub-dept9:checked ~ .sub-tabs-nav label[for="sub-dept9"] {
 color: #ffffff !important; background-color: #ff3b38 !important; border-color: #ff3b38 !important;
}

#sub-dept1:checked ~ .sub-content-1,
#sub-dept2:checked ~ .sub-content-2,
#sub-dept3:checked ~ .sub-content-3,
#sub-dept4:checked ~ .sub-content-4,
#sub-dept5:checked ~ .sub-content-5,
#sub-dept6:checked ~ .sub-content-6,
#sub-dept7:checked ~ .sub-content-7,
#sub-dept8:checked ~ .sub-content-8,
#sub-dept9:checked ~ .sub-content-9 { display: block; animation: tabShowFade 0.35s ease forwards; }

@keyframes tabShowFade {
 0% { opacity: 0; transform: translateY(10px); }
 100% { opacity: 1; transform: translateY(0); }
}

.department-title-banner { 
 color: #ffffff !important; font-weight: 700; font-size: 13px; text-transform: uppercase; 
 letter-spacing: 1.2px; padding: 12px 20px !important; border: 1px solid rgba(255,255,255,0.08); 
 border-radius: 10px 10px 0 0; width: 100%; box-sizing: border-box; margin-bottom: 20px;
}
.banner-owner { background: linear-gradient(90deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.05) 100%); }
.banner-management { background: linear-gradient(90deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.05) 100%); }
.banner-high-admin { background: linear-gradient(90deg, rgba(239, 68, 68, 0.3) 0%, rgba(239, 68, 68, 0.05) 100%); }
.banner-sr-admin { background: linear-gradient(90deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.05) 100%); }
.banner-game-admin { background: linear-gradient(90deg, rgba(6, 182, 212, 0.3) 0%, rgba(6, 182, 212, 0.05) 100%); }
.banner-tech { background: linear-gradient(90deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.05) 100%); }
.banner-media { background: linear-gradient(90deg, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.05) 100%); }
.banner-build { background: linear-gradient(90deg, rgba(217, 119, 6, 0.3) 0%, rgba(217, 119, 6, 0.05) 100%); }
.banner-events { background: linear-gradient(90deg, rgba(236, 72, 153, 0.3) 0%, rgba(236, 72, 153, 0.05) 100%); }

.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }

.staff-card {
 background: #1a1c23; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
 padding: 14px 16px; display: flex; align-items: center; gap: 14px; transition: all 0.25s ease; position: relative;
}
.staff-card:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); }
.staff-card.vacant-card { border-style: dashed; background: rgba(255, 255, 255, 0.01); opacity: 0.8; }

.avatar-container { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.staff-avatar { width: 100%; height: 100%; border-radius: 10px; background: #121316; border: 1px solid rgba(255, 255, 255, 0.1); object-fit: cover; }
.vacant-avatar { display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: #ff4d4d; border: 1px dashed rgba(255, 77, 77, 0.4); }

.status-indicator { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #1a1c23; }
.status-indicator.online { background: #10b981; box-shadow: 0 0 8px #10b981; }

.staff-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.staff-role { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.role-owner { color: #ffd700; }
.role-mgmt { color: #f5af19; }
.role-high { color: #ef4444; }
.role-senior { color: #f59e0b; }
.role-mod { color: #06b6d4; }
.role-tech { color: #3b82f6; }
.role-media { color: #10b981; }
.role-build { color: #d97706; }
.role-events { color: #ec4899; }

.staff-name { font-size: 14px; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-nick { color: #787d8f; font-size: 13px; }
.staff-actions { display: flex; align-items: center; gap: 6px; }

.vk-link { 
 color: #ffffff !important; text-decoration: none !important; font-weight: 700; font-size: 11px; 
 padding: 5px 10px; border-radius: 6px; background: linear-gradient(135deg, #2787f5 0%, #1e63b8 100%); 
}
.badge-vacant { background: rgba(239, 68, 68, 0.15); color: #ef4444; font-weight: 700; padding: 4px 10px; border-radius: 6px; font-size: 11px; }

.report-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; font-size: 13px; padding: 5px 8px; border-radius: 6px; }
.report-btn:hover { background: #ef4444; border-color: #ef4444; }

.doc-block { background-color: #1a1c23; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 20px; margin-bottom: 25px; color: #fff; }

.no-results-box { text-align: center; padding: 40px 20px; background: #1a1c23; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 12px; margin-bottom: 25px; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 35px; }
.feature-card { display: flex; gap: 15px; align-items: flex-start; }
.feature-icon-wrapper { font-size: 24px; background: rgba(255,255,255,0.05); padding: 10px; border-radius: 10px; }

.faq-section { margin-top: 35px; }
.faq-main-title { margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 14px; }
.faq-accordion { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.faq-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; overflow: hidden; }
.faq-trigger { width: 100%; background: none; border: none; padding: 14px 18px; text-align: left; color: #fff; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-arrow { font-size: 12px; color: #787d8f; transition: transform 0.3s ease; }
.faq-item.active .faq-arrow { transform: rotate(90deg); color: #ff3b38; }
.faq-content { display: none; padding: 0 18px 16px 18px; font-size: 14px; color: #a0a5b5; line-height: 1.6; }
.faq-item.active .faq-content { display: block; }

.modal-overlay {
 position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);
 backdrop-filter: blur(8px); z-index: 999999; display: flex; align-items: center; justify-content: center;
 opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { background: #18191d; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; width: 90%; max-width: 480px; padding: 24px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 14px; }
.modal-title-wrap { display: flex; align-items: center; gap: 10px; }
.modal-close { background: none; border: none; color: #787d8f; font-size: 24px; cursor: pointer; }
.target-staff-badge { margin: 15px 0; padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; font-size: 14px; color: #a0a5b5; }
.form-group { margin-bottom: 14px; }
.modal-label { display: block; font-size: 13px; font-weight: 600; color: #a0a5b5; margin-bottom: 6px; }
.modal-input, .modal-textarea, .modal-select {
 width: 100%; background: #121316; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
 padding: 10px 14px; color: #fff; font-size: 14px; box-sizing: border-box; outline: none;
}
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-btn { padding: 10px 18px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
.cancel-btn { background: rgba(255, 255, 255, 0.05); color: #fff; }
.submit-btn { background: #ff3b38; color: #fff; }

/* Адаптивность для мобильных устройств */
@media (max-width: 979px) {
 .header-block .wrapper { flex-direction: column; gap: 15px; text-align: center; }
 .head-l { flex-direction: column; gap: 12px; align-items: center; }
 .head-r { align-items: center; width: 100%; }
 .head-top-bar { justify-content: center; width: 100%; }
 .head-u { justify-content: center; }
 .header-block .site-d { margin-left: 0 !important; }
 .tabs-nav { flex-direction: column; align-items: stretch; }
 .controls-panel { flex-direction: column; align-items: stretch; }
}