:root{--bg: #FDFBF0;--yellow: #F5CD47;--orange: #EF8225;--amber: #9A4A00;--gold: #F4CD44;--peach: #F6C687;--blue: #3D547A;--sky: #6BBFEA;--coral: #E8685A;--pink: #F4A7B9;--cream: #FFF9E6;--white: #FFFFFF;--ink: #3D3D3D;--muted: #8A8578;--radius-lg: 32px;--radius-md: 20px;--stroke: 3px solid #3D547A;--stroke-light: 2px solid rgba(61, 84, 122, .18);--shadow: 0 10px 30px rgba(61, 84, 122, .12);--cell: 13px;--font: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);font-family:var(--font);color:var(--ink);min-height:100vh;background-image:radial-gradient(circle at 8% 12%,rgba(247,215,82,.18) 0 6px,transparent 7px),radial-gradient(circle at 92% 20%,rgba(107,191,234,.16) 0 5px,transparent 6px),radial-gradient(circle at 85% 88%,rgba(226,136,62,.14) 0 6px,transparent 7px)}.topbar{display:flex;align-items:center;gap:14px;padding:18px 32px;max-width:1280px;margin:24px auto 0}.topbar .logo{width:46px;height:46px;flex-shrink:0}.topbar .logo img{width:100%;height:100%;display:block}.topbar h1{font-size:26px;font-weight:900;color:var(--blue)}.topbar .sub{font-size:13px;color:var(--muted)}.layout{display:grid;grid-template-columns:300px 1fr;gap:24px;max-width:1280px;margin:20px auto 48px;padding:0 32px;align-items:start}.left{display:flex;flex-direction:column;gap:12px}.card{background:var(--white);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px}.card-title{font-size:15px;font-weight:800;color:var(--blue);margin-bottom:14px}.btn-upload,.btn-preview{font-family:inherit;font-size:14px;font-weight:800;padding:12px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn-preview[hidden]{display:none}.btn-icon{display:inline-flex;width:18px;height:18px;flex-shrink:0}.btn-icon svg{width:100%;height:100%;display:block}#btn-redo .btn-icon{transform:scaleX(-1)}#btn-upload .btn-icon,#btn-preview .btn-icon{width:22px;height:22px}.btn-remove-bg .btn-icon{width:24px;height:24px}.btn-confirm .btn-icon{width:29px;height:29px}.current-palette-label .btn-icon{width:26px;height:26px}.btn-upload{background:var(--gold);color:var(--amber);border:none}.btn-preview{background:var(--orange);color:#fff;border:none}.panel{background:var(--white);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:14px}.main{background:var(--white);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px;min-width:0}.main-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}.export-group{margin-left:auto;display:flex;align-items:center;gap:8px}.toolbar{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.tool-btn{font-family:inherit;font-size:14px;font-weight:800;width:52px;height:52px;padding:0;border-radius:50%;cursor:pointer;background:var(--peach);color:var(--amber);border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}#btn-brush{background:var(--gold)}.tool-btn.active{background:var(--orange);color:#fff}.tool-btn:disabled{opacity:.4;cursor:default}.size-selector,.color-selector,.engine-selector{display:flex;align-items:center;gap:4px}.engine-selector{margin-left:auto}.size-label{font-size:14px;font-weight:800;color:var(--amber)}.size-btn,.engine-btn,.color-btn{font-family:inherit;font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;cursor:pointer;background:var(--peach);color:var(--amber);border:none}.engine-btn{font-size:14px;padding:6px 14px}.size-btn.active,.engine-btn.active,.color-btn.active{background:var(--orange);color:#fff}.engine-btn:disabled{opacity:.5;cursor:default}.color-custom-input{font-family:inherit;font-size:12px;font-weight:800;width:52px;padding:3px 6px;border-radius:999px;border:2px solid var(--orange);color:var(--ink);text-align:center;background:var(--white)}.color-custom-input:focus{outline:none}.btn-export{font-family:inherit;font-size:14px;font-weight:800;padding:6px 14px;border-radius:999px;cursor:pointer;background:var(--gold);color:var(--amber);border:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn-export-watermark{background:var(--orange);color:#fff}.spinner{display:none;width:32px;height:32px;border:4px solid var(--yellow);border-top-color:var(--orange);border-radius:50%;margin:0 auto 12px;animation:spin 1s linear infinite}.spinner.show{display:block}@keyframes spin{to{transform:rotate(360deg)}}.grid-wrap{width:100%;aspect-ratio:1 / 1;position:relative;overflow:hidden;background:var(--cream);border-radius:var(--radius-md);border:none;touch-action:none;cursor:grab}.grid-wrap.dragging{cursor:grabbing}.grid{display:grid;grid-template-columns:repeat(52,var(--cell));grid-template-rows:repeat(52,var(--cell));gap:1px;background:#e8e0cf;padding:16px;border-radius:6px;width:max-content;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.cell{width:var(--cell);height:var(--cell);border-radius:2px;display:grid;place-items:center;font-size:calc(var(--cell) * .42);font-weight:700;line-height:1;color:#ffffffeb;text-shadow:0 1px 1px rgba(0,0,0,.25);-webkit-user-select:none;user-select:none}.axis-num{position:absolute;transform:translate(-50%,-50%);font-size:clamp(5px,calc(var(--cell) * .5),9px);font-weight:400;color:var(--muted);pointer-events:none;-webkit-user-select:none;user-select:none;z-index:3}.grid.painting .cell{cursor:crosshair}.legend{display:flex;flex-wrap:wrap;gap:8px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}.legend-item:hover{outline:2px solid var(--blue);border-radius:6px}.legend-item.highlight{outline:2px solid var(--orange);border-radius:6px}.legend-swatch{width:18px;height:18px;border-radius:6px;border:2px solid rgba(61,84,122,.35)}.legend-item .code{font-weight:800;color:var(--blue)}.legend-item .count{font-weight:600;color:#8a8a8a}.palette{max-height:390px;overflow-y:auto}.palette-group{margin-bottom:8px}.palette-label{font-size:12px;font-weight:800;color:var(--blue);margin-bottom:4px}.palette-swatches{display:flex;flex-wrap:wrap;gap:4px}.palette-swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(61,84,122,.25);cursor:pointer;padding:0;display:grid;place-items:center;font-size:8px;font-weight:700;line-height:1;color:#ffffffeb;text-shadow:0 1px 1px rgba(0,0,0,.25)}.palette-swatch:hover{outline:2px solid var(--blue)}.current-palette{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:14px;border-top:none}.palette-head{display:flex;align-items:center;gap:12px}.current-palette-label{font-size:14px;font-weight:800;color:var(--orange);flex-shrink:0;display:inline-flex;align-items:center;gap:6px}.preview-overlay{position:absolute;top:12px;right:12px;width:180px;background:var(--white);border:none;border-radius:12px;box-shadow:var(--shadow);overflow:visible;z-index:10}.preview-overlay.hidden{display:none}.preview-overlay img{display:block;width:100%;height:auto;border-radius:10px}.preview-close{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:none;background:var(--white);color:var(--amber);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.preview-close .btn-icon{width:14px;height:14px}.palette.highlight{outline:3px solid var(--orange);border-radius:8px}.palette-popup{position:fixed;z-index:60;width:340px;max-width:92vw;background:var(--white);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow);padding:14px}.palette-popup.hidden{display:none}.palette-popup-title{font-size:13px;font-weight:800;color:var(--amber);margin-bottom:10px}.palette-popup .palette{max-height:56vh}.crop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#3d547a73;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.crop-overlay.hidden{display:none}.crop-dialog{background:var(--white);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow);width:520px;max-width:92vw;padding:22px}.crop-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}.crop-title{font-size:17px;font-weight:900;color:var(--blue)}.crop-hint{font-size:12px;color:var(--muted)}.crop-stage{position:relative;background:#e8e0cf;border-radius:var(--radius-md);height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.crop-image{position:relative;transform-origin:center center;background-size:100% 100%;background-repeat:no-repeat;flex:none;touch-action:none}.crop-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2.5px solid var(--yellow);box-shadow:0 0 0 9999px #3d547a8c;cursor:move;border-radius:4px;z-index:5;pointer-events:none}.crop-box .gl{position:absolute;background:#ffffff8c}.crop-box .gl.v1{left:33.33%;top:0;width:1px;height:100%}.crop-box .gl.v2{left:66.66%;top:0;width:1px;height:100%}.crop-box .gl.h1{top:33.33%;left:0;height:1px;width:100%}.crop-box .gl.h2{top:66.66%;left:0;height:1px;width:100%}.crop-actions{display:flex;align-items:center;gap:12px;margin-top:18px}.crop-actions button{font-family:inherit;font-size:14px;font-weight:800;padding:10px 22px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.btn-remove-bg{margin-right:auto;background:repeating-linear-gradient(-45deg,#f4f4f4 0,#f4f4f4 5px,#e8e8e8 5px,#e8e8e8 10px);color:var(--amber);border:none;text-shadow:0 1px 0 rgba(255,255,255,.7)}.btn-cancel{background:var(--yellow);color:var(--amber);border:none}.btn-confirm{background:var(--orange);color:#fff;border:none}.bg-fix-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#3d547a73;display:flex;align-items:center;justify-content:center;z-index:200;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.bg-fix-overlay.hidden{display:none}.bg-fix-dialog{background:var(--white);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow);width:560px;max-width:92vw;padding:22px}.bg-fix-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}.btn-fix-mode{font-family:inherit;font-size:13px;font-weight:800;padding:8px 18px;border-radius:999px;cursor:pointer;background:var(--yellow);color:var(--amber);border:none}.btn-fix-mode.active{background:var(--orange);color:#fff}.bg-fix-size{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:700}.bg-fix-size input[type=range]{width:120px;accent-color:var(--orange)}.bg-fix-stage{position:relative;background:#e8e0cf;border-radius:var(--radius-md);height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}#bg-fix-canvas{touch-action:none;border-radius:4px;box-shadow:0 2px 8px #3d547a33}.bg-fix-actions{display:flex;align-items:center;gap:12px;margin-top:18px}.bg-fix-actions button{font-family:inherit;font-size:14px;font-weight:800;padding:10px 22px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.btn-fix-undo{background:var(--yellow);color:var(--amber);border:none}.btn-fix-undo:disabled{opacity:.4;cursor:default}.btn-fix-clear{background:var(--yellow);color:var(--amber);border:none}.btn-fix-cancel{margin-left:auto;background:var(--yellow);color:var(--amber);border:none}.btn-fix-done{background:var(--orange);color:#fff;border:none}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background:var(--orange);color:#fff;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:200}.toast.show{opacity:1}.bg-loading{position:fixed;top:0;right:0;bottom:0;left:0;background:#3d547a80;display:flex;align-items:center;justify-content:center;z-index:300;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.bg-loading.hidden{display:none}.bg-loading-box{background:var(--white);border:none;border-radius:var(--radius-lg);padding:32px 40px;text-align:center;min-width:260px;box-shadow:var(--shadow)}.bg-loading-text{font-size:16px;font-weight:900;color:var(--blue);margin-top:16px}.bg-loading-sub{font-size:12px;color:var(--muted);margin-top:6px}.bg-loading-bar{width:100%;height:8px;background:#eee;border-radius:999px;margin-top:16px;overflow:hidden}.bg-loading-bar-fill{height:100%;width:0%;background:var(--yellow);border-radius:999px;transition:width .2s}body.picking,body.picking *{cursor:crosshair!important}@media (max-width: 768px){.topbar{padding:14px 16px;margin-top:12px}.topbar h1{font-size:20px}.layout{grid-template-columns:1fr;gap:16px;padding:0 12px;margin:12px auto 40px}.left{order:1}.main{order:2;padding:16px}.crop-dialog{width:100%}.crop-stage{height:320px}.bg-fix-dialog{width:100%}.bg-fix-stage{height:320px}.preview-overlay{width:108px}.main-head,.size-selector{flex-wrap:wrap}.engine-selector{flex-basis:100%;margin-left:0}.size-btn{padding:3px 6px;font-size:11px}.palette-head{flex-wrap:wrap}.export-group{flex-basis:100%;margin-left:0}.crop-actions{gap:8px}.crop-actions button{padding:8px 12px;font-size:12px;gap:4px}.crop-actions .btn-icon{width:14px;height:14px}.bg-fix-actions{gap:8px}.bg-fix-actions button{padding:8px 12px;font-size:12px;gap:4px}.bg-fix-actions .btn-icon{width:14px;height:14px}.bg-fix-toolbar{flex-wrap:wrap;gap:8px}.btn-fix-mode{padding:6px 14px;font-size:12px}.bg-fix-size input[type=range]{width:90px}.tool-btn{width:57px;height:57px}.toolbar{gap:17px}.palette{max-height:115px}}