:root{--bg: #121212;--panel: #1d1d1d;--panel-2: #262626;--line: #333;--text: #e8e8e8;--muted: #9a9a9a;--accent: #f2811d;--ok: #4caf50;--warn: #ffb300;--err: #ef5350}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px}a{color:var(--accent)}button{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:6px 12px;cursor:pointer}button:hover{border-color:var(--accent)}button.linklike{background:none;border:none;color:var(--accent);padding:0;text-decoration:underline}button.primary{background:var(--accent);color:#121212;border:none}button.danger{background:var(--err);color:#121212;border:none}button:disabled{opacity:.55;cursor:default}button:disabled:hover{border-color:var(--line)}select,input{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:6px 8px}code{color:var(--text)}.app{max-width:1100px;margin:0 auto;padding:0 16px 48px}.topbar{display:flex;align-items:center;gap:16px;padding:14px 0 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}.topbar h1{font-size:18px;margin:0}.topbar h1 .spark{color:var(--accent)}.topbar .grow{flex:1}.topbar .who{color:var(--muted);font-size:12px}.customer-input{width:160px}.nav{display:flex;gap:6px}.nav-tab{background:none;border:1px solid transparent;color:var(--muted)}.nav-tab.active{color:var(--text);border-color:var(--line);background:var(--panel-2)}.screen{padding-top:16px}.screen h2{font-size:16px;margin:0 0 12px}.screen h3{font-size:14px;margin:18px 0 8px;color:var(--muted);font-weight:400}.notice{color:var(--muted);padding:12px 0}.notice.error{color:var(--err)}.notice .cached-note{color:var(--warn)}.hint{color:var(--muted);font-size:12px;margin-top:4px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.online{background:var(--ok)}.dot.offline{background:var(--err)}.dot.unknown{background:var(--muted)}.socket-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;background:#5a1f1c;color:#fff;border-bottom:2px solid var(--err);padding:10px 14px;margin:0 -16px}.socket-bar-text{flex:1}.socket-bar-btn{background:var(--err);color:#121212;border:none}.ring-banner{display:flex;align-items:center;gap:16px;background:#3a2a10;border:2px solid var(--accent);border-radius:6px;padding:14px 16px;margin-bottom:12px;animation:ring-pulse 1.5s ease-in-out infinite}@keyframes ring-pulse{0%,to{box-shadow:0 0 #f2811d00}50%{box-shadow:0 0 0 6px #f2811d40}}.ring-main{flex:1}.ring-title{font-size:16px}.answer-btn{font-size:15px;padding:10px 22px}.notice-line{padding:8px 12px;margin-bottom:8px;border-left:4px solid var(--muted);background:var(--panel);color:var(--muted)}.notice-line.tone-warn{border-left-color:var(--warn);color:var(--text)}.sub{color:var(--muted)}.call-panel{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:6px;padding:14px 16px;margin-bottom:14px}.call-panel.ended{border-left-color:var(--muted)}.call-panel.failed{border-left-color:var(--err)}.call-head{display:flex;align-items:flex-start;gap:12px}.call-head>div:first-child{flex:1}.call-title{font-size:16px}.call-actions{display:flex;gap:8px}.call-state{margin-top:8px}.call-state.tone-ok{color:var(--ok)}.call-state.tone-pending,.call-state.tone-warn{color:var(--warn)}.call-state.tone-bad{color:var(--err)}.call-state.tone-dim{color:var(--muted)}.video-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:10px;margin-top:10px}.video-remote,.video-local{background:#000;border-radius:6px;min-height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-local{min-height:100px}video.remote-video{width:100%;max-height:420px;background:#000}video.local-video{width:100%;max-height:160px;background:#000}.video-placeholder{color:var(--muted);padding:12px;text-align:center}.video-placeholder.small{font-size:12px}.pair-line{margin-top:8px;color:var(--ok);font-size:12px}.pair-line.bad{color:var(--err)}.media-note{color:var(--warn)}.inbox h2,.ledger h2{font-size:16px;margin:14px 0 10px}.inbox-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:4px;padding:10px 12px;margin-bottom:8px}.inbox-row .tl-main{flex:1;min-width:0}.tl-main .when{color:var(--text)}.tl-main .sub{color:var(--muted);margin-top:2px}.ack-error{padding:4px 0}.filter-bar{display:flex;gap:6px;margin:4px 0 10px}.filter-btn{padding:4px 10px;font-size:13px}.filter-btn.active{border-color:var(--accent);color:var(--accent)}.screen-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.screen-head h2{margin:0}.screen-actions{margin-left:auto;display:flex;gap:12px;align-items:center}.toggle{color:var(--muted);display:inline-flex;align-items:center;gap:6px;cursor:pointer}.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table th{text-align:left;color:var(--muted);font-weight:400;border-bottom:1px solid var(--line);padding:6px 8px}.data-table td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}.data-table tr.stale td{color:var(--muted)}.settings-table{border-collapse:collapse}.settings-table td{padding:5px 12px 5px 0;vertical-align:top}.settings-table td.k,.detail td.k{color:var(--muted);white-space:nowrap}.chip{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:1px 8px;font-size:12px;color:var(--muted)}.chip.tone-ok{color:var(--ok);border-color:var(--ok)}.chip.tone-pending{color:var(--warn);border-color:var(--warn)}.chip.tone-bad{color:var(--err);border-color:var(--err)}.chip-note{color:var(--err);font-size:12px;margin-left:6px}.chip.tone-dim{color:var(--muted)}.chip.ack{margin-left:6px}.al-row{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:4px;padding:10px 12px;margin-bottom:8px}.al-row:hover{border-color:var(--accent)}.al-row.tone-bad{border-left-color:var(--err)}.al-row.tone-warn{border-left-color:var(--warn)}.al-type,.rec-when{color:var(--muted);font-size:12px}.ack-form{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-width:420px}.ack-form input{padding:6px 8px;font:inherit}.ack-form button{align-self:flex-start}.ack-note{margin-top:4px;font-style:italic}.detail-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;padding:24px;z-index:20}.detail{background:var(--panel);border:1px solid var(--line);border-radius:6px;max-width:860px;max-height:90vh;overflow:auto;padding:16px}.detail table{border-collapse:collapse;margin-top:12px}.detail td{padding:3px 12px 3px 0;vertical-align:top}.token-gate{max-width:460px;margin:15vh auto 0;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px}.token-gate h1{font-size:18px;margin:0 0 8px}.token-gate h1 .spark{color:var(--accent)}.token-gate p{color:var(--muted)}.token-gate form{display:flex;gap:8px;margin-top:12px}.token-gate input{flex:1}.token-gate form button{background:var(--accent);color:#121212;border:none}@media (max-width: 720px){.video-grid{grid-template-columns:1fr}.data-table{font-size:12px}.socket-bar{flex-direction:column;align-items:flex-start}}