/* =========================================================
   外呼 H5 · 设计系统
   主色 科技蓝 #2F6BFF（与云外呼 LOGO 一致），强调色 珊瑚橙 #FF7A45
   由小程序 app.wxss 的 rpx 体系换算而来（1rpx = 0.5px）
   ========================================================= */

:root {
  --primary: #2F6BFF;
  --primary-dark: #2457D6;
  --primary-soft: #EAF0FF;
  --accent: #FF7A45;
  --accent-soft: #FFF0E9;
  --ink: #1A2333;
  --ink-2: #465368;
  --ink-3: #8A94A6;
  --line: #E8ECF4;
  --canvas: #F5F7FB;
  --amber: #F2A93B;
  --red: #E5484D;
  --blue: #2E6BE6;
  --tabbar-h: 58px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--canvas);
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ---------- 布局 ---------- */
.page { padding: 12px 14px 40px; }
.page-with-dial { padding-bottom: 132px; }
.page-with-tab { padding-bottom: calc(var(--tabbar-h) + 24px); }
.page-with-dial.page-with-tab { padding-bottom: calc(var(--tabbar-h) + 100px); }

.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.bold { font-weight: 600; }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gap { gap: 8px; }

/* ---------- 顶部导航 ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: rgba(245, 247, 251, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled { border-bottom-color: var(--line); }
.nav-btn {
  width: 34px; height: 34px;
  margin-left: -6px;
  border: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: var(--ink);
  flex: 0 0 34px;
}
.nav-btn:active { background: rgba(22, 36, 30, 0.06); }
.nav-title { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.nav-title.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 非主页统一的「主页」入口：图标 + 文字，比纯图标更好认 */
.nav-home {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px 0 8px;
  margin-left: 0;
  margin-right: -2px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.nav-home svg { display: block; flex: 0 0 auto; }
.nav-home:active { background: #D8E4FF; }

/* ---------- 卡片 ---------- */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(22, 36, 30, 0.05);
  overflow: hidden;
}
.card + .card { margin-top: 10px; }
.card-pad { padding: 13px 14px; }

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.section-title::before {
  content: '';
  width: 3px; height: 12px;
  border-radius: 3px;
  background: var(--primary);
}
.section-title.mt { margin-top: 16px; }

/* ---------- 今日问候概览（首页顶部） ---------- */
.hello {
  background: linear-gradient(150deg, #2457D6 0%, #2F6BFF 70%, #4C86FF 100%);
  border-radius: 14px;
  padding: 16px 15px 13px;
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 5px 15px rgba(47, 107, 255, 0.22);
}
.hello-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hello-name { font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.hello-sub { font-size: 11.5px; opacity: .8; margin-top: 3px; }
.hello-badge {
  text-align: right;
  background: rgba(255, 255, 255, .16);
  border-radius: 9px;
  padding: 5px 11px;
  flex: 0 0 auto;
}
.hello-badge-num { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hello-badge-label { font-size: 10.5px; opacity: .82; }
.hello-stats {
  display: flex;
  align-items: center;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hello-stat { flex: 1; text-align: center; }
.hello-stat-num { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hello-stat-label { font-size: 11px; opacity: .8; }
.hello-split { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); flex: 0 0 1px; }

/* ---------- 待补录提醒 ---------- */
.alert {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #FFF8EC;
  border: 1px solid #F7E3BE;
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 12px;
  text-decoration: none;
}
.alert-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #F2A93B;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 22px;
}
.alert-title { display: block; font-size: 13.5px; font-weight: 600; color: #8A6218; }
.alert-desc { display: block; font-size: 11px; color: #A8823F; margin-top: 2px; }
.alert-arrow { color: #C9A55E; display: flex; align-items: center; flex: 0 0 auto; }

/* ---------- 徽标 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.tag-green { background: var(--primary-soft); color: var(--primary); }
.tag-amber { background: #FDF3E3; color: #B8791A; }
.tag-red { background: #FDECEC; color: var(--red); }
.tag-gray { background: #F1F5F3; color: var(--ink-3); }
.tag-blue { background: #EAF1FE; color: var(--blue); }
.tag-accent { background: var(--accent-soft); color: var(--accent); }
.tag-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: 0 0 4px; }

/* ---------- 按钮 ---------- */
.btn-primary {
  height: 44px;
  width: 100%;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: opacity .15s;
}
.btn-primary:active { opacity: .82; }
.btn-primary[disabled] { background: #B9C4DC; }
.btn-ghost {
  height: 44px;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-ghost:active { background: #F7F9FD; }
.btn-text {
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  padding: 4px 0;
}
.btn-danger-text { border: none; background: transparent; color: var(--red); font-size: 13px; padding: 4px 0; }
.btn-sm { height: 32px; font-size: 13px; border-radius: 8px; padding: 0 12px; width: auto; }

/* ---------- 进度环 ---------- */
.rings { display: flex; gap: 10px; }
.ring-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 1px 8px rgba(22, 36, 30, 0.05);
}
.ring {
  width: 54px; height: 54px;
  border-radius: 50%;
  flex: 0 0 54px;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), #EAEFF8 0);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring.accent { background: conic-gradient(var(--accent) calc(var(--p) * 1%), #F6EAE4 0); }
.ring::after {
  content: '';
  position: absolute;
  left: 6px; top: 6px; right: 6px; bottom: 6px;
  border-radius: 50%;
  background: #fff;
}
.ring-val {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.ring-meta { flex: 1; min-width: 0; }
.ring-label { font-size: 11px; color: var(--ink-3); }
.ring-num { font-size: 15px; font-weight: 700; margin-top: 1px; }

/* ---------- 进度条 ---------- */
.bar {
  height: 5px;
  border-radius: 999px;
  background: #EEF2FA;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width .3s; }

/* ---------- 概览数字条 ---------- */
.stat-strip {
  display: flex;
  background: #fff;
  border-radius: 12px;
  padding: 12px 0;
  box-shadow: 0 1px 8px rgba(22, 36, 30, 0.05);
}
.stat-cell { flex: 1; text-align: center; position: relative; }
.stat-cell + .stat-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 24px;
  background: var(--line);
}
.stat-num { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-num.green { color: var(--primary); }
.stat-num.accent { color: var(--accent); }
.stat-label { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ---------- 任务卡 ---------- */
.task-card { padding: 14px; display: block; }
.task-top { display: flex; align-items: flex-start; gap: 8px; }
.task-name {
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
}
.task-meta {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
}
.task-stats {
  display: flex;
  gap: 6px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.task-stat { flex: 1; text-align: center; }
.task-stat-num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.task-stat-label { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.task-progress { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.task-progress .bar { flex: 1; }
.task-progress-text { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.task-arrow { color: #C4D0CB; line-height: 1; display: flex; align-items: center; flex: 0 0 auto; }

/* ---------- 客户行 ---------- */
.cust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.cust:last-child { border-bottom: none; }
.cust:active { background: #F7F9FD; }
.cust-avatar {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex: 0 0 38px;
}
.cust-main { flex: 1; min-width: 0; }
.cust-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cust-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.cust-phone { font-size: 12px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cust-call {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px;
}
.cust-call:active { background: var(--primary-soft); }
.cust-call[disabled] { opacity: .38; }

/* ---------- 底部直接拨打 ---------- */
.quickdial {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  bottom: 0;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(245, 247, 251, 0), #F5F7FB 32%);
  z-index: 50;
}
.quickdial.above-tab { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.quickdial-inner {
  height: 50px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 5px 13px rgba(47, 107, 255, 0.28);
  border: none;
  width: 100%;
  text-align: left;
}
.quickdial-inner:active { opacity: .9; }
.quickdial-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex: 0 0 30px;
}
.quickdial-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.quickdial-sub { display: block; font-size: 11px; opacity: .78; margin-top: 2px; line-height: 1.3; }
.quickdial.disabled .quickdial-inner { background: #AAB8D8; box-shadow: none; }

/* ---------- 分段标签 ---------- */
.segtabs {
  display: flex;
  background: #EEF2FA;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.segtab {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: var(--ink-2);
  border: none;
  background: transparent;
  white-space: nowrap;
}
.segtab.active {
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(22, 36, 30, 0.08);
}
.segtab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* ---------- 结果选择网格 ---------- */
.grid-3 { display: flex; flex-wrap: wrap; gap: 7px; }
.grid-3 .opt {
  width: calc((100% - 14px) / 3);
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-2);
  padding: 0 4px;
  text-align: center;
  line-height: 1.25;
}
.grid-3 .opt.on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.grid-4 .opt { width: calc((100% - 21px) / 4); height: 38px; font-size: 12px; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 12px; }
.field-label {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.field-label .req { color: var(--accent); }
.field-hint { font-size: 11px; color: var(--ink-3); margin-top: 5px; }

.input, .textarea {
  width: 100%;
  background: #F7F9FD;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  height: 42px;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input:focus, .textarea:focus { border-color: var(--primary); background: #fff; }
.textarea { height: 76px; padding: 10px 11px; line-height: 1.5; resize: none; }
.input::placeholder, .textarea::placeholder { color: #A9B7B0; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  color: var(--ink-2);
}
.chip.on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

/* ---------- 信息行 ---------- */
.kv { display: flex; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv-label { width: 80px; color: var(--ink-3); flex: 0 0 80px; }
.kv-value { flex: 1; color: var(--ink); word-break: break-all; }

/* ---------- 提示条 ---------- */
.note {
  display: flex;
  gap: 7px;
  padding: 10px 11px;
  border-radius: 8px;
  background: #FFF8EC;
  border: 1px solid #F7E3BE;
  font-size: 11.5px;
  color: #8A6218;
  line-height: 1.55;
}
.note.info { background: #EFF6FB; border-color: #D6E6F2; color: #2C5A78; }
.note.danger { background: #FDF1F1; border-color: #F6D6D6; color: #A2353A; }
.note-ico { flex: 0 0 auto; margin-top: 1px; }
.note a { text-decoration: underline; font-weight: 600; }

/* ---------- 空状态 ---------- */
.empty { padding: 60px 20px; text-align: center; }
.empty-ico { opacity: .45; display: flex; justify-content: center; }
.empty-title { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.empty-desc { margin-top: 4px; font-size: 12px; color: var(--ink-3); }

/* ---------- 记录项 ---------- */
.rec { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rec:last-child { border-bottom: none; }
.rec-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rec-name { font-size: 14.5px; font-weight: 600; }
.rec-time { font-size: 11px; color: var(--ink-3); flex: 0 0 auto; }
.rec-sub { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.rec-note {
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-2);
  background: #F7F9FD;
  border-radius: 6px;
  padding: 6px 8px;
}

/* ---------- 我的 ---------- */
.me-head {
  background: linear-gradient(135deg, #2457D6, #2F6BFF);
  padding: 20px 16px 28px;
  color: #fff;
}
.me-avatar {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 600;
  flex: 0 0 52px;
}
.me-name { font-size: 17px; font-weight: 700; }
.me-id { font-size: 11.5px; opacity: .82; margin-top: 2px; }
.me-stats {
  display: flex;
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.me-stat { flex: 1; text-align: center; }
.me-stat-num { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.me-stat-label { font-size: 10.5px; opacity: .8; }
.quota-card { margin: -18px 14px 0; position: relative; }
.me-menu { margin: 10px 14px 0; position: relative; }
.me-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  width: 100%;
  border-left: none; border-right: none; border-top: none;
  background: transparent;
  text-align: left;
}
.me-item:last-child { border-bottom: none; }
.me-item:active { background: #F7F9FD; }
.me-item-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 30px;
}
.me-item-ico.danger { background: #FDECEC; color: var(--red); }
.me-item-arrow { color: #C3CFC9; display: flex; }

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 28px);
  margin: 18px 14px 0;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  color: var(--red);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #F3DADA;
  cursor: pointer;
}

/* ---------- 底部 tabbar ---------- */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  bottom: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 60;
}
.tabbar[hidden] { display: none; }
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 10.5px;
  padding: 0;
  position: relative;
}
.tab.active { color: var(--primary); }
.tab-badge {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: 4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  line-height: 15px;
  text-align: center;
  font-weight: 600;
}

/* ---------- 遮罩 / 拨号中 ---------- */
.mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(11, 26, 21, 0.78);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0 24px;
}
.mask[hidden] { display: none; }
.mask-pulse {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mask-pulse { animation: none; }
}
.mask-name { margin-top: 14px; font-size: 17px; font-weight: 600; text-align: center; }
.mask-num { margin-top: 4px; font-size: 13px; opacity: .8; letter-spacing: 1px; }
.mask-tip { margin-top: 20px; font-size: 11.5px; opacity: .7; text-align: center; line-height: 1.6; }
.mask-cancel {
  margin-top: 18px;
  padding: 0 20px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  display: flex; align-items: center;
  font-size: 13px;
  color: #fff;
}

/* ---------- 轻提示 ---------- */
.toast-wrap {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(16, 32, 26, 0.9);
  color: #fff;
  font-size: 13px;
  padding: 9px 15px;
  border-radius: 8px;
  max-width: 260px;
  text-align: center;
  line-height: 1.45;
  animation: toastIn .18s ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 加载 ---------- */
.loading { padding: 40px 0; display: flex; justify-content: center; }
.spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #D8E2F5;
  border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 登录页 ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 22px;
  background: #fff;
  overflow-y: auto;
}
/* 品牌 + 表单作为一组垂直居中；宽屏（电脑端打开）限宽后水平居中 */
.login-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 0 8px;
  min-height: 0;
}
.login-brand { padding: 0 0 30px; }
.login-logo {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(47, 107, 255, 0.25);
}
.login-title { font-size: 24px; font-weight: 700; margin-top: 20px; letter-spacing: -.4px; }
.login-sub { font-size: 13px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }
.login-form { flex: 0 0 auto; }
.login-form .field { margin-bottom: 14px; }
.login-form .input { height: 48px; border-radius: 10px; background: #F7F9FD; }
.login-btn { margin-top: 8px; height: 48px; }
.login-foot {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 20px 0 calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 11px;
  color: #A9B7B0;
  line-height: 1.7;
}
.login-hint {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-3);
  background: #F7F9FD;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.6;
}

/* ---------- 安装引导 ---------- */
.install-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2457D6, #2F6BFF);
  color: #fff;
  margin-bottom: 10px;
}
.install-tip-main { flex: 1; min-width: 0; }
.install-tip-title { font-size: 13.5px; font-weight: 600; }
.install-tip-desc { font-size: 11px; opacity: .82; margin-top: 2px; line-height: 1.5; }
.install-tip-btn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
}

/* ---------- 工具类 ---------- */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.text-center { text-align: center; }
.hr { height: 1px; background: var(--line); margin: 10px 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* =========================================================
   工作台
   ========================================================= */
.page-wb {
  padding: max(10px, env(safe-area-inset-top)) 0 calc(var(--tabbar-h) + 26px);
}

.wb-head { padding: 4px 20px 0; }
.wb-head-top { display: flex; align-items: flex-start; gap: 10px; }
.wb-title { font-size: 25px; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.wb-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.wb-head-actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.wb-round-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  box-shadow: 0 2px 8px rgba(22, 36, 30, .06);
  transition: transform .15s ease;
}
.wb-round-btn:active { transform: scale(.94); }

/* 今日概览 */
.wb-banner {
  position: relative;
  overflow: hidden;
  margin: 14px 16px 0;
  padding: 20px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #12224A 0%, #1E3A7A 55%, #2F6BFF 100%);
  box-shadow: 0 6px 18px rgba(18, 34, 74, .18);
}
.wb-banner::after {
  content: "";
  position: absolute;
  width: 160px; height: 160px;
  right: -50px; top: -60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 34px rgba(255, 255, 255, .04);
  pointer-events: none;
}
.wb-eyebrow {
  position: relative;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}
.wb-banner-title {
  position: relative;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.025em;
  margin-top: 6px;
}
.wb-banner-desc {
  position: relative;
  font-size: 11.5px;
  line-height: 1.6;
  opacity: .62;
  margin-top: 6px;
  max-width: 244px;
}

/* 功能宫格 */
.wb-grid-menu {
  margin: 12px 16px 0;
  padding: 18px 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 4px;
}
.wb-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
}
.wb-item-ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  transition: transform .15s ease;
}
.wb-item:active .wb-item-ico { transform: scale(.92); }
.wb-item-label { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.wb-item.off { opacity: .42; }
.wb-item.off:active .wb-item-ico { transform: none; }
.wb-item-badge {
  position: absolute;
  top: -4px;
  left: 50%;
  margin-left: 4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 宫格配色 */
.g-green  { background: var(--primary-soft); color: var(--primary); }
.g-orange { background: var(--accent-soft);  color: #E5622F; }
.g-blue   { background: #EAF0FE;             color: var(--blue); }
.g-amber  { background: #FEF4E3;             color: var(--amber); }
.g-violet { background: #F3EEFE;             color: #7C3AED; }
.g-teal   { background: #E4EDFF;             color: #2F6BFF; }
.g-gray   { background: #F1F5F3;             color: var(--ink-3); }

/* 近 7 日话务 */
.wb-chart-card {
  margin: 12px 16px 0;
  padding: 16px 14px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.wb-chart-head { display: flex; align-items: flex-start; gap: 10px; padding: 0 4px 12px; }
.wb-chart-title { font-size: 13px; font-weight: 650; }
.wb-chart-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.wb-legend {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding-top: 2px;
  font-size: 10px;
  color: var(--ink-3);
}
.wb-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; }
.d-green { background: #2F6BFF; }
.d-orange { background: #FF7A45; }
.wb-chart { display: block; width: 100%; height: auto; }
.wb-chart-empty { padding: 36px 0; text-align: center; font-size: 12px; color: var(--ink-3); }

/* =========================================================
   话务统计
   ========================================================= */
.st-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}
.st-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 8px 11px;
  text-align: center;
}
.st-card-label { font-size: 11px; color: var(--ink-3); }
.st-card-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.st-card-num i {
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 1px;
}
.st-card-sub { font-size: 10px; color: var(--ink-3); margin-top: 3px; }

.st-block { padding: 14px 14px 10px; margin-top: 12px; }
.st-block .wb-chart-card { margin: 0; }
.st-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 8px;
}
.st-block-title span { font-size: 10px; font-weight: 400; color: var(--ink-3); }

.st-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.st-row-label { flex: 0 0 66px; width: 66px; font-size: 11.5px; color: var(--ink-2); }
.st-bar {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: #F1F5F3;
  overflow: hidden;
}
.st-bar i { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.st-bar i.t-green  { background: var(--primary); }
.st-bar i.t-blue   { background: var(--blue); }
.st-bar i.t-amber  { background: var(--amber); }
.st-bar i.t-orange { background: var(--accent); }
.st-bar i.t-gray   { background: #C9D4CF; }
.st-row-num {
  flex: 0 0 30px;
  width: 30px;
  text-align: right;
  font-size: 11.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.st-empty { padding: 22px 0; text-align: center; font-size: 12px; color: var(--ink-3); }

/* ---------- 扫码登录状态 ---------- */
.qr-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 0 24px;
  font-size: 14px;
  color: var(--text, #3D5474);
}