:root{--primary-color: #6366f1;--primary-hover-color: #4f46e5;--primary-active-color: #4338ca;--accent-color: #38bdf8;--background-gradient: radial-gradient(circle at top left, #0f172a, #1e1b4b 45%, #0f172a 85%);--surface-color: rgba(248, 250, 252, .92);--surface-alt-color: rgba(255, 255, 255, .65);--text-color: #0f172a;--text-color-muted: #475569;--border-color: rgba(148, 163, 184, .35);--border-strong: rgba(99, 102, 241, .25);--error-color: #ef4444;--error-bg: rgba(254, 226, 226, .9);--success-color: #22c55e;--warning-color: #fbbf24;--chip-bg: rgba(99, 102, 241, .12);--chip-text: #312e81;--bubble-source-bg: rgba(59, 130, 246, .12);--bubble-target-bg: rgba(79, 70, 229, .12);--radius-lg: 24px;--radius-md: 16px;--radius-sm: 10px;--shadow-soft: 0 20px 60px rgba(15, 23, 42, .18);--shadow-inner: inset 0 0 0 1px rgba(255, 255, 255, .35);--transition-speed: .18s}html,body,#root{height:100%;margin:0;padding:0}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--background-gradient);color:var(--text-color);display:flex;justify-content:center;align-items:center;padding:1.5rem;box-sizing:border-box;font-size:16px;transition:background .3s ease}body.overlay-open{overflow:hidden}#root{width:100%;height:100%}.container{background-color:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--border-color);padding:1.5rem 2rem;box-sizing:border-box;display:flex;flex-direction:column;gap:1.2rem;width:100%;height:100%;max-width:900px;max-height:980px;transition:transform .25s ease,box-shadow .25s ease}.container.maximized{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0;box-shadow:none;padding:1.5rem;border:none}.title-bar{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:1rem}.title-stack{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}h1{font-size:1.75rem;font-weight:600;margin:0;color:var(--text-color)}.title-subtitle{margin:0;font-size:.9rem;color:var(--text-color-muted)}.settings-button,.maximize-button{background:transparent;border:1px solid transparent;cursor:pointer;padding:.55rem;border-radius:999px;display:flex;justify-content:center;align-items:center;color:var(--text-color-muted);transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease,color var(--transition-speed) ease}.settings-button:hover,.maximize-button:hover{background-color:#6366f114;border-color:#6366f11f;color:var(--primary-color)}.settings-button{background-color:#6366f11f;border-color:#6366f147;color:var(--primary-color);padding:.7rem;box-shadow:0 6px 14px #6366f12e}.settings-button:hover{background-color:#6366f12e;border-color:#6366f161;color:var(--primary-hover-color)}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface-alt-color);border-radius:var(--radius-md);padding:.85rem 1.2rem;border:1px solid var(--border-color)}.language-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:999px;background:var(--chip-bg);color:var(--chip-text);font-size:.9rem;font-weight:500}.language-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.language-separator{font-size:1.1rem;opacity:.85}.status-indicator{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .75rem;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--text-color);border:1px solid var(--border-color)}.status-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--text-color-muted);box-shadow:0 0 0 4px #6366f11f}.status-indicator.status-connecting .status-dot{background:var(--warning-color);animation:ping 1.5s infinite;box-shadow:0 0 0 6px #fbbf2433}.status-indicator.status-listening .status-dot{background:var(--success-color);box-shadow:0 0 0 6px #22c55e33}.transcript-container{flex:1 1 auto;overflow-y:auto;margin:0;padding:.5rem;display:flex;flex-direction:column;gap:.9rem;scroll-behavior:smooth}.placeholder{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-color-muted);padding:2.5rem 1.5rem;border-radius:var(--radius-md);border:1px dashed var(--border-color);background:#ffffff59}.placeholder-visual{display:inline-flex;justify-content:center;align-items:center;width:82px;height:82px;border-radius:50%;margin-bottom:1.1rem;background:#6366f11f;color:var(--primary-color)}.placeholder-title{margin:0 0 .4rem;font-size:1.1rem;font-weight:600;color:var(--text-color)}.placeholder-copy{margin:0;max-width:420px;line-height:1.5}.transcript-entry{background:#ffffffd1;border-radius:var(--radius-md);padding:1rem 1.1rem;border:1px solid var(--border-color);box-shadow:var(--shadow-inner);display:flex;flex-direction:column;gap:.75rem}.entry-meta{display:flex;align-items:center;gap:.5rem;color:var(--text-color-muted);font-size:.85rem}.entry-time{font-variant-numeric:tabular-nums}.entry-body{display:flex;flex-direction:column;gap:.75rem}.bubble{border-radius:var(--radius-sm);padding:.75rem .9rem;display:flex;flex-direction:column;gap:.45rem;line-height:1.5}.bubble-source{background:var(--bubble-source-bg);border:1px solid rgba(59,130,246,.18)}.bubble-target{background:var(--bubble-target-bg);border:1px solid var(--border-strong)}.bubble-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-color-muted);font-weight:600}.bubble p{margin:0;color:var(--text-color);font-size:1rem;white-space:pre-wrap;word-break:break-word}.error-message{background:var(--error-bg);border:1px solid rgba(239,68,68,.35);color:var(--error-color);border-radius:var(--radius-sm);padding:.85rem 1.1rem;font-size:.95rem}.controls{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding-top:.5rem}.control-info{display:flex;flex-direction:column;gap:.65rem;flex:0 0 auto;align-items:center;text-align:center}.control-heading{font-weight:600;font-size:1.05rem}.control-helper{margin:0;color:var(--text-color-muted);font-size:.95rem;line-height:1.45}.secondary-button{align-self:center;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--border-color);background:#ffffffbf;color:var(--text-color);font-weight:500;cursor:pointer;transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease,color var(--transition-speed) ease}.secondary-button:hover:not(:disabled){background:#6366f11f;border-color:#6366f14d;color:var(--primary-color)}.secondary-button:disabled{cursor:not-allowed;opacity:.55}.mic-button{width:80px;height:80px;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease,background var(--transition-speed) ease;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover-color));box-shadow:0 16px 30px #6366f159;color:#fff}.mic-button:hover{transform:translateY(-2px);box-shadow:0 22px 40px #6366f173}.mic-button.connecting{background:linear-gradient(135deg,var(--primary-hover-color),var(--accent-color))}.mic-button.recording{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse 1.6s infinite;box-shadow:0 18px 36px #ef444466}.mic-button.recording:hover{box-shadow:0 22px 42px #ef444473}.settings-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0f172a8c;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;padding:1.5rem}.settings-modal{background:#f8fafcf2;border-radius:var(--radius-lg);padding:2rem 2.25rem;width:min(420px,100%);display:flex;flex-direction:column;gap:1.4rem;border:1px solid var(--border-color);box-shadow:var(--shadow-soft)}.settings-modal h2{margin:0;text-align:center;font-size:1.45rem;font-weight:600;color:var(--text-color)}.setting-item{display:flex;flex-direction:column;gap:.55rem}.setting-item label{font-weight:500;font-size:.95rem;color:var(--text-color)}.setting-item select,.setting-item button{width:100%;padding:.75rem .85rem;border-radius:var(--radius-sm);border:1px solid var(--border-color);font-size:1rem;background-color:#ffffffe6;color:var(--text-color);font-family:inherit;transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.pair-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}.pair-preview{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.15rem;padding-top:.45rem;border-top:1px dashed var(--border-color);font-size:.9rem;color:var(--text-color-muted);white-space:nowrap}.pair-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .6rem;border-radius:999px;background:var(--chip-bg);color:var(--chip-text);border:1px solid var(--border-color);font-weight:500}.pair-arrow{color:var(--primary-color);font-weight:600}.swap-button{width:42px;height:42px;border-radius:10px;border:1px solid var(--border-color);background:#ffffffe6;color:var(--text-color);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease,color var(--transition-speed) ease,transform var(--transition-speed) ease}.swap-button:hover{background-color:#6366f11f;border-color:#6366f14d;color:var(--primary-color);transform:translateY(-1px)}.setting-item select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1rem}.setting-item select:focus{outline:none;border-color:#6366f18c;box-shadow:0 0 0 4px #6366f12e}.clear-button{background-color:#6366f11f;cursor:pointer}.clear-button:hover{background-color:#6366f12e}.close-settings{padding:.85rem;border-radius:var(--radius-sm);border:none;background:linear-gradient(135deg,var(--primary-color),var(--primary-active-color));color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.close-settings:hover{transform:translateY(-1px);box-shadow:0 16px 30px #6366f159}@keyframes pulse{0%{box-shadow:0 0 #ef444459}70%{box-shadow:0 0 0 18px #ef444400}to{box-shadow:0 0 #ef444400}}@keyframes ping{0%{transform:scale(1);opacity:1}80%{transform:scale(1.6);opacity:0}to{transform:scale(1.6);opacity:0}}@media(max-width:900px){body{padding:1rem}.container{padding:1.25rem 1.5rem;border-radius:20px}.status-bar,.controls{flex-direction:column;align-items:stretch}.control-info{align-items:center;text-align:center}.secondary-button{align-self:center}}@media(max-width:600px){body{font-size:15px}.container{padding:1rem 1.1rem 1.25rem;gap:1rem;border-radius:18px}.title-bar{gap:.75rem}h1{font-size:1.55rem}.transcript-container{padding:.25rem;gap:.75rem}.controls{gap:1rem}.mic-button{width:72px;height:72px}}@media(max-width:480px){body{padding:.75rem}.language-chip{flex-wrap:wrap;justify-content:center}.language-label{max-width:100%}.status-bar{gap:.75rem}}