/* ==========================================================================
   МОДУЛЬ СТИЛЕЙ ЛИЧНОГО КАБИНЕТА: public/profile-executive.css
   Вынесено из public/profile.html (Executive SaaS Full-Screen Dashboard)
   ========================================================================== */

/* === ULTRA PREMIUM SAAS DESIGN PATCH v3.0 (DYNAMIC COLOR & AURORA) === */
:root { 
    --primary-h: 160;
    --primary-s: 84%;
    --primary-l: 39%;
    
    --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-glow: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
    --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);

    --bg-color: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-color: #0f172a;
    --text-muted: #64748b;
    --border-radius: 16px;
    --card-border: rgba(226, 232, 240, 0.8);
    --card-shadow: 0 10px 40px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,1);
}

body.dark-theme { 
    --bg-color: #121212; /* Глубокий Onyx */
    --card-bg: rgba(24, 24, 27, 0.85); /* Zinc 900 */
    --card-border: rgba(255, 255, 255, 0.08); 
    --text-color: #ffffff; 
    --text-muted: #a1a1aa; /* Zinc 400 */
    --card-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); 
}

/* 🌟 Живой фон Аврора (Mesh Gradient) */
.aurora-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.aurora-blob.blue { width: 50vw; height: 50vw; top: -10vw; left: -10vw; background: rgba(59, 130, 246, 0.15); animation: float 15s ease-in-out infinite alternate; }
.aurora-blob.orange { width: 45vw; height: 45vw; bottom: 5vw; right: -10vw; background: rgba(245, 158, 11, 0.12); animation: float 18s ease-in-out infinite alternate-reverse; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 30px) scale(1.1); } }

body.dark-theme .aurora-blob.blue { background: rgba(16, 185, 129, 0.05); filter: blur(120px); }
body.dark-theme .aurora-blob.orange { background: rgba(245, 158, 11, 0.04); filter: blur(120px); }

/* 🌟 Динамическое свечение при наведении на карточки */
.card, .premium-bento-card { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.card:hover, .premium-bento-card:hover {
    border-color: var(--primary-glow) !important;
    box-shadow: 0 12px 30px -4px var(--primary-glow), 0 0 4px rgba(0,0,0,0.02) !important;
    transform: translateY(-2px);
}

/* 🌟 Динамические кнопки */
button[style*="linear-gradient"], .btn-add, .v-btn, .auth-submit {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 15px var(--primary-glow) !important;
}
button[style*="linear-gradient"]:hover, .btn-add:hover, .v-btn:hover {
    background: var(--primary-color) !important;
    filter: brightness(1.1);
    box-shadow: 0 8px 25px var(--primary-glow) !important;
}

/* 🌟 Красивый слайдер цвета */
.hue-slider {
    -webkit-appearance: none; width: 100%; height: 12px; border-radius: 10px; outline: none;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%; background: #fff;
    border: 3px solid var(--primary-color); cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: transform 0.1s;
}
.hue-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

.card, div[style*="border-radius: 24px"], .premium-bento-card, .premium-chart-box, #statsTableWrapper {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow) !important;
    border: var(--card-border) !important;
    background: var(--card-bg) !important; 
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover, .premium-bento-card:hover {
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0,0,0,0.02) !important;
    transform: translateY(-2px);
}
body.dark-theme .card:hover, body.dark-theme .premium-bento-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

button[style*="linear-gradient"], .btn-add, .auth-submit, .v-btn {
    background: #18181b !important; /* Zinc 900 */
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    border: 1px solid #18181b !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

button[style*="linear-gradient"]:hover, .btn-add:hover, .v-btn:hover {
    background: #27272a !important; /* Zinc 800 */
    border-color: #27272a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
}

button[style*="linear-gradient"]:active, .btn-add:active, .v-btn:active {
    transform: scale(0.97) translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

input[type="text"], input[type="password"], input[type="number"], input[type="time"], input[type="date"], select, textarea, .premium-input {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--text-color) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
    font-weight: 500 !important;
    color-scheme: light;
    transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus, .premium-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
    background: #ffffff !important;
    outline: none !important;
}

body.dark-theme input[type="text"], body.dark-theme input[type="password"], body.dark-theme input[type="number"], body.dark-theme input[type="time"], body.dark-theme input[type="date"], body.dark-theme select, body.dark-theme textarea, body.dark-theme .premium-input {
    background: #18181b !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
    color-scheme: dark;
}
body.dark-theme input:focus, body.dark-theme select:focus, body.dark-theme textarea:focus, body.dark-theme .premium-input:focus {
    border-color: var(--primary-color) !important;
    background: #121212 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25) !important;
}

.role-badge, div[style*="background: linear-gradient(90deg, rgba(39, 174, 96, 0.1)"] {
    background: #f1f5f9 !important;
    color: #52525b !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}
/* Байджи для информации в профиле (Страна, Почта, Дата) */
.info-badge {
    background: #f1f5f9;
    color: #52525b;
    border: 1px solid #e4e4e7;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    word-wrap: break-word;
    white-space: normal;
}
body.dark-theme .info-badge {
    background: #18181b;
    border-color: rgba(255,255,255,0.08);
    color: #e4e4e7;
}
body.dark-theme .role-badge {
    background: #18181b !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e4e4e7 !important;
}
body.dark-theme .role-badge {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

div[style*="radial-gradient"] { display: none !important; }
.ph, .ph-fill { font-size: 1.2em; vertical-align: middle; margin-right: 6px; color: #9ca3af; }

/* === ВЛОЖЕННЫЕ ВКЛАДКИ ДЛЯ РЕДАКТИРОВАНИЯ ФИЛИАЛА === */
.branch-tabs-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; background: rgba(0,0,0,0.02); padding: 6px; border-radius: 10px; border: 1px solid var(--card-border); }
.branch-tab-btn { background: transparent; color: var(--text-muted); border: none; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; flex: 1; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.branch-tab-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-color); }
.branch-tab-btn.active { background: var(--card-bg); color: var(--text-color); box-shadow: var(--card-shadow); font-weight: 700; border: 1px solid var(--card-border); }

body.dark-theme .branch-tabs-row { background: rgba(0,0,0,0.2); }
body.dark-theme .branch-tab-btn:hover { background: rgba(255,255,255,0.05); }
body.dark-theme .branch-tab-btn.active { background: var(--card-bg); color: var(--text-color); border-color: rgba(255,255,255,0.1); }

.branch-tab-content { display: none; animation: fadeIn 0.3s ease; }
.branch-tab-content.active { display: block; }

/* 4. ЧАТЫ ПОДДЕРЖКИ (SAAS) */
.admin-msg.admin { background: #0f172a !important; color: #fff !important; border-radius: 12px 12px 0 12px !important; box-shadow: var(--card-shadow) !important; border: none !important; }
.admin-msg.user { background: #ffffff !important; border: 1px solid var(--card-border) !important; color: var(--text-color) !important; border-radius: 12px 12px 12px 0 !important; box-shadow: var(--card-shadow) !important; }
.admin-chat-user { border-bottom: 1px solid var(--card-border) !important; border-left: 3px solid transparent !important; padding: 14px 20px !important; background: transparent !important;}
.admin-chat-user.active { background: #ffffff !important; border-left-color: #0f172a !important; box-shadow: var(--card-shadow) !important; }

/* ================================= */
body { background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 0; transition: 0.3s; }
.main-content { max-width: 1200px; margin: 40px auto; padding: 0 20px; box-sizing: border-box; }

.card { background: var(--card-bg); padding: 30px; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 25px; box-sizing: border-box; }

.profile-header { display: flex; align-items: center; gap: 25px; margin-bottom: 30px; flex-wrap: wrap; }
.avatar-container { position: relative; width: 100px; height: 100px; cursor: pointer; }
.avatar { width: 100%; height: 100%; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; color: #888; overflow: hidden; border: 4px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.avatar-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; opacity: 0; transition: 0.3s; }
.avatar-container:hover .avatar-overlay { opacity: 1; }

.role-badge { background: #27ae60; color: #fff; padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 800; display: inline-block; margin-top: 5px; }

.section-title { font-size: 18px; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }

.fav-item-card { display: flex; align-items: center; justify-content: space-between; padding: 15px; background: rgba(0,0,0,0.02); border-radius: 16px; margin-bottom: 10px; border: 1px solid rgba(0,0,0,0.03); }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: #666; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ddd; font-family: inherit; box-sizing: border-box; font-weight: 600; font-size: 14px; }

.btn-add { background: #111; color: #fff; border: none; padding: 12px 25px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; width: 100%; }
.btn-add:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.btn-cancel { background: #f5f5f5; color: #666; border: none; padding: 12px 25px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; width: 100%; }

.album-block { background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 16px; margin-bottom: 20px; }
.album-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; }
.album-title { font-weight: 800; font-size: 16px; color: #333; }

.gallery-preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.gallery-thumbnail { position: relative; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; border: 1px solid #eee; }
.gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.gallery-remove-btn { position: absolute; top: 2px; right: 2px; background: rgba(231,76,60,0.9); color: #fff; border: none; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.cat-container { display: flex; flex-wrap: wrap; gap: 8px; background: #fafafa; padding: 12px; border-radius: 12px; border: 1px solid #eee; }

.subcat-chip { background: #fff; border: 1px solid #ddd; padding: 5px 12px; border-radius: 50px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.subcat-chip-close { cursor: pointer; color: #e74c3c; border: none; background: none; padding: 0; font-size: 14px; font-weight: bold; }
.subcat-group { margin-bottom: 15px; }
.subcat-group-title { font-size: 11px; text-transform: uppercase; color: #999; margin-bottom: 8px; font-weight: 800; letter-spacing: 0.5px; }
.subcat-group-list { display: flex; flex-wrap: wrap; gap: 8px; }

.manage-row { display: flex; gap: 8px; margin-top: 5px; }
.btn-edit-action { background: #f39c12; color: #fff; border: none; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-del-action { background: #e74c3c; color: #fff; border: none; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }

.locked-area { opacity: 0.3; pointer-events: none; transition: 0.3s; }
.locked-area.is-unlocked { opacity: 1; pointer-events: auto; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); z-index: 9999; justify-content: center; align-items: center; padding: 20px; }
.modal-overlay.is-open { display: flex; }
.pm-close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }

@keyframes blinkLive { from { opacity: 1; transform: scale(1); box-shadow: 0 0 12px #27ae60; } to { opacity: 0.4; transform: scale(0.8); box-shadow: 0 0 3px #27ae60; } }

/* ==========================================
   КОРПОРАТИВНЫЙ ДИЗАЙН: ГЕОГРАФИЯ И КАТЕГОРИИ
   ========================================== */
.admin-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 25px;
}

.settings-column {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-column h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
}

.settings-column select,
.settings-column input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.3s;
    color: #333;
}
.settings-column select:focus,
.settings-column input:focus {
    border-color: #27ae60;
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.15);
    outline: none;
}

.settings-column button {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    margin-top: 5px;
}
.settings-column button:hover {
    background: #27ae60;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
}

.settings-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}
.settings-list::-webkit-scrollbar { width: 6px; }
.settings-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }

.settings-list > div, .settings-list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: 0.2s;
}
.settings-list > div:hover, .settings-list > li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
}

.settings-list > div button, .settings-list > li button {
    width: auto;
    padding: 8px 14px;
    font-size: 12px;
    background: rgba(231,76,60,0.1);
    color: #e74c3c;
    border-radius: 8px;
    margin: 0;
    box-shadow: none;
}
.settings-list > div button:hover, .settings-list > li button:hover {
    background: #e74c3c;
    color: #fff;
    transform: none;
}

/* ==========================================
   ТЕМНАЯ ТЕМА ДЛЯ ГЕОГРАФИИ И КАТЕГОРИЙ
   ========================================== */
body.dark-theme .settings-column { background: #18181b; border-color: rgba(255,255,255,0.08); }
body.dark-theme .settings-column h3 { color: #fff; }
body.dark-theme .settings-column select, body.dark-theme .settings-column input { background: #27272a; border-color: rgba(255,255,255,0.08); color: #fff; }
body.dark-theme .settings-column select:focus, body.dark-theme .settings-column input:focus { border-color: #10b981; }
body.dark-theme .settings-list > div, body.dark-theme .settings-list > li { background: #27272a !important; border-color: rgba(255,255,255,0.08) !important; color: #e4e4e7 !important; }
body.dark-theme .settings-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

@media (max-width: 800px) {
    .admin-settings-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================
   АНАЛИТИКА (ЕСТЕСТВЕННАЯ ШИРИНА БЕЗ РАСТЯГИВАНИЙ)
   ========================================== */
#statsCardBlock { display: none; width: 100%; max-width: 900px; margin: 0 auto 25px auto; box-sizing: border-box; }

.analytics-header { 
    display: flex; 
    flex-direction: column;
    background: var(--card-bg); 
    padding: 25px 30px; 
    border-radius: var(--border-radius); 
    border: 1px solid rgba(0,0,0,0.05); 
    margin-bottom: 25px; 
    box-sizing: border-box; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.02); 
}

.ah-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.analytics-title-group { display: flex; align-items: center; gap: 12px; }
.analytics-icon { width: 42px; height: 42px; min-width: 42px; background: rgba(39, 174, 96, 0.1); color: #27ae60; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.analytics-title { margin: 0; font-size: 20px; font-weight: 900; color: var(--text-color); letter-spacing: -0.3px; }

.analytics-exports { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-export { padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; font-family: inherit; }
.btn-export.pdf-btn { background: rgba(231,76,60,0.08); color: #e74c3c; }
.btn-export.pdf-btn:hover { background: #e74c3c; color: #fff; box-shadow: 0 4px 15px rgba(231,76,60,0.3); transform: translateY(-2px); }
.btn-export.excel-btn { background: rgba(39,174,96,0.08); color: #27ae60; }
.btn-export.excel-btn:hover { background: #27ae60; color: #fff; box-shadow: 0 4px 15px rgba(39,174,96,0.3); transform: translateY(-2px); }

.ah-bottom-row { display: flex; flex-wrap: wrap; overflow: visible; padding-bottom: 5px; }
.analytics-filters { 
    display: inline-flex; align-items: center; gap: 4px; 
    background: rgba(0,0,0,0.03); padding: 5px; border-radius: 14px; 
    border: 1px solid rgba(0,0,0,0.04);
    flex-wrap: wrap;
}
.filter-btn, .date-picker-label { 
    background: transparent; border: none; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.2s; color: #666; white-space: nowrap; margin: 0;
}
.filter-btn:hover, .date-picker-label:hover { background: rgba(0,0,0,0.04); color: #111; }
.filter-btn.active { background: #fff; color: #111; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

@media (max-width: 600px) {
    .ah-top-row { flex-direction: column; align-items: flex-start; }
    .analytics-exports { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .btn-export { justify-content: center; }
}

@media (max-width: 900px) {
    .analytics-header { flex-direction: column; align-items: flex-start; }
    .analytics-title-group { margin-bottom: 10px; }
    .analytics-exports { margin-left: 0; padding-left: 0; border-left: none; width: 100%; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 15px; margin-top: 5px; }
}

.custom-date-menu { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 15px 35px rgba(0,0,0,0.1); padding: 20px; border-radius: 16px; z-index: 9999; width: 260px; display: none; flex-direction: column; gap: 12px; }
.custom-date-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-left: 1px solid rgba(0,0,0,0.08); border-top: 1px solid rgba(0,0,0,0.08); }
.date-input-group { display: flex; flex-direction: column; gap: 6px; }
.date-input-group label { font-size: 12px; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.date-input-group input { padding: 10px 14px; border: 1px solid #ddd; border-radius: 10px; font-family: inherit; font-size: 14px; color: #111; background: #f9f9f9; transition: 0.2s; outline: none; box-sizing: border-box; width: 100%; }
.date-input-group input:focus { border-color: #27ae60; background: #fff; box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1); }
.btn-apply-date { background: #27ae60; color: #fff; border: none; padding: 12px; border-radius: 10px; font-weight: 800; font-size: 14px; cursor: pointer; transition: 0.2s; margin-top: 5px; width: 100%; }
.btn-apply-date:hover { background: #219653; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(39, 174, 96, 0.2); }

.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 25px; box-sizing: border-box; }
.bento-card { background: var(--card-bg); border-radius: 20px; padding: 25px; border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column; position: relative; transition: transform 0.2s; box-shadow: 0 4px 20px rgba(0,0,0,0.02); box-sizing: border-box; }
.bento-card:hover { transform: translateY(-3px); }
.bento-card.card-status { background: linear-gradient(180deg, var(--card-bg) 0%, #fffcf5 100%); border: 1px solid rgba(243, 156, 18, 0.3); }

.kpi-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; font-size: 14px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 20px; }
.kpi-icon.views { background: rgba(39, 174, 96, 0.1); color: #27ae60; }
.kpi-icon.calls { background: rgba(41, 128, 185, 0.1); color: #2980b9; }
.kpi-icon.wa { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.kpi-icon.conv { background: rgba(243, 156, 18, 0.1); color: #f39c12; }
.kpi-value { font-size: 36px; font-weight: 900; color: var(--text-color); line-height: 1; margin-bottom: 5px; }

.visual-funnel { margin-top: 15px; }
.funnel-bar { height: 8px; border-radius: 10px; margin-bottom: 8px; position: relative; overflow: hidden; background: #f0f0f0; }
.funnel-fill { height: 100%; border-radius: 10px; transition: width 1s ease-in-out; }
.td-progress-bg { width: 100%; height: 6px; background: #eee; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.td-progress-fill { height: 100%; background: #27ae60; border-radius: 4px; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.status-dot.success { background: #27ae60; box-shadow: 0 0 8px rgba(39,174,96,0.5); }
.status-dot.warning { background: #f1c40f; box-shadow: 0 0 8px rgba(241,196,15,0.5); }
.status-dot.danger { background: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,0.5); }

.charts-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 20px; margin-bottom: 25px; box-sizing: border-box; width: 100%; }
.chart-box { background: var(--card-bg); border-radius: 20px; padding: 25px; border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column; height: 400px; box-sizing: border-box; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.02); width: 100%; }
@media (max-width: 1024px) { .charts-grid { grid-template-columns: 1fr; } }
.chart-box h3 { margin: 0 0 15px 0; font-size: 16px; font-weight: 800; color: var(--text-color); text-align: left; }
#geoChartBox h3 { text-align: center; }
.chart-wrapper { position: relative; flex: 1; width: 100%; height: 100%; min-height: 0; margin-top: 5px; }
.chart-wrapper canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#statsTableWrapper { padding: 0; overflow: hidden; border-radius: 20px; background: var(--card-bg); border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 20px rgba(0,0,0,0.02); box-sizing: border-box; }
#statsTable { width: 100%; border-collapse: collapse; }
#statsTable th { padding: 18px 20px; font-size: 13px; color: #888; border-bottom: 2px solid rgba(0,0,0,0.05); text-align: left; white-space: nowrap; }
#statsTable td { padding: 15px 20px; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.03); color: var(--text-color); }

@media (max-width: 1024px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bento-grid { grid-template-columns: 1fr; } .analytics-header { flex-direction: column; justify-content: center; text-align: center; } .analytics-exports, .analytics-filters { justify-content: center; } .chart-box { height: 350px; } }

/* ТЕМНАЯ ТЕМА */
body.dark-theme .analytics-header, body.dark-theme .bento-card, body.dark-theme .chart-box, body.dark-theme #statsTableWrapper { background: #1a1a1a; border-color: #333; box-shadow: none; }
body.dark-theme .bento-card.card-status { background: #1a1a1a; border-color: #333; }
body.dark-theme .kpi-value, body.dark-theme .analytics-title, body.dark-theme .chart-box h3, body.dark-theme #statsTable td { color: #fff; }
body.dark-theme .analytics-header { background: #1a1a1a; border-color: #333; box-shadow: none; }
body.dark-theme .ah-top-row { border-bottom-color: #333; }
body.dark-theme .analytics-filters { background: #222; border-color: #333; }
body.dark-theme .filter-btn, body.dark-theme .date-picker-label { color: #aaa; background: transparent; }
body.dark-theme .filter-btn:hover, body.dark-theme .date-picker-label:hover { background: rgba(255,255,255,0.05); color: #fff; }
body.dark-theme .filter-btn.active { background: #333; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
body.dark-theme .custom-date-menu { background: #1a1a1a; border-color: #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
body.dark-theme .custom-date-menu::before { background: #1a1a1a; border-color: #333; }
body.dark-theme .date-input-group input { background: #252525; border-color: #444; color: #fff; }
body.dark-theme .funnel-bar, body.dark-theme .td-progress-bg { background: #333; }
body.dark-theme #statsTable th { border-bottom-color: #333; color: #aaa; }
body.dark-theme #statsTable td { border-bottom-color: #222; color: #ddd; }
body.dark-theme #statsTable tbody tr[onmouseover]:hover td { background: #2a2a2a; }
body.dark-theme tr[class^="sub-row-"] { background: #222; }
body.dark-theme tr[class^="sub-row-"] td { color: #ccc; border-bottom-color: #333; }
body.dark-theme .venue-table-title { color: #ffffff !important; }
body.dark-theme .tree-line-v, body.dark-theme .tree-line-h { background: #444 !important; }

/* ==========================================
   ИСПРАВЛЕНИЕ: БЕЛЫЙ ТЕКСТ В ТЕМНОЙ ТЕМЕ
   ========================================== */
body.dark-theme {
    --text-color: #ffffff !important; 
}
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme .section-title,
body.dark-theme .album-title,
body.dark-theme label[data-i18n="lblGallery"],
body.dark-theme #rReadOnlyName,
body.dark-theme #valLiveGuests,
body.dark-theme #valLiveUsers,
body.dark-theme #valLiveRenters,
body.dark-theme #valLiveSpecificVenue,
body.dark-theme #valLiveSpecificBranches {
    color: #ffffff !important;
}
body.dark-theme label,
body.dark-theme .form-group label,
body.dark-theme #liveAdminStats,
body.dark-theme #liveRenterStats,
body.dark-theme h4[style*="color: #555"] {
    color: #cccccc !important;
}

/* PDF ЭКСПОРТ */
.pdf-export-mode #pdfReportContent { background: #ffffff; padding: 40px; border-radius: 0; width: 1200px; margin: 0 auto; color: #111; }
.pdf-export-mode .bento-grid, .pdf-export-mode .charts-grid { display: flex; flex-wrap: nowrap; gap: 15px; }
.pdf-export-mode .bento-card, .pdf-export-mode .chart-box { flex: 1; background: #ffffff; border: 1px solid #eaeaea; box-shadow: none; color: #111; }
.pdf-export-mode h3, .pdf-export-mode .kpi-value, .pdf-export-mode th, .pdf-export-mode td { color: #111; }
.pdf-export-mode .kpi-header span, .pdf-export-mode p { color: #555; }
.pdf-export-mode #totConv { color: #f39c12; }
.pdf-export-mode table, .pdf-export-mode th, .pdf-export-mode td, .pdf-export-mode tr { border-color: #eaeaea; }

/* ЧАТ ПОДДЕРЖКИ */
.admin-chat-wrapper { display: flex; height: 600px; background: #fff; border-radius: 12px; border: 1px solid #eaeaea; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.03); margin-top: 15px; }
.admin-chat-sidebar { width: 320px; background: #fcfcfc; border-right: 1px solid #eaeaea; overflow-y: auto; }
.admin-chat-user { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: 0.2s; border-left: 4px solid transparent; }
.admin-chat-user:hover { background: #f5f5f5; }
.admin-chat-user.active { background: #fff; border-left-color: #27ae60; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.admin-chat-user-email { font-weight: 800; font-size: 14px; color: #111; word-break: break-all; margin-bottom: 4px; }
.admin-chat-user-last { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-chat-main { flex: 1; display: flex; flex-direction: column; background: #fff; }
.admin-chat-header { padding: 15px 20px; border-bottom: 1px solid #eaeaea; display: flex; align-items: center; gap: 15px; background: #fcfcfc; }
.admin-chat-avatar { width: 42px; height: 42px; background: #27ae60; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 18px; text-transform: uppercase;}
.admin-chat-header-info h4 { margin: 0; font-size: 15px; font-weight: 800; color: #111; }
.admin-chat-header-info p { margin: 2px 0 0 0; font-size: 12px; color: #888; font-weight: 600; }
.admin-chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; background: #fff; }
.admin-msg { max-width: 70%; padding: 14px 18px; border-radius: 16px; font-size: 14px; line-height: 1.5; position: relative; }
.admin-msg.user { background: #fff; border: 1px solid #eaeaea; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); color: #111; }
.admin-msg.admin { background: #27ae60; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 4px 15px rgba(39, 174, 96, 0.2); }
.admin-msg img { max-width: 100%; border-radius: 8px; margin-bottom: 8px; }
.admin-chat-input-area { padding: 15px 20px; border-top: 1px solid #eaeaea; background: #fdfdfd; display: flex; gap: 12px; align-items: center; }
.admin-chat-input { flex: 1; padding: 14px 20px; border: 1px solid #ddd; border-radius: 50px; outline: none; font-size: 14px; font-family: inherit; transition: 0.2s; }
.admin-chat-input:focus { border-color: #27ae60; background: #fff; }
.admin-chat-send { background: #27ae60; color: #fff; border: none; width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; font-size: 18px; }
.admin-chat-send:hover { background: #2ecc71; transform: scale(1.05); box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3); }

body.dark-theme .admin-chat-wrapper { background: #18181b; border-color: rgba(255,255,255,0.08); }
body.dark-theme .admin-chat-sidebar { background: #121212; border-color: rgba(255,255,255,0.08); }
body.dark-theme .admin-chat-user { border-color: rgba(255,255,255,0.04); }
body.dark-theme .admin-chat-user:hover { background: rgba(255,255,255,0.03); }
body.dark-theme .admin-chat-user.active { background: rgba(255,255,255,0.05); border-left-color: #10b981; }
body.dark-theme .admin-chat-user-email { color: #fff; }
body.dark-theme .admin-chat-main, body.dark-theme .admin-chat-messages { background: #18181b; }
body.dark-theme .admin-chat-header, body.dark-theme .admin-chat-input-area { background: #121212; border-color: rgba(255,255,255,0.08); }
body.dark-theme .admin-chat-header-info h4 { color: #fff; }
body.dark-theme .admin-msg.user { background: #27272a; border-color: rgba(255,255,255,0.08); color: #e4e4e7; }
body.dark-theme .admin-chat-input { background: #27272a; border-color: rgba(255,255,255,0.15); color: #fff; }
body.dark-theme .trans-block { background: rgba(0,0,0,0.2) !important; border: 1px solid #333 !important; }
body.dark-theme #adminSelectedUserInfo { background: #1a1a1a !important; border-color: #333 !important; color: #ccc !important; }

body.dark-theme .fav-item-card { background: #1a1a1a; border-color: #333; }
body.dark-theme .fav-item-card:hover { border-color: #27ae60; box-shadow: 0 8px 25px rgba(0,0,0,0.4); }
body.dark-theme .fav-item-card strong { color: #fff !important; }

/* ПУЛЬСИРУЮЩИЕ УВЕДОМЛЕНИЯ (МОЙ БИЗНЕС) */
@keyframes pulseBusinessBadge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.business-pulse-badge {
    background: #ef4444; color: #fff; border-radius: 50%;
    min-width: 22px; height: 22px; padding: 0 5px;
    font-size: 11px; font-weight: 800; display: inline-flex;
    justify-content: center; align-items: center; margin-left: 10px;
    animation: pulseBusinessBadge 2s infinite; border: 2px solid var(--card-bg);
    box-sizing: border-box; line-height: 1; vertical-align: middle;
}
body.dark-theme .business-pulse-badge { border-color: var(--card-bg); }

.main-content { display: flex; flex-direction: column; }

/* СТИЛИ ДЛЯ DRAG AND DROP (ПОД СЕБЯ) */
.ui-sortable-list { display: flex; flex-direction: column; gap: 8px; }
.ui-sortable-item { 
    background: var(--card-bg); border: 1px solid var(--card-border); 
    padding: 10px 15px; border-radius: 8px; font-size: 13px; font-weight: 600; 
    display: flex; align-items: center; gap: 10px; color: var(--text-color); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: transform 0.1s, box-shadow 0.1s;
}
.drag-handle { cursor: grab; color: var(--text-muted); font-size: 18px; }
.drag-handle:active { cursor: grabbing; }
.ui-sortable-item.dragging { 
    opacity: 0.5; background: var(--bg-color); border: 1px dashed #8b5cf6; 
    transform: scale(0.98);
}

.custom-elegant-scroll::-webkit-scrollbar { width: 6px; }
.custom-elegant-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-elegant-scroll::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 10px; }
.custom-elegant-scroll::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.6); }
body.dark-theme .custom-elegant-scroll::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); }
body.dark-theme .custom-elegant-scroll::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.8); }

/* ==========================================
   ИДЕАЛЬНАЯ ВЫГРУЗКА PDF (НАТИВНЫЙ ВЕКТОР)
   ========================================== */
@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    body * { visibility: hidden; }
    #pdfReportContent, #pdfReportContent * { visibility: visible; }
    
    #pdfReportContent {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .analytics-exports, .analytics-filters { display: none !important; }

    .analytics-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    .stat-card {
        flex: 1 1 45% !important;
        margin-bottom: 10px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .charts-grid {
        display: block !important;
        width: 100% !important;
    }
    .chart-card {
        width: 100% !important;
        display: block !important;
        margin-bottom: 30px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    canvas {
        max-height: 280px !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    .analytics-table-container {
        display: block !important;
        width: 100% !important;
        page-break-before: always !important;
        break-before: page !important;
        overflow: visible !important;
    }
    
    table {
        width: 100% !important;
        table-layout: auto !important;
    }
    th, td {
        white-space: normal !important;
        word-wrap: break-word !important;
        padding: 12px 8px !important;
    }
    tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body, html { background: #fff !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
}

/* ==================================================== */
/* АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА (SMARTPHONES)     */
/* ==================================================== */
@media (max-width: 768px) {
    #statsTableWrapper, .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
        border-radius: 8px;
    }
    #adminStatsTableBody td, #adminStatsTableBody th {
        white-space: nowrap !important;
    }

    #visitAnalyticsCard > div:nth-child(2) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    #visitAnalyticsCard > div:nth-child(2) > div {
        padding: 12px 8px !important;
    }
    #vaToday, #va7d, #va30d, #vaAll {
        font-size: 26px !important;
    }

    #favoritesList > div, #visitsList {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    #favoritesList > div[style*="flex-wrap"] {
        flex-direction: column !important;
        gap: 20px !important;
    }

    #chartsContainer {
        flex-direction: column !important;
        gap: 20px !important;
    }
    #chartsContainer > div {
        width: 100% !important;
        min-width: 100% !important;
        height: 250px !important;
    }

    .bento-card {
        padding: 12px !important;
    }

    .admin-grid, .album-form-grid {
        grid-template-columns: 1fr !important;
    }
    
    .manage-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .manage-row > div {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ========================================================
   📱 ФУНДАМЕНТАЛЬНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (Идеальный дизайн)
   ======================================================== */
* { box-sizing: border-box !important; }
html, body { overflow-x: hidden; }

@media (max-width: 800px) {
    * { word-wrap: break-word !important; overflow-wrap: break-word !important; }
    h2, h3, h4, label, strong, p { white-space: normal !important; max-width: 100% !important; line-height: 1.3 !important; }
    
    .admin-grid, .admin-settings-grid {
        display: flex !important; flex-direction: column !important; gap: 15px !important;
    }
    
    div[style*="flex-wrap: wrap; align-items: stretch"] {
        flex-direction: column !important;
    }
    
    div[style*="min-width: 280px"], div[style*="min-width: 300px"], .settings-column {
        min-width: 0 !important; width: 100% !important; border-right: none !important;
    }

    .card, .premium-bento-card, .premium-chart-box, 
    div[style*="padding: 30px"], div[style*="padding: 25px"] {
        padding: 15px !important;
    }
    div[style*="padding: 20px 25px;"] {
        padding: 12px 15px !important;
    }

    input, select, textarea {
        max-width: 100% !important; width: 100% !important;
    }
    
    .btn-add, .btn-cancel, .btn-export, .btn-apply-date {
        width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
    }

    #chartsContainer { display: flex !important; flex-direction: column !important; }
    #chartsContainer > div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 380px !important; flex: none !important; }
    .chart-wrapper { min-height: 250px !important; }
}

/* --- ПРОДОЛЖЕНИЕ ПАТЧА: УБИВАЕМ ОСТАТКИ ДЕТСКОГО ДИЗАЙНА --- */
.card h3 span[style*="linear-gradient"], #favCount, #visitsCount {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1px solid var(--card-border) !important;
}

input[type="text"], input[type="password"], input[type="number"], input[type="time"], input[type="date"], select, textarea, .premium-input {
    background: var(--bg-color) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
    font-weight: 500 !important;
    color-scheme: light;
}
input:focus, select:focus, textarea:focus, .premium-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
    background: var(--card-bg) !important;
    outline: none !important;
}

body.dark-theme input[type="text"], body.dark-theme input[type="password"], body.dark-theme input[type="number"], body.dark-theme input[type="time"], body.dark-theme input[type="date"], body.dark-theme select, body.dark-theme textarea, body.dark-theme .premium-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
    color-scheme: dark;
}
body.dark-theme input:focus, body.dark-theme select:focus, body.dark-theme textarea:focus, body.dark-theme .premium-input:focus {
    border-color: var(--primary-color) !important;
    background: var(--bg-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* --- ПРОФИЛЬ И МОДАЛЬНЫЕ ОКНА --- */
#displayProfileName { color: var(--text-color); }
body.dark-theme .profile-info-block { background: var(--bg-color) !important; border-color: var(--card-border) !important; }

#editProfileModal .modal-content, #adminRenterLimitsModal .modal-content { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
#editProfileModal h3, #adminRenterLimitsModal h3 { color: var(--text-color) !important; }
#editProfileModal label, #adminRenterLimitsModal label, #adminRenterLimitsModal p { color: var(--text-muted) !important; }
#editProfileModal input, #adminRenterLimitsModal input[type="number"] { background: var(--bg-color) !important; color: var(--text-color) !important; border-color: var(--card-border) !important; }
#editProfileModal input::placeholder { color: var(--text-muted) !important; }
#editProfileModal input:focus { border-color: var(--primary-color) !important; background: var(--card-bg) !important; }
#editProfileModal .close-btn, #adminRenterLimitsModal .close-btn { color: var(--text-muted) !important; background: var(--bg-color) !important; }
#editProfileModal .close-btn:hover, #adminRenterLimitsModal .close-btn:hover { background: var(--card-border) !important; color: var(--text-color) !important; }
#limitCategoryContainer { background: var(--bg-color) !important; border-color: var(--card-border) !important; }

/* ТЕМНАЯ ТЕМА АНАЛИТИКИ И ТАБЛИЦ */
body.dark-theme .analytics-header, body.dark-theme .bento-card, body.dark-theme .chart-box, body.dark-theme #statsTableWrapper { background: #18181b; border-color: rgba(255,255,255,0.08); box-shadow: none; }
body.dark-theme .bento-card.card-status { background: #18181b; border-color: rgba(255,255,255,0.08); }
body.dark-theme .kpi-value, body.dark-theme .analytics-title, body.dark-theme .chart-box h3, body.dark-theme #statsTable td { color: #fff; }
body.dark-theme .analytics-header { background: #18181b; border-color: rgba(255,255,255,0.08); box-shadow: none; }
body.dark-theme .ah-top-row { border-bottom-color: rgba(255,255,255,0.08); }
body.dark-theme .analytics-filters { background: #121212; border-color: rgba(255,255,255,0.08); }
body.dark-theme .filter-btn, body.dark-theme .date-picker-label { color: #a1a1aa; background: transparent; }
body.dark-theme .filter-btn:hover, body.dark-theme .date-picker-label:hover { background: rgba(255,255,255,0.05); color: #fff; }
body.dark-theme .filter-btn.active { background: #27272a; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.1); }
body.dark-theme .custom-date-menu { background: #18181b; border-color: rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
body.dark-theme .custom-date-menu::before { background: #18181b; border-color: rgba(255,255,255,0.08); }
body.dark-theme .date-input-group input { background: #27272a; border-color: rgba(255,255,255,0.15); color: #fff; }
body.dark-theme .funnel-bar, body.dark-theme .td-progress-bg { background: rgba(255,255,255,0.1); }
body.dark-theme #statsTable th { border-bottom-color: rgba(255,255,255,0.08); color: #a1a1aa; }
body.dark-theme #statsTable td { border-bottom-color: rgba(255,255,255,0.04); color: #e4e4e7; }
body.dark-theme #statsTable tbody tr[onmouseover]:hover td { background: #27272a; }
body.dark-theme tr[class^="sub-row-"] { background: #121212; }
body.dark-theme tr[class^="sub-row-"] td { color: #a1a1aa; border-bottom-color: rgba(255,255,255,0.04); }

/* --- ФИЗИЧЕСКИЕ ВИЗИТЫ И ДЕРЕВО ФИЛИАЛОВ --- */
.va-stat-box { background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--card-shadow); }
.va-qr-box { background: var(--bg-color); border-color: var(--card-border); box-shadow: var(--card-shadow); }
.qr-select { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-color); transition: 0.2s; cursor: pointer; outline: none; }
.qr-select:hover { border-color: var(--text-muted); }
.qr-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); }
.qr-branch-card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.qr-branch-card:hover { border-color: var(--text-muted); }
.qr-branch-container { border-left-color: var(--card-border); }
.qr-branch-line { background: var(--card-border); }
body.dark-theme .qr-branch-title, body.dark-theme .qr-branch-val { color: var(--text-color) !important; }
body.dark-theme .trans-block { background: var(--bg-color) !important; border: 1px solid var(--card-border) !important; }
body.dark-theme #adminSelectedUserInfo { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--text-muted) !important; }
body.dark-theme .fav-item-card { background: var(--card-bg); border-color: var(--card-border); }
body.dark-theme .fav-item-card:hover { border-color: var(--primary-color); box-shadow: 0 8px 25px var(--primary-glow); }
body.dark-theme .fav-item-card strong { color: var(--text-color) !important; }

/* 3. АВТО-ИСПРАВЛЕНИЕ ВСЕХ СТАРЫХ ШАПОК КАРТОЧЕК */
.card > div[style*="padding: 20px 25px"] {
    padding: 18px 25px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--card-border) !important;
}
.card > div[style*="padding: 20px 25px"] > div:first-child {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
}
.card > div[style*="padding: 20px 25px"] h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* ==========================================
   ГЛОБАЛЬНЫЙ ФИКС ТЕМНОЙ ТЕМЫ (Аналитика и Графики)
   ========================================== */
body.dark-theme .pdf-btn { 
    background: rgba(239, 68, 68, 0.15) !important; 
    border-color: rgba(239, 68, 68, 0.3) !important; 
    color: #ef4444 !important; 
}
body.dark-theme .excel-btn { 
    background: rgba(16, 185, 129, 0.15) !important; 
    border-color: rgba(16, 185, 129, 0.3) !important; 
    color: #10b981 !important; 
}

body.dark-theme div[style*="background: #f8fafc"],
body.dark-theme div[style*="background: #f8fafc;"],
body.dark-theme tr[style*="background: #f8fafc"] {
    background: var(--bg-color) !important;
    border-color: var(--card-border) !important;
}

/* ==========================================
   ГЛОБАЛЬНЫЙ ФИКС ТЕМНОЙ ТЕМЫ (Диалоги Поддержки)
   ========================================== */
body.dark-theme div[style*="background: #f1f5f9"][style*="gap: 4px"] {
    background: var(--bg-color) !important;
    border-color: var(--card-border) !important;
}

body.dark-theme button[id^="tabChat"][style*="background: rgb(255, 255, 255)"],
body.dark-theme button[id^="tabChat"][style*="background: #fff"] {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}

body.dark-theme #adminChatActiveLetter {
    background: var(--bg-color) !important;
    border-color: var(--card-border) !important;
}

body.dark-theme button[onclick*="adminChatFileInput"] {
    background: var(--bg-color) !important;
    border-color: var(--card-border) !important;
    color: var(--text-muted) !important;
}
body.dark-theme button[onclick*="adminChatFileInput"]:hover {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

body.dark-theme .admin-chat-user span {
    background: var(--bg-color) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--card-border) !important;
}

/* === FULL-SCREEN ENTERPRISE SAAS DASHBOARD SHELL (БЕЗ МЕЛЬКАНИЯ И С ФИКСИРОВАННЫМ САЙДБАРОМ) === */
body > .header {
    display: none !important;
}
body > .main-content {
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.saas-app-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

/* 1. ФИКСИРОВАННЫЙ ЛЕВЫЙ САЙДБАР */
.saas-sidebar {
    width: 276px;
    flex-shrink: 0;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1000 !important;
    overflow-y: visible !important;
}

.saas-sidebar-top {
    padding: 18px 20px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.saas-sidebar-user {
    padding: 16px 18px;
    border-bottom: 1px solid var(--card-border);
    background: rgba(16, 185, 129, 0.03);
    flex-shrink: 0;
}

.saas-sidebar-nav-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 14px 20px 8px 20px;
    flex-shrink: 0;
}

#saasSidebarNavSlot {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
}
#saasSidebarNavSlot::-webkit-scrollbar { width: 4px; }
#saasSidebarNavSlot::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.2); border-radius: 10px; }

.saas-sidebar #profileTabsContainer.profile-tabs-scroll {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 14px !important;
}
.saas-sidebar .p-tab-btn {
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
    gap: 10px !important;
}
.saas-sidebar .p-tab-btn i {
    color: var(--text-muted) !important;
    font-size: 18px !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
}
.saas-sidebar .p-tab-btn:hover {
    background: var(--bg-color) !important;
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}
.saas-sidebar .p-tab-btn:hover i {
    color: var(--primary-color, #10b981) !important;
}
.saas-sidebar .p-tab-btn.active,
body.dark-theme .saas-sidebar .p-tab-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3) !important;
    font-weight: 800 !important;
}
.saas-sidebar .p-tab-btn.active i,
body.dark-theme .saas-sidebar .p-tab-btn.active i {
    color: #ffffff !important;
}

.saas-sidebar-footer {
    margin-top: auto;
    padding: 14px 18px 18px 18px;
    border-top: 1px solid var(--card-border);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}

.saas-sidebar-footer .lang-switcher-container {
    width: 100%;
    position: relative !important;
}
.saas-sidebar-footer .lang-btn-main {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 9px 14px !important;
    box-sizing: border-box !important;
}
.saas-sidebar-footer .lang-dropdown-menu {
    top: auto !important;
    bottom: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.28) !important;
}

/* 2. ПРАВАЯ РАБОЧАЯ ОБЛАСТЬ */
.saas-workspace {
    flex: 1;
    min-width: 0;
    margin-left: 276px;
    width: calc(100% - 276px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.25s ease, width 0.25s ease;
}

.saas-topbar {
    position: sticky;
    top: 0;
    z-index: 800;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--card-border);
    padding: 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.saas-topbar-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* === ПРОФЕССИОНАЛЬНЫЙ РЕЖИМ «ВЕРХНЕЕ МЕНЮ» (EXECUTIVE TOPBAR MODE) === */
body.saas-layout-topbar .saas-app-shell {
    flex-direction: column;
}
body.saas-layout-topbar .saas-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--card-border) !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 28px !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    z-index: 1050 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}
body.saas-layout-topbar .saas-workspace {
    margin-left: 0 !important;
    width: 100% !important;
}
body.saas-layout-topbar .saas-sidebar-top {
    border-bottom: none !important;
    padding: 0 16px 0 0 !important;
    border-right: 1px solid var(--card-border) !important;
    flex-shrink: 0 !important;
}
body.saas-layout-topbar .saas-sidebar-user,
body.saas-layout-topbar .saas-sidebar-nav-label {
    display: none !important;
}
body.saas-layout-topbar #saasSidebarNavSlot {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 !important;
    scrollbar-width: none !important;
}
body.saas-layout-topbar #saasSidebarNavSlot::-webkit-scrollbar,
body.saas-layout-topbar #saasSidebarNavSlot::before,
body.saas-layout-topbar #saasSidebarNavSlot::after {
    display: none !important;
}
body.saas-layout-topbar .saas-sidebar #profileTabsContainer.profile-tabs-scroll {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    background: var(--bg-color) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 13px !important;
    width: auto !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03) !important;
}
body.saas-layout-topbar .saas-sidebar .p-tab-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    gap: 7px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
body.saas-layout-topbar .saas-sidebar .p-tab-btn::before,
body.saas-layout-topbar .saas-sidebar .p-tab-btn::after {
    display: none !important;
}
body.saas-layout-topbar .saas-sidebar .p-tab-btn.active,
body.dark-theme.saas-layout-topbar .saas-sidebar .p-tab-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25) !important;
}
body.saas-layout-topbar .saas-sidebar-footer {
    margin-top: 0 !important;
    border-top: none !important;
    border-left: 1px solid var(--card-border) !important;
    padding: 0 0 0 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}
body.saas-layout-topbar .saas-sidebar-footer .lang-switcher-container {
    width: auto !important;
}
body.saas-layout-topbar .saas-sidebar-footer .lang-btn-main {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
}
body.saas-layout-topbar .saas-sidebar-footer .lang-dropdown-menu {
    bottom: auto !important;
    top: calc(100% + 8px) !important;
    width: 190px !important;
    right: 0 !important;
    left: auto !important;
}

body.saas-layout-topbar .saas-topbar {
    top: 64px !important;
    z-index: 950 !important;
    padding: 12px 28px !important;
    gap: 10px !important;
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
}
.saas-topbar-row1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    min-height: 38px !important;
}

.saas-subnav-bar {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding: 2px 4px !important;
    scroll-padding-inline: 12px !important;
    scrollbar-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.saas-subnav-bar::-webkit-scrollbar,
.saas-subnav-bar::before,
.saas-subnav-bar::after {
    display: none !important;
}
.saas-subnav-pill {
    padding: 7px 13px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border: 1px solid var(--card-border) !important;
    background: var(--bg-color) !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: all 0.18s ease !important;
    flex-shrink: 0 !important;
}
.saas-subnav-pill:hover {
    color: var(--text-color) !important;
    border-color: var(--text-muted) !important;
    background: var(--card-bg) !important;
}
.saas-subnav-pill.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14) !important;
}
body.dark-theme .saas-subnav-pill.active {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
}
.saas-subnav-pill.active i {
    color: #10b981 !important;
}

/* === ПОЛНОЭКРАННЫЙ РЕЖИМ ДЛЯ CRM-БЛОКОВ === */
.tm-crm-fullscreen-btn {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.tm-crm-fullscreen-btn:hover {
    border-color: #10b981 !important;
    color: #10b981 !important;
    transform: translateY(-1px) !important;
}
.card.tm-crm-card-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 9995 !important;
    overflow-y: auto !important;
    background: var(--bg-color) !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
}
.card.tm-crm-card-fullscreen > .saas-card-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 16px 28px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
.card.tm-crm-card-fullscreen > .saas-card-body {
    flex: 1 1 auto !important;
    padding: 28px !important;
    max-width: 1680px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 1180px) {
    body.saas-layout-topbar .saas-sidebar {
        flex-wrap: wrap !important;
        padding: 10px 18px !important;
    }
    body.saas-layout-topbar .saas-topbar {
        top: 0 !important;
        position: relative !important;
    }
}

/* 3. ХОЛСТ НА 100% ШИРИНЫ */
.saas-canvas {
    padding: 24px 28px 80px 28px;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.saas-canvas > .card,
.card.saas-panel-card,
#hrUserPlaceholderBlock,
#hrManageBlock,
#statsCardBlock,
#combinedVisitsBonusCard,
#renterPromosCard,
#renterVenueEditBlock,
#addVenueBlock,
#renterBookingsCard,
#renterAppointmentsCard,
#renterSalonCard,
#gamificationCard,
#miniGameCard,
#favoritesCard,
#visitHistoryCard,
#liveStatsBlock,
#adminResetMetkasBlock,
#adminSubcatManageBlock,
#adminUserManageBlock,
#adminModulesBlock,
#adminGeoCatBlock,
#adminSiteSettingsBlock,
#securityBlock,
#pinLockBlock {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 1280px) {
    #addVenueBlock > .saas-card-body {
        display: grid !important;
        grid-template-columns: 370px 1fr !important;
        gap: 24px !important;
        align-items: start !important;
    }
    #addVenueBlock #adminEditTopBlock {
        position: sticky !important;
        top: 130px !important;
        margin-bottom: 0 !important;
    }
    #addVenueBlock #adminVenueFormArea {
        min-width: 0 !important;
    }
}

.saas-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 24px !important;
}
.saas-card-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-right: auto !important;
    text-align: left !important;
}

@media (max-width: 960px) {
    .saas-app-shell { flex-direction: column; }
    .saas-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
    }
    .saas-workspace {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .saas-sidebar #profileTabsContainer.profile-tabs-scroll {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding-bottom: 10px !important;
    }
    .saas-sidebar .p-tab-btn { width: auto !important; flex-shrink: 0 !important; }
    .saas-topbar { padding: 12px 16px; }
    .saas-canvas { padding: 16px 14px 100px 14px; }
}

/* ==========================================================================
   SAAS EXECUTIVE POLISH (#saasExecutivePolish)
   ========================================================================== */
body:not(.dark-theme) { color-scheme: light !important; }
body.dark-theme { color-scheme: dark !important; }

body.dark-theme select,
body.dark-theme select:focus,
body.dark-theme option {
    color-scheme: dark !important;
    background-color: #18181b !important;
    color: #ffffff !important;
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

.card {
    border-radius: var(--tm-radius-card, 16px) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
}
body.dark-theme .card {
    background: rgba(24, 24, 27, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.card > div[style*="border-bottom: 1px solid var(--card-border)"] {
    padding: 18px 24px !important;
    background: rgba(148, 163, 184, 0.04) !important;
}
body.dark-theme .card > div[style*="border-bottom: 1px solid var(--card-border)"] {
    background: rgba(255, 255, 255, 0.02) !important;
}

#rBranchTab_front > .form-group:first-child:has(#rBranchNameFront),
#vBranchTab_front > .form-group:first-child:has(#vBranchNameFront) {
    display: none !important;
}

#rTab_MainBranch > div[style*="border: 1px solid #eee"] {
    background: var(--bg-color) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--tm-radius-subbox, 14px) !important;
    padding: 24px !important;
}
#rSubcatContainer, #vSubcatContainer {
    background: var(--bg-color) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    border-radius: var(--tm-radius-subbox, 12px) !important;
}
#rPinCode, #vPinCode {
    color: var(--text-color) !important;
    background: var(--card-bg) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.branch-tabs-row {
    background: var(--card-bg) !important;
    padding: 5px !important;
    border-radius: var(--tm-radius-subbox, 12px) !important;
    border: 1px solid var(--card-border) !important;
    gap: 6px !important;
    margin-bottom: 24px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02) !important;
}
.branch-tab-btn {
    border-radius: var(--tm-radius-ctrl, 9px) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.branch-tab-btn.active {
    background: #18181b !important;
    color: #ffffff !important;
    border-color: #18181b !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}
body.dark-theme .branch-tab-btn.active {
    background: #ffffff !important;
    color: #121212 !important;
    border-color: #ffffff !important;
}
.branch-tab-btn.active i { color: inherit !important; }

#vAdminTabsRow, #rAdminTabsRow {
    background: var(--bg-color);
    padding: 8px;
    border-radius: var(--tm-radius-subbox, 12px);
    border: 1px solid var(--card-border);
    gap: 8px !important;
    margin-bottom: 24px !important;
}

#visitsBonusTitleContainer,
#mainRatingTitleContainer {
    display: inline-flex !important;
    background: var(--card-bg) !important;
    padding: 5px !important;
    border-radius: var(--tm-radius-subbox, 12px) !important;
    border: 1px solid var(--card-border) !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}
#visitsBonusSeparator1, #visitsBonusSeparator2, #ratingSeparator {
    display: none !important;
}
#btnVisitsTab, #btnReviewsTab, #btnBonusTab,
#btnRatingUsers, #btnRatingBusiness {
    padding: 8px 14px !important;
    border-radius: var(--tm-radius-ctrl, 8px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--bg-color) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}
#btnVisitsTab:hover, #btnReviewsTab:hover, #btnBonusTab:hover,
#btnRatingUsers:hover, #btnRatingBusiness:hover {
    border-color: var(--card-border) !important;
}

#renterBookingsCard div[style*="padding: 8px; border-radius: 12px"],
#renterAppointmentsCard div[style*="padding: 8px; border-radius: 12px"],
#renterSalonCard div[style*="padding: 8px; border-radius: 12px"] {
    background: var(--bg-color) !important;
    padding: 6px !important;
    border-radius: var(--tm-radius-subbox, 12px) !important;
    gap: 6px !important;
    border: 1px solid var(--card-border) !important;
}
#renterBookingsCard button[id^="btn_"],
#renterAppointmentsCard button[id^="btn_"],
#renterSalonCard button[id^="btn_"] {
    border-radius: var(--tm-radius-ctrl, 9px) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#statsDashboard .kpi-icon.views {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #10b981 !important;
}
#statsDashboard .kpi-icon.views i { color: #10b981 !important; margin: 0 !important; }

#statsDashboard .kpi-icon.calls {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #3b82f6 !important;
}
#statsDashboard .kpi-icon.calls i { color: #3b82f6 !important; margin: 0 !important; }
#funnelCalls { background: #3b82f6 !important; }

#statsDashboard .kpi-icon.wa {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #22c55e !important;
}
#statsDashboard .kpi-icon.wa i { color: #22c55e !important; margin: 0 !important; }

#statsDashboard .kpi-icon.conv {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #f59e0b !important;
}
#statsDashboard .kpi-icon.conv i { color: #f59e0b !important; margin: 0 !important; }

body.dark-theme .td-progress-bg,
body.dark-theme .funnel-bar {
    background: rgba(255, 255, 255, 0.08) !important;
}

#gamificationCard div[style*="radial-gradient"],
#qrScannerRightPanel div[style*="radial-gradient"] {
    display: block !important;
}

/* === ЭТАП 5: АДМИНИСТРИРОВАНИЕ И НАСТРОЙКИ (EXECUTIVE SAAS) === */
.card.saas-panel-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--tm-radius-card, 16px) !important;
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg) !important;
    box-shadow: var(--card-shadow) !important;
}
.saas-card-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--card-border) !important;
    background: var(--bg-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
}
.saas-card-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.saas-header-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.saas-header-icon i { margin: 0 !important; }
.saas-card-body { padding: 22px 24px !important; }
.saas-subbox {
    background: var(--bg-color) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--tm-radius-subbox, 12px) !important;
    padding: 20px 22px !important;
}
.saas-field-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--text-muted) !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.saas-field-label i { margin: 0 !important; font-size: 14px !important; }

.saas-subcat-pill {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-color) !important;
    padding: 7px 13px !important;
    border-radius: 50px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.saas-subcat-pill:hover {
    border-color: var(--primary-color) !important;
}
.saas-subcat-pill:has(input:checked) {
    background: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.brand-hue-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-hue-swatch:hover {
    transform: scale(1.15);
}

/* ==========================================================================
   LEAFLET EXECUTIVE GEO STYLES (#leafletExecutiveGeoStyles)
   ========================================================================== */
.venue-geo-editor-box {
    background: var(--bg-color);
    border: 1px solid var(--card-border);
    border-radius: var(--tm-radius-subbox, 12px);
    padding: 16px;
    margin-top: 14px;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.venue-geo-minimap {
    width: 100%;
    height: 220px;
    border-radius: var(--tm-radius-ctrl, 10px);
    border: 1px solid var(--card-border);
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: #e2e8f0;
}
body.dark-theme .venue-geo-minimap {
    background: #0f172a;
}
.venue-geo-minimap .leaflet-tile-pane {
    filter: saturate(0.9) contrast(0.98);
    transition: filter 0.25s ease;
}
body.dark-theme .venue-geo-minimap .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) brightness(92%) contrast(90%);
}
.tm-draggable-pin-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 12px rgba(16, 185, 129, 0.45));
}
.tm-draggable-pin-core {
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, #10b981, #059669);
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #ffffff;
}
.tm-draggable-pin-core i {
    transform: rotate(45deg);
    color: #ffffff;
    font-size: 16px;
    margin: 0;
}
.leaflet-control-attribution {
    font-size: 9px !important;
    opacity: 0.65;
    background: rgba(255, 255, 255, 0.7) !important;
}
body.dark-theme .leaflet-control-attribution {
    background: rgba(15, 23, 42, 0.75) !important;
    color: #94a3b8 !important;
}
body.dark-theme .leaflet-control-attribution a {
    color: #38bdf8 !important;
}

/* ==========================================================================
   ЛОКАЛЬНЫЕ КОМПОНЕНТНЫЕ СТИЛИ КАБИНЕТА (ДОК ВКЛАДОК, CRM, ИГРА, МОДУЛИ)
   ========================================================================== */
@media (max-width: 600px) { .h-text { display: none; } }

.profile-tabs-wrapper { 
    width: 100% !important; 
    max-width: 900px !important;
    margin: 0 auto 25px auto !important;
    padding: 6px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--tm-radius-card, 16px) !important;
    box-shadow: var(--card-shadow) !important;
    box-sizing: border-box !important;
}

.profile-tabs-scroll { 
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.p-tab-btn { 
    flex: 1 1 0 !important;
    min-width: 0 !important; 
    background: transparent !important; 
    border: 1px solid transparent !important; 
    color: var(--text-muted) !important; 
    padding: 11px 10px !important; 
    border-radius: var(--tm-radius-ctrl, 10px) !important; 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    cursor: pointer !important; 
    display: flex; 
    align-items: center !important; 
    justify-content: center !important;
    gap: 7px !important; 
    white-space: nowrap !important; 
    overflow: visible !important;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important; 
    box-shadow: none !important; 
    font-family: var(--tm-font-sans, 'Inter', sans-serif) !important; 
    outline: none !important; 
    margin: 0 !important; 
    box-sizing: border-box !important;
}

.p-tab-btn i { 
    flex-shrink: 0 !important; 
    font-size: 16px !important;
    margin: 0 !important;
    color: inherit !important;
}

.p-tab-btn:hover { 
    color: var(--text-color) !important; 
    background: var(--bg-color) !important;
}

.p-tab-btn.active { 
    background: #18181b !important; 
    color: #ffffff !important; 
    border-color: #18181b !important; 
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important; 
}
body.dark-theme .p-tab-btn.active { 
    background: #ffffff !important; 
    color: #121212 !important; 
    border-color: #ffffff !important; 
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.14) !important; 
}

@media (max-width: 780px) {
    .profile-tabs-scroll { 
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        gap: 6px !important; 
    }
    .p-tab-btn { 
        padding: 11px 8px !important; 
        font-size: 12px !important; 
    }
}

/* ЕДИНЫЕ СТИЛИ CRM-МОДУЛЕЙ БИЗНЕСА (EXECUTIVE SAAS) */
.crm-segmented-tabs {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px !important;
    background: var(--bg-color, #f1f5f9) !important;
    border: 1px solid var(--card-border, #e2e8f0) !important;
    border-radius: var(--tm-radius-subbox, 12px) !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.crm-tab-btn {
    flex: 1 1 auto !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--tm-radius-ctrl, 8px) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    min-width: 125px;
    transition: all 0.16s ease !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
.crm-tab-btn i { font-size: 16px; margin: 0; color: inherit; }
.crm-tab-btn:hover:not(.active) { color: var(--text-color); background: rgba(15, 23, 42, 0.04) !important; }
.crm-tab-btn.active {
    background: var(--card-bg, #ffffff) !important;
    color: var(--text-color, #0f172a) !important;
    border-color: var(--card-border, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    font-weight: 600 !important;
}

.crm-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}
.crm-kpi-card {
    background: var(--card-bg, #ffffff) !important;
    border: 1px solid var(--card-border, #e2e8f0) !important;
    border-radius: var(--tm-radius-subbox, 12px) !important;
    padding: 15px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}
.crm-kpi-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--text-muted, #64748b) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.crm-kpi-val {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-color, #0f172a) !important;
    line-height: 1.15 !important;
    font-variant-numeric: tabular-nums !important;
}
.crm-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    background: var(--bg-color);
    padding: 10px 14px;
    border-radius: var(--tm-radius-subbox, 12px);
    border: 1px solid var(--card-border);
}
.crm-filter-pill {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: var(--tm-radius-ctrl, 8px);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.16s;
}
.crm-filter-pill.active {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--card-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    font-weight: 600;
}

/* КАЛЕНДАРИ БРОНИРОВАНИЯ, ПРИЕМОВ И САЛОНА */
.booking-calendar-layout,
.appt-calendar-layout,
.salon-calendar-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s;
}
.booking-calendar-left,
.appt-calendar-left,
.salon-calendar-left {
    flex: 1;
    min-width: 300px;
    display: none;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease;
}
.booking-calendar-right,
.appt-calendar-right,
.salon-calendar-right {
    flex: 2;
    min-width: 320px;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s;
}
@media (max-width: 800px) {
    .booking-calendar-layout,
    .appt-calendar-layout,
    .salon-calendar-layout {
        flex-direction: column-reverse;
    }
    .booking-calendar-left, .booking-calendar-right,
    .appt-calendar-left, .appt-calendar-right,
    .salon-calendar-left, .salon-calendar-right {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

.salon-slots-custom-scroll::-webkit-scrollbar { width: 6px !important; }
.salon-slots-custom-scroll::-webkit-scrollbar-track { background: transparent !important; margin: 4px 0 !important; }
.salon-slots-custom-scroll::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, 0.35) !important; border-radius: 10px !important; }
.salon-slots-custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(236, 72, 153, 0.6) !important; }
body.dark-theme .salon-slots-custom-scroll::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, 0.5) !important; }

/* МИНИ-ИГРА "ЗАХВАТ МЕТКОПОЛИСА" */
.game-dots-grid { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; padding: 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--tm-radius-card, 16px); box-shadow: var(--card-shadow); margin: 0 auto; }
.game-row { display: flex; align-items: center; justify-content: center; }
.game-dot { width: 12px; height: 12px; background: var(--text-color); border-radius: 50%; box-shadow: 0 0 0 3px rgba(128,128,128,0.12); z-index: 2; flex-shrink: 0; transition: 0.2s; }
.game-line-h { width: 52px; height: 10px; background: rgba(128,128,128,0.12); border-radius: 6px; cursor: pointer; position: relative; z-index: 1; transition: 0.2s; margin: 0 2px; }
.game-line-v { width: 10px; height: 52px; background: rgba(128,128,128,0.12); border-radius: 6px; cursor: pointer; position: relative; z-index: 1; transition: 0.2s; margin: 2px 0; }
.game-line-h::after { content: ''; position: absolute; top: -14px; bottom: -14px; left: 0; right: 0; }
.game-line-v::after { content: ''; position: absolute; left: -14px; right: -14px; top: 0; bottom: 0; }
.game-line-h:hover:not(.p1):not(.p2), .game-line-v:hover:not(.p1):not(.p2) { background: rgba(16, 185, 129, 0.35); transform: scale(1.06); }
.game-line-h.p1, .game-line-v.p1 { background: var(--primary-color); box-shadow: 0 0 10px var(--primary-glow); cursor: default; }
.game-line-h.p2, .game-line-v.p2 { background: #ec4899; box-shadow: 0 0 10px rgba(236,72,153,0.4); cursor: default; }
.game-box-row { display: flex; justify-content: center; align-items: center; }
.game-box { width: 56px; height: 56px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 11px; font-weight: 700; transition: 0.25s; color: #fff; letter-spacing: 0.3px; }
.game-box.p1 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(16, 185, 129, 0.12)); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.35); animation: popBox 0.25s ease-out; }
.game-box.p2 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.28), rgba(236, 72, 153, 0.12)); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.35); animation: popBox 0.25s ease-out; }
@keyframes popBox { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.game-status-badge { padding: 6px 12px; border-radius: 50px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 6px; }
.game-btn { background: var(--primary-color); color: #fff; border: 1px solid var(--primary-color); padding: 11px 18px; border-radius: var(--tm-radius-ctrl, 10px); font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.game-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.game-mode-pill { padding: 7px 12px; border-radius: var(--tm-radius-ctrl, 8px); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-muted); transition: 0.2s; flex: 1; text-align: center; }
.game-mode-pill.active { background: var(--primary-light); color: var(--primary-color); border-color: var(--primary-color); font-weight: 700; }
@media (max-width: 520px) {
    .game-line-h { width: 40px; }
    .game-line-v { height: 40px; }
    .game-box { width: 44px; height: 44px; font-size: 10px; }
}

/* ПРЕМИУМ-СТИЛИ КАРТОЧЕК АНАЛИТИКИ */
.premium-bento-card {
    background: var(--card-bg, #fff);
    border-radius: var(--tm-radius-subbox, 14px) !important;
    padding: 20px !important;
    border: 1px solid var(--card-border, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    position: relative;
    overflow: hidden;
}
.premium-chart-box {
    background: var(--card-bg, #fff);
    border-radius: var(--tm-radius-subbox, 14px) !important;
    padding: 22px !important;
    border: 1px solid var(--card-border, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}
.premium-table-wrapper {
    background: var(--card-bg, #fff);
    border-radius: var(--tm-radius-subbox, 14px) !important;
    border: 1px solid var(--card-border, #e2e8f0) !important;
    overflow: hidden;
}
.analytics-header-premium {
    background: var(--card-bg, #fff);
    border-radius: var(--tm-radius-card, 16px);
    padding: 0;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
}
body.dark-theme .premium-bento-card, 
body.dark-theme .premium-chart-box, 
body.dark-theme .premium-table-wrapper,
body.dark-theme .analytics-header-premium {
    background: #18181b;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* СИСТЕМА МОДУЛЕЙ (АДМИН) */
.mod-cat-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--card-bg); padding: 8px 13px; border: 1px solid var(--card-border); border-radius: var(--tm-radius-ctrl, 10px); font-size: 12.5px; font-weight: 600; color: var(--text-color); transition: all 0.2s ease; user-select: none; }
.mod-cat-label:hover { border-color: #3b82f6; }
.mod-cat-label:has(input:checked), .mod-cat-label.is-checked { background: rgba(59, 130, 246, 0.08); border-color: #3b82f6; color: #3b82f6; font-weight: 600; }

/* ==========================================================================
   EXECUTIVE DESIGN SYSTEM v4.0: ЕДИНЫЙ ШРИФТ INTER + JETBRAINS MONO,
   ТОЧНАЯ МОДУЛЬНАЯ СЕТКА И 3 КОНТРАСТНЫХ ПРЕСЕТА (STRIPE / VERCEL / GLASS)
   ========================================================================== */
:root {
    --tm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --tm-radius-card: 16px;
    --tm-radius-subbox: 12px;
    --tm-radius-ctrl: 10px;
    --tm-accent-primary: #4f46e5;
}

/* 1. Тотальная синхронизация шрифта во всех контролах, таблицах и модалках */
html, body,
body input, body button, body select, body textarea,
body optgroup, body option, body table, body th, body td,
.card, .saas-panel-card, .saas-sidebar, .saas-topbar, .modal-content {
    font-family: var(--tm-font-sans) !important;
    font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Чистая типографическая иерархия без перегруженного веса 800/900 */
.card h1, .card h2, .card h3, .card h4,
.saas-card-header h3, .ah-top-row h3,
.tm-venue-pro-section-title,
.card div[style*="font-weight: 800"],
.card div[style*="font-weight:800"],
.card strong[style*="font-size:15px"],
.card strong[style*="font-size: 15px"] {
    font-family: var(--tm-font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.35 !important;
}
.card h3, .saas-card-header h3, .ah-top-row h3 {
    font-size: 15px !important;
}
.card p, .saas-card-header p, .tm-venue-pro-section-sub {
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.45 !important;
}

/* Табличные цифры (tabular-nums) для идеального вертикального выравнивания сумм и метрик */
.crm-kpi-val, .kpi-value,
#tmHeroKpiVisitsVal, #tmHeroKpiFavsVal, #tmHeroKpiFriendsVal, #tmHeroKpiVenuesVal,
#vaToday, #va7d, #va30d, #vaAll,
table td, table th,
input[type="number"], input[type="date"], input[type="time"] {
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.025em !important;
}

/* Моноширинный технический шрифт для ПИН-кодов, госномеров и ID заказов */
#rPinCode, #vPinCode, [style*="monospace"] {
    font-family: var(--tm-font-mono) !important;
    font-variant-numeric: tabular-nums !important;
}

/* 2. Строгий стандарт высоты и рамок для всех полей ввода и селектов (40px) */
.card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.card select,
.premium-input:not(textarea) {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 38px !important;
    border: 1px solid var(--card-border, #e2e8f0) !important;
    background-color: var(--card-bg, #ffffff) !important;
    color: var(--text-color, #0f172a) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.card textarea,
textarea.premium-input {
    padding: 11px 13px !important;
    border-radius: var(--tm-radius-ctrl) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border: 1px solid var(--card-border, #e2e8f0) !important;
    background-color: var(--card-bg, #ffffff) !important;
    color: var(--text-color, #0f172a) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.card input:not([type="checkbox"]):not([type="radio"]):focus,
.card select:focus,
.card textarea:focus,
.premium-input:focus {
    border-color: var(--tm-accent-primary, #4f46e5) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

/* Убираем кричащие пунктирные рамки и превращаем их в чистые структурные суб-блоки */
.card div[style*="border: 1px dashed"],
.card div[style*="border:1px dashed"],
.card div[style*="border: 1.5px dashed"],
.card div[style*="border:1.5px dashed"] {
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: var(--tm-radius-subbox) !important;
}

/* Отключаем подпрыгивание и зеленое свечение карточек при наведении из старого патча */
body:not(.dark-theme) .card:hover,
body:not(.dark-theme) .premium-bento-card:hover {
    transform: none !important;
}

/* Верхняя карусель пилюль (.saas-subnav-bar) без сдвигов */
.saas-subnav-pill {
    height: 34px !important;
    padding: 0 13px !important;
    border-radius: var(--tm-radius-ctrl, 9px) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transform: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.saas-subnav-pill:hover:not(.active) {
    transform: none !important;
}

/* ==========================================================================
   ПРЕСЕТ 1: STRIPE / LINEAR EXECUTIVE (ПО УМОЛЧАНИЮ — ТЕМНЫЙ САЙДБАР ИНДИГО + ПЛАТИНОВЫЙ ХОЛСТ)
   ========================================================================== */
body:not(.dark-theme)[data-tm-design-preset="stripe"],
body:not(.dark-theme):not([data-tm-design-preset]) {
    --bg-color: #f4f6fb !important;
    --card-bg: #ffffff !important;
    --card-border: #e2e8f0 !important;
    --text-color: #0f172a !important;
    --text-muted: #64748b !important;
    --tm-radius-card: 16px !important;
    --tm-radius-subbox: 12px !important;
    --tm-radius-ctrl: 10px !important;
    --tm-accent-primary: #4f46e5 !important;
    --primary-color: #4f46e5 !important;
    --primary-glow: rgba(79, 70, 229, 0.22) !important;
    --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 18px -4px rgba(15, 23, 42, 0.04) !important;
    background-color: #f4f6fb !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .aurora-bg,
body:not(.dark-theme):not([data-tm-design-preset]) .aurora-bg {
    display: none !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-workspace,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-workspace,
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-canvas,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-canvas {
    background: #f4f6fb !important;
}
/* Контрастный графитовый сайдбар в стиле Stripe / Linear */
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar {
    background: #0f172a !important;
    border-right: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar-top,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar-top,
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar-user,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar-user,
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar-footer,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar-footer {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar strong,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar strong,
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar b,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar b,
body:not(.dark-theme)[data-tm-design-preset="stripe"] #sidebarUserName,
body:not(.dark-theme):not([data-tm-design-preset]) #sidebarUserName {
    color: #ffffff !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar .p-tab-btn,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar .p-tab-btn,
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar #tmNavBtn_incomingRequests,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar #tmNavBtn_incomingRequests {
    color: #94a3b8 !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar .p-tab-btn i,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar .p-tab-btn i {
    color: #94a3b8 !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar .p-tab-btn:hover:not(.active),
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar .p-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar .p-tab-btn:hover:not(.active) i,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar .p-tab-btn:hover:not(.active) i {
    color: #ffffff !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar .p-tab-btn.active,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar .p-tab-btn.active,
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar #tmNavBtn_incomingRequests.active,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar #tmNavBtn_incomingRequests.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.38) !important;
    font-weight: 600 !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-sidebar .p-tab-btn.active i,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-sidebar .p-tab-btn.active i {
    color: #ffffff !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-topbar,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-topbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .card,
body:not(.dark-theme):not([data-tm-design-preset]) .card,
body:not(.dark-theme)[data-tm-design-preset="stripe"] #tmProfileHeroBentoCard,
body:not(.dark-theme):not([data-tm-design-preset]) #tmProfileHeroBentoCard {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 18px -4px rgba(15, 23, 42, 0.04) !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .card:hover,
body:not(.dark-theme):not([data-tm-design-preset]) .card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.07) !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .card > .saas-card-header,
body:not(.dark-theme):not([data-tm-design-preset]) .card > .saas-card-header,
body:not(.dark-theme)[data-tm-design-preset="stripe"] .card > .tm-detected-card-header,
body:not(.dark-theme):not([data-tm-design-preset]) .card > .tm-detected-card-header,
body:not(.dark-theme)[data-tm-design-preset="stripe"] #statsCardBlock .ah-top-row,
body:not(.dark-theme):not([data-tm-design-preset]) #statsCardBlock .ah-top-row {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-subnav-pill.active,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-subnav-pill.active {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28) !important;
}
body:not(.dark-theme)[data-tm-design-preset="stripe"] .saas-subnav-pill.active i,
body:not(.dark-theme):not([data-tm-design-preset]) .saas-subnav-pill.active i {
    color: #ffffff !important;
}

/* ==========================================================================
   ПРЕСЕТ 2: VERCEL / GEIST MINIMAL (СТРОГИЙ МОНОХРОМ, ОСТРЫЕ ГРАНИ 8-10PX, ЧЕТКИЙ КОНТУР)
   ========================================================================== */
body:not(.dark-theme)[data-tm-design-preset="vercel"] {
    --bg-color: #fafafa !important;
    --card-bg: #ffffff !important;
    --card-border: #d4d4d8 !important;
    --text-color: #09090b !important;
    --text-muted: #71717a !important;
    --tm-radius-card: 10px !important;
    --tm-radius-subbox: 8px !important;
    --tm-radius-ctrl: 6px !important;
    --tm-accent-primary: #09090b !important;
    --primary-color: #09090b !important;
    --primary-glow: rgba(9, 9, 11, 0.12) !important;
    --card-shadow: none !important;
    background-color: #fafafa !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .aurora-bg {
    display: none !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-workspace,
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-canvas {
    background: #fafafa !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e4e4e7 !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-sidebar-user {
    background: #fafafa !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-sidebar .p-tab-btn,
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-sidebar #tmNavBtn_incomingRequests {
    border-radius: 6px !important;
    color: #52525b !important;
    font-weight: 500 !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-sidebar .p-tab-btn.active,
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-sidebar #tmNavBtn_incomingRequests.active {
    background: #09090b !important;
    color: #ffffff !important;
    border-color: #09090b !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-sidebar .p-tab-btn.active i {
    color: #ffffff !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e4e7 !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .card,
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-panel-card,
body:not(.dark-theme)[data-tm-design-preset="vercel"] #tmProfileHeroBentoCard {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .card:hover,
body:not(.dark-theme)[data-tm-design-preset="vercel"] .premium-bento-card:hover {
    border-color: #18181b !important;
    box-shadow: none !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .card > .saas-card-header,
body:not(.dark-theme)[data-tm-design-preset="vercel"] .card > .tm-detected-card-header,
body:not(.dark-theme)[data-tm-design-preset="vercel"] #statsCardBlock .ah-top-row {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e4e7 !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-header-icon {
    background: #fafafa !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 7px !important;
    color: #09090b !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-header-icon i {
    color: #09090b !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-subnav-pill {
    border-radius: 6px !important;
    border-color: #e4e4e7 !important;
    background: #ffffff !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-subnav-pill.active {
    background: #09090b !important;
    border-color: #09090b !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body:not(.dark-theme)[data-tm-design-preset="vercel"] .saas-subnav-pill.active i {
    color: #ffffff !important;
}

/* ==========================================================================
   ПРЕСЕТ 3: APPLE / RAYCAST BENTO GLASS (ВОЗДУШНОЕ СТЕКЛО, АВРОРА И МЯГКИЕ ФОРМЫ 22PX)
   ========================================================================== */
body:not(.dark-theme)[data-tm-design-preset="glass"] {
    --bg-color: #eef2f9 !important;
    --card-bg: rgba(255, 255, 255, 0.84) !important;
    --card-border: rgba(255, 255, 255, 0.9) !important;
    --text-color: #0f172a !important;
    --text-muted: #64748b !important;
    --tm-radius-card: 22px !important;
    --tm-radius-subbox: 16px !important;
    --tm-radius-ctrl: 12px !important;
    --tm-accent-primary: #0284c7 !important;
    --primary-color: #0284c7 !important;
    --primary-glow: rgba(2, 132, 199, 0.25) !important;
    --card-shadow: 0 14px 34px -8px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    background-color: #eef2f9 !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-workspace,
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-canvas {
    background: radial-gradient(circle at 15% 0%, rgba(79, 70, 229, 0.09) 0%, rgba(14, 165, 233, 0.08) 38%, rgba(16, 185, 129, 0.05) 70%, #eef2f9 100%) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-sidebar {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-right: 1px solid rgba(203, 213, 225, 0.65) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-sidebar .p-tab-btn.active,
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-sidebar #tmNavBtn_incomingRequests.active {
    background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.38) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-topbar {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.65) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .card,
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-panel-card,
body:not(.dark-theme)[data-tm-design-preset="glass"] #tmProfileHeroBentoCard {
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px -8px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .card > .saas-card-header,
body:not(.dark-theme)[data-tm-design-preset="glass"] .card > .tm-detected-card-header,
body:not(.dark-theme)[data-tm-design-preset="glass"] #statsCardBlock .ah-top-row {
    background: rgba(248, 250, 252, 0.55) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.75) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-subnav-pill {
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-subnav-pill.active {
    background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}
body:not(.dark-theme)[data-tm-design-preset="glass"] .saas-subnav-pill.active i {
    color: #ffffff !important;
}

/* Плавающий переключатель 3 вариантов дизайна в правом нижнем углу */
#tmDesignPresetFloatingSwitcher {
    position: fixed !important;
    bottom: 18px !important;
    right: 18px !important;
    z-index: 99990 !important;
    background: rgba(15, 23, 42, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    padding: 5px 6px 5px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28) !important;
}
#tmDesignPresetFloatingSwitcher .tm-dp-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    margin-right: 4px !important;
    white-space: nowrap !important;
}
#tmDesignPresetFloatingSwitcher button {
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}
#tmDesignPresetFloatingSwitcher button:hover:not(.is-active) {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
#tmDesignPresetFloatingSwitcher button.is-active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4) !important;
}