/* 公益臻品博览 · 全站样式（自 Yew 版 static/index.html 内联样式提取，SSR shell 经 /style.css 引用） */
:root {
  --c-bg: #f7f4ee; --c-card: #ffffff; --c-ink: #2b2b2b; --c-sub: #8a8378;
  --c-gold: #a03425; --c-line: #e8e2d6; --c-deep: #3d4a3d;
  --font-scale: 1;
}
/* ── 字号档位（对齐旧云端 app-font-scale.wxss 与 gpy_common::FONT_SCALES）
   normal 标准 / large 大字 ×1.15 / xlarge 特大 ×1.3；头像尺寸不随之放大。 ── */
html[data-font="normal"] { --font-scale: 1; }
html[data-font="large"] { --font-scale: 1.15; }
html[data-font="xlarge"] { --font-scale: 1.3; }
/* ── 6 主题色板（对齐旧云端 styles/themes/；:root 即 light 宣纸默认）
   映射：bg→底 / card→surface / ink→主文字 / sub→ink-5 / gold→seal 强调 / line / deep→brand-d ── */
html[data-theme="light"] {
  --c-bg: #f7f4ee; --c-card: #ffffff; --c-ink: #2b2b2b; --c-sub: #8a8378;
  --c-gold: #a03425; --c-line: #e8e2d6; --c-deep: #3d4a3d;
}
html[data-theme="classic"] {
  --c-bg: #eef0ea; --c-card: #fafbf8; --c-ink: #333333; --c-sub: #6f6557;
  --c-gold: #a03425; --c-line: #d5dad2; --c-deep: #3d5a6d;
}
html[data-theme="sky"] {
  --c-bg: #eef3f6; --c-card: #f8fafc; --c-ink: #323a42; --c-sub: #6c7681;
  --c-gold: #a03425; --c-line: #d5dde4; --c-deep: #2f4e68;
}
html[data-theme="celadon"] {
  --c-bg: #eff4ef; --c-card: #f9fbf9; --c-ink: #333a35; --c-sub: #6b736a;
  --c-gold: #a03425; --c-line: #d7ded6; --c-deep: #3f5d4e;
}
html[data-theme="lotus"] {
  --c-bg: #f8f1f2; --c-card: #fcf8f8; --c-ink: #3a3336; --c-sub: #726672;
  --c-gold: #a03425; --c-line: #e7dbde; --c-deep: #734a58;
}
html[data-theme="dark"] {
  --c-bg: #1a1a1a; --c-card: #26221c; --c-ink: #f0e7d5; --c-sub: #b9ac90;
  --c-gold: #c05a48; --c-line: #3e3a33; --c-deep: #a98a5c;
}
/* 主题页选中卡 */
.theme-card.sel { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold); }
/* 字体页选中档 */
.font-opt.sel { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold); }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Leptos SSR 直接挂 body（无 #app 容器），布局属性落在 body 上；
   body 背景按规范传播到画布，全屏底色不受 max-width 影响 */
body { background: var(--c-bg); color: var(--c-ink); font-family: "Songti SC", "SimSun", serif; max-width: 720px; margin: 0 auto; min-height: 100vh; padding-bottom: 84px; }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--c-bg); padding: 14px 16px 10px; border-bottom: 1px solid var(--c-line); }
.topbar h1 { font-size: calc(20px * var(--font-scale)); color: var(--c-deep); letter-spacing: 2px; }
.topbar .sub { font-size: calc(12px * var(--font-scale)); color: var(--c-sub); margin-top: 2px; }
.tabs { display: flex; gap: 18px; margin-top: 10px; }
.tabs a { font-size: calc(14px * var(--font-scale)); color: var(--c-sub); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; cursor: pointer; }
.tabs a.active { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.body { padding: 14px 16px; }
.search { display: flex; gap: 8px; margin-bottom: 14px; }
.search input { flex: 1; border: 1px solid var(--c-line); background: var(--c-card); padding: 9px 12px; font-size: calc(14px * var(--font-scale)); border-radius: 4px; outline: none; }
.search button, .btn { display: inline-block; border: none; background: var(--c-gold); color: #fff; padding: 9px 16px; font-size: calc(14px * var(--font-scale)); border-radius: 4px; cursor: pointer; font-family: inherit; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--c-gold); border: 1px solid var(--c-gold); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 6px; padding: 14px; text-decoration: none; color: inherit; display: block; }
.card .name { font-size: calc(15px * var(--font-scale)); line-height: 1.5; }
.card .meta { font-size: calc(12px * var(--font-scale)); color: var(--c-sub); margin-top: 6px; display: flex; justify-content: space-between; }
.card .heat { color: var(--c-gold); }
/* ⚠️ .row / .btn 常被用在 Leptos <A>（<a>）上：行内元素会让 padding/背景塌碎、
   文字带默认下划线与链接色（资讯/展厅列表与「我的」按钮曾因此重叠错位）。
   必须显式块化 + 抹掉链接默认样式。 */
.row { display: block; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 6px; padding: 14px; margin-bottom: 10px; text-decoration: none; color: inherit; }
a.row:focus { outline: 1px dashed var(--c-line); }
.row .title { font-size: calc(15px * var(--font-scale)); }
.row .meta { font-size: calc(12px * var(--font-scale)); color: var(--c-sub); margin-top: 6px; }
.detail h2 { font-size: calc(20px * var(--font-scale)); color: var(--c-deep); }
/* 臻品详情标签行：flex 换行 + 统一间距（此前 badge 与文字挤成一行无呼吸感） */
.detail .tags { margin: 8px 0 14px; font-size: calc(12px * var(--font-scale)); color: var(--c-sub); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail .tags .badge { margin-right: 0; }
/* 站内裸链接统一主题色（浏览器默认蓝破坏视觉统一；.btn/.card/.mlink 各有自带样式不受影响） */
main a:not(.btn):not(.card):not(.mlink) { color: var(--c-deep); }
.detail .intro { font-size: calc(14px * var(--font-scale)); line-height: 1.9; white-space: pre-wrap; }
.panel { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 6px; padding: 18px; }
.panel h3 { font-size: calc(16px * var(--font-scale)); color: var(--c-deep); margin-bottom: 10px; }
.panel input { width: 100%; border: 1px solid var(--c-line); padding: 9px 12px; font-size: calc(14px * var(--font-scale)); border-radius: 4px; margin-bottom: 10px; outline: none; }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--c-line); font-size: calc(14px * var(--font-scale)); }
.kv .k { color: var(--c-sub); }
.footbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--c-card); border-top: 1px solid var(--c-line); display: flex; }
.footbar a { flex: 1; text-align: center; padding: 12px 0; font-size: calc(12px * var(--font-scale)); color: var(--c-sub); text-decoration: none; }
/* <A> 激活态：Leptos 0.7 起 A 无 active_class prop，激活时自动设置 aria-current="page" */
.footbar a[aria-current="page"] { color: var(--c-gold); }
.empty { text-align: center; color: var(--c-sub); padding: 60px 0; font-size: calc(14px * var(--font-scale)); }
.badge { display: inline-block; font-size: calc(11px * var(--font-scale)); color: var(--c-gold); border: 1px solid var(--c-gold); border-radius: 3px; padding: 1px 6px; margin-right: 6px; }
.note { font-size: calc(12px * var(--font-scale)); color: var(--c-sub); margin-top: 8px; line-height: 1.7; }
/* 消息/好友页（M2） */
.card .row { background: transparent; border: none; padding: 0; margin-bottom: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .row .note { margin-top: 0; }
.card.unread { border-color: var(--c-gold); }
.dot { display: inline-block; font-size: calc(11px * var(--font-scale)); color: #fff; background: var(--c-gold); border-radius: 8px; padding: 1px 8px; margin-left: 6px; }
.btn.sm { padding: 5px 10px; font-size: calc(12px * var(--font-scale)); }
.btn.on { background: var(--c-deep); color: #fff; border-color: var(--c-deep); }
.btn.danger { background: #b3413a; }
.btn.danger.ghost { background: transparent; color: #b3413a; border: 1px solid #b3413a; }
.panel h4 { font-size: calc(14px * var(--font-scale)); color: var(--c-deep); margin-bottom: 8px; }
.panel form input { width: auto; margin-bottom: 0; }
.panel form .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel form .row input { flex: 1; min-width: 140px; }
.panel .kv .btn.sm { margin-left: 8px; }
/* 臻品域（M3） */
.badge.wait { color: #8a6d3b; border-color: #c9a227; }
.badge.off { color: var(--c-sub); border-color: var(--c-sub); }
.mlink { color: var(--c-deep); text-decoration: none; border-bottom: 1px dashed var(--c-deep); }
label.f { display: block; margin-bottom: 10px; }
label.f .k { display: block; font-size: calc(12px * var(--font-scale)); color: var(--c-sub); margin-bottom: 4px; }
label.f input, label.f textarea, label.f select { width: 100%; border: 1px solid var(--c-line); background: var(--c-card); padding: 9px 12px; font-size: calc(14px * var(--font-scale)); border-radius: 4px; outline: none; font-family: inherit; }
form.panel input { width: 100%; border: 1px solid var(--c-line); padding: 9px 12px; font-size: calc(14px * var(--font-scale)); border-radius: 4px; margin-bottom: 10px; outline: none; }
.cmt-wrap { border-top: 1px dashed var(--c-line); padding-top: 10px; margin-top: 10px; }
.cmt .cmt-head { display: flex; justify-content: space-between; font-size: calc(12px * var(--font-scale)); color: var(--c-sub); }
.cmt .nick { color: var(--c-deep); }
.cmt .cmt-body { font-size: calc(14px * var(--font-scale)); line-height: 1.8; margin: 4px 0; white-space: pre-wrap; }
.cmt .cmt-acts { display: flex; gap: 8px; align-items: center; }
.cmt-form { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0; }
.cmt-form textarea { flex: 1; border: 1px solid var(--c-line); background: var(--c-card); padding: 8px 10px; font-size: calc(14px * var(--font-scale)); border-radius: 4px; outline: none; font-family: inherit; resize: vertical; }
.replies { margin-left: 14px; border-left: 2px solid var(--c-line); padding-left: 10px; }
.replies .cmt-wrap { border-top: none; padding-top: 6px; margin-top: 6px; }
/* 交易域（M8） */
.gold { color: var(--c-gold); font-weight: 600; }
.kv.off .k { text-decoration: line-through; color: var(--c-sub); }
input.num { width: 64px; text-align: center; border: 1px solid var(--c-line); padding: 6px 8px; font-size: calc(14px * var(--font-scale)); border-radius: 4px; outline: none; margin-bottom: 0; }
.panel input.num { width: 64px; margin-bottom: 0; }

/* 展厅 3D 域 + 后台管理面（M10/M11） */
.hall3d { position: relative; height: 62vh; min-height: 420px; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: var(--c-card); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
/* 六主题预览色点（与小程序 hall-colors BUILTIN_THEME_PALETTE 同源） */
.tdots { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: -1px; }
.tdots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.18); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stats .kv { flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--c-line); border-radius: 6px; padding: 8px 10px; }
/* 臻品封面占位图（/cover.svg?k=<cat>） */
.card .cover, .detail .cover { background: var(--c-bg); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.card .cover img, .detail .cover img { display: block; width: 100%; height: 140px; object-fit: cover; }
.detail .cover img { height: 220px; }
/* H7 通用小标签（大师策展 / 集章类型） */
.tag { display: inline-block; font-size: calc(10px * var(--font-scale)); line-height: 1.6; padding: 0 6px; border-radius: 3px;
  border: 1px solid rgba(216,178,92,.7); color: var(--c-gold); white-space: nowrap; vertical-align: middle; }
/* H7 集章册 */
.stamps-grid { grid-template-columns: 1fr 1fr; }
.stamp-card .stamp-cover { position: relative; border-radius: 4px; overflow: hidden; margin-bottom: 8px;
  background: linear-gradient(160deg,#351b13,#1f0e0a); aspect-ratio: 4 / 3; }
.stamp-card .stamp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stamp-card .stamp-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Songti SC","SimSun",serif; font-size: calc(52px * var(--font-scale)); color: rgba(216,178,92,.85); }
.stamp-card .stamp-tag { position: absolute; left: 6px; top: 6px; background: rgba(20,22,26,.72); }
@media (min-width: 720px) { .stamps-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ── H8：色板编辑器 / 自定义主题 / 参数表单 / 审核色块 ── */
.btn.xs { padding: 2px 8px; font-size: calc(11px * var(--font-scale)); }
.palette { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.palette.compact { gap: 4px; margin: 0; align-items: center; }
.palette-item { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--font-scale)); color: var(--c-sub); }
.palette-item input[type="color"], .palette.compact input[type="color"] {
  width: 30px; height: 24px; padding: 0; border: 1px solid rgba(120,100,60,.4);
  border-radius: 4px; background: none; cursor: pointer;
}
.palette.compact input[type="color"] { width: 26px; height: 22px; }
.theme-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(200,160,90,.6); border-radius: 6px; padding: 1px 1px 1px 2px; }
.theme-chip.on { background: rgba(200,160,90,.22); border-color: var(--c-gold); }
.theme-chip .btn.xs.ghost { border: none; color: var(--c-sub); }
.theme-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.theme-new input[type="text"] { min-width: 150px; }
.theme-new select { padding: 5px 8px; }
.param-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; margin-top: 6px; }
.param-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(13px * var(--font-scale)); }
.param-label { color: var(--c-sub); flex: 1; }
.param-item input[type="number"] { width: 88px; padding: 4px 8px; }
.param-item select { padding: 4px 8px; }
.swatches { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: -2px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.25); }

/* ===== S6 巡检样式优化 ===== */

/* 卡片/行 meta 行：左侧文字可截断，右侧热度/数字不换行，防止溢出挤压 */
.card .meta > span:first-child,
.row .meta > span:first-child {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .meta > span:last-child,
.row .meta > span:last-child {
  white-space: nowrap; flex-shrink: 0; margin-left: 8px;
}
.row .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* 展厅/资讯卡片标签统一：小型圆角胶囊，间距一致 */
.hall-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag { display: inline-block; font-size: calc(11px * var(--font-scale)); color: var(--c-sub);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 10px; padding: 1px 8px; }
.tag.muted { color: #b0a890; border-style: dashed; }
.tag.heat { color: var(--c-gold); border-color: var(--c-gold); background: transparent; }

/* 资讯卡片：标题与摘要分层，数字统一小号 */
.news-row .title { display: flex; align-items: center; gap: 6px; }
.news-row .digest { font-size: calc(12px * var(--font-scale)); color: var(--c-sub);
  margin-top: 4px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.news-row .meta .stat { font-size: calc(11px * var(--font-scale)); }

/* 藏友榜：名次 + 昵称 + 角色横向对齐，统计数据紧凑 */
.collector-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.collector-row .rank { font-weight: bold; color: var(--c-gold); min-width: 32px; }
.collector-row .stats { display: flex; gap: 14px; font-size: calc(12px * var(--font-scale)); color: var(--c-sub); }
.collector-row .stats b { color: var(--c-ink); font-weight: 600; }

/* 空展品展厅提示 */
.hall-empty { color: #b0a890; font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   样式精修 v2（追加区，靠层叠覆盖上方旧值；旧行零回改）
   设计基调：宣纸底 + 宋体 + 印章红，素雅博物馆风
   §0 令牌 → §1 纸纹底 → §2 顶栏 → §3 控件 → §4 卡片装裱
   → §5 徽章标签 → §6 底栏 → §7 空态/杂项 → §8 动效 → §9 dark
   ═══════════════════════════════════════════════════════════ */

/* ── §0 设计令牌 ── */
:root {
  --sh-1: 0 1px 2px rgba(60,45,25,.05), 0 2px 8px rgba(60,45,25,.05);
  --sh-2: 0 2px 6px rgba(60,45,25,.08), 0 10px 24px -8px rgba(60,45,25,.18);
  --sh-3: 0 8px 30px -6px rgba(60,45,25,.28);
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --t: .2s; --e: cubic-bezier(.2,.6,.2,1);
  --c-warn: #c9a227; --c-danger: #b3413a; --c-faint: #b0a890;
  --c-gold-soft: rgba(160,52,37,.15);
}

/* ── §1 宣纸质感底（细纹 + 顶部暖光晕；dark 在 §9 覆盖） ── */
body {
  background:
    radial-gradient(ellipse 120% 55% at 50% -12%, rgba(160,52,37,.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,100,60,.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,60,.02) 0 1px, transparent 1px 3px),
    var(--c-bg);
}
::selection { background: var(--c-gold-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-sub) 38%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* 键盘可达性：统一金色焦点环 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 2px;
}

/* ── §2 顶栏：印章站名 + 毛玻璃 + 渐隐投影 ── */
.topbar {
  background: var(--c-bg);
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom-color: transparent;
  box-shadow: 0 8px 16px -12px rgba(60,45,25,.35);
}
.topbar h1 { display: flex; align-items: center; gap: 10px; }
.topbar h1::before {
  content: "臻";
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(27px * var(--font-scale)); height: calc(27px * var(--font-scale));
  flex-shrink: 0;
  background: var(--c-gold); color: #fff;
  font-size: calc(16px * var(--font-scale));
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), var(--sh-1);
  letter-spacing: 0;
}
.tabs a { transition: color var(--t) var(--e), border-color var(--t) var(--e); }

/* ── §3 控件：搜索胶囊 / 按钮 / 输入框 ── */
.search input { border-radius: 999px; padding: 10px 16px; }
.search button { border-radius: 999px; padding: 10px 18px; box-shadow: var(--sh-1); }
.btn { border-radius: var(--r-sm); transition: background-color var(--t) var(--e), color var(--t) var(--e), border-color var(--t) var(--e), box-shadow var(--t) var(--e), transform var(--t) var(--e); }
.btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn.danger { background: var(--c-danger); }
.btn.danger.ghost { background: transparent; color: var(--c-danger); border-color: var(--c-danger); }
.btn.on { background: var(--c-deep); border-color: var(--c-deep); }
.search input, .panel input, form.panel input, label.f input, label.f textarea, label.f select, .cmt-form textarea, input.num {
  transition: border-color var(--t) var(--e), box-shadow var(--t) var(--e), background-color var(--t) var(--e);
}
.search input:focus, .panel input:focus, form.panel input:focus, label.f input:focus, label.f textarea:focus, label.f select:focus, .cmt-form textarea:focus, input.num:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-soft);
}
/* 复选/单选不随文本框拉伸，避免协议勾选、权限勾选错位 */
.panel input[type="checkbox"], .panel input[type="radio"],
form.panel input[type="checkbox"], form.panel input[type="radio"] {
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 auto;
}
.panel input[type="checkbox"]:focus, .panel input[type="radio"]:focus,
form.panel input[type="checkbox"]:focus, form.panel input[type="radio"]:focus {
  box-shadow: none;
}

/* ── §4 卡片体系：静态影 + 悬停抬升 + 封面装裱画框 ── */
.card, .row, .panel {
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform var(--t) var(--e), box-shadow var(--t) var(--e), border-color var(--t) var(--e);
}
.card .name, .row .title { font-weight: 600; letter-spacing: .3px; }
.card .meta, .row .meta, .kv { font-variant-numeric: tabular-nums; }
/* 仅对链接型卡片/行做悬停抬升（div 型 .card/.row 不动） */
.card .cover, .detail .cover { position: relative; }
.card .cover img, .detail .cover img { transition: transform .45s var(--e), filter .45s var(--e); }
.card .cover::before, .detail .cover::before {
  content: ""; position: absolute; inset: 5px; z-index: 1;
  border: 1px solid rgba(216,178,92,.55);
  outline: 1px solid rgba(216,178,92,.22); outline-offset: 2px;
  border-radius: 3px; pointer-events: none;
}
.card .cover::after, .detail .cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 -34px 26px -22px rgba(30,20,10,.35), inset 0 0 0 1px rgba(60,45,25,.08);
}

/* ── §5 徽章 / 标签 / kv 统计 ── */
.badge { border-radius: 999px; padding: 2px 8px; }
.badge.wait { color: var(--c-warn); border-color: var(--c-warn); }
.badge.off { color: var(--c-sub); }
.hall-empty { color: var(--c-faint); }
.tag { transition: border-color var(--t) var(--e), color var(--t) var(--e); }
.stats .kv { background: var(--c-card); border-radius: var(--r-md); box-shadow: var(--sh-1); transition: box-shadow var(--t) var(--e), transform var(--t) var(--e); }

/* ── §6 底栏：毛玻璃 + 激活金点 ── */
.footbar {
  background: var(--c-card);
  background: color-mix(in srgb, var(--c-card) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 -6px 18px -10px rgba(60,45,25,.25);
}
.footbar a { position: relative; transition: color var(--t) var(--e); }
.footbar a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold);
}

/* ── §7 空态 / 面板标题 ── */
.empty {
  border: 1px dashed var(--c-line); border-radius: var(--r-lg);
  background: var(--c-card); box-shadow: var(--sh-1);
}
.panel h3 { letter-spacing: .5px; }
.detail h2 { letter-spacing: .5px; }

/* ── §8 悬停与动效（hover 指针设备 + 尊重 reduced-motion） ── */
@media (hover: hover) {
  a.card:hover, a.row:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
    border-color: var(--c-line);
    border-color: color-mix(in srgb, var(--c-gold) 35%, var(--c-line));
  }
  a.card:hover .cover img, .detail .cover:hover img { transform: scale(1.04); filter: saturate(1.05); }
  .card:not(a):hover, .row:not(a):hover { box-shadow: var(--sh-2); }
  .stats .kv:hover { box-shadow: var(--sh-2); }
  .tag:hover { border-color: var(--c-gold); color: var(--c-gold); }
  .tabs a:hover { color: var(--c-gold); }
  .btn:not(.ghost):not(.on):not(.danger):hover { background: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 86%, #fff); }
  .btn.ghost:hover { background: var(--c-gold-soft); }
  .btn.on:hover { background: var(--c-deep); background: color-mix(in srgb, var(--c-deep) 86%, #fff); }
  .btn.danger:hover { background: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 86%, #fff); }
  .btn.danger.ghost:hover { background: color-mix(in srgb, var(--c-danger) 10%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: gpy-fadein .35s var(--e) both; }
  @keyframes gpy-fadein { from { opacity: 0; } to { opacity: 1; } }
}

/* ── §9 dark 主题集中覆盖 ── */
html[data-theme="dark"] {
  color-scheme: dark;
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 24px -8px rgba(0,0,0,.55);
  --sh-3: 0 8px 30px -6px rgba(0,0,0,.6);
  --c-gold-soft: rgba(192,90,72,.22);
}
/* .panel input / input.num 未声明背景（浏览器默认白底），dark 下文字继承浅色会不可读，显式拉深 */
html[data-theme="dark"] .panel input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] input.num {
  background: #2f2b24; color: var(--c-ink); border-color: var(--c-line);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 120% 55% at 50% -12%, rgba(192,90,72,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    var(--c-bg);
}
html[data-theme="dark"] .topbar { box-shadow: 0 8px 16px -12px rgba(0,0,0,.7); }
html[data-theme="dark"] .topbar h1::before { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), var(--sh-1); }
html[data-theme="dark"] .footbar { box-shadow: 0 -6px 18px -10px rgba(0,0,0,.6); }
html[data-theme="dark"] .card .cover::before, html[data-theme="dark"] .detail .cover::before {
  border-color: rgba(169,138,92,.4);
  outline-color: rgba(169,138,92,.18);
}

/* ===== 响应式断点变量：容器宽度 / 内容留白 / 栅格间隙 / 安全区 ===== */
:root {
  --wrap-max: 720px;
  --pad: 16px;
  --gap: 12px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ===== 安全区：内容左右与底部让开刘海 / home 条，顶栏下压刘海高度 ===== */
body {
  padding-left: var(--safe-l, 0px);
  padding-right: var(--safe-r, 0px);
  padding-bottom: calc(84px + var(--safe-b, 0px));
}
.topbar {
  padding-top: calc(14px + var(--safe-t, 0px));
  padding-left: calc(16px + var(--safe-l, 0px));
  padding-right: calc(16px + var(--safe-r, 0px));
}
.footbar { padding-bottom: var(--safe-b, 0px); }

/* ===== ≥720 平板：容器加宽、列表转多列、底栏定宽居中 ===== */
@media (min-width: 720px) {
  :root { --wrap-max: 780px; --pad: 20px; --gap: 16px; }

  body { max-width: var(--wrap-max); }
  .body { padding: 18px var(--pad); }
  .topbar { padding-left: calc(var(--pad) + var(--safe-l, 0px)); padding-right: calc(var(--pad) + var(--safe-r, 0px)); }

  .footbar {
    left: 50%; right: auto;
    width: 100%; max-width: var(--wrap-max);
    transform: translateX(-50%);
    border-left: 1px solid var(--c-line);
    border-right: 1px solid var(--c-line);
  }
  .footbar a { padding: 14px 0; font-size: calc(13px * var(--font-scale)); }

  .split {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--gap);
  }

  .grid, .stamps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .stats { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); }
  .param-grid { gap: 12px 20px; }

  .detail .intro { max-width: 70ch; }
  .detail .cover img { height: 260px; }
  .panel { padding: 20px; }
  .row { margin-bottom: 12px; }
}

/* ===== ≥1080 桌面：更宽容器 + 更强留白 + 四列网格 ===== */
@media (min-width: 1080px) {
  :root { --wrap-max: 1040px; --pad: 32px; --gap: 20px; }

  .body { padding: 24px var(--pad); }
  .topbar { padding-left: calc(var(--pad) + var(--safe-l, 0px)); padding-right: calc(var(--pad) + var(--safe-r, 0px)); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

  .grid, .stamps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  .detail .intro { max-width: 76ch; }
  .detail .cover img { height: 320px; }
  .panel { padding: 24px; }
  .empty { padding: 80px 0; }
}

/* ===== J4：后台台账表格（窄屏横向滚动，宽屏舒展） ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--font-scale)); }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-line); vertical-align: middle; white-space: nowrap; }
.table th { color: var(--c-sub); font-weight: 600; font-size: calc(12px * var(--font-scale)); }
.table tbody tr:hover { background: color-mix(in srgb, var(--c-gold) 8%, transparent); }
.table td .row { border: none; padding: 0; margin: 0; }
@media (min-width: 1080px) {
  .table th, .table td { padding: 10px 14px; }
  .table td { white-space: normal; }
}
@media (min-width: 1440px) { :root { --wrap-max: 1200px; } }