mARTin-B78/tts-voice-creator-clone-and-design-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tags: comma-separated + DB autocomplete; collapsible opt-groups; reorder voice list pane

Browse Source 
Tags:
- Comma-separated input (tag1, tag2, tag3) with placeholder updated
- Custom autocomplete dropdown on last token, sources from _voices DB + localStorage
- All comma-separated tokens saved individually to localStorage reuse list

Inspector opt-groups:
- Each group wrapped in opt-group-body for clean collapse
- Chevron (▾/▸) in title, click title to toggle open/closed
- Transcript and Loudness open by default; others collapsed
- Loudness title preserves dBFS meta span + chevron

Voice list pane reorder:
- vl-synth-panel moved above vl-filters
- vl-filters now sits directly above voice-list

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mARTin-B78 2026-05-26 12:02:44 +02:00
parent 28f5ec2e25
commit ecef913837
3 changed files with 219 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
static/app.js
View File

@ -116,7 +116,7 @@ function selectVoice(wrap) {
<span class="insp-stars">${makeStars(rating)}</span> <span class="insp-stars">${makeStars(rating)}</span>
<span class="insp-rating-label">${rating}/5</span> <span class="insp-rating-label">${rating}/5</span>
</span> </span>
<input class="insp-tag-input" type="text" placeholder="add tag…" value="${escHtml(v.tag||'')}" list="insp-tag-opts" autocomplete="off"> <input class="insp-tag-input" type="text" placeholder="tag1, tag2…" value="${escHtml(v.tag||'')}" autocomplete="off">
</div> </div>
<div class="insp-note-delete-row"> <div class="insp-note-delete-row">
<div class="insp-note-slot"></div> <div class="insp-note-slot"></div>
@ -249,20 +249,71 @@ function selectVoice(wrap) {
}); });
genderSel?.addEventListener('change', () => applyGender(genderSel.value)); genderSel?.addEventListener('change', () => applyGender(genderSel.value));
// ── Tag input with reuse list ───────────────────────────────────────────── // ── Tag input — comma-separated, autocomplete from DB + localStorage ────────
const tagInput = inspector.querySelector('.insp-tag-input'); const tagInput = inspector.querySelector('.insp-tag-input');
let _tagDl = document.getElementById('insp-tag-opts');
if (!_tagDl) { _tagDl = document.createElement('datalist'); _tagDl.id = 'insp-tag-opts'; document.body.appendChild(_tagDl); }
_tagDl.innerHTML = getStoredTags().map(t => `<option value="${escHtml(t)}">`).join('');
tagInput.addEventListener('change', () => { const getAllKnownTags = () => {
const t = tagInput.value.trim(); const fromDb = (_voices || []).flatMap(vv =>
if (t) { addStoredTag(t); _tagDl.innerHTML = getStoredTags().map(x => `<option value="${escHtml(x)}">`).join(''); } (vv.tag || '').split(',').map(t => t.trim()).filter(Boolean));
const fromStorage = getStoredTags();
return [...new Set([...fromStorage, ...fromDb])].sort((a, b) => a.localeCompare(b));
};
const tagLastToken = val => val.split(',').pop().trimStart();
const tagReplaceLastToken = (val, rep) => {
const parts = val.split(',');
parts[parts.length - 1] = parts.length > 1 ? ' ' + rep : rep;
return parts.join(',');
};
let _tagDrop = null;
const hideTagDrop = () => { _tagDrop?.remove(); _tagDrop = null; };
const showTagDrop = () => {
hideTagDrop();
const token = tagLastToken(tagInput.value);
const all = getAllKnownTags();
const matches = all.filter(t =>
t.toLowerCase().startsWith(token.toLowerCase()) && t.toLowerCase() !== token.toLowerCase()
);
if (!matches.length) return;
_tagDrop = document.createElement('div');
_tagDrop.className = 'tag-suggest';
matches.slice(0, 10).forEach(tag => {
const btn = document.createElement('button');
btn.type = 'button'; btn.className = 'tag-suggest-item';
btn.textContent = tag;
btn.addEventListener('mousedown', e => {
e.preventDefault();
tagInput.value = tagReplaceLastToken(tagInput.value, tag);
tagInput.dispatchEvent(new Event('input'));
hideTagDrop();
tagInput.focus();
}); });
tagInput.addEventListener('input', debounce(async () => { _tagDrop.appendChild(btn);
});
document.body.appendChild(_tagDrop);
const r = tagInput.getBoundingClientRect();
_tagDrop.style.top = (r.bottom + 3) + 'px';
_tagDrop.style.left = r.left + 'px';
_tagDrop.style.minWidth = Math.max(r.width, 140) + 'px';
};
tagInput.addEventListener('input', () => showTagDrop());
tagInput.addEventListener('focus', () => showTagDrop());
tagInput.addEventListener('blur', () => setTimeout(hideTagDrop, 150));
tagInput.addEventListener('keydown', e => {
if (e.key === 'Escape') hideTagDrop();
if (e.key === ',' && _tagDrop) setTimeout(showTagDrop, 10);
});
const saveTagValue = debounce(async () => {
const tags = tagInput.value.split(',').map(t => t.trim()).filter(Boolean);
tags.forEach(addStoredTag);
v.tag = tagInput.value; v.tag = tagInput.value;
await saveMeta(voiceId, { tag: tagInput.value }); await saveMeta(voiceId, { tag: tagInput.value });
}, 800)); }, 700);
tagInput.addEventListener('input', saveTagValue);
tagInput.addEventListener('change', saveTagValue);
// ── Interactive rating (subtitle + meta kept in sync) ───────────────────── // ── Interactive rating (subtitle + meta kept in sync) ─────────────────────
const updateRating = async (newRating) => { const updateRating = async (newRating) => {
@ -306,9 +357,16 @@ function selectVoice(wrap) {
const maintTitle = body.querySelector('.opt-maintenance .opt-group-title'); const maintTitle = body.querySelector('.opt-maintenance .opt-group-title');
if (maintTitle) { if (maintTitle) {
maintTitle.innerHTML = `Loudness <span class="opt-group-meta">Current ${escHtml(dbfs)} dBFS</span>`; maintTitle.innerHTML = `Loudness <span class="opt-group-meta">Current ${escHtml(dbfs)} dBFS</span> <span class="opt-chevron">&#8964;</span>`;
} }
// ── Collapsible opt-groups ────────────────────────────────────────────────
body.querySelectorAll('.opt-group').forEach(group => {
const title = group.querySelector(':scope > .opt-group-title');
if (!title) return;
title.addEventListener('click', () => group.classList.toggle('open'));
});
// Track extracted elements for restoreToRow // Track extracted elements for restoreToRow
wrap._extracted = [ wrap._extracted = [
activeEl ? {el: activeEl, target: detailRow} : null, activeEl ? {el: activeEl, target: detailRow} : null,
@ -4324,7 +4382,8 @@ function makeVoiceRow(v) {
<div class="vr-optimizer"> <div class="vr-optimizer">
<div class="optimizer-grid"> <div class="optimizer-grid">
<div class="opt-group opt-trim-panel"> <div class="opt-group opt-trim-panel">
<div class="opt-group-title">Reference audio &middot; crop</div> <div class="opt-group-title">Reference audio &middot; crop <span class="opt-chevron">&#8964;</span></div>
<div class="opt-group-body">
<canvas class="opt-wave"></canvas> <canvas class="opt-wave"></canvas>
<div class="opt-controls"> <div class="opt-controls">
<div class="opt-field"><label>Start</label><input class="opt-start" type="number" step="0.01" value="0"></div> <div class="opt-field"><label>Start</label><input class="opt-start" type="number" step="0.01" value="0"></div>
@ -4335,16 +4394,20 @@ function makeVoiceRow(v) {
<button class="btn-secondary opt-undo">Undo crop</button> <button class="btn-secondary opt-undo">Undo crop</button>
</div> </div>
</div> </div>
<div class="opt-group opt-text-panel"> </div>
<div class="opt-group-title">Reference transcript</div> <div class="opt-group opt-text-panel open">
<div class="opt-group-title">Reference transcript <span class="opt-chevron">&#8964;</span></div>
<div class="opt-group-body">
<textarea class="opt-transcript" placeholder="Reference text">${escHtml(v.transcript || '')}</textarea> <textarea class="opt-transcript" placeholder="Reference text">${escHtml(v.transcript || '')}</textarea>
<div class="opt-controls"> <div class="opt-controls">
<button class="btn-secondary opt-recognize">Re-recognise text</button> <button class="btn-secondary opt-recognize">Re-recognise text</button>
<button class="btn-primary opt-save-text">Save text</button> <button class="btn-primary opt-save-text">Save text</button>
</div> </div>
</div> </div>
</div>
<div class="opt-group opt-compare-panel"> <div class="opt-group opt-compare-panel">
<div class="opt-group-title">Voice match</div> <div class="opt-group-title">Voice match <span class="opt-chevron">&#8964;</span></div>
<div class="opt-group-body">
<div class="opt-controls"> <div class="opt-controls">
<div class="opt-field wide"><label>Comparison backend</label><select class="opt-compare-backend">${styleBackendOptions('voice_clone')}</select></div> <div class="opt-field wide"><label>Comparison backend</label><select class="opt-compare-backend">${styleBackendOptions('voice_clone')}</select></div>
<button class="btn-secondary opt-play-reference">Play WAV file</button> <button class="btn-secondary opt-play-reference">Play WAV file</button>
@ -4362,9 +4425,10 @@ function makeVoiceRow(v) {
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="opt-group opt-style-panel"> <div class="opt-group opt-style-panel">
<div> <div class="opt-group-title">Style variation <span class="opt-chevron">&#8964;</span></div>
<div class="opt-group-title">Style variation</div> <div class="opt-group-body">
<div class="opt-controls"> <div class="opt-controls">
<div class="opt-field wide"><label>Style instruction</label><input class="opt-style-instruct" type="text" placeholder="cheerful, calm, excited"></div> <div class="opt-field wide"><label>Style instruction</label><input class="opt-style-instruct" type="text" placeholder="cheerful, calm, excited"></div>
<div class="opt-field wide"><label>Style backend</label><select class="opt-style-backend">${styleBackendOptions('customvoice', true)}</select></div> <div class="opt-field wide"><label>Style backend</label><select class="opt-style-backend">${styleBackendOptions('customvoice', true)}</select></div>
@ -4372,7 +4436,6 @@ function makeVoiceRow(v) {
</div> </div>
<p class="opt-group-note">Preview first. Saving creates a new active WAV voice from the current reference text. Same-voice style only works when the selected backend knows this voice and honors <code>instruct</code>; Base/Streaming are fastest but often ignore style.</p> <p class="opt-group-note">Preview first. Saving creates a new active WAV voice from the current reference text. Same-voice style only works when the selected backend knows this voice and honors <code>instruct</code>; Base/Streaming are fastest but often ignore style.</p>
<div class="backend-help opt-style-backend-help"></div> <div class="backend-help opt-style-backend-help"></div>
</div>
<div class="opt-style-preview-box"> <div class="opt-style-preview-box">
<div class="opt-controls"> <div class="opt-controls">
<button class="btn-secondary opt-preview-style">Preview style</button> <button class="btn-secondary opt-preview-style">Preview style</button>
@ -4381,8 +4444,10 @@ function makeVoiceRow(v) {
<audio class="opt-style-audio" controls></audio> <audio class="opt-style-audio" controls></audio>
</div> </div>
</div> </div>
<div class="opt-group opt-maintenance"> </div>
<div class="opt-group-title">Loudness</div> <div class="opt-group opt-maintenance open">
<div class="opt-group-title">Loudness <span class="opt-chevron">&#8964;</span></div>
<div class="opt-group-body">
<div class="opt-controls"> <div class="opt-controls">
<div class="opt-field"><label>Target dBFS</label><input class="opt-target-db" type="number" step="0.5" value="-20"></div> <div class="opt-field"><label>Target dBFS</label><input class="opt-target-db" type="number" step="0.5" value="-20"></div>
<button class="btn-secondary opt-db-minus">-</button> <button class="btn-secondary opt-db-minus">-</button>
@ -4394,6 +4459,7 @@ function makeVoiceRow(v) {
<span class="opt-restart-note" hidden>Restart TTS before benchmarking.</span> <span class="opt-restart-note" hidden>Restart TTS before benchmarking.</span>
</div> </div>
</div> </div>
</div>
<div class="opt-status optimizer-workflow">Click the pencil to load waveform and tools.</div> <div class="opt-status optimizer-workflow">Click the pencil to load waveform and tools.</div>
</div> </div>
</div> </div>

14
static/sections/s-voices.html
View File

@ -25,13 +25,6 @@
<button class="btn-secondary vl-tb-btn" id="copy-active-voices-btn" title="Copy active voice names">Copy active</button> <button class="btn-secondary vl-tb-btn" id="copy-active-voices-btn" title="Copy active voice names">Copy active</button>
</div> </div>
<div class="vl-filters">
<input type="search" id="library-filter-text" placeholder="Search voices&#x2026;" autocomplete="off" class="vl-search">
<select id="library-filter-lang" title="Language"><option value="">All</option></select>
<select id="library-filter-type" title="Type"><option value="">All types</option></select>
<label class="vl-disabled-label"><input type="checkbox" id="show-disabled-cb"> Disabled</label>
</div>
<!-- TTS synth mode + preview sentence --> <!-- TTS synth mode + preview sentence -->
<div class="vl-synth-panel"> <div class="vl-synth-panel">
<div class="vl-synth-mode-row"> <div class="vl-synth-mode-row">
@ -51,6 +44,13 @@
</div> </div>
</div> </div>
<div class="vl-filters">
<input type="search" id="library-filter-text" placeholder="Search voices&#x2026;" autocomplete="off" class="vl-search">
<select id="library-filter-lang" title="Language"><option value="">All</option></select>
<select id="library-filter-type" title="Type"><option value="">All types</option></select>
<label class="vl-disabled-label"><input type="checkbox" id="show-disabled-cb"> Disabled</label>
</div>
<div class="benchmark-confirm" id="benchmark-confirm" hidden role="group" aria-live="polite"> <div class="benchmark-confirm" id="benchmark-confirm" hidden role="group" aria-live="polite">
<strong id="benchmark-confirm-title">Benchmark active voices?</strong> <strong id="benchmark-confirm-title">Benchmark active voices?</strong>
<span id="benchmark-confirm-text"></span> <span id="benchmark-confirm-text"></span>

144
static/style.css
View File

@ -46,7 +46,7 @@ body {
letter-spacing: -0.01em; line-height: 1.2; letter-spacing: -0.01em; line-height: 1.2;
} }
.sidebar-brand p { .sidebar-brand p {
font-size: 11px; color: var(--subtext); margin-top: 3px; font-size: 14px; color: var(--subtext); margin-top: 3px;
} }
.sidebar-nav { flex: 1; padding: 8px 0; } .sidebar-nav { flex: 1; padding: 8px 0; }
.nav-group-label { .nav-group-label {
@ -62,7 +62,7 @@ body {
background: var(--panel); border: 1px solid var(--border); background: var(--panel); border: 1px solid var(--border);
border-radius: 10px; padding: 1px 6px; min-width: 18px; text-align: center; border-radius: 10px; padding: 1px 6px; min-width: 18px; text-align: center;
} }
.nav-chevron { font-size: 11px; color: var(--subtext); transition: transform .2s; margin-left: 2px; } .nav-chevron { font-size: 14px; color: var(--subtext); transition: transform .2s; margin-left: 2px; }
.nav-chevron.open { transform: rotate(180deg); } .nav-chevron.open { transform: rotate(180deg); }
.nav-tree { display: none; flex-direction: column; padding: 2px 0 6px; } .nav-tree { display: none; flex-direction: column; padding: 2px 0 6px; }
.nav-tree.open { display: flex; } .nav-tree.open { display: flex; }
@ -73,7 +73,7 @@ body {
} }
.nav-tree-item:hover { background: var(--panel); color: var(--text); } .nav-tree-item:hover { background: var(--panel); color: var(--text); }
.nav-tree-item.is-active { color: var(--accent); font-weight: 700; } .nav-tree-item.is-active { color: var(--accent); font-weight: 700; }
.ntc { font-size: 11px; color: var(--subtext); font-weight: 500; } .ntc { font-size: 14px; color: var(--subtext); font-weight: 500; }
.nav-tree-item.is-active .ntc { color: var(--accent); } .nav-tree-item.is-active .ntc { color: var(--accent); }
.nav-item { .nav-item {
@ -113,8 +113,10 @@ body {
.page-section.is-active { display: block; } .page-section.is-active { display: block; }
.section-head { .section-head {
display: flex; align-items: center; gap: 14px; display: flex; align-items: center; gap: 14px;
padding-bottom: 14px; border-bottom: 2px solid var(--border); padding: 20px; border-bottom: 2px solid var(--border);
margin-bottom: 20px; margin-bottom: 20px;
background: var(--surface);
border-radius: var(--radius);
} }
.section-icon { font-size: 26px; line-height: 1; } .section-icon { font-size: 26px; line-height: 1; }
.section-title h2 { .section-title h2 {
@ -223,7 +225,7 @@ input.id-invalid { border-color: var(--red) !important; }
/* ── Helper details ─────────────────────────────────────────────────────── */ /* ── Helper details ─────────────────────────────────────────────────────── */
details.helper { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); } details.helper { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
details.helper summary { padding: 10px 14px; cursor: pointer; font-size: 13px; color: var(--subtext); user-select: none; list-style: none; } details.helper summary { padding: 10px 14px; cursor: pointer; font-size: 13px; color: var(--subtext); user-select: none; list-style: none; }
details.helper summary::before { content: '\25B6 '; font-size: 11px; } details.helper summary::before { content: '\25B6 '; font-size: 14px; }
details.helper[open] summary::before { content: '\25BC '; } details.helper[open] summary::before { content: '\25BC '; }
details.helper .helper-body { padding: 12px 14px 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } details.helper .helper-body { padding: 12px 14px 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 5px; } .field { display: flex; flex-direction: column; gap: 5px; }
@ -247,10 +249,10 @@ audio { width: 100%; }
/* ── Voice Design ───────────────────────────────────────────────────────── */ /* ── Voice Design ───────────────────────────────────────────────────────── */
.design-hints { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; color: var(--subtext); } .design-hints { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; color: var(--subtext); }
.design-hints th, .design-hints td { text-align: left; vertical-align: top; padding: 7px 9px; border-bottom: 1px solid var(--border); } .design-hints th, .design-hints td { text-align: left; vertical-align: top; padding: 7px 9px; border-bottom: 1px solid var(--border); }
.design-hints th { color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .design-hints th { color: var(--text); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.design-samples-details summary { cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--subtext); user-select: none; list-style: none; } .design-samples-details summary { cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--subtext); user-select: none; list-style: none; }
.design-samples-details summary::-webkit-details-marker { display: none; } .design-samples-details summary::-webkit-details-marker { display: none; }
.design-samples-details summary::before { content: '\25B6'; color: var(--accent); font-size: 11px; } .design-samples-details summary::before { content: '\25B6'; color: var(--accent); font-size: 14px; }
.design-samples-details[open] summary::before { content: '\25BC'; } .design-samples-details[open] summary::before { content: '\25BC'; }
.design-samples-details summary span:first-child { font-size: 12px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .09em; } .design-samples-details summary span:first-child { font-size: 12px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .09em; }
.design-samples-details .design-sample-header { margin-top: 12px; } .design-samples-details .design-sample-header { margin-top: 12px; }
@ -258,7 +260,7 @@ audio { width: 100%; }
.preset-row input, .preset-row select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font-size: 14px; } .preset-row input, .preset-row select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font-size: 14px; }
.design-sample-grid { display: grid; grid-template-columns: minmax(150px,1fr) 52px 86px minmax(220px,1.4fr) minmax(220px,1.4fr) 176px; gap: 8px; align-items: center; } .design-sample-grid { display: grid; grid-template-columns: minmax(150px,1fr) 52px 86px minmax(220px,1.4fr) minmax(220px,1.4fr) 176px; gap: 8px; align-items: center; }
.design-sample-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); } .design-sample-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); }
.design-sample-header div { white-space: nowrap; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .07em; } .design-sample-header div { white-space: nowrap; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .07em; }
.qwen-sample { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); padding: 8px 10px; transition: border-color .15s; } .qwen-sample { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); padding: 8px 10px; transition: border-color .15s; }
.qwen-sample:hover { border-color: var(--accent); } .qwen-sample:hover { border-color: var(--accent); }
.qwen-sample strong { color: var(--accent); font-size: 13px; } .qwen-sample strong { color: var(--accent); font-size: 13px; }
@ -298,7 +300,7 @@ audio { width: 100%; }
.settings-actions { padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); } .settings-actions { padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); }
.setup-intro { background: rgba(37,99,235,.06); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--subtext); font-size: 13px; line-height: 1.55; } .setup-intro { background: rgba(37,99,235,.06); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--subtext); font-size: 13px; line-height: 1.55; }
.setup-intro strong { color: var(--text); } .setup-intro strong { color: var(--text); }
.s-group { font-size: 11px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .09em; padding-top: 6px; border-top: 1px solid var(--border); } .s-group { font-size: 14px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .09em; padding-top: 6px; border-top: 1px solid var(--border); }
.s-field { display: flex; flex-direction: column; gap: 5px; } .s-field { display: flex; flex-direction: column; gap: 5px; }
.s-field label { font-size: 13px; color: var(--subtext); font-weight: 500; } .s-field label { font-size: 13px; color: var(--subtext); font-weight: 500; }
.s-field input, .s-field select, .s-field textarea { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 9px 14px; font-size: 14px; } .s-field input, .s-field select, .s-field textarea { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 9px 14px; font-size: 14px; }
@ -376,7 +378,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
#benchmark-sample-text { min-height: 62px; resize: vertical; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; font-family: inherit; width: 100%; } #benchmark-sample-text { min-height: 62px; resize: vertical; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; font-family: inherit; width: 100%; }
.benchmark-actions { display: flex; gap: 8px; flex-wrap: wrap; } .benchmark-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.volume-actions { align-items: flex-end; } .volume-actions { align-items: flex-end; }
.target-db-field { display: flex; flex-direction: column; gap: 4px; flex: 0 0 112px; color: var(--subtext); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .target-db-field { display: flex; flex-direction: column; gap: 4px; flex: 0 0 112px; color: var(--subtext); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.target-db-field input { width: 112px; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 10px; font-size: 14px; } .target-db-field input { width: 112px; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 10px; font-size: 14px; }
.play-mode-field select { width: 100%; } .play-mode-field select { width: 100%; }
.benchmark-progress { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: 7px; } .benchmark-progress { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: 7px; }
@ -504,12 +506,12 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.vr-note input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 3px 5px; font-family: inherit; outline: none; } .vr-note input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 3px 5px; font-family: inherit; outline: none; }
.vr-note input:focus { border-bottom-color: var(--accent); } .vr-note input:focus { border-bottom-color: var(--accent); }
.vr-note input::placeholder { color: var(--border); } .vr-note input::placeholder { color: var(--border); }
.vr-row-subtle { color: var(--subtext); font-size: 11px; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr-row-subtle { color: var(--subtext); font-size: 14px; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-optimizer { grid-column: auto; display: none; margin: 6px 0 0; width: 100%; box-sizing: border-box; } .vr-optimizer { grid-column: auto; display: none; margin: 6px 0 0; width: 100%; box-sizing: border-box; }
.vl-row.edit-open .vr-optimizer { display: block; } .vl-row.edit-open .vr-optimizer { display: block; }
.optimizer-grid { display: grid; grid-template-columns: minmax(280px,1.2fr) minmax(280px,1fr); gap: 12px; align-items: start; } .optimizer-grid { display: grid; grid-template-columns: minmax(280px,1.2fr) minmax(280px,1fr); gap: 12px; align-items: start; }
.opt-group { margin-top: 20px; margin-right: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 10px; min-width: 0; } .opt-group { box-shadow: var(--shadow); margin-top: 20px; margin-right: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 10px; min-width: 0; }
.opt-group-title { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .opt-group-title { font-size: 14px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.opt-group-note { font-size: 12px; color: var(--subtext); line-height: 1.4; margin-top: 7px; } .opt-group-note { font-size: 12px; color: var(--subtext); line-height: 1.4; margin-top: 7px; }
.opt-compare-panel { grid-column: 1 / -1; } .opt-compare-panel { grid-column: 1 / -1; }
.opt-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(240px,1fr)); gap: 10px; } .opt-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(240px,1fr)); gap: 10px; }
@ -583,13 +585,13 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.sample-read-box, .mic-monitor-box { border: 1px solid rgba(37,99,235,.18); border-radius: 6px; background: var(--surface); padding: 12px; } .sample-read-box, .mic-monitor-box { border: 1px solid rgba(37,99,235,.18); border-radius: 6px; background: var(--surface); padding: 12px; }
.mic-monitor-box { padding: 10px; display: flex; flex-direction: column; gap: 8px; } .mic-monitor-box { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sample-head, .mic-monitor-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .sample-head, .mic-monitor-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.sample-head label, .mic-monitor-head span:first-child { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; } .sample-head label, .mic-monitor-head span:first-child { font-size: 14px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.sample-head select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; min-width: 150px; } .sample-head select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; min-width: 150px; }
.sample-sentence { width: 100%; min-height: 120px; font-size: 16px; line-height: 1.55; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 12px; resize: vertical; font-family: inherit; } .sample-sentence { width: 100%; min-height: 120px; font-size: 16px; line-height: 1.55; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 12px; resize: vertical; font-family: inherit; }
.sample-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .sample-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.sample-actions button { padding: 6px 10px; font-size: 12px; } .sample-actions button { padding: 6px 10px; font-size: 12px; }
.recording-tips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .recording-tips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.recording-tip { font-size: 11px; color: var(--subtext); border: 1px solid rgba(37,99,235,.25); border-radius: 999px; padding: 3px 8px; background: rgba(37,99,235,.07); } .recording-tip { font-size: 14px; color: var(--subtext); border: 1px solid rgba(37,99,235,.25); border-radius: 999px; padding: 3px 8px; background: rgba(37,99,235,.07); }
.meter-readout { font-family: monospace; color: var(--subtext); font-size: 12px; white-space: nowrap; } .meter-readout { font-family: monospace; color: var(--subtext); font-size: 12px; white-space: nowrap; }
.mic-meter { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; height: 24px; align-items: end; margin-bottom: 8px; } .mic-meter { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; height: 24px; align-items: end; margin-bottom: 8px; }
.mic-meter .bar { height: 7px; border-radius: 3px; background: var(--border); transition: height .08s linear, background .08s linear, opacity .08s linear; opacity: .55; } .mic-meter .bar { height: 7px; border-radius: 3px; background: var(--border); transition: height .08s linear, background .08s linear, opacity .08s linear; opacity: .55; }
@ -656,7 +658,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.routing-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .routing-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.routing-grid { display: grid; grid-template-columns: 42px minmax(104px,.7fr) minmax(92px,.55fr) 82px minmax(112px,.6fr) minmax(140px,1fr) minmax(120px,.65fr) minmax(120px,.65fr) 42px; gap: 8px; align-items: center; } .routing-grid { display: grid; grid-template-columns: 42px minmax(104px,.7fr) minmax(92px,.55fr) 82px minmax(112px,.6fr) minmax(140px,1fr) minmax(120px,.65fr) minmax(120px,.65fr) 42px; gap: 8px; align-items: center; }
.routing-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); } .routing-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); }
.routing-header div { font-size: 11px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .07em; } .routing-header div { font-size: 14px; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: .07em; }
.routing-row { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 8px 10px; } .routing-row { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 8px 10px; }
.routing-row input, .routing-row select { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 7px 8px; font-size: 13px; } .routing-row input, .routing-row select { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 7px 8px; font-size: 13px; }
.route-sound-cell { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 5px; align-items: center; } .route-sound-cell { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 5px; align-items: center; }
@ -748,7 +750,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.voices-empty-divider { .voices-empty-divider {
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
width: 40px; flex-shrink: 0; width: 40px; flex-shrink: 0;
font-size: 11px; font-weight: 700; color: var(--subtext); font-size: 14px; font-weight: 700; color: var(--subtext);
text-transform: uppercase; letter-spacing: .08em; text-transform: uppercase; letter-spacing: .08em;
background: var(--panel); border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--panel); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
} }
@ -759,7 +761,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
color: var(--text); font-family: monospace; color: var(--text); font-family: monospace;
} }
.voices-folder-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .voices-folder-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.voices-empty-hint { font-size: 11.5px; color: var(--subtext); opacity: .75; line-height: 1.7; margin-top: 2px; } .voices-empty-hint { font-size: 14.5px; color: var(--subtext); opacity: .75; line-height: 1.7; margin-top: 2px; }
.voices-empty-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .voices-empty-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.voices-empty-action-btn { width: 100%; } .voices-empty-action-btn { width: 100%; }
@ -781,7 +783,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
display: flex; flex-wrap: wrap; gap: 4px; display: flex; flex-wrap: wrap; gap: 4px;
padding: 8px 10px 7px; border-bottom: 1px solid var(--border); padding: 8px 10px 7px; border-bottom: 1px solid var(--border);
} }
.vl-tb-btn { padding: 3px 8px !important; font-size: 11px !important; flex: 0 0 auto; } .vl-tb-btn { padding: 3px 8px !important; font-size: 14px !important; flex: 0 0 auto; }
.vl-filters { .vl-filters {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
padding: 7px 10px; border-bottom: 1px solid var(--border); padding: 7px 10px; border-bottom: 1px solid var(--border);
@ -793,14 +795,14 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
} }
.vl-search:focus { outline: none; border-color: var(--accent); } .vl-search:focus { outline: none; border-color: var(--accent); }
.vl-filters select { .vl-filters select {
padding: 4px 5px; font-size: 11.5px; border: 1px solid var(--border); padding: 4px 5px; font-size: 14.5px; border: 1px solid var(--border);
border-radius: var(--radius); background: var(--bg); color: var(--text); max-width: 80px; border-radius: var(--radius); background: var(--bg); color: var(--text); max-width: 80px;
} }
.vl-disabled-label { font-size: 11.5px; color: var(--subtext); white-space: nowrap; cursor: pointer; gap: 3px; display: flex; align-items: center; } .vl-disabled-label { font-size: 14.5px; color: var(--subtext); white-space: nowrap; cursor: pointer; gap: 3px; display: flex; align-items: center; }
#voice-list { flex: 1; overflow-y: auto; min-height: 0; } #voice-list { flex: 1; overflow-y: auto; min-height: 0; }
.vl-footer { .vl-footer {
padding: 7px 10px; border-top: 1px solid var(--border); padding: 7px 10px; border-top: 1px solid var(--border);
font-size: 11.5px; color: var(--subtext); font-size: 14.5px; color: var(--subtext);
display: flex; align-items: center; justify-content: space-between; gap: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
} }
.vl-add-btn { padding: 4px 9px !important; font-size: 11.5px !important; } .vl-add-btn { padding: 4px 9px !important; font-size: 11.5px !important; }
@ -863,7 +865,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.vl-gender-label.g-f { color: #e91e8c; } .vl-gender-label.g-f { color: #e91e8c; }
.vl-gender-label.g-m { color: #0ea5e9; } .vl-gender-label.g-m { color: #0ea5e9; }
.vl-gender-label.g-n { color: #8b5cf6; } .vl-gender-label.g-n { color: #8b5cf6; }
.vl-flag { font-size: 11px; color: var(--subtext); } .vl-flag { font-size: 14px; color: var(--subtext); }
.vl-dbfs { display: none; } .vl-dbfs { display: none; }
/* Synth mode panel (segmented control + preview input) */ /* Synth mode panel (segmented control + preview input) */
@ -882,7 +884,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.vl-synth-seg-btn.active { background: var(--teal); color: #fff; } .vl-synth-seg-btn.active { background: var(--teal); color: #fff; }
.vl-synth-seg-btn:not(.active):hover { background: var(--border); color: var(--text); } .vl-synth-seg-btn:not(.active):hover { background: var(--border); color: var(--text); }
.vl-preview-text-wrap { padding: 0 8px 6px; } .vl-preview-text-wrap { padding: 0 8px 6px; }
.vl-preview-input { width: 100%; font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 3px 7px; font-family: var(--font); } .vl-preview-input { width: 100%; font-size: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 3px 7px; font-family: var(--font); }
.vl-preview-input:focus { outline: none; border-color: var(--accent); } .vl-preview-input:focus { outline: none; border-color: var(--accent); }
.vl-preview-text-wrap.hidden { display: none; } .vl-preview-text-wrap.hidden { display: none; }
@ -891,8 +893,6 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
flex: 1; min-width: 0; flex: 1; min-width: 0;
background: var(--bg); background: var(--bg);
display: flex; flex-direction: column; overflow: hidden; display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow);
} }
.inspector-placeholder { .inspector-placeholder {
height: 100%; display: flex; flex-direction: column; height: 100%; display: flex; flex-direction: column;
@ -939,7 +939,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.insp-hd-row1 { display: flex; align-items: center; gap: 8px; } .insp-hd-row1 { display: flex; align-items: center; gap: 8px; }
.insp-disp-name { .insp-disp-name {
flex: 1; min-width: 0; flex: 1; min-width: 0;
font-size: 16px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.3; font-size: 18px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.3;
cursor: default; user-select: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; user-select: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.insp-disp-name:hover { color: var(--accent); } .insp-disp-name:hover { color: var(--accent); }
@ -955,7 +955,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.insp-hd-row2 { display: flex; align-items: center; gap: 5px; } .insp-hd-row2 { display: flex; align-items: center; gap: 5px; }
.insp-id-block { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; } .insp-id-block { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.insp-full-id { .insp-full-id {
font-size: 10px; color: var(--subtext); font-family: monospace; font-weight: 400; font-size: 14px; color: var(--subtext); font-family: monospace; font-weight: 400;
cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
} }
.insp-full-id:hover { color: var(--accent); } .insp-full-id:hover { color: var(--accent); }
@ -966,8 +966,8 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
} }
.insp-copy-id-btn:hover { color: var(--accent); border-color: var(--accent); } .insp-copy-id-btn:hover { color: var(--accent); border-color: var(--accent); }
.insp-actions-active { display: flex; align-items: center; flex-shrink: 0; } .insp-actions-active { display: flex; align-items: center; flex-shrink: 0; }
.insp-actions-active .vr-detail-active { display: flex; align-items: center; gap: 5px; } .insp-actions-active .vr-detail-active { display: contents; align-items: center; gap: 5px; }
.insp-actions-active .vr-detail-active > label:first-child { font-size: 10px; font-weight: 500; color: var(--subtext); } .insp-actions-active .vr-detail-active > label:first-child { padding-right: 10px; font-weight: 500; color: var(--subtext); }
.insp-actions-active .toggle { width: 32px; height: 18px; } .insp-actions-active .toggle { width: 32px; height: 18px; }
.insp-actions-active .t-slider::before { height: 12px; width: 12px; left: 3px; bottom: 3px; } .insp-actions-active .t-slider::before { height: 12px; width: 12px; left: 3px; bottom: 3px; }
.insp-actions-active .toggle input:checked + .t-slider::before { transform: translateX(14px); } .insp-actions-active .toggle input:checked + .t-slider::before { transform: translateX(14px); }
@ -982,13 +982,13 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.insp-note-slot .vr-note label { display: none; } .insp-note-slot .vr-note label { display: none; }
.insp-note-slot .vr-note .vr-inline { display: flex; flex: 1; } .insp-note-slot .vr-note .vr-inline { display: flex; flex: 1; }
.insp-note-slot .vr-note .vr-inline input { .insp-note-slot .vr-note .vr-inline input {
width: 100%; padding: 2px 0; font-size: 11px; font-style: italic; font-family: inherit; width: 100%; padding: 2px 0; font-size: 14px; font-style: italic; font-family: inherit;
border: none; background: transparent; color: var(--text); outline: none; transition: color .15s; border: none; background: transparent; color: var(--text); outline: none; transition: color .15s;
} }
.insp-note-slot .vr-note .vr-inline input::placeholder { color: var(--subtext); opacity: .6; } .insp-note-slot .vr-note .vr-inline input::placeholder { color: var(--subtext); opacity: .6; }
.insp-note-slot .vr-note .vr-inline input:focus { font-style: normal; } .insp-note-slot .vr-note .vr-inline input:focus { font-style: normal; }
.insp-note-slot .ref-transcribe-btn { display: none !important; } .insp-note-slot .ref-transcribe-btn { display: none !important; }
.insp-actions-delete { flex-shrink: 0; display: flex; align-items: center; padding-left: 8px; } .insp-actions-delete { flex-shrink: 0; display: flex; align-items: center; padding-left: 20px; margin-right: 20px }
.insp-actions-delete .vr-detail-delete { display: flex; align-items: center; } .insp-actions-delete .vr-detail-delete { display: flex; align-items: center; }
.insp-actions-delete .delete-btn { .insp-actions-delete .delete-btn {
background: none; border: none; color: var(--subtext); font-size: 10.5px; background: none; border: none; color: var(--subtext); font-size: 10.5px;
@ -1020,20 +1020,20 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.insp-flag-icon { display: flex; align-items: center; line-height: 1; } .insp-flag-icon { display: flex; align-items: center; line-height: 1; }
.insp-flag-icon .fi { width: 22px; height: 16px; background-size: cover; background-position: center; border-radius: 2px; display: inline-block; flex-shrink: 0; } .insp-flag-icon .fi { width: 22px; height: 16px; background-size: cover; background-position: center; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.insp-flag-sel { .insp-flag-sel {
font-size: 11px; padding: 1px 4px; border: 1px solid var(--accent); font-size: 14px; padding: 1px 4px; border: 1px solid var(--accent);
border-radius: 4px; background: var(--surface); color: var(--text); outline: none; border-radius: 4px; background: var(--surface); color: var(--text); outline: none;
} }
/* Lang wrap — dblclick to edit language */ /* Lang wrap — dblclick to edit language */
.insp-lang-wrap { display: flex; align-items: center; cursor: default; } .insp-lang-wrap { display: flex; align-items: center; cursor: default; }
.insp-lang-code { font-size: 11.5px; font-weight: 600; color: var(--subtext); } .insp-lang-code { font-size: 14.5px; font-weight: 600; color: var(--subtext); }
.insp-lang-sel { .insp-lang-sel {
font-size: 11px; padding: 1px 4px; border: 1px solid var(--accent); font-size: 14px; padding: 1px 4px; border: 1px solid var(--accent);
border-radius: 4px; background: var(--surface); color: var(--text); outline: none; border-radius: 4px; background: var(--surface); color: var(--text); outline: none;
} }
/* Gender label — click to cycle */ /* Gender label — click to cycle */
.insp-gender-label { .insp-gender-label {
font-size: 11.5px; color: var(--subtext); cursor: pointer; user-select: none; font-size: 14.5px; color: var(--subtext); cursor: pointer; user-select: none;
} }
.insp-gender-label:hover { color: var(--text); } .insp-gender-label:hover { color: var(--text); }
@ -1047,7 +1047,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
/* Tag input — inline last item in subtitle */ /* Tag input — inline last item in subtitle */
.insp-tag-input { .insp-tag-input {
border: none; background: transparent; color: var(--subtext); border: none; background: transparent; color: var(--subtext);
font-size: 11.5px; font-family: inherit; outline: none; font-size: 14.5px; font-family: inherit; outline: none;
padding: 0 6px; min-width: 50px; padding: 0 6px; min-width: 50px;
transition: background .15s, color .15s; transition: background .15s, color .15s;
} }
@ -1055,6 +1055,22 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.insp-tag-input:hover { color: var(--text); } .insp-tag-input:hover { color: var(--text); }
.insp-tag-input:focus { background: var(--panel); color: var(--text); } .insp-tag-input:focus { background: var(--panel); color: var(--text); }
/* Tag autocomplete dropdown */
.tag-suggest {
position: fixed; z-index: 9998;
background: var(--surface); border: 1px solid var(--border);
border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
max-height: 220px; overflow-y: auto; padding: 3px 0;
}
.tag-suggest-item {
display: block; width: 100%; text-align: left;
padding: 5px 12px; font-size: 12px; font-family: inherit;
background: none; border: none; color: var(--text);
cursor: pointer; white-space: nowrap; border-radius: 0;
transition: background .1s;
}
.tag-suggest-item:hover { background: var(--panel); filter: none; }
.insp-save-btn { white-space: nowrap; font-size: 12px; padding: 4px 10px; } .insp-save-btn { white-space: nowrap; font-size: 12px; padding: 4px 10px; }
@ -1082,7 +1098,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
} }
.insp-picker-item:hover { background: var(--panel); filter: none; } .insp-picker-item:hover { background: var(--panel); filter: none; }
.insp-picker-item .ipi-code { .insp-picker-item .ipi-code {
font-family: monospace; font-weight: 700; font-size: 11px; font-family: monospace; font-weight: 700; font-size: 14px;
color: var(--accent); min-width: 28px; flex-shrink: 0; color: var(--accent); min-width: 28px; flex-shrink: 0;
} }
.insp-picker-empty { padding: 10px; font-size: 12px; color: var(--subtext); text-align: center; } .insp-picker-empty { padding: 10px; font-size: 12px; color: var(--subtext); text-align: center; }
@ -1095,19 +1111,33 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.inspector-body .optimizer-grid { display: contents; } .inspector-body .optimizer-grid { display: contents; }
.inspector-body .opt-status { display: none !important; } .inspector-body .opt-status { display: none !important; }
/* Each opt-group as a clean card */ /* Each opt-group as a clean collapsible card */
.inspector-body .opt-group { .inspector-body .opt-group {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
} }
.inspector-body .opt-group-title { .inspector-body .opt-group-title {
display: flex; align-items: center; justify-content: space-between; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 9px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 9px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--subtext); text-transform: uppercase; color: var(--subtext);
border-bottom: 1px solid var(--border); background: var(--panel); background: var(--panel); cursor: pointer; user-select: none;
transition: background .15s;
} }
.inspector-body .opt-group-title:hover { background: var(--border); }
.opt-chevron {
margin-left: auto; font-size: 14px; line-height: 1; color: var(--subtext);
transition: transform .2s; display: inline-block; flex-shrink: 0;
}
.inspector-body .opt-group.open > .opt-group-title { border-bottom: 1px solid var(--border); }
.inspector-body .opt-group.open .opt-chevron { transform: none; }
.inspector-body .opt-group:not(.open) .opt-chevron { transform: rotate(-90deg); }
/* Body: smooth height transition */
.opt-group-body { overflow: hidden; }
.inspector-body .opt-group:not(.open) > .opt-group-body { display: none; }
.inspector-body .opt-group canvas.opt-wave { display: block; width: 100%; height: 72px; background: var(--bg); } .inspector-body .opt-group canvas.opt-wave { display: block; width: 100%; height: 72px; background: var(--bg); }
.inspector-body .opt-group > .opt-controls { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .inspector-body .opt-group .opt-group-body > .opt-controls { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.inspector-body .opt-group > textarea { .inspector-body .opt-group .opt-group-body > textarea {
display: block; width: 100%; box-sizing: border-box; padding: 10px 14px; margin: 0; display: block; width: 100%; box-sizing: border-box; padding: 10px 14px; margin: 0;
background: transparent; border: none; outline: none; resize: vertical; background: transparent; border: none; outline: none; resize: vertical;
font-size: 13px; color: var(--text); font-family: inherit; min-height: 80px; font-size: 13px; color: var(--text); font-family: inherit; min-height: 80px;
@ -1158,7 +1188,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.inspector-body .vr-inline { display: flex; align-items: center; gap: 8px; } .inspector-body .vr-inline { display: flex; align-items: center; gap: 8px; }
.opt-group-meta { .opt-group-meta {
font-size: 11px; font-weight: 600; color: var(--accent); font-size: 14px; font-weight: 600; color: var(--accent);
text-transform: none; letter-spacing: 0; flex-shrink: 0; text-transform: none; letter-spacing: 0; flex-shrink: 0;
} }
@ -1195,7 +1225,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.llm-sec-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; } .llm-sec-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.llm-sec-note { font-size: 13px; color: var(--subtext); margin: 0; line-height: 1.5; max-width: 640px; } .llm-sec-note { font-size: 13px; color: var(--subtext); margin: 0; line-height: 1.5; max-width: 640px; }
.llm-free-badge { .llm-free-badge {
font-size: 11px; font-weight: 700; letter-spacing: .02em; font-size: 14px; font-weight: 700; letter-spacing: .02em;
color: var(--green); background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.22); color: var(--green); background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.22);
border-radius: 12px; padding: 3px 12px; white-space: nowrap; flex-shrink: 0; align-self: flex-start; border-radius: 12px; padding: 3px 12px; white-space: nowrap; flex-shrink: 0; align-self: flex-start;
} }
@ -1227,7 +1257,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
background: var(--panel); border: 1px solid var(--border); background: var(--panel); border: 1px solid var(--border);
} }
.llm-card-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; } .llm-card-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.llm-card-sub { font-size: 11px; color: var(--subtext); margin-top: 2px; line-height: 1.35; } .llm-card-sub { font-size: 14px; color: var(--subtext); margin-top: 2px; line-height: 1.35; }
.llm-tier-badge { .llm-tier-badge {
margin-left: auto; flex-shrink: 0; margin-left: auto; flex-shrink: 0;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
@ -1240,14 +1270,14 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
/* Quick-stat chips */ /* Quick-stat chips */
.llm-card-stats { display: flex; gap: 5px; flex-wrap: wrap; } .llm-card-stats { display: flex; gap: 5px; flex-wrap: wrap; }
.llm-card-stats span { .llm-card-stats span {
font-size: 11px; color: var(--subtext); font-size: 14px; color: var(--subtext);
background: var(--panel); border: 1px solid var(--border); background: var(--panel); border: 1px solid var(--border);
padding: 2px 9px; border-radius: 10px; white-space: nowrap; padding: 2px 9px; border-radius: 10px; white-space: nowrap;
} }
/* API key row */ /* API key row */
.llm-field-row { display: flex; align-items: center; gap: 7px; } .llm-field-row { display: flex; align-items: center; gap: 7px; }
.llm-label { font-size: 11px; font-weight: 600; color: var(--subtext); white-space: nowrap; flex-shrink: 0; } .llm-label { font-size: 14px; font-weight: 600; color: var(--subtext); white-space: nowrap; flex-shrink: 0; }
.llm-input { .llm-input {
flex: 1; min-width: 0; font-size: 12px; font-family: monospace; flex: 1; min-width: 0; font-size: 12px; font-family: monospace;
padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
@ -1255,7 +1285,7 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
} }
.llm-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(37,99,235,.10); } .llm-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.llm-link { .llm-link {
font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; font-size: 14px; color: var(--accent); text-decoration: none; white-space: nowrap;
flex-shrink: 0; font-weight: 600; transition: opacity .15s; flex-shrink: 0; font-weight: 600; transition: opacity .15s;
} }
.llm-link:hover { opacity: .75; } .llm-link:hover { opacity: .75; }
@ -1264,11 +1294,11 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.llm-endpoint { .llm-endpoint {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 5px 10px; background: var(--panel); border-radius: 6px; padding: 5px 10px; background: var(--panel); border-radius: 6px;
border: 1px solid var(--border); font-size: 11px; overflow: hidden; border: 1px solid var(--border); font-size: 14px; overflow: hidden;
} }
.llm-endpoint-label { color: var(--subtext); font-weight: 600; white-space: nowrap; flex-shrink: 0; } .llm-endpoint-label { color: var(--subtext); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.llm-endpoint code { .llm-endpoint code {
font-family: monospace; font-size: 11px; color: var(--teal); font-family: monospace; font-size: 14px; color: var(--teal);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
} }
@ -1288,12 +1318,12 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
} }
.llm-link-inline { color: var(--accent); text-decoration: none; font-weight: 600; } .llm-link-inline { color: var(--accent); text-decoration: none; font-weight: 600; }
.llm-link-inline:hover { text-decoration: underline; } .llm-link-inline:hover { text-decoration: underline; }
.llm-info-note { font-size: 11px; color: var(--subtext); font-style: italic; } .llm-info-note { font-size: 14px; color: var(--subtext); font-style: italic; }
.llm-info-note code { font-family: monospace; color: var(--teal); font-style: normal; } .llm-info-note code { font-family: monospace; color: var(--teal); font-style: normal; }
/* ── Local services ────────────────────────────────────── */ /* ── Local services ────────────────────────────────────── */
.llm-local-cat { .llm-local-cat {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--subtext); margin: 0 0 10px; color: var(--subtext); margin: 0 0 10px;
padding-bottom: 7px; border-bottom: 1px solid var(--border); padding-bottom: 7px; border-bottom: 1px solid var(--border);
} }
@ -1323,10 +1353,10 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.llm-local-url { .llm-local-url {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
font-size: 11px; font-weight: 600; color: var(--subtext); font-size: 14px; font-weight: 600; color: var(--subtext);
background: var(--panel); padding: 4px 9px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel); padding: 4px 9px; border-radius: 5px; border: 1px solid var(--border);
} }
.llm-local-url code { font-family: monospace; font-size: 11px; color: var(--teal); } .llm-local-url code { font-family: monospace; font-size: 14px; color: var(--teal); }
/* Code snippet block with dark theme */ /* Code snippet block with dark theme */
.llm-local-snippet { background: #1b1f2e; border-radius: 8px; overflow: hidden; } .llm-local-snippet { background: #1b1f2e; border-radius: 8px; overflow: hidden; }
@ -1343,10 +1373,10 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
.llm-copy-btn:hover { background: rgba(255,255,255,.2); filter: none; } .llm-copy-btn:hover { background: rgba(255,255,255,.2); filter: none; }
.llm-local-snippet pre { .llm-local-snippet pre {
margin: 0; padding: 10px 12px; color: #9ecfb0; font-family: monospace; margin: 0; padding: 10px 12px; color: #9ecfb0; font-family: monospace;
font-size: 11px; line-height: 1.65; overflow-x: auto; white-space: pre; font-size: 14px; line-height: 1.65; overflow-x: auto; white-space: pre;
} }
.llm-local-link { .llm-local-link {
font-size: 11.5px; color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--accent); text-decoration: none; font-weight: 600;
align-self: flex-start; align-self: flex-start;
} }
.llm-local-link:hover { text-decoration: underline; } .llm-local-link:hover { text-decoration: underline; }