/* DESIGN GANG — CANDY CAPSULE v2 */
:root {
  --ac: var(--theme-color);
  --ac-rgb: 52, 211, 153;   /* запасное значение до выбора темы */
  --theme-color: #117a4b;   /* THEME_V1: запасное значение — тёмно-зелёный, как в index.html.
                                Было #3DDC84 (яркий), из-за чего до применения темы
                                интерфейс на миг показывался другим оттенком. */
  --theme-color-rgb: 61, 220, 132;
  --bg: #0a0c0f;
  --c1: #12161c;
  --c2: #171c19;
  --c3: #1C1F1D;      /* нейтральный вместо зеленоватого */
  --border: rgba(var(--theme-color-rgb), 0.12);
  --border-dim: rgba(255,255,255,0.06);
  --text: #eef2f6;
  --muted: #8b958e;
  --r: 12px;
  --r-card: 16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;margin:0;padding:0;}

*::-webkit-scrollbar{width:3px;}
*::-webkit-scrollbar-thumb{background:rgba(var(--theme-color-rgb),0.12);border-radius:4px;}
.hidden{display:none !important;}

body,html{
  height:100dvh;width:100vw;overflow:hidden;
  background:var(--bg);
  background-image:radial-gradient(ellipse at 50% -10%,rgba(var(--theme-color-rgb),0.05) 0%,transparent 55%);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased;
}

/* ====== КАПСУЛЫ — ОБЩИЙ СТИЛЬ ====== */
.btn,.btn-outline,.menu-btn,.tab,.slot-btn,.theme-pill,.acc-link-btn,.creo-type-btn {
  border-radius:var(--r) !important;
  cursor:pointer;
  transition:all 0.18s ease !important;
  font-weight:600;
  position:relative;
  border:1px solid var(--border-dim) !important;
  color:rgba(255,255,255,0.7) !important}
.btn:hover,.btn-outline:hover{
  border-color:var(--border) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(var(--theme-color-rgb),0.1) !important;
  background:var(--c2) !important;
}
.btn:active{opacity:0.75;}

/* PRIMARY — зелёная капсула с свечением */
.btn-primary,
button[style*="background:var(--theme-color)"],
#btnAiSend,#btnMaxSend,#btnElGen,#btnDubRun,#btnCloneRun,
#btnStockFetch,#btnStartShare,#btnAppTz,#btnAppTrans,#btnAppOcr {
  background:linear-gradient(135deg,rgba(var(--theme-color-rgb),0.18),rgba(var(--theme-color-rgb),0.08)) !important;
  border:1px solid rgba(var(--theme-color-rgb),0.35) !important;
  color:var(--theme-color) !important;
  box-shadow:0 0 18px rgba(var(--theme-color-rgb),0.12) !important;
}
.btn-primary:hover,#btnAiSend:hover,#btnMaxSend:hover{
  box-shadow:0 0 26px rgba(var(--theme-color-rgb),0.22) !important;
  border-color:rgba(var(--theme-color-rgb),0.55) !important;
}

/* ====== ГЛАВНОЕ МЕНЮ ====== */
.home-grid{display:flex;flex-direction:column;gap:9px;padding:0 14px 40px;max-width:900px;margin:0 auto;}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}

.menu-btn{
  min-height:64px !important;
  display:flex !important;flex-direction:column !important;
  align-items:center !important;justify-content:center !important;
  gap:10px !important;padding:16px 20px !important;width:100%;
  border-radius:var(--r) !important;
  border:1px solid var(--border-dim) !important}
.menu-btn:hover{
  border-color:var(--border) !important}
.menu-btn .icon{font-size:22px !important;color:rgba(255,255,255,0.65) !important;display:block !important}
.menu-btn .text{font-size:13px !important;font-weight:600 !important;color:rgba(255,255,255,0.8) !important}

/* Первая кнопка — выделенная зелёная */
.home-grid > .menu-btn:first-child{
  border-color:rgba(var(--theme-color-rgb),0.3) !important}
.home-grid > .menu-btn:first-child .icon{color:var(--theme-color) !important}
.home-grid > .menu-btn:first-child .text{color:var(--theme-color) !important}

/* ====== КАРТОЧКИ (блоки, не капсулы) ====== */
.card,.acc-card,.metric-card,.glass-reflect,.drop-zone,.modal-content,.acc-item{
  border:1px solid var(--border-dim) !important;
  border-radius:var(--r-card) !important}
.card:hover,.glass-reflect:hover:not(input):not(textarea):not(select):not(.btn):not(.menu-btn):not(.tab){
  border-color:rgba(var(--theme-color-rgb),0.15) !important;
  transform:none !important}

/* ====== ИНПУТЫ ====== */
.form-control,
input:not([type=checkbox]):not([type=range]):not([type=file]),
textarea,select{
  background:rgba(0,0,0,0.45) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:10px !important;
  color:#fff !important;
  padding:11px 16px !important;
  font-size:13px !important;font-family:inherit;
  transition:border-color 0.15s !important;
  box-shadow:none !important;width:100%;
}
.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:rgba(var(--theme-color-rgb),0.4) !important;
  box-shadow:0 0 0 3px rgba(var(--theme-color-rgb),0.07) !important;
}
textarea{border-radius:12px !important;}
select option{background:#1c211d;color:#fff;}
.form-label{
  font-size:11px !important;font-weight:700 !important;
  color:var(--theme-color) !important;
  text-transform:uppercase;letter-spacing:0.8px;
  display:block;margin-bottom:6px !important;margin-top:14px !important;
}

/* ====== ВКЛАДКИ ====== */
.tabs{
  display:flex;gap:4px;
  background:rgba(0,0,0,0.4) !important;
  border:1px solid var(--border-dim) !important;
  border-radius:var(--r) !important;
  padding:4px !important;margin-bottom:14px !important;
  box-shadow:none !important;
}
.tab{
  flex:1;padding:9px 8px !important;
  border-radius:var(--r) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--muted) !important;
  font-size:11px !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:0.5px;
  text-align:center;box-shadow:none !important;
}
.tab.active{
  background:rgba(var(--theme-color-rgb),0.12) !important;
  border-color:rgba(var(--theme-color-rgb),0.3) !important;
  color:var(--theme-color) !important;
  box-shadow:0 0 12px rgba(var(--theme-color-rgb),0.1) !important;
}

/* ====== НАВБАР ====== */
@media(min-width:850px){
  nav.nav{
    background:rgba(10,13,11,0.97) !important;
    backdrop-filter:blur(20px) !important;
    border-left:1px solid var(--border-dim) !important;
    box-shadow:none !important;
  }
  .nav-item{
    border-radius:var(--r) !important;
    color:var(--muted) !important}
  .nav-item:hover{color:rgba(var(--theme-color-rgb), 0.5) !important}
  .nav-item.active{
    border:1px solid rgba(var(--theme-color-rgb),0.3) !important;
    color:var(--theme-color) !important}
  #chat-tab-team{background:rgba(10,13,11,0.99) !important;border-right:1px solid var(--border-dim) !important;box-shadow:none !important;}
}

/* ====== АККАУНТЫ ====== */
.acc-item{border-radius:var(--r-card) !important;margin-bottom:7px;overflow:hidden}
.acc-item:hover{border-color:rgba(var(--theme-color-rgb),0.2) !important}
.acc-item.open{border-color:rgba(var(--theme-color-rgb),0.3) !important}
.acc-item-header{display:flex;align-items:center;gap:12px;padding:13px 15px}
.acc-item-icon{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(var(--theme-color-rgb),0.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acc-item-icon i{color:var(--theme-color);font-size:15px}
.acc-chevron{color:#2a3d2e;transition:transform 0.2s;margin-left:auto;font-size:11px;}
.acc-item.open .acc-chevron{transform:rotate(90deg);color:rgba(var(--theme-color-rgb),0.5)}
.acc-item-body{display:none;padding:0 14px 14px}
.acc-item.open .acc-item-body{display:block}
.acc-field{
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:10px;padding:10px 14px;
  cursor:pointer;margin-bottom:6px;
  transition:border-color 0.15s;
  display:flex;justify-content:space-between;align-items:center;
}
.acc-field:hover{border-color:rgba(var(--theme-color-rgb),0.25);}
.acc-field-label{font-size:10px;color:#2a3d2e;margin-bottom:2px;text-transform:uppercase;letter-spacing:0.5px;}
.acc-field-value{color:#e0ffe8;font-size:13px;word-break:break-all;}
.acc-field:hover .acc-field-copy{color:var(--theme-color);}
.acc-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.acc-link-btn{
  padding:6px 14px;
  background:rgba(var(--theme-color-rgb),0.08);
  border:1px solid rgba(var(--theme-color-rgb),0.2) !important;
  border-radius:var(--r) !important;
  color:var(--theme-color) !important;
  text-decoration:none;font-size:12px;font-weight:600;
  cursor:pointer;display:inline-block;transition:all 0.15s;
}
.acc-link-btn:hover{background:rgba(var(--theme-color-rgb),0.16);}

/* ====== ДРОПзоны ====== */
.drop-zone{
  border:1px dashed rgba(var(--theme-color-rgb),0.18) !important;
  border-radius:var(--r-card) !important;
  padding:26px 20px !important;text-align:center;
  cursor:pointer;transition:all 0.2s !important;
  color:var(--muted)}
.drop-zone:hover{border-color:rgba(var(--theme-color-rgb),0.4) !important}
.drop-zone i{color:var(--theme-color) !important}

/* ====== HEADER ====== */
.header{text-align:center;margin-bottom:18px;padding-top:8px;}
.header h2{
  font-size:17px;font-weight:900;color:#fff;margin:0;
  letter-spacing:2px;text-transform:uppercase}

/* ====== МОДАЛКИ ====== */
.modal{background:rgba(0,0,0,0.88) !important;backdrop-filter:blur(16px) !important;}
.modal-content{
  border:1px solid rgba(var(--theme-color-rgb),0.12) !important;
  border-radius:var(--r-card) !important;
  padding:20px !important}

/* ====== КАБИНЕТ — компактный ====== */
.cabinet-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.metric-card{
  padding:10px 12px !important;
  background:var(--c1) !important;
  border:1px solid var(--border-dim) !important;
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
}
.metric-card.full{grid-column:1/-1;}
.metric-card.pay-row{grid-column:1/-1;}
.metric-top{display:flex;align-items:center;gap:7px;margin-bottom:3px;}
.metric-icon{font-size:12px;color:var(--theme-color);}
.metric-title{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.metric-value{font-size:16px !important;font-weight:800 !important;color:#fff;}
.theme-text{color:var(--theme-color) !important;}

/* Кнопки темы — капсулы */
.theme-pill{
  flex:1;padding:8px 0;
  border-radius:var(--r) !important;
  border:1px solid var(--border-dim) !important;
  background:var(--c1) !important;
  color:var(--muted) !important;
  font-size:11px !important;font-weight:700 !important;
  cursor:pointer;text-align:center;letter-spacing:1px;
  transition:all 0.15s !important;box-shadow:none !important;
}
.theme-pill.active{
  border-color:rgba(var(--theme-color-rgb),0.35) !important;
  background:rgba(var(--theme-color-rgb),0.1) !important;
  color:var(--theme-color) !important;
  box-shadow:0 0 12px rgba(var(--theme-color-rgb),0.1) !important;
}

/* ====== НЕЙРО ====== */
.neuro-grid-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px;}
.neuro-grid-tabs .tab{
  background:rgba(255,255,255,0.02) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:var(--r) !important;
  padding:10px 4px !important;
  font-size:10px !important;font-weight:700;
  color:rgba(255,255,255,0.3) !important;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:all 0.15s;text-transform:uppercase;
  box-shadow:none !important;
}
.neuro-grid-tabs .tab i{font-size:16px !important;color:rgba(255,255,255,0.25) !important;}
.neuro-grid-tabs .tab.active{
  background:rgba(var(--theme-color-rgb),0.1) !important;
  color:var(--theme-color) !important;
  border-color:rgba(var(--theme-color-rgb),0.3) !important;
  box-shadow:0 0 10px rgba(var(--theme-color-rgb),0.08) !important;
}
.neuro-grid-tabs .tab.active i{color:var(--theme-color) !important;}

/* ====== КРЕО ====== */
.creo-types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
.creo-type-btn{
  padding:9px 6px;border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:var(--r) !important;background:rgba(0,0,0,0.25) !important;
  color:var(--muted) !important;font-size:12px;font-weight:600;
  cursor:pointer;transition:0.15s;text-align:center;
}
.creo-type-btn.active{
  background:rgba(var(--theme-color-rgb),0.1) !important;
  border-color:rgba(var(--theme-color-rgb),0.35) !important;
  color:var(--theme-color) !important;
}
.creo-kpi-grid{display:grid;gap:8px;}
.kpi-row{display:flex;align-items:center;gap:10px;}
.kpi-label{font-size:12px;color:var(--muted);min-width:100px;}
.kpi-slider{flex:1;accent-color:var(--theme-color);}
.kpi-value{min-width:20px;text-align:right;font-weight:700;color:var(--theme-color);font-size:13px;}
.upload-progress{height:3px;background:rgba(var(--theme-color-rgb),0.1);border-radius:4px;overflow:hidden;}
.upload-progress-bar{height:100%;background:var(--theme-color);transition:width 0.3s;}
.slot-btn{
  padding:7px 16px;background:var(--c1);
  border:1px solid var(--border-dim) !important;border-radius:var(--r) !important;
  cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);transition:0.15s;
}
.slot-btn.active{background:rgba(var(--theme-color-rgb),0.1) !important;border-color:rgba(var(--theme-color-rgb),0.3) !important;color:var(--theme-color);box-shadow:0 0 10px rgba(var(--theme-color-rgb),0.08);}

/* ====== ЧАТ ====== */
.max-msg-sent .max-bubble{
  background:rgba(var(--theme-color-rgb),0.12) !important;
  border:1px solid rgba(var(--theme-color-rgb),0.22);color:#e0ffe8;
  border-radius:14px 14px 4px 14px;
}
.max-msg-received .max-bubble{
  background:var(--c2);border:1px solid var(--border-dim);color:rgba(255, 255, 255, 0.9);
  border-radius:14px 14px 14px 4px;
}
.max-bubble{padding:9px 12px;max-width:78%;font-size:14px;word-break:break-word;}
.max-bubble-img{max-width:260px;border-radius:10px;cursor:pointer;display:block;margin-bottom:4px;}
.max-bubble-video{max-width:260px;border-radius:10px;display:block;margin-bottom:4px;}
.max-bubble-file{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(0,0,0,0.3);border-radius:10px;margin-bottom:4px;cursor:pointer;border:1px solid var(--border-dim);}
.max-reply-preview{background:rgba(var(--theme-color-rgb),0.05);border-left:2px solid var(--theme-color);border-radius:4px;padding:4px 8px;margin-bottom:5px;font-size:11px;color:rgba(var(--theme-color-rgb),0.7);}
.max-time{font-size:10px;color:rgba(255,255,255,0.2);text-align:right;margin-top:2px;}

/* ====== MISC ====== */
.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:18px;}.mt-3{margin-top:12px;}
.btn-block{width:100%;text-align:center;}.btn-sm{padding:6px 12px !important;font-size:12px !important;}

/* TOAST */
.tg-toast{
  position:fixed;bottom:24px;left:24px;
  background:#111512;border:1px solid rgba(var(--theme-color-rgb),0.22);
  border-radius:10px;padding:13px 20px;
  z-index:99999999;color:#fff;font-size:14px;font-weight:500;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  transform:translateY(100px);opacity:0;
  transition:transform 0.3s ease,opacity 0.3s;
  min-width:200px;max-width:300px;
}
.tg-toast.show{transform:translateY(0);opacity:1;}

/* БЕЙДЖ */
.nav-badge{position:absolute;top:5px;right:5px;background:var(--theme-color);color:#000;border-radius:10px;padding:1px 5px;font-size:10px;font-weight:900;min-width:16px;text-align:center;}

/* ПРОКСИ ФРЕЙМ */
#proxyFrame{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999998;background:var(--bg);flex-direction:column;}
#proxyFrame.visible{display:flex;}
#proxyFrame iframe{flex:1;border:none;}
#proxyFrameBar{background:#0e1210;padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-dim);flex-shrink:0;}
#proxyFrameUrl{flex:1;background:rgba(0,0,0,0.5);border:1px solid var(--border-dim);border-radius:20px;color:#fff;padding:7px 14px;font-size:12px;}

/* МЕДИА */
#mediaViewer{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999999999;background:rgba(0,0,0,0.97);align-items:center;justify-content:center;}
#mediaViewer.visible{display:flex;}
#mediaViewerClose{position:absolute;top:20px;right:20px;color:#fff;font-size:22px;cursor:pointer;background:rgba(255,255,255,0.08);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* КОНТЕКСТНОЕ МЕНЮ */
#maxContextMenu{position:fixed;z-index:9999999;background:#111512;border:1px solid rgba(var(--theme-color-rgb),0.15);border-radius:16px;padding:5px;box-shadow:0 8px 24px rgba(0,0,0,0.6);display:none;min-width:155px;}
.ctx-item{padding:10px 14px;color:rgba(255, 255, 255, 0.9);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:10px;border-radius:10px;transition:background 0.1s;}
.ctx-item:hover{background:rgba(var(--theme-color-rgb),0.08);color:#fff;}
.ctx-item.danger{color:#ff5555;}
.ctx-item i{width:16px;text-align:center;}

/* REPLY/ATTACH */
#maxReplyBar{display:none;padding:7px 14px;background:rgba(var(--theme-color-rgb),0.05);border-top:1px solid rgba(var(--theme-color-rgb),0.1);font-size:12px;color:rgba(var(--theme-color-rgb), 0.5);align-items:center;justify-content:space-between;flex-shrink:0;}
#maxReplyBar.visible{display:flex;}
#maxAttachPreview{display:none;padding:8px 14px;background:rgba(0,0,0,0.2);border-top:1px solid var(--border-dim);gap:8px;flex-wrap:wrap;flex-shrink:0;}
#maxAttachPreview.visible{display:flex;}
.attach-thumb{position:relative;width:55px;height:55px;border-radius:10px;overflow:hidden;flex-shrink:0;}
.attach-thumb img,.attach-thumb video{width:100%;height:100%;object-fit:cover;}
.attach-thumb .rm{position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.75);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:9px;color:#fff;}

.cyber-loader { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.cyber-ring { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--theme-color); border-bottom-color: var(--theme-color); border-left-color: rgba(var(--theme-color-rgb),0.1); border-right-color: rgba(var(--theme-color-rgb),0.1); animation: cyber-spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; filter: drop-shadow(0 0 10px rgba(var(--theme-color-rgb),0.5)); }
.cyber-core { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--theme-color); animation: cyber-pulse 1.2s ease-in-out infinite; filter: drop-shadow(0 0 15px var(--theme-color)); }
@keyframes cyber-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes cyber-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }

/* === НОВЫЕ КЛАССЫ ДЛЯ ГЛАВНОЙ (ВИЗУАЛ) === */
.green-text .icon i, .green-text .text {
    color: var(--theme-color) !important;
}
.thin-btn .icon {
    font-size: 16px !important;
    display: inline-flex !important;
}
.thin-btn .text {
    font-size: 13px !important;
}

/* ====== ПРЕМИАЛЬНОЕ СТЕКЛО И ПОДСВЕТКА ЗА КУРСОРOM ====== */
.menu-btn, .card, .acc-item, .glass-reflect {
    position: relative !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important}

.menu-btn:hover, .card:hover, .acc-item:hover, .glass-reflect:hover {
    border-color: rgba(var(--theme-color-rgb), 0.25) !important}

/* Динамический след от курсора */
.menu-btn::before, .card::before, .acc-item::before, .glass-reflect::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0}

.menu-btn:hover::before, .card:hover::before, .acc-item:hover::before, .glass-reflect:hover::before {
    opacity: 1}

/* Чтобы текст и иконки были поверх свечения */
.menu-btn > *, .card > *, .acc-item > *, .glass-reflect > * {
    position: relative;
    z-index: 1}

/* Глубокий, насыщенный темный фон */
body, html {
    background-color: #080a09 !important;
    background-image: radial-gradient(ellipse at 50% -20%, rgba(var(--theme-color-rgb), 0.09) 0%, transparent 65%) !important;
}

/* === PREMIUM BLACK-GREEN CAPSULE GLASS === */
:root {
    /* Очень глубокий черный фон с легчайшим зеленым отливом */
    --bg: #020403 !important;
    --border-dim: rgba(var(--theme-color-rgb), 0.15) !important;
    /* Возвращаем капсульную форму */
    --r: 32px !important;
    --r-card: 28px !important;
}

body, html {
    background-color: var(--bg) !important;
    /* Мягкий неоновый свет, идущий сверху */
    background-image: radial-gradient(ellipse at 50% 0%, rgba(var(--theme-color-rgb), 0.12) 0%, transparent 70%) !important;
}

/* Стекло для кнопок, карточек, дропзон и инпутов */
.menu-btn, .card, .acc-item, .glass-reflect, .drop-zone, .form-control {
    border-radius: var(--r) !important;
    /* Градиент для объема: сверху чуть светлее, снизу уходит во мрак */
    background: linear-gradient(145deg, rgba(15, 30, 20, 0.65), rgba(2, 6, 4, 0.8)) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--border-dim) !important;
    /* Верхний светлый блик + сильная внешняя тень */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.6),
        0 12px 32px -10px rgba(0, 0, 0, 0.9) !important}

/* Эффект наведения (загорается неоном) */
.menu-btn:hover, .card:hover, .acc-item:hover, .drop-zone:hover {
    border-color: rgba(var(--theme-color-rgb), 0.5) !important;
    transform: translateY(-2px) !important}

/* Иконки горят насыщенным цветом */
.menu-btn .icon i, .nav-item i, .fas, .far {
    color: var(--theme-color) !important}

/* Все тексты внутри кнопок ярко-белые, чтобы контрастировало с черным стеклом */
.menu-btn .text {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important}

/* Заголовки светятся */
.header h2, .design-gang-title {
    color: #ffffff !important}

/* Правое меню навигации (стеклянная док-станция) */
nav.nav {
    background: rgba(5, 10, 7, 0.7) !important;
    border-left: 1px solid rgba(var(--theme-color-rgb), 0.1) !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.8) !important;
}
.nav-item.active {
    border: 1px solid rgba(var(--theme-color-rgb), 0.4) !important;
    border-radius: 20px !important}





/* ========================================================= */
/* === CLEAN PREMIUM DESIGN (THEME VARIABLES) === */
/* ========================================================= */

/* Убиваем пластик: Тонкие матовые границы и глубокие тени */
.menu-btn, .card, .acc-item, .glass-reflect, .drop-zone {
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(var(--theme-color-rgb), 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 28px !important;
    transition: all 0.25s ease !important}

/* Эффект наведения: ТУСКЛОЕ, благородное зеленое свечение */
.menu-btn:hover, .card:hover, .acc-item:hover, .drop-zone:hover {
    border-color: rgba(var(--theme-color-rgb), 0.2) !important;
    transform: translateY(-1px) !important}

/* --- ИКОНКА ГОРИТ ЗЕЛЕНЫМ ПРИ НАВЕДЕНИИ --- */
/* Target FontAwesome inside span.icon when parent button is hovered */
.menu-btn:hover .icon i {
    color: var(--theme-color) !important;
    transition: color 0.25s ease !important}

/* Класс для кнопок, которые всегда зелёные (Сжать видео и тд) */
.btn-green-glow {
    border: 1px solid rgba(var(--theme-color-rgb), 0.15) !important;
    border-top: 1px solid rgba(var(--theme-color-rgb), 0.25) !important}
.btn-green-glow .icon i, .btn-green-glow .text {
    color: var(--theme-color) !important;
    /* УМЕНЬШАЕМ ЯРКОСТЬ ТЕКСТА: Слабое свечение */
    text-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.15) !important}

/* Тонкая кнопка парсера (без изменений визуала) */
.btn-thin-parser {
    flex-direction: row !important;
    min-height: 54px !important;
    padding: 0 24px !important;
    gap: 16px !important;
}
.btn-thin-parser .icon { margin-bottom: 0 !important; font-size: 18px !important; }
.btn-thin-parser .text { font-size: 14px !important; }

/* Обычные тексты белые, иконки белые (неактивные) */
.menu-btn .text { color: #ffffff !important; font-weight: 500 !important; letter-spacing: 0.5px !important}
.menu-btn .icon i { color: #ffffff !important; opacity: 0.8; font-size: 22px !important; display: block !important; margin-bottom: 5px !important; transition: color 0.25s ease !important}

/* Правое меню: Восстановление */
@media (min-width: 850px) {
    nav.nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(10, 15, 12, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 20px !important;
        padding: 16px 8px !important;
    }
}


/* === ИСПРАВЛЕНИЕ КНОПОК И ПОЛЕЙ В ЧАТАХ === */
#btnAiSend, #btnMaxSend {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#btnAiSend i, #btnMaxSend i {
    font-size: 18px !important;
    margin: 0 !important;
    display: block !important;
    color: #fff !important;
    opacity: 1 !important;
    transform: translateX(-1px); /* Визуальная центровка самолетика */
}

#aiInput, #maxInput {
    height: 46px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Чтобы контент не прилипал и не обрезался снизу */
#chat-tab-ai .card, #maxChatScreen {
    margin-bottom: 24px !important}


/* === ИСПРАВЛЕНИЕ ЧАТА И НОВЫЙ ИНПУТ === */
#pages {
    height: 100vh !important;
    overflow: hidden !important; /* Убираем глобальный скролл, чтобы страницы скроллились внутри */
}
.page.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
#page-chats {
    padding-bottom: 24px !important;
}
#chat-tab-ai, #chat-tab-team {
    flex: 1 !important;
    min-height: 0 !important; /* Флекс-магия, чтобы дочерние элементы не вываливались */
}
#chat-tab-ai .card {
    height: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important}
#aiChatBox {
    flex: 1 !important;
    overflow-y: auto !important;
    margin-bottom: 16px !important;
    padding-right: 8px !important;
}

/* --- Премиальная капсула ввода --- */
.chat-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 6px 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.chat-input-wrapper #aiInput {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #fff !important;
}
.chat-input-wrapper #aiInput:focus {
    box-shadow: none !important;
}
.chat-input-wrapper #btnAiSend {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--theme-color) !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(var(--theme-color-rgb), 0.3) !important;
    transition: 0.2s ease !important;
}
.chat-input-wrapper #btnAiSend:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(var(--theme-color-rgb), 0.5) !important;
}
/* Делаем иконку на зеленой кнопке черной для максимального контраста */
.chat-input-wrapper #btnAiSend i {
    color: #050806 !important;
    font-size: 18px !important;
    margin: 0 !important;
    transform: translateX(-1px) translateY(1px); /* Идеальная оптическая центровка */
}


/* ========================================================= */
/* === PREMIUM FORMS, MODALS & SLIDERS === */
/* ========================================================= */

/* Модалки (фон и стекло) */
.modal-content {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important}

.modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }

/* Заголовки полей (Лейблы) */
label, .form-label, .modal-body .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Инпуты и Селекты */
.form-control, .form-select, select, input[type="text"], input[type="number"], input[type="url"] {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease !important;
}

.form-control:focus, .form-select:focus, select:focus {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(var(--theme-color-rgb), 0.5) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), 0.1), inset 0 2px 5px rgba(0,0,0,0.3) !important;
    outline: none !important;
}

/* === ПОЛЗУНКИ (SLIDERS) === */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 12px 0;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0 0 12px rgba(var(--theme-color-rgb), 0.5);
    border: 2px solid #fff;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--theme-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px; /* Выравнивание по центру трека */
    transition: transform 0.15s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* === ВНУТРЕННИЕ ВКЛАДКИ (КРЕО 1, КРЕО 2) === */
.creo-tabs, ul.nav-tabs, .nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 6px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    margin-bottom: 24px !important;
    list-style: none !important; /* Убираем баг с цифрами 1 2 3 */
}
.creo-tabs li, .nav-item {
    list-style: none !important;
    margin: 0 !important;
    flex: 1 !important}
.creo-tab, .nav-link {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}
.creo-tab.active, .nav-link.active {
    background: rgba(var(--theme-color-rgb), 0.1) !important;
    color: var(--theme-color) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(var(--theme-color-rgb), 0.25) !important;
}

/* === КНОПКИ ВЫБОРА (Виды креатива) === */
.creo-type-btn, .option-btn, .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
}
.creo-type-btn:hover, .option-btn:hover, .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}
.creo-type-btn.active, .option-btn.active, .btn-outline-secondary.active {
    background: rgba(var(--theme-color-rgb), 0.1) !important;
    border-color: rgba(var(--theme-color-rgb), 0.4) !important;
    color: var(--theme-color) !important;
    box-shadow: inset 0 0 15px rgba(var(--theme-color-rgb), 0.1) !important;
}

/* Дропзона внутри модалки */
.drop-zone {
    border: 2px dashed rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important}
.drop-zone:hover {
    border-color: rgba(var(--theme-color-rgb), 0.4) !important}


/* === PREMIUM COMPACT MODALS === */

/* Стекло */
.modal-content {
    -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 28px !important;
    max-height: 96vh !important}

.modal-header { border-bottom: none !important; padding: 16px 24px 4px !important; }
.modal-body { padding: 4px 24px 20px !important; overflow-y: visible !important; }

/* Ужимаем Лейблы */
.modal-body label, .modal-body .form-label, .modal-body .text-muted {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Ужимаем Инпуты и Селекты */
.modal-body .form-control, .modal-body .form-select, .modal-body select, .modal-body input {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-bottom: 8px !important;
    color: #fff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Теги (Виды креатива) */
.modal-body .btn-outline-secondary, .modal-body .option-btn, .modal-body .creo-type-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    height: 28px !important;
    margin: 2px 2px 6px 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}
.modal-body .btn-outline-secondary.active, .modal-body .option-btn.active {
    background: rgba(var(--theme-color-rgb), 0.15) !important;
    border-color: rgba(var(--theme-color-rgb), 0.4) !important;
    color: var(--theme-color) !important;
}

/* === РЕВОЛЮЦИЯ СЛАЙДЕРОВ (Строчные KPI) === */
.kpi-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 6px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.kpi-row label {
    margin: 0 !important;
    width: 110px !important; /* Фиксируем ширину текста */
    font-size: 10px !important;
    color: rgba(255,255,255,0.7) !important;
}
.kpi-row input[type="range"] {
    flex: 1 !important;
    margin: 0 !important;
    height: 4px !important;
}
.kpi-row span, .kpi-row div {
    width: 24px !important;
    text-align: right !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--theme-color) !important;
}

/* Дропзона */
.drop-zone {
    min-height: 50px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    margin-top: 4px !important}
.drop-zone i { font-size: 18px !important; margin-bottom: 4px !important}
.drop-zone span { font-size: 11px !important}


/* =================== */


/* ========================================================= */
/* ========================================================= */
@media (min-width: 850px) {
    /* Переводим центральный блок на жесткие координаты */
    #pages {
        position: fixed !important;
        top: 0 !important;
        left: 320px !important; /* Упираемся в левое меню */
        right: 120px !important;
        width: auto !important; /* Запрещаем 100%, ширина высчитывается строго между left и right */
        bottom: 0 !important;
        padding-right: 10px !important; /* Легкий визуальный зазор */
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Режем всё, что пытается вылезти */
    }
    
    /* Убиваем любые попытки чата растянуться шире новой зоны */
    #page-chats, .chat-tab-content, #chat-tab-ai, #chat-tab-team, .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-right: 0 !important}
    
    /* Страховка для инпута: он не должен вываливаться */
    .chat-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* === УНИЧТОЖЕНИЕ ПОЛОСЫ СПРАВА === */
#pages, #page-chats, .chat-tab-content, #chat-tab-ai, .card, .main-content {
    border-right: none !important;
    outline: none !important}
nav.nav {
    border-left: none !important;
}
/* ================================= */


/* ========================================================= */
/* ========================================================= */
@media (min-width: 850px) {
    /* 1. ЖЕСТКО УБИВАЕМ ФОН У ВСЕХ РАСТЯНУТЫХ КОНТЕЙНЕРОВ */
    #pages, .main-content, #page-chats, .tab-content, .tab-pane, .card {
        border: none !important}

    /* 2. ЦЕНТРИРУЕМ ИСТОРИЮ СООБЩЕНИЙ */
    /* Ищем контейнеры, где лежат сами сообщения, и сжимаем их к центру */
    .chat-messages, 
    .chat-history, 
    #chat-tab-ai .card-body,
    #chat-tab-team .card-body,
    .chat-content {
        max-width: 850px !important; /* Оптимальная ширина чата */
        width: 100% !important;
        margin: 0 auto !important; /* Центрируем по горизонтали */
    }

    /* 3. СТРОКА ВВОДА */
    .chat-input-wrapper {
        width: 100% !important;
        position: static !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}


/* ========================================================= */
/* === ПОЛНОЕ УНИЧТОЖЕНИЕ ПОДЛОЖКИ И ГРАНИЦ ПРАВОГО МЕНЮ === */
/* ========================================================= */

/* Жестко убиваем фон, тени и рамки у самой капсулы меню и её возможных родителей */
nav.nav, 
.right-sidebar, 
#right-sidebar, 
.sidebar-right,
aside,
.nav-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Вычищаем системные классы разделителей (Bootstrap и т.д.), если они висят на контейнере */
.border-start, .border-left, .border-end, .border-right {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
}


/* ========================================================= */
/* ========================================================= */
@media (min-width: 850px) {
    /* 1. УБИВАЕМ ЛИШНЮЮ ПОДЛОЖКУ */
    /* Делаем все родительские карточки чата полностью прозрачными */
    #page-chats .card, 
    .tab-pane .card, 
    #chat-tab-ai, 
    .chat-container,
    #chat-tab-ai .card-body {
        border: none !important}

    /* 2. ОТОДВИГАЕМ ИСТОРИЮ СООБЩЕНИЙ ОТ КНОПОК */
    .chat-content, 
    .chat-history, 
    .chat-messages {
        margin-right: 120px !important;
        padding-right: 20px !important;
    }

    /* 3. ЖЕСТКО ФИКСИРУЕМ ПОЛЕ ВВОДА (ИНПУТ) */
    /* Оно больше не 100% ширины. Оно натянуто строго между двумя координатами */
    .chat-input-wrapper, 
    .chat-input-container {
        position: fixed !important;
        bottom: 24px !important;
        right: 120px !important;
        left: 320px !important;  /* СТОП-ЛИНИЯ: старт после левого меню */
        width: auto !important;  /* Отключаем растягивание */
        max-width: none !important;
        
        /* Оставляем одну аккуратную подложку только для самого инпута */
        background: rgba(10, 15, 12, 0.7) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
        z-index: 100 !important;
    }
}





/* === ФИНАЛЬНЫЙ ЧИСТЫЙ ЧАТ === */
@media (min-width: 850px) {
    /* 1. Убиваем все системные подложки, чтобы не было двойного мыла */
    .chat-footer, .card-footer, #page-chats .card, #chat-tab-ai .card {
        border: none !important}

    /* 2. Сама капсула ввода: жестко между левым и правым меню */
    .chat-input-wrapper, .chat-input-area {
        position: fixed !important;
        bottom: 24px !important;
        left: 320px !important;  /* Ровно после левого меню */
        right: 120px !important; /* Ровно перед правыми кнопками */
        width: auto !important;  /* ПОЗВОЛЯЕТ РАСТЯНУТЬСЯ МЕЖДУ LEFT И RIGHT */
        max-width: none !important;
        margin: 0 !important;
        
        /* Дизайн капсулы */
        background: rgba(10, 15, 12, 0.7) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
        
        /* Внутренний флекс */
        display: flex !important;
        align-items: center !important;
        padding: 12px 20px !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
    }

    /* 3. Форма внутри капсулы должна занимать 100% ширины */
    .chat-input-wrapper form, 
    .chat-input-wrapper .input-group {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Поле ввода: забирает ВСЁ свободное пространство */
    .chat-input-wrapper input, 
    .chat-input-wrapper textarea {
        flex-grow: 1 !important; /* РАСТЯГИВАЕМ НА ВСЮ ШИРИНУ */
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 15px !important;
    }

    /* 5. Кнопка отправки: аккуратно прижата к правому краю */
    .chat-input-wrapper button, 
    .chat-input-wrapper .btn-send {
        flex-shrink: 0 !important; /* Не даем ей сплющиться */
        margin: 0 0 0 16px !important; /* Отступ только слева от текста */
        position: static !important;
        transform: none !important;
    }
}

/* === TELEGRAM STYLE ANIMATIONS === */
@keyframes msgIn {
    from { opacity:0; transform:translateY(8px) scale(0.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes msgInLeft {
    from { opacity:0; transform:translateX(-8px) scale(0.97); }
    to   { opacity:1; transform:translateX(0) scale(1); }
}
.max-msg-sent   { animation:msgIn 0.15s ease; }
.max-msg-received { animation:msgInLeft 0.15s ease; }

/* Пузыри как в TG */
.max-msg-sent .max-bubble {
    background: var(--theme-color) !important;
    color: #fff !important;
    border-radius: 18px 18px 4px 18px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.max-msg-received .max-bubble {
    background: #1e2428 !important;
    color: #e8e8e8 !important;
    border-radius: 18px 18px 18px 4px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.max-bubble { padding:8px 12px !important; }
.max-time { color:rgba(255,255,255,0.55) !important; font-size:11px !important; }
.max-msg-received .max-time { color:rgba(255,255,255,0.35) !important; }

/* Тики как в TG */
.tg-tick-sent { color:rgba(255,255,255,0.7); }
.tg-tick-read { color:#fff; }

/* Загрузка файла */
.upload-circle { transition: stroke-dashoffset 0.3s ease; }

/* Контакты как в TG */
#maxContactsList > div { transition: background 0.1s; }

/* Закреп */
.pinned-chat { background: rgba(var(--theme-color-rgb),0.05) !important; }

/* Медиа в пузыре */
.max-bubble-img { 
    max-width:260px; border-radius:12px !important; 
    cursor:pointer; display:block; margin-bottom:2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.max-bubble-video { 
    max-width:260px; border-radius:12px !important; 
    display:block; margin-bottom:2px;
}

/* Reply preview */
.max-reply-preview {
    border-left: 3px solid rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
}
.max-msg-sent .max-reply-preview {
    border-left-color: rgba(255,255,255,0.6) !important;
    background: rgba(255,255,255,0.12) !important;
}

/* Фикс размера пузырей с медиа */
.max-msg-sent, .max-msg-received {
    display: flex !important;
}
.max-msg-sent .max-bubble,
.max-msg-received .max-bubble {
    max-width: 320px !important;
    width: fit-content !important;
    min-width: 0 !important;
}
.max-bubble-img {
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
    margin: 0 !important;
}
.max-bubble-video {
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
    margin: 0 !important;
}

/* ===== ПРЕМИАЛЬНАЯ НАВИГАЦИЯ ===== */
@media (min-width: 850px) {
    nav.nav {
        background: rgba(8, 10, 9, 0.92) !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        box-shadow: -8px 0 32px rgba(0,0,0,0.6) !important;
    }

    .nav-item {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;
        max-width: 68px !important;
        max-height: 68px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        transition: all 0.2s ease !important}

    .nav-item i {
        font-size: 22px !important;
        color: rgba(255,255,255,0.3) !important;
        margin-bottom: 5px !important}

    .nav-item span {
        font-size: 8px !important;
        color: rgba(255,255,255,0.25) !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important}

    .nav-item:hover:not(.active) {
        border-color: rgba(255,255,255,0.08) !important;
        transform: none !important}
    .nav-item:hover:not(.active) i {
        color: rgba(255,255,255,0.6) !important}
    .nav-item:hover:not(.active) span {
        color: rgba(255,255,255,0.5) !important}

    /* Активная кнопка — глубокое премиальное свечение */
    .nav-item.active {
        border: 1px solid rgba(var(--theme-color-rgb), 0.2) !important;
        transform: none !important}
    .nav-item.active i {
        color: var(--theme-color) !important}
    .nav-item.active span {
        color: rgba(var(--theme-color-rgb), 0.8) !important}
}




/* ===== ПРЕМИАЛЬНЫЕ KPI ПОЛЗУНКИ ===== */
.kpi-slider-custom {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(to right, var(--theme-color) 0%, var(--theme-color) calc(var(--val, 0) * 10%), rgba(255,255,255,0.08) calc(var(--val, 0) * 10%), rgba(255,255,255,0.08) 100%);
    outline: none;
    cursor: pointer;
    margin: 0 12px;
}
.kpi-slider-custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--theme-color);
    box-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.5);
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.kpi-slider-custom::-webkit-slider-thumb:hover {
    box-shadow: 0 0 18px rgba(var(--theme-color-rgb), 0.8);
}
.kpi-slider-custom::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--theme-color);
    box-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.5);
    cursor: pointer;
}
.kpi-val-custom {
    min-width: 24px;
    text-align: center;
    font-weight: 800;
    font-size: 15px;
    color: var(--theme-color);
}
.kpi-row-custom {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 4px;
}
.kpi-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}
.kpi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-color);
    flex-shrink: 0;
}

/* ===== LIQUID GLASS KPI СЛАЙДЕРЫ ===== */
.kpi-slider-custom {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    border: 1px solid rgba(var(--theme-color-rgb), 0.2);
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,0.05);
    transition: none;
}

.kpi-slider-custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgba(255,255,255,0.3));
    border: 2px solid rgba(var(--theme-color-rgb), 0.6);
    box-shadow: 
        0 4px 15px rgba(var(--theme-color-rgb), 0.5),
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 2px rgba(255,255,255,0.8);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.kpi-slider-custom::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 
        0 6px 20px rgba(var(--theme-color-rgb), 0.7),
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(255,255,255,0.9);
}

.kpi-slider-custom::-webkit-slider-thumb:active {
    transform: scale(1.05);
}

.kpi-slider-custom::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgba(255,255,255,0.3));
    border: 2px solid rgba(var(--theme-color-rgb), 0.6);
    box-shadow: 0 4px 15px rgba(var(--theme-color-rgb), 0.5);
    cursor: pointer;
}

/* ===== КОНТАКТЫ КАК КАПСУЛЫ ===== */
#maxContactsList > div {
    margin: 4px 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    transition: all 0.15s ease !important;
}

#maxContactsList > div:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(var(--theme-color-rgb), 0.2) !important;
}

/* Убираем нижнюю границу у элементов — она теперь в виде капсул */
#maxContactsList > div > div {
    border-bottom: none !important;
}

/* ===== ГРАНИЦА МЕЖДУ ЧАТОМ И ПРАВЫМ МЕНЮ ===== */
@media (min-width: 850px) {
    #page-chats .max-chat-area,
    #page-chats > div:not(.max-contacts-col) {
        border-right: 1px solid rgba(255,255,255,0.06) !important;
        box-shadow: 2px 0 20px rgba(0,0,0,0.3);
    }

    nav.nav {
        border-left: 1px solid rgba(255,255,255,0.06) !important;
    }
}








/* ===== ОТСТУПЫ ЧАТА ===== */
@media (min-width: 850px) {
    #maxChatPanel {
        left: 306px !important;
        right: 128px !important;
        width: auto !important;
        border-left: 1px solid rgba(255,255,255,0.05) !important;
        border-right: 1px solid rgba(255,255,255,0.05) !important;
    }
}

/* ===== AI СТРОКА ВВОДА ===== */
#chat-tab-ai .chat-input-wrapper {
    position: absolute !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 99 !important;
    box-sizing: border-box !important;
}

#chat-tab-ai .chat-input-wrapper #aiInput {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

#aiChatBox {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 80px !important;
}

/* ===== LIQUID GLASS ПУЗЫРИ СООБЩЕНИЙ ===== */
.max-bubble {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 18px !important;
    padding: 10px 14px !important;
    max-width: 320px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.max-msg-sent .max-bubble {
    background: rgba(var(--theme-color-rgb), 0.15) !important;
    border: 1px solid rgba(var(--theme-color-rgb), 0.25) !important;
    color: #fff !important;
}

.max-msg-received .max-bubble {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.max-bubble * {
    color: #fff !important;
}

.max-bubble div[style*="color:#"] {
    color: rgba(255,255,255,0.5) !important;
}

/* ===== ПЛАВНОСТЬ ЧАТОВ ===== */
#maxContactsList {
    will-change: auto;
}

#maxChatBox {
    scroll-behavior: smooth;
}

.max-msg-sent, .max-msg-received {
    animation: msgAppear 0.15s ease-out;
}

@keyframes msgAppear {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#maxChatScreen {
    transition: none !important;
}

/* ===== SYNCLAB DROP ZONES ===== */
.drop-zone {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important}

.drop-zone i {
    margin-bottom: 0 !important}

/* ===== АНИМАЦИИ СООБЩЕНИЙ ===== */
@keyframes msgSent {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes msgReceived {
    from { opacity: 0; transform: translateX(-10px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.max-msg-sent {
    animation: msgSent 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.max-msg-received {
    animation: msgReceived 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== КРАСИВАЯ ЗАГРУЗКА МЕДИА ===== */

.upload-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--theme-color);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.upload-pct {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

/* ===== УВЕДОМЛЕНИЯ ===== */
@keyframes notifSlide {
    from { opacity: 0; transform: translateX(100px); }
    to   { opacity: 1; transform: translateX(0); }
}

.chat-notif {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(15,15,17,0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--theme-color-rgb),0.3);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 999999;
    max-width: 320px;
    animation: notifSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    cursor: pointer;
}

.chat-notif-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--theme-color-rgb),0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.chat-notif-text {
    flex: 1;
    min-width: 0;
}

.chat-notif-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 2px;
}

.chat-notif-msg {
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* PORTRAIT NAV — принудительные цвета */
#portraitNav button i,
#portraitNav button svg {
    color: rgba(255,255,255,0.3) !important;
    fill: rgba(255,255,255,0.3) !important;
}
#portraitNav button.pnav-active i,
#portraitNav button.pnav-active svg {
    color: var(--theme-color) !important;
    fill: var(--theme-color) !important;
}



/* ============================================================
   SPLIT_V1: перенесено из index.html.
   Там эти стили весили 51 КБ и грузились заново при КАЖДОМ входе —
   index.html отдаётся с max-age=0 и не кешируется. Здесь они попадают
   под кеш style.css (4 часа) и под сжатие. Порядок блоков сохранён
   один в один, поэтому каскад не меняется.
   ============================================================ */

/* --- из index.html --- */

:root {
  /* THEME_V1: раньше здесь было `--theme-color: var(--theme-color)` — переменная
     ссылалась сама на себя, что в CSS недопустимо и просто ничего не значило.
     Держим запасные значения на случай, если скрипт темы не отработал. */
  --theme-color: #117a4b;
  --theme-color-rgb: 17, 122, 75;
  --primary: var(--theme-color);
  --muted: #8A918F;   /* было зеленоватым, при розовой теме давало грязь */
  --bg-dark: #0c0f0d;
}

#ultra-preloader { position:fixed; top:0; left:0; width:100vw; height:100vh; background:#0b0b0d; z-index:9999999; display:flex; align-items:center; justify-content:center; }
@keyframes spin { to { transform:rotate(360deg); } }

.modal { position:fixed !important; top:0 !important; left:0 !important; width:100vw !important; height:100vh !important; z-index:9999999 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:rgba(0,0,0,0.85) !important; backdrop-filter:blur(12px) !important; }
.modal.hidden { display:none !important; }
.modal-content { z-index:99999999 !important; position:relative !important; max-height:92vh !important; overflow-y:auto !important; width:92%; max-width:520px; border:1px solid rgba(255,255,255,0.07); border-radius:22px; padding:22px}

#creoModal { padding:0 !important; align-items:flex-start !important; }
#creoModal .modal-content { width:100vw !important; height:100vh !important; max-width:none !important; max-height:none !important; border-radius:0 !important; border:none !important; padding:0 !important; display:flex; flex-direction:column; margin:0 !important}
#creoSlotBody { flex:1; overflow-y:auto; padding:16px; }

.tg-toast { position:fixed; bottom:24px; left:24px; background:rgba(18,18,20,0.98); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:14px 20px; z-index:99999999; color:#fff; font-size:14px; font-weight:500; display:flex; align-items:center; gap:12px; box-shadow:0 8px 30px rgba(0,0,0,0.6); transform:translateY(100px); opacity:0; transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1), opacity 0.4s; min-width:220px; max-width:320px; }
.tg-toast.show { transform:translateY(0); opacity:1; }

/* Уведомление бейдж на навбаре */
.nav-badge { position:absolute; top:6px; right:6px; background:var(--theme-color); color:#fff; border-radius:10px; padding:1px 6px; font-size:10px; font-weight:900; min-width:16px; text-align:center; }

#aiChatBox { display:flex; flex-direction:column; gap:8px; padding:5px 0; }

.header { text-align:center; margin-bottom:24px; padding-top:10px; }
.header h2 { font-size:22px; font-weight:900; color:#fff; margin:0; letter-spacing:1px; text-transform:uppercase}

/* Контекстное меню чата */
#maxContextMenu { position:fixed; z-index:9999999; background:rgba(22,22,26,0.97); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,0.6); display:none; min-width:160px; }
.ctx-item { padding:11px 16px; color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:10px; border-radius:10px; transition:background 0.15s; }
.ctx-item:hover { background:rgba(255,255,255,0.08); }
.ctx-item.danger { color:#ff4b4b; }

/* Десктоп лейаут */
@media (min-width: 850px) {
    body, html { margin:0; padding:0; overflow:hidden; background:#0b0b0d; }

    /* P2P КОНТАКТЫ — ВСЕГДА СЛЕВА */
    #chat-tab-team {
        position:fixed !important; top:0 !important; left:0 !important;
        width:300px !important; height:100vh !important;
        background:#111113 !important;
        border-right:1px solid rgba(255,255,255,0.05) !important;
        z-index:9000 !important;
        display:flex !important; flex-direction:column !important;
        overflow:hidden !important;
    }
    #chat-tab-team.hidden { display:flex !important; }
    #maxContactsList { flex:1; overflow-y:auto; }

    /* page-chats не занимает место в потоке */
    #page-chats { position:static !important; width:0 !important; height:0 !important; overflow:visible !important; padding:0 !important; display:block !important; }
    #page-chats.hidden { display:block !important; }
    #page-chats > .header, #page-chats > .tabs { display:none !important; }

    /* Центральная зона — правее панели контактов */
    #pages { position:fixed !important; top:0 !important; left:300px !important; width:calc(100vw - 380px) !important; height:100vh !important; z-index:10 !important; background:#0b0b0d !important; }
    @media (orientation: portrait) and (max-width: 849px) {
        #pages { left:0 !important; width:100vw !important; height:calc(100vh - 66px) !important; top:0 !important; overflow-y:auto !important; }
    }
    .page:not(#page-chats) { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; box-sizing:border-box !important; overflow-y:auto !important; background:transparent !important; }
    .page:not(#page-chats):not(.active):not(.page-active) { display:none !important; }
    .page:not(#page-chats).active, .page:not(#page-chats).page-active { display:block !important; padding:36px !important; }

    /* AI ЧАТ — показывается в центре только когда page-chats активен */
    #chat-tab-ai {
        position:fixed !important; top:0 !important; left:312px !important;
        width:calc(100vw - 452px) !important; height:100vh !important; border-left:1px solid rgba(255,255,255,0.05) !important; border-right:1px solid rgba(255,255,255,0.05) !important;
        z-index:11 !important; background:#0b0b0d !important;
        display:none;
        flex-direction:column !important; padding:16px !important; box-sizing:border-box !important;
    }
    #page-chats.active #chat-tab-ai, #page-chats.page-active #chat-tab-ai { display:flex !important; }
    #page-chats:not(.active):not(.page-active) #chat-tab-ai { display:none !important; }
    #chat-tab-ai .card { height:100% !important; display:flex !important; flex-direction:column !important; border:none !important; padding:0 !important; position:relative !important}
    #aiChatBox { flex:1 !important; overflow-y:auto !important; }

    /* Окно переписки MAX */
    #maxChatScreen {
        position:fixed !important; top:0 !important; left:312px !important;
        width:calc(100vw - 452px) !important; height:100vh !important; border-left:1px solid rgba(255,255,255,0.05) !important; border-right:1px solid rgba(255,255,255,0.05) !important;
        background:#0b0b0d !important; z-index:9999 !important;
        display:flex !important; flex-direction:column !important;
    }
    #maxChatScreen.hidden { display:none !important; }
    #maxChatBox { flex:1 !important; padding:16px 8% !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; gap:6px !important; }
    #maxChatInputContainer { background:#111113 !important; padding:12px 20px !important; border-top:1px solid rgba(255,255,255,0.05) !important; display:flex !important; gap:10px !important; align-items:center !important; flex-shrink:0 !important; }
    .back-btn { display:none !important; }

    /* Правое меню */
    nav.nav { display:none !important; position:fixed !important; top:0 !important; right:0 !important; left:auto !important; width:80px !important; height:100vh !important; background:rgba(12,12,14,0.6) !important; backdrop-filter:blur(24px) !important; border-left:1px solid rgba(255,255,255,0.05) !important; z-index:10000 !important; display:flex !important; flex-direction:column !important; align-items:center !important; padding-top:16px !important; gap:4px !important; margin:0 !important; }
    @media (orientation: portrait) and (max-width: 849px) {
        nav.nav { position:fixed !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; width:100vw !important; height:70px !important; flex-direction:row !important; justify-content:space-around !important; align-items:center !important; padding:6px 8px !important; padding-top:6px !important; border-left:none !important; border-top:1px solid rgba(255,255,255,0.1) !important; border-radius:20px 20px 0 0 !important; gap:4px !important; }
        nav.nav .nav-item, nav.nav .nav-item.active { flex:1 1 auto !important; min-width:40px !important; max-width:none !important; height:56px !important; min-height:56px !important; max-height:56px !important; aspect-ratio:auto !important; transform:none !important; padding:4px 2px !important; border-radius:12px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important}
        nav.nav .nav-item i, nav.nav .nav-item.active i { font-size:20px !important; margin-bottom:3px !important}
        nav.nav .nav-item span, nav.nav .nav-item.active span { font-size:8px !important}
        main#pages { padding-bottom:80px !important; margin-right:0 !important; }
    }
    .nav-item { position:relative; width:64px !important; height:64px !important; border-radius:16px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; border:1px solid transparent !important; color:#666 !important; transition:all 0.2s !important}
    .nav-item:hover { color:#aaa !important}
    .nav-item.active { border:1px solid rgba(var(--theme-color-rgb),0.4) !important; color:var(--theme-color) !important}
    .nav-item i { font-size:20px !important; margin-bottom:5px !important}
    .nav-item span { font-size:9px !important; font-weight:800 !important; text-transform:uppercase !important; display:block !important}

    /* Карточки */
    .card, .acc-card, .metric-card, .glass-reflect, .drop-zone { border:1px solid rgba(255,255,255,0.05) !important; border-radius:16px !important}
    .btn-primary, #btnAiSend, #btnMaxSend { background:var(--theme-color) !important; border:none !important; color:#fff !important; border-radius:12px !important; font-weight:600 !important; }
    .btn, .btn-outline { background:rgba(255,255,255,0.03) !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:12px !important; color:#c4c4c8 !important; }
    .btn:hover { border-color:rgba(var(--theme-color-rgb),0.5) !important; color:#fff !important; }
    .form-control, input:not([type=checkbox]):not([type=range]):not([type=file]), textarea, select { background:rgba(8,8,10,0.5) !important; border:1px solid rgba(255,255,255,0.06) !important; border-radius:10px !important; color:#fff !important; padding:11px 14px !important; }
    ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.07); border-radius:8px; }
}

/* Reply bar */
#maxReplyBar { display:none; padding:8px 16px; background:rgba(var(--theme-color-rgb),0.08); border-top:1px solid rgba(var(--theme-color-rgb),0.2); font-size:12px; color:#aaa; align-items:center; justify-content:space-between; }
#maxReplyBar.visible { display:flex; }

/* Attach preview */
#maxAttachPreview { display:none; padding:8px 16px; background:rgba(0,0,0,0.3); border-top:1px solid rgba(255,255,255,0.05); gap:8px; flex-wrap:wrap; }
#maxAttachPreview.visible { display:flex; }
.attach-thumb { position:relative; width:60px; height:60px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.attach-thumb img, .attach-thumb video { width:100%; height:100%; object-fit:cover; }
.attach-thumb .rm { position:absolute; top:2px; right:2px; background:rgba(0,0,0,0.7); border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:10px; color:#fff; }

/* Cabinet */
.cabinet-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.metric-card { padding:16px; }
.metric-card.full { grid-column:1/-1; }
.metric-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.metric-icon { font-size:16px; color:var(--theme-color); }
.metric-title { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; }
.metric-value { font-size:22px; font-weight:900; color:#fff; }
.theme-text { color:var(--theme-color) !important; }

/* Аккаунты - карточки аккордеон */
.acc-item { border:1px solid rgba(255,255,255,0.05); border-radius:16px; margin-bottom:10px; overflow:hidden; cursor:pointer; transition:all 0.2s}
.acc-item:hover { border-color:rgba(var(--theme-color-rgb),0.25)}
.acc-item-header { display:flex; align-items:center; gap:14px; padding:14px 16px}
.acc-item-icon { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.acc-item-icon i { color:var(--theme-color); font-size:18px}
.acc-item-body { display:none; padding:0 16px 16px}
.acc-item.open .acc-item-body { display:block}
.acc-item.open .acc-chevron { transform:rotate(90deg)}
.acc-chevron { color:#444; transition:transform 0.2s; margin-left:auto; }
.acc-field { background:rgba(0,0,0,0.35); border-radius:10px; padding:10px 14px; cursor:pointer; margin-bottom:8px; }
.acc-field-label { font-size:10px; color:#555; margin-bottom:3px; text-transform:uppercase; letter-spacing:0.5px; }
.acc-field-value { color:#fff; font-size:13px; word-break:break-all; }
.acc-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.acc-link-btn { padding:7px 14px; background:rgba(var(--theme-color-rgb),0.15); border:1px solid rgba(var(--theme-color-rgb),0.3); border-radius:8px; color:var(--theme-color); text-decoration:none; font-size:12px; font-weight:600; display:inline-block; }

/* Proxy frame для открытия сайтов */
#proxyFrame { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:99999998; background:#0b0b0d; flex-direction:column; }
#proxyFrame.visible { display:flex; }
#proxyFrame iframe { flex:1; border:none; }
#proxyFrameBar { background:#111113; padding:10px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
#proxyFrameUrl { flex:1; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06); border-radius:8px; color:#fff; padding:8px 12px; font-size:13px; }

/* Сообщения - bubble */
.max-msg-sent .max-bubble { background:var(--theme-color) !important; color:#fff; border-radius:16px 16px 4px 16px; }
.max-msg-received .max-bubble { background:rgba(255,255,255,0.07); color:#eee; border-radius:16px 16px 16px 4px; }
.max-bubble { padding:10px 14px; max-width:78%; font-size:14px; word-break:break-word; }
.max-bubble-img { max-width:280px; border-radius:10px; cursor:pointer; display:block; margin-bottom:4px; }
.max-bubble-video { max-width:280px; border-radius:10px; display:block; margin-bottom:4px; }
.max-bubble-file { display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,0.08); border-radius:10px; margin-bottom:4px; cursor:pointer; }
.max-reply-preview { background:rgba(255,255,255,0.06); border-left:3px solid var(--theme-color); border-radius:6px; padding:5px 10px; margin-bottom:6px; font-size:12px; color:#aaa; }
.max-time { font-size:10px; color:rgba(255,255,255,0.35); text-align:right; margin-top:3px; }

/* Медиа просмотр */
#mediaViewer { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:999999999; background:rgba(0,0,0,0.95); align-items:center; justify-content:center; }
#mediaViewer.visible { display:flex; }
#mediaViewer img, #mediaViewer video { max-width:95vw; max-height:95vh; border-radius:10px; }
#mediaViewerClose { position:absolute; top:20px; right:20px; color:#fff; font-size:28px; cursor:pointer; background:rgba(0,0,0,0.5); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* Инфо и нейро вкладки */
.neuro-grid-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:18px; }
.neuro-grid-tabs .tab { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:12px 4px; font-size:10px; font-weight:700; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; transition:0.2s; }
.neuro-grid-tabs .tab i { font-size:18px; }
.neuro-grid-tabs .tab.active { background:rgba(var(--theme-color-rgb),0.15); color:var(--theme-color); border-color:rgba(var(--theme-color-rgb),0.4); }
.slot-btn, .pix-slot-btn { padding:8px 16px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; cursor:pointer; font-size:13px; font-weight:700; color:#aaa; transition:0.2s; }
.slot-btn.active, .pix-slot-btn.active { background:rgba(var(--theme-color-rgb),0.2); border-color:var(--theme-color); color:var(--theme-color); }
/* PIXV_V1: у кнопок PixVerse ОТДЕЛЬНЫЙ класс, а вид общий. Если дать им .slot-btn,
   они попадут в выборку setSyncSlot — та ищет '.slot-btn' по ВСЕЙ странице и гасит
   подсветку по индексу. Проверено: после этого слоты PixVerse тухли, хотя выбранным
   внутри оставался прежний — пользователь видел, что не выбрано ничего. */

/* Tabs общие */
.tabs { display:flex; gap:6px; margin-bottom:20px; background:rgba(0,0,0,0.3); border-radius:12px; padding:5px; }
.tab { flex:1; padding:10px 8px; border-radius:9px; background:transparent; border:none; color:#555; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; transition:0.2s; text-align:center; }
.tab.active { background:rgba(var(--theme-color-rgb),0.18); border:1px solid rgba(var(--theme-color-rgb),0.35); color:#fff; }

/* Крео */
.creo-types-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.creo-type-btn { padding:10px 6px; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background:rgba(255,255,255,0.03); color:#666; font-size:12px; font-weight:700; cursor:pointer; transition:0.2s; text-align:center; }
.creo-type-btn.active { background:rgba(var(--theme-color-rgb),0.2); border-color:var(--theme-color); color:var(--theme-color); }
.creo-kpi-grid { display:grid; gap:8px; }
.kpi-row { display:flex; align-items:center; gap:10px; }
.kpi-label { font-size:12px; color:#888; min-width:110px; }
.kpi-slider { flex:1; accent-color:var(--theme-color); }
.kpi-value { min-width:20px; text-align:right; font-weight:700; color:var(--theme-color); font-size:13px; }
.upload-progress { height:4px; background:rgba(255,255,255,0.05); border-radius:4px; overflow:hidden; }
.upload-progress-bar { height:100%; background:var(--theme-color); transition:width 0.3s; }

.mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:14px; } .mb-4 { margin-bottom:20px; } .mt-3 { margin-top:14px; }
.btn-block { width:100%; text-align:center; } .btn-sm { padding:6px 12px; font-size:12px; }
.hidden { display:none !important; }
.form-label { font-size:11px; color:#555; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:6px; margin-top:14px; }
.form-control { width:100%; font-family:inherit; }
input[type="range"] { width:100%; }

/* --- из index.html #super-glass --- */

/* === ГЛОБАЛЬНЫЙ ФОН === */
body, html {
    background-color: #040605 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(var(--theme-color-rgb), 0.1) 0%, transparent 60%) !important;
    overflow: hidden !important;
}

/* ========================================================== */
/* === ЖЕСТКАЯ СЕТКА (3 ЗОНЫ: ЧАТЫ | КОНТЕНТ | НАВИГАЦИЯ) === */
/* ========================================================== */
@media (min-width: 850px) {
    /* 1. ЧАТЫ (СЛЕВА) */
    #chat-tab-team {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 320px !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        z-index: 100 !important;
        background: rgba(8, 12, 10, 0.6) !important;
    }
    
    /* 2. ЦЕНТР (ВКЛАДКИ) - СТРОГО ОТДЕЛЕН ОТ КРАЕВ */
    #pages {
        position: fixed !important;
        top: 0 !important;
        left: 320px !important; /* Отступаем на ширину чатов */
        width: calc(100vw - 320px - 130px) !important; /* Строго вычитаем левое меню и место под правое */
        height: 100vh !important;
        padding: 30px !important;
        padding-right: 20px !important; /* Внутренний отступ */
        box-sizing: border-box !important;
        overflow-y: auto !important;
        z-index: 10 !important;
        background: transparent !important;
    }

    /* 3. НАВИГАЦИЯ (СПРАВА) */
    nav.nav {
        position: fixed !important;
        top: 50% !important;
        right: 20px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: 80px !important;
        height: auto !important;
        padding: 24px 0 !important;
        border-radius: 40px !important;
        z-index: 99999 !important;
    }
}

@media (orientation: portrait) and (max-width: 849px) {
    nav.nav {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 70px !important;
        transform: none !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 6px 8px !important;
        border-radius: 20px 20px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        gap: 4px !important;
        z-index: 99999 !important;
    }
    nav.nav .nav-item, nav.nav .nav-item.active {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        aspect-ratio: auto !important;
        transform: none !important;
        padding: 4px 2px !important;
        border-radius: 12px !important;
        flex: 0 0 auto !important;
        width: calc(100vw / 6 - 10px) !important}
    nav.nav .nav-item i, nav.nav .nav-item.active i { font-size: 18px !important; margin-bottom: 2px !important}
    nav.nav .nav-item span, nav.nav .nav-item.active span { font-size: 8px !important}
}

/* ========================================================== */
/* === LIQUID GLASS (ЖИДКОЕ СТЕКЛО) === */
/* ========================================================== */
/* Применяем ко всем карточкам, кнопкам и панелям */
.menu-btn, .card, .acc-item, .glass-reflect, .drop-zone, .tab.glass-reflect, nav.nav { /* Почти полная прозрачность базы */
    backdrop-filter: blur(28px) saturate(160%) !important; /* Сильный блюр + перенасыщение цветов */
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    
    /* Блики на гранях для объема */
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important; /* Яркий верхний блик */
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    
    border-radius: 24px !important; /* Объем жидкости снизу */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important}

/* Всплытие из жидкости при наведении */
.menu-btn:hover, .card:hover, .acc-item:hover, .tab.glass-reflect:hover {
    border-color: rgba(var(--theme-color-rgb), 0.3) !important;
    border-top-color: rgba(var(--theme-color-rgb), 0.6) !important; /* Цветной блик */
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(var(--theme-color-rgb), 0.1),
        inset 0 1px 4px rgba(var(--theme-color-rgb), 0.2) !important;
    transform: translateY(-3px) scale(1.01) !important}

/* Активные вкладки (Нейросети, Навигация) */
.tab.active, .nav-item.active {
    border: 1px solid rgba(var(--theme-color-rgb), 0.3) !important;
    border-top: 1px solid rgba(var(--theme-color-rgb), 0.6) !important;
    color: var(--theme-color) !important}

/* Специфично для вкладок Нейро (делаем их красивыми жидкими кнопками) */
.neuro-grid-tabs .tab {
    min-height: 75px !important;
    border-radius: 20px !important;
    gap: 8px !important;
}
.neuro-grid-tabs .tab i { font-size: 22px !important; }

/* ЗЕЛЕНЫЕ КНОПКИ ГЛАВНОЙ (Светятся изнутри) */
.btn-green-glow {
    border: 1px solid rgba(var(--theme-color-rgb), 0.15) !important;
    border-top: 1px solid rgba(var(--theme-color-rgb), 0.3) !important}

/* ТЕКСТЫ И ИКОНКИ (Чистые, без грязи) */
.menu-btn .text { color: #ffffff !important; font-weight: 600 !important; letter-spacing: 0.5px !important}
.menu-btn .icon i { color: #ffffff !important; opacity: 0.9}

.btn-green-glow .text, .btn-green-glow .icon i {
    color: var(--theme-color) !important;
    opacity: 1 !important}

.nav-item {
    border: 1px solid transparent !important}

/* --- из index.html #clean-modal-internals --- */

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

/* Расширяем модалку, чтобы всё влезло */
.modal-content {
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 24px !important}

/* --- ИНПУТЫ И СЕЛЕКТЫ --- */
.modal-body .form-control, .modal-body .form-select, .modal-body input[type="text"] {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}
.modal-body .form-control:focus, .modal-body .form-select:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-color-rgb), 0.3) !important;
}

/* --- ИСПРАВЛЕНИЕ ВКЛАДОК (КРЕО 1 2 3) И ЦИФР --- */
.modal-body .nav-tabs {
    border: none !important;
    display: flex !important;
    gap: 8px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 6px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
}
.modal-body .nav-tabs li {
    font-size: 0 !important; /* ЖЕСТКО УБИВАЕТ ВИСЯЩИЕ ЦИФРЫ 1 2 3 */
    flex: 1 !important;
    margin: 0 !important;
}
.modal-body .nav-tabs .nav-link {
    font-size: 12px !important; /* Возвращает нормальный шрифт тексту вкладки */
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border: none !important;
    border-radius: 10px !important;
    width: 100% !important;
    padding: 10px !important;
    font-weight: 700 !important;
}
.modal-body .nav-tabs .nav-link.active {
    background: rgba(var(--theme-color-rgb), 0.2) !important;
    color: var(--theme-color) !important;
}

/* --- ИСПРАВЛЕНИЕ МЕЛКИХ КНОПОК И ТЕГОВ (В Telegram, Фото, Видео) --- */
.modal-body .btn-group, .modal-body .d-flex:has(> button:not(.btn-close)) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
}
.modal-body .btn-group > button, .modal-body .d-flex > button:not(.btn-close), .modal-body .btn-outline-secondary {
    flex: 1 1 calc(33% - 10px) !important;
    min-width: 120px !important;
    min-height: 48px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.modal-body .btn-outline-secondary.active, .modal-body .btn-check:checked + .btn-outline-secondary {
    background: rgba(var(--theme-color-rgb), 0.2) !important;
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
}

/* --- ИСПРАВЛЕНИЕ KPI ПОЛЗУНКОВ (В ОДНУ СТРОКУ) --- */
.modal-body div:has(input[type="range"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.modal-body div:has(input[type="range"]) label {
    margin: 0 !important;
    width: 120px !important;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.modal-body div:has(input[type="range"]) input[type="range"] {
    flex: 1 !important;
    margin: 0 !important;
    height: 4px !important;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.modal-body div:has(input[type="range"]) input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--theme-color); border: 2px solid #fff; margin-top: -6px;
}
.modal-body div:has(input[type="range"]) > span, 
.modal-body div:has(input[type="range"]) > div {
    width: 30px !important;
    text-align: right !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--theme-color) !important;
}

/* Большая дропзона */
.drop-zone {
    min-height: 120px !important;
    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    display: flex !important; align-items: center !important; justify-content: center !important}

/* --- из index.html #big-tabs-override --- */

/* ========================================================= */
/* === ВОЗВРАЩАЕМ БОЛЬШИЕ КНОПКИ ВКЛАДОК (КРЕО 1, 2, 3) === */
/* ========================================================= */
.modal-body .nav-tabs {
    background: transparent !important; /* Убираем общую подложку */
    padding: 0 !important;
    gap: 16px !important; /* Расстояние между большими кнопками */
    border: none !important;
    margin-bottom: 24px !important;
}
.modal-body .nav-tabs li {
    font-size: 0 !important; /* Скрываем багованные цифры "1 2 3" в пустоте */
    flex: 1 !important;
    margin: 0 !important;
}
.modal-body .nav-tabs .nav-link {
    width: 100% !important;
    height: 54px !important; /* ДЕЛАЕМ КНОПКИ ВЫСОКИМИ */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important; /* Сочное скругление */
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important; /* Крупный текст */
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
/* Эффект наведения на неактивную вкладку */
.modal-body .nav-tabs .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}
/* Активная вкладка: загорается, поднимается и дает тень */
.modal-body .nav-tabs .nav-link.active {
    background: rgba(var(--theme-color-rgb), 0.15) !important; /* Наш глубокий зеленый */
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
    box-shadow: 
        0 12px 25px rgba(0,0,0,0.5), 
        inset 0 2px 10px rgba(var(--theme-color-rgb), 0.1) !important;
    transform: translateY(-2px) !important;
}

/* --- из index.html #true-square-nav --- */

@media (min-width: 850px) {
    /* Капсула меню */
    nav.nav {
        width: 104px !important;
        padding: 16px 0 !important; /* Убрал боковые отступы, чтобы центрировать чисто флексом */
        border-radius: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* ЖЕСТКО ЦЕНТРИРУЕМ, ЧТОБЫ НЕ РАСТЯГИВАЛО В ШИРИНУ */
        gap: 12px !important;
    }

    /* NAV ITEM BASE */
    .nav-item {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        min-height: 76px !important;
        max-width: 76px !important;
        max-height: 76px !important;
        flex: 0 0 76px !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
        padding: 0 !important}
    @media (orientation: portrait) and (max-width: 849px) {
        .nav-item, .nav-item.active {
            width: auto !important;
            height: auto !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: none !important;
            max-height: none !important;
            flex: 1 !important;
            aspect-ratio: auto !important;
            transform: none !important}
    }

    @media (orientation: portrait) and (max-width: 849px) {
        nav.nav {
            position: fixed !important;
            bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
            width: 100vw !important; height: 70px !important;
            flex-direction: row !important;
            justify-content: space-around !important;
            align-items: center !important;
            padding: 6px 8px !important;
            border-left: none !important;
            border-top: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 20px 20px 0 0 !important;
            background: rgba(5,10,7,0.97) !important;
            z-index: 9999 !important;
            gap: 4px !important;
        }
        nav.nav .nav-item, nav.nav .nav-item.active {
            flex: 1 1 0 !important;
            width: 0 !important; min-width: 0 !important; max-width: none !important;
            height: 54px !important; min-height: 54px !important; max-height: 54px !important;
            aspect-ratio: auto !important;
            transform: none !important; scale: 1 !important;
            padding: 4px 2px !important;
            border-radius: 12px !important}
        nav.nav .nav-item i, nav.nav .nav-item.active i { font-size: 20px !important; margin-bottom: 3px !important}
        nav.nav .nav-item span, nav.nav .nav-item.active span { font-size: 8px !important}
        main#pages { padding-bottom: 80px !important; }
    }

    @media (orientation: portrait) and (max-width: 849px) {
        nav.nav {
            position: fixed !important;
            bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
            width: 100vw !important; height: 70px !important;
            flex-direction: row !important;
            justify-content: space-around !important;
            align-items: center !important;
            padding: 6px 8px !important;
            border-left: none !important;
            border-top: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 20px 20px 0 0 !important;
            background: rgba(5,10,7,0.97) !important;
            z-index: 9999 !important;
            gap: 4px !important;
        }
        nav.nav .nav-item, nav.nav .nav-item.active {
            flex: 1 1 0 !important;
            width: 0 !important; min-width: 0 !important; max-width: none !important;
            height: 54px !important; min-height: 54px !important; max-height: 54px !important;
            aspect-ratio: auto !important;
            transform: none !important; scale: 1 !important;
            padding: 4px 2px !important;
            border-radius: 12px !important}
        nav.nav .nav-item i, nav.nav .nav-item.active i { font-size: 20px !important; margin-bottom: 3px !important}
        nav.nav .nav-item span, nav.nav .nav-item.active span { font-size: 8px !important}
        main#pages { padding-bottom: 80px !important; }
    }

    @media (orientation: portrait) and (max-width: 849px) {
        nav.nav {
            position: fixed !important;
            bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
            width: 100vw !important; height: 70px !important;
            flex-direction: row !important;
            justify-content: space-around !important;
            align-items: center !important;
            padding: 6px 8px !important;
            border-left: none !important;
            border-top: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 20px 20px 0 0 !important;
            background: rgba(5,10,7,0.97) !important;
            backdrop-filter: blur(30px) !important;
            z-index: 9999 !important;
            gap: 4px !important;
        }
        nav.nav .nav-item, nav.nav .nav-item.active {
            flex: 1 1 0 !important;
            width: 0 !important; min-width: 0 !important; max-width: none !important;
            height: 54px !important; min-height: 54px !important; max-height: 54px !important;
            aspect-ratio: auto !important;
            transform: none !important;
            padding: 4px 2px !important;
            border-radius: 12px !important}
        nav.nav .nav-item i, nav.nav .nav-item.active i { font-size: 20px !important; margin-bottom: 3px !important}
        nav.nav .nav-item span, nav.nav .nav-item.active span { font-size: 8px !important}
        main#pages { padding-bottom: 80px !important; }
    }

    .nav-item i {
        font-size: 26px !important;
        margin-bottom: 6px !important;
        color: rgba(255, 255, 255, 0.5) !important}

    .nav-item span {
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        color: rgba(255, 255, 255, 0.4) !important;
        line-height: 1 !important}

    /* Эффект при наведении */
    .nav-item:hover:not(.active) {
        border-color: rgba(255, 255, 255, 0.15) !important;
        transform: scale(1.05) !important}
    .nav-item:hover:not(.active) i, .nav-item:hover:not(.active) span {
        color: #fff !important}

    /* Активная кнопка */
    .nav-item.active {
        border: 1px solid var(--theme-color) !important;
        transform: scale(1.05) !important}
    .nav-item.active i, .nav-item.active span {
        color: var(--theme-color) !important}
}
    @media (max-aspect-ratio: 1/1) {

        nav.nav { display:none !important; }
        #portraitNav { display:flex !important; }
        #pages { left:0 !important; width:100vw !important; padding-bottom:80px !important; overflow-y:auto !important; }
    }

/* --- из index.html #deep-contrast-glow --- */

/* === ГЛУБОКАЯ ПОДСВЕТКА ДЛЯ ЦЕНТРАЛЬНЫХ КНОПОК === */
.btn-green-glow {
    border: 1px solid rgba(var(--theme-color-rgb), 0.4) !important;
    border-top: 1px solid rgba(var(--theme-color-rgb), 0.8) !important; /* Яркий блик сверху */
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.8),
        inset 0 4px 15px rgba(var(--theme-color-rgb), 0.2), /* Внутренний объем */
        0 0 20px rgba(var(--theme-color-rgb), 0.15) !important}
.btn-green-glow:hover {
    border-color: rgba(var(--theme-color-rgb), 0.7) !important}
.btn-green-glow .text, .btn-green-glow .icon i {
    color: var(--theme-color) !important;
    opacity: 1 !important}

/* === ГЛУБОКАЯ ПОДСВЕТКА ДЛЯ БОКОВОГО МЕНЮ (ГЛАВНАЯ) === */
@media (min-width: 850px) {
    .nav-item.active {
        border: 1px solid rgba(var(--theme-color-rgb), 0.5) !important;
        border-top: 1px solid var(--theme-color) !important; /* Четкая яркая грань */
        box-shadow: 
            0 15px 30px rgba(0,0,0,0.8), 
            inset 0 6px 20px rgba(var(--theme-color-rgb), 0.35),
            0 0 25px rgba(var(--theme-color-rgb), 0.2) !important}
    .nav-item.active i, .nav-item.active span {
        color: var(--theme-color) !important}
}

/* --- из index.html #cabinet-premium-buttons --- */

/* === ПРЕМИУМ-КНОПКИ ДЛЯ КАБИНЕТА === */
.btn-cabinet-premium {
    min-height: 56px !important;
    width: 100% !important; /* Растягиваем на всю ширину блока */
    padding: 0 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    
    /* Тот самый глубокий изумрудный градиент */
    background: linear-gradient(180deg, rgba(var(--theme-color-rgb), 0.15) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
    border: 1px solid rgba(var(--theme-color-rgb), 0.4) !important;
    border-top: 1px solid rgba(var(--theme-color-rgb), 0.8) !important;
    color: var(--theme-color) !important;
    
    border-radius: 20px !important; /* Сочное скругление */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 2px 10px rgba(var(--theme-color-rgb), 0.2) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer !important;
}

.btn-cabinet-premium:hover {
    background: linear-gradient(180deg, rgba(var(--theme-color-rgb), 0.25) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
    border-color: rgba(var(--theme-color-rgb), 0.7) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 2px 15px rgba(var(--theme-color-rgb), 0.3), 0 0 20px rgba(var(--theme-color-rgb), 0.2) !important;
    transform: translateY(-2px) !important;
}

.btn-cabinet-premium i, .btn-cabinet-premium svg {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--theme-color) !important;
    fill: currentColor !important;
}

/* --- из index.html #vision-glass --- */

/* ===== VISION GLASS — финальный слой, идёт последним ===== */
body, html {
  background-color:#070b0e !important;
  background-image:none !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  letter-spacing:-0.011em !important;
}
.vg-blob{position:absolute;border-radius:50%;opacity:.5;mix-blend-mode:screen;animation:vgDrift 26s ease-in-out infinite}
@keyframes vgDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vw,4vw) scale(1.08)}66%{transform:translate(-4vw,6vw) scale(.96)}}
/* весь контент выше фона */
main#pages, nav.nav, #chat-tab-team, .modal { position:relative; z-index:2; }

/* ---- СТЕКЛО: карточки, аккордеоны, метрики, вкладки ---- */
.card, .acc-item, .metric-card, .glass-reflect, .drop-zone,
.neuro-grid-tabs .tab, .creo-type-btn {
  -webkit-backdrop-filter:blur(34px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  border-radius:22px !important;
  position:relative !important;
  transition:transform .4s cubic-bezier(.2,.9,.25,1), box-shadow .4s !important}
.card::before, .acc-item::before, .metric-card::before, .neuro-grid-tabs .tab::before {
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.card:hover, .acc-item:hover, .neuro-grid-tabs .tab:hover {
  transform:translateY(-5px) !important}
.neuro-grid-tabs .tab.active, .creo-type-btn.active {
  background:rgba(var(--theme-color-rgb),0.10) !important;
  border-color:rgba(var(--theme-color-rgb),0.32) !important;
  box-shadow:inset 0 1px 0 rgba(var(--theme-color-rgb),.4), 0 16px 30px -14px rgba(var(--theme-color-rgb),.3) !important;
}

/* ---- ТИПОГРАФИКА: воздух + иерархия ---- */
.header h2 { font-size:32px !important; letter-spacing:-0.03em !important; font-weight:800 !important}
.section-title, .form-label { letter-spacing:.10em !important; }
.metric-value { font-size:34px !important; letter-spacing:-0.03em !important; }
.acc-item-header { padding:20px !important}
.metric-card { padding:22px !important; }
.neuro-grid-tabs { gap:14px !important; }
.neuro-grid-tabs .tab { min-height:78px !important; gap:10px !important; }
.neuro-grid-tabs .tab i { font-size:24px !important; }

/* ---- НАВИГАЦИЯ: стеклянный dock ---- */
nav.nav {
  background:rgba(255,255,255,0.055) !important;
  backdrop-filter:blur(34px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.nav-item.active {
  border:1px solid rgba(var(--theme-color-rgb),0.3) !important;
  color:var(--theme-color) !important}

/* ---- КНОПКИ ---- */
.btn-primary, #btnAiSend, #btnMaxSend {
  border-radius:14px !important; font-weight:600 !important; letter-spacing:-0.01em !important;
  box-shadow:0 8px 24px -8px rgba(var(--theme-color-rgb),.5) !important;
}

/* --- из index.html #design-polish-v1 --- */

/* TOKENS_V1 — дизайн правится ЗДЕСЬ, а не новыми слоями поверх.
   В файле уже был слой нормализации (ниже, правило с [class*="card"]), который
   раздаёт скругление, границу и тень всем поверхностям через эти переменные.
   Мои прошлые попытки добавляли слои поверх и воевали с ним — отсюда и разнобой.
   Теперь меняем сами значения: одно место, предсказуемый результат.

   Что изменено и почему:
   · card  — было rgba(16,22,18,.72): полупрозрачное и потому мутное поверх фона.
             Стало плотным и НАСЫЩЕННЫМ: цвет даёт глубину, а не подмешанный серый.
   · stroke— было .14 от цвета темы, граница почти не читалась и терялась среди
             пятнадцати других оттенков. Стало чуть заметнее и нейтральнее.
   · shadow— было 0 12px 40px: широкое мягкое пятно, из-за него всё «парило».
             Стало короче и плотнее — поверхность лежит, а не висит.
   · radius— 16px оставлен: это самое частое значение в разметке, менять его
             значит расходиться с теми местами, где скругление задано вручную. */
:root{
  --dg-bg0:#0a0f0c;
  --dg-bg1:#121413;   /* нейтральный вместо зеленоватого */
  --dg-card:#17191C;  /* нейтральный вместо зеленоватого */
  --dg-stroke:rgba(255,255,255,.07);
  --dg-accent:var(--theme-color);
  --dg-accent2:var(--theme-color);
  --dg-text:#E8EBEA;  /* нейтральный вместо зеленоватого */
  --dg-radius:16px;
  --dg-shadow:0 6px 18px rgba(0,0,0,.45);
  --dg-blur:0px;
}
html,body{
  background:
    radial-gradient(1200px 600px at 10% -10%,rgba(var(--theme-color-rgb), .12),transparent 55%),
    radial-gradient(900px 500px at 90% 0%,rgba(var(--theme-color-rgb),.10),transparent 50%),
    linear-gradient(180deg,var(--dg-bg0),var(--dg-bg1)) !important;
  color:var(--dg-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.card,.panel,.modal,.login-box,.box,.glass,
[class*="card"],[class*="panel"],[class*="modal"]{
  border-radius:var(--dg-radius) !important;
  border:1px solid var(--dg-stroke) !important;
  -webkit-backdrop-filter:blur(var(--dg-blur))}
button,.btn,input[type=submit],.button{
  border-radius:12px !important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
button:hover,.btn:hover,input[type=submit]:hover,.button:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}
button:active,.btn:active{transform:translateY(0)}
input,select,textarea{
  border-radius:12px !important;
  border:1px solid var(--dg-stroke) !important;
  background:rgba(8,12,9,.55) !important;
  color:var(--dg-text) !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:rgba(var(--theme-color-rgb), .55) !important;
  box-shadow:0 0 0 3px rgba(var(--theme-color-rgb), .18) !important;
}
nav a,.tab,.nav-item,.menu-item{
  border-radius:10px !important;
  transition:background .15s ease, color .15s ease !important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(var(--theme-color-rgb), .28);border-radius:999px}
::-webkit-scrollbar-track{background:transparent}
img,video{max-width:100%;height:auto}
.btn-primary,.primary,button.primary,.login-btn{
  background:linear-gradient(135deg,var(--dg-accent),var(--dg-accent2)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(var(--theme-color-rgb), .25) !important;
}

/* --- из index.html #design-polish-v2 --- */

/* stronger visual hierarchy */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(800px 400px at 15% 10%, rgba(var(--theme-color-rgb), .10), transparent 60%),
    radial-gradient(700px 380px at 85% 15%, rgba(var(--theme-color-rgb), .06), transparent 55%);
}
body > * { position: relative; z-index: 1; }
/* top bar / header */
header, .header, .topbar, .navbar, nav.main, #header {
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}
/* login form focus */
.login-box, .auth, #loginForm, .login-card {
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--theme-color-rgb), .12) !important;
}
/* nicer section titles */
h1,h2,h3{ letter-spacing: -0.02em; }
/* chips / pills */
.chip, .badge, .tag, .pill {
  border-radius: 999px !important;
}
/* tables */
table{ border-collapse: separate; border-spacing: 0 6px; }
/* loading skeleton-ish */
.loading, .spinner { filter: saturate(1.1); }
/* mobile safe areas */
@supports(padding: max(0px)){
  body{ padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}
/* reduce harsh pure-white text on dark */
p, label, span, li { text-shadow: 0 1px 0 rgba(0,0,0,.15); }
/* primary CTA pulse subtle */
@keyframes dgGlow {
  0%,100% { box-shadow: 0 8px 24px rgba(var(--theme-color-rgb), .22); }
  50% { box-shadow: 0 8px 32px rgba(var(--theme-color-rgb),.35); }
}
.btn-primary, .primary, button.primary, .login-btn {
  animation: dgGlow 4s ease-in-out infinite;
}

/* --- из index.html --- */

/* THEME_V2: иконки в плитках главной не следовали за темой — оставались тёмно-зелёными
   при розовой и синей. Источник выследить не удалось: ни в одной таблице стилей нет
   зелёных значений, переменная на всех предках правильная, инлайновых стилей нет, и
   даже принудительный `color:inherit !important` цвет не менял. Поэтому вместо поиска
   виновника ставим правило с заведомо более высокой конкретностью — оно перекроет что
   бы там ни было. Заливка нужна потому, что иконки рисуются масками через
   background-color:currentColor (см. icons.css). Этот блок идёт последним в head,
   то есть выигрывает и по порядку тоже. */
html body .menu-btn .icon i,
html body .btn-green-glow .icon i,
html body .home-grid .icon i{
  color:var(--theme-color)!important}

/* --- из index.html --- */

@keyframes iabLoad { 0%{margin-left:-30%} 100%{margin-left:130%} }


/* ============================================================================
   GRAPHITE_V1 — выбранное направление «Графит».

   ПРИНЦИП, которого не было в шести предыдущих заходах: поверхности НЕЙТРАЛЬНЫЕ
   (графит без цветного налёта), а цвет появляется ТОЛЬКО на важном — выбранной
   плитке, активной вкладке и главной кнопке. Раньше я красил цветом всё подряд,
   поэтому важное переставало выделяться, а при смене темы половина экрана
   оставалась прежнего цвета. Здесь смена темы меняет только акценты, и рассинхрону
   взяться неоткуда.

   Чего здесь НЕТ намеренно:
     · глянцевых градиентов и объёмных кромок — из-за них вид был «старперский»,
       так оформляли кнопки до 2012 года;
     · внешнего свечения — «засвечено»;
     · backdrop-filter — он стоял на 225 элементах и ронял скорость.

   Этот блок — ЕДИНСТВЕННЫЙ слой оформления от меня: предыдущие пять (SURFACE_V1,
   CONTRAST_V1, TINT_V1, LIFT_V1, GLASS_V1) удалены целиком, а не перекрыты.
   ============================================================================ */

:root{
  --g-bg:#0C0D0E;          /* полотно */
  --g-surface:#17191C;     /* карточки, плитки, панели */
  --g-surface-2:#1E2125;   /* наведение */
  --g-sunken:#0F1112;      /* поля ввода — ниже полотна */
  --g-line:rgba(255,255,255,.09);
  --g-hair:rgba(255,255,255,.07);
  --g-text:#E8EBEA;
  --g-dim:#8A918F;
  --g-icon:#9BA3A1;
  --g-radius:10px;
}

/* ---------- 1. снимаем размытие: оно дорогое и здесь не нужно ---------- */
html body .menu-btn, html body .card, html body .acc-item, html body .acc-card,
html body .metric-card, html body .glass-reflect, html body .drop-zone,
html body .tab, html body .tab.glass-reflect, html body .btn, html body .chip,
html body .fchip, html body .badge, html body .slot-btn, html body .pix-slot-btn,
html body nav.nav, html body .header, html body .form-control{
  -webkit-backdrop-filter:none !important}

/* ---------- 2. полотно ---------- */
html body{
  background-color:var(--g-bg) !important;
  background-image:none !important;
  color:var(--g-text) !important;
}

/* ---------- 3. поверхности: ровный графит, тонкая линия, без теней ----------
   Отсутствие тени здесь осознанно: в современном тёмном интерфейсе уровень
   задаётся светлотой и границей, а тень добавляет ту самую «объёмность»,
   которая и читалась как устаревшая. */
html body .card, html body .acc-card, html body .metric-card,
html body .acc-item, html body .glass-reflect, html body .drop-zone,
html body .menu-btn, html body nav.nav, html body .header{
  border:1px solid var(--g-line) !important;
  border-radius:var(--g-radius) !important;
  color:var(--g-text) !important;
  transition:background-color .16s ease, border-color .16s ease !important}
html body .card::after, html body .menu-btn::after, html body .acc-item::after,
html body .metric-card::after, html body .drop-zone::after,
html body .card::before, html body .menu-btn::before, html body .acc-item::before{
  display:none !important;          /* блики от прошлых заходов */
}
html body .card:hover, html body .acc-item:hover,
html body .drop-zone:hover, html body .menu-btn:hover{
  border-color:rgba(255,255,255,.16) !important;
  transform:none !important}

/* ---------- 4. поля ввода: ниже полотна ---------- */
html body .form-control, html body input.form-control,
html body textarea.form-control, html body select.form-control{
  background-color:var(--g-sunken) !important;
  background-image:none !important;
  border:1px solid var(--g-hair) !important;
  border-radius:var(--g-radius) !important;
  color:var(--g-text) !important;
  box-shadow:none !important;
}
html body .form-control::placeholder{ color:#6B7370 !important; }
html body .form-control:focus{
  border-color:rgba(var(--theme-color-rgb),.55) !important;
  box-shadow:0 0 0 3px rgba(var(--theme-color-rgb),.13) !important;
  outline:none !important;
}

/* ---------- 5. спокойные вкладки и второстепенные кнопки ---------- */
html body .tab:not(.active), html body .tab.glass-reflect:not(.active),
html body .btn:not(.btn-primary):not(.menu-btn){
  border:1px solid var(--g-line) !important;
  border-radius:var(--g-radius) !important;
  color:var(--g-dim) !important}
html body .tab:not(.active):hover,
html body .btn:not(.btn-primary):not(.menu-btn):hover{
  color:var(--g-text) !important}

/* ---------- 6. ВЫБРАННОЕ: подсветка цветом, заливка остаётся тёмной ----------
   Выбранная плитка не заливается цветом целиком — иначе ряд вкладок «засвечивает»
   экран. Работают тонкая цветная рамка, лёгкая подложка и цветной текст. */
html body .tab.active, html body .tab.glass-reflect.active,
html body .nav-item.active, html body .slot-btn.active,
html body .pix-slot-btn.active{
  border:1px solid rgba(var(--theme-color-rgb),.42) !important;
  border-radius:var(--g-radius) !important;
  color:var(--theme-text) !important;
  font-weight:600 !important}
html body .tab.active i, html body .nav-item.active i{
  color:var(--theme-text) !important}

/* ---------- 7. ГЛАВНОЕ ДЕЙСТВИЕ: единственная сплошная заливка цветом ---------- */
html body .btn-primary, html body #loginScreen button,
html body .home-grid > .menu-btn:first-child{
  border:1px solid transparent !important;
  border-radius:var(--g-radius) !important;
  color:#08110D !important;
  font-weight:600 !important}
html body .btn-primary:hover, html body #loginScreen button:hover,
html body .home-grid > .menu-btn:first-child:hover{
  transform:none !important}
html body .home-grid > .menu-btn:first-child .text,
html body .home-grid > .menu-btn:first-child .icon i{
  color:#08110D !important}

/* ---------- 8. текст и значки ---------- */
html body .menu-btn .text{ color:var(--g-text) !important; font-weight:500 !important}
html body .menu-btn .icon i{ color:var(--g-icon) !important}
html body .nav-item{ color:var(--g-dim) !important}
html body .acc-name, html body .metric-label{ color:var(--g-text) !important; }
html body .theme-text, html body .big-number, html body .metric-value{
  color:var(--theme-text) !important;
}

/* GRAPHITE_V1 (доводка). На фоне оставалась зелёная дымка от прежних поколений
   оформления — она противоречит самой идее графита: поверхности должны быть
   нейтральными, а цвет появляться только на важном. Три источника, найдены
   обходом всех элементов страницы:
     body::before   — большое радиальное свечение цветом темы во весь экран
     .vg-blob (×3)  — декоративные цветные пятна поверх фона
     .btn::before   — подсветка, следующая за курсором, на КАЖДОЙ кнопке
   Последняя, кроме вида, ещё и заставляла браузер перерисовывать область при
   каждом движении мыши. */
html body::before{ display:none !important; content:none !important; }
html body .vg-blob{ display:none !important; }
html body .btn::before, html body .menu-btn::before,
html body .tab::before, html body .nav-item::before{
  display:none !important; content:none !important}

/* ============================================================================
   PREMIUM_V1 — единая система оформления.

   Зачем понадобилось. Замерено в файлах: 43 разных скругления, 36 размеров
   шрифта, 35 цветов текста и 550 встроенных стилей прямо в разметке. Системы
   не было — каждый кусок оформлялся на месте, отсюда и ощущение мешанины.

   Что делает этот слой:
     · сводит скругления к четырём, размеры шрифта к семи, цвета текста к пяти;
     · гасит свечение и тяжёлые тени — от них дёшево выглядит даже хорошая вёрстка;
     · переделывает кнопки меню из плит «значок над словом» в строки
       «значок · название · стрелка»: вчетверо плотнее и читается сразу;
     · выравнивает три разных визуальных языка (список слева, кнопки в центре,
       навигация справа) в один.

   Про !important. Он тут не от лени: 550 встроенных стилей в разметке
   перебивают любое обычное правило. Ставится только на те свойства, которые
   реально перекрыты в разметке, — цвет, размер шрифта, отступы, скругления.

   Слой идёт ПОСЛЕДНИМ в файле и рассчитан на это.
   ============================================================================ */

:root {
    /* ── поверхности: почти чёрный, но не пустой ── */
    --p-bg:        #0A0B0C;
    --p-surface:   #131517;
    --p-raised:    #191C1F;
    --p-hover:     #1F2326;

    /* ── границы: волосяные, две ступени ── */
    --p-line:      rgba(255, 255, 255, .065);
    --p-line-2:    rgba(255, 255, 255, .12);

    /* ── текст: пять ступеней, больше не нужно ── */
    --p-text:      #EDF0EF;
    --p-text-2:    #98A09D;
    --p-text-3:    #646B68;
    --p-text-4:    #454B49;

    /* ── скругления: четыре, и всё ── */
    --p-r-sm:      8px;
    --p-r:         11px;
    --p-r-lg:      16px;
    --p-r-pill:    999px;

    /* ── ритм отступов, кратно четырём ── */
    --p-1: 4px;  --p-2: 8px;  --p-3: 12px;
    --p-4: 16px; --p-5: 24px; --p-6: 32px;

    /* единственная тень во всей системе — только под окнами */
    --p-shadow: 0 24px 64px -12px rgba(0, 0, 0, .7);
}

/* ── ГАСИМ ДЕШЁВОЕ ────────────────────────────────────────────────────────
   Свечение под текстом и цветные ореолы — первое, что выдаёт непрофессио-
   нальную работу. Тени оставляем только окнам. */
body, .page, .card, .menu-btn, .btn, h1, h2, h3, h4,
.nav, .nav-item, .modal-content, .form-control {
    text-shadow: none !important;
}
.menu-btn, .card, .btn, .nav-item, .form-control, .chip, .tab {
    box-shadow: none !important;
    filter: none !important;
}
.glass-reflect::before, .glass-reflect::after { display: none !important; }

/* ── ОСНОВА ──────────────────────────────────────────────────────────────── */
body {
    background: var(--p-bg) !important;
    color: var(--p-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

/* Заголовок страницы. Был со свечением и во всю ширину плитой — теперь
   просто крупная надпись с плотным межбуквенным расстоянием. */
.page-title, .app-title, h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
    color: var(--p-text) !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 var(--p-5) !important;
}

h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--p-text) !important;
}

/* ── КНОПКИ МЕНЮ: главная перемена ────────────────────────────────────────
   Было: значок над словом, плита на всю ширину, ~80px высоты на одно слово,
   все одинаковые и неразличимые. Стало: строка со значком в рамке слева,
   названием и стрелкой справа. Плотнее вчетверо и сканируется глазами. */
.menu-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--p-3) !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 13px !important;
    margin: 0 0 var(--p-2) !important;
    background: var(--p-surface) !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r) !important;
    text-align: left !important;
    position: relative !important;
    transition: background .16s ease, border-color .16s ease !important;
}
.menu-btn .icon {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: var(--p-r-sm) !important;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid var(--p-line) !important;
    color: var(--p-text-2) !important;
    font-size: 13px !important;
    margin: 0 !important;
    transition: color .16s ease !important;
}
.menu-btn .text {
    flex: 1 1 auto !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--p-text) !important;
    letter-spacing: -0.012em !important;
    margin: 0 !important;
    text-align: left !important;
}
/* стрелка — намёк, что кнопка куда-то ведёт */
.menu-btn::after {
    content: '';
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--p-text-4);
    border-bottom: 1.5px solid var(--p-text-4);
    transform: rotate(-45deg);
    margin-right: 3px;
    transition: border-color .16s ease;
}
.menu-btn:hover {
    background: var(--p-raised) !important;
    border-color: var(--p-line-2) !important;
}
.menu-btn:hover .icon { color: var(--theme-color) !important; }
.menu-btn:hover::after { border-color: var(--p-text-2); }
.menu-btn:active { background: var(--p-hover) !important; }

/* Главное действие на экране — одно. Раньше это была мятная плита во всю
   ширину, которая перекрикивала всё остальное. */
.menu-btn.primary, .menu-btn:first-of-type.accent {
    background: var(--p-raised) !important;
    border-color: rgba(var(--ac-rgb), .28) !important;
}
.menu-btn.primary .icon {
    background: rgba(var(--ac-rgb), .12) !important;
    border-color: rgba(var(--ac-rgb), .3) !important;
    color: var(--theme-color) !important;
}

/* ── КНОПКИ ──────────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--p-r) !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em !important;
    transition: background .16s ease, border-color .16s ease, opacity .16s ease !important;
}
.btn-primary {
    background: var(--theme-color) !important;
    color: #08110D !important;
    border: 1px solid var(--theme-color) !important;
    font-weight: 650 !important;
}
.btn-primary:hover { opacity: .9 !important; }
.btn-outline {
    background: transparent !important;
    color: var(--p-text-2) !important;
    border: 1px solid var(--p-line-2) !important;
}
.btn-outline:hover {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--p-text) !important;
    border-color: rgba(255, 255, 255, .2) !important;
}
.btn-sm { padding: 6px 10px !important; font-size: 12.5px !important; }

/* ── ПОЛЯ ВВОДА ──────────────────────────────────────────────────────────── */
.form-control, input[type=text], input[type=url], input[type=number],
textarea, select {
    background: var(--p-surface) !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r) !important;
    color: var(--p-text) !important;
    font-size: 14px !important;
    padding: 11px 13px !important;
    transition: border-color .16s ease, background .16s ease !important;
}
.form-control:focus, textarea:focus, select:focus, input:focus {
    outline: none !important;
    border-color: rgba(var(--ac-rgb), .45) !important;
    background: var(--p-raised) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--p-text-4) !important; }

/* ── ОКНА ────────────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--p-surface) !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r-lg) !important;
    box-shadow: var(--p-shadow) !important;
    padding: var(--p-5) !important;
}
.modal { backdrop-filter: blur(3px); background: rgba(0, 0, 0, .62) !important; }

/* повторяющаяся шапка окна: раньше её собирали встроенными стилями 20 раз */
.m-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--p-3); margin-bottom: var(--p-4);
}
.m-head h3 { margin: 0 !important; }
.m-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--p-text-2) !important;
    margin: 0 0 var(--p-4) !important;
}

/* ── КАРТОЧКИ И СТРОКИ СПИСКОВ ───────────────────────────────────────────── */
.card, .p-box {
    background: var(--p-surface) !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r) !important;
}
.p-box { padding: var(--p-3) !important; }

/* Список сообщений слева жил по своим правилам — приводим к общему языку */
.chat-item, .contact-item, .msg-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--p-line) !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    transition: background .16s ease !important;
}
.chat-item:hover, .contact-item:hover, .msg-item:hover {
    background: rgba(255, 255, 255, .03) !important;
}
.avatar, .chat-avatar {
    border-radius: var(--p-r-sm) !important;
    background: var(--p-raised) !important;
    border: 1px solid var(--p-line) !important;
    color: var(--p-text-2) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* ── БОКОВАЯ НАВИГАЦИЯ ───────────────────────────────────────────────────── */
.nav {
    background: var(--p-surface) !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: var(--p-1) !important;
}
.nav-item {
    border-radius: var(--p-r-sm) !important;
    color: var(--p-text-3) !important;
    background: transparent !important;
    border: 0 !important;
    transition: color .16s ease, background .16s ease !important;
}
.nav-item .nav-label, .nav-item span {
    font-size: 9.5px !important;
    letter-spacing: .06em !important;
    font-weight: 600 !important;
}
.nav-item:hover { color: var(--p-text-2) !important; background: rgba(255,255,255,.03) !important; }
.nav-item.active {
    color: var(--theme-color) !important;
    background: rgba(var(--ac-rgb), .1) !important;
}

/* ── МЕЛОЧИ ──────────────────────────────────────────────────────────────── */
.p-label {
    display: block;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .085em; text-transform: uppercase;
    color: var(--p-text-3); margin-bottom: 6px;
}
.p-hint { font-size: 11.5px; line-height: 1.55; color: var(--p-text-3); }
.p-muted { color: var(--p-text-2) !important; }

/* Тексты-пояснения в старых окнах стояли цветом #555 — на тёмном фоне это
   почти не читается. Поднимаем до рабочей ступени. */
[style*="color:#555"], [style*="color: #555"] { color: var(--p-text-2) !important; }

/* Ползунки и галочки — в цвет темы, чтобы не торчали синим системным */
input[type=range], input[type=checkbox], input[type=radio] {
    accent-color: var(--theme-color) !important;
}

/* полосы прокрутки: тонкие, без цвета */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12); border-radius: var(--p-r-pill);
    border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* На узком экране строки меню чуть плотнее */
@media (max-width: 640px) {
    .menu-btn { padding: 10px 12px !important; }
    .menu-btn .icon { width: 30px !important; height: 30px !important; }
    .modal-content { padding: var(--p-4) !important; border-radius: var(--p-r) !important; }
    h1, .page-title, .app-title { font-size: 22px !important; }
}

/* ============================================================================
   PREMIUM_V2 — приставка `html body` поднимает вес; подробности в скрипте.
   ============================================================================ */

/* Заголовок страницы: было свечение в 25 пикселей мятным цветом и рамка
   карточки вокруг. Осталась просто крупная надпись. */
html body .header { text-align: left !important; margin-bottom: 22px !important;
                    padding: 0 !important; background: none !important;
                    border: 0 !important; border-radius: 0 !important; }
html body .header h2, html body .design-gang-title {
    text-shadow: none !important;
    font-size: 25px !important;
    font-weight: 640 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    color: var(--p-text) !important;
    margin: 0 !important;
}

/* Кнопки меню: единый фон и рамка поверх всех шестнадцати старых правил. */
html body .menu-btn {
    background: var(--p-surface) !important;
    background-color: var(--p-surface) !important;
    background-image: none !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body .menu-btn:hover {
    background: var(--p-raised) !important;
    background-color: var(--p-raised) !important;
    border-color: var(--p-line-2) !important;
}
html body .menu-btn .icon i, html body .menu-btn .text { text-shadow: none !important; }

/* Главное действие. Было: сплошная мятная плита во всю ширину, которая
   перекрикивала весь экран. Стало: та же строка, но с подсветкой значка и
   тонкой акцентной рамкой — видно, что главное, и не режет глаз. */
html body .home-grid > .menu-btn:first-child,
html body .menu-btn.btn-green-glow {
    background: var(--p-raised) !important;
    background-color: var(--p-raised) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--ac-rgb), .3) !important;
}
html body .home-grid > .menu-btn:first-child:hover,
html body .menu-btn.btn-green-glow:hover {
    background: var(--p-hover) !important;
    background-color: var(--p-hover) !important;
    border-color: rgba(var(--ac-rgb), .45) !important;
}
html body .home-grid > .menu-btn:first-child .icon,
html body .menu-btn.btn-green-glow .icon {
    background: rgba(var(--ac-rgb), .13) !important;
    border-color: rgba(var(--ac-rgb), .32) !important;
    color: var(--theme-color) !important;
}
html body .home-grid > .menu-btn:first-child .text,
html body .menu-btn.btn-green-glow .text {
    color: var(--p-text) !important;
    font-weight: 600 !important;
}

/* стрелка была почти неразличима — поднимаем на ступень */
html body .menu-btn::after {
    border-right-color: var(--p-text-3) !important;
    border-bottom-color: var(--p-text-3) !important;
}

/* Карточки и поля — один фон на всё. */
html body .card, html body .acc-item, html body .drop-zone {
    background: var(--p-surface) !important;
    background-color: var(--p-surface) !important;
    background-image: none !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body .form-control, html body textarea, html body select, html body input {
    background: var(--p-surface) !important;
    background-image: none !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r) !important;
    box-shadow: none !important;
}
html body .form-control:focus, html body textarea:focus,
html body select:focus, html body input:focus {
    border-color: rgba(var(--ac-rgb), .45) !important;
    background: var(--p-raised) !important;
}

/* Окна: единственное место во всей системе, где есть тень. */
html body .modal { background: rgba(0, 0, 0, .66) !important;
                   backdrop-filter: blur(3px) !important; }
html body .modal-content {
    background: var(--p-surface) !important;
    background-image: none !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r-lg) !important;
    box-shadow: var(--p-shadow) !important;
}

/* Навигация справа: была плавающей пилюлей со своим языком. */
html body .nav {
    background: var(--p-surface) !important;
    background-image: none !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body .nav-item {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--p-r-sm) !important;
}
html body .nav-item.active {
    background: rgba(var(--ac-rgb), .1) !important;
    color: var(--theme-color) !important;
}

/* Список слева жил по своим правилам — сводим к общему языку. */
html body .chat-item, html body .contact-item, html body .msg-item {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--p-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .chat-item:hover, html body .contact-item:hover, html body .msg-item:hover {
    background: rgba(255, 255, 255, .03) !important;
}

/* ============================================================================
   PREMIUM_V3 — нормализация по ЗНАЧЕНИЯМ, а не по классам.

   Половина разметки рождается в скрипте со встроенными стилями, классов у неё
   нет и повесить их некуда без переписывания сотен строк. Но встроенный стиль
   виден селектору по атрибуту — этим и пользуемся.

   Что чинится:
     · восемь разных скруглений (4,6,8,10,12,14,16,20) сводятся к трём;
     · 43 места с `color:#555` — почти чёрный текст на чёрном фоне, его
       физически не видно. Это и была половина ощущения «ужасно»;
     · разнобой фонов строк (0.02 / 0.025 / 0.03 / 0.05 / 0.06) — к одному.

   Плюс три исправления по замерам в браузере:
     · стрелку у кнопок меню гасило МОЁ ЖЕ правило против блика `.glass-reflect`
       (четыре кнопки носят этот класс);
     · у активного пункта навигации осталась тяжёлая тень 15/30 пикселей —
       правило `.nav-item.active` тяжелее, чем `html body .nav-item`;
     · акцент нельзя вешать на класс `.btn-green-glow`: его носят СЕМЬ кнопок,
       и акцентными стали бы все.
   ============================================================================ */

/* ── стрелка: гасим блик, но не её ── */
html body .glass-reflect::before { display: none !important; }
html body .menu-btn::after,
html body .menu-btn.glass-reflect::after {
    display: block !important;
    content: '' !important;
    width: 6px !important; height: 6px !important;
    border-right: 1.5px solid var(--p-text-3) !important;
    border-bottom: 1.5px solid var(--p-text-3) !important;
    border-top: 0 !important; border-left: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    transform: rotate(-45deg) !important;
    flex: 0 0 auto !important;
    margin: 0 3px 0 0 !important;
    position: static !important;
    opacity: .85;
}
html body .menu-btn:hover::after {
    border-right-color: var(--p-text-2) !important;
    border-bottom-color: var(--p-text-2) !important;
}

/* ── активный пункт навигации: снимаем тяжёлую тень ── */
html body .nav-item.active, html body .nav-item.active:hover {
    box-shadow: none !important;
    border: 1px solid rgba(var(--ac-rgb), .28) !important;
    background: rgba(var(--ac-rgb), .1) !important;
}

/* ── акцент только у ПЕРВОЙ кнопки, а не у всех с зелёным классом ── */
html body .menu-btn.btn-green-glow:not(:first-child) {
    background: var(--p-surface) !important;
    background-color: var(--p-surface) !important;
    border: 1px solid var(--p-line) !important;
}
html body .menu-btn.btn-green-glow:not(:first-child) .icon {
    background: rgba(255, 255, 255, .035) !important;
    border-color: var(--p-line) !important;
    color: var(--p-text-2) !important;
}
html body .menu-btn.btn-green-glow:not(:first-child) .text {
    color: var(--p-text) !important;
    font-weight: 500 !important;
}

/* ── СКРУГЛЕНИЯ: восемь значений в три ступени ── */
html body [style*="border-radius:4px"],  html body [style*="border-radius: 4px"],
html body [style*="border-radius:6px"],  html body [style*="border-radius: 6px"],
html body [style*="border-radius:8px"],  html body [style*="border-radius: 8px"] {
    border-radius: var(--p-r-sm) !important;
}
html body [style*="border-radius:10px"], html body [style*="border-radius: 10px"],
html body [style*="border-radius:12px"], html body [style*="border-radius: 12px"],
html body [style*="border-radius:14px"], html body [style*="border-radius: 14px"] {
    border-radius: var(--p-r) !important;
}
html body [style*="border-radius:16px"], html body [style*="border-radius: 16px"],
html body [style*="border-radius:18px"], html body [style*="border-radius: 18px"],
html body [style*="border-radius:20px"], html body [style*="border-radius: 20px"],
html body [style*="border-radius:24px"], html body [style*="border-radius: 24px"] {
    border-radius: var(--p-r-lg) !important;
}
/* круглое остаётся круглым */
html body [style*="border-radius:50%"], html body [style*="border-radius: 50%"],
html body [style*="border-radius:999"], html body [style*="border-radius: 999"] {
    border-radius: var(--p-r-pill) !important;
}

/* ── ЦВЕТА ТЕКСТА: то, что не видно на тёмном ── */
html body [style*="color:#555"], html body [style*="color: #555"],
html body [style*="color:#333"], html body [style*="color: #333"],
html body [style*="color:#666"], html body [style*="color: #666"],
html body [style*="color:#777"], html body [style*="color: #777"],
html body [style*="color:#888"], html body [style*="color: #888"] {
    color: var(--p-text-2) !important;
}
html body [style*="color:#999"], html body [style*="color: #999"],
html body [style*="color:#aaa"], html body [style*="color: #aaa"] {
    color: var(--p-text-2) !important;
}

/* ── ФОНЫ СТРОК: пять оттенков полупрозрачного белого — к одному ── */
html body [style*="background:rgba(255,255,255,0.02)"],
html body [style*="background:rgba(255,255,255,0.025)"],
html body [style*="background:rgba(255,255,255,0.03)"],
html body [style*="background:rgba(255,255,255,0.05)"],
html body [style*="background:rgba(255,255,255,0.06)"],
html body [style*="background: rgba(255, 255, 255, 0.02)"],
html body [style*="background: rgba(255, 255, 255, 0.03)"],
html body [style*="background: rgba(255, 255, 255, 0.05)"] {
    background: var(--p-surface) !important;
    border-color: var(--p-line) !important;
}

/* ── РАЗМЕРЫ ШРИФТА: 36 значений к семи ступеням ── */
html body [style*="font-size:11px"], html body [style*="font-size: 11px"],
html body [style*="font-size:10px"], html body [style*="font-size: 10px"] {
    font-size: 11px !important;
}
html body [style*="font-size:12px"], html body [style*="font-size: 12px"],
html body [style*="font-size:12.5px"] { font-size: 12.5px !important; }
html body [style*="font-size:13px"], html body [style*="font-size: 13px"],
html body [style*="font-size:14px"], html body [style*="font-size: 14px"] {
    font-size: 13.5px !important;
}
html body [style*="font-size:15px"], html body [style*="font-size: 15px"],
html body [style*="font-size:16px"], html body [style*="font-size: 16px"] {
    font-size: 15px !important;
}
html body [style*="font-size:22px"], html body [style*="font-size: 22px"],
html body [style*="font-size:24px"], html body [style*="font-size: 24px"],
html body [style*="font-size:28px"], html body [style*="font-size: 28px"] {
    font-size: 22px !important;
    letter-spacing: -0.025em !important;
}

/* ── ТОЛЩИНА: 800 и 900 на экране выглядят кричаще ── */
html body [style*="font-weight:900"], html body [style*="font-weight: 900"],
html body [style*="font-weight:800"], html body [style*="font-weight: 800"] {
    font-weight: 650 !important;
}
html body [style*="font-weight:700"], html body [style*="font-weight: 700"] {
    font-weight: 600 !important;
}

/* ── убираем остатки свечения и тяжёлых теней где бы то ни было ── */
html body [style*="text-shadow"] { text-shadow: none !important; }
html body [style*="box-shadow: 0 15px"], html body [style*="box-shadow:0 15px"],
html body [style*="box-shadow: 0 20px"], html body [style*="box-shadow:0 20px"] {
    box-shadow: none !important;
}

/* ============================================================================
   PREMIUM_V4 — последняя доводка: левый список и мелочи.

   Список контактов оставался последним куском с чужим языком: строки выглядели
   отдельными карточками со скруглением и рамкой по кругу, тогда как весь
   остальной интерфейс — плоские строки с волосяной чертой снизу. Из-за этого
   на одном экране читались два разных интерфейса.
   ============================================================================ */

/* Строки списка контактов: плоские, с одной чертой снизу. */
html body #maxContactsList > div {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--p-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    transition: background .15s ease !important;
}
html body #maxContactsList > div:hover {
    background: rgba(255, 255, 255, .03) !important;
}
html body #maxContactsList > div:last-child { border-bottom: 0 !important; }

/* Аватарки: скруглённый квадрат вместо круга — спокойнее и современнее,
   и перекликается со значками в кнопках меню. */
html body #maxContactsList > div img,
html body #maxContactsList > div > div:first-child {
    border-radius: var(--p-r-sm) !important;
}

/* Шапка панели сообщений — тот же вес, что у остальных заголовков. */
html body #maxContactsScreen > div:first-child {
    border-bottom: 1px solid var(--p-line) !important;
    background: transparent !important;
}

/* Значок непрочитанного: был крупной оранжевой точкой, спорившей с акцентом. */
html body .nav-item .badge, html body .nav-item [class*="dot"],
html body .nav-item [class*="badge"] {
    background: var(--theme-color) !important;
    box-shadow: none !important;
    border: 2px solid var(--p-bg) !important;
    min-width: 8px !important; height: 8px !important;
    font-size: 0 !important;
}

/* Кнопки меню чуть плотнее: было 56 пикселей на строку из одного слова. */
html body .menu-btn { padding: 9px 12px !important; }
html body .menu-btn .icon { width: 30px !important; height: 30px !important; }

/* Остатки скруглений из правил (не из встроенных стилей). */
html body .chat-item, html body .contact-item, html body .msg-item,
html body .acc-item, html body .tab { border-radius: var(--p-r) !important; }

/* ============================================================================
   PREMIUM_V5 — ОБЪЁМ. Возврат глубины после перебора с плоскостью.

   Прошлый заход навёл порядок в значениях, но выпрямил всё до плоских строк —
   получилось сухо. По присланному образцу видно, из чего складывается «дорого»:

     1. ЗАЛИВКА СВЕРХУ ВНИЗ — плитка светлее у верхнего края и темнеет к нижнему,
        как будто на неё падает свет сверху. Ровная заливка всегда выглядит
        дешевле градиента, даже очень слабого.
     2. СВЕТЛАЯ КРОМКА — верхняя граница на тон ярче остальных: ребро, поймавшее
        свет. Одна строка, а объём появляется сразу.
     3. ВНУТРЕННИЙ БЛИК — тонкая светлая линия сразу под верхней кромкой.
     4. МЯГКАЯ ТЕНЬ СНИЗУ — плитка отрывается от фона, а не лежит в нём.
     5. КРУПНОЕ СКРУГЛЕНИЕ (18px) — мелкое читается как «системное», крупное
        как «сделанное».
     6. ЗНАЧОК НАД НАЗВАНИЕМ по центру — как в образце.

   Что СОХРАНЯЕМ из наведённого порядка: единые значения скруглений и размеров,
   читаемые цвета текста, отсутствие кричащего свечения у заголовка. Объём — не
   повод возвращать мешанину.
   ============================================================================ */

:root {
    /* глубина: три слоя заливки вместо одного цвета */
    --d-top:    rgba(255, 255, 255, .055);
    --d-mid:    rgba(255, 255, 255, .014);
    --d-bottom: rgba(0, 0, 0, .12);
    --d-edge:   rgba(255, 255, 255, .115);   /* светлая кромка сверху */
    --d-line:   rgba(255, 255, 255, .065);
    --d-base:   #15181B;
    --d-r:      18px;

    --d-lift:  inset 0 1px 0 rgba(255, 255, 255, .055),
               0 1px 2px rgba(0, 0, 0, .40),
               0 10px 26px -12px rgba(0, 0, 0, .62);
    --d-lift-hover: inset 0 1px 0 rgba(255, 255, 255, .08),
               0 2px 4px rgba(0, 0, 0, .42),
               0 16px 34px -14px rgba(0, 0, 0, .68);
}

/* ── КНОПКИ МЕНЮ: объёмные плитки, значок над названием ─────────────────── */
html body .menu-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    text-align: center !important;
    padding: 18px 14px !important;
    margin: 0 0 10px !important;
    min-height: 0 !important;
    height: auto !important;

    background: linear-gradient(180deg, var(--d-top) 0%, var(--d-mid) 46%, var(--d-bottom) 100%),
                var(--d-base) !important;
    background-color: var(--d-base) !important;

    border: 1px solid var(--d-line) !important;
    border-top-color: var(--d-edge) !important;
    border-radius: var(--d-r) !important;
    box-shadow: var(--d-lift) !important;

    transition: transform .18s cubic-bezier(.2, .7, .3, 1),
                box-shadow .18s ease, border-color .18s ease !important;
}
html body .menu-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--d-lift-hover) !important;
    border-color: rgba(255, 255, 255, .1) !important;
    border-top-color: rgba(255, 255, 255, .16) !important;
}
html body .menu-btn:active { transform: translateY(0) !important; }

/* значок — крупный, без рамки-коробки: в образце он просто парит над словом */
html body .menu-btn .icon {
    width: auto !important; height: auto !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    color: var(--p-text-2) !important;
    margin: 0 !important;
    display: block !important;
    transition: color .18s ease, transform .18s ease !important;
}
html body .menu-btn:hover .icon { color: var(--theme-color) !important; transform: translateY(-1px) !important; }
html body .menu-btn .text {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.008em !important;
    color: var(--p-text) !important;
    text-align: center !important;
    line-height: 1.3 !important;
}
/* стрелка сбоку в центрированной раскладке лишняя */
html body .menu-btn::after, html body .menu-btn.glass-reflect::after { display: none !important; }

/* ── ГЛАВНОЕ ДЕЙСТВИЕ: та же плитка, но со свечением из-под неё ─────────── */
html body .home-grid > .menu-btn:first-child {
    background: linear-gradient(180deg,
                    rgba(var(--ac-rgb), .20) 0%,
                    rgba(var(--ac-rgb), .065) 52%,
                    rgba(0, 0, 0, .14) 100%),
                var(--d-base) !important;
    background-color: var(--d-base) !important;
    border: 1px solid rgba(var(--ac-rgb), .34) !important;
    border-top-color: rgba(var(--ac-rgb), .52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
                0 1px 2px rgba(0, 0, 0, .4),
                0 14px 34px -14px rgba(var(--ac-rgb), .40) !important;
}
html body .home-grid > .menu-btn:first-child:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(var(--ac-rgb), .48) !important;
    border-top-color: rgba(var(--ac-rgb), .68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
                0 2px 4px rgba(0, 0, 0, .42),
                0 20px 44px -16px rgba(var(--ac-rgb), .52) !important;
}
html body .home-grid > .menu-btn:first-child .icon { color: var(--theme-color) !important; }
html body .home-grid > .menu-btn:first-child .text {
    color: #fff !important; font-weight: 650 !important;
}

/* ── КАРТОЧКИ И ОКНА: та же глубина ─────────────────────────────────────── */
html body .card, html body .acc-item, html body .drop-zone, html body .p-box {
    background: linear-gradient(180deg, var(--d-top) 0%, var(--d-mid) 46%, var(--d-bottom) 100%),
                var(--d-base) !important;
    background-color: var(--d-base) !important;
    border: 1px solid var(--d-line) !important;
    border-top-color: var(--d-edge) !important;
    border-radius: var(--d-r) !important;
    box-shadow: var(--d-lift) !important;
}
html body .modal-content {
    background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.008) 30%, rgba(0,0,0,.10) 100%),
                #131619 !important;
    border: 1px solid var(--d-line) !important;
    border-top-color: var(--d-edge) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
                0 40px 90px -20px rgba(0, 0, 0, .8) !important;
}

/* ── ПОЛЯ ВВОДА: вдавленные, а не выпуклые — так их и отличают от кнопок ── */
html body .form-control, html body textarea, html body select, html body input {
    background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 100%),
                #101315 !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-top-color: rgba(0, 0, 0, .5) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45) !important;
}
html body .form-control:focus, html body textarea:focus,
html body select:focus, html body input:focus {
    border-color: rgba(var(--ac-rgb), .5) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45),
                0 0 0 3px rgba(var(--ac-rgb), .1) !important;
}

/* ── КНОПКИ ДЕЙСТВИЙ ─────────────────────────────────────────────────────── */
html body .btn-primary {
    background: linear-gradient(180deg,
                    color-mix(in srgb, var(--theme-color) 100%, #fff 14%) 0%,
                    var(--theme-color) 55%,
                    color-mix(in srgb, var(--theme-color) 100%, #000 12%) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--theme-color) 100%, #000 18%) !important;
    border-top-color: color-mix(in srgb, var(--theme-color) 100%, #fff 30%) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
                0 6px 18px -8px rgba(var(--ac-rgb), .55) !important;
    color: #06120C !important;
}
html body .btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
                0 10px 26px -10px rgba(var(--ac-rgb), .7) !important;
}
html body .btn-outline {
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-top-color: rgba(255, 255, 255, .15) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

/* ── НАВИГАЦИЯ: та же плитка ─────────────────────────────────────────────── */
html body .nav {
    background: linear-gradient(180deg, var(--d-top) 0%, var(--d-mid) 46%, var(--d-bottom) 100%),
                var(--d-base) !important;
    border: 1px solid var(--d-line) !important;
    border-top-color: var(--d-edge) !important;
    border-radius: 20px !important;
    box-shadow: var(--d-lift) !important;
}
html body .nav-item.active, html body .nav-item.active:hover {
    background: linear-gradient(180deg, rgba(var(--ac-rgb), .2) 0%, rgba(var(--ac-rgb), .07) 100%) !important;
    border: 1px solid rgba(var(--ac-rgb), .3) !important;
    border-top-color: rgba(var(--ac-rgb), .48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    border-radius: 13px !important;
}

/* ── ФОН СТРАНИЦЫ: не ровная чернота, а лёгкий перелив ──────────────────── */
html body {
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(var(--ac-rgb), .045), transparent 70%),
        radial-gradient(700px 500px at 100% 100%, rgba(var(--ac-rgb), .022), transparent 70%),
        #0A0C0D !important;
    background-attachment: fixed !important;
}

/* Заголовок: без кричащего ореола, но с лёгким объёмом. */
html body .header h2, html body .design-gang-title {
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}

/* ── СПИСОК СЛЕВА: строки остаются плоскими (так и надо для списка),
      но получают ту же кромку сверху у контейнера. ─────────────────────── */
html body #maxContactsList > div:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
}

@media (max-width: 640px) {
    html body .menu-btn { padding: 15px 10px !important; border-radius: 16px !important; }
    html body .menu-btn .icon { font-size: 17px !important; }
    html body .menu-btn .text { font-size: 12.5px !important; }
}

/* ============================================================================
   PREMIUM_V6 — скругление и доводка объёма.

   Скругление задавалось не напрямую, а через переменные `--r` и `--g-radius`
   из прежних слоёв, и правило с более тяжёлым селектором
   (`html body .home-grid > .menu-btn:first-child`) побеждало моё. Вместо гонки
   весов переопределяем сами переменные — подтягивается везде разом, включая
   те правила, до которых иначе пришлось бы дотягиваться поимённо.
   ============================================================================ */
html:root, :root {
    --r: 18px;
    --g-radius: 18px;
}

/* Плитки: крупное скругление и чуть более заметный перепад заливки —
   в образце верх плитки ощутимо светлее низа. */
html body .menu-btn,
html body .home-grid > .menu-btn:first-child,
html body .card, html body .acc-item, html body .drop-zone {
    border-radius: 18px !important;
}
html body .menu-btn {
    background: linear-gradient(180deg,
                    rgba(255, 255, 255, .075) 0%,
                    rgba(255, 255, 255, .022) 42%,
                    rgba(0, 0, 0, .16) 100%),
                #15181B !important;
}
html body .home-grid > .menu-btn:first-child {
    background: linear-gradient(180deg,
                    rgba(var(--ac-rgb), .26) 0%,
                    rgba(var(--ac-rgb), .08) 50%,
                    rgba(0, 0, 0, .18) 100%),
                #15181B !important;
}

/* Значок чуть крупнее — в образце он заметно весомее подписи. */
html body .menu-btn .icon { font-size: 21px !important; }
html body .menu-btn { gap: 10px !important; padding: 19px 14px !important; }

/* Поля ввода остаются вдавленными и с меньшим скруглением — так их не
   спутать с кнопками. */
html body .form-control, html body textarea, html body select, html body input {
    border-radius: 14px !important;
}
html body .btn-primary, html body .btn-outline, html body .btn-sm {
    border-radius: 14px !important;
}
html body .modal-content { border-radius: 24px !important; }
html body .nav { border-radius: 22px !important; }
html body .nav-item, html body .nav-item.active { border-radius: 14px !important; }

/* ============================================================================
   PREMIUM_V7 — кривая сборка и лишние прямоугольники.

   Обе причины найдены замером, а не на глаз:

   1. ПРЯМОУГОЛЬНИК за значком главной плитки. В слое V2 значок сидел в рамке-
      коробке; в V5 я коробку убрал правилом `.menu-btn .icon`, но у ПЕРВОЙ
      плитки селектор `html body .home-grid > .menu-btn:first-child .icon`
      тяжелее — и коробка уцелела: зелёный квадрат 22×27 без скругления,
      да ещё с почти чёрным значком поверх.

   2. КРИВЫЕ ЗАЗОРЫ. Контейнер `.home-grid` — это flex с `gap: 9px`, а я сверху
      навесил плиткам `margin-bottom: 10px`. Итог: между рядами 19 пикселей,
      между колонками 9. Отсюда и ощущение рваной сборки. Отступ у плиток
      снимаем совсем — расстояния должна задавать ТОЛЬКО сетка, в одном месте.

   Заодно: значки были серые (155,163,161) и читались тускло — на образце они
   светлые. Поднимаем яркость.
   ============================================================================ */

/* ── ритм: одно расстояние и по вертикали, и по горизонтали ── */
html body .home-grid { gap: 12px !important; }
html body .home-grid > .menu-btn,
html body .menu-btn { margin: 0 !important; }

/* ── убираем коробку за значком у ВСЕХ плиток, включая первую ── */
html body .menu-btn .icon,
html body .home-grid > .menu-btn:first-child .icon,
html body .menu-btn.btn-green-glow .icon {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
}

/* ── значки светлее: серый читался тускло ── */
html body .menu-btn .icon,
html body .menu-btn .icon i {
    color: #C8D0CD !important;   /* заливку даёт сам набор через currentColor */
}
html body .menu-btn:hover .icon,
html body .menu-btn:hover .icon i {
    color: var(--theme-color) !important;
}
/* у главной плитки значок сразу в цвете темы, а не почти чёрный */
html body .home-grid > .menu-btn:first-child .icon,
html body .home-grid > .menu-btn:first-child .icon i {
    color: var(--theme-color) !important;
}

/* ── подписи чуть светлее и плотнее ── */
html body .menu-btn .text { color: #F0F3F2 !important; letter-spacing: -0.012em !important; }

/* ── перепад заливки заметнее: на образце верх плитки явно светлее ── */
html body .menu-btn {
    background: linear-gradient(180deg,
                    rgba(255, 255, 255, .085) 0%,
                    rgba(255, 255, 255, .026) 40%,
                    rgba(0, 0, 0, .18) 100%),
                #15181B !important;
}
html body .home-grid > .menu-btn:first-child {
    background: linear-gradient(180deg,
                    rgba(var(--ac-rgb), .28) 0%,
                    rgba(var(--ac-rgb), .085) 48%,
                    rgba(0, 0, 0, .20) 100%),
                #15181B !important;
}

/* ============================================================================
   PREMIUM_V8 — исправление моей же ошибки из V7.

   Значки в этом наборе рисуются НЕ шрифтом, а МАСКОЙ: у элемента `<i>` стоит
   `mask-image` с рисунком, а `background-color` служит краской — сквозь маску
   виден только силуэт. Обёртка `<span class="icon">` маски НЕ имеет.

   В V7 я покрасил фон обоим — и у обёртки краска легла сплошным
   прямоугольником, потому что вырезать её нечем. Отсюда светлые квадраты за
   каждым значком.

   Красим ТОЛЬКО `<i>`. Обёртка остаётся прозрачной.
   ============================================================================ */
html body .menu-btn .icon,
html body .home-grid > .menu-btn:first-child .icon,
html body .menu-btn.btn-green-glow .icon,
html body .nav-item .icon {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* краска для маски — только на самом значке */
html body .menu-btn .icon i { color: #C8D0CD !important; }
html body .menu-btn:hover .icon i {
    color: var(--theme-color) !important;
}
html body .home-grid > .menu-btn:first-child .icon i {
    color: var(--theme-color) !important;
}

/* ============================================================================
   PREMIUM_V9 — наведение и прямоугольник на значке.

   ПРЯМОУГОЛЬНИК. Правило из V7 красило фон И у значка, И у его ОБЁРТКИ:
       html body .menu-btn:hover .icon, html body .menu-btn:hover .icon i
   Значок рисуется маской — фон у него превращается в силуэт. У обёртки маски
   нет, поэтому та же краска ложится сплошным прямоугольником. В V8 я поправил
   обычное состояние, но у наведения селектор ТЯЖЕЛЕЕ (`:hover` добавляет вес),
   и там прямоугольник остался. Здесь закрываю все состояния разом.

   ПОДСВЕТКА. Дёшево выглядели три вещи сразу: плитка подпрыгивала вверх,
   значок скачком менял цвет на яркий акцентный, и тень раздувалась. Всё это
   вместе читается как реакция дешёвого шаблона.

   Спокойное наведение делает ровно одно: чуть светлеет поверхность и на тон
   ярче становится верхняя кромка — как будто свет упал сильнее. Ничего не
   двигается, ничего не перекрашивается, тень не растёт. Переход короткий:
   долгий тоже выдаёт дешевизну.
   ============================================================================ */

/* ── обёртка значка: фона нет НИКОГДА ── */
html body .menu-btn .icon,
html body .menu-btn:hover .icon,
html body .menu-btn:active .icon,
html body .menu-btn:focus .icon,
html body .home-grid > .menu-btn:first-child .icon,
html body .home-grid > .menu-btn:first-child:hover .icon,
html body .menu-btn.btn-green-glow .icon,
html body .menu-btn.btn-green-glow:hover .icon,
html body .nav-item .icon, html body .nav-item:hover .icon {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ── сам значок: краска для маски, спокойная смена яркости ── */
html body .menu-btn .icon i { color: #AEB6B3 !important; }
html body .menu-btn:hover .icon i {
    color: #E8ECEA !important;   /* просто светлее, без смены цвета */
}
html body .home-grid > .menu-btn:first-child .icon i,
html body .home-grid > .menu-btn:first-child:hover .icon i {
    color: var(--theme-color) !important;
}

/* ── наведение: только свет, без движения ── */
html body .menu-btn {
    transition: background .13s ease, border-color .13s ease !important;
    transform: none !important;
}
html body .menu-btn:hover {
    transform: none !important;
    background: linear-gradient(180deg,
                    rgba(255, 255, 255, .105) 0%,
                    rgba(255, 255, 255, .038) 42%,
                    rgba(0, 0, 0, .16) 100%),
                #171A1D !important;
    border-color: rgba(255, 255, 255, .085) !important;
    border-top-color: rgba(255, 255, 255, .155) !important;
    /* тень та же, что и в покое: раздувать её при наведении — дёшево */
    box-shadow: var(--d-lift) !important;
}
html body .menu-btn:active {
    transform: none !important;
    background: linear-gradient(180deg,
                    rgba(255, 255, 255, .06) 0%,
                    rgba(255, 255, 255, .015) 42%,
                    rgba(0, 0, 0, .2) 100%),
                #131619 !important;
}

/* главная плитка ведёт себя так же — светлеет, но не прыгает */
html body .home-grid > .menu-btn:first-child:hover {
    transform: none !important;
    background: linear-gradient(180deg,
                    rgba(var(--ac-rgb), .32) 0%,
                    rgba(var(--ac-rgb), .10) 48%,
                    rgba(0, 0, 0, .18) 100%),
                #171A1D !important;
    border-color: rgba(var(--ac-rgb), .40) !important;
    border-top-color: rgba(var(--ac-rgb), .58) !important;
}

/* ── свечение под главной плиткой заметно убавлено ──
   Широкий цветной ореол — самый частый признак дешёвого тёмного интерфейса.
   Оставляем ровно столько, чтобы читалось «это главное». */
html body .home-grid > .menu-btn:first-child,
html body .home-grid > .menu-btn:first-child:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
                0 1px 2px rgba(0, 0, 0, .4),
                0 8px 22px -14px rgba(var(--ac-rgb), .28) !important;
}

/* ── то же спокойствие остальным кнопкам ── */
html body .btn, html body .btn-primary, html body .btn-outline {
    transition: background .13s ease, border-color .13s ease, opacity .13s ease !important;
    transform: none !important;
}
html body .btn:hover, html body .btn-primary:hover, html body .btn-outline:hover {
    transform: none !important;
}
html body .btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
                0 4px 14px -8px rgba(var(--ac-rgb), .4) !important;
    filter: brightness(1.05) !important;
}

/* ============================================================================
   PREMIUM_V10 — заливка обёртки значка, окончательно.

   Обёртка `<span class="icon">` НЕ ДОЛЖНА иметь заливки никогда: значок внутри
   рисуется маской, а у обёртки маски нет — любая заливка превращается в
   сплошной прямоугольник.

   Ловил это трижды, и каждый раз оставался хвост с более тяжёлым селектором:
     V7  `.menu-btn.btn-green-glow:not(:first-child) .icon`  (0,4,2)
     V8  чистка                     `.menu-btn .icon`        (0,2,2)  — проиграла
     V9  чистка состояний наведения `.menu-btn:hover .icon`  (0,3,2)  — тоже мимо

   Поэтому здесь селектор заведомо тяжелее любого возможного: атрибут [class]
   добавляет вес, не меняя того, к чему правило применяется. Итог (0,5,3) —
   перебить это в файле больше нечем.
   ============================================================================ */
html body .menu-btn[class] span.icon[class],
html body .menu-btn[class]:hover span.icon[class],
html body .menu-btn[class]:active span.icon[class],
html body .menu-btn[class]:focus span.icon[class],
html body .nav-item[class] span.icon[class],
html body .nav-item[class]:hover span.icon[class] {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================================================
   PREMIUM_V11 — читаемость сообщений в чате.

   Замерено на живой странице: отправленное сообщение — БЕЛЫЙ текст на сплошном
   ярком мятном фоне, контраст **1.92** при норме 4.5. Отсюда и ощущение
   «светлая зелёная обводка мешает читать»: светлым было не обрамление, а весь
   пузырь целиком.

   Причина — два поколения правил друг поверх друга: раннее делало пузырь
   приглушённой акцентной подложкой (разумно), позднее залило его акцентом
   целиком и оставило белый текст.

   Решение: акцент остаётся признаком «своё сообщение», но как подложка и
   тонкая рамка, а не как заливка. Текст почти белый по тёмному — контраст
   выше десяти.
   ============================================================================ */

html body .max-msg-sent .max-bubble {
    background: rgba(var(--ac-rgb), .15) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--ac-rgb), .30) !important;
    color: #EAF3EF !important;
    box-shadow: none !important;
    border-radius: 16px 16px 5px 16px !important;
}
html body .max-msg-received .max-bubble {
    background: #171B1E !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    color: #E2E7E5 !important;
    box-shadow: none !important;
    border-radius: 16px 16px 16px 5px !important;
}

/* Время подписи: было почти белым на ярком фоне и спорило с текстом. */
html body .max-bubble .max-time, html body .max-time {
    color: rgba(255, 255, 255, .40) !important;
    font-size: 10.5px !important;
}
html body .max-msg-sent .max-bubble .max-time {
    color: rgba(234, 243, 239, .48) !important;
}

/* Вложение внутри пузыря — на тон темнее подложки, чтобы отделялось. */
html body .max-bubble-file {
    background: rgba(0, 0, 0, .28) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 11px !important;
}

/* Цитата ответа: текст был акцентным полупрозрачным — на подложке терялся. */
html body .max-reply-preview {
    background: rgba(0, 0, 0, .22) !important;
    border-left: 2px solid var(--theme-color) !important;
    border-radius: 5px !important;
    color: rgba(255, 255, 255, .62) !important;
}

/* Имя отправителя в групповых — акцент, но спокойный. */
html body .max-bubble .max-sender, html body .max-sender {
    color: var(--theme-color) !important;
    opacity: .85;
    font-weight: 600 !important;
}


/* ============================================================================
   КНОПКИ_РОВНО 03.08.2026 — значок в кнопке и одно скругление на все.

   ЗНАЧОК. Правило `.fas, .far { color: var(--theme-color) !important }` (стр. 466)
   красит все значки сайта цветом темы, включая лежащие НА зелёной кнопке:
   замер показал текст rgb(6,18,12) при значке rgb(52,211,153) — зелёный по
   зелёному, не видно вовсе. Значок внутри кнопки должен брать цвет её текста;
   набор рисует маску через currentColor, поэтому хватает `color: inherit`.

   СКРУГЛЕНИЕ. Было три разных в одном окне: обводные 18, главные 14, карточки 10.
   Кнопки сводим к 12 — разнобоя не остаётся.
   ============================================================================ */
html body .btn i,
html body .btn-primary i,
html body .btn-outline i,
html body .btn-sm i,
html body a.btn i {
    color: inherit !important;
}
html body .btn,
html body .btn-primary,
html body .btn-outline,
html body .btn-sm,
/* Этот вид повторяет правило со строки 2730 —  даёт 18px из --g-radius и весит больше простого
   . Три часа было бы потеряно на разбор таблицы стилей
   руками: источник нашёлся только запросом к самому браузеру,
   CSS.getMatchedStylesForNode. Повторяем вес, чтобы победить порядком. */
html body .btn:not(.btn-primary):not(.menu-btn) {
    border-radius: 12px !important;
}

/* ── ОТСТУПЫ_КНОПОК ───────────────────────────────────────────────────────
   У .btn не было отступов ВООБЩЕ: до padding дотягивался только общий сброс
   "* { padding: 0 }" со строки 20 — проверено запросом к браузеру, а не
   чтением таблицы стилей. Отсюда кнопки в окнах высотой 17px: это высота
   строки, и ничего больше. Пальцем не попасть, норма около 44.

   Без !important намеренно: где отступ прописан в самой кнопке, остаётся её
   значение, иначе я молча переломаю чужую вёрстку по всему сайту.
   Класс .btn-sm задаёт свой отступ с !important и остаётся мелким. */
html body .btn:not(.btn-sm) {
    padding: 11px 16px;
    min-height: 42px;
}

/* ============================================================================
   ЧАТ_ЖИВОЙ 03.08.2026 — движение в переписке.

   Анимируем ТОЛЬКО transform и opacity: их браузер считает на видеокарте и не
   пересчитывает из-за них вёрстку. Всё остальное (высота, отступы, тени) на
   телефоне даёт дёрганье при прокрутке — этим уже болел этот сайт.
   ============================================================================ */

@keyframes чат-своё {
    from { opacity: 0; transform: translate3d(14px, 8px, 0) scale(.97); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes чат-чужое {
    from { opacity: 0; transform: translate3d(-14px, 8px, 0) scale(.97); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Класс вешается ТОЛЬКО на вновь пришедшее. История при открытии переписки
   появляется без анимации — иначе два десятка пузырей поедут разом. */
.max-msg-sent.чат-новое     { animation: чат-своё  .26s cubic-bezier(.22,.9,.3,1) both; }
.max-msg-received.чат-новое { animation: чат-чужое .26s cubic-bezier(.22,.9,.3,1) both; }

/* Пузырь чуть проседает под пальцем — отклик на касание */
.max-bubble { transition: transform .12s ease; }
.max-msg-sent:active .max-bubble,
.max-msg-received:active .max-bubble { transform: scale(.985); }

/* ── «печатает»: три точки ────────────────────────────────────────────── */
.чат-точки { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.чат-точки i {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--theme-color); display: block;
    animation: чат-точка 1.05s infinite ease-in-out;
}
.чат-точки i:nth-child(2) { animation-delay: .16s; }
.чат-точки i:nth-child(3) { animation-delay: .32s; }
@keyframes чат-точка {
    0%, 62%, 100% { opacity: .28; transform: translate3d(0, 0, 0); }
    31%           { opacity: 1;   transform: translate3d(0, -3px, 0); }
}

/* ── заготовки на время загрузки ──────────────────────────────────────── */
.чат-заготовка {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px; margin-bottom: 8px;
    background: #17191C; border: 1px solid rgba(255,255,255,.06);
}
.чат-заготовка .кружок { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; }
.чат-заготовка .строки { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.чат-заготовка .строка { height: 10px; border-radius: 5px; }
.чат-заготовка .строка.короткая { width: 45%; height: 8px; }
.чат-заготовка .кружок,
.чат-заготовка .строка {
    background: linear-gradient(100deg,
        rgba(255,255,255,.04) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 70%);
    background-size: 260% 100%;
    animation: чат-мерцание 1.25s linear infinite;
}
@keyframes чат-мерцание {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
}

/* ── метка «есть новое», когда человек читает старое ──────────────────── */
#чатВниз {
    position: absolute; right: 14px; bottom: 78px; z-index: 40;
    display: none; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 20px; cursor: pointer;
    background: var(--theme-color); color: #08110D;
    font-size: 12.5px; font-weight: 700; border: 0;
    animation: чат-своё .2s ease both;
}

/* ── плавная прокрутка переписки ──────────────────────────────────────── */
#maxChatBox { scroll-behavior: smooth; }

/* ── меньше движения: системная настройка и наш облегчённый режим ─────── */
@media (prefers-reduced-motion: reduce) {
    .max-msg-sent.чат-новое, .max-msg-received.чат-новое,
    .чат-точки i, .чат-заготовка .кружок, .чат-заготовка .строка,
    #чатВниз { animation: none !important; }
    #maxChatBox { scroll-behavior: auto; }
    .max-bubble { transition: none; }
}
html.perf-lite .max-msg-sent.чат-новое,
html.perf-lite .max-msg-received.чат-новое,
html.perf-lite .чат-заготовка .кружок,
html.perf-lite .чат-заготовка .строка { animation: none !important; }

/* ── SZH_VYBRAN — выбранный уровень сжатия виден сразу ─────────────────────
   Подсветку ставила только работа при нажатии, поэтому при открытии окна
   значение по умолчанию («Обычно») ничем не отличалось от остальных, и было
   непонятно, что вообще выбрано. Задаём стилем — тогда видно всегда. */
html body #szhKachestvo .szh-vybran {
    border-color: rgba(var(--theme-color-rgb), .45) !important;
    background: rgba(var(--theme-color-rgb), .13) !important;
    color: var(--theme-color) !important;
    font-weight: 700;
}

/* ПОИСК_ПО_СООБЩЕНИЯМ: выдача в списке переписок и подсветка найденного. */
.поиск-раздел {
  padding: 10px 16px 6px; font-size: 11px; font-weight: 800;
  color: #777; text-transform: uppercase; letter-spacing: .04em;
}
.поиск-строка {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 16px; cursor: pointer; transition: background .12s;
}
.поиск-строка:hover { background: rgba(255,255,255,0.05); }
.поиск-кружок {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--theme-color-rgb), 0.18);
  color: var(--theme-color); font-weight: 800; font-size: 14px;
}
.поиск-нутро { flex: 1; min-width: 0; }
.поиск-верх { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.поиск-имя { font-weight: 700; color: #fff; font-size: 13.5px; }
.поиск-время { font-size: 11px; color: #666; flex-shrink: 0; }
.поиск-вы { color: #888; }
.поиск-отрывок {
  font-size: 12.5px; color: #9a9a9f; line-height: 1.45; margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.поиск-совпало {
  background: rgba(var(--theme-color-rgb), 0.28);
  color: #fff; border-radius: 3px; padding: 0 2px;
}
.поиск-пусто { padding: 28px 16px; text-align: center; color: #666; font-size: 13px; }
/* Найденное сообщение подсвечиваем ненадолго: подсветка должна показать, где
   оно, и уйти — иначе она мешает читать переписку дальше. */
.поиск-найдено {
  animation: поиск-мигание 2.2s ease-out;
  border-radius: 12px;
}
@keyframes поиск-мигание {
  0%, 55% { background: rgba(var(--theme-color-rgb), 0.22); }
  100%    { background: transparent; }
}
/* Общее правило для полей ввода перебивало отступ, и лупа наезжала на первую
   букву. Задаём по идентификатору, иначе снова проиграем в силе. */
#поискПереписок { padding-left: 34px !important; padding-right: 34px !important; }
#поискВЧате { padding-left: 12px !important; padding-right: 12px !important; }
.crm-schedule-card {
  padding:16px !important;
  margin-top:14px;
  border-color:rgba(112,224,150,.13) !important;
  background:linear-gradient(145deg,rgba(20,34,25,.94),rgba(10,18,13,.96)) !important;
}
.crm-schedule-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:13px; }
.crm-schedule-title { color:#f3f7f4; font-size:14px; font-weight:750; }
.crm-schedule-title i { margin-right:7px; color:var(--theme-color); opacity:.8; }
.crm-schedule-source { margin-top:3px; color:#657068; font-size:9.5px; }
.crm-schedule-today { padding:6px 9px; border:1px solid rgba(255,255,255,.07); border-radius:999px; font-size:10px; font-weight:650; white-space:nowrap; }
.crm-schedule-week { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.crm-schedule-day { min-width:0; padding:9px 4px; text-align:center; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:10px; }
.crm-schedule-day small { display:block; margin-bottom:4px; color:#657068; font-size:8px; font-weight:700; text-transform:uppercase; }
.crm-schedule-day strong { display:block; overflow:hidden; font-size:10px; font-weight:650; text-overflow:ellipsis; }
.crm-mode-office { color:#8ce6a5; background:rgba(68,186,103,.09); border-color:rgba(91,213,125,.15); }
.crm-mode-remote { color:#91bfe9; background:rgba(76,137,198,.09); border-color:rgba(102,162,220,.14); }
.crm-mode-dayoff { color:#e9c57e; background:rgba(194,146,57,.10); border-color:rgba(218,171,82,.14); }
.crm-mode-weekend,.crm-mode-unconfigured { color:#8a938c; background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.065); }
.crm-schedule-footer { display:flex; justify-content:space-between; gap:10px; margin-top:11px; padding-top:10px; color:#7d8880; border-top:1px solid rgba(255,255,255,.055); font-size:10px; }
.crm-schedule-empty { margin-top:11px; padding:10px 11px; color:#939c95; background:rgba(255,255,255,.025); border:1px dashed rgba(255,255,255,.08); border-radius:10px; font-size:10.5px; line-height:1.45; }
@media (max-width:420px) {
  .crm-schedule-card { padding:14px !important; }
  .crm-schedule-week { gap:4px; }
  .crm-schedule-day { padding:8px 2px; }
  .crm-schedule-day strong { font-size:9px; }
  .crm-schedule-footer { align-items:flex-start; flex-direction:column; }
}
.crm-tool-context { position:fixed; z-index:10020; right:18px; bottom:18px; display:flex; align-items:center; gap:12px; max-width:min(520px,calc(100vw - 36px)); padding:10px 11px 10px 13px; color:#b9c6bd; background:rgba(12,21,15,.96); border:1px solid rgba(91,213,125,.16); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.42); font-size:10.5px; backdrop-filter:blur(18px); }
.crm-tool-context i { margin-right:6px; color:var(--theme-color); }.crm-tool-context b { color:#eef5f0; }
.crm-tool-context a { flex:0 0 auto; padding:7px 9px; color:#0b160e; background:var(--theme-color); border-radius:8px; font-size:9.5px; font-weight:750; text-decoration:none; }
@media (max-width:480px) { .crm-tool-context { right:10px; bottom:10px; left:10px; align-items:flex-start; flex-direction:column; max-width:none; }.crm-tool-context a { align-self:stretch; text-align:center; } }

/* NATIVE_TTS_V2 — резервная озвучка остаётся рядом с основным ElevenLabs. */
.native-voice-card {
  max-width:760px; margin:0 auto; padding:22px !important;
  border:1px solid rgba(var(--theme-color-rgb),.18) !important;
  background:linear-gradient(145deg,rgba(18,31,22,.96),rgba(9,16,12,.98)) !important;
}
.native-voice-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.native-voice-head h3 { margin:4px 0 0; color:#f5faf6; font-size:21px; line-height:1.2; }
.native-voice-kicker { color:var(--theme-color); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.native-voice-state { flex:0 0 auto; padding:7px 10px; color:#9ce8b4; background:rgba(64,196,105,.09); border:1px solid rgba(92,220,131,.17); border-radius:999px; font-size:10px; font-weight:700; }
.native-voice-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.native-voice-controls label { color:#929c95; font-size:11px; font-weight:700; }
.native-voice-controls .form-control { margin-top:7px; }
#nativeTtsText { min-height:150px; resize:vertical; line-height:1.55; }
#nativeTtsRun:disabled { cursor:wait; opacity:.65; }
.native-voice-status { min-height:20px; margin-top:12px; color:#8d9890; font-size:12px; }
.native-voice-status.is-loading { color:#e2c47b; }
.native-voice-status.is-ready { color:#80dda0; }
.native-voice-status.is-error { color:#ff8585; }
.native-voice-result { display:flex; align-items:center; gap:12px; margin-top:8px; }
.native-voice-result audio { flex:1; min-width:0; height:40px; }
.native-voice-download { flex:0 0 auto; text-decoration:none; }
@media (max-width:600px) {
  .native-voice-card { padding:17px !important; }
  .native-voice-head, .native-voice-result { align-items:stretch; flex-direction:column; }
  .native-voice-controls { grid-template-columns:1fr; }
  .native-voice-download { text-align:center; }
}