/* ═══════════════════════════════════════════════════════════
   фидоня.дети — Админка: оболочка, навигация, метрики, тепловая карта
   ═══════════════════════════════════════════════════════════ */

/* ── Оболочка: плавающие панели ──────────────────────────
   Меню и содержимое — отдельные панели с зазором между ними
   и скруглением по всем углам. Интерфейс читается как набор
   поверхностей, а не как страница с врезками. */
.app-shell {
  position: relative; z-index: 10;
  min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
}
.app-side { display: none; }

@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: 262px 1fr;
    gap: var(--s-3);
    padding: var(--s-3);
    height: 100dvh;
    overflow: hidden;
  }
  .app-side {
    display: flex; flex-direction: column;
    padding: var(--s-3);
    background: var(--panel);
    border: 1px solid var(--border-1);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    overflow-y: auto;
  }
  .app-main {
    min-width: 0; display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border-1);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-2);
    overflow: hidden;
  }
  .app-bar { border-radius: var(--r-4) var(--r-4) 0 0; }
  .app-body { overflow-y: auto; flex: 1; padding: var(--s-5); padding-bottom: var(--s-6); }
}

.app-main { flex: 1; min-width: 0; }
.app-bar {
  position: sticky; top: 0; z-index: 40;
  padding: var(--s-3) var(--s-4);
  padding-top: max(var(--s-3), env(safe-area-inset-top));
}
.app-body {
  min-width: 0;
  padding: var(--s-4);
  /* Разделы появляются с лёгким сдвигом — интерфейс не «прыгает»,
     а собирается. Один раз при загрузке, без повторов на подменах. */
  animation: body-in 0.4s var(--ease-out) both;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--s-4);
  max-width: 1120px; width: 100%; margin: 0 auto;
}

/* ── Сетки ───────────────────────────────────────────────── */
.grid-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 900px) { .grid-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Пункты меню ─────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px 12px; border-radius: var(--r-1);
  font-size: 0.875rem; font-weight: 520;
  color: var(--text-2); text-decoration: none;
  border: 1px solid transparent; background: transparent;
  cursor: pointer; text-align: left;
  position: relative; overflow: clip;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-item[data-active="true"] {
  background: var(--surface-2); color: var(--text-1);
  font-weight: 600; box-shadow: var(--shadow-1);
}
/* Полоска-указатель у выбранного пункта */
.nav-item[data-active="true"]::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--surface-1); color: var(--text-1); }
}

/* ── Нижняя панель на телефоне ───────────────────────────── */
.tabbar {
  position: fixed; left: var(--s-2); right: var(--s-2);
  bottom: max(var(--s-2), env(safe-area-inset-bottom));
  z-index: 60;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px; gap: 2px;
  border-radius: var(--r-3);
  background: var(--glass-solid);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: var(--r-1);
  font-size: 0.62rem; font-weight: 540;
  color: var(--text-3); text-decoration: none;
  transition: background var(--fast), color var(--fast);
}
.tabbar a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tabbar a[data-active="true"] { background: var(--surface-2); color: var(--accent); }
.tabbar svg.lucide { width: 20px; height: 20px; }

/* ── Карточки показателей ────────────────────────────────── */
.metric {
  padding: var(--s-4);
  border-radius: var(--r-2);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: border-color var(--base) var(--ease), transform var(--base) var(--spring);
}
.metric-top { display: flex; align-items: center; gap: var(--s-2); }
.metric-label { font-size: 0.72rem; color: var(--text-3); font-weight: 520; }
.metric-value {
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.metric-hint { font-size: 0.7rem; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .metric:hover { border-color: var(--border-2); transform: translateY(-2px); }
}

/* Тепловая карта на телефоне прокручивается вбок */
.heat-scroll { overflow-x: auto; margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4); scrollbar-width: none; }
.heat-scroll::-webkit-scrollbar { display: none; }

/* ── Тепловая карта ──────────────────────────────────────── */
.heat { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.hm-cell { aspect-ratio: 1; border-radius: 4px; background: var(--surface-2); transition: filter 0.2s; }
.hm-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.hm-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.hm-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 74%, transparent); }
.hm-cell[data-level="4"] { background: linear-gradient(140deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px -2px var(--accent-2); }
@media (hover: hover) { .hm-cell:hover { filter: brightness(1.4); } }

/* ═══════════════════════════════════════════════════════════
   20. Админка как приложение
   ═══════════════════════════════════════════════════════════ */
/* ── Адреса и длинные значения ───────────────────────────── */
.addr-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.addr-value { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.35; overflow-wrap: anywhere; word-break: break-all; color: var(--text-1); }
.addr-label { font-size: 0.68rem; color: var(--text-3); }

/* ── Быстрые действия ────────────────────────────────────── */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; border-radius: var(--r-2); text-align: left;
  background: var(--surface-1); border: 1px solid var(--border-1);
  box-shadow: var(--shadow-1), var(--glow); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.12s var(--ease);
  color: inherit; text-decoration: none; position: relative; overflow: hidden;
}
.quick-btn:active { transform: scale(0.98); }
.quick-title { font-size: 0.82rem; font-weight: 650; line-height: 1.2; }
.quick-sub { font-size: 0.68rem; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .quick-btn:hover { background: var(--surface-2); color: var(--text-1); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
}

/* ── Предпросмотр анимаций в админке ─────────────────────── */
.fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 10px; min-height: 92px; border-radius: var(--r-2);
  background: var(--surface-1); border: 1px solid var(--border-1);
  box-shadow: var(--shadow-1), var(--glow); cursor: pointer; overflow: hidden;
  transition: border-color 0.2s, background 0.2s, transform 0.12s var(--ease);
}
.fx-card:active { transform: scale(0.98); }
.fx-card[data-active="true"] { border-color: var(--accent); box-shadow: var(--shadow-2), 0 0 0 1px var(--accent); }
.fx-sample { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.fx-name { font-size: 0.66rem; color: var(--text-3); text-align: center; }

/* ── Складные разделы админки ────────────────────────────── */


/* ── Компактнее на телефоне: меньше вертикали в админке ──── */
@media (max-width: 900px) {
  .app-body { gap: 12px; padding: 12px 12px calc(100px + env(safe-area-inset-bottom)); }
  .section { padding: 14px; }
  .section-title { font-size: 0.9rem; }
  .section-sub { font-size: 0.7rem; }
  .section-body { padding-top: 13px; }
  .field { gap: 5px; }
  .field > label { font-size: 0.72rem; }
  .grid-metrics { gap: 9px; }
  .metric { padding: 12px; }
  .metric-top { margin-bottom: 10px; }
  .metric-value { font-size: 1.25rem; }
  .quick { gap: 8px; }
  .quick-btn { padding: 11px; gap: 6px; }
  .quick-btn .link-ico { width: 30px; height: 30px; font-size: 15px; }
  .fx-card { min-height: 78px; padding: 12px 8px; }
}

/* ── Выбор смайлика ──────────────────────────────────────── */
.emoji-input { font-size: 20px; text-align: center; letter-spacing: 0.1em; }
.emoji-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-pick {
  width: 40px; height: 40px; border-radius: var(--r-1); font-size: 19px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border-1); color: var(--text-1);
  transition: background 0.2s, transform 0.12s var(--ease), border-color 0.2s;
}
.emoji-pick:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .emoji-pick:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--border-2)); }
}

/* ── Клонирование голоса ─────────────────────────────────── */
.voice-record { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 640px) {
  .voice-record .btn-x { flex: 1 1 140px; }
}

/* ── Диагностика движков ─────────────────────────────────── */
.diag { border-top: 1px solid var(--border-1); padding-top: 12px; margin-top: 4px; min-width: 0; max-width: 100%; }
.diag summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.8rem; font-weight: 650; color: var(--text-2); list-style: none;
}
.diag summary::-webkit-details-marker { display: none; }
.diag summary::after { content: "▾"; margin-left: 4px; color: var(--text-3); transition: transform 0.2s; }
.diag[open] summary::after { transform: rotate(180deg); }
.diag-refresh { margin-left: auto; padding: 6px 11px; font-size: 0.72rem; }
/* min-width: 0 обязателен на всей цепочке: у флекс-элементов
   по умолчанию min-width: auto, и длинная строка лога не сжимается,
   а распирает контейнеры наружу, наезжая на соседние блоки. */
.diag-body { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.diag-row {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-width: 0;
  padding: 7px 10px; border-radius: var(--r-1); background: var(--surface-1);
}
.diag-label { font-size: 0.72rem; color: var(--text-3); min-width: 130px; }
.diag-value { font-family: var(--font-mono); font-size: 0.72rem; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.diag-error { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-1); background: color-mix(in srgb, var(--live) 10%, transparent); border: 1px solid color-mix(in srgb, var(--live) 30%, transparent); }
.diag-pre { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; color: var(--text-1); max-height: 220px; overflow-y: auto; overflow-x: hidden; min-width: 0; max-width: 100%; }

/* Карточка движка: значок, название, отметка выбора */
.engine-ico {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 9px; font-size: 15px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}

/* ── Вход в панель ───────────────────────────────────────── */
.login-stage { position: relative; z-index: 10; min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.login-head { display: flex; align-items: center; gap: 13px; }
.login-avatar { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; flex: none; }
.login-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.login-sub { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-note { font-size: 0.72rem; color: var(--text-3); line-height: 1.5; }
.login-back { font-size: 0.75rem; color: var(--text-3); text-align: center; text-decoration: none; }
.login-error {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  border-radius: var(--r-1); font-size: 0.8rem; color: var(--live);
  background: color-mix(in srgb, var(--live) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--live) 30%, transparent);
}
  font-size: 0.76rem; color: var(--text-2); cursor: pointer;
  padding: 8px 0; list-style: none;
}

/* Фирменная кнопка Twitch */
.btn-twitch {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--r-1);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  background: #9146ff; color: #fff; border: 1px solid transparent;
  box-shadow: 0 10px 26px -12px #9146ff;
  transition: filter 0.2s, transform 0.12s var(--ease);
}
.btn-twitch:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .btn-twitch:hover { filter: brightness(1.08); }
}

/* ── Команды чата ────────────────────────────────────────── */
.cmd-hint { display: flex; flex-direction: column; gap: 6px; }
.cmd-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 0.74rem; }
.cmd-row code {
  font-family: var(--font-mono); font-size: 0.74rem;
  padding: 4px 9px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border-1); color: var(--accent);
}
.cmd-row span { color: var(--text-3); }
.voice-assign { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
@media (max-width: 640px) { .voice-assign { grid-template-columns: 1fr; } }

/* Заголовок раздела в шапке */
.app-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.app-crumb { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }

/* ── Доступы и журнал ────────────────────────────────────── */
.grant-form { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: var(--s-2); }
@media (max-width: 860px) { .grant-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grant-form { grid-template-columns: 1fr; } }

.person-face { width: 34px; height: 34px; border-radius: 11px; object-fit: cover; flex: none; }
.person-blank { display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); }

.feed { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; overflow-x: hidden; min-width: 0; contain: content; }
.feed-item {
  display: flex; gap: var(--s-3); align-items: baseline;
  padding: 7px 10px; border-radius: var(--r-1);
  font-size: 0.78rem; line-height: 1.4;
}
.feed-item:nth-child(odd) { background: var(--surface-1); }
.feed-time { font-size: 0.7rem; color: var(--text-3); flex: none; }
.feed-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; }
.feed-actor { font-weight: 620; }
.feed-action { color: var(--text-2); }
.feed-target { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); overflow-wrap: anywhere; }
.feed-detail { font-size: 0.7rem; color: var(--text-3); }

/* Разделитель «или» между способами входа */
.login-or { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font-size: 0.72rem; }
.login-or::before, .login-or::after { content: ""; height: 1px; flex: 1; background: var(--border-1); }

/* ── Движки: строки с тумблерами ─────────────────────────── */
.engine-line {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-height: 62px;
  transition: background var(--base) var(--ease);
}
.engine-line + .engine-line { border-top: 1px solid var(--border-1); }
.engine-line[data-state="on"] { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.engine-line[data-state="off"] { opacity: 0.62; }
.engine-line[data-state="loading"] { background: color-mix(in srgb, var(--amber) 8%, transparent); }
.engine-line[data-state="on"] .engine-ico { background: var(--accent); color: var(--accent-ink); }
.engine-state { display: block; margin-top: 5px; }
.engine-state .chip { font-size: 0.66rem; padding: 3px 8px; }

/* Крутилка ожидания */
.spinner {
  display: inline-block; width: 11px; height: 11px; flex: none;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-note {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-1);
  font-size: 0.76rem; line-height: 1.5; color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
}
.loading-note .spinner { margin-top: 4px; }

/* Заблокированный тумблер: видно, что переключать сейчас нельзя */
.switch:disabled { cursor: not-allowed; opacity: 0.55; }
.switch:disabled[data-on="true"] { opacity: 1; cursor: default; }

/* ── История озвучек ─────────────────────────────────────── */
.hist-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.hist-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); }
.hist-meta .chip { font-size: 0.64rem; padding: 2px 8px; }
.link-ico[data-source="twitch"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* ── Редактор голосов зрителей ───────────────────────────── */
.voice-assign {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: var(--s-3); align-items: end;
}
.voice-assign .field { min-width: 0; }
.voice-assign .field > span { font-size: 0.72rem; color: var(--text-3); }
@media (max-width: 640px) {
  .voice-assign { grid-template-columns: 1fr; }
  .voice-assign button { width: 100%; }
}

.voice-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-width: 0; flex-wrap: wrap;
}
.voice-row + .voice-row { border-top: 1px solid var(--border-1); }
.voice-who { min-width: 0; flex: 1 1 130px; }
.voice-edit { flex: 1 1 160px; min-width: 0; }
.voice-edit .input-x { padding: 7px 11px; font-size: 0.8rem; }
@media (max-width: 520px) {
  .voice-edit { flex: 1 1 100%; order: 3; }
  .voice-row .row-tail { margin-left: auto; }
}

/* ── Панель журнала ──────────────────────────────────────── */
.log-panel { padding: 0; overflow: clip; }
.log-toggle {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-4) var(--s-5);
  background: none; border: 0; cursor: pointer; color: inherit;
  text-align: left;
}
.log-chev { color: var(--text-3); transition: transform var(--base) var(--spring); flex: none; }
.log-chev.is-open { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .log-toggle:hover { background: var(--surface-1); }
}

.log-body { padding: 0 var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.log-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.log-count { width: auto; padding: 7px 11px; font-size: 0.76rem; }
.log-live { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-3); cursor: pointer; margin-left: auto; }
.log-live input { accent-color: var(--accent); }

.log-box {
  max-height: 380px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  min-width: 0; max-width: 100%; width: 100%;
  background: var(--surface-2); border: 1px solid var(--border-1);
  border-radius: var(--r-1); padding: 6px;
  scrollbar-width: thin;
  contain: content;
}
.log-box::-webkit-scrollbar { width: 8px; }
.log-box::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

.log-list { display: flex; flex-direction: column; gap: 1px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.log-line {
  display: flex; gap: var(--s-3); align-items: baseline;
  padding: 4px 8px; border-radius: 6px;
  font-size: 0.72rem; line-height: 1.5;
  min-width: 0; max-width: 100%;
}
.log-line:hover { background: var(--surface-1); }
.log-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); flex: none; }
.log-text {
  font-family: var(--font-mono); color: var(--text-2);
  min-width: 0; flex: 1;
  overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap;
}
.log-line[data-tone="error"] { background: color-mix(in srgb, var(--live) 10%, transparent); }
.log-line[data-tone="error"] .log-text { color: var(--live); }
.log-line[data-tone="ok"] .log-text { color: var(--mint); }
.log-line[data-tone="warn"] .log-text { color: var(--amber); }

.log-empty { font-size: 0.76rem; color: var(--text-3); padding: var(--s-4); text-align: center; }
.log-foot { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; color: var(--text-3); }
.log-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* Готовые фразы для проверки озвучки */
.quick-phrases { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-phrases .chip { cursor: pointer; }
.quick-phrases .chip:active { transform: scale(0.96); }

/* ── Сводка состояния озвучки ────────────────────────────── */




@media (max-width: 560px) {
}

/* Подсказка вместо содержимого, когда действие пока недоступно */
.hint-off {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-1);
  font-size: 0.8rem; color: var(--text-3);
  background: var(--surface-1); border: 1px dashed var(--border-2);
}

/* Тонкая настройка спрятана: нужна редко, а места занимает много */
.tune { border-top: 1px solid var(--border-1); padding-top: var(--s-3); min-width: 0; }
.tune summary {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-2);
  cursor: pointer; list-style: none; padding: 4px 0;
}
.tune summary::-webkit-details-marker { display: none; }
.tune summary::before { content: "▸"; color: var(--text-3); transition: transform var(--fast); }
.tune[open] summary::before { content: "▾"; }
.tune-body { padding-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

/* ── Живые замеры под названием модели ───────────────────── */
.engine-load { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: 3px; }
.load-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3);
  transition: color var(--base) var(--ease);
}
.load-item svg.lucide { width: 12px; height: 12px; opacity: 0.75; }
.load-item span { font-variant-numeric: tabular-nums; }
.engine-line[data-state="on"] .load-item { color: var(--text-2); }
.load-item[data-level="mid"] { color: var(--amber); }
.load-item[data-level="high"] { color: var(--live); }
.load-item[data-level="mid"] svg.lucide,
.load-item[data-level="high"] svg.lucide { opacity: 1; }

.tag-main {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 999px; font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}

/* Полоска нагрузки за последнюю минуту */
 }

/* Строка замеров держит высоту: без этого при появлении цифр
   строка подпрыгивает, и список дёргается на каждом обновлении. */
.engine-meta { display: block; min-height: 18px; margin-top: 3px; }

/* ── Секретная ссылка ────────────────────────────────────
   Ссылка содержит ключ, показывать её на стриме нельзя.
   Скрываем мягкой пеленой: размытие и лёгкое сжатие уходят
   одним движением, без мельтешения. */
.secret {
  position: relative; display: block; width: 100%;
  background: none; border: 0; padding: 3px 0; cursor: pointer;
  text-align: left; color: inherit; min-width: 0; border-radius: 8px;
}
.secret-text {
  display: block;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.4;
  overflow-wrap: anywhere; color: var(--text-1);
  filter: blur(6px); opacity: 0.4;
  transform: scale(0.99);
  user-select: none; pointer-events: none;
  transition:
    filter 0.5s var(--ease-out),
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.secret[data-shown="true"] .secret-text {
  filter: blur(0); opacity: 1; transform: none;
  user-select: text; pointer-events: auto;
}

/* Пелена поверх: гаснет вместе с раскрытием */
.secret-veil {
  position: absolute; inset: -3px -5px;
  border-radius: 8px; pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent-2) 10%, transparent));
  opacity: 1;
  transition: opacity 0.4s var(--ease-out);
}
.secret[data-shown="true"] .secret-veil { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .secret:hover .secret-veil { opacity: 0.75; }
}

/* Состояние держит ширину и высоту: текст меняется на каждом
   опросе, и без запаса строка дёргалась бы. */
.engine-state { display: block; min-height: 22px; margin-top: 5px; }
.engine-state .chip { min-height: 20px; }
.engine-line { min-height: 74px; }

/* Строка с секретом: значение и кнопка копирования */
.secret-row { display: flex; align-items: center; gap: var(--s-3); min-width: 0; flex: 1; }

/* Проигрыватель образца в строке голоса */
.voice-play { flex: 1 1 190px; min-width: 0; max-width: 260px; }
@media (max-width: 520px) { .voice-play { flex: 1 1 100%; max-width: none; order: 4; } }