:root{--bg-dark: #1a1a1a;--bg-darker: #121212;--bg-card: #2a2a2a;--text-primary: #f0f0f0;--text-secondary: #b0b0b0;--accent-primary: #64b5f6;--accent-secondary: #455a64;--success: #4caf50;--success-hover: #388e3c;--border-radius: 6px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--primary: var(--accent-primary);--dark: var(--bg-dark);--gray: var(--text-secondary);--success: var(--success);--border-color: rgba(255, 255, 255, .1);--input-border-color-focus: var(--accent-primary);--card-bg: rgba(42, 42, 42, .85)}*{box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);overflow:hidden;height:100vh;width:100vw;position:relative}.viewport{position:absolute;top:0;left:0;width:100vw;height:100vh;background:var(--bg-darker);overflow:hidden;z-index:1}.floating-controls-container{position:absolute;bottom:50px;right:10px;width:400px;max-height:70vh;z-index:100;display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;transition:transform .3s ease}.floating-controls-container.collapsed{transform:translate(calc(100% - 30px))}.toggle-tab{position:absolute;left:-30px;top:10%;transform:translateY(-50%);width:30px;height:50px;background:#5252984d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid var(--border-color);border-right:none;border-radius:var(--border-radius) 0 0 var(--border-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:-4px 0 10px #0003;transition:background .2s ease,border .3s ease,border .2s ease}.toggle-tab:hover{background:#525298cc;border:2px solid var(120, 120, 220, .8);border-right:none}.toggle-tab i{transition:transform .3s ease}.floating-controls.collapsed .toggle-tab i{transform:rotate(180deg)}.floating-controls{width:100%;background:#2a2a2a1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid var(--border-color);box-shadow:0 4px 20px #0006;border-radius:var(--border-radius);padding:var(--spacing-sm);padding-bottom:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--text-secondary) var(--bg-card)}.control-section{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-md)}.control-section:first-child{padding-top:var(--spacing-sm)}.control-section:last-child{border-bottom:none;padding-bottom:var(--spacing-md);margin-bottom:0}.modal-header h6,.control-section h6{color:var(--accent-primary);text-transform:uppercase;margin-bottom:var(--spacing-sm)}.label{background:#0009;color:var(--text-primary);align-self:flex-start;padding:var(--spacing-xs) var(--spacing-sm)}.btn{display:inline-flex;align-items:center;justify-content:center}.btn svg-icon{margin-right:var(--spacing-sm);flex-shrink:0}.btn.btn-action svg-icon{margin-right:0}.btn:disabled svg-icon{opacity:.5}.btn.close-button{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:transparent;border:none;color:var(--text-secondary);cursor:pointer}.btn:disabled{background:#3a3a3a;color:gray}.progress-container{width:100%;background-color:#0003;border-radius:var(--border-radius);height:6px;margin-top:var(--spacing-sm);display:none}.progress-bar{height:100%;width:0%;background-color:var(--success);border-radius:var(--border-radius);transition:width .3s}.modal{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none}.modal-container{position:relative;background:var(--bg-card);border:1px solid var(--border-color);box-shadow:0 4px 20px #0006;max-height:80vh}.modal-body .log{background:#0003;color:var(--text-secondary);padding:var(--spacing-sm);font-family:Fira Code,Courier New,monospace;font-size:12px;height:200px;overflow-y:auto}.log div{padding:2px 0;line-height:1.4}.frame-preview-drawer{position:absolute;bottom:0;left:0;width:100%;background:#2a2a2a80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;transform:translateY(calc(100% - 40px));transition:transform .3s ease;border-top:1px solid var(--border-color);box-shadow:inset 0 0 15px #8787871a,0 0 18px 3px #0000004d;scrollbar-color:var(--text-secondary) var(--bg-card);scrollbar-width:thin}.frame-preview-drawer.expanded{transform:translateY(0)}.drawer-handle{height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--text-secondary);padding:var(--spacing-sm)}.drawer-icon{position:absolute;right:var(--spacing-md);transition:transform .3s ease}.frame-preview-drawer.expanded .drawer-icon{transform:rotate(180deg)}.drawer-content{padding:var(--spacing-sm);max-height:300px;overflow-y:auto}.drawer-content .nav .nav-item a{color:#fff}.drawer-content .nav .nav-item.active a{color:var(--accent-primary);text-decoration:underline;text-underline-offset:6px}.frame-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--spacing-sm);padding:var(--spacing-sm)}.frame-preview-grid img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--border-color);border-radius:var(--border-radius);background:#0003;transition:all .2s ease}.frame-preview-grid img:hover{transform:scale(1.05);border-color:var(--accent-primary);box-shadow:0 0 8px #64b5f680}.start-capture-column{align-content:end}@media (max-width: 640px){.floating-controls-container{width:90%;min-width:unset;bottom:40px;right:0}.control-section{padding-left:5px;padding-right:5px;border-right:none;border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-md)}.control-section:last-child{border-bottom:none}.modal-container{width:95%;max-height:70vh}}.floating-controls-container{z-index:9998}.modal{z-index:10000}.camera-selection{margin-bottom:var(--spacing-md);width:100%}.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;aspect-ratio:2.5/1;min-height:140px;max-height:180px;margin-bottom:var(--spacing-sm);overflow:hidden;margin-left:auto;margin-right:auto}.camera-cell{background:#0009;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;border-radius:2px;position:relative;font-size:.8rem;color:var(--text-secondary)}.camera-cell.active{background:#64b5f6cc;border-color:var(--accent-primary);color:#fff}.camera-cell:hover:not(.disabled){background:#64b5f61a;border-color:var(--accent-primary)}.camera-cell.disabled{cursor:default;opacity:.5}.camera-presets{display:flex;gap:var(--spacing-xs);justify-content:space-between;align-items:center}.camera-presets .btn-link{color:var(--text-secondary);text-decoration:underline;font-size:12px;padding-left:0;padding-right:0}.camera-presets .btn-link:hover{color:var(--text-primary)}#imageViewerModal .modal-container{max-width:800px;background:var(--bg-card);background:#2a2a2acc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid var(--border-color);box-shadow:0 4px 20px #0006;border-radius:var(--border-radius);padding:var(--spacing-sm)}#imageViewerModal.modal.active{align-items:flex-start}.image-viewer-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.viewer-image{max-width:100%;max-height:100%;object-fit:contain;border:2px solid var(--border-color);border-radius:var(--border-radius);background:#0003}.image-viewer-controls{display:flex;gap:var(--spacing-md);align-items:center;justify-content:center;width:100%}.image-viewer-controls .btn{flex:0 0 auto}.image-viewer-controls .text-secondary{color:var(--text-secondary);font-size:14px}#imageViewerModal.active{display:flex}