/* Onest — шрифт бренда NCSpeech (api.ncspeech.ai). Три сабсета, полная кириллица,
   казахские ә ғ қ ң ө ұ ү һ і в cyrillic/cyrillic-ext. Вариативный 400–800. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/onest-cyr-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/onest-cyr.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;   /* иначе нативные чекбоксы и select в тёмной теме светлые */
  --bg: #f5f6fa;             /* «бумага» бренда */
  --card: #fff;
  --text: #0e111a;           /* чернильный, не чёрный */
  --text-2: #3a3f4b;
  --muted: #5f6473;          /* 5.9:1 на карточке; фирменный #6b7080 давал 4.9 и падал на тинтах */
  --line: #e5e7ee;
  --accent: #e52e4b;         /* фирменный красный: кольца, метки, тинты */
  --accent-ink: #c81f3c;     /* он же как текст: 5.65:1 на белом, ярко-красный давал 4.35 */
  --btn-accent: #c81f3c;     /* заливка кнопки: белый на #e52e4b — 4.35:1, ниже порога */
  --btn-accent-hover: #b3122f;
  --accent-soft: #fdecef;
  --accent-2: #7c3aed;       /* только второй канал */
  --accent-soft-2: #f1e9fe;
  --warn: #9a6207;           /* уверенность ниже 0.5 */
  --err: #b3122f;            /* ошибка и разрушающее действие: глубже акцента */
  --err-soft: #fdecef;
  --good: #1f7a4d;
  --spot: #e7f5ee;           /* найденное бустинг-слово: «нашли, что просили» */
  --active: #c81f3c;
  --active-text: #fff;
  --ch0-bg: #f2f4fa;
  --ch1-bg: #f7f3fd;
  --ch0-on: #e4e9f7;
  --ch1-on: #ede3fb;
  --sp2-bg: #faf6ef;        /* третий говорящий: фонов каналов всего два, а слотов четыре */
  --sp3-bg: #eff6f6;
  --sp2-on: #f3e9d8;
  --sp3-on: #e0eeed;
  --spk0: #1e6d63;        /* имя говорящего: цвет несёт слово, точка на тинте не читалась */
  --spk1: #855420;
  --spk2: #8a3670;
  --spk3: #3b4a9c;
  --spk0-soft: #dcefe9;     /* подложка под словами говорящего: фон чанка при этом один */
  --spk1-soft: #faf0e2;
  --spk2-soft: #f4e0ee;
  --spk3-soft: #dfe4fb;
  --btn-bg: #fff;
  --btn-line: #c9cedb;      /* рамка второстепенной кнопки: --line тонет на своём же фоне */
  --shadow-1: 0 1px 2px rgba(14, 17, 26, .05), 0 2px 8px rgba(14, 17, 26, .04);
  --shadow-2: 0 8px 30px rgba(14, 17, 26, .10);
  --shadow-3: 0 24px 70px rgba(14, 17, 26, .18);
  /* фон страницы: мягкое красное свечение в правом верхнем углу поверх бумаги */
  --body-bg: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 60%), var(--bg);
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 18px;
  --r-pill: 999px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d13;
    --card: #14171f;
    --text: #f3f3f0;
    --text-2: #c6c8cf;
    --muted: #9aa0b0;
    --line: #242833;
    --accent: #ff5a73;
    --accent-ink: #ff8095;
    --btn-accent: #d3243f;
    --btn-accent-hover: #e52e4b;
    --accent-soft: #2a1a1e;
    --accent-2: #a78bfa;
    --accent-soft-2: #2b2347;
    --warn: #f5b547;
    --err: #ff7a8f;
    --err-soft: #2a1a1e;
    --good: #4fc98a;
    --spot: #12251a;
    --active: #e52e4b;
    --active-text: #fff;
    --ch0-bg: #141a26;
    --ch1-bg: #1a1730;
    --ch0-on: #1d2740;
    --ch1-on: #281f45;
    --sp2-bg: #221c12;
    --sp3-bg: #12211f;
    --sp2-on: #33291a;
    --sp3-on: #1a3230;
    --spk0: #7ed4c6;
    --spk1: #e0ab6b;
    --spk2: #e2a3cd;
    --spk3: #a8b3ee;
    --spk0-soft: #15302b;
    --spk1-soft: #332616;
    --spk2-soft: #32213a;
    --spk3-soft: #1d2547;
    --btn-bg: #1c212c;
    --btn-line: #5f6675;    /* 3.1:1 к карточке: на тёмной «Записать» была почти не видна */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 8px 30px rgba(0, 0, 0, .5);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, .6);
  }
}

/* выбор пользователя сильнее системной темы: селектор по атрибуту идёт после медиазапроса */
:root[data-theme="dark"] {
  --bg: #0b0d13;
  --card: #14171f;
  --text: #f3f3f0;
  --text-2: #c6c8cf;
  --muted: #9aa0b0;
  --line: #242833;
  --accent: #ff5a73;
  --accent-ink: #ff8095;
  --btn-accent: #d3243f;
  --btn-accent-hover: #e52e4b;
  --accent-soft: #2a1a1e;
  --accent-2: #a78bfa;
  --accent-soft-2: #2b2347;
  --warn: #f5b547;
  --err: #ff7a8f;
  --err-soft: #2a1a1e;
  --good: #4fc98a;
  --spot: #12251a;
  --active: #e52e4b;
  --active-text: #fff;
  --ch0-bg: #141a26;
  --ch1-bg: #1a1730;
    --ch0-on: #1d2740;
  --ch1-on: #281f45;
  --sp2-bg: #221c12;
  --sp3-bg: #12211f;
  --sp2-on: #33291a;
  --sp3-on: #1a3230;
  --spk0: #7ed4c6;
  --spk1: #e0ab6b;
  --spk2: #e2a3cd;
  --spk3: #a8b3ee;
  --spk0-soft: #15302b;
  --spk1-soft: #332616;
  --spk2-soft: #32213a;
  --spk3-soft: #1d2547;
  --btn-bg: #1c212c;
  --btn-line: #5f6675;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, .5);
  --shadow-3: 0 24px 70px rgba(0, 0, 0, .6);
}
:root[data-theme="light"] {
  --bg: #f5f6fa;
  --card: #fff;
  --text: #0e111a;
  --text-2: #3a3f4b;
  --muted: #5f6473;
  --line: #e5e7ee;
  --accent: #e52e4b;
  --accent-ink: #c81f3c;
  --btn-accent: #c81f3c;
  --btn-accent-hover: #b3122f;
  --accent-soft: #fdecef;
  --accent-2: #7c3aed;
  --accent-soft-2: #f1e9fe;
  --warn: #9a6207;
  --err: #b3122f;
  --err-soft: #fdecef;
  --good: #1f7a4d;
  --spot: #e7f5ee;
  --active: #c81f3c;
  --active-text: #fff;
  --ch0-bg: #f2f4fa;
  --ch1-bg: #f7f3fd;
  --ch0-on: #e4e9f7;
  --ch1-on: #ede3fb;
  --sp2-bg: #faf6ef;        /* третий говорящий: фонов каналов всего два, а слотов четыре */
  --sp3-bg: #eff6f6;
  --sp2-on: #f3e9d8;
  --sp3-on: #e0eeed;
  --spk0: #1e6d63;        /* имя говорящего: цвет несёт слово, точка на тинте не читалась */
  --spk1: #855420;
  --spk2: #8a3670;
  --spk3: #3b4a9c;
  --spk0-soft: #dcefe9;
  --spk1-soft: #faf0e2;
  --spk2-soft: #f4e0ee;
  --spk3-soft: #dfe4fb;
  --btn-bg: #fff;
  --btn-line: #c9cedb;
  --shadow-1: 0 1px 2px rgba(14, 17, 26, .05), 0 2px 8px rgba(14, 17, 26, .04);
  --shadow-2: 0 8px 30px rgba(14, 17, 26, .10);
  --shadow-3: 0 24px 70px rgba(14, 17, 26, .18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* иначе display у .auth-wrap/.spotted перебивает атрибут */
body {
  margin: 0;
  background: var(--body-bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.5 "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { letter-spacing: -.02em; }
button { font: inherit; cursor: pointer; border-radius: var(--r-pill); border: 1px solid var(--line); }
button, .tab, .hist { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
input, select, textarea { font: inherit; color: inherit; background: var(--card); }
input, select { border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 13px; }
/* фокус по-фирменному: цветная рамка плюс мягкое кольцо */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);
}
button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-feature-settings: "tnum"; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.error { color: var(--err); font-size: 13px; }

button.primary {
  background: var(--btn-accent); color: #fff; border-color: transparent;
  padding: 11px 22px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 28%, transparent);
}
button.primary:hover:not(:disabled) { background: var(--btn-accent-hover); }
button.primary:active:not(:disabled) { transform: scale(.98); }
button.primary:disabled { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }
button.ghost { background: var(--btn-bg); border-color: var(--btn-line); color: var(--text); padding: 10px 18px; font-weight: 600; }
button.ghost:hover { border-color: var(--text-2); }
button.ghost:active { transform: scale(.98); }
/* третичное — текстом, чтобы не спорить с основной кнопкой */
button.quiet { background: none; border-color: transparent; color: var(--muted); padding: 6px 10px; font-size: 13px; font-weight: 600; }
button.quiet:hover { color: var(--text); background: color-mix(in oklab, var(--text) 6%, transparent); }
button.small { padding: 6px 12px; font-size: 13px; }
button.rec { padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--btn-bg); border-color: var(--btn-line); font-weight: 600; }
button.rec:hover:not(.on) { border-color: var(--text-2); }
button.rec.on { background: var(--err); color: #fff; border-color: transparent; }
button.link {
  background: none; border: none; padding: 0; font-size: inherit; font-weight: 600;
  color: var(--accent-ink); text-decoration: underline; cursor: pointer;
}

.logo { display: block; flex: none; }

/* --- авторизация --- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card {
  width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px 28px; box-shadow: var(--shadow-3);
}
.auth-card .logo { margin: 0 auto 2px; }
.auth-card h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; text-align: center; }
.auth-card p { margin: -4px 0 12px; font-size: 15px; text-align: center; }
.auth-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.auth-card .row { margin-top: 6px; }
.auth-card .row button { flex: 1; }
.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 0;
  color: var(--muted); font-size: 12px; font-weight: 700; text-transform: lowercase;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-switch { margin: 2px 0 0 !important; font-size: 13px !important; font-weight: 600; }
#auth-pending p { margin: 0 0 12px; font-size: 15px; font-weight: 500; color: var(--text-2); text-align: center; }
button.google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 8px; padding: 11px 18px; font-weight: 700;
  background: var(--card); border: 1px solid var(--btn-line); color: var(--text);
}
button.google:hover { border-color: var(--text-2); }
button.google:active { transform: scale(.98); }
button.google svg { width: 18px; height: 18px; flex: none; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}

header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: color-mix(in oklab, var(--card) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
header h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
main { flex: 1; min-width: 0; max-width: 1400px; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }

/* --- кабинет: сайдбар с историей + рабочая область --- */
.layout { display: flex; align-items: flex-start; }
#sidebar {
  width: 288px; flex: none; align-self: stretch;
  border-right: 1px solid var(--line); background: var(--card);
  display: flex; flex-direction: column;
  position: sticky; top: 57px; height: calc(100vh - 57px);
}
#sidebar.hidden { display: none; }
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.side-foot { padding: 10px 16px; border-top: 1px solid var(--line); }
.history { flex: 1; overflow-y: auto; padding: 2px 8px 8px; scrollbar-width: thin; }
.hist {
  padding: 10px 12px; border-radius: var(--r-2); cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
}
.hist:hover { background: var(--bg); }
.hist.on { background: var(--accent-soft); }
.hist-top { display: flex; align-items: baseline; gap: 6px; }
.hist-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta { font-size: 11px; color: var(--muted); }
.hist-preview { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hist-del { border: none; background: none; color: var(--muted); padding: 2px; line-height: 1; display: inline-flex; }
.hist-del:hover { color: var(--err); }
.hist-del .ic { width: 13px; height: 13px; }
.history-empty { padding: 16px 12px; color: var(--muted); font-size: 13px; }

/* --- меню пользователя --- */
.user { position: relative; }
#user-btn { display: inline-flex; align-items: center; gap: 4px; }
#user-btn .chev { width: 14px; height: 14px; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--shadow-2); overflow: hidden; padding: 6px;
}
.menu-head { padding: 8px 11px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 11px; font-size: 14px; font-weight: 600; color: var(--text); border-radius: var(--r-1);
}
.menu-item:hover { background: var(--bg); }

dialog {
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card);
  color: var(--text); padding: 24px; box-shadow: var(--shadow-3);
}
dialog::backdrop { background: rgba(14, 17, 26, .45); backdrop-filter: blur(2px); }
dialog h3 { margin: 0 0 12px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 12px; }

.res-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.res-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

/* --- бейджи-пилюли --- */
.pill { font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.pill.bad { color: var(--err); }
.pill.bad::before { background: var(--err); }
.pill.unknown { color: var(--muted); }
.pill.unknown::before { background: var(--muted); }

/* --- источник --- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1.5px dashed var(--line); border-radius: var(--r-3);
  padding: 30px 20px 26px;
  transition: border-color .15s, background-color .15s;
}
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dz-icon { width: 30px; height: 30px; color: var(--muted); }
.dz-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
#source-info { margin-top: 8px; }

/* дополнительные настройки скрыты: их будет больше, а обычный путь — просто нажать «Расшифровать» */
.more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.more > summary {
  display: flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--text-2);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { color: var(--text); }
.more .chev { width: 14px; height: 14px; color: var(--muted); transform: rotate(-90deg);
  transition: transform .15s; flex: none; }
.more[open] .chev { transform: none; }
.more #more-sum { font-weight: 400; }
/* внутри панели первый блок своей черты не рисует: её уже нарисовала сама панель */
.more > .boost { margin-top: var(--s-3); padding-top: 0; border-top: none; }
.boost { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.boost-label { font-size: 13px; font-weight: 700; color: var(--text-2); display: block; margin-bottom: 8px; }
.boost .row input:first-child { flex: 1; min-width: 200px; }
.weight { width: 82px; }
.hint { display: inline-flex; color: var(--muted); cursor: help; vertical-align: -3px; }
.hint .ic { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: flex; align-items: center; gap: 6px;
  background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent-ink);
  border-radius: var(--r-pill); padding: 5px 9px 5px 12px; font-size: 13px; font-weight: 700;
}
.chip button { border: none; background: none; color: inherit; padding: 0 2px; line-height: 1; display: inline-flex; }
.chip button .ic { width: 12px; height: 12px; }
.run-row { margin-top: 18px; }

/* ужатая форма под результатом: та же карточка, меньше воздуха и без крупной сцены */
#input-card.compact { padding: var(--s-3) var(--s-4); }
#input-card.compact .dropzone { flex-direction: row; padding: 10px 14px; gap: 12px; border-style: solid; }
#input-card.compact .dz-icon,
#input-card.compact .dropzone [data-i18n="in.drop"] { display: none; }
#input-card.compact .boost { margin-top: var(--s-3); padding-top: var(--s-3); }
#input-card.compact .opt { margin-top: var(--s-3); padding-top: var(--s-3); }
#input-card.compact .run-row { margin-top: var(--s-3); }
#input-card.compact #pick, #input-card.compact #rec { padding: 8px 14px; }

/* состояние после запуска: ошибка или пустой результат — это не строка статуса */
.notice {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg);
}
.notice.bad { border-color: color-mix(in oklab, var(--err) 35%, transparent); background: var(--err-soft); }
.notice b { font-weight: 700; }
.notice .why { color: var(--muted); font-size: 13px; }

/* ключ к цветовому коду: без него канал и уверенность — тайное знание */
/* каналы и их говорящие — столбцами: восемь подписей в строку не помещались */
.legend {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-3); font-size: 13px; color: var(--muted);
}
.legend-cols { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.legend-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.legend-marks { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: var(--r-1); display: inline-block; }
.legend .low { color: var(--warn); text-decoration: underline dotted; }
.legend .mid { text-decoration: underline dotted var(--muted); color: var(--text); }
.legend .ch-name { padding: 0 2px; font-size: 13px; color: var(--text); text-decoration: underline dotted var(--muted); }

.progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 12px; }
/* масштаб, а не ширина: анимация ширины идёт через раскладку и дёргается на длинной отправке */
.progress i {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform .1s linear;
}
/* отправка закончилась, ждём ASR — бегунок вместо процентов */
.progress.wait i { transform: scaleX(.35); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { translate: -35%; } to { translate: 100%; } }
.status-line { min-height: 1.4em; margin-top: var(--s-2); }

/* --- плеер --- */
.player { display: flex; align-items: center; gap: 12px; }
.play {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-accent); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 28%, transparent);
}
.play:active { transform: scale(.96); }
#wave { flex: 1 1 0; min-width: 0; height: 72px; cursor: pointer; }
.rate { padding: 6px 8px; }
#no-audio { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; padding: 10px 0; }

.toolbar {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  margin: var(--s-4) 0; padding: var(--s-2) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.check { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.spotted { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.spotted .chip { background: var(--spot); color: var(--good); padding: 5px 12px; }

/* --- сегменты --- */
.segments { display: flex; flex-direction: column; gap: 6px; }
/* Верхний уровень группировки различается фоном по всей ширине: на стерео это канал,
   на моно — сам говорящий. Второй уровень (говорящий внутри канала) — имя в жёлобе, а не
   вторая заливка: тонировка поверх тонировки убивает контраст охры и зелёного бустинга. */
.block { padding: 10px 14px; border-radius: var(--r-2); background: var(--ch0-bg); }
.block.ch1 { background: var(--ch1-bg); }
/* на моно плашка не красится в цвет говорящего: цвет человека несёт подложка под словами,
   иначе на одного говорящего приходилось бы два разных цвета */
/* кусок VAD, внутри которого говорящие сменились без паузы: фон не присваиваем никому */
.block.mixed { background: var(--bg); border: 1px solid var(--line); }
.line {
  display: grid; grid-template-columns: 64px 1fr; gap: 10px;
  padding: 3px 8px; margin: 0 -8px; border-radius: var(--r-1);
}
/* колонка говорящего заводится на всю расшифровку, а не поблочно: иначе строки разных
   каналов начинаются с разного отступа и текст скачет по горизонтали */
.segments.with-spk .line { grid-template-columns: 64px 84px 1fr; }
/* играющая реплика — тот же цвет плотнее; полоска сбоку спорила бы с фоном */
.line.playing { background: var(--ch0-on); }
.ch1 .line.playing { background: var(--ch1-on); }
.mixed .line.playing { background: var(--ch0-bg); }
/* имя говорящего: цветом отличается сам текст — точка на тонированной плашке не читалась.
   Длинное имя обрезается, чтобы колонка не двигала текст реплики */
.seg-spk {
  font-size: 11px; font-weight: 700; padding-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seg-spk.sp0, .ch-name.sp0 { color: var(--spk0); }
.seg-spk.sp1, .ch-name.sp1 { color: var(--spk1); }
.seg-spk.sp2, .ch-name.sp2 { color: var(--spk2); }
.seg-spk.sp3, .ch-name.sp3 { color: var(--spk3); }
/* слова говорящего лежат на своей подложке внутри плашки чанка: фон чанка один, а кто
   говорит — видно по подложке. clone: у переносов сохраняются поля и скругление */
.spk-fill {
  display: inline-block; max-width: 100%;
  border-radius: var(--r-1); padding: 2px 8px; margin: -2px -8px;
}
.spk-fill.sp0 { background: var(--spk0-soft); }
.spk-fill.sp1 { background: var(--spk1-soft); }
.spk-fill.sp2 { background: var(--spk2-soft); }
.spk-fill.sp3 { background: var(--spk3-soft); }
.seg-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* таймкод не красим брендовым: стена красных чисел спорит с кнопками */
.seg-time { font-size: 12px; color: var(--muted); cursor: pointer; font-family: ui-monospace, Consolas, monospace; font-feature-settings: "tnum"; }
.seg-time:hover { color: var(--accent-ink); }
.seg-lang { font-size: 10px; color: var(--muted); text-transform: lowercase; }
/* имя канала может быть переименовано во что угодно — обрезаем, чтобы не двигать текст */
.seg-ch { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-text { font-size: 16px; line-height: 1.55; }

.w { cursor: pointer; border-radius: 4px; padding: 1px; }
.w:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.w.spot { background: var(--spot); font-weight: 700; }
/* говорящий неизвестен: слово лежит не на чьей-то поверхности, а на ничьей */
.w.nospk { background: var(--card); border: 1px solid var(--line); padding: 0 2px; }
.conf .w[data-conf="low"] { color: var(--warn); text-decoration: underline dotted; }
.conf .w[data-conf="mid"] { text-decoration: underline dotted var(--muted); }
.w.on {
  background: var(--active); color: var(--active-text); font-weight: 700;
  box-shadow: 0 0 0 2px var(--active);
}

.empty {
  padding: var(--s-5) var(--s-4); text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.empty b { color: var(--text); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.empty .why { max-width: 62ch; font-size: 14px; }

/* --- вкладки: сегментированный переключатель, как у бренда --- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tabs.services {
  background: color-mix(in oklab, var(--card) 70%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px;
  backdrop-filter: blur(8px);
}
.tab {
  background: none; border: none; border-radius: var(--r-pill); padding: 9px 16px;
  font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: -.01em;
}
.tab:hover:not(:disabled):not(.on) { color: var(--text); }
.tab.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-1); }
.tab:disabled { opacity: .45; cursor: default; }
.tabs.sub { margin-top: 16px; background: none; border: none; padding: 0; }
.tabs.sub .tab { font-size: 13px; padding: 6px 12px; }

.tab-panel h3 { font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin: var(--s-5) 0 var(--s-3); }
.tab-panel p { margin: 6px 0; }
.tab-panel p.muted.small { max-width: 62ch; }
.head-row { margin-bottom: 12px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 92%; background: var(--bg); padding: 2px 6px; border-radius: var(--r-1); }
.code {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.55;
  font-family: ui-monospace, Consolas, monospace; margin: 10px 0;
}
.fields { border-collapse: collapse; font-size: 13px; }
.fields td { border-top: 1px solid var(--line); padding: 8px 12px 8px 0; vertical-align: top; }
.fields td:first-child { white-space: nowrap; }

/* --- ключи --- */
.keys { display: flex; flex-direction: column; }
.keys + .set-row { margin-top: var(--s-3); }
.key-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; }
.key-row .name { font-weight: 700; }
.fresh {
  background: var(--accent-soft); border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4); margin: var(--s-3) 0;
}
.key { font-size: 13px; word-break: break-all; }

/* --- использование --- */
/* заголовок секции со счётчиком и контролом справа. h3 несёт свои отступы, поэтому
   гасим нижний margin и равняем по базовой линии: иначе счётчик встаёт надстрочным индексом */
.sect-head { align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.sect-head h3 { margin-bottom: 0; }
.sect-head .tts-opt { align-self: center; }
.count { font-size: 13px; font-weight: 700; color: var(--muted); font-feature-settings: "tnum"; }

/* справочник API: адрес эндпоинта строкой, параметры — имя, тип, обязательность,
   описание под ними. Двухколоночная таблица не тянет тип и обязательность разом */
.endpoints { display: flex; flex-direction: column; gap: 6px; margin: var(--s-3) 0 var(--s-4); }
.endpoint {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 9px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
}
.endpoint b { font-weight: 700; color: var(--accent-ink); letter-spacing: .04em; }
.endpoint .what { font-family: inherit; color: var(--muted); }
.params { display: flex; flex-direction: column; }
.param { padding: 11px 0; border-top: 1px solid var(--line); }
.param:first-child { border-top: 0; }
.param-head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.param-head code { background: none; padding: 0; font-size: 13px; font-weight: 700; }
.param .ty { font-size: 11px; font-weight: 600; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace; }
.param .req { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink); }
.param p { margin: 3px 0 0; max-width: 68ch; font-size: 13px; color: var(--muted); }

/* тарифы карточками: перейти нельзя, поэтому вместо кнопки — отметка своего */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.plan-card { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); }
.plan-card.on { border-color: var(--accent); }
.plan-head { display: flex; align-items: center; gap: var(--s-3); }
.plan-head b { font-size: 15px; font-weight: 800; }
.plan-state {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 2px 10px; white-space: nowrap;
}
.plan-card.on .plan-state { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.plan-why { margin: 6px 0 var(--s-3); }
.plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.plan-feats li { display: flex; align-items: center; gap: var(--s-2); }
.plan-feats .ic { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* шапка расхода: сколько потрачено из пакета и какой это пакет */
.usage-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.pane { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.pane-head { display: flex; align-items: baseline; gap: var(--s-3); font-size: 13px; color: var(--muted); font-weight: 600; }
.pane-head b { color: var(--text); font-feature-settings: "tnum"; }
.pane .quota { margin: 10px 0 8px; }

/* полоса метрик: подпись, число и тихая единица — как в референсе, с разделителями */
.tiles { display: flex; flex-wrap: wrap; margin: 0 0 var(--s-4); }
.tile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px;
  padding: 0 var(--s-5); border-left: 1px solid var(--line); }
.tile:first-child { padding-left: 0; border-left: 0; }
.tile span { font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-feature-settings: "tnum"; }
.tile em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.tile small { flex-basis: 100%; color: var(--muted); font-size: 12px; font-weight: 600; }
/* в узком экране полоса переносится, и вертикальные разделители повисают
   у каждой второй плашки — раскладываем сеткой без них */
@media (max-width: 620px) {
  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
  .tile { padding: 0; border-left: 0; }
}

.quota { height: 8px; border-radius: var(--r-pill); background: var(--line); margin: 14px 0 6px; overflow: hidden; }
.quota i { display: block; height: 100%; background: var(--accent); width: 0; }
.opt {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: 14px; cursor: pointer;
}
.opt input { margin: 3px 0 0; align-self: start; }
.opt > span { display: flex; flex-direction: column; gap: 2px; }
.opt b { font-weight: 700; }
.opt .small { line-height: 1.45; max-width: 62ch; }
/* вложенный пункт постпроцессинга: своей черты сверху не заводит, чтобы группа читалась целой */
.opt.sub { margin-top: var(--s-2); padding-top: 0; border-top: none; padding-left: var(--s-5); }
.opt .row-hint { flex-direction: row; align-items: center; gap: 6px; }

/* переключатель языка: три коротких кода, активный залит акцентом */
.langs { display: flex; gap: 2px; }
.lang { padding: 6px 12px; }
.lang.on { color: var(--accent-ink); background: var(--accent-soft); }

/* --- иконки: один набор, одна толщина штриха --- */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round; display: block; }
button.ico { display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
.services .tab { display: inline-flex; align-items: center; gap: 7px; }
.services .tab.ico { gap: 0; }
#settings-btn.on, #quota-btn.on { color: var(--accent-ink); background: var(--accent-soft); }
.quota-mini { font-feature-settings: "tnum"; white-space: nowrap; }

/* --- настройки --- */
.set-row { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.set-row > span:first-child { min-width: 96px; color: var(--muted); font-size: 13px; font-weight: 600; }
.themes { display: flex; gap: 2px; }
.themes .on { color: var(--accent-ink); background: var(--accent-soft); }
.set-note { max-width: 62ch; margin: 2px 0 var(--s-3); }
#set-email { font-size: 14px; font-weight: 600; }

/* --- расход: фильтры одной строкой над всем, что они ограничивают --- */
.filters { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-3) 0; }
.filters select, .filters input[type="date"] { padding: 8px 10px; font-size: 13px; }
#tab-usage .filters { margin-top: 0; }

.chart { margin: var(--s-4) 0 var(--s-2); }
.chart figcaption { margin-bottom: var(--s-2); }
.chart .plot { position: relative; }
#u-svg { width: 100%; display: block; transition: opacity .15s linear; }
#u-svg .grid { stroke: var(--line); stroke-width: 1; }
#u-svg .tick { fill: var(--muted); font-size: 11px; font-feature-settings: "tnum"; }
#u-svg .area { fill: var(--accent); fill-opacity: .1; stroke: none; }
#u-svg .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#u-svg .hair { stroke: var(--muted); stroke-width: 1; }
#u-svg .dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
#u-svg .empty-label { fill: var(--muted); font-size: 13px; }
.tip {
  position: absolute; top: 0; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 8px 10px; font-size: 13px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
}
#u-table table { width: 100%; margin-top: var(--s-2); }
#u-table th { text-align: left; font-weight: 700; font-size: 13px; padding: 6px 0; color: var(--muted); }

/* --- синтез --- */
/* живой бейдж: пока идёт поток, видно что синтез продолжается прямо во время звучания */
.badge-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700;
  background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent-ink);
}
.dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: no-preference) {
  .dot-pulse { animation: pulse 1.4s infinite; }
}
.tts-sub { margin: 0 0 var(--s-4); }
.voice-form { margin-bottom: var(--s-2); }
.voice-form input[type="text"], #voice-name { flex: 0 1 360px; min-width: 180px; }
#voice-test, #tts-result { align-items: center; }
#voice-audio { height: 40px; flex: 1 1 240px; max-width: 360px; }
textarea {
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 13px 15px; width: 100%; resize: vertical; min-height: 104px; line-height: 1.5;
}
.tts-tags { margin-top: var(--s-2); }
.tts-opts { margin-top: var(--s-4); gap: var(--s-3) var(--s-4); }
.tts-opt { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; font-weight: 600; color: var(--muted); }
.run-row-tts { margin-top: var(--s-4); }
#tts-result { margin-top: var(--s-3); }
#tts-audio { height: 40px; flex: 1 1 240px; max-width: 360px; }

/* --- узкие экраны --- */
/* обязательно ПОСЛЕ базового правила: специфичность равна, побеждает более позднее,
   иначе fixed не применяется и сайдбар выдавливает рабочую колонку до 110px */
@media (max-width: 860px) {
  #sidebar { position: fixed; left: 0; z-index: 25; box-shadow: var(--shadow-2); }
}
@media (max-width: 620px) {
  header { padding: 10px 12px; gap: var(--s-2); }
  header h1 { font-size: 15px; }
  /* модель бэкенда — служебная деталь, на узком экране она только ломает шапку */
  #asr-status { font-size: 0; gap: 0; }
  /* остаток квоты есть в меню пользователя, в шапке он выдавливал почту за экран */
  #quota-btn { display: none; }
  /* без min-width:0 флекс не даёт троеточию сработать и строка вылезает за 390px */
  .user, #user-btn { min-width: 0; }
  /* по умолчанию флекс-элемент не уже своего содержимого: без min-width:0 на всей цепочке
     почта не сжимается и уезжает за экран, а обрезка без троеточия выглядит как поломка */
  .user { flex: 0 1 auto; }
  #user-btn { max-width: 100%; white-space: nowrap; padding-right: 6px; }
  #user-btn span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #user-btn .chev { flex: none; }
  #user-btn span { overflow: hidden; text-overflow: ellipsis; }
  .brand { min-width: 0; }

  /* вкладки прокручиваются вбок: перенос отправлял «Синтез» в отдельную строку */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    gap: 3px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 8px 11px; font-size: 13px; }
  .services .tab { gap: 5px; }

  .card { padding: var(--s-4); }
  main { padding: 12px; }

  /* тач: «перетащите сюда» не имеет смысла */
  .dropzone { padding: 20px 14px 18px; }
  .dropzone [data-i18n="in.drop"] { display: none; }

  /* таймкод над репликой: колонка в 92px съедала треть строки */
  .seg { grid-template-columns: 1fr; gap: var(--s-1); padding: 12px 14px; }
  .seg-meta { flex-direction: row; align-items: baseline; gap: var(--s-2); }

  .key-row { flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
  .key-row .name { width: 100%; }
  .tiles { gap: var(--s-4); }
  .tile span { font-size: 24px; }
  .player { flex-wrap: wrap; }
  #wave { flex: 1 1 100%; min-width: 0; order: 3; }
}