:root{--background-light: #f8f9fa;--foreground-light: #212529;--card-background-light: #ffffff;--border-light: #dee2e6;--accent-yellow: #eab308;--secondary-light: #e9ecef;--background-dark: #0f172a;--foreground-dark: #f8f9fa;--card-background-dark: #1e293b;--border-dark: #334155;--secondary-dark: #334155}html{height:100%}body{margin:0;padding:0;min-height:100vh;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}#root{width:100%;min-height:100%;flex:1;display:flex;flex-direction:column}@supports (font-variation-settings: normal){body{font-family:Inter var,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}}body.dark{background:var(--background-dark);color:var(--foreground-dark)}body.light{background:var(--background-light);color:var(--foreground-light)}button:active{background:#e0e0e0!important}.pin-entry-page{min-height:100vh;min-width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:0}.logo-container{display:flex;align-items:center;gap:16px;margin-bottom:8px}.logo{width:48px;height:48px}.logo-text{font-size:32px;font-weight:800}.pin-prompt{font-size:24px;font-weight:600;margin-bottom:8px}.pin-error{color:red;margin-bottom:8px}.pin-dots{display:flex;gap:12px;margin-bottom:16px}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}to{transform:translate(0)}}.shake{animation:shake .5s}.pin-dot{width:18px;height:18px;border-radius:50%;transition:background .2s}body.light .pin-dot{background:var(--secondary-light)}body.dark .pin-dot{background:var(--secondary-dark)}body.dark .pin-dot.filled{background:var(--foreground-dark)}body.light .pin-dot.filled{background:var(--foreground-light)}.keypad{display:grid;grid-template-columns:repeat(3,80px);gap:16px}.keypad-button{width:80px;height:80px;border-radius:50%;border:none;font-size:36px;font-weight:500;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}body.light .keypad-button{background:var(--secondary-light);color:var(--foreground-light)}body.dark .keypad-button{background:var(--secondary-dark);color:var(--foreground-dark)}.keypad-button:active{background:#555968!important}body.light .keypad-button:active{background:#d1d5db!important}.keypad-button-text-small{font-size:18px;font-weight:400}.spinner{border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top:4px solid var(--foreground-dark);width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cameras-page{width:100vw;min-height:100vh;display:flex;flex-direction:column;margin:0;padding:0;box-sizing:border-box}.app-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;width:100%;box-sizing:border-box;position:sticky;top:0;z-index:1100}body.dark .app-header{background:var(--background-dark);border-bottom:1px solid var(--border-dark)}body.light .app-header{background:var(--background-light);border-bottom:1px solid var(--border-light)}.header-group{display:flex;align-items:center;gap:16px}.back-button{background:none;border:none;padding:4px;margin:-4px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}body.dark .back-button{color:var(--foreground-dark)}body.light .back-button{color:var(--foreground-light)}.back-button:hover{background-color:#80808033}.project-title{font-size:26px;font-weight:700;margin:0;letter-spacing:.01em;display:flex;align-items:center;gap:.5em;white-space:nowrap}.project-name--regular,.camera-title-separator{font-weight:500}body.dark .camera-title-separator{color:#64748b}body.light .camera-title-separator{color:#94a3b8}.camera-title--highlight{color:var(--accent-yellow)}.camera-title{color:#9ca3af}.header-actions{display:flex;align-items:center;gap:12px}.theme-toggle-button{width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;padding:0}body.dark .theme-toggle-button{background-color:var(--card-background-dark);border-color:var(--border-dark);color:var(--foreground-dark)}body.light .theme-toggle-button{background-color:var(--card-background-light);border-color:var(--border-light);color:var(--foreground-light)}.cameras-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;width:100%;max-width:1200px;margin:0 auto;padding:24px;box-sizing:border-box}.camera-card{border-radius:12px;cursor:pointer;transition:all .2s ease;overflow:hidden;display:flex;flex-direction:column}body.dark .camera-card{background-color:var(--card-background-dark);border:1px solid var(--border-dark);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}body.light .camera-card{background-color:var(--card-background-light);border:1px solid var(--border-light);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.camera-card:hover{transform:translateY(-5px)}.camera-card.disabled{cursor:not-allowed;opacity:.6}.camera-card.disabled:hover{transform:none}.camera-thumbnail{aspect-ratio:16 / 9;background-color:#2c3e50;display:flex;align-items:center;justify-content:center;overflow:hidden;border-top-left-radius:8px;border-top-right-radius:8px}.camera-preview-image{width:100%;height:100%;object-fit:cover;object-position:top left}body.light .camera-thumbnail{background-color:var(--secondary-light)}body.dark .camera-thumbnail{background-color:var(--background-dark)}.camera-unavailable{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500}body.dark .camera-unavailable{color:var(--foreground-dark)}body.light .camera-unavailable{color:var(--foreground-light)}.camera-unavailable-icon{color:var(--accent-yellow)}.camera-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500}body.dark .camera-loading{color:var(--foreground-dark)}body.light .camera-loading{color:var(--foreground-light)}.camera-loading .spinner{width:32px;height:32px;margin-bottom:0}.camera-card-footer{padding:16px;text-align:center}body.dark .camera-card-footer{border-top:1px solid var(--border-dark);background-color:var(--card-background-dark)}body.light .camera-card-footer{border-top:1px solid var(--border-light);background-color:var(--card-background-light)}.camera-name{font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-dialog{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}body.dark .video-dialog{background:var(--background-dark)}body.light .video-dialog{background:var(--background-light)}.loading-indicator{position:absolute;font-size:20px;z-index:1001;display:flex;flex-direction:column;align-items:center;gap:20px}body.dark .loading-indicator{color:var(--foreground-dark)}body.light .loading-indicator{color:var(--foreground-light)}body.light .loading-indicator .spinner{border:4px solid rgba(0,0,0,.3);border-top:4px solid var(--foreground-light)}.stream-error{position:absolute;color:#ef4444;font-size:20px;text-align:center;padding:20px;z-index:1001;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:16px}.video-container{width:100%;height:100%;max-width:100vw;max-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}body.dark .video-container{background:#000}body.light .video-container{background:var(--background-light)}.live-stream-image{width:100%;height:100%;object-fit:contain}body.dark .live-stream-image{background-color:#000}body.light .live-stream-image{background-color:var(--background-light)}.close-video-button{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;z-index:1200;padding:0}body.dark .close-video-button{background:#1e293bb3;border-color:var(--border-dark);color:#fff}body.light .close-video-button{background:#ffffffb3;border-color:var(--border-light);color:#000}.video-footer{position:absolute;bottom:0;left:0;width:100%;padding:32px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1100;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);pointer-events:none}.stop-stream-button{background-color:var(--accent-yellow);color:#1f2937;padding:14px 28px;font-size:16px;font-weight:600;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .2s ease,box-shadow .2s ease;pointer-events:all;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.stop-stream-button:hover{transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.app-container{width:100%;min-height:100vh;flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}.app{width:100%;min-height:100vh;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;position:relative;padding:0 20px 20px;box-sizing:border-box}.app.app--streaming{padding:0;justify-content:flex-start}.cameras-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,max-content));gap:20px;width:fit-content;max-width:100%;margin:0 auto;padding:20px;box-sizing:border-box;justify-content:center}.camera-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;background-color:#1a1a1a;border-radius:10px;padding:0 0 15px;box-shadow:0 4px 12px #0000004d;width:400px;max-width:100%;box-sizing:border-box}.camera-name{font-size:16px;font-weight:600;color:#fff;text-align:center;padding:0 15px}.button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;position:relative}.preview-image-container{position:relative;width:100%;max-width:400px;height:225px;overflow:hidden;border-radius:8px;background-color:#000}.camera-card .preview-image-container{width:100%;max-width:100%;aspect-ratio:4 / 3;height:auto;border-radius:12px 12px 0 0}.preview-image{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;opacity:1;transition:opacity .3s ease}.preview-image-container.offline .preview-image{opacity:.3;filter:grayscale(100%)}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#00000080;z-index:10;gap:16px}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.3);border-top-color:#4caf50;border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:#fff;font-size:16px;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.offline-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#0009;z-index:10;gap:12px}.alert-icon{width:48px;height:48px;color:#ff9800;opacity:.9}.offline-text{color:#ff9800;font-size:16px;font-weight:600;text-align:center}.project-header{width:100%;max-width:1400px;display:flex;justify-content:center;align-items:center;padding:20px 24px;margin-bottom:16px}.project-name{font-size:32px;font-weight:700;margin:0;color:var(--foreground-dark);text-align:center}@media (max-width: 768px){.project-header{padding:16px 20px}.project-name{font-size:24px}}.start-button{padding:12px 24px;font-size:16px;font-weight:700;color:#000;background-color:#f5b94d;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;width:calc(100% - 30px);max-width:250px;margin:0 15px;box-shadow:0 2px 8px #00000026}.start-button:hover{background-color:#f0ad3a;transform:translateY(-2px);box-shadow:0 4px 12px #f5b94d66}.start-button:active{transform:translateY(0);box-shadow:0 2px 6px #0003;background-color:#e59c28}.start-button.disabled,.start-button:disabled{background-color:#666;color:#999;cursor:not-allowed;opacity:.6}.start-button.disabled:hover,.start-button:disabled:hover{background-color:#666;transform:none;box-shadow:none}.start-button.disabled:active,.start-button:disabled:active{transform:none;box-shadow:none}.video-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;box-sizing:border-box;z-index:9999}.video-container--embedded{position:relative;top:auto;left:auto;width:100%;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;margin-top:0;padding-top:0;transition:flex .25s ease,width .25s ease,height .25s ease,max-height .25s ease,border-radius .25s ease}.video-container--embedded.video-container--connecting{flex:0 0 auto;width:min(90vw,800px);height:min(50vw,450px);max-height:60vh;border-radius:12px;overflow:hidden}.video-container--embedded .video-wrapper{position:relative;flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}.video-container--embedded .video-player{width:100%;height:100%;object-fit:contain;object-position:center center}.video-container.hidden{display:none}.video-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.video-player{width:100%;height:100%;object-fit:contain}.video-player::-webkit-media-controls{display:none!important}.video-player::-webkit-media-controls-enclosure{display:none!important}.video-player::-webkit-media-controls-panel{display:none!important}.video-player::--webkit-media-controls-play-button{display:none!important}.video-player::-webkit-media-controls-start-playback-button{display:none!important}.status-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#000c;pointer-events:none;z-index:9999}.status-message{font-size:24px;color:#fff;text-align:center;padding:20px}.status-message--loading{display:flex;flex-direction:column;align-items:center;gap:16px}.status-message-spinner{display:block;width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s linear infinite}.stop-button{position:absolute;bottom:16px;left:50%;transform:translate(-50%);padding:16px 32px;font-size:20px;font-weight:600;color:#f5b94d;background-color:transparent;border:2px solid rgba(245,185,77,.6);border-radius:12px;cursor:pointer;transition:all .2s ease;z-index:10000;pointer-events:all;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 0 20px #0000004d;min-width:200px;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.7)}.stop-button:hover{background-color:#f5b94d1a;border-color:#f5b94de6;transform:translate(-50%) translateY(-2px);box-shadow:0 0 30px #f5b94d66;text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.8)}.stop-button:active{background-color:#f5b94d33;transform:translate(-50%) translateY(0);box-shadow:0 0 15px #f5b94d4d;text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.7)}.latency-indicator{position:absolute;top:20px;right:20px;padding:8px 16px;font-size:16px;font-weight:600;color:#f5b94d;background-color:transparent;border-radius:8px;border:2px solid rgba(245,185,77,.5);z-index:10000;pointer-events:none;font-family:Courier New,monospace;box-shadow:0 2px 8px #0000004d;text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 15px rgba(0,0,0,.6)}@media (max-height: 600px){.latency-indicator{top:15px;right:15px;font-size:14px;padding:6px 12px}.stop-button{bottom:16px;padding:12px 24px;font-size:18px;min-width:160px}}@media (max-width: 768px){.latency-indicator{top:15px;right:15px}.stop-button{bottom:16px}}@supports (-webkit-touch-callout: none){.stop-button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.video-container{-webkit-overflow-scrolling:touch}.video-player{width:100%;height:100%}}.video-container:fullscreen,.video-container:-webkit-full-screen,.video-container:-moz-full-screen,.video-container:-ms-fullscreen{width:100vw;height:100vh}.video-container:fullscreen .video-player,.video-container:-webkit-full-screen .video-player,.video-container:-moz-full-screen .video-player,.video-container:-ms-fullscreen .video-player{width:100%;height:100%;object-fit:contain}.error-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000e6;padding:30px;border-radius:8px;border:2px solid #f44336;z-index:1000;text-align:center;min-width:300px}.error-message{color:#f44336;font-size:18px;margin-bottom:20px;word-wrap:break-word}.error-button{padding:10px 20px;font-size:16px;color:#fff;background-color:#666;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.error-button:hover{background-color:#555}@media (max-width: 480px){.cameras-grid{grid-template-columns:1fr;gap:15px;padding:10px}.camera-card{padding:0 0 12px}.camera-card .preview-image-container{aspect-ratio:4 / 3;height:auto}.camera-name{font-size:14px}.start-button{font-size:14px;padding:10px 20px}}.test-page-header{padding:16px 24px;display:flex;flex-direction:column;gap:8px;background:var(--card-background-dark);border-bottom:1px solid var(--border-dark)}.test-page-header h1{margin:0;font-size:24px;font-weight:600;color:var(--foreground-dark)}.test-page-info{display:flex;gap:24px;font-size:14px;color:#94a3b8}.test-page-info .latency-display{color:var(--accent-yellow);font-weight:500}.test-page-info .stream-status{color:#22c55e;font-weight:500}.test-page-info .stream-status.stalled{color:#ef4444;font-weight:600}.camera-selector-header{padding:16px 24px;display:flex;flex-direction:column;gap:12px;background:var(--card-background-dark);border-bottom:1px solid var(--border-dark)}.camera-selector-header .project-name{margin:0;font-size:20px;font-weight:600;color:var(--foreground-dark)}.camera-header-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.camera-list{display:flex;flex-wrap:wrap;gap:12px;flex:1;align-items:center}.refresh-status-button{padding:8px 16px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--foreground-dark);background:var(--secondary-dark);border:1px solid var(--border-dark);border-radius:8px;cursor:pointer;transition:all .2s ease;white-space:nowrap;box-sizing:border-box}.refresh-status-button:hover:not(:disabled){background:#3b4a63}.refresh-status-button:disabled{opacity:.6;cursor:not-allowed}.livestream-troubleshoot-prompt{margin:0;font-size:13px;font-weight:500;color:#94a3b8}.livestream-troubleshoot-prompt--secondary{margin-top:10px}.livestream-troubleshoot-list{margin:4px 0 0;padding-left:20px;font-size:13px;color:#94a3b8;line-height:1.5}.livestream-troubleshoot-list strong{color:var(--foreground-dark);font-weight:600}.livestream-prompts-section{position:relative;margin-top:4px}.livestream-prompts-toggle-row{display:flex;justify-content:flex-end;margin-top:8px}.livestream-prompts-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;color:#94a3b8;background:transparent;border:1px solid var(--border-dark);border-radius:6px;cursor:pointer;transition:color .2s ease,background .2s ease,border-color .2s ease}.livestream-prompts-toggle:hover{color:var(--foreground-dark);background:#ffffff0f;border-color:#64748b}.livestream-prompts-toggle svg{width:14px;height:14px;flex-shrink:0}.livestream-send-message-button{margin-left:6px;padding:4px 12px;font-size:13px;font-weight:500;color:#1f2937;background:var(--accent-yellow);border:none;border-radius:6px;cursor:pointer;transition:background .2s ease}.livestream-send-message-button:hover{filter:brightness(1.05)}.livestream-message-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:1000}.livestream-message-dialog-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90vw,420px);max-height:90vh;overflow:auto;background:var(--card-background-dark);border:1px solid var(--border-dark);border-radius:12px;padding:24px;z-index:1001;box-shadow:0 8px 32px #0006}.livestream-message-dialog-title{margin:0 0 20px;font-size:18px;font-weight:600;color:var(--foreground-dark)}.livestream-message-dialog-success{margin:0;font-size:15px;color:var(--foreground-dark)}.livestream-message-form{display:flex;flex-direction:column;gap:16px}.livestream-message-label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--foreground-dark)}.livestream-message-optional{font-weight:400;color:#94a3b8}.livestream-message-select,.livestream-message-input,.livestream-message-textarea{padding:10px 12px;font-size:14px;color:var(--foreground-dark);background:var(--background-dark);border:1px solid var(--border-dark);border-radius:8px;font-family:inherit}.livestream-message-textarea{resize:vertical;min-height:80px}.livestream-message-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}.livestream-message-cancel-button{padding:10px 18px;font-size:14px;font-weight:500;color:var(--foreground-dark);background:var(--secondary-dark);border:1px solid var(--border-dark);border-radius:8px;cursor:pointer}.livestream-message-cancel-button:hover:not(:disabled){background:#3b4a63}.livestream-message-submit-button{padding:10px 18px;font-size:14px;font-weight:500;color:#1f2937;background:var(--accent-yellow);border:none;border-radius:8px;cursor:pointer}.livestream-message-submit-button:hover:not(:disabled){filter:brightness(1.05)}.livestream-message-submit-button:disabled{opacity:.6;cursor:not-allowed}.camera-option{display:flex;align-items:center;gap:8px;padding:8px 16px;min-height:38px;box-sizing:border-box;background:var(--secondary-dark);border-radius:8px;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.camera-option:hover:not(.offline):not(.loading){background:#3b4a63}.camera-option.selected{border-color:var(--accent-yellow);background:#3b4a63}.camera-option.offline{opacity:.5;cursor:not-allowed}.camera-option.loading{opacity:.7;cursor:wait}.camera-option input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-yellow);cursor:inherit}.camera-option.disabled{opacity:.4;cursor:not-allowed}.camera-option-name{font-size:14px;font-weight:500;color:var(--foreground-dark)}.camera-option-status{font-size:12px;padding:2px 8px;border-radius:4px;font-weight:500}.camera-option-status.online{background:#22c55e33;color:#22c55e}.camera-option-status.offline{background:#ef444433;color:#ef4444}.camera-option-status.loading{background:#94a3b833;color:#94a3b8}.stream-info{display:flex;gap:24px;font-size:14px;color:#94a3b8;padding-top:8px;border-top:1px solid var(--border-dark)}.stream-info .latency-display{color:var(--accent-yellow);font-weight:500}.stream-info .stream-status{color:#22c55e;font-weight:500}.stream-info .stream-status.stalled{color:#ef4444;font-weight:600}@media (max-width: 480px){.camera-selector-header{padding:12px 16px}.camera-selector-header .project-name{font-size:18px}.camera-list{flex-direction:column;gap:8px}.camera-option{padding:10px 12px}.stream-info{flex-direction:column;gap:8px}}