#app-layout,#canvas-container{height:100vh;height:100dvh;overflow:hidden}#app-layout{display:flex;width:100vw}#canvas-container{flex:1;position:relative;background:var(--bg-primary)}.drawer-handle{position:fixed;top:50%;left:0;width:30px;height:80px;transform:translateY(-50%);background:var(--bg-secondary);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-color);border-left:none;border-radius:0 var(--border-radius-lg) var(--border-radius-lg)0;z-index:1001;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all var(--transition-medium) var(--transition-smooth);box-shadow:4px 0 10px rgba(0,0,0,.3)}.drawer-handle:hover{background:rgba(100,100,100,.45);width:35px}.drawer-handle-icon{font-size:24px;color:#fff;opacity:1;transition:opacity var(--transition-medium);text-shadow:0 0 4px rgba(0,0,0,.5)}body:not(.menu-open) .drawer-handle{opacity:1;pointer-events:auto}body.fullscreen-mode.viewer-fullscreen #status-panel,body.fullscreen-mode.viewer-fullscreen #ui-container,body.fullscreen-mode.viewer-fullscreen .drawer-handle,body.fullscreen-mode.viewer-fullscreen .status-toggle-btn{display:none!important}.status-toggle-btn{position:fixed;top:var(--spacing-md);right:var(--spacing-md);z-index:1001;background:var(--accent-blue);border:2px solid #fff;color:#fff;width:44px;height:44px;border-radius:var(--border-radius-lg);font-size:18px;cursor:pointer;box-shadow:var(--shadow-heavy);transition:all var(--transition-medium) var(--transition-smooth);display:none;align-items:center;justify-content:center}.status-toggle-btn:hover{background:var(--accent-blue-hover);transform:scale(1.1)}body:not(.status-open) .status-toggle-btn{display:flex!important}body.fullscreen-mode .status-toggle-btn,body.viewer-mode .status-toggle-btn{display:none!important}#histogram-panel,#status-panel{position:fixed;right:var(--spacing-md);z-index:1000;background:var(--bg-secondary);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--border-radius-lg);min-width:180px;max-width:280px;box-shadow:var(--shadow-heavy);transition:transform var(--transition-medium) var(--transition-smooth),opacity var(--transition-medium)}#status-panel{top:var(--spacing-md);border:1px solid var(--border-color);padding:36px var(--spacing-lg) var(--spacing-md)}#status-panel.status-hidden{transform:translateX(120%);opacity:0;pointer-events:none}body.status-open #status-panel{transform:translateX(0);opacity:1;pointer-events:auto}#histogram-panel{top:200px;padding:36px 0 0}#histogram-panel canvas{width:100%;display:block;border-radius:var(--border-radius-sm);background-color:#0a0a0a}.status-close-btn,.status-row{display:flex;align-items:center}#histogram-panel,#histogram-panel canvas,.status-close-btn{border:1px solid var(--border-color)}.status-close-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:var(--bg-hover);color:var(--text-primary);font-size:20px;cursor:pointer;width:28px;height:28px;justify-content:center;border-radius:var(--border-radius-md);transition:all var(--transition-fast);line-height:1}.status-close-btn:hover{background:var(--accent-blue);color:#fff;transform:scale(1.05)}.status-close-btn:active{transform:scale(.95)}.status-row{gap:var(--spacing-sm);padding:var(--spacing-xs)0}.status-row.small{font-size:var(--font-size-sm)}.status-row.highlight .status-value{color:var(--accent-blue)}.status-label{font-size:var(--font-size-lg);flex-shrink:0;width:18px;text-align:center}.status-name{font-size:var(--font-size-sm);color:var(--text-secondary);flex-shrink:0;min-width:45px}.status-row.small .status-name{font-size:var(--font-size-xs)}.status-value{font-size:var(--font-size-md);color:var(--text-primary);word-break:break-all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:right}.status-row.small .status-value{font-size:var(--font-size-sm);color:var(--text-secondary)}#ui-container,.panel-tab{background:var(--bg-secondary);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#ui-container{width:240px;min-width:240px;height:100vh;height:100dvh;box-shadow:4px 0 20px rgba(0,0,0,.5);z-index:1000;flex-shrink:0;transition:margin-left var(--transition-medium) var(--transition-smooth),width var(--transition-medium) var(--transition-smooth),min-width var(--transition-medium) var(--transition-smooth)}#ui-container.ui-hidden{margin-left:-240px}body.menu-open #ui-container{margin-left:0}.panel-tab{position:fixed;left:240px;top:50%;transform:translateY(-50%);width:30px;height:80px;border:1px solid var(--border-color);border-left:none;border-radius:0 var(--border-radius-lg) var(--border-radius-lg)0;color:var(--text-primary);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),left var(--transition-medium) var(--transition-smooth),opacity var(--transition-medium);z-index:1001;box-shadow:4px 0 10px rgba(0,0,0,.3);opacity:0;pointer-events:none}.panel-tab:hover{background:rgba(100,100,100,.45)}.panel-tab:active{background:rgba(120,120,120,.55)}#ui-container.ui-hidden~.panel-tab{left:0;opacity:0;pointer-events:none}body.menu-open .panel-tab{opacity:1;pointer-events:auto}#ui-container,.menu-panels{position:relative;overflow:hidden}.menu-panels{width:100%;height:100%}.menu-panel{position:absolute;top:0;left:0;width:100%;height:100%;background:0 0;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition-medium) var(--transition-smooth);overflow-y:auto}.menu-panel.is-hidden{visibility:hidden;pointer-events:none}.menu-panel.active{transform:translateX(0)}.menu-panel.slide-out{transform:translateX(-30%);opacity:.5}.back-btn,.close-btn,.menu-header{display:flex;align-items:center;flex-shrink:0}.menu-header{padding:var(--spacing-md) 12px;background:var(--bg-card);border-bottom:1px solid var(--border-color)}.menu-header h1,.menu-header h2{font-size:var(--font-size-xl);font-weight:600;flex:1;letter-spacing:-.5px}.menu-header h2{font-size:var(--font-size-lg)}.back-btn,.close-btn{background:0 0;border:0;color:var(--text-primary);font-size:22px;cursor:pointer;width:28px;height:28px;justify-content:center;border-radius:var(--border-radius-md);transition:all var(--transition-fast)}.back-btn{margin-right:var(--spacing-sm);font-size:20px}.back-btn:hover,.close-btn:hover{background:var(--bg-hover)}.menu-content{padding:var(--spacing-md);padding-bottom:var(--spacing-xl);flex:1;min-height:0;overflow-y:auto}.info-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}.info-row.small{font-size:var(--font-size-xs);color:var(--text-secondary)}.info-row.highlight,.info-value.highlight{color:var(--accent-blue)}.info-label,.info-value{font-size:var(--font-size-sm)}.info-label{color:var(--text-secondary);font-weight:500}.info-value{color:var(--text-primary);word-break:break-all;text-align:right;max-width:60%}.info-value.highlight{font-weight:600}.action-section{padding:var(--spacing-md);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.action-card{display:flex;align-items:center;justify-content:center;padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;color:var(--text-primary)}.action-card:hover{background:var(--bg-hover);border-color:var(--accent-blue);transform:translateY(-2px)}.action-card .icon{font-size:18px;margin-right:var(--spacing-sm)}.action-card .label{font-size:var(--font-size-md);font-weight:500}.menu-cards{padding:var(--spacing-lg);display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.menu-cards.single-row{display:flex;flex-direction:row;align-items:stretch;gap:var(--spacing-sm);padding-bottom:5px;grid-template-columns:unset}.menu-card{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:var(--spacing-lg) var(--spacing-lg);background:rgba(68,68,68,.72);border:1px solid rgba(128,128,128,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:left;flex:1;min-height:auto}.menu-cards:not(.single-row) .menu-card{width:100%}.menu-card.wide{flex-direction:row;justify-content:flex-start;padding:var(--spacing-md) var(--spacing-lg);min-height:auto}.menu-card.wide .card-icon{margin-bottom:0;margin-right:var(--spacing-md);font-size:20px}.menu-card.wide .card-content{flex:1;text-align:left}.menu-card.wide .card-arrow{display:block;font-size:var(--font-size-xl);color:var(--text-tertiary)}.menu-card:hover{background:rgba(86,86,86,.82);border-color:rgba(174,174,174,.92);transform:translateY(-2px)}.menu-card .card-icon{font-size:var(--font-size-xl);margin-bottom:0;margin-right:var(--spacing-sm);flex-shrink:0}.menu-card .card-content{flex:1;display:flex;align-items:center}.menu-card .card-title{font-size:var(--font-size-xs);font-weight:600;color:var(--text-primary);white-space:nowrap}.menu-card .card-arrow,.menu-card .card-desc,.menu-card.compact .card-content,.menu-card.compact .card-title{display:none}.menu-card.compact{min-height:auto;padding:var(--spacing-lg);width:auto}.menu-card.compact .card-icon{margin-bottom:0}.menu-card.initial-ui-locked,button.initial-ui-locked,input.initial-ui-locked,select.initial-ui-locked,textarea.initial-ui-locked{opacity:.45!important;pointer-events:none!important}.language-options{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md)}.language-option-card{display:flex;align-items:center;padding:var(--spacing-lg);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:left;font-size:var(--font-size-lg);color:var(--text-primary)}.language-option-card:hover{background:var(--bg-hover);border-color:var(--accent-blue);transform:translateX(4px)}.language-option-card .option-icon{font-size:28px;margin-right:var(--spacing-lg);flex-shrink:0}.language-option-card .option-content{flex:1}.language-option-card .option-title{font-size:13px;font-weight:600;color:var(--text-primary)}.file-name-secondary{margin-top:-2px;padding-top:0!important}