/* ============================================================
   皙昂大学AI校园一卡通 · 学生端 / 商家端 布局样式（移动端优先）
   ------------------------------------------------------------
   视觉基线对齐 esign/stu：点阵渐变背景 / 无边框品牌行 / 磁贴宫格

   【分层约定】
     theme.css  → 设计基座：token / reset / 通用组件（面板·按钮·表单·
                  表格·徽章·空状态）。改主题色、间距、圆角只改它。
     app.css    → 本文件：仅承载学生端/商家端**特有**的布局与专属组件。
   所以本文件不再重复定义 token 与通用组件的颜色。
   ============================================================ */

/* ============================================================
   01 · 页面骨架
   ============================================================ */
.wrap {
  max-width: var(--maxw); margin: 0 auto; min-height: 100vh;
  padding-bottom: 78px; background: transparent; position: relative;
}
body.merchant .wrap { padding-bottom: 80px; }

/* 品牌行（校徽 + 校名 + 问候语） */
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-2);
  position: relative;
}
/* 右上角品牌色光晕，与证件卡视觉呼应
   注意：必须放在内容之下（z-index:-1），否则会盖住右上角的胶囊入口 */
.brand::after {
  content: "";
  position: absolute; right: -30px; top: -46px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-l) 0%, transparent 68%);
  pointer-events: none; z-index: -1;
}
.brand > * { position: relative; z-index: 1; }
.brand-badge {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  object-fit: cover; background: #fff;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 12px var(--brand-glow);
}
/* 品牌行：校名 + 问候语同一行（原来竖排，问候语掉到第二行显得散） */
.brand-text {
  display: flex; flex-direction: row; align-items: center;
  gap: 8px; min-width: 0; line-height: 1.2;
}
.brand-text b { font-size: var(--fs-xl); font-weight: 900; letter-spacing: .3px; white-space: nowrap; }
/* 问候语：作为校名的副标题，灰色细字即可。
   原来做成蓝色药丸，和校名抢视觉，整体显得花。 */
.brand-text i {
  font-style: normal; font-size: 12.5px; font-weight: 600;
  color: var(--text-3);
  background: none; padding: 0;
  white-space: nowrap; box-shadow: none;
}
.brand-slot { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); z-index: 2; }
/* 右上角胶囊入口：白底 + 品牌字 + 细边，比实心渐变更轻，不与校徽抢视觉 */
.brand-chiplink {
  display: inline-block; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--brand) !important;
  border: 1.5px solid var(--brand-bd);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(30, 50, 120, .08);
  transition: transform var(--t-fast) var(--ease-back),
              background var(--t-fast) var(--ease);
}
.brand-chiplink:active { transform: scale(.94); background: var(--brand-l); }

/* ---------- 登录页 ---------- */
.login-page {
  min-height: 100vh; padding: 54px 24px 30px;
  background: linear-gradient(165deg, #1224ec 0%, #4f6ef7 45%, #4f6ef7 100%);
}
.login-brand { text-align: center; color: #fff; margin-bottom: 26px; }
.login-logo {
  width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85);
  object-fit: cover; margin-bottom: 10px; background: #fff;
}
.login-brand h1 { font-size: 27px; letter-spacing: 3px; font-weight: 700; }
.login-brand h2 { font-size: 14.5px; font-weight: 400; opacity: .92; margin-top: 4px; }

.login-card {
  background: #fff; border-radius: 16px; padding: 20px 20px 26px;
  box-shadow: 0 14px 34px rgba(20, 60, 140, .28);
}
/* 分段标签（登录页）：自适应等分，标签多时自动收窄 */
.tabs, .seg-tabs { display:flex; margin-bottom:16px; border-bottom:1px solid var(--border); }
.tabs .tab, .seg-tabs button, .seg-tabs .tab {
  flex:1 1 0; min-width:0; text-align:center; padding:11px 2px;
  color:var(--text2); font-size:14px; font-weight:700; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:transparent; border:0; font-family:inherit;
}
.tabs .tab.active, .seg-tabs .tab.active, .seg-tabs button.on {
  color:var(--brand); border-bottom:2px solid var(--brand); margin-bottom:-1px;
}
.field { margin-bottom: 14px; position: relative; }
.field input, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid #e2e7f4; border-radius: 12px;
  font-size: 15px; background: #fff; color: #110f5f; outline: none;
}
.field input:focus { border-color: var(--brand); }
.field input::placeholder { color: #a9b4cc; }
.field .lbl { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; font-weight: 600; }
.minor { font-size: 12.5px; color: #5870a6; margin: 8px 0; }
.minor a { color: var(--brand); }
.login-foot { text-align: center; color: rgba(255,255,255,.88); font-size: 13px; margin-top: 26px; }
.lang { padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.22); }
.lang.muted { opacity: .55; }

/* ============================================================
   证件卡（对齐 esign/stu 的 .idcard 与 scard 的 .card）
   白底 + 点阵纹理 + 大圆角 + 厚投影 + 入场动画
   ============================================================ */
/* ============================================================
   证件卡 —— 对齐 /stu 的视觉语言
   ------------------------------------------------------------
   /stu 的卡片是「浅青渐变底 + 点阵 + 蓝色贴纸区 + 彩色药丸 + 四角标照片」。
   此前误把它改成了整块深蓝渐变，丢掉了层次和活泼感，现改回浅青卡面。
   注意 #d6f1f4（浅青）与 #c3e2eb（虚线条）是这套设计的组成部分，不是脏色。
   ============================================================ */
/* 证件卡：保持 /stu 的浅青卡面与点阵，但把阴影压轻、去掉深色块，
   整体往「清爽」走 —— 校园卡面向学生，不该有厚重墨蓝的压迫感 */
.id-card {
  margin: 6px 16px 14px; border-radius: 18px; overflow: hidden; position: relative;
  background: #fff;
  box-shadow: 0 4px 18px rgba(30, 50, 120, .06);
  animation: cardDrop .7s cubic-bezier(.22,1.4,.36,1) both;
}
@keyframes cardDrop {
  0% { opacity:0; transform:translateY(-30px) scale(.94); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

/* 卡头：虚线分隔 + 浅紫灰说明 + 品牌蓝卡号（与 /stu 一致） */
.id-card .id-top {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px 16px 9px;
  border-bottom: 1px dashed #eef1f7;
}
.id-card .id-type {
  font-size:12px; font-weight:600; color:var(--text-3); letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.id-card .id-no {
  color:#3b5bdb !important; font-weight:800; font-size:13px;
  letter-spacing:1px; white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* 主体：左侧信息 + 右侧照片 */
.id-card .id-main {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px 16px;
}
.id-card .id-info { flex:1; min-width:0; }
.id-card .id-row {
  display:flex; align-items:baseline; gap:8px; margin-bottom:7px;
}
.id-card .id-row:last-child { margin-bottom:0; }
.id-card .id-row span {
  color:#9ba1cf; width:38px; flex:none; font-size:12.5px; font-weight:600;
}
.id-card .id-row b {
  color:#1a1a2e; font-weight:800; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 照片：白粗边 + 蓝色四角标（/stu 的拍立得感） */
/* 证件照：与左侧三行信息同高，视觉上成为一个整体，
   不要再缩成一个小方块挂在角落 */
.id-card .id-photo {
  position:relative; flex:none;
  width:86px; height:106px;
  background: linear-gradient(180deg, #f5f7fa, #e8ecf4);
  border:3px solid #fff; border-radius:10px;
  box-shadow:0 4px 14px rgba(59,91,219,.16);
  display:flex; align-items:center; justify-content:center;
  align-self:center;
}
.id-card .id-photo .id-avatar {
  width:100%; height:100%; border-radius:4px;
  object-fit:cover; display:block;
}
.id-card .ph-corner {
  position:absolute; width:9px; height:9px; background:#3b5bdb; opacity:.85; border-radius:1px;
}
.id-card .ph-corner.c1 { left:-7px; top:-7px; }
.id-card .ph-corner.c2 { right:-7px; top:-7px; }
.id-card .ph-corner.c3 { left:-7px; bottom:-7px; }
.id-card .ph-corner.c4 { right:-7px; bottom:-7px; }

/* 底部蓝色贴纸区：/stu 的招牌元素 */
.id-sticker-zone {
  position:relative; padding:13px 14px 15px;
  background:linear-gradient(180deg, #4f6ef7, #3b5bdb);
  min-height:52px; display:flex; align-items:center; flex-wrap:wrap; gap:2px;
}
.id-sticker-zone::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 42%);
  pointer-events:none;
}
.id-sticker-zone .sticker {
  position:relative; display:inline-block;
  font-weight:900; font-size:12.5px; color:#fff;
  padding:4px 11px; border-radius:999px;
  border:2px solid #fff; margin:3px 4px 3px 0;
  box-shadow:0 3px 8px rgba(30,20,100,.25);
  animation:stickerPop .45s cubic-bezier(.3,1.6,.5,1) both;
}
.id-sticker-zone .sticker.s1 { background:#16b364; transform:rotate(-4deg); animation-delay:.55s; }
.id-sticker-zone .sticker.s2 { background:#ff9d2e; transform:rotate(3deg); animation-delay:.68s; }
.id-sticker-zone .sticker.s3 { background:#ff4d6d; transform:rotate(-2deg); animation-delay:.8s; }
@keyframes stickerPop {
  0% { opacity:0; transform:scale(.3) rotate(-12deg); }
  100% { opacity:1; }
}

.id-card .id-avatar.circle { width:68px; height:68px; border-radius:50%; }

/* ---------- 通用卡片 ----------
   保留移动端特有的点阵纹理，投影/圆角/间距对齐 theme.css 三档阴影 */
.panel {
  border-radius: var(--r-lg); margin: 0 var(--s-4) 14px; padding: var(--s-4);
  position: relative; z-index: 3;
  background:
    radial-gradient(circle, rgba(59,91,219,.05) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fff, var(--surface-2));
  box-shadow: var(--sh-3);
  animation: wbRise var(--t-base) var(--ease) both;
}
.qr-panel { text-align:center; padding:0 18px 20px; }
/* 付款码提示语：对齐 scard —— 普通深色文字，不用红色、不加问号图标 */
.qr-tip { font-size:14px; font-weight:700; color:var(--text); margin-bottom:12px; }
/* 二维码码区：对齐支付宝 / 微信付款码的做法 ——
   纯白码区 + 一圈很浅的描边，四周留白均匀。
   不用渐变、不用投影，避免与上下卡片抢戏。 */
.qrcode {
  margin: 0 auto;
  width: fit-content;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9edf6;
  box-shadow: none;
}
/* 二维码统一放大到 200×200 并锁定正方形，避免 SVG 被拉伸变形导致扫不出 */
.qrcode svg { display:block; width:184px; height:184px; flex-shrink:0; border-radius:var(--r-md); }
.qr-loading { color:var(--text3); font-size:13px; }
/* 主卡余额：scard 写法「主卡余额：123.00 元」 */
/* 余额：付款码卡里的主视觉，字号与字重都要压得住 */
.balance-line { font-size:13px; color:var(--text-3); margin-top:14px; letter-spacing:.3px; }
.balance-line b { font-weight:900; font-size:30px; color:var(--brand); letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.refresh-line {
  display:inline-flex; align-items:center; gap:5px; margin-top:9px;
  color:var(--brand); font-size:13px; font-weight:700; cursor:pointer;
}
.refresh-line .spin { display:inline-block; animation:none; }
.refreshing .spin { animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.qr-countdown { font-size:11.5px; color:var(--text3); margin-top:6px; }
.warn-big { font-size:42px; padding-top:14px; color:var(--danger); }
.warn-text { font-weight:700; color:var(--danger); }

/* ---------- 小节标题 ---------- */
.sec-title {
  display:flex; align-items:center; gap:8px;
  margin:0 18px 10px; font-size:15.5px; font-weight:900; color:var(--text);
}
.sec-title::before {
  content:''; width:4px; height:16px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand2),var(--brand));
}

/* ---------- 磁贴宫格（对齐 scard .tile-grid / .tile） ---------- */
.grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin:0 16px 16px; padding:0; background:transparent;
}
/* ============================================================
   便捷生活宫格 —— 清新白卡 + 浅底彩色图标
   ------------------------------------------------------------
   原来每个格子都是自己的浅紫卡片，8 个渐变彩色块叠在一起，
   整体偏「墨蓝 + 高饱和」，看着土。
   改为：一个白色圆角容器，格子本身透明，
   图标用浅色圆角底 + 同色系线条图标，接近抖音那种清爽感。
   ============================================================ */
.grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px 6px;
  padding: 20px 10px 18px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 4px 18px rgba(30, 50, 120, .06);
  margin: 0 16px 16px;
}

.cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; box-shadow: none; padding: 0;
  color: var(--text-2); font-size: 12px; font-weight: 600;
  transition: transform .12s var(--ease-back);
}
.cell:active { transform: scale(.94); background: none; }

.cell .ico-svg {
  width: 46px; height: 46px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--brand-l); color: var(--brand);
  box-shadow: none;
}
.cell .ico-svg svg { width: 23px; height: 23px; flex: none; }

/* 8 格配色：浅底 + 同色系图标，整体明亮、有区分但不刺眼 */
.grid .cell:nth-child(8n+1) .ico-svg { background: #eef2ff; color: #4f6ef7; }
.grid .cell:nth-child(8n+2) .ico-svg { background: #e8f6ff; color: #2f9bd8; }
.grid .cell:nth-child(8n+3) .ico-svg { background: #f4edff; color: #8b5cf6; }
.grid .cell:nth-child(8n+4) .ico-svg { background: #ffedf4; color: #ec4899; }
.grid .cell:nth-child(8n+5) .ico-svg { background: #fff4e6; color: #f59e0b; }
.grid .cell:nth-child(8n+6) .ico-svg { background: #e9f9f0; color: #10b981; }
.grid .cell:nth-child(8n+7) .ico-svg { background: #e6f7fb; color: #06a5b8; }
.grid .cell:nth-child(8n+8) .ico-svg { background: #eef0ff; color: #3b5bdb; }

@media (max-width: 360px) {
  .grid { gap: 16px 4px; padding: 16px 8px 14px; }
  .cell .ico-svg { width: 42px; height: 42px; border-radius: 13px; }
  .cell .ico-svg svg { width: 21px; height: 21px; }
}

/* ---------- 我的页 ----------
   旧的 .mine-hero / .mine-avatar / .mine-name / .mine-sub 已废弃，
   「我的」页改用 .me-card 合并卡（个人信息 + 余额），样式见下方。
   仅保留 .mine-badge（状态角标，仍在使用）。 */
.mine-badge {
  position: absolute; top: -4px; left: -10px; background: #f4364e; color: #fff;
  font-size: 10px; padding: 2px 7px; border-radius: 9px 9px 9px 2px; white-space: nowrap;
}

.menu-card { background: #fff; border-radius: 14px; margin: 12px 14px 0; overflow: hidden; }
.menu-row {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid #f2f5f9; color: #141471; font-size: 14.5px;
}
.menu-row:last-child { border-bottom: 0; }
.menu-row .m-ico { display: inline-block; width: 22px; height: 22px; color: var(--brand); flex-shrink: 0; }
.menu-row .m-ico svg { width:20px; height:20px; flex:none; }
.menu-row .grow { flex: 1; }
.menu-row .arrow { color: #b0cbd1; }
/* 退出登录：对校园卡用户是低频操作，放在列表末尾即可，
   不该用警示红把它变成视觉焦点（红色只留给「挂失」这类真正危险的动作） */
.menu-row.danger, .menu-row.danger .m-ico { color: var(--text-2); }

/* ---------- 信息列表 ---------- */
/* margin/padding 必须显式重置：浏览器给 <ul> 默认 padding-left:40px + margin:16px 0，只写 list-style:none 会让文字整体右缩 40px、上下多出 16px，表现为「卡片里的字离边框很远」。 */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f2f5f9; font-size: 13.5px; }
.info-list li:last-child { border-bottom: 0; }
.info-list span { color: #8599a6; }
.info-list b { text-align: right; word-break: break-all; }
.center-tip { text-align: center; margin: 14px 0; }
/* .empty / .panel-title / .panel 已上移 theme.css 统一，此处不再重复定义 */

/* ---------- 账单（对标：筛选 / 月份 / 汇总 / 流水） ---------- */
.bill-filter { display: flex; background: #fff; border-radius: 14px 14px 0 0; margin: 14px 14px 0; padding: 4px 8px 0; }
/* 收支切换改为按钮：纯前端过滤，不再整页刷新 */
.bill-filter .bf-item {
  flex: 1; text-align: center; padding: 11px 0; font-size: 14.5px; color: var(--text);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  background: transparent; font-family: inherit; font-weight: 500;
}
.bill-filter .bf-item.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
.bill-head { background: #fff; border-radius: 0 0 14px 14px; margin: 0 14px; padding: 12px 18px 14px; }
.month-bar { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; }
/* 月份选择：点击展开面板，前端加载数据，不跳转页面 */
.month-bar .mb-left {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 800; font-size: var(--fs-md); color: var(--brand);
  background: var(--brand-l); border: 1.5px solid var(--brand-bd);
  border-radius: var(--r-pill);
  padding: 8px 15px; cursor: pointer; font-family: inherit;
  transition: background var(--t-fast) var(--ease);
}
.month-bar .mb-left:active { background: var(--brand-l-2); }
.month-bar .mb-left .mb-caret { display: inline-flex; color: var(--brand); transition: transform .18s; }
.month-bar .mb-left.on .mb-caret { transform: rotate(180deg); }
.month-bar a { color: var(--text); font-size: 13px; }

/* ============================================================
   账单 · 月份选择面板
   ============================================================ */
.month-sheet {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .24s ease, opacity .18s ease;
  background:#fff; border-radius:0 0 14px 14px; margin:0 14px;
}
.month-sheet.open { max-height:280px; opacity:1; overflow-y:auto; }
.month-sheet .ms-head {
  font-size:12.5px; color:var(--text2); padding:10px 18px 6px; font-weight:700;
}
.month-sheet .ms-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:0 18px 16px;
}
.month-sheet .ms-item {
  border:1px solid #c7d7ed; background:#fff; color:var(--text2);
  border-radius:10px; padding:9px 2px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.month-sheet .ms-item.on {
  background:linear-gradient(135deg,var(--brand2),var(--brand));
  color:#fff; border-color:var(--brand);
  box-shadow:0 4px 12px rgba(59,91,219,.24);
}
.month-sheet .ms-item:disabled { opacity:.5; }
.bill-sum { display: flex; align-items: center; gap: 16px; margin-top: 8px; color: #4c5366; font-size: 14px; }
.bill-sum b { font-weight: 600; }
.bill-sum .sum-ico { display: inline-block; margin-left: auto; width: 30px; height: 30px; color: var(--brand); flex-shrink: 0; }
.bill-sum .sum-ico svg { width:22px; height:22px; flex:none; }
.txn-list { list-style: none; margin: 0; padding: 0; }
.txn-item { border-bottom: 1px solid #f2f5f9; }
.txn-item:last-child { border-bottom: 0; }
.txn-item summary {
  list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 2px; cursor: pointer;
}
.txn-item summary::-webkit-details-marker { display: none; }
.txn-ico {
  width: 38px; height: 38px; border-radius: 50%; background: #d0f0f2; color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px;
}
.txn-ico.out { background: #fdeeec; color: var(--danger); }
.txn-main { flex: 1; min-width: 0; }
.txn-main b { display: block; font-size: 14.5px; }
.txn-main .minor { display: block; margin: 1px 0 0; }
.txn-side { text-align: right; }
.txn-side .amount { display: block; font-weight: 600; font-size: 15.5px; }
.amount.pos { color: #0a8f4d; }
.amount.neg { color: var(--danger); }
.txn-side .minor { display: block; }
.txn-detail { padding: 0 2px 12px 52px; }
.txn-detail .kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.txn-detail .kv span { color: #8599a6; }
.txn-detail .kv b { color: #4c5366; font-weight: 500; word-break: break-all; text-align: right; }

/* ---------- 电子券 ---------- */
.voucher-list { list-style: none; margin: 0; padding: 0; }
.voucher {
  display: flex; justify-content: space-between; gap: 12px;
  border: 1px solid #f3ddb0; background: linear-gradient(135deg, #fffaf0, #fff5e2);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 10px;
}
.voucher.used { border-color: #e6e9ee; background: #f7f9fb; opacity: .72; }
.v-main b { display: block; font-size: 15px; }
.v-main .minor { display: block; margin: 2px 0 0; }
.v-code { display: block; font-size: 14px; margin-top: 7px; color: #8a6d1f; letter-spacing: .5px; }
.v-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.badge.used { background: #eceff3; }
.badge.warn { background: var(--warn-l); }

/* ---------- 充值（对标：虚拟卡行 / ¥输入 / 金额按钮 / 红色下一步） ---------- */
.pay-channel {
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px 14px 0 0;
  margin: 14px 14px 0; padding: 15px 18px; font-size: 14.5px;
}
.pay-channel .ch-ico { display: inline-block; width: 26px; height: 26px; color: #0a2dd7; flex-shrink: 0; }
.pay-channel .ch-ico svg { width:22px; height:22px; flex:none; }
.pay-channel .grow { flex: 1; }
.pay-channel .arrow { color: #b0cbd1; }
.amount-block { background: #fff; border-radius: 0 0 14px 14px; margin: 0 14px; padding: 16px 18px 20px; }
.amount-block .amt-label { font-size: 14px; color: #4c5366; }
.amount-block .amt-input {
  display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid #110f5f; padding: 6px 2px 8px; margin: 6px 0 16px;
}
.amount-block .amt-input .yen { font-size: 30px; font-weight: 600; }
.amount-block .amt-input input {
  border: 0; outline: none; font-size: 34px; font-weight: 700; width: 100%; background: transparent; color: #110f5f;
}
.amount-grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.amount-btn {
  border: 1px solid #4f6ef7; color: var(--brand); background: #fff; border-radius: 6px;
  padding: 11px 0; text-align: center; font-size: 15.5px; cursor: pointer;
}
.amount-btn.active { background: #cdeef2; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.btn-danger-pill {
  display: block; width: calc(100% - 28px); margin: 18px 14px 0; border: 0; border-radius: 24px;
  background: var(--danger); color: #fff; font-size: 17px; font-weight: 600; padding: 13px; cursor: pointer; text-align: center;
}
.btn-danger-pill:active { opacity: .92; }

/* ---------- 收银台（真实支付宝二维码） ---------- */
.cashier { text-align: center; padding: 24px 18px; }
.cashier-title { font-size: 15px; color: #4c5366; }
.cashier-amount { font-size: 18px; color: #8599a6; margin: 12px 0 4px; }
.cashier-amount b { font-size: 42px; color: #110f5f; font-weight: 700; }
.pay-qrcode { padding: 10px 0; min-height: 210px; display: flex; align-items: center; justify-content: center; }
.pay-status { font-size: 13.5px; color: #8599a6; margin-top: 6px; }
.pay-status.waiting::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #f0a12e; margin-right: 6px; animation: blink 1.2s infinite;
}
@keyframes blink { 50% { opacity: .25; } }
.pay-status.ok { color: #0a8f4d; font-weight: 600; }
.open-alipay {
  display: block; margin: 14px auto 0; width: 82%; border-radius: 22px; background: #0a2dd7;
  color: #fff; font-size: 15.5px; padding: 12px; text-align: center;
}

/* ---------- 表单与按钮 ----------
   按钮的配色/圆角/阴影已由 theme.css 统一定义；
   这里只做移动端的「占满一行」布局，不重复设色。 */
.form .btn-primary, .btn-primary {
  display: block; width: 100%; text-align: center;
}
.form .btn-plain, .btn-plain { display: block; width: 100%; text-align: center; }
.form .btn-danger, .btn-danger { display: block; width: 100%; text-align: center; }
.btn-mini { display: inline-block; }
.btn-mini:disabled { cursor: not-allowed; }
.btn-row { margin-top: 0; }
.btn-row form, .btn-row a { flex: 1; }
.as-link { display: flex; align-items: center; justify-content: center; }

/* ---------- AI 聊天 ---------- */
.chat-box {
  background: #f5f8fd; border-radius: 12px; padding: 12px; max-height: 340px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px;
}
.chat-msg {
  max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.7;
  word-break: break-word;
}
.chat-msg.bot { background: #fff; color: #141471; border: 1px solid #ccebea; align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.user { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg.bot.chat-err { background: #fdecea; color: #b03024; border-color: #f5c6c0; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chat-form { display: flex; gap: 8px; }
.chat-form #chat-input {
  flex: 1; padding: 11px 13px; border: 1px solid #bedce0; border-radius: 10px; font-size: 14px; outline: none;
}
.chat-form .chat-send { width: 88px; flex-shrink: 0; }
.sms-code-field { display: flex; gap: 8px; align-items: center; }
.sms-code-field input { flex: 1; }
.sms-code-field .btn-mini { flex-shrink: 0; padding: 10px 12px; font-size: 13px; }

/* ---------- 通知列表 ---------- */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li a {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f0f3f8; color: #141471; font-size: 14px;
}
.notice-list li:last-child a { border-bottom: 0; }
.notice-list time { color: #99b2bd; font-size: 12px; flex-shrink: 0; }
.notice-content { font-size: 14.5px; color: #141471; margin-top: 8px; }

/* ---------- 底部导航（SVG 图标） ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 460px; background: #fff; border-top: 1px solid #ccebea;
  display: flex; z-index: 40; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: 7px 0 9px; color: #91aab7; font-size: 11.5px;
}
.tabbar a .ico-svg { display: block; width: 23px; height: 23px; margin: 0 auto 1px; color: #91aab7; }
.tabbar a .ico-svg svg { width:23px; height:23px; flex:none; }
.tabbar a.active { color: var(--brand); }
.tabbar a.active .ico-svg { color: var(--brand); }

/* ---------- 提示条 ----------
   .flash 的配色/圆角/字号已由 theme.css 定义，这里只补层叠定位 */
.flash { position: relative; z-index: 5; }

/* ========== 主题收口：统一走 :root 变量（不要再写死色值） ========== */
/* 背景由 body 的点阵渐变统一提供，这里不能给 .wrap 上底色，否则会盖住点阵 */
.wrap { background:transparent; }
a { color:var(--brand); }

.hero { display:none; }   /* 旧紫色卡头已弃用，改用 .id-card + .me-card */

/* 旧 .wallet-card（紫色余额大卡）已废弃：余额并入「我的」页 .me-card。
   这里保留 .wc-actions 两按钮样式，供 .me-card 复用。 */
.wc-actions { display:flex; gap:10px; }
.wc-actions a {
  flex:1; text-align:center; padding:10px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
}

/* 三宫格统计：钱包余额 / 本月消费 / 可用券 */
.stat-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:0 16px 16px;
}
.stat-row.two { grid-template-columns:repeat(2,1fr); }
.stat-row a {
  background:linear-gradient(180deg,#fff,var(--surface-3)); border-radius:var(--r-md);
  padding:14px 8px 12px; text-align:center; color:inherit;
  box-shadow:0 4px 14px rgba(30,50,120,.06); transition:transform .12s;
}
.stat-row a:active { transform:scale(.96); }
.stat-row b {
  display:block; font-size:21px; font-weight:900; color:var(--brand); line-height:1.2;
  letter-spacing:-.3px; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat-row i {
  display:block; font-style:normal; font-size:11.5px; font-weight:700;
  color:var(--text2); margin-top:3px;
}

.login-page { background:linear-gradient(165deg,var(--brand) 0%,var(--brand2) 45%,#9b8ef0 100%); }

.tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.field input:focus { border-color:var(--brand); }

/* 注意：.cell .ico-svg 必须保持白色（它是彩色渐变块里的描边图标），
   这里曾把它覆盖成深紫导致图标糊成一块，已移除该覆盖。 */
.cell:active { background:linear-gradient(180deg,#fff,#e8f0ff); }

.menu-row .m-ico { color:var(--brand); }
.bill-filter .bf-item.active { color:var(--brand); border-bottom-color:var(--brand); }

.bill-sum .sum-ico, .sum-ico, .pay-channel .ch-ico { color:var(--brand); }
.txn-ico { background:#e4eaff; color:var(--brand); }
.chat-msg.user { background:var(--brand); }

.amount-btn { border-color:#8b8fbd; color:var(--brand); }
.amount-btn.active { background:#dbe4fd; border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }

.form .btn-primary, .btn-primary { background:linear-gradient(135deg,var(--brand2),var(--brand)); border:0; }
.btn-mini { background:var(--brand); color:#fff; }
.btn-mini:disabled { background:#b4b7e7; }
.btn-plain { background:#e4eaff; color:var(--brand); }

.tabbar a.active { color:var(--brand); }
.tabbar a.active .ico-svg { color:var(--brand); }

.sec-title::before { background:linear-gradient(180deg,var(--brand2),var(--brand)); }
.mine-badge { background:#4f6ef7; }

/* ============================================================
   品牌行（对齐 esign/stu + scard）
   关键：不设白底、不设下边框，直接坐在整页点阵背景上，与页面融为一体
   ============================================================ */
.brand {
  display:flex; align-items:center; gap:10px;
  padding:18px 18px 14px; position:relative; z-index:5;
  background:transparent; border-bottom:0;
}
.brand-badge {
  width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden;
  background:linear-gradient(160deg,#9a5cf6,#3b5bdb);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(59,91,219,.35);
}
.brand-badge img { width:100%; height:100%; object-fit:cover; display:block; }
.brand-text { display:flex; align-items:center; gap:6px; min-width:0; }
.brand-text b {
  font-size:20px; font-weight:900; letter-spacing:1px; color:var(--text);
  white-space:nowrap;
}
/* 页面标签：品牌紫蓝渐变小药丸
   （原为红橙渐变，与三端紫蓝主色冲突；与登录页 .auth-tag 的暖色标签区分开：
     登录页是「端身份」标识用暖色，页内是「当前位置」标识用品牌色） */
/* 问候语（副标题）：与上方 .brand-text i 保持一致 —— 灰色细字，不做药丸。
   这里原本有一份渐变药丸的重复定义，位置更靠后，
   会把前面的中性样式覆盖掉（同类重复在本文件里有好几处，逐条收敛）。 */
.brand-text i {
  font-style: normal; font-weight: 600; font-size: 12.5px;
  color: var(--text-3);
  background: none; padding: 0;
  box-shadow: none; white-space: nowrap;
}
.brand-slot { margin-left:auto; display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.brand-chiplink {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; color:var(--brand);
  background:#e4eaff; padding:7px 13px; border-radius:999px;
}
.brand-chiplink svg { width:14px; height:14px; }

/* 卡头在品牌条下方时不再有负外边距叠加问题 */
.brand + .hero { margin-top:0; }

/* ============================================================
   首页 · 卡面与付款码（对齐 scard 视觉）
   ============================================================ */
/* 状态标签 */
.status-tag {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 11px; border-radius:11px; font-size:12.5px; font-weight:600;
}
.status-tag.ok    { background:#e8f7ef; color:#0a8f4d; }
.status-tag.warn  { background:#fdf3e4; color:#b9770e; }
.status-tag.danger{ background:#fdecea; color:#b03024; }

/* 快捷入口小标题下的宫格保持原样，仅统一间距 */
.grid { grid-template-columns:repeat(4,1fr); }
.grid .cell span:last-child { line-height:1.35; }

/* 通知公告卡片 */
.panel > .notice-list { margin-top:-4px; }

/* ============================================================
   充值页（对标 scard 充值：余额卡 / 金额宫格 / 支付面板）
   ============================================================ */
/* 充值页余额卡：原为深紫渐变，和学生端白卡体系不搭。
   改为品牌蓝实心（金融类信息适合有分量一点的底色，
   但收敛到品牌色，不再偏紫）。 */
.balance-hero {
  background:linear-gradient(135deg,var(--brand2) 0%,var(--brand) 100%);
  margin:14px 14px 0; padding:18px 20px; border-radius:18px;
  color:#fff; display:flex; align-items:center;
  box-shadow:0 6px 20px rgba(59,91,219,.24);
}
.balance-hero .bh-label { display:block; font-size:12.5px; opacity:.88; }
.balance-hero .bh-amt { display:block; font-size:30px; font-weight:700; line-height:1.25; }
.balance-hero .bh-ico {
  margin-left:auto; width:44px; height:44px; flex-shrink:0;
  opacity:.9; color:#fff;
}
.balance-hero .bh-ico svg { width:30px; height:30px; flex:none; }

/* 金额宫格：三列 */
.amount-grid2 { grid-template-columns:repeat(3,1fr); gap:11px; }
.amount-btn {
  border:1px solid #c7d7ed; border-radius:11px; background:#fff;
  padding:13px 0; font-size:16px; font-weight:600; color:#46397d;
}
.amount-btn.active {
  background:#dbe4fd; border-color:var(--brand); color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);
}

/* 支付通道说明条 */
.pay-channel {
  border-radius:14px; margin:14px 14px 0; padding:14px 18px;
  box-shadow:0 1px 6px rgba(124,58,237,.06);
}
.pay-channel b { font-size:14.5px; }
.pay-channel .bal-chip {
  flex-shrink:0; font-size:12.5px; color:#46397d;
  background:#eef2fe; padding:4px 11px; border-radius:11px; font-weight:600;
}

/* 主行动按钮（紫色胶囊，替代红色） */
.btn-primary-pill {
  display:block; width:calc(100% - 28px); margin:18px 14px 0;
  border:0; border-radius:26px; padding:14px;
  background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff;
  font-size:16.5px; font-weight:600; cursor:pointer; text-align:center;
  box-shadow:0 8px 20px rgba(124,58,237,.30);
}
.btn-primary-pill:active { opacity:.92; }

/* 页内收银台（对标 scard：不跳页，直接出码 + 一键跳支付宝） */
.pay-cashier { text-align:center; }
.pay-cashier .pc-amount { font-size:15px; color:#8599a6; }
.pay-cashier .pc-amount b { font-size:34px; font-weight:700; color:#110f5f; }
.pay-cashier .pc-title { font-size:13.5px; color:#8599a6; margin-top:2px; }
.pay-cashier .pc-qr {
  min-height:210px; display:flex; align-items:center; justify-content:center; padding:8px 0;
}
.pay-cashier .pc-qr svg { display:block; width:200px; height:200px; flex-shrink:0; }
.pay-cashier .pay-status { margin-top:6px; }
.pay-cashier .pc-demo { padding:6px 0 2px; }
.pay-cashier .pc-demo-tip { font-size:12.5px; color:#8599a6; margin-bottom:12px; }

/* ============================================================
   安全页（改密 / 挂失）：状态横幅 + 提示块
   ============================================================ */
.sec-banner {
  display:flex; align-items:center; gap:13px;
  margin:14px 14px 0; padding:16px 18px; border-radius:14px;
  background:#fff; box-shadow:0 1px 6px rgba(124,58,237,.06);
}
.sec-banner .sb-ico {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sec-banner .sb-ico svg { width:22px; height:22px; }
.sec-banner .sb-body { min-width:0; }
.sec-banner .sb-title { font-size:15.5px; font-weight:600; color:#110f5f; display:block; }
.sec-banner .sb-desc { font-size:12.5px; color:#8599a6; display:block; margin-top:1px; }
.sec-banner.ok     .sb-ico { background:#e8f7ef; color:#0a8f4d; }
.sec-banner.warn   .sb-ico { background:#fdf3e4; color:#b9770e; }
.sec-banner.danger .sb-ico { background:#fdecea; color:#b03024; }

.hint-box {
  margin:12px 14px 0; padding:13px 16px; border-radius:12px;
  background:#e4eaff; border:1px solid #e4eaff;
  font-size:12.5px; color:#4e488f; line-height:1.75;
}
.hint-box b { color:#46397d; }
.hint-box ul { margin:4px 0 0 16px; }
.hint-box li { margin:2px 0; }

/* ============================================================
   「我的」页 · 个人信息 + 余额合并卡
   与顶部品牌行同一视觉语言（白底点阵卡），避免两层身份区割裂
   ============================================================ */
.me-card {
  margin:6px 16px 14px; border-radius:var(--r-lg); padding:18px 20px 20px;
  background:
    radial-gradient(circle, rgba(59,91,219,.055) 1.1px, transparent 1.1px) 0 0 / 14px 14px,
    linear-gradient(180deg, #ffffff, #f8faff);
  box-shadow:0 14px 36px rgba(30,50,120,.14), 0 3px 10px rgba(30,50,120,.07);
  animation:cardDrop .7s cubic-bezier(.22,1.4,.36,1) both;
  position:relative; overflow:hidden;
}
/* 右上角品牌色光晕，和钱包卡的视觉呼应 */
/* 原来这里有一团 rgba(59,91,219,.13) 的蓝色光晕，叠在浅底上显得发灰发脏，
   且与卡片的点阵纹理互相干扰。改为不渲染，保持卡面干净。 */
.me-card::after { display:none; }
.me-card > * { position:relative; z-index:1; }
/* 头像与信息居中 */
.me-card .me-avatar-wrap { position:relative; width:60px; margin:0 auto 10px; }
.me-card .me-avatar {
  width:60px; height:60px; border-radius:50%; object-fit:cover; background:#e8f0ff;
  border:2px solid #fff; box-shadow:0 4px 14px rgba(30,50,120,.18); display:block;
}
.me-card .mine-badge {
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  background:#f4364e; color:#fff; font-size:10px; padding:2px 8px;
  border-radius:9px; white-space:nowrap;
}
.me-card .me-name { display:block; font-size:20px; font-weight:900; color:var(--text); line-height:1.3; text-align:center; }
.me-card .me-sub { display:block; font-size:12.5px; color:var(--text2); margin-top:2px; text-align:center; }
.me-card .me-balance {
  display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:16px;
  padding-top:14px; border-top:1px dashed #dde4f6;
}
.me-card .mb-label { font-size:13px; color:var(--text2); }
.me-card .mb-amount { font-size:32px; font-weight:900; color:var(--brand); line-height:1; letter-spacing:.5px; }
.me-card .mb-amount b { font-weight:900; }
.me-card .wc-actions { margin-top:14px; }
.me-card .wc-actions .b-main { background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff; }
.me-card .wc-actions .b-ghost { background:#e4eaff; color:var(--brand); }

/* ============================================================
   验证码输入行（绑定页 / 登录页共用）
   ============================================================ */
/* 验证码行：输入框按验证码实际长度定宽（6 位数字用 150px 足够），
   剩余宽度给按钮 —— 比"输入框撑满 + 按钮贴边"更协调。 */
.code-row { display:flex; gap:9px; align-items:stretch; }
.code-row input { flex:0 0 150px; min-width:0; }
.sheet-panel .code-btn { flex:1; }
.code-btn {
  flex:none; border:0; border-radius:12px; padding:0 12px; min-width:92px;
  background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff;
  font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  font-family:inherit;
}
.code-btn:disabled { background:#b4b7e7; cursor:not-allowed; }

/* ============================================================
   文件选择控件（人脸照上传）—— 隐藏原生丑陋的 input，用自绘按钮
   ============================================================ */
.file-pick {
  display:flex; align-items:center; gap:12px;
  border:1.5px dashed var(--brand-bd); border-radius:var(--r-md);
  background:#e4eaff; padding:16px; cursor:pointer; transition:all .15s;
}
.file-pick:active { background:#dbe4fd; border-color:var(--brand); }
.file-pick .fp-ic {
  width:44px; height:44px; border-radius:13px; flex:none; color:#fff;
  background:linear-gradient(135deg,var(--brand2),var(--brand));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(59,91,219,.24);
}
.file-pick .fp-body { min-width:0; }
.file-pick .fp-title { display:block; font-size:14.5px; font-weight:700; color:var(--text); }
.file-pick .fp-sub { display:block; font-size:12px; color:var(--text2); margin-top:2px; }
.file-pick input[type="file"] { display:none; }
.file-pick.has-file { border-style:solid; border-color:var(--brand); background:#d6eff4; }

/* 人脸照预览 */
.face-preview {
  display:block; width:100%; max-width:220px; margin:4px auto 0;
  border-radius:var(--r-md); box-shadow:0 8px 24px rgba(30,50,120,.16);
}
/* .empty 已由 theme.css 统一定义 */

/* 账户资料 / 关于页 · 联系方式行（含操作按钮） */
.contact-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px solid #eef2fe;
}
.contact-row:last-of-type { border-bottom:0; padding-bottom:2px; }
.contact-row .cr-body { flex:1; min-width:0; }
.contact-row .cr-label {
  display:block; font-size:12px; color:var(--text3); line-height:1.5;
}
.contact-row .cr-value {
  display:block; font-size:14px; font-weight:800; color:var(--text);
  margin-top:3px; line-height:1.6; word-break:break-all; letter-spacing:.2px;
}
.contact-row .cr-value.empty { color:var(--text3); font-weight:400; }
.contact-row .cr-edit {
  flex:none; display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; font-weight:700; color:var(--brand);
  background:#e4eaff; border:0; padding:8px 14px; border-radius:999px;
  cursor:pointer; font-family:inherit;
}
.contact-row .cr-edit:active { opacity:.8; }
.contact-row .cr-edit:disabled { background:#d5efee; color:var(--text3); cursor:not-allowed; }

/* 关于页 · 联系我们 与面板标题的层级统一 */
.about-contact .panel-title { font-size:15px; font-weight:900; }

/* ============================================================
   关于我们 / 协议文档
   ============================================================ */
.about-hero {
  margin:6px 16px 14px; padding:26px 20px 24px; border-radius:var(--r-lg);
  text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(circle, rgba(59,91,219,.055) 1.1px, transparent 1.1px) 0 0 / 14px 14px,
    linear-gradient(180deg, #ffffff, #f8faff);
  box-shadow:0 14px 36px rgba(30,50,120,.14), 0 3px 10px rgba(30,50,120,.07);
  animation:cardDrop .7s cubic-bezier(.22,1.4,.36,1) both;
}
.about-hero::after {
  content:''; position:absolute; left:50%; top:-64px; transform:translateX(-50%);
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(59,91,219,.12), transparent 70%);
}
.about-hero > * { position:relative; z-index:1; }
.about-hero .about-logo {
  width:72px; height:72px; border-radius:20px; display:block; margin:0 auto 12px;
  box-shadow:0 8px 22px rgba(30,50,120,.18); background:#e8f0ff;
}
.about-hero .about-name { display:block; font-size:19px; font-weight:900; color:var(--text); }
.about-hero .about-tag { display:block; font-size:12.5px; color:var(--text2); margin-top:3px; }
.about-hero .about-version {
  display:inline-block; margin-top:12px; font-size:12px; font-weight:700;
  color:var(--brand); background:#e4eaff; padding:5px 14px; border-radius:999px;
}

/* 协议正文 */
.doc-tabs {
  display:flex; gap:8px; margin:6px 16px 14px;
}
.doc-tabs a {
  flex:1; text-align:center; padding:11px 0; border-radius:999px;
  font-size:13.5px; font-weight:700; color:var(--text2); background:#e4eaff;
}
.doc-tabs a.on {
  background:linear-gradient(135deg,var(--brand2),var(--brand));
  color:#fff; box-shadow:0 6px 16px rgba(59,91,219,.26);
}
.doc-intro {
  font-size:13px; color:var(--text2); line-height:1.85;
  margin:0 0 6px; padding-bottom:12px; border-bottom:1px dashed #dde4f6;
}
.doc-item { padding:14px 0; border-bottom:1px solid #eef2fe; }
.doc-item:last-child { border-bottom:0; padding-bottom:2px; }
.doc-item .di-title {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; color:var(--text); line-height:1.5;
}
.doc-item .di-no {
  width:20px; height:20px; border-radius:50%; flex:none;
  background:#e4eaff; color:var(--brand); font-size:11.5px; font-weight:900;
  display:inline-flex; align-items:center; justify-content:center;
}
.doc-item .di-body { font-size:13px; color:var(--text2); line-height:1.9; margin-top:7px; }

/* 协议页 / 关于页底部说明 */
.doc-foot, .about-foot {
  text-align:center; font-size:12px; color:var(--text3);
  line-height:1.9; margin:18px 16px 26px;
}
.about-foot span { font-size:11.5px; opacity:.85; }

/* ============================================================
   登录 / 注册页补充
   ============================================================ */
.login-title {
  font-size:17px; font-weight:900; color:var(--text);
  text-align:center; margin-bottom:16px;
}
.login-card .lbl { color:#4e558f; }

/* ============================================================
   商家端 · 摄像头扫码弹层
   ============================================================ */
.scan-modal {
  position:fixed; inset:0; z-index:180;
  background:rgba(20,10,40,.90);
  display:flex; align-items:center; justify-content:center; padding:22px;
}
.scan-modal[hidden] { display:none; }
.scan-box { width:100%; max-width:340px; text-align:center; }
.scan-box video {
  width:100%; border-radius:var(--r-lg); background:#000;
  box-shadow:0 16px 44px rgba(0,0,0,.5); aspect-ratio:1/1; object-fit:cover;
}
.scan-box .scan-tip {
  color:rgba(255,255,255,.86); font-size:13px; margin:14px 0 12px;
}
.scan-box .btn-plain { background:rgba(255,255,255,.16); color:#fff; }

/* 收款面板内的金额按钮沿用充值页样式，这里只微调间距 */
.pay-cashier .info-list { margin-top:4px; }
.pay-cashier .pc-title { font-size:14px; font-weight:800; color:var(--text2); }
.pay-cashier .amt-input { border-bottom:2px solid #dde4f6; }

/* ============================================================
   轻提示 Toast（替代原生 alert）
   ============================================================ */
.toast-host {
  position:fixed; left:50%; top:66px; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:max-content; max-width:min(88vw, 420px); pointer-events:none;
}
.toast-item {
  display:flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  color:#fff; font-size:13.5px; font-weight:700; line-height:1.5;
  box-shadow:0 10px 28px rgba(30,58,138,.28);
  opacity:0; transform:translateY(-14px) scale(.96);
  transition:opacity .24s ease, transform .24s cubic-bezier(.22,1.4,.36,1);
}
.toast-item.on { opacity:1; transform:translateY(0) scale(1); }
.toast-item .ti-ic {
  width:19px; height:19px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.28); font-size:12px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.toast-ok   { background:linear-gradient(135deg,#16b364,#16a34a); }
.toast-err  { background:linear-gradient(135deg,#ff8f5e,#f4364e); }
.toast-info { background:linear-gradient(135deg,#4f6ef7,#3b5bdb); }

/* ============================================================
   底部弹出表单（手机号 / 邮箱修改）
   ============================================================ */
.sheet {
  position:fixed; inset:0; z-index:150; display:none;
  background:rgba(28,16,56,.44);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  /* 弹窗打开时不允许页面横向滚动：此前面板用 left:50% + translateX(-50%) 居中，
     在部分机型上会产生溢出，导致整个页面可以左右拖动。 */
  overflow-x: hidden;
}
.sheet.open { display:block; }
/* 打开弹窗时锁住页面横向滚动 */
body.sheet-open { overflow-x: hidden; }
.sheet-panel {
  /* 居中方式改为 left/right + margin:auto，不再用 left:50% + translateX(-50%)。
     后者在 max-width 生效时会让面板整体右移半个身位，是页面横向溢出的元凶。 */
  position:absolute; left:0; right:0; bottom:0; margin:0 auto;
  transform: translateY(100%);
  width:100%; max-width:460px; background:#fff;
  border-radius:22px 22px 0 0;
  padding:20px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(30,58,138,.24);
  transition:transform .28s cubic-bezier(.22,1.2,.36,1);
  max-height:92vh; overflow-y:auto;
}
.sheet.open .sheet-panel { transform: translateY(0); }
.sheet-grab {
  width:40px; height:4px; border-radius:2px; background:#c7d7ed;
  margin:0 auto 14px;
}
.sheet-head {
  display:flex; align-items:center; gap:10px; margin-bottom:4px;
}
.sheet-head b { flex:1; font-size:17px; font-weight:900; color:var(--text); }
.sheet-head .sh-close {
  width:30px; height:30px; border-radius:50%; border:0; flex:none;
  background:#e4eaff; color:var(--brand); font-size:16px; line-height:1;
  cursor:pointer; font-family:inherit;
}
.sheet-sub { font-size:12.5px; color:var(--text2); margin-bottom:16px; line-height:1.7; }
.sheet-verify-tip {
  font-size:12.5px; color:var(--text2); margin:-6px 0 14px; line-height:1.7;
}
.sheet-actions { display:flex; gap:10px; margin-top:18px; }
.sheet-actions .btn-primary, .sheet-actions .btn-plain { flex:1; }

/* ============================================================
   AI 助手 · 独立对话页（重建：对齐 scard「小皙」视觉）
   ============================================================ */
.ai-page { padding-bottom: 96px; }        /* 给固定输入栏留位 */

/* 助手名片 */
/* AI 欢迎卡：原为深紫渐变大块，与全站白卡语言不一致。
   改为白卡 + 品牌蓝头像圈，信息同样清晰但不再「跳色」。 */
.ai-intro {
  display:flex; align-items:center; gap:13px;
  margin:14px 14px 0; padding:16px 18px; border-radius:18px;
  background:#fff;
  color:var(--text); box-shadow:0 4px 18px rgba(30,50,120,.06);
  position:relative; overflow:hidden;
}
/* 装饰光斑去掉：白底上会显脏 */
.ai-intro::after { display:none; }
.ai-intro > * { position:relative; z-index:1; }
.ai-intro .ai-face {
  /* 白底上需要实色底才立得住 */
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.20); display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.55);
}
.ai-intro .ai-face svg { width:26px; height:26px; }
.ai-intro .ai-name { display:block; font-size:17px; font-weight:800; color:var(--text); }
.ai-intro .ai-desc { display:block; font-size:12.5px; color:var(--text-3); margin-top:2px; }
.ai-intro .ai-body { flex:1; min-width:0; }
.ai-intro .ai-data {
  flex-shrink:0; text-align:right; font-size:11.5px; opacity:.95;
  line-height:1.35; padding-right:2px;
}
.ai-intro .ai-data b { display:block; font-size:15px; font-weight:800; color:var(--brand); }

/* 对话区 */
.ai-panel { margin:12px 14px 0; padding:0; overflow:hidden; }
.ai-panel-head {
  display:flex; align-items:center; padding:13px 16px;
  border-bottom:1px solid #e4eaff;
}
.ai-panel-head .t { flex:1; font-size:14.5px; font-weight:600; color:#4c5366; }
.ai-panel-head .act {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; font-weight:600; color:var(--brand);
  background:#eef2fe; padding:6px 12px; border-radius:10px;
}
.ai-panel-head .act svg { width:13px; height:13px; }

.ai-chat {
  padding:14px 14px 4px; max-height:52vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:11px; background:#e4eaff;
}
.ai-msg { display:flex; gap:9px; align-items:flex-start; max-width:100%; }
.ai-msg .av {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ai-msg .av svg { width:16px; height:16px; }
.ai-msg.bot .av { background:#e4eaff; color:var(--brand); }
.ai-msg.user { flex-direction:row-reverse; }
.ai-msg.user .av { background:var(--brand); color:#fff; }
.ai-msg .bubble {
  padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.72;
  word-break:break-word; max-width:calc(100% - 46px);
}
.ai-msg.bot .bubble { background:#fff; color:#141471; border:1px solid #e4eaff; border-top-left-radius:5px; }
.ai-msg.user .bubble { background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff; border-top-right-radius:5px; }
.ai-msg.bot.is-err .bubble { background:#fdecea; color:#b03024; border-color:#f5c6c0; }
.ai-msg .bubble .typing { display:inline-flex; gap:4px; align-items:center; }
.ai-msg .bubble .typing i {
  width:6px; height:6px; border-radius:50%; background:#8b8fbd;
  animation:aiBlink 1.2s infinite;
}
.ai-msg .bubble .typing i:nth-child(2) { animation-delay:.2s; }
.ai-msg .bubble .typing i:nth-child(3) { animation-delay:.4s; }
@keyframes aiBlink { 0%,60%,100% { opacity:.25 } 30% { opacity:1 } }

/* 快捷提问 */
.ai-quick { padding:4px 14px 16px; background:#e4eaff; }
.ai-quick .qt { font-size:12px; color:#91aab7; margin:6px 0 8px; }
.ai-quick .qs { display:flex; flex-wrap:wrap; gap:8px; }
.ai-quick button {
  border:1px solid #c7d7ed; background:#fff; color:#46397d;
  border-radius:20px; padding:8px 14px; font-size:12.5px; cursor:pointer;
}
.ai-quick button:active { background:#dbe4fd; border-color:var(--brand); color:var(--brand); }

/* 固定输入栏 */
.ai-inputbar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:460px; background:#fff;
  border-top:1px solid #d2e9ee; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:9px; align-items:center; z-index:45;
}
.ai-inputbar input {
  flex:1; border:1px solid #c7d7ed; border-radius:22px; padding:11px 16px;
  font-size:14.5px; outline:none; background:#e4eaff; color:#110f5f;
}
.ai-inputbar input:focus { border-color:var(--brand); background:#fff; }
.ai-inputbar .send {
  width:62px; flex-shrink:0; border:0; border-radius:22px; padding:11px 0;
  background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff;
  font-size:14.5px; font-weight:600; cursor:pointer;
}
.ai-inputbar .send:disabled { background:#b4b7e7; cursor:not-allowed; }

/* AI 页不显示底部导航，避免与固定输入栏重叠 */
body.page-ai .tabbar { display:none; }
body.page-ai .wrap { padding-bottom: 0; }

/* 表单字段标签 */
.field .lbl {
  display:block; font-size:13px; color:#4c6095; margin-bottom:5px;
  font-weight:500;
}
.panel-form-actions { margin-top:18px; }

/* 挂失按钮：危险动作用「白底 + 红字 + 淡红描边」表达，
   ---- 修正两处问题 ----
   ① 原来只有 background:var(--danger) 没有 color，
      文字继承了深色，红底暗红字对比度极低、几乎看不清；
   ② 整块大红在浅色页面里过于刺眼，与其它按钮不成体系。 */
.btn-danger {
  border-radius: 999px; padding: 13px;
  font-size: 15.5px; font-weight: 800;
  background: #fff;
  color: #d94a4a;
  border: 1.5px solid #f6cccc;
  box-shadow: 0 2px 8px rgba(217, 74, 74, .08);
}
.btn-danger:active { background: #fff5f5; transform: scale(.985); }

/* ============================================================
   商家端扩展组件（经营看板 / 趋势图 / 资料编辑 / 营业状态）
   ============================================================ */

/* 三宫格统计（与 .stat-row 默认列数一致，显式声明便于阅读） */
.stat-row.three { grid-template-columns: repeat(3,1fr); }
.stat-row i em { font-style:normal; font-weight:800; font-size:11px; margin-left:3px; }
.stat-row i em.up { color:#e0453c; }
.stat-row i em.down { color:#0a8f4d; }

/* 面板标题行：左标题 + 右操作 */
.panel-head-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.panel-more {
  display:inline-flex; align-items:center; gap:3px; flex-shrink:0;
  font-size:12.5px; font-weight:700; color:var(--brand);
  background:#d4edf1; border:0; border-radius:999px; padding:6px 12px; cursor:pointer;
}
.panel-more svg { width:12px; height:12px; }

/* 近 N 日 / 近 N 月柱状趋势 */
.trend { display:flex; align-items:flex-end; gap:6px; height:132px; padding:4px 2px 0; }
.trend-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.trend-val { font-size:10.5px; font-weight:700; color:var(--brand); height:14px; line-height:14px; }
.trend-track {
  flex:1; width:100%; display:flex; align-items:flex-end;
  background:#d5eff2; border-radius:7px; overflow:hidden;
}
.trend-track i {
  display:block; width:100%; border-radius:7px;
  background:linear-gradient(180deg,var(--brand2),var(--brand));
  transition:height .35s ease;
}
.trend-lb { font-size:10.5px; color:#8599a6; margin-top:6px; white-space:nowrap; }

/* 表单双列/三列字段行 */
.field-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.field-row .field { margin-bottom:10px; }
.field-row .field input, .field-row .field select { font-size:14px; padding:10px 12px; }
@media (max-width:420px) {
  .field-row { grid-template-columns:1fr 1fr; }
  .field-row .field:first-child { grid-column:1 / -1; }
}

/* 品牌行「营业状态」芯片 */
.brand-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; color:#8599a6;
  background:#f1f3f7; padding:7px 12px; border-radius:999px;
  text-decoration:none; transition:.15s;
}
.brand-chip i { font-style:normal; }
.brand-chip svg { width:13px; height:13px; }
.brand-chip.on { color:#0a8f4d; background:#e8f7ee; }

/* 登录页说明块（深色渐变背景上的半透明卡片） */
.login-tips {
  margin:22px 20px 0; padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.14); color:#fff; font-size:12.5px; line-height:1.85;
}
.login-tips b { display:block; margin-bottom:4px; font-size:13.5px; }
.login-tips ul { margin:0; padding-left:18px; }
.login-tips li { list-style:disc; }

/* 无 details 的简单流水行（最近收款 / 退款记录等） */
.txn-item.simple { display:flex; align-items:center; gap:12px; }
.txn-item.simple .txn-main { padding:12px 2px; }
.txn-item.simple .txn-side { padding:12px 2px; }

/* 商家端汇总卡：三列等宽不换行 */
.bill-sum { flex-wrap:wrap; }
.bill-sum > span { white-space:nowrap; }

/* ============================================================
   商家端 · 收款页聚焦布局（v32）
   ============================================================ */

/* 收款内容整体居中，聚焦操作 */
.pay-focus { max-width: 460px; margin: 0 auto; }

/* 顶部极简数字条 */
.cash-strip {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--brand2, #4f6ef7), var(--brand, #3b5bdb));
  color: #fff; border-radius: 16px; padding: 13px 16px; margin: 10px 0 14px;
  box-shadow: 0 8px 22px rgba(59,91,219,.22);
}
.cash-strip > div { flex: 1; min-width: 0; line-height: 1.35; }
.cash-strip span { display: block; font-size: 11.5px; opacity: .85; }
.cash-strip b { display: block; font-size: 19px; font-weight: 900; letter-spacing: .3px; }
.cash-strip i { display: block; font-style: normal; font-size: 11px; opacity: .78; }
.cash-strip > a {
  flex: none; font-size: 12px; font-weight: 800; color: #fff;
  background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 999px;
}

/* 金额输入提示 */
.amt-tip { font-size: 12.5px; color: var(--text3, #9ba1cf); text-align: center; margin-bottom: 8px; font-weight: 700; }
.amt-label { font-size: 11.5px; color: var(--text3, #9ba1cf); text-align: center; margin: 10px 0 7px; }

/* 折叠小功能（券核销） */
.mini-fold {
  background: #fff; border: 1.5px solid var(--border, #e8ecfb); border-radius: 16px;
  padding: 4px 14px; margin-top: 14px;
}
.mini-fold > summary {
  list-style: none; cursor: pointer; padding: 13px 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--text, #1a1a2e);
}
.mini-fold > summary::-webkit-details-marker { display: none; }
.mini-fold > summary::after { content: '▾'; margin-left: auto; color: var(--text3, #9ba1cf); font-size: 12px; }
.mini-fold[open] > summary::after { content: '▴'; }
.mini-fold > summary .minor { font-weight: 500; font-size: 11.5px; }
.mini-fold[open] { padding-bottom: 14px; }

/* 流水页经营概览区块 */
.biz-overview { margin-bottom: 4px; }
.biz-overview .id-card { margin-top: 0; }

/* 结算 / 资料表单的两列 */
.field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .field-row2 { grid-template-columns: 1fr; } }

/* 验证码按钮（手机号 / 邮箱 修改） */
.vf-btn {
  margin-top: 8px; padding: 8px 14px; border: 0; border-radius: 10px;
  background: var(--brand-l, #e4eaff); color: var(--brand, #3b5bdb);
  font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.vf-btn:disabled { opacity: .55; cursor: default; }
.vf-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--text3, #9ba1cf); }
.vf-code {
  margin-top: 8px; width: 100%; padding: 11px 13px; font-size: 14px;
  border: 1.5px solid var(--border, #e8ecfb); border-radius: 10px; background: #fbfaff;
}

/* ============================================================
   登录页（对齐蚌小e商城视觉：分段 Tab + 点阵卡片 + 渐变通栏按钮）
   前缀 lg- 避免与业务类名冲突
   ============================================================ */
.lg-wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 26px 18px 44px; }

.lg-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.lg-badge {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, #9a5cf6, #3b5bdb);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 6px 16px rgba(59,91,219,.28);
}
.lg-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-brand b { font-size: 21px; font-weight: 900; letter-spacing: 1px; color: #0c0f50; }
.lg-brand i {
  font-style: normal; font-weight: 900; font-size: 12px; color: #fff;
  background: linear-gradient(135deg, #ff6a4d, #f4364e);
  padding: 3px 8px; border-radius: 999px; margin-left: 2px;
}

.lg-hero { margin-bottom: 20px; }
.lg-hero h1 { font-size: 22px; font-weight: 900; line-height: 1.35; color: #1a1a2e; margin-bottom: 4px; }
.lg-hero p { font-size: 13px; color: #858da1; }

.lg-card {
  background:
    radial-gradient(circle, rgba(59,91,219,.06) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fff, #f8faff);
  border-radius: 22px; padding: 22px 20px 24px;
  box-shadow: 0 10px 34px rgba(30,50,120,.10);
  border: 1.5px solid rgba(232,228,245,.9);
}

/* 分段 Tab */
.lg-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: #e8efff; border-radius: 14px; padding: 5px;
}
.lg-tab {
  flex: 1; text-align: center; font-size: 14px; font-weight: 700;
  color: #858da1; padding: 11px 12px; cursor: pointer;
  border-radius: 10px; transition: .18s; user-select: none;
}
.lg-tab.active {
  color: #fff; background: linear-gradient(135deg, #4f6ef7, #3b5bdb);
  box-shadow: 0 6px 14px rgba(59,91,219,.30);
}

.lg-field { margin-bottom: 15px; }
.lg-field > label {
  display: block; font-size: 13px; font-weight: 700; color: #3c3b72; margin-bottom: 7px;
}
.lg-field input {
  width: 100%; padding: 13px 14px; font-size: 15px; color: #0c0f50;
  background: #fff; border: 1.5px solid #cadfeb; border-radius: 12px;
  outline: none; transition: .18s;
}
.lg-field input:focus { border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(142,92,246,.14); }
.lg-field input::placeholder { color: #a4aec3; }
.lg-row { display: flex; gap: 10px; align-items: stretch; }
.lg-row input { flex: 1; min-width: 0; }
.lg-code-btn {
  flex: none; padding: 0 16px; font-size: 13px; font-weight: 800; color: #3b5bdb;
  background: #e4eaff; border: 1.5px solid #c6d7f0; border-radius: 12px; cursor: pointer;
  white-space: nowrap; transition: .18s;
}
.lg-code-btn:disabled { opacity: .55; cursor: default; }

.lg-tip { font-size: 12px; color: #9196b4; margin: -6px 0 14px; }
.lg-row-between {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 16px; font-size: 13px;
}
.lg-row-between a { color: #3b5bdb; font-weight: 700; text-decoration: none; }
.lg-check { display: flex; align-items: center; gap: 6px; color: #4e558f; cursor: pointer; }
.lg-check input { width: 15px; height: 15px; accent-color: #3b5bdb; }

.lg-submit {
  width: 100%; padding: 14px; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #4f6ef7, #3b5bdb); border: 0; border-radius: 14px;
  cursor: pointer; box-shadow: 0 8px 20px rgba(59,91,219,.30); transition: .18s;
}
.lg-submit:active { transform: scale(.985); }
.lg-submit:disabled { opacity: .6; }

.lg-alt {
  display: block; text-align: center; margin-top: 16px; padding: 12px;
  background: #fff; border: 1.5px solid #e8ecfb; border-radius: 14px;
  font-size: 14px; font-weight: 800; color: #3b5bdb; text-decoration: none;
}
.lg-foot { text-align: center; margin-top: 18px; font-size: 12px; color: #9196b4; line-height: 1.9; }
.lg-msg {
  padding: 11px 14px; border-radius: 12px; font-size: 13px; margin-bottom: 14px; line-height: 1.6;
}
.lg-msg.err { background: #fdecec; color: #c62828; }
.lg-msg.ok { background: #e8f6ee; color: #1b7a44; }
.lg-mode { display: none; }
.lg-mode.on { display: block; }

/* ============================================================
   登录页（对齐蚌小e商城视觉：分段 Tab + 点阵卡片 + 渐变通栏按钮）
   前缀 lg- 避免与业务类名冲突
   ============================================================ */
.lg-wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 26px 18px 44px; }

.lg-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.lg-badge {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, #9a5cf6, #3b5bdb);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 6px 16px rgba(59,91,219,.28);
}
.lg-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-brand b { font-size: 21px; font-weight: 900; letter-spacing: 1px; color: #0c0f50; }
.lg-brand i {
  font-style: normal; font-weight: 900; font-size: 12px; color: #fff;
  background: linear-gradient(135deg, #ff6a4d, #f4364e);
  padding: 3px 8px; border-radius: 999px; margin-left: 2px;
}

.lg-hero { margin-bottom: 20px; }
.lg-hero h1 { font-size: 22px; font-weight: 900; line-height: 1.35; color: #1a1a2e; margin-bottom: 4px; }
.lg-hero p { font-size: 13px; color: #858da1; }

.lg-card {
  background:
    radial-gradient(circle, rgba(59,91,219,.06) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fff, #f8faff);
  border-radius: 22px; padding: 22px 20px 24px;
  box-shadow: 0 10px 34px rgba(30,50,120,.10);
  border: 1.5px solid rgba(232,228,245,.9);
}

/* 分段 Tab */
.lg-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: #e8efff; border-radius: 14px; padding: 5px;
}
.lg-tab {
  flex: 1; text-align: center; font-size: 14px; font-weight: 700;
  color: #858da1; padding: 11px 12px; cursor: pointer;
  border-radius: 10px; transition: .18s; user-select: none;
}
.lg-tab.active {
  color: #fff; background: linear-gradient(135deg, #4f6ef7, #3b5bdb);
  box-shadow: 0 6px 14px rgba(59,91,219,.30);
}

.lg-field { margin-bottom: 15px; }
.lg-field > label {
  display: block; font-size: 13px; font-weight: 700; color: #3c3b72; margin-bottom: 7px;
}
.lg-field input {
  width: 100%; padding: 13px 14px; font-size: 15px; color: #0c0f50;
  background: #fff; border: 1.5px solid #cadfeb; border-radius: 12px;
  outline: none; transition: .18s;
}
.lg-field input:focus { border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(142,92,246,.14); }
.lg-field input::placeholder { color: #a4aec3; }
.lg-row { display: flex; gap: 10px; align-items: stretch; }
.lg-row input { flex: 1; min-width: 0; }
.lg-code-btn {
  flex: none; padding: 0 16px; font-size: 13px; font-weight: 800; color: #3b5bdb;
  background: #e4eaff; border: 1.5px solid #c6d7f0; border-radius: 12px; cursor: pointer;
  white-space: nowrap; transition: .18s;
}
.lg-code-btn:disabled { opacity: .55; cursor: default; }

.lg-tip { font-size: 12px; color: #9196b4; margin: -6px 0 14px; }
.lg-row-between {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 16px; font-size: 13px;
}
.lg-row-between a { color: #3b5bdb; font-weight: 700; text-decoration: none; }
.lg-check { display: flex; align-items: center; gap: 6px; color: #4e558f; cursor: pointer; }
.lg-check input { width: 15px; height: 15px; accent-color: #3b5bdb; }

.lg-submit {
  width: 100%; padding: 14px; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #4f6ef7, #3b5bdb); border: 0; border-radius: 14px;
  cursor: pointer; box-shadow: 0 8px 20px rgba(59,91,219,.30); transition: .18s;
}
.lg-submit:active { transform: scale(.985); }
.lg-submit:disabled { opacity: .6; }

.lg-alt {
  display: block; text-align: center; margin-top: 16px; padding: 12px;
  background: #fff; border: 1.5px solid #e8ecfb; border-radius: 14px;
  font-size: 14px; font-weight: 800; color: #3b5bdb; text-decoration: none;
}
.lg-foot { text-align: center; margin-top: 18px; font-size: 12px; color: #9196b4; line-height: 1.9; }
.lg-msg {
  padding: 11px 14px; border-radius: 12px; font-size: 13px; margin-bottom: 14px; line-height: 1.6;
}
.lg-msg.err { background: #fdecec; color: #c62828; }
.lg-msg.ok { background: #e8f6ee; color: #1b7a44; }
.lg-mode { display: none; }
.lg-mode.on { display: block; }

/* 页面内的一行次级入口（替代占一整块的大卡片） */
.inline-link {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 16px 4px; padding: 9px 12px;
  background: #fff; border: 1.5px solid #e8ecfb; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: #3b5bdb; text-decoration: none;
}
.inline-link:active { background: #d7f1f4; }

/* AI 一键查数按钮（直取数据，不过模型） */
.ai-quick .qs button.direct {
  background: #e8efff; color: #4f6ef7; border-color: #c3d2f4; font-weight: 700;
}
.ai-quick .qs button.direct:active { background: #c9ddf4; }

/* ============================================================
   商家端 · 收银台（v36 重构：对标云闪付 / 支付宝商家收钱）
   顶部只讲今日收款；中间大金额键盘；扫枪扫入即识别；
   识别成功后原地切换为确认收款；券核销为页内 tab。
   ============================================================ */
.till { max-width: 460px; margin: 0 auto; }

/* ---------- 今日收款（绝对主角） + 摄像头（右上角辅助小挂件） ---------- */
.till-top {
  position: relative;
  background: linear-gradient(135deg, var(--brand2, #4f6ef7), var(--brand, #3b5bdb));
  color: #fff; border-radius: 18px; padding: 16px 90px 16px 18px; margin: 10px 16px 4px;
  box-shadow: 0 10px 26px rgba(59,91,219,.24);
}
.till-top .tt-main { text-align: center; }
.till-top .tt-label { display: block; font-size: 12.5px; opacity: .88; font-weight: 700; }
.till-top .tt-amount {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  margin: 3px 0 4px; line-height: 1.1;
}
.till-top .tt-amount i { font-style: normal; font-size: 22px; font-weight: 800; opacity: .95; }
.till-top .tt-amount b { font-size: 42px; font-weight: 900; letter-spacing: -.5px; }
.till-top .tt-sub { display: block; font-size: 12px; opacity: .85; }
.till-top .tt-sub em { font-style: normal; margin: 0 7px; }
.till-top .tt-sub em + em::before { content: '\00b7'; margin-right: 7px; opacity: .7; }

/* 摄像头：右上角辅助位，尺寸够识别又不喧宾夺主 */
.till-top .cam-mini {
  position: absolute; top: 14px; right: 14px;
  width: 68px; height: 68px; border-radius: 16px;
  overflow: hidden; background: rgba(0,0,0,.3);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.3);
}
.till-top .cam-mini[hidden] { display: none; }
.till-top .cam-mini video { width: 100%; height: 100%; object-fit: cover; display: block; }
.till-top .cam-mini .cm-frame {
  position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border: 1.5px solid rgba(255,255,255,.95);
  border-radius: 5px;
}
.till-top .cam-mini .cm-close {
  position: absolute; top: 0; right: 0; width: 19px; height: 19px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; cursor: pointer; line-height: 1;
}

/* ---------- 页内 tab ---------- */
.till-tabs { margin: 12px 16px 0; border-bottom: 1px solid var(--border); }
.till-tabs .tab { font-size: 15px; padding: 12px 2px; }

/* ---------- 金额显示区 ---------- */
.till-display {
  position: relative; background: #fff; border-radius: 18px 18px 0 0;
  margin: 12px 16px 0; padding: 20px 18px 16px; text-align: right;
  border-bottom: 2px solid var(--brand);
}
.till-display .td-yen { font-size: 24px; font-weight: 800; color: var(--text); vertical-align: baseline; }
.till-display .td-num {
  font-size: 48px; font-weight: 900; color: var(--text); letter-spacing: -1px;
  line-height: 1.05; margin-left: 2px; word-break: break-all;
}
.till-display .td-hint {
  display: block; font-size: 12.5px; color: var(--text3); margin-top: 4px; min-height: 18px;
}

/* ---------- 数字键盘 ---------- */
.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border-radius: 0 0 18px 18px; overflow: hidden;
  margin: 0 16px; box-shadow: 0 8px 22px rgba(30,50,120,.08);
}
.keypad .kp {
  border: 0; background: #fff; color: var(--text);
  font-size: 19px; font-weight: 700; padding: 13px 0; cursor: pointer;
  font-family: inherit; transition: background .1s;
}
.keypad .kp:active { background: #d2eaf3; }
.keypad .kp-fn { font-size: 14px; font-weight: 800; color: var(--text2); background: #e4eaff; }

/* ---------- 页内 pane 切换（无刷新） ---------- */
.till-pane[hidden] { display: none; }
.till-tabs button.tab { background: transparent; border: 0; font-family: inherit; }

/* ---------- 付款码输入 ---------- */
.till-code { margin: 12px 16px 0; }
.till-code .tk-input, .till-voucher .tv-input {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--border); border-radius: 14px; padding: 5px 6px 5px 12px;
}
.till-code .tk-ico, .till-voucher .tk-ico { color: var(--text3); flex: none; display: flex; }
.till-code .tk-ico svg, .till-voucher .tk-ico svg { width: 18px; height: 18px; }
.till-code .tk-input input, .till-voucher .tv-input input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 15px; padding: 9px 0; color: var(--text);
}
.till-code .tk-input button {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: var(--brand-l, #e4eaff); color: var(--brand); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.till-code .tk-input button svg { width: 19px; height: 19px; }
.till-code .tk-tip { font-size: 12px; color: var(--text3); margin: 7px 2px 0; line-height: 1.5; }

/* 付款码输入框：三个按钮（学号/摄像头）并排 */
.till-code .tk-input { gap: 6px; }
.till-code .tk-input button {
  width: 34px; height: 34px; border-radius: 9px; padding: 0;
}
.till-code .tk-input button svg { width: 17px; height: 17px; }

/* ---------- 识别结果卡 / 成功卡 ---------- */
.till-card, .till-done {
  background: #fff; border-radius: 18px; margin: 14px 16px 0; padding: 16px 18px 18px;
  box-shadow: 0 8px 24px rgba(30,50,120,.10);
}
.till-card[hidden], .till-done[hidden] { display: none; }

/* 学生信息行 */
.tc-user { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.tc-ava {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand2), var(--brand)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.tc-meta { flex: 1; min-width: 0; }
.tc-meta b { display: block; font-size: 12.5px; color: var(--text2); font-weight: 600; }
.tc-meta i { display: block; font-style: normal; font-size: 13.5px; color: var(--text); font-weight: 700; margin-top: 1px; }
.tc-bal { flex: none; text-align: right; }
.tc-bal em { display: block; font-style: normal; font-size: 11.5px; color: var(--text3); }
.tc-bal b { display: block; font-size: 15px; color: var(--text); font-weight: 800; }

/* 应收金额 */
.tc-amount { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0 4px; }
.tc-amount span { font-size: 14px; color: var(--text2); font-weight: 700; }
.tc-amount b { font-size: 30px; font-weight: 900; color: var(--brand); }
.tc-amount b i { font-style: normal; font-size: 20px; }

/* 表单行 */
.tc-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tc-row[hidden] { display: none; }
.tc-row label { flex: none; width: 62px; font-size: 13px; color: var(--text2); font-weight: 700; }
.tc-row input, .tc-row select {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
}
.tc-row input:focus, .tc-row select:focus { outline: none; border-color: var(--brand); }

/* 键值列表 */
.tc-list { list-style: none; margin-top: 12px; }
.tc-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid #d5eff0; font-size: 13.5px;
}
.tc-list li:last-child { border-bottom: 0; }
.tc-list span { color: var(--text3); flex: none; }
.tc-list b { color: var(--text); font-weight: 600; text-align: right; word-break: break-all; }

/* 主按钮 */
.tc-ok {
  display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px;
  margin-top: 16px; background: linear-gradient(135deg, var(--brand2), var(--brand));
  color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 20px rgba(59,91,219,.28);
}
.tc-ok:disabled { opacity: .6; cursor: not-allowed; }
.tc-cancel {
  display: block; width: 100%; border: 0; background: transparent;
  color: var(--text3); font-size: 13.5px; margin-top: 10px; cursor: pointer; font-family: inherit;
}

/* 收款成功 */
.till-done { text-align: center; }
.till-done .td-check { color: var(--success, #16a34a); line-height: 1; }
.till-done .td-check svg { width: 40px; height: 40px; }
.till-done .td-money { margin-top: 10px; font-size: 20px; color: var(--text); font-weight: 800; }
.till-done .td-money b { font-size: 40px; font-weight: 900; letter-spacing: -1px; }
.till-done .td-msg { font-size: 14px; color: var(--success, #16a34a); font-weight: 700; margin-top: 2px; }
.till-done .tc-list { text-align: left; }

/* ---------- 券核销 ---------- */
.till-voucher .tv-input { margin: 12px 16px 0; }
.till-voucher .tv-input button {
  flex: none; border: 0; border-radius: 10px; padding: 9px 20px;
  background: linear-gradient(135deg, var(--brand2), var(--brand)); color: #fff;
  font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.till-voucher .tv-input button:disabled { opacity: .6; }
.till-voucher .tc-name { font-size: 17px; font-weight: 800; color: var(--text); }
.till-voucher .tc-desc { font-size: 13px; color: var(--text2); margin-top: 3px; }
.till-tip { font-size: 12.5px; color: var(--text3); margin: 12px 18px 0; line-height: 1.6; }
.till-link { text-align: center; margin: 12px 0 0; }
.till-link a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--brand); }
.till-link a svg { width: 13px; height: 13px; }

/* ============================================================
   商家端 · 店铺资料独立页 / 设置页（v36）
   ============================================================ */
.shop-card {
  background: linear-gradient(135deg, var(--brand2, #4f6ef7), var(--brand, #3b5bdb));
  color: #fff; border-radius: 18px; padding: 20px 18px 18px; margin: 0 16px 14px;
  box-shadow: 0 10px 26px rgba(59,91,219,.22);
}
.shop-card .sc-name { display: block; font-size: 21px; font-weight: 900; }
.shop-card .sc-no {
  display: inline-block; margin-top: 7px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.20); padding: 4px 11px; border-radius: 999px;
}
.shop-card .sc-tag {
  display: inline-block; margin-left: 7px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.20); padding: 4px 11px; border-radius: 999px;
}
.shop-card .sc-row {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.22);
  font-size: 13.5px;
}
.shop-card .sc-row span { opacity: .85; flex: none; }
.shop-card .sc-row b { font-weight: 800; text-align: right; word-break: break-all; }

.info-rows { list-style: none; }
.info-rows li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid #d2ebef;
}
.info-rows li:last-child { border-bottom: 0; }
.info-rows .k { flex: none; font-size: 13.5px; color: var(--text3); }
.info-rows .v { flex: 1; text-align: right; font-size: 14px; color: var(--text); font-weight: 600; word-break: break-all; }
.info-rows .v.muted { color: var(--text3); font-weight: 400; }

.set-block { background: #fff; border-radius: 18px; margin: 0 16px 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(30,50,120,.07); }
.set-block > .sb-head { display: flex; align-items: center; gap: 9px; padding: 15px 18px 0; }
.set-block > .sb-head .sb-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--brand2), var(--brand)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.set-block > .sb-head .sb-ico svg { width: 17px; height: 17px; }
.set-block > .sb-head b { font-size: 15.5px; font-weight: 800; color: var(--text); }
.set-block > .sb-body { padding: 12px 18px 18px; }

.pos-secret {
  display: flex; align-items: center; gap: 8px; background: #d7f2f3;
  border: 1.5px dashed #c3d4ed; border-radius: 12px; padding: 11px 12px;
}
.pos-secret code {
  flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; color: #3c3084; word-break: break-all; line-height: 1.5;
}
.pos-secret button {
  flex: none; border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer;
  background: #fff; color: var(--brand); font-size: 12.5px; font-weight: 800;
  box-shadow: 0 1px 4px rgba(30,50,120,.10); font-family: inherit;
}
.pos-doc {
  background: #141428; color: #bfdbe7; border-radius: 12px; padding: 12px 13px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  overflow: auto; white-space: pre; line-height: 1.75; margin-top: 8px;
}

/* POS 作业步骤 */
.pos-steps { margin: 6px 0 0 18px; }
.pos-steps li { font-size: 13px; color: #4c5366; line-height: 1.75; margin-bottom: 2px; }
.pos-steps li b, .pos-steps li code {
  color: var(--brand); font-weight: 800;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
}

/* ============================================================
   提现比例快捷按钮（v37）
   ============================================================ */
.wd-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.wd-quick .wq {
  border: 1.5px solid var(--brand-bd, rgba(59,91,219,.25)); background: #fff;
  color: var(--brand); border-radius: 10px; padding: 9px 0;
  font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.wd-quick .wq:active { background: var(--brand-l, #e4eaff); }

/* ============================================================
   经营页紧凑筛选条（v36）
   ============================================================ */
.flow-filter {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; margin: 0 16px 12px; padding: 7px 8px 7px 12px;
  box-shadow: 0 3px 12px rgba(30,50,120,.05);
}
.flow-filter .ff-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 14px; color: var(--text); padding: 5px 0;
}
.flow-filter .ff-btn {
  flex: none; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; font-family: inherit;
}
.flow-filter .ff-more {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  border: 0; border-radius: 8px; padding: 7px 11px; cursor: pointer;
  background: #e4eaff; color: var(--text2); font-size: 12.5px; font-weight: 700; font-family: inherit;
  text-decoration: none;
}
.flow-filter .ff-more.on { background: var(--brand-l, #e4eaff); color: var(--brand); }
.flow-filter .ff-more svg { width: 12px; height: 12px; }
.flow-filter .ff-ico { padding: 7px 10px; position: relative; }
.flow-filter .ff-ico svg { width: 14px; height: 14px; }
.flow-filter .ff-ico .ff-dot { position: absolute; top: 4px; right: 4px; }
.flow-filter .ff-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }
.flow-extra {
  background: #fff; border-radius: 14px; margin: 0 16px 12px; padding: 12px 14px;
  box-shadow: 0 3px 12px rgba(30,50,120,.05);
}
.flow-extra .fe-title {
  font-size: 12px; color: var(--text3); font-weight: 800; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: space-between;
}
.flow-extra .fe-title button {
  border: 0; background: transparent; color: var(--brand);
  font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.flow-extra .field { margin-bottom: 9px; }
.flow-extra .field:last-child { margin-bottom: 0; }
.flow-extra .field .lbl { font-size: 12px; }
.flow-extra .field input, .flow-extra .field select { font-size: 13.5px; padding: 9px 11px; }

.flow-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 16px 12px; }
.flow-chips .fc {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-l, #e4eaff); color: var(--brand);
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}
.flow-chips .fc a { color: var(--text3); font-weight: 800; }

/* ============================================================
   优惠券页紧凑排版（v36）
   ============================================================ */
.cpn-form .panel { padding: 15px 16px; }
.cpn-form .field { margin-bottom: 11px; }
.cpn-form .field:last-child { margin-bottom: 0; }
.cpn-form .field .lbl { font-size: 12.5px; margin-bottom: 5px; }
.cpn-form .field input, .cpn-form .field select,
.cpn-form .field textarea {
  font-size: 14px; padding: 9px 11px;
}
.cpn-form .field-row input, .cpn-form .field-row select { font-size: 13.5px; padding: 9px 10px; }
.cpn-form .btn-primary { padding: 11px; font-size: 15px; }
.cpn-form .panel-title { font-size: 15px; }
.cpn-list .txn-item b { font-size: 14.5px; }
.cpn-list .txn-main .minor { font-size: 12px; }
.cpn-list .badge { font-size: 11.5px; padding: 2px 9px; }
.cpn-list .btn-mini { font-size: 12px; padding: 5px 11px; }

/* ================= 统一身份认证（校园卡各端） ================= */
/* 一级 Tab 中的统一认证项：与本地方式平级，不折叠、不默认选中 */
.lg-tab-eh {
    position: relative;
}
.lg-tab-eh::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 18px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: #4f6ef7;
    opacity: .55;
}

/* 已在大厅登录时的一键进入区块 */
.lg-eh-quick {
    margin-bottom: 4px;
}
.lg-eh-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #c0d3e8;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-l), var(--surface-3));
}
.lg-eh-t {
    font-size: 13px;
    color: #1e3a8a;
}
.lg-eh-n {
    font-size: 15px;
    font-weight: 600;
    color: #120f73;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lg-eh-n i {
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    padding: 2px 7px;
    border-radius: 10px;
    color: #fff;
    background: #4f6ef7;
}

/* 分隔提示 */
.lg-sep {
    position: relative;
    margin: 18px 0 14px;
    text-align: center;
}
.lg-sep::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #cae1e8;
}
.lg-sep span {
    position: relative;
    padding: 0 10px;
    font-size: 12px;
    color: #9197b4;
    background: #fff;
}

/* 统一认证二级 Tab */
.lg-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 10px;
    background: #d5eff0;
}
.lg-subtab {
    flex: 1;
    text-align: center;
    padding: 7px 4px;
    border-radius: 8px;
    font-size: 13px;
    color: #3b5bdb;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.lg-subtab.on {
    background: #fff;
    color: #1e3a8a;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(80, 70, 150, .12);
}

/* 扫码容器 */
.qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px dashed #bdcfe1;
    border-radius: 10px;
    background: #fbfaff;
    text-align: center;
    font-size: 13px;
    color: #8689a8;
}
.qr-tip {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    text-align: center;
    letter-spacing: .2px;
}

/* 付款码区纵向节奏：二维码 → 秒数 → 余额 → 点击刷新
   秒数紧跟二维码（说明这个码还剩多久），刷新放最底部作为动作入口 */
.qr-panel .qr-countdown {
  display: block; text-align: center;
  font-size: 12px; color: var(--text-4);
  margin: 9px 0 0; min-height: 16px;
  letter-spacing: .3px; font-variant-numeric: tabular-nums;
}
.qr-panel .balance-line { margin-top: 11px; }

/* 刷新按钮：底部胶囊，一眼可见但不抢余额的位置 */
.qr-panel .refresh-line {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: fit-content; margin: 15px auto 0;
  font-size: 12.5px; font-weight: 700; color: var(--brand);
  background: var(--brand-l); padding: 7px 16px; border-radius: 999px;
  text-decoration: none; line-height: 1;
}
.qr-panel .refresh-line:active { opacity: .65; }
.qr-panel .refresh-line .spin { display: inline-flex; }

/* 卡头右侧的状态：小圆点 + 文字，替代原来那排彩色药丸 */
.id-card .id-state {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #12a06a;
  background: #e9f9f0; padding: 3px 10px; border-radius: 999px;
}
.id-card .id-state i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #12a06a; display: block;
}
.id-card .id-state.off { color: #c2410c; background: #fff2e8; }
.id-card .id-state.off i { background: #c2410c; }

/* 月份栏右侧：收据/发票入口 + 钱包图标 */
.month-bar .mb-right {
  display: flex; align-items: center; gap: 9px; margin-left: auto;
}
.month-bar .inv-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; color: var(--brand);
  background: var(--brand-l); padding: 5px 11px; border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap;
}
.month-bar .inv-link svg { width: 14px; height: 14px; flex: none; }
.month-bar .inv-link:active { opacity: .7; }

/* ============================================================
   消费限额页（student/limit.php）
   ============================================================ */
.limit-overview {
  margin: 6px 16px 14px; padding: 18px;
  background: linear-gradient(180deg, #ffffff, #f0f6ff);
  border-radius: 18px; box-shadow: 0 6px 20px rgba(30, 50, 120, .08);
}
.limit-overview .lo-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.limit-overview .lo-t { font-size: 13px; color: var(--text-3); font-weight: 600; }
.limit-overview .lo-amount {
  font-size: 27px; font-weight: 900; color: var(--brand);
  letter-spacing: -.5px; font-variant-numeric: tabular-nums;
}
.limit-overview .lo-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--brand-l); margin: 13px 0 9px;
}
.limit-overview .lo-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--grad-brand); transition: width .3s var(--ease);
}
.limit-overview .lo-foot {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--text-3);
}
.limit-overview .lo-foot b { color: var(--text); font-weight: 800; }
.limit-overview .lo-free { color: var(--text-4); }

.limit-form { margin: 0 14px; }
.limit-form .lf-block { margin-bottom: 22px; }
.limit-form .lf-block:last-of-type { margin-bottom: 8px; }
.limit-form .lf-title { font-size: 15px; font-weight: 800; color: var(--text); }
.limit-form .lf-desc { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.6; }

.limit-form .lf-input {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 12px; padding: 11px 14px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: 14px; transition: border-color .16s, background .16s, box-shadow .16s;
}
.limit-form .lf-input:focus-within {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px rgba(59, 91, 219, .10);
}
.limit-form .lf-cur { font-size: 16px; font-weight: 800; color: var(--brand); }
.limit-form .lf-input input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 24px; font-weight: 900; color: var(--text);
  font-variant-numeric: tabular-nums; font-family: inherit;
}
.limit-form .lf-input input::-webkit-outer-spin-button,
.limit-form .lf-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.limit-form .lf-unit { font-size: 13px; color: var(--text-3); }

.limit-form .lf-presets { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.limit-form .lf-presets button {
  border: 1.5px solid var(--border-2); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 6px 15px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: all .14s var(--ease);
}
.limit-form .lf-presets button.on {
  background: var(--brand-l); border-color: var(--brand-bd); color: var(--brand);
}
.limit-form .lf-note {
  font-size: 12px; color: var(--text-4); line-height: 1.7; margin: 0 0 16px;
}

/* 证件号码：默认打码，点击切换完整 */
.info-list .id-mask {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; user-select: none;
}
.info-list .id-mask .id-eye { display: inline-flex; opacity: .45; }
.info-list .id-mask:active .id-eye { opacity: .9; }

/* ============================================================
   付款码卡 —— 与「便捷生活」完全同款的白卡
   ------------------------------------------------------------
   之前它用的是通用 .panel：带点阵纹理 + 灰白渐变底，
   而便捷生活是纯白卡、证件卡是浅蓝点阵卡 —— 三块三套语言，
   所以看着"不像一个页面里的东西"。
   这里把付款码统一成便捷生活那套：纯白底 + 18px 圆角 + 同款柔和阴影。
   （放在文件末尾，用同权重覆盖 .panel 的底纹）
   ============================================================ */
.qr-panel {
  margin: 0 16px 16px;
  padding: 20px 16px 18px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(30, 50, 120, .06);
  text-align: center;
  position: relative;
  z-index: 3;
}

/* 卡内纵向节奏：提示语 → 码区 → 秒数 → 余额 → 刷新，留白均匀 */
.qr-panel .qr-tip {
  margin: 0 0 15px;
  font-size: 13px; font-weight: 700;
  color: var(--text-2); letter-spacing: .3px;
}
.qr-panel .qr-countdown {
  display: block;
  margin: 12px 0 0; min-height: 16px;
  font-size: 12px; color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.qr-panel .balance-line {
  margin: 12px 0 0;
  font-size: 13px; color: var(--text-3);
}
.qr-panel .balance-line b {
  font-size: 30px; font-weight: 900; color: var(--brand);
  letter-spacing: -.5px; font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
.qr-panel .refresh-line {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: fit-content; margin: 15px auto 0;
  font-size: 12.5px; font-weight: 700; color: var(--brand);
  background: var(--brand-l); padding: 7px 16px; border-radius: 999px;
  text-decoration: none; line-height: 1;
}
.qr-panel .refresh-line:active { opacity: .6; }
.qr-panel .refresh-line .spin { display: inline-flex; }

/* ============================================================
   弹窗表单收窄（修改手机号 / 修改邮箱）
   ------------------------------------------------------------
   问题：面板满屏 421px，内容区 377px，11 位手机号输入框和
   6 位验证码输入框都撑满，视觉空旷、不像表单。
   做法：内容统一限宽 320px 并水平居中；标题行保持满宽
   （标题贴左、关闭按钮贴右，符合弹窗惯例）。
   ============================================================ */
.sheet-panel .sheet-sub,
.sheet-panel .field,
.sheet-panel .auth-field,
.sheet-panel .sheet-actions {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
/* 验证码输入框按 6 位数字定宽，剩余宽度留给按钮 */
.sheet-panel .code-row input { flex: 0 0 150px; min-width: 0; }
.sheet-panel .code-btn { flex: 1; }

/* ============================================================
   改绑弹窗（.auth-sheet）—— 复用登录页的视觉语言
   ------------------------------------------------------------
   结构照搬登录页：品牌区（校徽 + 校名）→ 白卡表单（字段标题 +
   圆角输入框）→ 通栏主按钮。这样「修改手机号 / 邮箱」和「登录」
   看起来是一套东西，而不是另起一种画风。

   注意：这里把登录页 auth.css 里的关键类**自包含**实现了一遍，
   没有 <link auth.css>。原因有二：
     ① auth.css 只在登录页加载，本页不引；
     ② 校徽源图是竖版人物立绘（几百 px 高），只要品牌区没拿到
        width/height 约束，图片就会按原尺寸撑爆整个弹窗。
   ============================================================ */
.sheet-panel.auth-sheet { padding-top: 18px; }

/* 品牌区：校徽 + 校名 */
.sheet-panel.auth-sheet .auth-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 14px;
}
.sheet-panel.auth-sheet .auth-brand img {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; background: #fff; flex: none;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 12px var(--brand-glow);
}
.sheet-panel.auth-sheet .auth-brand b {
  font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: 1px;
}

/* 标题行 */
.sheet-panel.auth-sheet .sheet-head { margin-bottom: 16px; }
.sheet-panel.auth-sheet .sheet-head b { font-size: 17px; }

/* 字段标题 + 输入框 */
.sheet-panel.auth-sheet .auth-field { margin-bottom: 14px; }
.sheet-panel.auth-sheet .auth-field b {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text-2); margin-bottom: 6px;
}
.sheet-panel.auth-sheet .auth-field input {
  width: 100%; display: block;
  border: 1.5px solid var(--border-3);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: var(--fs-md);
  background: var(--surface); color: var(--text);
  outline: none; font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.sheet-panel.auth-sheet .auth-field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .12);
}

/* 验证码行：输入框按 6 位数字定宽，按钮吃掉剩余 */
.sheet-panel.auth-sheet .code-row { display: flex; gap: 9px; align-items: stretch; }
.sheet-panel.auth-sheet .code-row input { flex: 0 0 150px; min-width: 0; width: auto; }
.sheet-panel.auth-sheet .code-btn { flex: 1; }

/* 底部：取消（描边）+ 确认（通栏主按钮，同登录页 .btn-login） */
.sheet-panel.auth-sheet .sheet-actions { display: flex; gap: 10px; margin-top: 20px; }
/* .btn-plain 全局是 display:block + width:100%，在 flex 行里会把
   整行占满、把确认按钮挤出去，这里必须显式收窄。 */
.sheet-panel.auth-sheet .btn-plain {
  flex: 0 0 auto; width: auto; min-width: 84px;
  padding: 0 20px; min-height: 46px; line-height: 1;
  border-radius: var(--r-md); font-weight: 700; cursor: pointer;
  font-family: inherit; font-size: var(--fs-base);
}
.sheet-panel.auth-sheet .btn-login {
  flex: 1; width: auto;
  border: 0; border-radius: var(--r-md);
  padding: 14px 0;
  color: #fff; font-size: var(--fs-lg); font-weight: 800;
  font-family: inherit; cursor: pointer;
  background: var(--grad-brand);
  box-shadow: 0 8px 22px var(--brand-glow);
  transition: transform .15s var(--ease-back), opacity .15s var(--ease);
}
.sheet-panel.auth-sheet .btn-login:active { transform: scale(.97); }

/* ============================================================
   修掉卡片内边距叠加
   ------------------------------------------------------------
   根因：theme.css 的 .panel 没有 padding，靠 .panel-title 自己的
   padding 撑出间距；而 app.css 又给 .panel 加了 padding:16px。
   两处叠加 → 内容距边框上/左各 32px、下方再多一层，
   看起来「卡片里空荡荡，字离边框很远」。
   统一为：内边距只由 .panel 提供，.panel-title 只保留一点下边距。
   ============================================================ */
.panel > .panel-title,
body .panel-title {
  padding: 2px 0 6px;
  margin: 0;
}
/* 标题与紧随其后的列表之间不再额外留白 */
.panel > .panel-title + .info-list,
.panel > .panel-title + ul,
.panel > .panel-title + .notice-list { margin-top: 0; }
.panel > .panel-title + .info-list > li:first-child { padding-top: 2px; }