/* ============================================================
   礼金簿 C 端 · 新中式轻奢主题（New Chinese Luxury）
   设计原则：朱砂红主色 + 烫金点缀 + 宣纸质感 + 传统装饰
   —— 融合传统礼簿文化与现代UI设计，打造有文化温度的记账工具
   ============================================================ */

/* --- 自备子集字体（由 tools/font-subset.py 生成，勿手改 woff2） -------------
   按字集向 Google Fonts 取，只含清单内的字形，两份合计约 30KB。
   原先引的 fonts.googleapis.com 在国内被墙，且 <link rel=stylesheet> 是阻塞渲染的
   —— 首屏要等它超时。改为本地托管 + 系统字体兜底。
  字体栈必须保留系统回退：清单外的字会落到下一个字体，否则会显示成方块。
  新增 .card-title / .hero-title 文案若用到清单外的字，需补进
      tools/font-subset.py 的 chars 并重跑该脚本，否则该字与相邻字字形不一致。 */
@font-face { font-family:'LJ Kai'; font-style:normal; font-weight:400;
  src:url('/css/assets/fonts/lj-kai.woff2?v=20260917n') format('woff2'); font-display:swap; }
@font-face { font-family:'LJ Serif'; font-style:normal; font-weight:900;
  src:url('/css/assets/fonts/lj-serif.woff2?v=20260917n') format('woff2'); font-display:swap; }

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

:root {
  /* --- 主题：宣纸朱漆（Lacquer & Paper）---
     设计真源 docs/design/新风格样张.html，定调说明 docs/design/设计定调.md。
     三柱**材质**（不是三色）：纸 60% / 漆 30% / 金 10%，金只做烫印不做大面积底。
     对比度实测：宣纸 #F4EBDA 上墨字 13.32 / 次字 5.59 / 三字 4.97；
     朱漆 #A81C24 上白字 7.35、烫金 #F0DCA8 5.43 —— 全部 AA。 */
  --red:#A81C24;          /* 主色 · 朱漆（作底色；作文字在宣纸底 6.21:1 亦达标） */
  --red-d:#7A0F16;        /* 漆深 · 渐变暗端 / 书脊 */
  --red2:#C0392B;         /* 漆亮 · 渐变亮端 */
  --red-bright:#8E1418;   /* 朱字 · 大金额与强调文字（宣纸底 7.84:1） */
  --gold:#C9A227;         /* 烫金 · 只做烫印（书名 / 金线 / 金钮 / 印章边） */
  --gold-d:#745A12;       /* 金棕 · 金系文字（宣纸底 5.52:1） */
  --gold-lt:#F0DCA8;      /* 浅金 · 高光 / 渐变亮端 */
  --orange:#8E520A;       /* 现金（宣纸底 5.28:1） */
  --orange-lt:#C1762F;

  /* --- 中性面：宣纸（v2.2 翻转：纸更沉、卡更亮、墨更深 → 卡真正浮起）--- */
  --bg:#F8F1E2;           /* 页底宣纸（L 0.87，亮于卡 → 卡浮起） */
  --card:#FFFDF8;         /* 卡面暖白（L 0.98，浮于页底之上） */
  --surface-2:#F0E5CF;    /* 次级面（输入框 / 表头） */
  --paper:#FDFAF3;        /* 信息面（更暖白） */
  --scroll-hi:#FBF5E8;    /* 卷轴暖金 · 上端 */
  --scroll-lo:#F0E4CE;    /* 卷轴暖金 · 下端 */
  --red-deep:#8E1418;     /* 深朱砂 · 印章 / 书脊 / 金额 */
  --seal:#B3242F;         /* 印章朱 · 进度文案 / 推进条亮端（样张 --seal） */
  --lac-d:#6E0C13;        /* 漆深档 · 总额漆匾底（与封面亮档拉体量差） */
  --gold-br:#8A6A1F;      /* 金棕 · 册页装订脊 / 漆匾金箔铆边 */
  --gold-line-2:rgba(201,162,39,.55);   /* 金描边 · 浅（标牌 / 小标签） */
  --line:#E2D3B6;                       /* 账格线（实色，浅底可见，v2.2 更淡） */
  --line-2:rgba(201,162,39,.30);        /* 描边（输入框 / 徽章） */
  --rule-red:rgba(168,28,36,.22);       /* 红楼线 · 描边药丸（样张 --rule-red） */
  --gold-line:rgba(201,162,39,.45);     /* 金色描边 */
  --info-bg:#FDFAF3;      /* 信息面（同 --paper） */

  /* --- 文字：墨（v2.2 加深，对比度推到 ≈15:1 级）--- */
  --ink:#1A140D;          /* 主文字 · 墨（≈15.4:1） */
  --ink2:#544430;         /* 次文字 */
  --ink3:#78684E;         /* 三文字 */
  --ink-brown:#745A12;    /* 金棕 · 辅助文字（5.52:1） */

  /* --- 宣纸纹理（v2.2：单道极淡斜纤维 + 纸面柔光；避开双向交织，否则读成网格纸）--- */
  --grain:repeating-linear-gradient(101deg,rgba(120,95,60,.024) 0 1px,transparent 1px 8px),
          radial-gradient(190% 130% at -6% -10%,rgba(255,253,246,.72),transparent 58%);

  /* --- 语义色（浅底加深一档） --- */
  --green:#1F6E56;        /* 微信（5.18:1） */
  --green-lt:#3FA184;
  --blue:#2F5A94;        /* 蓝（加深：原 #3A6FB0 在浅面上仅 3.66:1，未达 AA） */
  --purple:#7A64B8;

  /* --- 阴影：暖调（浅底上的阴影带纸的暖色，不用纯黑） --- */
  --shadow:0 1px 2px rgba(42,33,27,.06), 0 4px 14px rgba(42,33,27,.08);
  --shadow-lg:0 2px 8px rgba(42,33,27,.10), 0 20px 48px rgba(42,33,27,.16);
  --shadow-red:0 6px 20px rgba(168,28,36,.28);
  --shadow-gold:0 4px 16px rgba(201,162,39,.22);

  /* --- 圆角尺度（紧角，对齐样张：账本/实物语言，不是 App 柔卡） --- */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;

  /* --- 渐变（收敛使用） --- */
  --grad:linear-gradient(158deg,#8E1418 0%,#A81C24 34%,#C0392B 56%,#7A0F16 100%);   /* 漆面 */
  --grad-gold:linear-gradient(135deg,#FFF9EC 4%,#F0DCA8 34%,#C9A227 70%,#D9B65C 100%);
  --grad-amount:linear-gradient(180deg,#A81C24 0%,#8E1418 100%);                    /* 大金额朱字 */
  --grad-line:linear-gradient(90deg,#A81C24,#C9A227);
  --grad-header:linear-gradient(158deg,#8E1418 0%,#A81C24 34%,#C0392B 56%,#7A0F16 100%);

  /* --- 字号阶梯（模块化 1.25，与样张一致） --- */
  --t-11:11px; --t-13:13px; --t-16:16px; --t-20:20px;
  --t-25:25px; --t-31:31px; --t-39:39px; --t-49:49px;
  /* --- 间距阶梯（与样张一致） --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* --- 品牌缓动（全局统一手感，对齐样张） --- */
  --ease:cubic-bezier(.16,1,.3,1); --dur:320ms;
}


html, body { height:100%; }
body {
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background-color:#E4D4B6;
  background-image:radial-gradient(120% 90% at 50% -10%, #F7EFE0 0%, #EFE3CC 44%, #E4D4B6 100%);
  background-attachment:fixed;
  color:var(--ink);
  display:flex; justify-content:center;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* 标题使用书法宋体，增加中式人文感（对齐样张：LJ Serif 优先，刀刻 900 字重） */
h1, h2, h3, .hero-title, .card-title, .faq-gname, .subnav h2, .modal-head h3 {
  font-family:'LJ Serif','Songti SC','STSong','SimSun',serif;
  font-weight:900;
  letter-spacing:2px;
}
/* 数字统一等宽（表格对齐、金额不跳动） */
.stat .n, .book-amt b, .gcard-amt, .gtable .amt, .quota-head .v b,
.share-code, .book-tally b, .batch-summary b, .stat .split b {
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

#phone { width:100%; max-width:440px; height:100dvh; background:var(--bg);
  box-shadow:0 0 0 1px rgba(42,33,27,.6), 0 24px 70px rgba(42,33,27,.6);
  overflow:hidden; position:relative; }
/* 册页装订脊：左侧 3px 金线（v2.2 母题，礼金簿=册页）。高 z-index 压在内容之上，
   但低于弹窗遮罩（弹窗 z-index 通常 ≥50）。桌面端 #phone 透明全宽时仍在左缘。 */
#phone::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:6; pointer-events:none;
  background:linear-gradient(180deg,var(--gold-br),var(--gold-lt) 26%,var(--gold) 54%,var(--gold-br) 82%,var(--gold-dk));
  box-shadow:1px 0 0 rgba(110,12,19,.45), inset 0 0 2px rgba(255,247,220,.6); }
/* 页面底：顶部暗红光晕（参考图实测 #591114）→ 中后段暖金/暗红云雾过渡 → 近黑，
   再叠一层低透明度祥云暗纹（内联 SVG 平铺；cloud.png 是 JPEG 无 alpha，不能作纹理）。
   分层顺序：祥云纹理在最上，其下光斑，最底纵向过渡——避免大面死黑显压抑。 */
#page {
  /* 宣纸肌理四层：
     ① 纤维噪点（SVG feTurbulence，透明度写进 rect，不用 blend-mode 以免拖慢合成）
     ② 账格竖线（极淡朱线，34px 一栏 —— 账本的内页分栏）
     ③ 顶部一点暖红光晕（漆器映在纸上的感觉）
     ④ 纸面纵向过渡 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(168,28,36,.045) 0 1px, transparent 1px 34px),
    radial-gradient(120% 46% at 50% -10%, rgba(168,28,36,.13) 0%, transparent 62%),
    radial-gradient(70% 26% at 100% 12%, rgba(201,162,39,.10) 0%, transparent 60%),
    linear-gradient(180deg, #F7EFE0 0%, #F4EBDA 46%, #EFE3CC 100%);
  background-size:140px 140px, auto, auto, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}

#app { height:100%; display:flex; flex-direction:column; }
#page { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#page::-webkit-scrollbar { display:none; }
.hidden { display:none !important; }
img { display:block; }
a { text-decoration:none; color:inherit; }
.muted { color:var(--ink3); }

/* ============ 顶部封面（朱漆 · 洒金 + 金箔压边线）============
   封面是这本账簿的「实物」：漆有厚度（斜向深红渐变）、会反光（左上高光）、
   洒了金箔（::before）。占屏 ~15%，只负责报出「这是哪本账」。 */
.hero { background:
    radial-gradient(120% 90% at 18% -18%, rgba(255,236,200,.30), transparent 58%),
    linear-gradient(158deg, #8E1418 0%, #A81C24 34%, #C0392B 56%, #7A0F16 100%);
  color:#fff;
  margin:0; padding:calc(env(safe-area-inset-top) + 15px) 18px 15px;
  border-radius:0;
  position:relative; overflow:hidden;
  box-shadow:0 14px 34px rgba(42,33,27,.34), inset 0 -1px 0 rgba(240,220,168,.5); }
/* 洒金：金箔碎屑，不是星空 —— 要点在「细、疏、不匀」。
   四层不同周期的微粒错开叠加，避免出现规则点阵的机械感。
   （原用 cloud.png 祥云贴图：它是「JPEG 内容 + .png 扩展名」，没有 alpha
     通道，压在漆面上是一块米色，故改为纯 CSS 洒金。） */
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:
    repeating-linear-gradient(48deg, rgba(240,220,168,.10) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(-48deg, rgba(240,220,168,.06) 0 2px, transparent 2px 13px),
    radial-gradient(circle at 12% 22%, rgba(248,232,190,.9) 0 .5px, transparent .95px),
    radial-gradient(circle at 68% 12%, rgba(248,232,190,.7) 0 .42px, transparent .85px),
    radial-gradient(circle at 84% 62%, rgba(248,232,190,.8) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 34% 78%, rgba(248,232,190,.6) 0 .45px, transparent .95px);
  background-size:auto, auto, 71px 61px, 97px 83px, 127px 113px, 89px 79px; }
/* 金箔压边线：粗金 + 细金 双线，像皮书压印收口 */
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:7px;
  background:
    linear-gradient(90deg, transparent, var(--gold-lt) 12%, var(--gold) 50%, var(--gold-lt) 88%, transparent) left top/100% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(240,220,168,.5) 20%, rgba(240,220,168,.5) 80%, transparent) left bottom/100% 1px no-repeat; }
.hero-row { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
/* 二级页返回钮（heroHTML 第 5 参 back=true）：金描边半透明方块，与标题同排 */
.hero-row .h-main { flex:1; min-width:0; }
.hero-back { flex:0 0 auto; width:38px; height:38px; margin-right:10px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; padding-bottom:3px; font-family:inherit;
  background:rgba(255,255,255,.14); border:1px solid rgba(201,162,39,.32);
  color:var(--gold-lt); cursor:pointer; text-decoration:none; }
.hero-back:active { background:rgba(255,255,255,.24); }
.hero-title { font-size:26px; font-weight:900; letter-spacing:3px; display:flex; align-items:center; gap:10px;
  /* 横排烫金：135° 让首末两字各有明暗。
     绝不用竖排 —— writing-mode:vertical-rl 下文字超高会换到左边下一列，
     「礼金簿」会被读成「簿礼金」（样张早期实际踩过，断言查不出，只有截图能看出）。 */
  background:linear-gradient(135deg,#FFF9EC 4%,var(--gold-lt) 34%,var(--gold) 70%,#D9B65C 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(84,8,12,.9)) drop-shadow(0 0 12px rgba(255,236,200,.26)); }
/* 朱印：顶在书名最前面，替掉竖排原本提供的仪式感 */
.hero-title .logo { width:34px; height:34px; border-radius:3px; background:var(--red-deep);
  display:flex; align-items:center; justify-content:center;
  color:#F7EFE0; font-size:15px;
  border:1.5px solid rgba(247,239,224,.78);
  box-shadow:0 2px 6px rgba(60,4,8,.5);
  /* .hero-title 的烫金字用了 -webkit-text-fill-color:transparent，而它是**可继承属性**，
     会把这里面的图标字符也变透明（曾致 hero 印章只剩空方块）。必须显式恢复。 */
  -webkit-text-fill-color:#F7EFE0; }
.hero-sub { font-size:11px; opacity:.88; margin-top:7px; letter-spacing:3px; font-weight:400;
  color:rgba(255,246,230,.9); }
.bell { position:relative; width:42px; height:42px; border-radius:50%;
  background:rgba(90,8,12,.26); border:1px solid rgba(240,220,168,.5);
  display:flex; align-items:center; justify-content:center; }
.bell .fa { font-size:18px; color:var(--gold-lt); }
.bell .dot { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:9px;
  background:var(--red2); color:#fff; font-size:10.5px; font-weight:800; display:flex;
  align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--red-d);
  font-variant-numeric:tabular-nums; }

/* ============ 布局与卡片（新中式 · 金边 + 宣纸质感） ============ */
.body-pad { padding:0 16px 96px; }
.pull-up { margin-top:0; position:relative; z-index:3; }
.card { background:var(--card);
  background-image:linear-gradient(180deg, rgba(255,252,244,.7), rgba(42,33,27,.03));
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(42,33,27,.05); padding:16px; margin-bottom:12px;
  position:relative; }
/* 卡片顶部中式回纹装饰线（双线） */
/* 卡片不再加顶部金压印线：样张里卡片就是一张宣纸 + 发丝边。
   压印线留给「封面 / 请柬 / 册页」这三个真正的实物形制。 */
.card::before, .card::after { display:none; }
/* 区块标题：一处书法笔触就够，用在章节题头起「手写批注」的作用 */
.card-title { font-family:'LJ Kai','KaiTi',serif;
  font-size:22px; font-weight:400; letter-spacing:3px;
  display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--ink); }
.card-title em { font-style:normal; font-family:'LJ Serif','Songti SC',serif;
  font-size:13px; color:var(--red); margin-left:6px; letter-spacing:0; }
.card-title .more { margin-left:auto; font-family:'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:12.5px; color:var(--gold-d); font-weight:500; letter-spacing:1px;
  display:inline-flex; align-items:center; min-height:40px; padding:0 4px; }
.card-title .more::after { content:"›"; margin-left:3px; color:var(--gold-d); }

/* 注：.tipbar 原先在本文件里定义了两遍（此处一处、末尾新中式段一处），
   后一处会静默覆盖前一处的同名分量，而前一处又独有 .ico 的 line-height 与 p 的 font-weight。
   两份差异已合并到末尾那一处（单一真源），此处删除，避免再出现「改一处不生效」。 */

/* 公告：印章式标签 + 中式边框。
   原先 ::before/::after 各画一条 12px 的 L 形括号，只覆盖「左上 + 右下」两个对角、
   且各外扩 4px —— 四角不齐，看起来像没渲染完的残留，故去除。
   本条已有 2px 金边 + 朱砂印章标签，足以立住，不必再加角饰。 */
/* 榜文条：公告是「官方发声」，所以给它完整的一套形制 —— 四边细框 +
   骑在框上的朱印角章。角章写全「公告」两字（方章只塞得下一个字会丢字）。
   宽度随内容（width:fit-content）：一行排得下时整条收缩到文字宽度 + 固定内距，
   右侧不留空带；文案变长会自动退化为满宽，不会溢出。 */
.annbar { position:relative; width:fit-content; max-width:100%;
  background:var(--grain), var(--paper);
  border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line);
  border-left:none; border-right:none; border-radius:0;
  padding:13px 14px 9px; margin:16px 0 0;
  box-shadow:0 3px 9px rgba(58,38,18,.06); }
.annbar .tag { position:absolute; left:11px; top:-9px;
  background:var(--red-deep); color:#F7EFE0; font-size:11px;
  font-weight:900; padding:2px 8px 1px; border-radius:2px; letter-spacing:2px;
  font-family:'LJ Serif','Songti SC',serif;
  border:1px solid rgba(247,239,224,.72);
  box-shadow:0 1px 3px rgba(60,4,8,.24); }
/* 印章效果 */
/* 角章已自带 1px 亮边，内框多余且会挤掉两字的间距 */
.annbar .tag::before { display:none; }
.annwrap { height:20px; overflow:hidden; flex:1; }
.annlist { transition:transform var(--dur) var(--ease); }
.annlist p { font-size:13px; color:var(--ink2); line-height:20px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }

/* 轮播：金边 + 牡丹花纹装饰 */
/* 请柬：横幅不做成死红条，而是「压在账页上的一张帖」——
   金双边框 + 四角回纹，且故意上叠 6px 越过封面下沿（每屏留一个破格元素）。 */
.swiper { position:relative; border-radius:var(--r-sm); overflow:hidden;
  box-shadow:0 8px 22px rgba(42,33,27,.18); margin:-6px 0 12px; }
.swiper::before { content:""; position:absolute; inset:6px; pointer-events:none; z-index:3;
  border:1px solid rgba(240,220,168,.5); border-radius:3px; }
.swiper::after { content:""; position:absolute; inset:10px; pointer-events:none; z-index:3; opacity:.6;
  background:
    linear-gradient(var(--gold-lt),var(--gold-lt)) left 0 top 0/12px 1px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) left 0 top 0/1px 12px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) right 0 top 0/12px 1px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) right 0 top 0/1px 12px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) left 0 bottom 0/12px 1px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) left 0 bottom 0/1px 12px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) right 0 bottom 0/12px 1px no-repeat,
    linear-gradient(var(--gold-lt),var(--gold-lt)) right 0 bottom 0/1px 12px no-repeat; }
/* 右上角牡丹花纹装饰 */
/* 原先这里有 ::before/::after 两块 peony.png 牡丹贴图。
   该素材是「JPEG 内容 + .png 扩展名」，没有 alpha 通道 —— 浅色底上勉强融合，
   深色底上整块米色直接糊在横幅上。牡丹改由横幅种子 SVG 自己绘制（分层正确）。 */
.swiper-track { display:flex; transition:transform var(--dur) var(--ease); }
.swiper-track a { flex-shrink:0; width:100%; }
/* 按素材比例完整显示：原先固定 143px 高 + object-fit:cover，在手机 375 以外的任何宽度
   都会纵向裁切（如 824 的窄桌面窗口 → 408px 宽 = 5.7:1，裁掉一半）。改为等比，绝不裁。 */
.swiper-track img { display:block; width:100%; height:auto; }
.swiper-dots { position:absolute; bottom:6px; right:10px; display:flex; gap:0; }
.swiper-dots i { width:5px; height:5px; border-radius:2px; background:rgba(201,162,39,.5);
  transition:var(--dur); box-sizing:content-box; padding:9px 6px; margin:-9px -6px;
  background-clip:content-box; cursor:pointer; }
/* 这里必须用 background-color 长写：用 background 简写会把基类的
   `background-clip:content-box` 重置为 border-box，实心金就铺满整个 padding 盒，
   在横幅右下角变成一块 28×23 的金色方块（实测过）。 */
.swiper-dots i.on { width:16px; background-color:var(--gold); }

/* 轮播手动切换：圆点只有 5×5，移动端几乎点不中，补一对箭头（规格对齐 .wl-arr）。
   单张轮播不出箭头（点了也没反应），由 bannersHTML 判断。 */
/* 参考图里横幅上只有一对淡人字（»），没有按钮底盘。
   28px 白圆盘会压在「新人特惠」标题上，故去掉底与描边，只留带投影的白色人字；
   热区用透明 padding 撑到 40px（18 + 11×2），满足触控下限且不改视觉尺寸。 */
.swiper-arr { position:absolute; top:50%; transform:translateY(-50%); width:18px; height:18px;
  box-sizing:content-box; padding:11px; border:0; background:transparent;
  color:rgba(255,255,255,.9); font-size:19px; font-weight:700; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 1px 4px rgba(42,33,27,.5); }

.swiper-arr.prev { left:8px; }

.swiper-arr.next { right:8px; }

/* 旧的 .stats / .stat*（通栏主格 + 三小格发丝网格）整套规则已删除：
   首页统计区改版为 .stats-card + .stats-grid 后，这些类名已不在 DOM 中（实测 querySelector 全部取不到），
   但其中 .stats 仍引着 415KB 的 border.png —— 死规则在加载死素材。
   新样式见下方「礼金总览卡片」。 */

/* ============ 广告位 ============ */
.ad-slot { display:block; position:relative; margin-bottom:12px; border-radius:var(--r-sm);
  overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
/* 默认按素材自身比例完整显示（= 小程序 mode="widthFix" 的语义）。
  曾用「width:100% + height:80px + object-fit:cover」统一处理两档素材，
   结果把 2.5:1 的 750×300 设计稿纵向裁掉 ~73% —— 大标题占满整条、副标题被腰斩
   （用户截图：只剩「账簿管理 · 高效省心」半行）。cover 只留给真正的超宽条。 */
.ad-slot img { display:block; width:100%; height:auto; border-radius:var(--r-sm); }
/* 超宽条档（naturalWidth/naturalHeight ≥ 5，如 1500×160）：高度上限由 home.js 用
   ads.max_height 内联写成 max-height —— 只「封顶」不裁切也不变形（宽度随之等比、不足处居中）。
  必须是 max-height + width:auto：写成「width:100% + height:Npx」时，
   cover 会裁切、无 cover 会压扁（824 窄窗口下实测裁掉 46%）。 */
.ad-slot.ad-wide img { width:auto; max-width:100%; margin-left:auto; margin-right:auto; }
/* 「广告」角标：素材改纸面后不能再靠暗底白字 —— 白字压在极浅底上只有 ~2.6:1。
   改「朱漆底 + 卷轴白字 + 金描边」，既达标又承担「这是推广位」的标识职责。 */
.ad-slot .tag { position:absolute; top:8px; left:8px; background:rgba(168,28,36,.88); color:#F7EFE0;
  border:1px solid rgba(240,220,168,.4);
  font-size:10.5px; padding:2px 6px; border-radius:5px; letter-spacing:.5px; }
/* 广告小提示：与所在页面内容相符的说明（如「账簿相关服务」），置于广告上方 */
.ad-cap { display:block; font-size:11px; color:var(--ink3); margin:0 0 6px 2px; letter-spacing:.2px; }
/*这里**刻意不给广告加 max-width**：素材已是 1500 宽的宽横幅（正文轴最宽 804px，
   缩放比 0.54 → 永不放大），让它与同页卡片**同宽**才是「对齐轴唯一」。
   曾经为防放大压过 720px、为压高度又压到 520px —— 结果广告比同页卡片窄 200px 且居中，
   看着像一块悬空的内嵌物（用户截图）。 */
/* 兜底一档「高比素材」（宽高比 <4，如旧的 750×300 海报型）：它在正文轴宽度下会撑到约
   288px 高，故收窄到 520px。类由 home.js 按 naturalWidth/Height 判定后打在广告锚点容器上。 */
.ad-narrow { max-width:520px; margin-left:auto; margin-right:auto; }

/* ============ 搜索（金边输入框） ============ */
/* 搜索：账本里查名字是「在名册上找一行」，所以做成**下划线式**而非圆角输入框 ——
   圆角框是通用 App 的语言，不是账本的语言。 */
.search { display:flex; align-items:center; gap:9px; background:transparent;
  border:none; border-bottom:1px solid rgba(168,28,36,.24); border-radius:0;
  padding:0 2px; min-height:42px; box-sizing:border-box; box-shadow:none; margin-bottom:10px; }
.search:focus-within { border-bottom-color:var(--red); }
.search svg { width:15px; height:15px; fill:var(--gold-d); flex-shrink:0; margin-top:1px; }
.search input { border:none; outline:none; flex:1; height:100%; min-height:40px; font-size:13px; background:transparent; color:var(--ink); letter-spacing:.02em; }
.search input::placeholder { color:var(--ink3); }

/* ============ 宾客表格 ============ */
.gtable { width:100%; border-collapse:collapse; font-size:12.5px; }
.gtable th { background:var(--surface-2); color:var(--ink2); font-weight:600;
  padding:9px 6px; text-align:left; white-space:nowrap; font-size:11.5px;
  border-bottom:1px solid var(--line); }
.gtable th:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.gtable th:last-child { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.gtable th.sortable { cursor:pointer; user-select:none; }
.gtable th.sortable:hover { color:var(--red-bright); }
.gtable td { padding:10px 6px; border-bottom:1px solid var(--line); color:var(--ink); white-space:nowrap; }
/* 长文本列（地址/备注/账簿名）允许换行，防止表格被撑出视口被裁切（#page overflow-x:hidden） */
.gtable th.wrap, .gtable td.wrap { white-space:normal; word-break:break-all; min-width:48px; }
/* 极端窄屏兜底：表格可横向滚动，绝不允许被静默裁切 */
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tscroll::-webkit-scrollbar { display:none; }
.gtable tr:last-child td { border-bottom:none; }
.gtable .amt { font-weight:700; color:var(--red-bright); letter-spacing:-.2px; }
.gtable .pay-ico { font-size:10.5px; padding:2px 6px; border-radius:5px; margin-left:4px; }
.pay-wechat { background:rgba(31,110,86,.09); color:var(--green); }
.pay-cash { background:rgba(142,82,10,.10); color:var(--orange); }

/* 账簿详情内搜索 */
.ld-search { position:relative; margin-bottom:12px; }
.ld-search input { width:100%; min-height:40px; box-sizing:border-box; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 34px 9px 12px;
  font-size:13px; color:var(--ink); outline:none; }
.ld-search input:focus { border-color:var(--red2); background:var(--paper); }
.ld-search-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:var(--ink3); font-size:14px; cursor:pointer; padding:4px; }

/* ============ 线装册页账簿卡（逐项对齐样张 .book） ============ */
/* 线装册页：账簿卡不做「圆角白卡」，做一本册页 ——
   左侧朱红书脊 34px + 三个装订孔 + 一道金线（书脊由 ledger.js 的 .spine 输出）。
   阴影带方向（右侧 3px 实体投影 = 纸叠厚度）。结构对照样张：
   .book > .spine + .book-body( .book-head(.book-title/.book-amt)
                               + .book-meta(.badge)
                               + .book-tally
                               + .track/.track-cap
                               + .book-acts(.hint + .pill) ) */
.book { position:relative; display:flex; cursor:pointer;
  background:var(--grain), var(--paper); border:1px solid var(--line); border-radius:2px 6px 6px 2px;
  box-shadow:0 4px 14px rgba(42,33,27,.13), 3px 0 0 rgba(42,33,27,.05);
  margin-bottom:13px; overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.book:hover { transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(42,33,27,.2), 3px 0 0 rgba(42,33,27,.05); }
/* 书脊：朱红渐变 + 金线（缝线）+ 三个装订孔 */
.spine { position:relative; flex:0 0 34px;
  background:linear-gradient(90deg, var(--red-d), var(--red) 62%, var(--red-deep));
  box-shadow:inset -1px 0 0 rgba(240,220,168,.42); }
.spine::before { content:""; position:absolute; left:50%; top:14px; bottom:14px;
  width:1px; margin-left:-.5px;
  background:linear-gradient(180deg, transparent, var(--gold-lt) 18%, var(--gold-lt) 82%, transparent);
  opacity:.75; }
.spine i { position:absolute; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%;
  background:#4A070C; box-shadow:inset 0 1px 2px rgba(42,33,27,.7), 0 0 0 1px rgba(240,220,168,.34); }
.spine i:nth-child(1) { top:18px; }
.spine i:nth-child(2) { top:50%; margin-top:-4.5px; }
.spine i:nth-child(3) { bottom:18px; }
/* 册页内容 */
.book-body { flex:1; min-width:0; padding:11px 12px 10px; }
.book-head { display:flex; align-items:flex-start; gap:9px; }
.book-title { flex:1; min-width:0; font-family:"LJ Serif","Songti SC","STSong","SimSun",serif;
  font-weight:900; font-size:var(--t-20); line-height:1.18; letter-spacing:1px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.book-amt { flex:0 0 auto; text-align:right; }
.book-amt b { display:block; font-family:"LJ Serif","Songti SC","STSong",serif; font-weight:900;
  font-size:var(--t-20); color:var(--red-deep); font-variant-numeric:tabular-nums; line-height:1.1; }
.book-amt span { font-size:var(--t-11); letter-spacing:.16em; color:var(--ink3); }
.book-meta { margin-top:7px; font-size:var(--t-11); letter-spacing:.1em; color:var(--ink3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 状态徽章：朱漆实心小签（样张口径，不再是描边淡底）。三态只换底色，形状完全一致。 */
.badge { display:inline-block; margin-right:7px; padding:1px 7px; border-radius:2px;
  font-size:var(--t-11); font-weight:400; letter-spacing:.14em;
  color:#fff; background:var(--red); vertical-align:1px; }
.badge.active { background:var(--red); }
.badge.sealed { background:var(--ink3); }
.badge.overdue { background:var(--red-d); animation:blink 1.4s infinite; }
@keyframes blink { 50% { opacity:.5; } }
/* 四列账目：只用竖线切分，不给卡；标签在上、数值在下（样张 .book-tally）。 */
/* 列宽按内容分配（小程序 app.wxss 同比例）：金额列最宽 —— 四栏等宽时
   可用仅 67px，而 "¥1,001,950"（7 位金额）实测需 72px → 被 ellipsis 截成
   "¥1,001,…"。宾客只是计数（≤3 位）、分类名最长 2 字（ledger_categories），
   把宽度让给金额列即可根治，不必缩字号。 */
.book-tally { display:grid; grid-template-columns:.68fr 1.22fr 1.22fr .88fr; margin-top:10px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.book-tally div { padding:7px 2px 6px; text-align:center; position:relative; min-width:0; }
.book-tally div + div::before { content:""; position:absolute; left:0; top:26%; bottom:26%;
  width:1px; background:var(--line); }
.book-tally span { display:block; font-size:var(--t-11); letter-spacing:.1em; color:var(--ink3); }
.book-tally b { display:block; margin-top:3px; font-size:var(--t-13); font-weight:800;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.book-tally b.cash { color:var(--orange); }
.book-tally b.wx { color:var(--green); }
.book-tally b.cat { color:var(--ink2); font-weight:700; }
/* 封账进度：内凹轨道 + 朱红填充 + 金珠（金珠挂填充条右端，随 width 一起走） */
.track { margin-top:9px; height:6px; border-radius:3px; background:var(--surface-2);
  box-shadow:inset 0 1px 2px rgba(42,33,27,.28); overflow:visible; position:relative; }
.track i { display:block; height:100%; border-radius:3px; position:relative;
  background:linear-gradient(90deg,var(--seal),var(--red2));
  box-shadow:0 0 0 1px rgba(140,20,24,.35); transition:width var(--dur) var(--ease); }
.track i::after { content:""; position:absolute; right:-5.5px; top:50%;
  width:11px; height:11px; margin-top:-5.5px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFF9EC, var(--gold) 62%, var(--gold-d));
  box-shadow:0 1px 3px rgba(42,33,27,.5); }
.track-cap { margin-top:6px; display:flex; justify-content:space-between;
  font-size:var(--t-11); letter-spacing:.1em; color:var(--ink3); }
.track-cap b { color:var(--seal); font-weight:700; }
/* 动作行：左侧提示语（.hint 弹性占位），主操作实心朱漆钮、其余描边 —— 主次分明 */
.book-acts { display:flex; align-items:center; gap:7px; row-gap:7px;
  flex-wrap:wrap; margin-top:10px; }
.book-acts .hint { font-size:var(--t-11); color:var(--ink3); letter-spacing:.1em;
  margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 13px; border-radius:20px;
  font-size:var(--t-11); letter-spacing:.1em;
  border:1px solid var(--rule-red); color:var(--red-deep); background:transparent; cursor:pointer;
  transition:background 160ms ease-out, color 160ms ease-out; }
.pill:active { background:rgba(168,28,36,.07); }
.pill.solid { border-color:transparent; color:#fff; font-weight:700;
  background:linear-gradient(180deg,var(--red2),var(--red) 55%,var(--red-deep));
  box-shadow:0 3px 10px rgba(140,20,24,.4); }
/* 封账后不可改的说明（详情页） */
.book-note { padding:0 12px 11px; font-size:10.5px; color:var(--ink3); text-align:center; }

/* --- 金边发光动画（2026-09-16）：只动 box-shadow/transform/background-position，
   不动 ui-assert 依赖的 color/borderColor/backgroundColor，避免断言随帧漂移 --- */
/* 金晕呼吸 · 底部金钮 */
@keyframes lj-glow-btn {
  0%, 100% { box-shadow:0 6px 18px rgba(42,33,27,.5), 0 8px 28px rgba(201,162,39,.40); }
  50%      { box-shadow:0 6px 18px rgba(42,33,27,.5), 0 10px 40px rgba(201,162,39,.62); }
}
/* 减少动态偏好：停掉发光类装饰动画（保留 fadein/slideup 等一次性入场） */
@media (prefers-reduced-motion: reduce) {
  .stats-card, .add-btn, .track i { animation:none; }
}

/* 首页「最近账簿」里的卡中卡：去掉阴影，避免双层投影 */
.home-ledger-grid .book { box-shadow:none; }

/* ============ 额度条 ============ */
.quota-card { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold-d);
  border-radius:var(--r-lg); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); }
.quota-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; }
.quota-head .t { font-size:13.5px; font-weight:700; color:var(--ink); }
.quota-head .v { font-size:11.5px; color:var(--ink3); }
.quota-head .v b { font-size:18px; color:var(--red-bright); font-weight:800; letter-spacing:-.4px; margin:0 1px; }
/* 额度条：此前一根轴上挤 5 种颜色（灰/红/金/紫/绿），与「降色块、收敛重点」冲突。
   改为单一主色进度 + 下方图例（图例仍用各段颜色做标识，颜色信息不丢）。 */
.quota-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; background:rgba(42,33,27,.10); }
.quota-bar i { height:100%; background:var(--red); opacity:.9; }
.quota-bar i + i { box-shadow:inset 1px 0 0 rgba(201,162,39,.45); }
.q-base { background:var(--red); }
.q-bonus { background:var(--gold-d); }
.q-vip { background:var(--purple); }
.q-share { background:var(--green); }
.quota-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:11px;
  font-size:10.5px; color:var(--ink3); }
.quota-legend i { display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:5px; }

/* ============ 表单 ============ */
.seg { display:grid; grid-template-columns:repeat(4,1fr); background:var(--card);
  padding:4px; border-radius:var(--r-md); border:1px solid var(--line);
  box-shadow:var(--shadow); margin-bottom:12px; gap:3px; }
.seg a { display:inline-flex; align-items:center; justify-content:center; min-height:40px;
  font-size:12.5px; padding:9px 0; border-radius:11px; box-sizing:border-box;
  color:var(--ink2); font-weight:600; }
.seg a.on { background:var(--grad); color:#fff; box-shadow:0 3px 10px rgba(168,28,36,.26); }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--ink2); margin-bottom:7px;
  font-weight:600; letter-spacing:.5px; }
.field label em { color:var(--red-bright); font-style:normal; margin-left:2px; }
.input { width:100%; min-height:40px; box-sizing:border-box;
  border:1px solid var(--gold-line); background:var(--surface-2);
  border-radius:var(--r-md); padding:12px 14px; font-size:14px; color:var(--ink);
  outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
  font-family:inherit; }
.input:focus { border-color:rgba(168,28,36,.5); background:var(--paper);
  box-shadow:0 0 0 3px rgba(192,57,43,.14); }
.input::placeholder { color:var(--ink3); }
textarea.input { resize:none; min-height:72px; line-height:1.6; }
select.input { appearance:none; }
.pay-pick { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pay-pick a { border:1px solid var(--line-2); border-radius:var(--r-md); padding:11px;
  text-align:center; font-size:13px; font-weight:600; color:var(--ink2); background:var(--surface-2); }
.pay-pick a.on { border-color:rgba(31,110,86,.45); background:rgba(31,110,86,.07); color:var(--green); }
.pay-pick a.on.cash { border-color:rgba(142,82,10,.45); background:rgba(142,82,10,.08); color:var(--orange); }

/* 按钮（新中式 · 烫金质感 + 朱砂红） */
.btn { display:block; width:100%; border:none; border-radius:var(--r-md); padding:13px;
  font-size:14.5px; font-weight:700; letter-spacing:1px; color:#fff; background:var(--grad);
  cursor:pointer; box-shadow:var(--shadow-red), inset 0 1px 1px rgba(255,255,255,.15);
  transition:transform .16s, opacity .16s;
  text-align:center; font-family:inherit; }
.btn:active { transform:scale(.985); opacity:.93; }
.btn.primary { background:var(--grad); color:#fff; }
.btn.gold { background:var(--grad-gold); color:#6B4A10;
  box-shadow:var(--shadow-gold), inset 0 1px 1px rgba(255,255,255,.3); }
.btn.plain { background:var(--card); color:var(--red-bright);
  border:1px solid var(--gold-line); box-shadow:none; }
.btn.ghost { background:var(--surface-2); color:var(--ink2);
  border:1px solid var(--line-2); box-shadow:none; }
/* sm 按钮此前 30~32px 高，低于尺规 ≥40px。用 min-height + flex 居中补齐，
   不靠加大 padding（那会让文字离边太远、按钮显得松散）。 */
.btn.sm { padding:8px 15px; font-size:12px; border-radius:var(--r-sm); width:auto;
  display:inline-flex; align-items:center; justify-content:center; min-height:40px;
  box-sizing:border-box; letter-spacing:.5px; }

/* 动态行（批量添加） */
.batch-row { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px; margin-bottom:10px; position:relative; }

/* 扫描复核区的两个动作：取消（次要，定宽） + 保存（主要，占满余下）。
   取消是必需的出口 —— 整页拍糊或方向不对时，此前只有「保存」一条路可走，
   用户只能靠刷新页面退出。 */
.scan-actions { display:flex; gap:10px; margin-top:12px; }
.scan-actions .btn { flex:1; margin:0; }
.scan-actions .btn.ghost { flex:0 0 34%; }
.batch-row .del { position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%;
  background:var(--red); color:#fff; font-size:12px; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow); }
.br-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.br-grid .input { padding:9px 12px; font-size:13px; background:var(--paper); }
.br-grid .b-remark { grid-column:1/3; }
.br-grid .s-remark { grid-column:1/3; }
.batch-summary { display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap;
  background:var(--info-bg); border:1px solid rgba(201,162,39,.26); border-left:3px solid var(--gold-d);
  border-radius:var(--r-md); padding:11px 14px; margin-bottom:12px; font-size:12.5px; color:var(--ink-brown); }
.batch-summary b { color:var(--red-bright); font-size:15px; font-weight:800; letter-spacing:-.3px; }
.batch-summary .cap { margin-left:auto; font-size:10.5px; color:var(--ink3); }

@media (min-width: 768px) {
  .batch-row .br-grid { grid-template-columns:1.3fr 1fr 1.7fr .8fr 1.5fr; }
  .batch-row .br-grid .b-remark { grid-column:auto; }
  #scan-rows .br-grid { grid-template-columns:1.3fr 1fr 1.7fr .8fr 1.5fr; }
  #scan-rows .br-grid .s-remark { grid-column:auto; }
}

/* 账簿选择 chips：胶囊标签 */
.chips { display:flex; gap:8px; overflow-x:auto; padding:2px; margin-bottom:12px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex-shrink:0; display:inline-flex; align-items:center; min-height:40px; box-sizing:border-box;
  background:var(--card); border:1px solid var(--gold-line); color:var(--ink2);
  padding:7px 15px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap;
  letter-spacing:.3px; }
.chip.on { background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:var(--shadow-red); }

/* 芯片内图标（宴席分类等）：只设尺寸与间距 —— 图标色跟随 .chip 的 currentColor，
   选中态自动转白。绝不能在这里写 font-family / font-weight，那会盖掉图标字体
   变成一串字母（图标名当文字渲染）。 */
.chip .fa-solid, .chip .fa-brands { font-size:11.5px; margin-right:5px; }

/* 提醒弹窗：选中账簿宾客后的只读联动信息行（礼金 / 地址） */
.rm-guest-info { display:none; margin-top:8px; padding:9px 12px; border-radius:var(--r-sm);
  background:var(--info-bg); border:1px solid var(--line); font-size:12px; color:var(--ink2); line-height:1.5; }
.rm-guest-info.on { display:block; }
.rm-guest-info b { color:var(--red); font-weight:700; }

/* ============ 提醒列表 ============ */
.remind-item { display:flex; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:15px; box-shadow:var(--shadow);
  margin-bottom:12px; align-items:flex-start; }
.ri-ico { width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:17px; flex-shrink:0;  font-family:'LJ Kai','KaiTi',serif;}
.ri-ico.pending { background:rgba(142,82,10,.09); }
.ri-ico.done { background:rgba(31,110,86,.09); }
.ri-body { flex:1; min-width:0; }
.ri-name { font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
.ri-name .st { font-size:10.5px; padding:2px 7px; border-radius:5px; font-weight:600; }
.st.pending { background:rgba(142,82,10,.11); color:var(--orange); }
.st.done { background:rgba(31,110,86,.11); color:var(--green); }
.ri-text { font-size:12px; color:var(--ink2); margin-top:5px; line-height:1.6; }
.ri-time { font-size:10.5px; color:var(--ink3); margin-top:5px; }
.ri-ops { display:flex; gap:7px; margin-top:9px; }
.ri-ops a { display:inline-flex; align-items:center; min-height:40px; box-sizing:border-box;
  font-size:11px; padding:5px 12px; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink2); font-weight:600; }
.ri-ops a.red { background:rgba(168,28,36,.06); border-color:rgba(168,28,36,.2); color:var(--red-bright); }

/* ============ 我的 ============ */
.mine-head { display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.avatar { width:58px; height:58px; border-radius:50%; border:2px solid rgba(201,162,39,.45);
  background:var(--grad-gold); color:#7A0F16; font-size:22px; font-weight:800;
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.mine-name { font-size:17px; font-weight:700; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px; min-width:0; }
.mine-name .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.vip-tag { flex:0 0 auto; background:var(--grad-gold); color:#6B4A10; font-size:10.5px;
  font-weight:800; padding:3px 8px; border-radius:6px; letter-spacing:.4px; white-space:nowrap; }
.vip-tag.gray { background:rgba(42,33,27,.06); color:var(--ink2); }
.mine-phone { font-size:12px; opacity:.82; margin-top:5px; letter-spacing:.6px; }
.menu { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:12px; }
.menu a { display:flex; align-items:center; gap:12px; padding:14.5px 16px; font-size:13.5px;
  border-bottom:1px solid var(--line); position:relative; }
.menu a:last-child { border-bottom:none; }
/* 菜单行图标芯片：Font Awesome 6（自托管子集）。
   原为彩色 emoji + 7 种硬编码彩虹底 → 曾改单字汉印 → 现统一为图标。
   注意： 这里**不要**写 font-family / font-weight：会盖掉 .fa-solid 的字体声明。 */
.menu .mi { width:30px; height:30px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
  border:1px solid rgba(168,28,36,.30); background:rgba(168,28,36,.045);
  color:var(--red-bright); font-size:13px; letter-spacing:0; }
.menu .arr { margin-left:auto; color:#D3C8BC; font-size:16px; }
.menu .sub { margin-left:auto; margin-right:6px; font-size:11.5px; color:var(--ink3); }

/* 辅助账号只读提示 */
.assistant-tip { background:var(--info-bg); border:1px solid rgba(201,162,39,.26); border-left:3px solid var(--gold-d);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; }
.assistant-tip .t { font-size:14px; font-weight:700; color:var(--ink-brown); }
.assistant-tip .d { font-size:12.5px; color:var(--ink3); margin-top:6px; line-height:1.65; }

/* 首页宾客卡片流（金边卡片） */
.gcard-list { width:100%; }
/* 名册行：账本里查一个人是「在名册上找一行」，不是翻一张卡。
   去掉卡片，只留账格横线分隔，信息密度更高也更贴主题。 */
.gcard { display:flex; align-items:center; background:none; border-radius:0;
  padding:11px 2px; margin-bottom:0; border:none;
  border-bottom:1px solid var(--line);
  box-shadow:none; cursor:pointer; transition:background .14s; }
/* 宾客列表斑马纹（隔行底色）：偶数行用次级面，与奇数行交错便于逐行阅读。
   置于 :hover/:active 之前 —— 同权重靠源码顺序，保证悬停/按下反馈仍生效。 */
.gcard:nth-child(even) { background: var(--surface-2); }
.gcard:hover { background:linear-gradient(90deg, rgba(201,162,39,.10), transparent 70%); }
.gcard:active { background:var(--line); }
.gcard-ava { width:42px; height:42px; border-radius:50%; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff;
  background:var(--grad);
  border:1px solid rgba(240,220,168,.35);
  box-shadow:0 3px 10px rgba(168,28,36,.35), inset 0 1px 2px rgba(255,255,255,.28); }
/* 按支付方式着色：此前由 home.js 内联六色粉彩，底极浅而字为 #fff，
   实测对比度约 1.05:1 —— 姓名首字几乎看不见。改为语义渐变（与 .pay-ico/.ldg-card 同源）。 */
.gcard-ava.wechat { background:linear-gradient(135deg, var(--green-lt), var(--green)); }
.gcard-main { flex:1; min-width:0; margin-left:12px; display:flex; flex-direction:column; }
.gcard-row1 { display:flex; align-items:baseline; justify-content:space-between; }
.gcard-name { font-size:14.5px; font-weight:600; color:var(--ink); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.gcard-amt { font-size:16px; font-weight:800; color:var(--red-bright); flex:0 0 auto;
  margin-left:12px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.gcard-row2 { display:flex; align-items:center; margin-top:5px; font-size:12px; color:var(--ink2); }
.gcard-addr, .gcard-ledger { font-style:normal; max-width:34%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.gcard-ledger { margin-left:10px; padding-left:10px; border-left:1px solid var(--line); max-width:38%; }
.gcard-arrow { color:var(--ink3); opacity:.55; font-size:17px; margin-left:6px; flex:0 0 auto; }
.gcard-more { display:flex; align-items:center; justify-content:center; gap:6px;
  padding:14px 0 10px; margin-top:2px; min-height:40px; box-sizing:border-box;
  font-size:12.5px; color:var(--red-bright); font-weight:600; cursor:pointer; }
.gcard-more:hover { opacity:.72; }

/* 辅助账号管理 */
.sub-desc { font-size:13px; color:var(--ink2); line-height:1.7; }
.sub-desc .em { color:var(--red-bright); font-style:normal; font-weight:700; }
.sub-stat { display:flex; justify-content:space-between; margin-top:12px; font-size:13px; color:var(--ink2); }
.sub-stat b { color:var(--red-bright); }
/* 辅助账号卡：金边头像 */
.sub-item { display:flex; align-items:center; gap:12px; position:relative; overflow:hidden; }
.sub-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold-d); }
.sub-avatar { width:42px; height:42px; border-radius:50%; background:rgba(192,57,43,.14); color:var(--red-bright);
  border:2px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; flex:0 0 42px; }
.sub-info { flex:1; min-width:0; }
.sub-name { font-size:14.5px; font-weight:700; }
.sub-phone { font-size:12.5px; color:var(--ink3); margin-top:2px; }
.sub-meta { margin-top:5px; font-size:11.5px; color:var(--ink3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* 状态徽标与登录时间都不可被压缩（此前 flex 空间不足时「正常」被压成竖排两字） */
.sub-meta .tag { padding:1px 8px; border-radius:999px; font-size:11px; flex-shrink:0; white-space:nowrap; }
.sub-meta > span:not(.tag) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub-meta .tag.on { background:rgba(31,110,86,.1); color:var(--green); }
.sub-meta .tag.off { background:var(--surface-2); border:1px solid var(--line); color:var(--ink3); }
.sub-del { flex:0 0 auto; display:inline-flex; align-items:center; min-height:40px; box-sizing:border-box;
  padding:5px 14px; border:1px solid rgba(168,28,36,.3); color:var(--red-bright);
  border-radius:999px; font-size:12.5px; }

/* VIP 横幅（朱砂红底 + 烫金牡丹花纹） */
.vip-banner { background:linear-gradient(140deg,var(--red-deep),#A81C24 58%,#C0392B);
  border-radius:var(--r-lg); border:2px solid rgba(201,162,39,.4);
  padding:20px; margin-bottom:12px; color:var(--gold-lt); position:relative;
  overflow:hidden; box-shadow:var(--shadow-red), inset 0 1px 2px rgba(255,255,255,.1); }
/* 装饰性牡丹花纹暗纹 */
.vip-banner::before { content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 90% 20%, rgba(201,162,39,.2) 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(201,162,39,.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(201,162,39,.05) 0%, transparent 60%);
}
.vip-banner::after { content:"VIP"; position:absolute; right:12px; bottom:-16px; font-size:64px;
  font-weight:900; color:rgba(201,162,39,.1); font-family:"Arial Black"; letter-spacing:-2px; }
.vip-banner .t { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px;
  position:relative; z-index:1; }
.vip-banner .d { font-size:11px; margin-top:6px; opacity:.85; letter-spacing:.5px;
  position:relative; z-index:1; }

/* 分享卡：宣纸质感 + 金边装饰 */
.share-card { background:var(--paper); border:1px solid var(--gold-line); border-radius:var(--r-lg);
  padding:22px 18px; color:var(--ink); text-align:center; margin-bottom:12px;
  position:relative; overflow:hidden; box-shadow:var(--shadow); }
/* 顶部装饰线 */
.share-card::before { content:""; position:absolute; top:0; left:20px; right:20px; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
  opacity:.7; }
.share-code { font-size:28px; font-weight:800; letter-spacing:7px; margin:14px 0 12px;
  color:var(--red-bright); position:relative;
  text-shadow:0 1px 2px rgba(201,162,39,.2); }
.share-rule { display:flex; justify-content:center; gap:8px; margin-top:14px; position:relative; }
.share-rule span { background:rgba(116,90,18,.08); border:1px solid rgba(116,90,18,.2);
  color:var(--ink-brown); border-radius:8px; padding:5px 11px; font-size:10.5px; }

/* ============ 登录 / 注册（新中式 · 祥云暗纹 + 金边） ============ */
.auth-page { min-height:100dvh; display:flex; flex-direction:column; background:var(--grad-header);
  position:relative; overflow:hidden; }
/* 祥云暗纹背景 */
.auth-page::before { content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 15%, rgba(201,162,39,.15) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(201,162,39,.1) 0%, transparent 40%);
}
.auth-page::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.6),transparent); }
.auth-hero { text-align:center; padding:58px 30px 32px; color:#fff; position:relative; z-index:2; }
.auth-logo { width:82px; height:82px; margin:0 auto 18px; border-radius:24px; background:var(--grad-gold);
  display:flex; align-items:center; justify-content:center; color:#3A1B08; font-size:36px;
  box-shadow:0 16px 40px rgba(42,33,27,.3), inset 0 2px 4px rgba(255,255,255,.3);
  border:2px solid rgba(201,162,39,.3); }
.auth-hero h1 { font-size:28px; font-weight:800; letter-spacing:8px;
  color:var(--gold-lt); text-shadow:0 2px 10px rgba(42,33,27,.35), 0 0 20px rgba(201,162,39,.38); }
.auth-hero p { font-size:12px; opacity:.85; margin-top:9px; letter-spacing:3px; color:var(--gold-lt); }
.auth-card { background:var(--bg); border-radius:var(--r-xl) var(--r-xl) 0 0;
  flex:1; padding:26px 24px 40px; position:relative; z-index:2;
  box-shadow:0 -12px 36px rgba(42,33,27,.15);
  border-top:2px solid var(--gold-line); }
.auth-tabs { display:flex; gap:24px; margin-bottom:22px; }
.auth-tabs a { display:inline-flex; align-items:flex-end; justify-content:center;
  min-height:40px; min-width:40px; box-sizing:border-box;
  font-size:15px; font-weight:700; color:var(--ink3); padding-bottom:8px; position:relative; }
.auth-tabs a.on { color:var(--ink); font-size:17px; }
.auth-tabs a.on::after { content:""; position:absolute; left:18%; right:18%; bottom:0; height:3px;
  border-radius:2px; background:var(--grad); }
.agree { display:flex; align-items:flex-start; gap:7px; font-size:11.5px; color:var(--ink2);
  margin:14px 2px 18px; line-height:1.65; }
/* 勾选框本体只有 13px，且 checkbox 是替换元素 —— padding/margin 撑不开它的可点区。
   故热区靠外层 <label>（整行文字连同勾选框都可点），并把 label 撑到 ≥44px 高。 */
.agree label { display:flex; align-items:flex-start; gap:7px; cursor:pointer;
  min-height:44px; padding:2px 0; }
.agree input { width:13px; height:13px; flex:0 0 auto; margin:2px 0 0;
  accent-color:var(--red-bright); cursor:pointer; }
.agree a { color:var(--red-bright); font-weight:600; }

/* 注册安全：短信 / 图形验证码行 */
.row { display:flex; }
.row-inline { display:flex; gap:8px; align-items:stretch; }
.row-inline .input { flex:1; min-width:0; }
.btn-sms { flex:0 0 auto; border:1px solid rgba(168,28,36,.28); background:var(--card); color:var(--red-bright);
  border-radius:var(--r-md); padding:0 13px; font-size:12.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; letter-spacing:.2px; font-family:inherit; transition:opacity .16s; }
.btn-sms:active { opacity:.7; }
.btn-sms:disabled { border-color:var(--line); color:var(--ink3); background:var(--surface-2); cursor:not-allowed; }
.cap-img { flex:0 0 auto; width:104px; height:45px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); cursor:pointer; object-fit:cover; background:var(--surface-2); }
.cap-tip { font-size:11px; color:var(--ink3); margin-top:6px; line-height:1.55; }
.cap { font-size:11px; color:var(--ink3); }

/* 消息中心（金边卡片） */
.msg-item { display:flex; gap:12px; background:var(--card);
  background-image:linear-gradient(180deg, rgba(240,220,168,.05), rgba(240,220,168,0) 44%, rgba(42,33,27,.14));
  border:1px solid var(--gold-line); border-radius:var(--r-lg); padding:15px; margin-bottom:10px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(240,220,168,.08); }
.msg-item.unread { border-left:3px solid var(--red); }
.msg-ico { width:38px; height:38px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
  border:1px solid rgba(168,28,36,.30); background:rgba(168,28,36,.045);
  color:var(--red-bright); font-size:15px; }
.msg-t { font-size:13.5px; font-weight:700; letter-spacing:.3px; }
.msg-c { font-size:12px; color:var(--ink2); margin-top:5px; line-height:1.6; }
.msg-d { font-size:10.5px; color:var(--ink3); margin-top:6px; letter-spacing:.3px; }

/* 内容页（金边 + 金线标题装饰） */
.doc { background:var(--card); border:1px solid var(--gold-line); border-radius:var(--r-lg);
  padding:22px 18px; box-shadow:var(--shadow); margin-bottom:20px;
  font-size:13.5px; line-height:1.9; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.doc-title { text-align:center; font-size:18px; font-weight:700; margin:14px 0 16px;
  letter-spacing:1px; color:var(--red-d); }
.doc-title::after { content:""; display:block; width:50px; height:3px; border-radius:2px;
  background:var(--grad-gold); margin:11px auto 0; }
.doc img { max-width:100%; border-radius:var(--r-md); margin:10px auto; }
.doc video { width:100%; border-radius:var(--r-md); margin:10px 0; }

/* 常见问题页（新中式 · 分组标题 + 金边卡片） */
.faq-intro { font-size:12px; color:var(--ink2); line-height:1.75; margin:2px 2px 16px; }
.faq-intro a { color:var(--red-bright); font-weight:600; }
.faq-group { margin-bottom:18px; }
.faq-gname { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
  color:var(--red-d); margin:0 2px 10px; letter-spacing:.5px; }
/* 分组名前的红色竖条装饰 */
.faq-gname::before { content:""; width:4px; height:15px; border-radius:2px;
  background:linear-gradient(180deg, var(--red), var(--gold-d)); }
.faq-gn { font-size:10.5px; font-weight:600; color:var(--ink-brown); background:var(--paper);
  border:1px solid var(--gold-line-2); border-radius:9px; padding:0 7px; line-height:16px; }
.faq-item { background:var(--card); border:1px solid var(--gold-line); border-radius:var(--r-md);
  margin-bottom:8px; overflow:hidden; }
.faq-item summary { list-style:none; cursor:pointer; position:relative;
  padding:13px 34px 13px 14px; font-size:13.5px; font-weight:600; color:var(--ink);
  line-height:1.55; min-height:44px; box-sizing:border-box; display:flex; align-items:center; }
.faq-item summary::-webkit-details-marker { display:none; }
/* 展开指示符：加号 → 展开时旋转 45° 变叉（纯 CSS，不引图标字体） */
.faq-item summary::after { content:"+"; position:absolute; right:14px; top:50%;
  transform:translateY(-50%); font-size:16px; font-weight:400; color:var(--ink3);
  transition:transform .18s ease; }
.faq-item[open] summary::after { transform:translateY(-50%) rotate(45deg); color:var(--red-bright); }
.faq-item[open] summary { color:var(--red-bright); }
.faq-item p { margin:0 14px 14px; padding-top:11px; font-size:12.5px; color:var(--ink2);
  line-height:1.75; border-top:1px solid var(--line); }
.faq-foot { font-size:12px; color:var(--ink2); text-align:center; margin-top:22px; line-height:1.8; }
.faq-foot a { color:var(--red-bright); font-weight:600; }

/* 意见反馈页（#/feedback）：类型芯片 + 文本域 + 缩略图槽 + 历史工单 */
.fb-types { display:flex; flex-wrap:wrap; gap:8px; }
.fb-type { display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  color:var(--ink2); background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:10px; padding:7px 12px; line-height:1.4; cursor:pointer;
  min-height:40px; box-sizing:border-box; }
/* .fb-type .i 已删除：类型芯片原本各带一只彩色 emoji（故障/建议/体验/其他），
   标签文字已足够表意，彩色图形只是噪声。 */
/* 选中态：主色描边 + 主色淡底（rgba 而非新色值，与既有 .badge 约定一致） */
.fb-type.on { color:var(--red-bright); border-color:var(--red-bright); background:rgba(168,28,36,.055); }
.fb-count { text-align:right; font-size:11px; color:var(--ink2); margin-top:5px;
  font-variant-numeric:tabular-nums; }
textarea.input { resize:none; line-height:1.7; font-family:inherit; }
.fb-imgs { display:flex; flex-wrap:wrap; gap:9px; }
.fb-thumb { position:relative; width:78px; height:78px; border-radius:var(--r-md);
  overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.fb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fb-thumb .x { position:absolute; right:0; top:0; width:44px; height:44px;
  display:flex; align-items:flex-start; justify-content:flex-end; cursor:pointer; }
/* 视觉仍是 20×20 角标，但外层 <a> 撑到 44×44 触控靶区。
   原因：删除是唯一撤销误传的入口，20px 靶区低于全站最小先例（.modal-head .x 为 36px），
   缩略图仅 78px 又会加剧误触。标记里的 <b> 只负责画角标，不改变外观。 */
.fb-thumb .x b { width:20px; height:20px; line-height:20px; text-align:center; font-size:11px;
  font-weight:400; color:#fff; background:rgba(42,33,27,.62); border-bottom-left-radius:8px; }
.fb-thumb.loading { display:flex; align-items:center; justify-content:center; font-size:18px; }
.fb-add { width:78px; height:78px; border:1px dashed var(--line-2); border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink2); background:var(--surface-2); cursor:pointer; }
.fb-add span { font-size:19px; line-height:1; }
.fb-add em { font-size:10.5px; font-style:normal; }
.fb-tip { font-size:11.5px; color:var(--ink2); line-height:1.75; margin:12px 2px 4px; }
.fb-hist-head { font-size:12.5px; font-weight:700; color:var(--ink2); margin:22px 2px 9px; }
.fb-hist { margin-bottom:9px; }
.fb-hist-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fb-hist-t { font-size:13px; font-weight:700; }
.fb-hist-c { font-size:12.5px; color:var(--ink); line-height:1.7; margin:8px 0 0; white-space:pre-wrap; word-break:break-word; }
.fb-hist-imgs { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.fb-hist-imgs img { width:62px; height:62px; border-radius:9px; object-fit:cover;
  border:1px solid var(--line); cursor:zoom-in; }
.fb-reply { margin-top:10px; padding:10px 12px; font-size:12.5px; line-height:1.75;
  color:var(--ink-brown); background:var(--info-bg); border:1px solid rgba(201,162,39,.26); border-radius:var(--r-md);
  white-space:pre-wrap; word-break:break-word; }
.fb-reply b { display:block; font-size:11.5px; margin-bottom:3px; }
.fb-hist-d { font-size:11px; color:var(--ink2); margin-top:9px; font-variant-numeric:tabular-nums; }
/* 三态徽章：描边式，与既有 .badge 同构（rgba 语义色，不新增硬编码色值） */
.fb-badge { font-size:10.5px; font-weight:700; border-radius:9px; padding:2px 8px;
  line-height:16px; white-space:nowrap; }
.badge-wait { color:var(--orange); background:rgba(142,82,10,.09); border:1px solid rgba(142,82,10,.22); }
.badge-doing { color:var(--purple); background:rgba(122,100,184,.09); border:1px solid rgba(122,100,184,.22); }
.badge-done { color:var(--green); background:rgba(31,110,86,.12); border:1px solid rgba(31,110,86,.24); }

/* 空状态（金色图标） */
.empty { text-align:center; padding:48px 0 34px; color:var(--ink3); }
/* 空状态图标：金边宣纸方章 + 朱漆图标（原为 44px 灰金 emoji） */
.empty .e { width:62px; height:62px; margin:0 auto 14px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gold-line); background:var(--surface-2);
  color:var(--red-bright); font-size:23px; }
.empty p { font-size:12.5px; letter-spacing:.3px; }

/* ============ 底部导航（新中式 · 金线分隔 + 金边凸起按钮） ============ */
/* 封底：底部栏做成书的封底 —— 朱漆条 + 金线压边 + 左右留边浮起，
   中间一枚金印圆钮作为全页唯一的「金」重音。 */
#tabbar { flex-shrink:0; display:flex;
  background:linear-gradient(180deg, var(--red-deep), var(--red-d));
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid rgba(240,220,168,.3); border-bottom:none; border-radius:16px 16px 0 0;
  padding:6px 6px calc(env(safe-area-inset-bottom) + 7px); z-index:40; margin:0 8px;
  box-shadow:0 -6px 22px rgba(42,33,27,.26), inset 0 1px 0 rgba(240,220,168,.45); }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:44px; box-sizing:border-box; position:relative;
  color:rgba(255,240,220,.68); font-size:10.5px; font-weight:600; letter-spacing:.5px; }
.tab svg { width:21px; height:21px; fill:currentColor; transition:fill .18s; }
/* 底栏角标：右上红点 + 数量（提醒未处理数），用于表达「紧急」。
   红取 #CE4A46 —— 色板内最亮的红（白字对比 4.54:1，正踩 AA，再亮就压不住白字）；
   配浅描边 + 红晕 + 呼吸，让它在白底 tabBar 上足够醒目。 */
.tab-badge { position:absolute; top:0; left:50%; transform:translateX(5px);
  min-width:16px; height:16px; padding:0 4px; border-radius:9px; box-sizing:border-box;
  background:#CE4A46; color:#fff; font-size:10px; font-weight:800; line-height:16px;
  font-style:normal; text-align:center; letter-spacing:0; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 1px rgba(122,15,22,.55);
  box-shadow:0 0 0 1.5px rgba(255,253,248,.96), 0 1px 4px rgba(122,15,22,.45), 0 0 9px rgba(206,74,70,.6);
  animation:tab-badge-pulse 2.6s ease-in-out infinite; }
@keyframes tab-badge-pulse{
  0%,100%{ box-shadow:0 0 0 1.5px rgba(255,253,248,.96), 0 1px 4px rgba(122,15,22,.45), 0 0 6px rgba(206,74,70,.42); }
  50%{ box-shadow:0 0 0 1.5px rgba(255,253,248,.96), 0 2px 6px rgba(122,15,22,.5), 0 0 15px rgba(226,84,92,.85); }
}
@media (prefers-reduced-motion:reduce){ .tab-badge{ animation:none; } }
.tab.on { color:var(--gold-lt); }
.tab-add { position:relative; }
/* 金印圆钮：金只在这里做「大面积」，因为它是全页唯一的行动号召 */
.add-btn { width:52px; height:52px; border-radius:50%; background:var(--grad-gold);
  display:flex; align-items:center; justify-content:center; margin-top:-20px;
  box-shadow:0 4px 14px rgba(42,33,27,.40), 0 6px 22px rgba(201,162,39,.42);
  animation:lj-glow-btn 3s ease-in-out infinite; border:none;
  outline:1px solid rgba(240,220,168,.34); color:#3A2410; font-weight:800; font-size:13px; letter-spacing:1px; }
.add-btn svg { width:22px; height:22px; fill:#3A1B08; }

/* ============ 弹窗 ============ */
.modal-mask { position:fixed; inset:0; background:rgba(42,33,27,.48);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:100; display:flex; align-items:flex-end; justify-content:center; animation:fadein .2s; }
@keyframes fadein { from { opacity:0; } }
.modal-sheet { width:100%; max-width:440px; background:var(--card);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:20px 18px calc(env(safe-area-inset-bottom) + 20px); max-height:86dvh; overflow-y:auto;
  animation:slideup .28s cubic-bezier(.3,1,.4,1); }
@keyframes slideup { from { transform:translateY(60%); } }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3 { font-size:16px; font-weight:700; letter-spacing:.2px; }
.modal-head .x { width:36px; height:36px; border-radius:11px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink2);
  display:flex; align-items:center; justify-content:center; font-size:13px; }
.modal-body { padding:0 2px; }
/* 弹窗底部按钮组（此前未定义，补充） */
.modal-ops { display:grid; grid-template-columns:1fr 1.5fr; gap:10px; margin-top:18px; }
.modal-ops .btn { width:100%; }

/* toast */
.toast { position:fixed; top:18%; left:50%; transform:translateX(-50%);
  background:rgba(36,29,24,.9); color:#fff; font-size:13.5px; padding:11px 22px;
  border-radius:var(--r-md); z-index:200; backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,39,.3);
  animation:fadein .2s; max-width:80%; text-align:center; line-height:1.5; }
.toast.err { background:rgba(138,20,26,.94); }

/* 弹窗广告 */
.popup-ad img { width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.popup-ad .pc { background:var(--card); border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:16px; text-align:center; }
.popup-ad .pc h4 { font-size:16px; font-weight:700; margin-bottom:6px; }
.popup-ad .pc p { font-size:12.5px; color:var(--ink2); line-height:1.6; }
.popup-ad .btn { margin-top:12px; }

/* 相机位（未扫描）：宣纸取景框 —— 金棕线稿相机 + 取景四角 + 一道极淡暖金扫掠线。
   2026-09-17 改版：原「深色块 #241C16 + 霓虹绿扫描线 #5EFFB0」违和 —— 大面积深底压在宣纸页上像砸了个洞，
   #5EFFB0 也不在宣纸朱漆色系里。金棕 #745A12 在宣纸底 5.52:1，用线稿保住「取景框」语义又不砸黑。 */
.scan-box { position:relative; height:200px; margin:0 0 16px; border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--surface-2) 100%);
  border:1px solid var(--line-2); box-shadow:inset 0 1px 0 rgba(255,253,246,.7);
  overflow:hidden; cursor:pointer; }
.scan-box::after { content:""; position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,rgba(201,162,39,0),rgba(201,162,39,.55) 18%,#F0DCA8 50%,rgba(201,162,39,.55) 82%,rgba(201,162,39,0));
  animation:scanIdle 3.4s ease-in-out infinite; }
@keyframes scanIdle { 0%,100% { top:14px; opacity:.22 } 50% { top:calc(100% - 16px); opacity:.82 } }
.scan-corner { position:absolute; width:20px; height:20px; border:0 solid var(--gold-d); }
.scan-corner.tl { left:12px; top:12px; border-left-width:2px; border-top-width:2px; border-top-left-radius:7px; }
.scan-corner.tr { right:12px; top:12px; border-right-width:2px; border-top-width:2px; border-top-right-radius:7px; }
.scan-corner.bl { left:12px; bottom:12px; border-left-width:2px; border-bottom-width:2px; border-bottom-left-radius:7px; }
.scan-corner.br { right:12px; bottom:12px; border-right-width:2px; border-bottom-width:2px; border-bottom-right-radius:7px; }
/* 相机线稿：纯 CSS 画（不吃 emoji 字体，双端同构） */
.scan-cam { position:relative; width:56px; height:41px; border:2px solid var(--gold-d); border-radius:10px; }
.scan-cam::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:17px; height:17px; border:2px solid var(--gold-d); border-radius:50%; }
.scan-cam::after { content:""; position:absolute; left:50%; top:-10px; transform:translateX(-50%);
  width:20px; height:8px; border:2px solid var(--gold-d); border-bottom:0; border-radius:7px 7px 0 0; }
.scan-hint { font-size:12.5px; color:var(--ink3); letter-spacing:.3px; }

/* 扫描媒体槽（扫描中 / 扫完）：照片摊在宣纸衬上 —— 衬纸取代黑边。
   2026-09-17 改版：去掉 24px 密网格（浅色礼簿上像糊了一层脏网）与整图压暗（核对时看不清字），
   过程感交给「26% 高的暖金光带 + 前沿金线」同频下移。 */
.scan-photo { position:relative; --scan-pad:9px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--gold-line); padding:var(--scan-pad); margin-bottom:16px;
  box-shadow:0 4px 14px rgba(42,33,27,.08);
  display:flex; align-items:center; justify-content:center; }
.scan-photo img { display:block; max-width:100%; max-height:332px; object-fit:contain; border-radius:6px; }
.scan-photo .scan-mask { position:absolute; inset:var(--scan-pad); pointer-events:none;
  background:rgba(42,33,27,.10); }
.scan-photo .scan-band { position:absolute; left:0; right:0; height:26%; pointer-events:none;
  background:linear-gradient(180deg,rgba(201,162,39,0),rgba(240,220,168,.26) 42%,rgba(201,162,39,.42) 78%,rgba(201,162,39,0));
  animation:scanBand 2.4s ease-in-out infinite; }
/* 金线 + 暖墨投影：浅色礼簿靠投影读得出，深色底靠金光晕读得出（只用浅金在奶油纸上几乎不可见） */
.scan-photo .scan-beam { position:absolute; left:0; right:0; height:3px; pointer-events:none;
  background:linear-gradient(90deg,rgba(201,162,39,0),#C9A227 13%,#F0DCA8 50%,#C9A227 87%,rgba(201,162,39,0));
  box-shadow:0 1px 3px rgba(42,33,27,.42), 0 0 16px 4px rgba(201,162,39,.5);
  animation:scanBeam 2.4s ease-in-out infinite; }
@keyframes scanBand { 0% { top:-26% } 50% { top:100% } 100% { top:-26% } }
@keyframes scanBeam { 0% { top:0 } 50% { top:calc(100% - 3px) } 100% { top:0 } }
/* 状态徽标：深色磨砂（照片明暗都能读），金 / 绿只做点睛 */
.scan-photo .scan-badge { position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.4px; white-space:nowrap;
  backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(42,33,27,.26); }
.scan-photo .scan-badge--run { background:rgba(28,22,17,.74); color:var(--gold-lt); border:1px solid rgba(201,162,39,.5); }
.scan-photo .scan-spin { width:11px; height:11px; border-radius:50%;
  border:2px solid rgba(240,220,168,.32); border-top-color:#F0DCA8; animation:scanSpin .8s linear infinite; }
.scan-photo .scan-badge--done { background:rgba(21,60,48,.86); color:#FFF9EC; border:1px solid rgba(63,161,132,.45); }
@keyframes scanSpin { to { transform:rotate(360deg); } }
/* 放大核对：纸 chip —— emoji 自带深色，压在深 chip 上根本读不出，故用纸底衬它 */
.scan-photo .scan-zoom { position:absolute; right:18px; top:18px; width:40px; height:40px; border-radius:50%;
  background:rgba(247,239,224,.94); color:var(--gold-d); border:1px solid var(--gold-line-2);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:0 3px 10px rgba(42,33,27,.22); cursor:pointer; }
.scan-zoom:active { transform:scale(.94); }

/* 放大灯箱（点 核对整图） */
.scan-lightbox { position:fixed; inset:0; z-index:60; background:rgba(28,22,17,.94);
  display:flex; align-items:center; justify-content:center; padding:16px; }
.scan-lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-md);
  box-shadow:0 10px 40px rgba(0,0,0,.4); }
.scan-lightbox-close { position:absolute; right:16px; top:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(247,239,224,.14); color:#F7EFE0; border:1px solid rgba(240,220,168,.4);
  font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.preview-table { width:100%; border-collapse:collapse; font-size:12px; background:var(--card);
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); }
.preview-table th { background:var(--surface-2); color:var(--ink2); padding:8px 6px;
  text-align:left; font-size:11.5px; font-weight:600; }
.preview-table td { padding:8px 6px; border-top:1px solid var(--line); }
.s-name, .s-amount, .s-addr, .s-pay, .s-remark { font-size:12px; }

/* 子页页头（新中式 · 金色返回按钮） */
/* 子页页头：宣纸半透明。旧版是深色 rgba(42,33,27,.92)，翻浅底后标题（var(--ink) 墨色）
   压在同色深底上不可读 —— rgba 字面量 token-audit 扫不到，是本次漏网的根因。 */
.subnav { display:flex; align-items:center; gap:10px; padding:13px 16px; position:sticky; top:0;
  background:rgba(244,235,218,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  z-index:30; border-bottom:1px solid var(--line-2); }
.subnav .back { width:40px; height:40px; border-radius:12px; background:var(--paper);
  border:1px solid var(--gold-line); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--gold-d); }
.subnav h2 { font-size:17px; font-weight:700; letter-spacing:1px; color:var(--ink); }

/* ============ 桌面大屏自适应（≥960px） ============ */
@media (min-width: 960px) {
  #phone { max-width:100%; box-shadow:none; background:transparent; }
  /* 正文收敛为 860px（原 1120px：卡片被拉到 1000px+，一行字过长、留白散）。
    注意：「广告文字被放大成巨大标题」的真因**不是**这个宽度值，而是 `.ad-*` 的
     「固定高度 + object-fit:cover」裁切（已修，见上方「广告位」小节）。别再拿宽度当替罪羊。 */
  .hero { padding-left:max(28px, calc((100% - 860px)/2));
    padding-right:max(28px, calc((100% - 860px)/2));
    border-radius:0 0 16px 16px; }
  .body-pad { max-width:860px; margin:0 auto; padding-left:28px; padding-right:28px; }
  /* 返回条：保持通栏底纹，内部内容与正文同轴对齐（否则宽屏下错位） */
  .subnav { padding-left:max(16px, calc((100% - 860px)/2));
    padding-right:max(16px, calc((100% - 860px)/2)); }
  .stats-grid { gap:12px; }
  .stat-item { padding:18px 14px; }
  .stat-value { font-size:26px; }
  .stats-amount-value { font-size:44px; }
  .stats-split-item { font-size:13.5px; }
  #ledger-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:12px; }
  /* 广告横幅的宽度轴上限（720px / 设计稿档 520px）已提到基础层，见「广告位」小节 ——
     那里对所有宽度生效，包括 375~960 的窄桌面窗口。 */
  /* 轮播高度已在基础层改为等比（height:auto）；此处让它**撑满左列**（跨 tip/ann 两行），
     与右列底边齐平 —— 否则右列（提示+公告 ≈290px）比轮播（197px）高 90px，左下留一块死白。
     图片按自身比例居中、上下以纸色补边，依旧不裁切。 */
  #home-body .swiper { align-self:stretch; }
  #home-body .swiper-track { height:100%; }
  #home-body .swiper-track a { height:100%; display:flex; align-items:center; justify-content:center; }
  #home-body .swiper-track img { width:auto; max-width:100%; max-height:100%; }
  #tabbar { position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
    width:min(560px,92vw); border-radius:var(--r-xl); border:1px solid var(--line);
    box-shadow:var(--shadow-lg); padding:8px 10px; }
  .add-btn { margin-top:-20px; }
  .modal-mask { align-items:center; }
  .modal-sheet { border-radius:var(--r-xl); width:min(520px,92vw); max-height:84dvh;
    animation:popin .22s cubic-bezier(.3,1.2,.4,1); }
  @keyframes popin { from { transform:scale(.94) translateY(16px); opacity:0; } }
  .auth-page { flex-direction:row; align-items:center; justify-content:center;
    gap:72px; padding:40px 28px; }
  .auth-page::before { width:460px; height:460px; top:-160px; right:-140px; }
  .auth-hero { padding:0; text-align:left; flex-shrink:0; }
  .auth-hero h1 { font-size:33px; }
  .auth-logo { margin:0 0 20px; }
  .auth-card { flex:none; width:432px; border-radius:var(--r-xl);
    box-shadow:var(--shadow-lg); padding:30px 30px 34px; }
  .toast { max-width:420px; }
}

/* ============ ≥960 首页杂志式双栏布局 ============ */
@media (min-width: 960px) {
  #home-body {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr);
    grid-template-areas:
      "banner tip"
      "banner ann"
      "stats stats"
      "grid grid"
      "ledgers ledgers"
      "guests guests"
      "adbottom adbottom";
    gap: 12px;
    align-content: start;
  }
  #home-body > * { margin-bottom: 0; }
  #home-body .ad-slot { margin-bottom: 0; }
  #home-body .swiper { grid-area: banner; }
  #home-body .tipbar { grid-area: tip; margin: 0; }
  #home-body .annbar {
    grid-area: ann; flex-direction: column; align-items: flex-start;
    gap: 10px; margin: 0; padding: 14px 16px;
  }
  #home-body .annwrap { height: auto; flex: 1; }
  #home-body .annlist { transform: none !important; }
  #home-body .annlist p { line-height: 1.75; white-space: normal; }
  #home-body .stats-card { grid-area: stats; }
  #home-body .stats-grid { grid-area: grid; }
  #home-body .home-ledgers-card { grid-area: ledgers; }
  #home-body .home-guests-card { grid-area: guests; }
  /* DOM 里广告位是 #home-ad（home.js 里已把 ad_mid/ad_bottom 收敛为末尾一处），
     原来的 #ad-mid / #ad-bottom 两个选择器早已取不到元素。 */
  #home-body #home-ad { grid-area: adbottom; }
  .home-ledger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 12px;
    margin-top: 4px;
  }
}

/* ============ 推广展示页 #/welcome ============ */
.page.welcome { padding-bottom: 0; }
.wl-hero { background: var(--grad); color: #fff; text-align: center; padding: 46px 24px 40px;
  border-radius: 0 0 26px 26px; }
.wl-logo { width:64px; height:64px; margin:0 auto; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(240,220,168,.55); background:rgba(255,253,246,.10);
  color:var(--gold-lt); font-size:27px; }
.wl-hero h1 { margin: 10px 0 6px; font-size: 26px; letter-spacing: 1px; }
.wl-hero p { font-size: 13.5px; opacity: .92; }
.wl-cta-row { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wl-cta { background: var(--grad-gold); color: #3A1B08; font-weight: 700; padding: 12px 44px; border-radius: 24px;
  display: inline-block; box-shadow: 0 4px 14px rgba(42,33,27,.18); }
.wl-ghost { display:inline-flex; align-items:center; min-height:40px;
  color: #fff; font-size: 12.5px; opacity: .9; text-decoration: underline; cursor: pointer; }
.wl-sec { padding: 26px 18px 8px; }
.wl-sec h2 { font-size: 17px; margin: 0 0 14px; text-align: center; }
.wl-alt { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-bottom: 26px; }
.wl-feats { display: flex; flex-wrap: wrap; gap: 10px; }
.wl-feat { width: calc(50% - 5px); background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 12px; display: flex; gap: 10px; box-sizing: border-box; }
.wl-feat .ico { font-size:20px; line-height:1.2; color:var(--red-bright); }
.wl-feat b { font-size: 13.5px; display: block; margin-bottom: 3px; }
/* 中文断行：避免「一次导 / 入上千位宾客」这类把词拆开的硬断。
   注意 .wl-feat 是 flex 子项，需同时给 min-width:0 才能让 keep-all 真正生效。 */
.wl-feat { min-width: 0; }
.wl-feat p { margin: 0; font-size: 11.5px; color: var(--ink2); line-height: 1.55;
  word-break: keep-all; overflow-wrap: anywhere; }
.wl-steps { display: flex; gap: 10px; }
.wl-step { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 10px; text-align: center; }
.wl-step .n { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--grad);
  color: #fff; font-size: 12px; line-height: 22px; margin-bottom: 8px; }
.wl-step b { display: block; font-size: 13px; margin-bottom: 4px; }
.wl-step p { margin: 0; font-size: 11px; color: var(--ink2); line-height: 1.5;
  word-break: keep-all; overflow-wrap: anywhere; }
.wl-faqs { display: flex; flex-direction: column; gap: 8px; }
.wl-faq { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.wl-faq summary { font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wl-faq p { margin: 8px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.65; }
.wl-foot { text-align: center; padding: 26px 18px 30px; font-size: 11.5px; color: var(--ink3); line-height: 1.9; }
.wl-foot .lnk a { color: var(--ink2); cursor: pointer; }
@media (max-width: 359px) { .wl-steps { flex-direction: column; } }

/* ============ 推广页轮播 + PC 宽屏布局（图文版） ============ */
.wl-nav { display: none; }
.wl-hero { display: flex; flex-direction: column; gap: 18px; }
.wl-hero-txt { text-align: center; }
.wl-carousel { position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(122,15,22, .28); touch-action: pan-y; }
.wl-track { display: flex; transition: transform .45s ease; }
.wl-slide { flex: 0 0 100%; position: relative; }
.wl-slide img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.wl-cap { position: absolute; left: 0; right: 40px; bottom: 0; padding: 26px 14px 10px;
  color: #fff; background: linear-gradient(transparent, rgba(42,33,27, .74)); pointer-events: none; }
.wl-cap b { font-size: 14px; display: block; margin-bottom: 2px; }
.wl-cap span { font-size: 11.5px; opacity: .92; }
.wl-arr { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border-radius: 50%; border: 0; background: rgba(201,162,39,.9); color: #3A1B08; font-size: 20px;
  line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(42,33,27, .18); }
.wl-arr.prev { left: 10px; }
.wl-arr.next { right: 10px; }
.wl-dots { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.wl-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(201,162,39,.45);
  cursor: pointer; transition: all .2s; }
.wl-dots i.on { background: var(--gold); width: 16px; border-radius: 4px; }

@media (min-width: 768px) {
  .wl-nav { display: flex; align-items: center; gap: 28px; padding: 13px 4vw;
    background: rgba(244,235,218,.94); backdrop-filter: blur(14px) saturate(1.3);
    position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); }
  .wl-brand { font-weight: 800; font-size: 18px; color: var(--red); letter-spacing: 1px; }
  .wl-links { display: flex; gap: 26px; margin-left: auto; font-size: 13.5px; color: var(--ink2); }
  .wl-links a { cursor: pointer; transition: color .15s; }
  .wl-links a:hover { color: var(--red); }
  .wl-nav-cta { padding: 8px 24px; border-radius: 20px; background: var(--grad); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgba(168,28,36, .3); }
  .wl-hero { flex-direction: row; align-items: center; gap: 5vw; padding: 68px 4vw 60px;
    border-radius: 0; text-align: left; }
  .wl-hero-txt { flex: 1.02; text-align: left; }
  .wl-logo { font-size: 42px; }
  .wl-hero h1 { font-size: 42px; margin: 16px 0 12px; }
  .wl-hero-txt p { font-size: 17px; }
  .wl-cta-row { flex-direction: row; justify-content: flex-start; align-items: center; gap: 18px; margin-top: 30px; }
  .wl-cta { padding: 13px 42px; font-size: 15px; border-radius: 26px; }
  .wl-carousel { flex: 1; border-radius: 16px; }
  .wl-slide img { aspect-ratio: 5 / 2; }
  .wl-cap b { font-size: 16px; } .wl-cap span { font-size: 13px; }
  .wl-arr { display: block; }
  .wl-sec { padding: 60px 4vw 28px; }
  .wl-sec h2 { font-size: 26px; margin-bottom: 22px; }
  .wl-feats { gap: 16px; }
  .wl-feat { width: calc(33.333% - 11px); padding: 22px 20px; border-radius: 16px; }
  .wl-feat .ico { font-size: 28px; }
  .wl-feat b { font-size: 15.5px; }
  .wl-feat p { font-size: 13px; }
  .wl-steps { gap: 34px; }
  .wl-step { position: relative; padding: 28px 22px; border-radius: 16px; }
  .wl-step:not(:last-child)::after { content: ""; position: absolute; right: -26px; top: 50%;
    transform: translateY(-50%); color: var(--red); font-size: 18px; opacity: .55; }
  .wl-step b { font-size: 15px; } .wl-step p { font-size: 12.5px; } .wl-step .n { width: 26px; height: 26px; line-height: 26px; }
  .wl-faqs { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .wl-faq { width: calc(50% - 5px); box-sizing: border-box; padding: 16px 18px; }
  .wl-faq summary { font-size: 14.5px; }
  .wl-foot { padding: 34px 4vw 40px; font-size: 13px; }
}

/* ============ 宾客明细卡片列表（账簿详情） ============ */
.ldg-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 6px; }
/* 排序条：四等分（排序/取消 · 姓名 · 礼金 · 地址），加粗放大以提升可点性 */
.ldg-sort { display:flex; align-items:stretch; font-size:13.5px; font-weight:700;
  color:var(--ink2); padding:2px 0 6px; }
/* 四等分排序项：热区撑到 ≥40px（此前仅约 30px，是本次最典型的偏小可点行） */
.ldg-sort > * { flex:1 1 0; min-width:0; text-align:center; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; min-height:40px; }
.ldg-sort > span { color:var(--ink3); font-weight:600; }
.ldg-sort a { cursor:pointer; color:var(--ink2); }
.ldg-sort a.on { color:var(--red-bright); }
.ldg-sort a.clear { color:var(--ink3); font-weight:600; text-decoration:underline; }
.ldg-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--gold-line);
  border-radius: 14px; padding: 12px 14px 12px 18px; box-shadow: 0 1px 3px rgba(42,33,27,.35);
  transition: box-shadow .15s; }
/* 账簿详情宾客明细：偶数行斑马纹（同口径）。 */
.ldg-card:nth-child(even) { background: var(--surface-2); }
.ldg-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); }
.ldg-card.wechat::before { background: var(--green); }
.ldg-card:hover { box-shadow: 0 2px 8px rgba(42,33,27,.45), 0 8px 20px rgba(42,33,27,.40); }
.ldg-top { display: flex; align-items: center; gap: 9px; }
.ldg-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--orange-lt), var(--orange));
  box-shadow: inset 0 -6px 10px rgba(42,33,27,.10), 0 2px 6px rgba(142,82,10,.3),
    0 0 0 1px var(--gold-line); }
.ldg-card.wechat .ldg-avatar { background: linear-gradient(135deg, var(--green-lt), var(--green));
  box-shadow: inset 0 -6px 10px rgba(42,33,27,.10), 0 2px 6px rgba(31,110,86,.3),
    0 0 0 1px var(--gold-line); }
/* 姓名列：此前 max-width:34% + 单行省略，长姓名过早截断而右侧留白。
   改为弹性列（占据剩余空间），最多两行；金额列仍 flex:0 0 auto 定宽。 */
.ldg-name { font-size: 15px; flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; }
.ldg-top .pay-ico { flex: 0 0 auto; white-space: nowrap; }
.ldg-amt { margin-left: auto; color: var(--red); font-weight: 800; font-size: 17.5px;
  font-variant-numeric: tabular-nums; flex: 0 0 auto; white-space: nowrap; }
.ldg-amt i { font-style: normal; font-size: 11.5px; font-weight: 700; margin-right: 1px; }
.ldg-meta { margin-top: 8px; font-size: 12px; color: var(--ink2); line-height: 1.65; }
.ldg-meta div { display: flex; gap: 8px; }
.ldg-meta i { font-style: normal; flex: 0 0 auto; background: var(--info-bg);
  border: 1px solid rgba(201,162,39,.26); color: #745A12; border-radius: 6px; padding: 0 5px; font-size: 10.5px;
  line-height: 18px; height: 18px; align-self: flex-start; }
.ldg-ops { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; font-size: 12.5px; }
.ldg-ops a { color: var(--blue); font-weight: 600; cursor: pointer; flex: 0 0 auto; white-space: nowrap;
  display:inline-flex; align-items:center; min-height:40px; box-sizing:border-box;
  border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 999px; padding: 9px 16px; line-height: 1; }
.ldg-ops a:active { background: var(--line); }
.ldg-ops a.del { color: var(--red); border-color: rgba(168,28,36,.28); background: rgba(168,28,36,.04); }
.ldg-ops a.del:active { background: rgba(168,28,36,.10); }

/* ============ 新中式轻奢 · 重构样式 ============ */

/* 头部装饰元素 */
.hero-decor { position:absolute; pointer-events:none; z-index:1; }
.hero-decor-1 { width:150px; height:150px; top:-30px; right:-30px;
  background:url('/css/assets/cloud.png') no-repeat; background-size:contain; opacity:.2; }
.hero-decor-2 { width:100px; height:100px; bottom:20px; left:-20px;
  background:url('/css/assets/cloud.png') no-repeat; background-size:contain; opacity:.15;
  transform:scaleX(-1); }

/* 礼金总览：通栏深漆匾（v2.2 焦点）—— 封面是漆带页眉，这里是全页唯一深色大面。
   通栏出血（负 margin 抵消 body-pad 16px）、上金箔铆条 + 下金箔收边，
   金渐变大数（漆底上金字 6.85:1，比宣纸朱字更"实"），现金/微信白字 split。 */
.stats-card { position:relative; margin:22px -16px 0; padding:30px 20px 23px; overflow:hidden;
  background:
    radial-gradient(130% 100% at 16% -22%, rgba(255,236,200,.17), transparent 60%),
    linear-gradient(152deg, #6E0C13 0%, #8E1418 46%, #5A070D 100%);
  box-shadow:0 6px 14px rgba(60,16,16,.22), 0 26px 58px rgba(90,7,13,.40); }
/* 上沿金箔铆条 */
.stats-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, #8A6A1F, #F0DCA8 22%, #C9A227 50%, #F0DCA8 78%, #8A6A1F); }
/* 下沿金箔收边 */
.stats-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, #C9A227 28%, #F0DCA8 50%, #C9A227 72%, transparent); }
/* 题头：烫金 + 两侧金线收边（章节号「壹」由 home.js 输出） */
.stats-title { display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'LJ Serif','Songti SC',serif; font-weight:900; font-size:12px; letter-spacing:.46em;
  color:#F0DCA8; text-indent:.46em; margin-bottom:0; position:relative; z-index:2; }
.stats-title::before { content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,220,168,.30)); }
.stats-title::after { content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(240,220,168,.30), transparent); }
.stats-title i { font-style:normal; color:#F0DCA8; font-size:11px; }
.stats-main { display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.stats-amount { text-align:center; min-width:0; position:relative; padding:0 24px; max-width:100%; }
.stats-amount::before, .stats-amount::after { display:none; }
/* 主数：金渐变大字（漆底上的烫印，6.85:1；全页唯一焦点块） */
.stats-amount-value { font-size:clamp(40px, 15vw, 62px); font-weight:900; letter-spacing:.5px;
  line-height:.96; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(168deg, #FFFBEE, #F0DCA8 40%, #C9A227 76%, #F7EAC2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.55)); }
.stats-amount-value small { font-size:.53em; font-weight:700; margin:0 1px 0 0; vertical-align:.28em; }
.stats-cap { margin-top:11px; font-size:11.5px; letter-spacing:.2em; color:rgba(255,243,222,.9); position:relative; z-index:2; }
/* 两笔来源：两等分账栏（用线不用卡），白字 split */
.stats-split { display:grid; grid-template-columns:1fr 1fr; align-items:center; margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(240,220,168,.30); position:relative; z-index:2; }
.stats-split-item { font-size:12px; display:flex; align-items:center; justify-content:center;
  gap:8px; color:rgba(255,243,222,.92); position:relative; }
.stats-split-item + .stats-split-item::before { content:""; position:absolute; left:0; top:50%;
  width:1px; height:15px; margin-top:-7.5px; background:rgba(240,220,168,.30); }
.stats-split-item .dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.stats-split-item .dot.cash { background:var(--orange); box-shadow:0 0 0 3px rgba(224,154,92,.24); }
.stats-split-item .dot.wechat { background:var(--green); box-shadow:0 0 0 3px rgba(99,191,162,.24); }
.stats-split-item b { font-size:16px; font-weight:800; color:#FFF6E6;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* 三格账目：v2.2 读作漆匾下方的账格（去上边框与匾成一整块），吃宣纸纹理 */
.stats-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:none; border-bottom:1px solid var(--gold-line);
  margin:0 -16px 20px;
  background:var(--grain), linear-gradient(180deg, var(--card), var(--paper)); }
.stat-item { background:none; border:none; box-shadow:none; border-radius:0;
  padding:16px 4px 14px; text-align:center; position:relative; }
.stat-item + .stat-item::before { content:""; position:absolute; left:0; top:16%; bottom:16%;
  width:1px; background:var(--line); }
.stat-label { font-size:11px; color:var(--ink3); margin-bottom:8px; letter-spacing:.16em; }
.stat-value { font-size:26px; font-weight:900; color:var(--ink); line-height:1;
  font-variant-numeric:tabular-nums; }
.stat-value small { font-size:13px; font-weight:700; color:var(--red); margin-left:3px; }

/* 温馨提示卷轴样式 */
/* 页边批注：提示是「静态、可忽略」的说明，做最轻的一档 ——
   只有左侧一根金竖线，无框无底色。与榜文条形制不同，两条叠在一起才有主次。
   绝不用 text-wrap:balance：它把每行都截短来"平衡"，右边会空出一大片。 */
.tipbar { display:flex; gap:10px; align-items:stretch;
  width:fit-content; max-width:100%;
  padding:1px 11px 1px 11px; margin:15px 0 0; position:relative;
  border-left:2px solid var(--gold); }
.tipbar::after { display:none; }
/* .tipbar .ico 已删除：提示条的身份由左侧那根金线承担（见 .tipbar 的 border-left），
   再叠一只 emoji 灯泡是重复标记。 */
.tipbar p { font-size:11px; color:var(--ink2); line-height:1.72; font-weight:500; }
.tipbar b, .tipbar strong { color:var(--red-bright); font-weight:700; letter-spacing:.12em; }

/* ===== 版本更新条 / 页脚版本号（2.2.3 新增） ===== */
.update-bar { display:none; position:fixed; left:50%; transform:translateX(-50%); top:8px; z-index:80;
  align-items:center; gap:8px; width:calc(100% - 24px); max-width:420px; box-sizing:border-box;
  margin:0 auto; padding:10px 14px; background:var(--paper); border:1px solid var(--gold-line);
  border-radius:var(--r-md); color:var(--red); font-size:13px; line-height:1.2;
  box-shadow:0 6px 18px rgba(42,33,27,.14); cursor:pointer; }
.update-bar.show { display:flex; }
.update-bar .ub-dot { width:8px; height:8px; border-radius:50%; background:var(--red); flex:0 0 auto; }
.update-bar .ub-txt { flex:1; min-width:0; }
.update-bar .ub-x { color:var(--ink3); font-size:20px; line-height:1; padding:0 2px; flex:0 0 auto; }
.app-ver { text-align:center; font-size:11px; color:var(--ink3); letter-spacing:.5px; padding:20px 0 10px; }
/* ICP 备案号：网站底部的合规信息，比版本号更次要 —— 无下划线常态、悬停才显，
   点得中但绝不与版本号抢视觉重量（字号 11px = 设计系统下限 10.5px 之上）。 */
.icp-line { text-align:center; font-size:11px; color:var(--ink3); padding:0 16px 14px; }
.icp-line a { color:var(--ink3); text-decoration:none; }
.icp-line a:hover { color:var(--ink2); text-decoration:underline; }

/* ============ 回礼提醒：倒计时进度（复用 .track，三态高亮） ============ */
/* 窗口 = created_at → remind_at，进度由后端 reminder_vo 计算。
   due_state：upcoming 进行中 / expired 已到期 / done 已完成。 */
.ri-prog { margin-top:10px; }
.ri-prog.upcoming .track-cap span:first-child { color:var(--gold-d); font-weight:700; }
.ri-prog.expired .track i { background:linear-gradient(90deg,var(--red),var(--red2));
  box-shadow:0 0 0 1px rgba(140,20,24,.6); animation:blink 1.4s ease-in-out infinite; }
.ri-prog.expired .track-cap span { color:var(--red-bright); font-weight:700; }
.ri-prog.done .track i { background:linear-gradient(90deg,var(--green),var(--green)); }
.ri-prog.done .track i::after { background:radial-gradient(circle at 34% 30%, #FFF9EC, var(--green) 62%, var(--green)); }
.ri-prog.done .track-cap span { color:var(--green); }

/* ============ 微信扫码登录（H5 登录页） ============ */
.auth-or { display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--ink3); font-size:11.5px; }
.auth-or::before, .auth-or::after { content:""; flex:1; height:1px; background:var(--line); }
.wx-qr { text-align:center; padding:8px 0 6px; }
.wx-qr-img { width:200px; height:200px; display:block; margin:0 auto; padding:8px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:12px; background:var(--card); }
.wx-qr-tip { font-size:12.5px; color:var(--ink2); margin-top:12px; line-height:1.7; }
.wx-qr-tip b { color:var(--red-bright); }
.wx-qr-sub { font-size:11.5px; color:var(--ink3); margin-top:6px; line-height:1.7; }

/* ============ 登录页子模式切换（密码登录 / 短信验证码登录） ============ */
/* 次级切换：比主 tabs（登录/注册）轻一档，避免两层切换抢视觉重心。 */
.auth-lm { display:flex; gap:22px; justify-content:center; margin:-6px 0 16px; }
.auth-lm a { display:inline-flex; align-items:center; justify-content:center; min-height:36px;
  font-size:13px; color:var(--ink3); padding-bottom:5px; position:relative; cursor:pointer; }
.auth-lm a.on { color:var(--red-bright); font-weight:700; }
.auth-lm a.on::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--red-bright); }