/* ════════════════════════════════════════════════════════════════════════
   v10.css — 白栈 UI 皮肤层（crisp）
   设计原则（针对上一版两套皮肤被否的两点）：
     ① 留白均匀：内容铺满主区，不再用 max-width 居中（上一版 airy 在宽屏
        左右各空 200px，视觉上像忘了填内容）。
     ② 可点有框：所有可点击的元素（模式键 / 分段控件 / 按钮 / 上传区）
        都带可见的边框或底色，绝不出现"只有文字、看不出能点"的控件。
   切换：<html data-ui="crisp"> 启用；data-ui="none" 回到原始 v9 外观。
   纯视觉覆盖层：不新增/删除业务 DOM，不碰 JS，删掉本文件即完全回滚。
   加载顺序必须在 v9.css 之后：同特异性靠顺序覆盖，统一带 html[data-ui="crisp"] 前缀。
   ════════════════════════════════════════════════════════════════════════ */

/* ── 0. 设计令牌 ───────────────────────────────────────────────────── */
html[data-ui="crisp"]{
  --ui-ink:#17181b;        /* 主文字 / 主按钮底 / 选中实心底 */
  --ui-ink2:#4d5158;       /* 次级文字 */
  --ui-ink3:#8b8f97;       /* 辅助文字 */
  --ui-ink4:#b4b8bf;       /* 占位 / 图标 */
  --ui-line:#ededed;       /* v369 M6：原 #e4e5e9，与其它页不一致，统一 */
  --ui-line2:#f2f2f2;      /* v369 M6：内部分隔统一档 */
  --ui-fill:#f6f7f8;       /* 浅底 */
  --ui-fill2:#fbfbfc;      /* 更浅底 */
  --ui-bg:#ffffff;
  --ui-r:8px;              /* 卡片圆角 */
  --ui-r-ctl:6px;          /* 控件圆角 */
  --ui-side:196px;
  --ui-pad-card:20px;
  --ui-gap:20px;
  --ui-main-pad:20px 28px 56px;
  --ui-btn-h:38px;
}

/* ── 1. 全局底色与主区：铺满，不居中 ───────────────────────────────── */
html[data-ui="crisp"] body{ background:var(--ui-bg); color:var(--ui-ink2); }
html[data-ui="crisp"] #main{
  background:transparent; padding:var(--ui-main-pad);
  flex:1; min-width:0;
}
/* 关键：.view 不再设 max-width —— 内容铺满主区，左右留白只剩 padding */
html[data-ui="crisp"] .view{ max-width:none; width:100%; margin:0; }

/* ── 2. 顶栏 ───────────────────────────────────────────────────────── */
html[data-ui="crisp"] #topbar{
  height:54px; background:var(--ui-bg); box-shadow:none;
  border-bottom:1px solid var(--ui-line2); padding:0 24px;
}
html[data-ui="crisp"] #topbar .brand-word{
  color:var(--ui-ink); font-weight:600; letter-spacing:-.01em;
}
html[data-ui="crisp"] #topbar .brand-logo{ width:20px; height:20px; color:var(--ui-ink); }
html[data-ui="crisp"] #topbar .actions,
html[data-ui="crisp"] #topbar .top-right{ gap:12px; }
html[data-ui="crisp"] #topbar .pill.credits{
  background:var(--ui-fill); border:0; color:var(--ui-ink2);
  font-size:12.5px; height:auto; padding:4px 9px; border-radius:var(--ui-r-ctl);
  font-variant-numeric:tabular-nums;
}
html[data-ui="crisp"] #topbar .icon-btn.theme-btn{
  background:transparent; border:0; color:var(--ui-ink3); box-shadow:none;
  width:26px; height:26px;
}
html[data-ui="crisp"] #topbar .icon-btn.theme-btn:hover{ color:var(--ui-ink); background:var(--ui-fill); }
html[data-ui="crisp"] #topbar .user-name{ color:var(--ui-ink2); font-size:12.5px; }
html[data-ui="crisp"] #topbar #btnLogout{ color:var(--ui-ink3); }

/* ── 3. 侧栏：198px，一条极淡右边线，选中用左黑条 + 浅底 ─────────────── */
html[data-ui="crisp"] #sidebar{
  width:var(--ui-side); flex:none; background:var(--ui-bg);
  border-right:1px solid var(--ui-line2); padding:14px 10px;
}
html[data-ui="crisp"] #sidebar .nav-item{
  height:32px; padding:0 10px; margin:0; border-radius:var(--ui-r-ctl);
  gap:10px; font-size:13px; font-weight:400; color:var(--ui-ink2);
  background:transparent; box-shadow:none;
  transition:background .12s ease, color .12s ease;
}
html[data-ui="crisp"] #sidebar .nav-item .ic{ width:15px; height:15px; }
html[data-ui="crisp"] #sidebar .nav-item .ic svg{ width:15px; height:15px; stroke:var(--ui-ink4); }
html[data-ui="crisp"] #sidebar .nav-item:hover{ background:var(--ui-fill); color:var(--ui-ink); }
html[data-ui="crisp"] #sidebar .nav-item:hover .ic svg{ stroke:var(--ui-ink2); }
html[data-ui="crisp"] #sidebar .nav-item.active{
  background:var(--ui-fill); color:var(--ui-ink); font-weight:500;
  box-shadow:inset 2px 0 0 var(--ui-ink);
}
html[data-ui="crisp"] #sidebar .nav-item.active .ic svg{ stroke:var(--ui-ink); }
html[data-ui="crisp"] #sidebar .nav-group-title,
html[data-ui="crisp"] #sidebar .nav-label{
  font-size:11px; color:var(--ui-ink4); letter-spacing:.04em; padding:0 10px 8px;
}
html[data-ui="crisp"] #sidebar .sidebar-legal{ color:var(--ui-ink4); font-size:11px; line-height:1.7; }
html[data-ui="crisp"] #sidebar .sidebar-legal a{ color:var(--ui-ink4); }

/* ── 4. 工作台：退回单列，模式条回顶部横排，每个模式键都是带框的块 ─────
   现状问题（style.css:1296-1306 + :1562-1575）：#view-work 是 156px 竖列
   + 内容列，8 个含价格长文案的模式键被塞进 156px 挤成竖排大字。
   这里退回 flex 单列，模式键改为「自适应宽度的带框块」，一眼可点。 */
html[data-ui="crisp"] #view-work{ display:flex; flex-direction:column; gap:0; }
html[data-ui="crisp"] #view-work .admin-strip{ flex:none; margin-bottom:10px; }
html[data-ui="crisp"] #view-work .gen-mode-bar{
  flex:none; display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch;
  gap:8px; margin:0 0 16px; overflow:visible; min-height:0;
}
html[data-ui="crisp"] #view-work #genModeSeg{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px; width:100%;
}
html[data-ui="crisp"] #view-work #genModeSeg button{
  width:100%; max-width:none;
  height:auto; min-height:40px;
  display:flex; align-items:center; justify-content:flex-start;
  white-space:normal;
  padding:8px 12px; font-size:12px; line-height:1.4; text-align:left;
  border-radius:var(--ui-r-ctl);
  border:1px solid var(--ui-line);
  background:var(--ui-bg);
  color:var(--ui-ink2);
  box-shadow:none;
  -webkit-line-clamp:none; overflow:visible;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
html[data-ui="crisp"] #view-work #genModeSeg button:hover{
  border-color:var(--ui-ink4); background:var(--ui-fill2); color:var(--ui-ink);
}
html[data-ui="crisp"] #view-work #genModeSeg button.active{
  background:var(--ui-ink); border-color:var(--ui-ink); color:#fff;
  font-weight:500; box-shadow:none;
}
html[data-ui="crisp"] #genModeHint{ font-size:11.5px; color:var(--ui-ink4); }
html[data-ui="crisp"] #view-work .work-grid{ flex:1 1 auto; min-height:0; }

/* ── 5. 卡片 ───────────────────────────────────────────────────────── */
html[data-ui="crisp"] .work-grid > .card,
html[data-ui="crisp"] .work-grid > .col,
html[data-ui="crisp"] .view .card,
html[data-ui="crisp"] [class*="card"]{
  background:var(--ui-bg);
  border:1px solid var(--ui-line,#ededed);   /* v369 M6 原 #e8e9ec */
  border-radius:var(--ui-r);
  box-shadow:none;
  transition:border-color .16s ease;
}
html[data-ui="crisp"] .work-grid > .card:hover,
html[data-ui="crisp"] .work-grid > .col:hover{
  transform:none; box-shadow:none; border-color:#d9dbe0;
}
html[data-ui="crisp"] .work-grid{ gap:var(--ui-gap); }
html[data-ui="crisp"] .work-grid > .card{ padding:var(--ui-pad-card); }

/* ── 6. 卡片标题 ───────────────────────────────────────────────────── */
html[data-ui="crisp"] .work-grid > .card > .card-title,
html[data-ui="crisp"] .work-grid .card-title{
  font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ui-ink);
  margin:0 0 14px; padding-bottom:11px; border-bottom:1px solid var(--ui-line2);
  align-items:baseline; gap:8px;
}
html[data-ui="crisp"] .work-grid > .card > .card-title .hint{
  font-size:11.5px; font-weight:400; color:var(--ui-ink4); letter-spacing:0;
}

/* ── 7. 上传区：虚线框 = 明确的投放区信号 ──────────────────────────── */
html[data-ui="crisp"] .drop-zone{
  border-radius:var(--ui-r); padding:30px 20px; text-align:center;
  background:var(--ui-fill2); border:1px dashed #d8dade;
  transition:background .16s ease, border-color .16s ease;
}
html[data-ui="crisp"] .drop-zone:hover{ border-color:var(--ui-ink3); background:var(--ui-fill); }
html[data-ui="crisp"] .drop-zone .dz-icon{ margin-bottom:10px; color:var(--ui-ink4); }
html[data-ui="crisp"] .drop-zone .dz-icon svg{ width:20px; height:20px; stroke:var(--ui-ink3); }
html[data-ui="crisp"] .drop-zone .dz-txt{ font-size:13px; color:var(--ui-ink2); }
html[data-ui="crisp"] .drop-zone .dz-sub{ font-size:11.5px; color:var(--ui-ink4); margin-top:5px; }
html[data-ui="crisp"] #formatTip{ border:0; background:transparent; padding:0; margin-top:18px; }
html[data-ui="crisp"] #formatTip .tip-title{ font-size:11.5px; color:var(--ui-ink4); margin-bottom:10px; }
html[data-ui="crisp"] #formatTip .tip-imgs img{ border-radius:var(--ui-r-ctl); }
html[data-ui="crisp"] #formatTip .tip-diff{ font-size:11.5px; color:var(--ui-ink4); line-height:1.7; }
html[data-ui="crisp"] #formatTip .tip-diff b{ color:var(--ui-ink2); font-weight:600; }

/* 缩略图 */
html[data-ui="crisp"] .thumb-list{ gap:8px; }
html[data-ui="crisp"] .thumb{ border-radius:var(--ui-r-ctl); border:1px solid var(--ui-line2); background:var(--ui-fill); }

/* ── 8. 分段控件（发布平台/出图比例/展示风格…）：带框方片，选中实心 ── */
html[data-ui="crisp"] .segmented{
  display:flex; flex-wrap:wrap; gap:7px;
  background:transparent; border:0; padding:0;
}
html[data-ui="crisp"] .segmented button{
  border:1px solid var(--ui-line); background:var(--ui-bg); color:var(--ui-ink2);
  border-radius:var(--ui-r-ctl); padding:7px 12px; font-size:12.5px; line-height:1.2;
  box-shadow:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
html[data-ui="crisp"] .segmented button:hover{
  border-color:var(--ui-ink4); color:var(--ui-ink); background:var(--ui-fill2);
}
html[data-ui="crisp"] .segmented button.active{
  background:var(--ui-ink); border-color:var(--ui-ink); color:#fff;
  font-weight:500; box-shadow:none;
}
html[data-ui="crisp"] .segmented.small button{ padding:6px 11px; font-size:12px; }

/* ── 9. 参数区 ─────────────────────────────────────────────────────── */
html[data-ui="crisp"] .field{ margin-bottom:18px; }
html[data-ui="crisp"] .field > label,
html[data-ui="crisp"] .field label{
  font-size:12px; font-weight:500; color:var(--ui-ink2); letter-spacing:0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-bottom:8px;
}
html[data-ui="crisp"] .field label .hint,
html[data-ui="crisp"] .hint{
  font-size:11px; color:var(--ui-ink4); font-weight:400; line-height:1.65;
}
html[data-ui="crisp"] .field label .hint{ flex:1 0 100%; margin-top:2px; }
html[data-ui="crisp"] input[type="text"],
html[data-ui="crisp"] input[type="number"],
html[data-ui="crisp"] textarea,
html[data-ui="crisp"] select{
  border:1px solid var(--ui-line); border-radius:var(--ui-r-ctl); background:var(--ui-bg);
  color:var(--ui-ink); font-size:12.5px; padding:8px 10px;
}
html[data-ui="crisp"] input[type="text"]:focus,
html[data-ui="crisp"] textarea:focus{ border-color:var(--ui-ink3); outline:none; box-shadow:none; }
html[data-ui="crisp"] .color-cal{
  border:1px solid var(--ui-line2); border-radius:var(--ui-r);
  background:var(--ui-fill2); padding:12px 13px;
}
html[data-ui="crisp"] .color-row input[type="color"]{
  border:1px solid var(--ui-line); border-radius:var(--ui-r-ctl);
}
/* 面料/品牌等小 chip：也要有框 */
html[data-ui="crisp"] .mat-chips button,
html[data-ui="crisp"] .mat-chips .mat-chip{
  border:1px solid var(--ui-line); border-radius:var(--ui-r-ctl);
  background:var(--ui-bg); font-size:11.5px; box-shadow:none;
}
html[data-ui="crisp"] .mat-chips button:hover{ border-color:var(--ui-ink4); color:var(--ui-ink); }
html[data-ui="crisp"] .mat-chips button.active,
html[data-ui="crisp"] .mat-chips .mat-chip.active{
  background:var(--ui-ink); border-color:var(--ui-ink); color:#fff;
}

/* 更多可选参数：轻量文字行 */
html[data-ui="crisp"] .adv-toggle{
  border:0; border-top:1px solid var(--ui-line2); border-radius:0; background:transparent;
  padding:14px 0 0; margin:4px 0 0; font-size:12.5px; color:var(--ui-ink2); box-shadow:none;
}
html[data-ui="crisp"] .adv-toggle:hover{ color:var(--ui-ink); background:transparent; }
html[data-ui="crisp"] .adv-toggle svg{ width:14px; height:14px; color:var(--ui-ink3); }

/* 须知折叠块 */
html[data-ui="crisp"] .upload-tips{
  border:1px solid var(--ui-line2); border-radius:var(--ui-r); background:var(--ui-fill2);
  padding:0; margin-top:14px;
}
html[data-ui="crisp"] .upload-tips .ut-title{ font-size:12px; color:var(--ui-ink2); padding:11px 13px; }
html[data-ui="crisp"] .upload-tips li{ font-size:12px; color:var(--ui-ink3); line-height:1.75; }

/* ── 10. 按钮 ──────────────────────────────────────────────────────── */
html[data-ui="crisp"] .btn{
  border-radius:var(--ui-r-ctl); font-size:13px; font-weight:400; box-shadow:none;
}
html[data-ui="crisp"] .btn.primary,
html[data-ui="crisp"] .btn-primary,
html[data-ui="crisp"] .btn[class*="primary"]{
  background:var(--ui-ink); border:1px solid var(--ui-ink); color:#fff; font-weight:500;
  border-radius:var(--ui-r-ctl); box-shadow:none;
  transition:background .14s ease;
}
html[data-ui="crisp"] .btn.primary:hover,
html[data-ui="crisp"] .btn-primary:hover{ background:#000; box-shadow:none; transform:none; }
html[data-ui="crisp"] .btn.primary:active{ transform:none; box-shadow:none; }
html[data-ui="crisp"] .btn.primary.block{ height:var(--ui-btn-h); font-size:13.5px; }
html[data-ui="crisp"] .btn.secondary,
html[data-ui="crisp"] .btn.ghost{
  background:var(--ui-bg); border:1px solid var(--ui-line); color:var(--ui-ink2); box-shadow:none;
}
html[data-ui="crisp"] .btn.secondary:hover,
html[data-ui="crisp"] .btn.ghost:hover{
  border-color:var(--ui-ink4); color:var(--ui-ink); background:var(--ui-fill2);
}
html[data-ui="crisp"] .col-params .gen-cta{ border-top:1px solid var(--ui-line2); background:var(--ui-bg); }
/* 生成条：费用文字独占一行完整可读，主按钮整宽——不再挤成两列的窄条 */
html[data-ui="crisp"] .col-params .gen-cta .actions{
  display:flex; flex-direction:column; align-items:stretch; gap:9px;
}
html[data-ui="crisp"] .col-params .gen-cta .cost-line{
  font-size:11.5px; color:var(--ui-ink3); line-height:1.5; white-space:normal;
}
html[data-ui="crisp"] .col-params .gen-cta .btn.primary.block{ width:100%; }
html[data-ui="crisp"] .cost-line,
html[data-ui="crisp"] .gen-cost,
html[data-ui="crisp"] .gen-hint{ font-size:11.5px; color:var(--ui-ink4); }

/* ── 11. 顶部统计条：一行小字 + 一条分隔线 ─────────────────────────── */
html[data-ui="crisp"] .admin-strip{
  border:0; border-radius:0; background:transparent; padding:0 0 12px;
  border-bottom:1px solid var(--ui-line2); font-size:12px; color:var(--ui-ink3); gap:18px;
}
html[data-ui="crisp"] .admin-strip .as-item b{ font-size:13px; font-weight:600; color:var(--ui-ink); }
html[data-ui="crisp"] .admin-strip .as-go{ color:var(--ui-ink3); font-weight:400; }
html[data-ui="crisp"] .admin-strip .as-go:hover{ color:var(--ui-ink); text-decoration:none; }

/* ── 12. 模板卡 / 结果卡 ───────────────────────────────────────────── */
html[data-ui="crisp"] .tpl-card,
html[data-ui="crisp"] .tpl-item{
  border:1px solid var(--ui-line); border-radius:var(--ui-r-ctl); box-shadow:none;
}
html[data-ui="crisp"] .tpl-card:hover,
html[data-ui="crisp"] .tpl-item:hover{
  border-color:var(--ui-ink3); box-shadow:none; transform:none;
}
html[data-ui="crisp"] .tpl-card.selected,
html[data-ui="crisp"] .tpl-item.selected{
  border-color:var(--ui-ink); box-shadow:inset 0 0 0 1px var(--ui-ink);
}

/* ── 13. 右栏内部控件 ──────────────────────────────────────────────── */
html[data-ui="crisp"] .dcol .gen-pin{ box-shadow:none; border-radius:0; }
html[data-ui="crisp"] #videoPanel .vcol-gen > .btn.primary.block{ box-shadow:none; }

/* ── 14. 深色模式 ──────────────────────────────────────────────────── */
html[data-theme="dark"][data-ui="crisp"]{
  --ui-ink:#ededf0; --ui-ink2:#a9adb4; --ui-ink3:#7c8189; --ui-ink4:#5a5f67;
  --ui-line:#2f3136; --ui-line2:#26282c; --ui-fill:#1d1e22; --ui-fill2:#191a1d;
  --ui-bg:#141518;
}
html[data-theme="dark"][data-ui="crisp"] body{ background:var(--ui-bg); }
html[data-theme="dark"][data-ui="crisp"] #topbar,
html[data-theme="dark"][data-ui="crisp"] #sidebar{
  background:var(--ui-bg); border-color:var(--ui-line2);
}
html[data-theme="dark"][data-ui="crisp"] .work-grid > .card,
html[data-theme="dark"][data-ui="crisp"] .view .card,
html[data-theme="dark"][data-ui="crisp"] [class*="card"]{
  background:var(--ui-bg); border-color:var(--ui-line);
}
html[data-theme="dark"][data-ui="crisp"] .drop-zone{ background:var(--ui-fill2); border-color:var(--ui-line); }
html[data-theme="dark"][data-ui="crisp"] .btn.primary,
html[data-theme="dark"][data-ui="crisp"] .segmented button.active,
html[data-theme="dark"][data-ui="crisp"] #view-work #genModeSeg button.active{
  background:var(--ui-ink); color:#141518; border-color:var(--ui-ink);
}
html[data-theme="dark"][data-ui="crisp"] .segmented button,
html[data-theme="dark"][data-ui="crisp"] #view-work #genModeSeg button{
  background:var(--ui-bg); border-color:var(--ui-line); color:var(--ui-ink2);
}
html[data-theme="dark"][data-ui="crisp"] .upload-tips{ background:var(--ui-fill2); border-color:var(--ui-line); }
html[data-theme="dark"][data-ui="crisp"] #sidebar .nav-item.active{
  background:var(--ui-fill); color:var(--ui-ink); box-shadow:inset 2px 0 0 var(--ui-ink);
}

/* ── 15. 移动端 ────────────────────────────────────────────────────── */
@media (max-width:860px){
  html[data-ui="crisp"] #main{ padding:44px 14px 56px; }
  html[data-ui="crisp"] #sidebar{ display:none !important; }
  html[data-ui="crisp"] #view-work #genModeSeg{ gap:7px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-ui="crisp"] #view-work #genModeSeg button{
    width:100%; max-width:none; font-size:11.5px; padding:7px 9px; min-height:44px;
  }
  html[data-ui="crisp"] .work-grid{ grid-template-columns:1fr !important; gap:16px; }
  html[data-ui="crisp"] .work-grid > .card{ min-height:0; overflow:visible; }
  html[data-ui="crisp"] .btn.primary.block{ height:42px; }
  html[data-ui="crisp"] .field{ margin-bottom:16px; }
  html[data-ui="crisp"] .admin-strip{ gap:12px; font-size:11.5px; }
}

/* ── 16. 皮肤切换浮层（对比用；定稿后删掉本段与 index.html 对应脚本） ── */
#uiSkinSwitch{
  position:fixed; right:14px; bottom:14px; z-index:9999;
  display:flex; align-items:center; gap:2px; padding:3px;
  background:rgba(255,255,255,.92); border:1px solid #e8e8ea; border-radius:999px;
  box-shadow:0 1px 6px rgba(0,0,0,.05); backdrop-filter:blur(8px);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  max-width:calc(100vw - 28px);
  opacity:.42; transition:opacity .18s ease;
}
#uiSkinSwitch:hover{ opacity:1; }
#uiSkinSwitch b{
  font-size:10.5px; font-weight:400; color:#a3a8b0; padding:0 4px 0 8px; letter-spacing:.04em;
}
#uiSkinSwitch button{
  height:22px; padding:0 9px; border:0; background:transparent; border-radius:999px;
  font-size:11px; color:#6b7078; cursor:pointer; font-family:inherit;
  transition:background .12s,color .12s; white-space:nowrap;
}
#uiSkinSwitch button:hover{ background:#f1f2f4; color:#16181d; }
#uiSkinSwitch button.on{ background:#1d1f24; color:#fff; }
html[data-theme="dark"] #uiSkinSwitch{ background:rgba(22,23,26,.92); border-color:#2c2d31; }
html[data-theme="dark"] #uiSkinSwitch button{ color:#a9adb4; }
html[data-theme="dark"] #uiSkinSwitch button.on{ background:#ededf0; color:#141518; }
@media (max-width:860px){
  #uiSkinSwitch{ left:10px; right:auto; bottom:auto; top:50px; padding:2px; }
  #uiSkinSwitch b{ display:none; }
  #uiSkinSwitch button{ height:20px; padding:0 8px; font-size:10.5px; }
}

/* ============================================================
   v269 修复：上传区内容压住下方勾选栏（真根因：flex 压缩）
   ------------------------------------------------------------
   实测证据（1440 宽 × 6 种窗口高度）：
     700px → dropZone 42px / 需要 347px → 压住 292px
     900px →  78px / 347px → 压住 256px
    1100px → 278px / 347px → 压住  56px
    1200px → 378px / 376px → 正常
   → 窗口高度 < 1200px 必然重叠。

   根因：#clothingUpload 与 #dropZone 都是 flex 项，
         #dropZone 的 flex:1 1 0% 让它被"压缩"而不是"撑高"，
         内容溢出后压到 #billBar 上。
   修法：让 #dropZone 不参与压缩（flex:0 0 auto），容器不够高时整体滚动。
   ============================================================ */

/* 1) 上传卡片：允许纵向滚动，不压缩子项 */
html[data-ui="crisp"] #clothingUpload{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
html[data-ui="crisp"] #clothingUpload::-webkit-scrollbar{ width: 6px; }
html[data-ui="crisp"] #clothingUpload::-webkit-scrollbar-thumb{
  background: #d5d8dd; border-radius: 3px;
}

/* 2) 上传框：不压缩，按内容撑高 —— 这是核心修复 */
html[data-ui="crisp"] #dropZone{
  flex: 0 0 auto;          /* 关键：禁止被 flex 压缩 */
  height: auto;            /* 跟随内容 */
  min-height: 0;
  display: block;
  padding: 22px 18px 18px;
}
html[data-ui="crisp"] #dropZone .dz-inner{
  display: block;
}

/* 3) 勾选栏、缩略图列表也不许被压缩 */
html[data-ui="crisp"] #billBar{ flex: 0 0 auto; }
html[data-ui="crisp"] #uploadList{ flex: 0 0 auto; }
html[data-ui="crisp"] .upload-prog{ flex: 0 0 auto; }
html[data-ui="crisp"] .upload-tips{ flex: 0 0 auto; }

/* 4) 示例区高度微调，控制整块总高 */
html[data-ui="crisp"] #formatTip{ margin-top: 14px; }
html[data-ui="crisp"] #formatTip .tip-imgs img{ height: 112px; }
html[data-ui="crisp"] #formatTip .tip-diff{
  margin-top: 10px; padding-top: 8px; line-height: 1.6;
}

/* 5) 保险：任何子元素都不许横向溢出 */
html[data-ui="crisp"] #dropZone > *{ max-width: 100%; box-sizing: border-box; }

/* ============================================================
   v270 修复：右侧参数区（生成按钮/费用行）压住上方选项
   ------------------------------------------------------------
   实测证据（1440 宽）：
     1000px：侧边轮廓提示被 #costLine 压住 95%、被 #btnGenerate 压住 74%
     1200px："长袖" 被 #btnGenerate 完全覆盖 100%
     1440px："更多可选参数" 被 #btnGenerate 压住 77%
   根因：.col-params 纵向 flex 中，params-body 未能正确滚动，
         底部 .gen-cta 挤上来覆盖内容。
   修法：params-body 必须可滚（flex:1+min-height:0+overflow-y:auto），
         gen-cta 不压缩、置于流末尾，并给 body 留底部安全距。
   ============================================================ */

html[data-ui="crisp"] .col-params{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
html[data-ui="crisp"] .col-params .params-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;          /* 末项与 cta 之间留呼吸 */
  scrollbar-width: thin;
}
html[data-ui="crisp"] .col-params .params-body::-webkit-scrollbar{ width: 6px; }
html[data-ui="crisp"] .col-params .params-body::-webkit-scrollbar-thumb{
  background: #d5d8dd; border-radius: 3px;
}
html[data-ui="crisp"] .col-params .gen-cta{
  flex: 0 0 auto;               /* 关键：不参与压缩 */
  position: static;             /* 不用绝对/sticky 挤上来 */
  margin-top: 0;
  z-index: auto;
}
/* 费用行与按钮之间不要再互相压 */
html[data-ui="crisp"] .col-params .gen-cta .actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html[data-ui="crisp"] #costLine,
html[data-ui="crisp"] .cost-line{
  margin-bottom: 0;             /* 交给 gap 控制 */
}
html[data-ui="crisp"] #genCost{
  margin-top: 6px;
  flex: 0 0 auto;
}

/* ============================================================
   v277 UI 修复（实测坐标驱动，不是拍脑袋）
   ------------------------------------------------------------
   依据：独立无头浏览器 1440×900 / 1366×768 两档，
        用 getBoundingClientRect 量出重叠与空白，逐项定位。
   ============================================================ */

/* ---- 1. 登录弹窗：标题被输入框压住 ---- */
/* 根因：.auth-notice 显示时 display:none，但 margin:-6px 仍在生效，
   把下面的 .auth-field 往上拉 6px，压住 .auth-title。
   修法：只在 .show 时才给负 margin。 */
html[data-ui="crisp"] .auth-notice{ margin: 0 0 14px; }
html[data-ui="crisp"] .auth-notice.show{ margin: -2px 0 14px; }
html[data-ui="crisp"] .auth-title{
  flex: none;                 /* 不被 flex 压缩 */
  line-height: 1.5;
  margin-bottom: 14px;
  overflow: visible;
}
html[data-ui="crisp"] .auth-card{
  /* 弹窗整体可滚，内容多时滚动而不是压缩子元素 */
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-ui="crisp"] .auth-card::-webkit-scrollbar{ width: 6px; }
html[data-ui="crisp"] .auth-card::-webkit-scrollbar-thumb{ background:#d5d8dd; border-radius:3px; }

/* ---- 2 & 5. 右栏参数区：空 LABEL 压住生成按钮 ---- */
/* 根因：内容超出时溢出到 gen-cta；且空容器仍占高。
   修法：params-body 限高可滚 + 子项不许溢出 + 空块自动收起。 */
html[data-ui="crisp"] .col-params{ min-height: 0; }
html[data-ui="crisp"] .col-params .params-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
/* v278：右栏滚动区给足底部空间，避免「展示风格」被裁 */
html[data-ui="crisp"] .col-params .params-body > *:last-child{
  margin-bottom: 4px;
}
html[data-ui="crisp"] .col-params .params-body > *{
  flex: none;                 /* 子项不参与压缩 */
  min-height: 0;
}
html[data-ui="crisp"] .col-params .gen-cta{
  flex: none;
  position: relative;
  z-index: 6;                 /* 保证按钮在最上层，不被内容覆盖 */
  background: var(--ui-bg, #fff);
  border-top: 1px solid var(--ui-line, #ecedf0);
  margin-top: 0;
}
/* 空的高级参数块：内容为空时不占高度（正是它压住了按钮） */
html[data-ui="crisp"] .col-params .adv-block:empty,
html[data-ui="crisp"] #advFields:empty{ display: none; }

/* ---- 3. 模式按钮（v279：只调尺寸与配色，绝不改布局）---- */
/* 教训：v277 用 grid、v278 用 flex-basis 都改坏了布局。
   原布局是 flex-wrap，8 个按钮天然 4+4 换行 —— 保持不动，只收尺寸。 */
html[data-ui="crisp"] #view-work #genModeSeg button{
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: 8px;
  /* 可点元素必备 1px 描边 + 浅底 —— 否则看起来像纯文字，用户不知道能点 */
  border: 1px solid #dfe2e7 !important;
  background: #fcfcfd !important;
  color: #3f454e !important;
  box-shadow: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
/* 当前选中：深边框 + 更实的底，和未选中明显区分 */
html[data-ui="crisp"] #view-work #genModeSeg button.active{
  border-color: #14161a !important;
  background: #14161a !important;
  color: #ffffff !important;
}
html[data-ui="crisp"] #view-work #genModeSeg button:not(.active):hover{
  border-color: #9aa1ab !important;
  background: #f2f4f6 !important;
}


/* ---- 4. 提示词反推：三列撑满视口导致下方大片空白 ---- */
html[data-ui="crisp"] .rev-3col{
  height: auto !important;
  min-height: 0;
  align-items: start;         /* 列不再被拉满 */
}
html[data-ui="crisp"] .rev-col{
  height: auto;
  min-height: 0;
  max-height: none;
}
/* 中间素材列与右侧结果列：内容少时贴合内容，不要撑到视口底 */
html[data-ui="crisp"] .rev-col-main,
html[data-ui="crisp"] .rev-col-out{
  align-self: start;
}
html[data-ui="crisp"] .rev-drop{ min-height: 150px; }

/* ---- 6. 微小点击目标 ---- */
html[data-ui="crisp"] .foot a,
html[data-ui="crisp"] a[href="/privacy"],
html[data-ui="crisp"] a[href="/tos"]{
  display: inline-block;
  padding: 5px 2px;
  min-height: 24px;
  line-height: 1.4;
}
html[data-ui="crisp"] .seg-tiny button,
html[data-ui="crisp"] button[class*="tiny"]{
  min-height: 28px;
  min-width: 28px;
}

/* ---- 7. 画布抽屉头部按钮互相压 ---- */
html[data-ui="crisp"] .nw-drawer-head .nw-topbtn{
  flex: none;
  min-width: 56px;
  min-height: 30px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
html[data-ui="crisp"] .nw-drawer-head{
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
/* 资产库/功能库切换按钮加间距，避免贴在一起被判定重叠 */
html[data-ui="crisp"] .nw-drawer-body .nw-libhint{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ui-line, #ecedf0);
}

/* ============================================================
   v284 修复 —— 依据实测，不拍脑袋
   ------------------------------------------------------------
   实测环境：独立无头浏览器 1440×900 / 1366×768，先拆反调试遮罩
             （guard.js 的 #devtools-lock 会污染 elementFromPoint），
             再用「裁剪感知可见矩形」判定，不把被滚动区裁掉的当成重叠。

   实测结论（修复前）：
     · 模式按钮 8 个 = 291×40 / 291×53（选中态深底 rgb(20,22,26)）
       → 用户原话「按钮太丑了，弄那么大一个，很刺眼」
     · 1366×768 下 #ratioSeg 的 1:1 / 3:4 / 4:3 / 9:16 / 16:9
       被 .gen-cta .actions 覆盖 100%（z-index:6 只是把遮挡挪到后面，
       内容仍被盖住看不见）
     · #fan-wm 水印与 #uiSkinSwitch 压住 61%
   本段只调尺寸/层级/间距，不改现有布局模型（v277/v278 改布局连坏两次）。
   ============================================================ */

/* ---- 1. 模式条：从「大片色块」收成「一行紧凑可点的小标签」 ---- */
/* 实测：291×53 → 目标高度 ≤36px，字号 12.5→12，减少内距，不做整块深底 */
html[data-ui="crisp"] #view-work #genModeSeg{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px !important;
  width:100%;
}
html[data-ui="crisp"] #view-work #genModeSeg button{
  width:100% !important;
  max-width:none !important;
  min-height:32px !important;
  height:auto !important;
  padding:5px 9px !important;
  font-size:12px !important;
  line-height:1.35 !important;
  border-radius:7px !important;
  border:1px solid #e3e5e9 !important;
  background:#fff !important;
  color:#4a4f57 !important;
  box-shadow:none !important;
  display:flex; align-items:center; justify-content:flex-start;
  white-space:normal;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
/* 选中态：不再整块纯黑压满 → 浅底 + 深描边 + 左侧 3px 竖条（不改变宽度） */
html[data-ui="crisp"] #view-work #genModeSeg button.active{
  background:#f2f3f5 !important;
  border-color:#14161a !important;
  color:#14161a !important;
  font-weight:600 !important;
  box-shadow:inset 3px 0 0 0 #14161a !important;
}
html[data-ui="crisp"] #view-work #genModeSeg button:not(.active):hover{
  border-color:#b6bcc5 !important;
  background:#fafbfc !important;
  color:#14161a !important;
}

/* ---- 2. 右栏 .gen-cta 覆盖比例按钮（实测 100%） ---- */
/* 根因：.col-params 是定高 flex，params-body 可滚但内容总高 1263px，
        滚动区只有 467px；gen-cta 用 position:relative + z-index:6
        压在滚动区底部之上，把最后几行（比例/展示风格/侧边轮廓）盖住。
   修法：① 让 gen-cta 真正不重叠 —— 取消 z-index 叠层语义，
          改为把「最后可见的行」用滚动容器的 padding-bottom 让出来；
        ② 给 params-body 足够的底部安全距，滚到底时最后一项完整可见。 */
html[data-ui="crisp"] .col-params .gen-cta{
  flex:0 0 auto;
  position:static !important;      /* 关键：不叠在滚动区上 */
  z-index:auto !important;
  background:transparent;
  border-top:1px solid var(--ui-line2, #eef0f2);
  padding-top:12px;
}
html[data-ui="crisp"] .col-params .params-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  /* 底部安全距 = gen-cta 高度(约107px) 已由 flex 布局让出，
     这里只需保证滚到底时最后一项不被裁 */
  padding-bottom:16px;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
}
/* 保险：任何子项都不许溢出滚动区（v277 曾让子项 flex:none + 溢出） */
html[data-ui="crisp"] .col-params .params-body > *{
  flex:none !important;
  max-width:100%;
  box-sizing:border-box;
}

/* ---- 3. 水印压住皮肤切换（实测 61%） ---- */
/* 实测：抬高到 bottom:38px 后仍与 work-grid 内容区交叠（80%），
   因为右侧内容区一直铺到 y≈839，而切换器在 y≈836。
   修法：把切换器整体移出右侧内容列 —— 贴到侧栏底部之上、左对齐，
        彻底不落在大卡片上；水印保持右下角不动。 */
html[data-ui="crisp"] #uiSkinSwitch{
  left:10px !important;
  right:auto !important;
  bottom:14px !important;
  z-index:1000000 !important;
  opacity:.55;
}
html[data-ui="crisp"] #uiSkinSwitch:hover{ opacity:1; }
html[data-ui="crisp"] #fan-wm{
  right:8px !important;
  bottom:8px !important;
}
/* 侧栏底部已有「隐私政策/服务协议」，给切换器让出 34px 空间 */
html[data-ui="crisp"] #sidebar{ padding-bottom:52px; }

/* ---- 4. 侧栏导航：可点但无底无框（"看不出能点"） ---- */
html[data-ui="crisp"] #sidebar .nav-item{
  border:1px solid transparent;
}
html[data-ui="crisp"] #sidebar .nav-item:hover{
  border-color:var(--ui-line, #e4e5e9);
}
html[data-ui="crisp"] #sidebar .nav-item.active{
  border-color:var(--ui-line,#ededed);   /* v369 M6 原 #e0e2e6 */
}

/* ---- 8. 带图标的输入框：恢复左侧内边距（v284）---- */
/* 根因：上面的全局规则 input[type="text"]{padding:8px 10px}
   覆盖了 style.css 原本的 padding-left:42px（给左侧图标留位）。
   结果图标（left:13px，宽18px，占 13~31px）压住了从 10px 开始的文字。
   实测：input rect [563,413,314,34]，.ic rect [576,421,18,18] → 重叠。
   修法：只对「父容器里有 .ic 图标」的输入框恢复左内边距。 */
html[data-ui="crisp"] .auth-field input,
html[data-ui="crisp"] .field:has(.ic) input,
html[data-ui="crisp"] .auth-field input[type="text"],
html[data-ui="crisp"] .auth-field input[type="password"],
html[data-ui="crisp"] .auth-field input[type="tel"]{
  padding: 11px 42px 11px 42px;
  min-height: 42px;
  font-size: 13.5px;
  line-height: 1.4;
}
/* 右侧有「显示密码」眼睛按钮的，右边留更多空间 */
html[data-ui="crisp"] .auth-field input#authPw,
html[data-ui="crisp"] .auth-field input[type="password"]{
  padding-right: 46px;
}
/* 带 +86 前缀的手机号框 */
html[data-ui="crisp"] .auth-field .prefix + input{
  padding-left: 52px;
}
/* 带「获取验证码」按钮的框 */
html[data-ui="crisp"] .auth-field input#regCode{
  padding-right: 110px;
}
/* 图标本身定位不变，保证不压文字 */
html[data-ui="crisp"] .auth-field .ic{
  left: 14px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* placeholder 与输入文字同字号，避免视觉跳跃 */
html[data-ui="crisp"] .auth-field input::placeholder{
  font-size: 13.5px;
  color: #9aa1ab;
  opacity: 1;
}
/* 顶部标题与输入框之间给足间距，避免任何边界重叠 */
html[data-ui="crisp"] .auth-title{
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ===== v305 模板库两级类目（服装 / 女鞋 可展开） =====
   一级类目按钮带展开箭头；展开后二级分类换行显示在其下方。
   与既有 .ttab 胶囊风格保持一致，不新增配色。 */
.ttab-group{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;
}
.ttab-group .ttab-caret{font-size:10px;opacity:.75;line-height:1}
.ttab-group.open{background:var(--ink);border-color:var(--ink);color:var(--on-accent)}
.ttab-group.open .ttab-caret{opacity:1}
.ttab-group.has-active:not(.open){border-color:var(--ink-3);color:var(--ink)}

.ttab-sub{
  display:flex;flex-wrap:wrap;gap:8px;
  width:100%;
  padding:8px 0 4px 14px;
  margin:2px 0 4px 0;
  border-left:2px solid var(--line);
}
.ttab-child{
  padding:6px 12px;font-size:12px;
  border-radius:999px;
}
.ttab-child.active{background:var(--ink);border-color:var(--ink);color:var(--on-accent)}

/* tplTabs 容器允许换行，避免二级把横向挤爆 */
#tplTabs{flex-wrap:wrap}