:root{--color-bg: #0d1117;--color-surface: #161b22;--color-border: #30363d;--color-text: #e6edf3;--color-text-dim: #8b949e;--color-ok: #3fb950;--color-warn: #d29922;--color-error: #f85149;--color-muted: #484f58;--color-accent: #58a6ff;--font-mono: "SF Mono", "Cascadia Code", "Fira Code", Menlo, monospace;--radius: 6px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-mono);font-size:13px;background:var(--color-bg);color:var(--color-text);line-height:1.5}.app{max-width:1200px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}.app-header h1{font-size:18px;font-weight:600}.subtitle{color:var(--color-text-dim);font-weight:400}.header-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.app-main{display:grid;grid-template-columns:320px 1fr;gap:16px;flex:1}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:16px}.panel h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-dim);margin-bottom:12px}.panel-left{display:flex;flex-direction:column;gap:12px;align-self:start}.panel-right{display:flex;flex-direction:column;gap:16px;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.panel-header h3{margin-bottom:0}.btn{font-family:var(--font-mono);font-size:13px;padding:8px 16px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:border-color .15s}.btn:hover:not(:disabled){border-color:var(--color-accent)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-sm{font-family:var(--font-mono);font-size:11px;padding:4px 8px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text-dim);cursor:pointer}.btn-sm:hover:not(:disabled){color:var(--color-text)}.btn-sm:disabled{opacity:.4;cursor:not-allowed}.btn-record{border-color:var(--color-error);color:var(--color-error)}.btn-stop{background:var(--color-error);color:#fff;border-color:var(--color-error)}.btn-submit{background:var(--color-accent);color:#000;border-color:var(--color-accent);font-weight:600}.btn-submit:hover:not(:disabled){opacity:.9}input,select{font-family:var(--font-mono);font-size:13px;padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);outline:none}input:focus,select:focus{border-color:var(--color-accent)}label{font-size:11px;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}.connection-status{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-label{font-size:12px}.health-info{display:flex;gap:8px;font-size:11px;color:var(--color-text-dim)}.provider-on{color:var(--color-ok)}.provider-off{color:var(--color-muted)}.api-key-input{display:flex;flex-direction:column;gap:4px}.input-row{display:flex;gap:4px}.input-row input{width:180px}.provider-selector{display:flex;flex-direction:column;gap:4px}.audio-controls{display:flex;gap:8px}.audio-info{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--color-text-dim);flex-wrap:wrap}.recording-indicator{color:var(--color-error);font-weight:700;animation:blink 1s step-start infinite}@keyframes blink{50%{opacity:0}}.audio-format{font-size:11px;color:var(--color-muted)}.transcript-log{flex:1;min-height:0;display:flex;flex-direction:column}.log-scroll{flex:1;overflow-y:auto;max-height:400px;display:flex;flex-direction:column;gap:2px}.log-entry{display:flex;gap:8px;padding:6px 8px;border-radius:3px;background:var(--color-bg);font-size:12px;align-items:baseline}.log-entry.log-error{border-left:3px solid var(--color-error)}.log-index{color:var(--color-muted);flex-shrink:0;min-width:24px}.log-provider{color:var(--color-accent);flex-shrink:0}.log-duration{color:var(--color-warn);flex-shrink:0}.log-text{flex:1;word-break:break-word}.log-error-text{color:var(--color-error)}.log-empty{color:var(--color-muted);padding:20px;text-align:center}.log-audio{border-left:3px solid var(--color-ok);flex-wrap:wrap}.log-capture-label{color:var(--color-ok);font-weight:700;font-size:11px;flex-shrink:0}.log-capture-info{color:var(--color-text-dim);font-size:12px;flex-shrink:0}.log-audio-player{height:28px;width:100%;max-width:300px;margin-top:4px;filter:invert(1) hue-rotate(180deg);opacity:.8}.badge{background:var(--color-border);color:var(--color-text-dim);font-size:11px;padding:2px 6px;border-radius:10px}.metrics-panel{border-top:1px solid var(--color-border);padding-top:12px}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{display:flex;flex-direction:column;gap:2px}.metric-label{font-size:11px;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}.metric-value{font-size:18px;font-weight:600}.metric-error{color:var(--color-error)}.provider-breakdown{margin-top:8px}.provider-counts{display:flex;gap:12px;margin-top:4px}.provider-count{font-size:12px;color:var(--color-accent)}.input-mode-selector{display:flex;flex-direction:column;gap:4px}.mode-toggle{display:flex;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.mode-toggle button{flex:1;font-family:var(--font-mono);font-size:12px;padding:6px 12px;border:none;background:var(--color-bg);color:var(--color-text-dim);cursor:pointer;transition:background .15s,color .15s}.mode-toggle button:not(:last-child){border-right:1px solid var(--color-border)}.mode-toggle button.active{background:var(--color-accent);color:#000;font-weight:600}.mode-toggle button:hover:not(.active){color:var(--color-text)}.voxy-panel{display:flex;flex-direction:column;gap:10px}.voxy-status{display:flex;align-items:center;gap:8px}.voxy-state-label{font-size:13px;font-weight:600}.voxy-info{font-size:12px;color:var(--color-text-dim)}.status-dot-pulse{animation:pulse .8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}.log-voxy-event{font-size:11px;opacity:.85}.log-voxy-info{border-left:3px solid var(--color-muted)}.log-voxy-warn{border-left:3px solid var(--color-warn)}.log-voxy-error{border-left:3px solid var(--color-error)}.log-voxy-label{color:var(--color-text-dim);font-weight:700;font-size:10px;text-transform:uppercase;flex-shrink:0;min-width:80px}.log-voxy-warn .log-voxy-label{color:var(--color-warn)}.log-voxy-error .log-voxy-label{color:var(--color-error)}.error-banner{background:var(--color-error);color:#fff;padding:8px 16px;border-radius:var(--radius);font-size:13px;text-align:center}@media(max-width:768px){.app-main{grid-template-columns:1fr}.header-controls{flex-direction:column;align-items:flex-start}}