*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff;font-size:16px;line-height:1.2}#app{width:100vw;height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e)}#camera-view{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s ease;z-index:0;cursor:pointer}.main-content{text-align:center;z-index:1}.main-content h1{font-size:clamp(1.5rem,4vw,3rem);font-weight:300;letter-spacing:-.02em;opacity:.9}.fps-display{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:6px;padding:6px 8px;font-size:10px;line-height:1.1;z-index:1000;border:1px solid rgba(255,255,255,.1);min-width:80px;transition:opacity .3s ease}.fps-display h3{display:none}.fps-display p{margin:1px 0;display:flex;justify-content:space-between;font-size:9px}.fps-display span{font-weight:600;color:#0f8;margin-left:4px}.fullscreen-button{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translate(-50%);background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:6px 12px;font-size:10px;color:#fff;cursor:pointer;z-index:1001;transition:all .2s ease,opacity .3s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fullscreen-button:hover,.fullscreen-button:active{background:#000000e6;border-color:#fff6;transform:translate(-50%) scale(.95)}.fullscreen-button:before{content:"⛶";margin-right:4px;font-size:12px}.fullscreen-button.is-fullscreen:before{content:"✕"}.resolution-display{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:6px;padding:6px 8px;font-size:10px;line-height:1.1;z-index:1000;border:1px solid rgba(255,255,255,.1);min-width:90px;transition:opacity .3s ease}.resolution-display h3{display:none}.resolution-display p{margin:1px 0;display:flex;justify-content:space-between;font-size:9px}.resolution-display span{font-weight:600;color:#8af;margin-left:4px}.optimal-resolutions,.info-grid{display:none}.confidence-high{color:#0f8!important}.confidence-medium{color:#fa0!important}.confidence-low{color:#f44!important}.stable-yes{color:#0f8!important}.stable-no{color:#f44!important}.orientation-landscape{color:#8af!important}.orientation-portrait{color:#f8a!important}.mode-active{color:#0f8!important}.mode-inactive{color:#f44!important}@media (max-width: 768px){.fps-display,.resolution-display{font-size:8px;padding:4px 6px;min-width:70px}.fps-display p,.resolution-display p{font-size:8px}}@media (max-width: 480px){.fps-display,.resolution-display{font-size:7px;padding:3px 5px;min-width:60px}.fps-display p,.resolution-display p{font-size:7px}}.camera-selection-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;margin:1rem 0}.camera-single-info{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff;font-size:.95rem;box-shadow:0 2px 8px #0000001a}.camera-icon{font-size:1.5rem;line-height:1}.camera-name{flex:1;font-weight:500}.camera-list{display:flex;flex-direction:column;gap:.5rem;border-radius:8px;overflow:hidden}.camera-list-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#f8f9fa;color:#212529;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;position:relative}.camera-list-item:hover{background:#e9ecef;border-color:#667eea;transform:translate(4px)}.camera-list-item.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;box-shadow:0 2px 8px #667eea4d}.camera-list-item .camera-icon{font-size:1.25rem;line-height:1}.camera-list-item .camera-name{flex:1;font-weight:500;font-size:.95rem}.camera-list-item .camera-check{opacity:0;font-size:1.25rem;transition:opacity .2s ease}.camera-list-item.active .camera-check{opacity:1}.camera-dropdown-container{display:flex;flex-direction:column;gap:.5rem}.camera-dropdown-label{font-weight:600;font-size:.9rem;color:#495057}.camera-dropdown{padding:.75rem 2.5rem .75rem 1rem;font-size:.95rem;border:2px solid #dee2e6;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}.camera-dropdown:hover{border-color:#667eea}.camera-dropdown:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.camera-message{padding:.75rem 1rem;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;color:#856404;font-size:.9rem;margin:0}@media (max-width: 768px){.camera-list-item,.camera-single-info{padding:.65rem .85rem}}