.voice-demo-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--violet) 48%, var(--line));
  border-radius: 11px;
  background: #7c3aed1f;
  color: #a875ff;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.voice-demo-play:hover { border-color: var(--violet); transform: translateY(-1px); }
.voice-demo-play.is-playing { border-color: var(--violet); background: var(--violet); color: #fff; }
.voice-demo-play [data-play-icon] { width: 16px; text-align: center; }
.voice-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.voice-card-top .voice-head { min-width: 0; }
.voice-card-top .voice-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-card-top .avatar { width: 42px; min-width: 42px; max-width: 42px; height: 42px; min-height: 42px; max-height: 42px; flex: 0 0 42px; aspect-ratio: 1 / 1; border-radius: 50%; }
.standard-catalog .avatar { background: linear-gradient(135deg, var(--violet), var(--violet2)); }
.pro-catalog .avatar { background: linear-gradient(135deg, #0284c7, var(--cyan)); }
.voice-demo-play.voice-demo-icon { display: grid; width: 42px; min-width: 42px; height: 42px; min-height: 42px; margin: 0; padding: 0; place-items: center; border-radius: 50%; }
.voice-demo-play.voice-demo-icon [data-play-icon] { width: auto; line-height: 1; }
.voice-description { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.55; }
.voice-catalog-section { margin-top: 28px; }
.voice-catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #111823, #0c1119); }
.voice-catalog-heading > div { display: flex; align-items: center; gap: 13px; }
.voice-catalog-heading h2 { margin: 2px 0 0; font-size: 22px; }
.voice-catalog-heading p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: right; }
.voice-catalog-mark { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: #7c3aed24; color: #a875ff; font-size: 16px; font-weight: 850; }
.voice-catalog-mark.pro { background: #0ea5e91c; color: #38bdf8; }
.pro-catalog { margin-top: 46px; padding-top: 38px; border-top: 1px solid var(--line); }
.pro-catalog .eyebrow { color: #38bdf8; }
.pro-catalog .voice-catalog-heading { border-color: #0ea5e943; background: linear-gradient(145deg, #0d1a25, #0c1119); }
.pro-voice { border-color: #0ea5e93d; background: linear-gradient(145deg, #101c26, #101720); }
.voice-demo-play.pro-preview { border-color: #0ea5e966; background: #0ea5e918; color: #38bdf8; }
.voice-demo-play.pro-preview:hover { border-color: #0ea5e9; }
.voice-demo-play.pro-preview.is-playing { border-color: #0ea5e9; background: #0ea5e9; color: #fff; }
.voice-catalog-empty { padding: 24px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.voice-catalog-footnote { margin: 24px 0 0; color: var(--muted); font-size: 12px; }
@media(max-width:760px) { .voice-catalog-heading { align-items: flex-start; flex-direction: column; } .voice-catalog-heading p { text-align: left; } .pro-catalog { margin-top: 34px; padding-top: 28px; } }