/* ============================================================
   VoiceTrans UI v3 — тёмная тема, стеклянный сайдбар, красный акцент.
   Единственная таблица стилей приложения (заменяет app.css + design-v2.css).
   Имена классов сохранены, чтобы шаблоны продолжали работать.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Поверхности */
  --vt-bg: #0b0b0e;
  --vt-surface: rgba(255,255,255,.035);
  --vt-surface-2: rgba(255,255,255,.06);
  --vt-surface-soft: rgba(255,255,255,.025);
  --vt-surface-solid: #16161b;
  --vt-elevated: #1b1b21;
  --vt-border: rgba(255,255,255,.075);
  --vt-border-strong: rgba(255,255,255,.14);
  --vt-hover: rgba(255,255,255,.05);

  /* Текст */
  --vt-text: #f4f4f5;
  --vt-text-sub: #a1a1aa;
  --vt-muted: #71717a;

  /* Акцент — красный */
  --vt-primary: #dc2f2f;
  --vt-primary-hover: #ef4444;
  --vt-primary-soft: rgba(220,47,47,.14);
  --vt-primary-border: rgba(239,68,68,.38);
  --vt-primary-text: #fca5a5;

  /* Статусы */
  --vt-success: #22c55e;
  --vt-success-soft: rgba(34,197,94,.13);
  --vt-success-border: rgba(34,197,94,.3);
  --vt-success-text: #86efac;

  --vt-warning: #f59e0b;
  --vt-warning-soft: rgba(245,158,11,.13);
  --vt-warning-border: rgba(245,158,11,.3);
  --vt-warning-text: #fcd34d;

  --vt-danger: #ef4444;
  --vt-danger-soft: rgba(239,68,68,.14);
  --vt-danger-border: rgba(239,68,68,.32);
  --vt-danger-text: #fca5a5;

  --vt-info: #60a5fa;
  --vt-info-soft: rgba(96,165,250,.13);
  --vt-info-border: rgba(96,165,250,.3);
  --vt-info-text: #93c5fd;

  --vt-purple-soft: rgba(167,139,250,.14);
  --vt-purple-text: #c4b5fd;

  /* Тени */
  --vt-shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --vt-shadow-sm: 0 4px 14px rgba(0,0,0,.28);
  --vt-shadow-md: 0 10px 30px rgba(0,0,0,.38);
  --vt-shadow-lg: 0 24px 60px rgba(0,0,0,.5);

  /* Радиусы */
  --vt-r-sm: 8px;
  --vt-r: 10px;
  --vt-r-lg: 14px;
  --vt-r-xl: 20px;

  /* Каркас */
  --sb-w: 264px;
  --sb-w-collapsed: 76px;
  --header-h: 56px;
  --shell-gap: 12px;

  /* Bootstrap → наши токены */
  --bs-body-bg: var(--vt-bg);
  --bs-body-color: var(--vt-text);
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-font-size: 14px;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--vt-text-sub);
  --bs-tertiary-color: var(--vt-muted);
  --bs-secondary-bg: var(--vt-surface-2);
  --bs-tertiary-bg: var(--vt-surface);
  --bs-border-color: var(--vt-border);
  --bs-border-color-translucent: var(--vt-border);
  --bs-heading-color: var(--vt-text);
  --bs-link-color: #f87171;
  --bs-link-color-rgb: 248,113,113;
  --bs-link-hover-color: #fca5a5;
  --bs-link-hover-color-rgb: 252,165,165;
  --bs-primary: var(--vt-primary);
  --bs-primary-rgb: 220,47,47;
  --bs-primary-text-emphasis: var(--vt-primary-text);
  --bs-primary-bg-subtle: var(--vt-primary-soft);
  --bs-primary-border-subtle: var(--vt-primary-border);
  --bs-code-color: #fda4af;
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--vt-bg);
  --bs-body-color: var(--vt-text);
  --bs-border-color: var(--vt-border);
  --bs-secondary-bg: var(--vt-surface-2);
  --bs-tertiary-bg: var(--vt-surface);
  --bs-link-color: #f87171;
  --bs-link-color-rgb: 248,113,113;
  --bs-link-hover-color: #fca5a5;
  --bs-link-hover-color-rgb: 252,165,165;
  --bs-primary-text-emphasis: var(--vt-primary-text);
  --bs-primary-bg-subtle: var(--vt-primary-soft);
  --bs-primary-border-subtle: var(--vt-primary-border);
}

/* ── База ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--vt-bg);
  color: var(--vt-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Фон-обои: отдельный fixed-слой (background-attachment: fixed не работает на iOS и дёргается при скролле).
   Картинка генерируется scripts/ui/gen_bg.py; поверх — лёгкое затемнение для читаемости текста. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,12,.12), rgba(10,10,12,.32)),
    url("../img/bg-waves.svg") center / cover no-repeat,
    var(--vt-bg);
}
::selection { background: rgba(220,47,47,.45); color: #fff; }
a { color: var(--bs-link-color); }
hr { border-color: var(--vt-border); opacity: 1; }
code, pre, .font-monospace { font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; }
pre { color: var(--vt-text-sub); }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.22); }

/* ── Каркас ───────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; gap: var(--shell-gap); padding: var(--shell-gap); }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1 1 auto; min-width: 0; padding: 0 .5rem 1.5rem; }
.app-content-frame { max-width: 1600px; margin: 0 auto; }

/* ── Сайдбар ──────────────────────────────────────────────── */
.app-sidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--shell-gap);
  height: calc(100vh - var(--shell-gap) * 2);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(70,70,78,.42), rgba(44,44,50,.38));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  z-index: 100;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.sb-head { display: flex; align-items: center; gap: .5rem; padding: 1rem 1rem .75rem; }
.sb-logo {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vt-primary); color: #fff; font-weight: 800; font-size: 1rem;
  text-decoration: none; box-shadow: 0 6px 18px rgba(220,47,47,.35);
}
.sb-logo:hover { color: #fff; }
.sb-title { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; letter-spacing: -.01em; }
.sb-title:hover { color: #fff; }
.sb-title small { display: block; font-weight: 500; font-size: .68rem; color: var(--vt-muted); }
.sb-iconbtn {
  position: relative; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--vt-text-sub); background: transparent; border: 0; text-decoration: none;
  transition: background .15s, color .15s;
}
.sb-iconbtn:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-iconbtn .sb-dot {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--vt-primary); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px rgba(22,22,27,.9);
}
.sb-collapse { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); cursor: pointer; font-size: .8rem; }
.sb-collapse i { transition: transform .2s; }

.sb-user {
  margin: 0 .75rem .75rem; display: flex; align-items: center; gap: .65rem;
  padding: .55rem .6rem; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  color: inherit; text-decoration: none; cursor: pointer; width: calc(100% - 1.5rem); text-align: left;
}
.sb-user:hover { background: rgba(255,255,255,.07); }
.sb-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3f3f46, #27272a); color: #fff; font-weight: 700; font-size: .85rem;
  border: 1px solid rgba(255,255,255,.12);
}
.sb-user__text { flex: 1; min-width: 0; line-height: 1.2; }
.sb-user__name { display: block; font-weight: 600; font-size: .85rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user__role { display: block; font-size: .7rem; color: var(--vt-muted); }
.sb-user .fa-chevron-down { font-size: .65rem; color: var(--vt-muted); }

.sb-search { position: relative; margin: 0 .75rem .5rem; }
.sb-search input {
  width: 100%; height: 38px; padding: 0 3rem 0 2.2rem; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  color: var(--vt-text); font-size: .83rem; outline: none; transition: border-color .15s, background .15s;
}
.sb-search input::placeholder { color: var(--vt-muted); }
.sb-search input:focus { border-color: rgba(239,68,68,.5); background: rgba(255,255,255,.07); }
.sb-search > .fa-magnifying-glass { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--vt-muted); font-size: .8rem; pointer-events: none; }
.sb-kbd {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  font-size: .65rem; color: var(--vt-muted); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: .05rem .35rem; pointer-events: none;
}
.sb-search-btn { display: none; }

.sb-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 300;
  background: var(--vt-elevated); border: 1px solid var(--vt-border-strong); border-radius: 12px;
  box-shadow: var(--vt-shadow-lg); padding: .35rem; display: none; max-height: 60vh; overflow: auto;
}
.sb-results.is-open { display: block; }
.sb-result {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px;
  color: var(--vt-text); text-decoration: none; font-size: .83rem; cursor: pointer;
}
.sb-result i { width: 16px; text-align: center; color: var(--vt-muted); font-size: .8rem; }
.sb-result small { margin-left: auto; color: var(--vt-muted); font-size: .7rem; }
.sb-result.is-active, .sb-result:hover { background: var(--vt-primary); color: #fff; }
.sb-result.is-active i, .sb-result:hover i, .sb-result.is-active small, .sb-result:hover small { color: rgba(255,255,255,.85); }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem .75rem; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-section-label {
  font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--vt-muted); padding: .9rem .6rem .4rem; white-space: nowrap;
}
.sb-divider { height: 1px; background: rgba(255,255,255,.07); margin: .5rem .35rem 0; }
.sidebar-link {
  position: relative; display: flex; align-items: center; gap: .75rem;
  height: 40px; padding: 0 .7rem; margin-bottom: 2px; border-radius: 11px;
  color: #d4d4d8; font-size: .86rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .14s, color .14s;
}
.sidebar-link .sidebar-icon { width: 18px; text-align: center; font-size: .9rem; flex-shrink: 0; color: var(--vt-text-sub); transition: color .14s; }
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link:hover .sidebar-icon { color: #fff; }
.sidebar-link.active { background: var(--vt-primary); color: #fff; font-weight: 600; box-shadow: 0 8px 20px rgba(220,47,47,.28); }
.sidebar-link.active .sidebar-icon { color: #fff; }
.sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--vt-primary); color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-badge--muted { background: rgba(255,255,255,.1); color: #e4e4e7; }
.sidebar-link.active .sb-badge { background: #fff; color: var(--vt-primary); }

.sidebar-footer { padding: .6rem 1rem .9rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: .5rem; }
.sidebar-version { font-size: .68rem; color: var(--vt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sidebar-logout { color: var(--vt-muted); }
.sidebar-logout:hover { color: var(--vt-danger-text); background: var(--vt-danger-soft); }

.vt-release-badge {
  display: inline-block; vertical-align: middle; margin-left: .3rem; padding: .08rem .38rem;
  border-radius: 999px; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.vt-release-badge--beta { background: rgba(245,158,11,.16); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.vt-release-badge--stable { background: rgba(34,197,94,.16); color: #86efac; border: 1px solid rgba(34,197,94,.3); }

/* Свёрнутый сайдбар */
html.sb-collapsed .app-sidebar { width: var(--sb-w-collapsed); }
html.sb-collapsed .sb-head { flex-direction: column; padding: 1rem .5rem .6rem; gap: .6rem; }
html.sb-collapsed .sb-title,
html.sb-collapsed .sb-user__text,
html.sb-collapsed .sb-user .fa-chevron-down,
html.sb-collapsed .sb-label,
html.sb-collapsed .sb-kbd,
html.sb-collapsed .sidebar-version,
html.sb-collapsed .sb-search input { display: none; }
html.sb-collapsed .sb-collapse { order: 99; }
html.sb-collapsed .sb-collapse i { transform: rotate(180deg); }
html.sb-collapsed .sb-user { margin: 0 auto .6rem; width: auto; padding: 0; background: none; border: 0; justify-content: center; }
html.sb-collapsed .sb-search { margin: 0 auto .4rem; width: 44px; }
html.sb-collapsed .sb-search > .fa-magnifying-glass { display: none; }
html.sb-collapsed .sb-search-btn {
  display: inline-flex; width: 44px; height: 38px; border-radius: 12px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); color: var(--vt-text-sub);
}
html.sb-collapsed .sidebar-nav { padding: .25rem .6rem .75rem; }
html.sb-collapsed .sidebar-section-label { text-align: center; padding: .8rem 0 .35rem; font-size: .55rem; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; }
html.sb-collapsed .sidebar-link { justify-content: center; padding: 0; gap: 0; }
html.sb-collapsed .sidebar-link .sb-badge {
  position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .58rem;
}
html.sb-collapsed .sidebar-footer { justify-content: center; padding: .6rem .5rem .9rem; }

/* ── Шапка страницы ───────────────────────────────────────── */
.app-header {
  min-height: var(--header-h); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem .5rem .9rem; position: relative; z-index: 50;
}
.app-header-title-wrap { flex: 1; min-width: 0; }
.app-header-title {
  margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: #fff;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; line-height: 1.2;
}
.app-header-subtitle { font-size: .8rem; color: var(--vt-muted); margin-top: .15rem; }
.app-header-subtitle:empty { display: none; }
.app-header-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.vt-header-beta { display: none; }

.btn-sidebar-toggle {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 11px; border: 1px solid var(--vt-border); background: var(--vt-surface);
  color: var(--vt-text); cursor: pointer; flex-shrink: 0;
}
.sidebar-overlay { display: none; }

@media (max-width: 991.98px) {
  .app-shell { padding: 8px; }
  .app-content { padding: 0 0 1rem; }
  .btn-sidebar-toggle { display: inline-flex; }
  .app-sidebar {
    position: fixed; left: 8px; top: 8px; height: calc(100vh - 16px); width: 280px !important;
    transform: translateX(-110%); transition: transform .22s cubic-bezier(.4,0,.2,1); z-index: 1050;
    background: rgba(40,40,46,.72);
  }
  .app-sidebar.is-open { transform: none; }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1040; }
  .sidebar-overlay.is-open { display: block; }
  .sb-collapse { display: none; }
  .app-header-title { font-size: 1.1rem; }
}
@media (max-width: 575.98px) {
  /* На телефоне действия шапки — отдельной строкой, чтобы не наезжать на заголовок. */
  .app-header-right { width: 100%; justify-content: flex-start; }
  .app-header-right:empty { display: none; }
}

/* ── Флэши, тосты, модалки ────────────────────────────────── */
.flash-zone { margin-bottom: 1rem; display: grid; gap: .5rem; }
.alert { border-radius: var(--vt-r); font-size: .86rem; border-width: 1px; }
.alert-danger  { background: var(--vt-danger-soft);  border-color: var(--vt-danger-border);  color: var(--vt-danger-text); }
.alert-warning { background: var(--vt-warning-soft); border-color: var(--vt-warning-border); color: var(--vt-warning-text); }
.alert-success { background: var(--vt-success-soft); border-color: var(--vt-success-border); color: var(--vt-success-text); }
.alert-info, .alert-primary { background: var(--vt-info-soft); border-color: var(--vt-info-border); color: var(--vt-info-text); }
.alert-secondary, .alert-light { background: var(--vt-surface-2); border-color: var(--vt-border); color: var(--vt-text-sub); }
.alert .alert-link { color: inherit; }

#app-toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 2000; width: min(400px, calc(100vw - 2rem)); pointer-events: none; }
#app-toast-container .toast { width: 100%; pointer-events: auto; border-radius: 12px; box-shadow: var(--vt-shadow-lg); }

.modal-content { background: var(--vt-elevated); border: 1px solid var(--vt-border-strong); border-radius: 18px; box-shadow: var(--vt-shadow-lg); color: var(--vt-text); }
.modal-header, .modal-footer { border-color: var(--vt-border); }
.modal-backdrop.show { opacity: .65; }
.vt-confirm-icon {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vt-danger-soft); color: var(--vt-danger-text); font-size: 1.1rem;
}
.dropdown-menu {
  --bs-dropdown-bg: var(--vt-elevated); --bs-dropdown-border-color: var(--vt-border-strong);
  --bs-dropdown-link-color: var(--vt-text); --bs-dropdown-link-hover-bg: rgba(255,255,255,.06);
  --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-active-bg: var(--vt-primary);
  --bs-dropdown-divider-bg: var(--vt-border);
  border-radius: 12px; padding: .35rem; box-shadow: var(--vt-shadow-lg); font-size: .85rem;
}
.dropdown-item { border-radius: 8px; padding: .45rem .7rem; display: flex; align-items: center; gap: .55rem; }
.tooltip { --bs-tooltip-bg: #27272a; --bs-tooltip-color: #fff; font-size: .75rem; }
.popover { --bs-popover-bg: var(--vt-elevated); --bs-popover-border-color: var(--vt-border-strong); --bs-popover-body-color: var(--vt-text); }

/* ── Карточки ─────────────────────────────────────────────── */
.vt-card, .vt-glass-card, .vt-panel-glass, .vt-panel, .s-card, .card {
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-r-xl);
  box-shadow: none;
  color: var(--vt-text);
}
.card { --bs-card-bg: var(--vt-surface); --bs-card-border-color: var(--vt-border); --bs-card-cap-bg: transparent; --bs-card-color: var(--vt-text); }
.card-header, .card-footer { border-color: var(--vt-border); background: transparent; }
.vt-panel { border-radius: var(--vt-r-lg); }
.vt-panel-soft { background: var(--vt-surface-soft); border: 1px solid var(--vt-border); border-radius: var(--vt-r); }
.vt-panel-glass { padding: 1.1rem 1.2rem; }
.vt-glass-card__body { padding: 1.2rem 1.3rem; }
.vt-glass-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.vt-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--vt-border); display: flex; align-items: center; gap: .65rem; }
.vt-card-body { padding: 1.25rem; }
.vt-section-shell { display: grid; gap: 1rem; }

.vt-card-header-icon, .vt-stat-icon, .s-section-icon, .kpi-grid .kpi-icon, .vt-attention-card__icon, .vt-onboarding-note__icon {
  width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .9rem; background: var(--vt-surface-2); color: var(--vt-text-sub);
}
.vt-card-header-icon { width: 32px; height: 32px; font-size: .8rem; }
.blue.vt-card-header-icon, .vt-stat-icon.blue, .s-section-icon.icon-blue, .kpi-icon--blue { background: var(--vt-info-soft); color: var(--vt-info-text); }
.green.vt-card-header-icon, .vt-stat-icon.green, .s-section-icon.icon-green, .kpi-icon--green { background: var(--vt-success-soft); color: var(--vt-success-text); }
.amber.vt-card-header-icon, .vt-stat-icon.amber, .s-section-icon.icon-amber, .kpi-icon--amber { background: var(--vt-warning-soft); color: var(--vt-warning-text); }
.red.vt-card-header-icon, .vt-stat-icon.red, .kpi-icon--red { background: var(--vt-danger-soft); color: var(--vt-danger-text); }
.kpi-icon--purple { background: var(--vt-purple-soft); color: var(--vt-purple-text); }

/* KPI / stat */
.vt-stat-card {
  background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-r-xl);
  padding: 1.1rem 1.2rem; display: flex; align-items: flex-start; gap: .85rem;
  transition: border-color .15s, background .15s;
}
.vt-stat-card:hover { border-color: var(--vt-border-strong); }
.vt-stat-label { font-size: .75rem; color: var(--vt-text-sub); font-weight: 500; margin-bottom: .2rem; }
.vt-stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.05; color: #fff; letter-spacing: -.02em; }
.vt-stat-hint { font-size: .72rem; color: var(--vt-muted); margin-top: .25rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 1rem; }
.kpi-grid .kpi-card {
  background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-r-xl);
  padding: 1rem 1.1rem; display: flex; align-items: flex-start; gap: .85rem;
}
.kpi-grid .kpi-body { flex: 1; min-width: 0; }
.kpi-grid .kpi-value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: #fff; }
.kpi-grid .kpi-label { font-size: .78rem; color: var(--vt-text-sub); margin-top: 2px; }
.kpi-grid .kpi-trend { font-size: .72rem; margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.kpi-grid .kpi-trend--up { color: var(--vt-success-text); }
.kpi-grid .kpi-trend--down { color: var(--vt-danger-text); }

.vt-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.vt-kpi-tile { padding: 1rem 1.05rem; border-radius: var(--vt-r-lg); border: 1px solid var(--vt-border); background: var(--vt-surface); }
.vt-kpi-tile__label { font-size: .72rem; color: var(--vt-text-sub); font-weight: 500; margin-bottom: .4rem; }
.vt-kpi-tile__value { font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1; font-weight: 700; color: #fff; }
.vt-kpi-tile__sub { margin-top: .4rem; color: var(--vt-muted); font-size: .76rem; }

/* Attention */
.vt-attention-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 576px)  { .vt-attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .vt-attention-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vt-attention-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem;
  color: inherit; text-decoration: none; background: var(--vt-surface); border: 1px solid var(--vt-border);
  border-radius: var(--vt-r-xl); transition: border-color .15s, background .15s;
}
.vt-attention-card:hover { border-color: var(--vt-border-strong); background: var(--vt-surface-2); color: inherit; }
.vt-attention-card__label { color: var(--vt-text-sub); font-size: .75rem; font-weight: 500; }
.vt-attention-card__value { font-size: 1.9rem; line-height: 1; font-weight: 700; margin-top: .35rem; color: #fff; }
.vt-attention-card__hint { color: var(--vt-muted); font-size: .76rem; margin-top: .35rem; }
.vt-attention-card--danger  .vt-attention-card__icon { background: var(--vt-danger-soft);  color: var(--vt-danger-text); }
.vt-attention-card--warning .vt-attention-card__icon { background: var(--vt-warning-soft); color: var(--vt-warning-text); }
.vt-attention-card--primary .vt-attention-card__icon { background: var(--vt-info-soft);    color: var(--vt-info-text); }
.vt-attention-card--success .vt-attention-card__icon { background: var(--vt-success-soft); color: var(--vt-success-text); }
.vt-attention-card.is-zero { opacity: .55; }

/* ── Статусы и теги ───────────────────────────────────────── */
.vt-status {
  display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.vt-status::before { content: ''; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.vt-status--pending, .status-pending { background: rgba(161,161,170,.12); color: #d4d4d8; border-color: rgba(161,161,170,.2); }
.vt-status--processing, .status-processing { background: var(--vt-info-soft); color: var(--vt-info-text); border-color: var(--vt-info-border); }
.vt-status--processing::before { animation: vtPulse 1.4s ease-in-out infinite; }
.vt-status--completed, .status-completed { background: var(--vt-success-soft); color: var(--vt-success-text); border-color: var(--vt-success-border); }
.vt-status--failed, .status-failed { background: var(--vt-danger-soft); color: var(--vt-danger-text); border-color: var(--vt-danger-border); }
.vt-status--missed, .status-missed { background: rgba(161,161,170,.08); color: var(--vt-text-sub); border-color: rgba(161,161,170,.16); }
.vt-status--no_recording, .status-no_recording,
.vt-status--warning, .status-manual_review { background: var(--vt-warning-soft); color: var(--vt-warning-text); border-color: var(--vt-warning-border); }
.vt-status--backlog, .status-backlog { background: rgba(129,140,248,.12); color: #a5b4fc; border-color: rgba(129,140,248,.25); }
@keyframes vtPulse { 50% { opacity: .35; } }

.vt-tag { display: inline-block; padding: .12rem .45rem; border-radius: 6px; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.vt-tag--blue   { background: rgba(96,165,250,.15);  color: #93c5fd; }
.vt-tag--green  { background: rgba(34,197,94,.15);   color: #86efac; }
.vt-tag--teal   { background: rgba(45,212,191,.15);  color: #5eead4; }
.vt-tag--purple { background: rgba(167,139,250,.15); color: #c4b5fd; }
.vt-tag--red    { background: rgba(239,68,68,.15);   color: #fca5a5; }
.vt-tag--indigo { background: rgba(129,140,248,.15); color: #a5b4fc; }
.vt-tag--orange { background: rgba(251,146,60,.15);  color: #fdba74; }
.vt-tag--gray   { background: rgba(161,161,170,.14); color: #d4d4d8; }
.vt-tag--amber, .vt-tag--yellow { background: rgba(245,158,11,.15); color: #fcd34d; }

/* ── Кнопки ───────────────────────────────────────────────── */
.btn {
  --bs-btn-font-weight: 600; --bs-btn-font-size: .83rem; --bs-btn-border-radius: 10px;
  --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn:active { transform: scale(.98); }
.btn-sm { --bs-btn-font-size: .78rem; --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .7rem; --bs-btn-border-radius: 9px; }
.btn-lg { --bs-btn-font-size: .95rem; --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.2rem; --bs-btn-border-radius: 12px; }
.btn-primary, .btn-danger {
  --bs-btn-bg: var(--vt-primary); --bs-btn-border-color: var(--vt-primary); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--vt-primary-hover); --bs-btn-hover-border-color: var(--vt-primary-hover); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-bg: var(--vt-primary); --bs-btn-disabled-border-color: var(--vt-primary);
  box-shadow: 0 6px 18px rgba(220,47,47,.25);
}
.btn-success {
  --bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a; --bs-btn-hover-bg: #22c55e; --bs-btn-hover-border-color: #22c55e;
}
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-light, .btn-outline-info {
  --bs-btn-bg: rgba(255,255,255,.05); --bs-btn-border-color: rgba(255,255,255,.1); --bs-btn-color: var(--vt-text);
  --bs-btn-hover-bg: rgba(255,255,255,.1); --bs-btn-hover-border-color: rgba(255,255,255,.18); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,.14); --bs-btn-active-border-color: rgba(255,255,255,.2); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: rgba(255,255,255,.03); --bs-btn-disabled-border-color: rgba(255,255,255,.06); --bs-btn-disabled-color: var(--vt-muted);
}
.btn-outline-success {
  --bs-btn-bg: rgba(34,197,94,.06); --bs-btn-border-color: var(--vt-success-border); --bs-btn-color: var(--vt-success-text);
  --bs-btn-hover-bg: rgba(34,197,94,.16); --bs-btn-hover-border-color: var(--vt-success); --bs-btn-hover-color: #fff;
}
.btn-outline-danger {
  --bs-btn-bg: rgba(239,68,68,.06); --bs-btn-border-color: var(--vt-danger-border); --bs-btn-color: var(--vt-danger-text);
  --bs-btn-hover-bg: var(--vt-primary); --bs-btn-hover-border-color: var(--vt-primary); --bs-btn-hover-color: #fff;
}
.btn-outline-warning, .btn-warning {
  --bs-btn-bg: rgba(245,158,11,.08); --bs-btn-border-color: var(--vt-warning-border); --bs-btn-color: var(--vt-warning-text);
  --bs-btn-hover-bg: rgba(245,158,11,.2); --bs-btn-hover-border-color: var(--vt-warning); --bs-btn-hover-color: #fff;
}
.btn-link { --bs-btn-color: #f87171; --bs-btn-hover-color: #fca5a5; box-shadow: none; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.vt-icon-btn { width: 34px; height: 34px; padding: 0 !important; }
.btn-group > .btn { border-radius: 10px; }

/* ── Формы ────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--vt-text);
  border-radius: 10px; font-size: .86rem; min-height: 38px;
}
.form-control-sm, .form-select-sm { min-height: 32px; font-size: .8rem; border-radius: 9px; }
.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,.06); border-color: rgba(239,68,68,.55); color: #fff;
  box-shadow: 0 0 0 3px rgba(220,47,47,.18);
}
.form-control::placeholder { color: var(--vt-muted); }
.form-control:disabled, .form-control[readonly] { background-color: rgba(255,255,255,.02); color: var(--vt-text-sub); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-select option { background: var(--vt-elevated); color: var(--vt-text); }
.form-label, .vt-field-label { font-size: .78rem; font-weight: 600; color: var(--vt-text-sub); margin-bottom: .35rem; display: block; }
.form-text { color: var(--vt-muted); font-size: .76rem; }
.form-check-input { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.form-check-input:checked { background-color: var(--vt-primary); border-color: var(--vt-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(220,47,47,.2); border-color: rgba(239,68,68,.55); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background: var(--vt-primary); }
.form-range::-moz-range-thumb { background: var(--vt-primary); }
.form-range::-webkit-slider-runnable-track { background: rgba(255,255,255,.1); }
.input-group-text { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--vt-text-sub); border-radius: 10px; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* ── Таблицы ──────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--vt-text); --bs-table-border-color: var(--vt-border);
  --bs-table-striped-bg: rgba(255,255,255,.02); --bs-table-hover-bg: rgba(255,255,255,.035); --bs-table-hover-color: #fff;
  --bs-table-active-bg: rgba(255,255,255,.05);
  margin-bottom: 0;
}
.table > thead > tr > th, .vt-table thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--vt-muted);
  padding: .65rem .8rem; border-bottom: 1px solid var(--vt-border); background: transparent; white-space: nowrap;
}
.table-light { --bs-table-bg: rgba(255,255,255,.03); --bs-table-color: var(--vt-text-sub); --bs-table-border-color: var(--vt-border); }
.table-warning, .table-danger, .table-success, .table-info, .table-primary, .table-secondary {
  --bs-table-color: var(--vt-text); --bs-table-border-color: var(--vt-border);
  --bs-table-striped-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.04); --bs-table-hover-color: var(--vt-text);
}
.table-warning { --bs-table-bg: rgba(245,158,11,.07); }
.table-danger { --bs-table-bg: rgba(239,68,68,.07); }
.table-success { --bs-table-bg: rgba(34,197,94,.07); }
.table-info, .table-primary { --bs-table-bg: rgba(96,165,250,.07); }
.table-secondary { --bs-table-bg: rgba(255,255,255,.03); }
.vt-table { width: 100%; font-size: .84rem; }
.vt-table tbody td { padding: .7rem .8rem; vertical-align: middle; border-bottom: 1px solid var(--vt-border); }
.vt-table tbody tr:last-child td { border-bottom: none; }
.vt-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.vt-table-wrap { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-r-xl); overflow: hidden; }
.vt-table-row-link { cursor: pointer; }
.vt-table-row-link:hover td { background: rgba(255,255,255,.045) !important; }
.vt-table-actions { opacity: .7; transition: opacity .15s; }
.vt-table tbody tr:hover .vt-table-actions { opacity: 1; }

.calls-table th.calls-col-id { width: 5.5rem; }
.calls-table th.calls-col-date { width: 7.5rem; }
.calls-table th.calls-col-phone { width: 9rem; }
.calls-table th.calls-col-duration { width: 4.5rem; }
.calls-table th.calls-col-status { width: 8.5rem; }
.calls-table th.calls-col-ai { width: 6rem; }
.calls-table th.calls-col-actions { width: 6rem; }
.calls-id-cell { font-size: .82rem; font-weight: 600; color: #fff; }
.calls-date-cell, .calls-duration-cell, .calls-stage-cell { font-size: .78rem; color: var(--vt-text-sub); }
.calls-date-cell { white-space: nowrap; }
.calls-stage-cell { margin-top: .2rem; }
.calls-card-id { font-size: .9rem; font-weight: 700; color: #fff; }
.calls-card-date, .calls-card-line, .calls-card-duration { font-size: .78rem; color: var(--vt-text-sub); }
.calls-card-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.calls-card-tag, .calls-card-more { font-size: .65rem; }
.call-card { display: block; padding: 1rem; border-radius: var(--vt-r-lg); background: var(--vt-surface); border: 1px solid var(--vt-border); color: inherit; text-decoration: none; }
.call-card:hover { border-color: var(--vt-border-strong); color: inherit; }

/* ── Навигация внутри страниц ─────────────────────────────── */
.vt-filter-pill, .vt-segmented__item {
  display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; border: 1px solid var(--vt-border); background: var(--vt-surface);
  color: var(--vt-text-sub); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}
.vt-filter-pill:hover, .vt-segmented__item:hover { background: var(--vt-surface-2); color: #fff; border-color: var(--vt-border-strong); }
.vt-filter-pill.active, .vt-segmented__item.is-active { background: var(--vt-primary); border-color: var(--vt-primary); color: #fff; }
.vt-filter-pill.active-success { background: var(--vt-success-soft); border-color: var(--vt-success-border); color: var(--vt-success-text); }
.vt-filter-pill.active-warning { background: var(--vt-warning-soft); border-color: var(--vt-warning-border); color: var(--vt-warning-text); }
.vt-filter-pill.active-danger  { background: var(--vt-danger-soft);  border-color: var(--vt-danger-border);  color: var(--vt-danger-text); }
.vt-filter-pill .vt-count { font-size: .7rem; padding: 0 .4rem; border-radius: 999px; background: rgba(255,255,255,.1); color: inherit; }
.vt-segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--vt-surface); border: 1px solid var(--vt-border); }
.vt-segmented .vt-segmented__item { border-color: transparent; background: transparent; }
.vt-segmented .vt-segmented__item.is-active { background: var(--vt-primary); }

.vt-compact-tabs, .vt-tab-surface { display: flex; flex-wrap: wrap; gap: .25rem; background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: 12px; padding: .25rem; }
.vt-compact-tabs [role="tab"], .vt-pill {
  padding: .4rem .85rem !important; border-radius: 9px !important; font-size: .8rem !important; font-weight: 600 !important;
  border: none !important; white-space: nowrap; color: var(--vt-text-sub); background: transparent;
  transition: background .12s, color .12s;
}
.vt-compact-tabs [role="tab"]:hover { background: rgba(255,255,255,.05); color: #fff; }
.vt-compact-tabs [role="tab"].active-tab, .vt-compact-tabs [role="tab"][aria-selected="true"] { background: var(--vt-primary) !important; color: #fff !important; }

.nav-tabs { --bs-nav-tabs-border-color: var(--vt-border); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-border-color: transparent transparent var(--vt-primary); --bs-nav-tabs-link-hover-border-color: transparent; }
.nav-tabs .nav-link { color: var(--vt-text-sub); border-width: 0 0 2px; font-weight: 600; font-size: .85rem; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--vt-primary); --bs-nav-pills-border-radius: 10px; }
.nav-link { color: var(--vt-text-sub); }
.nav-link:hover { color: #fff; }

.vt-pagination { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; }
.vt-page-link, .page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 .55rem;
  border-radius: 9px; border: 1px solid var(--vt-border); background: var(--vt-surface); color: var(--vt-text-sub);
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
.vt-page-link:hover, .page-link:hover { background: var(--vt-surface-2); color: #fff; border-color: var(--vt-border-strong); }
.vt-page-link.active, .page-item.active .page-link { background: var(--vt-primary); border-color: var(--vt-primary); color: #fff; }
.vt-page-link.disabled, .page-item.disabled .page-link { opacity: .4; pointer-events: none; }
.pagination { --bs-pagination-bg: transparent; gap: .3rem; }

/* ── Поиск / тулбар ───────────────────────────────────────── */
.vt-search-wrap {
  display: flex; align-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s; min-height: 42px; padding-right: .3rem;
}
.vt-search-wrap:focus-within { border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 3px rgba(220,47,47,.16); }
.vt-search-icon { padding: 0 .75rem; color: var(--vt-muted); font-size: .85rem; }
.vt-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: .88rem; color: var(--vt-text); padding: .55rem 0; min-width: 0; }
.vt-search-input::placeholder { color: var(--vt-muted); }
.vt-search-submit { min-width: 80px; }
.vt-toolbar { padding: .85rem 1rem; }
.vt-toolbar__row { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vt-toolbar__group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vt-toolbar__hint { font-size: .76rem; color: var(--vt-muted); }
.vt-toolbar-toggle.is-active { background: var(--vt-primary-soft) !important; color: var(--vt-primary-text) !important; border-color: var(--vt-primary-border) !important; }
.vt-filter-dot { font-size: .65rem; padding: .1rem .4rem; }
.vt-filter-form { display: grid; gap: .75rem; }
.vt-advanced-panel { display: grid; gap: .75rem; padding: .9rem 1rem; border-radius: var(--vt-r-lg); background: var(--vt-surface-soft); border: 1px solid var(--vt-border); }
.vt-advanced-panel.is-hidden { display: none; }
.vt-mode-strip { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vt-mode-label, .vt-mode-hint { font-size: .75rem; color: var(--vt-text-sub); }
.vt-mode-select { width: auto; min-width: 160px; font-size: .78rem; }
.vt-mode-keywords strong { color: #fff; }

/* ── Заголовки секций, пустые состояния ───────────────────── */
.vt-section-title { font-size: .98rem; font-weight: 700; color: #fff; margin: 0; }
.vt-section-subtitle { font-size: .8rem; color: var(--vt-muted); margin: .2rem 0 0; }
.vt-chart-card { padding: 1.15rem 1.25rem; }
.vt-chart-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .9rem; margin-bottom: 1rem; }
.vt-chart-card__title { margin: 0; font-size: .98rem; font-weight: 700; color: #fff; }
.vt-chart-card__subtitle { margin-top: .25rem; font-size: .78rem; color: var(--vt-muted); }
.vt-chart-card__aside { text-align: right; flex-shrink: 0; }
.vt-chart-metric { font-size: 2.1rem; line-height: 1; font-weight: 700; color: #fff; }
.vt-chart-metric--empty { color: var(--vt-muted); }
.vt-chart-metric-sub { margin-top: .3rem; font-size: .76rem; color: var(--vt-muted); }

.vt-empty {
  display: grid; justify-items: center; gap: .4rem; padding: 2rem 1rem; text-align: center;
  border-radius: var(--vt-r-xl); background: var(--vt-surface-soft); border: 1px dashed var(--vt-border-strong); color: var(--vt-text-sub);
}
.vt-empty-icon { font-size: 1.6rem; color: var(--vt-muted); }
.vt-empty-icon--muted { opacity: .5; }
.vt-empty-title { font-weight: 700; color: #fff; }
.vt-empty-subtitle { max-width: 34rem; font-size: .82rem; color: var(--vt-text-sub); }

.vt-onboarding-note, .vt-glass-note {
  display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: var(--vt-r-lg);
  border: 1px solid var(--vt-info-border); background: var(--vt-info-soft); color: var(--vt-text-sub);
}
.vt-onboarding-note__icon { background: rgba(96,165,250,.16); color: var(--vt-info-text); }
.vt-onboarding-note__title { font-size: .88rem; font-weight: 700; color: #fff; }
.vt-onboarding-note__text { margin-top: .15rem; font-size: .8rem; color: var(--vt-text-sub); }

/* Hero-блоки: оставляем компактную строку метрик, текст убираем (экономия экрана) */
.vt-page-hero { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.vt-page-hero__content { display: none; }
.vt-page-hero__meta { display: flex; gap: .6rem; flex-wrap: wrap; }
.vt-hero-chip {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .8rem; border-radius: 12px;
  background: var(--vt-surface); border: 1px solid var(--vt-border);
}
.vt-hero-chip__label { font-size: .7rem; color: var(--vt-muted); }
.vt-hero-chip__value { font-size: 1.05rem; line-height: 1.1; font-weight: 700; color: #fff; }
.vt-hero-chip__value--sm { font-size: .9rem; }
.vt-page-hero__eyebrow, .vt-page-hero__title, .vt-page-hero__subtitle { display: none; }

/* Списки */
.vt-recent-list-label { font-size: .72rem; color: var(--vt-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.vt-recent-link { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: inherit; transition: background .12s; }
.vt-recent-link + .vt-recent-link { margin-top: 2px; }
.vt-recent-link:hover { background: rgba(255,255,255,.05); color: inherit; }
.vt-recent-link__id { font-size: .83rem; font-weight: 600; color: #fff; }
.vt-recent-link__meta { font-size: .76rem; color: var(--vt-text-sub); }
.vt-mini-list { display: grid; gap: .5rem; }
.vt-mini-list__item { display: flex; justify-content: space-between; align-items: flex-start; gap: .85rem; padding: .75rem .9rem; border-radius: 12px; background: var(--vt-surface-soft); border: 1px solid var(--vt-border); }
.vt-mini-list__title { font-weight: 600; color: #fff; line-height: 1.35; }
.vt-mini-list__meta { margin-top: .2rem; font-size: .76rem; color: var(--vt-muted); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--vt-border); --bs-list-group-color: var(--vt-text); --bs-list-group-action-hover-bg: rgba(255,255,255,.04); --bs-list-group-action-hover-color: #fff; --bs-list-group-active-bg: var(--vt-primary); --bs-list-group-active-border-color: var(--vt-primary); }

/* Бейджи Bootstrap */
.badge { font-weight: 600; border-radius: 999px; padding: .3em .6em; }
.bg-light, .text-bg-light { background-color: rgba(255,255,255,.08) !important; color: var(--vt-text) !important; }
.bg-secondary, .text-bg-secondary { background-color: rgba(161,161,170,.18) !important; color: #e4e4e7 !important; }
.bg-primary, .text-bg-primary { background-color: var(--vt-primary) !important; color: #fff !important; }
.bg-success-subtle { background-color: var(--vt-success-soft) !important; }
.bg-danger-subtle { background-color: var(--vt-danger-soft) !important; }
.bg-warning-subtle { background-color: var(--vt-warning-soft) !important; }
.bg-info-subtle, .bg-primary-subtle { background-color: var(--vt-info-soft) !important; }
.text-success-emphasis { color: var(--vt-success-text) !important; }
.text-danger-emphasis { color: var(--vt-danger-text) !important; }
.text-warning-emphasis { color: var(--vt-warning-text) !important; }
.text-primary-emphasis, .text-info-emphasis { color: var(--vt-info-text) !important; }
.text-primary { color: #f87171 !important; }
.text-success { color: var(--vt-success-text) !important; }
.text-danger { color: var(--vt-danger-text) !important; }
.text-warning { color: var(--vt-warning-text) !important; }
.text-info { color: var(--vt-info-text) !important; }
.text-muted, .text-secondary, .text-body-secondary { color: var(--vt-text-sub) !important; }
.text-dark, .text-body, .text-black { color: var(--vt-text) !important; }
.bg-white, .bg-body { background-color: var(--vt-surface) !important; }
.bg-body-tertiary, .bg-body-secondary { background-color: var(--vt-surface-soft) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--vt-border) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.progress { --bs-progress-bg: rgba(255,255,255,.07); --bs-progress-bar-bg: var(--vt-primary); border-radius: 999px; }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--vt-border); --bs-accordion-btn-color: var(--vt-text); --bs-accordion-active-bg: rgba(255,255,255,.04); --bs-accordion-active-color: #fff; --bs-accordion-btn-focus-box-shadow: none; }
details > summary { cursor: pointer; }

/* ── Карточка звонка ──────────────────────────────────────── */
.vt-call-summary {
  position: sticky; top: var(--shell-gap); z-index: 20; padding: .9rem 1.1rem; margin-bottom: 1rem;
  background: rgba(22,22,27,.82); border: 1px solid var(--vt-border); border-radius: var(--vt-r-xl);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.vt-call-summary__title { font-weight: 700; font-size: 1.15rem; color: #fff; line-height: 1.2; }
.vt-meta-list { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--vt-text-sub); font-size: .8rem; }
.vt-meta-list span { display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 767.98px) { .vt-call-summary { position: static; } }
.vt-action-stack { display: grid; gap: .5rem; }
.vt-danger-zone { border-top: 1px solid var(--vt-border); margin-top: .75rem; padding-top: .75rem; }
.vt-prose-readable { font-size: .9rem; line-height: 1.75; color: var(--vt-text); }
.vt-detail-page { display: grid; gap: 1rem; }
.vt-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.vt-detail-main { min-width: 0; display: grid; gap: 1rem; }
.vt-detail-side { display: grid; gap: 1rem; position: sticky; top: var(--shell-gap); }
@media (max-width: 1199.98px) { .vt-detail-grid { grid-template-columns: 1fr; } .vt-detail-side { position: static; } }
.vt-summary-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.vt-summary-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: 999px; border: 1px solid var(--vt-border); background: var(--vt-surface); color: var(--vt-text-sub); font-size: .75rem; font-weight: 600; }
audio { width: 100%; height: 40px; border-radius: 999px; color-scheme: dark; }

/* ── Настройки ────────────────────────────────────────────── */
.s-card { padding: 1.4rem; margin-bottom: 1rem; }
.s-row { display: flex; align-items: flex-start; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--vt-border); }
.s-row:last-child { border-bottom: none; }
.s-row-lbl { flex: 1 1 0; min-width: 0; }
.s-row-ctl { flex: 0 0 340px; max-width: 340px; }
@media (max-width: 767px) { .s-row { flex-direction: column; gap: .5rem; } .s-row-ctl { flex: 1 1 auto; max-width: 100%; width: 100%; } }
.s-label { font-weight: 600; font-size: .875rem; color: #fff; }
.s-hint { font-size: .78rem; color: var(--vt-muted); margin-top: .15rem; line-height: 1.45; }
.s-section-hdr { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vt-border); }
.s-section-icon.icon-gray { background: var(--vt-surface-2); color: var(--vt-text-sub); }
.s-save-bar {
  position: sticky; bottom: var(--shell-gap); z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; margin-top: 1rem; border-radius: var(--vt-r-lg);
  background: rgba(27,27,33,.9); border: 1px solid var(--vt-border-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--vt-shadow-lg);
}
.s-save-tip { font-size: .78rem; color: var(--vt-text-sub); }
.s-radio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (max-width: 480px) { .s-radio-grid { grid-template-columns: 1fr; } }
.s-radio-card { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem; border-radius: var(--vt-r); border: 1px solid var(--vt-border); cursor: pointer; transition: border-color .12s, background .12s; }
.s-radio-card:hover { border-color: var(--vt-border-strong); background: var(--vt-surface); }
.s-radio-card:has(input:checked) { border-color: var(--vt-primary-border); background: var(--vt-primary-soft); }
.s-slider-val { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: .2rem .5rem; background: var(--vt-primary-soft); color: var(--vt-primary-text); border-radius: 8px; font-size: .82rem; font-weight: 700; }
.s-sub { border-left: 2px solid var(--vt-primary-border); padding-left: .875rem; margin-top: .75rem; }
.tech-row { display: flex; gap: 1rem; padding: .55rem .85rem; font-size: .82rem; border-bottom: 1px solid var(--vt-border); }
.tech-row:last-child { border-bottom: none; }
.tech-key { color: var(--vt-text-sub); flex: 0 0 180px; font-weight: 500; }
.tech-val { color: var(--vt-text); font-family: 'Menlo', 'Consolas', monospace; word-break: break-all; }
.monitor-wrap { max-width: 1200px; }

/* ── Логин ────────────────────────────────────────────────── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: rgba(22,22,27,.8); border: 1px solid var(--vt-border-strong); border-radius: 22px; padding: 2.2rem 2rem; width: 100%; max-width: 400px; box-shadow: var(--vt-shadow-lg); backdrop-filter: blur(24px); }
.login-subtitle { font-size: .85rem; color: var(--vt-text-sub); margin-bottom: 1.6rem; }

/* ── Скелетоны и анимации ─────────────────────────────────── */
.vt-skeleton, .vt-skeleton-line, .vt-skeleton-circle, .vt-skeleton-block, .skeleton {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: vtShimmer 1.4s linear infinite; border-radius: 8px;
}
.vt-skeleton-line { height: 12px; border-radius: 999px; }
.vt-skeleton-line.sm { height: 9px; } .vt-skeleton-line.lg { height: 16px; }
.vt-skeleton-line.w-25 { width: 25%; } .vt-skeleton-line.w-40 { width: 40%; } .vt-skeleton-line.w-50 { width: 50%; }
.vt-skeleton-line.w-60 { width: 60%; } .vt-skeleton-line.w-75 { width: 75%; } .vt-skeleton-line.w-100 { width: 100%; }
.vt-skeleton-circle { width: 40px; height: 40px; border-radius: 999px; }
.vt-skeleton-block { width: 100%; min-height: 120px; border-radius: var(--vt-r-xl); }
.vt-skeleton-stack { display: grid; gap: .55rem; }
.vt-skeleton-card { display: grid; gap: .75rem; padding: 1rem; border-radius: var(--vt-r-xl); border: 1px solid var(--vt-border); background: var(--vt-surface); }
.vt-skeleton-grid { display: grid; gap: .75rem; }
.vt-skeleton-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-skeleton-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-loading [data-skeleton-target] { color: transparent !important; }
.is-loading [data-skeleton-block] { position: relative; }
.is-loading [data-skeleton-block]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: vtShimmer 1.4s linear infinite;
}
@keyframes vtShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fade-in { animation: vtFadeIn .2s ease; }
@keyframes vtFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vt-page { animation: vtFadeIn .18s ease-out; }
.turbo-progress-bar { height: 2px; background: var(--vt-primary); }
.turbo-transition { opacity: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Tailwind-совместимость (call_detail и др.) ───────────── */
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}
.w-full{width:100%}.min-w-0{min-width:0}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}.space-y-8>*+*{margin-top:2rem}
.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:3rem;padding-bottom:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ms-auto{margin-left:auto}
.rounded{border-radius:.375rem}.rounded-lg{border-radius:.6rem}.rounded-xl{border-radius:.9rem}.rounded-full{border-radius:9999px}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.text-white{color:#fff}
.text-gray-400{color:#71717a}.text-gray-500{color:#a1a1aa}.text-gray-600{color:#a1a1aa}.text-gray-700{color:#d4d4d8}.text-gray-800{color:#e4e4e7}.text-gray-900{color:#f4f4f5}
.text-blue-500,.text-blue-600,.text-blue-700{color:#93c5fd}
.text-green-600,.text-green-700{color:#86efac}
.text-red-500,.text-red-600,.text-red-700{color:#fca5a5}
.text-yellow-600{color:#fcd34d}
.bg-white{background:var(--vt-surface)}.bg-gray-50{background:rgba(255,255,255,.025)}.bg-gray-100{background:rgba(255,255,255,.05)}
.bg-blue-50,.bg-blue-100{background:var(--vt-info-soft)}.bg-blue-600{background:var(--vt-primary)}
.bg-green-50,.bg-green-100{background:var(--vt-success-soft)}.bg-green-600{background:#16a34a}
.bg-yellow-50,.bg-yellow-100{background:var(--vt-warning-soft)}
.bg-red-50,.bg-red-100{background:var(--vt-danger-soft)}.bg-red-600{background:var(--vt-primary)}
.border{border:1px solid var(--vt-border)}.border-gray-200{border-color:var(--vt-border)}.border-blue-200{border-color:var(--vt-info-border)}.border-red-200{border-color:var(--vt-danger-border)}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.top-0{top:0}.z-50{z-index:50}
.shadow-xl{box-shadow:var(--vt-shadow-lg)}
.whitespace-pre-wrap{white-space:pre-wrap}.whitespace-nowrap{white-space:nowrap}
.break-all{word-break:break-all}.select-all{user-select:all}.uppercase{text-transform:uppercase}
.tracking-wider{letter-spacing:.05em}
.hidden{display:none !important}
.transition{transition:all .15s ease}
.animate-spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.w-7{width:1.75rem}.h-7{height:1.75rem}.w-8{width:2rem}.h-8{height:2rem}.w-20{width:5rem}.h-20{height:5rem}.h-64{height:16rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col-span-full{grid-column:1/-1}
.hover\:bg-gray-50:hover,.hover\:bg-gray-100:hover{background:rgba(255,255,255,.05)}
.hover\:text-red-700:hover{color:#fecaca}.hover\:text-blue-800:hover{color:#bfdbfe}
.hover\:bg-red-100:hover{background:var(--vt-danger-soft)}
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:flex{display:flex}
}
@media(min-width:992px){
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:sticky{position:sticky}
  .lg\:self-start{align-self:flex-start}
  .lg\:top-24{top:1rem}
}

/* ── Стекло ───────────────────────────────────────────────── */
/* Крупные блоки — матовое стекло: фон-обои просвечивают и размываются, как у сайдбара. */
:root { --vt-glass: rgba(30,30,35,.46); --vt-glass-border: rgba(255,255,255,.10); }
.vt-card, .vt-glass-card, .vt-panel-glass, .vt-panel, .s-card, .card,
.vt-stat-card, .kpi-grid .kpi-card, .vt-kpi-tile, .vt-attention-card, .vt-table-wrap,
.call-card, .vt-skeleton-card, .vt-segmented, .vt-tab-surface, .vt-compact-tabs, .vt-hero-chip, .btn-sidebar-toggle {
  background: var(--vt-glass);
  border-color: var(--vt-glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.card { --bs-card-bg: var(--vt-glass); --bs-card-border-color: var(--vt-glass-border); }
/* Вложенное стекло не размываем повторно — только лёгкая подложка. */
:is(.vt-card, .vt-glass-card, .vt-panel-glass, .vt-panel, .s-card, .card, .vt-table-wrap)
  :is(.vt-card, .vt-glass-card, .vt-panel-glass, .vt-panel, .s-card, .card, .vt-stat-card, .vt-kpi-tile,
      .vt-attention-card, .call-card, .vt-segmented, .vt-tab-surface, .vt-compact-tabs, .vt-hero-chip) {
  background: rgba(255,255,255,.035);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vt-call-summary { background: rgba(30,30,35,.62); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
.modal-content, .dropdown-menu, .popover {
  background: rgba(32,32,38,.86);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.dropdown-menu { --bs-dropdown-bg: transparent; }
.popover { --bs-popover-bg: rgba(32,32,38,.92); }

/* Длинные списки карточек на телефоне — без размытия, чтобы скролл не тормозил. */
@media (max-width: 991.98px) {
  .call-card { background: rgba(30,30,35,.72); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-sidebar, .card, .vt-card, .vt-table-wrap, .vt-stat-card, .vt-kpi-tile, .call-card { background: #1d1d22; backdrop-filter: none; -webkit-backdrop-filter: none; }
}