:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--bg-tertiary: #f1f5f9;--bg-elevated: #ffffff;--bg-canvas: #e2e8f0;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-soft: rgba(37, 99, 235, .08);--accent-glow: rgba(37, 99, 235, .2);--accent-border: rgba(37, 99, 235, .3);--success: #10b981;--danger: #ef4444;--danger-soft: rgba(239, 68, 68, .1);--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #94a3b8;--text-muted: #cbd5e1;--border: rgba(15, 23, 42, .08);--border-strong: rgba(15, 23, 42, .12);--border-focus: var(--accent);--shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);--shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -1px rgba(15, 23, 42, .04);--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -2px rgba(15, 23, 42, .05);--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 10px 10px -5px rgba(15, 23, 42, .04);--shadow-inset: inset 0 1px 2px rgba(15, 23, 42, .06);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--touch-target: 44px;--bottom-nav-height: 60px;--transition-fast: .1s ease;--transition: .15s ease;--transition-slow: .25s ease}@media(prefers-color-scheme:dark){:root{--bg-primary: #0c1222;--bg-secondary: #151d2e;--bg-tertiary: #1e293b;--bg-elevated: #1a2438;--bg-canvas: #0a0f1a;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-tertiary: #64748b;--text-muted: #475569;--border: rgba(255, 255, 255, .06);--border-strong: rgba(255, 255, 255, .1);--accent-soft: rgba(37, 99, 235, .15);--danger-soft: rgba(239, 68, 68, .15);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .2);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 10px 10px -5px rgba(0, 0, 0, .2);--shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .2)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:"cv02","cv03","cv04","cv11";background:var(--bg-primary);color:var(--text-primary);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit;line-height:inherit}input,select{font-family:inherit}.hidden{display:none!important}.renderStatus{position:fixed;top:var(--space-3);left:var(--space-3);z-index:9999;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:.7rem;font-weight:500;color:var(--text-tertiary);white-space:nowrap;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;transition:all var(--transition)}.renderStatus.faded{opacity:0;transform:translateY(-4px)}.renderStatus .spinner{display:none;width:12px;height:12px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}.renderStatus.isRendering{color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft)}.renderStatus.isRendering .spinner{display:block}.renderStatus.isError{border-color:var(--danger);background:var(--danger-soft)}.renderStatus.isError span{color:var(--danger)}@keyframes spin{to{transform:rotate(360deg)}}.mainContent{flex:1;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);padding-top:max(var(--space-3),env(safe-area-inset-top,0px));overflow:hidden;padding-bottom:calc(var(--bottom-nav-height) + var(--space-2) + env(safe-area-inset-bottom,0px));background:var(--bg-primary)}.imageModule{flex:1;display:flex;flex-direction:column;gap:var(--space-3);min-height:0;overflow:hidden}.imageViewingModule{flex:1;min-height:150px;background:var(--bg-canvas);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-inset);overflow:hidden;cursor:grab;position:relative}.imageViewingModule:active{cursor:grabbing}#imageCanvasDiv{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:center;overflow:hidden;position:relative;padding:var(--space-4)}#imageCanvas{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);background:var(--bg-secondary)}.gifPlayStopBtn{position:absolute;bottom:var(--space-4);right:var(--space-4);width:44px;height:44px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);z-index:100;box-shadow:var(--shadow-md)}.gifPlayStopBtn:hover{background:var(--bg-tertiary);border-color:var(--accent-border);transform:scale(1.05);box-shadow:var(--shadow-lg)}.gifPlayStopBtn:active{transform:scale(.95)}.gifPlayStopBtn.hidden{display:none}.gifPlayStopBtn svg{width:18px;height:18px;fill:var(--text-primary)}.gifPlayStopBtn svg.hidden{display:none}.gifPlayStopBtn.playing #gifPlayIcon{display:none}.gifPlayStopBtn.playing #gifStopIcon{display:block}.selectionOverlay{pointer-events:none;position:absolute;top:0;left:0}.contextModules{flex-shrink:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.imageDataModule{background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border);padding:var(--space-3);box-shadow:var(--shadow-xs)}.imageDataModuleHeader{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border)}.imageDataModuleRow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-2)}.imageDataModuleRow:last-child{margin-bottom:0}.sectionLabel{font-size:.75rem;font-weight:500;color:var(--text-secondary);min-width:fit-content}.singleLineControls{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;flex:1}.singleLineControls span{color:var(--text-muted);font-weight:500;font-size:.8rem}.singleLineControls input[type=number],#imageNameInput{width:72px;padding:var(--space-2) var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:.8rem;font-weight:500;transition:all var(--transition);box-shadow:var(--shadow-inset)}#imageNameInput{flex:1;min-width:80px;max-width:140px;width:auto}.singleLineControls input:hover,#imageNameInput:hover,#imageExtensionSelector:hover{border-color:var(--border-strong)}.singleLineControls input:focus,#imageNameInput:focus,#imageExtensionSelector:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.singleLineControls button{min-width:40px;min-height:36px;padding:var(--space-2) var(--space-3);background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;transition:all var(--transition);box-shadow:var(--shadow-xs)}.singleLineControls button:hover{background:var(--accent-hover);box-shadow:var(--shadow-sm)}.singleLineControls button:active{transform:scale(.97)}#imageExtensionSelector{padding:var(--space-2) var(--space-3);min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:.8rem;font-weight:500;appearance:none;cursor:pointer;box-shadow:var(--shadow-inset);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}.checkboxLabel{display:flex;align-items:center;gap:var(--space-2);font-size:.75rem;font-weight:500;color:var(--text-secondary);white-space:nowrap;cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:background var(--transition)}.checkboxLabel:hover{background:var(--bg-tertiary)}.checkboxLabel input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.layersModule{display:none;flex-direction:column;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border);padding:var(--space-3);max-height:200px;box-shadow:var(--shadow-xs)}#currentLayerSelector{min-height:100px;margin-bottom:var(--space-3);padding:var(--space-3);background:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border);box-shadow:var(--shadow-inset)}#currentLayerSelector input[type=color],#mobileCurrentLayerSelector input[type=color]{width:44px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:var(--shadow-xs)}#currentLayerSelector input[type=color]::-webkit-color-swatch-wrapper,#mobileCurrentLayerSelector input[type=color]::-webkit-color-swatch-wrapper{padding:2px}#currentLayerSelector input[type=color]::-webkit-color-swatch,#mobileCurrentLayerSelector input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-sm) - 2px)}#layersSelector{flex:1;overflow-y:auto;margin-bottom:var(--space-2)}#layersList{list-style:none}.layerDiv{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3);margin-bottom:var(--space-2);min-height:42px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}.layerDiv:last-child{margin-bottom:0}.layerDiv p{margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:500}.layerDiv:hover{border-color:var(--border-strong);background:var(--bg-tertiary)}.layerDiv:active,.selectedLayerDiv{border-color:var(--accent);background:var(--accent-soft)}.layerDivToggleVisability{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;margin:0!important;margin-left:var(--space-2)!important;cursor:pointer!important;flex-shrink:0!important;display:inline-block!important;visibility:visible!important;opacity:1!important;position:relative!important;accent-color:var(--accent)}#layersControls{display:flex;gap:var(--space-2);flex-wrap:wrap}#layersControls button{flex:1;min-height:38px;padding:var(--space-2);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;color:var(--text-primary);transition:all var(--transition)}#layersControls button:disabled{opacity:.4;cursor:not-allowed}#layersControls button:hover:not(:disabled){border-color:var(--border-strong);background:var(--bg-tertiary)}#layersControls button:active:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}.layerReorderGroup{display:flex;gap:var(--space-1)}.layerReorderGroup button{flex:none;width:38px}.desktopMenuBar{display:none}@media(min-width:1024px){.desktopMenuBar{display:flex;position:fixed;top:0;left:0;right:0;height:32px;background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:1000;padding:0 var(--space-2);gap:0;font-size:.8125rem}.desktopRenderStatus{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);font-size:.75rem;font-weight:500;color:var(--text-secondary);border-right:1px solid var(--border);margin-right:var(--space-1);min-width:95px}.desktopRenderStatus .spinner{display:none;width:10px;height:10px;border:1.5px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}.desktopRenderStatus.isRendering{color:var(--accent)}.desktopRenderStatus.isRendering .spinner{display:block}.desktopRenderStatus.isError{color:var(--danger)}.desktopRenderStatus.isReady{color:var(--text-secondary)}.renderStatus{display:none}.menuBarItem{position:relative;display:flex;align-items:center}.menuBarItem>span{display:flex;align-items:center;height:100%;padding:0 var(--space-3);color:var(--text-secondary);cursor:pointer;transition:background var(--transition),color var(--transition);-webkit-user-select:none;user-select:none}.menuBarItem>span:hover,.menuBarItem.active>span{background:var(--bg-tertiary);color:var(--text-primary)}.menuBarItem.active>span{background:var(--accent-soft);color:var(--accent)}.dropdownMenu{position:absolute;top:100%;left:0;min-width:220px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:1001}.menuBarItem.active .dropdownMenu{opacity:1;visibility:visible;transform:translateY(0)}.dropdownItem{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-2) var(--space-3);background:transparent;border:none;color:var(--text-primary);font-size:.8125rem;text-align:left;cursor:pointer;transition:background var(--transition)}.dropdownItem:hover:not(:disabled){background:var(--bg-tertiary)}.dropdownItem:disabled{color:var(--text-muted);cursor:not-allowed}.dropdownItemLabel{flex:1}.dropdownItemShortcut{color:var(--text-muted);font-size:.75rem;margin-left:var(--space-4)}.dropdownDivider{height:1px;background:var(--border);margin:var(--space-1) 0}.dropdownGroupLabel{display:block;padding:var(--space-2) var(--space-3) var(--space-1);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.dropdownSubmenu{position:relative}.dropdownSubmenuLabel{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-2) var(--space-3);color:var(--text-primary);font-size:.8125rem;cursor:pointer;transition:background var(--transition)}.dropdownSubmenuLabel:after{content:"›";font-size:1rem;color:var(--text-muted)}.dropdownSubmenuLabel:hover{background:var(--bg-tertiary)}.dropdownSubmenuItems{position:absolute;left:100%;top:0;min-width:200px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;opacity:0;visibility:hidden;transform:translate(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:1002}.dropdownSubmenu:hover .dropdownSubmenuItems{opacity:1;visibility:visible;transform:translate(0)}.dropdownSubmenuItems .dropdownGroupLabel{padding-top:var(--space-2)}.dropdownSubmenuItems .dropdownGroupLabel:first-child{padding-top:var(--space-1)}}.bottomTaskbar{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-height);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:stretch;z-index:100;box-shadow:0 -4px 20px #0000000f}.navBtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-secondary);transition:all var(--transition);padding:var(--space-2) var(--space-1);background:transparent;border:none;min-height:var(--touch-target);position:relative}.navBtn svg{width:22px;height:22px;flex-shrink:0;transition:all var(--transition);stroke-width:1.75}.navBtn span{font-size:.65rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.navBtn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.navBtn:active,.navBtn.active{color:var(--accent)}.navBtn:active svg{transform:scale(.92)}.navBtn.active{background:var(--accent-soft)}.navBtn.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:28px;height:2px;background:var(--accent);border-radius:0 0 2px 2px}.menuOverlay{position:fixed;inset:0;background:#0f172a66;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:150;opacity:0;pointer-events:none;transition:opacity var(--transition-slow)}.menuOverlay.active{opacity:1;pointer-events:auto}.menuPanel{position:fixed;bottom:0;left:0;right:0;max-height:70vh;background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;z-index:200;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:var(--shadow-xl)}.menuPanel:before{content:"";position:absolute;top:var(--space-2);left:50%;transform:translate(-50%);width:36px;height:4px;background:var(--border-strong);border-radius:2px}.menuPanel.active{transform:translateY(0)}.menuPanelHeader{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0}.menuPanelHeader h2{font-size:1rem;font-weight:600;letter-spacing:-.01em}.menuClose{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:300;color:var(--text-secondary);background:var(--bg-tertiary);border-radius:50%;transition:all var(--transition)}.menuClose:hover{background:var(--bg-primary)}.menuClose:active{background:var(--accent-soft);color:var(--accent);transform:scale(.95)}.menuPanelContent{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5) var(--space-6);-webkit-overflow-scrolling:touch}.menuItem{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);min-height:48px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.9rem;font-weight:500;color:var(--text-primary);text-align:left;margin-bottom:var(--space-2);transition:all var(--transition)}.menuItem svg{width:20px;height:20px;flex-shrink:0;color:var(--accent);stroke-width:1.75}.menuItem:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--border-strong)}.menuItem:active:not(:disabled){background:var(--accent-soft);border-color:var(--accent);transform:scale(.99)}.menuItem:disabled{opacity:.4;cursor:not-allowed}.menuItem.compact{flex:1;justify-content:center;padding:var(--space-3);min-height:44px;font-size:.85rem;font-weight:600}.menuDivider{border:none;border-top:1px solid var(--border);margin:var(--space-3) 0}.menuGroup{margin-bottom:var(--space-4)}.menuGroupLabel{display:block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:var(--space-2);padding-left:var(--space-1)}.menuRow{display:flex;gap:var(--space-2)}.menuRow .menuItem{margin-bottom:0}.layersPanel .menuPanelContent{display:flex;flex-direction:column;gap:var(--space-3)}.mobileLayerEditor{min-height:100px;padding:var(--space-3);background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-inset)}.mobileLayersList{flex:1;max-height:200px;overflow-y:auto;-webkit-overflow-scrolling:touch}.mobileLayersList ul{list-style:none}.mobileLayersList .layerDiv{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);margin-bottom:var(--space-2);min-height:44px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}.mobileLayersList .layerDiv:last-child{margin-bottom:0}.mobileLayersList .layerDiv:hover{background:var(--bg-tertiary);border-color:var(--border-strong)}.mobileLayersList .layerDiv:active,.mobileLayersList .selectedLayerDiv{border-color:var(--accent);background:var(--accent-soft)}.mobileLayersControls{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}.mobileLayersControls button{flex:1;min-height:44px;padding:var(--space-3) var(--space-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.85rem;font-weight:600;color:var(--text-primary);transition:all var(--transition)}.mobileLayersControls button:disabled{opacity:.4;cursor:not-allowed}.mobileLayersControls button:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--border-strong)}.mobileLayersControls button:active:not(:disabled){background:var(--accent-soft);border-color:var(--accent);transform:scale(.98)}.mobileLayersControls #mobileDeleteLayer{background:var(--danger-soft);color:var(--danger);border-color:#ef444433}.mobileLayersControls #mobileDeleteLayer:hover:not(:disabled){background:#ef444426}.mobileLayersControls #mobileDeleteLayer:active:not(:disabled){background:#ef444433;border-color:var(--danger)}.mobileLayersControls .layerReorderGroup{display:flex;gap:var(--space-2);flex:0 0 auto}.mobileLayersControls .layerReorderGroup button{flex:none;width:44px;min-width:44px;font-size:.9rem}@media(min-width:768px){#navLayers{display:none}}.floatingPanel{position:fixed;bottom:calc(var(--bottom-nav-height) + var(--space-3) + env(safe-area-inset-bottom,0px));left:var(--space-3);right:var(--space-3);max-width:380px;margin:0 auto;background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-xl);z-index:120;animation:slideUp .2s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.floatingPanelHeader{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}.floatingPanelHeader h3{font-size:.9rem;font-weight:600}.floatingPanelHeader button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text-secondary);background:var(--bg-tertiary);border-radius:50%;transition:all var(--transition)}.floatingPanelHeader button:hover{background:var(--bg-primary)}.floatingPanelBody{padding:var(--space-4)}.floatingPanelRow{display:flex;gap:var(--space-3);margin-bottom:var(--space-3)}.floatingPanelRow label{flex:1;display:flex;flex-direction:column;gap:var(--space-2);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}.floatingPanelRow input{width:100%;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:.85rem;font-weight:500;box-shadow:var(--shadow-inset);transition:all var(--transition)}.floatingPanelRow input:hover{border-color:var(--border-strong)}.floatingPanelRow input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.panelActions{display:flex;gap:var(--space-2);margin-top:var(--space-4)}.panelActions button{flex:1;padding:var(--space-3);min-height:44px;background:var(--accent);color:#fff;border-radius:var(--radius-md);font-size:.85rem;font-weight:600;transition:all var(--transition);box-shadow:var(--shadow-sm)}.panelActions button:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}.panelActions button:active{transform:scale(.98)}@media(min-width:768px){.mainContent{flex-direction:row;padding:var(--space-4);gap:var(--space-4);padding-bottom:calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom,0px))}.imageModule{flex:1}.layersModule{display:flex;width:260px;flex-shrink:0;max-height:none}.contextModules{display:flex;flex-wrap:wrap;gap:var(--space-3)}.imageDataModule{flex:1;min-width:200px}}@media(min-width:1024px){:root{--bottom-nav-height: 0px;--top-menu-height: 32px}.bottomTaskbar{display:none}.menuPanel,.menuOverlay{display:none!important}.mainContent{padding-top:calc(var(--top-menu-height) + var(--space-5));padding-bottom:var(--space-5)}.layersModule{width:300px}.mainContent{padding:var(--space-5);padding-top:calc(var(--top-menu-height) + var(--space-5));gap:var(--space-5)}}@media(max-height:500px)and (orientation:landscape){.mainContent{flex-direction:row;gap:var(--space-3)}.imageModule{flex:1}.contextModules{display:none}.imageViewingModule{min-height:100px}.menuPanel{max-height:90vh}}@supports (padding: env(safe-area-inset-bottom)){.topHeader{padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}.mainContent{padding-left:max(var(--space-3),env(safe-area-inset-left));padding-right:max(var(--space-3),env(safe-area-inset-right))}.bottomTaskbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-contrast:high){:root{--bg-secondary: #ffffff;--text-primary: #000000;--border: #000000}.menuItem,.navBtn,.layerDiv,button{border:2px solid currentColor}}.dropOverlay{position:fixed;inset:0;background:#0f172ad9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none}.dropOverlay.active{opacity:1;visibility:visible;pointer-events:auto}.dropOverlayContent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px 64px;border:3px dashed var(--accent);border-radius:var(--radius-xl);background:#3b82f61a;text-align:center;animation:dropPulse 1.5s ease-in-out infinite}.dropOverlayContent svg{width:64px;height:64px;color:var(--accent);animation:dropBounce 1s ease-in-out infinite}.dropOverlayContent p{font-size:1.5rem;font-weight:600;color:#fff;margin:0}.dropOverlayContent span{font-size:.875rem;color:var(--text-secondary);margin:0}@keyframes dropPulse{0%,to{border-color:var(--accent);background:#3b82f61a}50%{border-color:var(--accent-hover);background:#3b82f626}}@keyframes dropBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(prefers-color-scheme:light){.dropOverlay{background:#f1f5f9e6}.dropOverlayContent p{color:var(--text-primary)}}