/* =========================================================================
   校友年会 · 手机端 H5 —— iOS 设计语言覆盖层（仅在 annual.html 加载）
   在 annual.css 之后加载，同选择器后写覆盖，PC 管理端不受影响。
   语言：Apple HIG —— 分组列表 / 毛玻璃材质 / 大圆角 / SF 字阶 / 底部 Sheet
   色板：金融墨蓝 · 香槟金 · 沉稳墨绿（进项）· 克制朱红（风险）
   ========================================================================= */

:root {
  --bg: #F2F2F7;
  --bg-2: #FBFBFD;
  --paper: #FFFFFF;
  --fill-1: rgba(120, 120, 128, 0.10);
  --fill-2: rgba(120, 120, 128, 0.06);
  --fill-3: rgba(120, 120, 128, 0.16);
  --sep: rgba(60, 60, 67, 0.12);
  --sep-strong: rgba(60, 60, 67, 0.22);

  --label: #0B1F3A;
  --label-2: rgba(11, 31, 58, 0.72);
  --label-3: rgba(11, 31, 58, 0.44);
  --ink: #0B1F3A;

  --tint: #0A4C8B;
  --tint-2: #1668AE;
  --tint-ink: #062B4E;
  --tint-soft: rgba(10, 76, 139, 0.09);
  --gold: #C6A15B;
  --gold-2: #E0C48C;
  --gold-ink: #8A6A2F;
  --gold-soft: rgba(198, 161, 91, 0.13);
  --green: #0F7A55;
  --green-soft: rgba(15, 122, 85, 0.10);
  --red: #C8342B;
  --red-soft: rgba(200, 52, 43, 0.10);
  --amber: #A9702A;
  --amber-soft: rgba(169, 112, 42, 0.12);
  --ok: #0F7A55;
  --danger: #C8342B;

  --blue: #0A4C8B;
  --blue-deep: #062B4E;
  --blue-mid: #1668AE;
  --blue-mist: rgba(10, 76, 139, 0.08);
  --line: rgba(60, 60, 67, 0.12);
  --line-gold: rgba(198, 161, 91, 0.38);
  --gold-deep: #8A6A2F;

  --r-card: 18px;
  --r-inner: 13px;
  --r-pill: 980px;
  --shadow: 0 1px 2px rgba(11, 31, 58, 0.05), 0 10px 30px rgba(11, 31, 58, 0.06);
  --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.05), 0 10px 30px rgba(11, 31, 58, 0.06);
  --shadow-float: 0 8px 40px rgba(11, 31, 58, 0.22);
  --nav-h: 52px;
  --tab-h: 56px;
  --serif: "Songti SC", "STSong", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------------- 基座 ---------------- */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  background-image: radial-gradient(120% 55% at 50% -12%, rgba(10, 76, 139, 0.07), transparent 62%);
  background-repeat: no-repeat;
  color: var(--label);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
}
input, select, textarea, button { font-family: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hidden { display: none !important; }

/* ---------------- 顶部导航（毛玻璃） ---------------- */
.an-top {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 14px 0;
  display: flex; align-items: center; gap: 10px;
  background: rgba(242, 242, 247, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--sep);
}
.an-top .logo {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; font-size: 16px; font-weight: 700;
  color: var(--gold-2); letter-spacing: 0;
  background: linear-gradient(160deg, #123A63, #061F38);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(6, 31, 56, 0.28);
}
.an-top .tt h1 { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; color: var(--label); }
.an-top .tt .sub { font-size: 10.5px; color: var(--label-3); margin-top: 1px; }
.an-top .spacer { flex: 1 1 auto; }
.an-top .who {
  font-size: 12px; color: var(--label-2); text-align: right; line-height: 1.2;
  max-width: 96px; overflow: hidden; white-space: nowrap;
}
.an-top .who .mono { font-size: 9.5px; color: var(--label-3); }
.icbtn {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fill-2); color: var(--label-2); font-size: 14px; border: 0;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.icbtn:active { background: var(--fill-3); transform: scale(0.94); }

/* ---------------- 容器 ---------------- */
.wrap { padding: 16px 16px 30px; max-width: 720px; margin: 0 auto; }

/* ---------------- 卡片 ---------------- */
.card {
  position: relative; background: var(--paper);
  border-radius: var(--r-card); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-card); border: 0;
}
.card.gold {
  background: linear-gradient(180deg, #FFFDF8, #FFFDF8);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(198, 161, 91, 0.3);
}
.card.center { text-align: center; }
.card > h2, .card h2 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 16px; font-weight: 650; letter-spacing: -0.015em; color: var(--label);
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 0.5px solid var(--sep);
  text-align: left;
}
.card h2 .bar {
  width: 3px; height: 15px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--gold), var(--gold-ink));
}
.card h2 .tag { margin-left: auto; }
.tag { font-size: 11.5px; color: var(--label-3); font-weight: 500; }

/* ---------------- 列表行 ---------------- */
.row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; position: relative; }
.row + .row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5px; background: var(--sep); }
.row .main { flex: 1 1 auto; min-width: 0; }
.row .t { font-size: 14.5px; font-weight: 550; color: var(--label); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row .d { font-size: 12.5px; color: var(--label-3); margin-top: 2px; line-height: 1.55; word-break: break-word; }
.row .act { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row[data-act] { border-radius: 10px; transition: background 0.15s var(--ease); }
.row[data-act]:active { background: var(--fill-2); }

/* ---------------- 徽标 ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; padding: 2.5px 8px;
  border-radius: var(--r-pill); background: var(--fill-1); color: var(--label-2);
  white-space: nowrap; border: 0;
}
.badge.ok { background: var(--green-soft); color: var(--green); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.danger { background: var(--red-soft); color: var(--red); }
.badge.gold { background: var(--gold-soft); color: var(--gold-ink); }
.badge.muted { background: var(--fill-2); color: var(--label-3); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 590; letter-spacing: -0.01em; border: 0;
  background: var(--fill-2); color: var(--tint);
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.2s var(--ease), opacity 0.16s;
}
.btn:active { transform: scale(0.975); opacity: 0.92; }
.btn.primary {
  color: #fff;
  background: linear-gradient(170deg, var(--tint-2), var(--tint) 45%, var(--tint-ink));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(10, 76, 139, 0.26);
}
.btn.gold {
  color: #3B2A0B;
  background: linear-gradient(170deg, var(--gold-2), var(--gold) 60%, #B08C46);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 6px 18px rgba(176, 140, 70, 0.28);
}
.btn.ghost { background: transparent; color: var(--tint); box-shadow: inset 0 0 0 0.5px var(--sep-strong); }
.btn.ghost:active { background: var(--fill-2); }
.btn.sm { min-height: 32px; padding: 0 13px; font-size: 13px; font-weight: 560; }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.42; box-shadow: none; transform: none; }
.btnrow { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------------- 表单 ---------------- */
.field { margin-bottom: 12px; }
.field > label, .field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--label-3);
  margin-bottom: 5px; letter-spacing: 0.02em;
}
.field label.req::after { content: " *"; color: var(--gold-ink); }
.field input, .field select, .field textarea, .chatinput input {
  width: 100%; min-height: 46px; padding: 12px 14px;
  background: var(--fill-2); border: 0.5px solid transparent; border-radius: var(--r-inner);
  font-size: 15.5px; color: var(--label); outline: none;
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23909CA9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus, .chatinput input:focus {
  background: var(--paper); border-color: rgba(10, 76, 139, 0.5);
  box-shadow: 0 0 0 3.5px rgba(10, 76, 139, 0.14);
}
.field input::placeholder, textarea::placeholder, .chatinput input::placeholder { color: var(--label-3); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 359px) { .grid2 { grid-template-columns: 1fr; } }
.checkline { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; color: var(--label-2); }
.checkline input { width: 19px; height: 19px; accent-color: var(--tint); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  border-radius: 22px; padding: 22px 20px 20px; margin-bottom: 14px;
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(224, 196, 140, 0.34), transparent 58%),
    radial-gradient(90% 70% at -10% 110%, rgba(22, 104, 174, 0.55), transparent 62%),
    linear-gradient(165deg, #06203A 0%, #0A3A63 44%, #123A63 74%, #0B1F3A 100%);
  box-shadow: 0 10px 34px rgba(6, 31, 56, 0.26), inset 0 0.5px 0 rgba(255, 255, 255, 0.24);
}
.hero::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px;
  border-radius: 50%; border: 0.5px solid rgba(224, 196, 140, 0.34); pointer-events: none;
}
.hero .kicker { font-size: 10px; letter-spacing: 0.18em; color: var(--gold-2); text-transform: uppercase; }
.hero h2 { font-size: 23px; font-weight: 700; line-height: 1.32; letter-spacing: -0.02em; margin: 9px 0 7px; }
.hero .theme { font-size: 13.5px; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.14em; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hero .facts > span b { color: var(--gold-2); font-weight: 600; margin-right: 4px; letter-spacing: 0.02em; }
.hero .facts > span {
  font-size: 12px; color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.12); border: 0.5px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5px 10px; border-radius: var(--r-pill);
}
.hero .motto { margin-top: 14px; font-size: 11.5px; letter-spacing: 0.5em; color: rgba(224, 196, 140, 0.92); }

/* ---------------- 四步进度 ---------------- */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.steps4 .s4 { text-align: center; padding: 10px 4px 9px; border-radius: var(--r-inner); background: var(--fill-2); }
.steps4 .s4 .d {
  width: 22px; height: 22px; margin: 0 auto 5px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--paper); color: var(--label-3);
  box-shadow: inset 0 0 0 0.5px var(--sep-strong);
}
.steps4 .s4.on { background: var(--tint-soft); }
.steps4 .s4.on .d { background: var(--tint); color: #fff; box-shadow: 0 2px 8px rgba(10, 76, 139, 0.3); }
.steps4 .s4 .k { font-size: 12px; font-weight: 640; color: var(--label-2); }
.steps4 .s4 .v { font-size: 10.5px; color: var(--label-3); margin-top: 1px; line-height: 1.35; word-break: break-all; }
.steps4 .s4.on .v { color: var(--tint); }

/* ---------------- 亮点 / 议程 ---------------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips .chip { font-size: 12px; color: var(--label-2); background: var(--fill-2); border-radius: var(--r-pill); padding: 6px 11px; line-height: 1.4; }
.chips .chip b { color: var(--tint); font-weight: 620; }
.agenda { display: flex; align-items: center; }
.agenda .ait { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--label-3); white-space: nowrap; }
.agenda .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.agenda .ln { flex: 1 1 auto; min-width: 8px; height: 0.5px; background: var(--sep-strong); margin: 0 7px; }

/* ---------------- 指标 ---------------- */
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.metrics .metric { background: var(--fill-2); border-radius: var(--r-inner); padding: 12px 13px; }
.metrics .metric.gold { background: var(--gold-soft); }
.metrics .metric .v { font-size: 21px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.15; }
.metrics .metric.gold .v { color: var(--gold-ink); }
.metrics .metric .k { font-size: 11px; color: var(--label-3); margin-top: 3px; }

/* ---------------- 历届相册 ---------------- */
.gallery { display: grid; gap: 11px; }
@media (min-width: 430px) { .gallery { grid-template-columns: 1fr 1fr; } }
.gcard {
  border-radius: 16px; overflow: hidden; background: var(--paper);
  box-shadow: inset 0 0 0 0.5px var(--sep), 0 2px 10px rgba(11, 31, 58, 0.05);
  transition: transform 0.2s var(--ease);
}
.gcard:active { transform: scale(0.985); }
.gcard img { display: block; width: 100%; height: 132px; object-fit: cover; }
.gcard.single img { height: 200px; }
.gph {
  height: 132px; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, #0A3A63, #06203A);
}
.gph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 22% 12%, rgba(255, 255, 255, 0.16), transparent 62%); }
.gph.y1 { background: linear-gradient(150deg, #103F6B, #061E36); }
.gph.y2 { background: linear-gradient(150deg, #0D4A5C, #06232B); }
.gph.y3 { background: linear-gradient(150deg, #1D2A54, #0A1128); }
.gph.y4 { background: linear-gradient(150deg, #4A3A18, #221907); }
.gph.y0 { background: linear-gradient(150deg, #14452F, #071E14); }
.gph .gy { position: relative; z-index: 1; font-size: 29px; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.gph .gn { position: relative; z-index: 1; font-size: 10.5px; letter-spacing: 0.28em; color: rgba(255, 255, 255, 0.72); margin-top: 3px; }
.gcard .gc { padding: 10px 12px 12px; }
.gcard .gt { font-size: 13.5px; font-weight: 620; color: var(--label); letter-spacing: -0.01em; }
.gcard .gd { font-size: 11.5px; color: var(--label-3); margin-top: 3px; line-height: 1.55; }

/* ---------------- 桌位 ---------------- */
.tablegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 359px) { .tablegrid { grid-template-columns: repeat(2, 1fr); } }
.tcard {
  position: relative; text-align: left; padding: 10px 10px 9px;
  border-radius: var(--r-inner); background: var(--fill-2); border: 0.5px solid transparent;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.2s var(--ease);
}
.tcard:active { transform: scale(0.97); }
.tcard .no { font-weight: 700; font-size: 14px; color: var(--label); font-variant-numeric: tabular-nums; }
.tcard .nm { font-size: 10px; color: var(--label-3); margin-top: 1px; height: 13px; overflow: hidden; }
.tcard .ct { font-size: 10px; color: var(--label-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.tcard .bar { height: 3px; border-radius: 2px; background: var(--fill-3); margin-top: 6px; overflow: hidden; }
.tcard .bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--tint-2), var(--tint)); }
.tcard:not(.disabled):not(.mine) { background: var(--paper); box-shadow: inset 0 0 0 0.5px var(--sep); }
.tcard.mine {
  background: #FFFDF7; border-color: var(--gold);
  box-shadow: 0 0 0 1.5px rgba(198, 161, 91, 0.55), 0 6px 18px rgba(198, 161, 91, 0.18);
}
.tcard.mine .no { color: var(--gold-ink); }
.tcard.disabled { opacity: 0.44; }
.tcard.full .bar i { background: var(--red); }
.tcard .tips { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 600; color: #fff; background: var(--gold-ink); border-radius: 5px; padding: 1.5px 4px; }

/* ---------------- 二维码 / 口令 ---------------- */
.qrbox { display: block; text-align: center; padding: 6px 0 2px; background: transparent; border: 0; border-radius: 0; }
.qrbox svg, .qrbox img {
  width: min(236px, 64vw); height: auto; display: block; margin: 0 auto;
  border-radius: 12px; box-shadow: 0 8px 28px rgba(11, 31, 58, 0.12); background: #fff;
}
.countdown { font-size: 12px; color: var(--label-3); margin-top: 10px; }
.countdown b { color: var(--red); font-variant-numeric: tabular-nums; font-weight: 650; }
.passcode { font-family: var(--mono); font-size: 25px; letter-spacing: 0.16em; color: var(--label); font-weight: 700; margin-top: 4px; }

/* ---------------- 通讯录勾选 ---------------- */
.picklist { max-height: 46vh; overflow: auto; background: var(--fill-2); border: 0; border-radius: var(--r-inner); padding: 4px 10px; }
.picklist .pick { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 13.5px; position: relative; }
.picklist .pick + .pick::before { content: ""; position: absolute; left: 30px; right: 0; top: 0; height: 0.5px; background: var(--sep); }
.picklist .pick input { width: 19px; height: 19px; accent-color: var(--tint); flex: 0 0 auto; }

/* ---------------- 即时通讯 ---------------- */
.chatmembers { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chatbox { height: min(52vh, 430px); overflow-y: auto; background: transparent; border-radius: 14px; padding: 6px 2px 2px; display: flex; flex-direction: column; gap: 9px; scroll-behavior: smooth; border: 0; }
.bubble { max-width: 78%; border-radius: 18px; padding: 9px 13px; font-size: 14.5px; line-height: 1.45; position: relative; letter-spacing: -0.01em; }
.bubble.me {
  align-self: flex-end; color: #fff;
  background: linear-gradient(170deg, var(--tint-2), var(--tint));
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 14px rgba(10, 76, 139, 0.22);
}
.bubble.other {
  align-self: flex-start; background: var(--paper); color: var(--label);
  border-bottom-left-radius: 5px;
  box-shadow: inset 0 0 0 0.5px var(--sep), 0 2px 8px rgba(11, 31, 58, 0.05);
}
.bubble .bn { font-size: 10.5px; color: var(--label-3); margin-bottom: 2px; }
.bubble .bm { font-size: 9.5px; opacity: 0.62; margin-top: 3px; text-align: right; font-variant-numeric: tabular-nums; }
.sysmsg { align-self: center; font-size: 11px; color: var(--label-3); background: var(--fill-1); border-radius: var(--r-pill); padding: 4px 11px; max-width: 88%; text-align: center; }
.chatinput { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.chatinput input { flex: 1 1 auto; min-width: 0; border-radius: var(--r-pill); padding: 12px 16px; }
.chatinput .btn { flex: 0 0 auto; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 0; position: relative; }
.chatinput .btn::after {
  content: ""; position: absolute; width: 17px; height: 17px;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
}

/* ---------------- 捐赠证书 ---------------- */
.cert {
  border-radius: 16px; padding: 20px 16px; text-align: center;
  background: linear-gradient(180deg, #FFFDF7, #FFFFFF);
  box-shadow: inset 0 0 0 1px rgba(198, 161, 91, 0.55);
}
.cert .ct { font-size: 18px; font-weight: 650; letter-spacing: 0.24em; color: var(--gold-ink); }
.cert .cn { font-size: 18px; font-weight: 700; margin: 12px 0 8px; }
.cert .cb { font-size: 12.5px; color: var(--label-2); line-height: 1.8; }
.cert .cs { font-size: 11.5px; color: var(--label-3); margin-top: 12px; }

/* ---------------- 底部 Sheet ---------------- */
#modal { position: relative; z-index: 60; }
.modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(11, 31, 58, 0.32);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: anFade 0.22s var(--ease);
}
.modal .box {
  width: 100%; max-width: 560px; background: var(--paper);
  border-radius: 22px 22px 0 0;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 44px rgba(11, 31, 58, 0.26);
  animation: anSheetUp 0.34s var(--ease);
  max-height: 88vh; overflow-y: auto;
}
.modal .box::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--fill-3); margin: 2px auto 14px; }
.modal .box h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 12px; text-align: center; }
.modal .box .btnrow { justify-content: stretch; gap: 10px; }
.modal .box .btnrow .btn { flex: 1 1 auto; }
@keyframes anFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes anSheetUp { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; inset: auto; bottom: auto; right: auto;
  left: 50%; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 80;
  height: auto; width: max-content; display: block;
  transform: translate(-50%, -12px) scale(0.96);
  max-width: 84vw; padding: 11px 18px; border-radius: var(--r-pill);
  background: rgba(11, 31, 58, 0.9); color: #fff;
  font-size: 13.5px; font-weight: 520; text-align: center;
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-float);
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.ok { background: rgba(15, 122, 85, 0.94); }
.toast.err { background: rgba(200, 52, 43, 0.94); }
.toast.warn { background: rgba(120, 83, 26, 0.94); }

/* ---------------- 空状态 ---------------- */
.empty { text-align: center; color: var(--label-3); font-size: 13px; padding: 22px 8px; line-height: 1.6; }

/* ---------------- 底部页签 ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(251, 251, 253, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-top: 0.5px solid var(--sep);
}
.tabbar button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 0 4px; color: var(--label-3); border: 0; background: none;
  transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.tabbar button .ic { display: block; line-height: 0; }
.tabbar button .ic svg { width: 23px; height: 23px; display: block; }
.tabbar button span:last-child { font-size: 10px; font-weight: 540; letter-spacing: 0; }
.tabbar button.on { color: var(--tint); }
.tabbar button:active { transform: scale(0.94); }
@media (max-width: 359px) { .tabbar button span:last-child { font-size: 9px; } }

.note { font-size: 13px; color: var(--label-2); background: var(--fill-2); border: 0; border-radius: var(--r-inner); padding: 11px 13px; line-height: 1.6; }
.note.gold { background: var(--gold-soft); color: var(--gold-ink); }
.note.ok { background: var(--green-soft); color: #0B5E42; }
.note.warn { background: var(--amber-soft); color: #7A4F12; }


/* ---------------- 入场动效（克制的 iOS 节奏） ---------------- */
@keyframes anRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hero, .card { animation: anRise 0.42s var(--ease) both; }
.wrap > :nth-child(2) { animation-delay: 0.03s; }
.wrap > :nth-child(3) { animation-delay: 0.06s; }
.wrap > :nth-child(4) { animation-delay: 0.09s; }
.wrap > :nth-child(5) { animation-delay: 0.12s; }
.wrap > :nth-child(n+6) { animation-delay: 0.14s; }
@media (prefers-reduced-motion: reduce) {
  .hero, .card, .toast, .modal .box { animation: none !important; transition: none !important; }
}


/* ---------------- 成功徽标（iOS 勾选圆） ---------------- */
.okmark {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green); background: var(--green-soft);
  box-shadow: inset 0 0 0 1px rgba(15, 122, 85, 0.22);
  animation: okPop 0.42s var(--ease);
}
.okmark svg { width: 27px; height: 27px; }
@keyframes okPop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }


/* ---------------- 分段控件（iOS Segmented Control） ---------------- */
.segmented {
  display: flex; gap: 2px; padding: 2px;
  background: var(--fill-1); border-radius: 10px;
}
.segmented button {
  flex: 1 1 0; min-height: 34px; border-radius: 8px; border: 0; background: transparent;
  font-size: 14px; font-weight: 560; color: var(--label-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.segmented button.on {
  background: var(--paper); color: var(--label); font-weight: 640;
  box-shadow: 0 1px 3px rgba(11, 31, 58, 0.14), 0 0 0 0.5px rgba(11, 31, 58, 0.04);
}
.btn.gold svg { flex: 0 0 auto; }


/* ---------------- 导航滚动收缩（iOS 行为） ---------------- */
.an-top.scrolled {
  background: rgba(242, 242, 247, 0.9);
  border-bottom: 0.5px solid var(--sep-strong);
  box-shadow: 0 0.5px 0 rgba(60, 60, 67, 0.06), 0 6px 18px rgba(11, 31, 58, 0.06);
}
.an-top .tt .sub { transition: color 0.2s var(--ease); }
.an-top.scrolled .tt .sub { color: var(--label-2); }

/* ---------------- 通讯录分组段头（吸顶） ---------------- */
.grouphead {
  position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 6px); z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px -4px 2px; padding: 6px 10px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.02em; color: var(--label-2);
  background: rgba(242, 242, 247, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-radius: 8px;
}
.grouphead .tag { font-weight: 500; color: var(--label-3); }


/* ---------------- 桌位预览（选桌前的同桌信息） ---------------- */
.seathead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 6px;
  background: linear-gradient(160deg, rgba(10, 76, 139, 0.07), rgba(198, 161, 91, 0.08));
  border-radius: var(--r-inner);
}
.seathead .sn { font-size: 20px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.seathead .sd { font-size: 11.5px; color: var(--label-3); margin-top: 2px; }
.seathead .sr { text-align: right; font-size: 11.5px; color: var(--label-3); white-space: nowrap; }
.seathead .sr b { font-size: 17px; color: var(--tint); font-variant-numeric: tabular-nums; }
.seathead .sr span { display: block; margin-top: 2px; color: var(--gold-ink); font-weight: 600; }


/* ---------------- 手机端管理台 ---------------- */
.adminhero {
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(224, 196, 140, 0.3), transparent 58%),
    linear-gradient(165deg, #131A2B 0%, #1D2A44 46%, #23324F 76%, #101827 100%);
}
.opgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 359px) { .opgrid { grid-template-columns: 1fr; } }
.op {
  position: relative; text-align: left; padding: 13px 13px 12px;
  border-radius: var(--r-inner); background: var(--fill-2); border: 0;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease);
}
.op:active { transform: scale(0.97); background: var(--fill-1); }
.op .oi {
  position: absolute; top: 10px; right: 11px;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft);
}
.op b { font-size: 14px; font-weight: 620; color: var(--label); }
.op i { font-style: normal; font-size: 11px; color: var(--label-3); }
.row.hot { background: rgba(200, 52, 43, 0.045); }
.tabbar button[data-tab="admin"].on { color: #8A6A2F; }


/* ---------------- 现场照片墙 ---------------- */
.photostrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.photostrip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
  box-shadow: inset 0 0 0 0.5px var(--sep); background: var(--fill-2);
  transition: transform 0.18s var(--ease);
}
.photostrip img:active { transform: scale(0.97); }
.photowall { column-count: 2; column-gap: 9px; }
@media (min-width: 520px) { .photowall { column-count: 3; } }
.pcard {
  break-inside: avoid; margin: 0 0 9px; border-radius: 12px; overflow: hidden;
  background: var(--paper); box-shadow: inset 0 0 0 0.5px var(--sep), 0 2px 10px rgba(11, 31, 58, 0.05);
  transition: transform 0.18s var(--ease);
}
.pcard:active { transform: scale(0.985); }
.pcard img { display: block; width: 100%; height: auto; background: var(--fill-2); }
.pcard figcaption { padding: 7px 9px 9px; font-size: 11.5px; color: var(--label-2); line-height: 1.5; }
.pcard figcaption span { display: block; font-size: 10px; color: var(--label-3); margin-top: 2px; }


/* ---------------- 照片点赞 ---------------- */
.pcard figcaption { position: relative; padding-right: 54px; }
.lbtn {
  position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border: 0; border-radius: 999px; background: var(--fill-2); color: var(--label-3);
  font-size: 11px; font-weight: 650; transition: transform .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.lbtn svg { width: 13px; height: 13px; }
.lbtn.on { background: rgba(255, 107, 129, .14); color: #D93A55; }
.lbtn:active { transform: scale(.9); }


/* ---------------- 随行人员逐人登记 ---------------- */
.guestrow { border-radius: var(--r-inner); background: var(--fill-2); padding: 11px 12px 2px; margin-bottom: 10px; }
.guestrow .gh { font-size: 12px; font-weight: 650; color: var(--tint); margin-bottom: 8px; letter-spacing: .02em; }
.guestrow .field > label { font-size: 11.5px; }


/* ================= 原生 App 手感 ================= */
html, body { overscroll-behavior-y: contain; }
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.an-top, .tabbar, .icbtn, .btn, .lbtn, .op { user-select: none; -webkit-user-select: none; }
.card, .row .d, .bubble .bt { user-select: text; -webkit-user-select: text; }

/* 页签切换：轻微上滑 + 淡入 */
@keyframes tabIn { from { opacity: .35; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
.wrap.tab-anim { animation: tabIn 0.32s cubic-bezier(0.32, 0.72, 0, 1); will-change: opacity, transform; }

/* 下拉刷新指示器 */
.ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px);
  transform: translate(-50%, 0); z-index: 70;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(11, 31, 58, .82); color: #fff; font-size: 12px; font-weight: 560;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(11, 31, 58, .28);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.ptr.show { opacity: 1; }
.ptr-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; animation: ptrSpin 0.9s linear infinite;
}
.ptr:not(.ready) .ptr-dot { animation: none; border-top-color: rgba(255,255,255,.45); }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* 底部 Sheet 下滑关闭时的过渡 */
.modal .box { transition: transform .26s cubic-bezier(0.32, 0.72, 0, 1); }
.modal { transition: opacity .2s var(--ease); }

/* 骨架屏 */
.sk { display: block; border-radius: 8px;
  background: linear-gradient(90deg, rgba(120,120,128,.10) 25%, rgba(120,120,128,.18) 37%, rgba(120,120,128,.10) 63%);
  background-size: 400% 100%; animation: skShine 1.4s ease infinite; }
@keyframes skShine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
.sk-hero { height: 168px; border-radius: 22px; margin-bottom: 14px;
  background: linear-gradient(100deg, rgba(10,76,139,.18) 25%, rgba(10,76,139,.30) 37%, rgba(10,76,139,.18) 63%);
  background-size: 400% 100%; animation: skShine 1.6s ease infinite; }
.sk-photo { height: 108px; border-radius: 12px; }
.sk-metric { height: 66px; border-radius: var(--r-inner); }
.h12 { height: 12px; } .h14 { height: 14px; } .h16 { height: 16px; } .h18 { height: 18px; }
.h20 { height: 20px; } .h44 { height: 44px; border-radius: 999px; } .h56 { height: 56px; }
.w20 { width: 20%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; }
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w100 { width: 100%; }

/* 关闭文本双击缩放/长按菜单（保留输入框） */
button, .tabbar, .an-top .logo { -webkit-touch-callout: none; }


/* ---------------- 住宿：推荐酒店卡 ---------------- */
.hotels { display: grid; gap: 9px; margin-top: 4px; }
.hcard {
  text-align: left; padding: 12px 13px; border-radius: var(--r-inner);
  background: var(--fill-2); border: 0.5px solid transparent;
  transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .2s var(--ease);
}
.hcard:active { transform: scale(.985); }
.hcard.on {
  background: #FFFDF7; border-color: var(--gold);
  box-shadow: 0 0 0 1.5px rgba(198,161,91,.5), 0 6px 18px rgba(198,161,91,.16);
}
.hcard:disabled { opacity: .5; }
.hcard .hh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hcard .hh b { font-size: 14.5px; font-weight: 650; color: var(--label); }
.hcard .hd { font-size: 11.5px; color: var(--label-3); margin-top: 3px; line-height: 1.5; }
.hcard .hp { font-size: 12px; color: var(--tint); font-weight: 600; margin-top: 4px; }
.hcard .hn { font-size: 11px; color: var(--gold-ink); margin-top: 4px; background: var(--gold-soft); border-radius: 6px; padding: 4px 7px; }
input[type="date"] { min-height: 46px; }


/* ---------------- 捐赠页：两张切换卡 + 光荣榜 ---------------- */
.dswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.dcard {
  position: relative; text-align: left; padding: 14px 14px 13px; border-radius: var(--r-card);
  background: var(--bg-card); border: 0.5px solid var(--sep);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.dcard:active { transform: scale(.97); }
.dcard.on {
  background: linear-gradient(150deg, #FFFDF6, #FFF6E2);
  border-color: rgba(198,161,91,.55);
  box-shadow: 0 6px 20px rgba(198,161,91,.18), 0 0 0 1.5px rgba(198,161,91,.35);
}
.dcard .di { font-size: 20px; display: block; margin-bottom: 6px; }
.dcard .dt { display: block; font-size: 15.5px; font-weight: 700; color: var(--label); letter-spacing: -.01em; }
.dcard .dd { display: block; font-size: 11.5px; color: var(--label-3); margin-top: 3px; }

.donors { display: grid; gap: 8px; }
.donor {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-inner); background: var(--fill-2); border: 0;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.donor:active { transform: scale(.985); background: var(--fill-3); }
.donor .drank {
  flex: 0 0 auto; width: 20px; font-size: 11.5px; font-weight: 700; color: var(--label-3);
  font-variant-numeric: tabular-nums; text-align: center;
}
.donor .drank.top { color: var(--gold-ink); }
.davatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--tint);
  background: var(--tint-soft); letter-spacing: 0;
}
.davatar.big { width: 54px; height: 54px; font-size: 21px; }
.donor .dmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.donor .dn { font-size: 13.5px; font-weight: 650; color: var(--label); }
.donor .dm { font-size: 11px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donor .dt2 { font-size: 10.5px; color: var(--label-4); }
.donor .damt { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.donor .darrow { flex: 0 0 auto; color: var(--label-4); font-size: 16px; margin-left: 2px; }

.donor-head { display: flex; align-items: center; gap: 12px; }
.donor-head .davatar.big { width: 52px; height: 52px; font-size: 20px; }
.donor-head .dinfo { min-width: 0; }
.donor-head .dn { font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.donor-head .dm { font-size: 12.5px; color: var(--label-3); margin-top: 2px; }

.prog { height: 8px; border-radius: 999px; background: var(--fill-3); overflow: hidden; margin-top: 6px; }
.prog-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C6A15B, #E0C48C); transition: width .6s var(--ease); }
.prog-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--label-3); margin-top: 7px; }
.prog-meta b { color: var(--gold-ink); font-size: 13px; }


/* ---------------- 会议议程时间轴 ---------------- */
.agenda-tl { display: flex; flex-direction: column; }
.agitem { display: grid; grid-template-columns: 52px 18px 1fr; gap: 0 4px; align-items: stretch; }
.agitem .agtime { padding-top: 3px; text-align: right; }
.agitem .agtime b { display: block; font-size: 13px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.agitem .agtime span { display: block; font-size: 10px; color: var(--label-4); font-variant-numeric: tabular-nums; }
.agitem .agline { position: relative; display: flex; justify-content: center; }
.agitem .agline::before {
  content: ''; position: absolute; top: 10px; bottom: -2px; width: 1.5px;
  background: var(--sep); border-radius: 1px;
}
.agitem:last-child .agline::before { display: none; }
.agdot {
  position: relative; z-index: 1; margin-top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 2px solid var(--fill-4); box-sizing: border-box;
}
.agbody { padding: 0 0 16px 6px; }
.agt { font-size: 13.5px; font-weight: 600; color: var(--label); line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.agkey { color: var(--gold-ink); font-size: 11px; line-height: 1; }
.agtitle { font-weight: 650; }
.agd { font-size: 11.5px; color: var(--label-3); margin-top: 3px; }
.agm { font-size: 11px; color: var(--label-3); margin-top: 4px; background: var(--fill-2); border-radius: 7px; padding: 5px 8px; line-height: 1.55; }
.agkind {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  color: var(--tint); background: var(--tint-soft); letter-spacing: .02em;
}
.agkind.lottery { color: #B4571F; background: rgba(235,164,90,.18); }
.agkind.dinner { color: #8A5A12; background: rgba(198,161,91,.18); }
.agkind.photo { color: #4B5B70; background: rgba(120,140,160,.16); }
.agkind.award { color: #8A3F2A; background: rgba(214,140,110,.18); }

/* 进行中 / 即将开始 / 已结束 */
.agitem.now .agdot { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px rgba(36,161,108,.16); animation: agPulse 1.8s infinite; }
.agitem.now .agt { color: var(--ok); font-weight: 700; }
@keyframes agPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(36,161,108,.18); } 50% { box-shadow: 0 0 0 6px rgba(36,161,108,.06); } }
.agitem.next .agdot { border-color: var(--gold); }
.agitem.past { opacity: .45; }
.agitem.past .agt { text-decoration: line-through; text-decoration-color: var(--label-4); }


/* ---------------- 会上广告宣传 ---------------- */
.adsets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.adchip {
  padding: 8px 13px; border-radius: 999px; border: 0.5px solid var(--sep);
  background: var(--fill-2); color: var(--label-2); font-size: 12.5px; font-weight: 560;
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.adchip:active { transform: scale(.95); }
.adchip.on { background: rgba(198,161,91,.14); border-color: rgba(198,161,91,.55); color: var(--gold-ink); font-weight: 650; }
#ad-seg { margin-bottom: 4px; }


/* ---------------- 首页中奖横幅 ---------------- */
.winbanner {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 14px 15px; margin-bottom: 14px; border: 0; border-radius: var(--r-card);
  background: linear-gradient(120deg, #FFF8E8, #FFEFD2 55%, #FFE9C7);
  box-shadow: 0 8px 24px rgba(198,161,91,.22), inset 0 0 0 1px rgba(198,161,91,.35);
  transition: transform .18s var(--ease);
}
.winbanner:active { transform: scale(.98); }
.winbanner .wb-ic { font-size: 24px; line-height: 1; }
.winbanner .wb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.winbanner .wb-t { font-size: 15px; font-weight: 750; color: #7A4E12; letter-spacing: -.01em; }
.winbanner .wb-d { font-size: 11.5px; color: #96703A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winbanner .wb-more { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #7A4E12; background: rgba(255,255,255,.7); border-radius: 999px; padding: 2px 8px; }
.winbanner .wb-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #9A6A20; }

/* ---------------- 我的（个人中心） ---------------- */
.mine-head { display: flex; align-items: center; gap: 13px; }
.mine-av {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; font-weight: 750; color: #fff;
  background: linear-gradient(150deg, #12457C, #0B1F3A);
  box-shadow: 0 6px 16px rgba(11,31,58,.24), inset 0 1px 0 rgba(255,255,255,.25);
}
.mine-in { min-width: 0; }
.mine-n { font-size: 17.5px; font-weight: 750; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.mine-d { font-size: 12px; color: var(--label-3); margin-top: 3px; }

.mrow {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 13px 16px; border: 0; border-radius: 0; background: transparent;
  transition: background .16s var(--ease);
}
.mrow:active { background: var(--fill-2); }
.mrow + .mrow { border-top: 0.5px solid var(--sep); }
.mrow .mi { flex: 0 0 auto; width: 26px; text-align: center; font-size: 16px; }
.mrow .mm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mrow .mm b { font-size: 14.5px; font-weight: 600; color: var(--label); }
.mrow .mm i { font-size: 11.5px; font-style: normal; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .ma { flex: 0 0 auto; font-size: 12px; color: var(--gold-ink); font-weight: 650; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .mv { flex: 0 0 auto; color: var(--label-4); font-size: 16px; }
.mrow.win { background: linear-gradient(100deg, #FFFBF0, transparent 70%); }
.mrow.win .mm b { color: #7A4E12; }


/* ================= 形象化桌位卡（圆桌 + 环绕座位） ================= */
.tablegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcard {
  position: relative; padding: 12px 8px 10px; border-radius: 18px;
  background: var(--bg-card); border: 0.5px solid var(--sep);
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.tcard:active { transform: scale(.965); }
.tcard .tips {
  position: absolute; top: 7px; right: 8px; font-size: 9.5px; font-weight: 700;
  padding: 1.5px 6px; border-radius: 999px; color: #8A5A12; background: rgba(198,161,91,.16);
}
.tcard .dial {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #F7FAFE 0%, #EDF3FA 62%, #E4ECF6 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 6px rgba(11,31,58,.06);
}
.tcard .seat {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-origin: 0 0;
}
.tcard .seat i {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #D8E4F2; border: 1.5px solid #BFD0E4; box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(11,31,58,.08);
}
.tcard .seat.on i { background: #17558F; border-color: #17558F; }
.tcard .disc {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(160deg, #FFFFFF, #F2F7FD);
  box-shadow: 0 2px 8px rgba(11,31,58,.10), inset 0 1px 0 #fff;
  justify-content: center;
}
.tcard .disc .no { font-size: 15px; font-weight: 800; color: var(--tint); letter-spacing: -.02em; line-height: 1.1; }
.tcard .disc .ct { font-size: 10.5px; font-weight: 700; color: var(--label-2); line-height: 1.2; font-variant-numeric: tabular-nums; }
.tcard .disc .ct i { font-style: normal; color: var(--label-4); font-weight: 500; }
.tcard .disc .rm { font-size: 9px; color: var(--label-3); line-height: 1.2; }
.tcard .nm { font-size: 10.5px; color: var(--label-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 选中 */
.tcard.mine { border-color: var(--tint); box-shadow: 0 0 0 2px rgba(23,85,143,.35), 0 8px 22px rgba(23,85,143,.18); background: #F7FBFF; }
.tcard.mine .disc { background: linear-gradient(160deg, #17558F, #0E3F6E); }
.tcard.mine .disc .no, .tcard.mine .disc .ct, .tcard.mine .disc .rm { color: #fff; }
.tcard.mine .disc .ct i { color: rgba(255,255,255,.65); }
.tcard.mine .seat.on i { background: #0E3F6E; border-color: #FFFFFF; }

/* 预留 / 已满 / 余位不足 */
.tcard.reserved { background: #FFFBEE; border-color: rgba(198,161,91,.5); }
.tcard.reserved .disc { background: linear-gradient(160deg, #FFF6E0, #FBEBC7); }
.tcard.reserved .disc .no { color: #8A5A12; }
.tcard.reserved .dial::after {
  content: '★'; position: absolute; right: -2px; top: -2px; font-size: 13px; color: #C6A15B;
  background: #fff; border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(198,161,91,.3);
}
.tcard.disabled { opacity: .55; }
.tcard.full .disc { background: linear-gradient(160deg, #F4F5F7, #E9EBEF); }
.tcard.full .disc .no { color: var(--label-4); }


/* ---------------- 技术支持单位链接 ---------------- */
.tech-link { color: var(--tint); text-decoration: none; border-bottom: 1px dashed rgba(23,85,143,.45); }
.tech-link:active { opacity: .7; }

.tech-foot { text-align: center; font-size: 11.5px; line-height: 1.7; color: var(--label-4); margin: 8px 0 18px; }
.tech-foot .tech-link { color: var(--label-3); }


/* ---------------- 光荣榜轮播卡 ---------------- */
.rotator { margin-bottom: 12px; }
.rot-card {
  position: relative;
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 14px 15px; border: 0; border-radius: var(--r-card);
  background: linear-gradient(140deg, #0E3F6E, #17558F 62%, #1C63A6);
  box-shadow: 0 10px 26px rgba(14,63,110,.26), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .18s var(--ease);
}
.rot-card:active { transform: scale(.985); }
.rot-rank {
  position: absolute; top: 8px; right: 12px; margin: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  color: #E0C48C; background: rgba(255,255,255,.16); border-radius: 999px; padding: 1.5px 8px;
}
.rot-av {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 17px; font-weight: 750; color: #0E3F6E; background: linear-gradient(160deg, #FFF6E0, #E0C48C);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.rot-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rot-name { font-size: 15.5px; font-weight: 750; color: #fff; letter-spacing: -.01em; }
.rot-col { font-size: 11.5px; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-type { font-size: 10.5px; color: rgba(224,196,140,.92); }
.rot-amt { flex: 0 0 auto; font-size: 17px; font-weight: 800; color: #FFE9B8; font-variant-numeric: tabular-nums; }
.rot-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px 0; }
.rot-dots { display: flex; gap: 5px; align-items: center; }
.rot-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fill-4); transition: width .2s var(--ease), background .2s var(--ease); }
.rot-dots .dot.on { width: 16px; border-radius: 999px; background: var(--gold); }
.rot-hint { font-size: 10.5px; color: var(--label-4); }


/* ---------------- 捐赠光荣榜：连续滚动榜 ---------------- */
.dscroll { margin-top: 2px; }
.dsview {
  position: relative; height: 306px; overflow: hidden; border-radius: var(--r-inner);
  background: linear-gradient(180deg, rgba(255,252,244,.9), rgba(255,255,255,.5));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.dsscroll-track { will-change: transform; }
.dsrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; background: transparent;
  border-bottom: 0.5px solid var(--sep);
}
.dsrow:active { background: var(--fill-2); }
.dsrank {
  flex: 0 0 auto; width: 20px; text-align: center; font-size: 11.5px; font-weight: 700;
  color: var(--label-4); font-variant-numeric: tabular-nums;
}
.dsrank.top { color: var(--gold-ink); }
.dsav {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--tint); background: var(--tint-soft);
}
.dsmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dsn { font-size: 13px; font-weight: 650; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsm { font-size: 10.5px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsamt { flex: 0 0 auto; font-size: 13px; font-weight: 750; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.dsfoot { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 0; }
.dshint { font-size: 10.5px; color: var(--label-4); }
.dscount { font-size: 10.5px; color: var(--label-4); }


/* ---------------- 手写签名板 ---------------- */
.sig-head { margin-bottom: 10px; }
.sig-name { font-size: 16px; font-weight: 750; color: var(--label); }
.sig-meta { font-size: 11.5px; color: var(--label-3); margin-top: 2px; }
.sigpad { margin-top: 4px; }
.sigpad canvas {
  width: 100%; display: block; border-radius: var(--r-inner);
  background: #fff; border: 1px dashed rgba(23,85,143,.4);
  box-shadow: inset 0 1px 3px rgba(11,31,58,.05);
  touch-action: none;
}
.sigpad-tip { font-size: 11px; color: var(--label-4); text-align: center; margin-top: 6px; }
.sigpad-state { font-size: 11.5px; color: var(--label-3); }

.sig-result { margin-top: 10px; padding: 10px; border-radius: var(--r-inner); background: #fff; border: 1px solid rgba(23,85,143,.16); }
.sig-result-t { font-size: 11.5px; color: var(--label-3); margin-bottom: 6px; }
.sig-result img { width: 100%; display: block; border-radius: 8px; background: #fff; }