:root{--bg-dark: #0a0a0a;--bg-surface: #141414;--bg-panel: #1a1a1a;--bg-hover: #252525;--text-primary: #f0f0f0;--text-secondary: #888;--accent: #3b82f6;--accent-hover: #2563eb;--border: #2a2a2a;--red: #ef4444;--green: #22c55e;--blue: #3b82f6;--yellow: #eab308}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-dark);color:var(--text-primary);height:100vh;overflow:hidden}.app{display:grid;grid-template-columns:56px 1fr 300px;height:100vh}.toolbar{background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px}.tool-btn{width:40px;height:40px;border:none;background:transparent;color:var(--text-secondary);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.tool-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tool-btn.active{background:var(--accent);color:#fff}.tool-btn svg{width:20px;height:20px}.tool-divider{width:24px;height:1px;background:var(--border);margin:8px 0}.canvas-area{display:flex;align-items:center;justify-content:center;background:var(--bg-surface);position:relative;overflow:hidden}.canvas-container{position:relative;display:flex;align-items:center;justify-content:center}#gpu-canvas{max-width:100%;max-height:calc(100vh - 40px);object-fit:contain;border-radius:4px;box-shadow:0 4px 20px #00000080}#main-canvas{position:absolute;opacity:0;pointer-events:none}.brush-cursor{position:fixed;pointer-events:none;border:2px solid rgba(255,255,255,.8);border-radius:50%;transform:translate(-50%,-50%);display:none;mix-blend-mode:difference}.before-indicator{position:absolute;top:20px;left:20px;background:#000c;padding:8px 16px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;opacity:0;transition:opacity .2s;pointer-events:none}.before-indicator.visible{opacity:1}.before-after-toggle{position:absolute;bottom:20px;right:20px;display:flex;align-items:center;gap:6px;padding:8px 14px;background:#000000bf;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:var(--text-primary);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s;z-index:15;opacity:.8}.before-after-toggle:hover{opacity:1;background:#000000e6;border-color:var(--accent)}.before-after-toggle.active{background:var(--accent);border-color:var(--accent);opacity:1}.before-after-toggle svg{flex-shrink:0}.drop-zone{position:absolute;inset:20px;border:2px dashed var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:all .3s}.drop-zone.hidden{opacity:0;pointer-events:none}.drop-zone.dragover{border-color:var(--accent);background:#3b82f61a}.drop-zone h2{font-size:18px;font-weight:500}.drop-zone p{color:var(--text-secondary);font-size:14px}.control-panel{background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel-header{padding:16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.panel-title{font-size:13px;font-weight:600}.panel-tabs{display:flex;border-bottom:1px solid var(--border)}.panel-tab{flex:1;padding:10px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);cursor:pointer;border:none;background:none;transition:all .2s}.panel-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.panel-tab.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}.panel-content{flex:1;overflow-y:auto;padding:16px}.panel-section{display:none}.panel-section.active{display:block}.histogram-container{background:var(--bg-dark);border-radius:8px;padding:12px;margin-bottom:16px}.histogram-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:8px}#histogram-canvas{width:100%;height:80px;border-radius:4px}.control-group{margin-bottom:14px}.control-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.control-label span:last-child{color:var(--text-secondary);font-family:SF Mono,Monaco,monospace;font-size:11px}input[type=range]{width:100%;height:4px;background:var(--border);border-radius:2px;-webkit-appearance:none;appearance:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.section{margin-bottom:20px}.section-header{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);padding:8px 0;margin-bottom:12px;border-bottom:1px solid var(--border)}.btn{padding:10px 16px;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s}.btn:hover{background:var(--bg-hover)}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover)}.btn-row{display:flex;gap:8px}.btn-row .btn{flex:1}.mask-layers{margin-bottom:16px}.mask-layer{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-dark);border-radius:6px;margin-bottom:4px;cursor:pointer;transition:all .15s}.mask-layer:hover{background:var(--bg-hover)}.mask-layer.active{background:var(--accent)}.mask-layer-icon{width:24px;height:24px;background:var(--bg-surface);border-radius:4px;display:flex;align-items:center;justify-content:center}.mask-layer-name{flex:1;font-size:12px}.mask-layer-delete{opacity:0;color:var(--red);cursor:pointer}.mask-layer:hover .mask-layer-delete{opacity:1}.mask-tool-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mask-tool-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.mask-tool-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.mask-tool-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.mask-tool-btn svg{width:20px;height:20px}.mask-tool-btn span{font-size:10px;font-weight:500}.scale-factor-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.scale-factor-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.scale-factor-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.scale-factor-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.scale-factor-btn .scale-value{font-size:20px;font-weight:700;line-height:1}.scale-factor-btn .scale-label{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.scale-factor-btn.active .scale-value,.scale-factor-btn.active .scale-label{color:#fff}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .15s;font-size:14px}.mode-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.mode-header{padding:16px;border-bottom:1px solid var(--border)}.mode-header .panel-title{font-size:14px;font-weight:600}.liquify-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.liquify-mode-btn{display:flex;align-items:center;justify-content:center;padding:12px;background:var(--bg-dark);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.liquify-mode-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.liquify-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.liquify-mode-btn svg{width:20px;height:20px}.brush-preview{width:60px;height:60px;background:var(--bg-dark);border-radius:8px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}.brush-preview-circle{background:radial-gradient(circle,#fff,#fff0 70%);border-radius:50%}.brush-mode-btn{background:transparent;color:var(--text-secondary);transition:all .15s;cursor:pointer}.brush-mode-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.brush-mode-btn.active{background:var(--accent);color:#fff}.keyboard-hint{font-size:10px;color:var(--text-secondary);text-align:center;padding:12px;border-top:1px solid var(--border)}kbd{background:var(--bg-surface);padding:2px 6px;border-radius:3px;font-family:inherit;font-size:10px}.perf-indicator{position:fixed;bottom:10px;left:70px;font-size:11px;color:var(--text-secondary);background:#000c;padding:4px 10px;border-radius:4px;font-family:SF Mono,Monaco,monospace}#file-input{display:none}#relight-canvas{position:absolute;max-width:100%;max-height:calc(100vh - 40px);object-fit:contain;border-radius:4px;box-shadow:0 4px 20px #00000080;z-index:5;cursor:crosshair}#three-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.shortcuts-modal{position:fixed;inset:0;background:#000c;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.shortcuts-content{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto}.shortcuts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.shortcuts-header h3{font-size:16px;font-weight:600;margin:0}.shortcuts-close{background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .2s}.shortcuts-close:hover{color:var(--text-primary)}.shortcuts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.shortcut-section h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:12px}.shortcut-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:12px}.shortcut-row kbd{min-width:28px;text-align:center;background:var(--bg-dark);padding:4px 8px;border-radius:4px;border:1px solid var(--border);font-family:SF Mono,Monaco,monospace;font-size:10px;color:var(--text-primary)}.shortcut-row span{color:var(--text-secondary)}@media(max-width:600px){.shortcuts-grid{grid-template-columns:1fr}}.crop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:20}.crop-dark{position:absolute;background:#0009}.crop-region{position:absolute;box-sizing:border-box}.crop-border{position:absolute;inset:0;border:2px solid white;box-shadow:0 0 0 1px #00000080;pointer-events:none}.crop-handle{position:absolute;width:12px;height:12px;background:#fff;border:1px solid rgba(0,0,0,.3);border-radius:2px;box-shadow:0 1px 3px #0000004d;z-index:5}.crop-handle-nw{top:-6px;left:-6px;cursor:nwse-resize}.crop-handle-n{top:-6px;left:50%;transform:translate(-50%);cursor:ns-resize}.crop-handle-ne{top:-6px;right:-6px;cursor:nesw-resize}.crop-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:ew-resize}.crop-handle-se{bottom:-6px;right:-6px;cursor:nwse-resize}.crop-handle-s{bottom:-6px;left:50%;transform:translate(-50%);cursor:ns-resize}.crop-handle-sw{bottom:-6px;left:-6px;cursor:nesw-resize}.crop-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:ew-resize}.crop-grid{position:absolute;inset:0;pointer-events:none}.crop-grid-line{position:absolute;background:#ffffff4d}.crop-grid-h1{top:33.333%;left:0;right:0;height:1px}.crop-grid-h2{top:66.666%;left:0;right:0;height:1px}.crop-grid-v1{left:33.333%;top:0;bottom:0;width:1px}.crop-grid-v2{left:66.666%;top:0;bottom:0;width:1px}.crop-dimensions{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);background:#000c;padding:4px 10px;border-radius:4px;font-size:11px;color:#fff;white-space:nowrap;pointer-events:none;font-family:SF Mono,Monaco,monospace}.aspect-ratio-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.aspect-ratio-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:var(--bg-dark);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .15s;font-size:10px}.aspect-ratio-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.aspect-ratio-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.aspect-ratio-btn .ratio-icon{font-size:16px;line-height:1}.checkbox-label{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-primary);cursor:pointer;padding:8px 0}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.checkbox-label span{user-select:none}.zoom-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;background:#1a1a1af2;backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:8px;padding:6px 10px;z-index:50}.zoom-btn{width:28px;height:28px;border:none;background:transparent;color:var(--text-secondary);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.zoom-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.zoom-btn:active{background:var(--accent);color:#fff}.zoom-btn svg{width:14px;height:14px}.zoom-btn-text{width:auto;padding:0 10px;font-size:11px;font-weight:500}.zoom-level{font-size:11px;font-weight:600;color:var(--text-primary);min-width:45px;text-align:center;font-family:SF Mono,Monaco,monospace}.canvas-container{transition:transform .15s ease-out;position:relative}.comparison-slider{position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:100;pointer-events:none}.comparison-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 4px #00000080}.comparison-handle{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:#1a1a1af2;border:2px solid white;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:ew-resize;pointer-events:auto;box-shadow:0 2px 8px #0006;transition:transform .1s}.comparison-handle:hover{transform:translateY(-50%) scale(1.1)}.comparison-handle:active{transform:translateY(-50%) scale(.95)}.comparison-label{position:absolute;top:12px;padding:4px 10px;background:#000c;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#fff;white-space:nowrap}.comparison-label-before{right:20px}.comparison-label-after{left:20px}.original-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.canvas-area.panning{cursor:grabbing!important}