:root {
  color-scheme: light;
  --v-bg: #e7e7e5;
  --v-panel: #f0f0ef;
  --v-card: #ffffff;
  --v-text: #252126;
  --v-muted: #69636b;
  --v-line: #d8d5d2;
  --v-primary: #4f9f93;
  --v-primary-dark: #31796f;
  --v-accent: #e56f8f;
  --v-purple: #7028f4;
  --v-soft: #e7f8ef;
  --ink: var(--v-text);
  --text: var(--v-text);
  --muted: var(--v-muted);
  --line: var(--v-line);
  --panel: var(--v-panel);
  --primary: var(--v-primary);
  --primary-dark: var(--v-primary-dark);
  --accent: var(--v-accent);
  --soft-pink: #ffe6ef;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --v-bg: #171619;
  --v-panel: #242326;
  --v-card: #2c2a2e;
  --v-text: #f7f4f1;
  --v-muted: #bbb4ae;
  --v-line: #4b484e;
  --v-primary: #79c7b8;
  --v-primary-dark: #a1ded3;
  --v-accent: #ff8bab;
  --v-soft: #253a36;
}

* { box-sizing: border-box; }
[hidden],.hidden { display: none !important; }
html,body { min-height: 100%; margin: 0; font-family: Inter,"Segoe UI","Microsoft YaHei",Arial,sans-serif; color: var(--v-text); }
body { background: radial-gradient(circle at 8% 0,rgba(235,214,222,.28),transparent 28%),radial-gradient(circle at 98% 100%,rgba(205,228,223,.3),transparent 32%),var(--v-bg); }
html[data-theme="dark"] body { background: radial-gradient(circle at 8% 0,rgba(92,35,55,.24),transparent 26%),radial-gradient(circle at 98% 100%,rgba(35,91,79,.2),transparent 30%),var(--v-bg); }
button,input,select { font: inherit; }

.vocal-promo { min-height: 44px; border-bottom: 1px solid #a62d62; background: linear-gradient(90deg,#d64b73 0%,#c13766 52%,#a62d62 100%); color: #fff; }
.vocal-promo-inner { width: min(1160px,calc(100% - 32px)); min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 auto; }
.vocal-promo-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }
.vocal-promo-copy > span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.34); border-radius: 8px; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 850; white-space: nowrap; }
.vocal-promo-copy strong { font-size: 16px; }
.vocal-promo-copy small { color: rgba(255,255,255,.82); font-size: 13px; }
.vocal-promo-action { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.96); color: #9c2857; font-size: 13px; font-weight: 850; text-decoration: none; white-space: nowrap; }

.vocal-shell { width: min(1480px,calc(100% - 28px)); margin: 0 auto; padding: 12px 0 30px; }
.vocal-topbar,.vocal-topbar.is-stuck { min-height: 66px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px; padding: 9px 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(16,15,18,.96); color: #f7f4f1; box-shadow: 0 12px 32px rgba(0,0,0,.16); backdrop-filter: blur(10px); }
.vocal-brand { display: inline-flex; align-items: center; gap: 10px; color: #f7f4f1; text-decoration: none; font-size: 24px; }
.vocal-brand strong { font-weight: 850; line-height: 1; }
.vocal-brand img { width: 44px; height: 44px; border-radius: 7px; }
.vocal-nav-actions { display: flex; align-items: center; gap: 8px; }
.vocal-preferences { display: contents; }
.vocal-language select,.vocal-topbar .language-menu__button,.vocal-theme { height: 38px; border: 1px solid rgba(255,255,255,.2); background: #242326; color: #f7f4f1; }
.vocal-language select,.vocal-topbar .language-menu__button { border-radius: 6px; }
.vocal-language select { min-width: 112px; padding: 0 9px; }
.vocal-theme { width: 38px; display: grid; place-items: center; border-radius: 7px; cursor: pointer; }
.vocal-user-chip { max-width: min(390px,38vw); height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: #fff; color: #2f2940; }
.vocal-user-avatar { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 850; }
.vocal-user-name { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 750; }
.vocal-auth-button,.vocal-logout { min-width: 58px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: #242326; color: #f7f4f1; font: inherit; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; }
.vocal-auth-button:hover,.vocal-auth-button:focus-visible,.vocal-logout:hover,.vocal-logout:focus-visible { border-color: rgba(255,255,255,.44); background: #302e32; }
.vocal-logout:disabled { opacity: .62; cursor: wait; }
.vocal-topbar .tool-switcher { --tool-switcher-line: rgba(255,255,255,.2); --tool-switcher-panel: #242326; --tool-switcher-text: #f7f4f1; --tool-switcher-muted: #bbb4ae; }
.vocal-topbar .tool-switcher summary { background: transparent; }
.vocal-topbar .tool-switcher__item-icon { border-color: rgba(255,255,255,.1); background: #343236; color: #fffaf5; }
.vocal-topbar .tool-switcher__item-icon::after { background: var(--v-purple); }
.vocal-topbar .tool-switcher__current { background: rgba(112,40,244,.2); color: #c4a6ff; }

.vocal-workspace { min-height: calc(100svh - 160px); display: grid; grid-template-columns: minmax(340px,.82fr) minmax(600px,1.28fr); grid-template-rows: auto; gap: clamp(26px,3vw,48px); margin-top: 12px; padding: clamp(22px,2.5vw,36px); border: 1px solid rgba(255,255,255,.46); border-radius: 20px; background: #e8e8e6; box-shadow: 0 22px 60px rgba(0,0,0,.24); }
.vocal-workspace-tabs { grid-column: 1 / -1; margin-bottom: calc(clamp(26px,3vw,48px) * -1 + 12px); }
.vocal-intro { min-width: 0; display: flex; flex-direction: column; padding: 28px 16px 24px 12px; }
.vocal-kicker { margin: 0 0 15px; color: var(--v-purple); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.vocal-intro h1 { max-width: 620px; margin: 0; color: #242126; font-size: clamp(40px,4.4vw,66px); line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.vocal-summary { max-width: 650px; margin: 19px 0 0; color: #69636b; font-size: 16px; line-height: 1.72; }
.vocal-free-preview-note { width: fit-content; max-width: 650px; display: inline-flex; align-items: center; gap: 9px; margin: 16px 0 0; padding: 8px 11px 8px 8px; border: 1px solid #d9cbea; border-radius: 999px; background: rgba(255,255,255,.58); color: #5c3e79; font-size: 12px; font-weight: 750; line-height: 1.45; }
.vocal-free-preview-note > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #fff0bd; color: #765700; font-size: 12px; font-weight: 900; }
.vocal-free-preview-copy { min-width: 0; }
.vocal-benefits { display: grid; gap: 12px; margin-top: auto; padding-top: 28px; }
.vocal-benefit { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(79,159,147,.14); border-radius: 13px; background: rgba(255,255,255,.36); }
.vocal-benefit > span:last-child { min-width: 0; display: grid; gap: 4px; }
.vocal-benefit strong { color: #2a252b; font-size: 15px; }
.vocal-benefit small { color: #69636b; font-size: 12px; line-height: 1.5; }
.vocal-benefit-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(79,159,147,.2); border-radius: 12px; background: #e7f8ef; color: #3f9387; }
.vocal-benefit-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.vocal-tool-card { min-width: 0; align-self: stretch; padding: 24px 28px 28px; border: 1px solid #d6d2cf; border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 14px 36px rgba(38,30,26,.1); }
.vocal-tool-heading { padding-bottom: 18px; border-bottom: 1px solid #e2dfdc; }
.vocal-tool-heading span { color: var(--v-purple); font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.vocal-tool-heading h2 { margin: 5px 0 0; color: #252126; font-size: 22px; }
.vocal-form { display: grid; gap: 14px; padding-top: 20px; }
.vocal-target-picker { display: grid; gap: 10px; padding: 13px; border: 1px solid #d8d5d2; border-radius: 13px; background: #f7f6f5; }
.vocal-target-options { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.vocal-target-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vocal-target-heading > div { min-width: 0; }
.vocal-target-heading > div > span { display: block; margin-bottom: 2px; color: var(--v-purple); font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.vocal-target-heading h3 { margin: 0; color: #2b272c; font-size: 17px; }
.vocal-settings-open { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; padding: 0 12px; border: 1px solid #ded5ee; border-radius: 9px; background: #f6f1ff; color: #6730bf; font-size: 12px; font-weight: 800; cursor: pointer; }
.vocal-settings-open:hover { border-color: #a67bd9; background: #ede2ff; }
.vocal-settings-open:focus-visible { outline: 2px solid var(--v-purple); outline-offset: 2px; }
.vocal-settings-open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vocal-target-option { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 100%; min-height: 68px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; padding: 10px 12px 10px 15px; border: 1px solid #ddd9d6; border-radius: 11px; background: #fff; color: #2b272c; text-align: left; box-shadow: none; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.vocal-target-option:not(.is-coming-soon):not(.is-selected):hover { border-color: #bda9d9; background: #fbf9ff; }
.vocal-target-option.is-selected { border-color: #9b70d1; background: #f7f3ff; box-shadow: 0 3px 12px rgba(82,36,142,.09); }
.vocal-target-option.is-selected::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--v-purple); }
.vocal-target-option.is-selected:focus-visible { outline: 2px solid var(--v-purple); outline-offset: 2px; }
.vocal-target-option.is-coming-soon { grid-template-columns: 42px minmax(0,1fr) auto; border-color: #e2dfdc; background: #fff; box-shadow: none; opacity: .82; }
.vocal-target-option.is-coming-soon .vocal-target-icon { width: 34px; height: 34px; justify-self: center; background: #f0eeec; color: #8a838b; font-size: 16px; }
.vocal-target-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: #eadfff; color: var(--v-purple); }
.vocal-target-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vocal-target-icon svg.vocal-instrument-cartoon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.vocal-target-copy { min-width: 0; display: grid; gap: 3px; }
.vocal-target-copy strong { font-size: 14px; }
.vocal-target-copy small { color: #716b75; font-size: 12px; line-height: 1.4; }
.vocal-target-status { color: #8a838b; font-size: 12px; font-weight: 800; white-space: nowrap; }
.vocal-target-settings-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 2px; color: #716b75; font-size: 12px; line-height: 1.45; }
.vocal-target-settings-summary strong { color: #3d373f; font-weight: 800; }
.vocal-source-stage { min-width: 0; }
.vocal-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vocal-file-picker { min-height: 180px; }
.vocal-file-card { min-height: 70px; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px; border: 1px solid #d8d5d2; border-radius: 11px; background: #fff; }
.vocal-file-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #f0f0ef; color: var(--v-purple); font-size: 20px; }
.vocal-file-card div { min-width: 0; flex: 1; }
.vocal-file-card strong,.vocal-file-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vocal-file-card small { margin-top: 4px; color: #716b75; font-size: 12px; }
.vocal-file-card button { min-height: 36px; padding: 0 10px; border: 1px solid #d8d5d2; border-radius: 8px; background: #f7f6f8; color: #3c3740; cursor: pointer; }
.vocal-recorder { min-height: 350px !important; }
.vocal-submit { position: relative; width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 16px; overflow: hidden; border: 0; border-radius: 9px; background: linear-gradient(90deg,#ffc516 0%,#ffd21a 100%); color: #211d16; box-shadow: 0 14px 28px rgba(226,171,0,.18); cursor: pointer; font-size: 16px; font-weight: 850; }
.vocal-submit:not(:disabled):hover { background: linear-gradient(90deg,#ffd02a 0%,#ffdc3c 100%); }
.vocal-submit:disabled { opacity: .42; box-shadow: none; cursor: not-allowed; }
.vocal-submit.processing:disabled { opacity: 1; box-shadow: 0 14px 28px rgba(226,171,0,.18); cursor: wait; }
.vocal-submit-copy { position: relative; z-index: 1; display: grid; gap: 2px; text-align: center; }
.vocal-submit-copy strong { font-size: 16px; }
.vocal-submit-copy small { font-size: 12px; font-weight: 750; opacity: .72; }
.vocal-submit b { position: relative; z-index: 1; min-width: 34px; font-size: 21px; text-align: right; }
.vocal-submit > i { position: absolute; inset: auto 0 0; width: 0; height: 5px; background: rgba(87,59,0,.38); transition: width .35s ease; }
.vocal-submit.indeterminate > i { visibility: hidden; }
.vocal-submit.indeterminate b { min-width: 22px; width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid rgba(87,59,0,.24); border-top-color: currentColor; border-radius: 50%; animation: vocal-spin .85s linear infinite; }
@keyframes vocal-spin { to { transform: rotate(360deg); } }
.vocal-service-status { min-height: 18px; margin: -3px 2px 0; color: #716b75; font-size: 12px; }
.vocal-service-status.ready { display: none; }
.vocal-service-status.error { color: #a32b50; }
.vocal-privacy { display: flex; gap: 8px; margin: -2px 2px 0; color: #716b75; font-size: 12px; line-height: 1.55; }
.vocal-privacy span { color: var(--v-primary); }

.vocal-result,.vocal-history,.vocal-message { grid-column: 1 / -1; }
.vocal-workspace:has(> .vocal-result:not([hidden])) > :is(.vocal-intro,.vocal-tool-card) { display: none; }
.vocal-workspace:has(> .vocal-history:not([hidden])) > :is(.vocal-intro,.vocal-tool-card,.vocal-result) { display: none; }
.vocal-result { padding: 24px; border: 1px solid #d6d2cf; border-radius: 17px; background: #fff; }
.vocal-result-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.vocal-result-heading > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #e7f8ef; color: var(--v-primary-dark); font-weight: 900; }
.vocal-result-heading h2 { margin: 0; color: #252126; }
.vocal-result-heading p { margin: 5px 0 0; color: #716b75; }
.vocal-preview-notice { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: #716b75; font-size: 13px; }
.vocal-preview-notice span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff1bd; color: #8d6700; font-size: 12px; font-weight: 900; }
.vocal-mixer { overflow: hidden; border: 1px solid #d8d5d2; border-radius: 14px; background: #f7f6f5; }
.vocal-mixer-transport { min-height: 74px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #dedbd8; background: #fff; color: #716b75; font-variant-numeric: tabular-nums; }
.vocal-mixer-transport time:first-of-type { color: #252126; font-size: 29px; font-weight: 850; letter-spacing: -.04em; }
.vocal-mixer-transport time:last-of-type,.vocal-mixer-transport > span { font-size: 15px; }
.vocal-mix-play { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: #252126; color: #fff; cursor: pointer; font-size: 22px; }
.vocal-mix-play:hover:not(:disabled) { transform: translateY(-1px); background: #3b353c; }
.vocal-mix-play:disabled { opacity: .38; cursor: wait; }
.vocal-mix-play span { transform: translateX(1px); }
.vocal-mixer-track { padding: 13px 14px 14px; background: #fbfaf9; transition: opacity .18s ease,background .18s ease; }
.vocal-mixer-track + .vocal-mixer-track { border-top: 1px solid #dedbd8; }
.vocal-mixer-track.is-off { background: #f1f0ef; }
.vocal-mixer-track-head { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; margin-bottom: 9px; }
.vocal-mixer-track-head strong { color: #2b272c; font-size: 15px; }
.vocal-track-number { color: var(--v-purple); font-size: 12px; font-weight: 900; }
.vocal-mute-toggle { min-width: 84px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 850; }
.vocal-mute-toggle svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vocal-mute-toggle.is-on { border-color: rgba(79,159,147,.28); background: #e7f8ef; color: #31796f; }
.vocal-mute-toggle.is-off { border-color: #d7d3d0; background: #e6e4e2; color: #777178; }
.vocal-mute-toggle.is-off svg path:nth-child(n+2) { opacity: .18; }
.vocal-waveform { position: relative; width: 100%; height: 104px; display: block; overflow: hidden; padding: 0; border: 1px solid #e3e0dd; border-radius: 9px; background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,243,241,.92)); cursor: crosshair; }
.vocal-waveform::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(75,67,76,.08); pointer-events: none; }
.vocal-waveform canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vocal-waveform > i { position: absolute; inset: 0 auto 0 0; width: 0; border-right: 2px solid #f0b400; background: rgba(255,201,20,.09); pointer-events: none; }
.vocal-mixer-track.is-off .vocal-waveform { opacity: .68; }
.vocal-mixer audio {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 0;
  bottom: 0;
  pointer-events: none;
}
.vocal-full-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(118px,148px); align-items: stretch; gap: 10px; margin-top: 16px; }
.vocal-confirm { width: 100%; min-width: 0; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; border: 0; border-radius: 9px; background: linear-gradient(90deg,#ffc516 0%,#ffd21a 100%); color: #211d16; box-shadow: 0 14px 28px rgba(226,171,0,.16); cursor: pointer; font-weight: 850; }
.vocal-action-spinner { display: none; width: 19px; height: 19px; flex: 0 0 auto; border: 2px solid rgba(33,29,22,.25); border-top-color: #211d16; border-radius: 50%; }
.vocal-confirm.is-loading .vocal-action-spinner { display: block; animation: vocal-spin .8s linear infinite; }
.vocal-confirm.is-loading > b { display: none; }
.vocal-confirm small { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; background: rgba(33,29,22,.1); font-size: 12px; font-weight: 850; letter-spacing: .02em; }
.vocal-confirm:hover { background: linear-gradient(90deg,#ffd02a 0%,#ffdc3c 100%); }
.vocal-confirm:disabled { opacity: .65; cursor: wait; }
.vocal-output-format { min-width: 0; display: grid; align-content: center; gap: 4px; padding: 7px 9px; border: 1px solid #d8d5d2; border-radius: 9px; background: #f7f6f8; }
.vocal-output-format > small { color: #716b75; font-size: 12px; font-weight: 750; white-space: nowrap; }
.vocal-output-format select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #252126; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.vocal-output-format:focus-within { border-color: var(--v-primary); box-shadow: 0 0 0 3px rgba(79,159,147,.14); }
.vocal-output-format:has(select:disabled) { opacity: .58; }
html[data-theme="dark"] .vocal-output-format { border-color: #4b484e; background: #302d33; }
html[data-theme="dark"] .vocal-output-format > small { color: #b5aeb8; }
html[data-theme="dark"] .vocal-output-format select { color: #f7f4f1; color-scheme: dark; }
.vocal-result-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.vocal-result-actions button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; border-radius: 9px; text-decoration: none; font-weight: 800; cursor: pointer; }
.vocal-result-actions button { border: 1px solid #d8d5d2; background: #f7f6f8; color: #3c3740; }
.vocal-message { min-height: 0; margin: 0; color: #a32b50; font-size: 13px; line-height: 1.55; }
.vocal-message:not(:empty) { margin-top: 12px; padding: 11px 13px; border: 1px solid #dfa0af; border-radius: 10px; background: #fff0f3; color: #972342; font-weight: 800; }
html[data-theme="dark"] .vocal-message:not(:empty) { border-color: #743745; background: #382329; color: #ff9eb1; }
.vocal-purchased-balance { margin: 16px 0 10px; padding: 12px 16px; border: 1px solid #91cfa2; border-radius: 12px; background: #eaf8ee; color: #185b2e; font-size: 14px; font-weight: 700; }
html[data-theme="dark"] .vocal-purchased-balance { background: #203c29; border-color: #477c57; color: #c7f1d3; }
.vocal-history { min-height: 270px; padding: 0 2px 8px; }
.vocal-history .section-head { margin-top: 0; }
.vocal-history .ghost { min-height: 36px; padding: 0 13px; border: 1px solid #d8d5d2; border-radius: 8px; background: #f7f6f8; color: #3c3740; cursor: pointer; font-weight: 750; }
.vocal-task-list { display: grid; gap: 10px; margin-top: 14px; }
.vocal-history-retention { margin: 2px 0 12px; padding: 10px 12px; border: 1px solid #dcd6df; border-radius: 9px; background: #f8f6f9; color: #716b75; font-size: 12px; line-height: 1.55; }
.vocal-task-list .job { border-color: #d8d5d2; border-radius: 10px; }
.vocal-task-list .job-meta { font-size: 12px; }
.vocal-task-list-empty { padding: 46px 18px; border: 1px dashed #d8d5d2; border-radius: 12px; color: #716b75; text-align: center; }
.vocal-task-list-error { color: #a32b50; }
.vocal-task-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 2px; color: #716b75; font-size: 13px; }
.vocal-task-pagination .ghost { min-width: 76px; }
.vocal-footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 5px 0; color: var(--v-muted); font-size: 12px; }
.vocal-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.vocal-footer a { color: inherit; text-decoration: none; }
.vocal-loading { position: fixed; inset: 0 0 auto; z-index: 100; height: 3px; opacity: 0; overflow: hidden; pointer-events: none; }
.vocal-loading.active { opacity: 1; }
.vocal-loading span { display: block; width: 38%; height: 100%; background: linear-gradient(90deg,var(--v-accent),var(--v-primary),#f7c96c); animation: vocal-load 1s ease-in-out infinite; }
@keyframes vocal-load { from { transform: translateX(-120%); } to { transform: translateX(300%); } }

body.vocal-modal-open { overflow: hidden; }
.vocal-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.vocal-downloads:empty { display: none; }
.vocal-downloads a { padding: 12px 18px; border: 1px solid var(--v-primary); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--v-primary); text-decoration: none; }
.vocal-settings-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 18px; }
.vocal-settings-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(19,17,21,.72); backdrop-filter: blur(5px); cursor: pointer; }
.vocal-settings-dialog { position: relative; width: min(660px,100%); max-height: min(760px,calc(100svh - 36px)); overflow: auto; border: 1px solid rgba(255,255,255,.58); border-radius: 20px; background: #fff; color: #252126; box-shadow: 0 28px 90px rgba(0,0,0,.34); }
.vocal-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 24px 20px; border-bottom: 1px solid #e7e3e0; }
.vocal-settings-header p { margin: 0 0 5px; color: var(--v-purple); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.vocal-settings-header h2 { margin: 0; font-size: 29px; letter-spacing: -.035em; }
.vocal-settings-header span { display: block; max-width: 500px; margin-top: 7px; color: #716b75; font-size: 12px; line-height: 1.55; }
.vocal-settings-close { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 9px; background: #f0eeec; color: #777178; cursor: pointer; font-size: 25px; line-height: 1; }
.vocal-settings-close:hover { color: #252126; }
.vocal-settings-body { display: grid; gap: 0; }
.vocal-verification-dialog { width: min(500px,100%); }
.vocal-verification-header h2 { font-size: 25px; }
.vocal-verification-body { display: grid; justify-items: center; gap: 14px; padding: 24px; }
.vocal-turnstile-slot { width: min(100%, 360px); min-height: 65px; display: grid; place-items: center; }
.vocal-turnstile-slot:empty::before { content: ""; width: 28px; height: 28px; border: 3px solid #ded9e0; border-top-color: var(--v-purple); border-radius: 50%; animation: vocal-spin .8s linear infinite; }
.vocal-verification-message { min-height: 20px; margin: 0; color: #716b75; font-size: 13px; line-height: 1.5; text-align: center; }
.vocal-verification-message.error { color: #b3264f; }
@keyframes vocal-spin { to { transform: rotate(360deg); } }
.vocal-settings-group { min-width: 0; margin: 0; padding: 22px 24px; border: 0; border-bottom: 1px solid #e7e3e0; }
.vocal-settings-group legend { width: 100%; padding: 0; color: #625c64; font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.vocal-settings-group > p { margin: 7px 0 13px; color: #716b75; font-size: 12px; line-height: 1.55; }
.vocal-network-option { min-height: 72px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 13px; border: 1px solid #ddd9d6; border-radius: 12px; background: #faf9f8; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.vocal-network-option:hover { border-color: #b8b2b7; transform: translateY(-1px); }
.vocal-network-option.is-selected { border-color: #9b70d1; background: #f7f3ff; box-shadow: 0 3px 12px rgba(82,36,142,.08); }
.vocal-network-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vocal-radio-dot { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #b8b3b8; border-radius: 50%; background: #fff; }
.vocal-network-option input:checked + .vocal-radio-dot { border-color: var(--v-purple); background: #f4ecff; }
.vocal-network-option input:checked + .vocal-radio-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--v-purple); }
.vocal-network-option > span:nth-of-type(2) { min-width: 0; display: grid; gap: 4px; }
.vocal-network-option strong { font-size: 15px; }
.vocal-network-option small { color: #716b75; font-size: 12px; line-height: 1.45; }
.vocal-network-option em { padding: 5px 8px; border: 1px solid #ffb8c2; border-radius: 999px; background: #ffe3e7; color: #c51f36; font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.vocal-network-option input:focus-visible + .vocal-radio-dot { outline: 3px solid rgba(112,40,244,.22); outline-offset: 2px; }
.vocal-quality-setting { min-height: 78px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 20px 24px; padding: 12px 13px; border: 1px solid #e0ddda; border-radius: 12px; background: #faf9f8; }
.vocal-quality-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #fff1bd; color: #8d6700; }
.vocal-quality-setting > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.vocal-quality-setting strong { font-size: 14px; }
.vocal-quality-setting small { color: #716b75; font-size: 12px; line-height: 1.45; }
.vocal-quality-setting em { color: var(--v-primary-dark); font-size: 12px; font-style: normal; font-weight: 850; }
.vocal-settings-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid #e7e3e0; }
.vocal-settings-actions button { min-height: 44px; padding: 0 18px; border: 1px solid #d8d5d2; border-radius: 9px; background: #f7f6f5; color: #3d373f; cursor: pointer; font-weight: 800; }
.vocal-settings-actions .vocal-settings-save { min-width: 150px; border-color: #ffc516; background: linear-gradient(90deg,#ffc516,#ffd629); color: #211d16; }

/* Keep supporting copy readable even when it comes from shared site controls. */
.vocal-shell small,
.vocal-shell em,
.vocal-shell legend,
.vocal-shell .recorder-kicker,
.vocal-shell .system-capture-guide p,
.vocal-shell .recorder-status-row,
.vocal-shell .recording-preview-head span,
.vocal-shell .recording-preview-head strong,
.vocal-shell .recording-preview-meta,
.vocal-shell .recording-discard,
.vocal-shell .recorder-privacy { font-size: 12px; }
body:not(.admin-entry) .vocal-shell .tool-switcher__current,
body:not(.admin-entry) .vocal-shell .recorder-kicker,
body:not(.admin-entry) .vocal-shell .system-capture-guide p,
body:not(.admin-entry) .vocal-shell .recorder-status-row,
body:not(.admin-entry) .vocal-shell .recording-preview-head span,
body:not(.admin-entry) .vocal-shell .recording-preview-head strong,
body:not(.admin-entry) .vocal-shell .recording-preview-meta,
body:not(.admin-entry) .vocal-shell .recording-discard,
body:not(.admin-entry) .vocal-shell .recorder-privacy { font-size: 12px; }

html[data-theme="dark"] .vocal-workspace { border-color: #413e43; background: #211f23; }
html[data-theme="dark"] .vocal-intro h1,html[data-theme="dark"] .vocal-benefit strong,html[data-theme="dark"] .vocal-tool-heading h2,html[data-theme="dark"] .vocal-result-heading h2,html[data-theme="dark"] .vocal-mixer-track-head strong,html[data-theme="dark"] .vocal-mixer-transport time:first-of-type { color: #f7f4f1; }
html[data-theme="dark"] .vocal-summary,html[data-theme="dark"] .vocal-benefit small,html[data-theme="dark"] .vocal-file-card small,html[data-theme="dark"] .vocal-privacy,html[data-theme="dark"] .vocal-service-status,html[data-theme="dark"] .vocal-result-heading p,html[data-theme="dark"] .vocal-preview-notice,html[data-theme="dark"] .vocal-mixer-transport { color: #bbb4ae; }
html[data-theme="dark"] .vocal-benefit { border-color: #3e3a40; background: rgba(255,255,255,.025); }
html[data-theme="dark"] .vocal-free-preview-note { border-color: #514064; background: #30283a; color: #dec9ef; }
html[data-theme="dark"] .vocal-benefit-icon { border-color: #3b5651; background: #253a36; color: #79c7b8; }
html[data-theme="dark"] .vocal-tool-card,html[data-theme="dark"] .vocal-result { border-color: #474349; background: #2a282c; }
html[data-theme="dark"] .vocal-history .job { border-color: #474349; background: #2a282c; }
html[data-theme="dark"] .vocal-history .ghost { border-color: #4b484e; background: #353238; color: #f7f4f1; }
html[data-theme="dark"] .vocal-history-retention { border-color: #48434b; background: #2e2a31; color: #bbb4ae; }
html[data-theme="dark"] .vocal-task-list-empty { border-color: #4b484e; color: #bbb4ae; }
html[data-theme="dark"] .vocal-task-pagination { color: #bbb4ae; }
html[data-theme="dark"] .vocal-tool-heading { border-color: #474349; }
html[data-theme="dark"] .vocal-file-card,html[data-theme="dark"] .vocal-mixer { border-color: #4b484e; background: #242326; color: #f7f4f1; }
html[data-theme="dark"] .vocal-mixer-transport { border-color: #4b484e; background: #211f23; }
html[data-theme="dark"] .vocal-mixer-track { background: #2d2a2f; }
html[data-theme="dark"] .vocal-mixer-track + .vocal-mixer-track { border-color: #4b484e; }
html[data-theme="dark"] .vocal-mixer-track.is-off { background: #272529; }
html[data-theme="dark"] .vocal-waveform { border-color: #49464b; background: linear-gradient(180deg,#272529,#222023); }
html[data-theme="dark"] .vocal-mute-toggle.is-on { border-color: #3b625b; background: #253a36; color: #9bdbce; }
html[data-theme="dark"] .vocal-mute-toggle.is-off { border-color: #4b484e; background: #353238; color: #b7b0b9; }
html[data-theme="dark"] .vocal-file-icon { background: #353238; color: #c4a6ff; }
html[data-theme="dark"] .vocal-file-card button { border-color: #4b484e; background: #353238; color: #f7f4f1; }
html[data-theme="dark"] .vocal-target-picker { border-color: #4b484e; background: #242326; }
html[data-theme="dark"] .vocal-target-heading h3,html[data-theme="dark"] .vocal-target-option,html[data-theme="dark"] .vocal-target-settings-summary strong { color: #f7f4f1; }
html[data-theme="dark"] .vocal-settings-open { border-color: #5d477a; background: #342841; color: #d6bdff; }
html[data-theme="dark"] .vocal-settings-open:hover { border-color: #9469cf; background: #433153; }
html[data-theme="dark"] .vocal-target-option { border-color: #4b484e; background: #302d33; }
html[data-theme="dark"] .vocal-target-option:not(.is-coming-soon):not(.is-selected):hover { border-color: #9469cf; background: #3b3046; color: #f7f4f1; }
html[data-theme="dark"] .vocal-target-option.is-selected { border-color: #9469cf; background: #352b40; }
html[data-theme="dark"] .vocal-target-option.is-coming-soon { border-color: #4b484e; background: #302d33; }
html[data-theme="dark"] .vocal-target-option.is-coming-soon .vocal-target-icon { background: #3a373d; color: #aaa2ad; }
html[data-theme="dark"] .vocal-target-icon { background: #49355c; color: #d9b8ff; }
html[data-theme="dark"] .vocal-target-copy small,html[data-theme="dark"] .vocal-target-settings-summary { color: #bbb4ae; }
html[data-theme="dark"] .vocal-target-status { color: #aaa2ad; }
html[data-theme="dark"] .vocal-settings-dialog { border-color: #4b484e; background: #2a282c; color: #f7f4f1; }
html[data-theme="dark"] .vocal-settings-header,html[data-theme="dark"] .vocal-settings-group,html[data-theme="dark"] .vocal-settings-actions { border-color: #4b484e; }
html[data-theme="dark"] .vocal-settings-header span,html[data-theme="dark"] .vocal-settings-group > p,html[data-theme="dark"] .vocal-network-option small,html[data-theme="dark"] .vocal-quality-setting small { color: #bbb4ae; }
html[data-theme="dark"] .vocal-settings-close,html[data-theme="dark"] .vocal-settings-actions button { border-color: #4b484e; background: #353238; color: #f7f4f1; }
html[data-theme="dark"] .vocal-verification-message { color: #bbb4ae; }
html[data-theme="dark"] .vocal-verification-message.error { color: #ff9cac; }
html[data-theme="dark"] .vocal-network-option { border-color: #48454b; background: #302d33; }
html[data-theme="dark"] .vocal-network-option.is-selected { border-color: #9469cf; background: #352b40; }
html[data-theme="dark"] .vocal-radio-dot { border-color: #6c666e; background: #242326; }
html[data-theme="dark"] .vocal-network-option input:checked + .vocal-radio-dot { border-color: #b992ef; background: #49355c; }
html[data-theme="dark"] .vocal-network-option input:checked + .vocal-radio-dot::after { background: #d9b8ff; }
html[data-theme="dark"] .vocal-network-option em { border-color: #a83b4a; background: #56232b; color: #ff9cac; }
html[data-theme="dark"] .vocal-quality-setting { border-color: #4b484e; background: #242326; }
html[data-theme="dark"] .vocal-settings-actions .vocal-settings-save { border-color: #ffc516; background: linear-gradient(90deg,#ffc516,#ffd629); color: #211d16; }

@media (min-width: 821px) {
  .vocal-nav-actions { display: contents; }
  .vocal-topbar .tool-switcher { order: 2; margin-left: 18px; }
  .vocal-topbar .language-picker { order: 8; margin-left: auto; }
  .vocal-topbar .vocal-theme { order: 9; }
  .vocal-topbar .vocal-user-chip { order: 10; }
  .vocal-topbar .vocal-auth-button,.vocal-topbar .vocal-logout { order: 11; }
  .vocal-topbar .vocal-theme { padding: 0; border-radius: 6px; }
  .vocal-topbar .vocal-user-chip { max-width: min(320px,40vw); height: 36px; gap: 8px; padding: 0 10px 0 6px; }
  .vocal-topbar .vocal-user-name { max-width: none; font-weight: 650; }
  .vocal-topbar .vocal-auth-button,.vocal-topbar .vocal-logout { min-width: 58px; height: 36px; padding: 0 12px; border-radius: 6px; font-size: 16px; font-weight: 400; }
}

@media (max-width: 1080px) {
  .vocal-workspace { grid-template-columns: minmax(280px,.68fr) minmax(0,1.32fr); gap: 24px; }
}

@media (max-width: 900px) {
  .vocal-workspace { min-height: 0; grid-template-columns: minmax(0,1fr); gap: 18px; padding: 18px; }
  .vocal-intro { padding: 24px 12px 8px; }
  .vocal-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 0; padding-top: 22px; }
  .vocal-benefit { grid-template-columns: 38px minmax(0,1fr); padding: 10px; }
  .vocal-benefit-icon { width: 38px; height: 38px; }
}

@media (max-width: 820px) {
  .vocal-promo-inner { padding: 6px 0; }
  .vocal-promo-copy { gap: 6px 8px; flex-wrap: wrap; }
  .vocal-promo-copy small { flex-basis: 100%; font-size: 12px; }
  .vocal-shell { width: calc(100% - 16px); padding-top: 8px; }
  .vocal-topbar,.vocal-topbar.is-stuck { display: grid; grid-template-columns: minmax(0,1fr) auto auto; min-height: 58px; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 12px; }
  .vocal-nav-actions,.vocal-topbar.is-stuck .vocal-nav-actions { display: contents; width: auto; min-width: 0; }
  .vocal-brand { grid-area: 1 / 1; min-width: 0; font-size: 19px; }
  .vocal-brand img { width: 36px; height: 36px; }
  .vocal-topbar .tool-switcher { grid-area: 1 / 2; margin: 0; }
  .vocal-topbar .vocal-auth-button,.vocal-topbar .vocal-logout { grid-area: 1 / 3; }
  .vocal-preferences { grid-area: 2 / 1 / 3 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.2); }
  .vocal-topbar .language-picker { margin: 0; }
  .vocal-topbar .vocal-theme,.vocal-topbar.is-stuck .vocal-theme { width: auto; min-width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
  .vocal-topbar .vocal-theme::after { content: attr(data-theme-label); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
  .vocal-user-chip { grid-area: 3 / 1 / 4 / 3; max-width: 100%; justify-self: start; }
  .vocal-topbar .tool-switcher summary { min-width: 108px; }
  .vocal-tool-card { padding: 20px; }
}

@media (max-width: 640px) {
  .vocal-workspace { padding: 14px; border-radius: 18px; }
  .vocal-intro { padding: 22px 6px 8px; }
  .vocal-intro h1 { font-size: clamp(38px,12vw,52px); }
  .vocal-summary { font-size: 15px; }
  .vocal-benefits { grid-template-columns: minmax(0,1fr); }
  .vocal-tool-card { padding: 14px; border-radius: 15px; }
  .vocal-source-picker { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .vocal-file-picker { min-height: 180px; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 12px; padding: 22px 16px; text-align: center; }
  .vocal-file-picker .file-picker-copy { justify-items: center; }
  .vocal-target-settings-summary { display: grid; gap: 4px; }
  .vocal-waveform { height: 88px; }
  .vocal-result-actions { flex-direction: column-reverse; }
  .vocal-result-actions button { width: 100%; }
  .vocal-footer { flex-direction: column; }
}

@media (max-width: 560px) {
  .vocal-user-chip { max-width: 100%; }
  .vocal-user-name { max-width: min(135px,34vw); }
  .vocal-task-pagination { justify-content: space-between; }
  .vocal-settings-modal { padding: 8px; }
  .vocal-settings-dialog { max-height: calc(100svh - 16px); border-radius: 15px; }
  .vocal-settings-header { padding: 20px 16px 16px; }
  .vocal-settings-header h2 { font-size: 25px; }
  .vocal-verification-body { padding: 22px 12px; }
  .vocal-settings-group { padding: 19px 16px; }
  .vocal-network-option { grid-template-columns: 22px minmax(0,1fr); }
  .vocal-network-option em { grid-column: 2; justify-self: start; }
  .vocal-quality-setting { grid-template-columns: 38px minmax(0,1fr); margin: 16px; }
  .vocal-quality-setting em { grid-column: 2; }
  .vocal-settings-actions { padding: 14px 16px 18px; }
  .vocal-settings-actions button { flex: 1; padding: 0 10px; }
}

@media (max-width: 430px) {
  .vocal-brand { gap: 7px; font-size: 17px; }
  .vocal-topbar .tool-switcher summary { min-width: 100px; gap: 6px; padding: 0 8px; font-size: 12px; }
  .vocal-topbar .vocal-auth-button,.vocal-topbar .vocal-logout { min-width: 0; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 400; }
  .vocal-full-controls { grid-template-columns: minmax(0,1fr) 108px; gap: 7px; }
  .vocal-confirm { gap: 6px; font-size: 13px; }
  .vocal-confirm small { padding-inline: 5px; }
  .vocal-output-format { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .vocal-loading span, .vocal-submit.indeterminate b { animation: none; }
}
.vocal-billing-dialog { width: min(860px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100svh - 40px); overflow: auto; padding: 32px; border: 1px solid #d9d5cf; border-radius: 20px; background: #fff; color: #252126; font: inherit; }
.vocal-billing-dialog::backdrop { background: rgb(20 18 22 / 55%); }
.vocal-billing-dialog h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 40px 16px 0; }
.vocal-billing-dialog p { font-size: 14px; line-height: 1.65; }
.vocal-billing-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 8px; font-size: 24px; cursor: pointer; }
.vocal-billing-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.vocal-billing-plan { padding: 20px; border: 1px solid #ded9d1; border-radius: 14px; }
.vocal-billing-plan h3 { font-size: 16px; margin: 0 0 18px; }
.vocal-billing-plan strong { font-size: 32px; }
.vocal-billing-plan button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: #f6d648; color: #272322; font: inherit; font-size: 14px; cursor: pointer; }
.vocal-billing-plan button:disabled { opacity: .55; cursor: not-allowed; }
.vocal-billing-notice { min-height: 24px; font-weight: 600; }
.vocal-billing-notice.is-pending, .vocal-billing-notice.is-paid { margin: 22px 0; padding: 20px; border-radius: 14px; font-size: 16px; }
.vocal-billing-notice.is-pending { background: #fff8d8; border: 1px solid #ecd77a; }
.vocal-billing-notice.is-paid { background: #eaf8ee; border: 1px solid #91cfa2; color: #185b2e; }
.vocal-billing-continue { width: 100%; padding: 14px 18px; border: 0; border-radius: 10px; background: #f6d648; color: #272322; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
html[data-theme="dark"] .vocal-billing-dialog { background: #2a282c; color: #f7f4f1; border-color: #4b484e; }
html[data-theme="dark"] .vocal-billing-notice.is-pending { background: #403b24; border-color: #74662f; }
html[data-theme="dark"] .vocal-billing-notice.is-paid { background: #203c29; border-color: #477c57; color: #c7f1d3; }
@media (max-width: 600px) { .vocal-billing-dialog { padding: 22px; } .vocal-billing-plans { grid-template-columns: 1fr; } }

/* Dark settings use the existing light purple and supporting-text palette. */
html[data-theme="dark"] :is(.vocal-target-heading span,.vocal-settings-header p){color:#c4a6ff}
html[data-theme="dark"] .vocal-settings-group legend{color:#bbb4ae}