/* ============================================================
   选色中心（color_studio）专用样式 v2 —— 立邦色盘复刻版
   复用站点令牌：--navy --bg --muted --border --surface --text --r-card --shadow-1
   品牌红用字面量 #e60012（站点 CSS 未定义 --red 变量）
   ============================================================ */
.color-studio {
  --red: #e60012;
  background: var(--bg);
  padding-bottom: 56px;
}

/* 页头 */
.cs-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 36px 0 26px;
}
.cs-head .crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.cs-head .crumb a { color: var(--muted); text-decoration: none; }
.cs-head .crumb a:hover { color: var(--navy); }
.cs-head h1 {
  margin: 0 0 10px; font-size: 30px; color: var(--navy);
  display: flex; align-items: center; gap: 12px;
}
.cs-head h1 .bar {
  width: 5px; height: 26px; background: var(--red); border-radius: 3px;
}
.cs-head .lead { margin: 0; color: var(--text); font-size: 15px; line-height: 1.7; max-width: 820px; }
.cs-head .lead b { color: var(--navy); }

/* 工具主体 */
.cs-body {
  display: grid; grid-template-columns: 1fr 340px; gap: 28px;
  align-items: start; padding-top: 22px;
}

/* ---------- 左栏：色盘 ---------- */
.cs-left { min-width: 0; }

/* 搜索条 */
.cs-tools { position: relative; margin-bottom: 14px; }
.cs-search {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 12px 15px; font-size: 14px; outline: none; background: var(--surface);
}
.cs-search:focus { border-color: var(--navy); }
.cs-sr {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(9,31,60,.16); overflow: hidden; display: none;
}
.cs-sr.on { display: block; }
.cs-sr-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 13px; border: 0; background: transparent; cursor: pointer;
  border-bottom: 1px solid #f0f2f6; text-align: left;
}
.cs-sr-item:hover { background: #f7f9fc; }
.cs-sr-item .sw { width: 26px; height: 26px; border-radius: 5px; border: 1px solid rgba(0,0,0,.08); flex: none; }
.cs-sr-item .nm { font-size: 13px; font-weight: 600; color: var(--navy); font-family: ui-monospace, Menlo, monospace; }
.cs-sr-item .hx { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.cs-sr-item .fm { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.cs-sr-empty, .cs-sr-more { padding: 12px 14px; font-size: 13px; color: var(--muted); }

/* 色相族筛选条 */
.cs-fambar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.cs-fam {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; cursor: pointer; color: var(--text);
  user-select: none; transition: all .12s; display: inline-flex; align-items: center; gap: 5px;
}
.cs-fam:hover { border-color: var(--navy); }
.cs-fam.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.cs-fam .ct { font-size: 11px; opacity: .6; font-family: ui-monospace, Menlo, monospace; }

/* 色盘容器 */
.cs-wheel-wrap {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
  padding: 16px; display: flex; justify-content: center;
}
#csWheel { display: block; cursor: crosshair; touch-action: manipulation; }
.cs-hover-tip {
  position: absolute; pointer-events: none; z-index: 20;
  background: rgba(9,31,60,.94); color: #fff; border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; display: none; align-items: center; gap: 8px;
  white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.24);
}
.cs-hover-tip.on { display: flex; }
.cs-hover-tip .sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,.4); flex: none; }
.cs-hover-tip b { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.cs-hover-tip .hx { font-family: ui-monospace, Menlo, monospace; opacity: .75; font-size: 11.5px; }
.cs-hover-tip .fm { opacity: .8; font-size: 11.5px; }

/* 环说明 */
.cs-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: 12px; color: var(--muted);
}
.cs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* 同色相深浅梯度 */
.cs-grad-sec { margin-top: 20px; }
.cs-grad-title {
  font-size: 15px; color: var(--navy); font-weight: 700; margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.cs-grad-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.cs-grad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.cs-grad button {
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 0 0 8px; cursor: pointer; overflow: hidden; text-align: center;
  transition: transform .12s, box-shadow .12s;
}
.cs-grad button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(22,38,72,.14); }
.cs-grad button.on { outline: 3px solid var(--red); outline-offset: -1px; }
.cs-grad .sw { display: block; height: 62px; margin-bottom: 7px; }
.cs-grad .nm {
  display: block; font-size: 11px; color: var(--navy); font-weight: 600;
  font-family: ui-monospace, Menlo, monospace; padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-grad-tip { font-size: 13px; color: var(--muted); }

/* ---------- 右栏：预览面板 ---------- */
.cs-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 18px; position: sticky; top: 16px; box-shadow: var(--shadow-1);
}
.cs-panel .pv-t { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.cs-pv-color { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cs-pv-chip {
  width: 68px; height: 68px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08);
  flex: none; transition: background .15s;
}
.cs-pv-meta b { font-size: 17px; color: var(--navy); font-family: ui-monospace, Menlo, monospace; }
.cs-pv-meta .hx { font-family: ui-monospace, Menlo, monospace; color: var(--muted); font-size: 12.5px; }
.cs-pv-meta .fm {
  display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--navy);
  background: #eef2f8; border-radius: 999px; padding: 2px 10px;
}
.cs-pv-meta .ms { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.cs-pv-meta .copy {
  display: inline-block; margin-top: 8px; font-size: 12px; color: var(--red);
  border: 1px solid var(--red); border-radius: 999px; padding: 4px 13px; cursor: pointer;
  user-select: none; background: none;
}
.cs-pv-meta .copy.done { color: #2e9e5b; border-color: #2e9e5b; }

/* SVG 房间场景 */
.cs-scene { width: 100%; border-radius: 12px; overflow: hidden; background: #eef1f6; display: block; }
.cs-scene .wall { transition: fill .15s; }

/* 上传试色 */
.cs-up { margin-top: 16px; }
.cs-up label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.cs-up-box {
  position: relative; border-radius: 12px; overflow: hidden; background: #eef1f6; aspect-ratio: 4/3;
}
.cs-up-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-up-box .tint { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; opacity: 0; }
.cs-up-box .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #9aa6b6; font-size: 13px; text-align: center; padding: 0 18px; cursor: pointer;
}
.cs-hint { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.65; }

/* 移动端 */
@media (max-width: 880px) {
  .cs-body { grid-template-columns: 1fr; gap: 18px; }
  .cs-panel { position: static; }
  .cs-head { padding: 24px 0 18px; }
  .cs-head h1 { font-size: 24px; }
  .cs-head .lead { font-size: 14px; }
  .cs-wheel-wrap { padding: 10px; }
  .cs-fambar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .cs-fam { flex: none; }
  .cs-grad { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cs-grad .sw { height: 48px; }
  .cs-grad .nm { font-size: 10.5px; }
}

/* ============================================================
   效果色卡（ce-*） 2026-11-10
   页面专属响应式只写在本文件（本表在 mobile.css 之后加载），
   组件统一 ce- 前缀，避开 mobile.css 通用类强制 13px!important 的撞车。
   仅用 --navy / --red 两色 + 中性令牌，不引入第三色。
   ============================================================ */
[hidden] { display: none !important; }

/* 一条主 Tab 轨道：4 项并列，单行横滑永不换行 */
.ce-tabs {
  display: flex; gap: 8px; margin: 20px 0 0; padding-bottom: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; border-bottom: 1px solid var(--border);
}
.ce-tabs::-webkit-scrollbar { display: none; }
.ce-tab {
  flex: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--navy); border-radius: 999px; padding: 9px 20px;
  font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}
.ce-tab:hover { border-color: var(--navy); }
.ce-tab.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* 桌面左右栏 */
.ce-effect { padding-top: 22px; }
.ce-body { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
.ce-side { min-width: 0; }
.ce-side-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ce-side-head h2 { margin: 0; font-size: 17px; color: var(--navy); }
.ce-side-count { font-size: 12px; color: var(--muted); }
.ce-syslist { display: flex; flex-direction: column; gap: 7px; max-height: 660px; overflow-y: auto; }

/* 体系卡：桌面横排小卡 */
.ce-syscard {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 7px; cursor: pointer; text-align: left; color: var(--text);
  transition: border-color .14s, box-shadow .14s;
}
.ce-syscard:hover { border-color: var(--navy); }
.ce-syscard.is-active { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.ce-syscard-ph { width: 52px; height: 52px; flex: none; border-radius: 7px; overflow: hidden; background: var(--bg); }
.ce-syscard-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-syscard-nm {
  display: block; min-width: 0; flex: 1 1 auto; font-size: 13px; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ce-syscard-meta { display: block; flex: none; font-size: 11.5px; color: var(--muted); }
.ce-syscard-tag {
  display: none; flex: none; font-size: 11px; color: var(--red);
  border: 1px solid var(--red); border-radius: 999px; padding: 1px 7px;
}
.ce-pager { display: flex; justify-content: center; gap: 7px; padding: 12px 0 2px; }
.ce-page-dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--border); cursor: pointer; padding: 0; }
.ce-page-dot.is-on { background: var(--red); }
.ce-scene-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 13px; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.ce-scene-link:hover { color: var(--red); border-color: var(--red); }

/* 详情顶栏：返回 + 单行横滑体系轨道（移动端专用） */
.ce-detail-top { display: none; }
.ce-back {
  border: 0; background: none; color: var(--navy); font-size: 13.5px;
  cursor: pointer; padding: 8px 0; white-space: nowrap; flex: none;
}
.ce-systrack {
  display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 6px 0;
}
.ce-systrack::-webkit-scrollbar { display: none; }
.ce-track-chip {
  flex: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--navy); border-radius: 999px; padding: 6px 14px;
  font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.ce-track-chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* 详情标题 */
.ce-main { min-width: 0; }
.ce-detail-hd { scroll-margin-top: 20px; border-radius: 10px; transition: background .3s, box-shadow .3s; }
.ce-detail-hd.is-linked { background: #fff4f4; box-shadow: 0 0 0 2px var(--red); }
.ce-detail-t { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ce-detail-t h3 { margin: 0; font-size: 20px; color: var(--navy); }
.ce-detail-cnt { font-size: 12.5px; color: var(--muted); }
.ce-detail-tag {
  font-size: 11.5px; color: var(--red); border: 1px solid var(--red);
  border-radius: 999px; padding: 2px 9px;
}
.ce-copy {
  margin-left: auto; border: 1px solid var(--navy); background: none; color: var(--navy);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer;
}
.ce-copy.is-done { border-color: var(--red); color: var(--red); }
.ce-detail-desc { margin: 9px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* 父体系子 TAB */
.ce-subtabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.ce-subtabs-lb { font-size: 12.5px; color: var(--muted); }
.ce-subtab {
  border: 1px solid var(--border); background: var(--surface); color: var(--navy);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.ce-subtab.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* 同色号换工艺对比 */
.ce-compare {
  margin-top: 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 14px;
}
.ce-compare-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ce-compare-hd b { font-size: 14px; color: var(--navy); }
.ce-compare-hd span { font-size: 12px; color: var(--muted); }
.ce-compare-sel { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; font-size: 12.5px; color: var(--muted); }
.ce-compare-sel select {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
  font-size: 13px; color: var(--navy); background: var(--surface);
}
.ce-compare-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ce-compare-cell { min-width: 0; }
.ce-compare-ph { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--bg); }
.ce-compare-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-compare-nm { display: block; margin-top: 6px; font-size: 12.5px; color: var(--navy); text-align: center; }

/* 工具条 */
.ce-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 12px; }
.ce-search-box { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ce-search-box input {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 8px 11px; font-size: 13px; color: var(--navy); outline: none; width: 210px;
}
.ce-search-box input:focus { border-color: var(--navy); }
.ce-toolbar-n { font-size: 12px; color: var(--muted); }

/* 色卡大图灯箱：半透明深蓝遮罩 + 图片按原图像素自适应，不留白边。
   紧凑纵列：图片 → 名称（紧贴图片底部）→ 上一张/关闭/下一张（并排在名称下方）。
   控件全部回到文档流，不再绝对定位到屏幕四角。 */
.ce-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center;
  background: rgba(9, 31, 60, .94);   /* 半透明，隐约透出页面 */
  padding: 12px;
}
.ce-lb-fig {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: 10px; min-width: 0; max-width: 100%; max-height: 100%;
}
.ce-lb-ph { display: block; line-height: 0; max-width: 100%; }
.ce-lb-ph img {
  display: block; width: auto; height: auto;
  max-width: none; max-height: none;  /* 尺寸由 JS 按原图像素计算 */
  background: transparent;            /* 关键：不再有白色展示区 */
}
.ce-lb-cap {
  display: flex; align-items: baseline; flex-wrap: nowrap; justify-content: center;
  gap: 10px; color: #fff; font-size: 13px; text-align: center;
  white-space: nowrap; max-width: 100%; overflow: hidden;
}
.ce-lb-cap b {
  font-size: 15px; font-family: ui-monospace, Menlo, monospace;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.ce-lb-cap span { flex: none; opacity: .75; }
/* 三个按钮彼此拉开，并与标题行再留一点距离（figure 的 gap 之外另加 margin-top） */
.ce-lb-ctrls {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; margin-top: 8px;
}
.ce-lb-close, .ce-lb-nav {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; padding: 0; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08);
  color: #fff; cursor: pointer; border-radius: 999px; font-size: 24px;
}
/* 关闭用品牌红实底，避免触屏 hover 残留让「下一张」莫名变红 */
.ce-lb-close { background: #e60012; border-color: #e60012; font-size: 26px; }
/* 仅真鼠标设备启用 hover，触屏点完不会留一块红 */
@media (hover: hover) {
  .ce-lb-nav:hover, .ce-lb-close:hover { background: #e60012; border-color: #e60012; }
}

/* 电子色卡免责提示 */
.ce-disclaimer {
  margin: 14px 0 0; font-size: 12px; line-height: 1.7;
  color: var(--muted); text-align: center;
}

/* 色卡网格：统一 4 列 */
.ce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ce-cell {
  min-width: 0; border: 1px solid var(--border); background: var(--surface);
  border-radius: 9px; padding: 5px 5px 7px; cursor: pointer; text-align: center;
  transition: border-color .14s, transform .14s;
}
.ce-cell:hover { border-color: var(--navy); transform: translateY(-2px); }
.ce-cell.is-on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.ce-cell-ph { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--bg); }
.ce-cell-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-cell-code {
  display: block; margin-top: 6px; font-size: 11.5px; color: var(--navy);
  font-family: ui-monospace, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ce-cell-nm { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-more-wrap { display: flex; justify-content: center; padding: 18px 0 6px; }
.ce-more {
  border: 1px solid var(--navy); background: var(--surface); color: var(--navy);
  border-radius: 999px; padding: 9px 24px; font-size: 13px; cursor: pointer;
}
.ce-more:hover { background: var(--navy); color: #fff; }
.ce-end { font-size: 12.5px; color: var(--muted); }

/* ---------- 移动端：两步式 + 极致精简首屏 ---------- */
@media (max-width: 880px) {
  /* 首屏只保留「选色中心」标题 + 两条导航轨道 + 色卡本身 */
  .cs-head { padding: 14px 0 10px; border-bottom: 0; }
  .cs-head .crumb { display: none; }
  .cs-head .lead { display: none; }
  .cs-head h1 { font-size: 20px; margin: 0; }
  .cs-head h1 .bar { height: 20px; }

  .ce-tabs { margin-top: 10px; gap: 7px; padding-bottom: 8px; }
  .ce-tab { font-size: 13.5px; padding: 8px 16px; }
  .ce-effect { padding-top: 12px; }
  .ce-body { grid-template-columns: 1fr; gap: 0; }
  .ce-side-head { display: none; }
  .ce-scene-link { display: none; }
  .ce-syslist {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
    max-height: none; overflow: visible;
  }
  .ce-syslist .ce-pager { grid-column: 1 / -1; }
  .ce-syscard { flex-direction: column; align-items: stretch; gap: 5px; padding: 5px; }
  .ce-syscard:not(.is-cur) { display: none; }
  .ce-syscard-ph { width: 100%; height: auto; aspect-ratio: 1; }
  .ce-syscard-nm { font-size: 11.5px; text-align: center; }
  .ce-syscard-meta { display: none; }
  .ce-syscard-tag { display: none; }

  /* 第一步只显示卡片墙；第二步只显示详情 */
  .ce-main { display: none; }
  .ce-detail-on .ce-side { display: none; }
  .ce-detail-on .ce-main { display: block; }
  .ce-detail-top {
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    position: sticky; top: 0; z-index: 25; padding: 0 0 4px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  /* 返回按钮压成轨道行内的小圆钮，不额外占一行 */
  .ce-back {
    align-self: center; flex: none; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); font-size: 18px; line-height: 1;
  }
  .ce-systrack { flex: 1 1 auto; min-width: 0; width: auto; }

  /* 详情态：标题、描述、复制链接、子TAB、换工艺对比、筛选与计数全部隐藏 */
  .ce-detail-on .ce-detail-hd,
  .ce-detail-on .ce-subtabs,
  .ce-detail-on .ce-compare,
  .ce-detail-on .ce-toolbar,
  .ce-detail-on .ce-end { display: none; }
  .ce-detail-on .ce-grid { margin-top: 10px; }
  .ce-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .ce-cell-code { font-size: 10.5px; }
  .ce-cell-nm { font-size: 10px; }
  .ce-disclaimer { font-size: 11.5px; margin-top: 10px; }

  /* 大图灯箱：同样是「图片 → 名称 → 并排按钮」紧凑纵列，尺寸再收一档 */
  .ce-lightbox { padding: 8px; }
  .ce-lb-fig { gap: 8px; }
  .ce-lb-cap { font-size: 11.5px; gap: 8px; }
  .ce-lb-cap b { font-size: 13px; }
  .ce-lb-ctrls { gap: 22px; margin-top: 6px; }
  .ce-lb-close, .ce-lb-nav { width: 36px; height: 36px; font-size: 22px; }
  .ce-lb-close { font-size: 24px; }
}
