.voice-portrait{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:9px;color:var(--voice-color);background:color-mix(in srgb,var(--voice-color) 13%,var(--panel-head));overflow:hidden}
.voice-monogram{font:600 14px var(--font-mono);letter-spacing:-1px}
.voice-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.voice-portrait-large .voice-monogram{font-size:64px;letter-spacing:-4px}
.voice-option{position:relative;min-width:0;display:flex}
.voice-option .voice-choice{width:100%}
.voice-card-preview{position:absolute;top:9px;right:9px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;z-index:2;backdrop-filter:blur(8px)}
.voice-card-preview .icon{display:block;width:14px;height:14px;flex:none}
.voice-card-preview:hover,.voice-card-preview[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:rgba(0,0,0,.8)}
.voice-card-preview:focus-visible,.voice-sample-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.voice-portrait svg{width:100%;height:100%}
.voice-portrait-large{width:100%;height:100%;border-radius:inherit;background:radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--voice-color) 28%,var(--panel-head)),var(--panel-head))}
.voice-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.voice-selected{grid-template-columns:minmax(0,1fr)}
.voice-browser-options{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;overflow:auto;min-height:0;flex:1;gap:10px;padding:3px}
/* The tag bar fits two 14px rows, a 3px gap, 6px padding and a 1px divider. */
.voice-browser-options .voice-choice{grid-template-rows:auto 44px;height:auto}
.voice-browser-options .voice-monogram{font-size:44px;letter-spacing:-2px}
.voice-browser-drawer .lyrics-drawer-title-group{font-size:13px;font-weight:600;color:var(--ink-bright)}
.voice-browser-note{font-size:10px;color:var(--ink-dim);margin:12px 0 0}
.voice-browser-drawer .voice-group-tabs button{font-size:10px;padding:8px 4px}
.voice-browser-drawer .voice-group-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.voice-browser-drawer .voice-group-tabs button[data-voice-group="male"].active{background:#06b6d4;border-color:#06b6d4;color:#042129}
.voice-browser-drawer .voice-group-tabs button[data-voice-group="female"].active{background:#8b5cf6;border-color:#8b5cf6;color:#fff}
.voice-browser-drawer .voice-group-tabs button[data-voice-group="character"].active{background:#f59e0b;border-color:#f59e0b;color:#281700}
.voice-price-rate{display:flex;justify-content:center;margin-top:10px}
.voice-price-rate .catnip-badge{display:inline-flex;align-items:center;gap:5px;font-size:9px;white-space:nowrap}
.voice-price-rate .icon{width:12px;height:12px}
.voice-choice{display:grid;grid-template-rows:minmax(0,2fr) minmax(0,1fr);gap:0;height:228px;min-width:0;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background .16s,border-color .16s}
.voice-choice:hover{background:var(--panel-head);border-color:var(--ink-dim)}
.voice-choice.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.voice-choice[data-tone="blue"]:hover{border-color:rgba(6,182,212,.45)}
.voice-choice[data-tone="purple"]:hover{border-color:rgba(139,92,246,.45)}
.voice-choice[data-tone="yellow"]:hover{border-color:rgba(245,158,11,.45)}
.voice-card-image{position:relative;display:block;min-height:0;overflow:hidden;aspect-ratio:228 / 136}
.voice-card-image .voice-portrait{width:100%;height:100%;border-radius:0;background:radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--voice-color) 28%,var(--panel-head)),var(--panel-head))}
.voice-card-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8));pointer-events:none}
.voice-card-name{position:absolute;bottom:12px;left:12px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px var(--font-mono);color:#fff;z-index:1}
.voice-card-tags{display:flex;align-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:3px;min-width:0;min-height:0;padding:6px;overflow:hidden;border-top:1px solid var(--line)}
.voice-card-tag{display:block;max-width:100%;padding:1px 4px;border:1px solid var(--line);border-radius:4px;background:var(--panel-head);color:var(--ink-dim);font:500 9px/10px var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-choice[data-tone="blue"] .voice-card-tag{border-color:rgba(6,182,212,.35);background:rgba(6,182,212,.12);color:#38bdf8}
.voice-choice[data-tone="purple"] .voice-card-tag{border-color:rgba(139,92,246,.35);background:rgba(139,92,246,.12);color:#a78bfa}
.voice-choice[data-tone="yellow"] .voice-card-tag{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12);color:#fbbf24}
.app[data-theme="light"] .voice-choice[data-tone="blue"] .voice-card-tag{color:#0e7490}
.app[data-theme="light"] .voice-choice[data-tone="purple"] .voice-card-tag{color:#6d28d9}
.app[data-theme="light"] .voice-choice[data-tone="yellow"] .voice-card-tag{color:#92400e}
.voice-choice.active .voice-card-tags{border-top-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.voice-chooser .voice-choice{grid-template-rows:136px 44px;height:182px}
.voice-chooser .voice-card-name{bottom:10px;left:10px;max-width:calc(100% - 20px);font-size:12px}
.voice-chooser .voice-monogram{font-size:40px;letter-spacing:-2px}
.voice-group-tabs{margin-bottom:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.voice-group-tabs button{min-width:0}
.voice-group-tabs button{padding:6px 2px;font-size:9px}
.voice-search{margin-bottom:8px}
.voice-browser-drawer .voice-search{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:11px var(--font-mono);outline:none}
.voice-browser-drawer .voice-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.voice-preview-note{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:9px;color:var(--ink-dim)}
.voice-sample-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;color:var(--ink-dim);font:inherit}
.voice-sample-btn .icon{width:12px;height:12px}
.voice-sample-btn:disabled{opacity:.55;cursor:not-allowed}
.voice-sample-btn:not(:disabled){color:var(--accent);cursor:pointer}
.voice-asset-card,.voice-workspace-card{font:inherit;color:inherit;text-align:left}
.voice-asset-card.workspace-track-row-tight{width:100%;background:transparent;border-left:0;border-right:0;border-top:0}
.voice-transcript{white-space:pre-wrap;overflow-wrap:anywhere}
.voice-empty{padding:24px;text-align:center;border:1px dashed var(--line);border-radius:8px;color:var(--ink-dim);font:11px var(--font-mono);line-height:1.7}
.voice-toolgrid .create-controls{overflow:auto}
.voice-toolgrid .create-controls > .primarybtn{font-size:12px}
.voice-toolgrid #voice-script{min-height:145px;max-height:260px;resize:vertical}
.voice-toolgrid .field-textarea-wrap{position:relative}
.voice-toolgrid .field-textarea-wrap textarea{padding-bottom:25px}
.voice-toolgrid #voice-audio{display:none}
.voice-dialog .modal-body{padding:0 20px}
.voice-dialog .modal-body p{font-size:12px;line-height:1.6;color:var(--ink-dim)}
.voice-dialog-error{min-height:18px;color:var(--danger)!important}
.voice-dialog .rename-modal-actions{padding:16px 20px}
.voice-script-drawer .lyrics-drawer-title-group{font-size:13px;font-weight:600}
.voice-choice:focus-visible,.voice-asset-card:focus-visible,.voice-workspace-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.voice-toolgrid .music-stage-meta{flex-wrap:wrap}
@media(max-width:480px){.voice-browser-options{grid-template-columns:repeat(2,minmax(0,1fr))}.voice-browser-drawer .voice-group-tabs button{font-size:9px}}

.generation-row .image-asset-thumb > .voice-portrait{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;margin:0}
.generation-row .voice-portrait .voice-monogram{margin:0;color:var(--voice-color);line-height:1}
/* Rail panels: the script fills the Prompt panel; the voice browser lives in Voices, two cards across. */
.voice-script-field{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
.voice-script-field .field-textarea-wrap{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
.voice-script-field textarea{flex:1 1 auto;min-height:140px;resize:none}
.voice-browser-panel .voice-browser-options{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;flex:none;padding:0}
.voice-browser-panel .voice-group-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
.voice-browser-panel .voice-search{margin-bottom:0}
/* Whole-pixel price row, so Generate Voice above it sits on whole pixels. */
.voice-price-rate .catnip-badge{box-sizing:border-box;height:18px}
/* Voices tab: one column of rows, like a playlist. */
.voice-group-chips{display:flex;gap:4px}
.voice-group-chips button{flex:1 1 auto;min-width:0;height:26px;padding:0 4px;letter-spacing:0;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.25);color:var(--ink-dim);font:700 10px/1 var(--font-mono);cursor:pointer;transition:all .15s ease}
.voice-group-chips button:hover{border-color:var(--ink-dim);color:var(--ink-bright)}
.voice-group-chips button.active{border-color:var(--accent);background:var(--accent);color:#030d07}
.voice-group-chips button[data-voice-group="male"].active{border-color:#06b6d4;background:#06b6d4}
.voice-group-chips button[data-voice-group="female"].active{border-color:#8b5cf6;background:#8b5cf6;color:#fff}
.voice-group-chips button[data-voice-group="character"].active{border-color:#f59e0b;background:#f59e0b}
/* The tag lines do not wrap; min-width:0 keeps the longest one from widening the panel. */
.voice-browser-panel .voice-list,.voice-group-chips{min-width:0}
.voice-browser-panel .voice-list{display:flex;flex-direction:column;gap:2px}
.voice-list-option{position:relative}
.voice-list-row{display:flex;align-items:center;gap:9px;width:100%;height:56px;padding:0 46px 0 6px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.voice-list-row:hover{background:var(--panel-head);border-color:var(--line)}
.voice-list-row.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.voice-list-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.voice-list-avatar{position:relative;flex:none}
.voice-list-row .voice-portrait{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--voice-color) 30%,#000),#000);box-shadow:0 0 0 1px color-mix(in srgb,var(--voice-color) 45%,transparent)}
.voice-list-row .voice-portrait img{transform:scale(1.75);transform-origin:47% 36%}
.voice-list-row .voice-monogram{font-size:13px}
.voice-list-check{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#030d07;box-shadow:0 0 0 2px var(--panel)}
.voice-list-check .icon{width:10px;height:10px;stroke-width:3}
.voice-list-meta{display:flex;flex-direction:column;gap:7px;min-width:0}
.voice-list-meta strong{font:700 12px/1 var(--font-mono);color:var(--ink-bright)}
.voice-list-meta span{overflow:hidden;font:400 9px/1 var(--font-mono);color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis}
@property --progress{syntax:'<angle>';inherits:true;initial-value:0deg}
.voice-list-play{position:absolute;top:13px;right:10px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(0,0,0,.3);color:var(--ink-bright);cursor:pointer;transition:color .15s ease,border-color .15s ease,--progress .25s linear}
.voice-list-play .icon{display:block;width:12px;height:12px}
.voice-list-play:hover{border-color:var(--accent);color:var(--accent)}
.voice-list-play[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}
.voice-list-play[aria-pressed=true]::before{content:'';position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(var(--accent) var(--progress),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))}
.voice-list-play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app[data-theme="light"] .voice-list-play{border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.6)}
.app[data-theme="light"] .voice-group-chips button{background:rgba(255,255,255,.6)}