/* avatar-lab — internal lab styling. Dark, calm, tool-like. 375px-safe. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b1020; --card: #121a30; --card2: #0f1628; --line: #1f2b4a;
  --ink: #e8edfa; --dim: #8fa0c4; --blue: #2f6df6; --green: #2fd67b; --red: #f0564a;
}
body { background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; }
header { padding: 18px 22px 6px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; max-width: 1060px; margin: 0 auto; }
.brand { font-weight: 800; letter-spacing: .18em; font-size: 15px; }
.brand span { color: var(--blue); }
.sub { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.tabs { display: flex; gap: 6px; }
.tab { color: var(--dim); text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; }
.tab.active, .tab:hover { color: var(--ink); border-color: var(--blue); }

main { display: grid; grid-template-columns: minmax(300px, 560px) minmax(300px, 460px); gap: 18px; padding: 16px 22px 30px; justify-content: center; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

.stage-card, .controls-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.stage-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.char-name { font-size: 19px; font-weight: 700; }
.char-meta { color: var(--dim); font-size: 12px; }
.state-badge { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); color: var(--dim); }
.state-badge[data-state="speaking"] { color: var(--green); border-color: var(--green); }
.state-badge[data-state="listening"] { color: var(--blue); border-color: var(--blue); }
.state-badge[data-state="thinking"] { color: #e9c46a; border-color: #e9c46a; }
.state-badge[data-state="interrupted"], .state-badge[data-state="error"] { color: var(--red); border-color: var(--red); }

.stage { position: relative; width: 100%; aspect-ratio: 1/1; background: radial-gradient(120% 100% at 50% 0%, #162240 0%, #0c1226 70%); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stage canvas, .stage #svgHost { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage #svgHost svg { width: 100%; height: 100%; display: block; }

.captions { margin-top: 10px; min-height: 22px; color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }

.char-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.char-btn { flex: 1; min-width: 110px; background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; cursor: pointer; font-size: 14px; }
.char-btn em { display: block; font-style: normal; color: var(--dim); font-size: 11px; }
.char-btn.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

.mode-row { display: flex; gap: 14px; align-items: center; margin-top: 10px; color: var(--dim); font-size: 13px; }
.mode-row .lbl { text-transform: uppercase; font-size: 10.5px; letter-spacing: .1em; }

.controls-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin-bottom: 12px; }
.group { border-top: 1px solid var(--line); padding: 12px 0; }
.group-title { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.group-title .hint { font-weight: 400; color: var(--dim); font-size: 11.5px; margin-left: 6px; }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button { background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; cursor: pointer; font-size: 13.5px; }
button:hover { border-color: var(--blue); }
button.primary { background: var(--blue); border-color: var(--blue); font-weight: 600; }
button.danger { color: var(--red); border-color: #5a2622; }
button.active, .clip-btn.playing { border-color: var(--green); color: var(--green); }
.live-status { color: var(--dim); font-size: 12.5px; }

.state-btn { font-size: 12.5px; padding: 7px 11px; }

.slider-row { display: grid; grid-template-columns: 92px 1fr 84px; gap: 10px; align-items: center; margin: 8px 0; font-size: 12.5px; }
.slider-row .lbl { color: var(--dim); }
.slider-row .val { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--blue); }

.dev-toggle { width: 100%; margin-top: 10px; color: var(--dim); }
.dev-drawer { display: none; margin-top: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.dev-drawer.open { display: block; }
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 12.5px; }
.dev-grid .lbl { color: var(--dim); margin-right: 8px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.env-track { height: 8px; background: #0a0f1e; border-radius: 4px; margin: 10px 0; overflow: hidden; }
.env-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--green)); }
.chk { color: var(--dim); font-size: 12.5px; display: block; margin: 6px 0; }
.dev-note { color: var(--dim); font-size: 11.5px; margin-top: 8px; line-height: 1.45; }

footer { text-align: center; color: #5c6b8f; font-size: 11.5px; padding: 8px 20px 26px; }
footer code { color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}