/* ============================================================
 * 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 .row1 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px }
.pl-hero .logo-box { background: #fff; border-radius: 10px; padding: 6px 8px; display: flex; align-items: center }
.pl-hero .logo-box img { height: 26px; width: auto }
.pl-hero h2 { font-size: 20px; line-height: 1.35 }
.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);
}
.sp-box { width: 100%; max-width: 430px; margin: auto }
.sp-card {
  background: #fff; border-radius: 16px; padding: 20px 18px 16px;
  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: #002048; line-height: 1.35 }
.sp-title span { font-size: 11.5px; color: #6B7280 }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 14px }
.sp-kv label { display: block; font-size: 11.5px; color: #6B7280; margin-bottom: 3px }
.sp-kv b { font-size: 14.5px; color: #002048; font-weight: 700 }
.sp-kv b.hl { color: #E80038 }
.sp-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px }
.sp-table th {
  background: #002048; color: #fff; font-weight: 600; font-size: 12px;
  padding: 8px 6px; text-align: right;
}
.sp-table th:first-child { text-align: left; border-radius: 8px 0 0 8px }
.sp-table th:last-child { border-radius: 0 8px 8px 0 }
.sp-table td { padding: 9px 6px; border-bottom: 1px solid #F1F3F6; text-align: right; color: #111827 }
.sp-table td:first-child { text-align: left; color: #6B7280 }
.sp-table td.pos { color: #0B8F5B; font-weight: 600 }
.sp-table td.neg { color: #E80038; font-weight: 600 }
.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 }
@media (max-width: 420px) {
  .sp-grid { gap: 8px 10px }
  .sp-card { padding: 16px 14px 14px; border-radius: 14px }
  .sp-title b { font-size: 15px }
}