:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #1c2333;--bg-panel: #21262d;--border: #30363d;--border-accent: #3b82f6;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #6e7681;--accent-blue: #58a6ff;--accent-green: #3fb950;--accent-red: #f85149;--accent-orange: #d29922;--accent-purple: #f0a030;--accent-cosmx: #f0a030;--accent-cosmx-dim: #f0a03033;--radius: 6px;--radius-lg: 10px;--shadow: 0 2px 8px rgba(0,0,0,.3);--transition: .15s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:JetBrains Mono,SF Mono,Fira Code,Consolas,monospace;background:var(--bg-primary);color:var(--text-primary);overflow:hidden;height:100vh}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:48px;background:var(--bg-secondary);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:10px}.app-title{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.title-icon{font-size:18px;margin-right:4px}.title-accent{color:var(--accent-cosmx)}.version-badge{font-size:10px;color:var(--accent-cosmx);background:var(--accent-cosmx-dim);padding:2px 6px;border-radius:4px;font-weight:600}.header-center{display:flex;align-items:center}.header-stats{display:flex;gap:4px;font-size:12px;color:var(--text-secondary)}.stat{font-weight:500}.stat-sep{color:var(--text-muted)}.header-right{display:flex;align-items:center}.header-badge{font-size:10px;font-weight:700;color:var(--accent-purple);background:#f0a0301a;padding:2px 8px;border-radius:4px;letter-spacing:1px}.main-content{display:flex;flex:1;overflow:hidden}.sidebar{width:320px;min-width:320px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-scroll{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.sidebar-scroll::-webkit-scrollbar{width:6px}.sidebar-scroll::-webkit-scrollbar-track{background:transparent}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px}.panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:10px}.preset-btn{display:flex;flex-direction:column;width:100%;padding:10px 12px;margin-bottom:6px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);cursor:pointer;transition:all var(--transition);text-align:left;font-family:inherit;font-size:13px;position:relative}.preset-btn:hover,.preset-btn.active{border-color:var(--accent-cosmx);background:var(--accent-cosmx-dim)}.preset-btn:disabled{opacity:.5;cursor:wait}.preset-label{font-weight:600}.preset-desc{font-size:10px;color:var(--text-muted);margin-top:2px}.preset-check{position:absolute;top:10px;right:12px;color:var(--accent-cosmx);font-weight:700}.custom-load{margin-top:8px}.path-input{width:100%;padding:8px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:inherit;font-size:11px}.path-input:focus{outline:none;border-color:var(--accent-cosmx)}.path-input::placeholder{color:var(--text-muted)}.loading-section{margin-top:8px}.loading-bar{height:3px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.loading-timer{font-size:11px;color:var(--accent-cosmx);margin-top:4px;font-variant-numeric:tabular-nums}.loading-bar-inner{height:100%;width:40%;background:linear-gradient(90deg,var(--accent-cosmx),var(--accent-blue));border-radius:2px;animation:loading-slide 1.2s ease-in-out infinite}@keyframes loading-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}.error-msg{margin-top:8px;padding:8px;background:#f851491a;border:1px solid #f8514933;border-radius:var(--radius);font-size:11px;color:var(--accent-red)}.status-msg{margin-top:6px;font-size:11px;color:var(--accent-green)}.quick-genes-panel{border-color:#f0a03044;background:linear-gradient(135deg,var(--bg-panel),#f0a0300a)}.quick-gene-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px}.quick-gene-btn{padding:6px 4px;font-size:11px;font-weight:600;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);text-align:center}.quick-gene-btn:hover{border-color:var(--accent-cosmx);color:var(--accent-cosmx)}.quick-gene-btn.active{background:#f0a03033;border-color:var(--accent-cosmx);color:#ffb74d;font-weight:700}.color-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:10px}.mode-btn{padding:6px 8px;font-size:11px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.mode-btn:hover{border-color:var(--accent-blue);color:var(--text-primary)}.mode-btn.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.mode-btn:disabled{opacity:.3;cursor:not-allowed}.gene-search{position:relative;margin-bottom:8px}.gene-input{width:100%;padding:8px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:inherit;font-size:12px}.gene-input:focus{outline:none;border-color:var(--accent-cosmx)}.gene-input::placeholder{color:var(--text-muted)}.gene-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:50;max-height:200px;overflow-y:auto}.gene-option{padding:6px 10px;display:flex;justify-content:space-between;cursor:pointer;font-size:12px;transition:background var(--transition)}.gene-option:hover{background:var(--accent-cosmx-dim)}.gene-name{font-weight:600;color:var(--text-primary)}.gene-meta{font-size:10px;color:var(--text-muted)}.selected-gene-info{font-size:11px;color:var(--accent-cosmx);padding:4px 0}.expr-controls{margin-top:4px;padding-top:6px;border-top:1px solid var(--border)}.ctrl-label{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:8px 0 4px}.auto-tag{font-size:9px;background:var(--accent-cosmx-dim);color:var(--accent-cosmx);padding:1px 5px;border-radius:3px;font-weight:500;text-transform:lowercase;letter-spacing:0}.cmap-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px}.cmap-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all var(--transition);font-family:inherit}.cmap-btn:hover{border-color:var(--accent-blue)}.cmap-btn.active{border-color:var(--accent-cosmx);background:var(--accent-cosmx-dim)}.cmap-name{font-size:9px;color:var(--text-muted)}.cmap-btn.active .cmap-name{color:var(--accent-cosmx);font-weight:600}.cmap-preview{display:block;width:100%;height:6px;border-radius:2px}.cmap-hot{background:linear-gradient(to right,#000,#a00,#f80,#ff0,#fff)}.cmap-inferno{background:linear-gradient(to right,#000,#420a68,#932667,#dd513a,#fca50a,#fcffa4)}.cmap-magma{background:linear-gradient(to right,#000,#3b0f70,#8c2981,#de4968,#fea16e,#fcfdbf)}.cmap-viridis{background:linear-gradient(to right,#440154,#31688e,#35b779,#fde725)}.cmap-cyan{background:linear-gradient(to right,#000,#046,#0ac,#6de,#fff)}.cmap-red{background:linear-gradient(to right,#000,#600,#c00,#f80,#ffc)}.expr-slider{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:3px;outline:none;margin:4px 0}.expr-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-cosmx);cursor:pointer;border:2px solid var(--bg-primary);box-shadow:0 0 4px #00d4aa66}.expr-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-cosmx);cursor:pointer;border:2px solid var(--bg-primary)}.slider-labels{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--text-muted)}.auto-reset-btn{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:3px;color:var(--text-secondary);font-size:9px;font-family:inherit;padding:1px 6px;cursor:pointer;transition:all var(--transition)}.auto-reset-btn:hover{border-color:var(--accent-cosmx);color:var(--accent-cosmx)}.layer-toggle{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:12px}.layer-toggle input[type=checkbox]{accent-color:var(--accent-cosmx);width:14px;height:14px}.layer-label{flex:1;color:var(--text-primary)}.layer-count{font-size:10px;color:var(--accent-cosmx);background:var(--accent-cosmx-dim);padding:1px 5px;border-radius:3px}.layer-na{font-size:9px;color:var(--text-muted);font-style:italic}.layer-loaded{font-size:10px;color:var(--accent-green)}.layer-loading{font-size:10px;color:var(--text-muted);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.layer-sub{padding:4px 0 4px 22px}.layer-hint{font-size:10px;color:var(--text-muted);padding:4px 0;line-height:1.4}.layer-section-header{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:10px;margin-bottom:4px;padding-top:6px;border-top:1px solid var(--border)}.mini-toggle-row{display:flex;gap:3px;margin-bottom:4px}.mini-btn{flex:1;padding:3px 6px;font-size:10px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:3px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.mini-btn:hover{border-color:var(--accent-cosmx)}.mini-btn.active{background:var(--accent-cosmx-dim);border-color:var(--accent-cosmx);color:var(--accent-cosmx);font-weight:600}.channel-row{padding:2px 0}.channel-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;display:inline-block}.channel-controls{display:flex;align-items:center;gap:6px;padding:2px 0 2px 30px}.channel-slider{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:2px;outline:none}.channel-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text-secondary);cursor:pointer;border:2px solid var(--bg-primary)}.channel-opacity-label{font-size:10px;color:var(--text-muted);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}.draw-controls{margin-bottom:8px}.draw-btn{width:100%;padding:8px;font-size:12px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);cursor:pointer;transition:all var(--transition)}.draw-btn:hover{border-color:var(--accent-orange)}.draw-btn.active{background:var(--accent-orange);border-color:var(--accent-orange);color:#000}.draw-hint{display:block;font-size:10px;color:var(--accent-orange);margin-top:4px}.region-item{display:flex;align-items:center;gap:6px;margin-bottom:4px}.region-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}.region-name-input{flex:1;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:3px;padding:4px 6px;font-size:11px;font-family:inherit;color:var(--text-primary)}.region-name-input:focus{outline:none;border-color:var(--accent-blue)}.region-delete{background:none;border:none;color:var(--accent-red);cursor:pointer;font-size:16px;padding:0 4px}.action-btn{width:100%;padding:8px 12px;margin-bottom:4px;font-size:12px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);cursor:pointer;transition:all var(--transition);text-align:left}.action-btn:hover{border-color:var(--accent-cosmx);background:var(--accent-cosmx-dim)}.ct-distribution{display:flex;flex-direction:column;gap:3px}.ct-row{display:flex;align-items:center;gap:6px;font-size:11px}.ct-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}.ct-name{flex:1;color:var(--text-primary)}.ct-count{color:var(--text-secondary);font-size:10px}.ct-pct{color:var(--text-muted);font-size:10px;min-width:36px;text-align:right}.export-content{display:flex;flex-direction:column;gap:4px}.export-divider{border:none;border-top:1px solid var(--border);margin:4px 0}.cross-tab-results,.pseudobulk-results{margin-top:10px;font-size:11px}.cross-tab-results h4,.pseudobulk-results h4{font-size:11px;color:var(--accent-cosmx);margin-bottom:6px}.xtab-table{width:100%;border-collapse:collapse;font-size:10px}.xtab-table th,.xtab-table td{padding:3px 5px;border:1px solid var(--border);text-align:right}.xtab-table th{background:var(--bg-tertiary);color:var(--text-secondary);font-weight:600}.xtab-table td:first-child{text-align:left;font-weight:500}.pb-region{margin-bottom:8px}.pb-region h5{font-size:11px;color:var(--text-primary);margin-bottom:3px}.pb-genes{display:flex;flex-wrap:wrap;gap:4px}.pb-gene{font-size:10px;background:var(--bg-tertiary);padding:2px 6px;border-radius:3px;color:var(--text-secondary)}.sidebar-footer{padding:10px 0 6px;text-align:center;font-size:10px;color:var(--text-muted);border-top:1px solid var(--border);margin-top:auto}.canvas-area{flex:1;position:relative;overflow:hidden;background:var(--bg-primary)}.canvas-area canvas{display:block;width:100%;height:100%}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-secondary)}.empty-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-state h2{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.empty-state p{font-size:13px;color:var(--text-secondary);margin-bottom:4px}.empty-sub{font-size:11px;color:var(--text-muted)}.legend{position:absolute;bottom:16px;right:16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow);z-index:10}.celltype-legend{display:flex;flex-direction:column;gap:4px}.legend-item{display:flex;align-items:center;gap:6px;font-size:11px}.legend-swatch{width:10px;height:10px;border-radius:2px}.expr-legend{width:180px}.legend-label{display:block;font-size:11px;font-weight:600;margin-bottom:4px}.cmap-bar{height:12px;border-radius:3px}.cmap-bar-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-top:2px}.split-view{display:flex;flex-direction:row;gap:2px}.canvas-panel{position:relative;overflow:hidden}.panel-full{flex:1;width:100%;height:100%}.panel-half{flex:1;width:50%;height:100%}.panel-right{border-left:2px solid var(--border)}.panel-half canvas{width:100%!important;height:100%!important}.compare-toggle{padding:5px 12px;font-size:11px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);cursor:pointer;transition:all .2s;margin-right:8px}.compare-toggle:hover{border-color:var(--accent-cosmx)}.compare-toggle.active{background:var(--accent-cosmx-dim);border-color:var(--accent-cosmx);color:var(--accent-cosmx);font-weight:600}.compare-empty{padding:24px}.compare-prompt{font-size:14px;color:var(--text-primary);margin-bottom:16px;font-weight:600}.compare-preset-list{display:flex;flex-direction:column;gap:8px;max-width:300px}.compare-preset-btn{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);cursor:pointer;text-align:left;font-family:inherit;transition:all .2s}.compare-preset-btn:hover{border-color:var(--accent-cosmx);background:var(--bg-tertiary)}.compare-preset-btn strong{font-size:12px}.compare-preset-btn span{font-size:10px;color:var(--text-muted)}