*{box-sizing:border-box}body{margin:0;padding:0;background:#0a0a14;color:#fff}.app{min-height:100vh;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-header{padding:16px 24px;background:#1a1a2e;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2a2a3e}.app-header h1{margin:0;font-size:20px;font-weight:600}.header-controls{display:flex;align-items:center;gap:16px}.active-connection,.active-connections{color:#4caf50;padding:4px 12px;background:#4caf5026;border-radius:12px}.header-icon-button{display:flex;align-items:center;justify-content:center;gap:4px;width:36px;height:36px;padding:0;background:#2a2a3e;border:1px solid #444;border-radius:6px;color:#fff;font-size:16px;cursor:pointer;transition:background .2s,border-color .2s}.header-icon-button:hover:not(:disabled){background:#3a3a4e;border-color:#555}.header-icon-button:disabled{opacity:.5;cursor:not-allowed}.host-selector .header-icon-button{width:auto;padding:0 10px}.host-selector-arrow{font-size:10px;color:#888;margin-left:2px}.spinning{display:inline-block;animation:spin 1s linear infinite}.app-main{flex:1;padding:24px;overflow-y:auto}.device-grid-container{max-width:1400px;margin:0 auto}.device-grid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.device-grid-header-right{display:flex;align-items:center;gap:12px}.connection-count{font-size:13px;color:#4caf50;padding:4px 10px;background:#4caf501a;border-radius:10px}.device-grid-header h2{margin:0;font-size:18px;font-weight:500;color:#aaa}.refresh-button{padding:8px 16px;background:#2a2a3e;border:1px solid #444;border-radius:6px;color:#fff;font-size:14px;cursor:pointer;transition:background .2s}.refresh-button:hover:not(:disabled){background:#3a3a4e}.refresh-button:disabled{opacity:.5;cursor:not-allowed}.device-grid-error{padding:16px;background:#f443361a;border:1px solid rgba(244,67,54,.3);border-radius:8px;color:#f44336;margin-bottom:24px}.device-grid-empty{text-align:center;padding:60px 20px;color:#666}.device-grid-empty .hint{font-size:14px;margin-top:8px}.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.device-card{background:#1a1a2e;border:1px solid #2a2a3e;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}.device-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d;border-color:#444}.device-card.active{border-color:#4caf50;box-shadow:0 0 0 2px #4caf504d}.device-card.offline{opacity:.5;cursor:not-allowed}.device-card.offline:hover{transform:none;box-shadow:none}.device-card.hovering{border-color:#666;transform:translateY(-2px);box-shadow:0 8px 24px #0006}.device-thumbnail{position:relative;aspect-ratio:16 / 9;background:#0a0a14;display:flex;align-items:center;justify-content:center}.device-thumbnail img{width:100%;height:100%;object-fit:cover}.device-thumbnail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#444}.device-icon{font-size:48px;opacity:.5}.device-live-badge{position:absolute;top:8px;right:8px;padding:4px 8px;background:#f44336;color:#fff;font-size:10px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.device-viewers-badge{position:absolute;bottom:8px;right:8px;padding:4px 8px;background:#000000b3;color:#fff;font-size:11px;border-radius:4px}.device-focused-badge{position:absolute;top:8px;left:8px;padding:4px 8px;background:#2196f3;color:#fff;font-size:10px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.device-controller-badge{position:absolute;bottom:8px;left:8px;padding:4px 8px;background:#ffc107e6;color:#000;font-size:10px;font-weight:600;border-radius:4px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-fps-indicator{position:absolute;bottom:8px;left:8px;padding:2px 6px;background:#000000b3;color:#0f0;font-size:10px;font-family:SF Mono,Consolas,monospace;border-radius:3px}.device-connecting-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center}.device-error-overlay{position:absolute;inset:0;background:#f443364d;display:flex;align-items:center;justify-content:center}.device-error-overlay .error-icon{font-size:32px}.spinner-small{width:24px;height:24px;border:2px solid #2a2a3e;border-top-color:#4caf50;border-radius:50%;animation:spin 1s linear infinite}.device-live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.device-info{padding:16px;position:relative}.device-remove-btn{position:absolute;bottom:4px;right:4px;width:20px;height:20px;padding:0;border:none;background:transparent;color:#888;font-size:14px;line-height:20px;text-align:center;cursor:pointer;opacity:.6}.device-remove-btn:hover{opacity:1;color:#f44336}.device-model{font-size:16px;font-weight:500;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-serial{font-size:12px;color:#888;font-family:SF Mono,Consolas,monospace;margin-bottom:8px}.device-status{font-size:12px;font-weight:500}.device-status.online{color:#4caf50}.device-status.offline{color:#f44336}.device-status.error{color:#ff9800}.player-overlay{position:fixed;inset:0;background:#0a0a14;z-index:1000;display:flex;flex-direction:column;outline:none}.player-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1a1a2e;border-bottom:1px solid #2a2a3e;min-height:56px}.player-header-left{display:flex;align-items:center;gap:12px}.player-back-button{width:36px;height:36px;border:none;background:#2a2a3e;border-radius:8px;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.player-back-button:hover{background:#3a3a4e}.player-device-info{display:flex;flex-direction:column}.player-device-model{font-size:14px;font-weight:500}.player-device-serial{font-size:12px;color:#888;font-family:SF Mono,Consolas,monospace}.player-header-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px}.player-status{font-size:13px;padding:4px 12px;border-radius:12px}.player-status.connected{color:#4caf50;background:#4caf5026}.player-status.connecting{color:#ff9800;background:#ff980026}.player-status.error{color:#f44336;background:#f4433626}.player-status.idle{color:#888;background:#88888826}.connection-info{padding:4px 10px;font-size:12px;font-family:SF Mono,Consolas,monospace;border-radius:12px;background:#ffffff1a;color:#aaa}.player-header-right{display:flex;align-items:center;gap:8px}.control-button{padding:8px 12px;background:#2a2a3e;border:1px solid #444;border-radius:6px;color:#fff;font-size:13px;cursor:pointer;transition:background .2s,border-color .2s}.control-button:hover{background:#3a3a4e}.control-button.has-control{background:#4caf5033;border-color:#4caf50;color:#4caf50}.close-button{padding:8px 16px;background:#2a2a3e;border:1px solid #444;border-radius:6px;color:#fff;font-size:13px;cursor:pointer;transition:background .2s}.close-button:hover{background:#3a3a4e}.disconnect-button{padding:8px 16px;background:#f44336;border:none;border-radius:6px;color:#fff;font-size:13px;cursor:pointer;transition:background .2s}.disconnect-button:hover{background:#d32f2f}.player-content{flex:1;display:flex;overflow:hidden}.player-main{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#000}.player-video{width:100%;height:100%;object-fit:contain;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.player-connecting,.player-error,.player-disconnected{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#888}.player-connecting p,.player-error p,.player-disconnected p{margin:0;font-size:16px}.player-error{color:#f44336}.player-error .error-message{font-size:14px;color:#888}.player-error button{margin-top:16px;padding:8px 24px;background:#2a2a3e;border:1px solid #444;border-radius:6px;color:#fff;cursor:pointer}.player-error button:hover{background:#3a3a4e}.spinner{width:40px;height:40px;border:3px solid #2a2a3e;border-top-color:#4caf50;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.app-header{padding:12px 16px}.app-header h1{font-size:18px}.app-main{padding:16px}.device-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.player-header{flex-wrap:wrap;gap:8px}.player-header-center{position:static;transform:none;order:-1;width:100%;justify-content:center}.player-header-right{flex-wrap:wrap}}.stats-sidebar{width:280px;min-width:280px;background:#1a1a2e;border-left:1px solid #2a2a3e;display:flex;flex-direction:column;overflow:hidden}.stats-header{padding:16px;border-bottom:1px solid #2a2a3e}.stats-header h3{margin:0;font-size:16px;font-weight:500;color:#fff}.stats-content{flex:1;overflow-y:auto;padding:8px}.stats-section{background:#2a2a3e80;border-radius:8px;padding:12px;margin-bottom:8px}.stats-section h4{margin:0 0 8px;font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.5px}.stats-section-title{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1)}.stats-section-title:first-child{margin-top:0}.stats-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px}.stats-label{color:#aaa}.stats-value{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}.stats-value.state-connected{color:#4caf50}.stats-value.state-connecting{color:#ffc107}.stats-value.state-idle,.stats-value.state-disconnected{color:#999}.stats-value.state-error{color:#f44336}.stats-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#666;text-align:center}.stats-placeholder p{margin:4px 0}.stats-hint{font-size:12px;color:#555}.connection-status-indicator{display:flex;align-items:center;gap:16px;padding:6px 12px;background:#2a2a3e;border:1px solid #444;border-radius:6px;font-size:12px}.status-item{display:flex;align-items:center;gap:6px}.status-label{color:#888;font-weight:500}.status-indicator-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-indicator-connected{background:#4caf50;box-shadow:0 0 6px #4caf5099}.status-indicator-connecting{background:#ffc107;animation:pulse 1s infinite}.status-indicator-disconnected{background:#666}.add-device-card{border:2px dashed #3a3a4e;background:transparent;font:inherit;color:inherit;text-align:inherit;padding:0}.add-device-card:hover{border-color:#4caf50;background:#4caf500d}.add-device-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#555}.add-device-icon{font-size:48px;font-weight:300;color:#4caf50;opacity:.7}.add-device-card:hover .add-device-icon{opacity:1}.add-device-modal-backdrop{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.add-device-modal{background:#1a1a2e;border:1px solid #2a2a3e;border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:0 16px 48px #00000080}.add-device-modal h2{margin:0 0 20px;font-size:18px;font-weight:500;color:#fff}.add-device-input{width:100%;padding:12px 14px;background:#2a2a3e;border:1px solid #444;border-radius:6px;color:#fff;font-size:14px;font-family:SF Mono,Consolas,monospace;margin-bottom:12px}.add-device-input::placeholder{color:#666}.add-device-input:focus{outline:none;border-color:#4caf50}.add-device-input:disabled{opacity:.6}.add-device-error{padding:8px 12px;background:#f443361a;color:#f44336;font-size:13px;border-radius:4px;margin-bottom:12px}.add-device-buttons{display:flex;gap:10px;justify-content:flex-end}.add-device-cancel{padding:10px 16px;background:#2a2a3e;border:1px solid #444;border-radius:6px;color:#888;font-size:14px;cursor:pointer;transition:background .2s,color .2s}.add-device-cancel:hover:not(:disabled){background:#3a3a4e;color:#fff}.add-device-cancel:disabled{opacity:.5;cursor:not-allowed}.add-device-connect{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#4caf50;border:none;border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.add-device-connect:hover:not(:disabled){background:#45a049}.add-device-connect:disabled{opacity:.6;cursor:not-allowed}.spinner-tiny{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.device-model-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.device-model-row .device-model{flex:1;min-width:0;margin-bottom:0}.device-source-badge{padding:2px 6px;font-size:10px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}.device-source-badge.lan{background:#64b5f626;color:#64b5f6}.device-source-badge.cloud{background:#ba68c826;color:#ba68c8}.device-source-badge.manual{background:#ff980026;color:#ffa726}.mode-selector{display:flex;flex-direction:column;gap:8px}.mode-selector-tabs{display:flex;background:#2a2a3e;border-radius:8px;padding:3px}.mode-tab{display:flex;align-items:center;gap:6px;padding:8px 14px;background:transparent;border:none;border-radius:6px;color:#888;font-size:13px;cursor:pointer;transition:background .2s,color .2s}.mode-tab:hover{color:#ccc}.mode-tab.active{background:#4caf50;color:#fff}.mode-tab-icon{font-size:14px}.mode-tab-label{font-weight:500}.mode-status{width:8px;height:8px;border-radius:50%;margin-left:4px}.mode-status-connected{background:#4caf50;box-shadow:0 0 6px #4caf5099}.mode-status-connecting{background:#ffc107;animation:pulse 1s infinite}.mode-status-disconnected{background:#666}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.mode-orchestrator-config{margin-top:4px}.mode-url-display{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#0003;border-radius:4px;cursor:pointer;transition:background .2s;font-size:11px}.mode-url-display:hover{background:#0000004d}.mode-url-label{color:#666}.mode-url-value{color:#888;font-family:SF Mono,Consolas,monospace;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mode-url-edit-icon{color:#666;font-size:12px}.mode-url-edit{display:flex;flex-direction:column;gap:8px}.mode-url-input{padding:8px 10px;background:#2a2a3e;border:1px solid #444;border-radius:4px;color:#fff;font-size:12px;font-family:SF Mono,Consolas,monospace;width:100%}.mode-url-input:focus{outline:none;border-color:#4caf50}.mode-url-buttons{display:flex;gap:6px}.mode-url-button{padding:4px 10px;border:none;border-radius:4px;font-size:11px;cursor:pointer;transition:background .2s}.mode-url-save{background:#4caf50;color:#fff}.mode-url-save:hover{background:#45a049}.mode-url-cancel{background:#2a2a3e;color:#888}.mode-url-cancel:hover{background:#3a3a4e;color:#fff}.mode-url-reset{background:#2a2a3e;color:#888}.mode-url-reset:hover{background:#3a3a4e;color:#fff}.device-selector{max-width:800px;margin:0 auto}.device-selector-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.device-selector-empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.device-selector-empty-message{font-size:18px;color:#888;margin-bottom:8px}.device-selector-empty-hint{font-size:14px;color:#666}.device-selector-header{margin-bottom:16px}.device-selector-header h3{margin:0;font-size:16px;font-weight:500;color:#aaa}.device-selector-list{display:flex;flex-direction:column;gap:8px}.device-selector-item{display:flex;align-items:center;gap:12px;padding:16px;background:#1a1a2e;border:1px solid #2a2a3e;border-radius:8px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.device-selector-item:hover{background:#222238;border-color:#3a3a4e;transform:translate(4px)}.device-selector-item.selected{border-color:#4caf50;background:#4caf501a}.device-selector-item.connected{border-color:#4caf50}.device-selector-item.offline{opacity:.5;cursor:not-allowed}.device-selector-item.offline:hover{transform:none;background:#1a1a2e}.device-item-status{flex-shrink:0}.device-status-dot{display:block;width:10px;height:10px;border-radius:50%}.device-status-dot.online{background:#4caf50;box-shadow:0 0 6px #4caf5099}.device-status-dot.offline{background:#666}.device-item-info{flex:1;min-width:0}.device-item-name{font-size:15px;font-weight:500;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-item-meta{font-size:12px;color:#888;font-family:SF Mono,Consolas,monospace;margin-bottom:2px}.device-item-viewers{font-size:11px;color:#666}.device-controller{color:#ffc107}.device-item-actions{flex-shrink:0}.device-action-button{padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}.device-action-button.connect{background:#4caf50;color:#fff}.device-action-button.connect:hover:not(:disabled){background:#45a049}.device-action-button.connect:disabled{opacity:.6;cursor:not-allowed}.device-action-button.disconnect{background:#f44336;color:#fff}.device-action-button.disconnect:hover{background:#d32f2f}.device-selector-divider{padding:12px 0;font-size:12px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px}.unified-device-grid{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:32px}.device-section{background:#12121e;border-radius:12px;padding:20px;border:1px solid #2a2a3e}.device-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.device-section-title{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;margin:0;cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;box-shadow:none;outline:none;border-radius:0;min-height:0;user-select:none;-webkit-tap-highlight-color:transparent}.device-section-title:focus{outline:2px solid #64B5F6;outline-offset:2px}.device-section-title:active,.device-section-title:focus:active{outline:none;box-shadow:none;transform:none;background:none}.section-toggle{font-size:10px;color:#666;width:16px;display:inline-block}.device-section-title h2{margin:0;padding:0;font-size:18px;font-weight:500;color:#fff;line-height:1}.section-icon{font-size:20px}.connection-badge{padding:4px 10px;background:#4caf5026;color:#4caf50;font-size:12px;font-weight:500;border-radius:12px}.connection-status{padding:4px 10px;font-size:12px;font-weight:500;border-radius:12px}.connection-status.connected{background:#4caf5026;color:#4caf50}.connection-status.connecting{background:#ffc10726;color:#ffc107}.connection-status.disconnected{background:#88888826;color:#888}.device-section-error{padding:12px 16px;background:#f443361a;border:1px solid rgba(244,67,54,.3);border-radius:8px;color:#f44336;margin-bottom:16px;font-size:14px}.device-section-empty{text-align:center;padding:40px 20px;color:#666}.device-section-empty p{margin:0;font-size:15px}.device-section-empty .hint{font-size:13px;margin-top:6px;color:#555}.device-list{display:flex;flex-direction:column;gap:8px}.device-list-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#1a1a2e;border:1px solid #2a2a3e;border-radius:8px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.device-list-item:hover{background:#222238;border-color:#3a3a4e;transform:translate(4px)}.device-list-item.selected{border-color:#4caf50;background:#4caf501a}.device-list-item.connected{border-color:#4caf50}.device-list-item-status{flex-shrink:0}.device-list-item-info{flex:1;min-width:0}.device-name{font-size:15px;font-weight:500;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-meta{font-size:12px;color:#888;font-family:SF Mono,Consolas,monospace;margin-bottom:2px}.device-viewers{font-size:11px;color:#666}.controller-info{color:#ffc107}.device-list-item-actions{flex-shrink:0}.action-button{padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}.action-button.connect{background:#4caf50;color:#fff}.action-button.connect:hover:not(:disabled){background:#45a049}.action-button.connect:disabled{opacity:.6;cursor:not-allowed}.action-button.disconnect{background:#f44336;color:#fff}.action-button.disconnect:hover{background:#d32f2f}.local-section{border-color:#2a3a4e}.local-section .section-icon{color:#64b5f6}.local-section.collapsed,.cloud-section.collapsed{padding:20px}.cloud-section{border-color:#3a2a4e}.cloud-section .section-icon{color:#ba68c8}