*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;color:#333;min-height:100vh}#root{min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:20px}.app-header{text-align:center;margin-bottom:20px}.app-header h1{font-size:1.6rem;color:#2c3e50}.app-logo{height:1.4em;vertical-align:-.35em;margin-right:8px}.subtitle{color:#7f8c8d;font-size:.9rem;margin-top:6px}.toolbar{grid-area:toolbar;display:flex;align-items:center;gap:16px;padding:12px 16px;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.pick-hint{font-size:.85rem;color:#e67e22}.btn{padding:8px 16px;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:opacity .2s}.btn:hover{opacity:.85}.btn-primary{background:#3498db;color:#fff}.btn-confirm{background:#27ae60;color:#fff}.btn-secondary{background:#ecf0f1;color:#2c3e50;border:1px solid #bdc3c7}.app-layout{display:grid;gap:16px;grid-template-columns:1fr 280px;grid-template-areas:"toolbar toolbar" "canvas picker" "canvas settings" "canvas panel";align-items:start}.canvas-area{grid-area:canvas;min-width:0;background:#fff;border-radius:8px;padding:12px;box-shadow:0 1px 3px #0000001a;position:relative}.upload-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#ffffffd9;border-radius:8px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.upload-progress{display:flex;flex-direction:column;align-items:center;gap:14px;background:#fff;border-radius:8px;padding:24px 36px;box-shadow:0 2px 12px #00000026}.upload-progress-title{font-size:.85rem;color:#2c3e50}.loading-dots{display:inline-flex;align-items:flex-end;gap:8px;height:18px}.loading-dots .dot{width:9px;height:9px;border-radius:50%;background:#3498db;animation:dot-bounce .9s ease-in-out infinite}.loading-dots .dot:nth-child(2){animation-delay:.15s}.loading-dots .dot:nth-child(3){animation-delay:.3s}@keyframes dot-bounce{0%,to{transform:translateY(0);opacity:.35}50%{transform:translateY(-8px);opacity:1}}.canvas-container{display:flex;flex-direction:column;gap:8px}.zoom-bar{display:flex;align-items:center;gap:8px}.active-color-badge{margin-left:auto;display:flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:12px}.active-color-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex-shrink:0}.active-color-code{font-family:monospace;font-size:.8rem;font-weight:600;color:#2c3e50;white-space:nowrap}.btn-zoom{padding:4px 10px;border:1px solid #d0d0d0;border-radius:4px;background:#fff;font-size:.8rem;cursor:pointer;transition:background .15s}.btn-zoom:hover{background:#e8f4fd;border-color:#3498db}.zoom-level{font-family:monospace;font-size:.8rem;color:#555;min-width:44px;text-align:center}.canvas-viewport{overflow:auto;max-height:68vh;border:1px solid #ddd;border-radius:4px;background:#fafafa}.canvas-viewport canvas{display:block;height:auto}.canvas-viewport canvas.picking{cursor:crosshair}.canvas-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;color:#95a5a6;border:2px dashed #bdc3c7;border-radius:8px}.canvas-placeholder--clickable{cursor:pointer;transition:border-color .2s,background .2s}.canvas-placeholder--clickable:hover{border-color:#3498db;background:#f0f8ff}.canvas-placeholder .hint{font-size:.8rem;margin-top:8px}.perler-picker{grid-area:picker;align-self:start;background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a;border:2px solid #3498db}.perler-picker h3{font-size:.95rem;margin-bottom:12px;color:#2c3e50}.picker-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.picker-row label{font-size:.85rem;color:#555;min-width:44px}.dropdown{position:relative;flex:1;min-width:0}.dropdown-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px;border:1px solid #ccc;border-radius:6px;font-size:.9rem;background:#fff;color:#2c3e50;cursor:pointer;transition:border-color .15s}.dropdown-trigger:hover:not(:disabled){border-color:#3498db}.dropdown-trigger:disabled{background:#f0f0f0;cursor:not-allowed}.dropdown-arrow{font-size:.7rem;color:#888;transition:transform .2s}.dropdown--open .dropdown-arrow{transform:rotate(180deg)}.dropdown-list{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:220px;overflow-y:auto;margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:100;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s}.dropdown--open .dropdown-list{opacity:1;transform:translateY(0);visibility:visible}.dropdown-item{padding:7px 10px;font-size:.9rem;color:#2c3e50;cursor:pointer;transition:background .1s}.dropdown-item:hover{background:#ebf5fb}.dropdown-item.active{background:#d6eaf8;font-weight:600;color:#2980b9}.picker-preview{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px;background:#f8f9fa;border-radius:6px}.picker-info{display:flex;flex-direction:column;gap:2px}.picker-code{font-weight:600;font-size:.9rem;color:#2c3e50}.picker-rgb{font-family:monospace;font-size:.8rem;color:#7f8c8d}.perler-picker .btn{width:100%}.perler-picker .btn:disabled{opacity:.5;cursor:not-allowed}.color-swatch{width:40px;height:40px;border-radius:6px;border:1px solid #ccc;display:inline-block;flex-shrink:0}.match-range{margin:12px 0;padding:10px;background:#f8f9fa;border-radius:6px}.match-range h3{font-size:.85rem;margin-bottom:10px;color:#2c3e50}.range-row{display:flex;align-items:center;gap:8px}.range-end{font-size:.85rem;color:#555;flex-shrink:0}.range-slider{flex:1;min-width:0;cursor:pointer;accent-color:#3498db;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;background:#fff;border:1px solid #ddd;outline:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#3498db;border:2px solid #fff;box-shadow:0 1px 3px #0000004d;cursor:pointer}.range-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#3498db;border:2px solid #fff;box-shadow:0 1px 3px #0000004d;cursor:pointer}.range-slider::-moz-range-track{height:6px;border-radius:3px;background:#fff;border:1px solid #ddd}.range-slider:disabled{cursor:not-allowed;opacity:.5}.range-hint{font-size:.75rem;color:#999;margin-top:8px;line-height:1.4}.step-btn{width:32px;height:26px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ccc;border-radius:6px;background:#fff;color:#2c3e50;font-size:1rem;font-weight:600;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s,background .15s}.step-btn:hover:not(:disabled){border-color:#3498db;background:#ebf5fb}.step-btn:active:not(:disabled){background:#d6eaf8}.step-btn:disabled{opacity:.4;cursor:not-allowed}.step-btn--sm{width:28px;height:28px;flex-shrink:0}.color-swatch.small{width:24px;height:24px;border-radius:4px}.render-settings{grid-area:settings;align-self:start;background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a}.render-settings h3{font-size:.95rem;margin-bottom:12px;color:#2c3e50}.render-settings-item{padding:10px;background:#f8f9fa;border-radius:6px}.render-settings-label{display:block;font-size:.85rem;font-weight:600;color:#2c3e50;margin-bottom:10px}.outline-settings{margin-top:10px}.outline-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}.outline-toggle input[type=checkbox]{width:16px;height:16px;accent-color:#3498db;cursor:pointer}.outline-options{margin-top:10px;padding-top:10px;border-top:1px solid #eee}.outline-options-disabled{opacity:.45;pointer-events:none}.outline-width-row{display:flex;align-items:center;gap:8px}.outline-option-label{font-size:.85rem;color:#555;flex-shrink:0}.outline-width-input{width:56px;padding:5px 6px;border:1px solid #ccc;border-radius:6px;font-size:.9rem;text-align:center;background:#fff;color:#2c3e50}.outline-width-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db26}.outline-width-input:disabled{background:#f0f0f0;cursor:not-allowed}.outline-width-input::-webkit-inner-spin-button,.outline-width-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.outline-width-input{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.outline-width-unit{font-size:.85rem;color:#555}.outline-color-row{margin-top:10px}.outline-color-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.outline-color-btn{display:flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}.outline-color-btn:hover{border-color:#3498db}.outline-color-btn.active{border-color:#3498db;box-shadow:0 0 0 2px #3498db33;background:#ebf5fb}.outline-color-btn:disabled{cursor:not-allowed;opacity:.5}.outline-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.2);flex-shrink:0}.outline-color-name{font-size:.78rem;color:#2c3e50;white-space:nowrap}.control-panel{grid-area:panel;background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a}.control-panel h3{font-size:.95rem;margin-bottom:10px;color:#2c3e50}.status{padding:8px 12px;border-radius:6px;font-size:.85rem;margin-bottom:10px}.status.processing{background:#fef9e7;color:#f39c12}.status.done{background:#eafaf1;color:#27ae60}.empty-hint{font-size:.8rem;color:#95a5a6;margin-bottom:10px}.color-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:300px;overflow-y:auto}.color-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 34px 8px 10px;border:1px solid #e0e0e0;border-radius:6px;background:#fafafa;cursor:pointer;transition:border-color .2s,background .2s}.color-item-wrap{position:relative}.color-delete{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#95a5a6;border-radius:4px;cursor:pointer;font-size:.8rem;line-height:1;transition:background .2s,color .2s}.color-delete:hover{background:#fdecea;color:#e74c3c}.color-item:hover{border-color:#3498db}.color-item.active{border-color:#3498db;background:#ebf5fb}.color-label{display:flex;flex-direction:column;font-size:.85rem;text-align:left}.color-hex{font-family:monospace;font-size:.75rem;color:#7f8c8d}.original-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}.app-footer{margin-top:32px;padding:16px 0;text-align:center;border-top:1px solid #eee}.app-footer p{margin:4px 0;font-size:.78rem;color:#95a5a6;line-height:1.5}@media(max-width:768px){.app-layout{grid-template-columns:1fr;grid-template-areas:"toolbar" "picker" "settings" "canvas" "panel"}}