*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#fff;min-height:100vh;padding:0;color:#333}.container{max-width:2800px;margin:0 auto;background:#fff;border:4px solid #000000;border-radius:0;box-shadow:0 0 #0000004d;overflow:hidden}header{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb,#f5576c,#ffc371);color:#fff;padding:30px;position:relative;overflow:hidden}header:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 2px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 2px);pointer-events:none}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.nav-bar{display:flex;gap:20px}.nav-btn{padding:10px 20px;border:2px solid #ffffff;background:transparent;color:#fff;border-radius:0;cursor:pointer;font-size:1em;font-weight:600;transition:all .3s}.nav-btn:hover,.nav-btn.active{background:#fff;color:#000}.header-title{text-align:left}header h1{font-size:3em;margin-bottom:0;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.language-switch{display:flex;gap:5px;background:transparent;border:2px solid #ffffff;border-radius:0;padding:4px}.lang-btn{padding:8px 16px;border:2px solid #ffffff;background:transparent;color:#fff;cursor:pointer;border-radius:0;font-size:14px;font-weight:500;transition:all .3s}.lang-btn:hover{background:#fff;color:#667eea}.lang-btn.active{background:#fff;color:#667eea;border:2px solid #ffffff}@media(max-width:768px){header{padding:5px}.header-content{flex-direction:column;gap:5px}.header-title{text-align:center}header h1{font-size:2em}.nav-bar{flex-wrap:wrap;justify-content:center;gap:5px}.nav-btn{padding:4px 8px;font-size:.9em}.language-switch{flex-wrap:wrap;justify-content:center}.lang-btn{padding:6px 12px;font-size:13px}}.upload-section{padding:40px}.crop-buttons{display:flex;gap:8px;margin-top:10px;justify-content:center;flex-wrap:wrap}.crop-btn{padding:8px 16px;font-size:14px;border-radius:6px;cursor:pointer;border:1px solid #ddd;background:#fff;color:#333;transition:all .2s ease}.crop-btn:hover{background:#f5f5f5;border-color:#666}.crop-btn.confirm{background:#4caf50;color:#fff;border-color:#4caf50}.crop-btn.confirm:hover{background:#45a049}.crop-btn.cancel{background:#f44336;color:#fff;border-color:#f44336}.crop-btn.cancel:hover{background:#da3229}.crop-btn.reset{background:#ff9800;color:#fff;border-color:#ff9800}.crop-btn.reset:hover{background:#e68900}.crop-overlay{position:absolute;inset:0;cursor:crosshair;z-index:10}.crop-box{position:absolute;border:2px dashed #007aff;background:#007aff1a;box-sizing:border-box;cursor:move}.crop-handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid #007aff;border-radius:50%;box-sizing:border-box}.crop-handle-nw{top:-7px;left:-7px;cursor:nw-resize}.crop-handle-ne{top:-7px;right:-7px;cursor:ne-resize}.crop-handle-sw{bottom:-7px;left:-7px;cursor:sw-resize}.crop-handle-se{bottom:-7px;right:-7px;cursor:se-resize}.crop-handle-n{top:-7px;left:50%;transform:translate(-50%);cursor:n-resize}.crop-handle-s{bottom:-7px;left:50%;transform:translate(-50%);cursor:s-resize}.crop-handle-w{top:50%;left:-7px;transform:translateY(-50%);cursor:w-resize}.crop-handle-e{top:50%;right:-7px;transform:translateY(-50%);cursor:e-resize}.showcase-section{padding:40px;text-align:center;min-height:200px;box-sizing:border-box}.showcase-title{font-size:28px;margin-bottom:10px;color:#000}.showcase-subtitle{font-size:14px;color:#666;margin-bottom:30px}.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;max-width:1200px;margin:0 auto}.showcase-card{background:#fff;border:2px solid #000000;border-radius:0;padding:16px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;text-align:center;min-height:260px;box-sizing:border-box}.showcase-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026;border-color:#667eea}.showcase-preview{width:100%;height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:#f8f9fa}.showcase-preview canvas{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;max-width:100%;max-height:100%}.showcase-name{font-size:16px;font-weight:600;margin-bottom:4px;color:#000}.showcase-info{font-size:12px;color:#555}.showcase-skeleton-card{cursor:default;pointer-events:none}.showcase-skeleton-preview,.showcase-skeleton-info{position:relative;overflow:hidden;background:#e9ecef}.showcase-skeleton-preview:before,.showcase-skeleton-info:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%);background-size:200% 100%;animation:showcase-skeleton-pulse 1.4s ease-in-out infinite;will-change:transform}@keyframes showcase-skeleton-pulse{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(max-width:768px){.showcase-title{font-size:22px}.showcase-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.showcase-preview{height:120px}}.upload-area{border:3px dashed #000000;border-radius:0;padding:60px 20px;text-align:center;cursor:pointer;transition:border-color .3s ease,background-color .3s ease,transform .3s ease;background:#fff}.upload-area:hover{border-color:#000;background:#f0f0f0}.upload-area.dragover{border-color:#764ba2;background:#e8ebff;transform:scale(1.01)}.upload-icon{font-size:4em;margin-bottom:16px}.upload-area p{font-size:1.2em;color:#555;margin-bottom:8px}.upload-hint{font-size:.9em;color:#555}.upload-areas{display:flex;gap:30px;max-width:1200px;margin:0 auto}.upload-areas .upload-area{flex:1;min-height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center}.blank-canvas-area{border-color:#667eea;background:linear-gradient(135deg,#fff,#f8f9ff)}.blank-canvas-area:hover{border-color:#667eea;background:linear-gradient(135deg,#f8f9ff,#e8ebff);transform:translateY(-2px);box-shadow:0 10px 30px #667eea26}.blank-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:10px}.blank-size-btn{padding:18px 10px;border:2px solid #ddd;background:#fff;border-radius:8px;cursor:pointer;font-size:1.1em;font-weight:600;color:#333;transition:all .2s}.blank-size-btn:hover{border-color:#667eea;background:#f8f9ff;color:#667eea;transform:translateY(-2px)}.blank-size-btn.active{border-color:#667eea;background:#667eea;color:#fff}.blank-custom-size{display:flex;gap:15px;align-items:flex-end}#strokeModal .modal-content{max-width:600px}#strokeModal label input[type=radio]{cursor:pointer}#strokeModal label:has(input[type=radio]:checked){border-color:#667eea!important;background:#f8f9ff!important}#strokeModal input[type=range]{height:8px;background:#eee;border-radius:4px;outline:none;-webkit-appearance:none}#strokeModal input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}#strokeModal input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:2px solid white}.floating-panel{position:fixed;top:120px;right:30px;width:300px;background:#fff;border:3px solid #000000;border-radius:0;box-shadow:6px 6px #000;z-index:500;user-select:none}.floating-panel:hover{box-shadow:8px 8px #000}.floating-panel-header{background:#000;color:#fff;padding:10px 14px;border-radius:0;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.95em;text-transform:uppercase;letter-spacing:.5px;cursor:move;border-bottom:3px solid #000000}.floating-panel-header:hover{background:#1a1a1a}.floating-panel-close{background:none;border:2px solid #ffffff;color:#fff;font-size:1.2em;font-weight:700;line-height:1;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:0}.floating-panel-close:hover{background:#fff;color:#000}.floating-panel-body{padding:14px 16px}.floating-panel .btn.btn-primary{background:#000;color:#fff;border:3px solid #000000;border-radius:0;font-weight:600}.floating-panel .btn.btn-primary:hover{background:#fff;color:#000}.floating-panel .btn.btn-secondary{background:#fff;color:#000;border:2px solid #000000;border-radius:0;font-weight:600}.floating-panel .btn.btn-secondary:hover{background:#f0f0f0}.floating-panel .btn.btn-secondary.color-pick-active{background:#000;color:#fff;border-color:#000}#strokePanel label{border:2px solid #000000!important;border-radius:0!important;padding:8px 12px!important;font-weight:500;transition:background .15s}#strokePanel label:has(input[type=radio]:checked){border-color:#000!important;background:#000!important;color:#fff!important}#strokePanel input[type=range]{height:4px;background:#000;border-radius:0;outline:none;-webkit-appearance:none}#strokePanel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:0;background:#000;cursor:pointer;border:2px solid #ffffff;outline:2px solid #000000}#colorRemovePanel .btn.btn-secondary.color-pick-active{background:#000;color:#fff;border-color:#000}.workspace{padding:10px}.mode-switch{display:flex;gap:10px;margin-bottom:20px;justify-content:center}.mode-btn{padding:10px 20px;border:2px solid #000;background:#fff;color:#000;border-radius:0;cursor:pointer;font-size:1em;font-weight:600;transition:all .3s}.mode-btn:hover,.mode-btn.active{background:#000;color:#fff}.pixel-mode-switch{display:flex;gap:10px;margin-bottom:15px;justify-content:center}.advanced-only{opacity:0;height:0;overflow:hidden;transition:opacity .3s ease,height .3s ease}.advanced-mode .advanced-only{opacity:1;height:auto}.preview-section{display:flex;gap:20px;margin-bottom:30px;background:#f8f9fa;border-radius:0;padding:5px;border:4px dashed #000000}.preview-left{flex:1}.preview-right{flex:0 0 420px}.controls-section{background:#fff;border-radius:12px;padding:5px;height:100%}.global-actions{display:flex;gap:15px;margin-top:20px;padding-top:25px;border-top:2px solid #e9ecef}.preview-panel{background:#f8f9fa;border-radius:12px;padding:5px}.preview-panel h3{margin-bottom:16px;color:#333;font-size:1.1em}.canvas-wrapper{position:relative;display:flex;justify-content:center;align-items:center;background:#e9ecef;border-radius:8px;min-height:200px;overflow:hidden}.perler-canvas-wrapper{max-height:none;overflow:auto;width:100%}canvas{display:block;image-rendering:pixelated}.perler-canvas-wrapper canvas{max-width:none;max-height:none}.size-info{margin-top:12px;text-align:center;color:#666;font-size:.9em}#pixelatedCanvas,#perlerCanvas{transition:width .2s ease,height .2s ease}.canvas-zoom-control{margin-top:15px;padding-top:15px;border-top:1px solid #e9ecef}.canvas-zoom-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600;color:#333;font-size:.95em}.canvas-zoom-control input[type=range]{width:100%;cursor:pointer}.controls{background:#f8f9fa;border-radius:12px;padding:25px}.control-group{margin-bottom:30px}.control-group{margin-bottom:20px}.control-group label{display:block;margin-bottom:8px;font-weight:600;color:#333;font-size:1em}.control-group input{width:100%;padding:12px;border:2px solid #000000;border-radius:0;font-size:1em}.flex-row{display:flex;gap:20px;align-items:flex-start}.flex-item{flex:1}.flex-item.checkbox-item{flex:0 0 auto;min-width:150px;display:flex;align-items:center}.flex-item.slider-item{flex:1}.flex-item.color-item,.flex-item.number-item{flex:0 0 auto;min-width:200px}.flex-item.slider-half{flex:1;min-width:200px}.flex-item.full-width{flex:1 1 100%}@media(max-width:768px){.flex-row{flex-direction:column;gap:5px}.flex-item.checkbox-item,.flex-item.color-item{flex:1;min-width:auto}}input[type=range]{width:100%;height:8px;border-radius:0;background:#fff;outline:none;-webkit-appearance:none;border:2px solid #000000}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:0;background:#000;cursor:pointer;border:2px solid #000000}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:0;background:#000;cursor:pointer;border:2px solid #000000}.size-inputs{display:flex;gap:20px}.size-inputs>div{flex:1}.size-inputs label{display:inline-block;margin-bottom:6px;font-weight:400}.size-inputs input[type=number]{width:120px;padding:8px 12px;border:2px solid #000000;border-radius:0;font-size:1em;margin-right:6px;transition:border-color .3s;background:#fff}.size-inputs input[type=number]:focus{outline:none;border-color:#000;background:#f0f0f0}.color-count-inputs{display:flex;align-items:center;gap:10px}.color-count-inputs input[type=range]{flex:1}.color-count-inputs input[type=number]{width:70px;padding:8px 10px;border:2px solid #000000;border-radius:0;font-size:1em;transition:border-color .3s;background:#fff}.color-count-inputs input[type=number]:focus{outline:none;border-color:#000;background:#f0f0f0}.preset-sizes{display:flex;gap:10px;flex-wrap:wrap}.preset-btn{padding:10px 20px;border:2px solid #000000;background:#fff;color:#000;border-radius:0;cursor:pointer;font-size:.95em;font-weight:500;transition:all .3s}.preset-btn:hover{background:#000;color:#fff}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:#000000}.action-buttons{display:flex;gap:15px;margin-top:30px;padding-top:25px;border-top:2px solid #e9ecef}.btn{flex:1;padding:14px 24px;border:2px solid #000000;border-radius:0;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s;background:#fff;color:#000}.btn-primary{background:#fff;color:#000;border:2px solid #000000}.btn-primary:hover{background:#000;color:#fff}.btn-secondary{background:#fff;color:#000;border-color:#000}.btn-secondary:hover{background:#f0f0f0;color:#000}.btn-secondary.color-pick-active{border-width:4px;border-style:double;border-color:#667eea;background:#667eea1a}.btn-danger{background:#fff;color:#dc3545;border-color:#dc3545}.btn-danger:hover{background:#dc3545;color:#fff;transform:translateY(0);box-shadow:0 0 #dc354566}select{padding:10px 15px;border:2px solid #000000;border-radius:0;font-size:1em;background:#fff;cursor:pointer;transition:border-color .3s;color:#000}select:focus{outline:none;border-color:#000;background:#f0f0f0}input[type=color]{width:60px;height:40px;border:2px solid #000000;border-radius:0;cursor:pointer;padding:2px;transition:border-color .3s}input[type=color]:hover{border-color:#000}input[type=color]:focus{outline:none;border-color:#000}.color-usage-item{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:6px;background:#fff;border-radius:6px;border:1px solid #e9ecef;transition:all .2s}.color-usage-item:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea26}.color-usage-item.selected{border-color:#667eea;background:#f0f2ff}.color-swatch{width:32px;height:32px;border-radius:6px;border:2px solid #ddd;flex-shrink:0}.color-info{flex:1;min-width:0}.color-count{font-weight:600;color:#333;font-size:.9em}.color-percentage{font-size:.8em;color:#555;margin-left:8px}.color-rgb{font-size:.75em;color:#666;font-family:monospace}.color-action-btn{padding:4px 8px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:.8em;color:#666;transition:all .2s;flex-shrink:0}.color-action-btn:hover{border-color:#667eea;color:#667eea}.color-action-btn.remove{border-color:#dc3545;color:#dc3545}.color-action-btn.remove:hover{background:#dc3545;color:#fff}.sort-buttons{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.sort-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:.85em;color:#666;transition:all .2s}.sort-btn:hover{border-color:#667eea;color:#667eea}.sort-btn.active{background:#667eea;border-color:#667eea;color:#fff}.edit-tools{display:flex;gap:8px;flex-wrap:wrap}.edit-tool-btn{padding:8px 16px;border:2px solid #ddd;background:#fff;border-radius:6px;cursor:pointer;font-size:.9em;color:#666;transition:all .2s;flex:1;min-width:60px}.edit-tool-btn:hover{border-color:#667eea;color:#667eea}.edit-tool-btn.active{background:#667eea;border-color:#667eea;color:#fff}.current-color-wrapper{display:flex;align-items:center;gap:12px}.current-color-wrapper input[type=color]{width:50px;height:40px}#currentColorValue{font-family:monospace;font-size:.95em;color:#666}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006;display:flex;justify-content:center;align-items:center}.modal-content{background:#fff;margin:15% auto;padding:40px;border:2px solid #000000;width:80%;max-width:700px;border-radius:0;box-shadow:0 0 #0000004d}.smart-optimize-modal .modal-content{max-width:1200px;width:88vw;max-height:65vh;margin:17.5vh auto;padding:0;display:flex;flex-direction:column;overflow:hidden}.form-group{margin-bottom:30px}.form-group label{display:block;margin-bottom:12px;font-weight:600;color:#000;font-size:1.5em}.form-group input{width:100%;padding:20px;border:2px solid #000000;border-radius:0;font-size:1.5em}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #e9ecef}.header-actions{display:flex;gap:8px;align-items:center}.smart-optimize-modal.fullscreen{background-color:#000000e6;display:flex;align-items:flex-start;justify-content:center}.smart-optimize-modal.fullscreen .modal-header{position:sticky;top:0;z-index:10;background-color:#f8f9fa;border-bottom:1px solid #e9ecef;box-shadow:0 2px 4px #0000001a}.smart-optimize-modal.fullscreen .modal-content{max-width:100vw;width:100vw;max-height:100vh;height:100vh;margin:0;border-radius:0;border:none;overflow:auto}.smart-optimize-modal.fullscreen .modal-header{background-color:#f8f9fa;border-bottom:1px solid #e9ecef}.smart-optimize-modal.fullscreen .modal-body{padding:15px}.smart-optimize-modal .modal-content{transition:all .3s ease}.modal-header h2{margin:0;font-size:1.5em;color:#000}.close-btn{background:none;border:none;font-size:2em;cursor:pointer;color:#666;transition:color .2s;line-height:1}.close-btn:hover{color:#333}.modal-body{padding:25px;overflow-y:auto;flex:1}.smart-optimize-modal .modal-body{padding:15px;overflow:hidden;display:flex;flex-direction:row;flex:1}.optimization-summary{background:#f8f9fa;border-radius:8px;padding:10px;margin-bottom:12px}.summary-item{display:flex;justify-content:space-between;margin-bottom:8px}.summary-item:last-child{margin-bottom:0}.summary-label{color:#666}.summary-value{font-weight:600;color:#333}.optimization-settings{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:12px;margin-bottom:12px}.optimization-settings .control-group{margin-bottom:12px}.optimization-settings .control-group:last-child{margin-bottom:0}.optimization-settings label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600;color:#333;font-size:.95em}.optimization-settings input[type=range]{width:100%;cursor:pointer}.suggestion-item.merge-suggestion{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-left:3px solid #667eea}.suggestions-list{max-height:700px;overflow-y:auto}.suggestion-item{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;background:#f8f9fa;border-radius:8px;border:2px solid transparent;transition:all .2s}.suggestion-item.accepted{border-color:#28a745;background:#fff}.suggestion-item.rejected{border-color:#dc3545;background:#fff}.color-swatch-small{width:32px;height:32px;border-radius:6px;border:2px solid #ddd;flex-shrink:0}.suggestion-info{flex:1;min-width:0}.suggestion-text{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.suggestion-text .arrow{color:#667eea;font-weight:700}.suggestion-beans{font-size:.85em;color:#555;margin-top:4px}.suggestion-actions{display:flex;gap:8px;flex-shrink:0}.suggestion-action-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:.85em;transition:all .2s}.suggestion-action-btn.accept{border-color:#28a745;color:#28a745}.suggestion-action-btn.accept:hover{background:#28a745;color:#fff}.suggestion-action-btn.reject{border-color:#dc3545;color:#dc3545}.suggestion-action-btn.reject:hover{background:#dc3545;color:#fff}.suggestion-action-btn.preview{border-color:#667eea;color:#667eea}.suggestion-action-btn.preview:hover{background:#667eea;color:#fff}.modal-footer{display:flex;gap:12px;padding:20px 25px;border-top:1px solid #e9ecef}.modal-footer .btn{flex:1;padding:14px 24px;font-size:1em}#perlerContent,#perlerChartArea,.perler-chart-wrapper{display:flex;flex-direction:column;width:100%}.perler-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 10px;width:100%}.perler-watermark{font-size:12px;color:#666;text-align:left}.perler-summary{font-weight:700;color:#333;text-align:right}.perler-chart-wrapper{display:flex;flex-direction:column;align-items:center}#colorLegendArea{display:flex;justify-content:center}#colorLegendArea.horizontal{flex-direction:row;justify-content:flex-start}#colorLegend{display:flex;justify-content:center}.timer-section{padding:40px}.modal-content.smart-optimize-modal{max-width:1600px;width:98vw}.smart-optimize-container{display:flex;gap:25px;align-items:flex-start}.optimization-preview{flex:0 0 450px;display:flex;flex-direction:column}.optimization-preview h3{margin:0 0 10px;font-size:1.1em;color:#333}.preview-canvas-wrapper{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:15px;display:flex;justify-content:center;align-items:center}#optimizationPreviewCanvas{max-width:100%;image-rendering:pixelated;border-radius:4px}.preview-canvas-wrapper-large{position:relative;background:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;padding:5px;display:flex;justify-content:center;align-items:center}.brush-cursor{position:absolute;pointer-events:none;border:2px solid rgba(0,123,255,.9);background:#007bff26;border-radius:3px;display:none;z-index:100;box-sizing:border-box;transition:border-color .1s ease,background-color .1s ease;box-shadow:0 0 4px #0000004d}.brush-cursor-brush{border-style:solid}.brush-cursor-eraser{border-style:dashed}.brush-cursor-razor{border-style:double}.brush-cursor-picker{border-style:solid}.brush-cursor-fill{border-style:dashed}.brush-cursor-invalid{border-style:dotted;opacity:.5}.smart-optimize-container .suggestions-list{flex:1;max-height:500px}@media(max-width:1024px){.smart-optimize-container{flex-direction:column}.optimization-preview{flex:none;width:100%}}.timer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #000000}.timer-header h2{font-size:2em;color:#000}.timers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.timer-card{border:2px solid #000000;border-radius:0;padding:20px;background:#fff;box-shadow:0 0 #0000004d}.timer-title{font-size:1.2em;font-weight:600;text-align:center;margin-bottom:15px;color:#000}.timer-display{font-size:3em;font-weight:700;text-align:center;margin-bottom:20px;color:#000;font-family:monospace}.timer-settings{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.timer-settings input{width:60px;padding:8px;border:2px solid #000000;border-radius:0;font-size:1em;font-weight:600;text-align:center}.timer-controls{display:flex;gap:10px;justify-content:center}.timer-btn.btn-danger{background:red;color:#fff}.timer-btn.btn-danger:hover{background:#c00;color:#fff}.timer-btn{padding:10px 20px;border:2px solid #000000;background:#fff;color:#000;border-radius:0;cursor:pointer;font-size:1em;font-weight:600;transition:all .3s}.timer-btn:hover,.timer-btn.active{background:#000;color:#fff}#colorLegend.horizontal{justify-content:flex-start}#colorLegend canvas{max-width:none}@media(max-width:768px){.perler-layout-horizontal{flex-direction:column}}@media(max-width:1400px){.preview-section{flex-direction:column}.preview-right{flex:none;width:100%}}.snapshot-float-btn{position:fixed;left:20px;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:0;background:#fff;color:#000;font-size:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px #0003;border:2px solid #000000;transition:all .2s ease;z-index:9999}.snapshot-float-btn:hover{transform:translateY(-50%) scale(1.1);background:#000;color:#fff;box-shadow:0 4px 15px #0000004d}.snapshot-float-btn:active{transform:translateY(-50%) scale(1.05)}.snapshot-panel{position:fixed;left:90px;top:50%;transform:translateY(-50%);width:420px;max-height:80vh;background:#fff;border-radius:0;box-shadow:0 5px 20px #0003;display:none;flex-direction:column;z-index:9998;overflow:hidden;border:2px solid #000000}.snapshot-panel.show{display:flex}.snapshot-panel-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom:2px solid #000000}.snapshot-panel-header h3{margin:0;font-size:1.1em;font-weight:600}.snapshot-panel-header .close-btn{background:#fff3;border:2px solid rgba(255,255,255,.3);color:#fff;font-size:20px;cursor:pointer;width:30px;height:30px;border-radius:0;display:flex;align-items:center;justify-content:center;transition:all .2s}.snapshot-panel-header .close-btn:hover{background:#fff6}.snapshot-panel-content{padding:15px;overflow-y:auto;flex:1;max-height:calc(80vh - 65px)}.snapshot-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 15px;margin-bottom:12px;background:#f8f9fa;border-radius:0;border:2px solid #e0e0e0;cursor:pointer;transition:all .2s}.snapshot-item:hover{background:#fff;border-color:#667eea;box-shadow:0 2px 5px #667eea1a}.snapshot-item-info{flex:1;margin-right:15px}.snapshot-item-title{font-weight:600;color:#000;margin-bottom:5px;font-size:.95em}.snapshot-item-meta{font-size:.82em;color:#666;line-height:1.5}.snapshot-item-meta .change-positive{color:#27ae60;font-weight:500}.snapshot-item-meta .change-negative{color:#e74c3c;font-weight:500}.snapshot-item-desc{margin-top:5px;font-size:.8em;color:#555888}.snapshot-item-actions{display:flex;gap:8px;flex-shrink:0}.snapshot-item-actions .btn{padding:6px 12px;font-size:.8em;border-radius:0}.smart-optimize-three-column{display:flex;gap:10px;flex:1;min-height:0}.left-panel{flex:2;min-width:0;overflow-y:auto;padding-right:8px;border-right:1px solid #e9ecef;display:flex;flex-direction:column}.center-panel{flex:5;min-width:0;display:flex;flex-direction:column;overflow:hidden}.right-panel{flex:3;min-width:0;overflow-y:auto;padding-left:8px;border-left:1px solid #e9ecef;display:flex;flex-direction:column}.optimization-preview-large{flex:1;display:flex;flex-direction:column;height:100%}.optimization-preview-large h3{margin:0 0 10px;font-size:1.1em;color:#333}.preview-canvas-wrapper-large{flex:1;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:10px;display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:450px;max-height:680px}.preview-canvas-wrapper-large canvas{max-width:100%;max-height:100%;image-rendering:pixelated;cursor:crosshair;border-radius:4px}.brush-tool-panel{background:#f0f8ff;border:1px solid #b3d9ff;border-radius:8px;padding:10px;margin-top:12px}.brush-tool-panel h3{margin:0 0 10px;font-size:.95em;color:#333}.brush-mode-buttons{display:flex;gap:5px}.brush-mode-buttons .btn.active{background:#667eea;border-color:#667eea}.brush-tool-panel .control-group{margin-bottom:12px}.brush-tool-panel .control-group:last-child{margin-bottom:0}@media(max-width:1200px){.smart-optimize-three-column{flex-direction:column;height:auto;max-height:80vh}.left-panel,.right-panel{flex:none;min-width:auto;border:none;padding:0}.center-panel{min-height:400px}}@media(max-width:768px){.size-inputs,.action-buttons,.global-actions{flex-direction:column}}