:root{--primary: #2563eb;--primary-light: #3b82f6;--primary-dark: #1d4ed8;--success: #22c55e;--warning: #eab308;--error: #ef4444;--background: #f1f5f9;--card-bg: #ffffff;--text: #1e293b;--text-light: #64748b;--border: #e2e8f0}.page-container{width:100vw;min-height:100vh;padding:0;box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--background);gap:0}.header{padding:24px 32px;background-color:var(--card-bg);border-bottom:1px solid var(--border);width:100vw;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.header-role{font-size:1.5em;font-weight:600;color:var(--text-light)}.main-content-area{display:flex;flex-direction:column;gap:24px;padding:24px 32px;flex:1;max-width:1400px;margin:0 auto;width:100%}.title{margin:0 0 16px;color:var(--text);font-size:2em;font-weight:700}.title-section{font-size:1.5em;color:var(--text);border-bottom:2px solid var(--primary-light);padding-bottom:8px;margin-bottom:20px}.title-subsection{font-size:1.3em;color:var(--text);margin-bottom:16px}.status{margin-bottom:8px;font-weight:600;font-size:1.1em;color:var(--text)}.error{color:var(--error);font-weight:600;margin-bottom:12px;padding:12px;background-color:#fee2e2;border-radius:6px}.card{background-color:var(--card-bg);border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;gap:16px;border:1px solid var(--border)}.textarea{width:100%;min-height:120px;padding:12px;border:1px solid var(--border);border-radius:6px;font-family:monospace;font-size:.95em;box-sizing:border-box;transition:border-color .2s ease;resize:vertical}.textarea:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px #3b82f61a}.button{padding:10px 16px;border:none;border-radius:6px;cursor:pointer;background-color:var(--primary);color:#fff;font-size:.95em;font-weight:500;transition:all .2s ease}.button:hover:not(:disabled){background-color:var(--primary-dark);transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(0)}.button-disabled{background-color:var(--text-light);cursor:not-allowed;opacity:.7}.button-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.label{display:block;margin-bottom:8px;font-weight:600;color:var(--text)}.device-list-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px;width:100%}.device-column{display:flex;flex-direction:column;gap:24px}.device-list-item{padding:16px;border:1px solid var(--border);border-radius:8px;background-color:var(--card-bg);display:flex;flex-direction:column;gap:12px;transition:all .2s ease}.device-list-item:hover{box-shadow:0 4px 6px #0000000d;transform:translateY(-1px)}.selected-device{background-color:#dbeafe;border-color:var(--primary-light)}.device-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--border)}.device-name{font-weight:600;color:var(--text);font-size:1.1em}.status-badge{padding:4px 10px;border-radius:16px;font-size:.85em;color:#fff;display:inline-block;margin-left:10px;font-weight:500}.status-badge[data-status^=connected],.status-badge[data-status*=streaming]{background-color:var(--success)}.status-badge[data-status*=ready]{background-color:var(--primary)}.status-badge[data-status*=error]{background-color:var(--error)}.status-badge[data-status*=processing],.status-badge[data-status*=preparing]{background-color:var(--warning)}.status-badge[data-status^=pc_state_]{background-color:var(--text-light)}.status-badge[data-status*=pc_state_connected]{background-color:var(--success)}.small-id{font-size:.85em;color:var(--text-light);margin-top:4px}.video{width:100%;max-width:720px;height:auto}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.video-container-wrapper{position:relative;cursor:pointer}.video-container{position:relative;overflow:hidden;background-color:var(--card-bg);border-radius:8px;padding:16px;border:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background-color:#000}.video-title{margin:0;font-size:1.1em;font-weight:600;color:var(--text)}.video-info{display:flex;justify-content:space-between;align-items:center;gap:12px}.camera-source-select-compact{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background-color:var(--card-bg);color:var(--text);font-size:.9em;cursor:pointer}.camera-source-select-compact:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 2px #3b82f61a}.preview-message{text-align:center;padding:40px;color:var(--text-light)}.video-container-wrapper:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.video-container-wrapper:fullscreen .video{max-width:100%;max-height:100vh;object-fit:contain}.video-container-wrapper:fullscreen .video-title{display:none}.camera-source-select{width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;background-color:var(--card-bg);color:var(--text);font-size:.95em;cursor:pointer}.expanded-content{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:16px}.button-danger{background-color:var(--error)}.button-danger:hover:not(:disabled){background-color:#dc2626}.monitor-preview-container{position:relative;width:100%;max-width:480px;margin:0 auto 16px;border-radius:8px;overflow:hidden;background-color:#000;box-shadow:0 2px 4px #0000001a}.monitor-preview-video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}.monitor-preview-overlay{position:absolute;top:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom,#000000b3,#0000)}.monitor-preview-label{color:#fff;font-size:.9em;font-weight:500}.camera-select-container{width:100%;max-width:480px;margin:0 auto}.camera-source-select{width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;background-color:var(--card-bg);color:var(--text);font-size:.95em;cursor:pointer;margin-top:8px}.camera-source-select:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px #3b82f61a}.preview-tabs{display:flex;gap:16px;margin-bottom:24px;border-bottom:2px solid var(--border);padding-bottom:8px}.tab-button{padding:8px 16px;border:none;background:none;font-size:1.2em;color:var(--text-light);cursor:pointer;transition:all .2s ease;position:relative}.tab-button:after{content:"";position:absolute;bottom:-10px;left:0;width:100%;height:2px;background-color:transparent;transition:background-color .2s ease}.tab-button.active{color:var(--primary);font-weight:600}.tab-button.active:after{background-color:var(--primary)}.tab-button:hover{color:var(--primary-dark)}html{box-sizing:border-box;font-size:16px}*,*:before,*:after{box-sizing:inherit}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{padding:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{width:100%;padding:15px;background-color:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014}h1,h2,h3,h4,h5,h6{color:#2c3e50;margin-top:0;margin-bottom:.75rem;font-weight:600}.screen-title{font-size:1.8rem;margin-bottom:25px;padding-bottom:15px;border-bottom:3px solid #007bff;color:#007bff}button,.button{background-color:#007bff;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:500;margin:5px;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}button:hover,.button:hover{background-color:#0056b3;box-shadow:0 2px 8px #0056b34d}button:disabled,.button:disabled{background-color:#ced4da;color:#6c757d;cursor:not-allowed;box-shadow:none}input[type=text],input[type=file],select,textarea{width:100%;padding:10px 12px;margin-bottom:10px;border:1px solid #ced4da;border-radius:6px;font-size:1rem;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}input[type=text]:focus,input[type=file]:focus,select:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40;outline:none}label.button input[type=file]{display:none}.container{padding:15px;margin-bottom:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000000d}.container h2{font-size:1.4rem;margin-bottom:15px}.container h3{font-size:1.2rem;margin-bottom:12px}.button-group{margin-top:10px;margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap}.info-text{font-size:.9rem;color:#555;margin-top:5px;margin-bottom:10px}.error-text{font-size:.9rem;color:#dc3545;font-weight:700;margin-top:5px;margin-bottom:10px}video{border:2px solid #dee2e6;border-radius:8px;background-color:#000;display:block;max-width:100%;height:auto}ul{list-style:none;padding-left:0}li.device-item{background-color:#fff;padding:12px 15px;margin-bottom:10px;border-radius:6px;border:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease,box-shadow .2s ease}li.device-item:hover{background-color:#f8f9fa;box-shadow:0 1px 3px #00000012}li.device-item strong{margin-right:10px}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.status-registered{background-color:#ffc107}.status-connecting{background-color:#007bff}.status-connected{background-color:#28a745}.status-error{background-color:#dc3545}.status-disconnected{background-color:#6c757d}.status-badge{padding:.25em .6em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.375rem;display:inline-block}.status-success{background-color:#28a745;color:#fff}.status-error{background-color:#dc3545;color:#fff}.status-pending{background-color:#ffc107;color:#212529}.status-info{background-color:#17a2b8;color:#fff}.status-unknown{background-color:#6c757d;color:#fff}.card{border:1px solid #e0e0e0;border-radius:8px;padding:15px;margin-bottom:15px;background-color:#fff;box-shadow:0 1px 3px #0000000a}.card h3{margin-top:0;margin-bottom:10px;font-size:1.2rem;color:#007bff}.card p{margin-bottom:8px;font-size:.9rem}.connection-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.2em solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite;margin-left:5px}.spinner-border-sm{width:.8rem;height:.8rem;border-width:.15em}@-webkit-keyframes spinner-border{to{-webkit-transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}@media (max-width: 768px){#root{margin:10px;padding:10px}.screen-title{font-size:1.5rem}button,.button{padding:10px 15px;font-size:.95rem}.button-group{flex-direction:column}.button-group button,.button-group .button{width:100%;margin-bottom:8px}}@media (max-width: 480px){.container h2{font-size:1.2rem}.container h3{font-size:1.1rem}}