:root{font-family:'DM Sans','Noto Sans SC',sans-serif;color:#282b27;background:#f6f4ef;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#282b27;--muted:#888b84;--line:#e9e7df;--green:#438a67;--green-dark:#347553;--paper:#fffefa;--lilac:#d9c9ef;--shadow:0 12px 40px #38352b0a}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 82% 15%,#ece8f326,transparent 34%),#f6f4ef}button,input,select{font:inherit}button{cursor:pointer}.topbar{height:66px;border-bottom:1px solid #e9e7dfb8;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1180px)/2));background:#f8f6f1cc}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.02em}.brand-mark{width:24px;height:24px;background:#448867;border-radius:8px;display:grid;grid-template-columns:repeat(2,6px);grid-template-rows:repeat(2,6px);gap:2px;place-content:center;transform:rotate(-6deg)}.brand-mark i{background:#f8f4e6;border-radius:2px}.brand-mark i:nth-child(2){opacity:.72}.brand-mark i:nth-child(3){opacity:.82}.top-note{font-size:12px;color:#777b73;display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;background:#66a57e;border-radius:50%;box-shadow:0 0 0 3px #66a57e1b}.shell{max-width:1180px;margin:0 auto;padding:34px 24px 26px}.intro{margin-bottom:26px}.eyebrow{display:flex;align-items:center;gap:10px;color:#81857c;font-size:10px;letter-spacing:.14em}.eyebrow span:first-child{font-weight:700;color:#59816a}.eyebrow-line{width:24px;height:1px;background:#cbcfc5}.intro h1{font-size:34px;letter-spacing:-.04em;margin:12px 0 5px;line-height:1.25;font-weight:700}.intro h1 span{color:#438a67}.intro p{color:#777b73;font-size:13px;margin:0}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:stretch}.panel,.preview-panel,.summary{background:var(--paper);border:1px solid #eae8e0;border-radius:13px;box-shadow:var(--shadow)}.controls{padding:21px 20px 16px}.panel-head,.preview-head{display:flex;align-items:center;justify-content:space-between}.panel-head>div,.preview-head>div:first-child{display:flex;align-items:center;gap:9px}.step{font-size:10px;letter-spacing:.08em;color:#8b9b87;background:#eff4ec;padding:5px 6px;border-radius:5px;font-weight:700}.panel h2,.preview-head h2{font-size:14px;margin:0;font-weight:700}.mini-label{font-size:9px;color:#a0a197;letter-spacing:.04em}.dropzone{margin-top:15px;min-height:138px;border:1px dashed #d6dacf;background:#fbfcf8;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;transition:.18s ease;position:relative;overflow:hidden}.dropzone:hover,.dropzone.dragging{border-color:#6eaa82;background:#f4faf4}.dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.upload-icon{width:32px;height:32px;border:1px solid #e3e8dd;border-radius:9px;background:white;display:grid;place-items:center;margin-bottom:7px;color:#518a68}.upload-icon svg{width:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.dropzone strong{font-size:12px;font-weight:600}.dropzone>span:nth-of-type(2){font-size:10px;color:#92958d;margin-top:4px}.file-name{margin-top:8px;font-size:10px;color:#4d8b64;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-divider{height:1px;background:#efeee9;margin:20px 0 18px}.compact{margin-bottom:18px}.field-block{margin-bottom:16px}.label-row{display:flex;justify-content:space-between;align-items:center}.field-block label,.label-row label{font-size:11px;font-weight:600;color:#474a44}.label-row>span{font-size:10px;color:#8b8e85}.label-row b{font-size:12px;color:#397e57}.field-block input[type=range]{width:100%;height:3px;appearance:none;background:linear-gradient(90deg,#6b9d76 0%,#6b9d76 25%,#e6e8df 25%);border-radius:5px;margin:13px 0 4px;display:block}.field-block input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #578f68;box-shadow:0 1px 4px #0002}.range-ends{display:flex;justify-content:space-between;color:#a5a69e;font-size:9px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-wrap{position:relative;margin-top:7px}.select-wrap select{appearance:none;width:100%;height:34px;border:1px solid #e6e7df;border-radius:6px;background:#fff;padding:0 26px 0 9px;color:#474a44;font-size:10px;outline:none}.select-wrap select:focus{border-color:#78a989;box-shadow:0 0 0 3px #78a98918}.select-wrap>span{position:absolute;right:9px;top:6px;color:#94978e;pointer-events:none}.toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin:17px 0 18px;position:relative}.toggle-row>span:first-child{display:grid;gap:3px}.toggle-row strong{font-size:11px;font-weight:600}.toggle-row small{font-size:9px;color:#92958c}.toggle-row input{position:absolute;opacity:0}.toggle-ui{height:19px;width:34px;border-radius:12px;background:#dfe2db;transition:.2s;position:relative}.toggle-ui:after{content:'';position:absolute;height:13px;width:13px;left:3px;top:3px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:.2s}.toggle-row input:checked+.toggle-ui{background:#6c9b76}.toggle-row input:checked+.toggle-ui:after{transform:translateX(15px)}.toggle-row input:focus-visible+.toggle-ui{outline:2px solid #438a67;outline-offset:2px}.primary-button{width:100%;height:41px;border:0;border-radius:7px;background:#438a67;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:600;transition:.18s}.primary-button:hover:not(:disabled){background:#347553;transform:translateY(-1px);box-shadow:0 4px 12px #438a6733}.primary-button:disabled{opacity:.43;cursor:not-allowed}.primary-button svg{width:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.privacy-note{text-align:center;color:#96988f;font-size:9px;margin:9px 0 0}.privacy-note span{color:#c29d61}.preview-panel{padding:18px 18px 0;display:flex;flex-direction:column;min-width:0}.preview-actions{display:flex;align-items:center;gap:7px;color:#898d84;font-size:10px}.icon-button{width:25px;height:25px;border:1px solid #e8e9e2;background:#fff;border-radius:6px;color:#656960;font-size:16px;line-height:1}.icon-button:hover{background:#f3f6f1;border-color:#cfdacf}.action-separator{height:15px;width:1px;background:#e8e8e2;margin:0 3px}.text-button{border:0;background:transparent;color:#678b6e;font-size:10px;padding:6px 2px}.canvas-stage{height:432px;margin-top:15px;border:1px solid #ecebe5;border-radius:8px;background-color:#faf9f5;background-image:radial-gradient(#deded6 0.7px,transparent .7px);background-size:14px 14px;display:grid;place-items:center;overflow:hidden;position:relative;touch-action:none}.canvas-stage canvas{display:none;image-rendering:pixelated;max-width:94%;max-height:94%;transform-origin:center;cursor:grab;box-shadow:0 4px 20px #38352b14}.canvas-stage canvas:active{cursor:grabbing}.empty-state{text-align:center;color:#777b72}.sample-art{height:56px;width:56px;margin:0 auto 12px;border-radius:18px;background:#f1eee5;display:grid;place-items:center;position:relative;color:#70a77b;font-size:39px;line-height:1}.sample-art i,.sample-art b{position:absolute;background:#e5aa85;width:8px;height:8px;right:9px;top:9px;border-radius:2px}.sample-art b{width:7px;height:7px;right:17px;top:17px;background:#d7c2eb}.empty-state strong{font-size:12px;color:#53574f}.empty-state p{font-size:10px;color:#96988f;line-height:1.7;margin:5px 0 9px}.empty-hint{font-size:9px;color:#a4a49b;background:#f4f3ed;padding:5px 9px;border-radius:20px}.preview-footer{height:41px;display:flex;align-items:center;gap:8px;color:#898c84;font-size:9px}.footer-dot{width:3px;height:3px;border-radius:50%;background:#babbb4}.footer-spacer{flex:1}.scale-hint{color:#aaa99f}.summary{margin-top:16px;padding:15px 20px;display:flex;align-items:center;gap:28px}.summary-title{display:flex;align-items:center;gap:10px;min-width:145px}.summary-spark{width:30px;height:30px;border-radius:9px;background:#f3efe6;display:grid;place-items:center;color:#bd9960;font-size:19px}.summary-title>div{display:grid;gap:2px}.summary-title strong{font-size:12px}.summary-title small{font-size:9px;color:#96988f}.swatch-list{display:flex;gap:8px;flex-wrap:wrap}.swatch{display:flex;align-items:center;gap:5px;border:1px solid #efeee8;border-radius:5px;padding:4px 7px;font-size:9px;color:#696d64}.swatch i{width:11px;height:11px;border-radius:3px;border:1px solid #00000010}.swatch b{font-size:9px;color:#3e443e}footer{display:flex;justify-content:space-between;margin-top:20px;color:#a2a39a;font-size:9px}footer span:first-child{font-weight:600;color:#81877d}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#303a32;color:#fff;padding:10px 15px;border-radius:8px;font-size:12px;box-shadow:0 5px 20px #0002;transition:.2s;z-index:5}.toast.show{transform:translate(-50%,0);opacity:1}:focus-visible{outline:2px solid #438a67;outline-offset:3px} [hidden]{display:none!important}
@media(max-width:800px){.shell{padding:27px 18px 22px}.workspace{grid-template-columns:300px minmax(0,1fr);gap:12px}.controls{padding:17px 15px}.canvas-stage{height:390px}.intro h1{font-size:30px}}
@media(max-width:640px){.topbar{height:58px;padding:0 18px}.top-note{font-size:10px}.shell{padding:23px 14px}.intro{margin-bottom:18px}.intro h1{font-size:28px}.intro p{font-size:11px;line-height:1.7}.workspace{grid-template-columns:1fr}.controls{order:0}.preview-panel{order:1;padding:14px 12px 0}.canvas-stage{height:min(68vh,390px);min-height:260px}.preview-footer{height:36px}.scale-hint{display:none}.summary{align-items:flex-start;flex-direction:column;gap:12px;padding:14px}.swatch-list{gap:6px}.two-fields{gap:12px}footer{margin-top:16px}.controls .dropzone{min-height:128px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.secondary-button{width:100%;height:40px;margin-top:8px;border:1px solid #dce6dc;border-radius:7px;background:#f8fbf7;color:#447c58;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:600;transition:.18s}.secondary-button:hover:not(:disabled){background:#eef6ed;border-color:#b9d2bb}.secondary-button:disabled{opacity:.45;cursor:not-allowed}.secondary-button svg{width:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 豆王之王 · 蓝白主题 */
:root{color:#26364b;background:#f4f8fd;--ink:#26364b;--muted:#71839a;--line:#dce7f3;--green:#3478b8;--green-dark:#245b91;--paper:#fff;--lilac:#dceafa;--shadow:0 12px 36px #27466c0d}
body{background:radial-gradient(ellipse at 84% 8%,#eaf3fc 0,transparent 34%),#f7faff;color:var(--ink)}
.topbar{background:#ffffffeb;border-color:#dce7f3}
.brand{color:#26364b}.brand-mark{background:#3478b8}.brand-mark i{background:#f6faff}
.top-note{color:#71839a}.live-dot{background:#4f8fc5;box-shadow:0 0 0 3px #4f8fc51c}
.eyebrow{color:#71839a}.eyebrow span:first-child,.intro h1 span{color:#2e6fa8}.eyebrow-line{background:#c8d9eb}
.panel,.preview-panel,.summary{background:#fff;border-color:#dce7f3;box-shadow:0 12px 36px #27466c0d}
.step{color:#2e6fa8;background:#eaf3fc}.mini-label{color:#71839a}
.dropzone{border-color:#c8d9eb;background:#fafdff}.dropzone:hover,.dropzone.dragging{border-color:#5e94c5;background:#f0f7ff}
.upload-icon{border-color:#dce7f3;color:#3478b8}.file-name{color:#2e6fa8}
.section-divider{background:#e7eef6}.field-block label,.label-row label,.toggle-row strong{color:#33465c}
.label-row>span,.toggle-row small{color:#71839a}.label-row b{color:#2e6fa8}
.field-block input[type=range]{background:linear-gradient(90deg,#4f8fc5 0%,#4f8fc5 25%,#dfe9f4 25%)}
.field-block input[type=range]::-webkit-slider-thumb{border-color:#3478b8}
.select-wrap select{border-color:#dce7f3;color:#33465c}.select-wrap select:focus{border-color:#6a9bc8;box-shadow:0 0 0 3px #6a9bc81a}
.select-wrap>span{color:#71839a}.toggle-ui{background:#dce5ee}.toggle-row input:checked+.toggle-ui{background:#3478b8}.toggle-row input:focus-visible+.toggle-ui{outline-color:#3478b8}
.primary-button{background:#3478b8}.primary-button:hover:not(:disabled){background:#245b91;box-shadow:0 4px 12px #3478b833}
.privacy-note span{color:#5d92c1}.icon-button{border-color:#dce7f3;color:#52677f}.icon-button:hover{background:#edf5fd;border-color:#c5d8eb}
.text-button{color:#2e6fa8}.canvas-stage{border-color:#dce7f3;background-color:#fafdff;background-image:radial-gradient(#d7e3ef 0.7px,transparent .7px)}
.sample-art{background:#eaf3fc;color:#4f8fc5}.sample-art i{background:#e5aa85}.sample-art b{background:#a9c7e6}
.empty-state{color:#71839a}.empty-state strong{color:#33465c}.empty-state p{color:#71839a}.empty-hint{color:#71839a;background:#edf5fd}
.preview-footer,.preview-actions{color:#71839a}.footer-dot{background:#bdccdc}.scale-hint{color:#8393a6}
.summary-spark{background:#eaf3fc;color:#3478b8}.swatch{border-color:#e0e9f2;color:#52677f}.swatch b{color:#33465c}
footer{color:#8393a6}footer span:first-child{color:#2e6fa8}
.toast{background:#263d57}:focus-visible{outline-color:#3478b8}
.secondary-button{border-color:#cddded;background:#f5f9fe;color:#2e6fa8}.secondary-button:hover:not(:disabled){background:#eaf3fc;border-color:#b9d0e7}
::selection{background:#d9e9f8;color:#26364b}
/* 图纸尺寸档位 */
.size-tier-block{margin-bottom:14px}
.size-tier-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.size-tier{min-width:0;min-height:48px;padding:6px 4px;border:1px solid #dce7f3;border-radius:7px;background:#fff;color:#52677f;text-align:center;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.size-tier strong,.size-tier span{display:block;white-space:nowrap}
.size-tier strong{font-size:11px;font-weight:700}
.size-tier span{margin-top:3px;font-size:9px;color:#71839a}
.size-tier:hover{border-color:#9dbbd8;background:#f7fbff}
.size-tier.is-active{border-color:#5e91bf;background:#eaf3fc;color:#245b91;box-shadow:inset 0 0 0 1px #5e91bf26}
.size-tier.is-active span{color:#2e6fa8}
.size-tier:focus-visible{outline:2px solid #3478b8;outline-offset:2px}
.size-tier-note{margin:7px 0 0;color:#71839a;font-size:10px;line-height:1.5}
.merge-field{margin-top:2px;margin-bottom:13px}
.merge-help{display:block;margin-top:6px;color:#71839a;font-size:10px;line-height:1.5}