:root{--bg:#f3f5f1;--card:#fff;--ink:#1f2a1c;--muted:#727d6c;--line:#dde4d7;--accent:#426437;--accent2:#5c8a4c;--deep:#22361c;--accent-ink:#fff;--soft:#e7eee2;--red:#c0392b}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.6 -apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:5px 12px;min-width:0;max-width:100%;overflow-wrap:anywhere}
button:hover{border-color:#b3c4a8}
button:disabled{opacity:.5;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:9px 16px;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent}
input[type=text],input:not([type]),select{border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:#fff;width:100%}
input:focus,select:focus{outline:2px solid #b7cfa8;outline-offset:0}
.muted{color:var(--muted);margin:4px 0}.small{font-size:12px}.err{color:var(--red);margin:6px 0 0;min-height:0;font-size:13px}

header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);flex:none}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.brand b{font-size:18px;letter-spacing:2px}.brand span{color:var(--muted)}.brand em{font-style:normal;font-size:11px;border:1px solid var(--line);border-radius:10px;padding:0 7px;color:var(--muted)}
nav{display:flex;align-items:center;gap:16px;font-size:13px}
.sel{display:flex;align-items:center;gap:6px;white-space:nowrap}.sel select{width:auto;padding:4px 8px}
.switch{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.switch input{display:none}.switch i{width:30px;height:17px;border-radius:9px;background:#c2ccbb;position:relative;transition:.15s}
.switch i:after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked+i{background:var(--accent)}.switch input:checked+i:after{left:15px}

#home{max-width:1080px;width:100%;margin:0 auto;padding:28px 24px 60px;overflow:auto}
.hero h1{font-size:24px;margin:0 0 6px}.hero p{color:var(--muted);margin:0 0 18px}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:38px;border:2px dashed #b3c6a6;border-radius:12px;background:#f6f9f3;cursor:pointer;text-align:center}
.drop strong{font-size:16px}.drop span{color:var(--muted);font-size:13px}.drop.over{background:var(--soft);border-color:var(--accent)}
h2{font-size:15px;margin:30px 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;position:relative}
.pcard:hover{box-shadow:0 4px 16px rgba(30,50,25,.12)}
.pcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#eee}
.pcard div{padding:8px 12px}.pcard b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pcard span{font-size:12px;color:var(--muted)}
.pcard .del{position:absolute;top:6px;right:6px;padding:0 7px;border-radius:12px;opacity:0;background:rgba(255,255,255,.9)}.pcard:hover .del{opacity:1}
.empty{color:var(--muted);padding:20px 0}

#editor{flex:1;display:flex;min-height:0}
#editor[hidden],#home[hidden]{display:none}
.stagecol{flex:1;min-width:0;display:flex;flex-direction:column}
.toolbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.title{display:flex;align-items:center;gap:12px}.title a{color:var(--muted);text-decoration:none}.title span{font-size:12px;background:var(--soft);padding:1px 8px;border-radius:10px;color:var(--accent)}
.tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.tools button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tools .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.tools .size{display:flex;align-items:center;gap:6px;color:var(--muted)}.tools .size input{width:90px}
.tools .chk{display:flex;gap:5px;align-items:center;color:var(--muted)}
#zoomTxt{min-width:38px;text-align:center;color:var(--muted)}
.stagewrap{flex:1;min-height:0;overflow:auto;display:flex;position:relative;background:#e4e9e0}
.stage{position:relative;margin:auto;line-height:0;user-select:none;-webkit-user-select:none;box-shadow:0 2px 20px rgba(0,0,0,.15)}
.stage>img{display:block;width:100%;height:100%}
#overlay{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
#cursor{position:absolute;border:1.5px solid #fff;outline:1px solid rgba(0,0,0,.6);border-radius:50%;pointer-events:none;display:none;transform:translate(-50%,-50%)}
.hint{position:sticky;left:0;bottom:0;align-self:flex-end;width:0;height:0}
.hint span{position:absolute;left:14px;bottom:12px;white-space:nowrap;background:rgba(30,26,22,.78);color:#fff;font-size:12.5px;padding:5px 12px;border-radius:14px;line-height:1.5}
/* 对比手柄到达边缘时不能撑出滚动条，否则会反复触发图片适应尺寸。 */
.cmp{position:absolute;inset:0;cursor:ew-resize;background:#000;overflow:hidden;touch-action:none}
.cmp[hidden]{display:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cmpclip{position:absolute;inset:0;overflow:hidden}
.cmpbar{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.5);transform:translateX(-1px)}
.cmpbar i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#333;font-style:normal;font-size:11px;line-height:1;padding:8px 6px;border-radius:14px;white-space:nowrap;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.cmp .tag{position:absolute;top:12px;line-height:1.5;font-size:12px;color:#fff;background:rgba(0,0,0,.55);padding:2px 10px;border-radius:12px}.cmp .tag.l{left:12px}.cmp .tag.r{right:12px}
.strip{flex:none;background:var(--card);border-top:1px solid var(--line);padding:8px 16px 10px}
.striphead{font-size:12px;color:var(--muted);margin-bottom:6px}
.variants{display:flex;gap:10px;overflow-x:auto}
.vcard{flex:none;width:168px;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;cursor:pointer}
.vcard.on{border-color:var(--accent)}
.vcard img{width:100%;height:84px;object-fit:cover;display:block}
.vcard .vn{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;font-size:13px}
.vcard .vn span{font-size:11px;color:var(--muted)}
.vcard .va{display:flex;gap:4px;padding:0 6px 6px;flex-wrap:wrap}
.vcard .va a,.vcard .va button{font-size:11.5px;padding:1px 6px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);background:#fff}

aside{flex:none;width:370px;background:var(--card);border-left:1px solid var(--line);overflow:auto;padding:4px 18px 30px}
.step{padding:14px 0;border-bottom:1px solid var(--line)}
.step:last-child{border:0}
.step h3{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:8px}
.step h3 i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
details{font-size:13px;margin-top:6px}summary{cursor:pointer;color:var(--accent)}
.mini span{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:13px;background:#fff;white-space:nowrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tabs button{font-size:12.5px;padding:3px 10px;border-radius:14px}.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:300px;overflow:auto;padding:2px}
.prod{border:2px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:#fff}
.prod.on{border-color:var(--accent);box-shadow:0 0 0 2px #cde0c1}
.prod img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#eef2ea}
.prod b{display:block;font-size:12px;line-height:1.35;padding:4px 6px 0;font-weight:500}
.prod span{display:block;font-size:11px;color:var(--muted);padding:0 6px 5px}
.nrow{display:flex;align-items:center;gap:8px;white-space:nowrap}   /* 右边面板窄的时候「一次出」「张候选」不要折成两行 */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:3px 12px;border-right:1px solid var(--line)}.seg button:last-child{border:0}.seg button.on{background:var(--ink);color:#fff}
.go .primary{width:100%;margin-top:6px;font-size:15px}
.cands{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.cand{border:2px solid var(--line);border-radius:8px;overflow:hidden;background:#f6f8f4;cursor:pointer;position:relative;min-height:96px}
.cand.on{border-color:var(--accent);box-shadow:0 0 0 2px #cde0c1}
.cand img{width:100%;display:block}
.cand .wait{padding:14px 10px;font-size:12.5px;color:var(--muted);cursor:default}
.cand .bar{height:5px;background:var(--soft);border-radius:3px;overflow:hidden;margin-top:8px}.cand .bar i{display:block;height:100%;background:var(--accent);transition:width 1s linear}
.cand .no{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;line-height:1.5;padding:0 7px;border-radius:9px}
.cand .fail{padding:14px 10px;font-size:12.5px;color:var(--red)}
#saveRow{display:flex;flex-direction:column;gap:8px;margin-top:10px}

dialog{border:0;border-radius:12px;padding:20px 24px;width:min(880px,92vw);max-height:86vh;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(15,26,12,.5)}
.dlghead{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:6px}
#addProd{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:8px;margin:12px 0 4px;align-items:center}
#addProd input[name=desc]{grid-column:1/3}
#addProd .mini{grid-column:3}#addProd .primary{grid-column:1/4;justify-self:start;padding:6px 22px}
.liblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:14px}
.lib{display:flex;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px;align-items:center;position:relative}
.lib img{width:54px;height:54px;object-fit:cover;border-radius:4px;flex:none}
.lib b{display:block;font-size:12.5px;line-height:1.35}.lib span{font-size:11px;color:var(--muted);display:block}
.lib button{position:absolute;right:4px;top:4px;font-size:11px;padding:0 6px;border-radius:10px}
.lib{cursor:pointer;white-space:normal}
.lib>input{flex:none;margin:0;accent-color:var(--accent)}
.lib.sel{border-color:var(--accent);background:#f2f7ee}
.lib .ldate{color:#9aa592;font-size:10.5px}
#libList{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.lib .lcode,.lib .ldate{white-space:normal;overflow-wrap:anywhere}
.libbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 10px}
.libbar select{font:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;width:auto;flex:none;margin:0}
.libbar .chk{display:flex;gap:5px;align-items:center;font-size:13px;color:var(--muted)}
.libbar #libDelMode,.libbar .libdel{margin-left:auto}
.libbar .libdel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%}
.libbar .libdel[hidden]{display:none}
#addProd{margin-bottom:6px}
button.danger{background:#fff;color:#b3401f;border:1px solid #e3b9ab}
button.danger:hover:not(:disabled){background:#fbeee9}
button.danger:disabled{opacity:.5}
/* 平时：点产品 = 改信息；点图 = 看大图。批量删除时：出勾选框，点产品 = 选中 */
.lib{cursor:pointer}
.lib>input{display:none}
.liblist.picking .lib>input{display:block}
.lib:hover{border-color:#b9c9ad;background:#fafcf9}
.lib img{cursor:zoom-in}
.liblist.picking .lib img{cursor:pointer}
/* 改产品 */
.prodedit{width:min(560px,92vw)}
.prodedit .pebody{display:flex;gap:16px;align-items:flex-start;margin-top:8px}
.prodedit .peimg{position:relative;flex:none;width:160px;height:160px;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#f4f6f1}
.prodedit .peimg img{width:100%;height:100%;object-fit:contain}
.prodedit .peimg span{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:12px;color:#fff;background:rgba(40,60,30,.7);padding:3px 0}
.prodedit .pefields{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.prodedit .pefields label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.prodedit .pefields input,.prodedit .pefields select{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.prodedit .dlgfoot{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.prodedit .dlgfoot span{flex:1}
/* 产品库：管理类别。一行一类：挪位置、名称、前缀、说明、关键词、换图方式、件数、保存/删除 */
.catdlg{width:min(1080px,96vw)}
.catrow,.cathead{display:grid;grid-template-columns:58px minmax(90px,1.1fr) 76px minmax(110px,1.6fr) minmax(100px,1.4fr) minmax(110px,1.3fr) 48px 118px;gap:6px;align-items:center}
.cathead{font-size:12px;color:var(--muted);padding:0 4px 4px;border-bottom:1px solid var(--line)}
.catlist{display:flex;flex-direction:column}
.catrow{padding:6px 4px;border-bottom:1px solid var(--line)}
.catrow input,.catrow select{font:inherit;font-size:13px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;min-width:0;width:100%;margin:0;color:var(--ink)}
.catrow .px{text-transform:uppercase}
.catrow .cmove{display:flex;gap:2px}
.catrow .cmove button{padding:2px 7px;font-size:13px}
.catrow .cnt{color:var(--muted);text-align:right;white-space:nowrap}
.catrow .cact{display:flex;gap:6px;justify-content:flex-end}
.catrow .cact button{padding:4px 10px;font-size:13px}
.catrow .delbox{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;background:#fbeee9;border-radius:8px;padding:8px 10px}
.catrow .delbox[hidden]{display:none}
.catrow .delbox select{width:auto}
.catadd{background:#f4f6f1;border-radius:10px;margin-top:10px;border:none}
.catsuggest{margin-top:10px;padding:10px 12px;border:1px solid #cfe0c4;border-radius:10px;background:#f4f9ef;font-size:13px;display:flex;flex-direction:column;gap:6px}
.catsuggest[hidden]{display:none}
.catsuggest .sgl{display:flex;flex-wrap:wrap;gap:4px 14px}
.catsuggest label{display:flex;gap:5px;align-items:center}
.catsuggest .sgb{display:flex;gap:8px}
@media (max-width:860px){
  .cathead{display:none}
  .catrow{grid-template-columns:1fr 1fr;padding:10px 4px}
  .catrow .cmove{grid-column:1/-1}
  .catrow .lb,.catadd [name=label]{grid-column:1/-1}
  .catrow .ds,.catrow .wd,.catrow .lk,.catadd [name=desc],.catadd [name=words],.catadd select{grid-column:1/-1}
  .catrow .cnt{text-align:left}
}
#peDate{overflow-wrap:anywhere}
/* 看大图 */
dialog.imgview{padding:12px;background:#111;border:none;border-radius:12px;width:auto;max-width:94vw;max-height:calc(100dvh - 24px);overflow:auto}
.imgview::backdrop{background:rgba(0,0,0,.6)}
.imgview img{display:block;height:min(78vh,900px);max-height:max(1px,calc(100dvh - 112px));width:auto;max-width:min(90vw,calc(94vw - 24px));object-fit:contain;border-radius:6px;background:#fff}   /* 给关闭按钮预留高度，小图也放大到看得清 */
.imgview button{display:block;margin:10px auto 0;color:#fff;background:transparent;border:1px solid #777}
.imgview button:hover{background:#333}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:rgba(30,26,22,.92);color:#fff;padding:9px 20px;border-radius:20px;z-index:99;font-size:14px;max-width:80vw}
#toast[hidden]{display:none}
[hidden]{display:none!important}

/* 材质通道图说明 */
.chan p{margin:6px 0;color:#566150;line-height:1.65}.chan p b{color:var(--ink)}
.chdemo{display:flex;gap:10px;margin:8px 0 4px}.chdemo figure{margin:0;flex:1}.chdemo svg{width:100%;display:block;border-radius:4px;border:1px solid var(--line)}
.chdemo figcaption{font-size:11.5px;color:var(--muted);text-align:center;margin-top:2px}
/* 一次改几处 */
.addrg{width:100%;border-style:dashed;color:var(--accent);background:#f4f8f0;margin-bottom:10px}
.rglist{margin:0 0 10px;display:flex;flex-direction:column;gap:6px}
.rg{display:flex;align-items:center;gap:8px;border:1px solid #cfdcf3;background:#f3f7fe;border-radius:8px;padding:5px 8px}
.rg i{flex:none;font-style:normal;width:20px;height:20px;border-radius:50%;background:#0a5fd8;color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.rg img{flex:none;width:32px;height:32px;object-fit:cover;border-radius:4px}
.rg div{flex:1;min-width:0}.rg b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rg span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg button{flex:none;padding:0 7px;border-radius:12px}
/* 候选：重出 */
.cand .redo{position:absolute;right:6px;top:6px;font-size:11px;line-height:1.5;padding:0 8px;border-radius:9px;background:rgba(255,255,255,.92);border:0}
.cand .redo:hover{background:#fff;color:var(--red)}
.cand .redo2{margin-top:6px;font-size:12px}
.more{width:100%;border-style:dashed;font-size:13px;color:var(--muted)}
#jobDesc{line-height:1.6}

/* 高亮色选择 */

/* 点选范围：小 / 中 / 大 */
.lvl{display:inline-flex;align-items:center;gap:4px;background:#fff4d6;border:1px solid #f0d58a;border-radius:8px;padding:2px 4px 2px 8px;white-space:nowrap}
.lvl .seg button{padding:1px 10px}

/* 第 3 步：三种改法 */
.kinds{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:10px}
.kinds button{flex:1;border:0;border-radius:0;border-right:1px solid var(--line);padding:6px 4px;font-size:12.5px;background:#f6f8f4}
.kinds button:last-child{border-right:0}.kinds button.on{background:var(--ink);color:#fff}
.colorrow{display:grid;grid-template-columns:44px 96px 1fr;gap:6px;align-items:center}
.colorrow input[type=color]{width:44px;height:34px;padding:2px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.swatches button{width:26px;height:26px;padding:0;border-radius:6px;border:1px solid #bfcab8}
.rg .sw{flex:none;width:32px;height:32px;border-radius:4px;border:1px solid #bfcab8}
.rg .del{flex:none;width:32px;height:32px;border-radius:4px;background:#fdeceb;color:var(--red);display:flex;align-items:center;justify-content:center;font-size:16px}

/* 「这张图要改的地方」总览 + 「正在设置第 N 处」的框 */
.places{padding:12px 0 10px;border-bottom:1px solid var(--line)}
.phead{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.phead b{font-size:14px}.phead span{font-size:12px;color:var(--muted)}
.places .rglist{margin:0 0 6px}
.rg{cursor:default}
.rg .edit{flex:none;font-size:12px;padding:1px 8px;border-radius:10px}
.rg.cur{border:2px solid var(--accent);background:#f0f6ec}
.rg.cur i,.curhead i{background:var(--accent)}
.curbox{border:2px solid var(--accent);border-radius:10px;margin:12px 0 0;padding:0 12px 12px;background:#fbfdfa}
.curhead{display:flex;align-items:center;gap:8px;margin:0 -12px;padding:7px 12px;background:#f0f6ec;border-bottom:1px solid #d2e0c8;border-radius:8px 8px 0 0}
.curhead i{font-style:normal;width:20px;height:20px;border-radius:50%;color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.curbox .step:last-of-type{border-bottom:0}
.curbox .addrg{margin:4px 0 0}

/* 五种改法 */
.kinds button{white-space:nowrap;padding:6px 2px}
#kindAdd input,#kindOther input{margin:4px 0 6px}
.refpick{display:block;margin-bottom:4px}
.rg .ic{flex:none;width:32px;height:32px;border-radius:4px;background:#eef3ea;color:#3d6b2f;display:flex;align-items:center;justify-content:center;font-size:17px}
.rg .ic.o{background:#f1edf7;color:#6a4a9c}

/* 就地弹出的小框 */
.pop{position:fixed;z-index:50;width:330px;max-height:calc(100vh - 90px);overflow:auto;background:#fff;border:2px solid var(--accent);border-radius:12px;box-shadow:0 12px 40px rgba(20,40,15,.28);padding:0 12px 12px}
.pophead{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;margin:0 -12px 10px;padding:8px 12px;background:#f0f6ec;border-bottom:1px solid #d2e0c8}
.pophead i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.pophead b{flex:1}.pophead button{padding:0 8px;font-size:16px;line-height:1.4}
.pop .prods{grid-template-columns:repeat(3,1fr);max-height:220px}
.pop #note,.pop #region{margin-top:8px}
.popfoot{display:flex;gap:8px;margin-top:10px}.popfoot button{flex:1}
.howto ol{margin:4px 0 8px;padding-left:20px;color:#566150;line-height:1.7;font-size:13px}
.popchip{position:fixed;z-index:49;background:var(--accent);color:#fff;border:2px solid #fff;border-radius:16px;padding:4px 12px;font-size:13px;box-shadow:0 4px 14px rgba(20,40,15,.3)}
.popchip:hover{filter:brightness(1.08)}
.tools .cmpbtn{border-color:var(--accent);color:var(--accent);font-weight:600}

/* 360 全景 */
#pano{flex:1;display:flex;min-height:0}#pano[hidden]{display:none}
.drop.pano{margin-top:12px;padding:20px;border-color:#b9c7d8;background:#f7fafd}
.drop.pano.over{background:#eaf1f9;border-color:#5a7fa8}
.pcard .b360{position:absolute;left:8px;top:8px;background:rgba(20,40,70,.82);color:#fff;font-size:11px;line-height:1.6;padding:0 8px;border-radius:10px}
.panowrap{flex:1;min-height:0;display:flex;background:#131a11;padding:14px}
.panostage{position:relative;flex:1;min-width:0;min-height:0;line-height:0;user-select:none;-webkit-user-select:none}   /* 占满整个画面区域，收起方案条、拖宽都会跟着变大 */
.panostage canvas{width:100%;height:100%;display:block;border-radius:4px;touch-action:none}
.panostage .tag{position:absolute;top:12px;line-height:1.5;font-size:12px;color:#fff;background:rgba(0,0,0,.55);padding:2px 10px;border-radius:12px}
.panostage .tag.l{left:12px}.panostage .tag.r{right:12px}
.panostage .cmpbar{cursor:ew-resize;width:2px}
.panostage .cmpbar:before{content:"";position:absolute;top:0;bottom:0;left:-10px;right:-10px}
/* 全景：这一轮一起改的视角 */
.viewrot{position:absolute;inset:0;z-index:5;padding:8px;box-sizing:border-box;line-height:0}   /* 全景里的视角：抓手时盖在图上、能转的全景 */
.viewrot canvas{width:100%;height:100%;display:block;border-radius:10px;touch-action:none}
.viewbatch{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--line)}
.viewbatch[hidden]{display:none}
.viewbatch button,aside .viewbatch .wide{margin:0;height:auto;min-height:42px;padding:7px 10px;font-size:14px;letter-spacing:1px;white-space:normal;overflow:hidden;overflow-wrap:anywhere;text-overflow:clip}
.brow.draft{border-style:dashed;background:#fff}
aside #pnBatchApply{height:auto;min-height:48px;white-space:normal;overflow:hidden;overflow-wrap:anywhere;text-overflow:clip;letter-spacing:1px;font-size:15px;padding:9px 10px}
.brow.draft .binfo em{color:var(--muted)}
.batchlist{display:flex;flex-direction:column;gap:10px;margin:8px 0 10px}
.brow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fafcf9}
.brow .bview{width:72px;height:54px;object-fit:cover;border-radius:6px}
.brow .binfo{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.brow .binfo b{font-size:13px;display:flex;align-items:center;gap:6px}
.brow .bno{flex:none;font-style:normal;width:18px;height:18px;border-radius:50%;color:#fff;font-size:11px;line-height:18px;text-align:center}
.brow .binfo span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .binfo em{font-style:normal;color:var(--accent);font-size:12px}
.brow .bcands{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.brow .bcands img{width:64px;height:46px;object-fit:cover;border-radius:5px;border:2px solid transparent;cursor:pointer;opacity:.75}
.brow .bcands img.on{border-color:var(--accent);opacity:1}
.brow .bcands img:hover{opacity:1}
.brow .bwait{display:inline-flex;align-items:center;justify-content:center;width:64px;height:46px;border-radius:5px;background:#eef2ea;color:var(--muted);font-size:11px}
.brow .bact{grid-column:1/-1;display:flex;gap:6px}
.brow .bact button{flex:1;font-size:12px;padding:3px 8px}
.aibadge{position:absolute;right:12px;bottom:12px;line-height:1.5;font-size:12px;color:#fff;background:rgba(0,0,0,.5);padding:2px 10px;border-radius:6px;pointer-events:none}
button.wide{width:100%;font-size:15px;margin-top:4px}
.dlrow{display:flex;gap:8px;margin:6px 0}
.btnlink{flex:1;text-align:center;border:1px solid var(--line);border-radius:6px;padding:6px 8px;text-decoration:none;color:var(--ink);background:#fff;font-size:13px}
.btnlink:hover{border-color:#b3c4a8}
.viewnote{background:#eef4fb;border:1px solid #cfdcf3;border-radius:8px;padding:8px 10px;margin:12px 0 0;font-size:13px;line-height:1.6;color:#2c4a70}
.tools .cmpbtn.on{background:var(--accent);color:#fff}
.panostage .cmpbar i{cursor:ew-resize;font-size:12px;padding:9px 10px}
.panostage .cmpbar:before{left:-16px;right:-16px}

/* 出图后的自检 */
.cand .chk{position:absolute;left:6px;bottom:6px;font-size:11px;line-height:1.5;padding:0 7px;border-radius:9px;color:#fff}
.cand .chk.ok{background:rgba(30,130,70,.88)}.cand .chk.bad{background:rgba(200,110,0,.94)}
.checkbox{border-radius:8px;padding:9px 11px;margin:8px 0;font-size:13px;line-height:1.6;display:flex;flex-direction:column;gap:4px}
.checkbox.ok{background:#eef7f0;border:1px solid #c6e2cd;color:#24613a}.checkbox.ok span{color:#4b7a5b;font-size:12px}
.checkbox.bad{background:#fff6e8;border:1px solid #f0d5a3;color:#7a4b00}
.checkbox .iss{border-top:1px dashed #ecd3a5;padding-top:5px;margin-top:2px}
.checkbox .iss u{text-decoration:none;font-weight:600}.checkbox .iss small{display:block;color:#a17a3a;font-size:11.5px}
.checkbox .iss p{margin:2px 0 0;color:#5c4a2a}
.checkbox.bad button{margin-top:6px;padding:6px 12px;font-size:13px}.checkbox.bad>span{font-size:12px;color:#a17a3a}

/* ===== 家的不等式 品牌色改版 ===== */
header{background:linear-gradient(100deg,#1c2e17,#2f4a27 55%,#426437);border-bottom:0;color:#f3f7ef;padding:8px 20px;box-shadow:0 2px 14px rgba(20,40,15,.25);position:relative;z-index:5}
header .brand{align-items:center;color:#fff;gap:12px}
header .brand img{height:38px;display:block}
header .brand span{color:rgba(243,247,239,.85);letter-spacing:3px;font-size:14px;border-left:1px solid rgba(255,255,255,.28);padding-left:12px}
header .brand em{border-color:rgba(255,255,255,.3);color:rgba(243,247,239,.7)}
header nav{color:rgba(243,247,239,.92)}
header nav button.ghost{border-color:rgba(255,255,255,.32);color:#fff}
header nav button.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
header .sel select{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
header .sel select option{color:#1f2a1c}
header .switch i{background:rgba(255,255,255,.3)}
header .switch input:checked+i{background:#8fc27a}
header .who{font-size:12.5px;color:rgba(243,247,239,.7)}
button.primary{background:linear-gradient(100deg,#35532c,#4f7a41);border-color:#35532c;box-shadow:0 4px 14px rgba(66,100,55,.28)}
button.primary:hover{filter:none;background:linear-gradient(100deg,#3d6033,#5c8a4c)}
.tools button.on,.tabs button.on,.seg button.on,.kinds button.on{background:var(--deep);border-color:var(--deep);color:#fff}
.step h3 i{background:var(--deep)}
.hero h1{color:var(--deep)}
.drop strong{color:var(--deep)}
.drop{border-color:#a9c29b;background:#f6faf3}.drop.over{background:var(--soft);border-color:var(--accent)}
.pcard{transition:transform .15s,box-shadow .15s}.pcard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,50,25,.16)}
.toolbar{border-bottom-color:var(--line)}
.title span{background:var(--soft);color:var(--accent)}
.rg.cur{background:#f0f6ec}
.popchip{background:var(--accent)}

/* —— 转场：两扇绿色柜门。登录成功后门直接出现，logo 往后一蓄力，撞两下把门撞开 —— */
.doors{position:fixed;inset:0;z-index:50;pointer-events:none;perspective:2200px;overflow:hidden;opacity:0;transition:opacity .45s ease}
.doors.close{opacity:1}
.door{position:absolute;top:0;bottom:0;width:50.1%;background:linear-gradient(160deg,#35532c,#22361c 55%,#1a2a15);box-shadow:inset 0 0 120px rgba(0,0,0,.45);will-change:transform}
.door.l{left:0;transform-origin:left center;border-right:1px solid rgba(0,0,0,.55)}.door.r{right:0;transform-origin:right center;border-left:1px solid rgba(216,255,200,.12)}
.door:before{content:"";position:absolute;inset:5.5vh 3.2vw;border:1px solid rgba(216,255,200,.16);border-radius:3px;box-shadow:inset 0 0 0 10px rgba(255,255,255,.02),inset 0 0 60px rgba(0,0,0,.25)}   /* 门板上的线条 */
.doors .dlogo{position:absolute;left:50%;top:44%;height:150px;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:opacity .5s ease .15s,transform .8s cubic-bezier(.2,.8,.2,1) .1s;filter:drop-shadow(0 6px 26px rgba(0,0,0,.55))}
.doors .dtext{position:absolute;left:0;right:0;top:calc(44% + 104px);text-align:center;color:rgba(243,247,239,.85);font-size:15px;letter-spacing:8px;opacity:0;transition:opacity .45s ease .3s}
.doors.close .dlogo{opacity:1;transform:translate(-50%,-50%) scale(1)}.doors.close .dtext{opacity:1}
.seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;opacity:0;background:linear-gradient(180deg,transparent,#fff 20%,#fff 80%,transparent);box-shadow:0 0 26px 8px rgba(216,255,200,.8),0 0 140px 40px rgba(143,194,122,.4)}
/* 蓄力：logo 往后退一点 */
.doors.w .dlogo{transform:translate(-50%,-50%) scale(.7);transition:transform .5s cubic-bezier(.4,0,.6,1)}
.doors.w .dtext{opacity:0;transition:opacity .25s}
/* 第一下：撞上去，门被顶开一条缝，漏出光 */
.doors.b1 .dlogo{transform:translate(-50%,-50%) scale(1.16);transition:transform .13s cubic-bezier(.6,0,1,.6)}
.doors.b1 .door{transition:transform .13s cubic-bezier(.2,.8,.3,1)}
.doors.b1 .door.l{transform:rotateY(-6deg)}.doors.b1 .door.r{transform:rotateY(6deg)}
.doors.b1 .seam{opacity:.9;transition:opacity .1s}
/* 弹回来，退得更远，再蓄一次力 */
.doors.w2 .dlogo{transform:translate(-50%,-50%) scale(.55);transition:transform .5s cubic-bezier(.3,0,.5,1)}
.doors.w2 .door{transform:none;transition:transform .42s cubic-bezier(.3,1.6,.5,1)}
.doors.w2 .seam{opacity:0;transition:opacity .3s}
/* 第二下：撞开。门甩到两边，logo 冲出屏幕 */
.doors.open .dlogo{transform:translate(-50%,-50%) scale(7);opacity:0;transition:transform .85s cubic-bezier(.5,0,.9,.5),opacity .45s ease .22s}
.doors.open .door{transition:transform 1.25s cubic-bezier(.15,.85,.25,1) .12s}
.doors.open .door.l{transform:rotateY(-112deg)}.doors.open .door.r{transform:rotateY(112deg)}
.doors.open .seam{opacity:0;transform:scaleX(90);transition:opacity .9s ease .12s,transform .9s ease .12s}
.doors.open.hit .seam{opacity:1;transform:none;transition:none}
html:not(.intro) .doors{display:none}
html.intro .doors{opacity:1;transition:none}
html.intro .doors:not(.w):not(.b1):not(.w2):not(.open) .dlogo{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none}
html.intro .doors:not(.w):not(.b1):not(.w2):not(.open) .dtext{opacity:1;transition:none}
html.intro .doors:not(.open) .dlogo{opacity:1}
/* 撞门时整个画面抖一下 */
html.shake body{animation:quake .32s}
@keyframes quake{20%{transform:translate(-7px,3px)}45%{transform:translate(6px,-4px)}70%{transform:translate(-4px,2px)}}
/* 门开了以后，首页的内容一块一块升上来 */
html.intro-in header{animation:dropin .8s cubic-bezier(.2,.8,.2,1) .35s both}
html.intro-in .htext>*,html.intro-in .up,html.intro-in .hhead,html.intro-in .pcard{animation:risein .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:.4s}
html.intro-in .htext>*:nth-child(2){animation-delay:.48s}html.intro-in .htext>*:nth-child(3){animation-delay:.56s}html.intro-in .htext>*:nth-child(4){animation-delay:.64s}
html.intro-in .up:nth-child(1){animation-delay:.6s}html.intro-in .up:nth-child(2){animation-delay:.7s}
html.intro-in .hhead{animation-delay:.8s}
html.intro-in .pcard:nth-child(1){animation-delay:.88s}html.intro-in .pcard:nth-child(2){animation-delay:.95s}html.intro-in .pcard:nth-child(3){animation-delay:1.02s}html.intro-in .pcard:nth-child(4){animation-delay:1.09s}
html.intro-in .pcard:nth-child(n+5){animation-delay:1.16s}
@keyframes risein{from{opacity:0;transform:translateY(26px)}}
@keyframes dropin{from{opacity:0;transform:translateY(-100%)}}

/* ===== 首页：更有质感的版本（操作不变） ===== */
#home{max-width:none;width:100%;margin:0;padding:0;overflow:auto;background:
  radial-gradient(1200px 500px at 85% 0,rgba(66,100,55,.07),transparent 70%),
  linear-gradient(#f3f5f1,#edf1ea)}
.hhero{position:relative;overflow:hidden;color:#f3f7ef;background:linear-gradient(100deg,#1c2e17,#2f4a27 55%,#426437);box-shadow:0 18px 50px -20px rgba(20,40,15,.55)}
.hbg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(216,255,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(216,255,200,.07) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.hbg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 16s ease-in-out infinite alternate}
.hbg i:nth-child(1){width:520px;height:520px;left:-120px;top:-260px;background:#5c8a4c}
.hbg i:nth-child(2){width:420px;height:420px;right:8%;top:-200px;background:#8fc27a;opacity:.3;animation-duration:21s;animation-delay:-6s}
.hbg i:nth-child(3){width:380px;height:380px;left:42%;bottom:-280px;background:#22361c;opacity:.8;animation-duration:26s;animation-delay:-11s}
@keyframes drift{to{transform:translate(90px,50px) scale(1.15)}}
.hin{position:relative;max-width:1240px;margin:0 auto;padding:44px 32px 46px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center}
.kicker{display:inline-block;font-size:12px;letter-spacing:4px;color:#cfe9c2;border:1px solid rgba(216,255,200,.35);border-radius:14px;padding:2px 14px;background:rgba(15,26,12,.25)}
.htext h1{margin:16px 0 12px;font-size:clamp(28px,3.3vw,46px);line-height:1.2;font-weight:800;letter-spacing:1px;color:#fff}
.htext h1 em{font-style:normal;background:linear-gradient(92deg,#d8ffc8,#8fc27a 45%,#fff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:hshine 6s linear infinite}
@keyframes hshine{to{background-position:-200% 0}}
.htext p{margin:0;max-width:520px;font-size:15px;line-height:1.8;color:rgba(243,247,239,.82)}
.hstats{display:flex;gap:26px;margin-top:22px}
.hstats span{font-size:12.5px;color:rgba(243,247,239,.7);letter-spacing:1px}
.hstats b{display:block;font-size:30px;line-height:1.1;font-weight:700;color:#fff;letter-spacing:0;font-variant-numeric:tabular-nums}
.hups{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.up{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:206px;padding:22px 22px 20px;border-radius:18px;cursor:pointer;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(216,255,200,.28);
  box-shadow:0 18px 44px rgba(10,20,8,.35),inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s,background .25s}
.up:before{content:"";position:absolute;inset:0;background:radial-gradient(240px 160px at var(--mx,70%) var(--my,0%),rgba(216,255,200,.26),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.up:hover,.up.over{transform:translateY(-5px);border-color:rgba(216,255,200,.7);box-shadow:0 26px 60px rgba(10,20,8,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.up:hover:before,.up.over:before{opacity:1}
.up.over{background:linear-gradient(160deg,rgba(216,255,200,.3),rgba(255,255,255,.1))}
.up svg{width:44px;height:44px;color:#d8ffc8;margin-bottom:8px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));transition:transform .3s}
.up:hover svg{transform:scale(1.1) rotate(-4deg)}
.up strong{font-size:19px;letter-spacing:1px;color:#fff}
.up span{font-size:12.5px;line-height:1.7;color:rgba(243,247,239,.72)}
.up em{margin-top:auto;font-style:normal;font-size:13px;color:#d8ffc8;letter-spacing:1px;transition:transform .25s}
.up:hover em{transform:translateX(6px)}
.hlist{max-width:1240px;margin:0 auto;padding:30px 32px 70px}
.hhead{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.hhead h2{margin:0;font-size:18px;color:var(--deep);padding-left:12px;border-left:4px solid var(--accent);line-height:1.2}
.hhead span{font-size:12.5px;color:var(--muted)}
#home .cards{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.pcard{border:0;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(20,40,15,.06),0 10px 28px -12px rgba(20,40,15,.28);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(20,40,15,.08),0 26px 50px -16px rgba(20,40,15,.45)}
.pimg{position:relative;aspect-ratio:4/3;overflow:hidden;background:#dfe6da;border-radius:16px 16px 0 0}
.pcard .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;transition:transform .9s cubic-bezier(.2,.8,.2,1),clip-path .7s cubic-bezier(.6,0,.2,1)}
.pcard:hover .pimg img{transform:scale(1.06)}
.pimg img.b{clip-path:inset(0 100% 0 0)}                      /* 方案图平时藏着，移上去从左往右擦出来 */
.pcard.has:hover .pimg img.b{clip-path:inset(0 0 0 0)}
.pimg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,8,0) 45%,rgba(10,20,8,.78));pointer-events:none}
.pname{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;color:#fff;padding:0!important}
.pcard .pname b{font-size:15.5px;letter-spacing:.5px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.pcard .pname span{font-size:11.5px;color:rgba(255,255,255,.72)}
.pcard .b360{z-index:2;left:12px;top:12px;background:rgba(15,26,12,.6);border:1px solid rgba(216,255,200,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:1px 10px}
.pv{position:absolute;right:12px;top:12px;z-index:2;font-size:11px;line-height:1.7;padding:0 10px;border-radius:10px;color:#22361c;background:#d8ffc8;opacity:0;transform:translateY(-6px);transition:.35s ease .25s}
.pcard.has:hover .pv{opacity:1;transform:none}
.pfoot{display:flex;justify-content:space-between;align-items:center;padding:11px 14px 12px!important;font-size:12.5px;color:var(--muted)}
.pfoot b{display:inline!important;color:var(--accent);font-size:14px}
.pfoot em{font-style:normal;color:var(--accent);opacity:0;transform:translateX(-8px);transition:.25s}
.pcard:hover .pfoot em{opacity:1;transform:none}
.pcard .del{z-index:3;top:auto;bottom:46px;right:10px;width:24px;height:24px;padding:0;line-height:1;border:0;background:rgba(255,255,255,.92)}
#home .empty{grid-column:1/-1;text-align:center;padding:50px 0;border:1px dashed #b9c9ad;border-radius:16px;background:rgba(255,255,255,.5)}
@media (max-width:980px){.hin{grid-template-columns:1fr;gap:26px;padding:30px 20px}.hlist{padding:24px 20px 50px}}

/* 两个上传入口是首页最重要的东西：放大，做成主角 */
.hin{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:48px;padding:52px 32px 56px}
.hups{gap:22px}
.up{min-height:320px;padding:32px 30px 28px;border-radius:24px;gap:8px;border-width:1.5px;border-color:rgba(216,255,200,.42);
  background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.08));
  box-shadow:0 26px 60px rgba(10,20,8,.42),inset 0 1px 0 rgba(255,255,255,.32),0 0 0 6px rgba(216,255,200,.05)}
.up:hover,.up.over{transform:translateY(-8px) scale(1.015);box-shadow:0 36px 80px rgba(10,20,8,.5),inset 0 1px 0 rgba(255,255,255,.4),0 0 0 8px rgba(216,255,200,.1)}
.up svg{width:76px;height:76px;margin-bottom:14px;padding:16px;border-radius:20px;background:rgba(216,255,200,.14);border:1px solid rgba(216,255,200,.35);box-sizing:border-box}
.up strong{font-size:28px;letter-spacing:2px}
.up span{font-size:14px;line-height:1.75;color:rgba(243,247,239,.8)}
.up em{margin-top:auto;align-self:stretch;text-align:center;font-size:15.5px;font-weight:600;letter-spacing:3px;color:#22361c;background:linear-gradient(100deg,#d8ffc8,#b9e3a6);
  padding:12px 0;border-radius:14px;box-shadow:0 8px 22px rgba(10,20,8,.3);transition:transform .25s,box-shadow .25s,letter-spacing .25s}
.up:hover em{transform:none;letter-spacing:5px;box-shadow:0 12px 30px rgba(10,20,8,.4)}
.up.pano em{background:rgba(255,255,255,.14);color:#eaffdf;border:1px solid rgba(216,255,200,.55);box-shadow:none}
.up.pano:hover em{background:rgba(216,255,200,.24)}
.htext h1{font-size:clamp(26px,2.9vw,40px)}
@media (max-width:980px){.hin{grid-template-columns:1fr}.up{min-height:240px}}

/* 首页排版：标题在上，两个上传入口放到标题下面占满一行，「已有的效果图」再往下 */
.hin{grid-template-columns:1fr;gap:30px;padding:44px 32px 54px}
.htext{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
.htext .kicker{grid-column:1/-1;justify-self:start}
.htext h1{grid-column:1;margin:14px 0 10px}.htext h1 br{display:none}.htext h1 em{margin-left:.35em}
.htext p{grid-column:1;max-width:none}
.htext .hstats{grid-column:2;grid-row:2/4;margin:0;align-self:center}
.up{min-height:270px}
.hlist{padding-top:46px}
@media (max-width:980px){.htext{grid-template-columns:1fr}.htext .hstats{grid-column:1;grid-row:auto;margin-top:16px}.htext h1 br{display:inline}.htext h1 em{margin-left:0}}

/* 上传卡片上跟着鼠标的光：收小一点，更像一个光点 */
.up:before{background:radial-gradient(110px 90px at var(--mx,70%) var(--my,0%),rgba(216,255,200,.24),transparent 72%)}

/* ===== 编辑页 / 全景页：质感提升（布局和操作不变） ===== */
/* 1. 图片放在深色「展台」上，四周暗下去，图自己亮出来 */
.stagewrap{background:radial-gradient(1200px 700px at 50% 42%,#2a3a25 0%,#18221a 55%,#0f1610 100%)}
.stagewrap:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(216,255,200,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(216,255,200,.045) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(closest-side,transparent 55%,#000);mask-image:radial-gradient(closest-side,transparent 55%,#000)}
.stage{border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.35)}
.stage>img,.stage .cmp,.stage .cmp img,#overlay{border-radius:6px}
.hint span{background:rgba(15,26,12,.72);border:1px solid rgba(216,255,200,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cmpbar{background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);box-shadow:0 0 14px rgba(216,255,200,.6)}
.cmpbar i{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--deep);box-shadow:0 0 0 4px rgba(216,255,200,.25),0 4px 16px rgba(0,0,0,.45)}
.cmp .tag,.panostage .tag{background:rgba(15,26,12,.6);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:1px}
.cmp .tag.r,.panostage .tag.r{background:rgba(66,100,55,.82);border-color:rgba(216,255,200,.5)}
.panowrap{background:radial-gradient(1200px 700px at 50% 42%,#2a3a25 0%,#18221a 55%,#0f1610 100%);padding:22px}
.panostage canvas{border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.55)}

/* 2. 工具栏：一条干净的白色横条，按钮是一组小圆角键 */
.toolbar{padding:10px 18px;background:linear-gradient(#fff,#fafcf9);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(20,40,15,.07);position:relative;z-index:3}
.title a{font-size:13px;padding:4px 10px;border-radius:8px;transition:.15s}.title a:hover{background:var(--soft);color:var(--deep)}
.title b{font-size:15px;color:var(--deep);letter-spacing:.5px}
.title span{padding:3px 12px;border-radius:12px;font-size:12px;background:linear-gradient(100deg,#e7f0e1,#dcebd3);border:1px solid #cfe0c3}
.tools button{border-radius:8px;border-color:#d9e2d2;background:#f7f9f5;padding:6px 13px;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
.tools button:hover{background:#fff;border-color:#9fbb90;box-shadow:0 2px 8px rgba(66,100,55,.14)}
.tools button:active{transform:scale(.97)}
.tools button.on{background:linear-gradient(100deg,#2b4423,#426437);border-color:#2b4423;color:#fff;box-shadow:0 4px 12px rgba(66,100,55,.35)}
.tools .cmpbtn{background:#fff}
.tools .size input{accent-color:var(--accent)}
#cmpInfo{font-size:12.5px;color:#566150}#cmpInfo b{color:var(--accent)}

/* 3. 右侧面板：浅底上一张张白卡片 */
aside{background:#f1f4ee;border-left:1px solid var(--line);padding:14px 16px 30px;box-shadow:inset 6px 0 14px -10px rgba(20,40,15,.25)}
aside .step,aside .places{background:#fff;border:1px solid #e3e9de;border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(20,40,15,.04),0 8px 22px -14px rgba(20,40,15,.3)}
aside .step:last-child{border:1px solid #e3e9de}
aside .places{border-bottom:1px solid #e3e9de}
.step h3{font-size:14.5px;color:var(--deep);letter-spacing:.5px}
.phead b{color:var(--deep)}
.howto ol{font-size:13px;color:#5d6957}.howto ol li::marker{color:var(--accent);font-weight:700}
.rg{border-radius:10px}
.rg.cur{border:1.5px solid var(--accent);background:linear-gradient(100deg,#f3f8ef,#eaf2e4);box-shadow:0 4px 14px -6px rgba(66,100,55,.45)}
aside .go .primary,aside .wide,#saveVar{height:auto;min-height:48px;white-space:normal;overflow-wrap:anywhere;flex-shrink:0;border-radius:12px;font-size:15.5px;letter-spacing:2px;position:relative;overflow:hidden}
aside .go .primary:after,aside .wide:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:36%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .6s}
aside .go .primary:hover:after,aside .wide:hover:after{left:130%}
.seg{border-radius:9px;border-color:#d9e2d2}.seg button{padding:4px 14px}
aside input:not([type]),aside input[type=text]{border-radius:10px;border-color:#d9e2d2;background:#fafcf9}
aside input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(66,100,55,.14);background:#fff}
.cand{border-radius:12px;border:2px solid transparent;background:#fff;box-shadow:0 2px 10px rgba(20,40,15,.14);transition:transform .2s,box-shadow .2s}
.cand:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,40,15,.22)}
.cand.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(143,194,122,.4),0 10px 24px rgba(20,40,15,.22)}
.cand .no{background:rgba(15,26,12,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
.cand .wait{padding:18px 12px}.cand .bar{height:6px;background:#e7eee2}.cand .bar i{background:linear-gradient(90deg,#426437,#8fc27a)}
.more{border-radius:10px;background:#fafcf9}
.btnlink{border-radius:10px;border-color:#d9e2d2;background:#fafcf9;padding:9px 8px;transition:.15s}.btnlink:hover{background:#fff;border-color:#9fbb90;box-shadow:0 2px 8px rgba(66,100,55,.14)}
.viewnote{border-radius:12px}

/* 4. 底部方案条 */
.strip{background:linear-gradient(#fbfdfa,#f4f7f1);border-top:1px solid var(--line);padding:12px 18px 14px;box-shadow:0 -6px 20px rgba(20,40,15,.08);position:relative;z-index:2}
.striphead{font-size:12.5px;color:#5d6957;letter-spacing:1px;margin-bottom:9px;padding-left:9px;border-left:3px solid var(--accent);line-height:1.2}
.variants{gap:12px;padding:2px 2px 4px}
.vcard{width:176px;border-radius:12px;border:2px solid transparent;box-shadow:0 2px 10px rgba(20,40,15,.14);transition:transform .2s,box-shadow .2s}
.vcard:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,40,15,.2)}
.vcard.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(143,194,122,.4),0 8px 20px rgba(20,40,15,.2)}
.vcard img{height:92px}
.vcard .vn{padding:6px 10px 5px}.vcard .vn b{color:var(--deep)}
.vcard .va{padding:0 8px 8px}
.vcard .va a,.vcard .va button{border-radius:7px;padding:2px 8px;background:#f7f9f5;border-color:#d9e2d2;transition:.15s}
.vcard .va a:hover,.vcard .va button:hover{background:#fff;border-color:#9fbb90}
.vcard .va .del:hover{color:var(--red);border-color:#e3b5ae}

/* 5. 小东西 */
.pop{border-radius:16px;border:1px solid #cfe0c3;box-shadow:0 0 0 4px rgba(143,194,122,.18),0 24px 60px rgba(15,26,12,.4)}
.pophead{background:linear-gradient(100deg,#2b4423,#426437);color:#fff;border-bottom:0;border-radius:15px 15px 0 0}
.pophead i{background:#d8ffc8;color:#22361c}.pophead button{color:#fff;border-color:rgba(255,255,255,.35)}
.prod{border-radius:10px;transition:transform .15s,box-shadow .15s}.prod:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,40,15,.16)}
.prod.on{box-shadow:0 0 0 3px rgba(143,194,122,.45)}
aside::-webkit-scrollbar,.stagewrap::-webkit-scrollbar,.variants::-webkit-scrollbar,.pop::-webkit-scrollbar{width:10px;height:10px}
aside::-webkit-scrollbar-thumb,.variants::-webkit-scrollbar-thumb,.pop::-webkit-scrollbar-thumb{background:#c6d3be;border-radius:6px;border:2px solid transparent;background-clip:content-box}
.stagewrap::-webkit-scrollbar-thumb{background:rgba(216,255,200,.25);border-radius:6px;border:2px solid transparent;background-clip:content-box}

/* 提示条：放到最上面的深绿页头中间，不再盖住工具栏；等待时带一个转圈 */
#toast{top:11px;background:rgba(15,26,12,.86);border:1px solid rgba(216,255,200,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.35);padding:8px 18px;font-size:13.5px;z-index:120}
#toast.busy{padding-left:40px}
#toast.busy:before{content:"";position:absolute;left:16px;top:50%;width:14px;height:14px;margin-top:-8px;border-radius:50%;border:2px solid rgba(216,255,200,.3);border-top-color:#d8ffc8;animation:tspin .8s linear infinite}
@keyframes tspin{to{transform:rotate(360deg)}}

/* 白模出图：首页第三个入口 + 白模出图页 */
.hups{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.hups{grid-template-columns:1fr}}
#boxPage{flex:1;display:flex;min-height:0}#boxPage[hidden]{display:none}
#boxPage .stage>img{pointer-events:none}
.boxempty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 64px;border:2px dashed #b9c9ad;border-radius:20px;background:rgba(255,255,255,.6);cursor:pointer;color:var(--muted);text-align:center;transition:border-color .2s,background .2s}
.boxempty[hidden]{display:none}
.boxempty:hover,.boxempty.over{border-color:var(--accent);background:#fff}
.boxempty svg{width:64px;height:64px;color:var(--accent)}
.boxempty b{font-size:18px;color:var(--ink)}
#boxForm h3.sub{margin-top:16px}
#boxAsk{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;line-height:1.6;padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:vertical;margin-bottom:4px}
#boxAsk:focus{outline:2px solid #cde0c1;border-color:var(--accent)}
#boxNrow{margin:8px 0 2px}
#boxUseRow{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#boxUseRow .btnlink{flex:none}
#boxRefs .vcard{position:relative;cursor:default}
#boxRefs .vcard .del{position:absolute;right:6px;top:6px;width:22px;height:22px;padding:0;line-height:1;border:0;border-radius:50%;background:rgba(255,255,255,.92)}
.boxnoref{padding:22px 4px}

/* 设计顾问：开关 + 建议框 */
.advon{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:13px;color:var(--accent);font-weight:600;cursor:pointer;user-select:none}
.advon input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.advbox{margin:6px 0 8px;padding:10px 10px 8px;border-radius:10px;background:#f2f7ee;border:1px solid #cde0c1}
.advbox[hidden]{display:none}
.advhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.advhead b{font-size:13px;color:var(--deep)}
.advhead span{flex:1;font-size:11.5px;color:var(--muted)}
.advhead button{font-size:12px;padding:2px 8px}
.advbox textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;line-height:1.6;padding:6px 8px;border:1px solid var(--line);border-radius:6px;resize:vertical;background:#fff}
.advbox .why{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

/* 白模出图：普通 / 360、参考图分工、要对齐的定稿 */
.boxkind{display:inline-flex;margin:0 0 8px}
#boxHouse{width:100%;box-sizing:border-box;margin-top:8px}
.reflist{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.refrow{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fafcf9}
.refrow img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.refrow div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.refrow b{font-size:12px}
.refrow input{width:100%;box-sizing:border-box;font-size:12.5px;padding:4px 6px}
.refrow button{flex:none;width:26px;height:26px;padding:0;border-radius:50%}
.finals{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.final{position:relative;border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff}
.final.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(143,194,122,.4)}
.final img{width:100%;height:74px;object-fit:cover;display:block}
.final span{display:block;font-size:11.5px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.final em{position:absolute;left:4px;top:4px;font-style:normal;font-size:10.5px;background:rgba(15,26,12,.65);color:#fff;padding:0 6px;border-radius:8px}
.final i{position:absolute;right:4px;top:4px;font-style:normal;font-size:10.5px;background:rgba(20,40,70,.8);color:#fff;padding:0 6px;border-radius:8px}
.final.on:after{content:"✓ 对齐";position:absolute;right:4px;bottom:22px;font-size:11px;background:var(--accent);color:#fff;padding:0 6px;border-radius:8px}
#boxRefs .vcard.anchor{border-color:#9db8d6}
.rolelist{margin:4px 0;padding-left:18px;line-height:1.7}
#boxCandInfo{margin:8px 0 0;line-height:1.6}
#boxCandInfo .warn{color:#b35c00}
#boxUseRow .dlrow{display:flex;gap:8px}
#boxUseRow .dlrow>*{flex:1}

/* 首页项目分类：标签 + 搜索 */
.hhead{align-items:center;flex-wrap:wrap}
#hsearch{margin-left:auto;width:240px;max-width:100%;font-size:13px;padding:7px 12px;border-radius:18px;border:1px solid var(--line);background:#fff}
#hsearch:focus{outline:2px solid #cde0c1;border-color:var(--accent)}
.htabs{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 20px}
.htabs button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:18px;border:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--ink);cursor:pointer}
.htabs button i{font-style:normal;font-size:11.5px;min-width:18px;padding:0 5px;border-radius:9px;background:var(--soft);color:var(--muted);text-align:center;line-height:18px}
.htabs button:hover{border-color:#b3c4a8}
.htabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.htabs button.on i{background:rgba(255,255,255,.25);color:#fff}
.htabs button.trash{margin-left:auto}                         /* 回收站放在最右边，和分类分开 */
.htabs button.trash.on{background:#7a5a48;border-color:#7a5a48}
.trashbar{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;border:1px dashed #d9c4b8;border-radius:12px;background:#fbf6f3;font-size:13px;color:#7a5a48}
.trashbar span{flex:1}
.pcard.intrash{cursor:default}
.pcard.intrash .pimg img{filter:grayscale(.6);opacity:.8}
.pcard.intrash .tact{display:flex;gap:6px}
.pcard.intrash .tact button{font-size:12px;padding:3px 10px}
.pfoot span b{color:var(--deep)}

/* 白模出图：一次选整个文件夹 */
.folderpick{display:flex;flex-direction:column;gap:2px;padding:12px 14px;margin:2px 0 14px;border:1.5px dashed #9fbf8f;border-radius:12px;background:#f2f7ee;cursor:pointer;transition:background .2s,border-color .2s}
.folderpick:hover{background:#e8f1e2;border-color:var(--accent)}
.folderpick b{font-size:14px;color:var(--deep)}
.folderpick span{font-size:12px;color:var(--muted)}
#boxForm.over{outline:2px dashed var(--accent);outline-offset:-4px;border-radius:12px;background:#f6faf3}
.final.up b{position:absolute;right:4px;top:4px;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;cursor:pointer}
.final.up{cursor:default}

/* 白模出图：大图上方的「重出 / 不要 / 改要求」 */
.boxbar{display:inline-flex;gap:6px;margin-left:10px}
.boxbar button{font-size:13px;padding:5px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;cursor:pointer}
.boxbar button:hover{border-color:var(--accent);color:var(--deep)}
#boxBarDrop:hover,#boxDrop:hover{border-color:var(--red);color:var(--red)}
#boxMore{width:100%;margin-top:8px}

/* 参考图放大圈选 */
.refdlg{width:auto;max-width:94vw;padding:16px 20px}
.refdlg .dlghead{gap:14px}
.refdlg .dlghead span{flex:1}
.refstage{position:relative;display:block;width:fit-content;margin:8px auto;line-height:0;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.refstage img{display:block;max-width:min(1100px,88vw);max-height:66vh;border-radius:6px}
.refrect{position:absolute;border:3px solid #ff1a1a;box-shadow:0 0 0 9999px rgba(0,0,0,.35);border-radius:2px;pointer-events:none}
.refrect[hidden]{display:none}
.refctl{display:flex;gap:8px;align-items:center;margin-top:8px}
.refctl input{flex:1;font-size:14px;padding:8px 10px}
.rthumb{position:relative;flex:none;cursor:zoom-in;line-height:0}
.rthumb img{width:56px;height:56px;object-fit:cover;border-radius:6px;display:block}
.rthumb em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:10.5px;line-height:16px;text-align:center;color:#fff;background:rgba(0,0,0,.55);border-radius:0 0 6px 6px}
.rthumb.on em{background:#d42020}
.rthumb:hover img{outline:2px solid var(--accent)}
#boxRefs .vcard{cursor:zoom-in}
#boxRefs .vimg{position:relative;line-height:0}
#boxRefs .vimg em{position:absolute;left:6px;top:6px;font-style:normal;font-size:11px;line-height:18px;padding:0 7px;border-radius:9px;color:#fff;background:#d42020}

/* —— 柜门全开：出好的图右上角的按钮，开好后整张盖在图上 —— */
.doorctl{position:absolute;top:46px;right:12px;z-index:6;display:flex;gap:6px;align-items:center;line-height:1.4}
.doorctl[hidden],.doorlayer[hidden],.boxplaces[hidden]{display:none}
.doorctl button,.doorctl .btnlink{flex:none;font-size:13px;padding:6px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.6);background:rgba(15,26,12,.66);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer;text-decoration:none}
.doorctl button:hover,.doorctl .btnlink:hover{background:rgba(66,100,55,.92);border-color:#d8ffc8}
.doorctl button.on{background:var(--accent);border-color:#d8ffc8}
.doorctl button:disabled{cursor:progress;opacity:.92}
.doorlayer{position:absolute;inset:0;z-index:5;cursor:default}
.doorlayer img{display:block;width:100%;height:100%;border-radius:6px}
.doorlayer .tag{position:absolute;top:12px;left:12px;line-height:1.5;font-size:12px;color:#fff;background:rgba(66,100,55,.85);padding:2px 10px;border-radius:12px}

/* —— 白模上框参考图放哪 —— */
.boxplaces{position:absolute;inset:0;z-index:2;pointer-events:none}
.bplace{position:absolute;border:3px solid #1f8fff;background:rgba(31,143,255,.16);border-radius:3px;line-height:1.4}
.bplace b{position:absolute;left:-3px;top:-3px;transform:translateY(-100%);font-size:11.5px;font-weight:600;color:#fff;background:#1f8fff;padding:1px 7px;border-radius:4px 4px 0 0;white-space:nowrap}
.bplace.now{border-style:dashed;border-color:#ff8a00;background:rgba(255,138,0,.16)}
#boxStage.placing{cursor:crosshair}
.refrow .placerow{display:flex;gap:6px;flex-wrap:wrap}
.refrow .placerow button{width:auto;height:auto;padding:2px 9px;border-radius:12px;font-size:12px;line-height:1.5}
.refrow .placerow button.on{border-color:#1f8fff;color:#0b63c6;background:#eef6ff}
.refrow .placerow button.now{border-color:#ff8a00;color:#b35f00;background:#fff4e6}
.boxbar button.use{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.boxbar button.use:hover{background:var(--deep);color:#fff}

/* —— 改图页「按参考图」：参考图小图上显示框了哪一块 —— */
.refpickrow{display:flex;gap:10px;align-items:center;margin:4px 0 8px}
.refthumb{position:relative;flex:none;width:96px;line-height:0;cursor:zoom-in;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.refthumb img{display:block;width:100%;height:auto}
.refthumb i{position:absolute;border:2px solid #ff1a1a;box-shadow:0 0 0 999px rgba(0,0,0,.3)}
.refpickrow div{display:flex;flex-direction:column;gap:3px;min-width:0}
.refpickrow b{font-size:12.5px;word-break:break-all}
.refpickrow button{align-self:flex-start;font-size:12px;padding:2px 10px}
#refPickWhat{margin-top:6px}
#addRefFrame{font-size:12px;padding:2px 10px;margin-bottom:4px}

/* —— 设置：API 密钥、账号 —— */
.setdlg{width:min(640px,92vw)}
.settabs{display:flex;gap:6px;margin:6px 0 12px}
.settabs button{padding:6px 16px;border-radius:18px;font-size:13.5px}
.settabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.setdlg section[hidden]{display:none}
.keylist,.userlist{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.keyrow{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fafcf9}
.keyrow>div{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.keyrow b{color:var(--deep);font-size:14px}
.keyrow .kn{font-family:Consolas,Menlo,monospace;font-size:12px;color:var(--muted)}
.keyrow .ok{font-size:12.5px;color:#1e8246}.keyrow .no{font-size:12.5px;color:var(--red)}
.keyrow input{font-family:Consolas,Menlo,monospace;font-size:13px}
.keyrow button{padding:7px 18px}
.userrow{display:flex;gap:12px;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fafcf9}
.userrow b{color:var(--deep)}.userrow span{font-size:12.5px;color:var(--accent)}
.userrow em{font-style:normal;font-size:12px;color:var(--muted);margin-left:auto}
.userrow button{font-size:12.5px;padding:3px 12px}
.adduser{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;border:1px dashed #b3c4a8;border-radius:10px;background:#f6faf3}
.adduser .chk{grid-column:1/-1;display:flex;gap:6px;align-items:center;font-size:13px;color:#566150}
.adduser .chk input{width:auto;accent-color:var(--accent)}
.adduser input[type=password],.keyrow input{border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:#fff;width:100%;box-sizing:border-box}
.adduser button{grid-column:1/-1}

/* —— 几张视角图合成 360 全景 —— */
.stitchdlg{width:min(1100px,94vw)}
.stbody{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;margin-top:8px}
.stleft{display:flex;flex-direction:column;gap:8px;min-width:0}
.stlist{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.strowv{display:flex;gap:10px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fafcf9}
.strowv img{width:88px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.strowv div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.strowv b{font-size:12.5px;color:var(--deep)}
.strowv select{font-size:13px;padding:3px 6px;border-radius:6px}
.strowv em{font-style:normal;font-size:11.5px;color:var(--red)}
.strowv button{flex:none;width:26px;height:26px;padding:0;border-radius:50%}
.strow{display:flex;gap:8px;align-items:center;font-size:13px}
.strow select{width:auto;font-size:13px;padding:4px 8px}
#stAsk{width:100%;box-sizing:border-box;font:inherit;font-size:13px;line-height:1.6;padding:6px 8px;border:1px solid var(--line);border-radius:8px;resize:vertical}
.stprev{position:relative;background:#808080;border-radius:10px;overflow:hidden;min-height:180px;display:flex;align-items:center;justify-content:center}
.stprev img{display:block;width:100%;height:auto}
.stprev span{position:absolute;left:8px;bottom:8px;font-size:12px;color:#fff;background:rgba(15,26,12,.62);padding:2px 9px;border-radius:10px}
.stfoot{display:flex;gap:14px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:13px}
.stfoot .primary{padding:9px 26px}
@media (max-width:760px){.stbody{grid-template-columns:1fr}}

/* —— 设计顾问：单独的「想一想」按钮 —— */
.advbtn{display:inline-flex;align-items:center;gap:4px;margin:8px 0 2px;font-size:13px;font-weight:600;color:var(--accent);border:1px dashed #9fbb90;background:#f6faf3;border-radius:16px;padding:5px 14px}
.advbtn:hover{background:#eaf3e4;border-color:var(--accent)}
.advbtn:disabled{cursor:progress;opacity:.8}
.advhead #boxAdvDrop,.advhead #otherAdvDrop{margin-left:4px}

/* —— 开门看隔壁 —— */
.pop .kinds{flex-wrap:wrap}
.pop .kinds button{flex:1 0 24%;border-bottom:1px solid var(--line)}
.doorrefs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.doorref{width:92px;cursor:pointer}
.doorref.on{outline:2px solid #ff1a1a;outline-offset:1px}
.doorref em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:10.5px;line-height:16px;text-align:center;color:#fff;background:rgba(0,0,0,.55)}
.doorref.on em{background:#d42020}
.doorref b{position:absolute;right:3px;top:3px;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:12px;font-weight:400;cursor:pointer}
.doorwhy{color:var(--accent);margin:4px 0;line-height:1.6}.doorwhy.warn{color:#b35f00}
.doorwhy:empty{display:none}

/* —— 每一步的说明：现在是第几步、可以做什么、怎么做 —— */
.guide{border:1.5px solid var(--accent);border-radius:12px;background:linear-gradient(135deg,#f5fbf1,#e9f3e3);padding:10px 13px 8px;margin:0 0 12px;font-size:12.8px;line-height:1.65;box-shadow:0 4px 14px -8px rgba(66,100,55,.5)}
.guide:empty{display:none}
.guide .gh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.guide .gh i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.guide .gh b{font-size:14px;color:var(--deep)}
.guide p{margin:3px 0;color:#3f4b3a}
.guide p em{font-style:normal;display:inline-block;font-size:11.5px;font-weight:600;color:#fff;background:#7d9a6f;border-radius:4px;padding:0 6px;margin-right:6px;line-height:1.6}
.guide p+p em{background:var(--accent)}
.guide.wide{max-width:none;margin:0 0 14px}
.hlist .guide.wide{margin-top:4px}

/* —— 「第几处怎么改」小框：按住标题栏拖动 —— */
#pop .pophead{cursor:move;user-select:none;-webkit-user-select:none;touch-action:none}
#pop .pophead.drag{cursor:grabbing}
#pop .pophead button{cursor:pointer}

/* —— 存 AI 整图原样 / 在存好的方案上接着改 —— */
#saveRow .rawtip{color:#b35f00;margin:6px 0 0}
#editSaved{margin-top:10px}

/* —— 图片区域：右边一栏放标签和按钮（不压在图上），可缩放、可平移、可调宽窄 —— */
.stagerow{flex:1;min-height:0;display:flex}
.stagerow>.stagewrap{flex:1;min-width:0;padding:8px;box-sizing:border-box}
.stagewrap>.stage{flex:none}
.hint{display:none}
.stagewrap.hand,.spacepan .stagewrap{cursor:grab}
.stagewrap.hand #overlay,.spacepan .stagewrap #overlay,.spacepan .stagewrap .cmp{cursor:grab}
.stagewrap.panning,.stagewrap.panning *{cursor:grabbing!important}
.stageside{flex:none;width:118px;display:flex;flex-direction:column;gap:10px;padding:10px 8px;box-sizing:border-box;overflow:auto;
  background:linear-gradient(180deg,#1a2617,#121b10);border-left:1px solid rgba(216,255,200,.12)}
.stageside:not(:has(>.sidebox:not([hidden]))){display:none}
.sidebox{display:flex;flex-direction:column;gap:6px;padding:9px 8px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(216,255,200,.14);color:#e6efe0;font-size:12.5px;line-height:1.45}
.sidebox>b{font-size:11.5px;letter-spacing:2px;color:#a9c29b;font-weight:600}
.sidebox p{margin:0;display:flex;gap:6px;align-items:baseline}
.sidebox p i{font-style:normal;flex:none;font-size:11px;color:#0f1610;background:#a9c29b;border-radius:4px;padding:0 5px}
.sidebox p span{word-break:break-all}
.stageside .doorctl{position:static;display:flex;flex-direction:column;align-items:stretch;gap:6px;z-index:auto}
.stageside .doorctl button,.stageside .doorctl .btnlink{flex:none;width:100%;box-sizing:border-box;text-align:center;font-size:12.5px;padding:7px 6px;border-radius:16px;
  border:1px solid rgba(216,255,200,.35);background:rgba(66,100,55,.55);color:#fff;box-shadow:none;backdrop-filter:none}
.stageside .doorctl button:hover,.stageside .doorctl .btnlink:hover{background:rgba(66,100,55,.95)}
.stageside .doorctl button.on{background:var(--accent);border-color:#d8ffc8}
.stageside .doorctl .now{font-size:11.5px;color:#d8ffc8}
.vsplit{flex:none;width:6px;cursor:col-resize;background:linear-gradient(90deg,transparent 2px,#cfdac8 2px,#cfdac8 4px,transparent 4px);position:relative;z-index:4}
.vsplit:hover,.vsplit.drag{background:linear-gradient(90deg,transparent 1px,var(--accent) 1px,var(--accent) 5px,transparent 5px)}
aside{width:var(--aside-w,370px)}
.striphead{display:flex;align-items:center;gap:10px}
.striphead .fold{margin-left:auto;font-size:12px;padding:1px 10px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--muted);letter-spacing:0}
.strip.folded{padding-top:6px;padding-bottom:6px}
.strip.folded .variants{display:none}
.strip.folded .striphead{margin-bottom:0}

/* —— 窗口缩小时：右边面板跟着变窄，顶栏不折行 —— */
aside{width:var(--aside-w,clamp(300px,27vw,370px))}
header .brand span,header nav,header nav>*,header .switch{white-space:nowrap}
header nav button{white-space:nowrap}
header .sel select{max-width:260px;font-size:13px;text-overflow:ellipsis}
@media (max-width:1240px){
  header .brand span{display:none}
  header nav{gap:10px}
  header .sel select{max-width:200px}
}
@media (max-width:1080px){
  header .switch{font-size:0;gap:0}            /* 只留开关本身，说明在鼠标移上去的提示里 */
  header .sel{font-size:0;gap:0}
  header .sel select{font-size:12.5px;max-width:170px}
  .stageside{width:100px;padding:8px 6px}
}

/* —— 说明开关：关掉后藏起所有说明类文字 —— */
.nohelp .help,.nohelp .guide,.nohelp .howto,.nohelp .viewnote{display:none!important}   /* 蓝框的提示（全景视角、白模出的图）也是说明 */
.setswitch{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fafcf9;cursor:pointer;margin:6px 0}
.setswitch .switch{flex:none;margin-top:3px}
.setswitch .switch i{background:#c2ccbb}
.setswitch .switch input:checked+i{background:var(--accent)}
.setswitch b{display:block;color:var(--deep);font-size:14px}
.setswitch small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6;margin-top:2px}
.setdlg section[hidden],.settabs button[hidden]{display:none}

/* —— 产品库：拆解图片 —— */
.libtabs{margin:4px 0 10px}
.splitmsg{color:var(--accent);margin:6px 0;min-height:1em}
.splitbody{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(300px,1fr);gap:14px;align-items:start}
.splitstage{position:relative;line-height:0;cursor:crosshair;user-select:none;-webkit-user-select:none;touch-action:none;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.splitstage img{display:block;width:100%;height:auto}
.sbox{position:absolute;border:2px solid #1f8fff;background:rgba(31,143,255,.12);line-height:1.4;pointer-events:none}
.sbox.defect{border-color:#ff8a00;background:rgba(255,138,0,.12)}
.sbox.now{border-style:dashed;border-color:#ff1a1a;background:rgba(255,26,26,.1)}
.sbox b{position:absolute;left:-2px;top:-2px;font-size:11px;font-weight:600;color:#fff;background:#1f8fff;padding:0 6px;border-radius:0 0 4px 0;white-space:nowrap}
.sbox.defect b{background:#ff8a00}
.splititems{display:flex;flex-direction:column;gap:10px;max-height:62vh;overflow:auto;padding-right:4px}
.sitem{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fafcf9}
.simg{position:relative;width:120px;height:120px;background:#fff;border-radius:6px;overflow:hidden;border:1px solid var(--line);line-height:0}
.simg img{width:100%;height:100%;object-fit:contain}
.simg img:not([src]){visibility:hidden}
.simg .sno{position:absolute;left:4px;top:4px;line-height:18px;font-size:11px;color:#fff;background:#1f8fff;border-radius:9px;padding:0 6px}
.simg em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:11px;line-height:1.5;text-align:center;color:#fff;background:rgba(30,130,70,.85);padding:1px 2px}
.simg em.warn{background:rgba(200,110,0,.9)}.simg em.busy{background:rgba(31,100,200,.85)}.simg em.bad{background:rgba(192,57,43,.9)}
.sbody{display:flex;flex-direction:column;gap:5px;min-width:0}
.sbody input,.sbody select{font-size:12.5px;padding:4px 7px}
.svar{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;align-self:flex-start}
.svar button{border:0;border-radius:0;padding:2px 10px;font-size:12px;background:#fff}
.svar button.on{background:var(--accent);color:#fff}.svar button:disabled{color:#bbb;cursor:not-allowed}
.srow{display:flex;gap:6px}.srow button{font-size:12.5px;padding:5px 10px}
.sst{font-size:11.5px;color:var(--accent)}
@media (max-width:900px){.splitbody{grid-template-columns:1fr}}

/* 长文案随内容增高；窄窗口里的操作行与表单允许换行。 */
input,select,textarea{min-width:0;max-width:100%}
.title,.dlghead,.refctl,.stfoot,.boxbar,.advhead,.srow,.userrow,.settabs{flex-wrap:wrap}
.title{min-width:0}
.title>b,.dlghead>span,.dlghead>b{min-width:0;overflow-wrap:anywhere}
.title>a,.dlghead>button,.advhead>button,.userrow>button{flex-shrink:0}
.dlghead{gap:8px 14px}
.dlghead>span,.dlghead>b{flex:1 1 140px}
.refdlg .dlghead span{flex:1 1 180px;min-width:0}
.advhead>span{flex:1 1 120px;min-width:0}
.refctl input{flex:1 1 180px}
.refstage{max-width:100%}
.refstage img{max-width:100%}
dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.pop{max-width:calc(100vw - 24px)}
.pophead b{min-width:0;overflow-wrap:anywhere}
.pophead button,.pophead i{flex-shrink:0}
.pop .kinds button{white-space:normal}
.mini span{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.err,.why,.doorwhy,.splitmsg,.sst,.keyrow .kn,.userrow b,.prod b,.prod span,.lib b,.lib span,.cand .fail,.cand .wait{overflow-wrap:anywhere}
.keyrow{grid-template-columns:minmax(0,1fr) auto}
.adduser{grid-template-columns:repeat(2,minmax(0,1fr))}
#addProd{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr)}
.userrow em{overflow-wrap:anywhere}
.lib>div{min-width:0;flex:1;padding-right:20px}
.vcard .vn{flex-wrap:wrap;gap:2px 6px}
.vcard .vn b{min-width:0;overflow-wrap:anywhere}
.cands{grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))}
.cand:has(.no){display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start}
.cand:has(.no)>img{grid-column:1/-1}
.cand .no{position:static;grid-column:1;align-self:start;margin:5px 4px 5px 6px;padding:2px 6px;overflow-wrap:anywhere}
.cand .redo{position:static;grid-column:2;grid-row:2;align-self:start;margin:5px 6px 5px 0;padding:2px 6px}
.cand .chk{position:static;grid-column:1/-1;justify-self:start;margin:0 6px 6px;overflow-wrap:anywhere}
.sbox b{width:max-content;max-width:220px;white-space:normal;overflow-wrap:anywhere}
.nrow{flex-wrap:wrap}
.nrow .seg{flex-shrink:0;max-width:100%;flex-wrap:wrap}
#toast{max-width:calc(100vw - 24px);max-height:calc(100dvh - 90px);overflow-y:auto;overflow-wrap:anywhere;overscroll-behavior:contain}
.popchip{max-width:calc(100vw - 16px);white-space:normal;overflow-wrap:anywhere}
@media (max-width:760px){
  header{flex-wrap:wrap;gap:8px 12px;padding:8px 12px}
  header nav{min-width:0;flex:1 1 260px;flex-wrap:wrap;justify-content:flex-end;gap:6px 8px}
  header .sel select{max-width:min(170px,60vw)}
  #editor,#pano,#boxPage{flex-direction:column;overflow:auto}
  #editor>.stagecol,#pano>.stagecol,#boxPage>.stagecol{flex:0 0 auto;min-height:420px;height:65dvh}
  #editor>aside,#pano>aside,#boxPage>aside{width:100%;overflow:visible;border-left:0;border-top:1px solid var(--line)}
  .vsplit{display:none}
  .refctl>button,.stfoot>button{max-width:100%}
}
@media (max-width:520px){
  dialog{padding:16px}
  .prodedit .pebody{flex-direction:column}
  .prodedit .peimg{width:min(160px,100%)}
  .prodedit .pefields{width:100%}
  #addProd,.keyrow,.adduser{grid-template-columns:minmax(0,1fr)}
  #addProd>*{grid-column:1!important}
  .keyrow>button{justify-self:start}
  .sitem{grid-template-columns:minmax(0,1fr)}
  .simg{width:min(120px,100%)}
  .nrow{flex-wrap:wrap}
  .boxbar{margin-left:0}
}