/* panel-fixes.css — точечные правки по реальным классам панели.
 *
 * A) KPI-карточки: цвет блока, неон при наведении; цифры на одной линии (margin-top: auto).
 * B) AI-ассистент: определение .assistant-msg-bubble.
 * C) Светлая тема: переопределение цветных Tailwind-классов для контраста.
 * D) Логотип в сайдбаре; бордеры цветных элементов в светлой теме.
 * E) ИИ-мастер и Настройки: читаемый текст в карточках/формах (card-themed, main).
 *    Страницы settings.html и ai-wizard.html унифицированы с дашбордом (тот же head, sidebar, header-themed).
 */

/* === KPI-блоки дашборда: цвет границы и неоновое свечение при наведении === */
.kpi-card {
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.kpi-card--accounts {
  border-color: rgba(16, 185, 129, 0.45);
}
.kpi-card--accounts:hover {
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), 0 0 32px rgba(16, 185, 129, 0.2);
}
.kpi-card--free {
  border-color: rgba(6, 182, 212, 0.45);
}
.kpi-card--free:hover {
  border-color: rgba(6, 182, 212, 0.7);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.35), 0 0 32px rgba(6, 182, 212, 0.2);
}
.kpi-card--tasks {
  border-color: rgba(14, 165, 233, 0.45);
}
.kpi-card--tasks:hover {
  border-color: rgba(14, 165, 233, 0.7);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.35), 0 0 32px rgba(14, 165, 233, 0.2);
}
.kpi-card--errors {
  border-color: rgba(244, 63, 94, 0.45);
}
.kpi-card--errors:hover {
  border-color: rgba(244, 63, 94, 0.7);
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.35), 0 0 32px rgba(244, 63, 94, 0.2);
}
html.theme-light .kpi-card--accounts { border-color: rgba(16, 185, 129, 0.5); }
html.theme-light .kpi-card--accounts:hover { border-color: rgb(16, 185, 129); box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
html.theme-light .kpi-card--free { border-color: rgba(6, 182, 212, 0.5); }
html.theme-light .kpi-card--free:hover { border-color: rgb(6, 182, 212); box-shadow: 0 0 20px rgba(6, 182, 212, 0.4); }
html.theme-light .kpi-card--tasks { border-color: rgba(14, 165, 233, 0.5); }
html.theme-light .kpi-card--tasks:hover { border-color: rgb(14, 165, 233); box-shadow: 0 0 20px rgba(14, 165, 233, 0.4); }
html.theme-light .kpi-card--errors { border-color: rgba(244, 63, 94, 0.5); }
html.theme-light .kpi-card--errors:hover { border-color: rgb(244, 63, 94); box-shadow: 0 0 20px rgba(244, 63, 94, 0.4); }

/* === Верхняя чёрная полоса (топбар): лого, настройки, выход === */
.panel-topbar {
  width: 100%;
  height: 64px;
  min-height: 64px;
  background-color: #0f172a;
  border-bottom: 1px solid rgba(71, 85, 105, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  flex-shrink: 0;
  z-index: 40;
}
/* Centered search container in topbar */
.panel-topbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  max-width: 480px;
  margin: 0 auto;
}
.panel-topbar-center .topbar-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 28px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.2);
  background: rgba(15,23,42,0.6);
  color: rgba(148,163,184,0.7);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 360px;
  min-width: 240px;
}
.panel-topbar-center .topbar-search-btn:hover {
  border-color: rgba(139,92,246,0.4);
  background: rgba(15,23,42,0.8);
  color: rgba(226,232,240,0.8);
}
.panel-topbar a,
.panel-topbar button {
  color: #e2e8f0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 15px;
  transition: background-color 0.15s, color 0.15s;
}
.panel-topbar a:hover,
.panel-topbar button:hover {
  background-color: rgba(148, 163, 184, 0.15);
  color: #f8fafc;
}
.panel-topbar .panel-topbar-logo {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.5rem 0.25rem 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.panel-topbar .panel-topbar-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  border: 2px solid rgba(52,211,153,0.25);
  transition: all 0.4s ease;
  animation: logoNeonPulse 3s ease-in-out infinite;
}
@keyframes logoNeonPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(16,185,129,0.3), 0 0 16px rgba(52,211,153,0.15);
    border-color: rgba(52,211,153,0.25);
  }
  50% {
    box-shadow: 0 0 12px rgba(16,185,129,0.6), 0 0 28px rgba(52,211,153,0.4), 0 0 45px rgba(5,150,105,0.2);
    border-color: rgba(52,211,153,0.5);
  }
}
.panel-topbar .panel-topbar-logo:hover img {
  box-shadow: 0 0 15px rgba(52,211,153,0.6), 0 0 30px rgba(16,185,129,0.4), 0 0 50px rgba(5,150,105,0.25);
  border-color: rgba(52,211,153,0.6);
  transform: scale(1.08);
  animation: none;
}
/* Logo text in topbar */
.panel-topbar .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.panel-topbar .logo-text-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #34d399 0%, #5eead4 50%, #a7f3d0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoTextShine 4s ease-in-out infinite;
  text-shadow: none;
}
@keyframes logoTextShine {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.panel-topbar .logo-text-sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  transition: color 0.3s ease;
}
.panel-topbar .panel-topbar-logo:hover .logo-text-sub {
  color: #34d399;
}
@media (max-width: 640px) {
  .panel-topbar .logo-text { display: none; }
}
.panel-topbar .panel-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.panel-topbar .panel-topbar-right a,
.panel-topbar .panel-topbar-right button {
  font-size: inherit;
  padding: 0.5rem 0.75rem;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  border-radius: 10px;
}
.panel-topbar .panel-topbar-right a:hover,
.panel-topbar .panel-topbar-right button:hover {
  background-color: rgba(148, 163, 184, 0.2);
}
.panel-topbar .panel-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.panel-topbar .panel-topbar-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.panel-topbar .panel-topbar-right a:hover .panel-topbar-icon svg,
.panel-topbar .panel-topbar-right button:hover .panel-topbar-icon svg {
  transform: scale(1.08);
}
html.theme-light .panel-topbar {
  background-color: #1e293b;
  border-bottom-color: rgba(148, 163, 184, 0.4);
}
html.theme-light .panel-topbar a,
html.theme-light .panel-topbar button {
  color: #cbd5e1;
}
html.theme-light .panel-topbar a:hover,
html.theme-light .panel-topbar button:hover {
  background-color: rgba(100, 116, 139, 0.2);
  color: #f1f5f9;
}

/* === D. Логотип Salyev Expert (в топбаре и в сайдбаре, если остаётся) === */
aside#sidebar div:has(> .sidebar-logo-img) {
  overflow: hidden;
  padding: 0;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sidebar-logo-img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  display: block;
}
/* Кнопка свёртки сайдбара — под топбаром */
#sidebarToggle {
  top: 4rem !important; /* под топбар 64px */
}

/* === A. KPI: цифры строго на одной горизонтальной линии === */
.kpi-card .value {
  margin-top: auto;
}

/* === B. AI-ассистент: пузырь сообщения — всегда читаемо в любой теме === */
.assistant-msg-bubble {
  background-color: var(--panel-bg-card);
  border: 1px solid var(--panel-border);
  color: var(--panel-text-primary);
}
/* Тёмная тема: явный контраст (пузырь и текст) */
html:not(.theme-light) .assistant-msg-bubble {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
/* Светлая тема: явный контраст */
html.theme-light .assistant-msg-bubble {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* === Глобальное скрытие одиночных селектов "Аккаунт" в инструментах,
 * если на странице есть виджет AccountManager (глобальный блок аккаунтов).
 * Ориентируемся по конкретным id, чтобы не трогать другие формы. === */
body:has(#accountManager) select#invAccount,
body:has(#accountManager) select#idAccount,
body:has(#accountManager) select#phoneAccount,
body:has(#accountManager) select#subAccount,
body:has(#accountManager) select#ncAccount,
body:has(#accountManager) select#arAccount,
body:has(#accountManager) select[id^="accountSelect_"],
body:has(#accountManager) select#channelAccount,
body:has(#accountManager) select#autopostAccount,
body:has(#accountManager) select#boostAccount {
  display: none !important;
}
/* Текст внутри панели ассистента (заголовки, подсказки) */
#assistantPanel .text-slate-400,
#assistantPanel .text-slate-500 {
  color: var(--panel-text-secondary);
}
html.theme-light #assistantPanel .text-slate-400,
html.theme-light #assistantPanel .text-slate-500 {
  color: #475569 !important;
}

/* === C. Светлая тема: весь бледный текст — читаемый (ИИ-мастер, Настройки, везде) === */
/* Все оттенки slate: на белом фоне делаем тёмными */
html.theme-light .text-slate-100,
html.theme-light .text-slate-200,
html.theme-light .text-slate-300,
html.theme-light .text-slate-400,
html.theme-light .text-slate-500 {
  color: #475569 !important;
}
/* На случай других классов с text-slate в названии */
html.theme-light [class*="text-slate"] {
  color: #475569 !important;
}
html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #64748b !important;
}
html.theme-light main p,
html.theme-light .card-themed p,
html.theme-light section p {
  color: #334155 !important;
}
html.theme-light main h1,
html.theme-light main h2,
html.theme-light main h3,
html.theme-light .card-themed h1,
html.theme-light .card-themed h2,
html.theme-light .card-themed h3 {
  color: #0f172a !important;
}

/* Цветной текст — тёмные оттенки для контраста на белом фоне === */

/* Emerald (сайдбар, навигация, KPI, кнопки) */
html.theme-light .text-emerald-50  { color: #064e3b; }
html.theme-light .text-emerald-300 { color: #047857; }

/* Cyan (KPI "Свободных", кнопки) */
html.theme-light .text-cyan-50  { color: #155e75; }
html.theme-light .text-cyan-100 { color: #0e7490; }
html.theme-light .text-cyan-200 { color: #0e7490; }

/* Sky (KPI "Задач активных") */
html.theme-light .text-sky-200 { color: #0369a1; }

/* Indigo (KPI "Выполнено сегодня") */
html.theme-light .text-indigo-200 { color: #4338ca; }

/* Rose (KPI "Ошибки", кнопка "Остановить", "Стоп") */
html.theme-light .text-rose-100 { color: #9f1239; }
html.theme-light .text-rose-200 { color: #be123c; }

/* Amber (баннер "Сервер остановлен") */
html.theme-light .text-amber-200 { color: #b45309; }

/* Slate с прозрачностью (text-slate-500 уже в panel-common, но inline code bg) */
html.theme-light .bg-slate-800 { background-color: #e2e8f0; }

/* Emerald кнопки/бейджи — текст на зелёных плашках */
html.theme-light .text-emerald-200 { color: #047857; }

/* === D. Светлая тема: бордеры цветных элементов === */
html.theme-light .border-emerald-400\/50,
html.theme-light .border-emerald-400\/30,
html.theme-light .border-emerald-400\/60,
html.theme-light .border-emerald-400\/70,
html.theme-light .border-emerald-300\/50 { border-color: rgba(5, 150, 105, 0.5); }

html.theme-light .border-rose-500\/50 { border-color: rgba(190, 18, 60, 0.5); }

html.theme-light .border-cyan-500\/40,
html.theme-light .border-cyan-400\/50 { border-color: rgba(14, 116, 144, 0.5); }

html.theme-light .border-amber-500\/40 { border-color: rgba(180, 83, 9, 0.4); }

html.theme-light .border-sky-500\/40 { border-color: rgba(3, 105, 161, 0.4); }

/* === E. ИИ-мастер и Настройки: читаемый текст в карточках и формах (светлая тема) === */
html.theme-light main .text-slate-400,
html.theme-light main .text-slate-500,
html.theme-light .card-themed .text-slate-400,
html.theme-light .card-themed .text-slate-500 {
  color: #475569 !important;
}
html.theme-light main label,
html.theme-light .card-themed label {
  color: #334155 !important;
}
html.theme-light main input::placeholder,
html.theme-light main textarea::placeholder,
html.theme-light .card-themed input::placeholder,
html.theme-light .card-themed textarea::placeholder {
  color: #64748b !important;
}

/* === F. Тёмная тема: старые slate-кнопки и инпуты — читаемые === */
html:not(.theme-light) .card-themed select.border-slate-700,
html:not(.theme-light) .card-themed input.border-slate-700 {
  border-color: var(--panel-border);
  background-color: var(--panel-bg-2);
  color: var(--panel-text-primary);
}

html:not(.theme-light) .card-themed button.border-slate-700.bg-slate-800 {
  border-color: var(--panel-border);
  background-color: var(--panel-bg-2);
  color: var(--panel-text-primary);
}

/* Тёмная тема: фоновая подсветка код-блоков в предупреждениях */
html:not(.theme-light) code.bg-slate-800 {
  background-color: #1e293b;
  color: #e5e7eb;
}

/* === G. SALYEV TG: светлая премиум‑тема и базовые компоненты === */

/* Палитра и токены для панели (светлая тема) */
html.theme-light {
  --panel-bg-main: #f3f4f6;
  --panel-bg-2: #ffffff;
  --panel-bg-card: #ffffff;
  --panel-bg-subtle: #f9fafb;

  --panel-border: #e5e7eb;

  --panel-text-primary: #0f172a;
  --panel-text-secondary: #475569;
  --panel-text-muted: #9ca3af;

  --salyev-accent-primary: #10b981;
  --salyev-accent-primary-soft: rgba(16, 185, 129, 0.1);
  --salyev-accent-success: #16a34a;
  --salyev-accent-warning: #f59e0b;
  --salyev-accent-danger: #ef4444;
  --salyev-accent-violet: #6366f1;
}

/* Общий фон, типографика и контейнер (светлая тема) */
html.theme-light body {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 55%),
    radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.08), transparent 55%),
    var(--panel-bg-main);
  color: var(--panel-text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

html.theme-light main {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1.5rem;
  padding-block: 1.5rem 2rem;
}

/* Сайдбар: светлый с чётким бордером и мягким акцентом */
html.theme-light aside#sidebar {
  background:
    linear-gradient(135deg, #f9fafb, #eff6ff);
  border-right: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 12px 0 30px rgba(15, 23, 42, 0.05);
}

html.theme-light aside#sidebar nav a {
  border-radius: 9999px;
  transition: background-color 0.12s ease-out, box-shadow 0.12s ease-out, color 0.12s ease-out;
}

html.theme-light aside#sidebar nav a:hover {
  background: rgba(148, 163, 184, 0.14);
}

html.theme-light aside#sidebar nav a[aria-current="page"],
html.theme-light aside#sidebar nav a.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(56, 189, 248, 0.16));
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.35);
  border: 1px solid rgba(16, 185, 129, 0.7);
  color: #022c22;
}

/* Хедер страниц панели (светлая тема) */
html.theme-light .header-themed {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(226, 232, 240, 0.9);
}

html.theme-light .header-themed h1,
html.theme-light .header-themed h2 {
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #0f172a, #0369a1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Карточки (дашборд, настройки, ИИ) — светлый премиум */
html.theme-light .card-themed {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 55%),
    radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.06), transparent 55%),
    var(--panel-bg-card);
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(226, 232, 240, 0.9);
}

html.theme-light .card-themed h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--panel-text-primary);
}

html.theme-light .card-themed p {
  color: var(--panel-text-secondary);
}

/* KPI‑карточки (светлая тема) */
html.theme-light .kpi-card {
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 60%),
    var(--panel-bg-card);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 0 22px rgba(148, 163, 184, 0.45),
    0 0 0 1px rgba(226, 232, 240, 0.9);
}

html.theme-light .kpi-card .label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--panel-text-secondary);
}

html.theme-light .kpi-card .value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--panel-text-primary);
}

/* Кнопки в стиле SALYEV (светлая тема) */
html.theme-light .btn-primary,
html.theme-light button.btn-primary,
html.theme-light .salyev-btn-primary {
  border-radius: 9999px;
  background-image: linear-gradient(135deg, var(--salyev-accent-primary), var(--salyev-accent-violet));
  color: #f9fafb;
  border: none;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.4);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
}

html.theme-light .btn-primary:hover,
html.theme-light button.btn-primary:hover,
html.theme-light .salyev-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(59, 130, 246, 0.55);
  filter: brightness(1.03);
}

html.theme-light .btn-primary:active,
html.theme-light button.btn-primary:active,
html.theme-light .salyev-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}

/* Второстепенные / ghost‑кнопки (светлая тема) */
html.theme-light .btn-ghost,
html.theme-light button.btn-ghost,
html.theme-light .salyev-btn-ghost {
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background-color: rgba(248, 250, 252, 0.96);
  color: var(--panel-text-secondary);
}

html.theme-light .btn-ghost:hover,
html.theme-light button.btn-ghost:hover,
html.theme-light .salyev-btn-ghost:hover {
  border-color: rgba(15, 23, 42, 0.8);
  color: var(--panel-text-primary);
}

/* Инпуты и селекты (светлая тема) */
html.theme-light input[type="text"],
html.theme-light input[type="number"],
html.theme-light input[type="password"],
html.theme-light input[type="search"],
html.theme-light textarea,
html.theme-light select {
  background-color: #ffffff;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.9);
  color: var(--panel-text-primary);
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.95);
}

html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus {
  outline: none;
  border-color: var(--salyev-accent-primary);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.5),
    0 0 20px rgba(45, 212, 191, 0.45);
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: var(--panel-text-muted);
}

/* Таблицы аккаунтов / задач (светлая тема) */
html.theme-light table thead tr {
  background-color: rgba(241, 245, 249, 0.95);
}

html.theme-light table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--panel-text-secondary);
}

html.theme-light table tbody tr:nth-child(even) {
  background-color: rgba(248, 250, 252, 0.98);
}

html.theme-light table tbody tr:nth-child(odd) {
  background-color: rgba(241, 245, 249, 0.98);
}

html.theme-light table tbody tr:hover {
  background-color: rgba(226, 232, 240, 1);
}

/* Чипы‑статусы (успех, варнинг, ошибка, AI) — светлая тема */
html.theme-light .badge,
html.theme-light .status-badge {
  border-radius: 9999px;
  padding-inline: 0.65rem;
  padding-block: 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
}

html.theme-light .badge-success,
html.theme-light .status-success {
  background-color: rgba(34, 197, 94, 0.08);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.7);
}

html.theme-light .badge-warning,
html.theme-light .status-warning {
  background-color: rgba(245, 158, 11, 0.08);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.7);
}

html.theme-light .badge-danger,
html.theme-light .status-danger {
  background-color: rgba(248, 113, 113, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.7);
}

html.theme-light .badge-ai,
html.theme-light .status-ai {
  background-color: rgba(129, 140, 248, 0.12);
  color: #312e81;
  border: 1px solid rgba(79, 70, 229, 0.8);
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
}

/* === H. SALYEV TG: тёмная премиум‑тема и базовые компоненты === */

/* Палитра и токены для панели (только тёмная тема, светлую задаём выше) */
html:not(.theme-light) {
  --panel-bg-main: #050710;
  --panel-bg-2: #0b0f1c;
  --panel-bg-card: #0b0f1c;
  --panel-bg-subtle: #111624;

  --panel-border: #1f2933;

  --panel-text-primary: #f9fafb;
  --panel-text-secondary: #9ca3af;
  --panel-text-muted: #4b5563;

  --salyev-accent-primary: #2aabee;
  --salyev-accent-primary-soft: rgba(42, 171, 238, 0.15);
  --salyev-accent-success: #22c55e;
  --salyev-accent-warning: #facc15;
  --salyev-accent-danger: #fb3745;
  --salyev-accent-violet: #7c3aed;
}

/* Общий фон, типографика и контейнер */
html:not(.theme-light) body {
  background:
    radial-gradient(circle at top left, rgba(42, 171, 238, 0.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.15), transparent 55%),
    var(--panel-bg-main);
  color: var(--panel-text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

html:not(.theme-light) main {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1.5rem;
  padding-block: 1.5rem 2rem;
}

/* Сайдбар: тёмный, с лёгким неоновым бордером */
html:not(.theme-light) aside#sidebar {
  background: radial-gradient(circle at top, rgba(42, 171, 238, 0.12), transparent 60%),
    var(--panel-bg-main);
  border-right: 1px solid rgba(15, 23, 42, 0.85);
  box-shadow: 12px 0 30px rgba(0, 0, 0, 0.8);
}

html:not(.theme-light) aside#sidebar nav a {
  border-radius: 9999px;
}

html:not(.theme-light) aside#sidebar nav a:hover {
  background: rgba(15, 23, 42, 0.9);
}

html:not(.theme-light) aside#sidebar nav a[aria-current="page"],
html:not(.theme-light) aside#sidebar nav a.active {
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.25), rgba(124, 58, 237, 0.25));
  box-shadow: 0 0 24px rgba(42, 171, 238, 0.55);
  border: 1px solid rgba(42, 171, 238, 0.8);
}

/* Хедер страниц панели */
html:not(.theme-light) .header-themed {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(6, 11, 28, 0.98)),
    var(--panel-bg-2);
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

html:not(.theme-light) .header-themed h1,
html:not(.theme-light) .header-themed h2 {
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #e5f3ff, #7dd3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Карточки (дашборд, настройки, ИИ) */
html:not(.theme-light) .card-themed {
  background: radial-gradient(circle at top left, rgba(42, 171, 238, 0.16), transparent 55%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.12), transparent 55%),
    var(--panel-bg-card);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.9);
  box-shadow:
    0 18px 40px rgba(2, 6, 23, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.95);
}

html:not(.theme-light) .card-themed h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--panel-text-primary);
}

html:not(.theme-light) .card-themed p {
  color: var(--panel-text-secondary);
}

/* KPI‑карточки: неоновый стиль и ровные цифры */
html:not(.theme-light) .kpi-card {
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(42, 171, 238, 0.22), transparent 60%),
    var(--panel-bg-card);
  border: 1px solid rgba(42, 171, 238, 0.5);
  box-shadow:
    0 0 32px rgba(42, 171, 238, 0.6),
    0 0 0 1px rgba(15, 23, 42, 0.95);
}

html:not(.theme-light) .kpi-card .label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--panel-text-secondary);
}

html:not(.theme-light) .kpi-card .value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--panel-text-primary);
}

/* Кнопки в стиле SALYEV */
html:not(.theme-light) .btn-primary,
html:not(.theme-light) button.btn-primary,
html:not(.theme-light) .salyev-btn-primary {
  border-radius: 9999px;
  background-image: linear-gradient(135deg, var(--salyev-accent-primary), var(--salyev-accent-violet));
  color: #0b1120;
  border: none;
  box-shadow: 0 0 30px rgba(42, 171, 238, 0.7);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
}

html:not(.theme-light) .btn-primary:hover,
html:not(.theme-light) button.btn-primary:hover,
html:not(.theme-light) .salyev-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 40px rgba(42, 171, 238, 0.9);
  filter: brightness(1.05);
}

html:not(.theme-light) .btn-primary:active,
html:not(.theme-light) button.btn-primary:active,
html:not(.theme-light) .salyev-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 24px rgba(42, 171, 238, 0.7);
}

/* Второстепенные / ghost‑кнопки */
html:not(.theme-light) .btn-ghost,
html:not(.theme-light) button.btn-ghost,
html:not(.theme-light) .salyev-btn-ghost {
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background-color: rgba(15, 23, 42, 0.85);
  color: var(--panel-text-secondary);
}

html:not(.theme-light) .btn-ghost:hover,
html:not(.theme-light) button.btn-ghost:hover,
html:not(.theme-light) .salyev-btn-ghost:hover {
  border-color: rgba(148, 163, 184, 0.9);
  color: var(--panel-text-primary);
}

/* Инпуты и селекты */
html:not(.theme-light) input[type="text"],
html:not(.theme-light) input[type="number"],
html:not(.theme-light) input[type="password"],
html:not(.theme-light) input[type="search"],
html:not(.theme-light) textarea,
html:not(.theme-light) select {
  background-color: rgba(15, 23, 42, 0.96);
  border-radius: 0.9rem;
  border: 1px solid rgba(30, 64, 175, 0.7);
  color: var(--panel-text-primary);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

html:not(.theme-light) input:focus,
html:not(.theme-light) textarea:focus,
html:not(.theme-light) select:focus {
  outline: none;
  border-color: var(--salyev-accent-primary);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 0 24px rgba(42, 171, 238, 0.7);
}

html:not(.theme-light) input::placeholder,
html:not(.theme-light) textarea::placeholder {
  color: var(--panel-text-muted);
}

/* Таблицы аккаунтов / задач */
html:not(.theme-light) table thead tr {
  background-color: rgba(15, 23, 42, 0.98);
}

html:not(.theme-light) table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--panel-text-secondary);
}

html:not(.theme-light) table tbody tr:nth-child(even) {
  background-color: rgba(15, 23, 42, 0.9);
}

html:not(.theme-light) table tbody tr:nth-child(odd) {
  background-color: rgba(5, 7, 16, 0.95);
}

html:not(.theme-light) table tbody tr:hover {
  background-color: rgba(15, 23, 42, 1);
}

/* Чипы‑статусы (успех, варнинг, ошибка, AI) */
html:not(.theme-light) .badge,
html:not(.theme-light) .status-badge {
  border-radius: 9999px;
  padding-inline: 0.65rem;
  padding-block: 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
}

html:not(.theme-light) .badge-success,
html:not(.theme-light) .status-success {
  background-color: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.7);
}

html:not(.theme-light) .badge-warning,
html:not(.theme-light) .status-warning {
  background-color: rgba(250, 204, 21, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(250, 204, 21, 0.7);
}

html:not(.theme-light) .badge-danger,
html:not(.theme-light) .status-danger {
  background-color: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.7);
}

html:not(.theme-light) .badge-ai,
html:not(.theme-light) .status-ai {
  background-color: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.8);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.6);
}

/* Панель ИИ‑ассистента: фиолетово‑бирюзовое свечение и чистый чат */
html:not(.theme-light) #assistantPanel {
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(circle at bottom left, rgba(42, 171, 238, 0.18), transparent 60%),
    var(--panel-bg-card);
  border-radius: 18px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  box-shadow:
    0 24px 50px rgba(2, 6, 23, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.95);
}

html:not(.theme-light) #assistantPanel .assistant-msg-bubble {
  background-color: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.7) !important;
  box-shadow: 0 0 20px rgba(15, 23, 42, 0.9);
}

html:not(.theme-light) #assistantPanel .user-msg-bubble {
  background-color: rgba(15, 23, 42, 0.96);
  border-radius: 18px;
  border: 1px solid rgba(42, 171, 238, 0.8);
}

html:not(.theme-light) #assistantPanel .quick-command,
html:not(.theme-light) #assistantPanel .prompt-chip {
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: var(--panel-text-secondary);
}

html:not(.theme-light) #assistantPanel .quick-command:hover,
html:not(.theme-light) #assistantPanel .prompt-chip:hover {
  border-color: rgba(42, 171, 238, 0.9);
  color: var(--panel-text-primary);
}

/* === I. Preset-режимы (Безопасный / Сбалансированный / Агрессивный) — hover + активное свечение === */

.preset-card {
  transition:
    box-shadow 0.18s ease-out,
    transform 0.18s ease-out,
    border-color 0.18s ease-out,
    background-color 0.18s ease-out;
}

/* Ховер: лёгкое свечение своим цветом */
.preset-card[data-mode="safe"]:hover {
  box-shadow: 0 0 26px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.preset-card[data-mode="balanced"]:hover {
  box-shadow: 0 0 26px rgba(6, 182, 212, 0.35);
  transform: translateY(-1px);
}

.preset-card[data-mode="aggressive"]:hover {
  box-shadow: 0 0 26px rgba(244, 63, 94, 0.4);
  transform: translateY(-1px);
}

/* Активный режим (у выбранной карты всегда есть border-2) — яркое свечение */
.preset-card[data-mode="safe"].border-2 {
  box-shadow:
    0 0 40px rgba(16, 185, 129, 0.65),
    0 0 0 1px rgba(16, 185, 129, 0.5);
}

.preset-card[data-mode="balanced"].border-2 {
  box-shadow:
    0 0 40px rgba(6, 182, 212, 0.6),
    0 0 0 1px rgba(6, 182, 212, 0.5);
}

.preset-card[data-mode="aggressive"].border-2 {
  box-shadow:
    0 0 40px rgba(244, 63, 94, 0.7),
    0 0 0 1px rgba(244, 63, 94, 0.55);
}

/* === J. Фоновое видео на дашборде (Pika: неоновый киберпанк) === */
.dashboard-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.dashboard-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-video-iframe {
  border: none;
  transform: scale(1.1);
  transform-origin: center center;
}

.dashboard-video-wrap .dashboard-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.dashboard-has-video-bg .dashboard-content-wrap {
  position: relative;
  z-index: 1;
}

/* Лёгкая прозрачность контента — только чтобы видео просвечивало, стиль темы не меняем */
html.theme-light.dashboard-has-video-bg .dashboard-content-wrap aside#sidebar {
  background: rgba(249, 250, 251, 0.96);
  backdrop-filter: blur(8px);
}
html.theme-light.dashboard-has-video-bg .dashboard-content-wrap .header-themed {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}
html.theme-light.dashboard-has-video-bg .dashboard-content-wrap main {
  background: transparent;
}
html.theme-light.dashboard-has-video-bg .dashboard-content-wrap main .card-themed,
html.theme-light.dashboard-has-video-bg .dashboard-content-wrap main .kpi-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}
html:not(.theme-light).dashboard-has-video-bg .dashboard-content-wrap aside#sidebar {
  background: rgba(11, 15, 28, 0.96);
  backdrop-filter: blur(8px);
}
html:not(.theme-light).dashboard-has-video-bg .dashboard-content-wrap .header-themed {
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(8px);
}
html:not(.theme-light).dashboard-has-video-bg .dashboard-content-wrap main {
  background: transparent;
}
html:not(.theme-light).dashboard-has-video-bg .dashboard-content-wrap main .card-themed,
html:not(.theme-light).dashboard-has-video-bg .dashboard-content-wrap main .kpi-card {
  background: rgba(11, 15, 28, 0.96);
  backdrop-filter: blur(8px);
}

/* === K. Table action buttons (bg-panel-card / text-panel / border-panel) — visibility fix === */

/* Dark theme */
button.bg-panel-card,
a.bg-panel-card {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(100, 116, 139, 0.35) !important;
  color: #94a3b8 !important;
}
button.bg-panel-card:hover,
a.bg-panel-card:hover {
  background-color: rgba(30, 41, 59, 0.98) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

/* Light theme */
html.theme-light button.bg-panel-card,
html.theme-light a.bg-panel-card {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
}
html.theme-light button.bg-panel-card:hover,
html.theme-light a.bg-panel-card:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #64748b !important;
}

/* Fix text-panel class (var(--panel-bg-1) is undefined → text becomes invisible) */
.text-panel {
  color: var(--panel-text-primary, #94a3b8) !important;
}
html.theme-light .text-panel {
  color: var(--panel-text-primary, #334155) !important;
}

/* Fix border-panel class */
.border-panel {
  border-color: var(--panel-border, rgba(100,116,139,0.35)) !important;
}
html.theme-light .border-panel {
  border-color: var(--panel-border, #cbd5e1) !important;
}

/* Light theme: table action buttons in rows */
html.theme-light table button {
  color: #334155;
}
html.theme-light table button:hover {
  color: #0f172a;
}

/* === L. TOOL PAGES — unique per-instrument design === */

/* --- Tool color variables --- */
body.tool-invite   { --ta1:#7c3aed; --ta2:#a855f7; --ta3:#c084fc; --ta-soft:rgba(124,58,237,.14); --ta-border:rgba(167,85,247,.45); --ta-glow:rgba(167,85,247,.55); }
body.tool-liker    { --ta1:#e11d48; --ta2:#fb7185; --ta3:#fda4af; --ta-soft:rgba(225,29,72,.14);  --ta-border:rgba(251,113,133,.45); --ta-glow:rgba(251,113,133,.55); }
body.tool-neuro    { --ta1:#2563eb; --ta2:#38bdf8; --ta3:#7dd3fc; --ta-soft:rgba(37,99,235,.14);  --ta-border:rgba(56,189,248,.45);  --ta-glow:rgba(56,189,248,.6); }
body.tool-parser   { --ta1:#059669; --ta2:#34d399; --ta3:#6ee7b7; --ta-soft:rgba(5,150,105,.14);  --ta-border:rgba(52,211,153,.45);  --ta-glow:rgba(52,211,153,.55); }
body.tool-broadcast{ --ta1:#d97706; --ta2:#fb923c; --ta3:#fcd34d; --ta-soft:rgba(217,119,6,.14);  --ta-border:rgba(251,146,60,.45);  --ta-glow:rgba(251,146,60,.55); }

/* --- Tool header hero gradient --- */
body.tool-invite   .tool-header-hero { background: linear-gradient(135deg, rgba(124,58,237,.2) 0%, rgba(168,85,247,.12) 50%, transparent 100%); }
body.tool-liker    .tool-header-hero { background: linear-gradient(135deg, rgba(225,29,72,.2) 0%, rgba(251,113,133,.12) 50%, transparent 100%); }
body.tool-neuro    .tool-header-hero { background: linear-gradient(135deg, rgba(37,99,235,.22) 0%, rgba(56,189,248,.12) 50%, transparent 100%); }
body.tool-parser   .tool-header-hero { background: linear-gradient(135deg, rgba(5,150,105,.2) 0%, rgba(52,211,153,.1) 50%, transparent 100%); }
body.tool-broadcast .tool-header-hero { background: linear-gradient(135deg, rgba(217,119,6,.22) 0%, rgba(251,146,60,.1) 50%, transparent 100%); }

/* --- Tool header h1 gradient text --- */
body.tool-invite   .tool-h1 { background: linear-gradient(135deg, #c084fc, #a855f7, #7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.tool-liker    .tool-h1 { background: linear-gradient(135deg, #fda4af, #fb7185, #e11d48); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.tool-neuro    .tool-h1 { background: linear-gradient(135deg, #7dd3fc, #38bdf8, #2563eb); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.tool-parser   .tool-h1 { background: linear-gradient(135deg, #6ee7b7, #34d399, #059669); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.tool-broadcast .tool-h1 { background: linear-gradient(135deg, #fcd34d, #fb923c, #d97706); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Light theme h1 same (already transparent bg so colors work) */
html.theme-light body.tool-invite   .tool-h1 { background: linear-gradient(135deg, #6d28d9, #7c3aed, #a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.theme-light body.tool-liker    .tool-h1 { background: linear-gradient(135deg, #be123c, #e11d48, #fb7185); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.theme-light body.tool-neuro    .tool-h1 { background: linear-gradient(135deg, #1d4ed8, #2563eb, #0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.theme-light body.tool-parser   .tool-h1 { background: linear-gradient(135deg, #047857, #059669, #10b981); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.theme-light body.tool-broadcast .tool-h1 { background: linear-gradient(135deg, #b45309, #d97706, #f59e0b); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* --- Accounts widget --- */
.tool-accts-widget {
  background: linear-gradient(135deg, var(--ta-soft, rgba(100,116,139,.1)), transparent);
  border-color: var(--ta-border, rgba(100,116,139,.3));
  transition: box-shadow .2s ease, transform .15s ease;
}
.tool-accts-widget:hover {
  box-shadow: 0 0 28px var(--ta-glow, rgba(100,116,139,.3));
  transform: translateY(-1px);
}
.tool-accts-icon {
  background: var(--ta-soft, rgba(100,116,139,.15));
  border: 1px solid var(--ta-border, rgba(100,116,139,.3));
}
.tool-accts-num {
  color: var(--ta2, #34d399);
  text-shadow: 0 0 12px var(--ta-glow, rgba(52,211,153,.5));
}
.tool-accts-label { color: var(--ta2, #94a3b8); }
.tool-accts-btn {
  background: var(--ta-soft, rgba(100,116,139,.1));
  border-color: var(--ta-border, rgba(100,116,139,.35));
  color: var(--ta2, #94a3b8);
}
.tool-accts-btn:hover {
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 16px var(--ta-glow, rgba(100,116,139,.3));
  color: var(--ta3, #fff);
}
html.theme-light .tool-accts-btn {
  background: rgba(255,255,255,.9);
  color: var(--ta1, #475569);
}
html.theme-light .tool-accts-btn:hover {
  background: #fff;
  box-shadow: 0 0 14px var(--ta-glow, rgba(100,116,139,.3));
}
html.theme-light .tool-accts-num { text-shadow: none; font-weight:700; }
html.theme-light .tool-accts-widget {
  background: linear-gradient(135deg, var(--ta-soft, rgba(241,245,249,.8)), rgba(255,255,255,.6));
}

/* --- Tool section card accent top-border --- */
body[class*="tool-"] section.card-themed {
  border-top: 2px solid var(--ta-border, rgba(100,116,139,.3));
  transition: box-shadow .2s ease;
}
body[class*="tool-"] section.card-themed:hover {
  box-shadow: 0 0 32px var(--ta-soft, rgba(100,116,139,.1)), 0 8px 24px rgba(0,0,0,.25);
}

/* --- Tool submit buttons --- */
body[class*="tool-"] .tool-submit-btn {
  background: linear-gradient(135deg, var(--ta1), var(--ta2));
  border: none;
  color: #fff;
  box-shadow: 0 0 20px var(--ta-glow);
  border-radius: 9999px;
  transition: box-shadow .2s ease, transform .15s ease, filter .15s ease;
}
body[class*="tool-"] .tool-submit-btn:hover {
  box-shadow: 0 0 32px var(--ta-glow);
  transform: translateY(-1px);
  filter: brightness(1.08);
}
body[class*="tool-"] .tool-submit-btn:active { transform: translateY(0); }

/* --- Main bg subtle tool tint --- */
body.tool-invite    main,
body.tool-liker     main,
body.tool-neuro     main,
body.tool-parser    main,
body.tool-broadcast main {
  background: radial-gradient(ellipse at top left, var(--ta-soft) 0%, transparent 60%),
              var(--panel-bg-main, #050710);
}
html.theme-light body[class*="tool-"] main {
  background: radial-gradient(ellipse at top left, var(--ta-soft) 0%, transparent 55%),
              var(--panel-bg-main, #f3f4f6);
}

/* ============================================================
   F. Улучшенные кнопки топбара — индивидуальные цвета + glow
   ============================================================ */

/* Базовый стиль: стеклянный фон */
.panel-topbar .panel-topbar-right a,
.panel-topbar .panel-topbar-right button {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Настройки — cyan */
.topbar-btn-settings:hover {
  background: rgba(6, 182, 212, 0.12) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.25), 0 0 4px rgba(6, 182, 212, 0.15);
  color: #67e8f9 !important;
}
.topbar-btn-settings:hover .panel-topbar-icon svg {
  transform: rotate(90deg) scale(1.1);
  filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.5));
}

/* Профиль — violet */
.topbar-btn-profile:hover {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.25), 0 0 4px rgba(139, 92, 246, 0.15);
  color: #c4b5fd !important;
}
.topbar-btn-profile:hover .panel-topbar-icon svg {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5));
}

/* Тема — amber */
.topbar-btn-theme:hover {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25), 0 0 4px rgba(245, 158, 11, 0.15);
  color: #fcd34d !important;
}
.topbar-btn-theme:hover .panel-topbar-icon svg {
  transform: rotate(20deg) scale(1.15);
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

/* Выход — rose */
.topbar-btn-logout:hover {
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.25), 0 0 4px rgba(244, 63, 94, 0.15);
  color: #fda4af !important;
}
.topbar-btn-logout:hover .panel-topbar-icon svg {
  transform: translateX(3px) scale(1.05);
  filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.5));
}

/* SVG transitions для кнопок */
.topbar-btn-settings .panel-topbar-icon svg,
.topbar-btn-profile .panel-topbar-icon svg,
.topbar-btn-theme .panel-topbar-icon svg,
.topbar-btn-logout .panel-topbar-icon svg {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

/* ============================================================
   G. Приветственная секция дашборда
   ============================================================ */
.dashboard-greeting {
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.06) 50%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: hidden;
}
.dashboard-greeting::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.dashboard-greeting-title {
  font-size: 1.35rem;
  font-weight: 700;
  background: linear-gradient(135deg, #34d399 0%, #38bdf8 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}
.dashboard-greeting-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}
.dashboard-greeting-time {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  font-family: 'Fira Code', monospace;
}

/* ============================================================
   H. KPI карточки — пульсирующая точка + shimmer загрузка
   ============================================================ */
@keyframes kpi-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.kpi-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: kpi-pulse 2s ease-in-out infinite;
  margin-left: 6px;
  vertical-align: middle;
}
.kpi-card--accounts .kpi-live-dot { color: #34d399; }
.kpi-card--free .kpi-live-dot { color: #22d3ee; }
.kpi-card--tasks .kpi-live-dot { color: #38bdf8; }
.kpi-card--errors .kpi-live-dot { color: #fb7185; }

/* Shimmer для загрузки */
@keyframes kpi-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.kpi-value-loading {
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.08) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: kpi-shimmer 1.8s ease-in-out infinite;
  border-radius: 6px;
  display: inline-block;
  width: 48px;
  height: 32px;
}

/* ============================================================
   I. Быстрые действия — animated gradient border
   ============================================================ */
@keyframes border-glow-rotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.quick-action-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.quick-action-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.15), rgba(16, 185, 129, 0.15));
}
.quick-action-card:hover::after {
  opacity: 1;
}

/* Иконки быстрых действий — мягкий bounce при наведении */
.quick-action-card:hover .quick-action-emoji {
  animation: qa-bounce 0.5s ease;
}
@keyframes qa-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}

/* ============================================================
   J. Декоративный паттерн для правой колонки
   ============================================================ */
.dashboard-right-section {
  position: relative;
}
.dashboard-right-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   K. Сайдбар — подсветка активного пункта + hover эффекты
   ============================================================ */
.sidebar .nav-item {
  transition: all 0.2s ease;
  position: relative;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}
.sidebar .nav-label {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  display: inline !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}
.sidebar .nav-item:hover:not(.nav-active) {
  transform: translateX(3px);
}
.sidebar .nav-active {
  background: rgba(167, 139, 250, 0.10) !important;
  border: none !important;
  color: #c4b5fd !important;
  font-weight: 600 !important;
  box-shadow: none;
  position: relative;
}
.sidebar .nav-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #a78bfa;
}

/* ============================================================
   L. Статус-бар сервера — улучшенный вид
   ============================================================ */
@keyframes status-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
@keyframes status-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); }
}
#serverStatusDot.bg-emerald-500 {
  animation: status-pulse-green 2s ease-in-out infinite;
}
#serverStatusDot.bg-rose-500 {
  animation: status-pulse-red 2s ease-in-out infinite;
}

/* ============================================================
   M. Scrollbar стилизация
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.3);
}

/* ============================================================
   N. Светлая тема — адаптация новых элементов
   ============================================================ */
html.theme-light .panel-topbar .panel-topbar-right a,
html.theme-light .panel-topbar .panel-topbar-right button {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
}
html.theme-light .dashboard-greeting {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(6, 182, 212, 0.04) 50%, rgba(139, 92, 246, 0.03) 100%);
  border-color: rgba(16, 185, 129, 0.2);
}
html.theme-light .dashboard-greeting-sub {
  color: #475569;
}
html.theme-light .sidebar .nav-active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.06));
}

/* ============================================================
   OO. ФИКС: Единые стили tool-страниц (kpi, формы, контент)
   Перебивает inline <style> из tool-html через !important
   ============================================================ */

/* KPI-карточки на tool-страницах (не дашборд) */
html:not(.theme-light) .kpi-card {
  background: var(--panel-bg-2, #0b0f1c) !important;
  border: 1px solid rgba(100, 116, 139, 0.25) !important;
  border-radius: 16px !important;
  color: var(--panel-text-primary, #f9fafb) !important;
}
html:not(.theme-light) .kpi-card:hover {
  border-color: rgba(108, 92, 231, 0.5) !important;
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.15) !important;
}
html:not(.theme-light) .kpi-value {
  color: #f1f5f9 !important;
  font-family: 'Fira Code', monospace;
}
html:not(.theme-light) .kpi-label {
  color: #94a3b8 !important;
}

/* Светлая тема — kpi */
html.theme-light .kpi-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  color: #0f172a !important;
}
html.theme-light .kpi-value {
  color: #0f172a !important;
}
html.theme-light .kpi-label {
  color: #475569 !important;
}

/* Формы и инпуты tool-страниц */
html:not(.theme-light) .field-input,
html:not(.theme-light) .field-textarea {
  background: var(--panel-bg-2, #0b0f1c) !important;
  border-color: rgba(100, 116, 139, 0.3) !important;
  color: #e2e8f0 !important;
}
html:not(.theme-light) .field-input:focus,
html:not(.theme-light) .field-textarea:focus {
  border-color: rgba(108, 92, 231, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.3) !important;
}
html:not(.theme-light) .field-input::placeholder,
html:not(.theme-light) .field-textarea::placeholder {
  color: #475569 !important;
}
html:not(.theme-light) .field-label {
  color: #94a3b8 !important;
}

html.theme-light .field-input,
html.theme-light .field-textarea {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}
html.theme-light .field-label {
  color: #475569 !important;
}

/* Tab-кнопки tool-страниц */
html:not(.theme-light) .tab-btn {
  color: #94a3b8 !important;
}
html:not(.theme-light) .tab-btn:hover {
  color: #c4b5fd !important;
}
html:not(.theme-light) .tab-btn.active {
  color: #a78bfa !important;
  border-bottom-color: #6c5ce7 !important;
}
html.theme-light .tab-btn {
  color: #475569 !important;
}
html.theme-light .tab-btn:hover {
  color: #6366f1 !important;
}
html.theme-light .tab-btn.active {
  color: #4f46e5 !important;
  border-bottom-color: #4f46e5 !important;
}

/* Кнопка акцент tool-страниц */
html:not(.theme-light) .btn-accent {
  background: rgba(108, 92, 231, 0.25) !important;
  border-color: rgba(108, 92, 231, 0.6) !important;
  color: #e9e5ff !important;
}
html:not(.theme-light) .btn-accent:hover {
  background: rgba(108, 92, 231, 0.4) !important;
}
html.theme-light .btn-accent {
  background: rgba(79, 70, 229, 0.1) !important;
  border-color: rgba(79, 70, 229, 0.5) !important;
  color: #4338ca !important;
}

/* Лог-строки tool-страниц */
html:not(.theme-light) .log-line {
  border-color: rgba(51, 65, 85, 0.3) !important;
  color: #cbd5e1 !important;
}
html.theme-light .log-line {
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Общий фон контента на tool-страницах (main) */
html:not(.theme-light) main.flex-1,
html:not(.theme-light) main {
  background: var(--panel-bg-main, #050710) !important;
}
html.theme-light main.flex-1,
html.theme-light main {
  background: var(--panel-bg-main, #f3f4f6) !important;
}

/* Карточки-секции tool-страниц */
html:not(.theme-light) .rounded-2xl.card-themed {
  background: var(--panel-bg-2, #0b0f1c) !important;
}

/* Select (dropdown) в tool-формах */
html:not(.theme-light) select.field-input,
html:not(.theme-light) select {
  background: var(--panel-bg-2, #0b0f1c) !important;
  color: #e2e8f0 !important;
}
html.theme-light select.field-input,
html.theme-light select {
  background: #f9fafb !important;
  color: #0f172a !important;
}

/* Таблицы (задачи) */
html:not(.theme-light) table {
  color: #e2e8f0;
}
html:not(.theme-light) th {
  color: #94a3b8 !important;
  border-color: rgba(51, 65, 85, 0.5) !important;
}
html:not(.theme-light) td {
  border-color: rgba(51, 65, 85, 0.3) !important;
}
html.theme-light th {
  color: #475569 !important;
}

/* ============================================================
   ACM. Встраиваемый менеджер аккаунтов (account-manager-widget)
   ============================================================ */
.acm-widget {
  border-radius: 16px;
  border: 1px solid var(--panel-border, rgba(51,65,85,0.4));
  background: var(--panel-bg-2, #0b0f1c);
  overflow: hidden;
  font-size: 11px;
  font-family: 'Fira Sans', sans-serif;
}
.acm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border, rgba(51,65,85,0.3));
  background: rgba(108, 92, 231, 0.04);
}
.acm-header-left { display: flex; align-items: center; gap: 8px; }
.acm-header-right { display: flex; align-items: center; gap: 10px; }
.acm-toggle-btn {
  background: none; border: none;
  color: var(--panel-text-muted, #64748b);
  cursor: pointer; padding: 2px; display: flex; align-items: center;
}
.acm-toggle-btn:hover { color: var(--panel-text-primary, #f1f5f9); }
.acm-chevron { transition: transform 0.2s ease; }
.acm-title {
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--panel-text-secondary, #94a3b8);
}
.acm-count {
  background: rgba(108,92,231,0.15); color: #a78bfa;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(108,92,231,0.3);
}
.acm-stats { display: flex; gap: 8px; }
.acm-stat { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.acm-stat-active { color: #34d399; background: rgba(52,211,153,0.1); }
.acm-stat-busy { color: #fbbf24; background: rgba(251,191,36,0.1); }
.acm-stat-error { color: #f87171; background: rgba(248,113,113,0.1); }

.acm-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--panel-border, rgba(51,65,85,0.2));
  flex-wrap: wrap;
}
.acm-search-wrap { position: relative; flex: 1; min-width: 160px; }
.acm-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--panel-text-muted, #64748b); pointer-events: none;
}
.acm-search {
  width: 100%; padding: 6px 10px 6px 30px; border-radius: 8px;
  border: 1px solid var(--panel-border, rgba(51,65,85,0.4));
  background: var(--panel-bg-1, #050710);
  color: var(--panel-text-primary, #f1f5f9);
  font-size: 11px; outline: none; transition: border-color 0.2s;
}
.acm-search:focus { border-color: rgba(108,92,231,0.5); }
.acm-search::placeholder { color: var(--panel-text-muted, #475569); }
.acm-filter-status {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--panel-border, rgba(51,65,85,0.4));
  background: var(--panel-bg-1, #050710);
  color: var(--panel-text-primary, #f1f5f9);
  font-size: 11px; outline: none; cursor: pointer;
}
.acm-select-actions { display: flex; gap: 4px; }

.acm-btn {
  border: 1px solid var(--panel-border, rgba(51,65,85,0.4));
  background: rgba(255,255,255,0.04);
  color: var(--panel-text-secondary, #94a3b8);
  border-radius: 8px; padding: 6px 12px; font-size: 11px;
  cursor: pointer; transition: all 0.15s ease; font-family: inherit;
}
.acm-btn:hover { background: rgba(255,255,255,0.08); color: var(--panel-text-primary, #f1f5f9); }
.acm-btn-sm { padding: 4px 10px; font-size: 13px; }
.acm-btn-xs { padding: 3px 8px; font-size: 10px; border-radius: 6px; }
.acm-btn-accent { border-color: rgba(108,92,231,0.4); background: rgba(108,92,231,0.1); color: #a78bfa; }
.acm-btn-accent:hover { background: rgba(108,92,231,0.2); color: #c4b5fd; }
.acm-btn-free { border-color: rgba(52,211,153,0.3); color: #34d399; background: rgba(52,211,153,0.08); }
.acm-btn-free:hover { background: rgba(52,211,153,0.15); }
.acm-btn-busy { border-color: rgba(251,191,36,0.3); color: #fbbf24; background: rgba(251,191,36,0.08); }
.acm-btn-busy:hover { background: rgba(251,191,36,0.15); }

.acm-table-wrap { max-height: 340px; overflow-y: auto; overflow-x: auto; }
.acm-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.acm-table thead { position: sticky; top: 0; z-index: 2; }
.acm-table th {
  padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--panel-text-muted, #64748b) !important;
  background: var(--panel-bg-2, #0b0f1c) !important;
  border-bottom: 1px solid var(--panel-border, rgba(51,65,85,0.3)) !important;
  white-space: nowrap;
}
.acm-th-check { width: 36px; }
.acm-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
  position: relative;
}
.acm-th-sortable:hover {
  color: var(--panel-text-primary, #e2e8f0) !important;
  background: rgba(108,92,231,0.08) !important;
}
.acm-th-sorted {
  color: #a78bfa !important;
  background: rgba(167,139,250,0.06) !important;
}
.acm-sort-icon {
  font-size: 9px;
  opacity: 0.8;
}
.acm-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-border, rgba(51,65,85,0.15)) !important;
  vertical-align: middle;
}
.acm-row { transition: background 0.15s ease; }
.acm-row:hover { background: rgba(108,92,231,0.04); }
.acm-row-check { accent-color: #6c5ce7; cursor: pointer; width: 15px; height: 15px; }

.acm-acc-info { display: flex; flex-direction: column; gap: 1px; }
.acm-acc-name { font-weight: 500; color: var(--panel-text-primary, #f1f5f9); }
.acm-acc-phone { font-size: 10px; color: var(--panel-text-muted, #64748b); font-family: 'Fira Code', monospace; }

.acm-status-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600; border: 1px solid; white-space: nowrap;
}
.acm-cell-muted { color: var(--panel-text-muted, #64748b); font-size: 10px; }

.acm-proxy-btn {
  background: none; border: 1px solid rgba(100,116,139,0.2); border-radius: 6px;
  padding: 3px 8px; font-size: 10px; color: #64748b; cursor: pointer;
  font-family: 'Fira Code', monospace; max-width: 180px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: inline-block;
  transition: all 0.15s;
}
.acm-proxy-btn:hover { border-color: #6c5ce7; color: #a78bfa; background: rgba(108,92,231,0.08); }
.acm-proxy-btn.acm-proxy-set {
  color: #34d399; border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.06);
}
.acm-proxy-btn.acm-proxy-set:hover { border-color: #34d399; background: rgba(52,211,153,0.12); }

.acm-btn-proxy {
  background: rgba(108,92,231,0.1) !important; border-color: rgba(108,92,231,0.3) !important;
  color: #a78bfa !important;
}
.acm-btn-proxy:hover { background: rgba(108,92,231,0.2) !important; }

.acm-empty, .acm-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px; color: var(--panel-text-muted, #64748b); gap: 8px;
}
.acm-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(108,92,231,0.2); border-top-color: #6c5ce7;
  border-radius: 50%; animation: acm-spin 0.6s linear infinite;
}
@keyframes acm-spin { to { transform: rotate(360deg); } }

.acm-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--panel-border, rgba(51,65,85,0.2));
  display: flex; align-items: center; justify-content: space-between;
}
.acm-selected-info { font-size: 11px; color: #a78bfa; font-weight: 500; }

html.theme-light .acm-widget { background: #ffffff; border-color: #e2e8f0; }
html.theme-light .acm-header { background: rgba(79,70,229,0.03); border-color: #e2e8f0; }
html.theme-light .acm-search,
html.theme-light .acm-filter-status { background: #f9fafb; border-color: #d1d5db; color: #0f172a; }
html.theme-light .acm-table th { background: #f9fafb !important; color: #475569 !important; border-color: #e2e8f0 !important; }
html.theme-light .acm-table td { border-color: #f1f5f9 !important; }
html.theme-light .acm-row:hover { background: rgba(79,70,229,0.03); }
html.theme-light .acm-acc-name { color: #0f172a; }

@media (max-width: 768px) {
  .acm-toolbar { flex-direction: column; align-items: stretch; }
  .acm-stats { display: none; }
  .acm-table-wrap { max-height: 260px; }
}

/* ============================================================
   O. Анимированная градиентная рамка приветствия
   ============================================================ */
@keyframes greeting-border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.dashboard-greeting {
  position: relative;
  border: none !important;
  background-clip: padding-box;
}
.dashboard-greeting::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(270deg, #34d399, #38bdf8, #a78bfa, #f472b6, #34d399);
  background-size: 400% 400%;
  animation: greeting-border-flow 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   P. Staggered появление карточек при загрузке
   ============================================================ */
@keyframes card-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: card-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-delay-1 { animation-delay: 0.05s; }
.animate-delay-2 { animation-delay: 0.1s; }
.animate-delay-3 { animation-delay: 0.15s; }
.animate-delay-4 { animation-delay: 0.2s; }
.animate-delay-5 { animation-delay: 0.25s; }
.animate-delay-6 { animation-delay: 0.3s; }
.animate-delay-7 { animation-delay: 0.35s; }
.animate-delay-8 { animation-delay: 0.4s; }

/* ============================================================
   Q. Плавающие частицы на фоне
   ============================================================ */
@keyframes particle-float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.3);
  animation: particle-float linear infinite;
}

/* ============================================================
   R. Мягкая пульсация логотипа
   ============================================================ */
@keyframes logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(52, 211, 153, 0.1)); }
  50% { filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.3)) drop-shadow(0 0 16px rgba(52, 211, 153, 0.1)); }
}
.panel-topbar .panel-topbar-logo img {
  animation: logo-breathe 4s ease-in-out infinite;
}

/* ============================================================
   S. Кастомные тултипы
   ============================================================ */
[data-tip] {
  position: relative;
}
[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
  font-size: 11px;
  font-family: 'Fira Sans', sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-tip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.95);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
}
[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::after {
  opacity: 1;
}

/* ============================================================
   T. KPI анимация счётчика
   ============================================================ */
.kpi-card .value {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* ============================================================
   U. Карточки заголовков страниц — градиентный текст
   ============================================================ */
.header-themed h1 {
  background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.theme-light .header-themed h1 {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   V. Улучшенная ИИ-кнопка (floating) — пульсирующее кольцо
   ============================================================ */
@keyframes ai-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
#assistantToggle {
  animation: ai-ring-pulse 3s ease-in-out infinite;
}
#assistantToggle:hover {
  animation: none;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.4), 0 0 48px rgba(16, 185, 129, 0.15);
  transform: scale(1.05);
}

/* ============================================================
   W. Секции sidebar с градиентными разделителями
   ============================================================ */
.sidebar p[class*="uppercase"] {
  position: relative;
  padding-bottom: 6px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}
.sidebar p[class*="uppercase"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 1px;
  border-radius: 1px;
}
.sidebar p.text-violet-400\/80::after,
.sidebar p[class*="text-violet"]::after {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.4), transparent);
}
.sidebar p.text-cyan-400\/80::after,
.sidebar p[class*="text-cyan"]::after {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.4), transparent);
}
.sidebar p.text-emerald-400\/80::after,
.sidebar p[class*="text-emerald"]::after {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.4), transparent);
}
.sidebar p.text-slate-500::after {
  background: linear-gradient(90deg, rgba(100, 116, 139, 0.2), transparent);
}

/* ============================================================
   X. Карточки — subtle inner glow при наведении
   ============================================================ */
.card-themed {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-themed:hover {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   Y. Мобильное меню — гамбургер + overlay sidebar
   ============================================================ */
#mobileMenuBtn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #e2e8f0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  flex-shrink: 0;
  padding: 0;
}
#mobileMenuBtn:hover {
  background: rgba(148, 163, 184, 0.15);
}
#mobileMenuBtn svg {
  width: 24px;
  height: 24px;
}

/* Overlay backdrop */
#mobileMenuOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
}

/* Mobile sidebar — force solid opaque background, override everything */
aside#sidebar.mobile-open,
html:not(.theme-light) aside#sidebar.mobile-open,
html.theme-light aside#sidebar.mobile-open,
html.dashboard-has-video-bg .dashboard-content-wrap aside#sidebar.mobile-open,
html:not(.theme-light).dashboard-has-video-bg .dashboard-content-wrap aside#sidebar.mobile-open {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  max-width: 85vw !important;
  z-index: 999 !important;
  background: #050710 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.8) !important;
  overflow-y: auto !important;
  border-right: 1px solid rgba(71, 85, 105, 0.5) !important;
  animation: slideInLeft 0.25s ease;
}
html.theme-light aside#sidebar.mobile-open {
  background: #f8fafc !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

@media (max-width: 767px) {
  #mobileMenuBtn {
    display: flex;
  }

  #mobileMenuOverlay.active {
    display: block;
    animation: mobileMenuFadeIn 0.2s ease;
  }

  @keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  @keyframes mobileMenuFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Hide desktop sidebar toggle on mobile */
  #sidebarToggle {
    display: none !important;
  }
}

/* ============================================================
   Z1. Glassmorphism — стеклянные карточки
   ============================================================ */
html:not(.theme-light) .card-themed,
html:not(.theme-light) .kpi-card,
html:not(.theme-light) .tab-panel .rounded-2xl,
html:not(.theme-light) [class*="bg-slate-800"],
html:not(.theme-light) [class*="bg-panel-card"] {
  background: rgba(11, 15, 28, 0.65) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html.theme-light .card-themed,
html.theme-light .kpi-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================================
   Z2. Shine-эффект на кнопках при hover
   ============================================================ */
@keyframes btn-shine {
  0% { left: -75%; }
  100% { left: 125%; }
}
button[type="submit"],
.btn-primary,
.topbar-btn-profile,
.topbar-btn-theme,
.topbar-btn-logout,
[class*="bg-violet-600"],
[class*="bg-emerald-600"],
[class*="bg-indigo-600"] {
  position: relative;
  overflow: hidden;
}
button[type="submit"]::after,
.btn-primary::after,
[class*="bg-violet-600"]::after,
[class*="bg-emerald-600"]::after,
[class*="bg-indigo-600"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
button[type="submit"]:hover::after,
.btn-primary:hover::after,
[class*="bg-violet-600"]:hover::after,
[class*="bg-emerald-600"]:hover::after,
[class*="bg-indigo-600"]:hover::after {
  opacity: 1;
  animation: btn-shine 0.6s ease forwards;
}

/* ============================================================
   Z3. Scroll fade-in (класс добавляется через JS IntersectionObserver)
   ============================================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered delays for children */
.scroll-reveal-stagger > .scroll-reveal:nth-child(1) { transition-delay: 0.05s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(2) { transition-delay: 0.10s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(3) { transition-delay: 0.15s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(4) { transition-delay: 0.20s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(5) { transition-delay: 0.25s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(6) { transition-delay: 0.30s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(7) { transition-delay: 0.35s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(8) { transition-delay: 0.40s; }

/* ============================================================
   Z4. KPI карточки — неоновый animated border glow
   ============================================================ */
@keyframes kpi-border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
html:not(.theme-light) .kpi-card {
  position: relative;
  overflow: visible;
}
html:not(.theme-light) .kpi-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(270deg,
    var(--kpi-glow, rgba(16, 185, 129, 0.5)),
    transparent 40%,
    var(--kpi-glow, rgba(16, 185, 129, 0.5))
  );
  background-size: 300% 300%;
  animation: kpi-border-flow 4s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s;
}
html:not(.theme-light) .kpi-card:hover::before {
  opacity: 1;
}
/* Color per KPI card position */
html:not(.theme-light) .kpi-card:nth-child(1) { --kpi-glow: rgba(16, 185, 129, 0.6); }
html:not(.theme-light) .kpi-card:nth-child(2) { --kpi-glow: rgba(6, 182, 212, 0.6); }
html:not(.theme-light) .kpi-card:nth-child(3) { --kpi-glow: rgba(14, 165, 233, 0.6); }
html:not(.theme-light) .kpi-card:nth-child(4) { --kpi-glow: rgba(244, 63, 94, 0.6); }

/* ============================================================
   Z5. Hover lift + colored shadow на карточках
   ============================================================ */
html:not(.theme-light) .card-themed,
html:not(.theme-light) .tab-panel .rounded-2xl {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}
html:not(.theme-light) .card-themed:hover,
html:not(.theme-light) .tab-panel .rounded-2xl:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(42, 171, 238, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Z6. Gradient text на заголовках секций
   ============================================================ */
.sidebar p[class*="uppercase"],
.header-themed h1,
.header-themed h2,
h1[class*="font-bold"],
h2[class*="font-bold"] {
  background: linear-gradient(135deg, #34d399 0%, #38bdf8 40%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Light theme — darker gradient */
html.theme-light .sidebar p[class*="uppercase"],
html.theme-light .header-themed h1,
html.theme-light .header-themed h2 {
  background: linear-gradient(135deg, #059669 0%, #0284c7 40%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Z7. Animated background mesh — медленно плывущий градиент
   ============================================================ */
@keyframes bg-mesh-drift {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 50% 100%; }
  75% { background-position: 0% 50%; }
  100% { background-position: 0% 0%; }
}
html:not(.theme-light) body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 10%, rgba(42, 171, 238, 0.06) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: bg-mesh-drift 20s ease-in-out infinite;
}

/* ============================================================
   Z8. Мобильный sidebar — дополнительные стили для drawer
   ============================================================ */
@media (max-width: 767px) {
  /* Sidebar drawer links styling */
  #mobileMenuDrawer a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
  }
  #mobileMenuDrawer a:hover,
  #mobileMenuDrawer a:active {
    background: rgba(99, 102, 241, 0.15);
    color: #f1f5f9;
  }
  #mobileMenuDrawer .nav-active,
  #mobileMenuDrawer a[aria-current="page"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1));
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
  }
}

/* === DASHBOARD UPGRADES: Animated counters, sparklines, status pulse === */

/* Animated counter — numbers count up */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.kpi-card .value {
  animation: countUp 0.6s ease-out both;
}

/* Live pulse dot for active stats */
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.8); }
}
.kpi-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-left: 6px;
  vertical-align: middle;
  animation: livePulse 2s ease-in-out infinite;
}

/* Mini sparkline in KPI cards */
.kpi-sparkline {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 6px;
  opacity: 0.5;
}
.kpi-sparkline polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Server status pulse */
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 4px transparent; }
}
#serverStatusDot.online {
  background-color: #10b981;
  animation: statusPulse 2s ease-in-out infinite;
  color: rgba(16, 185, 129, 0.4);
}
#serverStatusDot.offline {
  background-color: #ef4444;
}
#workerDot.online {
  background-color: #10b981;
  animation: statusPulse 2.5s ease-in-out infinite;
  color: rgba(16, 185, 129, 0.4);
}
#workerDot.offline {
  background-color: #ef4444;
}

/* Quick action cards — lift on hover */
.quick-action-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Activity feed entry animation */
@keyframes feedSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.feed-entry {
  animation: feedSlideIn 0.3s ease-out both;
}
.feed-entry + .feed-entry { animation-delay: 0.05s; }

/* Dashboard greeting shimmer */
@keyframes greetingShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.dashboard-greeting-title {
  background: linear-gradient(90deg, var(--panel-text-primary) 40%, var(--panel-accent) 50%, var(--panel-text-primary) 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: greetingShimmer 4s ease-in-out infinite;
}

/* === LOG VIEWER UPGRADES === */

/* Level badges with colors */
.log-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.log-level-badge--info {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.3);
}
.log-level-badge--warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}
.log-level-badge--error {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Level indicator dot */
.log-level-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.log-level-badge--error::before {
  animation: livePulse 1.5s ease-in-out infinite;
}

/* Log row hover */
.log-row {
  transition: background-color 0.15s ease;
  border-left: 3px solid transparent;
  padding-left: calc(0.75rem - 3px) !important;
}
.log-row:hover {
  background-color: rgba(148, 163, 184, 0.08) !important;
}
.log-row--error {
  border-left-color: rgba(239, 68, 68, 0.6);
  background-color: rgba(239, 68, 68, 0.03);
}
.log-row--warn {
  border-left-color: rgba(245, 158, 11, 0.4);
}
.log-row--info {
  border-left-color: rgba(14, 165, 233, 0.3);
}

/* Live stream indicator */
@keyframes streamBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.stream-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 6px;
  animation: streamBlink 1s ease-in-out infinite;
}

/* Auto-refresh indicator */
.logs-auto-refresh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--panel-text-muted);
}
.logs-auto-refresh .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--panel-border);
  border-top-color: var(--panel-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Log message highlighting for search */
.log-highlight {
  background: rgba(245, 158, 11, 0.3);
  border-radius: 2px;
  padding: 0 2px;
}

/* === ACCOUNTS TABLE UPGRADES === */

/* Account row entrance animation */
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.acc-row {
  animation: rowFadeIn 0.3s ease-out both;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.acc-row:hover {
  background-color: rgba(148, 163, 184, 0.06) !important;
}

/* Status badge with glow */
.acc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid;
  transition: box-shadow 0.2s ease;
}
.acc-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.acc-status-badge--active::before {
  animation: livePulse 2s ease-in-out infinite;
}

/* Account avatar placeholder */
.acc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
  color: var(--panel-text-primary);
}

/* Bulk action bar animation */
@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
#bulkActions:not(.hidden) {
  animation: slideUp 0.3s ease-out;
}

/* Proxy badge */
.proxy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.06);
  transition: border-color 0.15s ease;
}
.proxy-badge:hover {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.08);
}

/* KPI cards on accounts page — hover glow */
.stat-filter-block {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.stat-filter-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.stat-filter-block.active-filter {
  border-color: var(--panel-accent) !important;
  box-shadow: 0 0 12px var(--panel-accent-glow);
}

/* === DASHBOARD ANIMATED GRADIENT BACKGROUND === */
.dashboard-animated-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.dash-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.4;
}
.dash-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 70%);
  top: -150px;
  left: -100px;
  animation: dashOrbFloat 12s ease-in-out infinite;
}
.dash-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
  bottom: -100px;
  right: -80px;
  animation: dashOrbFloat 15s ease-in-out infinite reverse;
}
.dash-orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: dashOrbFloat 10s ease-in-out infinite 3s;
}
@keyframes dashOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-25px, 20px) scale(0.95); }
}

/* === SKELETON LOADING PLACEHOLDERS === */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--panel-bg-card) 25%,
    rgba(148, 163, 184, 0.08) 50%,
    var(--panel-bg-card) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--panel-radius-sm);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skeleton-line {
  height: 12px;
  margin: 6px 0;
  border-radius: 6px;
}
.skeleton-circle {
  border-radius: 50%;
}
.skeleton-card {
  min-height: 80px;
  border-radius: var(--panel-radius);
}
/* Skeleton variants for different widths */
.skeleton-w-20 { width: 20%; }
.skeleton-w-40 { width: 40%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-80 { width: 80%; }
.skeleton-w-full { width: 100%; }

/* === QUICK SEARCH MODAL (Ctrl+K) === */
.quick-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.quick-search-box {
  width: 90%;
  max-width: 520px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px var(--panel-accent-glow);
  overflow: hidden;
  animation: searchSlideDown 0.2s ease-out;
}
@keyframes searchSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.quick-search-input {
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid var(--panel-border);
  background: transparent;
  color: var(--panel-text-primary);
  font-size: 14px;
  font-family: var(--panel-font-sans);
  outline: none;
}
.quick-search-input::placeholder {
  color: var(--panel-text-muted);
}
.quick-search-results {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
}
.quick-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--panel-text-primary);
  transition: background-color 0.1s ease;
}
.quick-search-item:hover,
.quick-search-item.active {
  background: var(--panel-bg-card);
}
.quick-search-item .qs-emoji {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.quick-search-item .qs-label {
  flex: 1;
}
.quick-search-item .qs-hint {
  font-size: 10px;
  color: var(--panel-text-muted);
}
.quick-search-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--panel-border);
  font-size: 10px;
  color: var(--panel-text-muted);
  display: flex;
  gap: 12px;
}
.quick-search-footer kbd {
  background: var(--panel-bg-card);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--panel-font-mono);
}

/* === LIVE PROGRESS BAR FOR JOBS === */
.job-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--panel-bg-input);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.job-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  position: relative;
}
.job-progress-fill--running {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.job-progress-fill--running::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShine 1.5s ease-in-out infinite;
}
@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.job-progress-fill--done {
  background: #10b981;
}
.job-progress-fill--failed {
  background: #ef4444;
}
.job-progress-text {
  font-size: 10px;
  font-family: var(--panel-font-mono);
  color: var(--panel-text-muted);
  margin-top: 2px;
}

/* Job status badges */
.job-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid;
}
.job-status-badge--running {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
.job-status-badge--running::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: livePulse 2s ease-in-out infinite;
}
.job-status-badge--done {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.3);
}
.job-status-badge--failed {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.job-status-badge--pending {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.2);
}

/* ============================================================
   MOBILE RESPONSIVE — comprehensive layout fixes
   ============================================================ */
@media (max-width: 767px) {
  /* Topbar: compact on mobile */
  .panel-topbar {
    padding: 0.35rem 0.5rem;
    gap: 0.25rem;
  }
  .panel-topbar .panel-topbar-right {
    gap: 0.15rem;
  }
  .panel-topbar .panel-topbar-right a,
  .panel-topbar .panel-topbar-right button {
    padding: 0.35rem 0.5rem;
    min-width: 36px;
    min-height: 36px;
  }
  .panel-topbar-icon svg {
    width: 16px;
    height: 16px;
  }
  /* Topbar tip labels hidden */
  .panel-topbar [data-tip]::after,
  .panel-topbar [data-tip]::before {
    display: none !important;
  }

  /* Main content padding reduced */
  main .mx-auto {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Dashboard grid — single column */
  .lg\:grid-cols-\[minmax\(0\,1\.4fr\)_minmax\(0\,1fr\)\] {
    grid-template-columns: 1fr !important;
  }

  /* KPI cards — 2 col on mobile */
  .grid.grid-cols-2.md\:grid-cols-4,
  .grid.grid-cols-2.sm\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .kpi-card {
    padding: 0.625rem 0.75rem;
  }
  .kpi-card .text-2xl,
  .kpi-card .text-lg {
    font-size: 1.1rem;
  }

  /* Cards reduce padding */
  .rounded-2xl.card-themed {
    border-radius: 1rem;
  }

  /* Header sections — compact */
  .header-themed .mx-auto {
    padding: 0.5rem 0.75rem;
  }
  .header-themed h1 {
    font-size: 1rem;
  }

  /* Tables scroll horizontally */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Flex-wrap toolbars */
  header.flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Button groups wrap */
  .flex.items-center.gap-2.flex-wrap {
    width: 100%;
  }

  /* Modals: full-width on mobile */
  .fixed.inset-0 > .w-full.max-w-lg,
  .fixed.inset-0 > .w-full.max-w-xl,
  .fixed.inset-0 > .w-full.max-w-2xl {
    max-width: 95vw !important;
    margin: 0.5rem;
    max-height: 90vh;
  }

  /* Quick actions grid — 1 col */
  .grid.gap-2.sm\:grid-cols-2,
  .grid.gap-3.sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Text sizes down */
  .text-xl { font-size: 1rem; }
  .text-lg { font-size: 0.9rem; }

  /* Tab panels: stack horizontally scrollable */
  .tab-panel .flex.gap-1,
  .tab-panel .flex.gap-2 {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-panel .flex.gap-1::-webkit-scrollbar,
  .tab-panel .flex.gap-2::-webkit-scrollbar {
    display: none;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  .panel-topbar .logo-text { display: none !important; }
  .panel-topbar img[alt="Salyev Expert"] {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   FIX: Sidebar nav text clipping — prevent any overflow:hidden
   ============================================================ */
.sidebar .nav-item,
.sidebar .nav-label {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  max-width: none !important;
}
.sidebar .flex-1 {
  overflow-x: visible !important;
}
aside#sidebar {
  overflow: visible !important;
}

/* ============================================================
   FIX: Light theme — animated background + dashboard
   ============================================================ */
html.theme-light .dashboard-video-wrap .dashboard-animated-bg {
  opacity: 0.3;
}
html.theme-light .dash-orb-1 {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15), transparent 70%);
}
html.theme-light .dash-orb-2 {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%);
}
html.theme-light .dash-orb-3 {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.1), transparent 70%);
}
html.theme-light .dashboard-video-wrap .dashboard-video-overlay {
  background: rgba(241, 245, 249, 0.85);
}
html.theme-light .dashboard-greeting {
  color: var(--panel-text-primary);
}


/* ============================================================
   PP. LIGHT THEME: Ghost/translucent buttons contrast fix
   Buttons like 'Export CSV', 'Copy', 'Stop', 'Logs' use
   bg-xxx-500/10 + text-xxx-200 which are invisible on white.
   ============================================================ */

/* --- Emerald ghost buttons (Export CSV, result action buttons) --- */
html.theme-light [class*="bg-emerald-500/10"],
html.theme-light [class*="bg-emerald-500/5"] {
  background-color: rgba(5, 150, 105, 0.12) !important;
}
html.theme-light [class*="bg-emerald-500/20"] {
  background-color: rgba(5, 150, 105, 0.18) !important;
}
html.theme-light [class*="bg-emerald-500/30"],
html.theme-light [class*="bg-emerald-500/40"] {
  background-color: rgba(5, 150, 105, 0.22) !important;
}
html.theme-light [class*="bg-emerald-400/20"] {
  background-color: rgba(5, 150, 105, 0.15) !important;
}
html.theme-light .text-emerald-200 {
  color: #047857 !important;
}
html.theme-light .text-emerald-300 {
  color: #059669 !important;
}
html.theme-light .text-emerald-100 {
  color: #065f46 !important;
}
html.theme-light .text-emerald-400 {
  color: #059669 !important;
}
html.theme-light [class*="border-emerald-500/"] {
  border-color: rgba(5, 150, 105, 0.5) !important;
}
html.theme-light [class*="border-emerald-400/"] {
  border-color: rgba(5, 150, 105, 0.45) !important;
}

/* --- Violet ghost buttons (Copy / Kopirovat) --- */
html.theme-light [class*="bg-violet-500/10"],
html.theme-light [class*="bg-violet-500/5"] {
  background-color: rgba(109, 40, 217, 0.1) !important;
}
html.theme-light [class*="bg-violet-500/20"] {
  background-color: rgba(109, 40, 217, 0.15) !important;
}
html.theme-light [class*="bg-violet-500/30"],
html.theme-light [class*="bg-violet-500/40"] {
  background-color: rgba(109, 40, 217, 0.18) !important;
}
html.theme-light [class*="bg-violet-400/20"] {
  background-color: rgba(109, 40, 217, 0.12) !important;
}
html.theme-light [class*="bg-violet-800/30"] {
  background-color: rgba(109, 40, 217, 0.12) !important;
}
html.theme-light .text-violet-200 {
  color: #6d28d9 !important;
}
html.theme-light .text-violet-300 {
  color: #7c3aed !important;
}
html.theme-light .text-violet-100 {
  color: #5b21b6 !important;
}
html.theme-light .text-violet-50 {
  color: #4c1d95 !important;
}
html.theme-light .text-violet-400 {
  color: #7c3aed !important;
}
html.theme-light .text-violet-500 {
  color: #6d28d9 !important;
}
html.theme-light [class*="border-violet-500/"] {
  border-color: rgba(109, 40, 217, 0.45) !important;
}
html.theme-light [class*="border-violet-400/"] {
  border-color: rgba(109, 40, 217, 0.4) !important;
}

/* --- Cyan ghost buttons (Copy User ID, etc.) --- */
html.theme-light [class*="bg-cyan-500/10"],
html.theme-light [class*="bg-cyan-500/15"] {
  background-color: rgba(14, 116, 144, 0.1) !important;
}
html.theme-light [class*="bg-cyan-500/20"] {
  background-color: rgba(14, 116, 144, 0.15) !important;
}
html.theme-light [class*="bg-cyan-500/30"],
html.theme-light [class*="bg-cyan-500/35"] {
  background-color: rgba(14, 116, 144, 0.18) !important;
}
html.theme-light .text-cyan-200 {
  color: #0e7490 !important;
}
html.theme-light .text-cyan-300 {
  color: #0891b2 !important;
}
html.theme-light .text-cyan-100 {
  color: #155e75 !important;
}
html.theme-light .text-cyan-500 {
  color: #0e7490 !important;
}
html.theme-light [class*="border-cyan-500/"],
html.theme-light [class*="border-cyan-400/"] {
  border-color: rgba(14, 116, 144, 0.45) !important;
}

/* --- Rose ghost buttons (Stop / Ostanovit) --- */
html.theme-light [class*="bg-rose-500/10"],
html.theme-light [class*="bg-rose-500/15"] {
  background-color: rgba(190, 18, 60, 0.1) !important;
}
html.theme-light [class*="bg-rose-500/20"] {
  background-color: rgba(190, 18, 60, 0.15) !important;
}
html.theme-light [class*="bg-rose-500/30"],
html.theme-light [class*="bg-rose-500/40"] {
  background-color: rgba(190, 18, 60, 0.18) !important;
}
html.theme-light [class*="bg-rose-400/20"] {
  background-color: rgba(190, 18, 60, 0.12) !important;
}
html.theme-light .text-rose-200 {
  color: #be123c !important;
}
html.theme-light .text-rose-300 {
  color: #e11d48 !important;
}
html.theme-light .text-rose-100 {
  color: #9f1239 !important;
}
html.theme-light .text-rose-50 {
  color: #881337 !important;
}
html.theme-light .text-rose-400 {
  color: #e11d48 !important;
}
html.theme-light [class*="border-rose-500/"] {
  border-color: rgba(190, 18, 60, 0.45) !important;
}

/* --- Amber ghost buttons (warning actions) --- */
html.theme-light [class*="bg-amber-500/10"],
html.theme-light [class*="bg-amber-500/15"] {
  background-color: rgba(180, 83, 9, 0.1) !important;
}
html.theme-light [class*="bg-amber-500/20"] {
  background-color: rgba(180, 83, 9, 0.15) !important;
}
html.theme-light .text-amber-200 {
  color: #b45309 !important;
}
html.theme-light .text-amber-300 {
  color: #d97706 !important;
}
html.theme-light .text-amber-100 {
  color: #92400e !important;
}
html.theme-light .text-amber-400 {
  color: #d97706 !important;
}
html.theme-light [class*="border-amber-500/"] {
  border-color: rgba(180, 83, 9, 0.45) !important;
}

/* --- Slate ghost buttons (Logs / secondary actions) --- */
html.theme-light [class*="bg-slate-500/10"],
html.theme-light [class*="bg-slate-500/15"] {
  background-color: rgba(71, 85, 105, 0.1) !important;
}
html.theme-light [class*="bg-slate-500/20"] {
  background-color: rgba(71, 85, 105, 0.15) !important;
}
html.theme-light [class*="bg-slate-600/30"] {
  background-color: rgba(71, 85, 105, 0.15) !important;
}
html.theme-light [class*="bg-slate-700/40"] {
  background-color: rgba(71, 85, 105, 0.12) !important;
}
html.theme-light [class*="border-slate-500/"] {
  border-color: rgba(71, 85, 105, 0.4) !important;
}

/* --- Yellow ghost buttons --- */
html.theme-light [class*="bg-yellow-500/20"] {
  background-color: rgba(161, 98, 7, 0.12) !important;
}
html.theme-light .text-yellow-300 {
  color: #a16207 !important;
}
html.theme-light .text-yellow-400 {
  color: #ca8a04 !important;
}

/* --- Orange text --- */
html.theme-light .text-orange-300 {
  color: #c2410c !important;
}
html.theme-light .text-orange-400 {
  color: #ea580c !important;
}

/* --- Sky text --- */
html.theme-light .text-sky-300 {
  color: #0369a1 !important;
}

/* --- Hover states for ghost buttons on light theme --- */
html.theme-light button[class*="hover\:bg-emerald"]:hover {
  background-color: rgba(5, 150, 105, 0.2) !important;
}
html.theme-light button[class*="hover\:bg-violet"]:hover {
  background-color: rgba(109, 40, 217, 0.18) !important;
}
html.theme-light button[class*="hover\:bg-cyan"]:hover {
  background-color: rgba(14, 116, 144, 0.18) !important;
}
html.theme-light button[class*="hover\:bg-rose"]:hover {
  background-color: rgba(190, 18, 60, 0.18) !important;
}
html.theme-light button[class*="hover\:bg-slate-500"]:hover {
  background-color: rgba(71, 85, 105, 0.18) !important;
}
html.theme-light button[class*="hover\:bg-amber"]:hover {
  background-color: rgba(180, 83, 9, 0.18) !important;
}

/* --- Results section header text on light theme --- */
html.theme-light #resultsSection .text-slate-50,
html.theme-light #resultsSection .text-slate-100,
html.theme-light #resultsSection .text-slate-200,
html.theme-light #resultsSection .text-slate-300 {
  color: #0f172a !important;
}

/* --- Pagination buttons on light theme --- */
html.theme-light button[class*="bg-slate-800"] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.theme-light button[class*="bg-slate-800"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* --- Generic: any dynamically-created ghost button in tables/results on light theme --- */
html.theme-light .g-res-btn {
  background-color: rgba(5, 150, 105, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.45) !important;
  color: #047857 !important;
}
html.theme-light .g-res-btn:hover {
  background-color: rgba(5, 150, 105, 0.2) !important;
}


/* ============================================================
   RR. LIGHT THEME v2: Sidebar, Buttons, Badges, Help page
   ============================================================ */

/* --- RR-1. SIDEBAR: Remove violet/purple backgrounds from nav links --- */
/* PP section's [class*="bg-violet-500/10"] and [class*="bg-violet-800/30"]
   match sidebar nav links because their class attribute contains those strings
   as hover classes. We override with higher specificity here. */
html.theme-light aside#sidebar nav a.nav-item {
  background: transparent !important;
  color: #334155 !important;
  border-color: transparent !important;
}
html.theme-light aside#sidebar nav a.nav-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html.theme-light aside#sidebar nav a.nav-item.nav-active {
  background: #e2e8f0 !important;
  border-color: transparent !important;
  border-left: 3px solid #059669 !important;
  color: #0f172a !important;
  font-weight: 600;
}

/* --- RR-2. BUTTONS: specific class-based overrides --- */
/* Green "Результаты" buttons */
html.theme-light .btn-job-results,
html.theme-light .tool-results-injected,
html.theme-light .g-res-btn,
html.theme-light .boost-job-results {
  background-color: rgba(5, 150, 105, 0.15) !important;
  border: 1px solid rgba(5, 150, 105, 0.5) !important;
  color: #047857 !important;
}
html.theme-light .btn-job-results:hover,
html.theme-light .tool-results-injected:hover,
html.theme-light .g-res-btn:hover,
html.theme-light .boost-job-results:hover {
  background-color: rgba(5, 150, 105, 0.25) !important;
}

/* Gray "Логи" buttons */
html.theme-light .btn-job-logs,
html.theme-light .tool-logs-injected,
html.theme-light .boost-job-logs {
  background-color: rgba(71, 85, 105, 0.1) !important;
  border: 1px solid rgba(71, 85, 105, 0.4) !important;
  color: #334155 !important;
}
html.theme-light .btn-job-logs:hover,
html.theme-light .tool-logs-injected:hover,
html.theme-light .boost-job-logs:hover {
  background-color: rgba(71, 85, 105, 0.2) !important;
}

/* Red "Удалить" button - must override inline style color:#94a3b8 */
html.theme-light .btn-job-delete {
  background-color: rgba(190, 18, 60, 0.08) !important;
  border-color: rgba(190, 18, 60, 0.4) !important;
  color: #be123c !important;
}
html.theme-light .btn-job-delete:hover {
  background-color: rgba(190, 18, 60, 0.18) !important;
}

/* Red "Стоп" button */
html.theme-light .btn-job-cancel,
html.theme-light .boost-job-stop {
  background-color: rgba(190, 18, 60, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #be123c !important;
}
html.theme-light .btn-job-cancel:hover,
html.theme-light .boost-job-stop:hover {
  background-color: rgba(190, 18, 60, 0.2) !important;
}

/* "Экспорт CSV" button (in results section) */
html.theme-light #exportCsv {
  background-color: rgba(5, 150, 105, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.5) !important;
  color: #047857 !important;
}

/* "Копировать" button */
html.theme-light #copyResults {
  background-color: rgba(109, 40, 217, 0.1) !important;
  border-color: rgba(109, 40, 217, 0.45) !important;
  color: #6d28d9 !important;
}

/* "Удалить выбранные" bulk delete */
html.theme-light #bulkDelete {
  background-color: rgba(190, 18, 60, 0.1) !important;
  border-color: rgba(190, 18, 60, 0.45) !important;
  color: #be123c !important;
}

/* --- RR-3. STATUS BADGES: Override inline color styles --- */
/* Running/active: color:#6ee7b7 -> dark green */
html.theme-light span[style*="color:#6ee7b7"],
html.theme-light span[style*="color: #6ee7b7"] {
  color: #047857 !important;
}
html.theme-light span[style*="background:rgba(16,185,129"],
html.theme-light span[style*="background: rgba(16,185,129"] {
  background: rgba(5, 150, 105, 0.12) !important;
}

/* Done/completed: color:#67e8f9 -> dark cyan */
html.theme-light span[style*="color:#67e8f9"],
html.theme-light span[style*="color: #67e8f9"] {
  color: #0e7490 !important;
}
html.theme-light span[style*="background:rgba(34,211,238"],
html.theme-light span[style*="background: rgba(34,211,238"] {
  background: rgba(14, 116, 144, 0.12) !important;
}

/* Error/failed: color:#fca5a5 -> dark red */
html.theme-light span[style*="color:#fca5a5"],
html.theme-light span[style*="color: #fca5a5"] {
  color: #be123c !important;
}
html.theme-light span[style*="background:rgba(248,113,113"],
html.theme-light span[style*="background: rgba(248,113,113"] {
  background: rgba(190, 18, 60, 0.1) !important;
}

/* Warning: color:#fcd34d -> dark amber */
html.theme-light span[style*="color:#fcd34d"],
html.theme-light span[style*="color: #fcd34d"] {
  color: #b45309 !important;
}
html.theme-light span[style*="background:rgba(251,191,36"],
html.theme-light span[style*="background: rgba(251,191,36"] {
  background: rgba(180, 83, 9, 0.1) !important;
}

/* Pending/waiting: color:#94a3b8 -> darker gray */
html.theme-light span[style*="color:#94a3b8"],
html.theme-light span[style*="color: #94a3b8"] {
  color: #475569 !important;
}

/* --- RR-4. PROGRESS BARS: Dark track -> light track --- */
html.theme-light div[style*="background:#1e293b"] {
  background: #e2e8f0 !important;
}
html.theme-light div[style*="background: #1e293b"] {
  background: #e2e8f0 !important;
}

/* --- RR-5. HELP PAGE: Step titles and card headings --- */
html.theme-light .help-step-body h4 {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
html.theme-light .help-step-body p {
  color: #475569 !important;
}
html.theme-light .help-card h3 {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
html.theme-light .help-card p,
html.theme-light .help-card li {
  color: #475569 !important;
}

/* --- RR-6. SIDEBAR SECTION HEADERS --- */
html.theme-light aside#sidebar .text-violet-400 {
  color: #6d28d9 !important;
}

/* --- RR-7. Sidebar badge text on light theme --- */
html.theme-light aside#sidebar .nav-item span.text-rose-200 {
  color: #be123c !important;
}
html.theme-light aside#sidebar .nav-item span.text-emerald-200 {
  color: #047857 !important;
}
html.theme-light aside#sidebar .nav-item span.text-violet-200 {
  color: #6d28d9 !important;
}