:root{color-scheme:light;--bg: #f4f7f8;--panel: #ffffff;--panel-soft: #eef4f4;--text: #152021;--muted: #607071;--line: #d9e2e2;--strong-line: #adc0c0;--brand: #0f766e;--brand-dark: #115e59;--accent: #d97706;--danger: #b42318;--shadow: 0 18px 50px rgba(18, 32, 33, .1)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:calc(100vh - 160px);padding:18px 24px 24px}.topbar,.workspace,.preview-panel,.control-panel,.panel-section{border:1px solid var(--line)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:14px 24px;border-top:0;border-left:0;border-right:0;border-radius:0;background:var(--panel);box-shadow:0 8px 24px #1220210f}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--brand);color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em}.brand-copy{min-width:0}.eyebrow{margin:0 0 4px;color:var(--brand);font-size:12px;font-weight:700;letter-spacing:0}h1,h2{margin:0;letter-spacing:0}h1{font-size:26px;line-height:1.2}h2{font-size:16px;line-height:1.35}.workspace{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:18px;max-width:1480px;margin:0 auto 18px;padding:18px;border-radius:8px;background:#ffffffb8}.control-panel,.preview-panel{min-width:0;border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}.control-panel{display:flex;flex-direction:column;gap:14px;width:100%;max-width:100%;max-height:calc(100vh - 132px);padding:14px;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain}.preview-panel{display:flex;flex-direction:column;min-height:calc(100vh - 132px);padding:16px}.primary-action{min-height:42px;padding:0 18px;border:0;border-radius:8px;background:var(--brand);color:#fff;font-weight:700;white-space:nowrap}.primary-action:hover{background:var(--brand-dark)}.primary-action:disabled{cursor:not-allowed;background:#a6b6b6}.float-download{display:none;position:fixed;z-index:40;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-width:220px;max-width:calc(100vw - 32px);min-height:48px;padding:0 28px;border:0;border-radius:8px;background:var(--brand);color:#fff;font-weight:700;box-shadow:0 12px 32px #0f766e5c;transform:translate(-50%);touch-action:manipulation}.float-download:hover,.float-download:active{background:var(--brand-dark)}.upload-box{display:grid;place-items:center;min-height:136px;padding:18px;border:1px dashed var(--strong-line);border-radius:8px;background:var(--panel-soft);text-align:center;transition:border-color .2s ease,background .2s ease}.upload-box.is-dragover{border-color:var(--brand);background:#e2f3f1}.upload-box input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.upload-title{display:block;font-weight:800}.upload-copy,.hint,.empty-note{color:var(--muted);font-size:13px;line-height:1.55}.panel-section{min-width:0;max-width:100%;padding:14px;border-radius:8px;background:#fff}.section-title,.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title span{flex:0 0 auto;color:var(--muted);font-size:12px}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:12px;padding:4px;border-radius:8px;background:var(--panel-soft)}.field .segmented{margin-top:0}.segmented button{min-height:36px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-weight:700}.segmented button.is-active{background:#fff;color:var(--brand-dark);box-shadow:0 1px 5px #1220211a}.field{display:grid;gap:7px;margin-top:12px}.field>span{color:var(--muted);font-size:13px;font-weight:700}select,input[type=number]{width:100%;min-height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:0 10px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;accent-color:var(--brand);touch-action:none;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#d9e2e2}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border:2px solid #fff;border-radius:50%;background:var(--brand);box-shadow:0 1px 4px #12202133;cursor:grab}input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:#d9e2e2}input[type=range]::-moz-range-thumb{width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--brand);box-shadow:0 1px 4px #12202133;cursor:grab}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pattern-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pattern-card{display:grid;gap:4px;min-width:0;padding:6px;border:1px solid var(--line);border-radius:7px;background:#fbfdfd;color:var(--text);text-align:left;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.pattern-card:hover{border-color:var(--brand);background:#f4fbfa}.pattern-card:focus-visible{outline:3px solid rgba(15,118,110,.25);outline-offset:2px}.pattern-card.is-selected{border-color:var(--brand);background:#eaf7f5;box-shadow:inset 0 0 0 1px var(--brand)}.pattern-card.is-recommended .pattern-copy strong:after{content:"荐";display:inline-flex;align-items:center;min-height:14px;margin-left:4px;padding:0 4px;border-radius:999px;background:#f8ead6;color:#8a4b06;font-size:10px;vertical-align:1px}.pattern-preview{display:grid;aspect-ratio:4 / 3;gap:2px;min-height:44px;padding:3px;border-radius:4px;background:#d9e2e2}.pattern-preview i{display:grid;place-items:center;min-width:0;min-height:0;border-radius:3px;background:#fff;color:var(--brand-dark);font-size:9px;font-style:normal;font-weight:800}.pattern-copy{display:grid;gap:2px;min-width:0}.pattern-copy strong,.pattern-copy em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pattern-copy strong{font-size:12px}.pattern-copy em{color:var(--muted);font-size:11px;font-style:normal}.preset-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset-card{display:grid;gap:4px;min-width:0;padding:6px;border:1px solid var(--line);border-radius:7px;background:#fbfdfd;color:var(--text);text-align:left;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.preset-card:hover,.preset-card:focus-visible{border-color:var(--brand);background:#f4fbfa}.preset-card:focus-visible{outline:3px solid rgba(15,118,110,.25);outline-offset:2px}.preset-card.is-selected{border-color:var(--brand);background:#eaf7f5;box-shadow:inset 0 0 0 1px var(--brand)}.preset-card.is-recommended .preset-copy strong:after{content:"荐";display:inline-flex;align-items:center;min-height:14px;margin-left:4px;padding:0 4px;border-radius:999px;background:#f8ead6;color:#8a4b06;font-size:10px;vertical-align:1px}.preset-preview{display:grid;place-items:center;aspect-ratio:4 / 3;min-height:44px;padding:4px;border-radius:4px;background:#d9e2e2}.preset-preview i{display:block;max-width:78%;max-height:86%;border:1px solid #c5d2d2;border-radius:3px;background:#fff;box-shadow:0 4px 10px #12202114}.preset-preview i.is-custom{width:42%;height:42%;border-style:dashed;background:linear-gradient(#fff,#fff) padding-box,repeating-linear-gradient(135deg,#eef4f4 0,#eef4f4 6px,#fff 6px,#fff 12px)}.preset-copy{display:grid;gap:2px;min-width:0}.preset-copy strong,.preset-copy em,.preset-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-copy strong{font-size:12px}.preset-copy em,.preset-copy span{color:var(--muted);font-size:11px;font-style:normal}.preset-copy span{display:none}.hint{margin:10px 0 0}.image-list{display:grid;gap:10px;margin-top:12px}.image-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fbfdfd}.image-item.is-base{border-color:var(--brand);background:#eaf7f5}.image-item img{width:52px;height:52px;border-radius:6px;object-fit:cover}.base-badge{display:inline-flex;align-items:center;min-height:18px;margin-top:4px;padding:0 6px;border-radius:999px;background:#d9f2ee;color:var(--brand-dark);font-size:11px;font-weight:800}.base-picker{display:grid;gap:10px}.current-base-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:10px;border:1px solid var(--brand);border-radius:8px;background:#eaf7f5}.current-base-card img{width:92px;height:92px;border-radius:6px;object-fit:cover;background:#fff}.current-base-copy{display:grid;align-content:center;gap:4px;min-width:0}.current-base-copy strong,.base-choice-copy strong{display:block;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.current-base-copy span,.current-base-copy em,.base-choice-copy em{color:var(--muted);font-size:12px;font-style:normal}.current-base-copy .base-badge{width:max-content}.base-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.base-choice{display:grid;gap:6px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fbfdfd;color:var(--text);text-align:left}.base-choice img{width:100%;height:72px;border-radius:6px;object-fit:cover;background:#fff}.base-choice-copy{display:grid;gap:2px;min-width:0}.base-choice-status{color:var(--muted);font-size:12px;font-weight:700}.base-choice:hover,.base-choice:focus-visible{border-color:var(--brand);background:#f4fbfa}.base-choice.is-selected{border-color:var(--brand);background:#eaf7f5;box-shadow:inset 0 0 0 1px var(--brand)}.base-choice.is-selected .base-choice-status{color:var(--brand-dark)}.overlay-subhead{margin-top:16px}.overlay-subhead span{flex:1 1 auto;min-width:0;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}.image-meta{min-width:0}.image-meta strong{display:block;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.image-meta span{color:var(--muted);font-size:12px}.image-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.icon-button{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--text);font-weight:800}.icon-button:hover{border-color:var(--brand);color:var(--brand-dark)}.icon-button.danger:hover{border-color:var(--danger);color:var(--danger)}.preview-head{flex:0 0 auto;padding-bottom:14px;border-bottom:1px solid var(--line)}.status-pill{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:#f8ead6;color:#8a4b06;font-size:12px;font-weight:800}.canvas-shell{display:grid;place-items:center;flex:1 1 auto;min-height:420px;margin-top:16px;padding:18px;border-radius:8px;background:linear-gradient(45deg,#edf1f1 25%,transparent 25%),linear-gradient(-45deg,#edf1f1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf1f1 75%),linear-gradient(-45deg,transparent 75%,#edf1f1 75%);background-color:#f8fbfb;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;overflow:hidden}.canvas-stage{position:relative;display:grid;place-items:center;max-width:100%;max-height:72vh}#previewCanvas{display:block;max-width:100%;max-height:72vh;border-radius:2px;background:#fff;box-shadow:0 16px 45px #1020222e}.overlay-layer{position:absolute;pointer-events:none}.overlay-box{position:absolute;border:1.5px solid var(--accent);border-radius:3px;cursor:move;pointer-events:auto}.overlay-box.is-selected{box-shadow:0 0 0 2px #d977062e}.resize-handle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--accent);cursor:nwse-resize}.overlay-editor{display:grid;gap:8px;width:100%;min-width:0;margin-top:12px}.overlay-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;width:100%;min-width:0;max-width:100%;padding:8px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fbfdfd}.overlay-row.is-selected{border-color:var(--accent);background:#fff8ed}.overlay-thumb{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}.overlay-thumb img{display:block;width:100%;height:100%;object-fit:cover}.overlay-controls{display:grid;gap:6px;width:100%;min-width:0}.overlay-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.overlay-name{min-width:0;flex:1 1 auto;overflow:hidden;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.overlay-size{flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:700}.size-slider-row{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;gap:4px;align-items:center;width:100%;min-width:0}.size-slider-row .icon-button{width:28px;height:28px;min-width:0;padding:0}.slider{position:relative;display:block;width:100%;min-width:0;height:28px;overflow:hidden;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;right:9px;left:9px;height:8px;border-radius:999px;background:#d9e2e2;transform:translateY(-50%)}.slider-fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--brand)}.slider-thumb{position:absolute;top:50%;width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:var(--brand);box-shadow:0 1px 4px #12202133;transform:translate(-50%,-50%);pointer-events:none}.slider.is-dragging .slider-thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.08)}.feature-strip{max-width:1480px;margin:0 auto;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}.feature-strip+.feature-strip{margin-top:18px}.feature-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:14px}.feature-head>span{flex:0 0 auto;color:var(--muted);font-size:13px;font-weight:700}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feature-card{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;min-height:136px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fbfdfd;color:var(--text);text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.feature-card:hover{border-color:var(--brand);box-shadow:0 12px 28px #1220211f;transform:translateY(-2px)}.feature-card:focus-visible{outline:3px solid rgba(15,118,110,.28);outline-offset:3px}.feature-card img{width:116px;height:136px;object-fit:cover}.feature-card-copy{display:grid;gap:8px;min-width:0;padding:16px}.feature-card-copy strong{font-size:17px;line-height:1.25}.feature-card-copy span{color:var(--muted);font-size:13px;line-height:1.55}.feature-card-copy:after{content:"立即使用";width:max-content;padding:6px 10px;border-radius:999px;background:#e2f3f1;color:var(--brand-dark);font-size:12px;font-weight:800}.seo-faq{margin-top:18px}.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}.faq-grid div{min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fbfdfd}.faq-grid dt{margin:0 0 8px;font-size:16px;font-weight:800;line-height:1.35}.faq-grid dd{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.site-footer{width:100%;margin:0;padding:22px 24px;border-top:1px solid var(--line);background:var(--panel)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1480px;margin:0 auto}.footer-brand{display:flex;align-items:center;gap:12px;min-width:0}.footer-brand strong,.footer-brand span{display:block}.footer-brand strong{font-size:15px}.footer-brand span,.footer-copy{color:var(--muted);font-size:13px}.footer-copy{margin:0;white-space:nowrap}.is-hidden{display:none!important}@media(max-width:980px){.app-shell{padding:14px}.topbar,.site-footer{padding-left:14px;padding-right:14px}.workspace,.feature-strip{max-width:760px}.workspace,.feature-grid,.faq-grid{grid-template-columns:1fr}.feature-card{grid-template-columns:128px minmax(0,1fr)}.feature-card img{width:128px}.control-panel,.preview-panel{max-height:none;min-height:auto;overflow:visible;overscroll-behavior:auto}.control-panel{touch-action:pan-y}.preview-panel{min-height:560px}.topbar .primary-action{display:none}.float-download.is-ready{display:inline-flex;align-items:center;justify-content:center}body.has-float-download{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}@media(max-width:560px){.footer-inner{align-items:flex-start;flex-direction:column}.footer-copy{white-space:normal}.workspace{padding:10px}.feature-strip{padding:14px}.feature-head{align-items:flex-start;flex-direction:column}.feature-head>span{display:none}.feature-card{grid-template-columns:1fr}.feature-card img{width:100%;height:118px}.current-base-card{grid-template-columns:72px minmax(0,1fr)}.current-base-card img{width:72px;height:72px}.pattern-choice-grid,.preset-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.base-choice-grid{grid-template-columns:1fr}.preview-head{align-items:flex-start;flex-direction:column}.canvas-shell{min-height:320px;padding:10px}.image-item{grid-template-columns:44px minmax(0,1fr)}.image-item img{width:44px;height:44px}.image-actions{grid-column:1 / -1;justify-content:flex-start}}