:root{--color-primary: #4a9eff;--color-primary-dark: #007bff;--color-primary-darker: #0056b3;--color-bg-canvas: #ffffff;--color-bg-sidebar: #1a1a1a;--color-bg-light: #f8f9fa;--color-bg-lighter: #f5f5f5;--color-text-primary: #333;--color-text-secondary: #666;--color-text-light: #bbb;--color-text-white: #ffffff;--color-border-light: #e0e0e0;--color-border-dark: #333;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .2);--shadow-hover: 0 4px 12px rgba(0, 0, 0, .15);--shadow-frame: 0 0 4px rgba(0, 0, 0, .3);--overlay-dark: rgba(0, 0, 0, .5);--overlay-frame: rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--color-bg-canvas);color:var(--color-text-primary);overflow:hidden;height:100vh}.sidebar{position:fixed;left:20px;top:50%;transform:translateY(-50%);width:70px;background:var(--color-bg-sidebar);box-shadow:var(--shadow-md);border-radius:12px;z-index:1000;display:flex;flex-direction:column;align-items:center;padding:20px 10px}.icon-column{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%}.icon-btn{position:relative;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;width:50px;height:50px}.icon-btn i{font-size:26px;color:var(--color-text-light);transition:all .2s}.icon-btn:hover i{color:var(--color-primary);transform:scale(1.15)}.icon-btn.active i{color:var(--color-primary)}#colorTool{position:relative}.current-color-dot{position:absolute;bottom:8px;right:8px;width:12px;height:12px;border-radius:50%;background-color:#000;border:2px solid var(--color-bg-sidebar);pointer-events:none}.color-picker-modal{display:none;position:fixed;left:110px;top:50%;transform:translateY(-50%);background:var(--color-bg-sidebar);border:2px solid var(--color-border-dark);border-radius:12px;padding:20px;box-shadow:var(--shadow-lg);z-index:2000;min-width:200px}.color-picker-modal.active{display:block}.color-picker-section,.recent-colors-section{margin-bottom:15px}.color-picker-section:last-child,.recent-colors-section:last-child{margin-bottom:0}.color-picker-modal label{display:block;font-size:12px;color:var(--color-text-light);margin-bottom:8px;font-weight:500}.color-picker-section input[type=color]{width:100%;height:50px;border:2px solid var(--color-border-dark);border-radius:8px;cursor:pointer;background:transparent}.color-picker-section input[type=color]:hover{border-color:var(--color-primary)}.recent-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.recent-color{width:100%;aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid var(--color-border-dark);transition:all .2s}.recent-color:hover{transform:scale(1.1);border-color:var(--color-primary)}.divider{width:30px;height:1px;background:var(--color-border-dark);margin:5px 0}.canvas-area{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden}#pixelCanvas{position:absolute;top:0;left:0;cursor:crosshair;image-rendering:pixelated}#pixelCanvas.panning{cursor:grab}#pixelCanvas.panning:active{cursor:grabbing}.zoom-slider{position:fixed;bottom:20px;right:20px;background:var(--color-bg-sidebar);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;z-index:100}#zoomRange{width:180px;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border-dark);border-radius:2px;outline:none}#zoomRange::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2px;height:14px;background:var(--color-text-white);border-radius:1px;cursor:pointer;transition:all .2s}#zoomRange::-webkit-slider-thumb:hover{height:16px}#zoomRange::-moz-range-thumb{width:2px;height:14px;background:var(--color-text-white);border-radius:1px;cursor:pointer;border:none;transition:all .2s}#zoomRange::-moz-range-thumb:hover{height:16px}#zoomLevel{font-size:12px;font-weight:500;color:var(--color-text-light);width:45px;text-align:center;background:transparent;border:none;padding:0;outline:none}#zoomLevel:focus{color:var(--color-text-white)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000}.modal.active{display:flex;align-items:center;justify-content:center}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--overlay-dark);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--color-bg-sidebar);border-radius:12px;padding:30px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);z-index:1}.template-grid{display:grid;grid-template-columns:1fr;gap:20px}.template-item{width:100%}.template-card{background:var(--color-bg-sidebar);border:2px solid var(--color-border-dark);border-radius:12px;overflow:hidden;transition:all .3s ease}.template-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--color-primary)}.template-image{width:100%;background:var(--color-bg-canvas);display:flex;align-items:center;justify-content:center;padding:40px}.template-image img{max-width:100%;height:auto;image-rendering:pixelated}.template-actions{display:flex;gap:0;padding:15px;justify-content:center;align-items:center}.template-icon{flex:0 0 auto;cursor:pointer;display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin:0 10px}.template-icon i{font-size:26px;color:var(--color-text-light);transition:all .2s}.template-icon:hover i{color:var(--color-primary);transform:scale(1.15)}.export-frame{position:absolute;border:2px solid var(--color-primary-dark);box-shadow:0 0 0 9999px var(--overlay-frame);pointer-events:none}.export-frame.active{pointer-events:all}.frame-handle{position:absolute;background:var(--color-primary-dark);border:2px solid var(--color-text-white);box-shadow:var(--shadow-frame)}.frame-handle:hover{background:var(--color-primary-darker)}.frame-handle-top{top:-4px;left:50%;transform:translate(-50%);width:40px;height:8px;cursor:ns-resize}.frame-handle-bottom{bottom:-4px;left:50%;transform:translate(-50%);width:40px;height:8px;cursor:ns-resize}.frame-handle-left{left:-4px;top:50%;transform:translateY(-50%);width:8px;height:40px;cursor:ew-resize}.frame-handle-right{right:-4px;top:50%;transform:translateY(-50%);width:8px;height:40px;cursor:ew-resize}.frame-handle-tl{top:-4px;left:-4px;width:12px;height:12px;cursor:nwse-resize}.frame-handle-tr{top:-4px;right:-4px;width:12px;height:12px;cursor:nesw-resize}.frame-handle-bl{bottom:-4px;left:-4px;width:12px;height:12px;cursor:nesw-resize}.frame-handle-br{bottom:-4px;right:-4px;width:12px;height:12px;cursor:nwse-resize}.frame-content{position:absolute;top:0;left:0;right:0;bottom:0;cursor:move}