/* ============================================================
   茶约 · 潮汕工夫茶 新中式样式表
   设计语言：高级极简 · 宣纸 · 墨漆 · 鎏金
   主色：深茶褐 ｜ 辅助：哑光墨绿、鎏金浅描边
   底色：宣纸米白 ｜ 文字：深炭黑 + 浅灰次级文字
   说明：全部使用系统字体与内联 SVG / data URI，无任何外部资源，
        适配离线 EXE 打包运行。
   ============================================================ */

/* ---------- 1. 全局变量（设计令牌，勿改名） ---------- */
:root {
  --ink: #241a12;             /* 主文字：深炭黑 */
  --brown-deep: #3a2717;      /* 深茶褐：标题、导航底 */
  --brown: #6b4a2a;           /* 茶褐：强调文字 */
  --brown-light: #8d7c66;     /* 浅灰次级文字 */
  --tea-green: #6e8a72;       /* 哑光墨绿 */
  --tea-green-deep: #4a6650;  /* 深墨绿 */
  --gold: #b8935a;            /* 鎏金 */
  --gold-light: #d8b878;      /* 亮金 */
  --paper: #f8f4ec;           /* 宣纸米白 */
  --paper-2: #f0e9dc;         /* 宣纸次层 */
  --line: #dcd4c2;            /* 发丝线 */
  --red-seal: #9e3d32;        /* 朱砂 */
  --shadow: rgba(58, 39, 23, .10);   /* 柔和暖阴影 */

  /* 描边与衬线 */
  --hair: rgba(184, 147, 90, .32);   /* 鎏金发丝线 */
  --hair-soft: rgba(184, 147, 90, .17);
  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", Georgia, serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", "STSong", "SimSun", serif;  /* 楷体：诗题、印章等题跋用字，更具古风 */
  --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", sans-serif;

  /* 宣纸纤维噪点（内联 SVG，离线可用，全站复用） */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");

  /* 茶牌木纹：低饱和细密横纹（内联 SVG，离线可用，按钮/快捷入口复用） */
  --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23w)' opacity='0.10'/%3E%3C/svg%3E");

  /* 回纹金线（题头 / 边饰用，内联 SVG，离线可用，细金线不喧宾夺主） */
  --fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 9H10M1 9V1h5v4H3V3' fill='none' stroke='%23b8935a' stroke-width='1'/%3E%3C/svg%3E");

  /* 淡墨山水茶园底图（横幅用，内联 SVG，离线可用，弱化杂乱底图） */
  --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='460'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fdfbf6'/%3E%3Cstop offset='1' stop-color='%23efe7d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='460' fill='url(%23g)'/%3E%3Cpath d='M0 300 C170 224 300 268 430 300 C560 332 690 246 820 274 C950 302 1080 250 1200 288 L1200 460 L0 460 Z' fill='%233a2717' opacity='0.05'/%3E%3Cpath d='M0 352 C150 302 320 340 470 356 C620 372 760 316 900 338 C1040 360 1140 330 1200 344 L1200 460 L0 460 Z' fill='%233a2717' opacity='0.07'/%3E%3Cpath d='M0 386 Q300 366 600 380 T1200 372' stroke='%233a2717' stroke-width='2' fill='none' opacity='0.055'/%3E%3Cpath d='M0 402 Q300 382 600 396 T1200 388' stroke='%233a2717' stroke-width='2' fill='none' opacity='0.045'/%3E%3Cpath d='M0 418 Q300 398 600 412 T1200 404' stroke='%233a2717' stroke-width='2' fill='none' opacity='0.035'/%3E%3Cg fill='%233a2717' opacity='0.05'%3E%3Ccircle cx='180' cy='330' r='15'/%3E%3Ccircle cx='205' cy='342' r='11'/%3E%3Ccircle cx='980' cy='316' r='14'/%3E%3Ccircle cx='1004' cy='330' r='10'/%3E%3C/g%3E%3C/svg%3E");

  /* 中式菱格团花暗纹（面板底纹用，内联 SVG，离线可用，四方连续） */
  --brocade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108'%3E%3Cg fill='none' stroke='%233a2717' stroke-width='1' opacity='0.055'%3E%3Cpath d='M54 0 L108 54 L54 108 L0 54 Z'/%3E%3C/g%3E%3Cg fill='%233a2717' opacity='0.05'%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z'/%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z' transform='rotate(90 54 54)'/%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z' transform='rotate(180 54 54)'/%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z' transform='rotate(270 54 54)'/%3E%3C/g%3E%3Cg fill='%233a2717' opacity='0.07'%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='108' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='108' r='2.4'/%3E%3Ccircle cx='108' cy='108' r='2.4'/%3E%3Ccircle cx='54' cy='54' r='2.1'/%3E%3C/g%3E%3C/svg%3E");

  /* 菱格团花 · 鎏金版（深色底纹用，如电脑端左侧竖栏，内联 SVG，离线可用） */
  --brocade-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108'%3E%3Cg fill='none' stroke='%23b8935a' stroke-width='1' opacity='0.11'%3E%3Cpath d='M54 0 L108 54 L54 108 L0 54 Z'/%3E%3C/g%3E%3Cg fill='%23b8935a' opacity='0.095'%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z'/%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z' transform='rotate(90 54 54)'/%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z' transform='rotate(180 54 54)'/%3E%3Cpath d='M54 34 C60 45 60 49.5 54 54 C48 49.5 48 45 54 34 Z' transform='rotate(270 54 54)'/%3E%3C/g%3E%3Cg fill='%23b8935a' opacity='0.12'%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='108' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='108' r='2.4'/%3E%3Ccircle cx='108' cy='108' r='2.4'/%3E%3Ccircle cx='54' cy='54' r='2.1'/%3E%3C/g%3E%3C/svg%3E");

  /* 缠枝茶叶散点暗纹（页面底纹用，内联 SVG，离线可用，四方连续） */
  --leafdot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg opacity='0.075'%3E%3Cg transform='translate(45 45) rotate(-45)'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234a6650'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%23f5f8ec' stroke-width='1.3'/%3E%3C/g%3E%3Cg transform='translate(135 45) rotate(45)'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234a6650'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%23f5f8ec' stroke-width='1.3'/%3E%3C/g%3E%3Cg transform='translate(45 135) rotate(135)'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234a6650'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%23f5f8ec' stroke-width='1.3'/%3E%3C/g%3E%3Cg transform='translate(135 135) rotate(-135)'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234a6650'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%23f5f8ec' stroke-width='1.3'/%3E%3C/g%3E%3Ccircle cx='90' cy='90' r='1.8' fill='%234a6650'/%3E%3C/g%3E%3C/svg%3E");

  /* 祥云金线带（分隔线 / 页脚收尾用，内联 SVG，离线可用） */
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='20'%3E%3Cg fill='none' stroke='%23b8935a' stroke-width='1.1' opacity='0.6'%3E%3Cpath d='M0 15 C10 15 10 5 20 5 C30 5 30 15 40 15 C50 15 50 5 60 5 C70 5 70 15 80 15'/%3E%3C/g%3E%3Cg fill='%23b8935a' opacity='0.65'%3E%3Ccircle cx='20' cy='5' r='1.7'/%3E%3Ccircle cx='60' cy='5' r='1.7'/%3E%3C/g%3E%3C/svg%3E");

  /* 水波纹细带（横幅底 / 页脚用，内联 SVG，离线可用） */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cpath d='M0 6 Q12 0 24 6 T48 6' fill='none' stroke='%233a2717' stroke-width='1.1' opacity='0.45'/%3E%3C/svg%3E");

  /* 盖碗线描（茶事元素，点缀首页横幅，内联 SVG，离线可用） */
  --gaiwan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='64'%3E%3Cg fill='none' stroke='%23b8935a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'%3E%3Cpath d='M23 29 h26 l-2.5 13 a10.5 10.5 0 0 1 -21 0 z'/%3E%3Cpath d='M19 29 h34'/%3E%3Cpath d='M23 29 C23 20 49 20 49 29'/%3E%3Ccircle cx='36' cy='17' r='3'/%3E%3Cellipse cx='36' cy='52' rx='21' ry='3.6'/%3E%3C/g%3E%3C/svg%3E");

  /* 朱泥小壶线描（商城茶文化轮播用，内联 SVG，离线可用，与盖碗线描同一路金线） */
  --teapot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='64'%3E%3Cg fill='none' stroke='%23b8935a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'%3E%3Cpath d='M22 24 h30 l-3 16 a12 12 0 0 1 -24 0 z'/%3E%3Cpath d='M16 24 h42'/%3E%3Cpath d='M22 24 C22 15 52 15 52 24'/%3E%3Ccircle cx='37' cy='12' r='3'/%3E%3Cpath d='M21 27 C11 27 10 41 20 43'/%3E%3Cpath d='M52 27 C61 26 66 21 69 15'/%3E%3Cellipse cx='37' cy='52' rx='22' ry='3.6'/%3E%3C/g%3E%3C/svg%3E");

  --r-panel: 8px;   /* 面板圆角：收小更克制 */
  --r-ctl: 4px;     /* 控件圆角 */
  --r-btn: 7px;     /* 按钮圆角倒角 */

  /* 浮雕阴影三层（悬浮 / 按下），供按钮与快捷入口复用 */
  --emboss-up: inset 0 1px 0 rgba(255, 246, 228, .24), inset 0 -3px 7px -3px rgba(0, 0, 0, .34), 0 2px 3px -1px rgba(58, 39, 23, .30), 0 10px 20px -10px rgba(58, 39, 23, .46);
  --emboss-hover: inset 0 1px 0 rgba(255, 246, 228, .30), inset 0 -3px 8px -3px rgba(0, 0, 0, .32), 0 4px 7px -2px rgba(58, 39, 23, .32), 0 18px 30px -14px rgba(58, 39, 23, .54);
  --emboss-down: inset 0 2px 6px rgba(0, 0, 0, .34), inset 0 -1px 0 rgba(255, 246, 228, .12), 0 1px 2px -1px rgba(58, 39, 23, .26), 0 4px 10px -6px rgba(58, 39, 23, .34);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- 2. 页面底色：宣纸米白 + 淡墨纹理 ---------- */
body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.78;
  font-size: 15px;
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    var(--noise),
    radial-gradient(circle at 14% -4%, rgba(184, 147, 90, .07), transparent 40%),
    radial-gradient(circle at 94% 102%, rgba(110, 138, 114, .06), transparent 40%);
  background-size: 180px 180px, auto, auto;
  animation: cy-page .42s ease both;
}
body > * { position: relative; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; }
a { color: var(--brown); }
img { max-width: 100%; }

::selection { background: rgba(184, 147, 90, .28); }

/* 细滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(184, 147, 90, .42);
  border-radius: 9px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(184, 147, 90, .62); }

/* ---------- 3. 顶部导航：深色磨砂 + 细金线 ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 22px;
  color: var(--paper);
  background: rgba(30, 22, 15, .92);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 1px 0 rgba(216, 184, 120, .10) inset;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar { background: #241a12; }
}
.navbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-light) 50%, var(--gold) 78%, transparent);
  opacity: .42;
}
.navbar-inner {
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 64px;
  padding: 6px 0;
  gap: 6px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-seal {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  color: #fff4e6;
  background: var(--red-seal);
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 228, 200, .28) inset;
}
.brand-name {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: 6px;
  color: var(--gold-light);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
.brand-icon { font-size: 24px; }  /* 兼容旧写法 */

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: 22px;
  flex-wrap: wrap;
  flex: 1;
}
.nav-menu a {
  position: relative;
  color: rgba(248, 244, 236, .70);
  text-decoration: none;
  padding: 8px 12px;
  font-family: var(--sans);       /* 导航文字：无衬线 */
  font-size: 14px;
  letter-spacing: .5px;
  transition: color .22s;
  white-space: nowrap;
}
.nav-menu a::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: 1px; height: 1px;
  background: var(--gold-light);
  transition: left .26s ease, right .26s ease;
}
.nav-menu a:hover { color: #fff; }
.nav-menu a:hover::after { left: 24%; right: 24%; }
.nav-menu a.active { color: var(--gold-light); }
.nav-menu a.active::after { left: 24%; right: 24%; }

.nav-user {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 13.5px;
}
.nav-user a {
  color: rgba(248, 244, 236, .82);
  text-decoration: none;
  transition: color .2s;
}
.nav-user a:hover { color: var(--gold-light); }
.points-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  color: var(--gold-light);
  border: 1px solid var(--hair);
  border-radius: 3px;
  font-size: 12.5px;
  letter-spacing: .5px;
  background: rgba(216, 184, 120, .07);
}
.nav-toggle {
  display: none;
  background: none; border: none;
  color: var(--gold-light);
  font-size: 22px;
  cursor: pointer;
  padding: 0 6px;
}

/* ---------- 4. 主体容器与页头 ---------- */
.container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 36px 26px 48px;
}
.page-title {
  position: relative;
  font-family: var(--serif);
  font-size: 27px;
  color: var(--brown-deep);
  letter-spacing: 3px;
  padding-left: 16px;
  margin-bottom: 8px;
}
.page-title::before {
  content: "";
  position: absolute; left: 0; top: .28em; bottom: .28em; width: 3px;
  background: linear-gradient(180deg, var(--gold), rgba(184, 147, 90, .18));
}
.page-sub {
  color: var(--brown-light);
  margin-bottom: 28px;
  font-size: 13px;
  letter-spacing: 1.5px;
}
/* 二级页面顶部返回键：APP 里没有浏览器后退，靠这枚小茶牌退回上一页 */
.page-back {
  display: inline-flex; align-items: center;
  margin-bottom: 12px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  font-size: 12.5px; letter-spacing: .5px;
  color: var(--brown-deep); text-decoration: none;
  background: rgba(184, 147, 90, .10);
  border: 1px solid rgba(184, 147, 90, .34);
  transition: background .18s, border-color .18s;
}
.page-back:hover { background: rgba(184, 147, 90, .18); border-color: var(--hair); }
.page-back:active { background: rgba(184, 147, 90, .26); }

/* ---------- 5. 面板：宣纸纹理 + 细鎏金描边 + 柔和多层次阴影（微微浮起） ---------- */
.card {
  position: relative;
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .90) 0%, rgba(249, 244, 233, .74) 100%);
  background-size: 180px 180px, auto;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  padding: 24px;
  margin-bottom: 18px;
  /* 顶部一线内高光 + 三层柔和外阴影，营造微微浮起的层次感 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .66),
    0 1px 2px rgba(58, 39, 23, .05),
    0 8px 18px -12px rgba(58, 39, 23, .18),
    0 24px 46px -28px rgba(58, 39, 23, .26);
}
.card-hover {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: var(--hair);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(58, 39, 23, .05),
    0 14px 26px -14px rgba(58, 39, 23, .22),
    0 32px 56px -30px rgba(58, 39, 23, .32);
}

/* 卡片小标题：细金线分割 */
.card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 17.5px;
  letter-spacing: 2.5px;
  color: var(--brown-deep);
  padding-bottom: 13px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hair-soft);
}
.card-h::before {
  content: "";
  width: 3px; height: 15px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

/* ---------- 6. 网格 ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ---------- 7. 表单 ---------- */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 7px;
  color: var(--brown-deep);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
}
.form-control {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: rgba(255, 253, 248, .86);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
/* 点击输入框不做任何样式变化（不描金边、不发光、不换底色） */
.form-control::placeholder { color: #b9ad97; }
textarea.form-control { resize: vertical; min-height: 92px; }
select.form-control { cursor: pointer; }

/* 参加人数选择：三 / 四 / 五 / 六 人四枚小茶牌 */
.seat-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.seat-opt { position: relative; flex: 1 1 0; min-width: 66px; cursor: pointer; }
.seat-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seat-opt span {
  display: block;
  text-align: center;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: rgba(255, 253, 248, .86);
  color: var(--brown);
  font-size: 14px;
  letter-spacing: 1px;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.seat-opt:hover span { border-color: var(--gold); }
.seat-opt input:checked + span {
  color: #f7f3e8;
  border-color: var(--tea-green-deep);
  background: linear-gradient(180deg, var(--tea-green), var(--tea-green-deep));
  box-shadow: 0 2px 8px rgba(27, 39, 31, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ---------- 8. 按钮：3D 立体浮雕茶牌 ---------- */
/* 主体为深茶褐哑光木牌纹理（低饱和细横纹）+ 轻微圆角倒角 + 鎏金细描边，
   自带顶部柔光高光、外投影与底部内阴影，呈凸起浮雕感。
   悬浮上浮、投影加深、文字提亮；按下凹陷、高光减弱，模拟按压实体茶牌。 */
.btn {
  position: relative;
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid rgba(216, 184, 120, .44);
  border-radius: var(--r-btn);
  font-size: 14.5px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  color: #f3e8d4;
  background-color: var(--brown-deep);
  background-image:
    linear-gradient(180deg, rgba(255, 246, 228, .22), rgba(255, 246, 228, 0) 48%),
    var(--wood),
    linear-gradient(180deg, var(--btn-top, #4b3520), var(--btn-btm, #291a0d));
  background-size: auto, 120px 120px, auto;
  box-shadow: var(--emboss-up);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease,
              filter .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover {
  transform: translateY(-2px);
  color: #fff8ea;
  border-color: var(--gold-light);
  box-shadow: var(--emboss-hover);
}
.btn:active {
  transform: translateY(1px);
  filter: brightness(.96);
  box-shadow: var(--emboss-down);
}

/* 主按钮：深茶褐木牌 */
.btn-primary { --btn-top: #4b3520; --btn-btm: #291a0d; }
/* 金调按钮：浅鎏金木牌 */
.btn-gold { --btn-top: #cbab72; --btn-btm: #a8874e; color: #33260f; border-color: rgba(255, 244, 220, .52); }
.btn-gold:hover { color: #241a07; }
/* 墨绿按钮：哑光墨绿木牌 */
.btn-green { --btn-top: #5f7c64; --btn-btm: #3b5541; color: #eef4ee; border-color: rgba(214, 232, 214, .34); }
/* 朱砂按钮 */
.btn-danger { --btn-top: #a9473a; --btn-btm: #7f2f24; color: #fdeeeb; border-color: rgba(255, 220, 210, .32); }

/* 次要按钮：线条简约，保留同风格鎏金描边，立体效果弱于主按钮 */
.btn-outline {
  color: var(--brown);
  border-color: var(--hair);
  background-color: rgba(255, 253, 248, .74);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(240, 233, 220, .30));
  background-size: auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 3px -1px rgba(58, 39, 23, .10),
    0 4px 9px -7px rgba(58, 39, 23, .32);
}
.btn-outline:hover {
  color: var(--brown-deep);
  background-color: rgba(255, 253, 248, .94);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(240, 233, 220, .38));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 3px -1px rgba(58, 39, 23, .10),
    0 7px 14px -8px rgba(58, 39, 23, .40);
}
.btn-outline:active {
  box-shadow:
    inset 0 2px 4px -1px rgba(58, 39, 23, .20),
    0 1px 2px -1px rgba(58, 39, 23, .22);
}

/* 深底上的次级按钮 */
.btn-ghost {
  color: rgba(248, 244, 236, .90);
  border-color: rgba(216, 184, 120, .44);
  background-color: rgba(255, 255, 255, .04);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 16px -10px rgba(0, 0, 0, .6);
}
.btn-ghost:hover { color: #fff; background-color: rgba(216, 184, 120, .16); border-color: var(--gold-light); }

.btn-sm { padding: 7px 15px; font-size: 12.5px; letter-spacing: .5px; border-radius: 6px; }
.btn-block { width: 100%; display: block; }

/* 复制成功反馈 */
.btn.is-copied {
  border-color: var(--gold-light);
  color: #fff6e2;
  filter: brightness(1.06);
}
.btn-outline.is-copied {
  color: var(--brown-deep);
  filter: none;
  background-color: rgba(184, 147, 90, .16);
}

/* ---------- 9. 标签 ---------- */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  border: 1px solid transparent;
}
.tag-green { background: rgba(110, 138, 114, .13); color: var(--tea-green-deep); border-color: rgba(110, 138, 114, .26); }
.tag-gold { background: rgba(184, 147, 90, .14); color: #8a6420; border-color: rgba(184, 147, 90, .28); }
.tag-red { background: rgba(158, 61, 50, .11); color: var(--red-seal); border-color: rgba(158, 61, 50, .24); }
.tag-brown { background: rgba(107, 74, 42, .10); color: var(--brown-deep); border-color: rgba(107, 74, 42, .20); }
.tag-blue { background: rgba(90, 122, 140, .11); color: #37596b; border-color: rgba(90, 122, 140, .24); }
.tag-gray { background: rgba(107, 74, 42, .06); color: var(--brown-light); border-color: rgba(107, 74, 42, .14); }

/* ---------- 10. 表格 ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 253, 248, .7);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.table th {
  background: rgba(58, 39, 23, .04);
  color: var(--brown-deep);
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--hair);
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 14px;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(184, 147, 90, .05); }

/* ---------- 11. 横幅：淡墨纹理山水茶园底图 + 诗词 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  padding: 46px 46px 42px;
  margin-bottom: 24px;
  color: var(--ink);
  /* 宣纸底 + 淡墨山水茶园底图（弱化不抢戏）+ 极淡暖调 */
  background-color: var(--paper);
  background-image:
    var(--noise),
    var(--landscape),
    linear-gradient(180deg, rgba(253, 251, 246, .52), rgba(240, 233, 220, .34));
  background-size: 180px 180px, cover, auto;
  background-position: center, center bottom, center;
  background-repeat: repeat, no-repeat, no-repeat;
  border: 1px solid var(--hair);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    0 1px 2px rgba(58, 39, 23, .04),
    0 14px 30px -20px rgba(58, 39, 23, .22),
    0 32px 60px -40px rgba(58, 39, 23, .30);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--serif);          /* 标题：书法字体 */
  font-size: 40px;
  letter-spacing: 12px;
  text-indent: 12px;
  color: var(--brown-deep);
  margin-bottom: 12px;
}
.hero p {
  font-family: var(--sans);           /* 正文：干净无衬线 */
  font-size: 15px;
  color: var(--brown);
  max-width: 640px;
  letter-spacing: 1.5px;
  line-height: 1.95;
  opacity: .92;
}
.hero-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- 12. 数据统计：细鎏金描边 + 低透明宣纸面板 ---------- */
.stat-card {
  position: relative;
  padding: 26px 22px 24px;
  text-align: center;
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .55), rgba(240, 233, 220, .42));
  background-size: 180px 180px, auto;
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    0 1px 2px rgba(58, 39, 23, .04),
    0 10px 20px -14px rgba(58, 39, 23, .20),
    0 26px 46px -30px rgba(58, 39, 23, .28);
}
.stat-num {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--brown-deep);
  line-height: 1.15;
  letter-spacing: 1px;
}
.stat-label {
  color: var(--brown-light);
  font-size: 12.5px;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* ---------- 13. 消息 / 列表条目：细金线分割 ---------- */
.msg-item { padding: 14px 2px; border-bottom: 1px solid var(--hair-soft); display: flex; gap: 13px; }
.msg-item:last-child { border-bottom: none; }
.msg-avatar {
  width: 38px; height: 38px; border-radius: 3px;
  background: rgba(107, 74, 42, .08);
  color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 17px; font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--hair-soft);
}
.msg-body { flex: 1; min-width: 0; }
.msg-head { font-size: 12.5px; color: var(--brown-light); margin-bottom: 4px; letter-spacing: .5px; }
.msg-content { font-size: 14.5px; color: var(--ink); }

/* ---------- 14. 时间线 ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute; left: 10px; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(to bottom, var(--hair), transparent);
}
.timeline-item { position: relative; margin-bottom: 22px; }
.timeline-item::before {
  content: "";
  position: absolute; left: -25px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--paper);
}

/* ---------- 15. 图片占位 ---------- */
.img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--paper-2), #e6dcc6);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  color: var(--brown-light);
}

/* ---------- 16. 浮动提示 ---------- */
.flash {
  background: linear-gradient(180deg, rgba(253, 246, 224, .9), rgba(249, 238, 209, .8));
  border: 1px solid var(--hair);
  border-left: 3px solid var(--gold);
  padding: 12px 18px;
  border-radius: var(--r-ctl);
  margin-bottom: 18px;
  color: #7a5a17;
  font-size: 14.5px;
}
.flash.error {
  background: linear-gradient(180deg, rgba(251, 233, 230, .9), rgba(246, 219, 214, .8));
  border-color: rgba(158, 61, 50, .28);
  border-left-color: var(--red-seal);
  color: #7c2b22;
}
.flash.success {
  background: linear-gradient(180deg, rgba(233, 241, 230, .9), rgba(220, 234, 218, .8));
  border-color: rgba(74, 102, 80, .28);
  border-left-color: var(--tea-green-deep);
  color: #2f4a35;
}

/* ---------- 17. 空状态 ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--brown-light); font-size: 14px; letter-spacing: 1px; }
.empty-icon {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--gold);
  opacity: .38;
}

/* ============================================================
   18. 登录 / 注册：深墨绿氤氲茶席 + 浮在右侧的半透宣纸茶笺
   一张写实盖碗茶图铺满整屏，茶烟用极淡的光雾化开；
   表单不套硬边卡片，靠羽化的纸色与背景自然相融。
   ============================================================ */
body.auth-body {
  margin: 0;
  background: #0b1510;
  overflow-x: hidden;
}

.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8vw 0 0;
  /* 实景盖碗茶图镜像后摆到左边，右侧压暗，给茶笺腾出一片静场 */
  background:
    linear-gradient(90deg, rgba(6, 14, 9, .10) 0%, rgba(6, 14, 9, .18) 36%, rgba(4, 10, 7, .52) 72%, rgba(3, 8, 6, .76) 100%),
    radial-gradient(72% 88% at 86% 40%, rgba(214, 198, 160, .07), transparent 72%),
    url("../images/auth/gaiwan-bg.jpg") center / cover no-repeat,
    #08120d;
}
/* 茶烟：两团被虚化开的浅色光雾，轻轻漫过画面 */
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 46% at 16% 30%, rgba(190, 206, 184, .13), transparent 72%),
    radial-gradient(46% 40% at 38% 74%, rgba(220, 224, 206, .08), transparent 74%);
  filter: blur(30px);
  pointer-events: none;
}
/* 四周轻压暗角，视线收在画面中间 */
.auth-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(112% 100% at 30% 44%, rgba(6, 13, 9, 0) 46%, rgba(3, 9, 6, .56) 100%);
  pointer-events: none;
}
/* 左下角极淡的茶枝暗纹，只留一点笔意 */
.auth-branch {
  position: absolute;
  left: 3.5vw;
  bottom: 4vh;
  width: min(420px, 38vw);
  height: min(300px, 26vw);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='%23c9b38b' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M14 292C70 258 118 236 170 220c52-16 96-42 136-82'/%3E%3Cpath d='M128 238c2-26-6-48-24-64'/%3E%3Cpath d='M170 220c4-30 20-52 44-66'/%3E%3Cpath d='M218 205c30 6 58-2 78-22'/%3E%3Cpath d='M306 138c12-26 8-50-8-68'/%3E%3Cpath d='M104 174c-14-16-32-22-52-20 8 18 26 26 52 20z'/%3E%3Cpath d='M214 154c-4-20-16-34-34-40 2 20 14 34 34 40z'/%3E%3Cpath d='M296 183c12 12 28 16 46 12-10-14-26-20-46-12z'/%3E%3Cpath d='M298 70c16 2 30-4 38-18-16-4-32 2-38 18z'/%3E%3Cpath d='M150 96c2 18 14 30 32 34-2-18-14-30-32-34z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
/* 一枚浅印章，虚虚地压在画面空处 */
.auth-stamp {
  position: absolute;
  left: 42%;
  top: 8%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 27px;
  color: rgba(232, 222, 198, .16);
  border: 1px solid rgba(232, 222, 198, .12);
  transform: rotate(-5deg);
  pointer-events: none;
}

/* 右侧茶笺：半透宣纸，纸面往里浓、往外淡，外面再糊一圈散开的纸光 */
.auth-main {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 366px;
  margin-right: 3vw;
  padding: 44px 42px 36px;
  background-image:
    var(--noise),
    radial-gradient(120% 90% at 28% 8%, rgba(255, 252, 244, .55), rgba(255, 252, 244, 0) 58%),
    linear-gradient(170deg, #f7f1e3 0%, #f3ebda 58%, #eee5d2 100%);
  background-size: 150px 150px, 100% 100%, 100% 100%;
  /* 纸边用 SVG 噪声轻微扰动，撕出一点手工毛边，不再是刀切的直角 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600'%3E%3Cdefs%3E%3Cfilter id='r' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='3' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='4' y='4' width='392' height='592' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600'%3E%3Cdefs%3E%3Cfilter id='r' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='3' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='4' y='4' width='392' height='592' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  box-shadow: 0 44px 90px -58px rgba(3, 9, 6, .8);
  animation: auth-fade .9s cubic-bezier(.22, .61, .36, 1) both;
}
/* 纸外一圈极淡的散光，只把纸从暗底上托起来一点 */
.auth-main::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  background: radial-gradient(90% 90% at 50% 50%,
    rgba(246, 240, 228, .22) 0%,
    rgba(246, 240, 228, .14) 62%,
    rgba(246, 240, 228, 0) 100%);
  filter: blur(26px);
  pointer-events: none;
}
/* 纸上一圈装裱用的细金线，让羽化的外缘有一处精神的收束 */
.auth-main::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(170, 132, 74, .30);
  pointer-events: none;
}
@keyframes auth-fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 视口一圈极细的鎏金框，四角各留一小段金线，像装裱的边 */
.auth-frame {
  position: absolute;
  inset: 16px;
  z-index: 3;
  border: 1px solid rgba(212, 186, 134, .09);
  background:
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) left top / 22px 1px no-repeat,
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) left top / 1px 22px no-repeat,
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) right top / 22px 1px no-repeat,
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) right top / 1px 22px no-repeat,
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) left bottom / 22px 1px no-repeat,
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) left bottom / 1px 22px no-repeat,
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) right bottom / 22px 1px no-repeat,
    linear-gradient(rgba(212, 186, 134, .34), rgba(212, 186, 134, .34)) right bottom / 1px 22px no-repeat;
  pointer-events: none;
}

.auth-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-family: Georgia, "Times New Roman", var(--serif), serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 5.5px;
  text-transform: uppercase;
  color: rgba(122, 98, 64, .78);
}
.auth-kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(168, 133, 78, .55);
}
.auth-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 33px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 10px;
  color: #2c261d;
  text-indent: -2px;
}
.auth-hair {
  display: block;
  width: 48px;
  height: 1px;
  margin: 22px 0 30px;
  background: linear-gradient(90deg, rgba(178, 140, 84, .72), rgba(178, 140, 84, 0));
}

/* 表单：底边一根细线，聚焦时不加任何变化 */
.auth-form .field { margin-bottom: 21px; }
.auth-form .field label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 3px;
  color: rgba(72, 56, 38, .62);
}
.auth-form .form-control {
  width: 100%;
  padding: 9px 2px 10px;
  border: 0;
  border-bottom: 1px solid rgba(126, 100, 62, .32);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  letter-spacing: .4px;
  color: #2c261d;
}
.auth-form .form-control::placeholder {
  color: rgba(120, 100, 72, .44);
  font-size: 13px;
  letter-spacing: 1.4px;
}
/* 登录按钮：一方哑光墨绿小印砖，细金边，弱阴影 */
.auth-submit {
  width: 100%;
  margin-top: 20px;
  padding: 14px 18px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #3d5343 0%, #26382e 100%);
  color: #f2ecdc;
  font-family: var(--kai);
  font-size: 14px;
  letter-spacing: 8px;
  text-indent: 8px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(216, 190, 142, .22), 0 20px 34px -26px rgba(6, 15, 10, .95);
  transition: background .3s, box-shadow .3s;
}
.auth-submit:hover {
  background: linear-gradient(180deg, #455c4a 0%, #2d4135 100%);
  box-shadow: inset 0 0 0 1px rgba(222, 198, 152, .42), 0 22px 38px -24px rgba(6, 15, 10, .95);
}

/* 纸脚一行：右转注册，左落一枚朱砂小印 */
.auth-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}
.auth-switch {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 1px;
  color: rgba(80, 64, 46, .70);
}
.auth-switch a {
  margin-left: 4px;
  padding-bottom: 1px;
  color: #6b4a2a;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 147, 90, .42);
  transition: color .25s, border-color .25s;
}
.auth-switch a:hover { color: var(--red-seal); border-color: rgba(158, 61, 50, .55); }
.auth-seal {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(150, 60, 48, .88);
  color: #f5ead9;
  font-family: var(--serif);
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(245, 234, 217, .30);
  transform: rotate(-3deg);
  opacity: .9;
}

/* 画面最右侧的竖排落款：淡到只作一层纸上的痕 */
.auth-sign {
  position: absolute;
  right: 2.4vw;
  bottom: 5vh;
  z-index: 2;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--kai);
  font-size: 11px;
  letter-spacing: 5px;
  color: rgba(226, 214, 188, .32);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* 窄屏：茶笺居中，落款落到纸下方 */
@media (max-width: 860px) {
  .auth-page {
    flex-direction: column;
    justify-content: center;
    padding: 30px 0;
    background-position: 44% center;
  }
  .auth-page::after {
    background: radial-gradient(120% 100% at 50% 44%, rgba(6, 13, 9, .10) 40%, rgba(3, 9, 6, .62) 100%);
  }
  .auth-main {
    max-width: none;
    width: calc(100% - 64px);
    margin: 0;
    padding: 36px 28px 30px;
  }
  .auth-main::before { inset: -12px; filter: blur(18px); }
  .auth-main::after { inset: 10px; }
  .auth-frame, .auth-branch, .auth-stamp { display: none; }
  .auth-title { font-size: 28px; letter-spacing: 9px; }
  .auth-bottom { margin-top: 20px; }
  .auth-sign {
    position: static;
    writing-mode: horizontal-tb;
    margin: 20px 0 0;
    letter-spacing: 2.5px;
    text-align: center;
  }
}


/* ============================================================
   19. 房间号检索入口页
   ============================================================ */
.join-wrap {
  position: relative;
  min-height: calc(100vh - 64px);
  margin: -36px -26px -48px;      /* 抵消 .container 内边距，整屏铺满 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 22px;
  background:
    var(--noise),
    radial-gradient(circle at 50% -10%, rgba(184, 147, 90, .09), transparent 46%);
  background-size: 180px 180px, auto;
}
.join-panel {
  width: 100%;
  max-width: 520px;
  text-align: center;
  padding: 54px 46px 46px;
  background: rgba(255, 253, 248, .84);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: 0 30px 60px -34px rgba(58, 39, 23, .3);
  animation: cy-rise .6s cubic-bezier(.22, .61, .36, 1) both;
}
.join-seal {
  width: 46px; height: 46px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 23px;
  color: #fff4e8;
  background: var(--red-seal);
  border-radius: 5px;
  transform: rotate(-3deg);
  box-shadow: 0 8px 20px -10px rgba(158, 61, 50, .6);
}
.join-title {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.7;
  letter-spacing: 3px;
  color: var(--brown-deep);
  margin-bottom: 10px;
}
.join-sub {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--brown-light);
  margin-bottom: 34px;
}
.join-input {
  width: 100%;
  padding: 16px 10px;
  text-align: center;
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 14px;
  text-indent: 14px;
  color: var(--ink);
  background: rgba(255, 253, 248, .6);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  transition: border-color .2s, box-shadow .2s;
}
.join-input { color: #cbbfa6; letter-spacing: 14px; text-indent: 14px; font-size: 24px; }
.join-panel .btn { margin-top: 22px; }
.join-note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-soft);
  font-size: 12.5px;
  letter-spacing: .5px;
  color: var(--brown-light);
}

/* 弹出提示框（房间号不存在等） */
.cy-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 22, 15, .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cy-modal.show { display: flex; }
.cy-modal-card {
  width: 100%;
  max-width: 330px;
  padding: 34px 28px 26px;
  text-align: center;
  background: rgba(255, 253, 248, .97);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: 0 34px 70px -34px rgba(36, 26, 18, .55);
  animation: cy-rise .32s cubic-bezier(.22, .61, .36, 1) both;
}
.cy-modal-seal {
  width: 40px; height: 40px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  color: #fff4e8;
  background: var(--red-seal);
  border-radius: 4px;
  transform: rotate(-3deg);
}
.cy-modal-msg {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--ink);
  margin-bottom: 24px;
}

/* 封禁提示弹窗的标题（比普通确认弹窗多一行醒目标题） */
.cy-ban-title {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--brown-deep);
}

/* 弹窗里的按钮并排（取消 / 确定） */
.cy-modal-acts { display: flex; gap: 10px; }
.cy-modal-acts .btn { flex: 1; }

/* ============================================================
   20. 茶局分享邀请页
   ============================================================ */
.invite-wrap {
  position: relative;
  min-height: calc(100vh - 64px);
  margin: -36px -26px -48px;      /* 抵消 .container 内边距，整屏铺满 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 46px 22px;
  background:
    var(--noise),
    radial-gradient(circle at 50% 0%, rgba(110, 138, 114, .07), transparent 48%);
  background-size: 180px 180px, auto;
}
.invite-card {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding: 44px 44px 38px;
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .92), rgba(249, 244, 233, .84));
  background-size: 180px 180px, auto;
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: 0 34px 66px -34px rgba(58, 39, 23, .32);
  animation: cy-rise .6s cubic-bezier(.22, .61, .36, 1) both;
}
/* 淡水墨暗纹：一角极淡的墨晕，克制不花哨 */
.invite-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 46% at 100% 0%, rgba(58, 39, 23, .05), transparent 70%);
  border-radius: var(--r-panel);
  pointer-events: none;
}
.invite-card > * { position: relative; z-index: 1; }
.invite-head { text-align: center; margin-bottom: 30px; }
.invite-seal {
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 23px;
  color: #fff4e8;
  background: var(--red-seal);
  border-radius: 5px;
  transform: rotate(-3deg);
  box-shadow: 0 8px 20px -10px rgba(158, 61, 50, .6);
}
.invite-name {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 9px;
  text-indent: 9px;
  color: var(--brown-deep);
}
.invite-en {
  font-family: var(--serif);
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}
/* 信息行：细金线分割 */
.invite-rows { border-top: 1px solid var(--hair-soft); }
.invite-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--hair-soft);
}
.invite-row dt {
  flex: 0 0 82px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--brown-light);
}
.invite-row dd { flex: 1; font-size: 15px; color: var(--ink); }
.invite-row dd.is-title {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--brown-deep);
  font-weight: 700;
}
/* 房号展示 */
.room-show {
  margin: 26px 0 4px;
  text-align: center;
}
.room-show-label {
  font-size: 12.5px;
  letter-spacing: 3px;
  color: var(--brown-light);
  margin-bottom: 14px;
}
.room-digits { display: flex; justify-content: center; gap: 9px; }
.room-digits span {
  width: 44px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 700;
  color: var(--brown-deep);
  background: rgba(184, 147, 90, .08);
  border: 1px solid var(--hair);
  border-radius: var(--r-ctl);
}
.invite-actions { margin-top: 28px; display: flex; flex-direction: column; gap: 11px; }
.invite-actions .btn { letter-spacing: 3px; }
.invite-tip {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--brown-light);
}
@media (max-width: 520px) {
  .invite-card { padding: 34px 22px 30px; }
  .invite-row dt { flex: 0 0 64px; font-size: 12px; letter-spacing: 1px; }
  .room-digits { gap: 6px; }
  .room-digits span { width: 37px; height: 46px; font-size: 22px; }
}

/* ---------- 21. 茶局详情页：房间号小卡 ---------- */
.room-card {
  flex-shrink: 0;
  min-width: 210px;
  padding: 16px 18px;
  text-align: center;
  background: rgba(184, 147, 90, .06);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
}
.room-card-label {
  font-size: 11.5px;
  letter-spacing: 2.5px;
  color: var(--brown-light);
  margin-bottom: 8px;
}
.room-card-no {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 5px;
  text-indent: 5px;
  color: var(--brown-deep);
  margin-bottom: 12px;
}
.room-card-tip { font-size: 11.5px; color: var(--brown-light); margin-top: 10px; line-height: 1.7; }

/* ---------- 22. 图表条 ---------- */
.bar-chart { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { width: 112px; font-size: 13.5px; color: var(--brown-deep); text-align: right; }
.bar-track { flex: 1; height: 18px; background: rgba(240, 233, 220, .8); border: 1px solid var(--hair-soft); border-radius: 9px; overflow: hidden; }
.bar-fill {
  height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px;
  color: #fdfbf6;
  font-size: 11.5px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--tea-green-deep), var(--gold));
  transition: width .8s ease;
}

/* ============================================================
   23. 日历（月视图 / 周视图）
   ============================================================ */
.cal-wrap {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr);
  gap: 22px;
  align-items: start;
}

/* 日历主面板 */
.calendar {
  position: relative;
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .92), rgba(249, 244, 233, .82));
  background-size: 180px 180px, auto;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: 0 22px 48px -28px rgba(58, 39, 23, .28);
}

/* 顶部：墨漆月令栏 */
.cal-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--paper);
  background: linear-gradient(135deg, #241a12 0%, #3d2c1b 55%, #2a2114 100%);
  border-bottom: 1px solid var(--hair);
}
.cal-head::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 50%, transparent);
  opacity: .7;
}
.cal-head-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cal-month-big {
  font-family: var(--serif);
  font-size: 33px;
  line-height: 1;
  color: var(--gold-light);
  letter-spacing: 5px;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .4);
}
.cal-month-sub {
  font-size: 12.5px;
  letter-spacing: 2px;
  color: rgba(248, 244, 236, .7);
}
.cal-month-sub b { color: var(--gold-light); font-weight: 600; }

/* 顶部右侧：视图切换 + 翻页 */
.cal-head-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cal-head-r .cal-divider { width: 1px; height: 20px; background: var(--hair); }

/* 导航按钮：金色细描边 */
.cal-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cal-nav button, .cal-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 32px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: rgba(248, 244, 236, .82);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--r-ctl);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.cal-nav button:hover, .cal-nav a:hover { background: rgba(216, 184, 120, .16); color: #fff; border-color: var(--hair); }
.cal-nav .is-on { background: var(--gold); border-color: var(--gold-light); color: #33260f; font-weight: 700; }

/* 星期表头 */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day-head {
  padding: 11px 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 4px;
  color: var(--brown);
  background: rgba(58, 39, 23, .035);
  border-bottom: 1px solid var(--hair-soft);
  border-right: 1px solid var(--hair-soft);
}
.cal-day-head:nth-child(7) { border-right: none; }
.cal-day-head.wk { color: var(--red-seal); }

/* 日期格 */
.cal-cell {
  position: relative;
  min-height: 108px;
  padding: 8px 9px 10px;
  cursor: pointer;
  border-right: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
  transition: background .22s;
  overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: rgba(184, 147, 90, .06); }
.cal-cell.other-month { background: rgba(240, 233, 220, .34); }
.cal-cell.other-month .cal-date { color: #b6a99a; font-weight: 400; }
.cal-cell.today { background: linear-gradient(180deg, rgba(216, 184, 120, .13), rgba(216, 184, 120, .04)); }

.cal-date {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--brown-deep);
  line-height: 1.3;
}
.cal-cell.other-month .cal-date { font-size: 15px; }

/* 今日朱砂印 */
.cal-seal {
  position: absolute;
  top: 6px; right: 6px;
  width: 25px; height: 25px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: #fff2e3;
  background: var(--red-seal);
  border-radius: 3px;
  transform: rotate(-5deg);
  box-shadow: 0 2px 6px -2px rgba(158, 61, 50, .6);
}

/* 节气小签 */
.cal-jq {
  display: inline-block;
  margin-top: 2px;
  padding: 0 6px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--tea-green-deep);
  background: rgba(110, 138, 114, .12);
  border: 1px solid rgba(110, 138, 114, .26);
  border-radius: 2px;
}

/* 茶局小签（按时段分色） */
.cal-event {
  display: block;
  margin-top: 4px;
  padding: 1px 6px;
  font-size: 11.5px;
  line-height: 1.55;
  text-decoration: none;
  border-radius: 2px;
  border-left: 2px solid var(--tea-green-deep);
  background: rgba(110, 138, 114, .12);
  color: #3d5743;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter .2s;
}
.cal-event:hover { filter: brightness(.95); }
.cal-event.slot-a { border-left-color: var(--gold); background: rgba(184, 147, 90, .15); color: #7d5c1d; }
.cal-event.slot-e { border-left-color: #6b577a; background: rgba(107, 87, 122, .11); color: #4c3b58; }

/* 周视图格子 */
.cal-grid.week .cal-cell { min-height: 200px; cursor: default; }
.cal-grid.week .cal-date { font-size: 15px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cal-grid.week .cal-dow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--brown-light);
  margin-left: auto;
}
.cal-grid.week .cal-event { white-space: normal; padding: 5px 8px; margin-top: 7px; line-height: 1.5; }
.cal-grid.week .cal-event b { display: block; font-size: 11px; opacity: .8; font-weight: 600; }

/* 侧栏：本月茶事 */
.cal-aside {
  position: relative;
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .92), rgba(249, 244, 233, .82));
  background-size: 180px 180px, auto;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  padding: 20px 20px 14px;
  box-shadow: 0 22px 48px -28px rgba(58, 39, 23, .28);
}
.cal-aside-h {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 3px;
  color: var(--brown-deep);
  padding-bottom: 13px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hair-soft);
}
.cal-aside-h span { font-family: var(--sans); font-size: 11.5px; letter-spacing: 1px; color: var(--brown-light); font-weight: 400; }

/* 茶事条目 */
.ag-item {
  display: flex; gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--hair-soft);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.ag-item:last-child { border-bottom: none; }
.ag-item:hover { background: rgba(184, 147, 90, .06); }
.ag-date {
  flex-shrink: 0;
  width: 46px;
  text-align: center;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
  padding: 4px 0 3px;
  background: rgba(240, 233, 220, .5);
}
.ag-date b { display: block; font-family: var(--serif); font-size: 18px; color: var(--brown-deep); line-height: 1.1; }
.ag-date i { font-style: normal; font-size: 10.5px; color: var(--brown-light); letter-spacing: 1px; }
.ag-body { flex: 1; min-width: 0; }
.ag-title { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.ag-meta { display: block; font-size: 12px; color: var(--brown-light); }
.ag-empty { padding: 26px 0; text-align: center; color: var(--brown-light); font-size: 13.5px; }

.cal-tip { color: var(--brown-light); font-size: 12.5px; letter-spacing: .5px; margin-top: 14px; }

/* ============================================================
   24. 移动端底部导航
   ============================================================ */
.mobile-tabbar { display: none; }

/* ============================================================
   25. 入场与页面切换动效
   ============================================================ */
@keyframes cy-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cy-page {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero, .card, .stat-card, .calendar, .cal-aside, .login-panel, .join-panel, .invite-card, .quick-btn, .rec-card {
  animation: cy-rise .55s cubic-bezier(.22, .61, .36, 1) both;
}
.grid > *:nth-child(1) { animation-delay: .04s; }
.grid > *:nth-child(2) { animation-delay: .10s; }
.grid > *:nth-child(3) { animation-delay: .16s; }
.grid > *:nth-child(4) { animation-delay: .22s; }
.grid > *:nth-child(5) { animation-delay: .28s; }
.grid > *:nth-child(6) { animation-delay: .34s; }
.cal-wrap > *:nth-child(2) { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .hero, .card, .stat-card, .calendar, .cal-aside, .login-panel, .join-panel, .invite-card, .quick-btn, .rec-card { animation: none; }
}

/* ============================================================
   26. 响应式：电脑 EXE 窗口缩放 + 手机触屏
   ============================================================ */
@media (max-width: 1180px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .cal-wrap { grid-template-columns: 1fr; }
  .cal-aside { order: 2; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; letter-spacing: 6px; }
  .container { padding: 26px 16px 34px; }
  .join-wrap, .invite-wrap { margin: -26px -16px -34px; }
  .cal-cell { min-height: 84px; padding: 6px; }
  .cal-date { font-size: 14px; }
  .cal-month-big { font-size: 28px; }
  .nav-menu { margin-left: 10px; }
}
@media (max-width: 640px) {
  .navbar { padding: 0 14px; }
  .navbar-inner { flex-wrap: wrap; height: auto; padding: 8px 0 4px; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-menu {
    display: none;
    width: 100%;
    margin: 8px 0 0 0;
    flex-direction: column;
    gap: 1px;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 11px 12px; }
  .nav-menu a::after { display: none; }
  .nav-menu a.active { color: var(--gold-light); background: rgba(216, 184, 120, .10); }
  .nav-user { width: 100%; justify-content: flex-end; padding-bottom: 8px; }
  .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
  .hero { padding: 34px 24px; }
  .hero h1 { font-size: 26px; letter-spacing: 5px; }
  .card { padding: 18px; }
  .join-wrap, .invite-wrap { min-height: 0; margin: -26px -16px -34px; padding: 34px 16px 100px; }

  /* 移动端底部 tabbar */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    background: rgba(30, 22, 15, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--hair);
  }
  .mobile-tabbar a {
    flex: 1;
    text-align: center;
    color: rgba(248, 244, 236, .66);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .5px;
    padding: 4px 2px;
    transition: color .2s;
  }
  .mobile-tabbar a .icon { display: block; font-size: 19px; line-height: 1.4; }
  .mobile-tabbar a .icon svg { width: 21px; height: 21px; display: block; margin: 0 auto; }
  .mobile-tabbar a.active { color: var(--gold-light); }
  body { padding-bottom: 68px; }

  /* 触屏加大点击区域 */
  .btn { padding: 12px 18px; font-size: 15px; }
  .form-control { padding: 12px 14px; font-size: 16px; }
  .cal-head { padding: 14px 14px; flex-wrap: wrap; gap: 10px; }
  .cal-cell { min-height: 74px; padding: 4px 5px 6px; }
  .cal-date { font-size: 13px; }
  .cal-seal { width: 21px; height: 21px; font-size: 10px; top: 4px; right: 4px; }
  .cal-jq { font-size: 9.5px; padding: 0 3px; letter-spacing: 0; }
  .cal-event { font-size: 10.5px; padding: 1px 4px; border-left-width: 2px; margin-top: 3px; }
  .cal-day-head { font-size: 12px; letter-spacing: 1px; }
  .cal-grid.week .cal-cell { min-height: 150px; }
}

/* ============================================================
   27. 购物车 / 我的订单 / 收货地址
   ============================================================ */
.cart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.cart-thumb {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 22px; color: var(--gold);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
  background: rgba(184, 147, 90, .05);
}
/* 商品有实拍照片时，照片填满这个小方框（没照片才用上面的字形占位） */
.cart-thumb-img { padding: 0; overflow: hidden; background: none; }
.cart-thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-info { flex: 1; min-width: 0; }
.cart-name { color: var(--brown-deep); font-weight: 600; font-size: 14.5px; }
.cart-meta { color: var(--brown-light); font-size: 12.5px; margin-top: 2px; }
.cart-qty { display: flex; align-items: center; gap: 6px; }
.cart-qty .btn { padding: 2px 9px; line-height: 1.5; }
.cart-num { min-width: 24px; text-align: center; font-weight: 600; color: var(--brown-deep); }
.cart-sub { width: 84px; text-align: right; color: var(--red-seal); font-weight: 600; }
.cart-del { color: var(--brown-light); font-size: 12.5px; text-decoration: none; }
.cart-del:hover { color: var(--red-seal); }

.cart-sum { margin: 18px 0 14px; border-top: 1px solid var(--hair-soft); padding-top: 14px; }
.cart-sum > div { display: flex; justify-content: space-between; font-size: 14px; color: var(--brown-light); padding: 3px 0; }
.cart-total { color: var(--brown-deep) !important; }
.cart-total span:last-child { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--red-seal); }

.addr-line {
  padding: 12px 14px;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
  background: rgba(184, 147, 90, .04);
  font-size: 14px;
}

.check-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--brown); cursor: pointer; }
.check-line input { width: 16px; height: 16px; accent-color: var(--brown); }

.addr-card { padding: 14px 0; border-bottom: 1px solid var(--hair-soft); }
.addr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--brown-deep); }
.addr-body { color: var(--brown-light); font-size: 13.5px; margin: 6px 0 10px; }
.addr-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* 兑换页选择收货地址：整行可点选 */
.addr-pick {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--hair-soft); border-radius: var(--r-ctl);
  background: rgba(184, 147, 90, .04);
  font-size: 14px; color: var(--brown); cursor: pointer;
}
.addr-pick:hover { border-color: var(--gold); background: rgba(184, 147, 90, .08); }
.addr-pick input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--brown); flex: none; }

.order-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair-soft); margin-bottom: 6px;
}
.order-no { font-family: var(--serif); color: var(--brown-deep); font-size: 15px; letter-spacing: .5px; }
.order-time { color: var(--brown-light); font-size: 12.5px; margin-left: 10px; }
.order-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair-soft);
}
.order-addr { font-size: 13.5px; color: var(--brown); }
.order-right { display: flex; align-items: center; gap: 12px; }
.order-total { font-size: 14px; color: var(--brown-light); }
.order-total b { font-family: var(--serif); font-size: 20px; color: var(--red-seal); }

@media (max-width: 640px) {
  .cart-row { flex-wrap: wrap; }
  .cart-info { flex: 1 1 60%; }
  .cart-sub { width: auto; }
  .order-foot { align-items: flex-start; }
}

/* ============================================================
   28. 首页 · APP 式快捷功能按钮组（3D 浮雕茶牌）
   ============================================================ */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.quick-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 12px 19px;
  border: 1px solid rgba(216, 184, 120, .44);
  border-radius: var(--r-btn);
  color: #f3e8d4;
  text-decoration: none;
  background-color: var(--brown-deep);
  background-image:
    linear-gradient(180deg, rgba(255, 246, 228, .22), rgba(255, 246, 228, 0) 48%),
    var(--wood),
    linear-gradient(180deg, #4b3520, #281a0d);
  background-size: auto, 120px 120px, auto;
  box-shadow: var(--emboss-up);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease,
              color .22s ease, border-color .22s ease;
}
.quick-btn:hover {
  transform: translateY(-3px);
  color: #fff8ea;
  border-color: var(--gold-light);
  box-shadow: var(--emboss-hover);
}
.quick-btn:active {
  transform: translateY(1px);
  box-shadow: var(--emboss-down);
}
.quick-btn .q-icon { width: 30px; height: 30px; color: var(--gold-light); }
.quick-btn .q-icon svg { width: 100%; height: 100%; display: block; }
.quick-btn .q-txt { font-size: 14.5px; letter-spacing: 2.5px; text-indent: 2.5px; font-weight: 600; }

/* 逐格错开淡入 */
.quick-grid > *:nth-child(1) { animation-delay: .04s; }
.quick-grid > *:nth-child(2) { animation-delay: .10s; }
.quick-grid > *:nth-child(3) { animation-delay: .16s; }
.quick-grid > *:nth-child(4) { animation-delay: .22s; }
.quick-grid > *:nth-child(5) { animation-delay: .28s; }

/* ============================================================
   29. 首页 · 推荐茶品（横向滚动）
   ============================================================ */
.rec-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rec-scroll::-webkit-scrollbar { height: 7px; }
.rec-card {
  flex: 0 0 216px;
  scroll-snap-align: start;
  display: block;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  background:
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .90), rgba(249, 244, 233, .72));
  background-size: 180px 180px, auto;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .66),
    0 1px 2px rgba(58, 39, 23, .05),
    0 8px 18px -12px rgba(58, 39, 23, .18),
    0 22px 40px -26px rgba(58, 39, 23, .26);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rec-card:hover {
  transform: translateY(-4px);
  border-color: var(--hair);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(58, 39, 23, .05),
    0 14px 26px -14px rgba(58, 39, 23, .22),
    0 30px 52px -28px rgba(58, 39, 23, .32);
}
.rec-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--gold);
  background: linear-gradient(135deg, var(--paper-2), #e6dcc6);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
}
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-thumb svg { width: 46px; height: 46px; }

/* 茶品档案库：茶品照片 */
.tea-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--paper-2), #e6dcc6);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
}
.tea-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tea-thumb-ph { font-family: var(--serif); font-size: 42px; color: var(--gold); opacity: .5; }

/* 茶品档案库：上半茶叶 / 下半冲茶视频，区块小标题 */
.archive-sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 14px;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 3px;
  color: var(--brown-deep);
}
.archive-sec-h::before {
  content: "";
  flex-shrink: 0;
  width: 3px; height: 16px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.archive-sec-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair-soft);
}

/* 冲茶视频：两列视频卡片，窄屏一列 */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.video-card { margin-bottom: 0; }
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  overflow: hidden;
  background: #1a1209;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
}
.video-frame video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: #1a1209;
}
.video-meta {
  font-size: 12.5px;
  letter-spacing: .5px;
  color: var(--brown-light);
  margin-bottom: 8px;
}
.video-tip {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--brown-light);
  background: var(--paper);
  border-radius: var(--r-ctl);
}
@media (max-width: 720px) {
  .video-grid { grid-template-columns: 1fr; }
}
.rec-name { display: block; font-family: var(--serif); font-size: 16px; letter-spacing: 1.5px; color: var(--brown-deep); }
.rec-aroma { display: block; font-size: 12.5px; color: var(--brown-light); margin-top: 5px; letter-spacing: .5px; }
.rec-origin { display: block; font-size: 12px; color: var(--brown-light); margin-top: 6px; opacity: .82; }

/* 首页中部两块面板：小屏自动竖排 */
@media (max-width: 900px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  /* 手机端：快捷按钮自动换行（2 列），按钮自动放大 */
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .quick-btn { padding: 18px 10px 16px; gap: 8px; }
  .quick-btn .q-icon { width: 26px; height: 26px; }
  .quick-btn .q-txt { font-size: 14px; letter-spacing: 1.5px; text-indent: 1.5px; }
  .rec-card { flex: 0 0 176px; }
  .hero { padding: 32px 22px; }
  .hero h1 { font-size: 28px; letter-spacing: 8px; text-indent: 8px; }
  .hero p { font-size: 14px; letter-spacing: 1px; }
}

/* ============================================================
   30. 首页 · 即将开始条目 / 消息条目 / 房间号弹窗
   ============================================================ */
/* 条目行：左侧整条可点，右侧「查看房间号」按钮独立，避免嵌套链接 */
.ag-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--hair-soft);
}
.ag-wrap:last-child { border-bottom: none; }
.ag-wrap .ag-item {
  flex: 1;
  min-width: 0;
  border-bottom: none;
  border-radius: var(--r-ctl);
}

/* 消息条目可点击：柔和提亮 */
a.msg-item {
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-ctl);
  transition: background .2s;
}
a.msg-item:hover { background: rgba(184, 147, 90, .07); }

/* 房间号弹窗：容纳 6 位数字，略微加宽 */
.cy-modal-card.room-modal { max-width: 382px; }
.cy-modal-card.room-modal .room-digits { margin-top: 2px; }

/* ============================================================
   微信风格骨架层（新增，不影响原有国风样式）
   设计原则：保留茶约品牌主色（深茶褐 #3A2717 / 茶褐 #6B4A2A / 米白 #F8F4EC），
            只借用微信的排版语言与布局骨架：
            · 白底列表 + 浅灰页背景
            · 固定单行顶部 + 4 项底部 TabBar
            · 搜索框 + 图标宫格 + 聊天式列表卡片
   ============================================================ */

/* ---------- body 骨架 ---------- */
.app-body {
  background-color: #F7F7F7;
  background-image: none;
  padding-top: 52px;     /* 给顶部导航让位 */
  padding-bottom: 60px;  /* 给底部 TabBar 让位 */
}
.guest-body {
  /* 登录/注册页保留原国风底色 */
}

/* ---------- 单行顶部导航（wx-header） ---------- */
.wx-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 52px;
  background: #FFFFFF;
  border-bottom: 0.5px solid #E5E5E5;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  /* 磨砂质感，保留一点国风 */
  backdrop-filter: blur(12px);
}
.wx-header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--brown-deep);
  font-weight: 700;
  font-family: var(--serif);
  font-size: 17px;
  flex-shrink: 0;
}
.wx-header-logo .brand-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--red-seal);
  color: #fff;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  border-radius: 3px;
}
.wx-header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.wx-header-nav a {
  padding: 0 16px;
  line-height: 52px;
  color: #666;
  text-decoration: none;
  font-size: 15px;
  position: relative;
  transition: color .2s;
}
.wx-header-nav a:hover { color: var(--brown); }
.wx-header-nav a.on {
  color: var(--brown-deep);
  font-weight: 600;
}
.wx-header-nav a.on::after {
  content: "";
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  background: var(--brown-deep);
  border-radius: 2px;
}
.wx-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 13px;
}
.wx-points {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--brown);
  text-decoration: none;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(107, 74, 42, .08);
  border-radius: 12px;
}
.wx-nick {
  color: #333;
  text-decoration: none;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  color: #999;
  text-decoration: none;
  border-radius: 50%;
  transition: background .2s, color .2s;
}
.wx-logout:hover {
  color: var(--red-seal);
  background: rgba(158, 61, 50, .08);
}

/* ---------- 主容器 ---------- */
.wx-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 14px 20px;
}

/* ---------- 底部固定 TabBar（wx-tabbar） ---------- */
.wx-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: 60px;
  background: #FFFFFF;
  border-top: 0.5px solid #E5E5E5;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.wx-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #B2B2B2;
  text-decoration: none;
  transition: color .2s, background .2s;
  position: relative;
  margin: 4px 6px;
  border-radius: 10px;
}
.wx-tab-ico {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wx-tab-ico svg {
  width: 24px; height: 24px;
}
.wx-tab-txt {
  font-size: 10px;
  line-height: 1;
}
.wx-tab:hover {
  color: #888;
}
.wx-tab.on {
  color: var(--brown-deep);
  background: rgba(107, 74, 42, .08);
}

/* ---------- 圆角搜索框（wx-search） ---------- */
.wx-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F2F2F2;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
  color: #B2B2B2;
  font-size: 14px;
  cursor: text;
  border: none;
  width: 100%;
  outline: none;
  transition: background .2s;
}
.wx-search svg {
  flex-shrink: 0;
  width: 16px; height: 16px;
}

/* ---------- 图标宫格（wx-grid） ---------- */
/* 八个入口排成两行，每行四个 */
.wx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #FFFFFF;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.wx-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 8px 16px;
  text-decoration: none;
  color: #191919;
  font-size: 13px;
  transition: background .15s;
  border-right: 0.5px solid #F0F0F0;
}
/* 每行第四个别再画右边框（画了就在面板内侧多出一道线），第一行的下边压一道细线跟第二行分开 */
.wx-grid-item:nth-child(4n) { border-right: none; }
.wx-grid-item:nth-child(-n+4) { border-bottom: 0.5px solid #F0F0F0; }
.wx-grid-item:active { background: #F5F5F5; }
.wx-grid-item svg {
  width: 28px; height: 28px;
  color: var(--brown);
  stroke-width: 1.6;
}

/* ---------- 微信风格聊天式列表卡片 ---------- */
.wx-list {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.wx-list-head {
  padding: 14px 16px 8px;
  font-size: 13px;
  color: #999;
  letter-spacing: 0.5px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wx-list-head a {
  font-size: 13px;
  color: var(--brown);
  text-decoration: none;
}
.wx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid #E5E5E5;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background .12s;
}
.wx-item:last-child { border-bottom: none; }
.wx-item:active { background: #F8F8F8; }
.wx-item-avatar {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-deep) 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  position: relative;
}
.wx-item-avatar svg {
  width: 26px; height: 26px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 1.6;
}
.wx-item-avatar .badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: #FA5151;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  border: 2px solid #FFFFFF;
  font-family: var(--sans);
  font-weight: 600;
}
.wx-item-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.wx-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.wx-item-title {
  font-size: 17px;
  font-weight: 500;
  color: #191919;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-item-date {
  flex-shrink: 0;
  font-size: 12px;
  color: #B2B2B2;
}
.wx-item-sub {
  font-size: 14px;
  color: #B2B2B2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-item-actions {
  flex-shrink: 0;
  margin-left: 4px;
}

/* 微信式小按钮 */
.wx-btn {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
}
.wx-btn-primary {
  background: #07C160;  /* 微信绿 */
  color: #FFFFFF;
}
.wx-btn-brown {
  background: var(--brown);
  color: #FFFFFF;
}
.wx-btn:active { opacity: .85; transform: scale(.96); }

/* 微信服务通知样式 */
.wx-notify-avatar {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #F2F2F2;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wx-notify-avatar svg {
  width: 24px; height: 24px;
  stroke: var(--brown);
  fill: none;
  stroke-width: 1.6;
}
.wx-item-title-tag {
  font-size: 17px;
  font-weight: 500;
  color: #191919;
}

/* ---------- 空状态适配 ---------- */
.wx-empty {
  padding: 40px 20px;
  text-align: center;
  color: #B2B2B2;
  font-size: 14px;
}

/* ---------- 页面二级标题 ---------- */
.wx-section-title {
  font-size: 13px;
  color: #999;
  padding: 12px 4px 6px;
  letter-spacing: 0.5px;
}

/* ---------- 电脑端适配：宽屏下 TabBar 不固定到底部，改为侧栏 ---------- */
@media (min-width: 768px) {
  /* PC 大屏：导航改为左侧竖栏（见文件末尾「电脑端左侧导航」） */
  .app-body {
    padding-bottom: 24px;
    padding-top: 58px;
  }
  .wx-main {
    max-width: 940px;
    padding: 18px 24px 28px;
  }
}

/* ---------- 小屏手机适配 ---------- */
@media (max-width: 360px) {
  .wx-header-nav a { padding: 0 10px; font-size: 14px; }
  .wx-nick { display: none; }
}

/* ============================================================
   新中式统一覆盖：顶部深色磨砂 · 宣纸底 · 底部暖色 TabBar
   （后用规则覆盖前面的微信灰白配色，保持品牌调性）
   ============================================================ */
.app-body {
  background-color: var(--paper);
  background-image:
    var(--noise),
    radial-gradient(circle at 14% -4%, rgba(184, 147, 90, .07), transparent 40%),
    radial-gradient(circle at 94% 102%, rgba(110, 138, 114, .06), transparent 40%);
  background-size: 180px 180px, auto, auto;
}

.wx-header {
  background: rgba(30, 22, 15, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 1px 0 rgba(216, 184, 120, .10) inset;
}
.wx-header-logo { color: var(--gold-light); }
.wx-header-logo .brand-name { color: var(--paper); }
.wx-header-nav a { color: rgba(248, 244, 236, .60); }
.wx-header-nav a:hover { color: var(--paper); }
.wx-header-nav a.on { color: var(--gold-light); }
.wx-header-nav a.on::after { background: var(--gold); }
.wx-header-right { color: rgba(248, 244, 236, .82); }
.wx-points { color: var(--gold-light); background: rgba(184, 147, 90, .16); }
.wx-nick { color: rgba(248, 244, 236, .88); }
.wx-logout { color: rgba(248, 244, 236, .58); }
.wx-logout:hover { color: var(--gold-light); }

.wx-tabbar {
  background: var(--paper);
  border-top: 1px solid var(--hair-soft);
  box-shadow: 0 -8px 24px -18px var(--shadow);
}
.wx-tab { color: var(--brown-light); }
.wx-tab:hover { color: var(--brown); }
.wx-tab.on {
  color: var(--brown-deep);
  background: rgba(107, 74, 42, .09);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
}

.wx-search {
  background: rgba(107, 74, 42, .055);
  border: 1px solid var(--hair-soft);
  color: var(--brown-light);
}
.wx-search input { color: var(--ink); flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit; }

/* ---------- 微信骨架按钮统一改为国风茶牌质感 ---------- */
.wx-btn {
  padding: 6px 14px;
  font-size: 12.5px;
  border-radius: var(--r-ctl);
  background: var(--paper-2);
  color: var(--brown-deep);
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 10px -8px var(--shadow);
}
.wx-btn-primary { background: var(--tea-green-deep); color: var(--paper); border-color: transparent; }
.wx-btn-brown { background: var(--brown); color: var(--paper); border-color: transparent; }
.wx-btn-line { background: transparent; color: var(--brown); border: 1px solid var(--hair); box-shadow: none; }
.wx-btn-line:hover { color: var(--brown-deep); border-color: var(--gold); }

.wx-grid {
  background: var(--paper);
  border-radius: var(--r-panel);
  border: 1px solid var(--hair-soft);
  box-shadow: 0 10px 26px -20px var(--shadow);
}
.wx-grid-item { color: var(--brown-deep); border-right-color: var(--hair-soft); border-bottom-color: var(--hair-soft); }
.wx-grid-item:active { background: rgba(184, 147, 90, .08); }

.wx-list {
  background: var(--paper);
  border-radius: var(--r-panel);
  border: 1px solid var(--hair-soft);
  box-shadow: 0 10px 26px -20px var(--shadow);
}
.wx-list-head { color: var(--brown-light); letter-spacing: 1px; }
.wx-item { border-bottom-color: var(--hair-soft); }
.wx-item:active { background: rgba(184, 147, 90, .06); }
.wx-item-title { color: var(--ink); }
.wx-item-sub, .wx-item-date { color: var(--brown-light); }

/* ---------- 手机端：隐藏顶部横向导航（只留品牌 + 右侧功能区） ---------- */
@media (max-width: 767px) {
  .wx-header-nav { display: none; }
}

/* ---------- 顶部导航右侧：头像印章 · 等级徽标 · 后台入口 ---------- */
.wx-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--brown) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  text-decoration: none;
}
.wx-role {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: rgba(184, 147, 90, .18);
  color: var(--gold-light);
  border: 1px solid rgba(184, 147, 90, .30);
  white-space: nowrap;
}
.wx-admin-link {
  font-size: 12.5px; color: var(--gold-light); text-decoration: none;
  padding: 3px 10px; border: 1px solid rgba(184, 147, 90, .42); border-radius: 11px;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.wx-admin-link:hover { color: #fff; background: rgba(184, 147, 90, .22); }

/* ---------- TabBar「消息」未读红点 ---------- */
.wx-tab .tab-badge {
  position: absolute; top: 2px; left: 50%; margin-left: 4px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: linear-gradient(180deg, #b04a37, var(--red-seal));
  color: #fff7ef; border-radius: 8px;
  font-size: 10px; line-height: 15px; text-align: center;
  font-family: var(--sans); font-weight: 600;
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .28);
}

/* ---------- 系统公告条（首页） ---------- */
.notice-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; margin-bottom: 16px;
  background-color: var(--paper-2);
  border: 1px solid var(--hair-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-panel);
  font-size: 13.5px; color: var(--brown);
  box-shadow: 0 6px 16px -12px var(--shadow);
  text-decoration: none;
}
.notice-bar .notice-tag { font-family: var(--serif); color: var(--red-seal); flex-shrink: 0; }
.notice-bar .notice-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 首页横幅（淡墨山水 + 茶诗） ---------- */
.home-hero {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  padding: 34px 26px 28px;
  margin-bottom: 16px;
  background-color: var(--paper);
  background-image: var(--landscape);
  background-size: cover;
  background-position: center bottom;
  border: 1px solid var(--hair);
  box-shadow: 0 14px 34px -22px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.home-hero-verse {
  font-family: var(--serif);
  color: var(--brown-deep);
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 1.7;
}
.home-hero-sub {
  color: var(--brown-light);
  font-size: 12.5px;
  letter-spacing: 2px;
  margin-top: 10px;
}
.home-hero-search { margin: 20px 0 0; }

/* ---------- 首页轻量统计条 ---------- */
.home-stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.home-stat-card {
  display: block;
  background-color: var(--paper);
  background-image: var(--noise);
  background-size: 180px 180px;
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  padding: 16px 18px;
  text-decoration: none;
  box-shadow: 0 10px 24px -18px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: box-shadow .2s, transform .2s;
}
.home-stat-card:hover {
  box-shadow: 0 16px 32px -20px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .7);
  transform: translateY(-2px);
}
.home-stat-num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--brown-deep);
  line-height: 1.1;
}
.home-stat-label { font-size: 12.5px; color: var(--brown-light); letter-spacing: 1px; margin-top: 4px; }

/* ============================================================
   后台外壳：左侧深茶褐侧边菜单 + 主区（PC 侧栏 / 手机横向 tab）
   ============================================================ */
.app-shell { display: flex; gap: 18px; align-items: flex-start; }
.app-side {
  width: 196px; flex-shrink: 0;
  background: var(--brown-deep);
  border: 1px solid rgba(184, 147, 90, .28);
  border-radius: var(--r-panel);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 18px 36px -24px rgba(58, 39, 23, .58);
}
.app-side-title {
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 13px; letter-spacing: 3px;
  padding: 6px 10px 12px;
  border-bottom: 1px solid rgba(184, 147, 90, .22);
  margin-bottom: 6px;
}
.app-side-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  color: rgba(248, 244, 236, .72);
  text-decoration: none; font-size: 14px;
  transition: background .18s, color .18s;
}
.app-side-item:hover { background: rgba(184, 147, 90, .12); color: var(--paper); }
.app-side-item.on {
  background: rgba(184, 147, 90, .20);
  color: var(--paper);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .36);
}
.app-main { flex: 1; min-width: 0; }
/* 后台表格列较多，容器放宽并允许横向滚动，避免列被挤成竖排文字 */
.wx-main.no-tabbar { max-width: 1320px; }
.app-main .card { overflow-x: auto; }
.app-main .table { min-width: 980px; }
.table td .btn { white-space: nowrap; }

@media (max-width: 767px) {
  .app-shell { flex-direction: column; gap: 12px; }
  .app-side {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    gap: 8px;
  }
  .app-side-title { display: none; }
  .app-side-item { white-space: nowrap; padding: 9px 14px; }
}

/* ============================================================
   聊天模块（宣纸气泡 + 鎏金描边 + 底部输入条）
   ============================================================ */
.chat-wrap { display: flex; gap: 16px; align-items: flex-start; }

/* 纯聊天模式：发起茶局跳转后用，不带全站顶栏 / 底部 TabBar / 左侧会话列表，就是单独一个聊天面板 */
html.bare-chat-html,
.app-body.bare-chat {
  padding: 0; margin: 0;
  height: 100%; width: 100%;
  background: var(--paper);
  overflow: hidden;
  animation: none;               /* 去掉 body 默认入场动画，避免视觉抖动 */
}
.app-body.bare-chat {
  position: fixed; inset: 0;     /* 钉死整个视口，不随内容滚 */
}
.app-body.bare-chat .chat-wrap.chat-bare {
  padding: 0; margin: 0;
  gap: 0;
  height: 100vh; width: 100vw;
  max-width: 100vw;
  align-items: stretch;
  box-sizing: border-box;
}
.app-body.bare-chat .chat-wrap.chat-bare > .chat-side { display: none !important; }   /* 左侧会话列表收起来 */
.app-body.bare-chat .chat-wrap.chat-bare > .chat-panel {
  flex: 1 1 auto;
  height: 100vh;
  max-width: none; width: 100%;
  border: none; border-radius: 0; box-shadow: none;
  background: var(--paper);
}
/* 聊天面板里 flex 布局：标题条固定，消息区填满自动滚，输入条贴底 */
.app-body.bare-chat .chat-panel {
  display: flex; flex-direction: column;
  height: 100vh; min-height: 0;
}
.app-body.bare-chat .chat-panel-head { flex: 0 0 auto; }
.app-body.bare-chat .chat-msgs {
  flex: 1 1 auto;
  height: auto !important; min-height: 0 !important;
  padding: 14px 12px;
  overflow-y: auto;
}
.app-body.bare-chat .flash.error { margin: 4px 12px 0; flex: 0 0 auto; }
.app-body.bare-chat .chat-input { flex: 0 0 auto; }
@media (max-width: 768px) {
  .app-body.bare-chat { padding: 0; }
  .app-body.bare-chat .chat-wrap.chat-bare { padding: 0; gap: 0; flex-direction: row; align-items: stretch; }
  .app-body.bare-chat .chat-msgs { height: auto !important; min-height: 0 !important; }
  .app-body.bare-chat .chat-input input { padding: 11px 14px; font-size: 14.5px; }
  .app-body.bare-chat .chat-input .btn { padding: 11px 24px; }
  /* 覆盖上面窄屏 media query 里「没 .chat-focus 就隐藏 chat-panel」的规则：
     纯聊天模式没有会话列表可点，chat-panel 永远是正主 */
  .app-body.bare-chat .chat-wrap.chat-bare .chat-panel { display: flex !important; }
}
.chat-panel {
  flex: 1; min-width: 0;
  background: var(--paper);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  box-shadow: 0 12px 30px -20px var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.chat-panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--brown-deep); font-weight: 600;
  font-family: var(--serif);
}
/* 标题前的小圆牌：厅 / 局 / 字，一眼看清这是哪类房间 */
.chat-panel-ico {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 12.5px; font-weight: 400;
  background: linear-gradient(135deg, var(--tea-green) 0%, var(--tea-green-deep) 100%);
  color: #f2efe1;
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .40);
}
/* 聊天面板左上角的返回键：双端都显示，一键退回广场（手机端也方便拇指点） */
.chat-back {
  display: inline-flex;                       /* 电脑端也保留，随时能退回广场 */
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; text-decoration: none;
  color: var(--brown-deep);
  background: rgba(184, 147, 90, .12);
  border: 1px solid rgba(184, 147, 90, .34);
  transition: background .18s;
}
.chat-back:active { background: rgba(184, 147, 90, .26); }
/* 常设茶席席位条：夹在标题与消息区之间，细金线分割，不抢聊天内容 */
.board-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, rgba(184, 147, 90, .07), rgba(184, 147, 90, .02));
  font-size: 12.5px; color: var(--brown-deep);
}
.board-bar-tag {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 12px; color: var(--gold-light);
  background: linear-gradient(135deg, var(--brown), var(--brown-deep));
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .38);
}
.board-bar-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.board-bar-txt b { font-weight: 600; color: var(--brown-deep); }
.board-bar-txt em { font-style: normal; font-size: 11.5px; color: var(--brown-light); }
.board-bar-fm { margin: 0; flex-shrink: 0; }
.board-bar-btn {
  cursor: pointer; flex-shrink: 0;
  padding: 5px 14px; border-radius: 999px;
  font-family: var(--serif); font-size: 12.5px;
  color: var(--brown-deep); background: var(--paper);
  border: 1px solid rgba(184, 147, 90, .42);
  transition: background .18s, color .18s, box-shadow .18s;
}
.board-bar-btn:hover { background: rgba(184, 147, 90, .12); }
.board-bar-btn.is-primary {
  color: #f4f1e4;
  background: linear-gradient(135deg, var(--tea-green), var(--tea-green-deep));
  border-color: rgba(184, 147, 90, .50);
  box-shadow: 0 3px 8px -5px rgba(30, 60, 45, .6);
}
.board-bar-btn.is-primary:hover { box-shadow: 0 5px 12px -5px rgba(30, 60, 45, .7); }
.board-bar-full { flex-shrink: 0; font-size: 11.5px; color: var(--brown-light); letter-spacing: .5px; }
.board-bar-form {
  padding: 9px 16px 11px;
  border-bottom: 1px solid var(--hair-soft);
  background: rgba(184, 147, 90, .045);
}
.board-bar-form form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.board-bar-form input[type="text"] {
  flex: 1; min-width: 140px;
  padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--hair-soft); border-radius: 8px;
  background: var(--paper); color: var(--brown-deep);
  font-family: inherit;
}
.board-bar-form select {
  padding: 7px 8px; font-size: 13px;
  border: 1px solid var(--hair-soft); border-radius: 8px;
  background: var(--paper); color: var(--brown-deep);
}
.chat-msgs {
  padding: 18px 16px;
  height: 56vh;
  min-height: 300px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  /* 极淡菱格团花 + 缠枝茶叶两层错位暗纹：让大片宣纸有质地，不发空。
     两层尺寸取 108 与 180 并故意错开起点，避免拼成整齐网格；
     最上层压一层半透明宣纸色把纹样wash淡，只留隐约质感不抢字。 */
  background-image: linear-gradient(rgba(255, 253, 248, .46), rgba(255, 253, 248, .46)),
                    var(--brocade), var(--leafdot);
  background-size: auto, 108px 108px, 180px 180px;
  background-position: 0 0, 0 0, 57px 31px;
  background-attachment: local, local, local;
}
/* 极细鎏金滚动条，不打扰宣纸调性 */
.chat-msgs::-webkit-scrollbar { width: 8px; }
.chat-msgs::-webkit-scrollbar-track { background: transparent; }
.chat-msgs::-webkit-scrollbar-thumb {
  background: rgba(176, 139, 78, .24); border-radius: 4px;
}
.chat-msgs::-webkit-scrollbar-thumb:hover { background: rgba(176, 139, 78, .40); }

.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg-avatar {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-deep) 100%);
  color: var(--gold-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14.5px;
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .34), 0 2px 5px -3px var(--shadow);
}
/* 自己的头像换青瓷墨绿，和对方一眼分开 */
.chat-msg.me .chat-msg-avatar {
  background: linear-gradient(135deg, var(--tea-green) 0%, var(--tea-green-deep) 100%);
  color: #f2efe1;
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .42), 0 2px 5px -3px var(--shadow);
}
.chat-msg-main { max-width: 72%; min-width: 0; }
.chat-msg-who { font-size: 11.5px; color: var(--brown-light); margin-bottom: 4px; letter-spacing: .4px; }
.chat-msg-bubble {
  padding: 10px 14px;
  /* 圆角不对称：靠头像那侧收紧，像茶汤里递出的一盏 */
  border-radius: 12px 12px 12px 3px;
  background: #fff;
  border: 1px solid rgba(176, 139, 78, .22);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.62;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px -1px rgba(27, 39, 31, .10), 0 8px 18px -14px rgba(27, 39, 31, .34);
}
.chat-msg-time { font-size: 11px; color: var(--brown-light); margin-top: 5px; letter-spacing: .3px; }
.chat-msg.me { flex-direction: row-reverse; justify-content: flex-end; }
.chat-msg.me .chat-msg-main { text-align: right; margin-left: auto; }
/* 居中限宽（bare 模式）时，自己发的消息整块必须顶到右边 */
html.bare-chat-html .app-body.bare-chat .chat-msgs .chat-msg.me { justify-content: flex-end; }
.chat-msg.me .chat-msg-bubble {
  background: linear-gradient(160deg, #4b6450 0%, #3b5343 100%);
  color: #f1eee2;
  border-color: rgba(216, 184, 120, .30);
  border-radius: 12px 12px 3px 12px;
  text-align: left;
  box-shadow: 0 1px 2px -1px rgba(27, 39, 31, .16), 0 10px 20px -14px rgba(27, 39, 31, .44);
}
/* 自己的名字不必再报一遍，留白更干净 */
.chat-msg.me .chat-msg-who { display: none; }
.chat-msg.me .chat-msg-time { text-align: right; }
.chat-msg.sys { justify-content: center; }
.chat-msg.sys .chat-msg-main { max-width: 100%; }
.chat-msg.sys .chat-msg-bubble {
  background: rgba(184, 147, 90, .09);
  border: 1px solid var(--hair-soft);
  border-radius: 999px;
  padding: 5px 15px;
  box-shadow: none;
  color: var(--brown-light); font-size: 12.5px; text-align: center;
}
/* 空房间：盖碗线描 + 楷体题字，代替一行干巴巴提示 */
.chat-empty {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px 18px;
  text-align: center;
}
.chat-empty-mark {
  width: 72px; height: 64px;
  background-image: var(--gaiwan);
  background-repeat: no-repeat; background-position: center;
  opacity: .55;
}
.chat-empty-title {
  font-family: var(--kai); font-size: 15px;
  color: var(--brown); letter-spacing: 3px;
}
.chat-empty-sub { font-size: 12px; color: var(--brown-light); letter-spacing: .6px; }
.chat-input {
  display: flex; gap: 9px; align-items: center;
  padding: 11px 14px;
  border-top: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
}
.chat-input input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(176, 139, 78, .26);
  border-radius: var(--r-ctl);
  background: var(--paper);
  font: inherit; font-size: 14.5px; color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.chat-side { width: 236px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-session {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px 11px 15px;
  border-radius: var(--r-panel);
  background: var(--paper);
  border: 1px solid var(--hair-soft);
  text-decoration: none; color: inherit;
  transition: box-shadow .18s, transform .18s, border-color .18s, background-color .18s;
}
/* 选中会话左侧竖起一道鎏金细条，比整圈描边更含蓄也更醒目 */
.chat-session::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  transition: height .2s ease;
}
.chat-session:hover {
  border-color: var(--hair);
  box-shadow: 0 10px 24px -18px var(--shadow);
  transform: translateY(-1px);
}
.chat-session.on {
  border-color: var(--hair);
  background: linear-gradient(180deg, rgba(184, 147, 90, .10), rgba(184, 147, 90, .03));
}
.chat-session.on::before { height: 62%; }
.chat-session-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px;
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-deep) 100%);
  color: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .34);
}
.chat-session-body { flex: 1; min-width: 0; }
.chat-session-name { font-size: 14px; color: var(--brown-deep); font-weight: 600; }
.chat-session-last {
  font-size: 12.5px; color: var(--brown-light);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 未读角标：朱砂代替荧光红，鎏金细圈收边，跟国风调性一致 */
.chat-session-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  background: linear-gradient(180deg, #b04a37, var(--red-seal));
  color: #fff7ef; border-radius: 9px;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .30);
}
@media (max-width: 767px) {
  /* 竖排时 align-items 必须回到 stretch，否则聊天面板会缩成内容宽度、右侧空一条 */
  .chat-wrap { flex-direction: column; align-items: stretch; }

  /* 像微信那样分两级：
     刚进消息页 = 整屏只给会话列表；
     点了某个群/私聊（.chat-focus）= 收起列表，聊天占满整屏。 */
  .chat-wrap:not(.chat-focus) .chat-panel { display: none; }
  .chat-wrap.chat-focus .chat-side { display: none; }
  .chat-side { width: 100%; max-height: none; overflow-y: visible; }

  /* 列表收走后聊天区能占满，高度按整屏扣掉顶栏/标题条/输入条/底部TabBar */
  .chat-msgs { height: calc(100vh - 268px); min-height: 220px; }
  .chat-back { display: inline-flex; }   /* 聊天页左上角返回键（双端都有） */
  .chat-msg-main { max-width: 82%; }
  /* 触屏区放大，指头好点 */
  .chat-input input { padding: 12px 14px; font-size: 15px; }
  .chat-input .btn { padding: 12px 20px; }
}

/* ============================================================
   电脑端左侧纵向导航栏（替代顶部导航条）
   手机端隐藏 .side-brand / .side-user，.wx-tabbar 仍为底部栏
   ============================================================ */
.side-brand, .side-user { display: none; }

@media (min-width: 768px) {
  /* 前台：隐藏顶部导航条，主内容右侧留出侧栏宽度 */
  .app-body:not(.no-side) .wx-header { display: none; }
  .app-body:not(.no-side) { padding-top: 0; padding-left: 216px; }

  /* 把底部 TabBar 变形为左侧固定竖栏 */
  .wx-tabbar {
    display: flex;
    flex-direction: column;
    top: 0; bottom: 0; left: 0; right: auto;
    width: 216px;
    height: auto;
    padding: 0 14px 16px;
    gap: 2px;
    background: var(--brown-deep);
    border-top: none;
    border-right: 1px solid rgba(184, 147, 90, .28);
    box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .10);
    overflow-y: auto;
    /* 滚到侧栏尽头也不要顺势把整页滚走 */
    overscroll-behavior: contain;
  }

  .wx-tab {
    flex: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 11px 14px;
    border-radius: var(--r-ctl);
    color: rgba(248, 244, 236, .72);
    transition: background .18s, color .18s;
  }
  .wx-tab:hover { background: rgba(184, 147, 90, .12); color: var(--paper); }
  .wx-tab.on {
    background: rgba(184, 147, 90, .20);
    color: var(--paper);
    box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .36);
  }
  .wx-tab-ico, .wx-tab-ico svg { width: 20px; height: 20px; }
  .wx-tab-txt { font-size: 14px; letter-spacing: 1px; }
  /* 未读红点在竖栏里靠右显示 */
  .wx-tab .tab-badge { position: static; margin: 0 0 0 auto; }

  /* 侧栏顶部品牌 */
  .side-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 22px 6px 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(184, 147, 90, .22);
    text-decoration: none;
  }
  .side-brand .brand-seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; background: var(--red-seal); color: #fff;
    font-family: var(--serif); font-size: 13px; font-weight: 700; border-radius: 3px;
  }
  .side-brand .brand-name {
    font-family: var(--serif); font-size: 18px; font-weight: 700;
    color: var(--gold-light); letter-spacing: 2px;
  }

  /* 侧栏底部用户区 */
  .side-user {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(184, 147, 90, .22);
  }
  .side-user-me {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 4px 10px;
    text-decoration: none;
  }
  .side-user-name { font-size: 14px; color: var(--paper); font-weight: 600; }
  .side-user-me .wx-role { margin-left: auto; }
  .side-user-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--r-ctl);
    font-size: 13px;
    color: rgba(248, 244, 236, .72);
    text-decoration: none;
    transition: background .18s, color .18s;
  }
  .side-user-row:hover { background: rgba(184, 147, 90, .12); color: var(--paper); }
}

/* ============================================================
   古风 · 高级感强化层
   在既有「新中式」规范之上做气质提升：书法题跋用字、卷轴装裱双线、
   回纹细金线、朱砂钤印、更讲究的字距与留白。
   原则：克制——只添必要的一两笔，不堆砌花哨装饰。
   ============================================================ */

/* ---------- 一、题跋用楷：诗题、品牌、栏标、表头改用书法楷体 ---------- */
.brand-name,
.side-brand .brand-name,
.home-hero-verse,
.home-hero-sub,
.page-sub,
.app-side-title,
.wx-list-head,
.chat-panel-head,
.hero h1,
.table th {
  font-family: var(--kai);
}
/* 楷体题跋：字距稍宽、笔意舒展，古风而不失干净 */
.home-hero-verse { letter-spacing: 5px; font-weight: 600; }
.wx-header-logo .brand-name,
.side-brand .brand-name { letter-spacing: 5px; }
.table th { letter-spacing: 2.5px; }

/* ---------- 二、卷轴装裱：面板内收一圈细金线（双线框） ---------- */
.home-stat-card,
.wx-grid,
.wx-list,
.chat-panel { position: relative; }

.card::before,
.home-hero::before,
.home-stat-card::before,
.wx-grid::before,
.wx-list::before,
.chat-panel::before,
.stat-card::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--hair-soft);
  border-radius: calc(var(--r-panel) - 5px);
  pointer-events: none;
  z-index: 0;
}
/* 后台卡片需横向滚动，内框会跟着滚动串位，故后台不画内框 */
.app-main .card::before { display: none; }

/* ---------- 三、回纹金线：中式题头（标题 ————） ---------- */
.card-h::after {
  content: "";
  flex: 1 1 auto;
  min-width: 36px;
  height: 8px;
  background-image: var(--fret);
  background-repeat: repeat-x;
  background-position: left center;
  opacity: .34;
}
.page-title::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -5px;
  width: 62px;
  height: 7px;
  background-image: var(--fret);
  background-repeat: repeat-x;
  opacity: .5;
}

/* ---------- 四、朱砂钤印：首页横幅右下角淡朱砂小印 ---------- */
.home-hero::after {
  content: "茶";
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kai);
  font-size: 18px;
  color: rgba(255, 247, 238, .93);
  background: var(--red-seal);
  border-radius: 3px;
  transform: rotate(-4deg);
  opacity: .72;
  box-shadow: 0 2px 8px -3px rgba(158, 61, 50, .55), 0 0 0 1px rgba(255, 228, 200, .30) inset;
  pointer-events: none;
}

/* ---------- 五、公告条：朱砂钤印「告示」样式 ---------- */
.notice-bar {
  background-image: var(--noise);
  background-size: 180px 180px;
  border-left: none;
  padding-left: 12px;
}
.notice-bar .notice-tag {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kai);
  font-size: 13px;
  letter-spacing: 0;
  color: #fff6ee;
  background: var(--red-seal);
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 2px 7px -3px rgba(158, 61, 50, .55), 0 0 0 1px rgba(255, 228, 200, .28) inset;
}

/* ---------- 六、管理员后台：全员推送勾选项 ---------- */
.bc-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 18px;
  font-size: 13.5px;
  color: var(--brown-deep);
  letter-spacing: .5px;
  cursor: pointer;
}
.bc-check input {
  width: 15px; height: 15px;
  flex-shrink: 0;
  accent-color: var(--brown-deep);
  cursor: pointer;
}

/* ---------- 七、消息未读：朱砂小点（原来数字徽标会飘到卡片外面） ---------- */
.wx-notify-avatar { position: relative; }
.wx-notify-avatar .badge.dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  min-width: 0; padding: 0;
  background: var(--red-seal);
  border-radius: 50%;
  box-shadow: 0 1px 3px -1px rgba(158, 61, 50, .6), 0 0 0 1.5px var(--paper);
}

/* ---------- 八、数字与标题：字距再收一分，更见雅致 ---------- */
.stat-num, .home-stat-num { letter-spacing: 2px; }
.stat-label, .home-stat-label { letter-spacing: 3px; }

/* ---------- 九、手机端顶栏：底部一段回纹金线 ---------- */
@media (max-width: 767px) {
  .wx-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 6px;
    background-image: var(--fret);
    background-repeat: repeat-x;
    opacity: .26;
    pointer-events: none;
  }
  .wx-header-logo .brand-seal {
    transform: rotate(-3deg);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 228, 200, .30) inset;
  }
}

/* ---------- 十、电脑端左侧竖栏：宣纸纹深茶褐底 + 回纹题头 + 描金选中标记 ---------- */
@media (min-width: 768px) {
  .wx-tabbar {
    background-color: #2f2014;
    background-image:
      var(--noise),
      linear-gradient(180deg, #3c2b19 0%, #28190e 100%);
    background-size: 180px 180px, auto;
  }
  .side-brand {
    position: relative;
    padding: 24px 6px 18px;
  }
  .side-brand::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px; bottom: 0;
    height: 7px;
    background-image: var(--fret);
    background-repeat: repeat-x;
    opacity: .30;
  }
  .side-brand .brand-seal {
    transform: rotate(-3deg);
    box-shadow: 0 2px 7px -3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 228, 200, .30) inset;
  }
  .wx-tab-txt { font-family: var(--kai); letter-spacing: 2px; }
  .side-user-name { font-family: var(--kai); }
  /* 选中项左侧描金短竖条，替代普通高亮块 */
  .wx-tab.on::before {
    content: "";
    position: absolute;
    left: 0; top: 9px; bottom: 9px;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    border-radius: 2px;
  }
  .wx-tab.on { box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .30); }
}

/* ---------- 十一、商品 / 礼品卡：等高对齐 ----------
   卡片本身已被网格拉成等高，但商品名称有一行、两行之分，
   导致价格行与按钮行参差不齐。这里让名称与描述固定占位，
   并把操作按钮吸到底部，每张卡片的按钮就都在同一条水平线上。 */
.card-v { display: flex; flex-direction: column; }
.card-v .vname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;      /* 名称一行 / 两行，都占满两行的高度 */
}
.card-v .vdesc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  min-height: 3em;        /* 描述固定两行高度 */
  margin: 8px 0;
}
.card-v .vact { margin-top: auto; }        /* 操作按钮贴到卡片底部 */
/* 「加入购物车 / 收藏」两键等宽平分一行 */
.card-v .vact.vrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.card-v .vact.vrow > * { min-width: 0; }
.card-v .vact .btn-sm,
.card-v .vact.btn-sm {
  font-size: 12px;
  letter-spacing: 0;
  padding: 8px 4px;       /* 收窄内边距，让「加入购物车」五个字尽量排在一行 */
}

/* ---------- 十二、聊天·凭房间号入局（题签式窄条） ----------
   克制：宣纸底 + 一圈细金线，楷体题签，不堆装饰。 */
.chat-join {
  position: relative;
  padding: 12px 13px 13px;
  border-radius: var(--r-panel);
  background: var(--paper-2);
  border: 1px solid var(--hair-soft);
}
.chat-join::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--hair-soft);
  border-radius: calc(var(--r-panel) - 4px);
  pointer-events: none;
}
.chat-join-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--kai);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--brown-deep);
  margin-bottom: 10px;
}
.chat-join-h::before {
  content: "";
  flex-shrink: 0;
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.chat-join-row { display: flex; gap: 7px; }
.chat-join-row input {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.chat-join-row input::placeholder { letter-spacing: 0; color: var(--brown-light); }
.chat-join-btn {
  flex-shrink: 0;
  padding: 0 14px;
  border: 1px solid var(--gold);
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, var(--brown) 0%, var(--brown-deep) 100%);
  color: var(--gold-light);
  font-family: var(--kai);
  font-size: 14px;
  letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 6px 14px -9px var(--shadow), inset 0 1px 0 rgba(255, 247, 238, .18);
  transition: transform .16s, filter .16s;
}
.chat-join-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.chat-join-btn:active { transform: translateY(0); filter: brightness(.97); }
.chat-join-note {
  margin-top: 9px;
  font-size: 11.5px;
  letter-spacing: .5px;
  color: var(--brown-light);
}
.chat-join-err {
  margin-top: 9px;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--red-seal);
}

/* ============================================================
   十三、花纹 · 茶事 强化层
   用户要求：界面不要纯色，加入中式花纹与茶事元素，整体更古风。
   全部使用内联 SVG / 渐变，离线可用；只做质感与装饰，不改业务逻辑。
   ============================================================ */

/* ---------- 一、全站底色：宣纸噪点 + 缠枝茶叶暗纹 + 暖绿光晕 ---------- */
body,
.app-body {
  background-color: var(--paper);
  background-image:
    var(--noise),
    var(--leafdot),
    radial-gradient(circle at 14% -4%, rgba(184, 147, 90, .10), transparent 42%),
    radial-gradient(circle at 96% 104%, rgba(110, 138, 114, .09), transparent 42%);
  background-size: 180px 180px, 180px 180px, auto, auto;
}

/* ---------- 二、面板底纹：宣纸 + 菱格团花（替掉纯色平面） ---------- */
.wx-grid,
.wx-list,
.home-stat-card,
.notice-bar,
.chat-join,
.login-panel {
  background-image: var(--brocade), var(--noise);
  background-size: 108px 108px, 180px 180px;
}

/* 原有渐变底的面板：在渐变之上再叠一层团花，保留原有质感 */
.card {
  background-image:
    var(--brocade),
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .90) 0%, rgba(249, 244, 233, .74) 100%);
  background-size: 108px 108px, 180px 180px, auto;
}
.stat-card {
  background-image:
    var(--brocade),
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 248, .55), rgba(240, 233, 220, .42));
  background-size: 108px 108px, 180px 180px, auto;
}
.img-placeholder {
  background-image:
    var(--brocade),
    var(--noise),
    linear-gradient(135deg, var(--paper-2), #e6dcc6);
  background-size: 108px 108px, 180px 180px, auto;
}

/* ---------- 三、电脑端左侧竖栏：宣纸里衬 + 鎏金团花 ---------- */
@media (min-width: 768px) {
  .wx-tabbar {
    background-color: #2f2014;
    background-image:
      var(--brocade-gold),
      var(--noise),
      linear-gradient(180deg, #3c2b19 0%, #28190e 100%);
    background-size: 108px 108px, 180px 180px, auto;
  }
}

/* ---------- 四、手机端底部 TabBar：宣纸 + 团花 + 顶部回纹金线 ---------- */
@media (max-width: 767px) {
  .wx-tabbar {
    background-color: var(--paper);
    background-image:
      var(--brocade),
      var(--noise),
      linear-gradient(180deg, rgba(255, 253, 248, .96), var(--paper));
    background-size: 108px 108px, 180px 180px, auto;
  }
  .wx-tabbar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 6px;
    background-image: var(--fret);
    background-repeat: repeat-x;
    opacity: .30;
    pointer-events: none;
  }
}

/* ---------- 五、列表题头：楷体题签 + 回纹金线（替掉素灰标题） ---------- */
.wx-list-head {
  position: relative;
  font-family: var(--kai);
  letter-spacing: 2.5px;
  color: var(--brown);
}
.wx-list-head::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 6px;
  background-image: var(--fret);
  background-repeat: repeat-x;
  opacity: .28;
  pointer-events: none;
}

/* ---------- 六、首页横幅：右上添一只盖碗（茶事元素）+ 底部水纹 ---------- */
.home-hero {
  background-image: var(--gaiwan), var(--wave), var(--landscape);
  background-repeat: no-repeat, repeat-x, no-repeat;
  background-position: right 22px top 16px, left bottom 10px, center bottom;
  background-size: 82px auto, 48px 12px, cover;
}

/* ---------- 七、小控件补纸纹，去「死板纯色」 ---------- */
.wx-btn,
.form-control {
  background-image: var(--noise);
  background-size: 180px 180px;
}
.wx-btn-primary,
.wx-btn-brown {
  background-image: var(--wood);
  background-size: 120px 120px;
}
/* 输入框底纹固定，聚焦时也不变 */

/* ---------- 八、页脚收尾：一段祥云金线（仅电脑端，手机端会被 TabBar 压住） ---------- */
@media (min-width: 768px) {
  .wx-main::after {
    content: "";
    display: block;
    height: 20px;
    max-width: 340px;
    margin: 30px auto 4px;
    background-image: var(--cloud);
    background-repeat: repeat-x;
    background-position: center;
    opacity: .55;
  }
}

/* ============================================================
   十四、屏幕自适应强化（大屏铺宽 · 窄屏去溢出 · 触屏放大）
   ============================================================ */

/* ---------- 一、主内容区宽度分级自适应 ----------
   把主区左右内边距记成变量 --pad-x，后面全屏铺底的页面靠它对齐，
   这样任何一个断点都不会再出现横向溢出。 */
.wx-main { --pad-x: 14px; }
@media (min-width: 768px) {
  .wx-main { --pad-x: 24px; }
}
/* 大屏逐级放宽内容列（仍是居中留白，不铺满整屏），减少两侧大片空白 */
@media (min-width: 1440px) { .wx-main { max-width: 1120px; } }
@media (min-width: 1700px) { .wx-main { max-width: 1260px; } }
@media (min-width: 1900px) { .wx-main { max-width: 1360px; } }

/* ---------- 二、全屏铺底页（房间号入局 / 分享邀请） ----------
   负外边距改成跟随 --pad-x，抵消主区内边距做到真正满宽，去掉 2~4px 的横向溢出 */
.join-wrap,
.invite-wrap {
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
}

/* ---------- 三、茶局房间号卡片：极窄屏不再被撑破 ---------- */
@media (max-width: 380px) {
  .room-card {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
    padding: 14px;
  }
  .room-card-no {
    font-size: 24px;
    letter-spacing: 4px;
    text-indent: 4px;
  }
}

/* ---------- 四、手机端整体放大，贴合手指点按 ---------- */
@media (max-width: 767px) {
  body { font-size: 16px; }

  .page-title { font-size: 23px; letter-spacing: 2px; }
  .page-sub { font-size: 13.5px; margin-bottom: 20px; }

  .card { padding: 18px 16px; margin-bottom: 14px; }

  .btn { padding: 12px 20px; font-size: 15px; letter-spacing: 1px; }
  .btn-sm { padding: 9px 14px; font-size: 13.5px; }
  .btn-block { width: 100%; display: block; }
  /* 商品 / 礼品卡片里的两枚小按钮维持紧凑，别把「加入购物车」挤成两行 */
  .card-v .vact .btn-sm { padding: 8px 4px; font-size: 12px; }

  .form-control { padding: 13px 14px; font-size: 16px; }
  .form-group label { font-size: 14px; }

  .tag { font-size: 12.5px; padding: 4px 10px; }

  .wx-search { padding: 11px 13px; font-size: 15px; }
  .wx-grid-item { padding: 15px 6px; }
  .wx-item { padding: 14px 16px; }
  .wx-list-head { padding: 15px 16px 9px; }
  .wx-tab-txt { font-size: 12px; }
}

/* ============================================================
   十五、视觉升级：宣纸 · 墨 · 朱印
   —— 针对「一片米黄、没有层次、纹样看不见」的问题：
      1) 画布压深一档 + 可见纸纹，浅色面板才浮得起来（层次）
      2) 面板统一「墨线外框 + 鎏金内衬」双层装裱边（质感）
      3) 朱砂作为点缀色进入题头，打破单调（气口）
      4) 首页横幅做成真正的卷轴：淡墨山水 + 内框金线 + 盖碗
   ============================================================ */

/* ---------- 一、画布：压深一档的宣纸 + 可见纤维 + 四周晕染 ---------- */
body,
.app-body,
.guest-body {
  background-color: #cbd3b8;
  background-image:
    var(--leafdot),
    var(--noise),
    radial-gradient(125% 85% at 50% -6%, #f5f8ec 0%, #e2e8d4 42%, #cbd3b8 100%);
  background-size: 180px 180px, 180px 180px, auto;
  background-repeat: repeat, repeat, no-repeat;
}

/* ---------- 二、面板装裱：墨线外框 + 鎏金内衬 + 实投影 ---------- */
.card,
.stat-card,
.home-stat-card,
.wx-list,
.wx-grid,
.notice-bar,
.login-panel,
.join-panel,
.chat-join {
  border-color: rgba(58, 39, 23, .14);
  background-color: #fffdf9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px -1px rgba(58, 39, 23, .12),
    0 14px 30px -20px rgba(58, 39, 23, .40);
}
/* 面板原有的 5px 内收细框统一加深到鎏金，装裱感立起来 */
.card::before,
.home-hero::before,
.wx-grid::before,
.wx-list::before,
.chat-panel::before,
.stat-card::before {
  border-color: rgba(184, 147, 90, .34);
}

/* 主面板多一层淡淡团花底纹，宣纸的织纹感 */
.card {
  background-image:
    var(--brocade),
    var(--noise),
    linear-gradient(180deg, #fffdf9 0%, #f9f3e7 100%);
  background-size: 108px 108px, 180px 180px, auto;
}
.stat-card,
.home-stat-card,
.wx-list,
.wx-grid,
.notice-bar {
  background-image: var(--brocade), var(--noise);
  background-size: 108px 108px, 180px 180px;
}

/* 浮起面板的 hover：影子加深、整体上浮，更像一张纸牌被拿起 */
.card-hover:hover,
.home-stat-card:hover {
  border-color: rgba(184, 147, 90, .52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(184, 147, 90, .40),
    0 2px 4px -2px rgba(58, 39, 23, .16),
    0 26px 48px -26px rgba(58, 39, 23, .48);
}

/* 房间号入口 / 登录卡 / 分享卡：装裱感更足 */
.join-panel {
  background-image: var(--noise), linear-gradient(180deg, #fffefb 0%, #faf4e8 100%);
  background-size: 180px 180px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(184, 147, 90, .40),
    inset 0 6px 0 -5px rgba(184, 147, 90, .5),
    0 34px 64px -36px rgba(58, 39, 23, .46);
}

/* ---------- 三、题头加朱砂气口：一眼就有精神 ---------- */
.page-title::before,
.card-h::before {
  background: linear-gradient(180deg, var(--red-seal) 0%, var(--gold) 100%);
  border-radius: 2px;
}
.page-title { letter-spacing: 4px; }
.card-h { letter-spacing: 3px; }

/* 列表题签前加一小截朱砂竖条 */
.wx-list-head::before {
  content: "";
  display: inline-block;
  width: 3px; height: 12px;
  margin-right: 9px;
  vertical-align: -1px;
  background: linear-gradient(180deg, var(--red-seal), var(--gold));
  border-radius: 2px;
}

/* ---------- 四、首页横幅：一幅卷轴 ---------- */
.home-hero {
  background-color: #fbf7ef;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 248, .62) 0%, rgba(238, 228, 206, .58) 54%, rgba(58, 39, 23, .20) 100%),
    var(--gaiwan), var(--wave), var(--landscape);
  background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
  background-position: center, right 24px top 18px, left bottom 10px, center bottom;
  background-size: auto, 84px auto, 48px 12px, cover;
  border: 1px solid rgba(58, 39, 23, .18);
  box-shadow:
    inset 0 0 0 1px rgba(184, 147, 90, .42),
    0 20px 44px -26px rgba(58, 39, 23, .48);
}
/* 卷轴内框：加深原有的 5px 内收细框（保留右下角朱砂「茶」印不被动用） */
.home-hero::before { border-color: rgba(184, 147, 90, .46); }
.home-hero-verse {
  position: relative;
  font-size: 24px;
  letter-spacing: 5px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.home-hero-sub { position: relative; color: #7d6b52; }

/* ---------- 五、快捷宫格：图标做成描金圆形茶牌 ---------- */
.wx-grid-item svg {
  width: 46px; height: 46px;
  box-sizing: border-box;
  padding: 11px;
  border-radius: 50%;
  color: var(--brown);
  stroke-width: 1.6;
  background-color: #f4ebdb;
  background-image: var(--wood);
  background-size: 120px 120px;
  border: 1px solid rgba(184, 147, 90, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -4px 8px -6px rgba(58, 39, 23, .38),
    0 7px 14px -10px rgba(58, 39, 23, .52);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease, background-color .22s ease;
}
.wx-grid-item:hover svg {
  transform: translateY(-2px);
  color: var(--brown-deep);
  border-color: rgba(184, 147, 90, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 22px -12px rgba(58, 39, 23, .62);
}
.wx-grid-item { letter-spacing: .5px; }
/* 手机端：给每格标签预留两行高度，折行的「输入房间号」不再把图标顶高 */
@media (max-width: 767px) {
  .wx-grid-item span {
    font-size: 12.5px; letter-spacing: 0; line-height: 1.4; min-height: 2.8em;
  }
}

/* ---------- 六、数据卡：数字更大，左侧一道金脊 ---------- */
.home-stat-card { position: relative; padding-left: 22px; }
.home-stat-card::before {
  content: "";
  position: absolute;
  left: 12px; top: 16px; bottom: 16px;
  width: 3px;
  border: none;              /* 覆盖既有的 5px 内收细框，只留这道金脊 */
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-light), rgba(184, 147, 90, .25));
}
.home-stat-num { font-size: 34px; letter-spacing: 1px; }

/* ---------- 七、按钮与输入：描边更清晰一点 ---------- */
.btn { border-color: rgba(184, 147, 90, .52); }
.form-control { border-color: rgba(58, 39, 23, .16); }
.wx-btn { border-color: var(--hair); }

/* ---------- 八、空状态：别太灰，给一点金 ---------- */
.empty-icon { opacity: .52; }

/* ============================================================
   十七、青瓷茶席 · 全站重制
   —— 病根不在「颜色不好看」，而在三件事：
      1) 底色与面板都是同一档中明度，整页发闷、没有对比，浮不起来；
      2) 每一块面板都铺满菱格团花，密得像印花包装纸，反而显廉价；
      3) 字级、留白、层次没有拉开，只有一排排一样大的圆角卡片。
   —— 因此这一层做四件事（克制，不堆砌）：
      1) 画布压到「青瓷灰绿」，面板回到干净宣纸，一深一浅，层次立刻出来；
      2) 纹样只在「材质件」上留（导航、竖栏、横幅），面板只留一层纸纤维；
      3) 顶部导航条由茶褐改为「墨绿鎏金」，底部一道发丝金线收边（用户点名要改）；
      4) 重新排字：楷体题头、更大的字号与字距、更松的留白。
   ============================================================ */

/* ---------- 一、令牌：由「茶褐」整体转向「青瓷墨绿」 ---------- */
:root {
  --ink: #1b271f;             /* 主文字：墨（带青的黑） */
  --brown-deep: #24352b;      /* 结构色：深青绿（标题、竖栏底） */
  --brown: #40604a;           /* 主青绿：链接、强调 */
  --brown-light: #66735f;     /* 次级文字：灰青，仍保证 4.5:1 对比 */
  --tea-green: #6e8a72;
  --tea-green-deep: #3c5a46;
  --gold: #b08b4e;            /* 鎏金 */
  --gold-light: #d9bb79;      /* 亮金 */
  --paper: #faf8f1;           /* 宣纸米白 */
  --paper-2: #f2efe4;
  --line: #ded7c6;
  --shadow: rgba(27, 39, 31, .12);
  --hair: rgba(176, 139, 78, .34);
  --hair-soft: rgba(176, 139, 78, .17);

  /* 墨绿主色按钮（替代原来的茶褐主色） */
  --btn-top: #38523f;
  --btn-btm: #1d3025;

  /* 缠枝茶叶暗纹 · 提花版（导航条 / 竖栏底纹）
     上一版是「鎏金散点」：金点零碎、颗粒感重，铺在深底上像撒了金屑，容易显廉价。
     这一版把金抽掉，改成同色系的青绿暗花（tone-on-tone）——这才是提花织物的做法：
     远看是一整块纯色，近看才见缠枝茶叶，低调但有料。金只留给一道描金回纹边饰。
     叶片的位置、角度、大小、浓淡依旧刻意错开，避免看出四方连续的网格 */
  --nav-damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200'%3E%3Cg opacity='0.3'%3E%3Cg transform='translate(46 54) rotate(-24) scale(1.02)'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234e7058'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%236d9074' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='translate(134 30) rotate(63) scale(0.74)' opacity='0.9'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234e7058'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%236d9074' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='translate(216 106) rotate(-108) scale(1.1)'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234e7058'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%236d9074' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='translate(80 158) rotate(22) scale(0.84)' opacity='0.85'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234e7058'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%236d9074' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='translate(178 172) rotate(-54) scale(0.96)'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234e7058'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%236d9074' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='translate(238 40) rotate(38) scale(0.7)' opacity='0.8'%3E%3Cpath d='M-16 0 C-8 -9 8 -9 16 0 C8 9 -8 9 -16 0 Z' fill='%234e7058'/%3E%3Cpath d='M-11 0 L11 0' fill='none' stroke='%236d9074' stroke-width='1.1'/%3E%3C/g%3E%3Ccircle cx='152' cy='92' r='1.6' fill='%234e7058'/%3E%3Ccircle cx='56' cy='108' r='1.2' fill='%234e7058'/%3E%3C/g%3E%3C/svg%3E");

  /* 描金回纹边饰 · 淡金版（导航条底部包边用，内联 SVG，离线可用）
     一条金线为底，线上立小回纹——不是满铺金花，只在边口收一道，克制不喧宾夺主 */
  --fret-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cg fill='none' stroke='%23d9bb79' stroke-width='0.9' opacity='0.36'%3E%3Cpath d='M0 8.5H14M4 8.5V2h6v4H7V4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 二、画布：青瓷灰绿，压深一档，浅色宣纸面板才浮得起来 ---------- */
body,
.app-body,
.guest-body {
  background-color: #e7ebde;
  background-image:
    var(--leafdot),
    var(--noise),
    radial-gradient(140% 88% at 50% -12%, #fbfcf6 0%, #f1f4e9 32%, #e6ebdc 62%, #d8dfd1 100%);
  background-size: 300px 300px, 180px 180px, auto;
  background-repeat: repeat, repeat, no-repeat;
}

/* ---------- 三、顶部导航条：墨绿提花缎 + 描金回纹包边 ---------- */
/* 四层从下到上：墨绿渐层 → 缠枝茶叶暗纹（错位两层）→ 底部一道描金回纹边饰。
   暗花是同色系 tone-on-tone，远看是一整块纯色缎面，近看才见缠枝茶叶；
   金只在最下沿收一道回纹，克制的包边才显贵气，不撒金屑。 */
.wx-header {
  height: 56px;
  padding: 0 18px;
  background-color: #1c2a21;
  background-image:
    var(--fret-soft),
    var(--nav-damask),
    var(--nav-damask),
    linear-gradient(180deg, #2a3c2f 0%, #17231b 100%);
  /* 两层暗纹用互质尺寸错位叠加，重复周期被拉到极长，不会看出「第 260px 又是一模一样」 */
  background-size: 14px 9px, 390px 300px, 259px 197px, auto;
  background-position: 0 calc(100% - 10px), 0 8px, 121px -47px, 0 0;
  background-repeat: repeat-x, repeat, repeat, no-repeat;
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 12px 26px -20px rgba(12, 20, 15, .66);
}
/* 底部一道两端渐隐的鎏金发丝线，收住整条导航 */
.wx-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(217, 187, 121, 0) 0%,
    rgba(217, 187, 121, .70) 20%,
    rgba(232, 214, 166, .95) 50%,
    rgba(217, 187, 121, .70) 80%,
    rgba(217, 187, 121, 0) 100%);
  pointer-events: none;
}
.wx-header-logo {
  color: var(--gold-light);
  font-size: 18px;
  letter-spacing: 4px;
  gap: 9px;
}
.wx-header-logo .brand-seal {
  width: 26px; height: 26px;
  border-radius: 4px;
  background: linear-gradient(160deg, #ad4a3c 0%, #852e1e 100%);
  font-size: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 198, .46),
    0 2px 7px -3px rgba(0, 0, 0, .55);
}
.wx-header-nav a {
  padding: 0 17px;
  line-height: 56px;
  font-size: 14.5px;
  letter-spacing: 1.5px;
  color: rgba(238, 236, 226, .66);
}
.wx-header-nav a:hover { color: #fff; }
.wx-header-nav a.on { color: var(--gold-light); }
.wx-header-nav a.on::after {
  bottom: 10px;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(217, 187, 121, 0), var(--gold-light), rgba(217, 187, 121, 0));
}
.wx-header-right { color: rgba(238, 236, 226, .84); gap: 10px; margin-left: auto; }
.wx-points {
  color: var(--gold-light);
  background: rgba(217, 187, 121, .13);
  border: 1px solid rgba(217, 187, 121, .26);
  border-radius: 999px;
  padding: 3px 10px;
}
.wx-nick { color: rgba(238, 236, 226, .86); }
.wx-avatar {
  width: 27px; height: 27px;
  border: 1px solid rgba(217, 187, 121, .52);
  background: linear-gradient(140deg, #d9bb79 0%, #96702f 100%);
}
.wx-role {
  background: rgba(217, 187, 121, .14);
  border-color: rgba(217, 187, 121, .30);
  color: var(--gold-light);
}
.wx-admin-link { color: var(--gold-light); border-color: rgba(217, 187, 121, .42); }
.wx-admin-link:hover { color: #fff; background: rgba(217, 187, 121, .24); }
.wx-logout { color: rgba(238, 236, 226, .58); }
.wx-logout:hover { color: var(--gold-light); background: rgba(217, 187, 121, .14); }

/* 后台入口圆牌：电脑端用全称，手机端换短称（见文末窄屏层），免得窄屏把退出按钮挤出去 */
.wx-admin-link .short { display: none; }

/* ---------- 三·补、后台专用顶栏（管理后台 / 商家后台） ----------
   刻意跟前台顶栏拉开差别：不带品牌 logo、不带前台那五格导航，
   左边一枚「返回前台」圆牌，中间楷体后台名，右边只留账号区（积分收掉）。 */
.wx-header.is-back .wx-points { display: none; }
.wx-header-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(217, 187, 121, .34);
  background: rgba(217, 187, 121, .09);
  color: var(--gold-light);
  font-size: 13px;
  letter-spacing: .5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.wx-header-back:hover { background: rgba(217, 187, 121, .22); border-color: rgba(217, 187, 121, .56); }
.wx-header-back svg { width: 13px; height: 13px; flex-shrink: 0; }
.wx-header-title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  padding-left: 4px;   /* 字距会在末字后多留一份空隙，左移 4px 把视觉重心补回正中 */
  color: var(--gold-light);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- 四、电脑端左竖栏：与导航条同一套墨绿材质 ---------- */
@media (min-width: 768px) {
  .wx-tabbar {
    background-color: #1b2820;
    background-image:
      var(--nav-damask),
      var(--nav-damask),
      linear-gradient(180deg, #27382c 0%, #151f19 100%);
    background-size: 300px 240px, 197px 151px, auto;
    background-position: 0 0, 63px -37px, 0 0;
    border-right: 1px solid rgba(176, 139, 78, .18);
    box-shadow: 1px 0 0 rgba(217, 187, 121, .08), 24px 0 48px -36px rgba(12, 20, 15, .62);
  }
  .wx-tab { padding: 11px 12px; border-radius: 6px; }
  .wx-tab:hover { background: rgba(217, 187, 121, .08); color: rgba(240, 238, 228, .95); }
  .wx-tab.on {
    color: var(--gold-light);
    background: linear-gradient(90deg, rgba(217, 187, 121, .18), rgba(217, 187, 121, .02));
    box-shadow: inset 0 0 0 1px rgba(217, 187, 121, .24);
  }
  /* 选中项左侧一小截金脊 */
  .wx-tab.on::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    margin-top: -10px;
    width: 3px; height: 20px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
  }
  .side-brand { border-bottom-color: rgba(217, 187, 121, .20); }
  .side-brand .brand-name { color: var(--paper); letter-spacing: 4px; }
  .side-user { border-top-color: rgba(217, 187, 121, .20); }
  .side-user-row:hover { background: rgba(217, 187, 121, .10); }
}

/* ---------- 五、手机端底部 TabBar：宣纸 + 鎏金顶线 + 青绿选中态 ---------- */
@media (max-width: 767px) {
  .wx-tabbar {
    background-color: #fbf9f2;
    background-image:
      var(--noise),
      linear-gradient(180deg, rgba(255, 255, 255, .92), #f2efe4);
    background-size: 180px 180px, auto;
    border-top: none;
    box-shadow:
      0 -1px 0 rgba(176, 139, 78, .34),
      0 -12px 26px -20px rgba(27, 39, 31, .48);
  }
  .wx-tabbar::before { height: 5px; opacity: .26; }
  .wx-tab { margin: 4px 5px; }
  .wx-tab.on {
    color: var(--brown-deep);
    background: rgba(64, 96, 74, .10);
    box-shadow: inset 0 0 0 1px rgba(176, 139, 78, .26);
  }
  /* 手机端顶部只有 logo + 右侧账号区，中间导航已收起。
     这里必须把右组推到最右，否则它会紧贴 logo、右端留一大段空白。
     等级标签属于静态文字，收起；角色入口则按角色区分：
     管理员/商家保留各自后台入口（换短称），普通用户本来就没有，顶栏自然与它们不同。 */
  .wx-header { padding: 0 14px; }
  .wx-header-right { gap: 6px; }
  .wx-points { padding: 3px 8px; }
  .wx-role { display: none; }
  .wx-admin-link .full { display: none; }
  .wx-admin-link .short { display: inline; }

  /* 后台外壳在手机上改为纵向堆叠时，必须把横轴拉回 stretch，
     否则 flex-start 会让主区按内容宽度撑开、整页横向溢出 */
  .app-shell { align-items: stretch; }
  .app-main { min-width: 0; }
}

/* ---------- 六、面板：回到干净宣纸，只留一层纸纤维（撤掉满屏团花） ---------- */
.card,
.stat-card,
.home-stat-card,
.wx-grid,
.wx-list,
.notice-bar,
.chat-panel,
.login-panel,
.join-panel,
.chat-join,
.img-placeholder,
.home-hero {
  background-color: #fffdf8;
  background-image: var(--noise);
  background-size: 180px 180px;
}
/* 面板线框与投影：线更清、影更紧，浮起来但不发雾 */
.card,
.stat-card,
.home-stat-card,
.wx-grid,
.wx-list,
.notice-bar,
.chat-panel,
.login-panel {
  border: 1px solid rgba(36, 53, 43, .14);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px -1px rgba(27, 39, 31, .10),
    0 14px 30px -22px rgba(27, 39, 31, .42);
}
/* 面板内收一圈细金线：装裱感，做淡不做重 */
.card::before,
.home-hero::before,
.wx-grid::before,
.wx-list::before,
.chat-panel::before,
.stat-card::before {
  border-color: rgba(176, 139, 78, .30);
}
.img-placeholder {
  background-image: var(--noise), linear-gradient(160deg, #fdfbf5, #ece8d9);
  background-size: 180px 180px, auto;
}
.join-panel {
  box-shadow:
    inset 0 0 0 1px rgba(176, 139, 78, .34),
    0 30px 58px -34px rgba(27, 39, 31, .46);
}
.card-hover:hover,
.home-stat-card:hover {
  border-color: rgba(176, 139, 78, .48);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px -2px rgba(27, 39, 31, .14),
    0 24px 44px -26px rgba(27, 39, 31, .46);
}

/* ---------- 七、题头：楷体题签 + 朱砂气口 + 回纹金线 ---------- */
.page-title {
  font-family: var(--kai);
  color: var(--brown-deep);
  letter-spacing: 6px;
  padding-left: 18px;
  margin-bottom: 10px;
}
.page-title::before {
  width: 4px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--red-seal) 0%, var(--gold) 58%, rgba(176, 139, 78, .08) 100%);
}
.page-sub {
  letter-spacing: 2.5px;
  margin-bottom: 30px;
  color: var(--brown-light);
}
.card-h {
  font-family: var(--kai);
  font-size: 18px;
  letter-spacing: 4px;
  border-bottom-color: rgba(176, 139, 78, .26);
}
.card-h::before {
  width: 4px; height: 16px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--red-seal), var(--gold));
}
/* 题头左侧的朱砂小气口：必须绝对定位，否则会作为 flex 子项把标题挤到中间 */
.wx-list-head {
  position: relative;
  padding: 16px 20px 11px 30px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--brown);
}
.wx-list-head::before {
  position: absolute;
  left: 20px;
  top: 22px;
  width: 3px;
  height: 14px;
  margin-right: 0;
  vertical-align: baseline;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--red-seal), var(--gold));
}

/* ---------- 八、首页横幅：一幅干净卷轴（宣纸 + 淡墨远山 + 盖碗 + 朱印） ---------- */
.home-hero {
  padding: 38px 30px 34px;
  background-image:
    var(--gaiwan),
    linear-gradient(180deg, #fdfbf5 0%, #fdfbf5 46%, rgba(253, 251, 245, 0) 100%),
    var(--landscape);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right 28px top 22px, center, center bottom;
  background-size: 74px auto, auto, cover;
  border: 1px solid rgba(36, 53, 43, .14);
  box-shadow:
    inset 0 1px 0 #fff,
    0 16px 36px -24px rgba(27, 39, 31, .46);
}
.home-hero::before { border-color: rgba(176, 139, 78, .38); }
.home-hero-verse {
  font-family: var(--kai);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 1.66;
  color: #1b271f;
  padding-right: 88px;
  text-shadow: none;
}
.home-hero-sub {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: 4px;
  color: #6b7862;
}
.home-hero-search {
  margin-top: 22px;
  max-width: 480px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(176, 139, 78, .38);
  border-radius: 8px;
  color: var(--brown-light);
}
@media (max-width: 767px) {
  .home-hero { padding: 26px 20px 24px; }
  .home-hero-verse { font-size: 21px; letter-spacing: 4px; padding-right: 62px; }
  .home-hero-sub { letter-spacing: 2px; }
  .home-hero-search { max-width: none; margin-top: 18px; }
}

/* ---------- 九、快捷宫格：描金圆形茶牌（去掉木纹噪点，留干净金环） ---------- */
.wx-grid { padding: 8px 0; }
.wx-grid-item {
  gap: 8px;
  padding: 18px 6px 16px;
  font-size: 13.5px;
  letter-spacing: 1px;
  color: var(--brown-deep);
  border-right-color: rgba(36, 53, 43, .07);
  border-bottom-color: rgba(36, 53, 43, .07);
}
.wx-grid-item:active { background: rgba(64, 96, 74, .05); }
.wx-grid-item svg {
  width: 46px; height: 46px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--brown);
  stroke-width: 1.5;
  background-color: #f7f4ea;
  background-image: none;
  border: 1px solid rgba(176, 139, 78, .46);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px -6px rgba(27, 39, 31, .52);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
}
.wx-grid-item:hover svg {
  transform: translateY(-2px);
  color: var(--brown-deep);
  border-color: rgba(176, 139, 78, .74);
  box-shadow: inset 0 1px 0 #fff, 0 10px 18px -10px rgba(27, 39, 31, .50);
}

/* ---------- 十、统计卡：大字 + 一道金脊，不再有团花底 ---------- */
.home-stat-card { padding: 20px 22px 20px 26px; }
.home-stat-num {
  font-size: 38px;
  letter-spacing: 0;
  line-height: 1.12;
  color: var(--brown-deep);
}
.home-stat-label { font-size: 12.5px; letter-spacing: 2px; color: var(--brown-light); margin-top: 6px; }

/* ---------- 十一、列表：更松的间隔 + 青绿墨牌头像 ---------- */
.wx-list-head a { letter-spacing: 1px; }
.wx-item { padding: 14px 20px; border-bottom-color: rgba(36, 53, 43, .07); }
.wx-item:active { background: rgba(64, 96, 74, .05); }
.wx-item-avatar {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: linear-gradient(155deg, #3a5341 0%, #1e2f25 100%);
  border: 1px solid rgba(176, 139, 78, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.wx-item-title { font-size: 16.5px; color: var(--ink); }
.wx-item-date { font-size: 12.5px; color: var(--brown-light); }
.wx-item-sub { color: var(--brown-light); }

/* ---------- 十二、搜索框 / 按钮 / 输入：统一青绿调 ---------- */
.wx-search {
  background: #f5f2e9;
  border: 1px solid rgba(176, 139, 78, .28);
  border-radius: 8px;
  color: var(--brown-light);
}
.btn-primary { --btn-top: #38523f; --btn-btm: #1d3025; }
.btn-green { --btn-top: #5f7c64; --btn-btm: #3b5541; }
.wx-btn { border-color: rgba(176, 139, 78, .40); }
.form-control { border-color: var(--line); }
.notice-bar { border-left: 3px solid var(--gold); }
.empty-icon { opacity: .46; }

/* ---------- 十三、键盘可达性：给一处清晰的金色聚焦环 ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.wx-btn:focus-visible {
  outline: 2px solid rgba(176, 139, 78, .78);
  outline-offset: 2px;
}

/* ---------- 十四、大屏把内容列再放宽一点，减少两侧空荒 ---------- */
@media (min-width: 768px) {
  .wx-main { padding: 20px 26px 32px; }
  .page-title { font-size: 30px; }
  .card { padding: 26px; }
  .home-hero-verse { font-size: 28px; letter-spacing: 7px; }
}

/* ============================================================
   十五、个人主页：点头像弹出「编辑资料」弹窗 + 头像图片
   ============================================================ */

/* 传过头像图片的地方就用图片，把原来的底色和内边距收掉，图片自己撑满 */
.wx-avatar.has-img,
.chat-msg-avatar.has-img,
.chat-session-ico.has-img,
.msg-avatar.has-img {
  padding: 0;
  background: none;
  overflow: hidden;
}
.wx-avatar.has-img img,
.chat-msg-avatar.has-img img,
.chat-session-ico.has-img img,
.msg-avatar.has-img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* 账号卡片上那个可以点的头像：右下角挂一枚朱砂「改」印当提示 */
.avatar-btn {
  position: relative;
  padding: 0; border: none; background: none;
  cursor: pointer; line-height: 0;
}
.avatar-btn .msg-avatar { border-radius: 50%; }
.avatar-btn-tip {
  position: absolute; right: -5px; bottom: -5px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 12px; line-height: 1;
  color: #fff4e8; background: var(--red-seal);
  border: 2px solid #fffdf8;
  transform: rotate(-3deg);
}
.avatar-hint { margin-top: 4px; font-size: 12.5px; color: var(--brown-light); letter-spacing: 1px; }

/* 编辑资料弹窗（在通用的 .cy-modal 上再加一层，手机端太高时可以滚） */
.cy-modal-card.edit-card {
  max-width: 400px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  text-align: left;
  padding: 26px 24px 22px;
}
.edit-title {
  margin-bottom: 16px;
  text-align: center;
  font-family: var(--serif);
  font-size: 17px; letter-spacing: 3px;
  color: var(--brown-deep);
}
.avatar-pick { display: block; cursor: pointer; text-align: center; }
.avatar-pick input[type="file"] { display: none; }
.avatar-pick .msg-avatar { margin: 0 auto; border-radius: 50%; }
.avatar-pick-tip { display: block; margin: 10px 0 4px; font-size: 12.5px; color: var(--brown-light); }
.avatar-clear { display: block; margin-bottom: 14px; text-align: center; font-size: 12.5px; color: var(--brown-light); }

/* 手机上把弹窗压紧一点，尽量一屏放得下（放不下时卡片内部可以滚） */
@media (max-width: 767px) {
  .cy-modal { padding: 14px; }
  .cy-modal-card.edit-card { padding: 18px 18px 16px; }
  .edit-title { margin-bottom: 10px; }
  .avatar-pick .msg-avatar { width: 64px !important; height: 64px !important; font-size: 27px !important; }
  .avatar-pick-tip { margin: 6px 0 0; }
  .edit-card .form-group { margin-bottom: 10px; }
}

/* ============================================================
   十六、商城轮播：实拍茶品茶器 + 暗色渐变 + 鎏金卷轴内框
   直接沿用首页 .home-slider / .home-slide 那套骨架，
   这里只收紧高度与字号：电脑端 268px 大图，手机端 196px 矮横幅
   ============================================================ */
.shop-hero.home-slider { margin-bottom: 16px; }
.shop-hero .home-slides { height: 268px; }
/* 整张幻灯片就是链接，去掉下划线，免得标题被染成链接色 */
.shop-hero .home-slide { text-decoration: none; }
/* 实拍图裁偏左一点，右侧留给暗底托字 */
.shop-hero .hs-photo { object-position: 32% center; }
.shop-hero .hs-body { right: 56px; bottom: 62px; max-width: 46%; }
.shop-hero .hs-kicker { font-size: 11px; letter-spacing: 3.5px; }
.shop-hero .hs-title { margin-top: 12px; font-size: 32px; letter-spacing: 7px; }
.shop-hero .hs-sub { margin-top: 12px; font-size: 12px; letter-spacing: 2px; }
.shop-hero .hs-seal { right: 30px; bottom: 56px; }
/* 「进店一逛」：一枚细金边小签，提示整张可点，不抢主标题 */
.shop-hero .hs-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 6px 13px;
  font-family: var(--kai);
  font-size: 11.5px;
  letter-spacing: 2.5px;
  color: rgba(246, 236, 214, .90);
  border: 1px solid rgba(212, 182, 124, .42);
  border-radius: 2px;
  background: rgba(22, 28, 23, .34);
  transition: background .35s, border-color .35s, color .35s;
}
.shop-hero .hs-go::after {
  content: '›';
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
  color: rgba(226, 199, 143, .92);
}
.shop-hero .home-slide:hover .hs-go {
  background: rgba(184, 147, 90, .20);
  border-color: rgba(226, 199, 143, .70);
  color: #fbf6ea;
}
/* 商城横幅矮一截，右上角大数字跟着收小 */
.shop-hero .home-slide::after { font-size: 96px; right: 24px; top: 0; }
.shop-hero .home-dots { left: 32px; bottom: 27px; gap: 11px; }
.shop-hero .home-dot { width: 6px; height: 6px; }
.shop-hero .home-dot.on { width: 6px; height: 6px; }
.shop-hero .home-count { right: 32px; bottom: 22px; }

/* 全站搜索框的清除小圆钮：输入框有内容时才出现，点一下清空 */
.search-box {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.search-box > input[type="text"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-right: 34px;
}
.search-clear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(58, 39, 23, .10);
  color: var(--brown-light);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.search-clear:hover { background: rgba(184, 147, 90, .26); color: var(--brown-deep); }
.search-clear[hidden] { display: none; }

@media (max-width: 1023px) {
  .shop-hero .home-slides { height: 236px; }
  .shop-hero .hs-body { right: 40px; bottom: 58px; max-width: 52%; }
  .shop-hero .hs-title { font-size: 28px; letter-spacing: 6px; }
  .shop-hero .hs-seal { right: 22px; bottom: 52px; }
}

/* 手机端：收成一条矮横幅，字压到左下，藏掉印章与「进店一逛」 */
@media (max-width: 767px) {
  .shop-hero .home-slides { height: 196px; }
  .shop-hero .hs-photo { object-position: 36% center; }
  .shop-hero .hs-body { left: 18px; right: 16px; bottom: 44px; max-width: none; }
  .shop-hero .hs-kicker { padding: 2px 7px; font-size: 9.5px; letter-spacing: 2.5px; }
  .shop-hero .hs-title { margin-top: 8px; font-size: 22px; letter-spacing: 4px; }
  .shop-hero .hs-sub { margin-top: 8px; font-size: 10.5px; letter-spacing: 1px; }
  .shop-hero .hs-sub::before { width: 14px; margin-right: 6px; }
  .shop-hero .hs-go,
  .shop-hero .hs-seal,
  .shop-hero .home-slide::after { display: none; }
  .shop-hero .home-dots { left: 18px; bottom: 15px; gap: 9px; }
  .shop-hero .home-dot { width: 6px; height: 6px; }
  .shop-hero .home-dot.on { width: 6px; height: 6px; }
  .shop-hero .home-count { right: 16px; bottom: 11px; font-size: 10px; }
  .shop-hero .home-count b { font-size: 13px; }

  /* 手机端搜索栏：关键词独占一行，分类与搜索按钮并排，免得按钮被挤出屏幕 */
  .shop-search { display: flex !important; flex-wrap: wrap; }
  .shop-search .search-box { flex: 1 1 100% !important; min-width: 0 !important; }
  .shop-search select.form-control { flex: 1 1 auto; width: auto !important; }
  .shop-search .btn { flex: 0 0 auto; }

  /* 清除钮在手机上放大一点，好按 */
  .search-clear { right: 7px; width: 22px; height: 22px; font-size: 15px; }
  .search-box > input[type="text"] { padding-right: 36px; }
}

/* ============================================================
   十七、导航条右侧的商城入口：购物车（带件数角标）/ 我的订单
   跟积分、头像、退出排在一起，电脑端手机端都看得到；
   页面上不再重复摆这两个按钮
   ============================================================ */
.wx-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  color: rgba(238, 236, 226, .58);
  text-decoration: none;
  border-radius: 50%;
  transition: background .2s, color .2s;
}
.wx-icon-link:hover { color: var(--gold-light); background: rgba(217, 187, 121, .14); }
.wx-icon-link svg { width: 17px; height: 17px; }
/* 购物车件数角标：跟底部 TabBar 那个未读红点同一路朱砂 */
.wx-icon-badge {
  position: absolute; top: 0; right: -1px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: linear-gradient(180deg, #b04a37, var(--red-seal));
  color: #fff7ef; border-radius: 8px;
  font-size: 10px; line-height: 15px; text-align: center;
}
@media (max-width: 767px) {
  .wx-icon-link { width: 27px; height: 27px; }
  .wx-icon-link svg { width: 16px; height: 16px; }
}

/* ============================================================
   十八、茶友大厅（12 茶板块 + 广场 + 我的聊天）
   消息从 TabBar 收进导航条后，talk.php 就是这页大厅
   ============================================================ */
.hall { display: flex; flex-direction: column; gap: 18px; }

.hall-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  background-color: var(--paper);
  background-image: var(--noise), linear-gradient(180deg, rgba(184, 147, 90, .07), rgba(184, 147, 90, 0));
  background-size: 180px 180px, auto;
}
.hall-title {
  margin: 0;
  font-family: var(--serif); font-size: 22px; letter-spacing: 6px;
  color: var(--brown-deep);
}
.hall-sub {
  margin: 6px 0 0;
  font-size: 12.5px; color: var(--brown-light); letter-spacing: 1.6px;
}
.hall-join { display: flex; gap: 7px; align-items: center; }
.hall-join input {
  width: 132px; padding: 9px 12px;
  border: 1px solid rgba(176, 139, 78, .30); border-radius: var(--r-ctl);
  background: var(--paper);
  font: inherit; font-size: 14px; letter-spacing: 2px; color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.hall-err { margin-top: -10px; font-size: 12.5px; color: var(--red-seal); }

/* 十二板块：每块一枚朱砂印章单字 */
.hall-boards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hall-board {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 13px 14px 12px;
  text-decoration: none;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  background-color: var(--paper);
  background-image: var(--noise);
  background-size: 180px 180px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hall-board:hover {
  transform: translateY(-2px);
  border-color: var(--hair);
  box-shadow: 0 12px 26px -20px var(--shadow);
}
.hall-board.on {
  border-color: rgba(184, 147, 90, .60);
  box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .18);
}
.hall-board-seal {
  width: 24px; height: 24px; border-radius: 4px; margin-bottom: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px;
  color: #fff6ea;
  background: linear-gradient(160deg, #a8453a, var(--red-seal));
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .34);
}
.hall-board-name { font-family: var(--serif); font-size: 15px; letter-spacing: 1px; color: var(--brown-deep); }
.hall-board-intro { font-size: 11.5px; line-height: 1.5; color: var(--brown-light); }
.hall-board-n { font-size: 11px; color: var(--gold); letter-spacing: .4px; }

/* 区块标题：左侧一道鎏金细条 */
.hall-sec { display: flex; flex-direction: column; gap: 10px; }
.hall-sec-h {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  padding-left: 10px;
  font-family: var(--serif); font-size: 16px; letter-spacing: 1.5px;
  color: var(--brown-deep);
}
.hall-sec-h::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.hall-sec-more {
  font-family: var(--sans); font-size: 12px; letter-spacing: .4px;
  color: var(--brown-light); text-decoration: none;
}
.hall-sec-more:hover { color: var(--gold); }
/* 系统提醒标题右侧的两个小入口（更多 / 全部已读） */
.hall-sec-tools { display: inline-flex; align-items: baseline; gap: 14px; }

/* 系统提醒「更多」弹窗：宣纸底、金线描边，内部滚动 */
.cy-modal-card.notice-card {
  width: min(560px, 92vw);
  max-width: none;
  max-height: 74vh;
  padding: 0;
  text-align: left;
  display: flex; flex-direction: column;
}
.notice-card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--serif); font-size: 16px; letter-spacing: 2px;
  color: var(--brown-deep);
}
.notice-card-x {
  padding: 0 2px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: var(--brown-light);
  cursor: pointer;
}
.notice-card-x:hover { color: var(--brown-deep); }
.notice-card-list {
  padding: 4px 18px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 768px) {
  .cy-modal-card.notice-card { width: 92vw; max-height: 70vh; }
}

/* 广场茶局卡片 */
.hall-plaza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hall-party {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px;
  text-decoration: none;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  background-color: var(--paper);
  background-image: var(--noise);
  background-size: 180px 180px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hall-party:hover {
  transform: translateY(-2px);
  border-color: var(--hair);
  box-shadow: 0 12px 26px -20px var(--shadow);
}
.hall-party-seal {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 15px;
  color: #fff6ea;
  background: linear-gradient(160deg, #a8453a, var(--red-seal));
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .34);
}
.hall-party-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hall-party-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hall-party-title { font-size: 14.5px; font-weight: 600; color: var(--brown-deep); }
.hall-party-tag {
  padding: 1px 6px; border-radius: 8px;
  font-size: 10.5px; color: var(--brown);
  background: rgba(184, 147, 90, .14);
}
.hall-party-signed {
  padding: 1px 6px; border-radius: 8px;
  font-size: 10.5px; color: var(--tea-green-deep);
  border: 1px solid rgba(110, 138, 114, .38);
}
/* 我发起的茶局：和「已报名」同款的墨绿描边小签 */
.hall-party-own {
  padding: 1px 6px; border-radius: 8px;
  font-size: 10.5px; color: var(--tea-green-deep);
  border: 1px solid rgba(110, 138, 114, .38);
}
.hall-party-meta { font-size: 12px; color: var(--brown-light); }
.hall-party-note { font-size: 11.5px; line-height: 1.5; color: var(--brown-light); }
.hall-party-side {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
/* 报名人数：朱砂描框小牌，一眼看清已报/上限 */
.hall-party-num {
  font-size: 13px; font-weight: 700; color: var(--ink);
  font-family: var(--serif); letter-spacing: 1px;
  border: 1px solid rgba(158, 61, 50, .45);
  background: rgba(158, 61, 50, .06);
  border-radius: 6px; padding: 2px 9px;
}
.hall-party-enter { font-size: 11.5px; color: var(--gold); }

/* 空板块 / 空广场：盖碗线描一句题字，不空落落 */
.hall-empty {
  padding: 24px 18px; text-align: center;
  border: 1px dashed var(--hair);
  border-radius: var(--r-panel);
  background: rgba(184, 147, 90, .03);
}
.hall-empty-mark {
  display: block; width: 72px; height: 64px; margin: 0 auto 6px;
  background-image: var(--gaiwan);
  background-repeat: no-repeat; background-position: center;
  opacity: .48;
}
.hall-empty-t { font-family: var(--kai); font-size: 14px; letter-spacing: 2px; color: var(--brown); }
.hall-empty-s { margin: 4px 0 12px; font-size: 12px; color: var(--brown-light); }

/* 我的聊天：沿用会话条样式，改成两列排 */
.hall-chats { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
.hall-hall-link {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 12px; color: var(--brown-light); text-decoration: none;
}
.hall-hall-link:hover { color: var(--gold); }

/* ============================================================
   十九、群聊页：茶局资料直接摆在右侧占四成，不再藏在三条杠里
   ============================================================ */
.chat-panel-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 有茶局资料的群聊：左边聊天六成，右边资料四成，两边齐高 */
.chat-panel.has-info { flex-direction: row; align-items: stretch; }
.chat-panel.has-info .chat-main {
  flex: 1 1 60%; min-width: 0;
  display: flex; flex-direction: column;
}
.chat-info {
  flex: 0 0 40%; max-width: 40%; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--paper);            /* 与左边聊天面板同一种宣纸底，只靠细金线分界 */
  border-left: 1px solid var(--hair-soft);
}
.chat-info-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));   /* 和聊天标题条同一条渐层 */
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.cd-owner-actions form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cd-owner-actions .btn { white-space: nowrap; }
.chat-info-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-info-body::-webkit-scrollbar { width: 8px; }
.chat-info-body::-webkit-scrollbar-thumb { background: rgba(176, 139, 78, .24); border-radius: 4px; }
.chat-info-body::-webkit-scrollbar-thumb:hover { background: rgba(176, 139, 78, .40); }

.cd-hero { display: flex; gap: 11px; align-items: center; }
.cd-seal {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px;
  color: #fff6ea;
  background: linear-gradient(160deg, #a8453a, var(--red-seal));
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .34);
}
.cd-hero-txt { min-width: 0; }
.cd-title { font-family: var(--serif); font-size: 16px; color: var(--brown-deep); line-height: 1.4; }
.cd-sub { margin-top: 3px; font-size: 11.5px; color: var(--brown-light); }

/* 茶局资料面板里的报名人数：与广场小牌同款，深字加粗 + 朱砂描框浅底 */
.cd-num {
  display: inline-block;
  margin-top: 2px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid rgba(158, 61, 50, .45);
  background: rgba(158, 61, 50, .06);
  border-radius: 6px;
  padding: 1px 8px;
}

.cd-list {
  margin: 0; padding: 12px 0;
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
}
.cd-list > div { display: flex; gap: 10px; font-size: 12.5px; }
.cd-list dt { width: 52px; flex-shrink: 0; color: var(--brown-light); }
.cd-list dd { margin: 0; color: var(--ink); word-break: break-all; }
.cd-room { font-family: var(--serif); letter-spacing: 3px; color: var(--gold); }

.cd-block-h { margin-bottom: 6px; font-size: 12px; letter-spacing: 1.5px; color: var(--brown-light); }
.cd-text { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ink); }
.cd-time { margin-top: 5px; font-size: 11px; color: var(--brown-light); }

.cd-signup { display: flex; flex-direction: column; gap: 7px; }
/* 报名按钮单独起名，别跟购物车条的加减小圆钮 .cd-btn 撞类名 */
.cd-party-btn {
  display: block; padding: 11px;
  text-align: center; text-decoration: none;
  font-size: 14px; letter-spacing: 2px; color: #fff6ea;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, #7a4a2c, #5c3520);
  box-shadow: 0 0 0 1px rgba(184, 147, 90, .40), 0 8px 16px -12px var(--shadow);
  transition: filter .18s, transform .18s;
}
.cd-party-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cd-party-btn-ghost {
  color: var(--brown-deep);
  background: none;
  border: 1px solid var(--hair);
  box-shadow: none;
}
/* 茶局资料里的报名状态：深茶褐字 + 朱砂描框小牌，和广场报名人数同款 */
.cd-signed {
  display: inline-block; align-self: flex-start;
  font-size: 13px; font-weight: 700; color: var(--ink);
  font-family: var(--serif); letter-spacing: 1px;
  border: 1px solid rgba(158, 61, 50, .45);
  background: rgba(158, 61, 50, .06);
  border-radius: 6px; padding: 2px 9px;
}
.cd-signed b { color: var(--ink); }
.cd-ended {
  padding: 10px; text-align: center;
  font-size: 13px; color: var(--brown-light);
  background: rgba(184, 147, 90, .06);
  border-radius: var(--r-btn);
}
.cd-tip { font-size: 11px; line-height: 1.5; color: var(--brown-light); }

.cd-members { display: flex; flex-direction: column; gap: 8px; }
.cd-member { display: flex; align-items: center; gap: 8px; }
.cd-avatar {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 12px;
  background: linear-gradient(135deg, var(--brown), var(--brown-deep));
  color: var(--gold-light);
}
.cd-avatar.has-img { padding: 0; overflow: hidden; }
.cd-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-member-name {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-member-tag { flex-shrink: 0; font-size: 10.5px; color: var(--brown-light); }
.cd-empty { font-size: 12px; color: var(--brown-light); }
.cd-more { padding-top: 6px; text-align: center; font-size: 12.5px; color: var(--gold); text-decoration: none; }

/* 导航条上的消息按钮亮起（大厅 / 群聊页） */
.wx-icon-link.on { color: var(--gold-light); background: rgba(217, 187, 121, .12); }

/* ---------- 二十、大厅入口分端：电脑端在左竖栏，手机端在顶栏 ---------- */
/* 手机端顶栏品牌旁边那枚「大厅」 */
.wx-header-hall {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  height: 24px;
  margin-left: 8px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid rgba(217, 187, 121, .30);
  color: rgba(238, 236, 226, .80);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 2px;
  text-indent: 2px;
  text-decoration: none;
  transition: color .18s, background .18s, border-color .18s;
}
.wx-header-hall:hover { color: var(--gold-light); background: rgba(217, 187, 121, .14); }
.wx-header-hall.on {
  color: var(--gold-light);
  border-color: rgba(217, 187, 121, .58);
  background: rgba(217, 187, 121, .16);
}

/* 底部栏的「大厅」格只在电脑端竖栏出现；「消息」格只在手机端出现 */
.wx-tab-hall { display: none; }
@media (min-width: 768px) {
  .wx-tab-hall { display: flex; }
  .wx-tab-msg  { display: none; }
}

/* 群聊页在电脑端可以更高一些，一屏看更多消息 */
.chat-page .chat-msgs { height: calc(100vh - 250px); min-height: 360px; }

@media (max-width: 767px) {
  .hall-head { padding: 14px 15px; }
  .hall-title { font-size: 19px; letter-spacing: 5px; }
  .hall-join input { width: 108px; }
  .hall-boards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hall-board { padding: 11px 12px; }
  .hall-plaza { grid-template-columns: 1fr; }
  .hall-chats { grid-template-columns: 1fr; }
  /* 手机端：资料区改到聊天下方，占四成屏高，自己内部滚动 */
  .chat-panel.has-info { flex-direction: column; }
  .chat-panel.has-info .chat-main { flex: 0 0 auto; height: 53vh; }
  .chat-panel.has-info .chat-msgs { flex: 1 1 auto; height: auto; min-height: 0; }
  .chat-info {
    flex: 0 0 auto; width: 100%; max-width: none;
    height: 40vh;
    border-left: 0; border-top: 1px solid var(--hair-soft);
  }
  .chat-page .chat-msgs { height: calc(100vh - 232px); min-height: 240px; }
}

/* ============================================================
   二十一、首页改版：只留题头与今日茶席，不放任何快捷按钮
   发起 / 浏览 / 房间号 / 商城等入口全部由导航条与 TabBar 承担
   ============================================================ */

/* 题头下方一行小字：今日日期 */
.home-hero-date {
  margin-top: 16px;
  font-family: var(--kai);
  font-size: 12.5px;
  letter-spacing: 4px;
  color: var(--gold);
  opacity: .95;
}

/* 今日茶席里已报名的那一场：右侧竖排一枚「已入席」小印 */
.home-seat {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 1.5px;
  color: var(--tea-green-deep);
  text-align: center;
  white-space: nowrap;
}
.home-seat em { font-style: normal; color: var(--gold); letter-spacing: 1px; }

@media (max-width: 767px) {
  .home-hero-date { margin-top: 12px; letter-spacing: 3px; }
  .home-seat { font-size: 11px; padding-left: 9px; }
}

/* 工夫茶笺：首页底部一块安静的茶谚牌，宣纸底 + 细金线 + 朱砂小印 */
.home-note {
  position: relative;
  margin-top: 16px;
  padding: 22px 26px 24px;
  border-radius: var(--r-panel);
  background-color: var(--paper);
  background-image: var(--noise);
  border: 1px solid var(--hair);
  box-shadow: 0 14px 34px -26px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .6);
  overflow: hidden;
}
.home-note-h {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--gold);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hair-soft);
}
.home-note p {
  margin: 0 0 9px;
  font-family: var(--kai);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 2px;
  color: var(--brown-deep);
}
.home-note p:last-of-type { margin-bottom: 0; }

/* 首页两个主入口：发起茶局 / 参与茶局 */
.home-actions {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}
.home-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  border-radius: var(--r-panel);
  font-family: var(--kai);
  font-size: 17px;
  letter-spacing: 5px;
  text-indent: 5px;                 /* 补 letter-spacing 的视觉偏移，字才真正居中 */
  text-decoration: none;
  color: var(--brown-deep);
  background-color: var(--paper);
  background-image: var(--noise);
  border: 1px solid var(--hair);
  box-shadow: 0 10px 24px -20px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .12s ease, box-shadow .12s ease, opacity .15s;
}
.home-action-btn:active { transform: scale(.97); opacity: .9; }
/* 主按钮：朱砂红底描金，一眼认出是「发起」 */
.home-action-btn.is-primary {
  color: #f8efe0;
  background: linear-gradient(160deg, #b04a3c, var(--red-seal) 55%, #8a3329);
  border: 1px solid rgba(176, 139, 78, .55);
  box-shadow: 0 12px 26px -18px rgba(158, 61, 50, .85), inset 0 1px 0 rgba(255, 255, 255, .18);
}

@media (max-width: 767px) {
  .home-note { padding: 18px 18px 20px; }
  .home-note p { font-size: 13.5px; letter-spacing: 1.6px; }
}

/* 首页轮播：卷轴装裱式大图 —— 实景茶图 + 鎏金内框 + 四角回纹 + 极淡暗角 */
.home-slider {
  position: relative;
  margin-bottom: 22px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(184, 147, 90, .34);
  background: #1b221b;
  box-shadow:
    0 42px 72px -48px rgba(26, 20, 14, .88),
    0 16px 34px -26px rgba(26, 20, 14, .52),
    0 1px 0 rgba(255, 255, 255, .07) inset;
  transition: box-shadow .6s ease;
}
/* 装裱内框：一圈细金线 */
.home-slider::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212, 182, 124, .30);
  border-radius: 3px;
  pointer-events: none;
  z-index: 5;
}
/* 四角回纹角标：八道金线拼成四个直角，比整圈描边更收敛 */
.home-slider::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 6;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58)),
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58)),
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58)),
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58)),
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58)),
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58)),
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58)),
    linear-gradient(rgba(240, 214, 160, .58), rgba(240, 214, 160, .58));
  background-repeat: no-repeat;
  background-size:
    24px 1px, 1px 24px,
    24px 1px, 1px 24px,
    24px 1px, 1px 24px,
    24px 1px, 1px 24px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
.home-slides { position: relative; height: 400px; }
/* 三帧叠在一处淡入淡出，比横向推拉更像翻卷轴 */
.home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* 图片没加载出来时也不至于变成一块死黑，留一层淡茶色的兜底 */
  background: linear-gradient(140deg, #2a3629 0%, #1d261d 46%, #141a14 100%);
  transition: opacity .9s ease, visibility .9s;
}
.home-slide.on { opacity: 1; visibility: visible; }
/* 右上角一枚空心大数字：压得极淡，只当装裱上的编号 */
.home-slide::after {
  content: attr(data-num);
  position: absolute;
  right: 28px;
  top: 2px;
  z-index: 2;
  font-family: var(--serif);
  font-size: 128px;
  line-height: 1;
  color: rgba(246, 241, 230, .052);
  -webkit-text-stroke: 1px rgba(212, 182, 124, .16);
  pointer-events: none;
  user-select: none;
}
/* 实景照片铺满，激活时极缓推近一点，让画面不死板 */
.hs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scale(1);
  filter: saturate(.94) contrast(1.03) brightness(.99);
  transition: transform 9s cubic-bezier(.22, .61, .36, 1), filter 1.2s ease;
}
.home-slide.on .hs-photo { transform: scale(1.07); }
/* 三层压暗：暗角收边、右侧压深托字、底部压深托圆点与帧号 */
.hs-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(125% 118% at 34% 40%, rgba(10, 14, 10, 0) 42%, rgba(10, 14, 10, .42) 100%),
    linear-gradient(90deg, rgba(14, 18, 14, 0) 18%, rgba(14, 18, 14, .24) 40%, rgba(14, 18, 14, .72) 62%, rgba(14, 18, 14, .94) 88%),
    linear-gradient(180deg, rgba(12, 16, 12, .32) 0%, rgba(12, 16, 12, 0) 22%, rgba(12, 16, 12, .60) 100%);
}
/* 文字压在右侧留白上，和热门 App 的大图卡片一个读法 */
.hs-body {
  position: absolute;
  right: 74px;
  bottom: 86px;
  z-index: 2;
  max-width: 44%;
}
/* 小分类：鎏金细边小签，前头一枚小菱格 */
.hs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 10px;
  font-family: var(--kai);
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(244, 232, 209, .88);
  border: 1px solid rgba(212, 182, 124, .36);
  border-radius: 2px;
  background: rgba(18, 24, 19, .38);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.hs-kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: rgba(226, 199, 143, .92);
  transform: rotate(45deg);
}
.hs-title {
  margin: 17px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: 11px;
  color: #f7f2e7;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .30), 0 14px 38px rgba(0, 0, 0, .55);
}
.hs-sub {
  display: flex;
  align-items: center;
  margin: 15px 0 0;
  font-family: var(--kai);
  font-size: 13px;
  letter-spacing: 2.5px;
  color: rgba(240, 233, 219, .74);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .40);
}
.hs-sub::before {
  content: '';
  width: 30px;
  height: 1px;
  margin-right: 10px;
  background: linear-gradient(90deg, rgba(212, 182, 124, .95), rgba(212, 182, 124, .12));
}
/* 朱砂小印：压在右缘，偏一点角度，像随手钤上去的 */
.hs-seal {
  position: absolute;
  right: 34px;
  bottom: 78px;
  z-index: 3;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
  color: #fff4ec;
  background: var(--red-seal);
  border-radius: 3px;
  opacity: .92;
  transform: rotate(-6deg);
  box-shadow:
    0 0 0 1px rgba(255, 240, 232, .30) inset,
    0 10px 22px -12px rgba(120, 28, 20, .95);
}
/* 圆点：菱格样式，选中一档填金发光 */
.home-dots {
  position: absolute;
  left: 36px;
  bottom: 31px;
  display: flex;
  align-items: center;
  gap: 13px;
  z-index: 6;
}
.home-dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(240, 224, 190, .52);
  transform: rotate(45deg);
  cursor: pointer;
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.home-dot.on {
  background: rgba(240, 220, 174, .94);
  border-color: rgba(240, 220, 174, .94);
  box-shadow: 0 0 12px rgba(226, 199, 143, .55);
  transform: rotate(45deg) scale(1.15);
}
/* 右下角帧号 */
.home-count {
  position: absolute;
  right: 36px;
  bottom: 22px;
  z-index: 6;
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: 3px;
  color: rgba(240, 233, 219, .48);
}
.home-count b { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: rgba(246, 236, 216, .95); }
/* 底边一道走动的金线，提示下一帧还要等多久 */
.home-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(240, 233, 219, .12);
  z-index: 6;
}
.home-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(212, 182, 124, .10), rgba(226, 199, 143, .75), rgba(248, 238, 214, .98));
  box-shadow: 0 0 10px rgba(226, 199, 143, .45);
}
@media (hover: hover) {
  .home-slider:hover {
    box-shadow:
      0 46px 78px -46px rgba(26, 20, 14, .92),
      0 18px 38px -26px rgba(26, 20, 14, .58),
      0 1px 0 rgba(255, 255, 255, .09) inset;
  }
}

@media (max-width: 1023px) {
  .home-slides { height: 330px; }
  .hs-body { right: 50px; bottom: 74px; max-width: 50%; }
  .hs-title { font-size: 38px; letter-spacing: 8px; }
  .hs-seal { right: 26px; bottom: 68px; }
}

@media (max-width: 767px) {
  .home-slider { border-radius: 8px; }
  .home-slider::after { inset: 6px; border-radius: 2px; }
  .home-slider::before {
    inset: 6px;
    background-size:
      16px 1px, 1px 16px,
      16px 1px, 1px 16px,
      16px 1px, 1px 16px,
      16px 1px, 1px 16px;
  }
  .home-slides { height: 234px; }
  .home-slide::after {
    right: 12px;
    top: 0;
    font-size: 76px;
    color: rgba(246, 241, 230, .045);
    -webkit-text-stroke-width: .8px;
  }
  .hs-photo { object-position: 42% center; }
  .hs-veil {
    background:
      radial-gradient(130% 120% at 36% 38%, rgba(10, 14, 10, 0) 40%, rgba(10, 14, 10, .34) 100%),
      linear-gradient(180deg, rgba(12, 16, 12, .16) 0%, rgba(12, 16, 12, 0) 14%, rgba(12, 16, 12, .58) 42%, rgba(12, 16, 12, .92) 88%),
      linear-gradient(90deg, rgba(12, 16, 12, .34), rgba(12, 16, 12, 0) 62%);
  }
  .hs-body { left: 22px; right: 22px; bottom: 56px; max-width: none; }
  .hs-kicker { gap: 7px; padding: 3px 9px 3px 9px; font-size: 9.5px; letter-spacing: 3px; }
  .hs-kicker::before { width: 4px; height: 4px; }
  .hs-title { margin-top: 12px; font-size: 27px; letter-spacing: 6px; }
  .hs-sub { margin-top: 11px; font-size: 11.5px; letter-spacing: 1.5px; }
  .hs-sub::before { width: 18px; margin-right: 8px; }
  .hs-seal { right: 20px; bottom: 94px; width: 26px; height: 26px; font-size: 13px; }
  .home-dots { left: 22px; bottom: 26px; gap: 11px; }
  .home-dot { width: 7px; height: 7px; }
  .home-dot.on { transform: rotate(45deg) scale(1.2); }
  .home-count { right: 22px; bottom: 21px; }
}

/* ============================================================
   二十二、房间举报 + 管理员封禁房间
   ============================================================ */
/* 聊天头右侧的举报小旗：跟三条杠做成同一尺寸，双端都好点 */
.chat-report-btn {
  flex-shrink: 0;
  width: 30px; height: 30px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--brown); cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.chat-report-btn svg { width: 16px; height: 16px; }
.chat-report-btn:hover {
  background: rgba(184, 147, 90, .12);
  border-color: var(--hair-soft);
  color: var(--red-seal);
}
/* 群主改房间名铅笔按钮：跟举报小旗同款尺寸 */
.chat-panel-rename {
  flex-shrink: 0;
  width: 30px; height: 30px; margin-left: 2px;
  background: transparent; border: 1px dashed var(--hair); border-radius: 6px;
  color: var(--brown-light); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s, color .18s;
}
.chat-panel-rename svg { width: 15px; height: 15px; }
.chat-panel-rename:hover {
  background: rgba(184, 147, 90, .12);
  border-color: var(--gold); border-style: solid;
  color: var(--gold);
}

/* 举报弹窗：面板内遮罩 + 宣纸对话框，与茶局资料抽屉同一套语汇 */
.report-mask {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(24, 20, 14, .34);
  opacity: 0; visibility: hidden;
  transition: opacity .22s, visibility .22s;
}
.report-mask.is-open { opacity: 1; visibility: visible; }
.report-box {
  position: absolute; left: 50%; top: 50%; z-index: 10;
  width: 340px; max-width: calc(100% - 32px);
  padding: 18px 20px 16px;
  background-color: var(--paper);
  background-image: var(--noise);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: 0 26px 60px -28px rgba(24, 20, 14, .55), inset 0 0 0 3px var(--paper);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -46%) scale(.97);
  transition: opacity .22s, visibility .22s, transform .22s;
}
.report-box.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.report-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair-soft);
}
.report-title { font-family: var(--serif); font-size: 16px; letter-spacing: 2px; color: var(--brown-deep); }
.report-close {
  padding: 2px 4px; border: none; background: none;
  font-size: 18px; line-height: 1; color: var(--brown-light);
  cursor: pointer; transition: color .18s;
}
.report-close:hover { color: var(--red-seal); }
.report-sub { margin: 10px 0 12px; font-size: 12px; line-height: 1.7; color: var(--brown-light); }
.report-label { display: block; margin-bottom: 7px; font-size: 12.5px; color: var(--brown-deep); letter-spacing: 1px; }
.report-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.report-reasons label {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; font-size: 12.5px; color: var(--brown);
  border: 1px solid var(--hair-soft); border-radius: var(--r-ctl);
  cursor: pointer; transition: background .18s, border-color .18s;
}
.report-reasons label:hover { border-color: var(--hair); background: rgba(184, 147, 90, .07); }
.report-reasons input { margin: 0; accent-color: var(--tea-green-deep); }
.report-box textarea {
  width: 100%; padding: 9px 11px;
  font-family: inherit; font-size: 13px; line-height: 1.6; color: var(--brown-deep);
  background: rgba(255, 253, 248, .7);
  border: 1px solid var(--hair-soft); border-radius: var(--r-ctl);
  resize: vertical;
}
.report-actions { display: flex; gap: 10px; margin-top: 14px; }
.report-actions .btn { flex: 1; }

/* 会话列表里的封禁房间：点不进去，虚线框 + 去饱和，一眼看出状态 */
.chat-session.is-banned {
  cursor: not-allowed; opacity: .74;
  border-style: dashed;
  background: rgba(184, 147, 90, .05);
}
.chat-session.is-banned:hover { transform: none; box-shadow: none; border-color: var(--hair-soft); }
.chat-session.is-banned .chat-session-ico {
  background: linear-gradient(135deg, #8b8b82, #6f6f66);
  color: #f0efe9;
}
.chat-session-ban {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 10.5px; font-weight: 400; line-height: 16px; vertical-align: 1px;
  color: var(--red-seal);
  border: 1px solid rgba(158, 61, 50, .28);
  border-radius: 3px;
  background: rgba(158, 61, 50, .07);
}
/* 我发起的茶局群聊：小小的朱砂签 */
.chat-session-own {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 10.5px; font-weight: 400; line-height: 16px; vertical-align: 1px;
  color: #fff; border-radius: 3px; background: var(--red-seal);
}

/* 后台侧边菜单上的待处理举报角标 */
.side-dot {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(180deg, #b04a37, var(--red-seal));
  color: #fff7ef;
  font-size: 11px; line-height: 18px; font-weight: 600;
  text-align: center;
}

/* 举报记录表：列多，操作区竖排，状态标签别折行 */
.report-table td, .report-table th { vertical-align: middle; }
.report-table .tag { white-space: nowrap; }
.report-ops {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 168px;
}
.report-ops .form-control { width: 100%; height: 30px; font-size: 12px; }
.report-ops-btns { display: flex; gap: 6px; }

/* 加入购物车提示：原地浮起一句，1.8 秒后自动淡出，页面不跳转 */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 14px);
  z-index: 3000;
  max-width: 78vw;
  padding: 12px 22px;
  border-radius: 6px;
  border: 1px solid rgba(212, 182, 124, .55);
  background: linear-gradient(160deg, #2f3d31 0%, #223025 100%);
  color: #f6efe0;
  font-size: 13.5px;
  letter-spacing: 1px;
  line-height: 1.6;
  box-shadow: 0 18px 40px -22px rgba(8, 18, 12, .85), 0 1px 0 rgba(255, 255, 255, .08) inset;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
}
.cart-toast.on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 输入框点开不做任何样式变化：不出现描边、发光或底色跳变 */
input:focus, textarea:focus, select:focus { outline: none; }

/* ============================================================
   商品介绍页：左图右价，宣纸面 + 细金线
   ============================================================ */
.pd-wrap {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}
.pd-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-panel);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, rgba(255, 253, 248, .92) 0%, rgba(249, 244, 233, .78) 100%);
  box-shadow: 0 18px 40px -34px rgba(61, 36, 16, .55);
}
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-media-glyph {
  font-family: var(--serif);
  font-size: 96px;
  color: rgba(184, 147, 90, .40);
}
.pd-info {
  padding: 26px 26px 22px;
  border-radius: var(--r-panel);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(180deg, rgba(255, 253, 248, .90) 0%, rgba(249, 244, 233, .74) 100%);
  box-shadow: 0 18px 40px -34px rgba(61, 36, 16, .45);
}
.pd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-name {
  margin: 12px 0 14px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--brown-deep);
}
.pd-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 10px 0 16px;
  border-bottom: 1px solid rgba(184, 147, 90, .18);
}
.pd-price-cur { color: var(--red-seal); font-size: 16px; }
.pd-price-num { color: var(--red-seal); font-size: 32px; font-weight: 700; letter-spacing: .5px; }
.pd-stock { margin-left: auto; font-size: 12.5px; color: var(--brown-light); }
.pd-desc {
  margin: 16px 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--brown);
}
.pd-qty { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pd-qty-label { font-size: 13px; letter-spacing: 1px; color: var(--brown-light); }
.pd-qty-btn {
  width: 32px; height: 32px;
  border: 1px solid rgba(184, 147, 90, .36);
  border-radius: var(--r-ctl);
  background: rgba(255, 253, 248, .9);
  color: var(--brown-deep);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.pd-qty-btn:hover { background: rgba(184, 147, 90, .14); border-color: var(--hair); }
.pd-qty input {
  width: 56px; height: 32px;
  border: 1px solid rgba(184, 147, 90, .28);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--brown-deep);
  font-size: 14px;
  text-align: center;
  -moz-appearance: textfield;
}
.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-acts { display: flex; gap: 10px; }
.pd-btn { flex: 1; padding: 12px 10px; }
.pd-fav {
  display: inline-block;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--brown-light);
  text-decoration: none;
  transition: color .2s;
}
.pd-fav:hover, .pd-fav.on { color: var(--red-seal); }
.pd-note {
  padding: 14px 16px;
  border: 1px solid rgba(184, 147, 90, .26);
  border-radius: var(--r-ctl);
  background: rgba(184, 147, 90, .08);
  font-size: 13px;
  color: var(--brown-light);
}
.pd-detail-text { font-size: 14px; line-height: 2; color: var(--brown); }
.pd-detail-tip { margin-top: 12px; font-size: 12px; color: var(--brown-light); }

.pd-related { margin-top: 4px; }
.pd-related-h {
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--brown-deep);
}
.pd-related-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pd-related-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-panel);
  background: rgba(255, 253, 248, .90);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.pd-related-item:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -26px rgba(61, 36, 16, .65); }
.pd-related-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.pd-related-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: rgba(184, 147, 90, .07);
  font-family: var(--serif);
  font-size: 34px;
  color: rgba(184, 147, 90, .5);
}
.pd-related-name {
  margin-top: 8px;
  font-size: 13px;
  color: var(--brown-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-related-price { margin-top: 4px; font-size: 13px; color: var(--red-seal); }

/* 商城卡片：整张图与标题都能点进商品介绍页 */
.pcard-link { display: block; color: inherit; text-decoration: none; }

@media (max-width: 860px) {
  .pd-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pd-info { padding: 20px 18px 18px; }
  .pd-name { font-size: 22px; }
  .pd-price-num { font-size: 28px; }
  .pd-btn { padding: 13px 10px; }
  .pd-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   商城底部购物车条：合计金额 · 查看明细 · 去结算
   深茶褐茶牌底 + 鎏金细边，不用拼多多的红黑配色
   ============================================================ */
/* 给固定条让出位置，最后一行商品不会被压住 */
.cart-bar-space { height: 104px; }

.cart-bar {
  position: fixed;
  left: 0; right: 0; bottom: 20px;
  z-index: 130;
  display: flex;
  justify-content: center;
  pointer-events: none;         /* 整条不挡点击，只有茶牌本体可点 */
}

/* 茶牌本体：纯色哑光深木 + 内圈鎏金细线 + 柔和高光（不要噪点底纹） */
.cart-bar-main {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100% - 40px));
  padding: 9px 10px 9px 18px;
  border-radius: 999px;
  background-color: #241a11;
  background-image: linear-gradient(180deg, #3a2a1a 0%, #241a11 62%, #1d150d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, .10),
    inset 0 0 0 1px rgba(184, 147, 90, .34),
    0 18px 34px -20px rgba(10, 8, 5, .62);
  transition: box-shadow .25s ease;
}

/* 左侧购物车线描图标 + 朱砂件数角标 */
.cart-bar-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #e6d6b6;
}
.cart-bar-icon svg { width: 25px; height: 25px; }
.cart-bar-badge {
  position: absolute;
  top: -4px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red-seal);
  color: #f7ede0;
  font-style: normal;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .6);
}

/* 中间：合计金额 + 查看明细（整块可点，用来展开明细） */
.cart-bar-total {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.cart-bar-price {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: #f4ead4;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.1;
}
.cart-bar-price i { font-style: normal; font-size: 12px; opacity: .78; }
.cart-bar-price b { font-weight: 600; letter-spacing: .5px; }

.cart-bar-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(226, 213, 187, .58);
  font-size: 11px;
  letter-spacing: 1.5px;
}
.cart-bar-caret {
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .25s ease;
}
.cart-bar.open .cart-bar-caret { transform: rotate(-135deg) translateY(-1px); }

/* 右侧结算：朱砂茶牌，hover 上浮、按下凹陷 */
.cart-bar-go {
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #a4483a 0%, #8c3629 52%, #792d22 100%);
  color: #fdf6ea;
  text-decoration: none;
  font-family: var(--kai);
  font-size: 14px;
  letter-spacing: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, .28),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 8px 16px -10px rgba(120, 40, 30, .9);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cart-bar-go:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, .32),
    inset 0 -2px 0 rgba(0, 0, 0, .2),
    0 12px 22px -12px rgba(120, 40, 30, .95);
}
.cart-bar-go:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .26);
}

/* 展开的明细托盘：从茶牌上沿往上抽出来 */
.cart-drawer {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: min(560px, calc(100% - 40px));
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: auto;
  transform: translate(-50%, 10px);
  border-radius: 14px;
  background-color: #241a11;
  background-image:
    var(--noise),
    linear-gradient(180deg, #33241a 0%, #221810 100%);
  background-size: 180px 180px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(184, 147, 90, .26),
    0 26px 46px -28px rgba(8, 6, 3, .9);
  transition: max-height .3s ease, opacity .24s ease, transform .28s ease, visibility .3s;
}
.cart-bar.open .cart-drawer {
  max-height: 300px;
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.cart-drawer-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 11px;
  border-bottom: 1px solid rgba(184, 147, 90, .16);
  color: #e8d9ba;
  font-size: 12.5px;
  letter-spacing: 2px;
}
.cart-drawer-h a {
  color: rgba(226, 213, 187, .62);
  font-size: 11.5px;
  letter-spacing: 1px;
  text-decoration: none;
}
.cart-drawer-h a:hover { color: var(--gold-light); }

.cart-drawer-list {
  max-height: 232px;
  overflow-y: auto;
  padding: 4px 18px 10px;
  overscroll-behavior: contain;
}
.cart-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(184, 147, 90, .13);
  color: rgba(238, 228, 210, .84);
  font-size: 12.5px;
}
.cart-drawer-item:last-child { border-bottom: 0; }
.cd-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-qty { color: rgba(226, 213, 187, .5); font-size: 11.5px; }
.cd-sub { min-width: 62px; text-align: right; color: #e6cf9d; font-family: var(--serif); }

/* 明细里的加 / 减与清空：小圆牌加减，细金线描边 */
.cart-drawer-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cart-drawer-tools button {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(226, 213, 187, .60);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color .18s ease;
}
.cart-drawer-tools button:hover { color: var(--gold-light); }

.cd-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cd-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(184, 147, 90, .34);
  background: rgba(255, 244, 220, .04);
  color: #e6d6b6;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.cd-btn:hover {
  background: rgba(184, 147, 90, .18);
  border-color: rgba(184, 147, 90, .60);
}
.cd-btn:active { transform: translateY(1px); }
.cd-ctrl .cd-qty {
  min-width: 16px;
  text-align: center;
  font-style: normal;
  color: rgba(238, 228, 210, .72);
}
.cart-drawer-empty {
  padding: 20px 0 22px;
  text-align: center;
  color: rgba(226, 213, 187, .46);
  font-size: 12.5px;
  letter-spacing: 1px;
}

/* 底栏在商城里时，加购提示要往上挪，别被茶牌压住 */
.cart-toast-over { bottom: 152px; }

@media (min-width: 768px) {
  /* 电脑端左侧有 216px 竖栏，茶牌要落在主内容区里 */
  .cart-bar { left: 216px; }
  .cart-toast-over { bottom: 106px; }
}

@media (max-width: 767px) {
  /* 手机端抬到 TabBar 上方 */
  .cart-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .cart-bar-main { width: calc(100% - 24px); padding: 8px 8px 8px 14px; gap: 10px; }
  .cart-bar-price { font-size: 19px; }
  .cart-bar-more { font-size: 10.5px; letter-spacing: 1px; }
  .cart-bar-go { padding: 11px 18px; font-size: 13px; letter-spacing: 2px; }
  .cart-drawer { width: calc(100% - 24px); }
  .cart-drawer-list { max-height: 200px; }
  .cart-bar-space { height: 168px; }
  .cart-toast-over { bottom: 160px; }
}

/* ============================================================
   纯聊天室改版（发起茶局成功后进入的专属聊天页）
   ============================================================ */
/* 修复：桌面端「左侧竖栏占位」规则 .app-body:not(.no-side){padding-left:216px}
   与纯聊天模式同优先级且位置靠后，把整个聊天室右移 216px，
   自己发的右对齐消息被挤出屏幕外——这就是“自己发了什么都不知道”的根因 */
html.bare-chat-html .app-body.bare-chat { padding: 0 !important; }

/* ---------- 头部：墨绿描金题签条 ---------- */
.app-body.bare-chat .chat-panel-head {
  padding: 13px 18px;
  background: linear-gradient(135deg, #33503f 0%, #274133 55%, #1f362b 100%);
  border-bottom: 1px solid rgba(216, 184, 120, .42);
  box-shadow: 0 6px 18px -12px rgba(20, 36, 28, .55);
  color: #f0ead6;
  gap: 12px;
}
.app-body.bare-chat .chat-panel-ico {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, rgba(216, 184, 120, .95), rgba(176, 139, 78, .95));
  color: #2c2118;
  font-size: 14px;
  box-shadow: 0 0 0 1px rgba(240, 234, 214, .35), 0 2px 6px -2px rgba(0, 0, 0, .45);
}
.app-body.bare-chat .chat-panel-title {
  font-family: var(--kai);
  font-size: 17.5px; letter-spacing: 2px;
  color: #f0ead6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .30);
}
.app-body.bare-chat .chat-back {
  color: #e9e2cc;
  background: rgba(240, 234, 214, .10);
  border-color: rgba(216, 184, 120, .45);
}
.app-body.bare-chat .chat-back:active { background: rgba(240, 234, 214, .22); }

/* 房间号金牌：头部右侧，描金小牌，方便当场报给茶友 */
.chat-room-badge {
  flex-shrink: 0;
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(184, 147, 90, .48);
  background: rgba(184, 147, 90, .10);
  color: var(--brown-deep);
  font-family: var(--serif);
  font-size: 12px; letter-spacing: 2px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.chat-room-badge:hover { background: rgba(184, 147, 90, .20); }
/* 复制成功的短暂反馈：描金变实金 */
.chat-room-badge.is-copied {
  border-color: var(--gold, #b8935a);
  background: rgba(184, 147, 90, .28);
  letter-spacing: 1px;
}
.app-body.bare-chat .chat-room-badge {
  border-color: rgba(216, 184, 120, .55);
  background: rgba(216, 184, 120, .12);
  color: #e5d3a8;
  box-shadow: inset 0 1px 0 rgba(240, 234, 214, .18);
}
.app-body.bare-chat .chat-room-badge:hover { background: rgba(216, 184, 120, .22); }
.app-body.bare-chat .chat-room-badge.is-copied {
  border-color: #d8b878;
  background: rgba(216, 184, 120, .30);
  color: #f3e6c2;
}

/* ---------- 消息区：对称 padding，让自己的消息 margin-left:auto 顶到右边缘 ---------- */
.app-body.bare-chat .chat-msgs {
  padding: 22px 16px 18px 16px;
  gap: 16px;
}

/* 新消息入场：轻轻一浮，知道“发出去了” */
@keyframes cyMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app-body.bare-chat .chat-msg { animation: cyMsgIn .28s ease-out; }

/* 自己发的消息：墨绿描金，右侧一眼可辨 */
.app-body.bare-chat .chat-msg.me .chat-msg-bubble {
  background: linear-gradient(160deg, #52705a 0%, #3c5747 58%, #344e40 100%);
  border: 1px solid rgba(216, 184, 120, .48);
  color: #f4f1e4;
  box-shadow: 0 1px 2px -1px rgba(20, 36, 28, .35), 0 12px 24px -16px rgba(20, 36, 28, .55);
}
.app-body.bare-chat .chat-msg.me .chat-msg-avatar {
  box-shadow: 0 0 0 1.5px rgba(216, 184, 120, .65), 0 2px 6px -3px rgba(20, 36, 28, .5);
}
.app-body.bare-chat .chat-msg.me .chat-msg-time { color: rgba(107, 79, 44, .85); }

/* 对方消息：宣纸白 + 暖金细边，与墨绿对望 */
.app-body.bare-chat .chat-msg:not(.me):not(.sys) .chat-msg-bubble {
  background: #fffef9;
  border-color: rgba(176, 139, 78, .30);
}

/* 输入条：圆角瓷白输入盏 + 墨绿发送钮 */
.app-body.bare-chat .chat-input {
  padding: 13px max(16px, calc((100% - 780px) / 2));
  border-top: 1px solid rgba(184, 147, 90, .30);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
}
.app-body.bare-chat .chat-input input {
  border-radius: 999px;
  padding: 12px 18px;
  border-color: rgba(176, 139, 78, .34);
  box-shadow: inset 0 1px 3px rgba(27, 39, 31, .06);
}
.app-body.bare-chat .chat-input input:focus {
  border-color: rgba(176, 139, 78, .62);
  box-shadow: inset 0 1px 3px rgba(27, 39, 31, .06), 0 0 0 3px rgba(184, 147, 90, .16);
}
.app-body.bare-chat .chat-input .btn {
  border-radius: 999px;
  padding: 12px 26px;
  letter-spacing: 2px;
  box-shadow: 0 6px 14px -8px rgba(30, 60, 45, .65);
}

@media (max-width: 768px) {
  .app-body.bare-chat .chat-msgs { padding: 16px 12px 14px; gap: 13px; }
  .app-body.bare-chat .chat-input { padding: 11px 12px; }
  .app-body.bare-chat .chat-panel-title { font-size: 16px; letter-spacing: 1px; }
  .app-body.bare-chat .chat-room-badge { font-size: 11px; padding: 3px 10px; letter-spacing: 1px; }
}

/* ============================================================
   商家入驻：条件清单 + 后台审核卡片
   ============================================================ */
.cond-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--hair-soft);
  font-size: 13.5px; color: var(--brown-deep);
}
.cond-row:last-of-type { border-bottom: none; }

.rev-card { margin-bottom: 14px; }
.rev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rev-head b { font-family: var(--kai); font-size: 17px; color: var(--brown-deep); letter-spacing: 1px; }
.rev-meta { font-size: 12.5px; color: var(--brown-light); }
.rev-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 18px; margin: 10px 0 0; }
.rev-dl > div { display: flex; gap: 8px; font-size: 13px; }
.rev-dl dt { color: var(--brown-light); min-width: 64px; }
.rev-dl dd { margin: 0; color: var(--brown-deep); }
.rev-intro {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(184, 147, 90, .05);
  border-left: 2px solid var(--hair);
  font-size: 13px; line-height: 1.9; color: var(--brown-deep);
}
.rev-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rev-form .form-control { flex: 1 1 220px; min-width: 180px; }
@media (max-width: 767px) {
  .rev-form .form-control { flex: 1 1 100%; }
}

/* ============================================================
   二十二、群聊页：整块面板撑满一屏，输入条贴在屏幕底部
   电脑端是左侧竖栏布局、不显示顶栏，只需扣掉主区上下内边距 20 + 32
   ============================================================ */
@media (min-width: 768px) {
  .chat-page .chat-wrap { align-items: stretch; }
  .chat-page .chat-panel { height: calc(100vh - 52px); }
  .chat-page .chat-main { display: flex; flex-direction: column; min-height: 0; }
  .chat-page .chat-msgs { flex: 1 1 auto; height: auto; min-height: 0; }
}
/* 手机端没有资料栏的群聊（大厅 / 私聊）：同样贴底，高度要再扣掉底部 TabBar 60 */
@media (max-width: 767px) {
  .chat-page .chat-panel:not(.has-info) { height: calc(100vh - 148px); }
  .chat-page .chat-panel:not(.has-info) .chat-main { display: flex; flex-direction: column; min-height: 0; }
  .chat-page .chat-panel:not(.has-info) .chat-msgs { flex: 1 1 auto; height: auto; min-height: 0; }
}

/* ============================================================
   二十三、举报机制：单条发言举报 + 后台多方式处置
   ============================================================ */
/* 消息时间旁的小「举报」：平时压得很淡，指上去才透出朱砂色，不抢气泡的戏 */
.chat-msg-report {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brown-light);
  opacity: .55;
  cursor: pointer;
  transition: color .18s, opacity .18s;
}
.chat-msg-report svg { width: 12px; height: 12px; display: block; }
.chat-msg-report:hover { color: var(--red-seal); opacity: 1; }
/* 手机上点按面积太小会误触，稍微放大一点 */
@media (max-width: 767px) {
  .chat-msg-report { margin-left: 6px; padding: 3px 4px; opacity: .7; }
  .chat-msg-report svg { width: 14px; height: 14px; }
}

/* 举报弹窗里的「被举报人 + 原话」：细金线小框，让管理员一眼对上 */
.report-target {
  margin: 0 0 13px;
  padding: 9px 11px;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-ctl);
  background: rgba(184, 147, 90, .05);
  font-size: 12.5px;
  line-height: 1.7;
}
.report-target-who {
  display: block;
  color: var(--brown-deep);
  letter-spacing: 1px;
}
.report-target-text {
  display: block;
  margin-top: 3px;
  color: var(--brown-light);
  word-break: break-all;
}

/* 后台举报表：举报对象下方的被举报人小签与引用的原话 */
.report-target-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 17px;
  color: var(--red-seal);
  border: 1px solid rgba(158, 61, 50, .26);
  border-radius: 3px;
  background: rgba(158, 61, 50, .06);
}
.report-target-tag.is-room {
  color: var(--brown-light);
  border-color: var(--hair-soft);
  background: rgba(184, 147, 90, .06);
}
.report-quote {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--brown-light);
  word-break: break-all;
}
/* 四个处置按钮挤在一列里要能换行 */
.report-ops-btns { flex-wrap: wrap; }
/* 已处理的记录：处理意见 + 解封按钮竖排 */
.report-done {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 200px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--brown-light);
  white-space: normal;
}
.report-done .btn { align-self: flex-start; }

/* ============================================================
   封禁说明页：封禁原因 + 申诉
   ============================================================ */
.ban-main { max-width: 560px; }
.ban-state {
  margin: 14px 0 8px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--brown-deep);
  background: rgba(158, 61, 50, .05);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
}
.ban-state.is-ok {
  color: var(--tea-green-deep);
  background: rgba(110, 138, 114, .08);
}
.ban-meta {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--brown-light);
}
.ban-reason {
  padding: 12px 16px;
  background: rgba(255, 255, 255, .32);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-ctl);
}
.ban-reason-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
}
.ban-reason p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--brown);
}
.ban-appeal-state {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--hair);
  border-radius: var(--r-ctl);
}
.ban-appeal-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--brown);
}
.ban-appeal-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--brown-light);
}
.ban-form { margin-top: 14px; }
.ban-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.ban-login, .ban-back {
  padding-bottom: 2px;
  font-size: 13px;
  color: var(--brown);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
.ban-login { color: var(--tea-green-deep); }
.ban-login:hover, .ban-back:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 768px) {
  .ban-main { max-width: 100%; }
  .ban-state { padding: 12px 14px; font-size: 14px; }
}

/* ============================================================
   积分明细弹窗（个人页）
   ============================================================ */
.pts-now { font-size: 14px; color: var(--brown-light); }
.pts-now b {
  margin-left: 6px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--brown);
}
.pts-sum {
  display: flex; gap: 18px;
  margin: 10px 0 16px;
  font-size: 13px; color: var(--brown-light);
}
.pts-in  { color: var(--tea-green-deep); }
.pts-out { color: var(--red-seal); }

/* 弹窗本体：比确认弹窗宽一些，列表内部自己滚，手机端也不会顶出屏幕 */
.cy-modal-card.pts-modal {
  max-width: 430px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  text-align: left;
  padding: 26px 22px 20px;
}
.cy-modal-card.pts-modal .cy-modal-seal { margin-bottom: 12px; }
.cy-modal-card.pts-modal .cy-ban-title { text-align: center; }

/* 顶部三格总账 */
.pts-board {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 12px 14px; margin: 10px 0 12px;
  background: rgba(58, 39, 23, .045);
  border: 1px solid var(--hair);
  border-radius: 10px;
}
.pts-board div { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--brown-light); }
.pts-board b { font-family: var(--serif); font-size: 17px; color: var(--brown); }

.pts-list {
  flex: 1;
  min-height: 120px; max-height: 46vh;
  overflow-y: auto;
  border-top: 1px solid var(--hair);
}
.pts-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px dashed var(--line);
}
.pts-row-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pts-tag {
  padding: 1px 7px;
  font-size: 11px; letter-spacing: 1px;
  border-radius: 20px;
}
.pts-tag.in  { color: var(--tea-green-deep); background: rgba(74, 110, 86, .10); }
.pts-tag.out { color: var(--red-seal);      background: rgba(176, 58, 46, .08); }
.pts-reason { font-size: 13px; color: var(--brown-deep); }
.pts-time { flex-basis: 100%; font-size: 11px; color: var(--brown-light); }
.pts-num { font-family: var(--serif); font-size: 16px; }
.pts-num.in  { color: var(--tea-green-deep); }
.pts-num.out { color: var(--red-seal); }
.cy-modal-card.pts-modal .cy-modal-acts { margin-top: 14px; }

@media (max-width: 768px) {
  .cy-modal-card.pts-modal { padding: 22px 16px 16px; }
  .pts-list { max-height: 44vh; }
  .pts-board b { font-size: 16px; }
}

/* ===== 茶局资料面板：房间号一键复制 + 到场打卡块 ===== */
.cd-room-copy {
  border: 1px dashed rgba(176, 139, 78, .55);
  background: rgba(176, 139, 78, .08);
  color: var(--gold-deep, #8a6a2c);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 2px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cd-room-copy:hover { background: rgba(176, 139, 78, .18); }
.cd-room-copy.is-copied { background: var(--gold, #b08b4e); color: #fff; border-style: solid; }
.cd-checkin-form { display: flex; flex-direction: column; gap: 8px; }
.cd-checkin-file { font-size: 12.5px; padding: 8px; }
.cd-checkin-done { display: flex; align-items: center; gap: 10px; color: var(--tea-green-deep, #22382b); font-family: var(--serif); }
.cd-checkin-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.cd-checkin-wall { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.cd-checkin-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cd-checkin-imgs img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* 到场打卡的按钮不要浮雕阴影，平面一点 */
.cd-block .btn { box-shadow: none; }
.cd-block .btn:hover { transform: none; }

/* ---------- 打卡照片：选完图就地预览（前端已压缩到 1280px） ---------- */
.cd-checkin-preview {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--hair);
  margin-top: 8px;
}

/* ---------- 私聊顶栏「屏蔽」小按钮 ---------- */
.chat-block-btn {
  margin-left: auto;
  border: 1px solid var(--hair);
  background: none;
  color: var(--brown-light);
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-block-btn:hover { color: var(--red-seal); border-color: rgba(158, 61, 50, .45); }
.chat-block-btn.is-blocked {
  color: var(--red-seal);
  border-color: rgba(158, 61, 50, .45);
  background: rgba(158, 61, 50, .06);
}

/* ---------- 新手引导浮层（新注册 48 小时内自动弹，可跳过） ---------- */
.guide-card { max-width: 430px; text-align: left; }
.guide-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--brown-deep);
  text-align: center;
  margin-bottom: 16px;
}
.guide-steps { display: flex; flex-direction: column; gap: 13px; margin-bottom: 14px; min-height: 74px; }
.guide-step { display: none; gap: 12px; align-items: flex-start; }
.guide-step.active { display: flex; animation: cy-page .35s ease both; }
.guide-step-no {
  font-family: var(--kai);
  color: var(--gold);
  border: 1px solid var(--hair);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 2px;
}
.guide-step b { color: var(--brown-deep); font-size: 15px; }
.guide-step p { color: var(--brown-light); font-size: 13px; margin-top: 2px; line-height: 1.6; }
/* 分步进度点：当前步及之前点亮鎏金 */
.guide-dots { display: flex; gap: 7px; justify-content: center; margin: 2px 0 16px; }
.guide-dots i {
  width: 20px; height: 4px; border-radius: 4px;
  background: rgba(184, 147, 90, .22);
  transition: background .25s;
}
.guide-dots i.on { background: var(--gold); }