/* 公益臻品博览 · 全站样式（自 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; }