:root{--bg: #0a0d14;--bg-elev: #121722;--bg-card: #151b28;--bg-card-hover: #1a2130;--border: #232c3d;--border-soft: #1c2430;--text: #e8edf6;--text-dim: #8a96a9;--text-faint: #5a6577;--accent: #4f8cff;--accent-soft: #2a4a80;--accent-glow: rgba(79, 140, 255, .35);--live: #ff5c7a;--live-glow: rgba(255, 92, 122, .4);--good: #34d399;--warn: #fbbf24;--radius: 16px;--radius-sm: 10px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans JP", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}.app{position:relative;height:100vh;max-width:940px;margin:0 auto;padding:24px 24px 18px;display:flex;flex-direction:column;z-index:1}.ambient{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(60% 50% at 15% 0%,rgba(79,140,255,.1),transparent 70%),radial-gradient(50% 40% at 100% 10%,rgba(255,92,122,.07),transparent 70%);pointer-events:none}.app-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#1c2740,#10151f);border:1px solid var(--border);box-shadow:0 0 24px var(--accent-glow)}.brand-glyph{font-size:22px;color:var(--accent)}.brand-text h1{font-size:19px;font-weight:700;letter-spacing:-.02em}.pipeline{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:11.5px;color:var(--text-faint);font-weight:500}.pipeline span{color:var(--text-dim)}.pipeline i{color:var(--text-faint);font-style:normal}.conn-badge{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim)}.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint)}.conn-ready .conn-dot{background:var(--good);box-shadow:0 0 8px var(--good)}.conn-ready{color:var(--good)}.conn-connecting .conn-dot{background:var(--warn);animation:blink 1s infinite}.conn-connecting{color:var(--warn)}.conn-error .conn-dot{background:var(--live)}.conn-error{color:var(--live)}@keyframes blink{50%{opacity:.3}}.control-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:18px 20px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius)}.lang-group{display:flex;flex-direction:column;gap:10px}.lang-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);font-weight:600}.lang-pills{display:flex;gap:8px}.lang-pill{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .16s ease}.lang-pill:hover{background:var(--bg-card-hover);color:var(--text);border-color:var(--accent-soft)}.lang-pill.active{background:linear-gradient(145deg,var(--accent),#3a6fd8);border-color:var(--accent);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}.pill-flag{font-size:16px}.mic-btn{position:relative;display:flex;align-items:center;gap:10px;padding:13px 26px;border-radius:var(--radius-sm);border:1px solid var(--accent-soft);background:linear-gradient(145deg,#1e2942,#141a26);color:var(--text);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all .16s ease;min-width:130px;justify-content:center}.mic-btn:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.mic-btn:disabled{opacity:.5;cursor:not-allowed}.mic-icon{font-size:12px;color:var(--accent)}.mic-btn.on{border-color:var(--live);background:linear-gradient(145deg,#3a1622,#24121a)}.mic-btn.on .mic-icon{color:var(--live)}.mic-pulse{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:var(--radius-sm);border:1.5px solid var(--live);animation:micpulse 1.6s ease-out infinite;pointer-events:none}@keyframes micpulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}.error-banner{margin-top:14px;padding:11px 16px;border-radius:var(--radius-sm);background:#ff5c7a1a;border:1px solid rgba(255,92,122,.3);color:#ff8fa3;font-size:13px;font-weight:500}.stage{flex:1;display:flex;flex-direction:column;margin-top:16px;min-height:0}.stage-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px}.live-indicator{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text-faint)}.live-indicator.live{color:var(--live)}.eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:15px}.eq i{width:3px;border-radius:2px;background:var(--live);animation:eq .9s ease-in-out infinite}.eq i:nth-child(1){height:40%;animation-delay:0s}.eq i:nth-child(2){height:90%;animation-delay:.15s}.eq i:nth-child(3){height:60%;animation-delay:.3s}.eq i:nth-child(4){height:100%;animation-delay:.45s}@keyframes eq{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.stage-target{font-size:12.5px;color:var(--text-faint);font-weight:500}.target-chip{color:var(--text);font-weight:600;margin-left:4px}.transcript{flex:1;overflow-y:auto;padding:4px 4px 24px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}.transcript::-webkit-scrollbar{width:8px}.transcript::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.transcript::-webkit-scrollbar-thumb:hover{background:var(--accent-soft)}.empty-state{margin:auto;text-align:center;color:var(--text-faint);max-width:340px}.empty-glyph{font-size:44px;opacity:.5;margin-bottom:14px}.empty-title{font-size:17px;font-weight:700;color:var(--text-dim);margin-bottom:6px}.empty-sub{font-size:13.5px;line-height:1.55}.empty-sub b{color:var(--text-dim)}.card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px 18px;animation:cardin .25s ease}@keyframes cardin{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.card.live{border-color:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-soft),0 8px 30px #4f8cff14}.card-row{display:flex;gap:14px;align-items:baseline}.row-tag{flex-shrink:0;width:92px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);padding-top:2px}.target-row .row-tag{color:var(--accent);text-transform:none;letter-spacing:0;font-size:12px}.source-text{font-size:15.5px;line-height:1.5;color:var(--text-dim);font-weight:450}.target-text{font-size:18px;line-height:1.5;color:var(--text);font-weight:600;letter-spacing:-.01em}.target-text.partial{color:var(--text-dim);font-weight:500}.card-divider{height:1px;background:var(--border-soft);margin:12px 0}.dim{color:var(--text-faint)}.caret{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:3px;vertical-align:text-bottom;animation:blink 1s step-end infinite}.partial-dots{color:var(--text-faint);margin-left:2px}.translating{display:inline-flex;gap:4px;align-items:center}.tdot{width:5px;height:5px;border-radius:50%;background:var(--text-faint);animation:tdot 1.2s infinite ease-in-out}.tdot:nth-child(2){animation-delay:.2s}.tdot:nth-child(3){animation-delay:.4s}@keyframes tdot{0%,60%,to{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.app-footer{display:flex;align-items:center;gap:10px;justify-content:center;padding:14px 0;font-size:11.5px;color:var(--text-faint);font-weight:500}.foot-sep{opacity:.5}@media (max-width: 720px){.app{padding:16px 14px 0}.control-bar{flex-direction:column;align-items:stretch;gap:16px}.mic-btn{width:100%}.lang-pills{flex-wrap:wrap}.pill-native{display:none}.lang-pill{padding:9px 14px}.pill-flag{font-size:18px}.row-tag{width:64px;font-size:10px}.target-text{font-size:16px}}