/* 伴知行心理测评 · H5 全局样式
   配色沿用小程序版：墨绿主色 + 米白背景 + 暖橙点缀 */
:root {
  --c-primary: #3D6B5C;
  --c-primary-light: #5B8C7B;
  --c-primary-pale: #E8F0EC;
  --c-accent: #D98A5B;
  --c-warn: #C4584B;
  --c-ink: #2C2A26;
  --c-ink-2: #5C5850;
  --c-ink-3: #9A958C;
  --c-line: #E6E1D8;
  --c-bg: #F5F2EC;
  --c-card: #FFFFFF;
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── 头部 ── */
.hero {
  background: linear-gradient(160deg, #3D6B5C 0%, #4E7F6D 100%);
  padding: 28px 20px 34px;
  color: #fff;
}
.hero-title { font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
.hero-sub { font-size: 13px; opacity: 0.85; margin-top: 7px; line-height: 1.7; white-space: pre-line; }
.hero-badge {
  display: inline-block; margin-top: 12px;
  background: rgba(255,255,255,0.16); border-radius: 999px;
  padding: 4px 12px; font-size: 12px;
}

/* ── 顶部主视觉（首页 / 测评记录 / 我的）────────────────────────
   这三个页面的顶部**不再有任何文字字段**，整块空间交给一张图：
   后台在「页面文案」里上传设计好的横图（图上自带标题文字即可）。
   图片按自身比例铺满一行；没配图时整块不占位（页面直接从内容开始）。
   不设遮罩、不加文字阴影 —— 图就是图，不再被压暗。 */
.hero-banner {
  display: block; width: 100%; height: auto;
  max-height: 72vh; object-fit: cover;
}
.hero-banner:not([src]) { display: none; }

/* 测评记录页的摘要行（原先挂在顶部主视觉的副标题上，现落回正文范围条下方） */
.list-summary { margin: 8px 0 10px; }

/* ── 顶栏登录态 ── */
.auth-bar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 10px 16px; font-size: 12px; color: var(--c-ink-3);
}
.auth-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #C9C4BA; margin-right: 5px; }
.auth-dot.on { background: var(--c-primary); }

/* ── 卡片 ── */
.card {
  background: var(--c-card);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin: 12px 14px;
  box-shadow: 0 2px 12px rgba(60, 50, 35, 0.05);
}
.card-title { font-size: 16px; font-weight: 600; color: var(--c-ink); }
.card-sub { font-size: 12px; color: var(--c-ink-3); margin-top: 4px; }

/* ── 按钮 ── */
.btn {
  display: block; width: 100%;
  border: none; border-radius: 10px;
  padding: 12px 0; font-size: 15px;
  cursor: pointer; text-align: center;
  transition: opacity 0.15s;
}
.btn:active { opacity: 0.75; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); }
.btn-plain { background: #EFEBE3; color: var(--c-ink-2); }
.btn-danger-plain { background: transparent; color: var(--c-warn); border: 1px solid var(--c-warn); }
.btn.disabled { opacity: 0.45; cursor: not-allowed; }
.btn + .btn { margin-top: 10px; }
/* 卡片标题行里的内联小按钮（长表单顶部也能直接保存，不用滚到底） */
.btn-inline { display: inline-block; width: auto; padding: 6px 14px; font-size: 13px; border-radius: 999px; }

/* ── 表单 ── */
.field { margin-bottom: 14px; }
.field-label { display: block; font-size: 13px; color: var(--c-ink-2); margin-bottom: 6px; }
.field-label .req { color: var(--c-warn); }
.input, .picker-box {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  background: #FBFAF7;
  color: var(--c-ink);
  outline: none;
}
.input:focus { border-color: var(--c-primary-light); }
.picker-box { display: flex; justify-content: space-between; align-items: center; color: var(--c-ink); }
.picker-box.empty { color: var(--c-ink-3); }
.picker-arrow { color: var(--c-ink-3); }
select.input { appearance: auto; }
textarea.input { resize: none; min-height: 72px; }
.age-hint { font-size: 12px; color: var(--c-primary-light); margin-top: 4px; }
.age-hint.bad { color: var(--c-warn); }

/* ── 标签 / 徽标 ── */
.tag {
  display: inline-block; background: var(--c-primary-pale); color: var(--c-primary);
  border-radius: 6px; padding: 2px 8px; font-size: 11px;
}
.tag-warn { background: #F7E8E4; color: var(--c-warn); }
.tag-accent { background: #F8EDE2; color: #A2663B; }
.staff-badge {
  display: inline-block; margin-top: 10px;
  background: rgba(255,255,255,0.22); border: 1px dashed rgba(255,255,255,0.5);
  border-radius: 8px; padding: 3px 10px; font-size: 12px;
}

/* ── 量表卡片（首页列表：只呈现 名称 + 一句话定位 + 已测评人数 + 开始按钮）── */
.scale-card { cursor: pointer; }
.scale-name { font-size: 17px; font-weight: 700; color: var(--c-ink); line-height: 1.45; }
.scale-sub { margin-top: 7px; font-size: 13px; color: var(--c-ink-2); line-height: 1.7; }
.scale-count {
  margin-top: 11px; font-size: 12px; color: var(--c-ink-3);
  display: flex; align-items: center; gap: 6px;
}
.scale-count::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-primary-light); flex: none;
}
.scale-btn {
  margin-top: 13px; height: 42px; border-radius: 10px;
  background: var(--c-primary); color: #fff;
  font-size: 14.5px; font-weight: 600; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
}
.scale-btn-off { background: #EDEAE3; color: var(--c-ink-3); font-weight: 500; letter-spacing: 0; }

/* ── 管理员入口 ── */
.admin-entry { border: 1px dashed var(--c-primary-light); cursor: pointer; }

/* ── 饼图（环心综合得分；图例逐维度得分 + 档位色签）── */
.pie-wrap { display: flex; justify-content: center; padding: 16px 0 12px; }
.pie {
  width: 200px; height: 200px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pie-hole {
  width: 122px; height: 122px; border-radius: 50%;
  background: var(--c-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(60, 50, 35, 0.05);
}
.pie-hole-num {
  font-size: 30px; font-weight: 600; color: var(--c-primary);
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.pie-hole-label { font-size: 10.5px; letter-spacing: 2px; color: var(--c-ink-3); margin-top: 3px; }
.pie-legend { margin-top: 6px; }
.pie-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #F2EFE9; font-size: 13px;
}
.pie-item:last-child { border-bottom: none; }
.pie-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pie-name { flex: 1; min-width: 0; }
.pie-score {
  flex: none; font-size: 13px; font-weight: 600; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.pie-lv {
  flex: none; min-width: 56px; text-align: center;
  font-size: 11px; line-height: 1; padding: 4px 0; border-radius: 999px;
  background: #F0EDE6; color: var(--c-ink-2); font-weight: 500;
}
.pie-lv[data-tone="warn"] { background: #F7E8E4; color: #C4584B; }
.pie-lv[data-tone="good"] { background: #EDF3EE; color: #4E7F6D; }
.pie-lv[data-tone="best"] { background: #E4EFE8; color: #3D6B5C; }

/* ── 维度雷达图（图形不标分数；分数与档位集中在下方柱状图）── */
.radar-wrap { display: flex; justify-content: center; padding: 10px 0 2px; }
.radar-svg { width: 100%; max-width: 380px; height: auto; display: block; }
.radar-svg text { font-family: inherit; }
.radar-name { font-size: 12.5px; fill: var(--c-ink-2); }
.radar-area { animation: radarIn 0.5s ease-out both; transform-origin: center; }
@keyframes radarIn {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

/* 维度得分柱状图（全页唯一分数标注区：柱顶得分 + 柱下维度名/档位名） */
.dim-bars { margin-top: 14px; }
.bar-svg { width: 100%; height: auto; display: block; }
.bar-svg text { font-family: inherit; }
.bar-score { font-variant-numeric: tabular-nums; }

/* ── 专业版文字报告（2026-10-12 重排：子卡片式，告别拥挤的文字墙）── */
.pro-dim {
  background: #FAF8F3; border-radius: 10px;
  border-left: 3px solid var(--c-primary-light);
  padding: 12px 12px 3px; margin-bottom: 10px;
}
.pro-dim:last-child { margin-bottom: 0; }
.pro-dim-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pro-dim-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pro-dim-name { font-size: 14px; font-weight: 600; color: var(--c-ink); flex: 1 1 auto; min-width: 0; }
.pro-name-warn { color: #C4584B; }
.pro-dim-score { font-size: 13px; font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.pro-lv {
  flex: none; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 999px;
  background: #E4EFE8; color: #3D6B5C; font-weight: 500;
}
.pro-lv[data-tone="warn"] { background: #F7E8E4; color: #C4584B; }
.pro-lv[data-tone="good"] { background: #EDF3EE; color: #4E7F6D; }
.pro-lv[data-tone="best"] { background: #E4EFE8; color: #3D6B5C; }
.pro-sec { padding: 9px 0 10px; }
.pro-sec + .pro-sec { border-top: 1px dashed #E8E3D9; }
.pro-sec-t { font-size: 11px; font-weight: 600; color: var(--c-ink-3); letter-spacing: 1px; margin-bottom: 4px; }
.pro-sec-act .pro-sec-t { color: #A2663B; }
.pro-text { font-size: 13.5px; line-height: 1.85; color: var(--c-ink-2); }
.follow-box {
  margin-top: 12px; background: var(--c-primary-pale);
  border-radius: 10px; padding: 11px 12px;
}
.follow-p { font-size: 13px; line-height: 1.8; color: var(--c-ink-2); }

/* ── 报告 ── */
.score-ring { text-align: center; margin-top: 8px; }
.score-num { font-size: 44px; font-weight: 600; line-height: 1.1; display: inline; }
.score-unit { font-size: 14px; opacity: 0.7; }
.result-hero { text-align: center; }
.mode-switch { display: flex; gap: 8px; margin: 0 14px 4px; }
.mode-btn {
  flex: 1; text-align: center; padding: 8px 0;
  border-radius: 8px; font-size: 13px;
  background: #EFEBE3; color: var(--c-ink-2); cursor: pointer;
}
.mode-btn.on { background: var(--c-primary); color: #fff; }
.all-good {
  background: var(--c-primary-pale); border-radius: 8px;
  padding: 12px; font-size: 13px; color: var(--c-primary);
}
.divider { height: 1px; background: var(--c-line); margin: 14px 0; }
.ai-box {
  background: #F8F5EE; border-radius: 8px;
  padding: 12px; font-size: 13px; white-space: pre-wrap;
}
.ai-box-empty { color: var(--c-ink-3); }
.cta-card { background: #FBF6EE; }
.cta-title { font-size: 16px; font-weight: 600; color: #8A5A32; }

/* ── 列表 / 行 ── */
.row-between { display: flex; justify-content: space-between; align-items: center; }
.empty { text-align: center; color: var(--c-ink-3); padding: 36px 0; font-size: 13px; }
.hint-line { font-size: 12px; color: var(--c-ink-3); margin-top: 6px; }
.warn-text { color: var(--c-warn); }
.ok-text { color: var(--c-primary); }

/* ── 权限开关（管理员页）── */
.perm-head {
  display: grid; grid-template-columns: 1fr 52px 52px;
  padding: 8px 0 4px; font-size: 12px; color: var(--c-ink-3);
}
.perm-head .h-col { text-align: center; }
.perm-group {
  font-size: 11px; color: var(--c-ink-3);
  margin: 10px 0 4px; letter-spacing: 1px;
}
.perm-row {
  display: grid; grid-template-columns: 1fr 52px 52px;
  align-items: center; padding: 8px 0;
  border-bottom: 1px solid #F2EFE9;
}
.perm-row:last-child { border-bottom: none; }
.perm-name { font-size: 13px; display: block; }
.perm-note { font-size: 11px; color: var(--c-ink-3); }
.perm-cell { text-align: center; }
.sw {
  display: inline-block; width: 44px; height: 24px;
  border-radius: 12px; background: #DDD8CE;
  position: relative; cursor: pointer; transition: background 0.2s;
  vertical-align: middle;
}
.sw.on { background: var(--c-primary); }
.sw-busy { opacity: 0.6; }
.sw-knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: left 0.2s;
}
.sw.on .sw-knob { left: 22px; }
.reset-perm { font-size: 12px; color: var(--c-ink-3); cursor: pointer; }
.reset-perm:hover { color: var(--c-primary); }
.tool-btn { font-size: 12px; color: var(--c-primary); cursor: pointer; padding: 4px 10px; }
.tool-btn.tool-del { color: var(--c-warn); }
.scale-row { padding: 10px 0; border-bottom: 1px solid #F2EFE9; }
.q-row { padding: 10px 0; border-bottom: 1px solid #F2EFE9; }
.q-row-head { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--c-ink-3); }
.q-row-dim { color: var(--c-primary); }
.add-box { background: #FAF8F3; border-radius: 8px; padding: 14px 12px; margin-bottom: 12px; }
.switch-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

/* ── 三列权限开关（模块 × 家长/内部/管理员）── */
.perm-head-3, .perm-row.perm-row-3 {
  grid-template-columns: 1fr 44px 44px 44px;
}
.perm-row.perm-row-3 { align-items: center; }
.perm-head-3 { grid-template-columns: 1fr 44px 44px 44px; }
.sw.sw-sm { width: 38px; height: 22px; border-radius: 11px; }
.sw.sw-sm .sw-knob { width: 18px; height: 18px; top: 2px; left: 2px; }
.sw.sw-sm.on .sw-knob { left: 18px; }
/* 内部专用模块：家长列开关为锁定态，点了也无效 */
.sw.sw-locked {
  background: repeating-linear-gradient(45deg, #E4DFD5 0 4px, #EDE8DF 4px 8px);
  cursor: not-allowed; opacity: 0.9;
}
.sw.sw-locked .sw-knob { background: #F7F5F0; box-shadow: inset 0 0 0 1px #DDD8CE; }

/* ── 后台入口行 ── */
.entry-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; cursor: pointer;
}
.entry-row + .entry-row { border-top: 1px solid #F2EFE9; }
.entry-arrow { font-size: 20px; color: var(--c-ink-3); }

/* ── 成员管理 ── */
.member-row { padding: 12px 0; border-bottom: 1px solid #F2EFE9; }
.member-row:last-child { border-bottom: none; }
.member-head { display: flex; justify-content: space-between; align-items: center; }
.member-name { font-size: 14px; font-weight: 600; }
.member-meta { font-size: 12px; color: var(--c-ink-3); margin-top: 2px; }
.member-tag {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 10px; background: #EAF1ED; color: var(--c-primary); margin-left: 6px;
}
.member-tag.warn { background: #F7E9E6; color: var(--c-warn); }
.member-tag.mute { background: #F0EDE6; color: var(--c-ink-3); }
.member-perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.perm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--c-ink-2);
  background: #FAF8F3; border-radius: 8px; padding: 4px 8px; cursor: pointer;
  user-select: none;
}
.perm-chip input { width: 14px; height: 14px; accent-color: var(--c-primary); }
.perm-chip.on { background: #EAF1ED; color: var(--c-primary); }
/* 管理员专属位：固定不可勾选，视觉上退到最弱 */
.perm-chip.lock { cursor: not-allowed; }
.perm-chip.lock input { cursor: not-allowed; opacity: .55; }
.perm-chip.lock:not(.on) { background: #F4F1EB; color: var(--c-ink-3); }
.perm-chip.lock.on { background: #EAF1ED; color: var(--c-primary); opacity: .75; }
.lock-note { color: var(--c-ink-2); }
.member-ops { margin-top: 8px; display: flex; gap: 2px; align-items: center; }
.role-select {
  font-size: 12px; padding: 4px 6px; border: 1px solid #E3DFD6;
  border-radius: 6px; background: #fff; color: var(--c-ink);
}
.self-note { font-size: 11px; color: var(--c-ink-3); }
.uid-text { font-size: 11px; color: var(--c-ink-3); word-break: break-all; }

/* ── C 端顾问等待卡 ── */
.wait-icon { font-size: 34px; text-align: center; margin-bottom: 6px; }

/* ── 同意页 ── */
.intro-p { font-size: 13px; color: var(--c-ink-2); margin-bottom: 8px; }
.ci { padding: 10px 0; border-bottom: 1px solid #F2EFE9; cursor: pointer; }
.ci:last-child { border-bottom: none; }
.ci-head { display: flex; align-items: center; gap: 8px; }
.ci-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid #C9C4BA; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
}
.ci-box.on { background: var(--c-primary); border-color: var(--c-primary); }
.ci-name { font-size: 14px; font-weight: 600; }
.ci-req { font-size: 10px; border-radius: 4px; padding: 1px 5px; background: #F1EEE6; color: var(--c-ink-3); }
.ci-req.on { background: #F7E8E4; color: var(--c-warn); }
.ci-body { margin: 6px 0 0 26px; }
.ci-line { display: flex; font-size: 12px; margin-bottom: 2px; }
.ci-k { color: var(--c-ink-3); width: 34px; flex: none; }
.ci-v { color: var(--c-ink-2); flex: 1; }
.toggle-all { font-size: 12px; color: var(--c-primary); cursor: pointer; padding: 2px 8px; border: 1px solid var(--c-line); border-radius: 6px; }
.doc-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #F2EFE9;
  cursor: pointer; font-size: 14px;
}
.doc-link:last-child { border-bottom: none; }
.doc-arrow { color: var(--c-ink-3); }
.consent-warn { border: 1px solid #EBC8B8; }
.consent-ok { display: flex; align-items: center; gap: 8px; }
.co-tick { color: var(--c-primary); font-weight: 600; }
.co-text { font-size: 13px; flex: 1; }
.co-link { font-size: 12px; color: var(--c-primary); cursor: pointer; }
.cw-head { display: flex; align-items: center; gap: 8px; }
.cw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.cw-title { font-weight: 600; font-size: 15px; }

/* ── 作答页 ── */
.q-progress { font-size: 12px; color: var(--c-ink-3); }
.progress-track { height: 4px; background: #EAE6DC; border-radius: 2px; margin-top: 6px; }
.progress-fill { height: 100%; background: var(--c-primary); border-radius: 2px; transition: width 0.2s; }
.q-text { font-size: 17px; font-weight: 600; margin: 8px 0 4px; }
.q-dim { font-size: 12px; color: var(--c-primary-light); }
.opt {
  display: flex; align-items: center; gap: 10px;
  background: var(--c-card); border-radius: 10px;
  padding: 13px 16px; margin: 8px 14px;
  cursor: pointer; font-size: 14px;
  border: 1.5px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.opt.picked { border-color: var(--c-primary); background: var(--c-primary-pale); }
.opt-key {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: #F1EEE6; color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.opt.picked .opt-key { background: var(--c-primary); color: #fff; }

/* ── 历史记录 ── */
.hist-row { padding: 12px 0; border-bottom: 1px solid #F2EFE9; cursor: pointer; }
.hist-row:last-child { border-bottom: none; }
.hist-score { font-size: 20px; font-weight: 600; color: var(--c-primary); }

/* ── 协议页 ── */
.sec { margin-bottom: 14px; }
.sec-t { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.sec-b { font-size: 13px; color: var(--c-ink-2); white-space: pre-wrap; }

/* ── 登录页 ── */
.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; }
.code-btn {
  flex: none; border: none; border-radius: 8px;
  background: var(--c-primary-pale); color: var(--c-primary);
  font-size: 13px; padding: 0 14px; cursor: pointer;
}
.code-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 底部 ── */
.foot-links { text-align: center; padding: 14px 0 4px; font-size: 12px; color: var(--c-ink-3); }
.foot-links a { color: var(--c-ink-2); }
.foot-links .sep { margin: 0 6px; }
.foot-note { font-size: 11px; color: var(--c-ink-3); margin-top: 10px; line-height: 1.7; }
.safe-bottom { height: max(env(safe-area-inset-bottom), 20px); }

/* ── toast ── */
.bzx-toast {
  position: fixed; left: 50%; bottom: 12%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(44, 42, 38, 0.92); color: #fff;
  border-radius: 8px; padding: 9px 18px;
  font-size: 13px; max-width: 80vw;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 999;
}
.bzx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bzx-toast.ok { background: rgba(61, 107, 92, 0.95); }

/* ── 加载中 ── */
.loading { text-align: center; color: var(--c-ink-3); font-size: 13px; padding: 30px 0; }

/* ── 专属二维码 / 我的客户 ── */
.qr-box {
  background: #fff; border: 1px solid #EFEAE0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qr-svg svg { width: 100%; height: 100%; display: block; }
.ref-chip {
  display: inline-block; background: var(--c-primary-pale); color: var(--c-primary);
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  padding: 5px 14px; border-radius: 999px;
}
.qr-step { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--c-ink-2); }
.qr-step-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.qr-stats { display: flex; gap: 12px; margin: 12px 0; }
.qr-stat {
  flex: 1 1 0; min-width: 0; background: #FAF8F3; border-radius: 10px;
  text-align: center; padding: 14px 0;
}
.qr-stat-num { font-size: 24px; font-weight: 700; color: var(--c-primary); }
.qr-stat-label { font-size: 12px; color: var(--c-ink-3); margin-top: 2px; }

/* ── 后台量表配置编辑 ── */
.config-sec { padding: 14px 0; border-bottom: 1px solid #F2EFE9; }
.config-sec:last-of-type { border-bottom: none; }
.config-sec-t { font-size: 14px; font-weight: 600; margin-bottom: 6px; }

/* ── 后台：每个编辑板块标题行 + 本板块独立「保存」按钮 ── */
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sec-head .config-sec-t { margin-bottom: 0; }
.sec-save {
  flex: none; font-family: inherit; font-size: 12px; line-height: 1;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c-primary); background: transparent; color: var(--c-primary);
}
.sec-save:active { background: rgba(0, 0, 0, .05); }
.cfg-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.cfg-row .input { flex: 1; padding: 8px 10px; font-size: 13px; min-width: 0; }
.cfg-row .tool-btn { flex: none; }

/* ── 基础信息表字段编辑行（可换行：第二行放选项） ── */
.cfg-field-row { flex-wrap: wrap; }
.cfg-field-row .cf-label { flex: 2; }
.cfg-field-row .cf-type { flex: 1; min-width: 74px; }
.cfg-field-row .cf-req { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-ink-2); flex: none; white-space: nowrap; }
.cfg-field-row .cf-req input { width: 16px; height: 16px; }
.cfg-field-row .cf-options { flex-basis: 100%; }

/* ── 维度计分规则编辑（维度名称 · 对应题号 · 维度总分 · 三档区间得分）── */
.band-block { border: 1px solid #F2EFE9; border-radius: 10px; padding: 10px; margin-bottom: 12px; background: #FBFAF7; }
.band-block .dt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.band-block .dt-head-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 8px 0 2px; padding: 7px 9px;
  background: #F4F7F4; border-radius: 8px;
  font-size: 12px; color: var(--c-ink-2);
}
.dt-meta-item { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
/* 手填字段：对应题号 / 维度总分。留空 = 按题库自动汇总，placeholder 灰字就是自动值 */
.dt-meta input.input {
  flex: 0 0 auto; padding: 4px 7px; font-size: 12px; line-height: 1.4;
  background: #fff; border: 1px solid var(--c-line); border-radius: 6px; color: var(--c-ink);
}
.dt-meta .dt-qnos { width: 132px; min-width: 90px; }
.dt-meta .dt-total { width: 86px; }
.dt-meta input.input::placeholder { color: var(--c-ink-3); }
.dt-meta input.input:focus { border-color: var(--c-primary); outline: none; }
.dt-meta-manual { color: var(--c-primary); font-weight: 600; }
.dt-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 2px; }
.dt-sub-t { font-size: 12.5px; font-weight: 600; color: var(--c-ink); }
.bd-sep { flex: none; color: var(--c-ink-3); font-size: 12px; }
.band-row { padding: 10px 0; border-bottom: 1px dashed #EFEAE0; }
.band-row:last-of-type { border-bottom: 0; }
.band-row textarea { min-height: 46px; font-size: 13px; margin-top: 6px; }
.band-row .bd-num, .cfg-row .bd-num { flex: 0 0 68px; }
/* 小屏适配：区间行控件多（最低分 + 分隔符 + 最高分 + 档位 + 删），
   手机上一行放不下会横向溢出并把「档位」压到几十像素、文字被裁。
   故允许换行，并给档位保底 96px —— 宁可换成两行，也不压扁选择框。 */
.band-row .cfg-row { flex-wrap: wrap; }
.band-row .cfg-row .bd-num { flex: 0 0 58px; }
.band-row .cfg-row .bd-label { flex: 1 1 140px; min-width: 96px; }
/* 等级色块：跟着等级名走（自定义名按语义猜色，与折线图/雷达图同一套色调） */
.bd-tone { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #B9B3A8; }
.bd-tone[data-tone="best"] { background: #3D6B5C; }
.bd-tone[data-tone="good"] { background: #5B8C7B; }
.bd-tone[data-tone="warn"] { background: #C4584B; }
.band-note { font-size: 12px; color: var(--c-ink-3); margin-bottom: 4px; }

/* ── 维度折线图（家长端第二张图：区间色带 + 折线）── */
.line-wrap { padding: 8px 0 2px; }
.line-svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.line-svg text { font-family: inherit; }
.line-legend, .cmp-legend {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 10px; font-size: 11.5px; color: var(--c-ink-2);
}
.lg-item { display: inline-flex; align-items: center; gap: 5px; }
.lg-band { width: 12px; height: 9px; border-radius: 2px; flex: none; }
.lg-band-warn { background: #FBF0ED; border: 1px solid #EBD5CF; }
.lg-band-good { background: #F8F2E9; border: 1px solid #E8DCC8; }
.lg-band-best { background: #EDF4EF; border: 1px solid #CFE0D5; }
.lg-line { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.lg-line-dash { background-image: linear-gradient(90deg, #2F4A40 0 5px, transparent 5px 9px); }
.lg-ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; flex: none; }

/* ── 历史对比分析 ── */
.cmp-group { margin-top: 14px; border-top: 1px solid #F2EFE9; padding-top: 12px; }
.cmp-group:first-of-type { border-top: 0; padding-top: 6px; }
.cmp-head { align-items: baseline; }
.cmp-name { font-size: 14px; font-weight: 600; }
.cmp-summary { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 2px; }
.sm-item {
  font-size: 11.5px; color: var(--c-ink-2);
  background: #F7F4EE; border-radius: 8px; padding: 3px 9px;
}
.sm-up { color: var(--c-warn); background: #FBF0ED; }
.sm-down { color: var(--c-primary); background: #EDF4EF; }
.cmp-block-t { font-size: 12.5px; font-weight: 600; color: var(--c-ink); margin: 12px 0 2px; }
.cmp-chart { margin-top: 4px; }
.dim-delta { margin-top: 6px; }
.dd-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px dashed #F2EFE9; font-size: 12.5px;
}
.dd-row:last-child { border-bottom: none; }
.dd-name { flex: 1 1 auto; min-width: 0; color: var(--c-ink); }
.dd-track { flex: 0 0 62px; height: 6px; border-radius: 3px; background: #F2EFE9; overflow: hidden; }
.dd-fill { display: block; height: 100%; border-radius: 3px; }
.dd-num { flex: none; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.dd-badge { flex: none; width: 58px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── 基础信息表：多选选项组 ── */
.multi-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-ink); padding: 8px 2px; }
.multi-opt input { width: 18px; height: 18px; flex: none; }

/* ── 成员数据总览 ── */
.member-stat-row { padding: 9px 0; border-bottom: 1px solid #F2EFE9; cursor: pointer; }
.member-stat-row:last-child { border-bottom: none; }
.member-stat-detail { padding: 8px 0 4px 12px; border-left: 2px solid #F2EFE9; margin: 4px 0 8px; }

/* ── 量表封面图 / 详情图 ── */
/* 首页卡片封面：固定 16:9 画框，图片完整居中展示（不裁切内容），
   卡片高度因此保持一致；同色底让长图/方图两侧的留白不突兀。 */
.scale-cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
  background: #F5F2EC; border-radius: 12px; display: block; margin-bottom: 12px;
}
.detail-img { width: 100%; border-radius: 10px; display: block; background: #F5F2EC; min-height: 80px; }
.detail-img + .detail-img { margin-top: 10px; }

/* 图片加载态与失败态（由 js/app.js 的 watchImages 打标记）：
   加载中给一块呼吸底色，避免「先塌陷后撑开」的跳动；
   失败（重试过一次仍失败）直接收起，不留破图。 */
.scale-cover[data-img-loading], .detail-img[data-img-loading], .admin-img-thumb[data-img-loading] {
  background: linear-gradient(100deg, #F5F2EC 30%, #EFEBE3 50%, #F5F2EC 70%);
  background-size: 220% 100%;
  animation: imgBreathe 1.1s linear infinite;
}
@keyframes imgBreathe { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.scale-cover[data-img-fail], .detail-img[data-img-fail], .admin-img-thumb[data-img-fail] { display: none; }
.admin-img-thumb { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; border: 1px solid #F2EFE9; display: block; background: #FBFAF7; }
.dimg-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.dimg-row .admin-img-thumb { flex: 1; max-height: 120px; }
.dimg-tools { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: none; }

/* ══════════════════════════════════════════════════════════
   主视觉图（全站每页顶部可配）—— .hero[data-t-img] 命中后加 .has-bg
   背景图直接铺在 .hero 上；再用一记巨大的 inset 阴影盖一层同色遮罩，
   阴影在背景之上、内容之下，白字永远可读，且不引入任何 z-index 层级问题。
   ══════════════════════════════════════════════════════════ */
.hero {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  position: relative;
}
.hero.has-bg {
  box-shadow: inset 0 0 0 2000px rgba(24, 48, 40, var(--hero-veil, .55));
}
.hero.has-bg .hero-title { text-shadow: 0 1px 8px rgba(0, 0, 0, .30); }
.hero.has-bg .hero-sub { text-shadow: 0 1px 6px rgba(0, 0, 0, .26); }
.hero.has-bg .hero-badge { background: rgba(255, 255, 255, .20); }

/* 结果页 hero 是圆角卡片式，主视觉图同样适用 */
.result-hero.has-bg { box-shadow: inset 0 0 0 2000px rgba(24, 48, 40, var(--hero-veil, .55)); }

/* 底部品牌图 */
.trust-img { width: 100%; border-radius: 12px; display: block; margin: 12px 0 4px; }

/* ══════════════════════════════════════════════════════════
   独立登录页（全屏）
   ══════════════════════════════════════════════════════════ */
.login-page {
  min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(165deg, #35594C 0%, #4E7F6D 55%, #6E9A86 100%);
  position: relative; overflow: hidden;
}
.login-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(var(--hero-blur, 0px)); transform: scale(1.06);
}
.login-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(22,44,37,var(--hero-veil, .62)) 0%, rgba(22,44,37,var(--hero-veil, .62)) 100%);
}
/* 没设背景图时，背景层完全让位给 .login-page 自己的渐变 */
.login-bg:not(.has-bg) { filter: none; }
.login-bg:not(.has-bg)::after { display: none; }
.login-inner {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 44px 22px 28px; max-width: 480px; width: 100%; margin: 0 auto;
}
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand-mark {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 12px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; backdrop-filter: blur(4px);
}

/* 顶部品牌 LOGO（后台可上传）：上传后替代上面的「知」字方块；未上传时整块隐藏 */
.login-brand-logo {
  display: none; width: auto; height: auto;
  max-width: 78%; max-height: 88px; margin: 0 auto 14px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.28));
}
.login-brand-logo[src] { display: block; }
.login-brand-logo[src] + .login-brand-mark { display: none; }
.login-brand-name { font-size: 19px; font-weight: 600; color: #fff; letter-spacing: 2px; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.login-brand-slogan { font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 6px; letter-spacing: .5px; }
.login-card {
  background: rgba(255,255,255,.97); border-radius: 16px;
  padding: 24px 20px 20px; box-shadow: 0 12px 40px rgba(20,40,33,.22);
}
.login-card .hero-title { color: var(--c-ink); font-size: 21px; }
.login-card .hero-sub { color: var(--c-ink-2); opacity: 1; font-size: 12.5px; margin-top: 6px; }
.login-card-head { margin-bottom: 18px; }
.login-page .foot-links { text-align: center; padding: 16px 0 6px; }
.login-page .foot-links a { color: rgba(255,255,255,.82); }
.login-page .foot-links .sep { color: rgba(255,255,255,.45); }
.login-page .foot-links .foot-note { color: rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════════════
   我的信息页
   ══════════════════════════════════════════════════════════ */
.acct-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #F4F1EB; font-size: 14px;
}
.acct-row:last-child { border-bottom: none; }
.acct-k { color: var(--c-ink-3); font-size: 13px; flex: none; }
.acct-v { color: var(--c-ink); text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }
.acct-v.mono-v { font-family: Consolas, Menlo, monospace; font-size: 12.5px; color: var(--c-ink-2); }
.ref-box {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: var(--c-primary-pale); text-align: center;
}
.ref-box-k { font-size: 11.5px; color: var(--c-primary); }
.ref-box-v {
  font-family: Consolas, Menlo, monospace; font-size: 20px; font-weight: 700;
  color: var(--c-primary); letter-spacing: 3px; margin-top: 2px;
}
.profile-logout { margin-top: 16px; }

/* ══════════════════════════════════════════════════════════
   我的客户与二维码（合并页）
   ══════════════════════════════════════════════════════════ */
.qr-hero-card { text-align: center; }
.qr-steps-card .qr-step:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   后台「页面文案与主视觉」编辑区
   ══════════════════════════════════════════════════════════ */
.tx-page { border: 1px solid #F2EFE9; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.tx-page-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #F7F4EE; cursor: pointer;
}
.tx-page-name { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.tx-page-file { font-size: 11px; color: var(--c-ink-3); font-family: Consolas, Menlo, monospace; }
.tx-page-count {
  flex: none; font-size: 11px; color: var(--c-primary);
  background: var(--c-primary-pale); border-radius: 999px; padding: 1px 9px;
}
.tx-page-body { padding: 4px 12px 12px; display: none; }
.tx-page.open .tx-page-body { display: block; }
.tx-sec {
  font-size: 12px; font-weight: 600; color: var(--c-primary);
  margin: 14px 0 8px; padding-left: 8px; border-left: 3px solid var(--c-primary-pale);
}
.tx-row { margin-bottom: 12px; }
.tx-label { font-size: 12.5px; color: var(--c-ink-2); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.tx-key { font-size: 10.5px; color: var(--c-ink-3); font-family: Consolas, Menlo, monospace; }
.tx-changed {
  font-size: 10px; color: #fff; background: var(--c-accent);
  border-radius: 3px; padding: 0 5px; flex: none;
}
.tx-hint { font-size: 11px; color: var(--c-ink-3); margin-top: 4px; line-height: 1.55; }
.tx-img-row { display: flex; gap: 10px; align-items: flex-start; }
.tx-img-prev {
  width: 108px; height: 74px; flex: none; border-radius: 8px; border: 1px solid #EDE9E1;
  background: #FBFAF7 center/cover no-repeat; position: relative; overflow: hidden;
}
.tx-img-prev.empty::after {
  content: '未设置'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: var(--c-ink-3);
}
.tx-img-tools { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* 内嵌图片字段的状态行（后台）：告诉管理员这张图存在配置里、未登录也看得见 */
.tx-inline-note {
  font-size: 11px; line-height: 1.5; color: var(--c-ink-3);
  background: #FBFAF7; border: 1px dashed #EDE9E1; border-radius: 6px;
  padding: 5px 8px; word-break: break-all;
}
.tx-inline-note.on { color: var(--c-primary); border-color: rgba(78,127,109,.35); background: rgba(78,127,109,.06); }
.tx-img-btns { display: flex; gap: 8px; }
.tx-img-btns .btn { flex: 1; padding: 7px 0; font-size: 12.5px; }
.tx-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tx-switch-row .tx-label { margin: 0; }
.tx-sw {
  flex: none; width: 46px; height: 26px; border-radius: 999px; background: #DCD7CD;
  position: relative; cursor: pointer; transition: background .18s;
}
.tx-sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.tx-sw.on { background: var(--c-primary); }
.tx-sw.on::after { transform: translateX(20px); }
.tx-toolbar { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; }
.tx-toolbar .btn { flex: 1; }

/* 超窄屏（320～374px）：图片预览收窄，给「上传图片 / 清除」两个按钮留出呼吸空间，
   避免按钮被压到 54px 时四字按钮贴边 */
@media (max-width: 374px) {
  .tx-img-row { gap: 8px; }
  .tx-img-prev { width: 84px; height: 66px; }
  .tx-img-btns { gap: 6px; }
  .tx-img-btns .btn { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════
   页面主视觉图位的「空态」提示（仅后台可见，家长端不出现）
   ══════════════════════════════════════════════════════════ */

/* 作答页顶部窄幅主视觉（只有配了图才出现，平时完全不占位、不打扰作答） */
.slim-hero {
  display: none; padding: 14px 20px 16px; margin-bottom: 2px;
}
.slim-hero.has-bg { display: block; }
.slim-hero .hero-title { font-size: 17px; }

/* ══════════════════════════════════════════════════════════
   卡片背景图（首页列表卡片 / 问卷介绍卡）
   加一层浅色蒙版 —— 无论配什么底图，深色文字都保持清楚
   ══════════════════════════════════════════════════════════ */
.bg-card {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.bg-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--card-veil, .86));
  pointer-events: none;
}
.bg-card > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   后台「基础信息表」字段行（两行式：字段名 / 类型 / 排序 + 用途 / 必填）
   ══════════════════════════════════════════════════════════ */
.cfg-field-row {
  border: 1px solid #F2EFE9;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #FBFAF7;
}
.cfg-field-row .cfg-row { margin-bottom: 6px; }
.cfg-field-row .cfg-row:last-child { margin-bottom: 0; }
.cfg-field-row .cf-options { width: 100%; margin-top: 6px; }
.cfg-field-row .cf-req {
  flex: none; font-size: 12px; color: var(--c-ink-2); white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.cfg-field-row .cf-req input { width: 16px; height: 16px; }
.cf-move { font-size: 14px; padding: 4px 7px; }

/* ══════════════════════════════════════════════════════════
   「我的客户」客户卡片（手机号 + 状态 + 可展开测评记录）
   ══════════════════════════════════════════════════════════ */
.cust-card { cursor: pointer; margin-bottom: 10px; }
.cust-card-open { border-color: var(--c-primary-light); }
.cust-phone-wrap { min-width: 0; }
.cust-phone {
  font-size: 16px; font-weight: 600; color: var(--c-ink);
  letter-spacing: .5px; text-decoration: none; word-break: break-all;
}
.cust-phone-none { font-size: 14px; font-weight: 500; color: var(--c-ink-3); }
.cust-tags { flex: none; display: flex; gap: 6px; align-items: center; }
.tag-ok { background: #E4EFE8; color: var(--c-primary); }
.cust-row-name { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.cust-rows { margin-top: 8px; border-top: 1px dashed #EFEBE3; }
.cust-row {
  padding: 10px 2px; border-bottom: 1px dashed #F3F0EA; cursor: pointer;
}
.cust-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.cust-row:active { background: #FBFAF7; }

/* 历史测评：范围切换（我的 / 我的客户 / 全部数据） */
.scope-bar { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.scope-btn {
  flex: 1 1 auto; min-width: 84px; text-align: center; font-size: 13px;
  padding: 7px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid #E7E2D8; background: #FFFFFF; color: var(--c-ink-2);
}
.scope-btn.scope-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.rec-owner { font-size: 12px; color: var(--c-ink-3); }
/* 测评记录行：量表名 + 测评人 + 时间（这一屏不显示分数，分数在报告页） */
.rec-name { font-size: 15px; font-weight: 600; line-height: 1.5; }
.rec-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.rec-k { font-size: 12px; color: var(--c-ink-3); }
.rec-v { font-size: 13px; color: var(--c-ink-2); margin-right: 2px; }

/* ══════════════════════════════════════════════════════════
   底部一级导航（首页 / 测评记录 / 我的）—— 登录后的主框架
   三个一级菜单横向铺满，当前页高亮；页面放 <nav id="tabbar"></nav>
   后由 app.renderTabbar() 渲染（未开放的模块置灰不可点）
   ══════════════════════════════════════════════════════════ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 14px rgba(60, 50, 35, 0.05);
}
.tab-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 0 7px; font-size: 11px; line-height: 1.2;
  color: var(--c-ink-3); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tab-item .tab-ico { display: block; width: 22px; height: 22px; }
.tab-item svg { width: 22px; height: 22px; display: block; }
.tab-item:active { opacity: 0.7; }
.tab-on { color: var(--c-primary); font-weight: 600; }
.tab-off { opacity: 0.42; }
/* 有底部导航时正文让出一条道，页尾链接与最后一张卡不会被压住 */
body.has-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
body.has-tabbar .safe-bottom { display: none; }

/* ══════════════════════════════════════════════════════════
   「我的」顶部身份卡（登录模块 + 我的信息，合并在一张卡里）
   ══════════════════════════════════════════════════════════ */
.me-head { display: flex; align-items: center; gap: 14px; }
.me-avatar {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(150deg, #4E7F6D 0%, #3D6B5C 100%);
  color: #fff; font-size: 20px; font-weight: 600; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
}
.me-avatar.guest { background: #EDE9E1; color: #B6B0A5; font-size: 24px; font-weight: 400; }
.me-main { flex: 1 1 auto; min-width: 0; }
.me-title { font-size: 18px; font-weight: 600; }
/* 「我的」卡只显示名称 + 手机号：不显示角色 / 身份 */
.me-name { font-size: 18px; font-weight: 600; line-height: 1.4; word-break: break-all; }
.me-sub {
  font-size: 13px; color: var(--c-ink-3); margin-top: 5px;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.me-tip { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.7; margin-top: 4px; }
.me-rows { margin-top: 14px; border-top: 1px solid #F2EFE9; }
.me-logout { margin-top: 16px; }

/* 手机号入口：卡片右侧的小按扣（未绑定 → 「绑定手机号」高亮；已绑定 → 「更换」素色） */
.me-op {
  flex: none; align-self: flex-start; margin-left: auto;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--c-line); background: #FBFAF7; color: var(--c-ink-2);
  font-size: 12.5px; line-height: 1.5; white-space: nowrap; cursor: pointer;
}
.me-op.primary { border-color: var(--c-primary); background: var(--c-primary-pale); color: var(--c-primary); font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   底部弹层（就地完成「绑定手机号」这类小操作）
   ══════════════════════════════════════════════════════════ */
.sheet-mask {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(28, 26, 22, 0.38);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 520px; box-sizing: border-box;
  background: var(--c-card);
  border-radius: 16px 16px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 28px rgba(60, 50, 35, 0.14);
  animation: sheet-up 0.22s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(18px); opacity: 0.55; }
  to { transform: none; opacity: 1; }
}
.sheet-title { font-size: 16px; font-weight: 600; }
.sheet-sub { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.7; margin: 6px 0 14px; }
.sheet .btn + .btn { margin-top: 10px; }

/* 功能入口行的标题（与 hint-line 说明搭配） */
.entry-title { font-size: 14px; font-weight: 600; }