:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f3460;--text-primary: #eee;--text-secondary: #aaa;--accent: #e94560;--accent-hover: #ff6b6b;--success: #4ade80;--warning: #fbbf24;--error: #f87171;--border-color: #333}html,body,#root{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5}.login-form-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.login-form{background:var(--bg-secondary);padding:40px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 10px 40px #0000004d}.login-form h1{text-align:center;margin-bottom:8px;font-size:28px}.login-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:24px}.form-group{margin-bottom:20px}.form-group input{width:100%;padding:14px 16px;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:16px;transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--accent)}.login-form button{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.login-form button:hover:not(:disabled){background:var(--accent-hover)}.login-form button:disabled{opacity:.5;cursor:not-allowed}.error-message{background:#f871711a;border:1px solid var(--error);color:var(--error);padding:12px;border-radius:8px;margin-bottom:20px;text-align:center}.login-divider{display:flex;align-items:center;margin:24px 0;color:var(--text-secondary)}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border-color)}.login-divider span{padding:0 16px;font-size:14px;text-transform:uppercase}.google-login-wrapper{display:flex;justify-content:center}.desktop-view{display:flex;flex-direction:column;height:100vh}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.status-left{display:flex;gap:20px;align-items:center}.status-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary)}.status-indicator{width:10px;height:10px;border-radius:50%}.status-connected{background:var(--success);box-shadow:0 0 8px var(--success)}.status-connecting{background:var(--warning);animation:pulse 1s infinite}.status-disconnected{background:var(--text-secondary)}.status-error{background:var(--error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.client-id{font-family:monospace}.logout-button{padding:6px 16px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s}.logout-button:hover{color:var(--text-primary);border-color:var(--text-secondary)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.controls{padding:15px 20px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.agent-selector{display:flex;align-items:center;gap:12px}.agent-selector label{font-weight:500}.agent-selector select{flex:1;max-width:300px;padding:8px 12px;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;font-size:14px}.agent-selector select:focus{outline:none;border-color:var(--accent)}.refresh-button{padding:8px 16px;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s}.refresh-button:hover:not(:disabled){background:var(--bg-primary)}.refresh-button:disabled{opacity:.5;cursor:not-allowed}.remote-desktop{flex:1;position:relative;background:#000;display:flex;justify-content:center;align-items:center;overflow:hidden}.remote-video{max-width:100%;max-height:100%;object-fit:contain}.remote-overlay{position:absolute;inset:0;background:#000c;display:flex;justify-content:center;align-items:center}.overlay-content{text-align:center}.status-text{font-size:24px;margin-bottom:20px;color:var(--text-secondary)}.connect-button{padding:14px 32px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.connect-button:hover:not(:disabled){background:var(--accent-hover)}.connect-button:disabled{opacity:.5;cursor:not-allowed}.connecting-spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.waiting-text{color:var(--text-secondary)}.disconnect-button{position:absolute;top:15px;right:15px;padding:8px 16px;background:#000000b3;color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s;z-index:10}.disconnect-button:hover{background:var(--error);border-color:var(--error)}.remote-video.capturable{cursor:pointer}.capture-prompt{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 40px;background:#000c;border:2px solid var(--accent);border-radius:12px;cursor:pointer;transition:all .2s;animation:fadeIn .3s ease-out}.capture-prompt:hover{background:#e9456033;border-color:var(--accent-hover)}.capture-prompt span:first-child{font-size:18px;font-weight:600;color:var(--text-primary)}.capture-hint{font-size:13px;color:var(--text-secondary)}.capturing-indicator{position:absolute;top:15px;left:15px;display:flex;align-items:center;gap:8px;padding:8px 16px;background:#000000b3;border:1px solid var(--success);border-radius:6px;font-size:14px;color:var(--success);animation:fadeIn .2s ease-out}.capturing-dot{width:8px;height:8px;background:var(--success);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,50%) scale(.95)}to{opacity:1;transform:translate(-50%,50%) scale(1)}}.status-center{display:flex;gap:16px;align-items:center}.stats-item{font-family:monospace;font-size:13px;color:var(--text-secondary)}.stats-item.resolution{color:var(--text-secondary);opacity:.7}.quality-indicator{display:flex;align-items:center;gap:8px;padding:4px 10px;background:#0000004d;border-radius:4px;font-size:12px;text-transform:capitalize}.quality-bars{display:flex;gap:2px;align-items:flex-end}.quality-bar{width:4px;background:var(--border-color);border-radius:1px;transition:background .2s}.quality-bar:nth-child(1){height:6px}.quality-bar:nth-child(2){height:9px}.quality-bar:nth-child(3){height:12px}.quality-bar:nth-child(4){height:15px}.quality-bar.active{background:var(--text-secondary)}.quality-excellent .quality-bar.active{background:var(--success)}.quality-excellent{color:var(--success)}.quality-good .quality-bar.active{background:#a3e635}.quality-good{color:#a3e635}.quality-fair .quality-bar.active{background:var(--warning)}.quality-fair{color:var(--warning)}.quality-poor .quality-bar.active{background:var(--error)}.quality-poor{color:var(--error)}.desktop-controls{position:absolute;top:15px;right:15px;display:flex;gap:8px;z-index:10}.control-button{padding:8px 16px;background:#000000b3;color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.control-button:hover{background:#000000e6;border-color:var(--text-secondary)}.control-button.disconnect-button:hover{background:var(--error);border-color:var(--error)}.control-button.fullscreen-button{padding:8px 12px}.control-button.fullscreen-button:hover{background:var(--bg-tertiary);border-color:var(--accent)}.remote-desktop.fullscreen{position:fixed;inset:0;z-index:1000;background:#000}.remote-desktop.fullscreen .remote-video{width:100%;height:100%;object-fit:contain}.remote-desktop.fullscreen .desktop-controls{opacity:0;transition:opacity .3s}.remote-desktop.fullscreen:hover .desktop-controls{opacity:1}.remote-desktop.fullscreen .capturing-indicator{opacity:0;transition:opacity .3s}.remote-desktop.fullscreen:hover .capturing-indicator{opacity:1}@media(max-width:768px){.status-bar{flex-wrap:wrap;gap:10px;padding:8px 12px}.status-left,.status-center{flex-wrap:wrap;gap:8px}.status-center{order:3;width:100%;justify-content:center;border-top:1px solid var(--border-color);padding-top:8px;margin-top:4px}.status-item{font-size:12px}.agent-selector{flex-wrap:wrap}.agent-selector select{max-width:none;width:100%}}