*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f0f13;--surface: #1a1a24;--surface2: #22222f;--border: #2e2e3e;--accent: #4f8ef7;--accent-hover: #3a7af5;--danger: #e05555;--success: #3ec97e;--warning: #f5a623;--text: #e8e8f0;--text-muted: #888899;--radius: 10px;--radius-sm: 6px}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}a{color:var(--accent);text-decoration:none}button{cursor:pointer;border:none;border-radius:var(--radius-sm);padding:.5rem 1.2rem;font-size:14px;font-weight:500;transition:background .15s,opacity .15s}button:disabled{opacity:.5;cursor:not-allowed}input[type=text]{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:.5rem .8rem;font-size:14px;outline:none;transition:border-color .15s}input[type=text]:focus{border-color:var(--accent)}.home-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:2rem;padding:2rem}.home-page h1{font-size:2rem;font-weight:700;letter-spacing:-.5px}.home-page h1 span{color:var(--accent)}.home-page p{color:var(--text-muted);text-align:center;max-width:400px}.home-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:1.2rem}.home-card h2{font-size:1.1rem;color:var(--text-muted);font-weight:500;margin-bottom:.2rem}.btn-primary{background:var(--accent);color:#fff;width:100%;padding:.7rem;font-size:15px}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);width:100%;padding:.7rem;font-size:15px}.btn-secondary:hover:not(:disabled){border-color:var(--accent)}.divider{border:none;border-top:1px solid var(--border)}.join-row{display:flex;gap:.5rem}.join-row input{flex:1}.join-row button{flex-shrink:0}.error-msg{color:var(--danger);font-size:13px}.room-layout{display:flex;height:100vh;overflow:hidden}.room-main{flex:1;display:flex;flex-direction:column;min-width:0}.room-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.room-header h2{font-size:1rem;font-weight:600}.room-id-badge{font-size:12px;color:var(--text-muted);background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-family:monospace}.room-status{font-size:12px;padding:3px 10px;border-radius:100px;font-weight:500}.room-status.connecting{background:#3a3010;color:var(--warning)}.room-status.waiting{background:#102030;color:var(--accent)}.room-status.connected{background:#103020;color:var(--success)}.room-status.error{background:#301010;color:var(--danger)}.video-panel{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:var(--bg);min-height:0}.video-slot{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center}.video-slot video{width:100%;height:100%;object-fit:cover}.video-label{position:absolute;bottom:.6rem;left:.6rem;background:#0009;color:#fff;font-size:12px;padding:2px 8px;border-radius:4px}.video-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-muted)}.video-placeholder svg{width:48px;height:48px;opacity:.4}.controls-bar{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.85rem 1.25rem;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}.ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:.55rem 1rem;border-radius:var(--radius-sm);font-size:12px;min-width:70px}.ctrl-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.ctrl-btn.active{background:#4f8ef71f;border-color:var(--accent);color:var(--accent)}.ctrl-btn.danger{background:#e055551a;border-color:var(--danger);color:var(--danger)}.ctrl-btn.danger:hover:not(:disabled){background:#e0555533}.ctrl-btn svg{width:20px;height:20px}.metrics-panel{width:270px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.metrics-panel h3{padding:.85rem 1rem;font-size:.9rem;font-weight:600;border-bottom:1px solid var(--border);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.metrics-list{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.metric-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .75rem;display:flex;justify-content:space-between;align-items:baseline}.metric-label{font-size:12px;color:var(--text-muted)}.metric-value{font-size:13px;font-weight:600;font-family:monospace;color:var(--text)}.metric-value.good{color:var(--success)}.metric-value.warn{color:var(--warning)}.metric-value.bad{color:var(--danger)}.metrics-empty{color:var(--text-muted);font-size:13px;text-align:center;padding:2rem 1rem}.metrics-footer{padding:.6rem 1rem;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);flex-shrink:0}.device-warning{background:#f5a6231a;border-bottom:1px solid rgba(245,166,35,.3);color:var(--warning);font-size:13px;padding:.5rem 1.25rem;flex-shrink:0}.device-notice{background:#3ec97e1a;border-bottom:1px solid rgba(62,201,126,.3);color:var(--success);font-size:13px;padding:.5rem 1.25rem;flex-shrink:0}.error-screen{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem;max-width:480px;margin:0 auto}.error-screen p{color:var(--danger);text-align:center;line-height:1.6}.metrics-history{flex-shrink:0;background:var(--surface);border-top:1px solid var(--border)}.metrics-history-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;border:none;border-radius:0;padding:.6rem 1.25rem;color:var(--text-muted);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;transition:background .15s,color .15s}.metrics-history-toggle:hover{background:var(--surface2);color:var(--text)}.metrics-history-meta{display:flex;align-items:center;gap:.5rem;font-size:12px;font-weight:400}.toggle-arrow{display:inline-block;transition:transform .2s;font-size:14px}.toggle-arrow.open{transform:rotate(180deg)}.metrics-history-body{border-top:1px solid var(--border)}.metrics-history-empty{padding:1rem 1.25rem;color:var(--text-muted);font-size:13px}.metrics-history-scroll{overflow-x:auto;overflow-y:auto;max-height:220px}.metrics-table{width:100%;border-collapse:collapse;font-size:12px;min-width:560px}.metrics-table thead{position:sticky;top:0;z-index:1;background:var(--surface2)}.metrics-table th{padding:.4rem .75rem;text-align:left;color:var(--text-muted);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap}.metrics-table td{padding:.35rem .75rem;border-bottom:1px solid var(--border);color:var(--text);font-family:monospace;white-space:nowrap}.metrics-table tbody tr:hover{background:var(--surface2)}.metrics-table tbody tr:last-child td{border-bottom:none}.td-time{color:var(--text-muted)!important;font-family:monospace}.td-type{font-family:sans-serif!important;font-size:11px;color:var(--text-muted)!important}.metrics-history-footer{padding:.4rem 1.25rem;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border)}