/* ============================================================
   风格样张卡（PC 做海报 · 批一五〇）
   独立成文件避让 app.css 战区（并行会话高频改动区），必须排在 app.css 之后。

   背景核实（先说清楚，免得日后误判）：PC 端风格卡**早就有真图**——
   data.js 给每种风格带 swatch（/assets/styles/xxx.jpg）与 preview，
   form.js 渲染时图区 68px 高。所以本批不做「文字改图」那种重构，
   只做一件事：**让样张成为主体**（68 → 96px，推荐位 90 → 132px）。
   同一张图在小程序风格墙上是 16:9 大图，在 PC 上却只占卡高的三分之一，
   两端观感对不上；选风格这件事，图越大越好选。

   ⚠ 为什么用 !important：form.js 把高度写成内联 style="height:68px"，
   外部 CSS 同特异性盖不动内联，只能 !important。改 form.js 那行也能达到
   同样效果，但 studio/form.js 是海报主链路的高频文件，纯视觉调整不值得
   为它开一次 JS 改动面——回退=删本文件+删 index.html 一行，零残留。
   ============================================================ */

/* 图区抬成主体：卡宽约 150px，96px 高接近 2:3，竖构图海报样张看得清内容 */
.style-item .sp-top { height: 96px !important; }
.rec-cards .style-item .sp-top { height: 132px !important; }

/* 样张铺满且裁切居中（原来 swatch 是 background 简写，center/cover 已在内联，
   这里只兜住没带 preview 的纯 swatch 卡，防止拉伸变形） */
.style-item .sp-top .sw { background-size: cover !important; background-position: center !important; }

/* hover 微放大：鼠标扫过就知道这张是不是自己在找的，不用点开详情 */
.style-item:hover .sp-preview,
.style-item:hover .sw { transform: scale(1.06); }
.style-item .sp-preview,
.style-item .sw { transition: transform .22s var(--ease, ease); }

/* 名字贴紧图下沿（图变高后原来的 6px 上留白显得松） */
.style-item .sn { padding: 6px 7px 2px !important; }

/* 选中态更实：绿环 + 图区微微压暗聚焦名字，一眼扫得出「我选的是哪张」 */
.style-item.on { box-shadow: 0 0 0 2px var(--brand, #1E7A46) !important; }
.style-item.on .sn { color: var(--brand, #1E7A46); }

/* ============================================================
   风格卡「手动推荐」行（批四三九 · 李叔 2026-10-13；批四四一 挪位）
   PC：视觉风格权重卡（知识库推荐卡）上方常驻一行——已搬出全部风格抽屉，
   抽屉收着它也在（批四四一 李叔令「推荐放权重卡上面常驻」）；
   小程序：风格墙顶部同一口径。
   与上方首屏「引擎推荐区」(.rec-cards) 是**两回事**，类名不许混用：
     .rec-cards  引擎按场景算出来的推荐（t.rec，用户改不了）
     .strec-*    运营在后台手点的推荐（style-reco.json，人工排）
   ============================================================ */
.strec-zone { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.strec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.strec-title { font-size: var(--t-body); font-weight: 600; color: var(--text); }
.strec-tip { font-size: var(--t-weak); color: var(--t3); }
/* 一行横向排：不设固定列数——几张由运营说了算（上限 6，服务端卡），
   一行放不下就换成紧凑网格，不横向滚动（手机上横向滚动＝第二屏没人滑） */
.strec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.strec-empty { padding: 6px 0; color: var(--t3); font-size: var(--t-weak); }

/* ============================================================
   #/styles「风格卡」管理页 · 列表行与开关（批四三八 → 批四三九）
   原「推荐卡样式文件」（批四三二 店长推荐批次）里的这批类是给**风格卡后台列表**用的，
   推荐模块删掉后它们跟着搬回本文件——它们管的本来就是风格卡。
   ============================================================ */
.rc-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.rc-bar .sp { flex: 1; }
.rc-note { font-size: var(--t-weak); color: var(--t3); }

.rc-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-btn); margin-bottom: 8px;
}
.rc-row.shown { border-color: var(--brand); }
.rc-row.off { opacity: .62; }
.rc-thumb {
  width: 64px; height: 40px; flex: none; border-radius: var(--r-s);
  background: var(--brand-soft) center/cover;
}
/* 行内 kid 小编号（STYLE-XXX）：让运营对得上前台那张卡 */
.rc-kid { font-size: var(--t-weak); font-weight: 400; color: var(--t3); font-variant-numeric: var(--num); }
.rc-main { flex: 1; min-width: 0; }
.rc-name { font-size: var(--t-body); font-weight: 600; color: var(--text); }
.rc-name .tag {
  margin-left: 6px; font-size: var(--t-weak); font-weight: 400; padding: 1px 6px;
  border-radius: var(--r-pill); background: var(--gold-soft); color: var(--on-gold);
}
.rc-name .tag.gray { background: var(--hover); color: var(--t3); }
.rc-meta {
  font-size: var(--t-weak); color: var(--t3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-ops { display: flex; align-items: center; gap: 6px; flex: none; }

/* 开关：与全站 .btn small 同高度的胶囊两态键，不另造组件 */
.rc-sw {
  min-width: 52px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card-2); color: var(--t3);
  font-size: var(--t-weak); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rc-sw.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
/* 出厂锁定的开关：置灰不可点（title 里有原因） */
.rc-sw:disabled { opacity: 0.45; cursor: not-allowed; }

/* 排序键（批四三九 · 推荐位次序由运营排，服务端不做第二套排序算法） */
.rc-mv {
  width: 26px; height: 26px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card-2); color: var(--t3);
  font-size: var(--t-weak); cursor: pointer; line-height: 1;
}
.rc-mv:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.rc-mv:disabled { opacity: 0.35; cursor: not-allowed; }
/* 序号：让「现在排第几」不用数 */
.rc-seq {
  width: 22px; flex: none; text-align: center; font-variant-numeric: var(--num);
  font-size: var(--t-weak); color: var(--t3);
}

.rc-empty { padding: var(--pad-empty); text-align: center; color: var(--t3); font-size: var(--t-body); }

/* 筛选胶囊（全部/展示中/已隐藏 …）：与 rc-sw 同族，选中态走品牌色 */
.rc-filter { display: flex; gap: 6px; }
.rc-fw {
  height: 26px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card-2); color: var(--t3);
  font-size: var(--t-weak); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rc-fw.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }

/* ============================================================
   分组网格（批四四〇 · 李叔 2026-10-13「多列网格或瀑布流」）
   两个板块（显隐 / 推荐）共用；卡片形态＝李叔拍板的方案 A 竖卡
   （图上文下，缩略图大、风格一眼认得出）。列数不写死：
   auto-fill + minmax(200px,1fr) → 大屏 4~5 列 / 半屏 2~3 列 / 窄屏 1 列。
   ============================================================ */
.sg-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.sg-sp { flex: 1; }
.sg-search {
  width: 240px; height: 28px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--card-2); color: var(--text); font-size: var(--t-weak);
}
.sg-search:focus { outline: none; border-color: var(--brand); }

.sg-group { margin-bottom: 14px; }
.sg-head {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 8px;
  cursor: pointer; user-select: none;
}
.sg-arrow { font-size: var(--t-weak); color: var(--t3); width: 12px; flex: none; }
.sg-gname { font-size: var(--t-body); font-weight: 600; color: var(--text); }
.sg-gnote { font-size: var(--t-weak); color: var(--t3); }

.sg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.sg-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-btn);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease);
}
.sg-card:hover { border-color: var(--brand); }
.sg-card.off { opacity: .62; }
.sg-thumb { position: relative; height: 96px; background: var(--brand-soft) center/cover; }
.sg-thumb .sg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-badge {
  position: absolute; top: 6px; right: 6px;
  font-size: var(--t-weak); padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--gold-soft); color: var(--on-gold);
}
.sg-badge.gray { background: var(--hover); color: var(--t3); }
.sg-badge.green { background: var(--brand-soft); color: var(--brand); }
.sg-info { padding: 7px 9px 2px; min-height: 0; }
.sg-name {
  font-size: var(--t-body); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-kid { font-size: var(--t-weak); font-weight: 400; color: var(--t3); font-variant-numeric: var(--num); }
.sg-meta {
  font-size: var(--t-weak); color: var(--t3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-ops { padding: 6px 9px 9px; display: flex; align-items: center; gap: 6px; margin-top: auto; }
/* 网格里的行内按钮沿用 rc-sw / rc-mv 两族（同一套卡面语言，不另造组件） */
.sg-ops .rc-sw, .sg-ops .rc-mv { flex: none; }