/* ============================================================
   钥匙借还管家 · 网页版（H5）样式
   与小程序 app.wxss 保持同一套设计令牌：
   2026-10-16 收敛：新增 --pri-dark/--pri-line/--red-deep/--amber-deep/--amber-line/--line-2/--line-strong；删「次级动作橙」（死代码 .cta.sub）
   小程序里 28rpx ≈ 14px（按 375px 宽折算），这里直接写 px
   ============================================================ */

:root {
  --pri: #2b6bff;
  --pri-dark: #1f56e0;   /* 主色深端：登录渐变 / 按下态 */
  --pri-light: #4d86ff;  /* 主色亮端：套餐卡渐变 */
  --pri-bg: #eef3ff;
  --pri-line: #d3e2ff;   /* 主色浅底的描边 */
  --red: #e54d42;
  --red-bg: #fdecec;
  --red-deep: #a01818;   /* 红底上的深红文字 */
  --amber: #f08c00;
  --amber-bg: #fff5e6;
  --amber-line: #ffe0a3; /* 琥珀浅底的描边 */
  --amber-deep: #a86400; /* 琥珀浅底上的深琥珀文字 */
  --green: #1fa355;
  --green-bg: #e8f8ef;
  --green-line: #b7e4c8; /* 绿色浅底的描边 */
  --rent: #e5482e;       /* 租金价签（唯一非状态语义色：价格）*/
  --text: #22262c;
  --text-2: #5a6068;
  --muted: #6b7280;      /* 2026-10-15 由 #8a9099 加深：白底对比度 3.3:1 → 4.8:1（对齐小程序 app.wxss） */
  --faint: #98a0aa;
  --bg: #f4f6f9;
  --line: #eef1f5;
  --line-2: #f0f2f5;     /* 浅灰底（代码块 / 标签 / 表头）—— 全站唯一的浅灰 */
  --line-strong: #c6cdd6;/* 圆点 / 进度条底 / 虚线边框 */
  --card: #fff;
  --radius: 10px;
  --sk: #e8ecf2;         /* 骨架屏底色 */
  --sk-hl: #f2f5f9;
  --nav-h: 52px;
  --tab-h: 56px;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
body.no-tab { padding-bottom: 20px; }

a { color: var(--pri); text-decoration: none; }
input, textarea, select, button { font-family: inherit; font-size: 15px; color: var(--text); }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  height: var(--nav-h); display: flex; align-items: center;
  padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line);
}
.nav .back {
  width: 30px; height: var(--nav-h); display: flex; align-items: center;
  font-size: 22px; color: var(--text-2);
}
/* 首页键：紧跟在返回键右边，一条细竖线隔开（每个页面都能一键回首页） */
.nav .home {
  width: 34px; height: var(--nav-h); display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--text-2); border-left: 1px solid var(--line); margin-left: 2px;
}
.nav .title { flex: 1; font-size: 19px; font-weight: 700; }
.nav .right { font-size: 15px; color: var(--pri); font-weight: 600; }

/* 首页顶部（店名 + 账号） */
/* 2026-10-17 定稿改白底：店名黑字大号，一眼看到「这是哪家店」；蓝底渐变留着给登录页 */
.topbar {
  background: #fff; color: var(--text); padding: 16px 16px 10px;
}
.topbar .store { font-size: 22px; font-weight: 700; }
.topbar .who { font-size: 14px; color: var(--muted); margin-top: 3px; }
.topbar .avatar-btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--pri); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600;
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 13px; margin: 10px;
  box-shadow: 0 1px 5px rgba(30,50,90,.05);
}
.card.tight { margin: 8px 10px; }
.card.flat { box-shadow: none; border: 1px solid var(--line); }
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-h .ct { font-size: 18px; font-weight: 700; }
.card-h .link { font-size: 14px; color: var(--pri); font-weight: 400; }

/* 蓝头 / 灰头看板 */
.board { margin: 10px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 5px rgba(30,50,90,.05); background: #fff; }
.board > .bh { padding: 12px 14px; font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.board.blue > .bh { background: var(--pri); color: #fff; }
.board.grey > .bh { background: var(--line-2); color: var(--text-2); }
.board > .bb { padding: 13px 14px; }

/* ---------- 布局工具 ---------- */
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.flex1 { flex: 1; min-width: 0; }
.center { text-align: center; }
.right { text-align: right; }
.bold { font-weight: 600; }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 14px; }
.faint { color: var(--faint); }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt6 { margin-top: 6px; } .mt10 { margin-top: 10px; } .mt14 { margin-top: 14px; }
.hr { height: 1px; background: var(--line); margin: 10px 0; }
.empty { text-align: center; color: var(--faint); padding: 45px 0; font-size: 13px; }

/* ---------- 色值语义（涨跌之外的业务分级） ---------- */
.c-red { color: var(--red); } .c-amber { color: var(--amber); }
.c-green { color: var(--green); } .c-blue { color: var(--pri); }
.c-grey { color: var(--muted); }
.lv-over, .lv-urgent { color: var(--red); }
.lv-warn, .lv-main { color: var(--amber); }
.lv-normal { color: var(--muted); }
.lv-closed { color: var(--pri); }

/* ---------- 按钮 ---------- */
.btn {
  display: block; width: 100%; border: none; cursor: pointer; text-align: center;
  background: var(--pri); color: #fff; border-radius: 10px;
  padding: 14px 0; font-size: 18px; font-weight: 600; margin-top: 10px;
}
.btn:active { opacity: .85; }
.btn.plain { background: var(--pri-bg); color: var(--pri); }
.btn.danger { background: var(--red); }
.btn.ghost { background: #fff; color: var(--text-2); border: 1px solid var(--line-strong); }
.btn.green { background: var(--green); }
.btn.sm { display: inline-block; width: auto; padding: 7px 16px; font-size: 15px; border-radius: 14px; margin: 0 0 0 8px; }
.btn.block-inline { display: inline-block; width: auto; padding: 7px 15px; font-size: 14px; margin: 0 6px 0 0; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }

/* 功能按钮行（首页看板） */
.func-row { display: flex; }
.func-btn {
  flex: 1; text-align: center; padding: 11px 0; font-size: 14px;
  background: var(--pri-bg); color: var(--pri); border-radius: 7px; cursor: pointer;
}
.func-btn + .func-btn { margin-left: 7px; }
.func-btn.red { background: var(--red-bg); color: var(--red); }
.func-btn.ghost { background: var(--bg); color: var(--text-2); }

/* ---------- 标签 ---------- */
.tag { font-size: 13px; padding: 3px 9px; border-radius: 6px; display: inline-block; line-height: 1.6; }
.tag.gray  { background: var(--line-2); color: var(--muted); }
.tag.blue  { background: var(--pri-bg); color: var(--pri); }
.tag.red   { background: var(--red-bg); color: var(--red); }
.tag.amber { background: var(--amber-bg); color: var(--amber); }
.tag.green { background: var(--green-bg); color: var(--green); }

/* ---------- 统计格（可点筛选） ---------- */
.grid4 { display: flex; }
.grid4 .g-item {
  flex: 1; width: auto; text-align: center; padding: 10px 0;
  margin: 0 3px; background: var(--line-2); border-radius: 8px; cursor: pointer;
}
.grid4 .g-item:first-child { margin-left: 0; }
.grid4 .g-item:last-child { margin-right: 0; }
/* 这些格子点了能进对应列表，给个按下反馈，免得看着像纯展示 */
.grid4 .g-item:active { background: var(--pri-bg); }
.grid4 .g-item.on:active { background: var(--pri); }
.grid4 .g-item.on { background: var(--pri); }
.grid4 .g-item.on .g-num, .grid4 .g-item.on .g-name { color: #fff; }
.grid4 .g-num { font-size: 30px; font-weight: 700; line-height: 1.2; }
.grid4 .g-name { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* 2×2 汇总卡（旧版式，首页已改用待办卡，样式保留给其他页备用） */
.sum-grid { display: flex; flex-wrap: wrap; }
.sum-item {
  width: 50%; padding: 4px 0;
}
.sum-item .si-in {
  background: #fff; border-radius: var(--radius); padding: 12px 13px; margin: 4px 5px;
  box-shadow: 0 1px 5px rgba(30,50,90,.05);
}
.sum-num { font-size: 24px; font-weight: 700; line-height: 1.15; }
.sum-name { font-size: 12px; color: var(--muted); margin-top: 2px; }
.warn { color: var(--red); }

/* ---------- 首页 v2：待办优先 + 轻量看板卡 ---------- */

/* 看板卡轻量版：白底标题行 + 顶部色条（蓝=钥匙 / 灰=房源），替代原来的蓝灰大色块头 */
.board.lite > .bh { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); padding: 12px 13px; }

/* 首页三张卡的层级（2026-10-16）：靠标题字号 + 留白 + 描边拉开差距，
   不再三张一个模子 —— 在外钥匙最重（每天都要看）、借还记录次之、到期提醒最轻。 */
.board.lv1 { box-shadow: 0 2px 10px rgba(30,50,90,.09); }
.board.lv1 > .bh {
  font-size: 20px; font-weight: 700; color: var(--text);
  padding: 13px 14px; border-bottom: 1px solid var(--pri-line);
}
.board.lv2 { box-shadow: none; border: 1px solid var(--line); }
.board.lv2 > .bh { font-size: 17px; font-weight: 700; color: var(--text); }
.board.lv3 { box-shadow: none; border: 1px solid var(--line); }
.board.lv3 > .bh { font-size: 16px; font-weight: 700; color: var(--text); padding: 12px 14px; }
.board.lv3 > .bh .bh-acts a { font-size: 13.5px; }
.board.lite.pri-top { border-top: 3px solid var(--pri); }
.bh-acts a { font-size: 14px; color: var(--pri); margin-left: 12px; font-weight: 400; }

/* ---------- 首页 v3：统计在最上 + 三个动作按钮 ---------- */
/* 统计卡里两组：钥匙 +（开通房源才有的）出租房源，中间用虚线隔开 */
.sum-sec + .sum-sec { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); }
.sum-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sum-h .t { font-size: 20px; font-weight: 700; color: var(--text); }
.sum-h .more { font-size: 14px; color: var(--pri); cursor: pointer; }

/* 首页区块之间的留白（2026-10-17）：14px，必须大于区块内部的 12px ——
   原来卡片内外都是 10px，卡片之间比卡片里面还挤，整页就会"糊成一片"。 */
#boards > .board { margin: 14px 10px; }

/* 三个动作：录入钥匙 / 录入房源 / 扫码借还。
   没开房源模块的店少一个键（两个键自动各占一半），不留空位也不解释。 */
/* 首页主动作：扫码借还独占一行大按钮（定稿 2026-10-17）——
   这是店里每天做得最多的一件事，放大放到最顺手的拇指区 */
.cta-main {
  margin: 14px 10px 10px; height: 56px; border-radius: 14px;
  background: var(--pri); color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 16px rgba(43,107,255,.28);
}
.cta-main:active { opacity: .88; }
.acts { display: flex; margin: 0 10px 10px; }
.acts .act {
  flex: 1; min-width: 0; text-align: center; cursor: pointer;
  padding: 15px 4px 14px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 5px rgba(30,50,90,.05);
  font-size: 16px; font-weight: 600; color: var(--text);
}
/* 用 margin-right + :last-child 而不是相邻兄弟选择器：中间那个键被 display:none 藏掉时，
   相邻选择器还是会生效，两个键会一宽一窄 */
.acts .act { margin-right: 8px; }
.acts .act:last-child { margin-right: 0; }
.acts .act:active { opacity: .82; }
.acts .act .ico { display: block; font-size: 19px; line-height: 1; }
.acts .act .tx { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-top: 7px; }
/* 扫码借还已升级为 .cta-main 大按钮；.acts 只剩录入两个次级按钮。
   旧的主色实底样式不再使用，但保留类名防旧缓存页面引用报错。 */
.acts .act.main { background: var(--pri); border-color: var(--pri); color: #fff; }
.acts .act.main:active { opacity: .88; }

/* 2026-10-16：删掉没人在用的 .cta / .cta.main / .cta.sub（含「次级动作橙 #ff7d21」）。
   橙色从此退出系统：状态一律琥珀 --amber，动作一律主色蓝，不再有两个几乎一样的橙。 */

/* 主按钮下面那行退路：没钥匙牌可扫时才用得上，做得很轻（与小程序 .cta-alt 一致） */
.cta-alt {
  text-align: center; font-size: 14px; color: var(--muted);
  padding: 2px 0 14px; cursor: pointer;
}
.cta-alt:active { opacity: .6; }

/* 首页两个入口白卡（与小程序首页同步） */

/* 卡内小节标题 */
.sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 4px; }
.sec-h:first-child { margin-top: 0; }
.sec-h .t { font-size: 14px; font-weight: 600; color: var(--text-2); }
.sec-h .more { font-size: 13px; color: var(--muted); cursor: pointer; }

/* 在借清单行：一眼看到 谁拿着 / 借了多久，直接可还（参照在借高亮卡的做法） */
.bk-row { display: flex; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.bk-row:first-of-type { border-top: none; }
.bk-row .key-no { margin-right: 9px; }
.key-no {
  flex: none; font-size: 14px; font-weight: 600; color: var(--text-2);
  background: var(--line-2); border-radius: 6px; padding: 5px 9px;
}
.key-no.overdue { color: var(--red); background: var(--red-bg); }
.bk-more { text-align: center; font-size: 13px; color: var(--pri); padding: 10px 0 2px; cursor: pointer; }
.all-ok-row { text-align: center; color: var(--green); font-size: 13px; padding: 14px 0 6px; }

/* 到期跟进行（琥珀 / 红） */
.due-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 8px; margin-top: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.due-row:first-of-type { margin-top: 4px; }
.due-row.red { background: var(--red-bg); color: var(--red-deep); }
.due-row.amber { background: var(--amber-bg); color: var(--amber-deep); }
.due-row .dr-txt { flex: none; margin-left: 10px; font-size: 13px; font-weight: 500; }

/* ---------- 列表行 ---------- */
.list-item {
  background: #fff; border-radius: 9px; padding: 13px 14px;
  margin: 0 10px 8px; box-shadow: 0 1px 4px rgba(30,50,90,.04);
}
.li-row { display: flex; align-items: center; font-size: 16px; }

/* ---------- 搜索 / 筛选 ---------- */
.search { display: flex; margin: 10px; }
.search input {
  flex: 1; background: #fff; border: none; border-radius: 8px; padding: 0 12px;
  height: 46px; line-height: 46px; font-size: 16px;
  box-shadow: 0 1px 4px rgba(30,50,90,.04);
}
.search .s-btn {
  flex: none; margin-left: 8px; padding: 0 14px; height: 46px; line-height: 46px;
  background: var(--pri); color: #fff; border-radius: 8px; font-size: 15px; cursor: pointer;
}
.tabs {
  display: flex; background: #fff; margin: 0 10px 2px;
  border-radius: 8px; padding: 4px; box-shadow: 0 1px 4px rgba(30,50,90,.04);
}
.tab { flex: 1; text-align: center; padding: 9px 0; font-size: 15px; color: var(--muted); border-radius: 6px; cursor: pointer; }
.tab.active { background: var(--pri); color: #fff; font-weight: 600; }

.filter-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 10px 6px; padding: 8px 12px; border-radius: 7px;
  background: var(--pri-bg); color: var(--pri); font-size: 14.5px;
}
.filter-bar .link { color: var(--pri); text-decoration: underline; }

/* ---------- 借还警示卡 ---------- */
.alert-card { border-left: 4px solid var(--amber); }
.alert-card.over { border-left-color: var(--red); }
.bc-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.bc-title { font-size: 16px; font-weight: 700; color: var(--amber); }
.bc-title.over { color: var(--red); }
.bc-tip { font-size: 13px; color: var(--faint); }
.bc-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bc-row { display: flex; align-items: center; padding-top: 10px; }
.bc-row + .bc-row { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 11px; }
/* 行内主文字（谁拿着 / 哪把钥匙）放大：定稿 2026-10-17 */
.bk-row .bold, .bc-row .bold { font-size: 16px; }

/* ---------- 区块小标题（提醒中心 / 套餐页） ---------- */
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: 14px 10px 7px; }
.sec-h .sec-t, .sec-h > .bold { font-size: 17px; font-weight: 700; }

/* ---------- 小区分组标题 ---------- */
.grp-title { display: flex; align-items: center; margin: 13px 10px 5px; }
/* 可折叠的分组标题（个人中心）：右侧带「展开 / 收起」，整行可点 */
.grp-title.tap { justify-content: space-between; cursor: pointer; }
.grp-title .sec-arrow { font-size: 13px; font-weight: 400; color: var(--pri); margin-left: 8px; }
.grp-title::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px;
  background: var(--pri); margin-right: 6px; flex: none;
}
.grp-name { font-size: 16px; font-weight: 600; color: var(--text-2); }
.grp-count { font-size: 13px; color: var(--faint); margin-left: 5px; }

/* ---------- 钥匙编号徽章 ---------- */
.key-no {
  flex: none; min-width: 56px; text-align: center; box-sizing: border-box;
  background: var(--pri-bg); color: var(--pri); font-size: 14px; font-weight: 700;
  border-radius: 5px; padding: 5px 9px; margin-right: 8px;
}
.key-no.overdue { background: var(--red-bg); color: var(--red); }

/* ---------- 时间线 ---------- */
.tl { padding-left: 4px; }
.tl-item { position: relative; padding: 0 0 15px 17px; border-left: 1px solid var(--line); }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -6px; top: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); box-sizing: border-box;
}
.tl-item.dot-blue .tl-dot { border-color: var(--pri); }
.tl-item.dot-red .tl-dot { border-color: var(--red); }
.tl-item.dot-green .tl-dot { border-color: var(--green); }
.tl-item.dot-amber .tl-dot { border-color: var(--amber); }
/* 跟进结果里「没成」的那几类（拒绝/出售/失联）用灰点，视觉上退到后面去 */
.tl-item.dot-gray .tl-dot { border-color: var(--line-strong); }

/* ---------- 表单 ---------- */
.form-item { margin-bottom: 13px; }
.form-label { font-size: 16px; color: var(--text-2); margin-bottom: 7px; display: block; font-weight: 600; }
.req { color: var(--red); margin-left: 2px; }
.input, .textarea {
  background: var(--bg); border: none; border-radius: 8px;
  font-size: 17px; width: 100%; color: var(--text); padding: 0 12px;
}
.input { height: 50px; line-height: 50px; }
.textarea { padding: 10px 12px; min-height: 85px; line-height: 1.5; font-size: 16px; resize: vertical; }
.select { width: 100%; height: 50px; background: var(--bg); border: none; border-radius: 8px; padding: 0 8px; font-size: 16px; }
.picker-box {
  background: var(--bg); border-radius: 8px; padding: 11px 12px;
  font-size: 16px; display: flex; justify-content: space-between; align-items: center;
}
.picker-box .arrow { color: var(--faint); font-size: 12px; }

/* 房号三段输入 */
.unit-row { display: flex; align-items: center; }
.unit-row .unit-b { flex: 1; text-align: center; }
.unit-row .unit-b3 { flex: 1.4; }
.unit-dash { color: var(--muted); font-size: 17px; padding: 0 6px; }

/* 步进器 */
.stepper { display: flex; flex-wrap: wrap; }
.stepper .st-cell { display: flex; align-items: center; margin: 0 13px 10px 0; }
.stepper .st-name { font-size: 13px; color: var(--text-2); margin-right: 5px; }
.stepper .st-btn {
  width: 26px; height: 26px; border-radius: 5px; background: var(--pri-bg); color: var(--pri);
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; cursor: pointer;
  user-select: none;
}
.stepper .st-val { min-width: 30px; text-align: center; font-size: 15px; font-weight: 600; }
/* 户型下拉：点开在手机上就是滚轮（iOS 原生 picker，与小程序那套一致） */
.stepper .st-sel {
  height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 15px; font-weight: 600;
}

/* 验证码行 */
.code-row { display: flex; }
.code-row .input { flex: 1; }
.code-row .code-btn {
  flex: none; margin-left: 8px; padding: 0 12px; height: 50px; line-height: 50px;
  background: var(--pri-bg); color: var(--pri); border-radius: 8px; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.code-row .code-btn.off { opacity: .5; pointer-events: none; }
.tip-inline { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

/* ---------- 图形验证码 ---------- */
.cap-img {
  flex: none; margin-left: 8px; width: 105px; height: 46px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--pri-bg); cursor: pointer; display: block;
  object-fit: cover;
}
.cap-img:not([src]) { opacity: .35; }

/* ---------- 拖动滑块验证 ---------- */
/* UI 由组件（vendor/captcha-pro.js）自己画，这里只管外层留白和「组件没加载出来」的兜底 */
.cap-slide { user-select: none; -webkit-user-select: none; margin-top: 2px; }
.cap-fallback {
  padding: 14px; border-radius: 8px; background: var(--amber-bg);
  color: var(--amber-deep); font-size: 12.5px; text-align: center;
}

/* ---------- 扫码自助页 ---------- */
.self-card { border-left: 4px solid var(--pri); }
.self-head { display: flex; align-items: center; justify-content: space-between; }
.self-big { font-size: 20px; font-weight: 700; }
.phone-line { display: flex; align-items: center; justify-content: flex-end; }
.phone-line .ph { font-size: 13px; }
.call-btn {
  flex: none; margin-left: 8px; padding: 2px 10px; border-radius: 99px;
  background: var(--pri-bg); color: var(--pri); font-size: 13px; cursor: pointer;
}
.wait-card { background: var(--amber-bg); border: 1px solid var(--amber-line); }
.wait-card .wt { color: var(--amber-deep); font-weight: 600; font-size: 15px; }

/* ---------- 语音 / AI 卡片 ---------- */
.ai-card { background: var(--pri-bg); border: 1px solid var(--pri-line); }
.ai-head { display: flex; align-items: center; justify-content: space-between; }
.ai-title { font-size: 14px; font-weight: 600; }
.ai-btn { flex: none; font-size: 13px; color: #fff; background: var(--pri); border-radius: 99px; padding: 5px 13px; cursor: pointer; }
.ai-btn.on { background: var(--red); }
.ai-btn.busy { background: var(--line-strong); }
.ai-tip { font-size: 11.5px; color: var(--muted); line-height: 1.7; margin-top: 6px; }
.ai-heard { margin-top: 7px; padding: 7px 8px; background: #fff; border-radius: 6px; font-size: 12px; line-height: 1.7; }
.ai-miss { margin-top: 6px; padding: 6px 8px; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 6px; font-size: 12px; color: var(--amber-deep); line-height: 1.7; }
.ai-ok { margin-top: 6px; font-size: 12px; color: var(--green); }

/* ---------- 我的：菜单 ---------- */
.menu { background: #fff; border-radius: var(--radius); margin: 10px; overflow: hidden; box-shadow: 0 1px 5px rgba(30,50,90,.05); }
.menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 14px; border-bottom: 1px solid var(--line); cursor: pointer;
  font-size: 16px;
}
.menu-item:last-child { border-bottom: none; }
.menu-item .mi-arrow { color: var(--line-strong); font-size: 14px; }
.menu-item .mi-val { color: var(--muted); font-size: 14px; margin-right: 6px; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--pri-bg); color: var(--pri);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600;
  flex: none; margin-right: 10px;
}

/* ---------- 套餐卡 ---------- */
.pkg { background: linear-gradient(135deg, var(--pri), var(--pri-light)); color: #fff; border-radius: var(--radius); padding: 14px; margin: 10px; }
.pkg .pk-t { font-size: 12px; opacity: .85; }
.pkg .pk-n { font-size: 22px; font-weight: 700; margin-top: 3px; }
.pkg .pk-s { font-size: 12px; opacity: .9; margin-top: 5px; }
/* 套餐卡里的到期日：整块白底衬 + 大号日期 + 天数胶囊。
   快到期转琥珀、过期或不足 7 天转红，扫一眼就知道要不要续。 */
/* 到期日：一行（标签 + 加粗日期 + 剩余天数胶囊），不占大块地方但照样醒目 */
.pkg .pk-due {
  margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center;
}
.pkg .pk-due.amber { background: var(--amber-bg); color: var(--amber-deep); }
.pkg .pk-due.red { background: var(--red-bg); color: var(--red-deep); }
.pkg .pk-due-l { font-size: 12px; opacity: .85; }
.pkg .pk-due-d { flex: 1; margin-left: 10px; font-size: 17px; font-weight: 700; }
.pkg .pk-due-n {
  flex: none; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: #fff; color: var(--pri);
}
.pkg .pk-due.amber .pk-due-n { color: var(--amber-deep); }
.pkg .pk-due.red .pk-due-n { color: var(--red); }
/* 两个模块分开买过时，各自到期日分行写清 */
.pkg .pk-mod { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; opacity: .95; }
.pkg .pk-more { display: block; margin-top: 6px; opacity: .95; }

/* ---------- 底部 tabbar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tb {
  flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 6px; padding: 13px 0; color: var(--faint); font-size: 17px; line-height: 1; cursor: pointer;
}
.tabbar .tb .ic { display: flex; line-height: 0; }
.tabbar .tb .ic img { width: 22px; height: 22px; display: block; transform: translateY(-1.5px); }
.tabbar .tb.on { color: var(--pri); font-weight: 600; }

/* ---------- 悬浮按钮 ---------- */
.fab {
  position: fixed; right: 18px; bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; background: var(--pri); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1;
  box-shadow: 0 4px 12px rgba(43,107,255,.4); z-index: 35; cursor: pointer;
}

/* ---------- 弹层 ---------- */
.mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dialog {
  background: #fff; border-radius: 12px; width: 100%; max-width: 320px; overflow: hidden;
}
.dialog .dg-h { padding: 16px 16px 8px; font-size: 17px; font-weight: 700; text-align: center; }
.dialog .dg-b { padding: 0 16px 14px; font-size: 15px; color: var(--text-2); text-align: center; max-height: 50vh; overflow-y: auto; }
.dialog .dg-f { display: flex; border-top: 1px solid var(--line); }
.dialog .dg-f div {
  flex: 1; text-align: center; padding: 13px 0; font-size: 16px; cursor: pointer;
}
.dialog .dg-f div + div { border-left: 1px solid var(--line); }
.dialog .dg-f .ok { color: var(--pri); font-weight: 600; }
.dialog .dg-f .cancel { color: var(--text-2); }

/* 安全验证弹层：比普通对话框宽一点，题图和拖动条才不挤 */
.cap-dialog { max-width: 340px; }
.cap-dialog .dg-b.cap-body { text-align: left; padding: 4px 16px 16px; }
.cap-dialog .cap-slide { width: 100%; }

.toast {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.78); color: #fff; padding: 12px 20px; border-radius: 8px;
  font-size: 15px; z-index: 99; max-width: 76vw; text-align: center; line-height: 1.5;
}
.spin {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.72); color: #fff; padding: 14px 20px; border-radius: 8px;
  font-size: 13px; z-index: 99;
}

/* 底部弹起选择器 */
.sheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 95; display: flex; align-items: flex-end; }
.sheet { background: #fff; width: 100%; border-radius: 14px 14px 0 0; max-height: 72vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
.sheet .sh-h { padding: 14px 16px; font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.sheet .sh-i { padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 16px; cursor: pointer; }
.sheet .sh-i.on { color: var(--pri); font-weight: 600; }
.sheet .sh-c { padding: 13px 16px; text-align: center; color: var(--muted); font-size: 15px; cursor: pointer; }

/* ---------- 贴纸 ---------- */
.sticker {
  background: #fff; border: 1px dashed var(--line-strong); border-radius: 8px;
  padding: 12px; margin: 10px; text-align: center;
}
.sticker img { width: 180px; height: 180px; display: block; margin: 8px auto 0; }
.sticker .st-no { font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.sticker .st-name { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.sticker .st-ap { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sticker .st-tip { font-size: 11px; color: var(--faint); margin-top: 6px; }

/* 骨架 / 加载 */
.loading-txt { text-align: center; color: var(--faint); padding: 40px 0; font-size: 13px; }

/* ---------- 骨架屏（2026-10-15 新增，与小程序 app.wxss 同套） ---------- */
.sk-card {
  background: var(--card); border-radius: 10px; padding: 13px; margin: 10px;
  box-shadow: 0 1px 4px rgba(30, 50, 90, .06);
}
.sk-row { display: flex; align-items: center; }
.sk-row + .sk-row { margin-top: 13px; }
.sk-av { width: 44px; height: 44px; border-radius: 50%; background: var(--sk); flex: none; margin-right: 10px; }
.sk-lines { flex: 1; min-width: 0; }
.sk-line { height: 12px; border-radius: 4px; background: var(--sk); }
.sk-line + .sk-line { margin-top: 8px; }
.sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
.sk-line.t { height: 17px; width: 50%; }
.sk-block { height: 80px; border-radius: 8px; background: var(--sk); }
.sk-grid4 { display: flex; gap: 6px; }
.sk-grid4 .sk-g { flex: 1; height: 60px; border-radius: 7px; background: var(--sk); }
.sk-card, .sk-line, .sk-av, .sk-block, .sk-g { animation: sk-flash 1.4s ease-in-out infinite; }
@keyframes sk-flash { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------- 表单校验（即时提示，不用等提交） ---------- */
input.error, textarea.error, .picker-box.error {
  border: 1px solid var(--red) !important;
  background: var(--red-bg) !important;
}
.form-err { color: var(--red); font-size: 12px; margin-top: 5px; }
.form-tip { color: var(--muted); font-size: 12px; margin-top: 5px; }

/* ---------- 空态增强（说清现状 + 给一个动作） ---------- */
.empty-box { text-align: center; padding: 35px 15px 30px; }
.empty-ico { font-size: 36px; line-height: 1; opacity: .55; }

/* ---------- 单色图标（2026-10-16） ----------
   两端共用 assets/icons 里的 PNG（22 种 × 灰/蓝/白），替掉原来的系统 emoji：
   emoji 在安卓和苹果上画风不同、颜色也不受控，是「看着不整」的主要来源。
   ic=跟随正文（18px）、ic-lg=标题/按钮（26px）、ic-xl=空态大图标（36px）。 */
.ic { width: 18px; height: 18px; vertical-align: -3px; }
.ic-lg { width: 26px; height: 26px; vertical-align: -5px; }
.ic-xl { width: 36px; height: 36px; vertical-align: -7px; }
.empty-ico .ic-xl { opacity: 1; }
.empty-t { font-size: 17px; color: var(--text-2); margin-top: 11px; font-weight: 700; }
.empty-d { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.7; }
.empty-act {
  display: inline-block; margin-top: 15px; padding: 9px 22px; border-radius: 8px;
  background: var(--pri-bg); color: var(--pri); font-size: 16px; font-weight: 600;
}
.empty-act:active { opacity: .7; }

/* 超期钥匙催满短信次数后：只能人来要了（以前到这里系统就没声了） */
.esc-tip {
  margin-top: 8px; padding: 9px 11px; border-radius: 7px;
  background: var(--red-bg); color: var(--red); font-size: 14px; line-height: 1.6;
}

/* ---- 今日待办（2026-10-17 重做版）：首页从「台账」改「待办」，
        店员打开就知道该干嘛；有数才染色，没数淡出 ---- */
.todo-h { font-size: 20px; font-weight: 700; color: var(--text); margin: 16px 12px 10px; }
.todo-h em { font-style: normal; font-size: 13px; color: var(--faint); font-weight: 400; margin-left: 8px; }
.todo {
  display: flex; align-items: center; margin: 0 10px 9px; padding: 15px 14px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 5px rgba(30,50,90,.05); cursor: pointer;
}
.todo .tn { font-size: 34px; font-weight: 700; line-height: 1; min-width: 52px; text-align: center; }
.todo .tt { font-size: 17px; font-weight: 700; }
.todo .td { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.todo .go { margin-left: auto; padding-left: 8px; font-size: 20px; color: var(--line-strong); }
.todo.red { background: var(--red-bg); border-color: var(--red); }
.todo.red .tn, .todo.red .tt { color: var(--red-deep); }
.todo.blue { background: var(--pri-bg); border-color: var(--pri); }
.todo.blue .tn, .todo.blue .tt { color: var(--pri-dark); }
.todo.amber { background: var(--amber-bg); border-color: var(--amber); }
.todo.amber .tn, .todo.amber .tt { color: var(--amber-deep); }
.todo.zero { opacity: .55; border-color: var(--line); }
.todo.zero .tn, .todo.zero .tt { color: var(--text-2); }

/* ---- 个人中心头部（2026-10-17：白卡改蓝底大卡，人/角色/门店一眼看清） ---- */
.me-hero {
  display: flex; align-items: center; margin: 10px; padding: 18px 16px;
  border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--pri), var(--pri-dark));
  box-shadow: 0 4px 12px rgba(43,107,255,.22);
}
.me-hero .me-ava {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.25); font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.me-hero .me-name { font-size: 20px; font-weight: 700; }
.me-hero .me-sub { font-size: 13px; opacity: .85; margin-top: 4px; }

/* ---- 钥匙详情页（2026-10-17 重做：大地址 + 整块状态条 + 大字 kv，信息只出现一次） ---- */
.dt-hero {
  background: var(--card); border-radius: var(--radius); margin: 10px; padding: 16px;
  box-shadow: 0 1px 5px rgba(30,50,90,.05);
}
.dt-addr { font-size: 20px; font-weight: 700; color: var(--text); }
.dt-meta { font-size: 13px; color: var(--muted); margin-top: 6px; }
.dt-state { margin-top: 13px; border-radius: 9px; padding: 12px 13px; display: flex; align-items: center; gap: 10px; }
.dt-state .st-n { font-size: 18px; font-weight: 700; }
.dt-state .st-d { margin-left: auto; font-size: 13px; opacity: .85; text-align: right; }
.dt-state.green { background: var(--green-bg); color: var(--green); }
.dt-state.amber { background: var(--amber-bg); color: var(--amber-deep); }
.dt-state.red { background: var(--red-bg); color: var(--red-deep); }
.dt-state.gray { background: var(--line-2); color: var(--text-2); }
.dt-h { font-size: 16px; font-weight: 700; color: var(--text); margin: 16px 12px 7px; }
.dt-h .dt-h-n { font-size: 13px; font-weight: 400; color: var(--faint); margin-left: 6px; }
.dt-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dt-kv:first-child { padding-top: 2px; }
.dt-kv:last-child { border-bottom: none; padding-bottom: 2px; }
.dt-kv .k { font-size: 14px; color: var(--muted); flex: none; }
.dt-kv .v { font-size: 16px; font-weight: 600; color: var(--text); text-align: right; word-break: break-all; }
.dt-tl .tl-act { font-size: 15px; font-weight: 600; color: var(--text); }
.dt-tl .tl-at { font-size: 13px; color: var(--faint); }
.dt-tl .tl-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dt-tl .tl-note { font-size: 13px; color: var(--text-2); margin-top: 4px; }