/* ============================================================
   风格样张卡（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); }