/* 商品场景图改稿助手 · 小物件商品图助手 —— 公开交互示例
   视觉与布局忠实还原原工具（浅蓝白 + 初始空白态 + 点「体验示例」后进入流程）。 */
:root{--ink:#25333f;--muted:#63717d;--line:#dde3e8;--blue:#285ce0;--pale:#edf2ff;--bg:#f2f4f7;--surface:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'PingFang SC','Microsoft YaHei',sans-serif}
button,input,textarea{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:white;color:inherit;border-radius:8px;padding:8px 12px;transition:background .3s cubic-bezier(.22,1,.36,1);min-height:44px}
button:hover{background:#edf2f8}
button:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #86a8ff;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.45}
.primary{background:var(--blue);border-color:var(--blue);color:white;font-weight:600}
.primary:hover{background:#194bc7}
.quiet{border:0;background:none;color:var(--muted)}
.wide{width:100%}
a.wide{display:block;text-align:center;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;font-size:16px}
h1,h2,h3,p{margin:0}
h1{font-size:24px;line-height:32px}
h2{font-size:18px;line-height:28px}
h3{font-size:16px}
small,.small{font-size:14px;line-height:20px;color:var(--muted)}

header{height:auto;min-height:80px;background:white;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{font-size:24px;font-weight:700;display:flex;align-items:center;gap:12px}
.mark{width:32px;height:32px;background:var(--blue);color:white;border-radius:8px;display:grid;place-items:center}
.brand-sub{font-size:14px;font-weight:400;color:var(--muted)}
.header-right{display:flex;align-items:center;gap:16px}
.demo-back{color:var(--muted);font-size:14px;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:white;transition:background .3s}
.demo-back:hover{background:#edf2f8}

.steps{display:flex;justify-content:center;gap:40px;padding:24px}
.step{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.step b{width:24px;height:24px;border-radius:50%;background:#e0e5ec;display:grid;place-items:center;font-size:12px}
.step.active{color:var(--blue);font-weight:600}
.step.active b{background:var(--blue);color:white}

.workspace{max-width:1680px;margin:auto;padding:0 24px 24px;display:grid;grid-template-columns:272px minmax(320px,1fr) 304px;gap:16px;align-items:start}
.workspace>.panel{min-width:0}
.panel{background:var(--surface);border-radius:12px}

/* 初始态：只显示左侧设置面板，画布与右栏隐藏 */
.workspace.is-setup{display:block}
.workspace.is-setup>.left{width:min(1040px,100%);margin:auto}
.workspace.is-setup>.center,.workspace.is-setup>.right{display:none}
.workspace.is-result{grid-template-columns:344px minmax(320px,1fr) 304px}

.setup-heading{padding:32px 32px 0}
.setup-heading h1{font-size:30px;line-height:36px;text-wrap:balance}
.setup-heading p{margin-top:8px;color:var(--muted)}

.demo-entry{display:flex;align-items:center;gap:16px;padding:16px 24px;margin:24px 32px 0;border:1px solid var(--line);border-radius:8px;background:#f8fafc}
.demo-entry img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.demo-entry h2{font-size:16px}
.demo-entry p{font-size:14px;color:var(--muted)}
.demo-entry button{margin-left:auto;white-space:nowrap}
.demo-notice{margin:16px 32px 0;padding:12px 16px;border-radius:8px;background:var(--pale);color:#3b568f;font-size:14px}
.workspace.is-result .demo-entry{display:none}
.workspace.is-result .demo-notice{margin:16px;font-size:12px}

.setup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:24px 32px 32px}
.setup-grid>section{min-width:0}
.label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.label h2{white-space:nowrap;flex-shrink:0}
.label h3{white-space:nowrap;flex-shrink:0}
.label .small{white-space:nowrap;flex-shrink:0}
.status{font-size:14px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.status.bad{color:#a44231;background:#fff0eb;border-radius:4px;padding:2px 6px}

.image-upload{display:block;width:100%;padding:0;border:1px dashed #bbc6d3;border-radius:8px;overflow:hidden;background:#fafbfd}
.image-upload:hover{border-color:var(--blue);background:#f1f5ff}
.thumb,.reference-preview{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(176px,21vw,280px);border-radius:0;overflow:hidden}
.thumb{background-color:#f5f5f5;background-image:conic-gradient(#e1e4e8 25%,transparent 0 50%,#e1e4e8 0 75%,transparent 0);background-size:24px 24px}
.thumb img,.reference-preview img{width:100%;height:100%;object-fit:contain;background:transparent!important}
.reference-preview{background:#f6f8fb}
.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.upload-plus{font-size:30px;font-weight:400;color:#7890aa;line-height:36px}
.file{margin-top:8px;min-height:32px;display:flex;align-items:center;gap:8px}
.file small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:anywhere}
.file .quiet{font-size:14px;white-space:nowrap;min-height:32px;padding:4px 8px}

.retouch-actions{margin-top:12px;display:flex;align-items:center;gap:8px}
.retouch-actions .quiet{white-space:nowrap;font-size:14px}
.retouch-actions .primary{white-space:nowrap;padding:8px 14px;min-height:44px;flex:1;width:auto}
.retouch-panel{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:8px;background:#f9fafb}
.retouch-panel>img{display:block;width:100%;height:240px;object-fit:contain;background:white;border-radius:4px}
.retouch-panel p{font-size:14px;color:var(--muted);margin:12px 0}
.retouch-panel .quiet{padding:4px;font-size:14px;white-space:nowrap}
.seg{display:flex;gap:8px;margin-top:12px}
.seg button{font-size:14px}
.confirm-row{display:flex;gap:8px;font-size:14px;margin:16px 0 12px;align-items:center}
.optional-details{font-size:14px;color:var(--muted);margin-top:12px}

.field-label{display:block;margin:16px 0 8px;font-size:14px;font-weight:600}
.style-summary{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.style-summary:empty{display:none}
.style-tag{padding:4px 8px;background:var(--pale);color:#3b568f;border-radius:4px;font-size:12px}
.style-summary p{font-size:14px;color:var(--muted);width:100%;margin:4px 0}
textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--ink);background:white;font:inherit;font-size:14px;min-height:72px;resize:vertical}
input:not([type=checkbox]){width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--ink);background:white;font:inherit;font-size:14px}

.settings-section{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.settings-section h2{font-size:16px;line-height:24px}
.settings-section label{font-size:14px;display:grid;gap:8px}
.settings-section .seg button{font-size:14px}
.settings-section .seg .selected{background:var(--pale);border-color:var(--blue);color:var(--blue)}

.form-actions{grid-column:1/-1}
.job{background:#edf2ff;color:#285ce0;border-radius:8px;padding:12px;margin:0 0 16px}
.form-actions .small{margin-top:8px}

/* 画布 */
.canvas-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 0}
.canvas-head p{margin-top:4px}
.art-area{padding:16px 20px}
.art{background:#e9e1d5;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:3/4;min-height:320px}
.art img.result{display:block;width:100%;height:100%;object-fit:contain}
.empty-art{height:100%;display:grid;place-content:center;text-align:center;gap:16px;padding:32px;color:var(--muted)}
.art-title{position:absolute;top:13%;left:0;right:0;text-align:center;color:#fff;font-family:'PingFang SC',sans-serif;letter-spacing:1px;white-space:nowrap;overflow:hidden;padding:0 16px;pointer-events:none}
.caption{font-size:14px;color:var(--muted);margin-top:8px}
.canvas-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px 20px;flex-wrap:wrap}
.versions{display:flex;flex-wrap:wrap;gap:8px}

/* 右侧调整面板 */
.stack{display:grid;gap:24px;padding:24px}
.stack section h2{font-size:16px;line-height:24px}
.options{display:grid;gap:8px;margin-top:12px}
.options button{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;font-size:14px;min-height:auto}
.options button span{font-size:12px;color:var(--muted)}
.options button.selected{background:var(--pale);border-color:var(--blue)}
.stack .wide{margin-top:8px}
.summary{margin-top:8px}
.summary p{margin-top:4px}
.checks{display:grid;gap:8px;margin-top:12px}
.checks label{display:flex;gap:8px;font-size:14px;align-items:flex-start}
.ai-result{font-size:14px;white-space:pre-wrap;background:#f3f6fa;padding:12px;border-radius:8px;margin-top:12px}
.ai-result:empty{display:none}
.workspace.is-result>.right{position:sticky;top:16px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#25333f;color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;display:none;z-index:50;max-width:90vw}
.hidden{display:none!important}

/* 结果态中间栏与右栏布局 */
.workspace.is-result>.center{position:sticky;top:16px}

@media(max-width:1199px) and (min-width:701px){
  .workspace.is-result{grid-template-columns:304px minmax(300px,1fr)}
  .workspace.is-result>.right{grid-column:1/-1;position:static;display:grid;grid-template-columns:1fr 1fr}
  .workspace.is-result>.right>div{padding:24px}
}
@media(max-width:1100px){
  .workspace.is-result{grid-template-columns:288px minmax(0,1fr)}
  .workspace.is-result>.right{grid-column:1/-1;position:static;display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  header{padding:16px;gap:12px}
  .brand{font-size:24px}
  .brand-sub{font-size:12px}
  .header-right{width:auto;margin-left:auto;gap:8px}
  .steps{gap:12px;padding:16px 8px;flex-wrap:wrap;justify-content:center}
  .step{font-size:12px;gap:4px}
  .step b{width:20px;height:20px}
  .workspace.is-setup>.left{width:100%}
  .setup-heading{padding:24px 16px 0}
  .setup-heading h1{font-size:24px;line-height:32px}
  .setup-heading p{font-size:14px}
  .demo-entry{margin:16px 16px 0;padding:12px;gap:12px;flex-wrap:wrap}
  .demo-entry img{width:48px;height:48px}
  .demo-entry div{flex:1;min-width:160px}
  .demo-entry button{width:100%;margin:0}
  .demo-notice{margin:12px 16px 0;font-size:12px}
  .setup-grid{padding:16px;gap:24px;grid-template-columns:1fr}
  .thumb,.reference-preview{height:200px!important}
  .settings-section{grid-template-columns:1fr}
  .retouch-panel>img{height:200px}
  .workspace.is-result{display:flex;flex-direction:column}
  .workspace.is-result>.left,.workspace.is-result>.center,.workspace.is-result>.right{position:static}
  .workspace.is-result>.right{display:block}
}
@media(max-width:400px){
  .brand-sub{display:none}
  .step{font-size:12px}
  .steps{gap:8px}
  .setup-heading h1{font-size:24px}
}

/* Responsive workflow correction */
.workspace.is-result .setup-grid{grid-template-columns:1fr}.workspace.is-result .settings-section{grid-template-columns:1fr}.workspace.is-result .setup-heading h1{font-size:22px}.thumb,.reference-preview{height:auto!important;aspect-ratio:3/4}.label{flex-wrap:wrap}.seg{flex-wrap:wrap}.seg button{white-space:normal;min-width:90px;flex:1}.settings-section input{min-width:0}.brand{font-size:clamp(16px,2vw,24px);flex-wrap:wrap}.brand-sub{display:none}.workspace.is-result>.panel{width:100%}.right>.pad{padding:24px}.retouch-panel .label{display:block}.retouch-panel .seg{display:grid;grid-template-columns:1fr}.image-upload{margin-bottom:16px}dialog{width:min(640px,95vw);border:1px solid var(--line);border-radius:12px;padding:24px}dialog canvas{width:100%;touch-action:none;background:#eee}dialog::backdrop{background:#0006}.settings-section{align-items:start}.settings-section .seg input{width:45%}button{overflow-wrap:break-word}.workspace.is-result .thumb,.workspace.is-result .reference-preview{max-height:360px} @media(max-width:1000px){.workspace.is-result{display:block}.workspace.is-result>.panel{position:static;margin-bottom:20px}.workspace.is-result .setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.workspace{padding:0 12px 24px}.workspace.is-result .setup-grid{grid-template-columns:1fr}.brand{max-width:100%}}

.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}.comparison img{width:100%;height:55vh;object-fit:contain}.compare-dialog{width:min(900px,95vw)}.label{min-height:40px}.workspace.is-result .setup-grid{display:block}.workspace.is-result .setup-grid>section{margin-bottom:24px}.workspace.is-result .thumb,.workspace.is-result .reference-preview{height:auto!important;max-height:none;aspect-ratio:3/4}.brand{line-height:1.4}.brand .mark{flex:none}dialog{max-height:90vh;overflow:auto}dialog canvas{max-height:60vh;object-fit:contain}@media(max-width:1000px){.workspace.is-result .setup-grid{display:grid}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Input and output spacing */
.thumb,.reference-preview,.workspace.is-result .thumb,.workspace.is-result .reference-preview{aspect-ratio:1/1!important;height:auto!important;max-height:none!important}
.settings-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}.settings-section h2{font-size:18px;line-height:28px;margin-bottom:16px}.settings-section .field-label{margin:20px 0 10px}.dimension-fields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end}.dimension-fields label{display:grid;gap:8px}.dimension-fields>span{padding-bottom:10px;color:var(--muted)}.dimension-fields input{width:100%}.copy-settings input{min-height:44px}.settings-section .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:0}.settings-section .seg button{min-width:0;white-space:nowrap;padding:10px 4px}.art-area{padding-bottom:24px}.canvas-bottom:has(.versions.hidden){display:none}.right #checksHint{margin-top:16px;line-height:1.6}.right #exportBtn{margin-top:24px!important;min-height:48px}.right>.pad:last-child{padding-bottom:32px}.retouch-panel .seg{margin-top:20px;gap:12px}.workspace.is-result .settings-section{display:grid;grid-template-columns:1fr}.workspace.is-result .ratio-settings{margin-bottom:24px}@media(max-width:700px){.settings-section{grid-template-columns:1fr;gap:28px}}
/* Wide output ratios must fit the available screen width. */
.art{width:100%;max-width:100%;min-height:0}

/* One visual hierarchy, aligned inputs, and independently scrollable result panels. */
.setup-grid>.ref-section{display:flex;flex-direction:column}.ref-section #background{flex:1;min-height:144px;resize:none}.scene-label{font-size:18px;line-height:28px;font-weight:700;margin:16px 0 12px}.confirm-product{margin-top:16px}.retouch-actions{margin-bottom:12px}.settings-section{align-items:stretch}.copy-settings{display:grid;grid-template-rows:28px 24px 44px 24px 44px;row-gap:12px}.settings-section .copy-settings h2{margin:0}.settings-section .copy-settings .field-label{margin:0;line-height:24px}.ratio-settings{display:grid;grid-template-rows:28px 44px 24px auto;row-gap:12px}.ratio-settings h2,.settings-section .ratio-settings .field-label{margin:0}.dimension-fields{align-self:end}.dimension-fields input{height:44px}.copy-settings input{height:44px}.steps .step{border:0;background:transparent;padding:4px 8px;min-height:36px}.steps .step:hover{background:#e5ebf5}.brief-list{margin:10px 0 0;padding-left:20px;line-height:1.7}.brief-list:empty{display:none}.ai-result{white-space:normal;line-height:1.6}.canvas-head{align-items:center;padding:20px}.canvas-head h1{font-size:22px}.canvas-head p{display:none}.art-area{padding-top:0}.canvas-head button{white-space:nowrap}.summary .small{margin-top:12px}
@media(min-width:1024px){body.result-mode{height:100dvh;overflow:hidden}.workspace.is-result{display:grid;grid-template-columns:280px minmax(0,1fr) 288px;height:calc(100dvh - 156px);min-height:0;align-items:stretch}.workspace.is-result>.left,.workspace.is-result>.center,.workspace.is-result>.right{height:100%;max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;position:static;grid-column:auto;display:block}.workspace.is-result .setup-grid{display:block}.workspace.is-result .setup-grid>section{margin-bottom:24px}.workspace.is-result .settings-section{display:grid;grid-template-columns:1fr}.workspace.is-result .ref-section #background{min-height:150px}.workspace.is-result>.center .art{max-height:calc(100dvh - 264px);object-fit:contain}.workspace.is-result .setup-heading{padding:24px 20px 0}.workspace.is-result .setup-grid{padding:20px}.workspace.is-result .right>.pad{padding:20px}.result-mode .steps{padding:16px}}
@media(max-width:1023px){.workspace.is-result{display:block}.workspace.is-result>.panel{position:static;width:100%;margin-bottom:20px;max-height:none}.workspace.is-result .setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.workspace.is-result .settings-section{grid-template-columns:1fr 1fr}.workspace.is-result>.right{display:block}.workspace.is-result .copy-settings{display:grid}}
@media(max-width:700px){.workspace.is-result .setup-grid,.workspace.is-result .settings-section{grid-template-columns:1fr}.ref-section #background{min-height:144px}.copy-settings,.ratio-settings{height:auto}}
/* Identical row tracks keep the ratio controls aligned with both copy fields. */
.ratio-settings{grid-template-rows:28px 24px 44px 24px 44px;row-gap:12px}
.dimension-fields{align-items:stretch;align-self:stretch}
.dimension-fields label{height:44px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;white-space:nowrap;font-size:14px}
.dimension-fields label input{width:100%;min-width:0;height:40px;padding:0;border:0;background:none}
.dimension-fields>span{align-self:center;padding:0}
.setup-grid>.product-section{display:flex;flex-direction:column}
.product-section>.image-upload,.ref-section>.image-upload{flex:none}
.product-section>#manualMask{margin-bottom:16px}
.product-section>.confirm-product{margin-top:auto}
.confirm-product{font-size:14px;line-height:22px;padding:10px 8px}