/* ============================================================
   人情簿 · 红白事双主题设计系统
   喜事: 主#C62828 辅#FFD54F 背景#FFF8F0 文字#3E2723
   白事: 主#37474F 辅#B0BEC5 背景#F5F5F5 文字#263238 (禁红色系)
   ============================================================ */
:root {
  --radius: 14px;
  --shadow: 0 2px 12px rgba(62, 39, 35, .08);
  --shadow-lg: 0 8px 28px rgba(62, 39, 35, .14);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
          "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
body.theme-red {
  --primary: #C62828;
  --primary-soft: #FDECEA;
  --primary-deep: #8E1B1B;
  --accent: #FFD54F;
  --bg: #FFF8F0;
  --surface: #FFFFFF;
  --text: #3E2723;
  --text-2: #7A5F58;
  --line: #EEDCCF;
  --danger: #C62828;
  --danger-soft: #FDECEA;
  --ok: #2E7D32;
}
body.theme-white {
  --primary: #37474F;
  --primary-soft: #ECEFF1;
  --primary-deep: #263238;
  --accent: #B0BEC5;
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --text: #263238;
  --text-2: #607D8B;
  --line: #DDE3E7;
  --danger: #546E7A;      /* 白事主题禁用红色系 */
  --danger-soft: #ECEFF1;
  --ok: #37474F;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100vw; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  touch-action: pan-y; /* 禁双击/双指缩放（配合 app.js 拦截 iOS gesturestart） */
  line-height: 1.7;
  min-height: 100vh;
  font-size: 15px;
}
a { color: var(--primary); text-decoration: none; }
.container { max-width: 760px; margin: 0 auto; padding: 16px 16px 90px; }
.container.narrow { max-width: 420px; }
.container.wide { max-width: 972px; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  /* 内容放大 60% 后收紧内边距，红底总高与放大前保持一致 */
  padding: 6px 16px 26px;
  margin-bottom: -26px;
}
.topbar .row { display: flex; align-items: center; justify-content: space-between; max-width: 760px; margin: 0 auto; }
.topbar h1 { font-size: 32px; font-weight: 700; letter-spacing: 1px; }
.topbar .sub { font-size: 19px; opacity: .85; }
.topbar a.toplink { color: #fff; font-size: 13px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 4px 14px; }
body.theme-white .topbar { background: linear-gradient(135deg, #37474F, #263238); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
}
.card.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card h2 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
body.theme-white .card h2::before { background: var(--accent); }

/* ---------- 页面标题 ---------- */
.page-title { font-size: 22px; margin: 20px 0 16px; color: var(--text); }
.page-title small { font-size: 13px; color: var(--text-2); font-weight: 400; display: block; }

/* ---------- 汇总栏 ---------- */
.summary-bar {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  gap: 12px;
  text-align: center;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.summary-bar .item { flex: 1; }
.summary-bar .num { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.summary-bar .num.money { font-size: 22px; }
.summary-bar .lbl { font-size: 12px; opacity: .85; margin-top: 2px; }

/* ---------- 表单 ---------- */
label.fld { display: block; margin-bottom: 12px; font-size: 13px; color: var(--text-2); }
label.fld > span { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text); }
input[type=text], input[type=number], input[type=password], input[type=tel], input[type=email], input[type=date], select, textarea {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 16px; /* ≥16px：防 iOS 聚焦输入框时自动放大页面 */
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
/* 日期输入框在手机浏览器内部渲染偏矮，统一最小高度与其他输入框(48px)对齐 */
input[type=date] { min-height: 48px; box-sizing: border-box; }
/* 品牌页头 LOGO：白色圆底印章效果，适配红/深灰两种顶栏 */
.topbar h1 img.brand-logo {
  height: 54px; width: 54px; border-radius: 50%;
  object-fit: cover; background: #fff; border: 3px solid rgba(255,255,255,.85);
  vertical-align: -16px; margin-right: 12px;
}
input:disabled { background: var(--bg); color: var(--text-2); }
.form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 10px; padding: 11px 20px;
  font-size: 15px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: filter .15s, transform .1s;
  background: var(--line); color: var(--text);
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.accent { background: var(--accent); color: #6B4B00; }
body.theme-white .btn.accent { color: #263238; }
.btn.ghost { background: transparent; border: 1.5px solid var(--line); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- 登录/注册页 ---------- */
body.auth {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(620px 320px at 88% -60px, rgba(255, 213, 79, .28), transparent 70%),
    radial-gradient(520px 280px at -60px 105%, rgba(198, 40, 40, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-white.auth {
  background:
    radial-gradient(620px 320px at 88% -60px, rgba(176, 190, 197, .30), transparent 70%),
    radial-gradient(520px 280px at -60px 105%, rgba(55, 71, 79, .08), transparent 70%),
    var(--bg);
}
.auth-wrap { max-width: 400px; margin: 0 auto; padding: 30px 20px; width: 100%; }
.auth-logo {
  width: 156px; height: 156px; margin: 0 auto 16px; border-radius: 36px;
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px rgba(198, 40, 40, .32);
}
.auth-logo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; }
body.theme-white .auth-logo { box-shadow: 0 12px 26px rgba(38, 50, 56, .28); }
.auth-title { text-align: center; font-size: 24px; letter-spacing: 6px; font-weight: 800; }
.auth-sub { text-align: center; font-size: 13px; color: var(--text-2); margin: 8px 0 24px; }
.auth-card {
  background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: 26px 22px;
}
.auth-err {
  background: var(--danger-soft); color: var(--danger);
  font-size: 13px; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
}
.auth-card .fld { margin-bottom: 16px; }
.auth-card .fld > span { font-size: 13px; margin-bottom: 7px; }
.input-ico { position: relative; display: block; }
.input-ico .ico {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 16px; opacity: .6; pointer-events: none;
}
.input-ico input {
  height: 48px; padding-left: 44px; border-radius: 12px;
  background: var(--bg); border: 1.5px solid transparent;
  font-size: 16px;
}
.input-ico input::placeholder { color: var(--text-2); opacity: .7; }
.input-ico input:focus {
  background: var(--surface); border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(198, 40, 40, .10);
}
body.theme-white .input-ico input:focus { box-shadow: 0 0 0 4px rgba(55, 71, 79, .12); }
.btn-auth {
  width: 100%; height: 50px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 6px;
  cursor: pointer; font-family: var(--font);
  box-shadow: 0 8px 20px rgba(198, 40, 40, .30);
  transition: transform .12s, filter .15s;
}
.btn-auth:active { transform: scale(.98); }
.btn-auth:hover { filter: brightness(1.06); }
body.theme-white .btn-auth { box-shadow: 0 8px 20px rgba(38, 50, 56, .26); }
.auth-alt { margin-top: 18px; text-align: center; font-size: 13px; }
.auth-alt a { font-weight: 700; }
.auth-tip {
  font-size: 12px; color: var(--text-2); line-height: 1.7;
  background: var(--primary-soft); border-radius: 10px;
  padding: 10px 13px; margin-top: 16px;
}
body.theme-white .auth-tip { background: var(--primary-soft); }
.auth-foot { text-align: center; font-size: 12px; color: var(--text-2); margin-top: 20px; }

/* ---------- 用户管理面板 ---------- */
/* 用户管理：行内展开面板（桌面端横贯整行多列；手机端改为居中弹层） */
.umanage-row { display: none; }
.umanage-row.open { display: flex; position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.45); overflow-y: auto; padding: 24px 14px; }
.umanage-row.open > td { display: flex; flex: 1; align-items: center; justify-content: center;
  padding: 0 !important; background: transparent !important; }
.umanage-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 10px 0 2px; font-size: 14px;
}
.umanage-panel {
  width: auto; max-width: 460px; box-sizing: border-box; margin: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px 16px;
  text-align: left; white-space: normal;
}
.umanage-panel .uform {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px; align-items: end; padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.umanage-panel .uform:last-child { border-bottom: none; }
.umanage-panel .uform label { font-size: 12px; color: var(--text-2); display: block; text-align: left; }
.umanage-panel .uform label input, .umanage-panel .uform label select {
  display: block; width: 70%; height: 48px; box-sizing: border-box; margin: 4px 0 0;
  padding: 0 12px; font-size: 15px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text);
  font-family: var(--font);
}
.umanage-panel .uact { display: flex; justify-content: flex-end; }
/* 面板内省市选择器与输入框同宽同高 */
.umanage-panel .pick { width: 70%; }
.umanage-panel .pick .pick-btn { height: 48px; font-size: 15px; border-radius: 8px; }
/* 后台用户表：允许换行，消除横向滚动条 */
table.tbl.tbl-users { min-width: 0; }
.tbl-users th, .tbl-users td { white-space: normal; }
@media (max-width: 720px) {
  .umanage-panel { max-width: 276px; padding: 4px 14px 14px; }
  .umanage-panel .uform { grid-template-columns: 1fr; gap: 10px; padding: 10px 0; }
  .umanage-panel .uform label input, .umanage-panel .uform label select { width: 70%; }
  .umanage-head { padding: 12px 0 4px; }
}

/* ---------- 快捷入口 ---------- */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.quick-grid.one { grid-template-columns: 1fr; }
.quick-item {
  background: var(--surface); border: 1px dashed var(--primary);
  border-radius: var(--radius); padding: 14px; text-align: center;
  color: var(--primary); font-weight: 600; font-size: 14px;
}
body.theme-white .quick-item { border-color: var(--accent); color: var(--text); }

/* ---------- 宴席列表卡 ---------- */
.event-card { display: flex; gap: 14px; align-items: center; border-left: 4px solid #C62828; }
.event-card .badge {
  min-width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--primary-soft);
}
.event-card .info { flex: 1; min-width: 0; }
.event-card .t { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-card .d { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.event-card .stat { text-align: right; font-variant-numeric: tabular-nums; }
.event-card .stat .amt { font-weight: 800; font-size: 16px; color: var(--primary); }
body.theme-white .event-card .stat .amt { color: var(--primary); }
/* 白事账本卡：深灰底白字，庄重风格（区别于喜事的白卡红字） */
.event-card.ev-funeral { background: #37474F; border-left: 4px solid #1C262B; }
.event-card.ev-funeral .badge { background: rgba(255,255,255,.14); }
.event-card.ev-funeral .t { color: #FFFFFF; }
.event-card.ev-funeral .d { color: rgba(255,255,255,.62); }
.event-card.ev-funeral .stat .amt { color: #ECEFF1; }
.event-card.ev-funeral .tag.closed { background: rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.tag.gray { background: var(--bg); color: var(--text-2); }
.tag.closed { background: var(--line); color: var(--text-2); }

/* ---------- 类型单选（创建宴席） ---------- */
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-opt {
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: center; cursor: pointer; transition: border-color .15s;
}
.type-opt .em { font-size: 26px; }
.type-opt .nm { font-weight: 700; margin: 4px 0; }
.type-opt .colors { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.type-opt .colors i { width: 16px; height: 16px; border-radius: 50%; }
.type-opt.sel { border-color: var(--primary); background: var(--primary-soft); }
.type-opt.sel-red { border-color: #C62828; background: #FDECEA; }
.type-opt.sel-white { border-color: #37474F; background: #ECEFF1; }

/* ---------- 录入行 ---------- */
.entry-grid { display: grid; grid-template-columns: 1fr 200px; gap: 10px; }
.input-wrap { position: relative; }
/* 宾客姓名建议：固定自输入框下方弹出，不遮挡上方内容 */
.guest-sug, #guestSug {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); overflow-y: auto; -webkit-overflow-scrolling: touch;
  max-height: 260px; /* 选项过多时内部滚动，超出必有滚动条 */
  overscroll-behavior: contain;
}
/* 原生滚动条彻底隐藏（含 Win11 Fluent 悬浮条），统一用 JS 自绘滚动条 .cus-sb */
.guest-sug::-webkit-scrollbar, #guestSug::-webkit-scrollbar, .pick-panel::-webkit-scrollbar {
  width: 0; height: 0; display: none; -webkit-appearance: none;
}
.guest-sug, #guestSug, .pick-panel { scrollbar-width: none; }
/* 自绘滚动条：18px 轨道 + 12px 圆角深灰条，全端一致 */
.cus-sb {
  position: absolute; right: 0; top: 0; width: 18px;
  pointer-events: none; z-index: 8;
}
.cus-sb-thumb {
  position: absolute; right: 3px; width: 12px; border-radius: 6px;
  background: var(--primary, #C62828); /* 主题红：足够醒目，跟随主题色 */
}
#guestSug > div:not(.cus-sb), .guest-sug > div:not(.cus-sb) {
  padding: 11px 12px; font-size: 15px; color: var(--text);
  cursor: pointer; border-bottom: 1px solid var(--line); background: var(--surface);
}
#guestSug div:last-child { border-bottom: none; }
#guestSug div:active { background: var(--primary-soft, #FFF3E0); }

/* ---------- 收礼/回礼模式切换 ---------- */
.mode-pick button {
  flex: 1;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: 10px; padding: 9px 0; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: background .15s, color .15s;
}
.mode-pick button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.back-amt { color: var(--text-2); }
.back-amt::before { content: "↩ "; font-size: 12px; }

/* ---------- 记录列表 ---------- */
.rec-list { list-style: none; }
.rec-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.rec-list li:last-child { border-bottom: none; }
.rec-list .who { flex: 1; min-width: 0; }
.rec-list .who .n { font-weight: 700; }
.rec-list .who .m { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-list .amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-list .gift-amt { color: var(--text-2); font-weight: 500; }
.rec-list .del {
  border: none; background: var(--danger-soft); color: var(--danger);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px; flex-shrink: 0;
}
.rec-list .new { animation: flashin 1.2s; }
@keyframes flashin { from { background: var(--primary-soft); } to { background: transparent; } }

/* 元信息行：礼品 / 地址 / 时间 + 记账人。
   记账人固定贴在时间后面不被截断，只有左边的礼品/地址先省略，
   避免窄屏下「…」把记账人吃掉。 */
.rec-list .who .m-meta { display: flex; align-items: baseline; }
.rec-list .who .m-meta .meta-main {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-list .who .m-meta .meta-rec {
  flex: 0 1 auto; min-width: 0; max-width: 58%;
  padding-left: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 回执号 + 复制独占一行：不省略、不截断（原先被 .m 的 ellipsis 截掉「二维码」） */
.rec-list .who .m-code { white-space: normal; overflow: visible; text-overflow: clip; }

/* 二维码：默认收起，点「显示二维码」才展开图案（几百条记录时不至于把列表拉得很长） */
.qr-row .qr-box { display: none; }
.qr-row.open .qr-box { display: flex; justify-content: center; }
.qr-toggle {
  display: inline-block; font-size: 12px; line-height: 1.6;
  color: var(--primary); text-decoration: none; cursor: pointer;
  padding: 1px 0;
}
.qr-toggle:active { opacity: .6; }
.rec-list .qr-row img {
  width: 120px; height: 120px; display: block; margin-top: 6px;
  border-radius: 6px; background: #fff;
}
/* 快速录入后的回执框：二维码同样独占一行，稍大一点方便送礼人扫 */
#receiptQr img {
  width: 150px; height: 150px; display: block; margin-top: 8px;
  border-radius: 6px; background: #fff;
}

/* ---------- 表格（报告/后台） ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tbl th { font-size: 12px; color: var(--text-2); font-weight: 600; background: var(--bg); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 预览校正表：姓名/金额列宽收紧（约为原宽度 60%），把空间让给礼品列，手机上一屏可见 */
table.tbl.tbl-import { min-width: 320px; table-layout: fixed; }
table.tbl.tbl-import th, table.tbl.tbl-import td { padding: 8px 6px; }
table.tbl.tbl-import th:first-child, table.tbl.tbl-import td.idx {
  text-align: center; color: var(--text-2); font-size: 12px; padding: 8px 2px;
}
table.tbl.tbl-import input[type=text] { padding: 8px 6px; font-size: 15px; border-radius: 8px; }

/* ---------- 看板 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.stat-card .v { font-size: 26px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.stat-card .k { font-size: 12px; color: var(--text-2); }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 13px; }
.bar-row .nm { width: 72px; text-align: right; color: var(--text-2); flex-shrink: 0; }
.bar-row .bar { height: 14px; border-radius: 7px; background: var(--primary); min-width: 2px; }
.bar-row .v { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50;
  display: none; align-items: flex-end; justify-content: center;
}
.modal-mask.show { display: flex; }
.modal {
  background: var(--surface); border-radius: 18px 18px 0 0; width: 100%; max-width: 480px;
  padding: 22px 20px 30px; animation: up .25s ease-out;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 { margin-bottom: 12px; font-size: 17px; }
.modal .tip { font-size: 12px; color: var(--text-2); margin-bottom: 14px; }
/* 弹窗控件：手机端加高、16px 字号防 iOS 聚焦缩放 */
.modal .fld input, .modal .fld select {
  height: 48px;
  font-size: 16px;
  padding-top: 0;
  padding-bottom: 0;
}
.modal .form-actions { margin-top: 6px; }
.modal .form-actions .btn { height: 48px; font-size: 16px; }

/* 自定义下拉选择器（面板默认可见 9 项，超出滚动） */
.pick { position: relative; display: block; }
.pick-btn {
  width: 100%; height: 48px; padding: 0 14px 0 14px; padding-right: 16px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-size: 16px; font-family: var(--font); cursor: pointer; text-align: left;
}
.pick-btn .arw { flex-shrink: 0; margin-left: 8px; opacity: .55; }
.pick-btn.ph { color: var(--text-2); }
.pick-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 270px; /* 6 项 × 44px，超出滚动 */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 全屏遮罩 + 屏幕正中：上下左右居中 */
.pick-mask {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.pick-mask .pick-panel {
  position: relative; top: auto; left: auto; right: auto; /* 重置主规则的偏移，否则 relative 下会被推出屏幕 */
  width: min(320px, 86vw); max-height: min(270px, 60vh);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.pick-panel.up { top: auto; bottom: calc(100% + 6px); }
.pick-opt {
  height: 44px; line-height: 44px; padding: 0 14px; font-size: 16px;
  color: var(--text); cursor: pointer; border-bottom: 1px solid var(--line);
}
.pick-opt:last-child { border-bottom: none; }
.pick-opt.sel { color: var(--primary); font-weight: 700; background: var(--primary-soft); }
/* 选项超出一屏时的滑动提示条 */
.pick-hint {
  padding: 6px 14px; font-size: 11px; color: #999; background: #fafafa;
  border-bottom: 1px solid var(--line); text-align: center; user-select: none;
}

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: #FFF6D9; color: #6B4E00; padding: 12px 20px;
  border: 1.5px solid #E3B341; border-radius: 0;
  font-size: 14px; z-index: 99; display: none; max-width: 96vw; width: max-content;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
#toast.err { background: #FFF6D9; color: #A32D2D; border-color: #E3B341; }

/* ---------- 分页 ---------- */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pager a, .pager span { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; color: var(--text); }
.pager .cur { background: var(--primary); color: #fff; border-color: var(--primary); }

.footer-note { text-align: center; font-size: 12px; color: var(--text-2); padding: 24px 0 8px; }
/* 页脚备案号：法规要求首页底部展示，链接到工信部/公安部备案系统 */
.beian-note { text-align: center; font-size: 12px; line-height: 1.8; color: var(--text-2); padding: 0 0 12px; }
.beian-note a { color: var(--text-2); text-decoration: none; }
.beian-note a:hover { color: var(--primary); text-decoration: underline; }
.beian-note .beian-sep { margin: 0 6px; opacity: .6; }
.footer-note + .beian-note, .auth-foot + .beian-note { padding-top: 0; margin-top: -6px; }
/* 首页四个入口：2 行 2 列方块，图标在上、文字在下。
   2026-11-02 改版：「复制账本」迁到资料页后，把「创建账本」放回第四格，
   四个一起从胶囊改成方形按钮 + 图标。
   尺寸关系（全部只改数值，不动布局逻辑）：
     方块 = max-width ÷ 2 - 间距半分：252px → 单块 121px 见方（原 110 的 110%）
     图标 38.4px（原 32 的 120%）· 标签 18px（原 15 的 120%）· 两者间距 10px
   想再调就动这三个数：max-width、.ico 的 font-size、.user-nav a 的 font-size。 */
.user-nav {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  padding: 20px 0 4px;
  max-width: 252px; margin: 0 auto;
}
.user-nav a {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 10px 6px;
  background: #fff; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: 16px;
  font-size: 18px; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
}
.user-nav a .ico { font-size: 38.4px; line-height: 1; }
/* 首页「我的账簿」标题居中：「创建账本」回到导航后，标题行不再需要右侧按钮 */
.page-title-mid { text-align: center; }
/* 标题行：左侧标题、右侧动作按钮（beans / recharge / beans_admin / import 等页在用）
   首页已不用它：「创建账本」回到导航第四格后，首页标题直接居中（.page-title-mid） */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.title-row > span { min-width: 0; }
.title-action {
  flex: 0 0 auto; display: inline-block;
  background: #fff; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: 999px;
  padding: 8px 20px; font-size: 14px; font-weight: 600; line-height: 1.7;
  text-decoration: none; white-space: nowrap;
}
.title-action:hover { background: var(--primary); color: #fff; }

@media (max-width: 480px) {
  .summary-bar .num { font-size: 21px; }
  .summary-bar .num.money { font-size: 18px; }
  .entry-grid { grid-template-columns: 13fr 7fr; }
  /* 首页四个方块：手机上不再另设宽度 —— 基础规则里的 max-width: 230px 已经比手机可用宽度窄，
     直接沿用即可保持「单块 110px 见方」三档一致。原先那套 10% - 5mm 内缩已随方框缩小取消。 */
  /* 标题行右侧按钮（各页的「← 返回 xx」）：占右半列，与页面右缘对齐 */
  .container:not(.wide) .title-row .title-action { width: calc(50% - 5px); padding: 10px 8px; text-align: center; }
}

/* ---------- 囍豆（积分） ---------- */
.bean-bar {
  background: var(--primary-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; margin: 0 0 14px;
  font-size: 12.5px; line-height: 1.65; color: var(--text-2);
}
.bean-bar strong { color: var(--primary); }
.bean-bar.free { background: #EDF4EE; border-color: #CFE3D3; color: #34663A; }
.bean-bar.free strong { color: #2E6B36; }

.bean-note {
  background: var(--primary-soft); border-radius: 10px; padding: 9px 12px;
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.65; color: var(--text-2);
}
.bean-note b { color: var(--primary); }

.bean-bal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bean-bal .n { font-size: 34px; font-weight: 800; color: var(--primary); line-height: 1.15; }

.bean-rule-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.bean-rule-row:last-child { border-bottom: 0; }

.bean-ledger { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.bean-ledger th { text-align: left; font-size: 12px; color: var(--text-2); font-weight: 600; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.bean-ledger td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: top; word-break: break-all; }
.bean-ledger tr:last-child td { border-bottom: 0; }
.bean-ledger .in { color: #2E7D32; font-weight: 700; }
.bean-ledger .out { color: var(--danger); font-weight: 700; }

@media (max-width: 480px) {
  .bean-ledger { font-size: 12.5px; }
  .bean-ledger td { padding: 8px 4px; }
}
.bean-ledger .bean-sub {
  display: block; margin-top: 2px; font-size: 11px; line-height: 1.55;
  color: var(--text-2); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bean-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 10px;
}
.bean-head .bt {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--text); min-width: 0;
}
.bean-head .bt::before {
  content: ""; flex: 0 0 auto; width: 4px; height: 16px; border-radius: 2px; background: var(--primary);
}
.bean-head .ba {
  flex: 0 0 auto; font-size: 13px; font-weight: 600;
  color: var(--primary); text-decoration: none; white-space: nowrap;
}
.bean-rules {
  background: var(--primary-soft); border-radius: 10px;
  padding: 10px 12px; margin: 0 0 12px;
}
.bean-rules-row {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.75; color: var(--text-2);
}
.bean-rules-row + .bean-rules-row { margin-top: 7px; }
.bean-rules .tag {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  line-height: 20px; text-align: center; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.bean-rules .tag.in { background: #2E7D32; }
.bean-rules .tag.out { background: var(--danger); }
.bean-rules b { color: var(--primary); font-weight: 700; }
.bean-rules .note {
  margin-top: 9px; padding-top: 8px; font-size: 12px; line-height: 1.7;
  color: var(--text-2); border-top: 1px dashed rgba(0, 0, 0, .08);
}

/* ---------- 折叠卡片（details/summary） ---------- */
.card.fold { padding-bottom: 20px; }
.card.fold > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: block; outline: none;
}
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary::marker { content: ""; }
.fold-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fold-head h2 { margin: 0; }
.fold-toggle {
  flex: none; font-size: 12.5px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 3px;
}
.fold-toggle::after {
  content: "▾"; font-size: 11px; display: inline-block;
  transition: transform .18s ease;
}
.card.fold[open] .fold-toggle::after { transform: rotate(180deg); }
.fold-toggle .t-close { display: none; }
.card.fold[open] .fold-toggle .t-open { display: none; }
.card.fold[open] .fold-toggle .t-close { display: inline; }
.fold-brief {
  margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: var(--text-2);
}
.card.fold[open] .fold-brief { margin-bottom: 14px; }
/* 个人资料页：囍豆明细折叠后的结余行间距 */
.card.fold .bean-bal { margin: 2px 0 0; }
.card.fold[open] .bean-bal { margin-bottom: 14px; }
.card.fold .bean-bal .fold-toggle { align-self: center; }

/* ---------- 后台 · 用户余额列表（移动端友好，替代宽表格） ---------- */
.ubal-list { display: flex; flex-direction: column; }
.ubal-row { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.ubal-row:first-child { padding-top: 4px; }
.ubal-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.ubal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ubal-name { font-size: 14.5px; font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ubal-name .tag { font-size: 11px; padding: 1px 6px; border-radius: 5px; vertical-align: 1px; }
.ubal-bal { flex: 0 0 auto; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ubal-bal i { font-style: normal; font-size: 11.5px; font-weight: 600; margin-left: 2px; opacity: .6; }
.ubal-meta { margin-top: 4px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ubal-form { display: flex; gap: 6px; margin-top: 9px; }
/* 需提高选择器权重：全局 input[type=number]{width:100%} 会覆盖单纯类名 */
.ubal-form .ubal-delta { width: 76px; flex: 0 0 76px; padding: 7px 8px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13.5px; text-align: center; }
.ubal-form .ubal-note { width: auto; flex: 1 1 auto; min-width: 0; padding: 7px 8px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.ubal-form .btn { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; }
/* 宽屏下调整表单不要太长，保持紧凑 */
@media (min-width: 721px) {
  .ubal-form { max-width: 460px; }
  .ubal-row { padding: 11px 0; }
}