/* ============================================================
   伽优美约课系统 · 手机端优先样式（品牌主色 #E03060）
   ------------------------------------------------------------
   设计原则（符合人的视角 / 手机人机工程）：
   1. 单列布局，内容居中，最大宽度 640px 后收边
   2. 所有可点元素 ≥ 44×44px（拇指命中率）
   3. 常用操作固定在拇指区（底部悬浮输入栏）
   4. 字号 16px 起（避免 iOS 输入框自动放大），行高 1.7
   5. 安全区适配：刘海屏顶部、全面屏底部横条
   6. 桌面端仍可用（居中卡片式），不是「只给手机看」
   ============================================================ */
:root {
  --brand: #E03060;
  --brand-dark: #C21F4C;
  --brand-light: #FDE8EE;
  --ink: #2B2B33;
  --ink-2: #5A5A66;
  --ink-3: #9A9AA6;
  --line: #EDEDF2;
  --bg: #F7F7FA;
  --white: #fff;
  --ok: #1FA463;
  --warn: #E08A1E;
  --danger: #D93B3B;
  --info: #2E7BE0;

  /* 安全区（刘海屏 / 全面屏底部横条） */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* 顶部栏高度（手机端用，供 body 预留） */
  --topbar-h: 52px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.7;
  overscroll-behavior-y: none;
}
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* ---------- 通用 ---------- */
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--ink-3); }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; background: var(--line); color: var(--ink-2);
}
.badge.brand { background: var(--brand-light); color: var(--brand); }
.badge.success { background: #E4F6EC; color: var(--ok); }
.badge.warning { background: #FDF0DE; color: var(--warn); }
.badge.info { background: #E4EFFC; color: var(--info); }
.badge.muted { background: var(--line); color: var(--ink-3); }

/* 按钮：手机端最小高度 48px */
.btn {
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  min-height: 48px; padding: 12px 20px; border-radius: 12px; font-size: 16px;
  transition: transform .06s, background .15s, border-color .15s;
  -webkit-appearance: none; appearance: none;
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-primary:active { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); min-height: 40px; padding: 8px 12px; }
.btn-sm { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.btn-block { display: block; width: 100%; }
.btn-voice { background: var(--brand-light); border-color: var(--brand-light); color: var(--brand); font-weight: 600; }

/* 输入框：字号 ≥16px 防止 iOS 自动放大 */
.input {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: 12px; font-size: 16px; background: var(--white); outline: none;
  transition: border-color .15s; -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(224,48,96,.08); }
.field label { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 7px; font-weight: 500; }

.banner { padding: 12px 15px; border-radius: 12px; font-size: 14px; }
.banner.danger { background: #FDECEC; color: var(--danger); }
.banner.info { background: #E4EFFC; color: var(--info); }

.card {
  background: var(--white); border-radius: 16px; padding: 16px;
  margin-bottom: 12px; box-shadow: 0 2px 10px rgba(40,40,60,.05);
}
.card-title { font-weight: 600; margin-bottom: 13px; font-size: 16px; }

.page-title { font-size: 20px; font-weight: 700; margin: 4px 0 14px; }

.empty { text-align: center; color: var(--ink-3); padding: 30px 0; font-size: 14px; }
.loading-block { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; }
.spinner {
  width: 28px; height: 28px; border: 3px solid var(--line);
  border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 表格：手机端改成「卡片式列表」，不横向滚动 */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; color: var(--ink-3); font-weight: 500; font-size: 13px;
  padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 11px 8px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: none; }

/* ---------- 首屏骨架 ---------- */
.boot-splash {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.boot-logo {
  width: 68px; height: 68px; border-radius: 20px; background: var(--brand); color: #fff;
  font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(224,48,96,.28); margin-bottom: 12px;
}
.boot-title { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.boot-sub { font-size: 13px; color: var(--ink-3); }

/* ---------- Toast（手机端顶部居中） ---------- */
.toast-wrap {
  position: fixed; left: 0; right: 0; top: calc(var(--sat) + 10px); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 14px;
}
.toast {
  background: rgba(43,43,51,.94); color: #fff; padding: 11px 18px;
  border-radius: 12px; font-size: 14px; max-width: 92%;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .25s;
  text-align: center;
}
.toast.error { background: rgba(217,59,59,.95); }
.toast.success { background: rgba(31,164,99,.95); }

/* ---------- 登录页（手机端全屏、单手可完成） ---------- */
.login-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 20px) 20px calc(var(--sab) + 20px);
  background: linear-gradient(160deg, #FDF3F6 0%, #F7F7FA 55%);
}
.login-card {
  width: 100%; max-width: 420px; background: var(--white); border-radius: 22px;
  padding: 32px 24px 26px; box-shadow: 0 12px 40px rgba(224,48,96,.10);
}
.login-logo {
  width: 64px; height: 64px; border-radius: 18px; background: var(--brand);
  color: #fff; font-size: 32px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  box-shadow: 0 8px 22px rgba(224,48,96,.25);
}
.login-title { text-align: center; font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.login-sub { text-align: center; color: var(--ink-3); font-size: 13px; margin-bottom: 24px; line-height: 1.6; }
.demo-accounts { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.demo-accounts-title { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; text-align: center; }
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.demo-btn {
  min-height: 46px; padding: 10px 0; border: 1px solid var(--line); background: var(--white);
  border-radius: 12px; font-size: 14px; color: var(--ink-2); transition: all .15s;
}
.demo-btn:active { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

/* ---------- v1.5.6 落地安装通告（会员扫码进来先引导添加到桌面） ---------- */
.install-tip {
  background: var(--brand-light); border: 1px solid var(--brand);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; text-align: left;
}
.install-tip.hidden { display: none; }
.install-tip-title { font-size: 14.5px; font-weight: 700; color: var(--brand-dark); margin-bottom: 3px; }
.install-tip-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 10px; }
.install-tip-actions { display: flex; gap: 9px; }
.install-tip-actions .btn { flex: 1; }
.install-guide-wrap { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--brand); }
.install-guide-wrap.hidden { display: none; }
.install-guide { background: var(--white); border-radius: 9px; padding: 10px 11px; margin-bottom: 8px; }
.install-guide:last-child { margin-bottom: 0; }
.install-guide-warn { background: #FFF7E8; }
.install-guide-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.install-step { display: flex; gap: 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 4px; }
.install-step:last-child { margin-bottom: 0; }
.install-step-no {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  background: var(--brand); color: var(--white); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.install-mini { text-align: center; margin-top: 14px; }
.install-mini.hidden { display: none; }
.install-mini button {
  background: none; border: none; color: var(--ink-3); font-size: 12px;
  text-decoration: underline; padding: 4px 8px; cursor: pointer;
}

/* ---------- 顶部栏（手机端紧凑、粘顶、带安全区） ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: calc(var(--sat) + 8px) 14px 8px;
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--brand);
  color: #fff; font-size: 18px; font-weight: 700; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 15px; font-weight: 600; white-space: nowrap; }
.brand-sub { font-size: 11px; color: var(--ink-3); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-user { font-size: 13px; color: var(--ink-2); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 底部导航（手机端主视图切换，拇指区） */
.tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(var(--sab) + 6px);
}
.tab-btn {
  flex: 1; border: none; background: transparent; color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0; font-size: 11px; border-radius: 12px; transition: color .15s;
}
.tab-btn .tab-ico { font-size: 20px; line-height: 1; }
.tab-btn.active { color: var(--brand); font-weight: 600; }
.tab-btn:active { background: var(--brand-light); }

/* 桌面端顶部导航（手机端隐藏，改用 tabbar） */
.topbar-nav { display: none; }
.nav-btn {
  border: none; background: transparent; color: var(--ink-2);
  padding: 8px 14px; border-radius: 9px; font-size: 14px; transition: all .15s;
}
.nav-btn:hover { background: var(--bg); }
.nav-btn.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }

.main {
  flex: 1; padding: 14px 14px 8px; width: 100%; max-width: 640px; margin: 0 auto;
}
/* 有底部 tabbar 时给内容留位 */
.has-tabbar .main { padding-bottom: calc(var(--sab) + 74px); }

/* ---------- 会员端（聊天） ---------- */
.member-wrap { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - 90px); }
.hero { text-align: center; margin: 6px 0 14px; }
.hero-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.hero-sub { font-size: 13px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }

/* ---------- 语种切换条（会员端顶部胶囊） ---------- */
.lang-bar {
  display: flex; gap: 8px; margin: 0 0 12px;
  overflow-x: auto; padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.lang-bar::-webkit-scrollbar { display: none; }
.lang-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  min-height: 42px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2);
  font-size: 14px; font-weight: 500; transition: all .15s; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.lang-pill:active { transform: scale(.96); }
.lang-pill.active {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px rgba(224,48,96,.28);
}
.lang-flag { font-size: 15px; line-height: 1; }

/* ---------- 转人工动作区（打电话 / 加微信 / 导航） ---------- */
.handoff-box {
  margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line);
}
.handoff-title { font-size: 13.5px; color: var(--ink-3); margin-bottom: 9px; }
.handoff-actions { display: flex; flex-direction: column; gap: 8px; }
.act-btn {
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: #FAFAFC; color: var(--ink);
  font-size: 14.5px; font-weight: 500; text-decoration: none; text-align: left;
  transition: all .15s; -webkit-tap-highlight-color: transparent; cursor: pointer;
  width: 100%; font-family: inherit;
}
.act-btn:active { transform: scale(.98); }
.act-call { background: var(--brand-light); border-color: rgba(224,48,96,.28); color: var(--brand-dark); }
.act-wechat { background: #ECFBF0; border-color: rgba(7,193,96,.3); color: #0A7A42; }
.act-route { background: #EEF4FF; border-color: rgba(45,101,220,.25); color: #1D4FC4; }
.act-ico { font-size: 17px; flex: 0 0 auto; line-height: 1; }
.act-label { flex: 1; }
.act-val {
  flex: 0 0 auto; font-size: 12.5px; opacity: .78;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.handoff-hours { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.6; }

/* 屏幕阅读器 / 临时 textarea 隐藏（复制降级用） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* TTS 朗读开关：开着才显示为品牌色 */
.btn-icon.btn-tts.on { background: var(--brand-light); border-color: rgba(224,48,96,.3); color: var(--brand); }

/* 快捷问题：横向滑动条，拇指一划到底 */
.chips {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--white); color: var(--ink-2);
  min-height: 40px; padding: 9px 15px; border-radius: 999px; font-size: 14px;
  transition: all .15s; white-space: nowrap;
}
.chip:active { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.chip-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chip-primary:active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.chips.wrap { flex-wrap: wrap; overflow: visible; justify-content: center; }

/* 消息气泡 */
.chat-log {
  flex: 1; overflow-y: auto; padding: 4px 2px 8px;
  display: flex; flex-direction: column; gap: 14px;
  -webkit-overflow-scrolling: touch;
}
.msg { display: flex; gap: 9px; align-items: flex-start; }
.msg.user { flex-direction: row-reverse; }
.msg-avatar {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  background: var(--brand-light); color: var(--brand);
}
.msg.user .msg-avatar { background: #E8EAF0; color: var(--ink-2); }
.msg-body {
  background: var(--white); padding: 12px 15px; border-radius: 14px;
  max-width: calc(100% - 58px); font-size: 15.5px; line-height: 1.75;
  box-shadow: 0 2px 8px rgba(40,40,60,.05); word-break: break-word;
}
.msg-text { white-space: pre-wrap; }
.msg.user .msg-body { background: var(--brand); color: #fff; white-space: pre-wrap; }
.msg.user .msg-body { border-top-right-radius: 5px; }
.msg.bot .msg-body { border-top-left-radius: 5px; }
/* 带动作区的气泡可以更宽一点，按钮才有呼吸感 */
.msg.bot .msg-body:has(.handoff-box) { max-width: calc(100% - 58px); width: 100%; }

/* 语音不可用时的常驻提示（连续失败 2 次后出现） */
.voice-tip {
  margin: 12px 0 4px; padding: 11px 14px; border-radius: 12px;
  background: #fdf2f6; border: 1px solid #f3c9da;
  color: #9c4460; font-size: 13px; line-height: 1.7;
}
.voice-retest {
  display: inline-block; margin-top: 8px; padding: 6px 14px;
  border: 1px solid #e58fae; border-radius: 16px; background: #fff;
  color: #c04070; font-size: 12.5px; cursor: pointer;
}
.voice-retest:active { background: #fdf2f6; }
/* 教练端「完成上课」核销按钮 */
.chip-attend { border-color: var(--brand); color: var(--brand); margin-top: 6px; }

/* 底部输入栏：固定在拇指区，悬浮 + 安全区 */
.chat-bar {
  position: sticky; bottom: 0; z-index: 90;
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 0 calc(var(--sab) + 10px);
  background: linear-gradient(180deg, rgba(247,247,250,0) 0%, var(--bg) 35%);
}
.chat-input {
  flex: 1; min-width: 0; min-height: 48px; padding: 13px 16px; border: 1px solid var(--line);
  border-radius: 24px; font-size: 16px; outline: none; background: var(--white);
  transition: border-color .15s; -webkit-appearance: none; appearance: none;
  box-shadow: 0 2px 10px rgba(40,40,60,.06);
}
.chat-input:focus { border-color: var(--brand); }
/* 三个圆形动作键（🎤 语音 / 🔊 朗读 / 发送）：窄屏压缩尺寸保证都放得下 */
.btn-icon {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .06s, background .15s;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-icon:active { transform: scale(.94); }
.btn-icon.voice-on { background: var(--brand); border-color: var(--brand); color: #fff; animation: pulse 1.1s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,48,96,.45); }
  50% { box-shadow: 0 0 0 9px rgba(224,48,96,0); }
}
.btn-send {
  flex: 0 0 auto; min-width: 62px; height: 48px; border-radius: 24px;
  border: none; background: var(--brand); color: #fff; font-size: 15px; font-weight: 600;
  transition: transform .06s, background .15s;
  padding: 0 16px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-send:active { transform: scale(.96); background: var(--brand-dark); }

/* 超窄屏（≤360px）：三个键 + 输入框仍要留出可读宽度 */
@media (max-width: 360px) {
  .btn-icon { flex: 0 0 42px; width: 42px; height: 42px; font-size: 18px; }
  .btn-send { min-width: 54px; height: 44px; font-size: 14px; padding: 0 12px; }
  .chat-input { min-height: 44px; padding: 11px 13px; font-size: 15px; }
}

/* ---------- 统计 ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px;
}
.stat-card {
  background: var(--white); border-radius: 16px; padding: 15px 16px;
  box-shadow: 0 2px 10px rgba(40,40,60,.05);
}
.stat-card.wide { grid-column: 1 / -1; }
.stat-label { font-size: 13px; color: var(--ink-3); margin-bottom: 5px; }
.stat-value { font-size: 25px; font-weight: 700; color: var(--brand); line-height: 1.25; }
.stat-unit { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }

.bars { display: flex; align-items: flex-end; gap: 7px; height: 150px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bar {
  width: 62%; max-width: 34px; background: linear-gradient(180deg, var(--brand) 0%, #F2728F 100%);
  border-radius: 6px 6px 0 0; min-height: 3px; transition: height .3s;
}
.bar-val { font-size: 12px; color: var(--ink-2); margin-top: 5px; font-weight: 600; }
.bar-label { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ---------- 教练端 ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.slot {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px;
  text-align: center; background: #FCFCFE;
}
.slot-date { font-size: 12px; color: var(--ink-3); }
.slot-time { font-size: 16px; font-weight: 700; color: var(--brand); margin: 2px 0; }
.slot-type { font-size: 11px; color: var(--ink-3); }

/* ---------- 手机端卡片式列表（替代宽表格） ---------- */
.mlist { display: flex; flex-direction: column; gap: 9px; }
.mrow {
  border: 1px solid var(--line); border-radius: 13px; padding: 12px 13px;
  background: #FCFCFE;
}
.mrow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mrow-time { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mrow-line { display: flex; gap: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.mrow-k { color: var(--ink-3); flex: 0 0 auto; }

/* ---------- 对话记录 ---------- */
.conv-list { display: flex; flex-direction: column; gap: 9px; max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.conv-row { padding: 11px 12px; background: #FCFCFE; border-radius: 12px; font-size: 13.5px; }
.conv-q { color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.conv-a { color: var(--ink-3); }

/* ============================================================
   平板 / 桌面：内容居中收边，顶部导航回归，隐藏底部 tabbar
   ============================================================ */
@media (min-width: 721px) {
  .main { max-width: 860px; padding: 22px 22px 40px; }
  .topbar { padding: 12px 22px; gap: 16px; }
  .topbar-nav { display: flex; gap: 6px; margin-left: 8px; }
  .tabbar { display: none; }
  .has-tabbar .main { padding-bottom: 40px; }
  .topbar-user { max-width: none; }
  .member-wrap { min-height: calc(100vh - 150px); }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .login-card { padding: 36px 30px; }
  .chat-bar { position: static; background: none; padding: 0; }
  .chat-input { border-radius: 12px; }
  .btn-icon { border-radius: 12px; }
  .btn-send { border-radius: 12px; }
  .mlist { display: none; }
  .table-wrap { display: block; }
  .table-wrap.mobile-only { display: none; }
}
/* 手机端：宽表格滚动的兜底（尽量不用） */
@media (max-width: 720px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
  .msg-body { font-size: 15.5px; }
  .brand-sub { display: none; }
}

/* 深色系统偏好下仍保持浅色（企业内训场景统一视觉） */
@media (prefers-color-scheme: dark) {
  /* 保持浅色，不跟随系统，避免白底变黑导致品牌观感失控 */
}

/* ============================================================
   v1.4 四端统一工作台新增（首页 / 约课大厅 / 商城 / 弹窗选人）
   ============================================================ */

/* ---------- 首页工作台 ---------- */
.home-hero { padding: 6px 2px 14px; }
.home-hello { font-size: 22px; font-weight: 700; color: var(--ink); }
.home-sub { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; }
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 6px; }
.tile { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 14px; text-align: left; cursor: pointer; min-height: 92px; }
.tile:active { background: var(--brand-light); }
.tile-ico { font-size: 24px; }
.tile-name { font-weight: 600; font-size: 16px; margin-top: 6px; color: var(--ink); }
.tile-sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.home-tip { color: var(--ink-3); font-size: 13px; line-height: 1.7; background: var(--brand-light); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }

/* ---------- 约课大厅 ---------- */
.page-sub { color: var(--ink-3); font-size: 13px; margin: -4px 0 12px; }
.date-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; -webkit-overflow-scrolling: touch; }
.date-chip { flex: 0 0 auto; min-width: 68px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); text-align: center; cursor: pointer; }
.date-chip.active { background: var(--brand); border-color: var(--brand); }
.date-chip.active .date-d1, .date-chip.active .date-d2 { color: #fff; }
.date-d1 { font-size: 12px; color: var(--ink-3); }
.date-d2 { font-size: 15px; font-weight: 600; margin-top: 2px; color: var(--ink); }
.clist { display: flex; flex-direction: column; gap: 10px; }
.course-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; display: flex; gap: 12px; align-items: center; }
.course-main { flex: 1; min-width: 0; }
.course-title { font-weight: 600; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--ink); }
.course-meta { color: var(--ink-3); font-size: 13.5px; margin-top: 5px; line-height: 1.65; white-space: pre-line; }
.course-side { text-align: center; flex: 0 0 auto; }
.remain-num { font-size: 20px; font-weight: 700; color: var(--brand); }
.remain-label { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; }
.btn-book { min-width: 72px; }
.chip-cancel { background: #FDECEC; color: var(--danger); }

/* ---------- 商城 ---------- */
.mall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.mall-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mall-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.mall-desc { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; min-height: 30px; }
.mall-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mall-stock { font-size: 12px; color: var(--ink-3); }
.mall-stock.out { color: var(--danger); }
.mall-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.mall-points { color: var(--brand); font-weight: 700; font-size: 17px; }
.mall-na { font-size: 12px; color: var(--ink-3); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { min-width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); font-size: 15px; cursor: pointer; padding: 0 6px; }
.stepper button:not(.btn) { color: var(--ink); }
.stepper .qty-num { min-width: 18px; text-align: center; font-weight: 600; }

/* ---------- 弹窗（选人等） ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(17,20,28,.45); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--white); width: 100%; max-width: 560px; max-height: 78vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.modal-title { font-weight: 600; font-size: 16px; }
.modal-x { border: none; background: none; font-size: 16px; color: var(--ink-3); cursor: pointer; padding: 4px 8px; }
.modal-body { padding: 12px 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pick-list { margin-top: 10px; }
.member-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--white); cursor: pointer; text-align: left; }
.member-row:active { background: var(--brand-light); }
.member-name { font-weight: 600; color: var(--ink); }
.member-meta { color: var(--ink-3); font-size: 12.5px; }

@media (min-width: 721px) {
  .modal-mask { align-items: center; }
  .modal { border-radius: 18px; }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   v1.4.1 全端图标化 + 商城电商化（老黄 2026-10-06：
   四端看到的都是图标，点进去还有下一层图标；
   商城要照片位/价格/购买键/加减键，类似其他平台）
   ============================================================ */

/* ---------- 首页图标宫格（主视觉，类似支付宝/美团首页） ---------- */
.icon-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  background: var(--white); border-radius: 16px; padding: 14px 6px 10px;
  box-shadow: 0 2px 10px rgba(40,40,60,.05); margin-bottom: 14px;
}
.icon-item {
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 6px 2px; -webkit-tap-highlight-color: transparent;
}
.icon-bubble {
  width: 54px; height: 54px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; line-height: 1;
  box-shadow: 0 6px 14px rgba(40,40,60,.16);
  transition: transform .08s;
}
.icon-item:active .icon-bubble { transform: scale(.9); }
.icon-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }

/* ---------- 商城分类图标行（第二层图标：点首页「商城」进来再点分类） ---------- */
.cat-bar {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-item {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 2px 4px; -webkit-tap-highlight-color: transparent;
}
.cat-bubble {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  border: 2px solid transparent; transition: transform .08s, border-color .15s, box-shadow .15s;
}
.cat-item:active .cat-bubble { transform: scale(.92); }
.cat-item.active .cat-bubble {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
.cat-name { font-size: 11.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.cat-item.active .cat-name { color: var(--brand); font-weight: 600; }

/* ---------- 商品卡电商化：照片位 / 价格 / 加减键 / 购买键 ---------- */
.mall-card {
  padding: 0; overflow: hidden; gap: 0;
  box-shadow: 0 2px 10px rgba(40,40,60,.06);
}
/* 照片位：4:3，有图显示图，无图显示分类渐变占位 */
.mall-img { width: 100%; aspect-ratio: 4 / 3; position: relative; background: var(--line); }
.mall-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mall-img.ph { display: flex; align-items: center; justify-content: center; }
.mall-img-emoji { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.12)); }
.mall-img-tag {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 10px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,.88); color: var(--ink-3); backdrop-filter: blur(4px);
}
.mall-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
/* 名称最多两行截断，卡片高度整齐 */
.mall-name {
  font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mall-desc {
  color: var(--ink-3); font-size: 12px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 0;
}
/* 价格行：大字品牌色价格 + 库存（电商惯例：价格最醒目） */
.mall-priceline { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 2px; }
.mall-price { color: var(--brand); font-weight: 700; font-size: 20px; line-height: 1.2; }
.mall-rmb { font-size: 13px; font-weight: 600; margin-right: 1px; }
/* 购买行：加减键（圆形）+ 立即购买键（胶囊大按钮） */
.mall-buyrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.btn-buy {
  min-height: 36px; padding: 0 15px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--brand), #F2728F); color: #fff;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 10px rgba(224,48,96,.30);
  transition: transform .06s; flex: 0 0 auto;
}
.btn-buy:active { transform: scale(.95); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  min-width: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--brand); background: var(--white); color: var(--brand);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .06s, background .15s;
}
.stepper button:active { transform: scale(.9); background: var(--brand-light); }
.stepper .qty-num { min-width: 20px; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); }

/* 桌面端：宫格与商品网格适配 */
@media (min-width: 721px) {
  .icon-grid { grid-template-columns: repeat(6, 1fr); padding: 16px 10px 12px; }
  .icon-bubble { width: 60px; height: 60px; font-size: 30px; }
  .mall-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .cat-bubble { width: 50px; height: 50px; }
}

/* ==================== v1.5.0 防飞单风控 + 退费追回 ==================== */
/* 约课大厅/我的预约：登记课程、申请退费按钮行 */
.hall-actions { display: flex; gap: 8px; margin: 0 12px 10px; }
.hall-actions .btn { flex: 1; }
/* 登记弹窗：价格看板最低价红字警告 */
.floor-tip { color: #D93B3B; font-size: 12px; line-height: 1.5; background: #FDECEC; border-radius: 8px; padding: 7px 10px; margin: -2px 0 8px; }
.floor-tip.ok { color: #1E8E3E; background: #E8F5E9; }

/* 语音包安装入口（AI 助手 hero 区，跳官网 /voice/ 下载页） */
.voicepack-btn { display: inline-block; margin-top: 10px; padding: 9px 16px; border: 1.5px solid #E03060; color: #E03060; background: #fff; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.4; }
.voicepack-btn:active { background: #FDECF2; }

/* ==================== AI 页信息卡片（参考旧版移植，2026-10-07） ==================== */
/* 三张卡：我的会员信息 / 试试这样问 / 我能办这些事
   第三方接入时只换文案与数据，样式不动 */
.info-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.info-cards .card { margin-bottom: 0; }

/* 卡片头 / 卡片体（旧版 card-head + card-body 结构） */
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-body { display: block; }

/* 侧栏式列表：标题在左、值在右；能力清单用标题+说明两行 */
.side-list { display: flex; flex-direction: column; }
.side-item { padding: 9px 0; border-bottom: 1px solid var(--line); }
.side-item:last-child { border-bottom: none; padding-bottom: 0; }
.side-item:first-child { padding-top: 0; }
.side-item-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.side-item-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }

/* 通用小工具类（旧版同名，补齐以支持移植过来的结构） */
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fw-600 { font-weight: 600; }

/* 「试试这样问」的 chip 在卡片里换行铺满，不做横向滚动 */
.info-cards .chips { flex-wrap: wrap; overflow: visible; margin-bottom: 0; }

/* 桌面端：三张卡并排 */
@media (min-width: 721px) {
  .info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
}

/* ==================== v1.5.3 退费入口隐蔽化（老黄 2026-10-08） ==================== */
/* 「我的」页脚：混在页面底部的弱化入口，无按钮感、不引注意；
   点「其他服务 ›」展开后才出现「退费申请」，两级收敛 */
.refund-hidden { text-align: center; margin: 30px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.refund-hidden .refund-more {
  background: none; border: none; padding: 6px 12px; margin: 0 2px;
  color: var(--ink-3); font-size: 12px; line-height: 1.6; min-height: 0;
}
.refund-hidden .refund-more:active { color: var(--ink-2); }

/* ==================== v1.5.4 就近门店（老黄 2026-10-08） ==================== */
/* 约课大厅：门店 chips 横向滚动手选（主路径）；
   定位成功后按距离从近到远重排并显示里程。位置仅内存计算，不落库 */
.store-wrap { margin: 4px 0 2px; }
.store-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.store-title { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.locate-btn {
  background: var(--brand-light); color: var(--brand); border: none; border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 0;
}
.locate-btn:active { background: #FBD6E2; }
.store-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; }
.store-chip {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink-2); font-size: 13px; white-space: nowrap;
}
.store-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.store-chip .dist { font-size: 11px; opacity: .9; margin-left: 2px; }

/* ==================== v1.5.5 两级关联 + 关于系统 + 语音包面板 ==================== */
/* 二级页返回按钮 */
.sub-back { margin: 2px 0 8px; }
/* 二级图标略小一号，区分层级 */
.icon-bubble.sub { font-size: 22px; }
/* 门店条闪烁提示（二级图标「就近门店约课」带参进入） */
.store-wrap.flash { animation: storeFlash 0.9s ease-in-out 2; }
@keyframes storeFlash {
  0%, 100% { background: transparent; }
  50% { background: var(--brand-light); border-radius: 12px; }
}
/* 关于系统：页签 + 卡片 */
.about-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.about-tab {
  flex: 1; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.about-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.about-body { display: flex; flex-direction: column; gap: 10px; }
.about-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; }
.about-line { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; }
.about-check { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.update-ok { color: #1FA463; font-weight: 600; padding: 4px 0; }
.update-has { color: var(--brand); font-weight: 600; padding: 4px 0 10px; }
.about-chlog { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.about-chlog:last-child { border-bottom: none; }
.about-chlog-head { display: flex; align-items: baseline; gap: 8px; }
.about-ver { font-weight: 700; color: var(--brand); font-size: 14px; }
.about-chlog-body { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-top: 3px; }
.about-rule { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.about-rule:last-child { border-bottom: none; }
.about-rule-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.about-rule-body { font-size: 13px; color: var(--ink-2); line-height: 1.75; margin-top: 3px; }
/* AI 页语音包下载面板 */
.vp-panel { background: var(--white); border: 1px solid var(--brand-light); border-radius: 14px; padding: 13px 14px; margin-top: 10px; }
.vp-panel.hidden { display: none; }
.vp-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.vp-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin: 5px 0 8px; }
.vp-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--line); }
.vp-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.vp-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ============================================================
   v1.5.7 课程价格（官网 15 门卡项目录 · 7 大品类图标化）
   ============================================================ */
.catalog-cat { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.catalog-cat-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; color: var(--ink); }
.catalog-cat-ico {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--brand-light);
}
.catalog-list { display: flex; flex-direction: column; }
.catalog-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.catalog-list .catalog-row:last-child { border-bottom: none; padding-bottom: 2px; }
.catalog-course { min-width: 0; }
.catalog-name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.catalog-spec { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.catalog-price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.catalog-water { font-size: 16px; font-weight: 700; color: var(--ink); }
.catalog-promo { font-size: 18px; font-weight: 800; color: var(--brand); }
.catalog-rmb { font-size: 12px; font-weight: 600; }
.catalog-water-old { font-size: 12.5px; color: var(--ink-3); text-decoration: line-through; }
.catalog-tag {
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--brand);
  border-radius: 6px; padding: 1px 5px; transform: translateY(-1px);
}
.catalog-note { text-align: center; font-size: 12px; color: var(--ink-3); padding: 14px 0 20px; }

/* ===== v1.5.8 语音包面板：试听+下载双按钮 ===== */
.vp-acts { display: flex; gap: 8px; flex-shrink: 0; }
.vp-listen, .vp-dl { min-width: 64px; }