body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f5f6f8;color:#1a1a1a}.app{max-width:1000px;margin:40px auto;padding:24px;background:#fff;border-radius:8px;box-shadow:0 1px 4px #0000001a}h1{font-size:1.4rem;margin-bottom:4px}.subtitle{color:#666;font-size:.9rem;margin-top:0;margin-bottom:20px}.call-panel{display:grid;grid-template-columns:1fr;gap:12px;padding:16px;margin-bottom:20px;border:1px solid #dbe3ef;border-radius:8px;background:#f8fafc}.call-copy h2{margin:0 0 4px;font-size:1rem}.call-copy p{margin:0;color:#475569;font-size:.88rem}.call-controls{display:grid;grid-template-columns:120px minmax(180px,1fr) auto auto;gap:10px;align-items:center}.call-controls label{color:#334155;font-size:.85rem;font-weight:600}.call-controls input{min-width:0;padding:9px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:.95rem}.call-controls input[aria-invalid=true]{border-color:#dc2626;outline-color:#dc2626}.call-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#475569;font-size:.85rem}.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;color:#fff;font-size:.75rem;font-weight:700;text-transform:uppercase}.badge-idle{background:#64748b}.badge-connecting{background:#ca8a04}.badge-connected{background:#16a34a}.field-error{margin:0;color:#991b1b;font-size:.85rem}.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.filters input{padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:.9rem}button{padding:8px 20px;font-size:.9rem;border:none;border-radius:6px;background:#2563eb;color:#fff;cursor:pointer}button[type=button]{background:#6b7280}button:disabled{background:#9ca3af;cursor:not-allowed}.error-banner{padding:10px 14px;margin-bottom:16px;background:#fee2e2;color:#991b1b;border-radius:6px;font-size:.9rem}.layout{display:flex;gap:20px;align-items:flex-start}.table-wrap{flex:1;min-width:0;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #e5e7eb}th{color:#6b7280;font-weight:600;font-size:.8rem;text-transform:uppercase}tbody tr{cursor:pointer}tbody tr:hover{background:#f9fafb}tbody tr.selected{background:#eff6ff}.detail-panel{width:320px;flex-shrink:0;background:#f9fafb;border-radius:8px;padding:16px 20px}.detail-panel h2{font-size:1.1rem;margin-top:0}.detail-panel dl{margin:0}.detail-panel dt{font-size:.75rem;text-transform:uppercase;color:#6b7280;margin-top:10px}.detail-panel dd{margin:2px 0 0;font-size:.9rem}@media (max-width: 760px){.app{margin:0;border-radius:0}.call-controls{grid-template-columns:1fr}.layout{flex-direction:column}.detail-panel{width:auto}}