body{margin:0;overflow:hidden;font-family:Arial,sans-serif;background-color:#f0f0f0}#container{width:100vw;height:100vh;display:block}#ui-container{position:absolute;top:20px;left:20px;background-color:#fffc;padding:10px;border-radius:10px;box-shadow:0 2px 10px #0000001a}button{margin:5px;padding:10px 15px;font-size:16px;cursor:pointer;border:1px solid #ccc;border-radius:5px;background-color:#fff;transition:background-color .3s,color .3s}button:hover{background-color:#007bff;color:#fff;border-color:#007bff}button:disabled{cursor:not-allowed;background-color:#e9ecef;color:#6c757d;border-color:#ced4da}button:disabled:hover{background-color:#e9ecef;color:#6c757d;border-color:#ced4da}.playback-dropdown{position:relative;display:inline-block}#playback-menu{position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #ccc;border-radius:5px;padding:5px;z-index:10;display:flex;flex-direction:column}#playback-menu.hidden,#guided-controls.hidden{display:none}#playback-menu button{width:100%;text-align:left}#ui-container button.active{background-color:#4caf50;color:#fff}#camera-container{position:absolute;top:200px;left:20px;width:320px;height:240px;border:2px solid #333;background-color:#000;border-radius:10px;box-shadow:0 2px 10px #0003;padding:5px}#camera-container.hidden{display:none}#camera-feed{width:100%;height:100%;border-radius:5px}#scanner-ui{position:absolute;bottom:10px;left:10px;right:10px;background:#00000080;color:#fff;padding:10px;border-radius:5px;text-align:center}#scanner-ui.hidden{display:none}