*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f0f;--surface:#1a1a1a;--surface-hover:#252525;--border:#2a2a2a;--text:#e0e0e0;--text-muted:#888;--accent:#4f8cff;--accent-hover:#6ba0ff;--danger:#e74c4c;--success:#3fb87a;--warning:#f0a030;--radius:8px;--radius-sm:4px}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5}#app{height:100%;display:flex;position:relative}.hidden{display:none!important}#sidebar{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;width:340px;min-width:340px;display:flex;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--border);padding:20px 16px 12px}.sidebar-header h1{font-size:18px;font-weight:600}.subtle{color:var(--text-muted);margin-top:2px;font-size:12px}.add-btn{border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;background:0 0;margin:12px 16px;padding:10px 16px;font-size:13px;transition:all .15s}.add-btn:hover{border-color:var(--accent);color:var(--accent);background:#4f8cff0f}.add-connection{flex-direction:column;gap:8px;margin:12px 16px;display:flex}.add-connection input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);outline:none;padding:8px 12px;font-size:13px;transition:border-color .15s}.add-connection input:focus{border-color:var(--accent)}.add-connection input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);flex:none;padding:0}.form-row{flex-direction:column;display:flex}.form-check{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:12px;display:flex}.form-hint{color:var(--text-muted);font-size:11px;line-height:1.4}.add-actions{gap:8px;display:flex}.add-actions button{border-radius:var(--radius-sm);cursor:pointer;border:none;flex:1;padding:7px 12px;font-size:13px;transition:background .15s}.add-actions button[type=submit]{background:var(--accent);color:#fff}.add-actions button[type=submit]:disabled{opacity:.4;cursor:default}.add-actions button[type=submit]:not(:disabled):hover{background:var(--accent-hover)}.add-actions button[type=button]{color:var(--text-muted);border:1px solid var(--border);background:0 0}.add-actions button[type=button]:hover{background:var(--surface-hover)}.empty-state{text-align:center;color:var(--text-muted);padding:32px 16px;font-size:13px}.connection-list{flex:1;padding:0 8px;list-style:none;overflow-y:auto}.connection-item{border-radius:var(--radius-sm);align-items:stretch;margin:2px 0;transition:background .1s;display:flex}.connection-item:hover{background:var(--surface-hover)}.connection-item.connecting{opacity:.7}.connection-main{color:var(--text);cursor:pointer;text-align:left;background:0 0;border:none;flex-direction:column;flex:1;align-items:flex-start;padding:10px 12px;display:flex}.conn-name{font-size:13px;font-weight:500}.conn-host{color:var(--text-muted);font-family:SF Mono,Menlo,Monaco,monospace;font-size:11px}.conn-status{border-radius:3px;margin-top:3px;padding:1px 6px;font-size:11px}.conn-status[data-status=connecting],.conn-status[data-status=reconnecting]{color:var(--warning)}.conn-status[data-status=connected],.conn-status[data-status=streaming]{color:var(--success)}.conn-tag{border:1px solid var(--border);color:var(--text-muted);border-radius:3px;align-self:flex-start;margin-top:3px;padding:1px 6px;font-size:10px}.conn-delete{color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 12px;font-size:18px;transition:opacity .1s,color .1s}.connection-item:hover .conn-delete{opacity:.6}.conn-delete:hover{color:var(--danger)!important;opacity:1!important}#stream-area{background:var(--bg);flex-direction:column;flex:1;min-width:0;display:flex}.stream-placeholder{color:var(--text-muted);flex:1;justify-content:center;align-items:center;font-size:14px;display:flex}#stream-panel{flex-direction:column;flex:1;display:flex}.stream-header{border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:12px;padding:12px 16px;display:flex}.back-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;background:0 0;padding:5px 10px;font-size:13px;transition:background .15s}.back-btn:hover{background:var(--surface-hover)}.stream-header h1{font-size:15px;font-weight:600}.header-host{color:var(--text-muted);font-family:SF Mono,Menlo,Monaco,monospace;font-size:12px}.display-selector{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:12px 16px;display:flex}.display-selector label{color:var(--text-muted);font-size:13px}.display-selector select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);min-width:220px;padding:6px 10px;font-size:13px}.start-btn{border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:6px 16px;font-size:13px;transition:background .15s}.start-btn:hover{background:var(--accent-hover)}.input-toggle{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:12px;display:flex}.input-toggle input{width:13px;height:13px;accent-color:var(--accent)}.stop-btn{border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);cursor:pointer;background:0 0;margin-left:auto;padding:4px 12px;font-size:12px;transition:background .15s}.stop-btn:hover{background:#e74c4c1f}.canvas-container{background:#000;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-container canvas{object-fit:contain;max-width:100%;max-height:100%;display:block}.canvas-container canvas.locked{cursor:none;outline:1px solid var(--accent)}.stats{border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-user-select:none;user-select:none;z-index:10;background:#0c0d10b8;border-radius:10px;min-width:150px;padding:10px 12px;font-family:SF Mono,Menlo,Monaco,monospace;font-size:.78rem;position:absolute;top:12px;right:12px}.stats .stat{justify-content:space-between;gap:16px;padding:2px 0;display:flex}.stats .stat .k{color:var(--text-muted)}.stats .stat .v{color:var(--success)}.stats .stat .v.bad{color:var(--warning)}.stats .stat .v.crit{color:var(--danger)}.toast{background:var(--surface);border:1px solid var(--border);color:var(--text);z-index:50;border-radius:10px;max-width:80%;padding:10px 16px;font-size:.85rem;position:fixed;top:16px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #00000080}.toast.err{border-color:var(--danger);color:#ffd9dd}.toast.ok{border-color:var(--success)}.debug-overlay{color:#0f0;z-index:9999;background:#000000eb;border-top:2px solid #0f0;height:35vh;padding:8px;font-family:monospace;font-size:11px;line-height:1.5;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.debug-bar{background:#000;align-items:center;gap:8px;padding-bottom:4px;display:flex;position:sticky;top:0}.debug-bar span{color:#0f0;font-weight:700}.debug-bar button{color:#0f0;cursor:pointer;background:0 0;border:1px solid #0f0;padding:2px 8px;font-size:11px}.debug-log-container{white-space:pre-wrap;word-break:break-all}