/* 方块背景为SVG rect；大面板使用原生SVG九宫格像素边框，不裁切外扩阴影。 */
:root{--ink:#49333d;--paper:#fffaf0;--pink:#f58ba9;--purple:#ded0ed;--muted:#84717f;--line:#dfd1da;--frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath d='M8 2h16v3h3v3h3v16h-3v3h-3v3H8v-3H5v-3H2V8h3V5h3z' fill='%23fffaf0' stroke='%2349333d' stroke-width='2'/%3E%3C/svg%3E")}
body.pixel-editor,body.desktop-workbench{color:var(--ink);background-color:#f8eef3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' shape-rendering='crispEdges'%3E%3Cg fill='%23f0d6e3'%3E%3Crect x='8' y='20' width='8' height='8'/%3E%3Crect x='16' y='28' width='8' height='8'/%3E%3Crect x='104' y='104' width='12' height='12'/%3E%3C/g%3E%3Cg fill='%23e8dff1'%3E%3Crect x='96' y='16' width='8' height='8'/%3E%3Crect x='88' y='24' width='8' height='8'/%3E%3Crect x='32' y='120' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");font-family:'Microsoft YaHei',system-ui,sans-serif}
.pixel-editor{padding:16px 22px 12px;gap:10px}.pixel-editor button,.pixel-editor input,.pixel-editor select{color:var(--ink);border:1px solid #b9a2b0;border-radius:5px;background:var(--paper)}
.pixel-editor button{min-height:40px;box-shadow:2px 2px 0 #dfd0e9;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;padding:8px 10px;touch-action:manipulation}
.pixel-editor button:hover{background:#fff0f3;border-color:#a87289}.pixel-editor button:focus-visible,.pixel-editor input:focus-visible{outline:3px solid #ac7fbe;outline-offset:3px}.pixel-editor button.primary{background:#f27d9f;border-color:var(--ink);color:#fff;box-shadow:0 3px 0 #bd4f72;font-weight:700}.pixel-editor [aria-pressed=true]{background:#ffdfeb;border-color:#e7789b;color:#923650}.pixel-icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle;pointer-events:none}
.pixel-editor>header{min-height:64px;background:var(--paper);padding:9px 16px;border:8px solid transparent;border-image:var(--frame) 10 fill / 8px;filter:drop-shadow(0 4px 0 #e6c5db);gap:20px}
.pixel-editor h1{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:25px;letter-spacing:2px}.pixel-editor h1>.pixel-icon{width:34px;height:34px;color:#ec789a}.pixel-editor h1 small{display:block;letter-spacing:1px;font-weight:400;font-size:10px;color:var(--muted)}
.pixel-nav{display:flex;gap:6px;flex:1}.pixel-nav button{border:0;box-shadow:none;background:transparent;white-space:nowrap;font-weight:600;padding:10px 14px}.pixel-nav .active{background:#f9d4df;border:1px solid var(--ink);box-shadow:0 3px 0 #e98ea9}.pixel-header-actions{display:flex;gap:12px;align-items:center}.pixel-editor #identity{font-size:11px;max-width:120px;color:var(--muted)}.pixel-editor .pixel-help{border:0;background:none;box-shadow:none;filter:none;min-width:36px;padding:4px}
.pixel-editor>.intro{display:none}.pixel-editor #workspace{grid-template-columns:150px minmax(0,1fr) 300px;gap:16px;padding:5px 0 8px}.pixel-editor .frame{border:8px solid transparent;border-image:var(--frame) 10 fill / 8px;background:transparent;filter:drop-shadow(3px 4px 0 #e5bfd4);border-radius:0}.pixel-editor #workspace>.frame{padding:14px}.pixel-editor #workspace>.pixel-rail{overflow:auto;grid-column:1;grid-row:1}.pixel-rail h3{font-size:12px;margin:8px 0 10px;letter-spacing:2px}.pixel-rail h3 span{color:#d9628a}.pixel-rail section+section{border-top:1px solid #e6d6de;margin-top:16px;padding-top:7px}.pixel-rail button{width:100%;justify-content:flex-start;margin-bottom:8px}.pixel-rail button .pixel-icon{width:20px;height:20px}
.pixel-editor #workspace>.drawing{grid-column:2;grid-row:1;padding:16px;background:#f4eff9}.pixel-editor .drawing>.heading{gap:10px;min-height:48px}.pixel-editor #title{font-size:21px}.pixel-editor #save-state{color:var(--muted);display:block;margin-top:4px}.pixel-editor #workspace>.colors{grid-column:3;grid-row:1}.pixel-editor .colors h2{font-size:19px;margin:4px 0 12px}.pixel-editor #stage{border:1px solid #d6c4de;background:linear-gradient(#d7cde655 1px,transparent 1px),linear-gradient(90deg,#d7cde655 1px,transparent 1px),#eee8f7;background-size:16px 16px;min-height:150px}.pixel-editor #empty{padding:20px;text-align:center;font-size:14px;color:var(--muted)}
.pixel-editor .tools{gap:7px;max-height:100px;overflow:auto;padding-bottom:4px}.pixel-editor .tools button{min-height:34px;padding:5px 9px;font-size:12px;flex:0 0 auto}.pixel-editor #view-controls{justify-content:center;gap:8px}.pixel-editor #position{color:var(--muted);font-size:11px}.pixel-editor #selected{border:1px solid #d9bdcc;border-radius:5px;background:#fff4f5;font-size:13px;justify-content:flex-start;gap:10px;margin:12px 0}.pixel-editor #selected i{margin:0}.pixel-editor .color span,.pixel-editor #selected i{border:1px solid #00000012;border-radius:0;width:30px;height:30px;box-shadow:none}.pixel-editor #palette,.pixel-editor #swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.pixel-editor .color{display:block;font-size:10px;padding:5px 2px;line-height:1.5;box-shadow:none;border-color:#eadce3;min-height:54px}.pixel-editor .color span{margin:0 auto 3px;width:27px;height:27px}.pixel-editor #palette{max-height:260px;overflow:auto;padding:3px}.pixel-editor #counts{padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:13px}.pixel-editor .pixel-start{width:100%;margin:10px 0 14px}.pixel-editor .colors label{font-size:12px;color:var(--muted)}
.pixel-editor #workspace>.library{display:none}.pixel-editor[data-panel=library] #workspace>.library{display:block;position:fixed;z-index:30;left:28px;top:110px;bottom:30px;width:340px;height:auto;box-shadow:none}.pixel-editor #projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pixel-editor .project{display:flex;flex-direction:column;gap:5px}.pixel-editor .project canvas{width:100%;height:auto;image-rendering:pixelated}.pixel-editor .project strong{font-size:12px}.pixel-editor .project small{font-size:10px}.pixel-sheet-close,.pixel-mobile-tools{display:none!important}.pixel-editor[data-panel=library] .library>.pixel-sheet-close{display:flex!important;margin-bottom:12px}
.pixel-editor dialog{color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:8px;max-width:94vw;max-height:90dvh;overflow:auto}.pixel-editor dialog::backdrop{background:#34283e66}.pixel-editor dialog p{max-width:540px;line-height:1.9}.pixel-editor #message:empty{display:none}.pixel-editor #message:not(:empty){background:#fff8e8;border-left:4px solid #ee91ae;font-size:12px;margin:0;padding:8px 12px}.pixel-editor #login{max-width:500px;width:100%;margin:30px auto}.pixel-editor #region-actions{font-size:12px}
@media(min-width:1600px){.pixel-editor{padding:22px 32px 18px}.pixel-editor #workspace{grid-template-columns:164px minmax(0,1fr) 324px;gap:22px}.pixel-editor #stage{margin:15px 0}.pixel-editor .tools{max-height:none}}
@media(max-width:1199px){.pixel-editor{padding:10px;gap:8px}.pixel-editor>header{gap:10px;padding:8px}.pixel-editor h1{font-size:20px}.pixel-editor h1 small{display:none}.pixel-nav button{padding:8px;font-size:12px}.pixel-editor #identity{display:none}.pixel-editor #workspace{grid-template-columns:110px minmax(0,1fr) 240px;gap:10px}.pixel-editor #workspace>.frame{padding:10px}.pixel-rail button{font-size:12px;padding:7px 5px;gap:6px}.pixel-editor #palette,.pixel-editor #swatches{grid-template-columns:repeat(5,minmax(0,1fr))}.pixel-editor #title{font-size:18px}}
@media(max-width:899px){.pixel-nav{gap:2px}.pixel-nav button{font-size:11px;padding:7px}.pixel-editor #workspace{grid-template-columns:90px minmax(0,1fr)}.pixel-editor #workspace>.colors{display:none}.pixel-editor[data-panel=colors] #workspace>.colors{display:block;position:fixed;right:12px;top:100px;bottom:85px;width:300px;z-index:25;height:auto}.pixel-editor[data-panel=colors] .colors>.pixel-sheet-close{display:flex!important}.pixel-header-actions{gap:7px}.pixel-editor h1>.pixel-icon{width:25px;height:25px}.pixel-rail button{flex-direction:column}.pixel-editor #workspace>.drawing{grid-row:1;grid-column:2}.pixel-editor .tools{max-height:90px}}
@media(max-width:599px){.pixel-editor{padding:8px 7px calc(70px + env(safe-area-inset-bottom));gap:6px}.pixel-editor>header{min-height:56px;gap:6px;padding:4px 6px}.pixel-editor h1{font-size:18px;letter-spacing:0;gap:5px}.pixel-editor h1>.pixel-icon{width:24px;height:24px}.pixel-nav{display:none}.pixel-header-actions{margin-left:auto;gap:7px}.pixel-header-actions button{padding:6px 8px;min-height:35px;font-size:12px}.pixel-header-actions .pixel-icon{display:none}.pixel-header-actions .pixel-help .pixel-icon{display:block;width:17px;height:17px}.pixel-editor .pixel-help{min-width:25px}.pixel-editor #workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0}.pixel-editor #workspace>.pixel-rail{display:none}.pixel-editor #workspace>.drawing{grid-column:1;grid-row:1;padding:10px}.pixel-editor .drawing>.heading{min-height:42px}.pixel-editor #title{font-size:17px}.pixel-editor #save-state{font-size:10px}.pixel-editor .tools{display:none}.pixel-editor[data-panel=tools] .tools{display:flex;max-height:130px}.pixel-editor #stage{margin:8px 0;min-height:90px}.pixel-editor #position{font-size:10px}.pixel-editor #view-controls{gap:5px}.pixel-editor #view-controls button{font-size:10px;padding:4px 6px;min-height:34px}.pixel-editor #view-controls output{font-size:11px}.pixel-mobile-tools{display:flex!important;position:fixed;z-index:40;bottom:0;left:0;right:0;gap:6px;justify-content:space-around;background:var(--paper);border-top:2px solid var(--ink);padding:7px 8px calc(8px + env(safe-area-inset-bottom))}.pixel-mobile-tools button{display:flex;flex-direction:column;gap:4px;border:0;box-shadow:none;min-width:48px;font-size:10px;padding:3px}.pixel-mobile-tools .pixel-icon{width:20px;height:20px}.pixel-mobile-tools [aria-expanded=true]{color:#ce517b;background:#fbe2eb}.pixel-editor[data-panel=colors] #workspace>.colors,.pixel-editor[data-panel=library] #workspace>.library{position:fixed;left:7px;right:7px;top:auto;bottom:80px;width:auto;height:55dvh;max-height:65dvh;z-index:30}.pixel-editor #palette,.pixel-editor #swatches{grid-template-columns:repeat(6,minmax(0,1fr))}.pixel-editor .editor-entry{display:none}.pixel-editor #message:not(:empty){max-height:50px;font-size:11px}.pixel-editor #import-dialog,.pixel-editor #watermark-dialog{width:calc(100vw - 16px);padding:12px}.pixel-editor .import-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 完整处理工作台沿用相同SVG背景和像素卡片，无额外图片装饰。 */
.desktop-workbench .workbench-heading,.desktop-workbench .workbench-tools{border:8px solid transparent;border-image:var(--frame) 10 fill / 8px;border-radius:0;filter:drop-shadow(3px 4px 0 #e5bfd4);background:transparent}.desktop-workbench .workbench-heading strong{color:#49333d}.desktop-workbench .workbench-tools button{border:1px solid #baa2b2;box-shadow:2px 2px 0 #dfd0e9}.desktop-workbench .workbench-tools button:hover{background:#fce1eb}

.pixel-more{flex-shrink:0;font-size:12px;color:var(--muted)}.pixel-more summary{cursor:pointer;min-height:32px;padding:6px 10px;list-style-position:inside}.pixel-more[open]{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:4px 8px}.pixel-more .editor-entry{margin:6px 0}.pixel-more .editor-entry span{display:none}@media(max-width:599px){.pixel-editor .pixel-more .editor-entry{display:flex;max-height:28dvh;overflow:auto;padding:4px}.pixel-editor .pixel-more .editor-entry button{font-size:11px;min-height:36px}.pixel-more summary{padding:4px 7px;min-height:28px}}

/* 参考图还原：加深阶梯框，固定标题/模式切换，选色→统计→库存→开始拼制。 */
:root{--frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' shape-rendering='crispEdges'%3E%3Cpath d='M10 2h20v4h4v4h4v20h-4v4h-4v4H10v-4H6v-4H2V10h4V6h4z' fill='%23fffaf0' stroke='%23433038' stroke-width='4'/%3E%3C/svg%3E")}
.pixel-editor{position:relative;background-color:#fff8ee}.pixel-editor>header{border-width:10px;border-image-slice:12;border-image-width:10px;filter:drop-shadow(0 4px 0 #d9cbe8)}.pixel-editor .frame{border-width:10px;border-image-slice:12;border-image-width:10px;filter:drop-shadow(3px 4px 0 #e7b1c9)}.pixel-editor>header h1{font-weight:900;color:#482831}.pixel-editor h1 small{display:none}.pixel-editor #workspace>.drawing{background:#f0eafa}.pixel-editor #workspace>.pixel-rail,.pixel-editor #workspace>.colors{background:#fff9ed}.pixel-editor .pixel-rail{padding:10px!important}.pixel-rail button{background:#fffaf0;border-color:#d9c6ce;box-shadow:1px 2px 0 #e2d6d4;min-height:42px;margin-bottom:7px}.pixel-rail h3{color:#37262c;font-size:13px;letter-spacing:0;font-weight:800}.pixel-rail .pixel-icon{color:#4c4662}.pixel-rail section+section{margin-top:14px;padding-top:5px}.pixel-editor .drawing>.heading{background:#fffaf0;border-bottom:2px solid #d8c6e1;padding:0 0 10px;flex-wrap:wrap}.pixel-editor #title{color:#251e30;font-weight:800}.pixel-mode-tabs{display:flex;gap:8px;margin:auto}.pixel-mode-tabs button{min-width:100px;min-height:35px;background:#eee7f5;border-color:#cfc0dc}.pixel-mode-tabs .active{background:#f9d3df;border-color:#a15c74;box-shadow:0 3px 0 #dd91aa;color:#a3345c;font-weight:700}.pixel-undo{display:flex;gap:8px}.pixel-undo button{min-height:35px;padding:5px}.pixel-undo .flipped svg{transform:scaleX(-1)}.pixel-editor #save-state{font-size:10px}.pixel-editor .tools{margin-top:9px;max-height:80px}.pixel-editor .tools button{min-height:31px}.pixel-editor .colors h2{font-size:20px;color:#34252b;border-bottom:1px solid #e6d7dc;padding-bottom:10px}.pixel-editor .colors #selected{margin:0 0 10px;min-height:44px;background:#fff8ee}.pixel-editor #swatches{max-height:270px;overflow:auto;padding:3px;margin:10px 0}.pixel-editor .color{background:#fff9f1;border-radius:5px}.pixel-editor .color[aria-pressed=true]{background:#ffedf1;border-color:#e86d96;outline:1px solid #f6c1d2;outline-offset:1px}.pixel-editor #counts{background:#fff9ee;border:1px solid #e5d8dc;border-radius:5px;padding:10px 7px;margin:2px 0 0;text-align:center;font-size:12px;color:#302936}.pixel-stock h3{margin:14px 0 9px;font-size:13px;color:#48333d}.pixel-stock h3 small{font-size:10px;font-weight:400;color:#8a7c86}.pixel-stock>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.pixel-stock span{display:grid;grid-template-columns:22px 1fr;gap:0 4px;align-items:center}.pixel-stock i{grid-row:span 2;width:20px;height:23px;background:#a6ce74;border:2px solid #557846;box-shadow:inset 3px 3px 0 #d6eca7}.pixel-stock .stock-low i{background:#ffc876;border-color:#bf874a;box-shadow:inset 3px 3px 0 #ffe1ab}.pixel-stock .stock-missing i{background:#ef8a9a;border-color:#b65e70;box-shadow:inset 3px 3px 0 #ffc9d2}.pixel-stock .stock-unknown i{background:#b7afc2;border-color:#797183;box-shadow:inset 3px 3px 0 #ded8e7}.pixel-stock small{font-size:10px;white-space:nowrap}.pixel-stock b{font-size:16px;line-height:1.2}.pixel-editor .pixel-start{border:2px solid #69434d;border-radius:5px;min-height:46px;font-size:16px;margin:16px 0;box-shadow:0 4px 0 #cb6c88;background:#f27c9f}.pixel-accordion{border-top:1px solid #e7d7dc;padding:10px 0;font-size:13px}.pixel-accordion summary{cursor:pointer;font-weight:700;list-style-position:inside}.pixel-accordion button{margin:9px 4px 0 0}.pixel-editor .colors>h3{margin:0}.pixel-editor .pixel-more summary{color:#907987}.pixel-editor #stage{border-color:#d2bfdc}.pixel-editor #view-controls{background:#fffaf0;border:1px solid #b49da9;border-radius:5px;align-self:center;padding:3px 8px}.pixel-editor #view-controls button{box-shadow:none;border:0;background:none}.pixel-editor #view-controls [aria-pressed=true]{background:#f8dce6}
@media(min-width:1200px){.pixel-editor #workspace{grid-template-columns:160px minmax(0,1fr) 330px}.pixel-editor .drawing>.heading>div:first-child{max-width:37%}}
@media(max-width:1199px){.pixel-mode-tabs button{min-width:76px;font-size:11px;padding:6px}.pixel-editor .drawing>.heading{gap:6px}.pixel-undo .pixel-icon{width:16px;height:16px}.pixel-stock span{grid-template-columns:18px 1fr}.pixel-stock i{width:16px;height:20px}.pixel-stock h3 small{display:block}.pixel-editor #counts{font-size:10px}}
@media(max-width:599px){.pixel-editor .drawing>.heading{padding-bottom:7px}.pixel-mode-tabs{margin:0 0 0 auto;gap:5px}.pixel-mode-tabs button{min-width:64px;padding:5px;font-size:10px;min-height:29px}.pixel-undo{gap:5px}.pixel-undo button{min-height:27px;padding:4px}.pixel-editor .drawing>.heading>div:first-child{width:100%;display:flex;align-items:center;justify-content:space-between}.pixel-editor .tools{max-height:90px}.pixel-editor #counts{font-size:12px}.pixel-editor #swatches{max-height:200px}.pixel-editor .pixel-stock h3 small{display:inline}.pixel-editor #view-controls{padding:3px;width:100%}.pixel-editor #title{font-size:16px}}