/* ═══════════════════════════════════════
   拾藏 · 样式（蓝 + 奶黄）
   ═══════════════════════════════════════ */

:root {
  /* 暖白 + 浅粉 */
  --bg: #F7FBFE;
  --bg-2: #EFF6FC;
  --surface: #ffffff;

  --ink: #1B2A3A;
  --ink-2: #4A5E70;
  --ink-3: #8A9BAD;

  --line: #DFEBF6;
  --line-2: #CFE1F0;

  --accent: #8FBAE0;
  --accent-2: #5B93D6;
  --accent-ink: #4E7DAE;
  --accent-soft: #F2F8FD;

  --cream: #fdf4e3;
  --cream-2: #f9e8c6;
  --cream-line: #f2ddb4;
  --cream-ink: #7a5e2c;

  --gold: #cf9f4a;
  --green: #5f9e7d;

  --radius: 20px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px rgba(30,70,120,.05), 0 2px 8px rgba(30,70,120,.045);
  --shadow-md: 0 4px 14px rgba(30,70,120,.07), 0 10px 34px rgba(30,70,120,.06);
  --shadow-lg: 0 18px 50px rgba(16,26,38,.16);

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* 字号：后台可调（app.js 从 settings.fontSizes 写到这里） */
  --fs-group: 13.5px;      /* 分组标题 */
  --fs-card-name: 11.5px;  /* 卡片名称 */
  --fs-card-meta: 9.5px;   /* 卡片副信息 */
  --fs-chip: 13px;         /* 筛选胶囊 */
  --fs-tag: 9.5px;         /* 率属于标签 */
  --fs-tab: 10.5px;        /* 底部导航 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* 顶部两团光：左蓝右奶黄 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 340px;
  background:
    radial-gradient(620px 270px at 8% -14%, #E7F0F7 0%, rgba(231,240,247,0) 62%),
    radial-gradient(520px 250px at 92% -16%, #fdf0d8 0%, rgba(253, 240, 216, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.hidden { display: none !important; }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select { font-family: inherit; font-size: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus { outline: none; }

.screen { position: relative; z-index: 1; }

/* ══════════ 登录 ══════════ */

#login-view {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 22px calc(32px + var(--safe-b));
}

.login-wrap {
  width: 100%;
  max-width: 380px;
  animation: rise .5s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.brand { text-align: center; margin-bottom: 28px; }

.brand-mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: linear-gradient(150deg, #ffffff 0%, #F3F7FB 58%, #fdf3d8 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, .85);
}

.brand-mark svg { width: 44px; height: 44px; }

.brand h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
}

.brand-sub {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: .06em;
}

.brand-sub .bs-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent-ink);
}

.brand-sub .bs-sep {
  color: var(--accent);
  opacity: .8;
}

.login-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 24px 22px 22px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line);
}

.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.key-field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: border-color .18s, background .18s;
}

.key-field:focus-within {
  border-color: #C6D9E9;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(157,191,221,.16);
}

.key-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 15px 8px 15px 16px;
  font-size: 16px;
  letter-spacing: .12em;
}

.eye {
  padding: 0 15px;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  height: 48px;
}
.eye svg { width: 19px; height: 19px; }

.login-error {
  margin: 10px 2px 0;
  min-height: 18px;
  font-size: 13px;
  color: #c8455c;
}

/* 打开的不是线上地址时，给一条可点的正确入口 */
.login-error.host-warn {
  line-height: 1.65;
  padding: 9px 11px;
  border-radius: 10px;
  background: #fdf0f3;
  border: 1px solid #f6d6df;
  font-size: 12.5px;
}
.login-error.host-warn a {
  color: #b4587a;
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;
}

.btn-primary {
  width: 100%;
  margin-top: 14px;
  padding: 15px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #BAD3E9 0%, #8FB2D0 100%);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .08em;
  box-shadow: 0 8px 20px rgba(132,165,193,.22);
  transition: transform .14s, box-shadow .14s, opacity .14s;
}

.btn-primary:active { transform: scale(.985); box-shadow: 0 3px 10px rgba(132,165,193,.18); }
.btn-primary[disabled] { opacity: .6; }

.login-foot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.7;
}

.login-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  opacity: .85;
}

.login-note::before,
.login-note::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  vertical-align: middle;
  background: var(--line-2);
  margin: 0 9px;
}

/* ══════════ 顶栏 ══════════ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  background: rgba(247,251,254,.85);
  border-bottom: 1px solid rgba(231,234,237,.9);
}

.topbar-in {
  max-width: 860px;
  margin: 0 auto;
  height: 58px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.logo-lock {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.logo-dot {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #BED5EA, #8FB2D0);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 3px 9px rgba(132,165,193,.22);
}

.logo-name {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
}

.logo-tag {
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .14em;
  color: var(--cream-ink);
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: 100px;
  padding: 2px 7px;
  white-space: nowrap;
}

.topbar-right { display: flex; align-items: center; gap: 6px; }

.who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .02em;
  margin-right: 2px;
}

.who-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(157,191,221,.2);
}

.gal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid #E1EBF3;
  box-shadow: 0 2px 8px rgba(115,156,192,.1);
  transition: transform .15s, background .15s;
  white-space: nowrap;
}
.gal-btn svg { width: 15px; height: 15px; }
.gal-btn:active { transform: scale(.96); }
.gal-btn:hover { background: #EAF1F8; }

.gal-btn.inline {
  height: 29px;
  padding: 0 11px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--accent-ink);
  background: #fff;
  border: 1px solid #D8E4EF;
  box-shadow: 0 2px 7px rgba(115,156,192,.1);
}
.gal-btn.inline svg { width: 13px; height: 13px; }

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: background .16s, color .16s;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }

/* ══════════ 主区域 ══════════ */

.main {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 18px calc(96px + var(--safe-b));
}

/* 页面撑满，页脚落在最下面 */
#app-view:not(.hidden) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

#app-view.with-foot .main { flex: 1 0 auto; width: 100%; padding-bottom: 10px; }

.page-foot {
  flex: none;
  margin: 0;
  padding: 6px 18px calc(84px + var(--safe-b));
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-3);
  opacity: .8;
}

/* 维护者才看得到的「管理」小入口（页脚右侧，占位很小） */
.page-foot .foot-admin {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: .06em;
  text-decoration: none;
  vertical-align: 1px;
  opacity: 1;
}

.page-foot .foot-admin:active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 16px;
}

.panel-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
}

.head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.panel-tools { display: flex; align-items: center; gap: 10px; }

.legend {
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
  white-space: nowrap;
}

.section-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
  letter-spacing: .08em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

/* ══════════ 筛选 ══════════ */

.filters { margin-bottom: 20px; }

.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0 15px;
  height: 44px;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s;
}

.search-box:focus-within {
  border-color: #C6D9E9;
  box-shadow: 0 0 0 4px rgba(157,191,221,.15);
}

.search-box svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }

.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  height: 100%;
}

.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 筛选条：一律可换行（以前是 nowrap + overflow:hidden，屏窄时后面的分类直接被切掉，
   根本点不到）。超过两行的折叠由 app.js 动态测量后加 .is-collapsed / .is-expanded。 */
.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
  padding: 12px 2px 2px;
}

.chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: var(--fs-chip, 13px);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: all .16s;
}

.chip:active { transform: scale(.96); }

/* ── 筛选条折叠 ──
   超过两行时：锁高裁切 + 右侧渐隐 + 右下角「更多 ∨」；展开后按钮回到文档流排在最后，
   不会再压住最后一个分类。高度、按钮高度都由 app.js 按实测胶囊数算，这里只给兜底值。 */
.chips.has-fold { transition: max-height .18s ease; }
.chips.is-collapsed { max-height: 64px; overflow: hidden; }
.chips.is-expanded { max-height: 2400px; overflow: visible; }

.chip-fold-mask {
  position: absolute; right: 0; bottom: 0;
  width: 108px; height: 28px;
  display: none; z-index: 2;
  pointer-events: none;                 /* 绝不能吃掉按钮的点击 */
  background: linear-gradient(90deg,
    rgba(247,251,254,0) 0%, rgba(247,251,254,.62) 26%,
    rgba(247,251,254,.96) 58%, var(--bg) 100%);
}
.chips.is-collapsed .chip-fold-mask { display: block; }

.chip-more {
  position: absolute; right: 0; bottom: 0; z-index: 3;   /* 必须高于遮罩，否则点不到 */
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 11px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--fs-chip, 13px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: -12px 0 12px -4px var(--bg), 0 2px 8px rgba(30,70,120,.1);
}
.chip-more:active { transform: scale(.96); }

/* 展开态：按钮回文档流，跟在最后一个胶囊后面（绝对定位会压住「快闪」这种末尾分类） */
.chips.is-expanded .chip-more {
  position: static;
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-3);
  font-weight: 500;
  box-shadow: none;
}

.chip.on {
  color: var(--accent-ink);
  background: linear-gradient(135deg, #ECF3F9, #DBE8F4);
  border-color: #D2E2F0;
  box-shadow: 0 3px 10px rgba(132,165,193,.14);
}

.chip .cnt {
  margin-left: 5px;
  opacity: .6;
  font-size: 11.5px;
}

.chip.cream.on {
  color: var(--cream-ink);
  background: var(--cream);
  border-color: var(--cream-line);
  box-shadow: 0 3px 10px rgba(211, 160, 58, .16);
}

/* 「全部」详情页顶部那排大分类按钮（就地过滤，顺序跟随后台拖拽设置） */
.kind-chips {
  margin: 0 0 14px;
  padding-top: 0;
  gap: 7px;
}
.kind-chips .chip { padding: 6px 13px; }

/* ══════════ 卡片网格 ══════════ */

.cards-wrap { display: block; }

.group { margin-bottom: 26px; }

.group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--fs-group, 13.5px);
  font-weight: 650;
  color: var(--ink-2);
  letter-spacing: .06em;
}

.group-head .n {
  font-weight: 600;
  color: var(--cream-ink);
  background: var(--cream);
  border-radius: 100px;
  padding: 1px 8px;
  font-size: 11px;
}

.group-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 14px 10px;
  align-items: start;
}

.card-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  animation: pop .34s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* 列表格只露正面；点击进大图/明细才正面+背面并排 */
.shot {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, .7);
  transition: transform .18s, box-shadow .18s;
}

.shot-side {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 55 / 85;
  overflow: hidden;
  background: var(--bg);
}

/* 有图：底全透明——真实照片铺满看不出，透明占位 PNG 能透出页面底色 */
/* 有图时也保留这层浅粉底：图按 contain 完整显示，多出来的地方露的就是它
   （透明 PNG 的空白处也靠它兜底，不能留透明否则会露出更暗的页面底） */
.shot-side.has-img { background: var(--bg); }

.card-item:active .shot {
  transform: scale(.97);
  box-shadow: 0 1px 4px rgba(86,99,112,.12);
}

/* 卡面缩略图统一「完整显示」：框的比例固定，图按原比例缩进框里，
   多出来的地方露出下面的浅粉底图（不是黑块也不是白块）。
   竖长图、横图、方图、透明 PNG 都按这一套走。 */
.shot img,
.shot-side img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 缺图时后台给的占位图（透明 PNG，contain 保证完整显示不裁切） */
.ph-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.shot .ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(116,129,142,.58);
  font-weight: 500;
  word-break: break-all;
}

.shot .ph::before {
  content: "";
  width: 13px;
  height: 17px;
  border-radius: 3px;
  border: 1.3px dashed currentColor;
  opacity: .45;
  flex: none;
}

/* 「我拥有 N 件」：右上角圆标，没有就不出现 */
.shot .owned {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 100px;
  background: rgba(253, 243, 216, .96);
  color: var(--cream-ink);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(90, 70, 20, .16), inset 0 0 0 1px rgba(242, 220, 159, .9);
  pointer-events: none;
}

.shot .tick {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B4CFE7, #8FB2D0);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(121,149,179,.24);
}
.shot .tick svg { width: 10px; height: 10px; color: #fff; }

.card-name {
  font-size: var(--fs-card-name, 11.5px);
  line-height: 1.32;
  color: var(--ink);
  font-weight: 550;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 总览卡片：名称 + 「率属于」椭圆标签 同一行，标签靠右与图片对齐 */
#cards-container .card-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#cards-container .card-name-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
/* 「率属于」标签：离图片边稍留距离，宽度受图片约束（文字再多也不超出图片） */
.shot-tag {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: auto;
  max-width: calc(100% - 10px);
  font-size: var(--fs-tag, 9.5px);
  line-height: 1.25;
  font-weight: 600;
  color: #4A75A2;
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(115,156,192,.55);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 购入总览：率属于标签沿用默认左下角（2026-10-23 起统一左下，不再单独覆盖） */

/* 旧款：卡片名称旁的椭圆标签（保留给其它页面/兼容，不再用于总览卡片） */
.card-tag {
  flex: none;
  max-width: 52%;
  font-size: var(--fs-tag, 9px);
  line-height: 1.3;
  font-weight: 600;
  color: #4E7DAE;
  background: #EAF1F8;
  border-radius: 100px;
  padding: 1px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  font-size: var(--fs-card-meta, 9.5px);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -4px;
  letter-spacing: .01em;
}

.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}
.empty b { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }

/* ══════════ 购买记录 ══════════ */

.mine-toolbar { margin-bottom: 16px; }

.sum-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #F2F7FB 0%, #E4EEF7 60%, #DDE9F4 100%);
  border: 1px solid #DCE8F3;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(132,165,193,.1);
  margin-bottom: 16px;
}

.sum-card .lab {
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--accent-ink);
  margin-bottom: 5px;
}

.sum-card .big {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.sum-side {
  text-align: right;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.8;
}
.sum-side b {
  display: inline-block;
  min-width: 20px;
  color: var(--accent-2);
  font-size: 14px;
  font-weight: 700;
}

.purch-wrap { display: flex; flex-direction: column; gap: 26px; }

.pgroup { }

.pgroup-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.pgroup-head .kn {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}

.pgroup-head .kb {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--cream-ink);
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: 100px;
  padding: 1px 8px;
}

.pgroup-head .kmeta {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

.pgroup-head .ksum {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-2);
  white-space: nowrap;
  margin-left: 10px;
  letter-spacing: -.01em;
}

.pgroup-body { display: flex; flex-direction: column; gap: 10px; }

.purch {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  animation: pop .3s both;
  text-align: left;
  width: 100%;
}

.purch:active { transform: scale(.99); }

.purch-thumb {
  width: 38px;
  height: 60px;
  flex: none;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg);
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #A0B3C3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.purch-thumb img { width: 100%; height: 100%; object-fit: contain; }

.purch-main { flex: 1; min-width: 0; }

.purch-face {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.purch-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.purch-sub .sep { opacity: .45; }

.purch-money { flex: none; text-align: right; }

.purch-money .amt {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.purch-money .qty {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}

/* ══════════ 我的 · 记录册（按率属于归一册册） ══════════ */

.mb-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 6px 2px 12px;
}
.mb-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.mb-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

.books {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.book {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 14px 12px 18px;
  text-align: left;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .16s, border-color .16s;
}
.book:active { transform: scale(.98); }
.bk-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #CCDDEC, #B0C9DE);
}
.bk-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-group {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.bk-meta {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
}
.bk-meta b { font-size: 15px; color: var(--accent-ink); }
.bk-sub { font-size: 10.5px; color: var(--ink-3); }

/* 我的：卡册 / 账本 切换 */
.mine-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.seg-btn {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--ink-3);
  transition: color .16s, background .16s;
}
.seg-btn.on {
  color: #fff;
  background: linear-gradient(135deg, #BAD3E9, #8FB2D0);
  box-shadow: 0 2px 8px rgba(132,165,193,.22);
}

/* 卡册：一册里的卡面格（每排 5 张，图框固定、图完整显示，类别在左下角） */
.mc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 6px;
  align-items: start;
}
.mc {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  transition: transform .16s;
}
.mc:active { transform: scale(.97); }
.mc-fig {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 55 / 85;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.mc-shot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #CAD4DC;
}
.mc-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mc-shot .mc-ph { width: 44%; height: auto; }
.mc-qty {
  position: absolute;
  right: 3px;
  top: 3px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(30,70,120,.12);
}
/* 类别标签：卡面左下角，位置与分类页一致，只是更窄 */
.mc-tag {
  position: absolute;
  left: 3px;
  bottom: 3px;
  max-width: calc(100% - 6px);
  font-size: var(--fs-tag, 9.5px);
  line-height: 1.25;
  font-weight: 600;
  color: #4A75A2;
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(115,156,192,.5);
  border-radius: 3px;
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.mc .card-name { font-size: 10.5px; line-height: 1.3; }
.mc .card-name-text { -webkit-line-clamp: 2; }

/* ─────────── 记录弹层（单个 / 批量，可跨册） ─────────── */
.rec-sheet { max-height: 92dvh; }
.rec-step { display: flex; flex-direction: column; gap: 11px; }
.rec-kinds { display: flex; flex-wrap: wrap; gap: 7px; }
.rec-sels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-sel { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rec-sel > span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .06em;
}
.rec-sel select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  text-overflow: ellipsis;
}
.rec-sel select:focus {
  border-color: #C6D9E9;
  background: #fff;
  outline: none;
}
.rec-q {
  height: 44px;
  width: 100%;
  padding: 0 14px;
  border-radius: 13px;
  border: 1.5px solid var(--line);
  background: var(--bg-2);
  font-size: 14.5px;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.rec-q:focus {
  border-color: #C6D9E9;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(157,191,221,.16);
  outline: none;
}
.rec-grid { max-height: 40dvh; }
.rec-card .rc-tick {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1.4px solid #D5DCE3;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: transparent;
  box-shadow: 0 1px 3px rgba(30,70,120,.12);
}
.rec-card.on .rc-tick {
  background: linear-gradient(135deg, #BAD3E9, #8FB2D0);
  border-color: transparent;
  color: #fff;
}

/* 第二步：每张卡一张小卡条，价可以加多行 */
.rec-togbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--accent-soft);
}
.rec-togbar-t { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rec-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 44dvh;
  overflow-y: auto;
  padding-bottom: 2px;
}
.rl {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 13px;
  background: #F7FAFC;
  border: 1px solid #E8EFF6;
}
.rl-fig {
  position: relative;
  width: 44px;
  aspect-ratio: 55 / 85;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}
.rl-fig .mc-shot { position: absolute; inset: 0; display: grid; place-items: center; color: #CAD4DC; }
.rl-fig .mc-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rl-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rl-nm {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-mt { font-size: 10.5px; color: var(--ink-3); }
.rl-prs { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.rl-pr { display: flex; align-items: center; gap: 6px; }
.rl-pr .rp-lab { font-size: 11px; color: var(--ink-3); width: 26px; flex: none; }
.rl-pr input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 13.5px;
}
.rl-pr input:focus { border-color: #C6D9E9; outline: none; }
.rl-pr .rp-y { font-size: 11px; color: var(--ink-3); flex: none; }
.rl-pr .rp-del {
  flex: none;
  width: 26px;
  height: 34px;
  border-radius: 9px;
  background: #fdeff2;
  color: #c8455c;
  font-size: 15px;
  line-height: 1;
}
.rp-add {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px dashed #CEDBE7;
  background: #fff;
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
}
.rec-common { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }

/* 记一笔：单价前面的小开关 */
.lab-tog { display: inline-flex; align-items: center; gap: 7px; }
.ptog {
  position: relative;
  width: 30px;
  height: 17px;
  padding: 0;
  border-radius: 999px;
  background: #DADFE4;
  transition: background .18s;
}
.ptog i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(30,70,120,.25);
  transition: transform .18s;
}
.ptog.on { background: linear-gradient(135deg, #BAD3E9, #8FB2D0); }
.ptog.on i { transform: translateX(13px); }


/* 册内：一件物品只出现一次，下面挂一排可横滑的记录 */
.pitem {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 13px 15px 10px;
  animation: pop .3s both;
}
.pi-head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.pi-main { flex: 1; min-width: 0; }
.pi-recs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
  padding: 0 0 3px;
  scrollbar-width: none;
}
.pi-recs::-webkit-scrollbar { display: none; }
.rec {
  flex: 0 0 auto;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-align: left;
  transition: transform .14s;
}
.rec:active { transform: scale(.97); }
.rec-n {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.rec-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
  letter-spacing: -.01em;
}
.rec-amt.is-none,
.purch-money .amt.is-none {
  color: var(--ink-3);
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .02em;
}
.rec-sub {
  font-size: 10px;
  color: var(--ink-3);
  max-width: 132px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-rcp { font-size: 9.5px; color: var(--gold); letter-spacing: .04em; }

/* 册内二级（小分类）那排：比一级轻一点 */
.chips.sub-chips { margin-top: -2px; }
.chips.sub-chips .chip {
  font-size: 11px;
  padding: 4px 9px;
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--ink-2);
}
.chips.sub-chips .chip.on {
  background: var(--cream);
  border-color: var(--cream-line);
  color: var(--cream-ink);
}

/* ══════════ 概览 ══════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}

.stat {
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.stat.hi {
  background: linear-gradient(150deg, #F2F7FB 0%, #E4EEF7 60%, #DDE9F4 100%);
  border-color: #DCE8F3;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(132,165,193,.1);
}

.stat.cream {
  background: linear-gradient(150deg, #fdf5e0 0%, #fbecc6 100%);
  border-color: var(--cream-line);
}

.stat .k {
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.stat.hi .k { color: var(--accent-ink); }
.stat.cream .k { color: #a4842f; }

.stat .v {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.stat .v small { font-size: 13px; font-weight: 500; opacity: .55; margin-left: 2px; }

.stat .d {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 7px;
}
.stat.hi .d { color: var(--ink-3); }
.stat.cream .d { color: #9b7d33; }

/* 大分类卡 */

.kind-cards { display: flex; flex-direction: column; gap: 12px; }

.kind-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.kc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 17px 13px;
  background: linear-gradient(180deg, #fdf7e6 0%, #fffdf7 100%);
  border-bottom: 1px solid #f6ecd0;
}

.kc-head .kn {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
}

.kc-head .kbadge {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cream-ink);
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: 100px;
  padding: 1px 8px;
}

.kc-head .kmoney {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -.01em;
}

.kc-body { padding: 14px 17px 16px; }

.kc-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.kc-line b { font-size: 15px; color: var(--ink); font-weight: 700; }
.kc-line .pct { font-variant-numeric: tabular-nums; }

.bar {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 100px;
  background: var(--bg-2);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #D4E3F1, #ABC8E1);
  transition: width .6s cubic-bezier(.2, .8, .3, 1);
}
.bar.cream { background: #f4f0e4; }
.bar.cream > i { background: linear-gradient(90deg, #f4d98c, #d3a03a); }
.bar.slim { height: 5px; }

.kc-sub {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
}

.kc-sub-row { display: flex; align-items: center; gap: 10px; }
.kc-sub-row .nm {
  flex: none;
  width: 108px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kc-sub-row .bar { flex: 1; }
.kc-sub-row .rt {
  flex: none;
  width: 74px;
  text-align: right;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ══════════ 底部 tab ══════════ */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: rgba(247,251,254,.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(231,234,237,.9);
}

.tab-btn {
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0 5px;
  border-radius: 14px;
  color: var(--ink-3);
  font-size: var(--fs-tab, 10.5px);
  font-weight: 550;
  letter-spacing: .06em;
  transition: color .16s, background .16s;
}

.tab-btn svg { width: 21px; height: 21px; }
.tab-btn.active { color: var(--accent-2); background: var(--accent-soft); }

/* ══════════ 抽屉 ══════════ */

.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(16,26,38,.34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .2s both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 26px 26px 0 0;
  padding: 8px 20px calc(20px + var(--safe-b));
  box-shadow: var(--shadow-lg);
  animation: slideUp .3s cubic-bezier(.2, .8, .3, 1) both;
  max-height: 88dvh;
  overflow-y: auto;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.sheet-grab {
  width: 38px;
  height: 4px;
  border-radius: 100px;
  background: var(--line-2);
  margin: 6px auto 14px;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.sheet-head-text { min-width: 0; }

.sheet-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

.sheet-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-body { display: flex; flex-direction: column; gap: 13px; padding-bottom: 6px; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .06em;
}

.field input {
  height: 46px;
  padding: 0 14px;
  border-radius: 13px;
  border: 1.5px solid var(--line);
  background: var(--bg-2);
  font-size: 15px;
  transition: border-color .16s, background .16s, box-shadow .16s;
  width: 100%;
}

.field input:focus {
  border-color: #C6D9E9;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(157,191,221,.16);
}

.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.sheet-actions .btn-primary { margin-top: 0; flex: 1; }

.btn-danger {
  flex: none;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  background: #fdf0f2;
  color: #c8455c;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid #f7dbe1;
}

/* ══════════ toast ══════════ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + var(--safe-b));
  transform: translateX(-50%) translateY(12px);
  z-index: 90;
  padding: 11px 20px;
  border-radius: 100px;
  background: rgba(16,26,38,.93);
  color: #fff;
  font-size: 13.5px;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  max-width: 84vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════ 图鉴查询页 ══════════ */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.gal-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  cursor: pointer;
  animation: pop .34s both;
}

/* 图鉴可下载：网格上直接给一个下载按钮 */
.gal-dl {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.gal-dl svg { width: 14px; height: 14px; }
.gal-dl:active { transform: scale(.94); }

.gal-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, .7);
  display: grid;
  place-items: center;
}

.gal-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: #F3F7FB; }

.gal-thumb .ph {
  font-size: 11px;
  color: #A0B2C1;
  padding: 10px;
  text-align: center;
  line-height: 1.4;
}

/* 左上角：大分类 · 小分类（后台录入）。右侧给期数留出空间，两者不重叠 */
.gal-thumb .badge-cat {
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: 56%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(16,26,38,.70);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 2px 8px;
  box-shadow: 0 2px 6px rgba(16,26,38,.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右上角：期数 */
.gal-thumb .badge-era {
  position: absolute;
  right: 8px;
  top: 8px;
  max-width: 40%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cream-ink);
  background: rgba(253, 243, 216, .95);
  border-radius: 100px;
  padding: 2px 8px;
  box-shadow: 0 2px 6px rgba(90, 70, 20, .14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gal-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gal-meta {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 大图浏览 */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16,26,38,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  animation: fade .22s both;
}

.viewer-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  color: #fff;
}

.viewer-bar .vt {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer-bar .vs {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px;
}

.viewer-bar button {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .1);
}
.viewer-bar button svg { width: 18px; height: 18px; }

.viewer-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  -webkit-overflow-scrolling: touch;
}

.viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.viewer-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.viewer-nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
.viewer-nav button svg { width: 15px; height: 15px; }
.viewer-nav button[disabled] { opacity: .3; }
.viewer-nav .idx {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
}

/* ══════════ 进度（未发货 / 运输中 / 已到货） ══════════ */

.st {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px 1px 7px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.7;
  white-space: nowrap;
}

.st::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex: none;
}

.st-0 { color: #a97b3e; background: #fdf4e4; border: 1px solid #f5e4c4; }
.st-1 { color: #4a7f9f; background: #eef6fb; border: 1px solid #daeaf5; }
.st-2 { color: #4f8b72; background: #eff7f2; border: 1px solid #d9ebdf; }
.st-3 { color: #8a6d9e; background: #f6f1fa; border: 1px solid #e8def2; }
.st-x { color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); }

.st-chips { padding: 0; gap: 8px; }

/* ══════════ 购入总览 ══════════ */

.lg-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 14px 0 24px;
}

.lg-stat {
  text-align: left;
  padding: 12px 13px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}

.lg-stat:active { transform: scale(.98); }

.lg-stat.on {
  background: var(--accent-soft);
  border-color: #D2E2F0;
  box-shadow: 0 4px 14px rgba(132,165,193,.14);
}

.lg-stat .k {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.lg-stat .v {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.lg-stat .v small { font-size: 10.5px; font-weight: 500; opacity: .5; margin-left: 2px; }
.lg-stat .d { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }

.lg-stat[data-i="0"] .v { color: #a97b3e; }
.lg-stat[data-i="1"] .v { color: #4a7f9f; }
.lg-stat[data-i="2"] .v { color: #4f8b72; }
.lg-stat[data-i="3"] .v { color: #8a6d9e; }

.lg-kinds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }

.lg-kind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.lg-kind .kn {
  flex: none;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 70px;
}

.lg-kind .kn .n {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cream-ink);
  background: var(--cream);
  border-radius: 100px;
  padding: 1px 7px;
}

.lg-bar {
  flex: 1;
  height: 6px;
  border-radius: 100px;
  background: var(--bg-2);
  overflow: hidden;
}

.lg-bar > i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #D4E3F1, #ABC8E1);
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}

.lg-kind .km {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -.01em;
  min-width: 54px;
  text-align: right;
}

.lg-none { font-size: 12.5px; color: var(--ink-3); margin: 0 0 20px; }

.lg-list { display: flex; flex-direction: column; gap: 26px; }

.lg-items { display: flex; flex-direction: column; gap: 10px; }

.lg-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: pop .3s both;
}

.lg-row.open { border-color: #E0E9F0; box-shadow: var(--shadow-md); }

.lg-head {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 15px;
  text-align: left;
}

.lg-main { flex: 1; min-width: 0; }

.lg-face {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.lg-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-3);
}

.lg-sub .lg-meta { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lg-sub .sep { opacity: .45; }

.lg-money { flex: none; text-align: right; }
.lg-money .amt { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.lg-money .qty { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; }

.lg-detail {
  border-top: 1px dashed var(--line-2);
  background: #fffdfb;
  padding: 10px 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fade .18s both;
}

.lg-dl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-2);
}

.lg-dl .dt { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lg-dl .mo { font-weight: 700; color: var(--ink); margin-left: auto; }

/* ══════════ 桌面微调 ══════════ */

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 18px 14px; }
  .lg-stats { grid-template-columns: repeat(4, 1fr); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .panel-head h2 { font-size: 25px; }
  .main { padding-top: 26px; }
  .gal-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .kind-cards { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; }
}

@media (min-width: 1040px) {
  .gal-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════ 录入：选物品 ══════════ */

.gal-btn.inline.solid {
  color: #fff;
  background: linear-gradient(135deg, #BAD3E9, #8FB2D0);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(132,165,193,.22);
  font-weight: 650;
}
.gal-btn.inline.solid:hover { background: linear-gradient(135deg, #BAD3E9, #8FB2D0); }
.gal-btn.inline.solid:active { transform: scale(.96); }
.gal-btn.inline.solid svg { width: 12px; height: 12px; }

.fhint {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: -2px;
  letter-spacing: .01em;
}
.fhint b { color: var(--accent-ink); font-weight: 700; }

.pick-wrap { position: relative; }

.pick-wrap input {
  height: 46px;
  width: 100%;
  padding: 0 14px;
  border-radius: 13px;
  border: 1.5px solid var(--line);
  background: var(--bg-2);
  font-size: 15px;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.pick-wrap input:focus {
  border-color: #C6D9E9;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(157,191,221,.16);
}

.pick-steps { display: flex; flex-direction: column; gap: 14px; }

.pick-step { display: flex; flex-direction: column; gap: 8px; }

.pick-lab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.pick-lab i {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid #D4E2EF;
  color: var(--accent-ink);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.pick-kinds { flex-wrap: wrap; padding-bottom: 2px; }

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px 9px;
  max-height: 34dvh;
  overflow-y: auto;
  margin-top: 9px;
  padding: 2px 2px 4px;
  -webkit-overflow-scrolling: touch;
}

.pick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 4px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  background: transparent;
  transition: background .14s, border-color .14s, transform .14s;
}
.pick-card .shot { border-radius: 8px; }
.pick-card .pk-nm {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pick-card .pk-mt {
  font-size: 9px;
  line-height: 1.2;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
.pick-card.on {
  background: var(--accent-soft);
  border-color: #C6D9E9;
}
.pick-card:active { transform: scale(.97); }

.pick-none { padding: 22px 12px; text-align: center; font-size: 12.5px; color: var(--ink-3); }

.pick-sel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid #DBE8F3;
}
.pk-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #8FBAE0;
  border-radius: 100px;
  padding: 1px 7px;
}
.pk-sel-nm { font-size: 14px; font-weight: 650; color: var(--ink); }
.pk-sel-mt { font-size: 10.5px; color: var(--ink-3); }
.pk-x {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-ink);
  padding: 4px 2px;
}

/* ══════════ 大图查看（白色磨砂 · 图片区固定 42vh + 信息流自适应） ══════════ */

.cv {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  /* 图片区高度，改这一个变量就能调；信息栏不再固定高度 */
  --cv-img-h: 42vh;
  --cv-line: rgba(116,129,142,.13);
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  animation: fade .2s both;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cv-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
  /* 信息不再塞进小窗里滚：内容多就整页上下滑 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cv-top {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 2px 12px;
  border-bottom: 1px solid var(--cv-line);
  color: #273443;
}

.cv-head { flex: 1; min-width: 0; }
.cv-title { font-size: 15px; font-weight: 680; line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #222F3E; }
.cv-sub { font-size: 11.5px; color: #8F959B; margin-top: 4px; }
.cv-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #4E7DAE;
  background: rgba(157,191,221,.18);
  border: 1px solid rgba(157,191,221,.5);
  border-radius: 100px;
  padding: 2px 9px;
  white-space: nowrap;
}

.cv-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #4E7DAE;
  background: rgba(157,191,221,.16);
}
.cv-icon svg { width: 18px; height: 18px; }

/* 图片区：固定高度 + 虚线框；图片按高度自适应，
   特别长的扫图（高宽比 ≥ 1.9）改成宽度撑满、在框内上下滑。 */
.cv-stage {
  flex: none;
  position: relative;
  height: var(--cv-img-h);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1.5px dashed rgba(162,191,216,.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* margin:auto 是「有空间就居中、超高就从顶部开始滚」的关键，别改成 align-items:center */
.cv-single, .cv-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: auto;
  max-width: 100%;
}

/* 图片外面这一层：尺寸严格贴住图片本身，水印才能只盖在图上 */
.cv-fig {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  max-height: calc(var(--cv-img-h) - 26px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(112,130,148,.18);
  line-height: 0;
}

.cv-pair .cv-fig { flex: 0 1 auto; }
.cv-pair .cv-ph { max-width: 46%; }

/* 长图：宽度撑满框、高度不限，靠 .cv-stage 上下滑 */
.cv-fig.is-tall {
  width: 100%;
  max-height: none;
  border-radius: 10px;
}
.cv-fig.is-tall img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
}

/* 透明占位图：不要阴影圈 */
.cv-fig.is-ph { box-shadow: none; }
.cv-fig.is-ph .ph-img { width: auto; height: auto; }

.cv-fig img {
  max-width: 100%;
  max-height: calc(var(--cv-img-h) - 26px);
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.cv-ph {
  position: relative;
  height: calc(var(--cv-img-h) - 26px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 55 / 85;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(158deg, var(--g1, #F3F7FB) 0%, var(--g2, #E5EDF4) 100%);
}
.cv-ph .ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(116,129,142,.58);
  word-break: break-all;
}

/* 信息栏：没有卡片、没有底色，直接摆在页面留白里，高度跟着内容走 */
.cv-info {
  flex: none;
  height: auto;
  overflow: visible;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: #273443;
}

.cv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 2px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--cv-line);
}
.cv-row:last-child { border-bottom: 0; }

.cv-row .k {
  flex: none;
  white-space: nowrap;
  color: #8F959B;
  font-size: 12px;
  letter-spacing: .01em;
}
.cv-row .v {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: #1F2A36;
  word-break: break-word;
}
/* 长文本（备注 / 活动 / 发售）改左对齐换行，右对齐读起来太散 */
.cv-row.is-long { flex-direction: column; align-items: stretch; gap: 4px; }
.cv-row.is-long .v { text-align: left; line-height: 1.55; }

.cv-row .v b { color: #4E7DAE; font-weight: 700; }
.cv-row .v .dim { color: #8F959B; }

.cv-actions {
  flex: none;
  margin-top: auto;   /* 内容不足一屏时按钮贴底，不悬在半空 */
  padding: 6px 0 0;
}
.cv-actions .btn-primary { margin-top: 0; width: 100%; }

/* 点图放大：满屏看细节（同样是只读、不可下载） */
.cv-zoom {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 10px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(16,26,38,.97);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: fade .16s both;
}
.cv-zoom-in {
  display: flex;
  gap: 10px;
  margin: auto;
  max-width: 100%;
}
.cv-zoom-in .cv-fig {
  max-height: none;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .5);
}
.cv-zoom-in .cv-fig img {
  width: auto;
  height: auto;
  max-width: min(92vw, 720px);
  max-height: none;
  pointer-events: none;
}

/* ══════════ 购入总览：图片汇总 ══════════ */

.lg-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  animation: pop .3s cubic-bezier(.2, .8, .3, 1) both;
}
.lg-cell .shot { display: flex; pointer-events: none; gap: 2px; }
.lg-cell .card-name { -webkit-line-clamp: 1; }
.lg-amt {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin-top: -3px;
}

.lg-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  max-height: 46vh;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
/* 图片外面这层：尺寸贴住图片，水印才只盖在图上 */
.lg-fig {
  position: relative;
  display: flex;
  max-width: 100%;
  max-height: 46vh;
  line-height: 0;
}
.lg-fig img {
  max-width: 100%;
  max-height: 46vh;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  border-radius: var(--radius-sm);
}
/* 明细里正面 + 背面并排 */
.lg-pair {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.lg-pair .lg-fig { flex: 0 1 auto; }
.lg-pair .lg-fig.is-ph { width: auto; max-width: 46%; aspect-ratio: 55 / 85; }
.lg-fig.is-ph .ph-img { width: auto; height: auto; }
.lg-noph {
  padding: 46px 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.lg-ph {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 200px;
  padding: 20px;
  font-size: 12px;
  color: rgba(116,129,142,.55);
  background: linear-gradient(158deg, var(--g1, #F3F7FB) 0%, var(--g2, #E5EDF4) 100%);
}
.lg-wm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--wm-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--wm-op, .18);
  border-radius: var(--radius-sm);
}

.lg-dstat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lg-ds {
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.lg-ds .k { font-size: 10px; color: var(--ink-3); letter-spacing: .05em; }
.lg-ds .v { font-size: 14px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
.lg-ds .v small { font-size: 9.5px; font-weight: 500; opacity: .55; margin-left: 1px; }

.lg-rows { display: flex; flex-direction: column; gap: 8px; }
.lg-prow {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fffdfb;
}
.lg-ptop { display: flex; align-items: baseline; gap: 8px; }
.lg-ptop .dt {
  flex: none;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.lg-ptop .qy { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.lg-ptop .mo {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lg-ptop .mo.is-none {
  font-weight: 650;
  font-size: 11.5px;
  color: var(--ink-3);
}
.lg-pbot {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.lg-pmeta { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.lg-pmeta .sep { opacity: .4; }

.field input[disabled] {
  opacity: .6;
  background: var(--bg-2);
  cursor: not-allowed;
}

.fhint { margin: -4px 0 0; }

/* 卡面图：禁止长按保存 / 拖拽（图鉴页的图不受影响） */
.shot img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.lg-cell .card-name { -webkit-line-clamp: 2; }

/* 桌面：大图页收窄、信息两列 */
@media (min-width: 760px) {
  .cv-top { max-width: 820px; margin: 0 auto; width: 100%; padding-left: 4px; padding-right: 4px; }
  .cv-stage, .cv-actions { max-width: 820px; margin: 0 auto; width: 100%; }
  .cv-info {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
    align-content: start;
    height: auto;
  }
  .cv-actions { max-width: 820px; margin: 0 auto; width: 100%; }
  .cv-actions .btn-primary {
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }
  .lg-dstat { gap: 10px; }
}

.cv-stage .cv-wm2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/watermark.png");
  background-repeat: repeat;
  background-size: 110px auto;
}

/* ═══════════════════════════════════════
   四板块改版：首页 / 图鉴 / 分类 / 我的
   ═══════════════════════════════════════ */

/* ────────── 首页 ────────── */

.hello { margin: 2px 0 16px; }
.hello-hi {
  margin: 0 0 4px;
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--accent-ink);
  font-weight: 600;
}
.hello-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* 轮播：只放美照，不跳转 */
.banner {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, #F3F7FB 0%, #fdf6e6 100%);
  box-shadow: var(--shadow-md);
  margin-bottom: 16px;
}
.banner-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .46s cubic-bezier(.2, .8, .3, 1);
}
.banner-slide {
  flex: 0 0 100%;
  height: 100%;
  display: block;
}
.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.banner-slide.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    radial-gradient(320px 160px at 20% 20%, rgba(255, 255, 255, .8), transparent 70%),
    linear-gradient(150deg, #F3F7FB 0%, #fdf6e6 100%);
}
.bp-n {
  font-size: 13px;
  font-weight: 650;
  color: var(--accent-ink);
  letter-spacing: .08em;
}
.bp-h { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }

.banner-dots {
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.banner-dot {
  width: 6px; height: 6px;
  border-radius: 100px;
  background: rgba(30,70,120,.2);
  transition: width .22s, background .22s;
}
.banner-dot.on {
  width: 18px;
  background: var(--accent-2);
}


.home-sec { margin-bottom: 22px; }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.sec-head h3 {
  margin: 0;
  font-size: var(--fs-group, 13.5px);
  font-weight: 650;
  color: var(--ink-2);
  letter-spacing: .06em;
}
.sec-more {
  font-size: 11.5px;
  color: var(--accent-ink);
  padding: 4px 2px;
  letter-spacing: .02em;
}

/* 分类进度（首页） */
.kp-list { display: flex; flex-direction: column; gap: 9px; }

.kp {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s;
}
.kp:active { transform: scale(.985); }
.kp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.kp-n { font-size: 13px; font-weight: 650; color: var(--ink); }
.kp-v {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.kp-v i { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 11px; }
.kp-sub {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}


/* ────────── 两级分类页（左侧大分类 · 右侧小分类瓷砖） ────────── */

.catalog {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.rail {
  flex: none;
  width: 86px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 12px;
  padding: 6px 0;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.rail:empty { display: none; }

.rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 11px;
  color: var(--ink-2);
  transition: background .16s, color .16s;
}
.rail-btn .rn {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: .02em;
  word-break: break-all;
}
.rail-btn .rc {
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rail-btn.on {
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.rail-btn.on .rn { font-weight: 700; }
.rail-btn.on .rc { color: var(--accent); }

.catalog-main { flex: 1 1 auto; min-width: 0; }

/* 小分类瓷砖：参考 P1 的「热卖品牌」宫格 */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.tiles:empty { display: none; }

/* 「全部」挡的那个大入口：占满整行 */
.tile.wide { grid-column: 1 / -1; }

/* 「全部」入口层：按归属分类分段，段头 = 分组名 + 一条虚线 + 项数 */
.bel-sec { margin-bottom: 14px; }
.bel-sec:last-child { margin-bottom: 4px; }
.bel-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 1px 8px;
}
.bel-lab {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.bel-line {
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--line-2);
}
.bel-cnt {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* 「其他」的段头：出处 —— 闲鱼 ──── 6 项
   （.bel-lab 是那两个字「出处」，这里放真正的出处名） */
.bel-head .src-name {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
}
.bel-head .src-name.is-none {
  color: var(--ink-3);
  font-weight: 400;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: background .16s, border-color .16s, transform .16s;
}
.tile:active { transform: scale(.98); }
.tile .tn {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: .01em;
}
.tile .tc {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.tile.on {
  background: var(--accent-soft);
  border-color: #D8E5F1;
}
.tile.on .tn { color: var(--accent-ink); font-weight: 700; }
.tile.on .tc { color: var(--accent); }

/* 图鉴页网格在窄列里排两列会太挤，容器够宽时才两列 */
.catalog-main .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 分类页被左侧竖栏吃掉宽度后，卡面比整页时小一点，一行排 3 个更顺手 */
.catalog-main .grid {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 15px 9px;
}

/* 入口卡片右侧的小箭头（暗示「点进去还有一层」） */
.tile { position: relative; padding-right: 24px; }
.tile::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(-45deg);
  opacity: .55;
}
.tile.on::after { border-color: var(--accent); opacity: 1; }

/* 入口页没有内容时的提示块要撑满一行 */
.tiles .empty { grid-column: 1 / -1; }

/* ────────── 二级页：返回条 + 内容 ────────── */

.det-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  min-width: 0;
}

.det-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: .02em;
  transition: background .16s, transform .16s;
}
.det-back svg { width: 15px; height: 15px; }
.det-back:active { transform: scale(.96); background: var(--accent-soft); }

.det-path {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.det-count {
  flex: none;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* 入口页底部一行小提示 */
.entry-tip {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* 详情页没有左侧竖栏了，卡面可以比之前大一点 */
#cards-detail .grid {
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 16px 11px;
}

/* ────────── 我的：花销横条 ────────── */

.spend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, #F2F7FB 0%, #E4EEF7 62%, #DDE9F4 100%);
  border: 1px solid #DCE8F3;
  box-shadow: 0 8px 22px rgba(132,165,193,.1);
}
.sp-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sp-lab {
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--accent-ink);
}
.sp-big {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.sp-sub {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.sp-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px 8px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(115,156,192,.28);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s, transform .16s;
}
.sp-btn:active { transform: scale(.97); }
.sp-btn svg { width: 14px; height: 14px; }

.mine-filters { margin-bottom: 14px; }

/* 图鉴大图里的提示字 */
.v-tip { color: rgba(255, 255, 255, .6); font-size: 13px; }

/* 窄屏：竖栏再收一点，小分类瓷砖回到单列的一半宽度 */
@media (max-width: 380px) {
  .rail { width: 74px; }
  .rail-btn .rn { font-size: 12px; }
  .rail-btn { padding: 9px 4px; }
  .tile { padding: 9px 10px; }
  .tile .tn { font-size: 12px; }
}

/* 图鉴缩略图在「左侧竖栏」里变窄了，两个角标要收一收，不然会挤到一起 */
.catalog-main .gal-thumb .badge-cat {
  left: 6px; top: 6px;
  max-width: 48%;
  padding: 2px 6px;
}
.catalog-main .gal-thumb .badge-era {
  right: 6px; top: 6px;
  max-width: 32%;
  padding: 2px 6px;
}

/* ────────── 首页：最近记录旁的「记一笔」 ────────── */

.sec-tools { display: flex; align-items: center; gap: 10px; }

.sec-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid #D8E5F1;
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  transition: transform .16s, background .16s;
}
.sec-add svg { width: 14px; height: 14px; }
.sec-add:active { transform: scale(.96); background: #E2EDF6; }

/* 记录行里的「凭证」小标 */
.rcp-dot {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* ────────── 抽屉：下单记录图 ────────── */

.f-opt {
  font-style: normal;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: 6px;
  letter-spacing: .04em;
}

.rcp { width: 100%; }

.rcp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 16px 12px;
  border-radius: 14px;
  border: 1.5px dashed #D6DEE5;
  background: var(--bg-2);
  color: var(--ink-3);
  transition: border-color .16s, background .16s;
}
.rcp-empty svg { width: 22px; height: 22px; color: var(--accent); opacity: .85; }
.rcp-empty span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.rcp-empty i { font-style: normal; font-size: 10.5px; }

.rcp-fill { position: relative; display: flex; flex-direction: column; gap: 8px; }
.rcp-fill img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 260px;
  margin: 0 auto;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.rcp-loading { font-size: 11.5px; color: var(--ink-3); text-align: center; }
.rcp-hint { font-size: 10.5px; color: var(--ink-3); text-align: center; letter-spacing: .02em; }

.rcp-acts { display: flex; gap: 8px; }
.rcp-acts button {
  flex: 1;
  padding: 8px 0;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.rcp-acts button:active { background: var(--accent-soft); }

/* ────────── 下单记录图查看（盖在抽屉之上） ────────── */

.rcpview {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: rgba(16,26,38,.9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.rcpview-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #fff;
  font-size: 13px;
  letter-spacing: .04em;
}
.rcpview-bar button { color: #fff; width: 34px; height: 34px; display: grid; place-items: center; }
.rcpview-bar button svg { width: 20px; height: 20px; }
.rcpview-stage {
  flex: 1;
  overflow: auto;
  padding: 0 14px 24px;
  display: grid;
  place-items: start center;
}
.rcpview-stage img { max-width: 100%; border-radius: 12px; background: #fff; }

/* ────────── 只有正面图（后台没勾「有背面图」）──────────
   单图不再挤成半宽，按原比例放到 stage 里最大 */

.cv-single {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.cv-single .cv-fig { flex: 0 1 auto; }

.lg-single {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.lg-single .lg-fig { flex: 0 1 auto; }

/* ────────── 专辑固配（配置扫图） ────────── */

/* 详情页里那个入口 */
.aset-entry {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 2px 0 14px; padding: 11px 13px;
  border-radius: 14px; text-align: left;
  background: linear-gradient(180deg, #F4F8FC, #F7FBFE);
  border: 1px solid #D8E5F1;
  box-shadow: var(--shadow-sm);
}
.aset-entry.hidden { display: none; }
.aset-entry:active { transform: scale(.99); }
.aset-entry-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: #fff; color: var(--accent-ink); border: 1px solid #D8E5F1;
}
.aset-entry-ic svg { width: 16px; height: 16px; }
.aset-entry-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aset-entry-main b { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.aset-entry-main em { font-style: normal; font-size: 10px; color: var(--ink-3); }
.aset-entry-arrow {
  flex: 0 0 auto; width: 6px; height: 6px; margin-right: 3px;
  border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg); opacity: .8;
}

/* ────────── 周边图鉴入口（需求 04） ──────────
   位置：周边页标题下、搜索框上；满宽、高 42、圆角 12。
   配色走奶黄（资料属性），和蓝色可操作元素区分开。 */

.galink {
  display: flex; align-items: center; gap: 9px;
  width: 100%; height: 42px;
  margin: 0 0 14px; padding: 0 12px;
  border-radius: 12px; text-align: left;
  background: var(--cream);
  border: 1px solid var(--cream-line);
  color: var(--cream-ink);
  transition: transform .16s, background .16s;
}
.galink.hidden { display: none; }
.galink:active { transform: scale(.995); background: var(--cream-2); }
.galink-ic { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; }
.galink-ic svg { width: 16px; height: 16px; }
.galink-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.galink-main b {
  font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.galink-main em {
  font-style: normal; font-size: 8.5px; line-height: 1.1; opacity: .78;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.galink-arrow {
  flex: 0 0 auto; width: 6px; height: 6px; margin-right: 3px;
  border-right: 1.6px solid var(--cream-ink); border-bottom: 1.6px solid var(--cream-ink);
  transform: rotate(-45deg); opacity: .65;
}

/* 图鉴页顶栏左侧的「‹ 来源栏目」返回键（需求 04） */
.gal-back-top {
  flex: none;
  display: inline-flex; align-items: center; gap: 1px;
  padding: 4px 9px 4px 3px; margin-left: -3px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--accent-ink);
  font-size: 12px; font-weight: 550; letter-spacing: .02em;
  transition: background .16s, transform .16s;
}
.gal-back-top svg { width: 15px; height: 15px; }
.gal-back-top:active { transform: scale(.96); background: var(--accent-soft); }


/* ────────── 资源页（需求 03） ──────────
   一条栏目 152 高、满行同款、整块可点；封面 110 宽（110:152）、圆角 20。
   没传封面时用奶黄渐变 + 虚线占位，宁可看得出是空的，也不出裂图。 */

.res-cols {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 4px;
}

.res-col {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  height: 152px;
  padding: 0;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-align: left;
  overflow: hidden;
  transition: transform .16s, box-shadow .16s;
}
.res-col:active { transform: scale(.994); box-shadow: var(--shadow-md); }

.res-cover {
  flex: 0 0 110px;
  width: 110px;
  height: 152px;
  background: var(--bg-2);
  overflow: hidden;
}
.res-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 占位：渐变底 + 虚线框（虚线贴着 110×152 的封面区，视觉上就是个待填的框） */
.res-cover.is-ph {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #FDF6E6, #F7E7C9);
  border: 1px dashed #E8D2A6;
}
.res-cover.is-ph svg { width: 26px; height: 26px; color: #C9AE79; opacity: .85; }

.res-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 15px 14px 13px 0;
}
.res-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-sub {
  margin-top: 6px;
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  letter-spacing: .02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-go {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-ink);
}
.res-go::after {
  content: '';
  width: 5px; height: 5px;
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
  opacity: .85;
}

.res-empty {
  margin: 6px 0 0;
  padding: 26px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* 搜索框灰态：只出样式，点了没反应、不弹键盘（需求 03 · D4） */
.search-box.is-off {
  background: #F2F5F8;
  box-shadow: none;
  opacity: .72;
  pointer-events: none;
}
.search-box.is-off input { cursor: default; }

/* 空态页：这一栏还没做 + 返回 */
.res-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 58px 24px 60px;
  text-align: center;
}
.res-blank-ic {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 18px;
  margin-bottom: 12px;
  background: var(--cream);
  border: 1px solid var(--cream-line);
  color: #B99A63;
}
.res-blank-ic svg { width: 26px; height: 26px; }
.res-blank h3 { font-size: 15px; font-weight: 700; color: var(--ink); }
.res-blank p {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 240px;
}

/* 占位页：泡泡 / 行程（需求 03 · D1）功能还没上线，先把底栏位置占住。
   视觉跟「这一栏还没做」一个路子，但整块在视口里居中，别一进去就觉得空。 */
.soon-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: calc(100vh - 260px);
  min-height: calc(100dvh - 260px);
  padding: 40px 24px 56px;
  text-align: center;
}
.soon-ic {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 18px;
  margin-bottom: 12px;
  background: var(--cream);
  border: 1px solid var(--cream-line);
  color: #B99A63;
}
.soon-ic svg { width: 26px; height: 26px; }
.soon-blank h3 { font-size: 15px; font-weight: 700; color: var(--ink); }
.soon-blank p {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 240px;
}


/* 全屏弹层 */
.aset {
  position: fixed; inset: 0; z-index: 62;
  background: #F7FBFE;
  display: flex; flex-direction: column;
}
.aset.hidden { display: none; }
.aset-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  background: rgba(247,251,254,.97);
  border-bottom: 1px solid var(--line);
}
.aset-bar-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aset-bar-main b { font-size: 14px; letter-spacing: .01em; }
.aset-bar-main span { font-size: 10.5px; color: var(--ink-3); }
.aset-close {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
}
.aset-close svg { width: 15px; height: 15px; }

.aset .aset-chips {
  flex: 0 0 auto; padding: 10px 16px 2px;
  flex-wrap: wrap; gap: 7px;
}

.aset-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 6px 16px calc(28px + var(--safe-b));
  -webkit-overflow-scrolling: touch;
}
.aset-body .empty { padding: 28px 8px; }

.aset-sec { margin-bottom: 4px; }
.aset-ver {
  display: flex; align-items: center; gap: 7px;
  margin: 12px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink);
}
.aset-ver i { font-style: normal; font-size: 10px; font-weight: 500; color: var(--ink-3); }

.aset-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) {
  .aset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aset-cell {
  margin: 0; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.aset-fig {
  position: relative; display: grid; place-items: center;
  min-height: 110px; padding: 10px; background: #fff;
}
.aset-fig img { width: 100%; height: auto; max-height: 64vh; object-fit: contain; display: block; border-radius: 6px; }
.aset-fig.has-img { cursor: zoom-in; }
.aset-ph { font-size: 11px; color: var(--ink-3); }
.aset-cell figcaption { padding: 9px 12px 11px; }
.aset-type { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.aset-kv { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.aset-kv > div { display: flex; gap: 8px; font-size: 10.5px; line-height: 1.45; }
.aset-kv dt { flex: 0 0 30px; color: var(--ink-3); }
.aset-kv dd { margin: 0; flex: 1 1 auto; color: var(--ink-2); word-break: break-word; }
.aset-note { margin: 6px 0 0; font-size: 10px; color: var(--ink-3); line-height: 1.5; }

/* 点扫图放大 */
.aset-zoom {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(16,26,38,.92);
  display: grid; place-items: center; padding: 12px;
}
.aset-zoom.hidden { display: none; }
.aset-zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; }

/* ══════════ 维护者视角（后台「展示管理」关掉的内容，管理员仍能看到） ══════════ */

.shot-off {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(16,26,38,.8);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  pointer-events: none;
}

.seeall-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 11px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #7a5e2c;
  background: #fdf4e3;
  border: 1px dashed #f2ddb4;
  border-radius: 10px;
}
.seeall-bar b { font-weight: 600; color: #6b4f1e; }
.seeall-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9a441;
}

/* ══════════ 只读访客（公共密钥 yse040102）══════════ */
/* 只读访客首页不显示个性化欢迎语；「我的」和所有「记一笔」都不出现 */

body.readonly .hello {
  display: none !important;
}

body.readonly #tab-home { padding-top: 2px; }
body.readonly #tab-home .banner { margin-bottom: 14px; }

body.readonly .tab-btn[data-tab="mine"] { display: none !important; }
body.readonly #tab-mine { display: none !important; }

/* 详情页底部「记一笔」 */
body.readonly .cv-actions { display: none !important; }

/* 首页公告：更新进度 + 联系管理员（所有账号都显示） */
.ro-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.ro-card {
  background: #fff;
  border: 1px solid #E7EAED;
  border-radius: 16px;
  padding: 15px 16px 16px;
  box-shadow: 0 1px 2px rgba(30,70,120,.04), 0 6px 18px rgba(30,70,120,.05);
}

.ro-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.ro-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #222F3E;
}
.ro-date { font-size: 11px; color: #8F959B; white-space: nowrap; }

.ro-body {
  font-size: 12.5px;
  line-height: 1.92;
  color: #4C5D71;
  word-break: break-word;
}
.ro-empty { color: #8F959B; }

.ro-contact {
  background: linear-gradient(160deg, #F3F7FB 0%, #F3F7FB 100%);
  border-color: #E0EAF3;
}
.ro-contact .ro-body { font-size: 13px; }

.ro-body a {
  color: #4E7DAE;
  text-decoration: none;
  border-bottom: 1px solid rgba(96,129,165,.32);
}
.ro-body b { color: #4E7DAE; font-weight: 600; }

/* ══════════ 专辑固配页：官方配置图 + 版本胶囊 + 物品网格 ══════════ */
.zk-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -16px 2px;
  padding: 2px 16px 8px;
  scroll-snap-type: x proximity;
}
.zk-strip::-webkit-scrollbar { display: none; }

.zk-cap {
  position: relative;
  flex: 0 0 150px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid #DDE6EE;
  scroll-snap-align: start;
  text-align: left;
}
.zk-cap:active { transform: scale(.985); }
.zk-cap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.zk-cap-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--ink-3);
}
.zk-cap-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 16px 9px 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .94) 50%);
}
.zk-cap-bar b {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zk-cap-bar em {
  flex: 0 0 auto;
  margin-left: auto;
  font-style: normal;
  font-size: 9.5px;
  color: var(--ink-3);
}

.zk-chips {
  display: flex;
  flex-wrap: wrap;              /* 版本名长短不一（pb · BREAK / special · CURIOUS），换行比藏起来好 */
  gap: 6px;
  margin: 10px -16px 0;
  padding: 0 16px 4px;
}
.zk-chip {
  flex: 0 0 auto;
  height: 27px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.zk-chip.on {
  background: #ECF3F9;
  border-color: #B2CADF;
  color: var(--accent-ink);
  font-weight: 650;
}

/* 5 列：必须带 #cards-detail 前缀，否则被 #cards-detail .grid 的 ID 权重压掉 */
.grid.zk5,
#cards-detail .grid.zk5,
#zkv-body .grid.zk5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 7px; }
.grid.zk5 .card-name { font-size: 10.5px; -webkit-line-clamp: 1; }
/* 规格是固配的关键信息，宁可换行也不省略 */
.grid.zk5 .card-meta {
  font-size: 9px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

/* 官方配置预览页 */
.zkv-stage {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 16px 0;
  scroll-snap-type: x mandatory;
}
.zkv-stage::-webkit-scrollbar { display: none; }
.zkv-slide {
  flex: 0 0 86%;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  padding: 7px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.zkv-slide img { max-width: 100%; max-height: 44vh; object-fit: contain; border-radius: 10px; }
.zkv-dots { display: flex; justify-content: center; gap: 5px; padding: 10px 0 2px; }
.zkv-dots i { width: 6px; height: 3px; border-radius: 2px; background: #D6E0E9; transition: width .2s, background .2s; }
.zkv-dots i.on { width: 16px; background: var(--accent); }
.zkv-lab {
  padding: 12px 16px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
}
.zkv-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.zkv-body .grid { padding: 0 16px 24px; }
.zkv-wait { font-size: 11.5px; color: var(--ink-3); }
.zkv-empty { padding: 0 16px 24px; font-size: 11.5px; color: var(--ink-3); }

/* ═══ 专辑固配弹层：官方配置图横滑 + 固配物品 ★20261027 ═══ */

.aset-shots {
  display: flex; gap: 9px; align-items: flex-start;
  overflow-x: auto; padding: 2px 1px 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.aset-shots::-webkit-scrollbar { display: none; }

.aset-shot {
  flex: 0 0 auto; margin: 0; border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
  cursor: zoom-in; scroll-snap-align: start;
}
.aset-shot img {
  display: block; height: 40vh; max-height: 300px;
  width: auto; max-width: 88vw; object-fit: contain;
}
@media (min-width: 640px) {
  .aset-shot img { height: 46vh; max-height: 360px; }
}

.zk-items {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-bottom: 4px;
}
@media (min-width: 560px) {
  .zk-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .zk-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zk-item {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 9px 11px; border-radius: 11px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.zk-item:active { transform: scale(.99); }
.zk-item-nm { font-size: 12px; font-weight: 700; color: var(--ink); }
.zk-item-kv { display: flex; flex-direction: column; gap: 2px; }
.zk-item-kv span { font-size: 10px; color: var(--ink-2); line-height: 1.45; }
.zk-item-kv em { font-style: normal; color: var(--ink-3); margin-right: 4px; }
.zk-item-code { font-size: 9.5px; color: var(--ink-3); letter-spacing: .02em; }

/* 官方图按原比例缩放：只限最大宽高，不设固定高度 —— 否则 contain 会留白边 */
.aset-shot img {
  display: block; width: auto; height: auto;
  max-width: 86vw; max-height: 46vh;
}
/* 版本胶囊换行显示，长版本名不会把最后一颗挤出去 */
.aset .aset-chips { flex-wrap: wrap; }
/* 同一段里横图竖图高度不一样：垂直居中，别让横图下面拖一大块空白 */
.aset-shots { align-items: center; }
/* 竖图别占满整屏，留一点给下一段 */
.aset-shot img { max-height: 42vh; }

/* ══════════ 预览模式（后台「页面管理」右栏 iframe，?preview=1） ══════════ */
.preview-wait {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: #f7f6f4; padding: 24px;
}
.preview-wait.hidden { display: none; }
.pw-box {
  max-width: 300px; text-align: center; color: #324255;
  font-size: 13px; line-height: 1.7;
}
.pw-box b { display: block; font-size: 15px; margin: 10px 0 4px; }
.pw-box p { margin: 0; color: #7B8288; font-size: 12.5px; }
.pw-tip { margin-top: 10px !important; font-size: 11.5px !important; color: #A0A6AC !important; }
.pw-dot {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid #e6dbcd; border-top-color: #c98f6a;
  animation: pwspin .9s linear infinite;
}
@keyframes pwspin { to { transform: rotate(360deg); } }

/* 预览模式：藏掉一切写入口（记录 / 换密钥 / 退出 / 管理入口） */
.is-preview #btn-add-rec,
.is-preview #btn-switch,
.is-preview #btn-logout,
.is-preview #foot-admin,
.is-preview #sheet,
.is-preview #sheet-mask,
.is-preview .foot-admin { display: none !important; }

/* 字段高亮：只用 outline + box-shadow，不动 border / margin，避免页面抖动 */
.preview-hl {
  outline: 2px solid #e2856a !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(226, 133, 106, .16) !important;
  border-radius: 6px;
  transition: outline-color .12s ease;
}


/* ═══════════════════════════════════════════════════════════
   2026-10-31 新增：收集进度条 / 册分组 / 双下拉筛选 / 复数弹窗
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 一、收集进度条（#mine-progress） ─────────── */
.prog {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 84px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.prog.hidden { display: none; }

.pg-ring {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(#85A8C7 0 calc(var(--p, 0) * 1%), #E8EDF2 0);
  transition: background .3s ease;
}
.pg-hole {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--surface);
}
.pg-pct {
  flex: none;
  min-width: 52px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #6795C7;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pg-pct i {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  margin-left: 1px;
  letter-spacing: 0;
}
.pg-pct.is-zero { color: #B6BEC5; }

.pg-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pg-l1 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.pg-l1 b {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.pg-l2 { font-size: 12px; color: var(--ink-3); }
.pg-none { color: var(--ink-3); }

/* 复数数字：可点时粉字 + 虚线底；点击区撑到 32×32 */
.pg-dup {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink-3);
  cursor: default;
}
button.pg-dup.on {
  padding: 6px 7px;
  margin: -6px -7px;
  font-size: 12px;
  font-weight: 700;
  color: #6795C7;
  cursor: pointer;
  text-decoration: underline dashed rgba(103,149,199,.45);
  text-underline-offset: 3px;
  border-radius: 6px;
}
button.pg-dup.on:active { background: var(--accent-soft); }

/* ─────────── 二、册列表：按品类分两段 ─────────── */
.books-root { display: block; }
.books-group { margin-bottom: 18px; }
.books-group:last-child { margin-bottom: 0; }
.books-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.bg-name {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.bg-line {
  flex: 1;
  min-width: 12px;
  height: 0;
  border-top: 1px dashed var(--line-2);
}
.bg-cnt {
  flex: none;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.books-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.book.is-ph {
  visibility: hidden;
  pointer-events: none;
}
.bk-line1 {
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.bk-line1 b {
  font-size: 14px;
  font-weight: 800;
  color: #4E7DAE;
}
.bk-line2 {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.bk-line-zk {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* 卡面左下角「无平台」的弱化态 */
.mc-tag.is-none {
  color: var(--ink-3);
  background: rgba(255, 255, 255, .82);
  border-color: var(--line-2);
  font-weight: 500;
}

/* ─────────── 三、册详情：类型 + 值 双下拉 ─────────── */
.flt-row {
  position: relative;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.flt-sel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 38px;
  padding: 0 10px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  text-align: left;
  transition: border-color .16s, background .16s;
}
.flt-sel .flt-lb {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flt-sel .flt-lb.is-dim { color: var(--ink-3); }
.flt-sel svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--ink-3);
  transition: transform .16s;
}
.flt-sel.on {
  border-color: #C6D9E9;
  background: #FAFCFD;
  color: var(--accent-ink);
  font-weight: 600;
}
.flt-sel.on svg { transform: rotate(180deg); color: var(--accent-ink); }
.flt-sel:disabled {
  background: var(--bg-2);
  border-color: var(--line);
  box-shadow: none;
  color: var(--ink-3);
}
.flt-sel:disabled svg { display: none; }

.flt-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.flt-pop.hidden { display: none; }
.flt-pop-h {
  padding: 4px 8px 7px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.flt-pop-list { display: flex; flex-direction: column; gap: 2px; }
.flt-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}
.flt-opt:active { background: var(--bg-2); }
.flt-opt .fo-lb {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flt-opt .fo-n {
  flex: none;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.flt-opt.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.flt-opt.on .fo-n { color: var(--accent-ink); opacity: .7; }
.flt-opt.is-0 { opacity: .45; }

.flt-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.flt-pills.hidden { display: none; }
.flt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 8px 5px 10px;
  border-radius: 100px;
  border: 1px solid #D2DFEB;
  background: var(--accent-soft);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--accent-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flt-pill:active { background: #E9F1F8; }
.flt-pill .fp-x {
  flex: none;
  font-size: 9px;
  opacity: .55;
}
.flt-clear {
  padding: 5px 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─────────── 四、复数弹窗（只读） ─────────── */
body.dup-lock { overflow: hidden; }

.dup-modal {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.dup-modal.hidden { display: none; }
.dup-mask {
  position: absolute;
  inset: 0;
  background: rgba(251,253,254,.42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.dup-panel {
  position: relative;
  width: 336px;
  max-width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 15px 15px 13px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  animation: dupIn .18s ease both;
}
@keyframes dupIn {
  from { opacity: 0; transform: translateY(10px) scale(.975); }
  to { opacity: 1; transform: none; }
}
.dup-x {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1;
}
.dup-x:active { background: var(--bg-2); }
.dup-title {
  margin: 3px 32px 12px 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dup-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.dup-list.is-scroll {
  max-height: 302px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  padding-bottom: 2px;
}
.dup-cell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  transition: transform .14s;
}
.dup-cell:active { transform: scale(.96); }
.dup-fig {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.dup-fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dup-ver {
  position: absolute;
  left: 3px;
  bottom: 3px;
  max-width: calc(100% - 6px);
  padding: 0 3px;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #648BB5;
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(196, 85, 122, .5);
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dup-ver.is-m1 {
  color: #7a6bb5;
  border-color: rgba(122, 107, 181, .5);
}
.dup-qty {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 8px;
  background: #75A7D2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border: 1.8px solid #fff;
  box-shadow: 0 1px 4px rgba(103,134,167,.25);
}
.dup-tip {
  margin: 10px 0 0;
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
  letter-spacing: .04em;
}

/* 详情态 */
.dup-detail {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.dup-big {
  position: relative;
  flex: none;
  width: 104px;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.dup-big img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dup-kvs {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 4px;
}
.dup-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
}
.dup-kv span { flex: none; color: #8F98A2; letter-spacing: .04em; }
.dup-kv b {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dup-kv b.is-pink { font-size: 12px; color: #6795C7; font-weight: 700; }

.dup-ops {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.dup-op {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 6px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dup-op.back {
  background: var(--accent-soft);
  border-color: #D2DFEB;
  color: var(--accent-ink);
  font-weight: 600;
}
.dup-op:disabled { opacity: .38; }

/* 购入总览 · 层 2 的册小计条（2026-10-31） */
.lg-booksub {
  margin: -4px 0 14px;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .03em;
}
.lg-booksub b {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
}


/* ═══════════════════════════════════════════════════════════
   2026-10-31 夜：品类隔离 / 类别数据看板 / 每卡车主 / 记录锁定
   ═══════════════════════════════════════════════════════════ */

/* ───── 一、路径后面的品类小标签 ───── */
.det-kind {
  flex: none;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--accent-soft);
  border: 1px solid #D2DFEB;
  font-size: 11px;
  font-weight: 650;
  color: var(--accent-ink);
  letter-spacing: .04em;
}

/* ───── 二、类别数据看板（只在小卡册出现） ───── */
.catbd {
  margin: -2px 0 13px;
  padding: 11px 12px 12px;
  border-radius: 15px;
  background: var(--accent-soft);
  border: 1px solid #DBE6F0;
}
.cb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.cb-t {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-ink);
  letter-spacing: .04em;
}
.cb-s { font-size: 10.5px; color: #96A3B0; letter-spacing: .02em; }
.cb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.cb-cell {
  min-width: 0;
  padding: 7px 9px 8px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid #E0EAF3;
}
.cb-name {
  font-size: 11px;
  color: var(--accent-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-num {
  margin-top: 1px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cb-num span {
  font-size: 11px;
  font-weight: 600;
  color: #A5ACB4;
  letter-spacing: 0;
}
.cb-bar {
  height: 3px;
  margin-top: 5px;
  border-radius: 2px;
  background: #DFE8EF;
  overflow: hidden;
}
.cb-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #85A8C7;
}
.cb-cell.is-0 { opacity: .55; }
.cb-cell.is-0 .cb-num { color: #A5ACB4; }

/* ── 册内页顶部：这本册 + 按类别，合并一块（2026-11-03）
      以前是「环 + 大字 + 三列看板」两块，同一个数字说三次；
      现在上段=这本册总进度，下段=按类别，中间一道分隔线，整块约 132px。 ── */
.bprog{margin:0 0 12px;padding:12px 13px 13px;border-radius:15px;
  background:var(--accent-soft);border:1px solid #DBE6F0}
.bp-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.bp-t{font-size:11.5px;font-weight:700;color:var(--accent-ink);letter-spacing:.04em}
.bp-dup{font-size:10.5px;color:#96A3B0;border:0;background:none;padding:0;font-family:inherit}
.bp-dup.on{color:var(--accent-ink);cursor:pointer}
.bp-big{display:flex;align-items:baseline;gap:7px}
.bp-p{font-size:24px;font-weight:800;color:#6795C7;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.bp-p i{font-style:normal;font-size:12px;margin-left:1px}
.bp-p.is-zero{color:#A9B7C4}
.bp-c{font-size:11.5px;color:var(--ink-2)}
.bp-c b{font-size:13px;font-weight:800;color:var(--ink)}
.bp-bar{display:block;height:5px;border-radius:3px;background:#DFE8EF;
  overflow:hidden;margin:9px 0 0}
.bp-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#A8C8E4,#6795C7)}
.bp-sep{display:block;height:1px;background:#DBE6F0;margin:11px -13px 10px}
.bp-sub{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.bp-sub span:first-child{font-size:11.5px;font-weight:700;color:var(--accent-ink);letter-spacing:.04em}
.bp-sub span:last-child{font-size:10.5px;color:#96A3B0}
/* 旧容器不再用，但留着类名别让老缓存页串样式 */
.catbd{padding:0;background:none;border:0;margin:0}

/* ───── 三、专辑册 ↔ 固配 互跳 ───── */
.zkjump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px dashed var(--line-2);
  background: transparent;
  font-family: inherit;
  text-align: left;
}
.zkjump:active { background: var(--bg-2); }
.zkjump .zj-a {
  min-width: 0;
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zkjump .zj-b {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
}

/* ───── 四、每张卡单独的车主行 ───── */
.rl-ch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  cursor: text;              /* 点「车主」两个字也算点框，手机上别让人戳空 */
}
.rl-ch-l {
  flex: none;
  width: 30px;
  font-size: 11.5px;
  color: var(--accent-ink);
}
.rl-ch-i {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid #D2DFEB;
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.rl-ch-i::placeholder { color: #B8BEC5; }
.rl-ch-i:focus { border-color: #B1CADF; outline: none; box-shadow: 0 0 0 3px rgba(177,202,223,.18); }

/* ───── 五、记录面板的锁定条 ───── */
.rec-lock {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  margin-bottom: 11px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid #D2DFEB;
}
.rlk-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #85A8C7;
}
.rlk-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rlk-txt i {
  font-style: normal;
  font-size: 10.5px;
  color: #96A3B0;
  letter-spacing: .02em;
}
.rlk-txt b {
  font-size: 12px;
  font-weight: 650;
  color: var(--accent-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rlk-x {
  flex: none;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid #D2DFEB;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--accent-ink);
}
.rlk-x:active { background: #E9F1F8; }

/* ───── 六、手机端：记录弹层的输入框统一 16px ─────
   iOS 对字号 <16px 的输入框会在聚焦时把整页放大，弹层被顶走 / 位置错乱，
   手指再点就点不回那个框，表现就是「车主栏打不上字」。手机上一律拉到 16px 不让它缩放。 */
@media (max-width: 560px) {
  .rec-sheet input,
  .rec-sheet textarea,
  .rec-sheet select,
  .sheet input,
  .sheet textarea,
  .sheet select {
    font-size: 16px;
  }
  .rl-ch-i {
    height: 40px;
    font-size: 16px;
  }
  .rl-ch-l { font-size: 12px; }
  .rl-pr input { height: 40px; }
}

/* ═══════════════════════════════════════
   水印层 + 小卡铺满（2026-11-01）
   ═══════════════════════════════════════ */

/* 水印图是一张满屏 PNG：保持比例铺满整张图，不多次平铺。
   图源和透明度由 app.js 写到 :root 的两个变量上 —— 全站共用一份，
   不在每张卡的 DOM 里各塞一遍 data URI。 */
.wm-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--wm-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--wm-op, .18);
}

/* 小卡铺满：图片放大到填满格子，多余部分居中裁掉，四边不露底色。
   专辑 / 固配不加 .is-cover，保持「完整塞入」。 */
.shot-side.is-cover img,
.purch-thumb.is-cover img,
.mc-fig.is-cover .mc-shot img,
.rl-fig.is-cover .mc-shot img {
  object-fit: cover;
}

/* 图鉴大图：包一层贴住图片的壳，水印才只盖在图上，不会铺到黑底上 */
.v-img {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.v-img img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 10px;
}

/* ═══════════════════════════════════════
   「其他」册：类型分段 + 出处·归属小字（2026-11-01）
   ═══════════════════════════════════════ */

/* 段头：两条虚线夹一个类型名，右边段内条数。各段之和 = 册头的「N 条」 */
.mc-sec + .mc-sec { margin-top: 14px; }
.mc-sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 8px;
}
/* 「其他」册内：段头前面挂两个字「出处」，后面才是出处名 */
.mc-sec-h .ms-src {
  flex: none;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .1em;
}
.mc-sec-h .ms-name {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.mc-sec-h .ms-line {
  flex: 1;
  height: 0;
  border-top: 1px dashed var(--line);
}
.mc-sec-h .ms-n {
  flex: none;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 卡格下面那行小字：出处 · 归属。
   手机上格子窄，一行放不下「乐天日区 · MINI2」，允许折两行（超过两行才省略），
   卡格高度用 min-height 兜住，不会因为有的折行有的不折而参差。 */
.card-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 3px;
  min-height: 2.6em;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-3);
  text-align: center;
  word-break: break-word;
}

/* ═══════════════════════════════════════
   车主记忆：记录面板里一排 + 输入框浮层（2026-11-01）
   ═══════════════════════════════════════ */

.rec-chans {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -4px 0 10px;
}
.rec-chans .rc-lb {
  font-size: 11px;
  color: var(--ink-3);
  margin-right: 2px;
}
.rc-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.rc-chip:active { background: var(--accent-soft); border-color: #D2DFEB; color: var(--accent-2); }

/* 浮层：贴着输入框下面，上面放不下就翻到上面 */
.ch-pop {
  position: fixed;
  z-index: 90;
  max-width: 260px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(30,70,120,.16);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ch-pop.hidden { display: none; }
.ch-pop .chp-h {
  width: 100%;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 1px;
}
.ch-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fffdfc;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
.ch-chip:active { background: var(--accent-soft); border-color: #D2DFEB; color: var(--accent-2); }

/* ═══════════════════════════════════════
   后台填的文案：手动换行一律保留
   ───────────────────────────────────────
   她在后台敲的回车，是一行就是一行。原来只有「更新进度」做了 \n→<br>，
   「联系管理员」和其余文案都被 HTML 折成空格，写了三行前端挤成一段。
   统一用 pre-line：保留 \n，但多余的空格照样合并（不会因为缩进跑版）。
   ⚠️ 加新文案位的时候顺手把选择器补进来，别再一处一处补 <br>。
   ═══════════════════════════════════════ */
[data-copy],
[data-label],
[data-brand],
#page-foot-text,
.ro-body,
.cv-row .v,
.cv-title,
.card-name-text,
.rec-sub,
.gal-note {
  white-space: pre-line;
}

/* 物品名称允许换行，但最多三行，超出省略（不然格子会被顶歪） */
.card-name-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ═══════════════════════════════════════
   记账方式：不记账 / 按单卡 / 按盘（2026-11-01）
   两级串行 —— 先问记不记，选了记账才问怎么记。
   ═══════════════════════════════════════ */
.rec-mode { margin: 0 0 13px; display: flex; flex-direction: column; gap: 10px; }
.rm-step { display: flex; flex-direction: column; gap: 8px; }
.rm-q { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .03em; }
.rm-row { display: flex; gap: 8px; }
.rm-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface, var(--bg-2));
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.rm-btn.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

/* 按盘：盘号 / 买入日期 / 盘价 / 摊分参考 */
.rec-pan { margin: 2px 0 12px; }
.rp-card {
  position: relative;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
}
.rp-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.rp-no-lab { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.rp-no {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.rp-card .field { position: relative; }
.rp-card .rp-y {
  position: absolute;
  right: 12px;
  bottom: 11px;
  font-size: 11.5px;
  font-style: normal;
  color: var(--ink-3);
  pointer-events: none;
}
.rp-share {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rec-pan-kinds { margin: 11px 0 8px; }

/* 盘里的卡格：右上角张数角标 */
.pan-card { position: relative; }
.pan-card .pq {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;
  min-width: 25px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* ═══════════════════════════════════════
   邮费（2026-11-01）
   账本页一颗小胶囊 → 列表页 → 一笔。全是页面，没有弹窗。
   ═══════════════════════════════════════ */

/* 进了邮费页就把卡册 / 账本那两块压掉，别跟 renderBookView 抢显隐 */
#tab-mine.ship-mode #mine-books,
#tab-mine.ship-mode #mine-book-view,
#tab-mine.ship-mode #mine-spend,
#tab-mine.ship-mode #mine-progress { display: none !important; }

/* 总花费横条：卡价 / 邮费 拆开显示 */
.sp-split {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
}
.sp-k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.sp-k b { color: var(--ink-2); font-weight: 700; }
.sp-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.sp-dot-card { background: var(--accent); }
.sp-dot-ship { background: var(--gold, #CF9F4A); }


/* 列表页 */
.ship-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 4px 0 12px;
  padding: 11px;
  border-radius: 12px;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.ship-add svg { width: 16px; height: 16px; }
.ship-rows { display: flex; flex-direction: column; gap: 10px; }

.ship-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  font-family: inherit;
  cursor: pointer;
}
.sc-top { display: flex; align-items: center; gap: 8px; }
.sc-no {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sc-st {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 999px;
  line-height: 1.6;
}
.sc-st.is-pending { background: var(--cream, #FDF4E3); color: var(--cream-ink, #7A5E2C); }
.sc-st.is-transit { background: var(--accent-soft); color: var(--accent-ink); }
.sc-st.is-done { background: var(--ok-soft, #EFF7F2); color: var(--ok, #4F8B72); }
.sc-amt {
  margin-left: auto;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-l2 { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-2); }
.sc-track {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.sc-thumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding-top: 3px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sc-thumbs::-webkit-scrollbar { display: none; }
.sh-thumb {
  flex: 0 0 auto;
  width: 22px;
  height: 34px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-2, var(--bg-2));
  position: relative;
}
.sh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-thumb .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 9px;
  color: var(--ink-3);
  overflow: hidden;
}
.sh-more { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-3); padding-left: 2px; }

/* 新增 / 编辑 */
.ship-form { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; }
.ship-form .field { position: relative; }

/* 挑卡网格：直接复用「+ 记录」弹层那套 .pick-grid.rec-grid（2026-11-01 深夜）
   两个差别：① 这里是页面不是弹层，所以不内嵌滚动（否则会出现双层滚）
             ② 品类胶囊和两个下拉之间靠 .ship-form 的 gap 自动分开 */
#sh-grid.rec-grid {
  max-height: none;
  overflow: visible;
}
.ship-picked { display: flex; flex-direction: column; gap: 5px; }
.sp-lab2 { font-size: 11.5px; color: var(--ink-3); }
.sp-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-code {
  font-size: 10.5px;
  color: var(--ink-2);
  background: var(--surface-2, var(--bg-2));
  border-radius: 5px;
  padding: 1px 5px;
}

/* 明细里「摊」的标 */
.rec-tan {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}

/* 总花费横条：本来是一行「金额 + 详细数据」，现在多一段卡价/邮费，
   必须让它换到第二行，否则会跟金额叠在一起（2026-11-01） */
.spend { flex-wrap: wrap; }
.spend .sp-main { flex: 1 1 0; }
.spend .sp-split { order: 9; flex: 1 0 100%; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(91,147,214,.22); }
.spend .sp-btn { order: 2; }
.sp-dot-card { background: var(--accent-2); }

/* ══════════ 购入总览页：卡价 / 邮费拆分 + 「含邮」开关（2026-11-01） ══════════
   styles.css 里的 .sum-card 原来是一行「金额 + 件数」，多出这一段必须换行，
   否则正文会压在金额数字上（和 #mine-spend 是同一个坑）。 */
.sum-card { flex-wrap: wrap; }
.sum-card .sum-main { min-width: 0; }
.sum-foot {
  flex: 1 0 100%;
  order: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed rgba(91,147,214,.22);
}
.sum-tog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.sum-tog i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid #C6D6E4;
  background: #fff;
}
.sum-tog.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.sum-tog.on i { background: var(--accent-2); border-color: var(--accent-2); box-shadow: inset 0 0 0 2px #fff; }
.sum-kv {
  font-size: 11.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sum-kv .kv {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: 1px;
}
.sum-kv .kv.k { background: var(--accent-2); }
.sum-kv .kv.s { background: #B07A3C; }
.sum-kv .sum-kn { margin-left: 4px; color: var(--ink-3); }

/* 明细里的邮费来源 */
.lg-shipsep {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.lg-shipsep i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--ink-3);
  opacity: .85;
}
.lg-prow.is-ship { background: var(--accent-soft); border-color: var(--line); }
.rec-tan.is-ship { background: #FDF3E3; color: #A9691C; }
.st-ship {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.st-ship.pending { background: #FDF3E3; color: #A9691C; }
.st-ship.transit { background: var(--accent-soft); color: var(--accent-ink); }
.st-ship.done { background: #EAF6EF; color: #3F7D62; }

/* 册内明细里的「邮费来源」只读块：不点、不编辑，只说明这张卡是怎么寄回来的 */
.rec.ro {
  cursor: default;
  background: var(--accent-soft);
  border-style: dashed;
}
.rec.ro:active { transform: none; }
.rec.ro .rec-amt { color: var(--ink-2); font-weight: 650; }


/* ══════════ 我的页顶部两个录入入口：左「+ 记录」、右「+ 邮费」 ══════════
   2026-11-01 深夜按她本人的要求改：之前把邮费塞在账本页里、还做了三处入口，
   她一句「以上你说的都不要，直接把 +记录 左移、右边放一个 +邮费 即可」——
   所以别再往别处加入口，也别把这两个拆开。
   金色跟账本里「邮费」那个圆点是同一个语义色（--gold）。 */
.head-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.gal-btn.inline.solid.is-ship {
  background: linear-gradient(135deg, #D9B273, #B08540);
  box-shadow: 0 3px 10px rgba(173, 133, 72, .24);
}
.gal-btn.inline.solid.is-ship:hover { background: linear-gradient(135deg, #D9B273, #B08540); }
@media (max-width: 360px) {
  .head-acts { gap: 4px; }
  .head-acts .gal-btn.inline { padding: 0 9px; }
}

/* ═══ 2026-11-06 需求：其他品类改成两级结构 ═══
   二级按类型分段：段头沿用一级那套（类型 ──── N 项），段内是普通卡片网格 */
.cat-sec { margin-top: 20px; }
.cat-sec:first-child { margin-top: 0; }
.cat-sec .bel-head { margin-bottom: 10px; }
.bel-head .bel-name {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════
   「其他」三级视觉层级（2026-11-06 需求「其他品类维度拆分」§4.3b）
     大段头  = .bel-head（获取方式，已有样式，加粗段名 + 长虚线 + 计数）
     小段头  = .form-head（形态，缩进一格 + 圆点 + 常规字重 + 短虚线 + 计数）
     卡片    = .grid（沿用现有卡宽与列数，不新造）
   ═══════════════════════════════════════════════════════════ */
.acq-sec { margin-top: 22px; }
.acq-sec:first-child { margin-top: 0; }
.acq-sec .bel-head { margin-bottom: 12px; }
.acq-sec .grid { margin-bottom: 4px; }

.form-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 9px 14px;      /* 缩进一格：眼睛能看出它是下一级 */
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 400;
}
.form-head .form-name { flex: 0 0 auto; }
.form-head .form-name::before {
  content: '·';
  margin-right: 5px;
  color: var(--ink-3);
}
.form-line { flex: 1; height: 1px; background: var(--line-2); }
.form-cnt { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* 卡面上的形态小标签：跟归属角标同款，只是字重轻一档（§4.1b） */
.shot-tag.frm {
  font-weight: 500;
  color: var(--ink-2);
  border-color: rgba(115,156,192,.38);
  background: rgba(255, 255, 255, .88);
}

/* ═══════════════════════════════════════
   首页改版（需求 08）：六块重排
   品牌头（顶栏）→ banner → 近期行程 → 四栏目入口 → 最新直拍 → 公告区
   模块间距固定 24px，缺块不塌陷（5.8）
   ═══════════════════════════════════════ */

.home-feed { display: block; }
.hm-block { margin-bottom: 24px; }

/* banner：手机 16:9 / 桌面 21:9 两套槽位（D10）。
   只传了一张时 slide 里只有一个 img，两边共用裁切填充。 */
#home-banner .b-d { display: none; }
#home-banner .banner-slide img { object-fit: cover; }

/* 模块小节头：标题 + 右侧小入口 */
.hm-sec-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hm-sec-h h3 {
  margin: 0;
  font-size: var(--fs-group, 13.5px);
  font-weight: 650;
  color: var(--ink-2);
  letter-spacing: .06em;
}
.hm-more-b {
  border: 0;
  background: none;
  padding: 4px 2px;
  font-size: 11.5px;
  color: var(--accent-ink);
  cursor: pointer;
  font-family: inherit;
}
.hm-more-b:active { opacity: .7; }

/* ── 近期行程（5.4）：奶黄整块 + 圆角 16 + 条间分隔线 ── */
.hm-trip {
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: 16px;
  padding: 14px 14px 8px;
}
.hm-trip .hm-sec-h { padding: 0 2px; }
.hm-tlist { display: flex; flex-direction: column; }
.hm-trow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--cream-line);
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.hm-tlist .hm-trow:last-child { border-bottom: 0; }
.hm-tmain { flex: 1; min-width: 0; }
.hm-tdate {
  display: block;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .08em;
  color: var(--cream-ink);
  opacity: .82;
}
.hm-ttitle {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-tplace {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-style: normal;
  color: var(--cream-ink);
  opacity: .82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-dday {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 11px;
  background: var(--cream-2);
  color: var(--cream-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.hm-arr { flex: 0 0 auto; color: var(--cream-ink); font-size: 15px; opacity: .75; }
.hm-more {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--cream-line);
  background: none;
  padding: 11px 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cream-ink);
  cursor: pointer;
  font-family: inherit;
}
.hm-more:active { opacity: .7; }

/* ── 四栏目入口（5.5）：手机 2×2 / 桌面 1×4；封面占格 62%；不带角标 ── */
.hm-egrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hm-ecell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .14s, box-shadow .14s;
}
.hm-ecell:active { transform: scale(.985); }
.hm-ecov {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 110 / 116;         /* 整格高里封面约占 62% */
  background: linear-gradient(150deg, #F3F7FB 0%, #fdf6e6 100%);
  color: var(--accent);
}
.hm-ecov img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hm-ecov svg { width: 26px; height: 26px; }
.hm-ename {
  display: block;
  padding: 8px 10px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.hm-esub {
  display: block;
  padding: 2px 10px 9px;
  font-size: 10px;
  font-style: normal;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 最新直拍（5.6）：横滑，每屏约 3 张；角标官方/自制复用直拍页样式 ── */
.hm-dscroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hm-dscroll::-webkit-scrollbar { display: none; }
.hm-dcard {
  flex: 0 0 30.5%;
  scroll-snap-align: start;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.hm-dcov {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  background: linear-gradient(150deg, #F3F7FB 0%, #fdf6e6 100%);
}
.hm-dcov img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hm-dbody { display: block; padding: 7px 9px 9px; min-width: 0; }
.hm-dbody b {
  display: block;
  font-size: 10.5px;
  color: var(--ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-dbody i {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-style: normal;
  color: var(--ink-3);
}

/* ── 公告区（5.7）：复用 ro-card，手机两块纵向 / 桌面并排 ── */
.hm-notice { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

/* ── 桌面形态（5.1）：模块顺序不变，仅布局变 ── */
@media (min-width: 760px) {
  /* banner 21:9 + 桌面图槽位 */
  .banner { aspect-ratio: 21 / 9; }
  #home-banner .b-d { display: block; }
  #home-banner .b-m { display: none; }

  /* 近期行程 3 列横排；行内改为卡片样式（去分隔线） */
  .hm-tlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hm-trow {
    border: 1px solid var(--cream-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .55);
    padding: 11px 12px;
  }
  .hm-tlist .hm-trow:last-child { border: 1px solid var(--cream-line); }

  /* 四栏目入口一行 4 格 */
  .hm-egrid { grid-template-columns: repeat(4, 1fr); }

  /* 最新直拍一行 4 张起 */
  .hm-dcard { flex: 0 0 calc((100% - 30px) / 4); }

  /* 公告两块并排 */
  .hm-notice { flex-direction: row; }
  .hm-notice .ro-card { flex: 1; min-width: 0; }
}