:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --line: #dfe6f0;
  --text: #17202e;
  --text-2: #5a6b82;
  --text-3: #8b9bb0;
  --brand: #1f4e79;
  --brand-2: #2f6fa8;
  --brand-soft: #eaf1f9;
  --accent: #0f8a7e;
  --warn: #b26a00;
  --danger: #c0392b;
  --ok: #1f7a45;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(23, 32, 46, .06), 0 6px 20px rgba(23, 32, 46, .06);
  --sidebar-w: 232px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand-2); text-decoration: none; }

/* ============================================================
 * 应用外壳：左侧菜单 + 右内容
 * ========================================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, #17395b 0%, #122c46 100%);
  color: #dbe6f2;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.side-brand .logo {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4e93d4, #2f6fa8);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  flex: 0 0 34px;
}
.side-brand .brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.side-brand strong { font-size: 15px; color: #fff; letter-spacing: .3px; }
.side-brand span {
  font-size: 11px; color: #8fa8c2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.side-nav { padding: 12px 10px 20px; flex: 1; }
.nav-group { margin-bottom: 14px; }
.nav-title {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: #7b93ad;
  padding: 6px 10px;
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: #cddced;
  font-size: 14px;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.active {
  background: rgba(90, 160, 226, .22);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #5fa5e0;
}
.nav-icon { width: 18px; height: 18px; display: inline-flex; flex: 0 0 18px; }
.nav-icon svg { width: 18px; height: 18px; }

.side-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: #2f6fa8;
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
}
.who-block { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.who-block strong {
  font-size: 13px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who-block span { font-size: 11px; color: #8fa8c2; }
.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: #a9bdd2; cursor: pointer; border-radius: 8px;
}
.icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.icon-btn svg { width: 17px; height: 17px; }

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-3); }
.topbar .crumb strong { color: var(--text); font-size: 14px; font-weight: 600; }
.topbar .crumb em { font-style: normal; color: #c3cddb; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn {
  display: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  background: #fff; border-radius: 9px;
  color: var(--text-2); cursor: pointer;
  place-items: center;
}
.menu-btn svg { width: 18px; height: 18px; }

.side-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 34, .45);
  z-index: 35;
}
.side-scrim.show { display: block; }

main {
  padding: 20px 24px 56px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

/* 兼容：老页面可能有单页外壳 */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--brand);
  color: #fff;
}
.app-header .spacer { flex: 1; }

h1 { font-size: 21px; margin: 4px 0 4px; letter-spacing: -.2px; }
h2 { font-size: 15px; margin: 24px 0 10px; color: var(--text-2); font-weight: 600; }
h3 { font-size: 15px; margin: 0 0 6px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head .sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.card.tight { padding: 12px; }
.card.flush { padding: 0; overflow: hidden; }
.card-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.card-title h3 { margin: 0; font-size: 14px; font-weight: 600; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 数据卡 */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat .label { font-size: 12px; color: var(--text-2); }
.stat .value { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.4px; }
.stat .value small { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 3px; }
.stat .delta { font-size: 12px; color: var(--text-3); }
.stat .delta.up { color: var(--danger); }
.stat .delta.down { color: var(--ok); }
.stat.accent { border-left: 3px solid var(--brand-2); }

/* 表格 */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
table.data th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 9px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: #f7fafd; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 工具栏 / 筛选条 */
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.toolbar input[type="text"],
.toolbar input[type="search"],
.toolbar select { min-height: 38px; width: auto; min-width: 120px; }
.toolbar .grow { flex: 1; min-width: 180px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover { border-color: var(--brand-2); color: var(--brand); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .count {
  font-size: 11px;
  background: rgba(0, 0, 0, .07);
  border-radius: 999px;
  padding: 0 6px;
}
.chip.active .count { background: rgba(255, 255, 255, .22); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button {
  border: 0; background: transparent; padding: 9px 14px;
  color: var(--text-2); font-size: 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
.field label .req { color: var(--danger); margin-left: 2px; }
.field .hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1; min-width: 0; }

input, select, textarea, button {
  font: inherit;
  color: inherit;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(47, 111, 168, .14);
}
input:disabled, select:disabled { background: var(--surface-2); color: var(--text-3); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 16px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: filter .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--brand); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--brand-2); }
.btn.subtle { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.block { width: 100%; }
.btn.sm { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.btn.xs { min-height: 28px; padding: 3px 9px; font-size: 12px; border-radius: 8px; }

.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.muted { color: var(--text-2); font-size: 13px; }
.dim { color: var(--text-3); font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  margin: 0 6px 6px 0;
}
.tag.ok { background: #e6f4ec; color: var(--ok); }
.tag.warn { background: #fdf1e0; color: var(--warn); }
.tag.bad { background: #fbe9e7; color: var(--danger); }
.tag.info { background: #e8f1f9; color: var(--brand); }
.tag.plain { background: transparent; border: 1px solid var(--line); }

.list { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.list-item:hover { border-color: var(--brand-2); }
.list-item .title { font-weight: 600; }
.list-item .meta { font-size: 13px; color: var(--text-2); margin-top: 2px; }

.empty {
  text-align: center;
  color: var(--text-3);
  padding: 28px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.timeline { position: relative; padding-left: 18px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 4px; bottom: 4px;
  width: 2px; background: var(--line);
}
.timeline-item { position: relative; padding: 0 0 14px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -18px; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 3px #e8f1f9;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(23, 32, 46, .94);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 90;
  max-width: 86vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: rgba(192, 57, 43, .96); }

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 34, .45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
  padding: 0;
}
.modal {
  background: #fff;
  width: 100%;
  max-width: 620px;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow: auto;
}
@media (min-width: 720px) {
  .modal-mask { align-items: center; }
  .modal { border-radius: 16px; max-width: 680px; }
}
.modal h3 { font-size: 17px; margin-bottom: 12px; }
.modal.wide { max-width: 860px; }

.notice {
  background: #eef4fa;
  border-left: 3px solid var(--brand-2);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  margin: 12px 0;
}
.notice.warn { background: #fdf6ea; border-left-color: var(--warn); }

.disclaimer {
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 10px;
}

.score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--brand);
}

details summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: 14px;
  padding: 6px 0;
}

hr.sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(160deg, #1f4e79 0%, #12324f 55%, #0d2438 100%);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.auth-card h1 { font-size: 20px; margin: 0 0 4px; }
.auth-card .sub { color: var(--text-2); font-size: 13px; margin-bottom: 18px; }
.tabbar { display: flex; background: var(--surface-2); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.tabbar button {
  flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 8px;
  cursor: pointer; color: var(--text-2); font-size: 14px;
}
.tabbar button.active { background: #fff; color: var(--brand); box-shadow: var(--shadow); font-weight: 600; }

.kpi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kpi .card { margin: 0; text-align: center; }
.kpi .num { font-size: 22px; font-weight: 700; color: var(--brand); }
.kpi .lbl { font-size: 12px; color: var(--text-2); }

/* 业绩条形图（纯 CSS，不引图表库） */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .bar {
  width: 100%;
  max-width: 46px;
  background: linear-gradient(180deg, #4e93d4, #2f6fa8);
  border-radius: 6px 6px 0 0;
  min-height: 2px;
  transition: height .3s;
}
.bars .bar-label { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.bars .bar-value { font-size: 11px; color: var(--text-2); }
/* 全零时收起坐标轴高度，只留一句说明 */
.bars.is-empty { display: block; height: auto; padding: 6px 0; }

.progress {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--brand-2); border-radius: 999px; }

.definition {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}
.definition dt { color: var(--text-3); }
.definition dd { margin: 0; color: var(--text); }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--text-3); }

.section-stack > * + * { margin-top: 14px; }

/* ============================================================
 * 响应式：窄屏把左侧菜单收成抽屉
 * ========================================================== */
@media (max-width: 960px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: grid; }
  main { padding: 14px 14px 40px; }
  .topbar { padding: 0 14px; }
  h1 { font-size: 19px; }
}

@media (max-width: 600px) {
  .field-row { flex-direction: column; gap: 0; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; }
  table.data { font-size: 13px; }
  table.data th, table.data td { padding: 8px 8px; }
  .kpi { grid-template-columns: repeat(2, 1fr); }
}

/* 开关：用原生 checkbox 做无障碍兜底，视觉上换成滑块 */
.switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}
.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line);
  transition: background .18s ease;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 32, 46, .25);
  transition: transform .18s ease;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* 多列信息容器（不是单行 key-value，别和 .kv 混用） */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px 18px;
  font-size: 13px;
}
.kv-grid .dim { color: var(--text-3); font-size: 12px; margin-bottom: 2px; }

/* 资料缺口块：产品卡片里"缺什么"的落点。
   用浅黄底把缺口和普通字段分开，避免销售把"没资料"读成"没有这项"。 */
.gap-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f2ddbb;
  border-radius: 8px;
  background: #fffaf0;
}
.gap-head {
  font-size: 12px;
  font-weight: 600;
  color: #9a6100;
  letter-spacing: .2px;
}
/* 一行式缺口提示：黄色底 + 左侧竖线，压缩高度但不降低可见度 */
.gap-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 9px;
  padding: 6px 9px;
  border-left: 3px solid #e0a13a;
  border-radius: 4px;
  background: #fff7e8;
  font-size: 12px;
  color: #8a5a00;
}
.gap-line b { font-weight: 600; flex: none; }
.gap-box .dim {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

/* 产品目录：按险种分组的紧凑卡片。
   原来 28 张等高卡片平铺，同险种没有分组标题、每张卡还挂一个"资料完整"
   绿标，扫起来全是噪声。分组后一组一屏内可读完。 */
.cat-group { margin-bottom: 22px; }
.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .3px;
}
.group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.group-title .count {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-3);
}

.prod { padding: 14px; display: flex; flex-direction: column; }
.prod h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.prod .prod-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.prod .meta-item b {
  font-weight: 600;
  color: var(--text);
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}
.prod .prod-more { margin-top: 8px; }
.prod .prod-more summary {
  font-size: 12px;
  color: var(--brand);
  cursor: pointer;
}
/* 同行卡片不互相拉高：有缺口块的卡会把同排其他卡拉出一截空白 */
.cat-group .grid.three { align-items: start; }
.cat-group .group-title { font-size: 15px; color: var(--text); }

/* 网格自带 gap，卡片不再额外留 12px 下边距 */
.prod { margin-bottom: 0; }

/* ---- 今日概览：四列 KPI + 三段并列 ---- */
.grid.four { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dash-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  align-items: stretch;
  margin-top: 14px;
}
.dash-row > div { display: flex; flex-direction: column; }
.dash-row > div > h2:first-child { margin-top: 0; }
/* 三栏高度取最高者，底部按钮对齐到同一条线 */
.dash-row > div > .btn.block { margin-top: auto; }

/* 漏斗：每阶段一行，条形宽度 = 该阶段客户占比 */
.funnel-list { display: flex; flex-direction: column; gap: 6px; }
.funnel-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
}
.funnel-row .funnel-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--brand);
  opacity: .14;
  pointer-events: none;
}
.funnel-row .funnel-name,
.funnel-row .funnel-num { position: relative; }
.funnel-row .funnel-name { font-size: 13px; color: var(--text-2); }
.funnel-row .funnel-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.funnel-row.is-zero .funnel-name { color: var(--text-3); }
.funnel-row.is-zero .funnel-num { color: var(--text-3); font-weight: 400; }

@media (max-width: 600px) {
  .grid.four { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 需求与推荐：可展开的排名表 ---- */
.rec-wrap { overflow-x: auto; }
.rec-table { width: 100%; }
.rec-table tbody tr.rec-row { cursor: pointer; }
.rec-table tbody tr.rec-row:hover { background: var(--surface-2); }
.rec-table tbody tr.rec-row.is-open { background: var(--surface-2); }
.rec-row .rec-rank {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.rec-row .rec-score {
  text-align: right;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.rec-detail > td { background: var(--surface-2); padding: 12px 14px 14px; }

/* ---- 条款与资料：左列表 1.7 份、右提问 1 份 ---- */
.kb-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  align-items: start;
}
.kb-table thead th,
.kb-table tbody td { white-space: nowrap; }
/* 标题列允许折行，其余列（类型/切片/更新）保持单行 */
.kb-table thead th:first-child,
.kb-table tbody td:first-child { white-space: normal; }
@media (max-width: 960px) {
  .kb-layout { grid-template-columns: 1fr; }
}

/* ---- 口述记拜访（移动优先） ---- */
/* hidden 属性靠 UA 的 display:none 生效，但任何作者样式里的 display:flex/grid
   都会盖掉它（.mic-bar 就踩过：HTTP 下不该出现的录音按钮照样显示）。
   这条兜底一次，避免以后每加一个 flex 容器就复发。 */
[hidden] { display: none !important; }

.visit-page { max-width: 720px; margin: 0 auto; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.link { color: var(--brand); text-decoration: none; margin-left: 6px; }
.link:hover { text-decoration: underline; }

.btn.lg {
  padding: 13px 20px;
  font-size: 16px;
  border-radius: 10px;
}

.dictate-tip {
  background: #eef4fa;
  border-left: 3px solid var(--brand-2);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.mic-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* 移动端输入区：16px 起，避免 iOS 聚焦时自动放大页面 */
.dictate-box textarea {
  min-height: 168px;
  font-size: 16px;
  line-height: 1.75;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.check-line input { width: 18px; height: 18px; margin: 0; }

.result-card { margin-top: 16px; }
.result-block {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.7;
}
.result-block:first-of-type { border-top: 0; padding-top: 4px; }
.result-label {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.result-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.result-row .tag { flex: 0 0 auto; }
.result-detail { flex: 1 1 auto; min-width: 0; }
.result-next {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.result-script {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--brand-2);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}
.result-foot {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
  font-size: 13px;
  color: var(--text-2);
}

@media (max-width: 600px) {
  .visit-page .page-head { margin-bottom: 10px; }
  .dictate-box textarea { min-height: 148px; }
}

/* 回访债看板：该回访但没任务的客户。一行小标签，不做成表格——
   这里通常是 0-5 个人，用表格反而更重。 */
.review-due-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
}
.review-due-list a { text-decoration: none; }