:root{--bg: #f0ebe3;--surface: #fff;--surface2: #f7f5f0;--border: #e0d8cc;--text: #2d2a24;--text2: #7a7265;--accent: #d4906e;--radius: 16px;--shadow: 0 4px 24px rgba(0,0,0,.06);--font: "Segoe UI", system-ui, -apple-system, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}header{background:var(--surface);border-bottom:1px solid var(--border);padding:18px 32px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}header{gap:10px}.header-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0}header h1{font-size:24px;font-weight:700;background:linear-gradient(135deg,#d4906e,#b8735a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:13px;color:var(--text2);margin-left:auto}.container{max-width:1280px;margin:0 auto;padding:28px 24px;flex:1;width:100%}.upload-zone{background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius);padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s}.upload-zone:hover,.drag-over{border-color:var(--accent);background:#fcf6f0}.upload-zone.has-image{padding:0;border:none;background:none;cursor:default}.upload-icon{font-size:48px;margin-bottom:12px;opacity:.5}.upload-text{font-size:16px;color:var(--text2)}.upload-hint{font-size:13px;color:var(--text2);margin-top:6px;opacity:.7}.loading,.error{text-align:center;padding:20px;font-size:14px}.error{color:#e74c3c}.main-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;margin-top:28px}@media(max-width:860px){.main-layout{grid-template-columns:1fr}header{padding:14px 18px}header h1{font-size:20px}.container{padding:16px}}.preview-panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0}.toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}.toolbar label{font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap}.size-input{width:56px;padding:5px 8px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface2);color:var(--text);outline:none;text-align:center}.size-input:focus{border-color:var(--accent)}.toolbar select{padding:5px 8px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface2);color:var(--text);outline:none}.toolbar select:focus{border-color:var(--accent)}.toolbar-right{margin-left:auto;display:flex;gap:10px;align-items:center}.switch-label{display:flex;align-items:center;gap:4px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:13px}.switch{position:relative;display:inline-block;width:34px;height:19px;cursor:pointer}.switch input{position:absolute;opacity:0;width:100%;height:100%;z-index:2;cursor:pointer;margin:0}.switch .slider{position:absolute;top:0;right:0;bottom:0;left:0;background:#ccc;border-radius:9.5px;transition:.2s;pointer-events:none}.switch .slider:before{content:"";position:absolute;width:15px;height:15px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+.slider{background:var(--accent)}.switch input:checked+.slider:before{transform:translate(15px)}.canvas-wrap{padding:16px;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;background:repeating-conic-gradient(#f3f0eb,#f3f0eb 25%,#e8e4dd 0%,#e8e4dd 50%) 0 0/20px 20px;overflow:auto;position:relative}.canvas-wrap canvas{image-rendering:pixelated;image-rendering:crisp-edges;outline:1px solid rgba(0,0,0,.08);box-shadow:0 2px 12px #00000014;display:block}.side-panel{display:flex;flex-direction:column;gap:16px}.side-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.side-card h3{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px;letter-spacing:.5px}.stat-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid var(--border)}.stat-row:last-child{border-bottom:none}.stat-label{color:var(--text2)}.stat-value{font-weight:600}.color-legend{display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto}.color-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:12px}.color-item:hover{background:var(--surface2)}.color-swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.color-num{width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.color-name{flex:1}.color-count{font-weight:600;color:var(--accent);min-width:28px;text-align:right}.legend-empty{font-size:13px;color:var(--text2);text-align:center;padding:24px 0}.my-color-actions{display:flex;gap:6px;margin-bottom:6px;align-items:center}.my-color-count{font-size:11px;color:var(--text2);margin-left:auto}.my-color-list{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}.my-color-item{display:flex;align-items:center;gap:6px;padding:2px 4px;border-radius:4px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.my-color-item:hover{background:var(--surface2)}.my-color-item input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px;cursor:pointer;flex-shrink:0}.my-color-item.disabled{opacity:.45}.color-del{cursor:pointer;font-size:10px;color:var(--text2);padding:2px;border-radius:3px;line-height:1}.color-del:hover{color:#e74c3c;background:#e74c3c1a}.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn:hover{background:#e8e4dd}.btn-sm{padding:3px 8px;font-size:12px}.btn-icon{padding:5px 8px;font-size:14px}.btn-icon.active,.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:#c47e5a}.export-dropdown{position:relative;display:inline-flex}.export-dropdown .btn-primary:first-child{border-radius:10px 0 0 10px}.dropdown-chevron{padding:7px 8px;border-radius:0 10px 10px 0;border-left:1px solid rgba(255,255,255,.3);font-size:10px;line-height:1}.dropdown-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0000001f;z-index:100;min-width:200px;overflow:hidden}.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;background:none;font-size:13px;color:var(--text);cursor:pointer;text-align:left;transition:background .1s}.dropdown-item:hover{background:var(--surface2)}.dropdown-item+.dropdown-item{border-top:1px solid var(--border)}.dropdown-label{flex:1}.dropdown-info{font-size:11px;color:var(--text2);white-space:nowrap}.toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%);background:var(--text);color:#fff;padding:12px 24px;border-radius:12px;font-size:14px;z-index:999}.toast-enter-active,.toast-leave-active{transition:all .3s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%) translateY(20px)}.zoom-bar{display:flex;align-items:center;gap:6px;padding:6px 16px 10px;justify-content:center}.zoom-label{font-size:12px;color:var(--text2);min-width:44px;text-align:center}.btn-icon-zoom{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer;font-size:13px;transition:all .12s}.btn-icon-zoom:hover{background:#e8e4dd}