/* ============================================================================
   商品套图（图片板块 · 2026-09-20）
   · 本文件独立于 style.css（站内惯例：每个功能一个 css，见 spinvid.css / voiceclone.css），
     在 style.css 之后加载 → 只新增、不覆盖任何既有规则。
   · 所有类名以 sk- 开头，全站唯一。
   · 色彩全部走站点既有变量（--primary / --grad / --text / --text2 / --chip-bg），
     不新造第二套品牌色。
   ========================================================================== */

/* hidden 兜底：本页大量用 flex/grid，不加这条会被 display 盖掉 */
#sub-setkit [hidden] { display: none !important; }

/* ---------- Hero ---------- */
.sk-hero {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 26px 20px 22px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #fff6f0 0%, #ffeadd 55%, #ffe0cc 100%);
  border: 1px solid rgba(249, 89, 1, 0.10);
}
.sk-hero::after {
  content: ''; position: absolute; right: -70px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 89, 1, 0.16) 0%, rgba(249, 89, 1, 0) 70%);
  pointer-events: none;
}
.sk-hero-t {
  font-size: 26px; font-weight: 800; letter-spacing: 1px;
  color: #b8380a; margin-bottom: 8px;
}
.sk-hero-s { font-size: 14px; line-height: 1.6; color: #8a6553; margin-bottom: 16px; }
.sk-hero-s b { color: #c9410c; font-weight: 800; }
.sk-hero-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; position: relative; z-index: 1; }
.sk-fchip {
  font-size: 12px; font-weight: 700; color: #b3703f;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(249, 89, 1, 0.16);
  padding: 5px 11px; border-radius: 999px;
}
.sk-fchip.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(249, 89, 1, 0.28); }
.sk-hero-flow i { color: #d7a184; font-style: normal; font-size: 12px; }

/* ---------- 两栏 ---------- */
.sk-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1024px) {
  .sk-cols { grid-template-columns: 400px 1fr; align-items: start; gap: 20px; }
  /* 🔴 桌面端右栏必须自己固定住 + 内部滚动。
     实测：左栏设置 1274px 高、右栏只有 460px —— 不固定的话，
     用户在左边滚动时右边会整片滑出视口，只剩一块空白（截图里非常明显）。
     参考产品的做法也是"左设置滚动、右画布不动"。
     top 用实测值：顶栏 61px + 12px 间距 = 73px；max-height 再留 12px 底边距。 */
  .sk-right {
    position: sticky;
    top: 73px;
    max-height: calc(100vh - 85px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.sk-left, .sk-right { min-width: 0; }
.sk-left .card { margin-bottom: 12px; }

/* ---------- 卡片标题里的右侧小件 ---------- */
.sk-meta { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text2); }
.sk-ct-flex { display: flex; align-items: center; gap: 8px; }
.sk-aiw {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--primary); background: var(--chip-bg);
  border: 1px solid rgba(249, 89, 1, 0.22);
  padding: 5px 10px; border-radius: 999px;
  transition: background 0.15s, transform 0.1s;
}
.sk-aiw:active { transform: scale(0.96); }
.sk-aiw:disabled { opacity: 0.5; cursor: not-allowed; }
.sk-aiw.busy { color: var(--text2); }

/* ---------- 上传区 ---------- */
.sk-drop {
  border: 1.5px dashed #ffcdb0; border-radius: 16px;
  background: #fffaf6; padding: 10px;
  transition: border-color 0.16s, background 0.16s;
}
.sk-drop.over { border-color: var(--primary); background: #fff3e9; }
.sk-drop-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 20px 10px; cursor: pointer; border-radius: 12px;
}
.sk-drop-ico {
  width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg); color: var(--primary); margin-bottom: 4px;
}
.sk-drop-t { font-size: 14px; font-weight: 800; color: var(--text); }
.sk-drop-s { font-size: 12px; color: var(--text2); }

.sk-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; padding: 4px;
}
.sk-th {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid #ffe4d3;
}
.sk-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-th-first {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(249, 89, 1, 0.86); padding: 2px 6px; border-radius: 6px;
}
.sk-th-x {
  position: absolute; right: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(28, 18, 12, 0.62); color: #fff;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.sk-th-x:active { transform: scale(0.9); }

/* ---------- 四个下拉 ---------- */
.sk-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sk-sel {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: #fffaf6; border: 1px solid #ffe0cb; border-radius: 13px;
  padding: 9px 30px 9px 12px; min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.sk-sel:active { background: #fff3e9; }
.sk-sel.open { border-color: var(--primary); background: #fff; }
.sk-sel-k { display: block; font-size: 11px; color: var(--text2); margin-bottom: 2px; }
.sk-sel-v {
  display: block; font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-caret {
  position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
  margin-top: -4px; border-right: 2px solid #d0a184; border-bottom: 2px solid #d0a184;
  transform: rotate(45deg); transition: transform 0.18s;
}
.sk-sel.open .sk-caret { transform: rotate(-135deg); margin-top: -1px; }

/* 下拉浮层（挂到 body，避免被卡片裁掉） */
.sk-menu {
  position: fixed; z-index: 3000;
  background: #fff; border-radius: 14px;
  border: 1px solid #ffe4d3;
  box-shadow: 0 14px 38px rgba(120, 60, 20, 0.18);
  padding: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: skMenuIn 0.14s ease-out;
}
@keyframes skMenuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.sk-mi {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 10px 11px; border-radius: 10px; cursor: pointer;
}
.sk-mi:active { background: #fff3e9; }
.sk-mi.on { color: var(--primary); background: var(--chip-bg); }
.sk-mi-tick { margin-left: auto; font-size: 13px; opacity: 0; }
.sk-mi.on .sk-mi-tick { opacity: 1; }

/* ---------- 卖点输入 ---------- */
.sk-ta {
  width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit;
  background: #fffaf6; border: 1px solid #ffe0cb; border-radius: 14px;
  padding: 12px 13px; font-size: 14px; line-height: 1.65; color: var(--text);
  outline: none; min-height: 132px;
}
.sk-ta:focus { border-color: var(--primary); background: #fff; }
.sk-ta::placeholder { color: #c9a793; }

/* ---------- 套图结构 ---------- */
.sk-struct { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sk-struct-card {
  text-align: left; cursor: pointer; font-family: inherit;
  background: #fffaf6; border: 1.5px solid #ffe0cb; border-radius: 14px;
  padding: 12px 12px 13px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sk-struct-card b { display: block; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.sk-struct-card span { display: block; font-size: 11.5px; line-height: 1.5; color: var(--text2); }
.sk-struct-card.on {
  border-color: var(--primary); background: #fff5ee;
  box-shadow: 0 0 0 3px rgba(249, 89, 1, 0.10);
}
.sk-struct-card.on b { color: var(--primary); }

.sk-counts { margin-top: 12px; border-top: 1px dashed #ffe0cb; padding-top: 4px; }
.sk-cnt { display: flex; align-items: center; gap: 10px; padding: 10px 2px; }
.sk-cnt + .sk-cnt { border-top: 1px solid #fff2e9; }
.sk-cnt-tx { min-width: 0; flex: 1; }
.sk-cnt-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.sk-cnt-tx span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--text2); margin-top: 2px; }
.sk-step {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  background: #fff5ee; border: 1px solid #ffe0cb; border-radius: 999px; padding: 2px;
}
.sk-step-b {
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: var(--primary); font-size: 16px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 1px 3px rgba(249, 89, 1, 0.14);
  transition: transform 0.1s, opacity 0.15s;
}
.sk-step-b:active { transform: scale(0.9); }
.sk-step-b:disabled { opacity: 0.34; box-shadow: none; cursor: not-allowed; }
.sk-step-n {
  min-width: 22px; text-align: center; font-size: 14px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- 开关 ---------- */
.sk-sw-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.sk-sw-row + .sk-sw-row { border-top: 1px solid #fff2e9; }
.sk-sw-tx { flex: 1; min-width: 0; }
.sk-sw-tx b { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.sk-sw-tx span { display: block; font-size: 11.5px; line-height: 1.5; color: var(--text2); margin-top: 2px; }
.sk-sw {
  flex: 0 0 auto; width: 46px; height: 27px; border-radius: 999px; border: none; cursor: pointer;
  background: #eadfd8; position: relative; padding: 0; transition: background 0.2s;
}
.sk-sw::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}
.sk-sw[aria-checked="true"] { background: var(--grad); }
.sk-sw[aria-checked="true"]::after { transform: translateX(19px); }

/* ---------- 底部动作条 ---------- */
.sk-bar {
  position: sticky; bottom: 84px; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(249, 89, 1, 0.12);
  border-radius: 18px; padding: 11px 13px; margin-top: 4px;
  box-shadow: 0 8px 24px rgba(120, 60, 20, 0.12);
}
@media (min-width: 1024px) { .sk-bar { bottom: 12px; } }
.sk-bar-tx { flex: 1; min-width: 0; }
.sk-bar-tx b { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.sk-bar-tx span { display: block; font-size: 11px; color: var(--text2); margin-top: 1px; }
.sk-bar .gen-btn {
  flex: 0 0 auto; width: auto; font-size: 14px; letter-spacing: 0.5px;
  padding: 12px 18px; white-space: nowrap;
}

/* ============================================================================
   右栏：工作区
   ========================================================================== */
.sk-panel {
  background: var(--card); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(249, 89, 1, 0.08);
}
@media (min-width: 1024px) { .sk-panel { padding: 20px; } }

/* ---------- 空态：一套图长这样 ---------- */
.sk-empty-t { font-size: 17px; font-weight: 800; color: var(--text); }
.sk-empty-s { font-size: 13px; line-height: 1.7; color: var(--text2); margin: 6px 0 16px; }
.sk-demo {
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a b" "a c" "d e";
}
.sk-demo-1 { grid-area: a; }
.sk-demo-2:nth-of-type(2) { grid-area: b; }
.sk-demo-2:nth-of-type(3) { grid-area: c; }
.sk-demo-2:nth-of-type(4) { grid-area: d; }
.sk-demo-2:nth-of-type(5) { grid-area: e; }
.sk-demo-1, .sk-demo-2 {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid #ffe4d3; min-height: 108px;
}
.sk-demo-1 { min-height: 224px; }
.sk-demo-tag {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  font-size: 11px; font-weight: 700; color: #6b5142;
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 8px; border-radius: 7px;
}
.sk-demo-ph { position: absolute; inset: 0; display: block; }
.sk-ph-a { background: linear-gradient(160deg, #fdfdfd 0%, #f3f0ee 55%, #e8e3df 100%); }
.sk-ph-a::after {
  content: ''; position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 46%; height: 56%; border-radius: 14px 14px 8px 8px;
  background: linear-gradient(150deg, #d9d3cd 0%, #b9b1aa 100%);
  box-shadow: 0 10px 20px rgba(120, 90, 70, 0.16);
}
.sk-ph-b { background: linear-gradient(150deg, #6b5a52 0%, #8d7466 45%, #b89a86 100%); }
.sk-ph-c { background: linear-gradient(150deg, #7d8b93 0%, #a9b6bc 50%, #dfe6e9 100%); }
.sk-ph-d { background: linear-gradient(150deg, #efe7e0 0%, #d8ccc2 60%, #c2b3a6 100%); }
.sk-ph-e { background: linear-gradient(150deg, #f7efe8 0%, #eddfd2 55%, #e0cdbb 100%); }
.sk-ph-b::after, .sk-ph-c::after, .sk-ph-d::after, .sk-ph-e::after {
  content: ''; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  width: 38%; height: 44%; border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
}

/* ---------- 生成中 / 结果 ---------- */
.sk-stage-h { margin-bottom: 14px; }
.sk-stage-t { font-size: 16px; font-weight: 800; color: var(--text); }
.sk-stage-t b { color: var(--primary); font-variant-numeric: tabular-nums; }
.sk-stage-s { font-size: 12.5px; color: var(--text2); margin-top: 4px; min-height: 18px; }
.sk-pbar {
  height: 6px; border-radius: 999px; background: #ffeade; overflow: hidden; margin-top: 10px;
}
.sk-pbar i {
  display: block; height: 100%; width: 0%;
  background: var(--grad); border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.sk-pbar.busy i {
  background-image: linear-gradient(90deg, #f94400 0%, #ff8845 45%, #ffc79a 55%, #ff8845 65%, #f94400 100%);
  background-size: 220% 100%;
  animation: skSheen 1.5s linear infinite;
}
@keyframes skSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.sk-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .sk-shots { grid-template-columns: repeat(3, 1fr); } }
.sk-shot {
  border-radius: 14px; overflow: hidden; border: 1px solid #ffe4d3;
  background: #fffaf6; display: flex; flex-direction: column;
}
.sk-shot-h {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
}
.sk-shot-n {
  font-size: 11px; font-weight: 800; color: var(--primary);
  font-variant-numeric: tabular-nums; letter-spacing: 0.5px;
}
.sk-shot-t {
  font-size: 11px; font-weight: 700; color: #8a6553;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-shot-b {
  position: relative; width: 100%; aspect-ratio: 1 / 1; background: #fff2e9;
}
.sk-shot-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-shot-ph {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(100deg, #fff2e9 20%, #ffe6d6 40%, #fff2e9 60%);
  background-size: 220% 100%; animation: skShimmer 1.4s linear infinite;
}
@keyframes skShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sk-shot-st {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #b3703f; text-align: center; padding: 8px;
}
.sk-shot-st.err { color: var(--danger); }
.sk-shot-f { padding: 7px 9px 9px; display: flex; gap: 6px; }
.sk-shot-f button {
  flex: 1; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  border-radius: 9px; padding: 7px; border: 1px solid #ffe0cb; background: #fff; color: #a06a3c;
}
.sk-shot-f button:active { transform: scale(0.97); }
.sk-shot-f button.pri { background: var(--chip-bg); color: var(--primary); border-color: #ffd3b8; }
.sk-shot-f button:disabled { opacity: 0.5; cursor: not-allowed; }

.sk-stage-f { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.sk-act {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px; border-radius: 999px;
  border: 1px solid #ffe0cb; background: #fff; color: #a06a3c;
  transition: transform 0.1s, opacity 0.15s;
}
.sk-act:active { transform: scale(0.97); }
.sk-act.primary { flex: 1; background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(249, 89, 1, 0.3); }
.sk-act.mini { padding: 6px 12px; font-size: 12px; }

/* ---------- 商品画像 / 爆款拆解 ---------- */
.sk-persona-h {
  font-size: 12px; font-weight: 800; color: var(--text2);
  letter-spacing: 1px; margin-bottom: 7px;
}
.sk-persona {
  font-size: 14px; line-height: 1.75; color: var(--text);
  background: #fffaf6; border: 1px solid #ffe8d9; border-radius: 13px; padding: 12px 13px;
  white-space: pre-wrap; word-break: break-word;
}
.sk-viral { margin-top: 12px; }
.sk-viral b { display: block; font-size: 12px; font-weight: 800; color: var(--primary); margin-bottom: 6px; letter-spacing: 0.5px; }
.sk-viral div {
  font-size: 13px; line-height: 1.7; color: #7a6155;
  background: #fff5ee; border-radius: 12px; padding: 11px 12px;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- 上架文案 ---------- */
.sk-copy-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sk-copy-h b { flex: 1; font-size: 15px; font-weight: 800; color: var(--text); }
.sk-copy {
  margin: 0; font-family: inherit; font-size: 13.5px; line-height: 1.8; color: var(--text);
  background: #fffaf6; border: 1px solid #ffe8d9; border-radius: 13px; padding: 13px;
  white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto;
}

/* ---------- 错误条 ---------- */
.sk-err {
  margin-top: 2px; font-size: 13px; line-height: 1.6; color: #b91c1c;
  background: #fee2e2; border: 1px solid #fecaca;
  border-radius: 13px; padding: 11px 13px;
}

/* ---------- 「商品套图」的图标底色 ----------
   style.css 里的 f-orange / f-red / f-green / f-pink / f-blue / f-cyan / f-purple /
   f-yellow / f-brown / f-indigo / f-sepia / f-gold 共 12 个**全被占用了**，
   所以新造一个 f-setkit。刻意用深咖—石墨（全站唯一的暗色图标）：
   ① 与 12 个彩色图标天然区分，一眼能找到；② 暗色自带"专业/高级"的心理暗示，
   正好配"上架用的正式商品图"这个定位。 */
.f-setkit { background: linear-gradient(135deg, #7a5c46 0%, #33261d 100%); }

/* 结果图右下角的「实得尺寸」小标签。
   为什么不写请求尺寸：模型不保证按请求尺寸出图（实测 1:1 请求 1024² 实得 1254²），
   比例是对的但像素会差 —— 界面上必须说真话。 */
.sk-shot-size {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(28, 18, 12, 0.55);
  padding: 2px 6px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(2px);
}

/* ============================================================================
   生成记录（右上角入口 + 抽屉）
   ----------------------------------------------------------------------------
   第一版漏了这个入口（参考产品右上角有「生成记录」），补齐。
   数据走站内既有的 /api/my/generations?kind=setkit —— 服务端本来就在记录，
   这里只是给用户一个"回去看"的地方。
   ========================================================================== */
.sk-his-entry {
  margin-left: auto;                 /* .sub-topbar 是 flex，用 auto 靠右 */
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--chip-bg); color: var(--primary);
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease, transform .12s ease;
}
.sk-his-entry:active { transform: scale(.97); }
.sk-his-entry:hover { filter: brightness(.96); }
.sk-his-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sk-his-n[hidden] { display: none !important; }

/* 遮罩：桌面端从右侧滑出，手机端整屏 */
.sk-his-mask {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(26, 18, 12, .42);
  display: flex; justify-content: flex-end;
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
.sk-his-mask[hidden] { display: none !important; }   /* 🔴 flex 会盖掉 hidden 的默认规则 */

.sk-his {
  width: min(430px, 100%); height: 100%;
  background: var(--card-bg, #fff);
  display: flex; flex-direction: column;
  box-shadow: -18px 0 46px rgba(28, 18, 12, .18);
  animation: sk-his-in .22s cubic-bezier(.22, .8, .3, 1);
}
@keyframes sk-his-in { from { transform: translateX(22px); opacity: .4; } to { transform: none; opacity: 1; } }

.sk-his-h {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line, #efe9e4);
  flex: 0 0 auto;
}
.sk-his-h b { font-size: 16px; font-weight: 800; }
.sk-his-tip { font-size: 11.5px; color: var(--muted, #9a8f88); }
.sk-his-x {
  margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 9px;
  background: var(--chip-bg); color: var(--text, #2c2320);
  font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.sk-his-b {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px 22px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  align-content: start;
}
.sk-hi {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--chip-bg, #f4f1ee);
  border: 1px solid var(--line, #efe9e4);
}
.sk-hi > img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  cursor: zoom-in; background: #fff;
}
.sk-hi-b2 {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px;
}
.sk-hi-t {
  font-size: 10.5px; font-weight: 700; color: var(--muted, #9a8f88);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sk-hi-dl {
  margin-left: auto; border: 0; border-radius: 7px; padding: 3px 8px;
  background: var(--primary); color: #fff;
  font-size: 10.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* 抽屉内的空态/提示 */
.sk-his-empty {
  grid-column: 1 / -1;
  padding: 46px 18px; text-align: center;
  color: var(--muted, #9a8f88); font-size: 13px; line-height: 1.9;
}
.sk-his-empty b { display: block; margin-bottom: 6px; font-size: 14px; color: var(--text, #2c2320); }

@media (max-width: 560px) {
  .sk-his { width: 100%; animation: none; }
  .sk-his-b { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
}