/* 商品图转电商标准图 · 样式(方案 A 双栏工作台)
   取值来源:docs/design-previews/v2/DESIGN.md 的 --gw-* 变量;--t-* 字号阶梯与 --s-* 间距别名为本工具新增。 */
:root{
  --gw-bg:#f4f6fb;--gw-surface:#ffffff;--gw-ink:#1a1f3a;--gw-muted:#3d4260;--gw-ph-text:#5b6080;
  --gw-sep:#d6d9e6;--gw-sep-soft:#e6e8f1;--gw-link:#3730a3;--gw-accent:#4338ca;--gw-accent-2:#2563eb;
  --gw-glass:rgba(255,255,255,.62);--gw-glass-fallback:#fdfdff;
  --gw-btn:linear-gradient(135deg,#4338ca,#2563eb);--gw-btn-hover:linear-gradient(135deg,#3730a3,#1d4ed8);
  --gw-seg-bg:#e4e7f3;--gw-tag-bg:#e0e7ff;--gw-tag-fg:#3730a3;--gw-tag2-bg:#e8e9f2;--gw-tag2-fg:#2f3350;
  --ok-fg:#05603a;--ok-bg:#ecfdf3;--ok-line:#a6f4c5;
  --err-fg:#b42318;--err-bg:#fff5f5;--err-line:#fecaca;
  --warn-fg:#4a3000;--warn-bg:#fef3c7;--warn-line:#fde68a;
  --gw-r-sm:12px;--gw-r-md:18px;--gw-r-lg:24px;--gw-pill:980px;
  --gw-sh-1:0 1px 2px rgba(16,24,40,.05),0 12px 32px -14px rgba(16,24,40,.18);
  --gw-focus:0 0 0 3px #ffffff,0 0 0 5px #4338ca;
  --gw-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans",sans-serif;
  /* 字号:固定 rem 阶梯,比例约 1.2 */
  --t-cap:.8125rem;--t-sm:.875rem;--t-base:1rem;--t-md:1.1875rem;--t-lg:1.4375rem;--t-xl:1.75rem;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--gw-bg);scroll-padding-block:88px}
body{margin:0;font-family:var(--gw-font);font-size:var(--t-base);line-height:1.6;color:var(--gw-ink);background:var(--gw-bg);
  -webkit-font-smoothing:antialiased;line-break:strict;overflow-wrap:break-word}
::selection{background:#c7d2fe;color:#1a1f3a}
h1,h2,h3{margin:0;color:var(--gw-ink);line-height:1.3;text-wrap-style:balance}
/* 标题阶梯(DESIGN.md 字号行):桌面 h1 --t-xl / h2·legend --t-md / h3 --t-base;窄屏见 860px 断点 */
h1{font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em}
h2,fieldset.sec>legend{font-size:var(--t-md);font-weight:650;letter-spacing:-.01em}
h3{font-size:var(--t-base);font-weight:600}
p{margin:0;text-wrap-style:pretty}
.nw{white-space:nowrap}            /* 词组不拆:标题/规格名里的短语整体换行 */
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--gw-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:16px;height:16px}
a{color:var(--gw-link)}
:is(a,button,input,textarea,summary,label,[tabindex]):focus-visible{outline:none;box-shadow:var(--gw-focus);border-radius:var(--gw-r-sm)}

/* 顶栏:唯一用玻璃的地方(chrome),内容一律实底 */
.topbar{position:sticky;top:0;z-index:10;background:var(--gw-glass-fallback);border-bottom:1px solid var(--gw-sep-soft)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:var(--gw-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}
@media (prefers-reduced-transparency:reduce){.topbar{background:var(--gw-glass-fallback);backdrop-filter:none;-webkit-backdrop-filter:none}}
.topbar__in{max-width:1240px;margin:0 auto;padding:var(--s-3) var(--s-6);display:flex;align-items:center;gap:var(--s-4);min-height:64px}
.topbar__sp{flex:1}

/* 徽标(状态 = 图标 + 文字,不只靠颜色) */
.badge{display:inline-flex;align-items:center;gap:var(--s-1);min-height:28px;padding:var(--s-1) var(--s-3);border-radius:var(--gw-pill);font-size:var(--t-cap);font-weight:600;line-height:1.3;white-space:nowrap;border:1px solid transparent}
.badge--demo{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-line)}
.badge--ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-line)}
.badge--err{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-line)}
.badge--run{background:var(--gw-tag-bg);color:var(--gw-tag-fg)}
.badge--wait{background:var(--gw-tag2-bg);color:var(--gw-tag2-fg)}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:10px 20px;border-radius:var(--gw-pill);
  font:inherit;font-size:var(--t-base);font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;border:1px solid transparent;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{color:#fff;background-color:var(--gw-accent);background-image:var(--gw-btn)}
.btn--primary:hover{background-image:var(--gw-btn-hover)}
.btn--ghost{color:var(--gw-ink);background:#fff;border-color:var(--gw-sep)}
.btn--ghost:hover{border-color:#a5b4fc;background:#f8f9ff}
.btn--text{color:var(--gw-link);background:none;padding-inline:12px}
.btn--text:hover{background:rgba(67,56,202,.08)}
.btn[aria-disabled=true],.btn:disabled{cursor:not-allowed;background:var(--gw-seg-bg);background-image:none;color:#3d4260;border-color:transparent}
.btn--icon{width:44px;padding:0;gap:0}  /* 只有图标,不需要图标与文字的间距 */
.btn--block{width:100%}

/* 表单 */
.field{display:grid;gap:var(--s-1)}
.field label,.label{font-size:var(--t-sm);font-weight:600;color:var(--gw-ink)}
.opt{font-weight:400;color:var(--gw-muted)}
.input{width:100%;min-height:44px;padding:10px 14px;font:inherit;font-size:var(--t-base);color:var(--gw-ink);background:#fff;border:1px solid var(--gw-sep);border-radius:var(--gw-r-sm);
  transition:border-color .18s var(--ease)}
.input::placeholder{color:var(--gw-ph-text)}
.input:hover{border-color:#b9bfd6}
.input:focus-visible{border-color:var(--gw-accent)}
textarea.input{min-height:88px;resize:vertical;line-height:1.5}
.help{font-size:var(--t-cap);color:var(--gw-muted);line-height:1.5}

/* 规格选择:整行可点,≥44px */
.spec{display:flex;align-items:center;gap:var(--s-3);min-height:48px;padding:var(--s-1) var(--s-3);border:1px solid var(--gw-sep);border-radius:var(--gw-r-sm);background:#fff;cursor:pointer;
  transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.spec:hover{border-color:#a5b4fc}
.spec:has(input:checked){border-color:#c7d2fe}
.spec input{appearance:none;margin:0;width:20px;height:20px;border:1.5px solid #8b90ab;border-radius:6px;background:#fff;flex:none;display:grid;place-items:center}
.spec input:checked{border-color:var(--gw-accent);background:var(--gw-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.spec:has(input:focus-visible){box-shadow:var(--gw-focus)}
.spec__name{flex:1;min-width:0;font-weight:500}
.spec__size{font-size:var(--t-cap);color:var(--gw-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ratio{flex:none;width:22px;height:22px;display:grid;place-items:center}
.ratio i{display:block;border:1.5px solid #6b7090;border-radius:2px}

/* 进度条:可测量 → 确定型,带名称与文字 */
.bar{height:8px;border-radius:var(--gw-pill);background:var(--gw-seg-bg);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:inherit;background:var(--gw-accent);background-image:var(--gw-btn);transition:width .25s var(--ease)}

/* 骨架屏(生成中的格子),减弱动态时静止 */
.skel{background:linear-gradient(100deg,#e9ecf5 30%,#f5f6fb 50%,#e9ecf5 70%) 0 0/300% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 三种页面状态:body[data-state=upload|progress|result] */
body[data-state=upload] [data-only]:not([data-only~=upload]),
body[data-state=progress] [data-only]:not([data-only~=progress]),
body[data-state=result] [data-only]:not([data-only~=result]){display:none!important}
[hidden]{display:none!important}

/* 页面骨架 */
.wrap{max-width:1240px;margin:0 auto;padding:var(--s-5) var(--s-6) var(--s-7)}
.a-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:var(--s-5);align-items:start}
.panel{background:var(--gw-surface);border:1px solid var(--gw-sep-soft);border-radius:var(--gw-r-md);box-shadow:var(--gw-sh-1)}
.settings{position:sticky;top:88px}
.sec{padding:var(--s-5);display:grid;gap:var(--s-3)}
.sec+.sec{border-top:1px solid var(--gw-sep-soft)}
fieldset.sec{border:0;margin:0;min-width:0}
fieldset.sec+.sec,.sec+fieldset.sec{border-top:1px solid var(--gw-sep-soft)}
.sec__h{display:flex;align-items:center;gap:var(--s-3);min-height:32px}
.sec__h h2{flex:1}
/* legend 是 fieldset 的第一个子元素(分组才有名字);float 让它成为普通网格项,和 h2 一样排版 */
fieldset.sec>legend{float:left;padding:0;min-height:32px;display:flex;align-items:center;gap:var(--s-1);color:var(--gw-ink);line-height:1.3}
.sec--tools{grid-template-columns:minmax(0,1fr) auto}
.sec--tools>.specs{grid-column:1/-1}
.sec__tools{display:flex;align-items:center;gap:var(--s-3)}
.count{font-size:var(--t-sm);color:var(--gw-muted);flex:1;text-align:end}
.specs{display:grid;gap:var(--s-2)}
body[data-state=progress] .settings :is(.spec,.input,.drop){background:#f7f8fc;cursor:not-allowed}
body[data-state=progress] .settings .spec input:checked{background-color:#6b7090;border-color:#6b7090}
.spec__use{display:block;font-size:var(--t-cap);color:var(--gw-muted);font-weight:400;line-height:1.3}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.drop{display:grid;justify-items:center;gap:6px;padding:var(--s-5) var(--s-4);text-align:center;border:1.5px dashed #9aa0bd;border-radius:var(--gw-r-sm);background:#fafbff;cursor:pointer;transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.drop:hover,.drop.is-over{border-color:var(--gw-accent);background:#f5f6ff}
.drop:has(input:focus-visible){box-shadow:var(--gw-focus)}
.drop__icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gw-tag-bg);color:var(--gw-tag-fg)}
.drop__t{font-weight:600}
.drop__link{color:var(--gw-link);text-decoration:underline;text-underline-offset:3px;margin-inline-start:2px}
.filerow{display:flex;align-items:center;gap:var(--s-3)}
.filerow img{width:64px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--gw-sep-soft)}
.filerow__meta{flex:1;min-width:0;display:grid}
.filerow__meta strong{overflow:hidden;text-overflow:ellipsis}
.btn--sm{min-height:44px;padding:8px 14px;font-size:var(--t-sm)}
.foot{padding:var(--s-4) var(--s-5) var(--s-5);border-top:1px solid var(--gw-sep-soft);display:grid;gap:var(--s-3)}
.foot .help{text-align:center}
.err-msg{margin:0;padding:var(--s-3) var(--s-4);border-radius:var(--gw-r-sm);background:var(--err-bg);color:var(--err-fg);border:1px solid var(--err-line);font-size:var(--t-sm)}
.results{min-height:640px;display:flex;flex-direction:column}
.res__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-4)}
.res__head h2{flex:1;min-width:10em}
.prog{margin:0 var(--s-5);display:grid;gap:var(--s-3)}  /* 面板里不再套卡片:进度直接排在标题下 */
.prog__line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);font-size:var(--t-sm)}
.prog__line strong{font-size:var(--t-base)}
.note{margin:0 var(--s-5);display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--gw-r-sm);font-size:var(--t-sm)}
.note--ok{background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-line)}
.note--warn{background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-line)}
.note .i{margin-top:2px}
/* auto-fit:选的规格少时不留空列 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-4);padding:var(--s-5)}
.tile{display:grid;gap:var(--s-3);margin:0;align-content:start;max-width:360px}
.frame{position:relative;aspect-ratio:1;border-radius:var(--gw-r-sm);background:#eef0f6;display:grid;place-items:center;overflow:hidden;border:1px solid var(--gw-sep-soft)}
.frame img{max-width:88%;max-height:88%;object-fit:contain;border-radius:4px;box-shadow:0 1px 2px rgba(16,24,40,.08),0 4px 12px -4px rgba(16,24,40,.16)}
.frame .ph{border-radius:4px;max-width:88%;max-height:88%}
.frame .ph--wait{border:1.5px dashed #9aa0bd;background:transparent}
.frame--err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-fg);text-align:center;padding:var(--s-4);gap:var(--s-2);align-content:center}
.frame--err .help{color:inherit}
.frame__zoom{position:absolute;inset:auto 8px 8px auto;min-height:44px;padding:6px 12px;font-size:var(--t-cap);background:rgba(255,255,255,.94);border:1px solid var(--gw-sep);border-radius:var(--gw-pill);color:var(--gw-ink);display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.cap{display:flex;align-items:flex-start;gap:var(--s-3)}
.cap__t{flex:1;min-width:0;display:grid;line-height:1.4}
.cap__t strong{font-weight:600}
.cap__t span{font-size:var(--t-cap);color:var(--gw-muted)}
.tech{font-size:var(--t-cap);color:var(--gw-muted)}
.tech summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--gw-link)}
.tech pre{margin:0;white-space:pre-wrap;word-break:break-all;background:#f7f8fc;border:1px solid var(--gw-sep-soft);border-radius:8px;padding:var(--s-2) var(--s-3);font-size:var(--t-cap);color:var(--gw-ink)}
.warn{font-size:var(--t-cap);color:var(--warn-fg);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;padding:var(--s-1) var(--s-2);margin:0}
.empty{flex:1;display:grid;align-content:center;justify-items:center;gap:var(--s-4);padding:var(--s-6) var(--s-5) var(--s-7);text-align:center}
.empty p{max-width:30em;color:var(--gw-muted)}
.shapes{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:var(--s-4) var(--s-5);margin-top:var(--s-3)}
.shape{display:grid;justify-items:center;gap:6px;font-size:var(--t-cap);color:var(--gw-muted)}
.shape i{display:block;border:1.5px solid #9aa0bd;border-radius:6px;background:#fff}
.r1-1{width:48px;height:48px}.r2-3{width:36px;height:54px}.r3-4{width:42px;height:54px}.r16-9{width:60px;height:33px}.r9-16{width:33px;height:60px}
.zip-m{border-top:1px solid var(--gw-sep-soft)}
.spin{animation:rot 1s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}
.logout{margin:0}
@media (min-width:861px){.zip-m{display:none!important}}
@media (max-width:1100px){.a-grid{grid-template-columns:340px minmax(0,1fr)}.grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media (max-width:860px){
  .wrap{padding:var(--s-4) var(--s-4) 0}.topbar__in{padding:var(--s-2) var(--s-4);gap:var(--s-2);flex-wrap:wrap}.hide-s{display:none}
  .a-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .settings{position:static}
  body:not([data-state=upload]) .results{order:-1}
  .results{min-height:0}
  .sec{padding:var(--s-4)}.res__head{padding:var(--s-4) var(--s-4) var(--s-3)}.prog,.note{margin-inline:var(--s-4)}
  .grid{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:var(--s-3);padding:var(--s-4)}
  .tile{max-width:none;min-width:0}
  html{scroll-padding-block:88px 124px}  /* 吸底按钮栏约 105px 高,Tab 到的字段不被它盖住 */
  .row2{grid-template-columns:1fr}
  .foot{position:sticky;bottom:0;background:#fff;border-radius:0 0 var(--gw-r-md) var(--gw-r-md);padding:var(--s-3) var(--s-4) var(--s-4)}
  .empty{padding:var(--s-5) var(--s-4)}
  .res-zip-top{display:none!important}
  .cap{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .cap__t{width:100%}
  .frame__zoom{padding:6px 10px}
  .note{border-color:transparent}  /* 窄屏提示条只留底色,不在面板里再套一层卡片 */
  h1{font-size:var(--t-lg)}h2,fieldset.sec>legend{font-size:var(--t-base);font-weight:700}  /* 窄屏阶梯 h1 --t-lg / h2·legend·h3 --t-base,靠字重区分 */
}

/* 登录页 */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--s-5) var(--s-4)}
.login__card{width:100%;max-width:400px;padding:var(--s-6) var(--s-5);display:grid;gap:var(--s-4)}
.login__card h1{font-size:var(--t-lg)}
.login__card .help{margin-top:calc(-1 * var(--s-2))}

/* 文件名过长时单行省略,完整名放在 title */
#file-name{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}