/*
 * pages.css —— input / questionnaire / report / salary-detail / insurance-detail 页面样式（T8 收口）。
 *
 * rpx×0.5 换算为 px；配色引用 tokens.css 变量。移动端优先，布局在 480 宽内良好。
 * 通用 class（.page / .card / .btn-* / .empty / .actionbar）集中定义，页面段仅写差异。
 */

/* ============ 通用页面容器 ============ */
.page {
  padding-top: env(safe-area-inset-top, 0px);  /* iOS 顶部安全区（小红书 WebView 壳强制 viewport-fit=cover 时把页面延伸到刘海底下，需要此内边距把内容推到安全区下方；非刘海设备 env 返回 0，无副作用） */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* 给固定底部 actionbar 让位（160rpx→80px）；iOS 底部安全区同步 */
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--bg);
}

/* 通用卡片：除 salary/insurance 的 head-card / table-card（自带内边距）外，其余卡片给内边距 */
.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(30, 40, 80, 0.06);
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid #F4F5F8;
}
.card:not(.head-card):not(.table-card) { padding: 12px 14px 14px; }

/* 通用主按钮 / 幽灵按钮 */
.btn-primary {
  display: block;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2F80ED 0%, #1F5FD0 100%);
  box-shadow: 0 8px 20px rgba(47, 128, 237, .30);
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:active { opacity: .92; }

.btn-back {
  display: block;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1E;
  background: #fff;
  box-shadow: 0 2px 8px rgba(30, 40, 80, .08);
  border: 1px solid #ECEEF2;
  cursor: pointer;
  font-family: inherit;
}
.btn-back:active { opacity: .92; }

/* 通用底部操作栏：在 >480 时收束到 480 居中列，与 #app 对齐 */
.actionbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 50;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #F2F4F7 72%, rgba(242, 244, 247, 0));
  box-sizing: border-box;
}

/* 通用空态 */
.empty { padding: 100px 30px; text-align: center; }
.empty-t { font-size: 17px; font-weight: 700; }
.empty-s { font-size: 13px; color: #6B7080; margin-top: 6px; }
.empty-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 26px;
  background: var(--c-a);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.empty-btn:active { opacity: .92; }

.foot-note { text-align: center; font-size: 11px; color: #A6ABBA; padding: 4px 0 12px; line-height: 1.6; }

/* 通用小圆点（tab / ring 图例等） */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* ============ input 录入页 ============ */
.hero { padding: 12px 18px; }
.hero .h1 { font-size: 23px; font-weight: 800; letter-spacing: -0.5px; }
.hero .h1::after {
  content: ''; display: block; width: 42px; height: 4px; border-radius: 4px;
  margin-top: 9px; background: linear-gradient(90deg, #2F80ED, #F2994A);
}
.hero .p { font-size: 13px; color: #6B7080; margin-top: 8px; line-height: 1.6; }
.hero .pill {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  background: #E7F1FF; color: #1F5FD0; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
}

.add-offer {
  margin: 2px 14px 8px; padding: 14px; border-radius: 10px;
  border: 1px dashed #C9CED6; background: rgba(255, 255, 255, .5);
  color: #1F5FD0; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer;
}
.add-offer.disabled { color: #A6ABBA; border-color: #ECEEF2; cursor: not-allowed; }

.ghost-fill {
  margin: 0 14px 10px; padding: 9px; border-radius: 10px;
  color: #6B7080; font-size: 13px; text-align: center;
  background: #F6F7F9; border: 1px solid #ECEEF2; cursor: pointer;
}

.weight-entry {
  margin: 0 14px 9px; padding: 11px 14px; border-radius: 11px;
  background: #fff; border: 1px solid #ECEEF2;
  box-shadow: 0 2px 8px rgba(30, 40, 80, .06);
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.weight-entry:active { opacity: .92; }
.weight-entry .we-main { flex: 1; min-width: 0; }
.weight-entry .we-t { font-size: 14px; font-weight: 700; }
.weight-entry .we-s { font-size: 12px; color: #6B7080; margin-top: 3px; font-variant-numeric: tabular-nums; }
.weight-entry .we-go { font-size: 20px; color: #C9CED6; font-weight: 300; flex: none; }

/* ============ questionnaire 问卷页 ============ */
.questionnaire-page { padding-bottom: 110px; }   /* 220rpx→110px */
.progress { display: flex; gap: 5px; padding: 4px 18px 8px; }
.pseg { flex: 1; height: 5px; border-radius: 3px; background: #E3E6EE; }
.pseg.cur { background: var(--c-a); }
.pseg.done { background: var(--c-c); }

.chips { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 9px 0 4px; }
.chips .chip { padding: 5px 15px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.chip-vs { font-size: 12px; color: #B7BCC8; font-weight: 700; }

.scenes { display: flex; gap: 9px; margin-top: 6px; }
.scene { flex: 1; border: 2px solid #E3E6EE; border-radius: 10px; padding: 9px; background: #FBFCFE; }
.scene-tag { font-size: 12px; font-weight: 800; margin-bottom: 5px; }
.scene-t { font-size: 13px; line-height: 1.55; color: #3A3F4B; }

/* 5 档分段选择器（单步药丸；与 offer-card 的 .seg 容器通过 .scale 作用域区分） */
.scale { display: flex; gap: 6px; margin-top: 11px; }
.scale .seg {
  flex: 1; min-height: 66px; border: 2px solid #E3E6EE; border-radius: 9px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 3px; cursor: pointer; box-sizing: border-box;
}
.scale .seg.on { border-width: 3px; background: #EAF1FE; }
.scale .seg-n { font-size: 15px; font-weight: 800; color: #1A1A1E; }
.scale .seg-t { font-size: 10px; line-height: 1.4; color: #4A4F5C; margin-top: 4px; text-align: center; }

.scale-hint { display: flex; justify-content: space-between; font-size: 11px; margin-top: 7px; }

.nav { display: flex; gap: 10px; margin-top: 12px; }
.nav .btn-primary, .nav .btn-ghost { flex: 1; width: auto; }
.btn-ghost {
  flex: 1; height: 46px; border-radius: 14px; border: 1px solid #D7DCE6;
  font-size: 15px; font-weight: 600; color: #4A4F5C; background: #fff; cursor: pointer; font-family: inherit;
}
.btn-ghost:active { opacity: .92; }
.btn-placeholder { flex: 1; }

/* 预览态 */
.result { padding-bottom: 14px; }
.r-title { font-size: 13px; color: #6B7080; }
.r-label { font-size: 17px; font-weight: 800; color: #1A1A1E; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.charts { display: flex; flex-direction: column; gap: 10px; }
.chart-box {
  width: 100%; background: #F7F8FB; border-radius: 10px;
  padding: 10px 8px; box-sizing: border-box;
}
.chart-cap { font-size: 11px; color: #9AA0AE; text-align: center; margin-bottom: 7px; }

/* ring 环形图（内联 conic-gradient 圆环） */
.ring { width: 170px; height: 170px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.ring-hole { width: 100px; height: 100px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.ring-center { font-size: 12px; color: #9AA0AE; font-weight: 700; }
.ring-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lg { display: flex; align-items: center; font-size: 11px; color: #4A4F5C; margin-top: 4px; }
.lg .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.lg-name { flex: 1; }
.lg-val { font-weight: 700; font-variant-numeric: tabular-nums; }

.neg-tip {
  font-size: 11px; color: #FF5470; line-height: 1.6; margin-top: 10px;
  background: rgba(255, 84, 112, .08); border-radius: 8px; padding: 8px 9px;
}

/* ============ report 报告页 ============ */
.rp-hero { padding: 12px 18px 8px; }
.rp-hero .h1 { font-size: 22px; font-weight: 800; }
.rp-hero .p { font-size: 13px; color: #6B7080; margin-top: 4px; }

/* 总览推荐排序 */
.overview {
  margin: 0 14px 14px; background: #fff; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(30, 40, 80, .10); overflow: hidden;
  border: 1px solid #F4F5F8; position: relative;
}
.overview::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #2F80ED, #F2994A, #27AE60);
}
.ov-head { padding: 13px 14px 6px; display: flex; align-items: center; gap: 6px; }
.ov-head .t { font-size: 15px; font-weight: 700; }
.ov-head .s { font-size: 11px; color: #A6ABBA; margin-left: auto; }
.ov-row { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-top: 1px solid #F4F5F8; }
.ov-rank { width: 22px; height: 22px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
.ov-name { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; }
.ov-name .ov-sub { display: block; font-size: 11px; color: #A6ABBA; font-weight: 400; margin-top: 1px; }
.ov-amt { text-align: right; }
.ov-mn { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-unit { display: block; font-size: 10px; color: #A6ABBA; }
.ov-score { font-size: 11px; font-weight: 700; margin-left: 3px; }

/* 当前生效权重条 */
.weight-bar {
  margin: -5px 14px 4px; padding: 8px 12px; border-radius: 9px;
  background: #F6F7F9; border: 1px solid #ECEEF2;
  font-size: 12px; color: #1A1A1E; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 复制结果摘要按钮栏 */
.copybar { margin: 0 14px 14px; }
.btn-copy {
  width: 100%; height: 42px; border-radius: 10px;
  border: 1px solid var(--c-a); color: var(--c-a); background: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-copy:active { opacity: .9; background: #EAF1FF; }

/* 模块卡 */
.mod {
  margin: 0 14px 14px; background: #fff; border-radius: 14px;
  box-shadow: 0 2px 8px rgba(30, 40, 80, .06); overflow: hidden; border: 1px solid #F4F5F8;
}
.mod-head { padding: 13px 14px 5px; display: flex; align-items: baseline; gap: 7px; }
.mod-head .num {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2F80ED 0%, #1F5FD0 100%);
}
.mod-head .mt { font-size: 16px; font-weight: 700; }
.mod-head .ms { font-size: 11px; color: #A6ABBA; margin-left: auto; }
.mod-link {
  font-size: 12px; color: var(--c-a); margin-left: 8px; flex: none;
  padding: 2px 1px; line-height: 1.4; cursor: pointer;
}
.mod-link:active { opacity: .55; }

/* 数字指标并排 */
.metrics { padding: 4px 14px 2px; }
.metric-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #F4F5F8; }
.metric-row:last-child { border-bottom: none; }
.met-label { font-size: 13px; color: #6B7080; flex: none; width: 90px; }
.met-val { flex: 1; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 列标识表头 A/B/C（与下方 met-val 列对齐，染 offer 配色） */
.metric-cols { display: flex; align-items: center; gap: 6px; padding: 2px 0 4px; border-bottom: 1px solid #F4F5F8; }
.metric-cols .met-label { width: 90px; }
.met-col { flex: 1; text-align: right; font-size: 12px; font-weight: 700; }

/* ⓘ 解释入口（点开 → dom.js 的 .oc-info-mask/.oc-info-bubble 气泡） */
.info-icon { font-size: 13px; color: var(--c-a); margin-left: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
/* 兼容小程序命名（参考 report.wxss .info-*），本项目气泡实际由 oc-info-* 承载 */
.info-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .30); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; }
.info-pop {
  position: relative; z-index: 9999; margin: auto; padding: 16px 20px;
  background: #1F2430; color: #fff; font-size: 13px; line-height: 1.6;
  border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); max-width: 320px;
}

/* 评分条区 */
.scores { padding: 2px 14px 4px; }

/* 文字结论 */
.verdict { margin: 4px 14px 10px; padding: 10px 12px; background: #F6F7F9; border-radius: 10px; border-left: 3px solid var(--c-a); }
.vrow { font-size: 13px; line-height: 1.7; color: #1A1A1E; }
.vrow + .vrow { margin-top: 4px; }
.vtag { font-weight: 700; }

/* ============ salary-detail / insurance-detail 明细页 ============ */
.tabs { display: flex; gap: 8px; padding-top: 12px; margin-bottom: 12px; } /* 顶部 12px 让 A/B/C 切换按钮在 iOS 刘海下方有呼吸间距 */
.tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 0; background: #fff; border-radius: 10px;
  font-size: 13px; color: #6B7080; border: 1px solid #ECEEF2; cursor: pointer;
}
.tab .dot { width: 9px; height: 9px; }
.tab-on { background: var(--c-a); color: #fff; border-color: var(--c-a); font-weight: 700; }

.head-card { padding: 14px; margin-bottom: 12px; }
.hc-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hc-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.hc-sub { font-size: 12px; color: #A6ABBA; margin-top: 5px; }
.hc-sum { font-size: 12px; color: #6B7080; margin-top: 6px; }

.table-card { padding: 4px 0; }
.thead, .trow { display: flex; align-items: center; padding: 0 14px; }
.thead { height: 36px; background: #F6F7F9; font-size: 12px; color: #6B7080; font-weight: 600; }
.trow { height: 38px; border-top: 1px solid #F4F5F8; font-size: 13px; color: #1A1A1E; }
.th-m, .td-m { flex: 1.2; text-align: left; }
.th-name, .td-name { flex: 1.2; text-align: left; }
.th-num, .td-num { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.td-taking { color: var(--c-a); font-weight: 600; }
.trow-sum { border-top: 2px solid #E4E7EC; font-weight: 700; background: #FAFBFC; }

.note { font-size: 11px; color: #A6ABBA; text-align: center; margin: 10px 14px 4px; line-height: 1.6; }