body{height:100vh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:84px}.top-bar{padding:.5rem 1rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;border-bottom:1px solid #333;background:#16162a}.top-bar-main{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.settings-toggle{margin-left:auto;background:#2a2a4a;color:#aaa;border:1px solid #444;font-size:1.1rem;line-height:1;padding:.25rem .5rem;text-decoration:none;display:inline-flex;align-items:center}.top-bar h1{color:#00d4ff;font-size:1.1rem;white-space:nowrap}.top-bar label{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:#aaa}.top-bar input[type=text]{width:240px}#startBtn{background:#00d4ff;color:#000}#startBtn:hover:not(:disabled){background:#00b8e6}#stopBtn{background:#ff4757;color:#fff}#stopBtn:hover:not(:disabled){background:#f34}.query-btn{background:#2a2a4a;color:#888;border:1px solid #444;font-size:.7rem;padding:2px 8px;cursor:pointer}.query-btn.active{background:#2ed573;color:#000;border-color:#2ed573}.query-btn:hover:not(:disabled){background:#444}.query-btn.active:hover:not(:disabled){background:#26b860}.query-btn:disabled{opacity:.4;cursor:default}.torque-btn{background:#2a2a4a;color:#888;border:1px solid #444;font-size:.7rem;padding:2px 8px;cursor:pointer}.torque-btn.active{background:#ff6b35;color:#fff;border-color:#ff6b35}.torque-btn:hover:not(:disabled){background:#444}.torque-btn.active:hover:not(:disabled){background:#e55a2b}.torque-btn:disabled{opacity:.4;cursor:default}#audioBtn{background:#2a2a4a;color:#888;border:1px solid #444}#audioBtn.active{background:#a855f7;color:#fff;border-color:#a855f7}#audioBtn:hover:not(:disabled){background:#444}#audioBtn.active:hover:not(:disabled){background:#9333ea}.ping-good{color:#2ed573}.ping-warn{color:#ffa502}.ping-bad{color:#ff4757}.main{flex:1;display:flex;min-height:0}.canvas-container{flex:1;position:relative;min-width:0}#threeCanvas{width:100%;height:100%;display:block}.canvas-overlay{position:absolute;top:.5rem;left:.5rem;font-size:.7rem;color:#888;pointer-events:none}.side-panel{display:none;position:fixed;top:0;left:0;right:0;bottom:84px;width:100%;background:#16162a;flex-direction:column;overflow-y:auto;z-index:100}.side-panel.tab-visible{display:flex}.side-panel .panel-section{display:none}.side-panel .panel-section.tab-visible{display:block}.panel-section{padding:.75rem;border-bottom:1px solid #2a2a4a}.panel-section h3{font-size:.8rem;color:#888;text-transform:uppercase;margin-bottom:.5rem}.joint-row{display:grid;grid-template-columns:50px 1fr 50px 50px;gap:.25rem;align-items:center;padding:.3rem 0;font-size:.8rem;border-bottom:1px solid #1e1e3a}.joint-row:last-child{border-bottom:none}.joint-label{font-weight:700;white-space:nowrap}.joint-angle{font-family:Monaco,Menlo,monospace;text-align:right;font-size:.85rem}.joint-vel,.joint-tau{font-family:Monaco,Menlo,monospace;text-align:right;font-size:.7rem;color:#888}.camera-split{display:none;flex-direction:column;background:#000}.camera-split .camera-feed{flex:1;position:relative;min-height:0}.camera-split .camera-feed video{width:100%;height:100%;object-fit:contain;display:block}.camera-split .cam-label{position:absolute;top:4px;left:6px;font-size:.65rem;color:#ffffff80;z-index:1}.camera-split.tab-visible{display:flex;position:fixed;top:0;left:0;right:0;bottom:84px;z-index:100}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.stat{background:#2a2a4a;padding:.4rem;border-radius:4px;text-align:center}.stat-label{color:#888;font-size:.65rem;text-transform:uppercase}.stat-value{font-size:.9rem;font-weight:700;color:#00d4ff}.log-panel{display:none;position:fixed;top:0;left:0;right:0;bottom:84px;height:auto;background:#0a0a1a;overflow-y:auto;padding:.5rem;font-family:Monaco,Menlo,monospace;font-size:.7rem;z-index:100}.log-panel.tab-visible{display:block}.log-entry{margin:.15rem 0}.log-info{color:#888}.log-success{color:#2ed573}.log-error{color:#ff4757}.log-data{color:#00d4ff}.tab-bar{display:flex;position:fixed;bottom:0;left:0;right:0;height:48px;background:#16162a;border-top:1px solid #333;z-index:200}.tab-btn{flex:1;background:transparent;color:#888;border:none;border-radius:0;font-size:.8rem;padding:0;cursor:pointer;transition:color .2s,border-color .2s;border-top:2px solid transparent}.tab-btn:hover{color:#ccc}.tab-btn.active{color:#00d4ff;border-top-color:#00d4ff}.toast-container{position:fixed;bottom:92px;left:.5rem;z-index:150;display:flex;flex-direction:column-reverse;gap:4px;pointer-events:none;max-height:40vh;overflow:hidden}.toast{background:#0a0a1ad9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-left:3px solid #888;padding:.3rem .6rem;font-family:Monaco,Menlo,monospace;font-size:.7rem;color:#ccc;border-radius:4px;max-width:min(420px,80vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;-webkit-user-select:text;user-select:text;cursor:text;animation:toastIn .25s ease-out,toastOut .4s ease-in forwards;animation-delay:0s,var(--toast-duration, 4s)}.toast-success{border-left-color:#2ed573;color:#2ed573}.toast-error{border-left-color:#ff4757;color:#ff4757}.toast-data{border-left-color:#00d4ff;color:#00d4ff}.toast-info{border-left-color:#888}.toast-chat{border-left-color:#a855f7;color:#ccc;white-space:normal;word-wrap:break-word;max-width:min(600px,90vw);pointer-events:auto;-webkit-user-select:text;user-select:text;cursor:text}.toast-sticky{animation:toastIn .25s ease-out}.chat-bar{position:fixed;bottom:48px;left:0;right:0;height:36px;display:flex;align-items:center;gap:.4rem;padding:0 .5rem;background:#16162a;border-top:1px solid #333;z-index:200}.chat-bar input[type=text]{padding:.25rem .5rem;border:1px solid #444;border-radius:4px;background:#2a2a4a;color:#fff;font-size:.8rem}.chat-bar #chatUsername{width:80px}.chat-bar #chatInput{flex:1}.chat-bar #chatInput::placeholder{color:#555}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0}}@media (max-width: 768px){.top-bar{padding:.4rem .6rem;gap:.4rem}}.settings-panel{display:none;overflow-y:auto;background:#16162a;padding:1rem}.settings-panel.active{display:flex;flex-direction:column}.settings-panel.tab-visible{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:84px;z-index:100}.settings-toggle.active{background:#00d4ff;color:#000;border-color:#00d4ff}.replay-bar{display:none;align-items:center;gap:.5rem;padding:.4rem 1rem;background:#0d0d20;border-bottom:1px solid #333}.replay-bar.active{display:flex}.replay-bar button{background:#2a2a4a;color:#ccc;border:1px solid #444;padding:.2rem .6rem;font-size:.8rem;cursor:pointer;border-radius:4px;min-width:3rem}.replay-bar button:hover{background:#444}.replay-bar .replay-time{font-family:Monaco,Menlo,monospace;font-size:.75rem;color:#888;min-width:3rem;text-align:center}.replay-bar input[type=range]{flex:1;min-width:80px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#2a2a4a;border-radius:2px;outline:none}.replay-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#00d4ff;cursor:pointer}.replay-bar input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#00d4ff;border:none;cursor:pointer}.replay-bar select{background:#2a2a4a;color:#ccc;border:1px solid #444;padding:.15rem .3rem;font-size:.75rem;border-radius:4px}#recordBtn{background:#2a2a4a;color:#ccc;border:1px solid #555;display:inline-flex;align-items:center;gap:.3rem}#recordBtn:disabled{color:#666}#recordBtn:hover:not(:disabled){background:#444}#recordBtn.recording{background:#dc2626;color:#fff;border-color:#dc2626;animation:recordPulse 1.5s ease-in-out infinite}#recordBtn.recording:hover{background:#b91c1c}.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#dc2626;flex-shrink:0}#recordBtn:disabled .rec-dot{background:#666}#recordBtn.recording .rec-dot{background:#fff;animation:recordPulse 1.5s ease-in-out infinite}@keyframes recordPulse{0%,to{opacity:1}50%{opacity:.4}}#replayBtn{background:#2a2a4a;color:#888;border:1px solid #444}#replayBtn:hover:not(:disabled){background:#444}#replayBtn.active{background:#f59e0b;color:#000;border-color:#f59e0b}@media (min-width: 1024px){.camera-split{display:flex;flex:none;height:100%;aspect-ratio:2/3;max-width:50%}.camera-split.tab-visible{position:static;bottom:auto;z-index:auto}.camera-split.settings-hidden{display:none!important}.settings-panel.active{flex:none;height:100%;width:480px;max-width:55%}.tab-btn[data-tab=camera],.tab-btn[data-tab=settings]{display:none}}