/* ============================================
   我的衣柜 · 换装台
   纯静态，无依赖
   ============================================ */

:root{
  --bg:        #f2efe9;
  --bg-2:      #e9e4dc;
  --panel:     #ffffff;
  --line:      #e4dfd6;
  --line-2:    #d3ccc0;
  --ink:       #2b2825;
  --ink-2:     #5c554d;
  --muted:     #9a9288;
  --accent:    #b1794a;
  --accent-2:  #8a5f39;
  --accent-soft:#f3e7db;
  --ok:        #5c7f5e;
  --danger:    #b5544a;
  --radius:    14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(60,50,40,.06), 0 2px 8px rgba(60,50,40,.05);
  --shadow-md: 0 4px 14px rgba(60,50,40,.10), 0 12px 40px rgba(60,50,40,.08);
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%, #fbf9f5 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, #ece6dc 0%, transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

button{ font-family:inherit; cursor:pointer; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* ---------------- 顶栏 ---------------- */
.topbar{
  height:58px;
  display:flex; align-items:center; gap:16px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  position:relative; z-index:20;
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:16px; letter-spacing:.02em;
  white-space:nowrap;
}
.brand-dot{
  width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#d9a06b);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.doll-switch{
  display:flex; gap:2px; padding:3px;
  background:var(--bg-2); border-radius:10px;
}
.doll-btn{
  border:0; background:transparent; color:var(--ink-2);
  font-size:13px; padding:5px 12px; border-radius:7px;
  transition:.15s;
}
.doll-btn.is-on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); font-weight:600; }

.top-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---------------- 按钮 ---------------- */
.btn{
  border:1px solid var(--line-2);
  background:#fff; color:var(--ink);
  font-size:13px; padding:8px 14px; border-radius:10px;
  transition:.15s; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn:hover{ border-color:var(--ink-2); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.solid{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.solid:hover{ background:#3d3833; }
.btn.accent{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn.accent:hover{ background:var(--accent-2); }
.btn.ghost{ background:transparent; }
.btn.ghost:hover{ background:#fff; }
.btn.tiny{ font-size:12px; padding:5px 10px; border-radius:8px; }
.btn.block{ width:100%; }
.btn.danger{ color:var(--danger); border-color:#e7c4c0; }
.btn.danger:hover{ background:#fdf3f2; border-color:var(--danger); }
.icon-btn{
  border:0; background:transparent; font-size:16px; color:var(--muted);
  width:32px; height:32px; border-radius:8px;
}
.icon-btn:hover{ background:var(--bg-2); color:var(--ink); }

/* ---------------- 主布局 ---------------- */
.layout{
  height:calc(100% - 58px);
  display:grid;
  grid-template-columns: 1fr 372px;
  gap:0;
}

/* ---------------- 舞台 ---------------- */
.stage-col{
  display:flex; flex-direction:column;
  min-width:0; padding:16px 8px 10px;
}
.stage-shell{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.stage{
  position:relative;
  height:100%;
  aspect-ratio: 400 / 900;
  max-width:100%;
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #faf8f4 45%, #f1ece3 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.9);
  overflow:hidden;
  touch-action:none;
  user-select:none;
}
.stage .layers,
.stage .guide{ position:absolute; inset:0; }
.stage .layers img{
  position:absolute;
  transform-origin:center center;
  pointer-events:none;
  -webkit-user-drag:none;
}
.stage .guide{ pointer-events:none; }
.stage .guide .gline{
  position:absolute; left:0; right:0; height:0;
  border-top:1px dashed rgba(150,120,90,.35);
}
.stage .guide .gline span{
  position:absolute; left:6px; top:-15px;
  font-size:10px; color:rgba(150,120,90,.85);
  background:rgba(255,255,255,.7); padding:0 3px; border-radius:3px;
}
.stage .guide .gv{
  position:absolute; top:0; bottom:0; width:0;
  border-left:1px dashed rgba(150,120,90,.25);
}
.stage-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76%; text-align:center; font-size:13px; line-height:1.8;
  color:var(--muted); pointer-events:none;
}
.stage-bar{
  display:flex; align-items:center; gap:8px; justify-content:center;
  font-size:12.5px; color:var(--ink-2);
  padding:8px 4px 2px; min-height:26px;
}
.worn-count{ font-weight:600; }
.stage-bar .sep{ color:var(--line-2); }
#wornNames{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }

/* ---------------- 面板 ---------------- */
.panel{
  border-left:1px solid var(--line);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column;
  min-height:0;
}
.tabs{
  display:flex; gap:2px; padding:10px 10px 0;
  overflow-x:auto; scrollbar-width:none; flex:0 0 auto;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  border:0; background:transparent; color:var(--ink-2);
  font-size:13px; padding:8px 11px; border-radius:9px;
  white-space:nowrap; transition:.15s; position:relative;
}
.tab:hover{ background:rgba(255,255,255,.8); }
.tab.is-on{ background:var(--ink); color:#fff; font-weight:600; }
.tab .dot{
  position:absolute; top:5px; right:4px;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.tab.is-on .dot{ background:#fff; }

.panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:10px 16px 8px;
}
.panel-title{ font-size:14px; font-weight:700; }

.items{
  flex:1; min-height:0; overflow-y:auto;
  padding:4px 12px 12px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
  gap:8px;
  align-content:start;
}
.items::-webkit-scrollbar{ width:8px; }
.items::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

.card{
  position:relative;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1.5px solid var(--line);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:.15s;
  cursor:pointer;
}
.card:hover{ border-color:var(--ink-2); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.card.is-worn{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.card img{
  max-width:92%; max-height:92%; object-fit:contain;
  pointer-events:none;
}
.card .c-name{
  position:absolute; left:0; right:0; bottom:0;
  font-size:10.5px; line-height:1.4; padding:2px 5px;
  background:linear-gradient(transparent,rgba(255,255,255,.94) 40%);
  color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card .c-badge{
  position:absolute; top:4px; left:4px;
  font-size:9px; padding:1px 5px; border-radius:5px;
  background:var(--accent); color:#fff; font-weight:600;
}
.card .c-del{
  position:absolute; top:2px; right:2px;
  width:20px; height:20px; border-radius:6px; border:0;
  background:rgba(255,255,255,.9); color:var(--muted);
  font-size:12px; line-height:1; opacity:0; transition:.15s;
}
.card:hover .c-del{ opacity:1; }
.card .c-del:hover{ background:var(--danger); color:#fff; }

.empty{
  grid-column:1/-1;
  padding:40px 16px; text-align:center;
  color:var(--muted); font-size:13px; line-height:1.9;
}

.panel-foot{
  flex:0 0 auto; padding:10px 12px 14px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px;
}

/* ---------------- 弹窗 ---------------- */
.modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(43,40,37,.42);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:fade .16s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal[hidden]{ display:none; }
.modal-box{
  background:var(--panel);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(30,24,18,.28);
  width:100%; max-width:560px; max-height:100%;
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:pop .18s cubic-bezier(.2,.9,.3,1.1);
}
.modal-box.wide{ max-width:1040px; }
.modal-box.slim{ max-width:420px; }
@keyframes pop{ from{ transform:translateY(10px) scale(.985); opacity:0 } to{ transform:none; opacity:1 } }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.modal-head h3{ margin:0; font-size:16px; display:flex; align-items:center; gap:8px; }
.badge{
  font-size:11px; font-weight:600; padding:2px 7px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent-2);
}
.modal-foot{
  display:flex; gap:10px; justify-content:flex-end;
  padding:14px 18px; border-top:1px solid var(--line);
  flex:0 0 auto;
}

/* ---------------- 步骤条 ---------------- */
.steps{
  display:flex; gap:6px; padding:12px 18px 0;
  flex:0 0 auto; flex-wrap:wrap;
}
.step{
  font-size:12px; color:var(--muted);
  padding:5px 11px; border-radius:20px;
  background:var(--bg); border:1px solid transparent;
}
.step.is-on{ background:var(--ink); color:#fff; }
.step.is-done{ background:var(--accent-soft); color:var(--accent-2); }

.imp-pane{ padding:16px 18px; overflow-y:auto; }
.imp-pane[hidden]{ display:none; }

/* ---------------- 拖放区 ---------------- */
.dropzone{
  border:2px dashed var(--line-2);
  border-radius:16px;
  padding:44px 20px; text-align:center;
  cursor:pointer; transition:.15s;
  background:linear-gradient(180deg,#fff, #fbfaf8);
}
.dropzone:hover, .dropzone.is-over{
  border-color:var(--accent); background:var(--accent-soft);
}
.dropzone p{ margin:6px 0; font-size:13.5px; }
.dz-icon{ font-size:34px; color:var(--line-2); line-height:1; margin-bottom:6px; }
.dropzone:hover .dz-icon{ color:var(--accent); }

/* ---------------- 抠图 ---------------- */
.cut-wrap{ display:grid; grid-template-columns:1fr 240px; gap:18px; }
@media (max-width:760px){ .cut-wrap{ grid-template-columns:1fr; } }
.cut-preview{
  height:340px; border-radius:12px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.checker{
  background-image:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
  background-color:#fff;
}
.cut-preview canvas{ max-width:100%; max-height:100%; object-fit:contain; }
.cut-tools{ display:flex; flex-direction:column; gap:14px; }

/* ---------------- 表单 ---------------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ font-size:12.5px; color:var(--ink-2); font-weight:500; }
.field > span b{ color:var(--accent-2); font-variant-numeric:tabular-nums; }
input[type=text], select, textarea{
  font-family:inherit; font-size:13px; color:var(--ink);
  border:1px solid var(--line-2); border-radius:9px;
  padding:9px 11px; background:#fff; width:100%;
  outline:none; transition:.15s;
}
input[type=text]:focus, select:focus, textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{ resize:vertical; line-height:1.6; font-size:12.5px; }
input[type=range]{
  -webkit-appearance:none; width:100%; height:22px; background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:4px; background:var(--bg-2);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); margin-top:-6px; border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.switch{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.switch input{ width:16px; height:16px; accent-color:var(--accent); }

/* ---------------- 对齐 ---------------- */
.fit-wrap{ display:grid; grid-template-columns:340px 1fr; gap:20px; }
@media (max-width:900px){ .fit-wrap{ grid-template-columns:1fr; } }
.fit-stage-shell{
  height:460px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border-radius:14px; border:1px solid var(--line);
  overflow:hidden;
}
.fit-stage{
  position:relative; height:100%; aspect-ratio:400/900; max-width:100%;
  background:#fbfaf8; border-radius:10px;
  touch-action:none; cursor:grab;
}
.fit-stage:active{ cursor:grabbing; }
.fit-stage .layers, .fit-stage .guide{ position:absolute; inset:0; }
.fit-stage .layers img{ position:absolute; transform-origin:center center; pointer-events:none; }
.fit-tools{ display:flex; flex-direction:column; gap:14px; }
.nudge{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.nudge > div{ display:flex; gap:4px; }
.fit-meta{ display:grid; gap:12px; border-top:1px solid var(--line); padding-top:14px; }

/* ---------------- AI ---------------- */
.ai-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:0; overflow-y:auto; }
@media (max-width:900px){ .ai-wrap{ grid-template-columns:1fr; } }
.ai-left{ padding:16px 18px; border-right:1px solid var(--line); }
.ai-right{ padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.ai-note{
  margin:0 0 14px; font-size:12.5px; line-height:1.7;
  background:var(--accent-soft); color:var(--accent-2);
  padding:10px 12px; border-radius:10px;
}
.ai-block{ margin-bottom:16px; }
.ai-block-head{
  display:flex; align-items:center; gap:8px;
  font-size:13px; margin-bottom:8px; justify-content:space-between;
}
.base-list{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.base-item{
  width:74px; height:96px; border-radius:8px; border:2px solid var(--line);
  background:#f7f5f1; object-fit:cover; cursor:pointer; transition:.15s;
}
.base-item:hover{ border-color:var(--line-2); }
.base-item.is-on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.pick-list{ display:flex; flex-direction:column; gap:6px; }
.pick{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:9px; border:1px solid var(--line);
  cursor:pointer; font-size:13px; transition:.15s; background:#fff;
}
.pick:hover{ border-color:var(--line-2); }
.pick.is-on{ border-color:var(--accent); background:var(--accent-soft); }
.pick img{ width:34px; height:34px; object-fit:contain; }
.pick .p-slot{ font-size:10.5px; color:var(--muted); margin-left:auto; }
.ai-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.ai-tips{
  font-size:12px; line-height:1.75; color:var(--ink-2);
  background:var(--bg); padding:12px 14px; border-radius:10px;
}
.ai-tips ol{ margin:6px 0 0; padding-left:18px; }
.ai-tips li{ margin-bottom:4px; }

/* ---------------- 搭配册 ---------------- */
.looks{
  padding:16px 18px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;
}
.look{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:#fff; cursor:pointer; transition:.15s; position:relative;
}
.look:hover{ border-color:var(--ink-2); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.look img{ width:100%; aspect-ratio:400/900; object-fit:cover; display:block; background:#faf8f4; }
.look .l-meta{ padding:6px 8px; font-size:11px; color:var(--muted); }
.look .l-del{
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  border-radius:6px; border:0; background:rgba(255,255,255,.92); color:var(--muted);
  opacity:0; transition:.15s;
}
.look:hover .l-del{ opacity:1; }

/* ---------------- 单品详情 ---------------- */
.item-detail{ padding:16px 18px; display:grid; gap:12px; }
.item-detail .prev{
  height:200px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line);
}
.item-detail .prev img{ max-height:90%; max-width:90%; object-fit:contain; }
.kv{ display:grid; grid-template-columns:70px 1fr; gap:6px 10px; font-size:13px; }
.kv dt{ color:var(--muted); }
.kv dd{ margin:0; }

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:13px;
  padding:10px 18px; border-radius:24px;
  box-shadow:0 8px 30px rgba(0,0,0,.22);
  z-index:300; animation:toastIn .2s ease;
  max-width:80vw; text-align:center;
}
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,10px) } to{ opacity:1; transform:translate(-50%,0) } }
.toast[hidden]{ display:none; }

/* ---------------- 窄屏 ---------------- */
@media (max-width:900px){
  body{ overflow:auto; }
  .topbar{ height:auto; flex-wrap:wrap; padding:10px 12px; gap:10px; }
  .top-actions{ width:100%; margin-left:0; justify-content:flex-start; }
  .layout{
    height:auto; grid-template-columns:1fr;
    grid-template-rows:auto auto;
  }
  .stage-col{ padding:10px 12px 4px; height:62vh; }
  .panel{ border-left:0; border-top:1px solid var(--line); max-height:44vh; }
  .items{ grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); }
}

/* ============================================================
   追加样式（补 wardrobe.js 用的按钮类，以及几处定位）
   原来 style.css 里只有 .c-del，但卡片实际用的是 .c-act
   ============================================================ */

.card{ position:relative; }

.card .c-act{
  position:absolute; top:4px; width:20px; height:20px; padding:0;
  border-radius:50%; border:0; cursor:pointer;
  font-size:11px; line-height:20px; text-align:center;
  background:rgba(255,255,255,.94); color:var(--ink-2);
  box-shadow:var(--shadow-sm); opacity:0; transition:.15s; z-index:2;
}
.card:hover .c-act{ opacity:1; }
.card .c-act.edit{ right:26px; }
.card .c-act.del{ right:4px; }
.card .c-act.edit:hover{ background:var(--accent); color:#fff; }
.card .c-act.del:hover{ background:var(--danger); color:#fff; }

/* 搭配册卡片里的删除按钮需要定位父级 */
.look{ position:relative; }

/* 舞台上的白模不要吃掉鼠标事件 */
.stage .layers .doll{ pointer-events:none; }
.fit-stage .layers .doll{ pointer-events:none; }

/* ---------------- 修正：空状态提示压在人台上 ----------------
   原来居中显示，正好盖住白模的腰线，看不清人形。
   改成贴着舞台底部的胶囊。
----------------------------------------------- */
.stage-hint{
  left:50%; right:auto; top:auto; bottom:14px; transform:translateX(-50%);
  width:auto; max-width:86%;
  padding:8px 14px; border-radius:999px;
  background:#fffdf8;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-size:12.5px; line-height:1.55;
  color:var(--ink-2);
  z-index:40;
}

/* 底部按钮贴到视口最下沿时会显得被切掉，留一点余量 */
.panel-foot{ padding-bottom:14px; }


/* ---------------- 修正：面板底部按钮被挤出可视区 ----------------
   .layout 高度是 100vh-58px，网格行按内容撑高时会顶出去，
   这里让网格行不要超过容器、子项可以收缩。
----------------------------------------------- */
.layout{ grid-template-rows:minmax(0,1fr); overflow:hidden; }
.stage-col{ min-height:0; }
.panel > *{ flex-shrink:0; }
.panel .items{ flex-shrink:1; }

/* ============================================================
   追加样式 3：图层选中 / 拖动 / 身上标签 / 图层操作条
   ============================================================ */

/* 舞台上的衣服：可以抓起来拖
   注意：基础样式里 .stage .layers img 是 pointer-events:none（为了不挡人台），
   这里必须对衣服图层重新打开，否则点不到、也拖不动 */
.stage .layers img.layer{ cursor:grab; pointer-events:auto; }
.stage .layers img.layer:active{ cursor:grabbing; }
.stage .layers img.doll{ pointer-events:none; }
.stage .layers img.layer.is-sel{
  outline:2px dashed var(--accent);
  outline-offset:2px;
}

/* 选中后的操作条（脱下 / 重新对齐 / 删除单品） */
.layerbar{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; align-items:center; gap:5px; flex-wrap:nowrap;
  padding:5px 6px 5px 12px; max-width:96%;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-md); z-index:45;
}
.layerbar[hidden]{ display:none; }
.layerbar .lb-name{
  font-size:12px; font-weight:600; color:var(--ink);
  max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-btn{
  border:0; background:var(--bg-2); color:var(--ink-2); white-space:nowrap;
  font-size:11.5px; padding:5px 9px; border-radius:999px; cursor:pointer;
}
.lb-btn:hover{ background:var(--accent-soft); color:var(--accent-2); }
.lb-btn.lb-danger:hover{ background:#fdf3f2; color:var(--danger); }
.lb-x{
  border:0; background:transparent; color:var(--muted);
  font-size:12px; padding:4px 6px; border-radius:50%; cursor:pointer;
}
.lb-x:hover{ background:var(--bg-2); color:var(--ink); }

/* 舞台下方「身上 N 件」改成可点的小标签 */
#wornNames{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  max-width:none; overflow:visible; white-space:normal;
}
#wornNames.is-empty{ display:block; }
.chip{
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  font-size:11.5px; padding:2px 9px; border-radius:999px; cursor:pointer;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip:hover{ border-color:var(--ink-2); }
.chip.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ============================================================
   追加样式 4：导入第 3 步「裁剪」
   ============================================================ */
.crop-wrap{ display:grid; grid-template-columns:1fr 240px; gap:18px; }
@media (max-width:760px){ .crop-wrap{ grid-template-columns:1fr; } }
.crop-preview{
  height:340px; border-radius:12px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  touch-action:none;
}
.crop-preview canvas{
  max-width:100%; max-height:100%; object-fit:contain;
  cursor:crosshair; display:block;
}
.crop-tools{ display:flex; flex-direction:column; gap:12px; }
.crop-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.crop-meta{ display:flex; align-items:baseline; gap:8px; }
.crop-meta b{ font-variant-numeric:tabular-nums; color:var(--ink); font-size:13px; }
/* ============================================================
   追加样式 5：人台身材面板 + 变形人台画布
   ============================================================ */
.stage .layers canvas.doll,
.fit-stage .layers canvas.doll{
  position:absolute; left:0; top:0; pointer-events:none;
  -webkit-user-drag:none;
}

.body-wrap{
  display:grid; grid-template-columns:1fr 84px; gap:18px;
  padding:16px 18px; align-items:stretch;
}
.body-fields{ display:flex; flex-direction:column; gap:13px; }
.body-ruler{
  position:relative; height:206px; margin-top:20px;
  border-left:1px solid var(--line); padding-left:6px;
}
.ruler-track{
  position:absolute; left:22px; top:0; bottom:0; width:2px;
  background:var(--bg-2); border-radius:2px;
}
.ruler-tick{
  position:absolute; left:16px; width:12px; height:0;
  border-top:1px solid var(--line-2);
}
.ruler-tick span{
  position:absolute; left:20px; top:-8px;
  font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.ruler-mark{
  position:absolute; left:10px; width:26px; height:0;
  border-top:2px solid var(--accent); transition:bottom .12s ease;
}
.ruler-mark::after{
  content:''; position:absolute; right:-4px; top:-4px;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}
/* ============================================================
   追加样式 6：裁剪页的橡皮擦
   ============================================================ */
.crop-preview{ position:relative; }
.erase-cursor{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  border:1.5px solid var(--accent); border-radius:50%;
  background:rgba(177,121,74,.14);
  pointer-events:none; display:none; z-index:5;
}
.btn.is-on{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.btn.is-on:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#fff; }
.crop-erase{
  display:flex; flex-direction:column; gap:10px;
  border-top:1px dashed var(--line); padding-top:12px;
  border-bottom:1px dashed var(--line); padding-bottom:12px;
}
/* 禁用态按钮看得更清楚（例如没有可撤销的擦除时） */
.btn:disabled, .btn.tiny:disabled{
  opacity:.45; cursor:default; transform:none;
}
.btn:disabled:hover, .btn.tiny:disabled:hover{ transform:none; }
/* ============================================================
   追加样式 7：左侧图层顺序面板
   ============================================================ */
.stage-col{ position:relative; }

.layer-panel{
  position:absolute; left:8px; top:18px; bottom:44px; width:202px;
  display:flex; flex-direction:column; gap:6px;
  padding:10px 8px 8px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
  z-index:20;
  overflow:hidden;
}
.layer-panel[hidden]{ display:none; }

.lp-head{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:12px; font-weight:700; color:var(--ink);
  padding:0 2px 2px;
}
.lp-count{ font-size:11px; font-weight:400; color:var(--muted); }

.lp-list{
  display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; flex:1; min-height:0;
  scrollbar-width:thin;
}
.lp-list::-webkit-scrollbar{ width:6px; }
.lp-list::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:6px; }

.lp-row{
  display:flex; align-items:center; gap:2px;
  padding:4px 3px 4px 7px; border-radius:8px;
  background:#fff; border:1px solid var(--line);
  font-size:11.5px; color:var(--ink-2);
  cursor:pointer; transition:.12s;
}
.lp-row:hover{ border-color:var(--line-2); }
.lp-row.is-on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }

.lp-name{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.lp-btn{
  flex:none; width:18px; height:18px; padding:0;
  border:0; border-radius:5px; background:transparent;
  color:var(--muted); font-size:11.5px; line-height:18px; text-align:center;
  cursor:pointer;
}
.lp-btn:hover{ background:var(--accent-soft); color:var(--accent-2); }

.lp-hint{
  margin:0; padding:2px 2px 0; font-size:10.5px; color:var(--muted);
  border-top:1px dashed var(--line); padding-top:6px;
}

/* 窄屏（舞台两侧没空间了）先把面板收起来，免得压住人台 */
@media (max-width:1180px){
  .layer-panel{ display:none; }
}