/* ============================================================
 * IFA系统 · 方案书模块样式  plan.css
 * 命名前缀 pl-（与首页 .pcard 系列区分）
 * 依赖：style.css 的 VI 变量、app-shell.css 的 .acard/.arow/.seg 等
 * ============================================================ */

/* ---------- 通用 ---------- */
.pl-wrap { padding-bottom: 24px }
/* 营销站 style.css 有 section{padding:64px 0}，会泄漏到 App 页面（.pl-result / #content 被撑出 64px 空白）。
   :where() 零特异性 → 只抵消裸 section，不动 .pl-form 等自带 padding 的类。 */
:where(.pl-wrap) section { padding: 0 }
.pl-sec-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px }
.pl-sec-title h3 { font-size: 16px; color: var(--navy) }
.pl-sec-title .sp { flex: 1 }
.pl-muted { color: var(--sub); font-size: 12px }
.pl-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" }

/* ---------- 保司标识 ---------- */
.ins-logo { width: auto; max-width: 100%; object-fit: contain }
.logo-fb { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto }
.ins-line { display: flex; align-items: center; gap: 8px; min-width: 0 }
.ins-line .nm { font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---------- 筛选栏 ---------- */
.pl-filter { position: sticky; top: 0; z-index: 12; background: var(--cream);
  padding: 10px 0 12px; margin-bottom: 4px }
.pl-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 10px }
.pl-search input { flex: 1; border: 0; outline: 0; font-size: 15px; background: transparent; min-width: 0 }
.pl-search .ico { color: var(--sub); flex: 0 0 auto }
/* 险种筛选：chips 直接换行排列，避免「小屏鼠标无法横向滚动选不到」的问题 */
.pl-chips-row { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 2px }
.pl-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 7px 14px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; white-space: nowrap }
.pl-chip.on { background: var(--navy); color: #fff; border-color: var(--navy) }
.pl-chip.gold.on { background: var(--gold); border-color: var(--gold) }
.pl-count { font-size: 12px; color: var(--sub); margin: 10px 2px 8px }

/* ---------- 产品 / 保司卡片 ---------- */
.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.pl-grid.wide { grid-template-columns: repeat(2, 1fr) }
.pl-card { --ac: var(--navy); position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--ac); border-radius: 14px; padding: 16px 16px 14px;
  box-shadow: 0 2px 10px rgba(0, 32, 72, .06); cursor: pointer; transition: .2s; overflow: hidden }
.pl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 32, 72, .12) }
.pl-card .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.pl-card .top .meta { min-width: 0; flex: 1 }
.pl-card .top .meta .cn { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pl-card h4 { font-size: 15px; color: var(--ink); line-height: 1.45; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pl-card .sub { font-size: 12px; color: var(--sub); margin-bottom: 10px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
.pl-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 1px solid var(--line);
  padding-top: 12px; margin-top: auto }
.pl-metric { text-align: center }
.pl-metric b { display: block; font-size: 16px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums }
.pl-metric i { font-style: normal; font-size: 11px; color: var(--sub) }
.pl-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px }
.pl-tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: #F4F6FA; color: #5A6478; white-space: nowrap }
.pl-tag.warn { background: #FFF4E5; color: #A96B00 }
.pl-tag.ok { background: #EAF7F0; color: #1E7A52 }
.pl-tag.brand { background: var(--ac); color: #fff }
.pl-tag.sim { background: #F0EFFA; color: #5A4FCF }

/* ---------- 保司选择（左保司 / 右产品） ---------- */
.pl-picker { display: grid; grid-template-columns: 232px 1fr; gap: 16px; align-items: start }
.pl-ins-list { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; max-height: 70vh; overflow-y: auto }
.pl-ins-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--line) }
.pl-ins-item:last-child { border-bottom: 0 }
.pl-ins-item.on { background: #F4F7FC; box-shadow: inset 3px 0 0 var(--navy) }
.pl-ins-item .nm { font-size: 14px; font-weight: 600; color: var(--navy); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-ins-item .cnt { font-size: 11px; color: var(--sub) }

/* ---------- 选中/已添加 ---------- */
.pl-selected { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px }
.pl-sel-item { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--navy);
  border-radius: 12px; padding: 8px 10px; font-size: 13px; color: var(--navy) }
.pl-sel-item .x { width: 20px; height: 20px; border-radius: 50%; background: var(--cream); display: flex;
  align-items: center; justify-content: center; font-size: 12px; color: var(--sub) }
.is-picked { border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(0, 32, 72, .08) }

/* ---------- 演示数据表格 ---------- */
.pl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line);
  border-radius: 12px; background: #fff }
table.pl-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; font-size: 13px }
table.pl-table th, table.pl-table td { padding: 9px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums }
table.pl-table thead th { background: #F4F7FC; color: var(--navy); font-weight: 700; position: sticky; top: 0; z-index: 2 }
table.pl-table th:first-child, table.pl-table td:first-child { position: sticky; left: 0; z-index: 3;
  background: #fff; text-align: left; font-weight: 600; color: var(--navy) }
table.pl-table thead th:first-child { background: #F4F7FC; z-index: 4 }
table.pl-table tbody tr:nth-child(even) td { background: #FBFCFE }
table.pl-table tbody tr:nth-child(even) td:first-child { background: #FBFCFE }
table.pl-table tr.hl td { background: #FFF8EF !important }
table.pl-table tr.hl td:first-child { font-weight: 700 }
table.pl-table td.pos { color: var(--green) }
table.pl-table td.neg { color: var(--red) }

/* ---------- 演示表字段勾选 ---------- */
.colpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; max-height: 52vh; overflow-y: auto }
@media (max-width: 560px) { .colpick { grid-template-columns: 1fr } }
.colpick-i { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 13px; color: var(--navy); cursor: pointer; background: #fff }
.colpick-i:hover { border-color: #C6D0E0 }
.colpick-i input { width: 16px; height: 16px; accent-color: var(--navy); flex: 0 0 auto }
.colpick-i.lock { background: #F4F7FC; cursor: default }
.colpick-i.lock span::after { content: '（必选）'; font-size: 11px; color: var(--sub) }
.pl-colbtn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff;
  border-radius: 10px; padding: 7px 12px; font-size: 12.5px; color: var(--navy); font-weight: 600; cursor: pointer }

/* ---------- 对比 ---------- */
.pl-cmp { overflow-x: auto; -webkit-overflow-scrolling: touch }
table.pl-cmp-table { border-collapse: separate; border-spacing: 0; min-width: 640px; width: 100%; font-size: 13px; background: #fff }
table.pl-cmp-table th, table.pl-cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--line);
  text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums }
table.pl-cmp-table th:first-child, table.pl-cmp-table td:first-child { position: sticky; left: 0; background: #fff;
  text-align: left; font-weight: 600; color: var(--navy); z-index: 2; min-width: 104px }
table.pl-cmp-table thead th { background: #F4F7FC; color: var(--navy); position: sticky; top: 0; z-index: 3 }
table.pl-cmp-table thead th:first-child { z-index: 4 }
table.pl-cmp-table .colhead { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px }
table.pl-cmp-table .colhead .cn { font-size: 12px; font-weight: 600 }
table.pl-cmp-table .colhead .ac { width: 100%; height: 3px; border-radius: 2px; margin-top: 2px }
table.pl-cmp-table td.best { color: var(--red); font-weight: 800; background: #FFF8F8 }
table.pl-cmp-table tr.grp td { background: #EDF1F7; color: var(--navy); font-weight: 700; text-align: left }

/* ---------- 文档（导出 PDF / 图片 的载体） ---------- */
/* overflow-x:auto：文档内 nowrap 表格在小屏上自行横向滚动，
   不再把整个页面撑宽（此前会把左侧配置列一起挤出屏幕）。 */
.doc { --brand: var(--navy); background: #fff; color: var(--ink); width: 100%; max-width: 900px; margin: 0 auto 18px;
  padding: 28px 30px; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(0, 32, 72, .08);
  overflow-x: auto }
.doc-head { display: flex; align-items: flex-start; gap: 14px; border-bottom: 3px solid var(--brand); padding-bottom: 14px; margin-bottom: 18px }
.doc-head .brand-logo { height: 40px; width: auto }
.doc-head .t { flex: 1; min-width: 0 }
.doc-head h2 { font-size: 19px; color: var(--brand); line-height: 1.3 }
.doc-head .sub { font-size: 12px; color: var(--sub); margin-top: 4px }
.doc-head .agent { text-align: right; font-size: 12px; color: var(--ink); line-height: 1.7; flex: 0 0 auto }
.doc-head .agent b { display: block; font-size: 14px; color: var(--brand) }
.doc h3 { font-size: 15px; color: var(--brand); margin: 20px 0 10px; padding-left: 10px; border-left: 4px solid var(--brand) }
.doc .kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; margin: 10px 0 4px }
.doc .kv .k { font-size: 11px; color: var(--sub) }
.doc .kv .v { font-size: 14px; font-weight: 600; color: var(--ink) }
.doc .note { font-size: 11px; color: var(--sub); line-height: 1.9; margin-top: 14px;
  border-top: 1px dashed var(--line); padding-top: 12px }
.doc .doc-note { font-size: 11px; color: var(--sub); line-height: 1.7; margin-top: 6px }
.doc .doc-note.warn { color: #C81E32; background: #FDF2F3; border-radius: 8px; padding: 8px 10px }
.doc .foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); margin-top: 18px }
.doc .kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 6px }
.doc .kpi div { background: #F6F8FC; border-radius: 10px; padding: 12px; text-align: center }
.doc .kpi b { display: block; font-size: 18px; color: var(--brand); font-variant-numeric: tabular-nums }
.doc .kpi span { font-size: 11px; color: var(--sub) }
.doc table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums }
.doc table th, .doc table td { border: 1px solid #E3E8EF; padding: 7px 8px; text-align: right; white-space: nowrap }
.doc table th { background: #F4F7FC; color: var(--brand); text-align: center }
.doc table td:first-child, .doc table th:first-child { text-align: left }
.doc .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.doc .cmp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px }
.doc .cmp-card { border: 1px solid var(--line); border-top: 4px solid var(--c, var(--navy)); border-radius: 10px; padding: 12px 14px }
.doc .cmp-card h5 { font-size: 13px; color: var(--ink); margin-bottom: 6px }
.doc .cmp-card .row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--line) }
.doc .ins-block { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--line) }
.doc .ins-block img { height: 30px; width: auto }
.doc .ins-block .txt { font-size: 12px; color: #4A5568; line-height: 1.85 }

/* 风格主题（配置里的主色调） */
.doc.t-navy { --brand: #002048 }
.doc.t-red { --brand: #E80038 }
.doc.t-gold { --brand: #A8802F }
.doc.t-green { --brand: #1E7A52 }
.doc.t-purple { --brand: #4B3F9E }
.doc.t-slate { --brand: #334155 }

/* ---------- 进度 / 步骤 ---------- */
.pl-steps { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap }
.pl-step { flex: 1; min-width: 120px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px }
.pl-step.on { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 32, 72, .06) }
.pl-step .n { font-size: 11px; color: var(--sub) }
.pl-step .t { font-size: 13px; font-weight: 600; color: var(--navy) }
.pl-step .v { font-size: 13px; color: var(--ink) }

/* ---------- 空态 / 提示 ---------- */
.pl-empty { text-align: center; padding: 40px 20px; color: var(--sub); font-size: 14px }
.pl-empty .big { font-size: 34px; margin-bottom: 10px }
.pl-note { background: #F6F8FC; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0;
  padding: 12px 14px; font-size: 12.5px; color: #4A5568; line-height: 1.85 }
.pl-vip-tip { background: linear-gradient(90deg, #FFF8EF, #FFF); border: 1px solid #F0E2CC; border-radius: 12px;
  padding: 12px 14px; font-size: 13px; color: #7A5C25; display: flex; align-items: center; gap: 10px }

/* ---------- 关键数值卡 ---------- */
.pl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.pl-kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center }
.pl-kpi b { display: block; font-size: 19px; color: var(--navy); font-variant-numeric: tabular-nums }
.pl-kpi span { font-size: 11px; color: var(--sub) }
.pl-kpi.good b { color: var(--red) }

/* ---------- 加载骨架 ---------- */
.pl-skel { height: 92px; border-radius: 14px; background: linear-gradient(90deg, #EEF1F6, #F7F9FC, #EEF1F6);
  background-size: 200% 100%; animation: plskel 1.2s infinite }
@keyframes plskel { 0% { background-position: 0 0 } 100% { background-position: -200% 0 } }

/* ---------- 品牌色带（产品详情头部） ---------- */
.pl-hero { --ac: var(--navy); position: relative; border-radius: 16px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--ac), #0B2A50); padding: 20px 22px; margin-bottom: 16px }
.pl-hero .hrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px }
.pl-hero .htitles { min-width: 0 }
.pl-hero .hins { font-size: 12px; opacity: .8; line-height: 1.3 }
.pl-hero .logo-box { background: #fff; border-radius: 10px; padding: 6px 8px; display: flex; align-items: center }
.pl-hero .logo-box img { height: 34px; width: auto }
.pl-hero h2 { font-size: 20px; line-height: 1.35; margin: 2px 0 0 }
.pl-hero .sub { font-size: 12.5px; color: rgba(255, 255, 255, .78); margin-top: 6px }
.pl-hero .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px }
.pl-hero .acts a, .pl-hero .acts button { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer }
.pl-hero .acts a.primary { background: var(--red); border-color: var(--red) }

/* ---------- 保司资料页 ---------- */
.pl-co-head { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; border-left: 5px solid var(--ac, var(--navy)) }
.pl-co-head img { height: 34px; width: auto; max-width: 120px; object-fit: contain }
.pl-co-head .nm { font-size: 17px; font-weight: 700; color: var(--navy) }
.pl-co-head .en { font-size: 12px; color: var(--sub) }
.pl-kv-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.pl-kv-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px }
.pl-kv-item .k { font-size: 11px; color: var(--sub) }
.pl-kv-item .v { font-size: 14px; font-weight: 600; color: var(--navy); word-break: break-all }
.pl-para { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  font-size: 13.5px; color: #4A5568; line-height: 2 }
.pl-para b { color: var(--navy) }
.pl-hl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.pl-hl-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px }
.pl-hl-item h5 { font-size: 13px; color: var(--navy); margin-bottom: 6px }
.pl-hl-item ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: #4A5568; line-height: 1.9 }
.pl-ratebar { display: flex; align-items: center; gap: 8px }
.pl-ratebar .bar { flex: 1; height: 8px; border-radius: 4px; background: #EDF0F5; overflow: hidden }
.pl-ratebar .bar i { display: block; height: 100%; border-radius: 4px; background: var(--green) }
.pl-ratebar.warn .bar i { background: var(--gold) }
.pl-ratebar.bad .bar i { background: var(--red) }

/* ---------- 大数据 ---------- */
.pl-chart { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px }
.pl-chart h4 { font-size: 14px; color: var(--navy); margin-bottom: 4px }
.pl-chart .desc { font-size: 12px; color: var(--sub); margin-bottom: 12px }
.pl-rank { display: flex; flex-direction: column; gap: 8px }
.pl-rank .item { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; font-size: 13px }
.pl-rank .no { width: 22px; height: 22px; border-radius: 50%; background: var(--cream); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700 }
.pl-rank .item:nth-child(-n+3) .no { background: var(--navy); color: #fff }
.pl-rank .bar { height: 8px; border-radius: 4px; background: var(--navy); opacity: .85 }

/* ---------- 底部操作条（手机） ---------- */
.pl-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px }
.pl-actionbar .btn { flex: 1 }
body.has-actionbar .app-main { padding-bottom: 84px }
body.has-actionbar .tabbar { display: none }

/* ---------- 方案书/计划书 生成后的「结果页」模式 ----------
   body.docmode：隐藏配置区，结果区占满整宽；底部固定 [返回修改配置][导出▾]。
   导出菜单合并成一个按钮（点开抽屉选 图片 / Excel / PDF），不再三个按钮占一排。 */
/* 布局：左右两列。子项必须 min-width:0 —— 否则演示表/文档会把 1fr 轨道
   撑到内容宽度（min-content），整页向右溢出、右侧信息被裁掉（实测复现）。 */
.pl-layout > * { min-width: 0 }
/* 文档预览（计划书/方案书 .doc）里的宽表格：容器内横向滚动，不再把页面撑宽 */
#docHost { overflow-x: auto }

body.docmode .pl-form, body.docmode .cmp-editpane { display: none !important }
body.docmode .pl-layout { grid-template-columns: 1fr }
/* 计划书结果页：生成后只保留计划书文档本体（KPI 卡 / 标签页 / 演示表都属于「配置态预览」） */
body.docmode .pl-kpis, body.docmode .res-tabs, body.docmode .pl-tablewrap,
body.docmode .pl-flow-hint { display: none !important }
.docmode-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: none; gap: 10px;
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) }
.docmode-bar .btn { flex: 1; min-width: 0; white-space: nowrap }
body.docmode .docmode-bar { display: flex }
body.docmode .app-main { padding-bottom: 90px }
body.docmode .tabbar { display: none }
/* 桌面/平板：底栏左端从侧栏右缘开始（rail 固定层 z-index 70 会盖住 left:0 的底栏）；
   body.rail-min 已把 --rail-lg 重定义为 76px，折叠态自动跟随。 */
@media (min-width:768px) {
  body.docmode .docmode-bar { left: var(--rail); padding: 12px 28px calc(12px + env(safe-area-inset-bottom)) }
}
@media (min-width:1181px) { body.docmode .docmode-bar { left: var(--rail-lg) } }

/* ---------- 导出菜单：从导出按钮上方原地展开（不再弹抽屉） ---------- */
.exp-pop { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 8px;
  background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px; width: max-content; max-width: min(320px, calc(100vw - 20px));
  box-shadow: 0 14px 40px rgba(0, 32, 72, .18); transform-origin: bottom right;
  animation: expPop .16s ease-out }
@keyframes expPop { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
.exp-pop .btn { width: 100%; text-align: center; white-space: normal; line-height: 1.4 }
.exp-pop .exp-tip { font-size: 11.5px; color: var(--sub); padding: 1px 4px 3px; line-height: 1.6 }

/* 受保人性别：紧凑并排（此前在窄列里 flex:1 换行堆成两个大按钮） */
#bGender { flex-wrap: nowrap }
#bGender button { flex: 1 1 0; min-width: 0; padding: 9px 6px }

/* ---------- 产品库：左保司（带数量）/ 右产品 ---------- */
.pl-split { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start }
.pl-rail { position: sticky; top: 74px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; max-height: calc(100vh - 100px); overflow-y: auto; -webkit-overflow-scrolling: touch }
.pl-rail .rh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px;
  padding: 10px 13px; font-size: 12px; color: var(--sub); background: #F6F8FC; border-bottom: 1px solid var(--line) }
.pl-rail-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid #F2F4F8; background: #fff }
.pl-rail-item:last-child { border-bottom: 0 }
.pl-rail-item .lg { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 24px }
.pl-rail-item .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-rail-item .cnt { flex: 0 0 auto; font-size: 11px; color: var(--sub); background: var(--cream);
  border-radius: 20px; padding: 1px 7px; font-variant-numeric: tabular-nums }
.pl-rail-item.on { background: #F4F7FC; box-shadow: inset 3px 0 0 var(--navy) }
.pl-rail-item.on .nm { color: var(--navy) }
.pl-rail-item.on .cnt { background: var(--navy); color: #fff }
.pl-rail-item.zero .nm { color: #A8B0BF; font-weight: 500 }
.pl-rail-item.zero .cnt { opacity: .55 }
.pl-chip.is-off { opacity: .42 }
.pl-chip.is-off .n { font-weight: 400 }

/* 手机顶栏操作按钮（产品库） */
@media (max-width: 767.98px) {
  .ab-actions .btn { padding: 6px 9px; font-size: 12px; border-radius: 8px; line-height: 1.2 }
  .pl-split { grid-template-columns: 96px minmax(0, 1fr); gap: 10px }
  .pl-rail { position: static; max-height: none; border-radius: 12px }
  .pl-rail .rh { padding: 8px 6px; font-size: 11px; justify-content: center }
  .pl-rail-item { flex-wrap: wrap; justify-content: center; gap: 4px; padding: 8px 5px }
  .pl-rail-item .lg { display: none }
  .pl-rail-item .nm { flex: 1 0 100%; text-align: center; font-size: 12.5px }
  .pl-rail-item .cnt { font-size: 10px; padding: 0 5px }
  .pl-rail-item.on { box-shadow: inset 0 -2px 0 var(--navy) }
  .pl-card { padding: 12px 12px 10px }
  .pl-card .top { margin-bottom: 8px }
  .pl-card h4 { font-size: 14px }
  .pl-card .pl-tag.brand { display: none }
  .pl-metric b { font-size: 14px }
  .pl-filter { position: static; padding-top: 4px }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .pl-grid { grid-template-columns: repeat(2, 1fr) }
  .pl-picker { grid-template-columns: 180px 1fr }
  .pl-kv-list { grid-template-columns: repeat(2, 1fr) }
  .doc .kv { grid-template-columns: repeat(2, 1fr) }
  .doc .kpi { grid-template-columns: repeat(2, 1fr) }
  .doc .cmp-cards { grid-template-columns: 1fr }
}
@media (max-width: 767.98px) {
  .pl-grid { grid-template-columns: 1fr; gap: 12px }
  .pl-grid.wide { grid-template-columns: 1fr }
  .pl-picker { grid-template-columns: 1fr; gap: 12px }
  .pl-ins-list { display: flex; gap: 8px; overflow-x: auto; max-height: none; border: 0; background: transparent;
    padding-bottom: 4px }
  .pl-ins-item { flex: 0 0 auto; border: 1.5px solid var(--line); border-radius: 20px; padding: 8px 14px; background: #fff }
  .pl-ins-item.on { background: var(--navy); color: #fff; box-shadow: none }
  .pl-ins-item.on .nm { color: #fff }
  .pl-ins-item .cnt { display: none }
  .pl-kpis { grid-template-columns: repeat(2, 1fr) }
  .pl-kv-list { grid-template-columns: 1fr }
  .pl-hl { grid-template-columns: 1fr }
  .pl-filter { padding-top: 6px }
  .doc { padding: 18px 16px; border-radius: 12px }
  .doc .kv, .doc .kpi { grid-template-columns: repeat(2, 1fr) }
  .doc-head { flex-wrap: wrap }
  .doc-head .agent { text-align: left; flex: 1 0 100% }
  .pl-hero h2 { font-size: 17px }
  .pl-metric b { font-size: 15px }
  .pl-rank .item { grid-template-columns: 24px 1fr auto; font-size: 12px }
}

/* ---------- 打印（导出 PDF） ---------- */
@media print {
  .no-print, #ifa-shell, #ifa-tabbar, .pl-actionbar, .appbar, .pagebar, .rail, .tabbar { display: none !important }
  body { background: #fff }
  .app-main { margin: 0 !important; padding: 0 !important }
  .doc { box-shadow: none; border: 0; max-width: none; padding: 0; page-break-after: always }
  .doc:last-child { page-break-after: auto }
  table { page-break-inside: auto }
  tr { page-break-inside: avoid }
}

/* ---------- 调整年度（默认 / 所有年 / 自定义多段） ---------- */
.yc { font-size: 13.5px }
.yc-modes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px }
.yc-modes label {
  display: grid; grid-template-columns: 18px 1fr; gap: 4px 8px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--line, #E5E7EB); border-radius: 10px; cursor: pointer;
  background: #fff; transition: border-color .15s, background .15s;
}
.yc-modes label:hover { border-color: #002048 }
.yc-modes label input { margin: 3px 0 0; accent-color: #002048 }
.yc-modes label b { font-size: 13.5px; color: #002048 }
.yc-modes label span { grid-column: 2; font-size: 12px; color: #6B7280; line-height: 1.5 }
.yc-modes label:has(input:checked) { border-color: #002048; background: #F4F7FB }
.yc-rules { margin-top: 10px; padding: 10px 12px; background: #FAFAFA; border-radius: 10px }
.yc-tip { font-size: 11.5px; color: #6B7280; line-height: 1.6; margin-bottom: 8px }
.yc-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 0; border-bottom: 1px dashed #E5E7EB;
}
.yc-row:last-of-type { border-bottom: 0 }
.yc-row > span { color: #6B7280; font-size: 12.5px }
.yc-row input[type=number] {
  width: 68px; padding: 6px 8px; border: 1px solid #D1D5DB; border-radius: 8px;
  font-size: 13px; text-align: center; color: #111827; background: #fff;
}
.yc-row input[type=number]:focus { outline: none; border-color: #002048 }
.yc-row select {
  padding: 6px 8px; border: 1px solid #D1D5DB; border-radius: 8px;
  font-size: 12.5px; background: #fff; color: #111827;
}
.yc-del {
  margin-left: auto; width: 26px; height: 26px; border: 1px solid #E5E7EB; border-radius: 8px;
  background: #fff; color: #9CA3AF; font-size: 13px; line-height: 1; cursor: pointer; flex: none;
}
.yc-del:hover { border-color: #E80038; color: #E80038 }
.yc-empty { font-size: 12px; color: #9CA3AF; padding: 6px 0 10px }
.yc-add { margin-top: 10px; width: 100% }
.yc-prev {
  margin-top: 12px; padding: 10px 12px; background: #F4F7FB; border-radius: 10px;
  font-size: 12px; color: #374151; line-height: 1.7; word-break: break-all;
  max-height: 108px; overflow: auto;
}
.yc-prev b { color: #002048 }
@media (max-width: 767.98px) {
  .yc-row input[type=number] { width: 60px }
  .yc-row select { flex: 1 0 auto }
}

/* ---------- 简易计划书（一页纸 · 可存图） ---------- */
.sp-mask {
  position: fixed; inset: 0; z-index: 240; background: rgba(0, 10, 24, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow: auto; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* 卡片固定 500px 宽：6 列演示表才放得下；窄屏由 .sp-mask 横向滚动，
   导出 PNG 的宽度也就一致（scale 2 → 960px），不会因屏幕宽窄而被裁列 */
.sp-box { width: 400px; max-width: none; margin: auto; flex: none }
/* 有提取列（8 列）或配置了提取时加宽，保证列不被挤碎；导出 PNG 宽度一致 */
.sp-box.wide { width: 400px }
.sp-card {
  --sp-acc: #002048;                    /* 强调色：由【调整】面板的「主色调 / 风格」覆盖 */
  background: #fff; border-radius: 14px; padding: 14px 10px 12px;
  box-shadow: 0 18px 48px rgba(0, 32, 72, .22); color: #111827;
}
.sp-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #EEF1F5 }
.sp-head img, .sp-head i {
  width: 42px; height: 42px; border-radius: 10px; object-fit: contain; flex: none;
  background: #F4F7FB; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-style: normal; font-size: 17px; font-weight: 700;
}
.sp-title { min-width: 0 }
.sp-title b { display: block; font-size: 16.5px; color: var(--sp-acc, #002048); line-height: 1.35 }
.sp-title span { font-size: 11.5px; color: #6B7280 }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 12px }
.sp-kv label { display: block; font-size: 11.5px; color: #6B7280; margin-bottom: 3px }
.sp-kv b { font-size: 14.5px; color: var(--sp-acc, #002048); font-weight: 700 }
.sp-kv b.hl { color: #E80038 }
.sp-sec { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px }
.sp-sec b { font-size: 13px; color: var(--sp-acc, #002048) }
.sp-sec span { font-size: 10.5px; color: #9CA3AF }
/* 演示表：紧凑（行高约为旧版一半），列更多、一屏能看完整趋势 */
.sp-table { width: 100%; border-collapse: collapse; font-size: 11px }
.sp-table th {
  background: var(--sp-acc, #002048); color: #fff; font-weight: 600; font-size: 9.5px;
  padding: 4px 1px; text-align: right; line-height: 1.15; white-space: normal; vertical-align: middle;
}
.sp-table th:first-child { text-align: left; border-radius: 6px 0 0 6px; padding-left: 5px }
.sp-table th:last-child { border-radius: 0 6px 6px 0; padding-right: 5px }
.sp-table td { padding: 2px 1px; border-bottom: 1px solid #F1F3F6; text-align: right;
  color: #111827; font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap }
.sp-table tbody tr:nth-child(even) td { background: #F8FAFC }
/* 8 列（含提取）：字号与内边距再压一档，保证一屏读完 */
.sp-table.wd th, .sp-table.wd td { font-size: 10.5px; padding: 3px 2px }
.sp-table.wd td:first-child { padding-left: 6px }
/* 优惠年份：划线原价紧跟优惠后金额 */
.sp-table td s { color: #B0B7C3; margin-right: 3px; text-decoration-thickness: 1px }
.sp-table td:first-child { text-align: left; color: #6B7280; white-space: nowrap; padding-left: 7px }
.sp-table td:last-child { padding-right: 7px }
.sp-table td.pos { color: #0B8F5B; font-weight: 600 }
.sp-table td.neg { color: #E80038; font-weight: 600 }
.sp-table td.dim { color: #C3CAD4 }
.sp-table tr.be td { background: #FFF7E8; border-top: 1px solid #F0DDB0; border-bottom: 1px solid #F0DDB0 }
.sp-table tr.be td:first-child { color: #8A5A00; font-weight: 700 }
.sp-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px }
.sp-foot-grid.three { grid-template-columns: 1.1fr 1.6fr 1fr }
.sp-note { margin-top: 14px; font-size: 10.5px; line-height: 1.65; color: #9CA3AF }
.sp-brand { margin-top: 10px; text-align: center; font-size: 10.5px; color: #C8A060; letter-spacing: .5px }
.sp-acts { display: flex; gap: 10px; margin-top: 14px }
.sp-acts .btn { flex: 1 }
.sp-tip { text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .78); margin: 10px 0 0 }
/* ---- 简易计划书 v2（2026-09-24 · 手机竖版窄卡）---- */
.sp-head { position: relative }
.sp-who { margin-left: auto; text-align: right; flex: none }
.sp-who label { display: block; font-size: 9px; color: #9CA3AF; margin-bottom: 1px }
.sp-who b { font-size: 11px; color: var(--sp-acc, #002048); font-weight: 600 }
/* 计划摘要：紧凑四列网格 */
.sp-sumgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 2px }
/* 倍数/IRR 卡片 */
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px }
.sp-stat { background: #F4F7FB; border-radius: 9px; padding: 7px 2px; text-align: center }
.sp-stat b { display: block; font-size: 14px; color: var(--sp-acc, #002048); font-weight: 800 }
.sp-stat span { font-size: 8.5px; color: #6B7280 }
/* 年度单元格：回本浮动角标（不占列） */
.sp-table td.yr { position: relative; text-align: left; white-space: nowrap; padding-left: 5px; color: #6B7280; font-size: 10.5px }
.beBadge { position: absolute; top: -2px; right: 0; font-style: normal; font-size: 8px; line-height: 1;
  background: #E80038; color: #fff; border-radius: 4px; padding: 1px 2px; font-weight: 700 }
/* 里程碑（翻倍/三倍/四倍，2026-09-25）：与「回本」同款浮动角标，但用品牌藏青 + 浅灰蓝底，
   与保司强调色无关 → 换主题也不会撞色。极少数年度同时达成（回本+倍数）时，倍数标挪到底部避免重叠。 */
.sp-table tr.ms td { background: #F4F7FB }
.sp-table tr.ms td.yr { color: #002048; font-weight: 700 }
.xBadge { position: absolute; top: -2px; right: 0; font-style: normal; font-size: 8px; line-height: 1;
  background: #002048; color: #fff; border-radius: 4px; padding: 1px 2px; font-weight: 700 }
.sp-table tr.be.ms .xBadge { top: auto; bottom: -2px }
/* 保费单元格：优惠前(划线小字·靠上) + 实付(靠下) 同格上下排 */
.sp-table td.prem { line-height: 1.05 }
.sp-table td.prem s { display: block; font-size: 8px; color: #B0B7C3; margin-right: 0; text-decoration-thickness: 1px }
.sp-table td.prem b { display: block; font-weight: 600 }
/* 行多 → 字号微调确保一屏 */
.sp-card.dense .sp-table th, .sp-card.dense .sp-table td { font-size: 9.5px; padding: 2px 1px }
@media (max-width: 420px) {
  .sp-sumgrid { grid-template-columns: repeat(2, 1fr) }
  .sp-stats { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 420px) {
  .sp-grid { gap: 8px 10px }
  .sp-card { padding: 16px 14px 14px; border-radius: 14px }
  .sp-title b { font-size: 15px }
}

/* ---- 简易计划书 v3（2026-09-24 · 风格可调 / 产品要点 / 经纪人 / 头像·二维码）----
   强调色统一走 .sp-card 的 --sp-acc（【调整】面板的「主色调 / 风格」写入）：
   默认 = 品牌藏青；保司风格 = 该产品所属保险公司的品牌色；也可指定主题色。 */
.sp-head img.ava { object-fit: cover; border-radius: 12px; background: #F4F7FB }
/* 产品要点：两列紧凑标签条（label 用小色块，正文最多两行） */
.sp-points { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px }
.sp-pt { display: flex; gap: 5px; align-items: flex-start; min-width: 0 }
.sp-pt i { font-style: normal; flex: none; font-size: 8.5px; line-height: 1.4; color: #fff;
  background: var(--sp-acc, #002048); border-radius: 3px; padding: 1px 3px }
.sp-pt span { font-size: 9.5px; line-height: 1.45; color: #4B5563; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.sp-pt.full { grid-column: 1 / -1 }
/* 经纪人信息：只渲染填过的项 */
.sp-agent { margin-top: 10px; padding-top: 9px; border-top: 1px solid #EEF1F5;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 9.5px; color: #9CA3AF }
.sp-agent b { color: #111827; font-weight: 600 }
/* 页脚：左品牌行 + 右二维码 */
.sp-foot { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px }
.sp-foot .sp-brand { margin: 0; text-align: left; flex: 1 }
.sp-qr { width: 50px; height: 50px; flex: none; object-fit: contain; background: #fff;
  border: 1px solid #EEF1F5; border-radius: 6px; padding: 2px }
@media (max-width: 420px) {
  .sp-points { grid-template-columns: 1fr }
  .sp-agent { grid-template-columns: 1fr }
}
/* ---- 【调整】面板的风格色点 ---- */
.spd-dot {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
  color: #6B7280; font-size: 10px; font-weight: 600; box-shadow: inset 0 0 0 1px #E3E8EF;
}
.spd-dot.spd-def { color: #002048 }
.spd-dot.on { border-color: #002048; box-shadow: 0 0 0 3px rgba(0, 32, 72, .10) }
.spd-dot:not(.spd-def) { color: #fff }
/* 【调整】面板内部的表单栅格
   ⚠️ 两个必须踩过的坑（2026-09-25 用户报「字段显示不全」）：
   ① 选择器要写到 `.sp-adj .frow …`（3 类）——plan.html 的**页面内联样式**里也有一条
      `.frow .pair { 1fr 1fr }` 与 `.frow input { width:100% }`，同优先级且更靠后，
      只写 `.sp-adj .pair` / `.sp-adj .chk input` 会被它们压掉；
   ② 文本框规则必须 `:not([type=checkbox])` —— 否则 8 个字段的复选框被拉成整格宽，
      标签被挤到格子外（8 个字段只看得见 4 个标签，正是用户截图的现象）。 */
.sp-adj .frow { margin-bottom: 12px }
.sp-adj .frow > label { display: block; font-size: 12px; color: #6B7280; margin-bottom: 6px }
.sp-adj .frow input:not([type=file]):not([type=checkbox]) {
  width: 100%; padding: 11px 12px; border: 1.5px solid #E3E8EF; border-radius: 10px;
  font-size: 14px; color: #111827; background: #fff;
}
.sp-adj .frow input:not([type=file]):not([type=checkbox]):focus { outline: 0; border-color: #002048 }
/* auto-fit：宽度够就两列、不够自动降到一列（不再依赖媒体查询，也就不会被内联样式压掉） */
.sp-adj .frow .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
.sp-adj .frow .pair .frow { margin-bottom: 0 }
.sp-adj .theme-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.sp-adj .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; min-width: 0; white-space: nowrap }
/* 复选框本体：宽度/内边距/边框都要压回去（上面那条 :not 已排除它，这里再兜一层） */
.sp-adj .chk input[type=checkbox] {
  width: 18px; height: 18px; min-width: 18px; flex: none;
  padding: 0; border: 0; background: none; accent-color: var(--navy);
}
/* 只有一项的长标签（如「附产品要点（含投资策略）」）占满整行，避免被 nowrap 截断 */
.sp-adj .chk.full { grid-column: 1 / -1; white-space: normal }
/* 「后台未开放」小标：说明这一列是产品后台标了「不显示」才默认关掉的，不是 bug */
.sp-adj .sp-off { font-style: normal; font-size: 10.5px; color: #B45309; background: #FEF3C7;
  border-radius: 6px; padding: 1px 6px; margin-left: 6px; white-space: nowrap }
.sp-adj .pl-muted { color: #9CA3AF; font-size: 12px; line-height: 1.7 }

/* ===== 表格紧凑化（2026-09-24）：表格数字改裸千分位（无 US$ 前缀）后列宽大幅收紧 =====
   表头可换行（省宽度、居中）、数字不换行（右对齐）；回本行淡红底。
   窄屏（≤560px）进一步收紧内边距与字号，尽量避免横向滚动。 */
.pl-table { width: 100%; border-collapse: collapse; table-layout: auto; }
/* 列宽由**数据**决定：td 用 width:1% 提示（经典技巧，浏览器按内容最小宽取列宽）；
   表头 max-width 限制宽度后改走换行，不再把「累计储备(派發本金)」这类长表头列撑宽。 */
.pl-tablewrap .pl-table th { white-space: normal; text-align: center; padding: 9px 8px; max-width: 92px; }
.pl-tablewrap .pl-table td { width: 1%; white-space: nowrap; text-align: right; padding: 8px 8px; }
.pl-table th:first-child, .pl-table td:first-child { text-align: left; }
.pl-table tr.be td { background: #FDECEC; }
.pl-table tr.hl td { background: #FFF8EF; }
@media (max-width: 560px) {
  .pl-tablewrap .pl-table th { padding: 6px 4px; font-size: 11px; max-width: 72px; }
  .pl-tablewrap .pl-table td { padding: 6px 4px; font-size: 12px; }
}

/* ==========================================================================
   做计划书 · 手机交互定稿（2026-09-24 二版）
   --------------------------------------------------------------------------
   ① 点「做计划书」→ 直接看到计划书页；**自动**从底部拉起配置抽屉（顶留 5vh）。
   ② 计划书页底部**常驻**固定菜单：[修改配置][简易计划书][生成方案书][导出]，页面怎么滚都钉在底部。
   ③ 生成后：标题换成产品名，页面顶部显示配置摘要（缴费 / 提取 / 预缴）。
   ④ 简易计划书＝整屏窗口：卡片区内部滚动，底栏 [关闭][调整][保存图片] 永不动。
   ⑤ 【调整】用的是全局 IFA.sheet，已改成「固定头 + 滚动体 + 固定底栏」（app-shell.css）。
   仅作用于 plan.html（body.planpage），不影响共用 plan.css 的其它页面。
   ========================================================================== */
body.planpage .pl-grip,
body.planpage .pl-fold,
body.planpage .pl-sheet-foot,
body.planpage .pl-cfgsum { display: none }

/* 遮罩：浅灰半透明 —— 顶留的那一条要能「看见又看不太清」下面的计划书 */
body.planpage .pl-cfgmask {
  position: fixed; inset: 0; z-index: 66;
  background: rgba(100, 116, 139, .22);
  opacity: 0; pointer-events: none; touch-action: none;
}
@media (prefers-reduced-motion: no-preference) {
  body.planpage .pl-cfgmask { transition: opacity .26s ease }
  body.planpage .pl-form { transition: transform .3s cubic-bezier(.32, .72, 0, 1) }
}

@media (max-width: 767.98px) {
  body.planpage.cfg-open .pl-cfgmask { opacity: 1; pointer-events: auto }

  /* ---------- 配置抽屉：高度 95vh（顶留 5vh＝原 20vh 的 1/4） ---------- */
  body.planpage .pl-form {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 68;
    height: 95vh; height: 95dvh; max-height: none;
    border: 0; border-radius: 18px 18px 0 0; padding: 0; overflow: hidden;
    display: flex; flex-direction: column; background: #fff;
    box-shadow: 0 -18px 50px rgba(0, 32, 72, .2);
    transform: translateY(101%);
  }
  /* docmode 下 .pl-form 被 display:none !important 关掉，这里要更高优先级放行 */
  body.planpage.cfg-open .pl-form,
  body.planpage.docmode.cfg-open .pl-form { display: flex !important; transform: none }

  body.planpage .pl-sheet-head {
    position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 15px 16px 11px; border-bottom: 1px solid #EEF1F5;
  }
  body.planpage .pl-sheet-head h3 { flex: 1; margin: 0; font-size: 15.5px }
  body.planpage .pl-grip {
    display: block; position: absolute; left: 50%; top: 6px; margin-left: -19px;
    width: 38px; height: 4px; border-radius: 2px; background: #DCE1E9;
  }
  body.planpage .pl-fold {
    display: block; flex: 0 0 auto; border: 0; background: #F1F4F9; color: var(--sub);
    font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 16px; cursor: pointer;
  }
  body.planpage .pl-form-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 16px 6px;
  }
  body.planpage .pl-gen-desktop { display: none !important }
  body.planpage .pl-sheet-foot {
    flex: 0 0 auto; display: flex; gap: 10px; background: #fff;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }
  body.planpage .pl-sheet-foot .btn { flex: 1; min-width: 0 }
  body.planpage .pl-sheet-foot .btn-outline { flex: 0 0 auto; min-width: 88px }

  /* ---------- 计划书页底部常驻固定菜单（4 个按钮） ---------- */
  body.planpage .pl-result .docmode-bar {
    display: flex; left: 0; right: 0; bottom: 0; gap: 6px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }
  /* 4 个按钮要挤进一行（390px 屏）：字号 12px + 收紧内边距，不许换行/裁字 */
  body.planpage .pl-result .docmode-bar .btn {
    font-size: 12px; padding: 9px 2px; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden;
  }
  body.planpage.cfg-open .pl-result .docmode-bar { display: none }

  /* ---------- 配置摘要（生成后显示；原本这里放的是 4 按钮） ---------- */
  body.planpage .pl-cfgsum { display: block; margin: 0 0 10px; background: #fff;
    border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px }
  body.planpage:not(.docmode) .pl-cfgsum { display: none }
  body.planpage .pl-cfgsum .cs-i { display: flex; align-items: baseline; gap: 8px; padding: 3px 0 }
  body.planpage .pl-cfgsum .cs-i i { flex: 0 0 auto; width: 34px; font-style: normal;
    font-size: 11px; color: var(--sub) }
  body.planpage .pl-cfgsum .cs-i b { flex: 1; min-width: 0; font-size: 13px; color: var(--navy);
    font-weight: 600; font-variant-numeric: tabular-nums }

  body.planpage .tabbar { display: none }
  body.planpage .app-main { padding-bottom: 96px }
}

/* ---------- 简易计划书：整屏窗口（可滚体 + 固定底栏） ---------- */
.sp-mask {
  position: fixed; inset: 0; z-index: 240; background: rgba(0, 10, 24, .55);
  display: flex; align-items: stretch; justify-content: center;
  padding: 0; overflow: hidden;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sp-box { width: 400px; max-width: 100vw; margin: 0 auto; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column }
/* 唯一可滚区：卡片在里面滚（导出仍是整卡，不受滚动裁切影响） */
.sp-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 0 10px; display: flex; flex-direction: column; align-items: center }
.sp-card { flex: 0 0 auto }
/* 底栏：横向一条，不透明 + 分隔线，永随内容移动 */
.sp-acts {
  flex: 0 0 auto; display: flex; gap: 8px; margin: 0; justify-content: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
}
/* 按文字宽度自适应（等分会在 390px 上把「保存图片」挤成两行） */
.sp-acts .btn { flex: 0 1 auto; min-width: 84px; padding: 10px 12px; white-space: nowrap }
.sp-tip { text-align: center; font-size: 11.5px; color: #C7D2E2; margin: 10px 12px 0 }