/* ═══════════════════════════════════════════════════════════════════════
   Раздел озвучки. Отдельный экран со своим боковым меню внутри того же
   сайта. Все классы начинаются с vc- нарочно: в styles.css уже пять тысяч
   строк, и общие имена вроде .card или .tag там давно заняты — совпадение
   имени сломало бы либо перевод, либо озвучку, причём молча.
   Цвета не свои: берутся из переменных сайта, поэтому светлая и тёмная
   темы работают тут сами, без отдельного набора правил.
   ═══════════════════════════════════════════════════════════════════════ */

/* Каркас раздела — это тот же .app-shell, что и у переводчика (класс стоит
   в разметке). Оттуда приходит всё: position/inset, display:grid с двумя
   строками, отступы, и главное — масштаб transform: scale(var(--ui-scale)),
   которым сайт ужимается на мониторах уже 1760px. Раньше раздел рисовался
   в масштабе 1:1 поверх ужатого переводчика: шрифты крупнее, кнопка перехода
   на 16px левее, при переключении шапка «прыгала». Здесь остаётся только то,
   чего у каркаса переводчика нет: слой и непрозрачный фон. */
.vc-shell {
  z-index: 30;
  background: var(--bg);
  color: var(--text);
}
.vc-shell[hidden], .vc-shell.hidden { display: none !important; }

/* ── шапка раздела: повторяет шапку переводчика ───────────────────── */
/* Ни padding, ни gap, ни выравнивание тут не задаются: и .app-topbar, и
   `.app-shell .app-topbar .toprow` уже описаны в styles.css и теперь
   действуют на этот раздел напрямую. */
.vc-topbar { margin: 0; }
.vc-brand { border: none; background: none; cursor: pointer; padding: 0; min-width: 0; }
.vc-brand-logo { font-size: 20px; }
.vc-brand .brand-text h1 { font-size: 17px; margin: 0; }
.vc-brand .brand-text p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }

.vc-nav-row { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; min-width: 0; }
.vc-nav {
  border-radius: 999px; padding: 8px 14px; font-size: 13px; white-space: nowrap;
  background: var(--panel-soft); border: 1px solid var(--line); color: var(--soft-text); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vc-nav:hover { color: var(--text); border-color: var(--line-strong); }
.vc-nav.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.vc-navcnt { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 4px; font-size: 11.5px; }

.vc-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vc-bal { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.vc-bal-l { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vc-bal-v { font-size: 16px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.vc-bal-s { font-size: 11px; color: var(--muted); }

.vc-page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.vc-head-block { padding: 16px 12px 12px; }

/* ── основная область ─────────────────────────────────────────────── */
.vc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.vc-eyebrow { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.vc-h1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 5px 0 0; }
.vc-sub { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; max-width: 620px; line-height: 1.5; }
.vc-scroll { flex: 1; overflow-y: auto; padding: 0 12px 40px; }
/* Пока играет общий проигрыватель, он занимает нижнюю полосу экрана. Без
   этого отступа последний ряд карточек оказывался бы под ним. */
.vc-shell.с-плеером .vc-scroll { padding-bottom: 96px; }

/* ── фильтры ──────────────────────────────────────────────────────── */
.vc-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.vc-fl { display: flex; flex-direction: column; gap: 6px; }
.vc-fl.grow { flex: 1; min-width: 200px; }
.vc-fl-l { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vc-ctl {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; font-size: 13px; outline: none; min-width: 130px; color: var(--text);
}
.vc-ctl:focus { border-color: var(--accent); }
.vc-fl.grow .vc-ctl { width: 100%; }
.vc-subbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.vc-count { font-size: 12.5px; color: var(--muted); }
.vc-chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.vc-link { font-size: 12.5px; color: var(--muted); margin-left: auto; background: none; border: none; cursor: pointer; }
.vc-link:hover { color: var(--accent); }

/* ── таблица голосов ──────────────────────────────────────────────── */
.vc-tbl { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.vc-row {
  display: grid; grid-template-columns: 1fr 150px 96px 210px 150px;
  gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.vc-row:last-child { border-bottom: none; }
.vc-head { background: var(--panel-soft); }
.vc-head > div { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vc-body .vc-row { cursor: pointer; }
.vc-body .vc-row:hover { background: var(--panel-soft); }
.vc-vcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vc-av {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: #fff;
}
.vc-vn { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-vd { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.vc-lang b { font-size: 12.5px; text-transform: uppercase; }
.vc-lang span { font-size: 12.5px; color: var(--muted); }
.vc-gen { font-size: 12.5px; color: var(--soft-text); }
.vc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-tag {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--panel-soft); color: var(--soft-text); border: 1px solid var(--line);
}
.vc-tag.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.vc-acts { display: flex; gap: 6px; justify-content: flex-end; }
.vc-rb {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); background: none; cursor: pointer; font-size: 12px;
}
.vc-rb:hover { border-color: var(--accent); color: var(--accent); }
.vc-rb.is-playing { background: var(--accent); color: #fff; border-color: var(--accent); }
.vc-rb.no-sample { border-style: dashed; }
.vc-mk {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent);
  border-radius: 999px; padding: 0 12px; height: 30px; font-size: 11.5px; background: none; cursor: pointer;
}
.vc-mk:hover { background: var(--accent); color: #fff; }
.vc-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.vc-pageinfo { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── кнопки ───────────────────────────────────────────────────────── */
.vc-btn {
  padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; background: var(--panel); color: var(--text);
  display: inline-flex; align-items: center; gap: 7px; justify-content: center; cursor: pointer;
}
.vc-btn:hover { border-color: var(--line-strong); }
/* Часть кнопок — ссылки (скачивание архива идёт обычной ссылкой, чтобы
   браузер сам предложил «куда сохранить»). Без этого они шли подчёркнутыми и
   выбивались из ряда. */
a.vc-btn, a.vc-mk { text-decoration: none; }
.vc-btn.pri { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.vc-btn.pri:hover { background: var(--accent-2); border-color: var(--accent-2); }
.vc-btn.lg { padding: 13px 22px; font-size: 14px; }
.vc-btn.wide { width: 100%; }
.vc-btn:disabled { opacity: .45; cursor: default; }
.vc-btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.vc-btn.ghost:hover { color: var(--err); }

/* ── карточки шаблонов ────────────────────────────────────────────── */
.vc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 12px; }
.vc-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  position: relative; display: flex; flex-direction: column;
}
.vc-card-badge { position: absolute; top: 12px; right: 12px; }
.vc-card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.vc-card-t { font-size: 14px; font-weight: 600; line-height: 1.25; }
.vc-card-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.vc-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.vc-kv:last-of-type { border-bottom: none; }
.vc-kv .k { color: var(--muted); }
.vc-kv .v { font-family: ui-monospace, Menlo, Consolas, monospace; }
.vc-card-a { display: flex; gap: 7px; margin-top: auto; padding-top: 12px; }
.vc-card.add { border-style: dashed; align-items: center; justify-content: center; min-height: 190px; color: var(--muted); cursor: pointer; text-align: center; }

/* ── полоса показателей ───────────────────────────────────────────── */
.vc-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 18px; }
.vc-st { padding: 15px 18px; border-right: 1px solid var(--line); }
.vc-st:last-child { border-right: none; }
.vc-st-l { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vc-st-v { font-size: 23px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1; }
.vc-st-v.acc { color: var(--accent); }
.vc-st-s { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── редактор озвучки ─────────────────────────────────────────────── */
.vc-tplbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.vc-tplsel { flex: 1; min-width: 260px; }
.vc-ta {
  width: 100%; min-height: 300px; background: var(--panel);
  border: 1.5px solid var(--accent); border-radius: 16px; padding: 18px;
  font-size: 14px; line-height: 1.65; outline: none; resize: vertical; color: var(--text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.vc-ta.drag { border-style: dashed; background: var(--panel-soft); }
/* Как только в списке появились файлы, главным на экране становится список, а
 * не пустое поле ввода: при тридцати позициях полноразмерная «простыня»
 * отжимала работу за нижний край экрана. Поле остаётся — просто уступает. */
.vc-ta.small { min-height: 104px; }
.vc-editbar { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.vc-editstat { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vc-editstat b { color: var(--text); font-weight: 600; }
.vc-editstat.cost { color: var(--warn); }

/* ── карточка голоса ──────────────────────────────────────────────── */
.vc-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(12, 18, 30, .55);
  display: grid; place-items: center; padding: 24px;
}
.vc-overlay[hidden] { display: none; }
/* Окна висят на body, а не внутри раздела, поэтому масштаб сайта до них сам
   не доходит: без этого правила карточка голоса рисовалась заметно крупнее
   страницы под ней. Условие и формулы — те же, что у .app-shell в styles.css. */
@media (min-width: 1021px) {
  .vc-overlay:not([hidden]) {
    transform: scale(var(--ui-scale));
    transform-origin: top left;
    inset: auto;
    left: 0;
    top: 0;
    width: calc(100vw / var(--ui-scale));
    height: calc(100dvh / var(--ui-scale));
  }
}
.vc-modal {
  width: min(580px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow);
}
.vc-modal-h { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 14px; }
.vc-modal-h .vc-av { width: 52px; height: 52px; border-radius: 14px; font-size: 16px; }
.vc-modal-t { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.vc-modal-s { font-size: 12px; color: var(--muted); margin-top: 3px; }
.vc-modal-b { padding: 0 20px 20px; }
.vc-desc { font-size: 13px; line-height: 1.6; color: var(--soft-text); }
.vc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; }
.vc-field { margin-top: 14px; }
.vc-field-l { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vc-field .vc-ctl { width: 100%; }
.vc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vc-slider { width: 100%; accent-color: var(--accent); }
.vc-slrow { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.vc-slrow b { color: var(--accent); font-variant-numeric: tabular-nums; }
.vc-adv { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.vc-adv-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 4px 0; }
.vc-adv-h:hover { color: var(--accent); }
.vc-adv-b { display: none; margin-top: 12px; }
.vc-adv.open .vc-adv-b { display: block; }
.vc-adv.open .vc-adv-h .vc-caret { transform: rotate(90deg); }
.vc-caret { display: inline-block; transition: transform .18s; }

/* ── состояния ────────────────────────────────────────────────────── */
.vc-state { font-size: 13px; margin-top: 12px; min-height: 20px; }
.vc-state.ok { color: var(--ok); }
.vc-state.err { color: var(--err); }
.vc-state.work { color: var(--warn); }
.vc-empty { padding: 44px; text-align: center; color: var(--muted); font-size: 13px; }
.vc-hint {
  font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 14px;
  padding: 12px 14px; border-left: 2px solid var(--accent); background: var(--panel-soft); border-radius: 0 12px 12px 0;
}
.vc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.vc-status.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.vc-status.run { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.vc-status.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 32%, transparent); }
.vc-status.wait { color: var(--muted); }
.vc-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.vc-mono.dim { color: var(--muted); }
.vc-row.jobs { grid-template-columns: 1fr 180px 140px 130px 160px; }

/* кнопка входа в раздел, живёт в шапке перевода */
.voice-section-btn { white-space: nowrap; }

@media (max-width: 1180px) {
  .vc-row { grid-template-columns: 1fr 120px 190px; }
  .vc-row > .vc-gen, .vc-head > .vc-gen { display: none; }
  .vc-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .vc-side { display: none; }
}

/* ── служебные классы вместо inline-стилей ────────────────────────────
   На сайте включён строгий CSP: style-src 'self' без unsafe-inline.
   Атрибут style="..." браузер отбрасывает молча — вёрстка разъезжается, а
   в консоли только предупреждение, которого никто не видит. Поэтому здесь
   нет ни одного inline-стиля, всё оформление живёт классами.            */
.vc-min0 { min-width: 0; }
.vc-mt12 { margin-top: 12px; }
.vc-mt14 { margin-top: 14px; }
.vc-mt18 { margin-top: 18px; }
.vc-mla { margin-left: auto; }
.vc-fill { flex: 1; }
.vc-right { text-align: right; }
.vc-selfend { align-self: flex-end; }
.vc-w100 { width: 100%; }
.vc-dl { text-decoration: none; line-height: 28px; }
.vc-runbtn { margin-left: auto; min-width: 220px; }
.vc-plus { font-size: 22px; }
.vc-addt { font-size: 13px; margin-top: 6px; }
.vc-adds { font-size: 11.5px; opacity: .75; margin-top: 3px; }
.vc-tiny { font-size: 11px; }
.vc-dimtext { color: var(--muted); }
.vc-card-h.with-badge { padding-right: 76px; }

/* Цвета аватарок. Двенадцать заготовленных вместо вычисляемого оттенка:
   вычисленный пришлось бы отдавать атрибутом style, который CSP запрещает. */
.vc-av.c0  { background: #4f86a8; }
.vc-av.c1  { background: #6aa84f; }
.vc-av.c2  { background: #c27ba0; }
.vc-av.c3  { background: #a8875a; }
.vc-av.c4  { background: #8f7ac4; }
.vc-av.c5  { background: #4aa39a; }
.vc-av.c6  { background: #b4794f; }
.vc-av.c7  { background: #5c7cbe; }
.vc-av.c8  { background: #9a7bb8; }
.vc-av.c9  { background: #4c9b6e; }
.vc-av.c10 { background: #b06b76; }
.vc-av.c11 { background: #6b8fa8; }

/* ── полоса о провайдере ──────────────────────────────────────────────
   Раздел работает только с собственной озвучкой. Когда активен другой
   провайдер, человек видит чужой баланс и чужие голоса — и без этой
   полосы не может понять, почему.                                       */
.vc-bar {
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 18px;
}
.vc-bar-t { font-size: 14px; font-weight: 600; }
.vc-bar-s { font-size: 12.5px; color: var(--muted); margin: 6px 0 12px; line-height: 1.55; max-width: 720px; }

/* Подсказка для владельца сервиса: точная причина с названием переменной.
   Обычный пользователь её не видит — ему она ничего не говорит.           */
.vc-admin {
  margin: 14px auto 0; max-width: 640px; text-align: left;
  font-size: 12.5px; line-height: 1.55; color: var(--text);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 12px; padding: 12px 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Отделка каталога. Здесь три вещи, которых не хватало: колонки, которые
   не рисуются, когда данных нет; кнопка воспроизведения с состояниями;
   и силуэты на время загрузки вместо пустого экрана.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ширины колонок задаются по их числу — набор считается по данным страницы. */
.vc-tbl.cols-3 .vc-row { grid-template-columns: 1fr 170px 150px; }
.vc-tbl.cols-4 .vc-row { grid-template-columns: 1fr 170px 110px 150px; }
.vc-tbl.cols-5 .vc-row { grid-template-columns: 1fr 160px 100px 210px 150px; }

.vc-tbl { transition: opacity .18s ease; }
.vc-head { position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px); }
.vc-body .vc-row {
  transition: background .14s ease, box-shadow .14s ease;
  outline: none;
}
.vc-body .vc-row:hover { background: var(--panel-soft); }
.vc-body .vc-row:focus-visible {
  background: var(--panel-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.vc-body .vc-row:active { background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft)); }
.vc-vn { transition: color .14s ease; }
.vc-body .vc-row:hover .vc-vn { color: var(--accent); }

/* Кнопка воспроизведения: покой → готовлю → играет, с бегущей полосой. */
.vc-play {
  position: relative; width: 32px; height: 32px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel);
  cursor: pointer; display: grid; place-items: center; overflow: hidden;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.vc-play:hover { border-color: var(--accent); transform: scale(1.06); }
.vc-play:active { transform: scale(.94); }
.vc-play.no-sample { border-style: dashed; }
.vc-play-ico {
  width: 0; height: 0; margin-left: 2px;
  border-left: 9px solid var(--accent);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transition: all .16s ease;
}
.vc-play.is-playing { background: var(--accent); border-color: var(--accent); }
.vc-play.is-playing .vc-play-ico {
  margin-left: 0; width: 9px; height: 11px; border: none;
  background: #fff;
  clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
}
.vc-play.is-loading { border-color: var(--accent); }
.vc-play.is-loading .vc-play-ico {
  width: 12px; height: 12px; margin: 0; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent); border-radius: 50%;
  animation: vc-spin .7s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }
.vc-play-ring {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: #fff; opacity: .85; transition: width .2s linear;
}
.vc-play.is-playing .vc-play-ring { background: #fff; }

/* Кнопка «Шаблон» — та же семья, но заметнее при наведении на строку. */
.vc-mk { transition: background .16s ease, color .16s ease, border-color .16s ease; }
.vc-body .vc-row:hover .vc-mk { border-color: var(--accent); }

/* Переключатель «списком / плитками». */
.vc-seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 2px; }
.vc-seg button {
  padding: 6px 11px; border: none; background: none; border-radius: 9px;
  color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1;
  transition: background .14s ease, color .14s ease;
}
.vc-seg button:hover { color: var(--text); }
.vc-seg button.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

/* Плитки — второй вид каталога. */
.vc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.vc-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer; outline: none;
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.vc-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.vc-tile:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.vc-tile-h { display: flex; align-items: center; gap: 11px; }
.vc-tile-d { font-size: 12px; color: var(--muted); line-height: 1.5; min-height: 36px; }
.vc-tile-a { display: flex; gap: 8px; align-items: center; margin-top: auto; }

/* Силуэты на время загрузки. */
.vc-sk { background: var(--panel-soft); border-radius: 8px; position: relative; overflow: hidden; }
.vc-sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line) 60%, transparent), transparent);
  animation: vc-shimmer 1.25s infinite;
}
@keyframes vc-shimmer { to { transform: translateX(100%); } }
.vc-sk-av { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; }
.vc-sk-l1 { height: 12px; width: 46%; margin-bottom: 7px; }
.vc-sk-l2 { height: 10px; width: 28%; }
.vc-sk-s { height: 11px; width: 66px; }
.vc-sk-btn { height: 30px; width: 96px; border-radius: 999px; }
.vc-skel .vc-row { grid-template-columns: 1fr 120px 120px 150px; pointer-events: none; }

/* Появление списка — короткое и один раз, чтобы не мельтешило. */
.vc-body .vc-row { animation: vc-in .22s ease both; }
.vc-tiles .vc-tile { animation: vc-in .22s ease both; }
@keyframes vc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vc-body .vc-row, .vc-tiles .vc-tile, .vc-sk::after, .vc-play.is-loading .vc-play-ico { animation: none; }
  .vc-tile:hover, .vc-play:hover, .vc-play:active { transform: none; }
}

/* Пустое состояние с иконкой, а не голой строкой посреди белого поля. */
.vc-empty-ico { font-size: 30px; opacity: .35; margin-bottom: 10px; }
.vc-langcode { text-transform: uppercase; font-weight: 600; color: var(--soft-text); }

/* ── круглые кнопки действительно круглые ─────────────────────────────
   В плитке кнопка растягивалась флексом и превращалась в овал. Жёсткий
   квадрат плюс aspect-ratio не даёт этому случиться ни в одном контейнере. */
.vc-play, .vc-rb {
  flex: 0 0 auto;
  width: 38px; height: 38px; min-width: 38px; min-height: 38px;
  aspect-ratio: 1 / 1; padding: 0; border-radius: 50%;
}
.vc-modal-h .vc-rb { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
.vc-play-ring { border-radius: 0 0 999px 999px; }

/* ── добавление голоса по идентификатору ElevenLabs ─────────────────── */
.vc-import {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 14px;
}
.vc-import-t { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.vc-import-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vc-import-r .vc-ctl { min-width: 240px; }

/* Плитки в один ряд по ширине экрана переводчика. */
.vc-tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vc-tile-a { gap: 10px; }

/* Кнопка перехода между переводом и озвучкой — последний элемент верхней
   строки в обеих частях сайта. Один и тот же угол экрана, искать не нужно. */
.app-topbar .toprow > .voice-section-btn { flex: 0 0 auto; margin-left: 8px; }

/* Отдельных правил для мета-блока и кнопки перехода тут больше нет: раздел
   стал .app-shell, и `.app-shell .app-topbar .topbar-meta { margin-left: auto }`
   прижимает их к правому краю ровно так же, как в переводчике. */

/* ── компактная шапка экрана ──────────────────────────────────────────
   Заголовок и описание были отдельным блоком над списком и съедали
   пол-экрана: голоса начинались ниже середины. Теперь это одна строка
   внутри прокрутки.                                                     */
.vc-head-line { display: flex; align-items: baseline; gap: 12px; padding: 12px 0 10px; flex-wrap: wrap; }
.vc-head-line .vc-h1 { margin: 0; font-size: 19px; }
.vc-head-line .vc-sub {
  margin: 0; font-size: 12px; color: var(--muted); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── панель инструментов каталога ─────────────────────────────────── */
.vc-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.vc-search { flex: 1; min-width: 220px; }
.vc-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.vc-importmsg { margin-bottom: 10px; }
.vc-modal-sm { width: min(440px, 100%); }

/* ── результат озвучки прямо на экране ────────────────────────────── */
.vc-result {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.vc-result.err { border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.vc-result-h { display: flex; align-items: center; gap: 10px; }
.vc-result-n { font-size: 13px; color: var(--muted); }
.vc-result-why { font-size: 13px; color: var(--err); width: 100%; line-height: 1.5; }
.vc-audio { height: 36px; flex: 1; min-width: 220px; }
.vc-audio.sm { height: 30px; max-width: 190px; min-width: 140px; }
.vc-progress { flex: 1; min-width: 160px; height: 6px; border-radius: 999px; background: var(--panel-soft); overflow: hidden; }
.vc-progress i {
  display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--accent);
  animation: vc-run 1.2s ease-in-out infinite;
}
@keyframes vc-run { 0% { margin-left: -40% } 100% { margin-left: 100% } }

/* Причина ошибки прямо в строке задачи — раньше её не было видно нигде. */
.vc-jerr { grid-column: 1 / -1; font-size: 12px; color: var(--err); padding-top: 6px; line-height: 1.5; }
.vc-row.jobs { grid-template-columns: 1fr 170px 140px 120px 330px; row-gap: 0; }

/* ── полоса о неготовности сервера ─────────────────────────────────────
   Видит её только владелец: обычному человеку чинить нечего. Стоит на экране
   «Озвучить текст», потому что именно там раньше выяснялось, что озвучивать
   некому — запуском задачи и минутой ожидания.                          */
.vc-warn {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid rgba(217, 119, 6, .35);
  border-left-width: 3px;
  border-radius: 12px;
  background: rgba(217, 119, 6, .08);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   1.48.0 (озвучка) — сетка карточек вместо списка полос

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

   Список никуда не делся: те же карточки, другая раскладка. Разметка одна на
   оба вида нарочно — две ветки разъехались бы при первой правке.

   Цвета берутся из переменных сайта. Раньше здесь стояли var(--vc-line,
   #cfd8e6) и подобные: переменных с такими именами нигде не объявлено, так
   что в дело всегда шёл светлый запасной цвет — и в тёмной теме карточки
   оставались белыми.
   ══════════════════════════════════════════════════════════════════════════ */
.vc-batch-empty {
  margin: 10px 0 0; padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: 12px;
  color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.5;
}
.vc-batch-empty.vc-span { grid-column: 1 / -1; margin: 0; }

/* ── шапка списка: сколько сделано и что можно сделать со всем сразу ── */
.vc-batch-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px 0 8px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.vc-batch-sum { flex: 1 1 320px; min-width: 260px; }
.vc-batch-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vc-batch-big { font-size: 20px; font-weight: 800; line-height: 1; }
.vc-batch-of { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.vc-batch-tag {
  font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-soft); color: var(--soft-text);
}
.vc-batch-tag.run { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.vc-batch-tag.err { background: rgba(217, 45, 32, .12); color: #d92d20; }
.vc-batch-tag.idle { background: var(--panel-soft); color: var(--muted); }
.vc-batch-chars { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.vc-batch-bar {
  margin-top: 8px; height: 6px; border-radius: 999px;
  background: var(--panel-soft); overflow: hidden;
}
.vc-batch-fill {
  display: block; height: 100%; width: var(--доля, 0%);
  border-radius: 999px; background: var(--accent);
  transition: width .4s ease;
}
.vc-batch-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-batch-acts .vc-btn { white-space: nowrap; }

/* ── отбор по состоянию и переключатель вида ── */
.vc-batch-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.vc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--soft-text);
  font-size: 12px; font-weight: 700;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vc-chip:hover { border-color: var(--line-strong); color: var(--text); }
.vc-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.vc-chip b { font-weight: 800; margin-left: 5px; opacity: .85; }
.vc-viewsw { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 11px; background: var(--panel-soft); }
.vc-vw {
  padding: 5px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--muted);
  font-size: 12px; font-weight: 700;
}
.vc-vw:hover { color: var(--text); }
.vc-vw.is-on { background: var(--panel); border-color: var(--line); color: var(--text); }

/* ── раскладка: сетка или список ──
   Ширина колонки — 300px минимум. Меньше не имеет смысла: в карточке стоит
   выбор голоса, а имена шаблонов у владельца длинные. */
.vc-batch.grid {
  display: grid; gap: 10px;
  /* 320, а не 300: при 300 подпись «259 символов · ≈ 0:19 звучания» не
     помещалась в строку и переносилась, а имя голоса в выборе обрезалось на
     половине слова. На 1920 это пять колонок вместо шести — читается лучше. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}
.vc-batch.rows { display: flex; flex-direction: column; gap: 8px; }

/* ── карточка ── */
/* 1.49.0. Карточка стала спокойнее.
   Прежняя заливала всю площадь цветом состояния: тридцать готовых озвучек
   давали тридцать зелёных плашек, и это читалось не как «готово», а как
   маркер, которым провели по всему списку. Теперь цвет держат две вещи —
   тонкая полоса слева и чип состояния, — а поле карточки остаётся полем.
   Заливка хода работы осталась: она нужна, пока задача идёт. */
.vc-item {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px 14px 12px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.vc-item:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(19, 28, 45, .07); }
/* Полоса состояния слева — единственное цветное пятно в покое. */
.vc-item::after {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--line-strong);
}
.vc-item[data-stage="done"]::after { background: #12b76a; }
.vc-item[data-stage="running"]::after { background: var(--accent); }
.vc-item[data-stage="error"]::after { background: #f04438; }
/* Полоса состояния: одна на всю карточку, открывается подрезкой слева
   направо — тем же способом, что строки языков в переводчике. */
.vc-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: inset(0 var(--обрез, 100%) 0 0);
  transition: clip-path var(--скорость, 1.4s) linear;
  background: linear-gradient(90deg, rgba(21, 112, 239, .16) 0%, rgba(21, 112, 239, .08) 100%);
}
.vc-item[data-stage="done"]::before {
  background: linear-gradient(90deg, rgba(18, 183, 106, .07) 0%, rgba(18, 183, 106, .04) 100%);
}
.vc-item[data-stage="error"]::before {
  background: linear-gradient(90deg, rgba(240, 68, 56, .08) 0%, rgba(240, 68, 56, .05) 100%);
}

.vc-item-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.vc-item-main { min-width: 0; flex: 1; }
.vc-item-n {
  font-size: 13px; font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-item-d {
  margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Вторая строка подписи: состояние словом плюс когда поставлено. Состояние
   вынесено из строки объёма нарочно — в узкой карточке всё вместе не
   помещалось и переносилось посреди фразы. */
.vc-item-when { margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.45; }
/* Чип состояния: форма важнее слова, когда карточек тридцать. Точка —
   единственное, что глаз ловит на скорости; слово рядом, чтобы состояние
   читалось и без цвета. */
.vc-chip-st {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .005em;
  background: var(--panel-soft); color: var(--soft-text);
}
.vc-chip-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.vc-chip-st.ok { background: rgba(18, 183, 106, .12); color: #067647; }
.vc-chip-st.err { background: rgba(240, 68, 56, .12); color: #b42318; }
.vc-chip-st.run { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.vc-chip-st.run i { animation: vc-pulse 1.4s ease-in-out infinite; }
.vc-chip-st.idle { color: var(--muted); }
@keyframes vc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Причина отказа — отдельной строкой под чипом, а не внутри него: длинные
   сообщения провайдера разрывали чип на две строки. */
.vc-why {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 700; line-height: 1.4; color: #b42318;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vc-item-err { color: #b42318; }
.vc-item-ok { color: #067647; }
.vc-item-run { color: var(--accent); }
.vc-item-voice {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Флажок выбора. Своя коробка, а не голый input: у голого разный размер в
   разных браузерах, и ряд от этого прыгает. */
.vc-pick { display: flex; align-items: center; padding-top: 2px; cursor: pointer; }
.vc-pick input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

/* Кнопка прослушивания. Проигрывателя в карточке больше нет — играет один
   общий внизу раздела, здесь только «включить эту». */
.vc-pl {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--text);
  font-size: 11px; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vc-pl:hover { border-color: var(--accent); color: var(--accent); }
.vc-pl.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.vc-item-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Все элементы ряда одной высоты и одного скругления: раньше select, «Текст»
   и «MP3» были три разные фигуры в одном ряду. */
.vc-item-acts .vc-mk, .vc-item-acts .vc-ctl { height: 30px; border-radius: 10px; }
.vc-item-acts .vc-mk { padding: 0 11px; font-weight: 700; }
.vc-item-acts .vc-mk.vc-drop { padding: 0; width: 30px; }
/* Высоту не задаём числом: при 30px нижние края букв в «Диктор Мужской»
   срезало — у select своя внутренняя строка, и она не влезала в коробку.
   Размер собирается из шрифта и отступов, поэтому срезать нечего. */
/* Свой вид у выбора голоса. Системная стрелка у <select> в каждом браузере
   своя и всегда чужая остальному ряду; рисуем свою уголком на обёртке —
   так и CSP не мешает (никаких инлайновых стилей и внешних картинок). */
.vc-sel { position: relative; display: inline-flex; flex: 1 1 130px; min-width: 118px; }
.vc-sel::after {
  content: ''; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px;
  margin-top: -4px; pointer-events: none;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
}
.vc-item-tpl {
  appearance: none; -webkit-appearance: none;
  width: 100%; max-width: 100%; min-width: 0;
  font-size: 12px; font-weight: 600; line-height: 1.45;
  padding: 6px 28px 6px 10px; border-radius: 10px;
  text-overflow: ellipsis;
}
.vc-item-tpl:disabled { opacity: .72; }
.vc-item-text {
  margin: 0; padding: 10px 12px;
  max-height: 200px; overflow: auto;
  border-radius: 10px; background: var(--panel-soft);
  font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
/* В сетке раскрытый текст растянул бы весь ряд. Ограничение по высоте это и
   решает: карточка становится выше соседей, но ряд не уезжает на экран. */
.vc-batch.grid .vc-item-text { max-height: 160px; }

/* Список: та же карточка, но в строку — имя слева, действия справа. */
.vc-batch.rows .vc-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
}
.vc-batch.rows .vc-item-acts { justify-content: flex-end; flex-wrap: nowrap; }
.vc-batch.rows .vc-item-tpl { flex: 0 0 auto; min-width: 150px; max-width: 220px; }
.vc-batch.rows .vc-item-text { grid-column: 1 / -1; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vc-item::before { transition: none; }
  .vc-batch-fill { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1.48.0 — один проигрыватель на весь раздел

   Было: <audio controls> в каждой готовой позиции. Тридцать озвучек — тридцать
   проигрывателей, каждый со своей громкостью, и любые два можно запустить
   разом. Стало: кнопка ▶ на карточке и один проигрыватель внизу, который
   доиграв дорожку сам переходит к следующей готовой — пакет прослушивается
   подряд, одним нажатием.
   ══════════════════════════════════════════════════════════════════════════ */
/* Положение — fixed, а не absolute: у каркаса раздела (.app-shell) нет
   position, и абсолютный отсчёт ушёл бы к окну документа, то есть под
   прокрученную страницу переводчика. Слой 40: выше содержимого раздела (30),
   но ниже модальных окон (60) — иначе проигрыватель лежал бы поверх карточки
   голоса. */
.vc-dock {
  position: fixed; left: 22px; right: 22px; bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(8, 15, 31, .16);
}
.vc-dock.hidden { display: none; }
.vc-dock-btn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--text);
  font-size: 11px; line-height: 1;
}
.vc-dock-btn:hover { border-color: var(--accent); color: var(--accent); }
.vc-dock-btn.big { width: 36px; height: 36px; background: var(--accent); border-color: var(--accent); color: #fff; font-size: 13px; }
.vc-dock-btn.big:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.vc-dock-mid { flex: 1; min-width: 0; }
.vc-dock-name {
  font-size: 12.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-dock-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.vc-dock-t { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.vc-dock-seek { flex: 1; min-width: 80px; accent-color: var(--accent); cursor: pointer; }
.vc-dock-vol { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.vc-dock-vol input { width: 76px; accent-color: var(--accent); cursor: pointer; }

@media (max-width: 900px) {
  .vc-dock-vol { display: none; }
  .vc-batch-chars { margin-left: 0; }
}

/* Приём файлов на весь раздел: пока над ним держат файлы, экран подсвечен
   рамкой — иначе непонятно, примет ли он бросок вообще. */
.vc-shell.вродеБросят { outline: 2px dashed var(--accent); outline-offset: -8px; }

/* ══════════════════════════════════════════════════════════════════════════
   1.49.0 — окно чтения текста

   Текст разворачивался внутри карточки: окошко высотой полтораста точек и
   шириной в колонку сетки. Читать в нём нельзя, а ряд карточек от него
   разъезжался. Теперь это окно поверх страницы, с нормальной длиной строки.
   ══════════════════════════════════════════════════════════════════════════ */
.vc-modal-read { width: min(920px, 100%); display: flex; flex-direction: column; max-height: 86vh; }
.vc-read {
  flex: 1; min-height: 200px; overflow-y: auto;
  margin: 0 20px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft);
  font-size: 15px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
  /* Длина строки — главное для чтения. Шире 78 знаков глаз теряет начало
     следующей строки, поэтому текст держится в этой мере, а окно может быть
     каким угодно широким. */
  max-width: 78ch;
}
.vc-read-wait { color: var(--muted); font-style: italic; }
.vc-modal-f {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px 20px;
}
.vc-read-note { flex: 1; min-width: 120px; font-size: 12px; margin: 0; }
.vc-read-note.ok { color: var(--ok); }
.vc-read-note.err { color: var(--err); }

/* ══════════════════════════════════════════════════════════════════════════
   1.49.0 — кнопка запуска с выбором, что делать с готовыми файлами

   Устроена как у переводчика и намеренно так же выглядит: основная кнопка
   плюс спутник, у которого при наведении выезжает подпись. Одно и то же
   действие не должно в двух местах выглядеть по-разному.
   ══════════════════════════════════════════════════════════════════════════ */
.vc-run-split { display: inline-flex; align-items: stretch; }
.vc-run-split .vc-btn { border-radius: 0; }
.vc-runbtn {
  flex-direction: column; gap: 1px; line-height: 1.15;
  border-top-left-radius: 14px; border-bottom-left-radius: 14px;
}
.vc-run-title { font-weight: 700; font-size: 14px; }
.vc-run-mode { font-size: 10.5px; font-weight: 600; opacity: .85; letter-spacing: .01em; }
.vc-run-toggle {
  border-top-right-radius: 14px; border-bottom-right-radius: 14px;
  border-left: 1px solid rgba(255, 255, 255, .38) !important;
  padding-left: 14px; padding-right: 14px;
  overflow: hidden; white-space: nowrap;
  transition: min-width .26s cubic-bezier(.4, 0, .2, 1), filter .2s ease, opacity .2s ease;
}
.vc-run-ico { font-size: 16px; line-height: 1; display: inline-block; transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
.vc-run-hint {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
  font-size: 12px; font-weight: 800;
  transition: max-width .26s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, margin-left .26s cubic-bezier(.4, 0, .2, 1);
}
.vc-run-toggle:hover, .vc-run-toggle:focus-visible { min-width: 190px; filter: none; opacity: 1; }
.vc-run-toggle:hover .vc-run-ico, .vc-run-toggle:focus-visible .vc-run-ico { transform: translateX(-2px); }
.vc-run-toggle:hover .vc-run-hint, .vc-run-toggle:focus-visible .vc-run-hint { max-width: 150px; opacity: 1; margin-left: 9px; }
/* Пока скачивание выключено, спутник приглушён — но не мёртв. Обесцвечивание
   фильтром тут не годится: значок 🚫 сам по себе цветной, и grayscale гасил
   его в серое пятно, из-за чего кнопка выглядела сломанной. */
.vc-run-toggle.is-off {
  background: color-mix(in srgb, var(--accent) 55%, #6b7280) !important;
  border-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  .vc-run-toggle, .vc-run-ico, .vc-run-hint, .vc-item, .vc-chip-st.run i { transition: none; animation: none; }
}

/* Запуск, от которого остались только запись и дата: файлы стёрты по сроку
   хранения. Карточка приглушена — работа была, забирать нечего. */
.vc-chip-st.gone { background: var(--panel-soft); color: var(--muted); }
.vc-item[data-stage="gone"] { opacity: .72; }
.vc-item[data-stage="gone"]::after { background: var(--line-strong); }

/* Ссылка на копию в Google Drive. Копия переживает срок хранения на сервере,
   поэтому она есть и у карточки с пометкой «Файлы стёрты». */
.vc-mk.vc-drive { border-color: rgba(3, 152, 85, .45); color: #067647; }
.vc-mk.vc-drive:hover { background: #12b76a; border-color: #12b76a; color: #fff; }