/* ============================================================
   Админка: оболочка (разделы), общие элементы разделов, вкладки инструментов, голоса.
   Стили персонажей, анкет, сценариев и медиа — в admin-characters.css, admin-forms.css,
   admin-media.css и admin-media-sheets.css: их подгружает admin.js при входе в админку,
   остальным пользователям они не нужны. Статистика, пользователи, настройки, рассылка —
   в admin-tools.css и admin-stats.css. Брейкпоинты как в base.css: телефон < 600,
   планшет ≥ 600, десктоп ≥ 1024 (разделы — колонкой слева), ≥ 1200 — карточка в две колонки.
   ============================================================ */

/* Админке нужна широкая колонка: сетки карточек, форма рядом с аватаром.
   --adm-bar-top — где липнет строка разделов: под шапкой «Админка» (браузер) или у самого верха (Telegram:
   своей шапки нет, есть системная «Назад»). --adm-top — низ липкой строки разделов: под ним липнут подвкладки
   карточки персонажа (высоту строки меряет admin.js → --adm-nav-h) */
.screen[data-screen="admin"] {
  --page-max: 1360px;
  /* Липкий верх админки (строка разделов, подвкладки) меряет admin.js: прокрутка к полю не прячет его под ним */
  scroll-padding-top: max(var(--adm-sticky-top, var(--screen-sticky-top, 0px)), var(--sat, 0px));
}
.adm-shell {
  --adm-bar-top: 0px;
  --adm-top: calc(var(--adm-bar-top) + var(--adm-nav-h, 60px));
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
}
.adm-shell.has-topbar { --adm-bar-top: calc(var(--sat) + 60px); } /* высота .topbar в chrome.css */

.adm-topback { flex: 0 0 auto; margin-left: -8px; }

/* ---------- Разделы: телефон и планшет — липкая строка из равных пунктов (все видны сразу; сейчас их семь,
   число колонок берётся из числа пунктов), компьютер — колонка слева ---------- */
.adm-nav {
  position: sticky;
  top: var(--adm-bar-top);
  z-index: 6;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  padding: calc(var(--sat) + 6px) 4px 6px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.adm-shell.has-topbar .adm-nav { padding-top: 6px; }
.adm-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 0 4px;
  border-radius: 12px;
  color: var(--muted);
  transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.adm-nav__item .icon { width: 20px; height: 20px; }
.adm-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.adm-nav__label--full { display: none; }
.adm-nav__item:active { transform: scale(0.95); }
.adm-nav__item.is-active { color: #fff; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(255, 45, 120, 0.35); }
.adm-nav__item.is-active .icon { color: var(--pink); }
@media (hover: hover) and (pointer: fine) {
  .adm-nav__item:not(.is-active):hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
}
/* Узкий телефон (360 px): семь пунктов по ~50 px — «Персонажи» и «Настройки» влезают без многоточия */
@media (max-width: 380px) {
  .adm-nav { padding-inline: 2px; }
  .adm-nav__label { font-size: 9.5px; letter-spacing: -0.035em; }
}
/* Планшет: как на телефоне (иконка над короткой подписью), но крупнее. Иконка и подпись в строку при семи
   разделах не влезают до ~1000 px, а с 1024 px разделы уже в боковой колонке (полные подписи) */
@media (min-width: 600px) {
  .adm-nav { gap: 6px; padding-inline: var(--gutter); }
  .adm-nav__item { min-height: 52px; border-radius: 14px; }
  .adm-nav__label { font-size: 12px; letter-spacing: 0; }
}
/* Клавиатура открыта: строка разделов не липнет — место над клавиатурой отдаём полю и результатам */
html.kb-open .adm-nav { position: relative; top: auto; }
.adm-main { min-width: 0; }

@media (min-width: 1024px) {
  .adm-shell {
    --adm-top: var(--adm-bar-top);
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding-inline: var(--gutter);
  }
  .adm-nav {
    top: calc(var(--adm-bar-top) + 16px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(var(--sat) + 16px) 0 16px;
    background: none;
    box-shadow: none;
  }
  .adm-shell.has-topbar .adm-nav { padding-top: 16px; }
  .adm-nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
  }
  .adm-nav__item .icon { width: 20px; height: 20px; }
  .adm-nav__label { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
  .adm-nav__label--short { display: none; }
  .adm-nav__label--full { display: block; }
  .adm-nav__item.is-active { background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(255, 45, 120, 0.28), var(--inner-hi); }
  .adm-main.page { max-width: none; margin: 0; padding: calc(16px + var(--sat)) 0 calc(32px + var(--sab)); }
  .adm-shell.has-topbar .adm-main.page { padding-top: 16px; }
}

/* ---------- Общие элементы разделов ---------- */
.adm-view { min-width: 0; animation: fade-in var(--t) var(--ease) both; }
.adm-view[data-tab="voices"] { padding-top: 12px; } /* остальные разделы дают отступ под строкой разделов сами */

.adm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin: 2px 0 12px;
}
.adm-head__title { min-width: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: -0.015em; }
.adm-head__count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-add { flex: 0 0 auto; }

.adm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: #fff;
  background: rgba(10, 8, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.adm-badge--ok { color: var(--green); border-color: rgba(45, 212, 160, 0.45); }
.adm-badge--warn { color: var(--amber); border-color: rgba(255, 181, 71, 0.45); }
.adm-badge--danger { color: var(--red); border-color: rgba(255, 77, 94, 0.5); }
.adm-badge--muted { color: var(--muted); }
.adm-badge--live { gap: 5px; padding-left: 7px; color: #fff; border-color: transparent; background: linear-gradient(90deg, rgba(255, 45, 120, 0.88), rgba(180, 41, 249, 0.88)); }
.adm-badge__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); animation: blink 1.6s ease-in-out infinite; }

.adm-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-color: rgba(255, 77, 94, 0.35);
  background: linear-gradient(135deg, rgba(255, 77, 94, 0.08), var(--card) 60%);
}
.adm-error__icon { flex: 0 0 auto; display: flex; color: var(--red); }
.adm-error__icon .icon { width: 24px; height: 24px; }
.adm-error__body { min-width: 0; overflow-wrap: anywhere; }
.adm-error .btn .icon { width: 16px; height: 16px; }

/* Шапка экрана внутри вкладки (common.js innerHead): картинка · заголовок/подзаголовок · «⋯» — одна строка */
.adm-ihead { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; margin: 10px 0 10px; }
.adm-ihead__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-ihead__title { min-width: 0; font-size: 18px; font-weight: var(--fw-heavy); letter-spacing: -0.015em; line-height: 1.2; }
.adm-ihead__sub { min-width: 0; font-size: 12px; line-height: 1.3; color: var(--muted); }
.adm-ihead__menu { flex: 0 0 auto; margin-right: -8px; }
.adm-ihead__menu .icon { width: 22px; height: 22px; }

/* Имя и возраст: имя — с многоточием, возраст не пропадает (узор .name-age каркаса, К8); возраст приглушён */
.adm-name-age .name-age__age { font-weight: var(--fw-semibold); color: var(--muted); }

.adm-hint { margin-top: 12px; font-size: 12px; line-height: var(--lh-base); color: var(--muted-2); }
.adm-note {
  padding: 8px 10px 8px 12px;
  border-radius: 12px;
  border-left: 3px solid rgba(255, 181, 71, 0.7);
  background: rgba(255, 181, 71, 0.07);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.adm-panel {
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--elev-1);
  animation: rise-in 200ms var(--ease) both;
}
.adm-panel .textarea { min-height: 0; }
.adm-panel__title { margin-bottom: 8px; font-size: var(--fs-sm); font-weight: var(--fw-heavy); }

.adm-busy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 8px;
  text-align: center;
  font-size: 12px; font-weight: var(--fw-bold);
  background: rgba(11, 10, 20, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in var(--t) both;
  z-index: 3;
}

.adm-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.adm-pane > .adm-section { margin-top: 0; padding-top: 0; border-top: 0; }
.adm-pane { min-width: 0; animation: fade-in var(--t) var(--ease) both; }

/* ============================================================
   Общие стили вкладок инструментов (статистика, настройки, пользователи) — admin-tools.css дополняет
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.stat-card__label { font-size: 12px; color: var(--muted); }
.stat-card__value { font-size: 24px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; }
.stat-card__sub { font-size: 12px; color: var(--muted-2); margin-top: 2px; }

.admin-form { display: flex; flex-direction: column; }
.admin-form .field { margin-bottom: 12px; }
.admin-form__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.admin-form__cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.admin-form__title { font-size: 16px; font-weight: 800; margin: 18px 0 10px; }

/* Пакеты энергии. Телефон: пакет — карточка в три строки «Название · Бейдж», «⚡ · ⭐ · +%»,
   «id · Вкл · удалить», подпись над каждым полем (числа не обрезаются даже на 360 px).
   От 640px — таблица с общим заголовком */
.pack-table { display: flex; flex-direction: column; gap: 8px; }
.pack-table__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "label label badge" "energy stars bonus" "id actions actions";
  gap: 10px 8px;
  align-items: end;
  padding: 12px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
}
.pack-table__row .input { min-height: 44px; padding: 8px 10px; font-size: 14px; border-radius: 10px; min-width: 0; width: 100%; }
.pack-table__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pack-table__caption { font-size: 11px; color: var(--muted); }
.pack-table__cell--id { grid-area: id; }
.pack-table__cell--energy { grid-area: energy; }
.pack-table__cell--stars { grid-area: stars; }
.pack-table__cell--bonusPercent { grid-area: bonus; }
.pack-table__cell--label { grid-area: label; }
.pack-table__cell--badge { grid-area: badge; }
.pack-table__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pack-table__actions .toggle { flex: 0 0 auto; width: auto; gap: 0; }
.pack-table__actions .toggle .grow { display: none; } /* подписи у тумблера нет — пустой отступ не нужен */
.pack-table__del { flex: 0 0 auto; color: var(--muted); }
.pack-table__head { display: none; font-size: 11px; color: var(--muted); }
@media (min-width: 640px) {
  .pack-table__row {
    grid-template-columns: 1.2fr 1fr 1fr 1.3fr 1fr 0.8fr 104px;
    grid-template-areas: "id energy stars label badge bonus actions";
    gap: 6px;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: none;
    border: 0;
  }
  .pack-table__row .input { min-height: 40px; padding: 6px 8px; font-size: 13px; border-radius: 8px; }
  .pack-table__caption { display: none; }
  .pack-table__head { display: grid; }
  .pack-table__head > :last-child { text-align: right; }
}

.admin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14px;
}
.admin-row__body { flex: 1; min-width: 0; }
.admin-row__title { font-weight: 700; }
.admin-row__sub { font-size: 12px; color: var(--muted); }
.admin-row__actions { display: flex; gap: 6px; flex: 0 0 auto; }
.admin-row.is-blocked { border-color: rgba(255, 77, 94, 0.4); }


/* ============================================================
   Голоса: выбор в анкете персонажа (vpick/vcard), кнопка ▶ (vplay), вкладка «Голоса» (vlist)
   ============================================================ */

.vpick { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.vpick__list { display: flex; flex-direction: column; gap: 10px; }
.vpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vpick__sub { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted-2); letter-spacing: 0.02em; }
.vpick__hint { font-size: 12px; color: var(--muted); }
.vpick__reset {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* выглядит ссылкой, а цель касания — полная */
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--violet);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vpick__note { padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.4; border: 1px solid; }
.vpick__note-title { font-size: 13px; font-weight: 800; }
.vpick__note-text { margin-top: 2px; color: var(--muted); }
.vpick__note--warn { color: var(--amber); background: rgba(255, 181, 71, 0.08); border-color: rgba(255, 181, 71, 0.3); }
.vpick__note--error { color: var(--red); background: rgba(255, 77, 94, 0.08); border-color: rgba(255, 77, 94, 0.35); }

.vpick__speed { padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.vpick__speed-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--muted); }
.vpick__speed-value { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.vpick__speed-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; }
.vpick__slider { flex: 1; min-width: 0; }
/* Узкий телефон: ползунок во всю ширину, «Прослушать» — под ним */
@media (max-width: 479px) {
  .vpick__speed-row { flex-wrap: wrap; }
  .vpick__slider { flex-basis: 100%; }
  .vpick__speed-row .vplay.vplay--wide { width: 100%; margin-top: 4px; }
}

/* Ползунок админки (speed-range.js): дорожка 8 px с заливкой пройденной части, белая ручка 28 px,
   высота элемента 44 px — попасть пальцем легко и в ручку, и в любую точку дорожки */
.adm-range {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.adm-range:focus { outline: none; }
.adm-range:disabled { opacity: 0.5; cursor: default; }
.adm-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pink), var(--violet)) 0 0 / var(--fill) 100% no-repeat, rgba(255, 255, 255, 0.12);
}
.adm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px; /* (8 − 28) / 2: ручка по центру дорожки */
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 45, 120, 0.22), 0 4px 12px rgba(0, 0, 0, 0.45);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
}
.adm-range:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(255, 45, 120, 0.26), 0 4px 14px rgba(0, 0, 0, 0.5); }
.adm-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--violet); }
.adm-range::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.adm-range::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--pink), var(--violet)); }
.adm-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 45, 120, 0.22), 0 4px 12px rgba(0, 0, 0, 0.45);
}
.adm-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--violet); }
/* Шкала под ползунком: подписи по центру положений ручки (ход центра ручки — от 14 px до ширины − 14 px) */
.vpick__scale { position: relative; height: 14px; margin: -4px 14px 0; font-size: 10px; color: var(--muted-2); }
.vpick__scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.vpick__scale span:first-child { left: 0; }
.vpick__scale span:last-child { left: 100%; }

/* Карточка голоса */
.vcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title play" "meta meta" "id id";
  align-items: center;
  column-gap: 6px;
  min-width: 0;
  min-height: 72px;
  padding: 8px 8px 10px 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.vcard:focus-visible { outline: none; box-shadow: var(--glow-violet); }
.vcard.is-active { background: var(--grad-soft); border-color: rgba(255, 45, 120, 0.65); }
.vcard--dim { opacity: 0.55; }
.vcard--dim.is-active { opacity: 1; }
.vcard--skeleton { min-height: 72px; border: 0; cursor: default; }
.vcard__title { grid-area: title; min-width: 0; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard .vplay { grid-area: play; width: 36px; height: 36px; }
.vcard__tag {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line-2);
}
.vcard__meta { grid-area: meta; margin-top: 2px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard__id { grid-area: id; margin-top: 2px; font-size: 10px; color: var(--muted-2); font-family: ui-monospace, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard__check {
  position: absolute;
  top: -7px;
  left: -7px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 2px 8px rgba(255, 45, 120, 0.45);
}
.vcard__check .icon { width: 14px; height: 14px; }
.vcard.is-active .vcard__check { display: inline-flex; }

/* Кнопка прослушивания ▶ / ■ */
.vplay {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--text);
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.4);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}
.vplay:active { transform: scale(0.94); }
.vplay:disabled { opacity: 0.35; pointer-events: none; }
.vplay__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.vplay__icon .icon { width: 16px; height: 16px; }
.vplay[data-state="playing"] { background: var(--grad); border-color: transparent; box-shadow: var(--glow); }
.vplay[data-state="loading"] { pointer-events: none; }
.vplay--wide { width: 132px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }

/* Вкладка «Голоса» */
.vlist__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.vlist__status .adm-badge { backdrop-filter: none; -webkit-backdrop-filter: none; }
.vlist__controls { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.vlist__rows { gap: 8px; }
.vlist__row { min-height: 60px; }
.vlist__row .admin-row__title { display: flex; align-items: center; min-width: 0; }
.vlist__used { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text); text-align: right; }
.vlist__used.is-zero { font-weight: 500; color: var(--muted-2); }
.vlist__unknown { margin: 8px 0 0; padding-left: 18px; color: var(--text); }
.vlist__unknown code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* ============================================================
   Библиотека голосов: клон, дизайн по описанию, свои голоса (vsheet/vrec/vcheck/vdesign)
   Тап-зоны ≥ 44px: кнопка ▶ (vplay) — 44px везде, включая карточку голоса и мастер создания
   ============================================================ */

.vplay { width: 44px; height: 44px; }
.vcard .vplay { width: 44px; height: 44px; }
.vplay.vplay--wide { width: 132px; }

.vlist__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vlist__actions .btn { flex: 1 1 160px; min-height: 44px; }
.vlist__row.is-custom { border-color: rgba(139, 92, 246, 0.35); }
.vlist__row .admin-row__title { flex-wrap: wrap; row-gap: 2px; }
.vlist__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlist__desc { margin-top: 2px; font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlist__menu { flex: 0 0 auto; margin-right: -6px; }
.vcard__tag--clone { color: var(--violet); border-color: rgba(139, 92, 246, 0.45); }
.vcard__tag--design { color: var(--pink); border-color: rgba(255, 45, 120, 0.45); }
.vcard__tag--warn { color: var(--amber); border-color: rgba(255, 181, 71, 0.45); }

/* Шторки клона и дизайна */
.vsheet .sheet__body { padding-bottom: calc(24px + var(--sab)); }
.vsheet__form { display: flex; flex-direction: column; gap: 14px; }
.vsheet__form > .field { margin-bottom: 0; }
.vsheet__stack { display: flex; flex-direction: column; gap: 8px; }
.vsheet__tips { padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45; color: var(--muted); background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.25); }
.vsheet__tips-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.vsheet__tips ul { margin: 0; padding-left: 18px; list-style: disc; }
.vsheet__progress { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 8px; text-align: center; }
.vsheet__progress-text { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 320px; }
.vsheet__elapsed { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.vsheet__result { display: flex; flex-direction: column; gap: 14px; }
.vsheet__result > .field { margin-bottom: 0; }
.vsheet__done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.vsheet__done .icon { width: 22px; height: 22px; color: var(--green); }
.vsheet__done code { font-size: 12px; font-weight: 500; color: var(--muted-2); font-family: ui-monospace, Menlo, Consolas, monospace; }
.vsheet__listen { display: flex; align-items: center; gap: 10px; }
.vsheet__close { margin-top: 4px; }
.vform__seg { width: 100%; }
.vform__seg .seg__item { padding: 0 6px; font-size: 13px; }
.vform__check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.vform__check-input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--pink); }

/* Запись и выбор файла */
.vrec { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.vrec__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: rgba(255, 77, 94, 0.16); border: 2px solid rgba(255, 77, 94, 0.6); transition: transform var(--t-fast) var(--ease); }
.vrec__btn:active { transform: scale(0.94); }
.vrec__btn.is-recording { background: var(--red); border-color: transparent; box-shadow: 0 0 0 6px rgba(255, 77, 94, 0.18); }
.vrec__btn.is-busy { background: var(--card-2); border-color: var(--line-2); }
.vrec__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--red); }
.vrec__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vrec__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrec__live { color: var(--red); }
.vrec__time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.vrec__note { font-size: 12px; line-height: 1.35; color: var(--muted); }
.vrec__note.is-warn { color: var(--amber); }
.vrec__note.is-error { color: var(--red); }
.vrec__level { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.vrec__level-bar { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--green); transition: width 80ms linear; }
.vrec__level-bar.is-loud { background: var(--red); }
.vrec__again { flex: 0 0 auto; min-height: 44px; }
.vrec .btn--sm { min-height: 44px; }

/* Результаты проверки клона */
.vcheck { display: flex; flex-direction: column; gap: 8px; }
.vcheck__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.vcheck__item { padding: 10px; border-radius: 12px; text-align: center; background: var(--card); border: 1px solid var(--line); }
.vcheck__value { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vcheck__label { margin-top: 2px; font-size: 11px; color: var(--muted); }
.vcheck__item.is-good .vcheck__value { color: var(--green); }
.vcheck__item.is-ok .vcheck__value { color: var(--amber); }
.vcheck__item.is-bad .vcheck__value { color: var(--red); }
.vcheck__warn { list-style: disc; margin: 0; padding: 8px 12px 8px 28px; border-radius: 12px; font-size: 12px; line-height: 1.4; color: var(--amber); background: rgba(255, 181, 71, 0.08); border: 1px solid rgba(255, 181, 71, 0.3); }

/* Дизайн по описанию */
.vdesign__examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.vdesign__example { min-height: 44px; height: auto; padding: 6px 12px; font-size: 12px; font-weight: 500; line-height: 1.3; text-align: left; white-space: normal; }
.vdesign__results { display: flex; flex-direction: column; gap: 8px; }
.vdesign__results:empty { display: none; }
.vdesign__hint { font-size: 12px; color: var(--muted); }
.vdesign__card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); }
.vdesign__card-body { flex: 1; min-width: 0; }
.vdesign__card-title { font-size: 14px; font-weight: 800; }
.vdesign__card-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdesign__card .btn { flex: 0 0 auto; min-height: 44px; }
.vdesign__card-warn { margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--amber); }

/* Голоса: переключатель «Доступен пользователям» в строке своего голоса */
.vlist__access { margin-top: 6px; gap: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.vlist__access.is-on { color: var(--text); }
.vlist__access:disabled { opacity: 0.6; }