*{margin:0;padding:0;box-sizing:border-box}

/* ── Theme variables ────────────────────────────── */
[data-theme="dark"]{
    --bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#21262d;
    --text-primary:#c9d1d9;--text-secondary:#8b949e;--border:#30363d;
    --btn-bg:#21262d;--btn-hover:#30363d;--error:#f85149;--scrollbar:#30363d;
    --spk-1:#58a6ff;--spk-2:#3fb950;--spk-3:#f0883e;--spk-4:#d2a8ff;
    --spk-5:#ff7b72;--spk-6:#56d4dd;--spk-7:#e3b341;--spk-8:#ec6aff;
    --spk-unknown:#8b949e;
}
[data-theme="light"]{
    --bg-primary:#ffffff;--bg-secondary:#f6f8fa;--bg-tertiary:#e8eaed;
    --text-primary:#24292e;--text-secondary:#586069;--border:#d0d7de;
    --btn-bg:#e8eaed;--btn-hover:#d0d7de;--error:#d73a49;--scrollbar:#c8c8c8;
    --spk-1:#0366d6;--spk-2:#28a745;--spk-3:#bf5b00;--spk-4:#8250df;
    --spk-5:#d1242f;--spk-6:#0a7a80;--spk-7:#9a6700;--spk-8:#a63ed0;
    --spk-unknown:#586069;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg-primary);color:var(--text-primary);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;display:flex;flex-direction:column}

/* ── Header ─────────────────────────────────────── */
header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}
.app-title{font-size:17px;font-weight:700;white-space:nowrap;margin-right:auto}
.ctrl-group{display:flex;align-items:center;gap:6px}
.btn{padding:5px 11px;font-size:12px;border:1px solid var(--border);border-radius:6px;background:var(--btn-bg);color:var(--text-primary);cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.btn:hover{background:var(--btn-hover)}
.btn.active{background:var(--spk-2);color:#fff;border-color:var(--spk-2)}
.btn-sm{padding:5px 8px;min-width:30px;text-align:center}
.btn.recording{background:var(--error);color:#fff;border-color:var(--error);animation:pulse 1.5s infinite}
.separator{width:1px;height:20px;background:var(--border);flex-shrink:0}
.sel{padding:5px 8px;font-size:12px;border:1px solid var(--border);border-radius:6px;background:var(--btn-bg);color:var(--text-primary);font-family:inherit;cursor:pointer}
.field{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}
.field-label{text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* ── Main ───────────────────────────────────────── */
main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:var(--bg-primary)}
.panel-scroll{flex:1;overflow-y:auto;padding:12px 16px}
.panel-scroll::-webkit-scrollbar{width:8px}
.panel-scroll::-webkit-scrollbar-track{background:transparent}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}

/* ── Transcript entries ─────────────────────────── */
.entry{padding:10px 14px;margin-bottom:8px;border-radius:6px;border-left:3px solid;animation:fadeIn .25s ease}
.entry-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:.78em}
.entry-time{color:var(--text-secondary)}
.entry-source{font-weight:700;text-transform:uppercase}
.entry-lang{color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:3px;font-size:.85em}
.entry-text{line-height:1.6;word-wrap:break-word}

/* Speaker color palette (8 slots, cycles) */
.spk-1{border-left-color:var(--spk-1);background:color-mix(in srgb,var(--spk-1) 8%,transparent)}
.spk-2{border-left-color:var(--spk-2);background:color-mix(in srgb,var(--spk-2) 8%,transparent)}
.spk-3{border-left-color:var(--spk-3);background:color-mix(in srgb,var(--spk-3) 8%,transparent)}
.spk-4{border-left-color:var(--spk-4);background:color-mix(in srgb,var(--spk-4) 8%,transparent)}
.spk-5{border-left-color:var(--spk-5);background:color-mix(in srgb,var(--spk-5) 8%,transparent)}
.spk-6{border-left-color:var(--spk-6);background:color-mix(in srgb,var(--spk-6) 8%,transparent)}
.spk-7{border-left-color:var(--spk-7);background:color-mix(in srgb,var(--spk-7) 8%,transparent)}
.spk-8{border-left-color:var(--spk-8);background:color-mix(in srgb,var(--spk-8) 8%,transparent)}
.spk-unknown{border-left-color:var(--spk-unknown);background:var(--bg-tertiary)}
.spk-1-src{color:var(--spk-1)}.spk-2-src{color:var(--spk-2)}.spk-3-src{color:var(--spk-3)}.spk-4-src{color:var(--spk-4)}
.spk-5-src{color:var(--spk-5)}.spk-6-src{color:var(--spk-6)}.spk-7-src{color:var(--spk-7)}.spk-8-src{color:var(--spk-8)}
.spk-unknown-src{color:var(--spk-unknown)}

/* ── Footer ─────────────────────────────────────── */
footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:6px 16px;font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;flex-shrink:0}
.footer-spacer{flex:1}
.dot{width:8px;height:8px;border-radius:50%;background:var(--error);flex-shrink:0;transition:background .3s}
.dot.ok{background:var(--spk-2)}
.dot.pulse{animation:pulse 2s infinite}

/* ── Misc ───────────────────────────────────────── */
#scrollBtn{display:none;position:fixed;bottom:44px;right:20px;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-size:12px;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.3);align-items:center;gap:5px}
#scrollBtn:hover{background:var(--btn-hover)}
.error-toast{position:fixed;top:16px;right:16px;background:var(--error);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;z-index:100;animation:fadeIn .3s ease;max-width:400px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}