:root {
  --bg: #f6f1ea;
  --panel: #ffffff;
  --ink: #2b2620;
  --ink-soft: #6f675c;
  --line: #e6ddd0;
  --product: #b5672f;
  --product-bg: #f7e9dd;
  --bank: #3f6f7a;
  --bank-bg: #e3eef0;
  --accent: #c2703d;
  --accent-ink: #8a4a24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  line-height: 1.6;
}

.page-header {
  padding: 28px 24px 8px;
}

.page-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.subtitle {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px 48px;
}

/* ===== 左侧导航栏 ===== */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 210px;
  width: 210px;
  background: #e7d9c3;             /* 比主区 (#f6f1ea) 深一档：一眼分出「菜单区」和「内容区」 */
  border-right: 1px solid #d5c4a9;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  /* 不受右侧内容高度影响：固定为视口高度、贴顶吸附、内容多了自己内部滚动。
     align-self 覆盖 flex 默认的 stretch，否则会被拉到和右侧一样高 */
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 顶栏汉堡按钮收起时，整栏向左滑出（宽度是 border-box 含边框 210px） */
  transition: margin-left 0.22s ease;
}

.layout.sidebar-collapsed .sidebar {
  margin-left: -210px;
  border-right-color: transparent;  /* 滑出后不残留一条边框线 */
}

/* 顶部品牌区：logo + 产品名，点击回首页 */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 16px 16px;
  text-decoration: none;
}

.brand-mark {
  flex: 0 0 auto;
  border-radius: 6px;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #241f1a;
}

.nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 底部「系统管理」分组：贴到侧边栏底部 */
.nav-group-bottom {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #d5c4a9;
}

/* 一级菜单：整行可点击，点击展开 / 收起下面的二级菜单 */
.nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 10px 16px;    /* 一级菜单缩进 16px */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #4a4137;                  /* 比正文标题浅一档、比原来的灰更实，压得住底色 */
  cursor: pointer;
  user-select: none;
}

.nav-group-title:hover {
  color: var(--accent-ink);
  background: #d8c7aa;             /* 一级菜单悬停也给出反馈：可点 */
  border-radius: 8px;
}

.nav-caret {
  display: inline-flex;           /* svg 基线对齐问题用 flex 消掉 */
  align-items: center;
  color: var(--ink-soft);
  transition: transform 0.18s ease;
}

/* 收起态：箭头转向左 + 隐藏二级菜单 */
.nav-group.collapsed .nav-caret {
  transform: rotate(90deg);
}

.nav-group.collapsed .nav-sub {
  display: none;
}

/* 二级菜单：相对一级再缩进一档，纯靠留白拉开层次 */
.nav-sub {
  margin: 2px 12px 6px 28px;      /* 左缩进 28px */
}

/* 二级菜单：做成一个个按钮的样子（白底 + 描边 + 圆角），一眼看出能点 */
.nav-item {
  display: block;
  padding: 8px 12px;               /* 文字左边界 = 28+12 = 40px，与一级 16px 拉开 */
  margin-bottom: 4px;
  font-size: 14px;
  color: #241f1a;                  /* 近黑：在加深的底色上对比更足、更像菜单文字 */
  text-decoration: none;
  border-radius: 8px;
}

.nav-item:hover {
  background: #d8c7aa;
  color: var(--accent-ink);
}

.nav-item.active {
  background: var(--product);      /* 选中项实心填色：位置一眼可见 */
  color: #fff;
  font-weight: 600;
}

/* 占位菜单项：登录功能上线前不可点 */
.nav-item-off {
  color: #6b6255;
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-item-off:hover {
  background: transparent;
  color: #6b6255;
}

/* ===== 手机端底部导航条 =====
   桌面端整体隐藏；手机端是三个一级分组（我的工具 / 系统管理 / 我的），
   点一级在导航条上方弹出二级菜单（不用把所有条目平铺挤在小屏上） */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(43, 38, 32, 0.06);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}

.mnav-tabs {
  display: flex;
  gap: 4px;
}

.mnav-tab {
  flex: 1;
  min-width: 0;
  min-height: 44px;          /* 手指好按的高度 */
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.mnav-tab.active {
  color: var(--product);
  font-weight: 600;
}

/* 一级分组被点开时的状态 */
.mnav-tab.open {
  background: #efe6d8;
  color: var(--accent-ink);
  font-weight: 600;
}

/* 二级菜单：相对导航条定位，贴在它上方弹出 */
.mnav-sheet {
  display: none;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(43, 38, 32, 0.16);
}

.mnav-sheet.open {
  display: block;
}

.mnav-item {
  display: block;
  width: 100%;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.mnav-item:hover {
  background: #f5eee2;
}

.mnav-item.active {
  background: var(--product-bg);
  color: var(--product);
  font-weight: 600;
}

.main-col {
  flex: 1;
  min-width: 0;   /* 允许内部表格横向滚动而不是撑破布局 */
}

/* ===== 主内容区顶栏：右上角「我的账户 / 退出登录」 =====
   高度与侧边栏品牌区对齐（26px logo + 4 + 16 padding = 46px），
   sticky 吸顶，滚动时也在手边。打印时隐藏，不进 PDF */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(246, 241, 234, 0.92);   /* 与 --bg 同色略透，滚动时盖住下方内容 */
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--line);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 左侧：收起 / 展开侧边栏的汉堡按钮（三条横线） */
.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;               /* 图标视觉上与左内边距对齐 */
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.topbar-toggle:hover {
  background: #efe6d8;
  color: var(--accent-ink);
}

.topbar-toggle svg {
  display: block;
}

.topbar-link {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
}

.topbar-link:hover {
  background: #efe6d8;
  color: var(--accent-ink);
}

.topbar-link.active {
  background: var(--product-bg);
  color: var(--product);
  font-weight: 600;
}

/* 退出登录：描边按钮，和链接区分开（动作性更强） */
.topbar-btn {
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
}

.topbar-btn:hover {
  background: #efe6d8;
  border-color: #d5c4a9;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 22px;
}

/* 强制绑定手机号时的警示条（账户页 ?must_bind=1） */
.panel-warn {
  background: #fdf6ec;
  border: 1px solid #e8c98f;
  color: #8a5a17;
  line-height: 1.7;
}

.panel-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}

/* 输入区 */
.params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 13px;
  color: var(--ink-soft);
}

.field input {
  height: 40px;
  padding: 0 12px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfbf7;
  color: var(--ink);
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 112, 61, 0.12);
}

/* 四个按钮等宽排列；手机/平板下自动变 2×2，四块一样大更整齐 */
.actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  max-width: 800px;      /* 不撑满整行，避免按钮过宽 */
}

.actions .btn {
  width: 100%;
  padding: 0 12px;       /* 等宽后由 grid 决定宽度，左右内边距收紧一点 */
  white-space: nowrap;
}

.actions .save-tip {
  grid-column: 1 / -1;   /* 保存提示单独占一行 */
}

.btn {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { background: var(--accent-ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.save-tip {
  font-size: 13px;
  color: var(--accent-ink);
}

.save-tip:empty {
  display: none;         /* 没有提示时不占位（否则会多出一行间距） */
}

.save-tip.err {
  color: #b34a2e;        /* 参数没填齐之类的提醒 */
}

/* 表格「还没算」时的占位行（按下「2 生成对比表」之前） */
.table-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
}

/* 客户档案（历史存档）：存档输入条 + 档案列表 */
.panel-hint {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: 10px;
}

.snap-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

/* 一条档案都没有时给句话，别只剩一片空白 */
.snap-list:empty::after {
  content: "还没有档案。点一次「2 生成对比表」就会自动存一份。";
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
}

.snap-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
}

/* 当前表格用的就是这一份 */
.snap-item.active {
  border-color: var(--accent);
  background: rgba(194, 112, 61, 0.06);
}

.snap-main {
  flex: 1;
  min-width: 0;
}

.snap-label {
  font-size: 14px;
  font-weight: 600;
}

.snap-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-soft);
}

.snap-acts {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* 保单 PDF Modal */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(43, 38, 32, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal-mask[hidden] {
  display: none;
}

.modal {
  background: var(--panel);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fdfaf5;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 4px;
}

.modal-close:hover { color: var(--accent-ink); }

.modal-body {
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-actions .btn {
  flex: 1 1 auto;
  min-width: 100px;
}

/* 统一确认弹窗（common.js 的 confirmDialog / promptDialog）：
   骨架复用上面的 .modal-*，这里只补消息文字、输入框和危险按钮 */
.dlg-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
}

.dlg-input {
  height: 40px;
  padding: 0 12px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfbf7;
  color: var(--ink);
}

.dlg-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 112, 61, 0.12);
}

/* 危险操作（删除、停用）：红色描边，和普通主按钮区分开 */
.btn-danger {
  background: #b4443a;
  color: #fff;
}

.btn-danger:hover { background: #97362d; }

/* 轻提示（common.js 的 toast）：替代 alert()，不打断操作、自动消失 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 8px);
  max-width: min(90vw, 420px);
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fdfaf5;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  pointer-events: none;
  word-break: break-word;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.toast-err { background: #b4443a; }

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  background: #fdf6ec;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  color: var(--accent-ink);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.upload-btn:hover {
  background: #f7e9dd;
}

.upload-icon {
  font-size: 16px;
}

.pdf-fname {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 8px 10px;
  background: #faf6ef;
  border: 1px solid var(--line);
  border-radius: 6px;
  word-break: break-all;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.upload-tip {
  font-size: 13px;
  color: var(--accent-ink);
  min-height: 18px;
}

/* 从 PDF 读到的客户姓名（决定生成 PDF 的文件名） */
.client-name-tip {
  font-size: 13px;
  color: var(--ink-soft);
}

.client-name-tip:empty {
  display: none;
}

.upload-tip.err {
  color: #b34a2e;
}

#btn-clear-policy:disabled,
#btn-upload:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 参数置灰（组合险版用不到的「万能账户利率」）：明确表示它不参与计算 */
.params-grid input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f2efe9;
}

/* 表格 */
.table-wrap {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.compare-table th,
.compare-table td {
  padding: 7px 8px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}

/* 表头默认不折行、居中；仅带 <br> 的列（含括号）才在括号处折行 */
.compare-table th {
  white-space: nowrap;
  line-height: 1.35;
  vertical-align: bottom;
  text-align: center;
  padding: 12px 16px;              /* 表头行加高加宽，压得住下面的数据 */
}

/* 分组大表头（御享分红26 / 银行存款）：实心填色 + 白字，最醒目那一层 */
.th-product,
.th-bank {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* 长表头（招财宝页）：上排小字=分组标题、下排=值列名；过长时折行 */
.compare-table th.th-long {
  white-space: normal;
  max-width: 200px;
  line-height: 1.25;
}

.compare-table th.th-long .th-sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-bottom: 3px;
}

/* 单险版表头里的万能账户利率：这个百分数是按参数套上去的、不是保险公司给的 → 标红区分 */
.compare-table th.th-long .th-sub .rate-param {
  color: #c0392b;
  font-weight: 700;
}

/* 组合险版：PDF 的「组合生存总利益」已含万能账户，自己算的这两列核对列整列隐藏 */
.compare-table.combo-ver .col-univ {
  display: none;
}

/* 表格标题旁的版本标记：这份计划书是单险版还是组合险版（决定金额来源） */
.ver-tip {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: 10px;
}

.compare-table td {
  white-space: nowrap;
}

.compare-table th:first-child,
.compare-table td:first-child,
.compare-table th:nth-child(2),
.compare-table td:nth-child(2) {
  text-align: center;
}

.th-product {
  background: var(--product);      /* 实心橙底 + 白字 */
  color: #fff;
  text-align: center !important;
}

.th-bank {
  background: var(--bank);         /* 实心蓝底 + 白字 */
  color: #fff;
  text-align: center !important;
}

/* 第二行表头（各列名）：底色加深、文字近黑、加粗，和底色对比更大 */
.compare-table thead tr:nth-child(2) th {
  background: #eee0cb;
  color: #241f1a;
  font-weight: 600;
  font-size: 12.5px;
  border-bottom: 2px solid #c9b494;
}

.compare-table tbody tr:nth-child(even) {
  background: #fdfaf5;
}

.compare-table tbody tr:hover {
  background: #f9f2e7;
}

.compare-table td.num {
  text-align: center;
}

/* ===== 反超银行高亮（口径：生存总利益 vs 本利·3年期到期转存）===== */

/* 顶部结论条：屏幕和打印都显示，代理人可以直接念给客户听 */
.conclusion-bar {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-left: 4px solid #d93025;
  border-radius: 0 6px 6px 0;
  background: var(--panel);   /* 与参数输入卡片同底色，页面少一块颜色 */
}

.conclusion-bar.nothing {
  border-left-color: #b8ab99;
  background: var(--panel);
}

.conclusion-bar .cb-headline {
  font-size: 14px;
  font-weight: 600;
  color: #8f2a20;
  line-height: 1.45;
}

.conclusion-bar .cb-headline b {
  font-size: 16.5px;
  color: #c0271c;
}

.conclusion-bar .cb-sub {
  margin-top: 5px;
  font-size: 12px;
  color: #9a6a5f;
}

.conclusion-bar .cb-sub:empty {
  display: none;
}

/* 口径说明（合规配件）：屏幕上在，导出的 PDF 里也一定在 */
.conclusion-bar .cb-foot {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #9a8d7e;
}

.conclusion-bar.nothing .cb-headline {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
}

/* 档位小结表：各时点「生存总利益（含红利）」分别与两种银行存法的差额 */
.cb-table {
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.cb-table th {
  padding: 3px 0 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: #96635a;
  text-align: right;
  border-bottom: 1px solid #eccfc8;
  white-space: nowrap;
}

.cb-table td {
  padding: 3px 0;
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}

/* 第一列（对比时点）左对齐，与后面的数字拉开距离 */
.cb-table th:first-child,
.cb-table td:first-child {
  text-align: left;
  color: var(--ink-soft);
  padding-right: 18px;
}

/* 第一组金额列（一年期）右侧留白，把两组对比分开 */
.cb-table td:nth-child(2) {
  padding-right: 26px;
}

/* 一年期那列表头的右边界与它的金额列对齐 */
.cb-table th:not(:first-child):not(:last-child) {
  padding-right: 26px;
}

.cb-table td.cb-win {
  color: #c0271c;
  font-weight: 700;
}

.cb-table td.cb-lose {
  color: #8d8377;
}

/* 小结表里的向上箭头：细字符，字号要比实数大一点才看得清 */
.cb-table td .up {
  font-size: 11.5px;
  margin-left: 3px;
  vertical-align: 0.5px;
}

/* ===== 小结表联动：点任一档 → 右侧对比图换成那一年的数据 ===== */

.cb-table tbody tr.cb-pick {
  cursor: pointer;
}

.cb-table tbody tr.cb-pick td {
  transition: background 0.12s;
}

/* 悬停：极浅的暖色，暗示可点 */
.cb-table tbody tr.cb-pick:hover td {
  background: #faf5ef;
}

/* 选中：品牌浅橙底，和右侧正在展示的年份对应 */
.cb-table tbody tr.cb-pick.active td {
  background: var(--product-bg);
}

.cb-hint {
  margin-top: 7px;
  font-size: 11px;
  color: #a99a89;
}

/* ===== 结论区右侧「视觉对比长条」：等比画出「多出来的那一大截」 ===== */

/* 左：档位小结表；右：长条对比。窄屏自动换行堆叠 */
.cb-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 30px;
  margin-top: 8px;
}

/* 右侧整列（口径胶囊 + 长条）：与左侧小结表用虚线隔开 */
.cb-visual-col {
  flex: 1 1 320px;
  min-width: 250px;
  padding-left: 26px;
  border-left: 1px dashed #eccfc8;
}

/* 口径切换胶囊：三档并排，选中态直接用该档的颜色，一眼知道现在讲的是哪套 */
.cbv-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.cbv-mode {
  font: inherit;
  font-size: 11.5px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.cbv-mode:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cbv-mode.p-gain[aria-pressed="true"] { background: #fdecea; border-color: #d9432f; color: #a52d20; font-weight: 600; }
.cbv-mode.p-loss[aria-pressed="true"] { background: #e3eef0; border-color: #3f6f7a; color: #2f5a63; font-weight: 600; }
.cbv-mode.p-own[aria-pressed="true"]  { background: #f6e8e6; border-color: #8e2b24; color: #7a231d; font-weight: 600; }

.cbv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #96635a;
}

.cbv-legend {
  color: #b58a80;
}

.cbv-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 2px;
  background: #d93025;
  vertical-align: -1px;
}

.cbv-row + .cbv-row {
  margin-top: 7px;
}

.cbv-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
  font-size: 10.5px;
  color: #8d8377;
}

.cbv-label b {
  font-size: 12px;
  color: var(--ink);
}

.cbv-track {
  display: flex;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: #f3ece6;
}

.cbv-seg-base {
  background: #bcc7cf;      /* 灰段 = 与银行存款等值的部分 */
}

/* 差额段：三种口径共用同一套几何，只换「皮肤」——
   ① 亮收益红（实心） ② 银行青（浅底 + 虚线框，画出「空掉的那一格」）
   ③ 印章深红（实心）。靠明度阶梯 + 填充差异区分，黑白打印、复印也分得清 */
.cbv-seg-extra,
.cbv-seg-loss,
.cbv-seg-own {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.cbv-seg-extra {
  background: #d9432f;                     /* ① 多赚的钱 */
}

.cbv-seg-loss {
  background: #e3eef0;                     /* ② 银行少赚的钱：用银行自己的颜色，只画「缺」不画「坏」 */
  border: 1.5px dashed #3f6f7a;
  color: #2f5a63;
}

.cbv-seg-own {
  background: #8e2b24;                     /* ③ 本来属于您的钱：盖章深红 */
}

.cbv-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #8f2a20;
}

.cbv-note b {
  font-size: 12px;
}

.cbv-note + .cbv-note {
  margin-top: 2px;
  color: #9a6a5f;
}

/* 窄屏（含手机）：长条对比挪到小结表下方，占满整行 */
@media (max-width: 900px) {
  .cb-visual-col {
    flex: 1 1 100%;
    min-width: 0;
    padding: 9px 0 0;
    border-left: 0;
    border-top: 1px dashed #eccfc8;
  }
}

/* 单元格高亮：含红利高于银行 = 强；保证利益高于银行 = 弱。
   只保留加粗和字色，不再铺背景色（页面颜色太多，用户要求去掉） */
.compare-table td.win-strong {
  color: #b3261e;
  font-weight: 700;
}

.compare-table td.win-weak {
  color: #a8483a;
  font-weight: 600;
}

.compare-table td .up {
  font-size: 11.5px;
  margin-left: 3px;
  vertical-align: 0.5px;
}

/* 首次反超的整行：淡红底 + 左侧色条（含红利=红，保证利益=橙） */
.compare-table tbody tr.row-cross {
  background: #fff3f1;
}

.compare-table tbody tr.row-cross-gu {
  background: #fffaf6;
}

.compare-table tbody tr.row-cross td:first-child {
  box-shadow: inset 4px 0 0 #d93025;
}

.compare-table tbody tr.row-cross-gu td:first-child {
  box-shadow: inset 4px 0 0 #e2933f;
}

.row-badge {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: #c0271c;
  white-space: nowrap;
}

.row-badge.gu {
  color: #b0762c;
}

/* 生存总利益单元格：招财宝页写成「建议书值 + 万能账户金额 = 合计」，把过程摆出来。
   前两项压小、颜色退后，合计加粗当主角 —— 客户核对时看得到每一块，又不至于抢戏。 */
.sum-part {
  font-size: 11px;
  color: var(--ink-soft);
}

.sum-op {
  margin: 0 3px;
  font-size: 11px;
  color: var(--ink-soft);
}

.sum-total {
  font-weight: 700;
}

/* ===== 使用记录表 ===== */
.records-table thead th {
  background: #faf6ef;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 12px;
}

/* 文件名称左对齐，长文件名自动折行 */
.records-table th:nth-child(2),
.records-table td.rec-name {
  text-align: left;
  word-break: break-all;
}

.records-table td.rec-name {
  white-space: normal;
}

.records-table .records-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 24px 8px;
}

/* 响应式：平板 2 列、手机 1 列；
   窄屏下左侧菜单整体挪到屏幕底部的固定导航条，侧边栏隐藏 */
@media (max-width: 900px) {
  .params-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 按钮改 2×2，四块等宽，手机上一眼整齐 */
  .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: none;
  }
  .sidebar {
    display: none;
  }
  /* 手机端没有侧边栏（用底部导航），汉堡按钮不出现 */
  .topbar-toggle {
    display: none;
  }
  .topbar {
    padding: 0 14px;
  }
  .mobile-nav {
    display: block;         /* 内部 .mnav-tabs 自己排一行三个 tab */
  }
  /* 弹窗打开时收起底部导航条，避免遮挡和误触 */
  body.modal-open .mobile-nav {
    display: none;
  }
  /* 页面底部留出与导航条等高的空白，最后一行内容不会被压住 */
  .container {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 560px) {
  .container {
    padding: 12px 14px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .page-header {
    padding: 18px 14px 6px;
  }
  .page-header h1 {
    font-size: 17px;
  }
  .panel {
    padding: 14px 14px 16px;
    border-radius: 10px;
  }
  .params-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .field input {
    height: 44px;          /* 手指好按的高度 */
    font-size: 16px;        /* 避免 iOS 自动放大 */
  }
  /* 表格在手机上：字号更小、padding 更紧、保留横向滚动 */
  .compare-table {
    font-size: 12px;
  }
  .compare-table th,
  .compare-table td {
    padding: 7px 6px;
    font-size: 12px;
  }
  .th-product,
  .th-bank {
    font-size: 13px;
  }
  .compare-table thead tr:nth-child(2) th {
    font-size: 11px;
    line-height: 1.25;
  }
  .panel {
    padding: 14px 12px 16px;
  }
  .table-wrap {
    margin: 0 -12px;
    padding: 0 12px;
  }
}

/* ===== 打印 / 生成对比 PDF ===== */
.print-only { display: none; }

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  body {
    background: #fff;
    color: #000;
  }

  /* 屏幕上才需要的东西，不进 PDF */
  .page-header,
  .topbar,
  .sidebar,
  .mobile-nav,
  .actions,
  #input-panel,
  #snapshot-panel,        /* 客户档案是操作区，不进 PDF */
  .table-empty,           /* 还没生成过对比表的占位行，不该被打进 PDF */
  .modal-mask {
    display: none !important;
  }

  .print-only { display: block; }

  #print-head h1 {
    margin: 0 0 4px;
    font-size: 15pt;
    font-weight: 600;
  }

  .print-params {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 20px;
    margin-bottom: 10px;
    font-size: 9pt;
    color: #333;
  }

  .container {
    max-width: none;
    padding: 0;
  }

  .panel {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: #fff;
  }

  .panel-title {
    margin: 0 0 6px;
    font-size: 11pt;
  }

  .table-wrap {
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .compare-table {
    width: 100%;
    font-size: 8.5pt;
  }

  .compare-table th,
  .compare-table td {
    padding: 2px 5px;
    font-size: 8.5pt;
    white-space: nowrap;
  }

  .th-product,
  .th-bank {
    font-size: 11pt;
    padding: 4px 8px;
  }

  .compare-table th.th-long {
    max-width: none;
    white-space: nowrap;
  }

  .compare-table th.th-long .th-sub {
    font-size: 7pt;
  }

  /* 跨页时表头每页重复 */
  .compare-table thead {
    display: table-header-group;
  }

  .compare-table tbody tr {
    page-break-inside: avoid;
  }

  .compare-table tbody tr:hover {
    background: transparent !important;
  }

  /* 让底色 / 表头色也能打印出来 */
  .compare-table thead tr:nth-child(2) th,
  .compare-table tbody tr:nth-child(even) {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .th-product,
  .th-bank {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 反超高亮 / 结论条的底色也要打印出来，不然导出 PDF 就白做了 */
  .conclusion-bar,
  .compare-table tbody tr.row-cross,
  .compare-table tbody tr.row-cross-gu,
  .cb-table tbody tr.cb-pick.active td,
  .cbv-seg-base,
  .cbv-seg-extra,
  .cbv-seg-loss,
  .cbv-seg-own {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 「点任一档」「换口径」这类屏幕上的操作控件不打印 */
  .cb-hint,
  .cbv-modes {
    display: none;
  }

  .conclusion-bar {
    margin-bottom: 8px;
    padding: 7px 10px;
  }

  .conclusion-bar .cb-headline {
    font-size: 11pt;
  }

  .conclusion-bar .cb-headline b {
    font-size: 13pt;
  }

  .conclusion-bar .cb-sub {
    font-size: 8.5pt;
  }

  .cb-table {
    font-size: 8.5pt;
    margin-top: 5px;
  }

  /* 打印时只压缩行高与列间距，横向对齐规则与屏幕保持一致 */
  .cb-table th,
  .cb-table td {
    padding-top: 1.5px;
    padding-bottom: 1.5px;
  }

  .cb-table th {
    font-size: 8pt;
  }

  .cb-table th:first-child,
  .cb-table td:first-child {
    padding-right: 13px;
  }

  .cb-table td:nth-child(2),
  .cb-table th:not(:first-child):not(:last-child) {
    padding-right: 18px;
  }

  /* 视觉对比长条：压缩高度与字号，颜色必须打印出来 */
  .cb-body {
    gap: 4px 18px;
    margin-top: 5px;
  }

  .cb-visual-col {
    padding-left: 14px;
  }

  .cbv-head {
    margin-bottom: 5px;
    font-size: 7.5pt;
  }

  .cbv-label {
    font-size: 7.5pt;
    margin-bottom: 2px;
  }

  .cbv-label b {
    font-size: 8.5pt;
  }

  .cbv-track {
    height: 15px;
  }

  .cbv-seg-extra,
  .cbv-seg-loss,
  .cbv-seg-own {
    font-size: 8pt;
  }

  .cbv-row + .cbv-row {
    margin-top: 4px;
  }

  .cbv-note {
    margin-top: 4px;
    font-size: 7.5pt;
  }

  .cbv-note b {
    font-size: 8.5pt;
  }

  .row-badge {
    font-size: 6.5pt;
    margin-top: 1px;
  }
}

/* ===== 登录页 ===== */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(43, 38, 32, 0.08);
}

.login-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: var(--accent-ink);
}

.login-sub {
  margin: 6px 0 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

.login-form .field { margin-bottom: 14px; }
.login-form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  background: #fffdf9;
  color: var(--ink);
}
.login-form input:focus { outline: 2px solid var(--product-bg); border-color: var(--accent); }

.login-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.login-actions .btn { flex: 1; }

.login-tip {
  min-height: 20px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}
.login-tip.err { color: #b3402a; }

.code-row {
  display: flex;
  gap: 8px;
}
.code-row input { flex: 1; }

/* 第二步（验证码页）：提示行 + 上一步/重发按钮排 */
.code-hint {
  margin: 2px 0 14px;
  font-size: 14px;
  color: var(--ink-soft);
}
.code-hint b { color: var(--ink); }
.code-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.code-actions .btn { flex: 1; }


/* ===== 账户页 ===== */
.account-info {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
}
.account-form { max-width: 420px; }
.account-form .field { margin-bottom: 12px; }
.account-form input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  background: #fffdf9;
  color: var(--ink);
}

/* 侧边栏「退出登录」按钮：样式全部交给 .nav-item（a 标签同款），
   这里只重置 button 的浏览器默认外观。注意不要写 font 简写，
   否则会覆盖 .nav-item 的 font-size，导致它比其他菜单项大 */
.nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
}

/* ===== 管理后台通用（付费计划页起步，M2/M3 复用） ===== */
/* 宽度上限按「一行放得下 4 个字段」定：4×180(min) + 3×16(gap) = 768，
   留一点余量取 860，此时每列约 203px，与旧版 3 列时的字段宽度一致。
   窗口更窄时由 auto-fit 自动降到 3/2/1 列。 */
.admin-form { max-width: 860px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.form-grid input,
.form-grid select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  background: #fffdf9;
  color: var(--ink);
  font-family: inherit;
}
.form-grid input:focus,
.form-grid select:focus { outline: 2px solid var(--product-bg); border-color: var(--accent); }

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.btn-sm { padding: 4px 12px; font-size: 13px; }

/* 必填项的红色星号（星号与文字须在同一个内联元素里，
   否则在 label 的纵向 flex 布局下会分成两行） */
.req { color: #b3402a; margin-right: 2px; }

.st-on  { color: #4a7a3a; font-weight: 600; }
.st-mid { color: #c07f2f; font-weight: 600; }
.st-off { color: #b3402a; font-weight: 600; }

/* ===== 使用看板 ===== */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.dash-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}

.dash-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-ink);
}

.dash-label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.table-tip {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.table-tip.err { color: #b3402a; }

/* ===== 水印层（产品页）=====
   fixed 覆盖可视区：屏幕上极淡（防截图），打印时 Chrome 会把 fixed 层
   印到每一页（导出 PDF 每页都带）。pointer-events:none 不挡任何操作。 */
/* ===== 导出 PDF 水印 =====
   只在打印（导出 PDF）时出现，屏幕上完全不显示，避免干扰阅读。
   格子由 common.js 填入「显示名·手机尾号」。 */
.watermark {
  display: none;
}

@media print {
  .watermark {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 70px 60px;
  }

  .watermark span {
    transform: rotate(-24deg);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(150, 110, 70, 0.16); /* 纸上要能看出是谁导出的 */
  }
}

/* ===== 付费管理页 ===== */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}

.stat-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-ink);
}

.stat-label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* 到期预警的中间档（橙）：已到期用 st-off 红、60 天内用 st-on 绿 */
.warn-text { color: #c07a2a; font-weight: 600; }

/* ---------------------------------------------------------------------------
   错误页（404 / 500 / 413）：不依赖登录态与侧边栏，任何情况下都要能渲染出来。
   独立成一页而不是复用 .panel，是因为出错时页面框架可能本身就渲染不出来。
   --------------------------------------------------------------------------- */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.error-card {
  width: 100%;
  max-width: 460px;
  padding: 32px 28px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.error-code {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--product);
  letter-spacing: 2px;
}

.error-card h1 {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 600;
}

.error-desc {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}