:root{--bg-primary: #0a0a0f;--bg-surface: #14141f;--color-primary: #00d4aa;--color-secondary: #7c3aed;--text-primary: #f0f0f5;--text-muted: #6b7280;--border-color: #2a2a3a;--color-success: #10b981;--color-error: #ef4444;--color-warning: #f59e0b}*{margin:0;padding:0;box-sizing:border-box}body{font-family:JetBrains Mono,monospace;font-size:14px;background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden}.app{display:flex;flex-direction:column;height:100vh;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.header{display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 24px;background:var(--bg-surface);border-bottom:1px solid var(--border-color)}.header h1{font-size:16px;font-weight:600;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.status-indicator{display:flex;align-items:center;gap:8px}.status-indicator .status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.status-indicator .status-label{font-size:12px;color:var(--text-muted)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main{flex:1;display:flex;justify-content:center;align-items:center;position:relative;padding:24px}.error-banner{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ef444426;border:1px solid var(--color-error);border-radius:8px;color:var(--color-error);font-size:13px;z-index:100}.error-banner button{background:none;border:none;color:var(--color-error);font-size:18px;cursor:pointer;opacity:.7}.error-banner button:hover{opacity:1}.video-player{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:var(--bg-surface);border-radius:12px;overflow:hidden;border:2px solid var(--border-color);transition:all .3s ease}.video-player.active{border-color:var(--color-primary);box-shadow:0 0 30px #00d4aa33;animation:videoConnect .3s ease}.video-player .remote-video{width:100%;height:100%;object-fit:contain;background:#000}.video-player .video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;color:var(--text-muted)}.video-player .video-placeholder .placeholder-icon{width:64px;height:64px;opacity:.3}.video-player .video-placeholder .placeholder-icon svg{width:100%;height:100%}.video-player .video-placeholder p{font-size:14px}@keyframes videoConnect{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.local-preview{position:absolute;bottom:32px;right:32px;width:180px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:2px solid var(--color-primary);box-shadow:0 4px 20px #0006;transition:all .15s ease}.local-preview:hover{transform:scale(1.02)}.local-preview.video-off .local-video{opacity:0}.local-preview .local-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.local-preview .video-off-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background:var(--bg-surface)}.local-preview .video-off-overlay svg{width:32px;height:32px;opacity:.5}.footer{display:flex;justify-content:center;align-items:center;height:64px;padding:0 24px;background:var(--bg-surface);border-top:1px solid var(--border-color)}.controls{display:flex;align-items:center;gap:16px}.control-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:8px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.control-btn svg{width:18px;height:18px}.control-btn.primary.connect{background:var(--color-primary);color:var(--bg-primary)}.control-btn.primary.connect:hover:not(:disabled){filter:brightness(1.1)}.control-btn.primary.disconnect{background:var(--color-error);color:#fff}.control-btn.primary.disconnect:hover{filter:brightness(1.1)}.control-btn.secondary{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);padding:10px}.control-btn.secondary:hover:not(:disabled){border-color:var(--text-muted)}.control-btn.secondary:disabled{opacity:.5;cursor:not-allowed}.control-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.local-preview{width:120px;bottom:80px;right:16px}.video-player{max-width:100%}}