body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f0f0f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}#root{height:100vh;width:100vw}.login-container{align-items:center;background:linear-gradient(135deg,#f5f7fa,#e4e8ec);display:flex;justify-content:center;min-height:100vh;padding:20px}.login-card{background:#fff;border-radius:16px;box-shadow:0 10px 40px #0000001a;max-width:420px;overflow:hidden;width:100%}.login-header{border-bottom:1px solid #f0f0f0;padding:40px 40px 20px;text-align:center}.login-logo{height:auto;margin-bottom:16px;width:80px}.login-header h1{color:#1a1a2e;font-size:28px;font-weight:700;letter-spacing:2px;margin:0}.login-subtitle{color:#6b7280;font-size:14px;margin:8px 0 0}.login-content{padding:30px 40px}.login-form,.mfa-form{gap:20px}.form-group,.login-form,.mfa-form{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{color:#374151;font-size:14px;font-weight:500}.form-group input{background:#fafafa;border:2px solid #e5e7eb;border-radius:10px;font-size:16px;padding:14px 16px;transition:all .2s ease}.form-group input:focus{background:#fff;border-color:#1a1a2e;box-shadow:0 0 0 4px #1a1a2e14;outline:none}.form-group input:disabled{background:#f3f4f6;cursor:not-allowed}.form-group input::placeholder{color:#9ca3af}.mfa-input{font-family:Monaco,Menlo,monospace;font-size:24px!important;letter-spacing:8px;text-align:center}.login-button{background:#1a1a2e;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-top:8px;padding:14px 24px;transition:all .2s ease}.login-button:hover:not(:disabled){background:#2d2d44;box-shadow:0 4px 12px #1a1a2e40;transform:translateY(-1px)}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{background:#9ca3af;cursor:not-allowed}.back-button{background:#0000;border:2px solid #e5e7eb;border-radius:10px;color:#6b7280;cursor:pointer;font-size:14px;font-weight:500;margin-top:16px;padding:12px 20px;transition:all .2s ease;width:100%}.back-button:hover{background:#f9fafb;border-color:#d1d5db;color:#374151}.error-message{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:14px;padding:12px 16px;text-align:center}.loading-spinner{align-items:center;display:inline-flex;gap:8px}.loading-spinner:before{animation:spin .8s linear infinite;border:2px solid #fff;border-radius:50%;border-top-color:#0000;content:"";height:16px;width:16px}.mfa-setup,.mfa-verify{text-align:center}.mfa-setup h3,.mfa-verify h3{color:#1a1a2e;font-size:20px;font-weight:600;margin:0 0 8px}.mfa-instructions{color:#6b7280;font-size:14px;line-height:1.5;margin:0 0 24px}.qr-code-container{background:#fff;border:2px solid #e5e7eb;border-radius:12px;display:inline-block;margin-bottom:20px;padding:20px}.qr-code{display:block;height:180px;width:180px}.secret-key{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:24px;padding:16px}.secret-key p{color:#6b7280;font-size:12px;margin:0 0 8px}.secret-code{background:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#1a1a2e;display:block;font-family:Monaco,Menlo,monospace;font-size:14px;padding:10px 14px;word-break:break-all}.login-footer{background:#fafafa;border-top:1px solid #f0f0f0;padding:20px 40px;text-align:center}.login-footer p{color:#9ca3af;font-size:12px;margin:0}@media (max-width:480px){.login-container{padding:10px}.login-card{border-radius:12px}.login-header{padding:30px 24px 16px}.login-logo{width:60px}.login-header h1{font-size:24px}.login-content{padding:24px}.login-footer{padding:16px 24px}.qr-code{height:150px;width:150px}.mfa-input{font-size:20px!important;letter-spacing:6px}}.login-card{animation:fadeInUp .4s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.device-list-container{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem}.device-list-header{color:#fff;margin-bottom:2rem;position:relative;text-align:center}.header-user-info{align-items:center;display:flex;gap:1rem;position:absolute;right:0;top:0}.user-name{font-size:.95rem;opacity:.9}.logout-button{background:#fff3;border:1px solid #fff6;border-radius:5px;color:#fff;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .3s}.logout-button:hover{background:#ffffff4d;border-color:#fff9}.device-list-header h1{font-size:2.5rem;margin-bottom:.5rem;text-shadow:2px 2px 4px #0000004d}.device-list-header p{font-size:1.2rem;opacity:.9}.device-list-controls{align-items:center;background:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a;display:flex;justify-content:space-between;margin:0 auto 2rem;max-width:1200px;padding:1.5rem}.control-buttons,.filter-section{align-items:center;display:flex;gap:1rem}.filter-section label{color:#333;font-weight:600}.robot-id-select{background:#fff;border:2px solid #ddd;border-radius:5px;cursor:pointer;font-size:1rem;min-width:300px;padding:.5rem 1rem}.robot-id-select:focus{border-color:#667eea;outline:none}.add-device-button,.refresh-button,.retry-button{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;padding:.5rem 1.5rem;transition:background .3s}.add-device-button:hover,.refresh-button:hover,.retry-button:hover{background:#5568d3}.add-device-button{background:#4caf50}.add-device-button:hover{background:#45a049}.device-cards-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:0 auto;max-width:1200px}.device-card{background:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a;cursor:pointer;padding:1.5rem;transition:transform .2s,box-shadow .2s}.device-card:hover{box-shadow:0 6px 12px #00000026;transform:translateY(-5px)}.device-card-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem}.device-place,.device-robot-id{color:#333;font-size:1.2rem;font-weight:600;margin:0;word-break:break-all}.status-badge{border-radius:20px;font-size:.85rem;font-weight:600;padding:.3rem .8rem;text-transform:uppercase}.status-badge.active{background:#4caf50;color:#fff}.status-badge.inactive{background:#f44336;color:#fff}.status-badge.maintenance{background:#ff9800;color:#fff}.device-card-body{margin-bottom:1rem}.device-info-item{border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;padding:.5rem 0}.device-info-item:last-child{border-bottom:none}.device-info-label{color:#666;font-weight:600}.device-info-value{color:#333;text-align:right;word-break:break-all}.device-card-footer{border-top:2px solid #f0f0f0;margin-top:1rem;padding-top:1rem}.connect-buttons{display:flex;gap:.5rem}.connect-button{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;flex:1 1;font-size:.95rem;font-weight:600;padding:.75rem;transition:background .3s,transform .2s}.connect-button:hover{background:#5568d3;transform:translateY(-2px)}.connect-button.vr-button{background:linear-gradient(135deg,#60f,#93f);flex:0.8 1}.connect-button.vr-button:hover{background:linear-gradient(135deg,#72f,#a4f);box-shadow:0 4px 15px #60f6}.error,.loading,.no-devices{color:#fff;font-size:1.2rem;padding:3rem;text-align:center}.error{background:#f44336cc;border-radius:10px;margin:2rem auto;max-width:600px}.no-devices{background:#ffffff1a;border-radius:10px;grid-column:1/-1}.success-message{background:#4caf50;border-radius:5px;color:#fff;font-weight:600;margin:1rem auto;max-width:1200px;padding:1rem;text-align:center}.add-device-form-container{background:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a;margin:0 auto 2rem;max-width:1200px;padding:2rem}.add-device-form h2{color:#333;margin-top:0}.add-device-form h2,.form-group{margin-bottom:1.5rem}.form-group label{color:#333;display:block;font-weight:600;margin-bottom:.5rem}.form-group input,.form-group select{border:2px solid #ddd;border-radius:5px;box-sizing:border-box;font-size:1rem;padding:.75rem;width:100%}.form-group input:focus,.form-group select:focus{border-color:#667eea;outline:none}.form-hint{color:#666;display:block;font-size:.85rem;font-style:italic;margin-top:.25rem}.form-error{background:#ffebee;border-left:4px solid #c62828;border-radius:5px;color:#c62828;margin-bottom:1rem;padding:1rem}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem}.cancel-button,.submit-button{border:none;border-radius:5px;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 2rem;transition:background .3s}.submit-button{background:#4caf50;color:#fff}.submit-button:hover{background:#45a049}.cancel-button{background:#757575;color:#fff}.cancel-button:hover{background:#616161}@media (max-width:768px){.device-list-controls{flex-direction:column;gap:1rem}.control-buttons{flex-direction:column;width:100%}.control-buttons button{width:100%}.robot-id-select{min-width:auto;width:100%}.device-cards-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.cancel-button,.submit-button{width:100%}}.video-container{align-items:center;background:#000;display:flex;height:100%;justify-content:center;margin:5px 0;overflow:hidden;position:relative;transition:all .3s ease;-webkit-user-select:none;user-select:none;width:100%}.video-container.drag-mode{border:2px solid #0000}.video-container.drag-mode:hover{border-color:#2196f380;box-shadow:0 0 10px #2196f34d}.video-container.dragging{border-color:#2196f3;box-shadow:0 0 15px #2196f380;opacity:.5;transform:scale(.95)}.video-player{cursor:crosshair;height:100%;object-fit:contain;position:relative;width:100%;z-index:1}.click-point{background-color:#ff3;border-radius:50%;box-shadow:0 0 10px 5px #ff3,0 0 20px 10px gold;height:12px;width:12px;z-index:100}.bounding-box,.click-point{pointer-events:none;position:absolute}.bounding-box{border:2px solid #0f0;z-index:10}.user-polygon-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:50}.user-polygon-svg polygon{fill:#f0f3;stroke:#f0f;stroke-width:2;stroke-dasharray:5,5}.drag-overlay{align-items:center;background:#0003;bottom:0;display:flex;justify-content:center;left:0;opacity:.7;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease,background .3s ease;z-index:200}.video-container.drag-mode:hover .drag-overlay{background:#0006;opacity:1}.drag-hint{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#2196f3cc;border-radius:4px;color:#fff;font-size:14px;font-weight:600;padding:8px 16px;text-align:center}.video-player.dragging{opacity:.6}.video-player.no-stream{display:none}.video-placeholder{align-items:center;background:#1a1a1a;color:#666;display:flex;font-size:16px;height:100%;justify-content:center;width:100%}.control-panel{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;gap:20px;margin:0 auto;max-width:800px;padding:20px}.control-panel.mode-only{background:#0000;box-shadow:none;margin:0;max-width:100%;padding:15px 20px}.control-panel.mode-only .mode-controls{background:#0000;margin-bottom:0;padding:0}.connection-status{display:flex;gap:20px;justify-content:center}.status-indicator{border-radius:4px;text-align:center}.status-indicator.connected{background-color:#4caf50;color:#fff}.status-indicator.connecting{background-color:#ff9800;color:#fff}.status-indicator.disconnected{background-color:#f44336;color:#fff}.status-indicator.open{background-color:#2196f3;color:#fff}.status-indicator.closed{background-color:#9e9e9e;color:#fff}.main-controls{align-items:center;display:flex;gap:20px;justify-content:center}.recording-controls{display:flex;gap:10px}.control-button{border:none;border-radius:5px;cursor:pointer;font-size:15px;font-weight:600;min-width:120px;padding:12px 24px;transition:all .2s ease}.home-button{background-color:#2196f3;color:#fff}.home-button:hover{background-color:#1976d2}.start-recording{background-color:#42a5f5;color:#fff}.start-recording:hover{background-color:#2196f3}.stop-recording{background-color:#1e88e5;color:#fff}.stop-recording:hover{background-color:#1976d2}.start-button{background-color:#2196f3;color:#fff}.start-button:hover{background-color:#1976d2}.stop-button{background-color:#1565c0;color:#fff}.stop-button:hover{background-color:#0d47a1}.move-to-pose-button{background-color:#42a5f5;color:#fff}.move-to-pose-button:hover{background-color:#2196f3}.clear-selection-button{background-color:#64b5f6;color:#fff}.clear-selection-button:hover{background-color:#42a5f5}.bin-button{background-color:#9c27b0;color:#fff;min-width:80px}.jam-button{background-color:#f44336;color:#fff}.release-button{background-color:#4caf50;color:#fff}.control-button:hover{box-shadow:0 2px 4px #0003;opacity:.9;transform:translateY(-1px)}.control-button:active{box-shadow:0 1px 2px #0003}.mode-controls{align-items:center;background:#f5f5f5;border-radius:8px;display:flex;flex-direction:column;gap:10px;margin-bottom:10px;padding:15px}.mode-label{color:#333;font-size:14px;font-weight:600}.mode-toggle{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.mode-button{background:#fff;border:2px solid #2196f3;border-radius:5px;color:#2196f3;cursor:pointer;font-size:14px;font-weight:600;min-width:180px;padding:10px 20px;transition:all .2s}.mode-button:hover{background:#e3f2fd}.mode-button.active{background:#2196f3;color:#fff}.mode-select{border:1px solid #ddd}.input-section{gap:15px}.input-group,.input-section{display:flex;flex-direction:column}.input-group{gap:5px}.input-group label{color:#333;font-weight:600}.input-field{background-color:#f9f9f9;border:1px solid #ddd;border-radius:4px;font-size:14px;padding:8px 12px}.coordinate-inputs{display:flex;flex-wrap:wrap;gap:15px}.coordinate-inputs .input-group{flex:1 1;min-width:150px}.action-buttons{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.App{background-color:#f0f0f0;min-height:100vh;text-align:center}.App-header{background-color:#282c34;color:#fff;margin-bottom:20px;padding:20px}.App-header h1{font-size:2rem;margin:0 0 10px}.App-header p{font-size:1.1rem;margin:0;opacity:.8}.vr-mode-button{background:linear-gradient(135deg,#60f,#93f);border:none;border-radius:30px;box-shadow:0 4px 15px #60f6;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-top:15px;padding:12px 30px;transition:all .3s ease}.vr-mode-button:hover{background:linear-gradient(135deg,#72f,#a4f);box-shadow:0 8px 25px #6600ff80;transform:translateY(-3px)}.vr-mode-button:active{transform:translateY(0)}.App-main{display:flex;flex-direction:column;gap:20px;margin:0 auto;max-width:1400px;padding:0 20px}.mode-section{margin-bottom:10px;padding:15px 20px}.mode-section,.video-section{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.video-section{padding:20px}.video-grid{display:flex;flex-direction:column;gap:20px}.main-video{background:#000;border-radius:8px;height:400px;overflow:hidden;position:relative;transition:all .3s ease;width:100%}.main-video.drag-over{background:#2196f31a;border:3px dashed #2196f3;box-shadow:0 0 20px #2196f366}.secondary-videos{display:flex;flex-direction:column;gap:15px}.secondary-video-wrapper{background:#000;border-radius:8px;height:200px;overflow:hidden;position:relative;transition:all .3s ease}.secondary-video-wrapper.drag-over{background:#2196f31a;border:3px dashed #2196f3;box-shadow:0 0 15px #2196f366;transform:scale(1.05)}.secondary-videos .video-container{height:100%;margin:0}.control-section{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:20px}@media (min-width:768px){.secondary-videos{flex-direction:row;flex-wrap:wrap}.secondary-video-wrapper{flex:1 1;height:250px;min-width:300px}.secondary-videos .video-container{height:100%}}@media (min-width:1200px){.video-grid{flex-direction:row}.main-video{flex:2 1;height:500px}.secondary-videos{flex:1 1;flex-direction:column}.secondary-video-wrapper{height:150px;min-width:auto}.secondary-videos .video-container{height:100%}}.video-container:empty:before{align-items:center;color:#666;content:"Waiting for video stream...";display:flex;font-size:1.1rem;height:100%;justify-content:center}.connection-status{margin-bottom:20px}.status-indicator{border-radius:20px;display:inline-block;font-weight:600;margin:0 10px;padding:8px 16px}.control-button:hover{box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.control-button:active{box-shadow:0 2px 4px #0003;transform:translateY(0)}.input-field:focus{border-color:#2196f3;box-shadow:0 0 0 2px #2196f333;outline:none}.mode-select{background:#fff;border:2px solid #ddd;border-radius:4px;cursor:pointer;font-size:14px;padding:8px 12px}.mode-select:focus{border-color:#2196f3;outline:none}.status-indicator{transition:all .3s ease}.video-player{transition:opacity .3s ease}.video-player:hover{opacity:.95}.loading-container{align-items:center;background:linear-gradient(135deg,#f5f7fa,#e4e8ec);color:#374151;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:100vh}.loading-spinner-large{animation:spin .8s linear infinite;border:4px solid #e5e7eb;border-radius:50%;border-top-color:#1a1a2e;height:48px;margin-bottom:16px;width:48px}@keyframes spin{to{transform:rotate(1turn)}}.vr-control-container{background:linear-gradient(135deg,#0a0a1a,#1a1a3a 50%,#0a0a2a);font-family:Segoe UI,system-ui,-apple-system,sans-serif;height:100vh;overflow:hidden;position:relative;width:100vw}.vr-canvas{z-index:1}.vr-canvas,.vr-overlay{height:100%;left:0;position:absolute;top:0;width:100%}.vr-overlay{align-items:center;background:linear-gradient(180deg,#0a0a1ef2 0,#0a0a1eb3 30%,#0000 60%);display:flex;flex-direction:column;justify-content:flex-start;padding:20px;pointer-events:none;z-index:10}.vr-overlay>*{pointer-events:auto}.vr-header{margin-bottom:20px;text-align:center}.vr-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(90deg,#0f8,#0af);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 0 30px #00ff884d}.vr-header p{color:#aaa;font-size:1.1rem;margin:8px 0 0}.vr-status{align-items:center;background:#00000080;border:1px solid #ffffff1a;border-radius:30px;color:#ccc;display:flex;font-size:.95rem;gap:20px;margin-bottom:20px;padding:12px 24px}.status-dot{border-radius:50%;display:inline-block;height:10px;margin-right:6px;width:10px}.status-dot.connected{background:#0f8;box-shadow:0 0 10px #0f8}.status-dot.connecting{animation:pulse 1s infinite;background:#fa0;box-shadow:0 0 10px #fa0}.status-dot.closed,.status-dot.disconnected{background:#f46;box-shadow:0 0 10px #f46}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.vr-controls{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:20px}.vr-button{border:none;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;letter-spacing:.5px;padding:14px 28px;text-transform:uppercase;transition:all .2s ease}.vr-button:disabled{cursor:not-allowed;opacity:.5}.vr-button.start{background:linear-gradient(135deg,#0c6,#0f8);color:#000}.vr-button.start:hover:not(:disabled){box-shadow:0 6px 20px #0f86;transform:translateY(-2px)}.vr-button.stop{background:linear-gradient(135deg,#c34,#f46);color:#fff}.vr-button.stop:hover:not(:disabled){box-shadow:0 6px 20px #f466;transform:translateY(-2px)}.vr-button.exit{background:linear-gradient(135deg,#333,#555);color:#fff}.vr-button.exit:hover{box-shadow:0 6px 20px #0006;transform:translateY(-2px)}.vr-error{background:#f463;border:1px solid #f46;border-radius:12px;color:#f89;margin-bottom:20px;max-width:500px;padding:16px 24px;text-align:center}.vr-hint{color:#aaa;font-size:.85rem;line-height:1.5;margin-top:10px}.vr-instructions{background:#00000080;border:1px solid #ffffff1a;border-radius:16px;max-width:400px;padding:20px 30px}.vr-instructions h3{color:#0f8;font-size:1.1rem;margin:0 0 12px}.vr-instructions ol{color:#ccc;line-height:1.8;margin:0;padding-left:20px}.vr-instructions li{margin-bottom:6px}.vr-enter-button{background:linear-gradient(135deg,#60f,#93f)!important;border:none!important;border-radius:50px!important;bottom:30px!important;box-shadow:0 8px 30px #6600ff80!important;color:#fff!important;cursor:pointer!important;font-size:1.3rem!important;font-weight:700!important;left:50%!important;letter-spacing:2px!important;padding:18px 50px!important;position:absolute!important;text-transform:uppercase!important;transform:translateX(-50%)!important;transition:all .3s ease!important;z-index:100!important}.vr-enter-button:hover{box-shadow:0 12px 40px #6600ffb3!important;transform:translateX(-50%) translateY(-3px)!important}.vr-enter-button:active{transform:translateX(-50%) translateY(0)!important}@media (max-width:768px){.vr-header h1{font-size:1.8rem}.vr-status{flex-wrap:wrap;font-size:.85rem;justify-content:center}.vr-controls{flex-direction:column;padding:0 20px;width:100%}.vr-button{width:100%}.vr-instructions{margin:0 20px}}.vr-control-container.in-vr .vr-overlay{display:none}