:root{--bg: #10131a;--bg-soft: #141924;--card: #1a1f2b;--text: #e6e6e6;--muted: #9fb0cc;--border: #2d3445;--surface: #0f1420}:root[data-theme=light]{--bg: #eef2f7;--bg-soft: #f7f9fc;--card: #ffffff;--text: #162033;--muted: #4b5a75;--border: #d5deea;--surface: #f7f9fc}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);transition:background .25s ease,color .25s ease}.app-shell{min-height:100vh;display:grid;place-items:center;padding:1.25rem}.card{width:min(920px,100%);padding:1.4rem;border-radius:1rem;background:linear-gradient(180deg,var(--card) 0%,var(--bg-soft) 100%);border:1px solid var(--border);box-shadow:0 12px 40px #00000038}.fade-in{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.8rem}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.8rem}h1{margin:.4rem 0;font-size:clamp(1.45rem,3vw,2rem)}.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:.8rem}.status-item{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:.6rem .7rem;display:flex;justify-content:space-between;font-size:.92rem}.tone-connected{color:#22c55e}.tone-connecting{color:#eab308}.tone-disconnected{color:#ef4444}.panel{background:var(--surface);border:1px solid var(--border);border-radius:.8rem;padding:.75rem;margin-bottom:.8rem}.panel h3{margin:0 0 .65rem;font-size:1rem}.controls{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.8rem}.input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:.6rem;color:var(--text);padding:.58rem .65rem}.toggle{display:flex;align-items:center;gap:.5rem;font-size:.92rem}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:.6rem;padding:.62rem .75rem;cursor:pointer;transition:transform .12s ease,opacity .12s ease}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn.primary{background:linear-gradient(180deg,#3d5afe,#2f46db);color:#fff;border-color:#5f77ff}.meters{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.8rem}.meter{display:grid;gap:.35rem}.meter-track{height:10px;border:1px solid var(--border);background:var(--surface);border-radius:99px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#38bdf8,#6366f1 60%,#a78bfa);transition:width .08s linear}.error{margin:0 0 .75rem;color:#ef4444}.transcript{min-height:140px;max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:.75rem;background:var(--surface);padding:.75rem}.msg{margin:.2rem 0}.msg-user strong{color:#0ea5e9}.msg-agent strong{color:#22c55e}.msg-system strong{color:#8b5cf6}.placeholder{margin:0;color:var(--muted)}@media (max-width: 840px){.status-grid{grid-template-columns:1fr 1fr}}@media (max-width: 640px){.status-grid,.controls,.meters{grid-template-columns:1fr}.header-row{flex-direction:column}}