* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f2329;
  background: #fff;
}

.page {
  width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid rgba(187, 191, 196, 0.5);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 100;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
}

.back-arrow {
  font-size: 20px;
  color: #2b2f36;
}

.topbar-divider {
  width: 2px;
  height: 14px;
  background: #8f959e;
}

.content {
  width: 1000px;
  margin-left: 220px;
  margin-top: 89px; /* 56px topbar + 33px 原有间距 */
  margin-bottom: 84px; /* 64px bottom-bar + 20px 原有间距 */
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title h1 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.title-accent {
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: #3370ff;
}

.meta-grid {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.label {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

.value {
  margin-top: 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #1f2329;
}

.required {
  color: #f54a45;
}

.radio-row {
  margin-top: 8px;
  display: flex;
  gap: 24px;
  font-size: 14px;
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #bbbfc4;
  background: #fff;
  display: inline-block;
}

.radio.checked {
  border: 5px solid #3370ff;
}

.block {
  margin-top: 28px;
}

.block h2 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

/* ===== 薪资项表头 ===== */
.salary-head {
  display: flex;
  align-items: stretch;
  height: 47px;
  background: #f8f9fa;
  border: 1px solid #dee0e3;
  border-radius: 6px;
  overflow: hidden;
  color: #646a73;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.sh-cell {
  display: flex;
  align-items: center;
  padding: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 4px;
}

.sh-first {
  width: 200px;
}

.sh-vdivider {
  width: 1px;
  background: #dee0e3;
  flex-shrink: 0;
}

.sh-br {
  border-right: 1px solid #dee0e3;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ===== 薪资项分组卡片 ===== */
.salary-group {
  margin-top: 12px;
  border: 1px solid #dee0e3;
  border-radius: 6px;
  overflow: hidden;
}

.salary-group-inner {
  border-radius: 6px;
  overflow: hidden;
}

/* 分组标题行 */
.sg-title {
  height: 47px;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
}

.expand-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.sg-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #646a73;
}

/* 数据行 */
.sg-row {
  display: flex;
  align-items: stretch;
}

/* 通用单元格 */
.sg-cell {
  height: 47px;
  display: flex;
  align-items: center;
  padding: 12px;
  font-size: 14px;
  line-height: 22px;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
  flex-shrink: 0;
  overflow: hidden;
}

/* 右边框 */
.sg-br {
  border-right: 1px solid rgba(31, 35, 41, 0.15);
}

/* 薪资项名称列：200px，左缩进 32px */
.sg-cell-name {
  width: 200px;
  padding-left: 32px;
  padding-right: 12px;
}

/* 调前列：200px */
.sg-cell-before {
  width: 200px;
  color: #1f2329;
}

/* 箭头列：16px，仅右 padding */
.sg-cell-arrow {
  width: 16px;
  padding: 12px 12px 12px 0;
  color: #1f2329;
  justify-content: center;
}

/* 调后输入列：240px */
.sg-cell-input {
  width: 240px;
  padding: 7px 12px;
}

/* 调整比例输入列：160px */
.sg-cell-ratio {
  width: 160px;
  padding: 7px 12px;
}

/* 薪资标准列：剩余空间 */
.sg-cell-std {
  flex: 1 0 0;
  min-width: 0;
  padding: 8px 12px;
  border-right: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== 输入框组合（input + addon） ===== */
.input-comp {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
}

.input-comp input {
  flex: 1 0 0;
  min-width: 0;
  height: 32px;
  border: 1px solid #d0d3d6;
  border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 22px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f2329;
  outline: none;
  background: #fff;
  transition: border-color 0.15s;
}

.input-comp input:focus {
  border-color: #3370ff;
}

.input-comp:focus-within .input-addon {
  border-color: #3370ff;
  transition: border-color 0.15s;
}

/* 只读调整比例输入框：灰底，禁用指针 */
.input-comp input[readonly] {
  background: #f5f6f7;
  color: #646a73;
  cursor: default;
}

.input-comp input[readonly]:focus {
  border-color: #d0d3d6;
}

.input-comp:has(input[readonly]):focus-within .input-addon {
  border-color: #d0d3d6;
}

.input-addon {
  height: 32px;
  background: #eff0f1;
  border: 1px solid #d0d3d6;
  border-radius: 0 6px 6px 0;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 22px;
  color: #1f2329;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ===== 薪资标准 range bar ===== */
.std-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.std-bar-track {
  position: relative;
  width: 120px;
  height: 14px;
}

.std-bar-fill {
  position: absolute;
  top: 8px;
  left: 0;
  width: 120px;
  height: 6px;
  background: #bacefd;
  border-radius: 4.5px;
}

.std-bar-marker {
  position: absolute;
  top: 8px;
  left: 75px;
  width: 1px;
  height: 6px;
  background: #3370ff;
}

.std-bar-pointer {
  position: absolute;
  top: 0;
  left: 70px;
  font-size: 9px;
  color: #3370ff;
  line-height: 1;
}

.std-bar-labels {
  display: flex;
  justify-content: space-between;
  width: 120px;
  margin-top: 2px;
}

.std-bar-labels span {
  font-size: 12px;
  line-height: 20px;
  color: #646a73;
}

/* ===== 长期激励 / 统计指标 通用表格 ===== */
.table-head,
.table-row {
  display: grid;
  border: 1px solid rgba(31, 35, 41, 0.15);
  border-bottom: none;
}

.table-head {
  background: #f8f9fa;
  color: #646a73;
  border-radius: 6px 6px 0 0;
  font-weight: 500;
}

.table-row:last-child {
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
  border-radius: 0 0 6px 6px;
}

.table-head > div,
.table-row > div {
  min-height: 47px;
  padding: 12px;
  border-right: 1px solid rgba(31, 35, 41, 0.15);
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
}

.table-head > div:last-child,
.table-row > div:last-child {
  border-right: none;
}

.five-cols {
  grid-template-columns: 200px 222px 240px 160px 144px;
}

.six-cols {
  grid-template-columns: 110px 240px 280px 260px 160px 130px;
}

.with-arrow {
  gap: 8px;
}

/* ===== 长期激励详情 ===== */

/* 提示框 */
.ltjl-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #f0f4ff;
  border-radius: 6px;
  padding: 9px 16px;
  margin: 8px 0 12px;
}

.ltjl-notice-icon {
  width: 16px;
  height: 19px;
  padding-top: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.ltjl-notice-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 0 0;
}

.ltjl-notice-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 22px;
  color: #1f2329;
}

.ltjl-bullet {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1f2329;
  flex-shrink: 0;
}

/* 列式表格容器：四边 1px 边框 + 圆角，横向可滚动显示全部列 */
.ltjl-table {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(31, 35, 41, 0.15);
  border-radius: 6px;
  overflow-x: auto;
  overflow-y: hidden;
}

/* 列基础样式 */
.ltjl-col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

/* 列右边框 */
.ltjl-col-br {
  border-right: 1px solid rgba(31, 35, 41, 0.15);
}

/* 箭头列：内容居中 */
.ltjl-col-center {
  justify-content: flex-start;
}

/* 表头单元格：46px，灰底，仅下边框（上边框由容器 border-top 提供） */
.ltjl-head {
  height: 46px;
  min-height: 46px;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #646a73;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 2px;
}

.ltjl-head-empty {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
}

/* 数据单元格：46px，白底，下边框 */
.ltjl-cell {
  height: 46px;
  min-height: 46px;
  background: #fff;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
  padding: 12px;
  font-size: 14px;
  line-height: 22px;
  color: #1f2329;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
}

/* 最后一行：去掉底边框，由容器 border-bottom 提供封闭线 */
.ltjl-last {
  border-bottom: none;
}

/* 豆包股行：高度扩展至 68px */
.ltjl-tall {
  min-height: 68px;
  height: 68px;
  align-items: flex-start;
  padding-top: 12px;
}

/* 期权行有调整额时：高度扩展至 66px */
.ltjl-tall-66 {
  min-height: 66px;
  height: 66px;
  align-items: flex-start;
  padding-top: 12px;
}

/* 箭头列 豆包股行：箭头顶对齐，pt 15px */
.ltjl-cell-arr-top {
  padding: 15px 12px 13px 0;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 调整比例 豆包股单元格：纵向双行布局 */
.ltjl-cell-ratio-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  padding: 12px;
}

/* 第一行：比例数字 + ⓘ 图标 */
.ltjl-ratio-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 22px;
  color: #1f2329;
}

/* 调整详情 - 查看详情文字按钮 */
.ltjl-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: -4px;
  padding: 2px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  color: #1456f0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}

.ltjl-detail-btn:hover {
  opacity: 0.8;
}

/* 第二行：辅助说明文字 */
.ltjl-ratio-sub {
  font-size: 12px;
  line-height: 20px;
  color: #646a73;
  white-space: nowrap;
  margin: 0;
}

/* 数据单元格最后一行也不需要底边框（同上） */

/* 首列横向滚动时固定 */
.ltjl-col-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}

/* 首列表头继承固定，背景用灰色 */
.ltjl-col-sticky .ltjl-head {
  background: #f8f9fa;
}

/* 箭头列数据单元格：右 padding 12px，无左 padding */
.ltjl-cell-center {
  padding: 12px 12px 12px 0;
  justify-content: center;
}

/* 含 input 的单元格：调整上下 padding */
.ltjl-cell-pad-input {
  padding: 7px 12px;
}

/* 期权调整比例单元格：完整显式覆盖，防止继承冲突 */
#ltjl-option-ratio-cell {
  height: 46px;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  padding: 7px 12px;
  gap: 2px;
}

/* 子元素禁止缩放，保证 input 和文字各自占满高度 */
#ltjl-option-ratio-cell .ltjl-input-with-icon,
#ltjl-option-ratio-cell .ltjl-ratio-sub {
  flex-shrink: 0;
}

/* 输入框 + info 图标同行 */
.ltjl-input-with-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ltjl-input-with-icon .input-comp {
  flex: 1;
  min-width: 0;
}

/* info 图标样式 */
.ltjl-info-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #646a73;
  line-height: 0;
}

/* 展示调整额时扩展高度（66px）*/
#ltjl-option-ratio-cell.has-diff {
  height: 66px;
  min-height: 66px;
  justify-content: flex-start;
  padding-top: 9px;
  padding-bottom: 9px;
}

.notice {
  background: #f0f4ff;
  border-radius: 6px;
  padding: 9px 16px;
  margin: 8px 0 12px;
}

.notice p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
}

.disabled {
  color: #bbbfc4;
}

.stats .table-head {
  border-radius: 6px 6px 0 0;
}

.stats .table-row:not(:last-child) {
  border-bottom: none;
}

.bar {
  width: 120px;
  height: 6px;
  border-radius: 4.5px;
  background: linear-gradient(to right, #bacefd 0 100%);
  position: relative;
  margin-bottom: 4px;
}

.bar::before {
  content: "";
  position: absolute;
  left: 75px;
  top: 0;
  width: 1px;
  height: 6px;
  background: #3370ff;
}

small {
  font-size: 12px;
  line-height: 20px;
  color: #646a73;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 220px; /* 与内容区左对齐 */
  right: 0;
  height: 64px;
  background: #fff;
  border-top: 1px solid rgba(31, 35, 41, 0.15);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
}

.btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

.btn-primary {
  border: 1px solid #1456f0;
  background: #1456f0;
  color: #fff;
}

.btn-default {
  border: 1px solid #d0d3d6;
  background: #fff;
  color: #1f2329;
}

/* ===== 薪资统计指标 - 列式表格 ===== */
.stats-table {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(31, 35, 41, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.st-col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.st-col-flex {
  flex: 1 0 0;
  min-width: 0;
}

.st-col-br {
  border-right: 1px solid rgba(31, 35, 41, 0.15);
}

.st-col-arrow {
  width: 16px;
  flex-shrink: 0;
}

/* 表头单元格 */
.st-head {
  height: 46px;
  min-height: 46px;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #646a73;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 数据单元格 */
.st-cell {
  height: 47px;
  min-height: 47px;
  background: #fff;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
  padding: 12px 12px 13px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #1f2329;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}

/* 最后一行无底边框 */
.st-last {
  border-bottom: none;
}

/* 箭头列居中，无左侧 padding */
.st-cell-arr {
  padding: 0;
  justify-content: flex-start;
  color: #646a73;
  font-size: 14px;
}

/* ===== 薪资标准列 bar 图 ===== */
.st-bar-cell {
  height: 47px;
  min-height: 47px;
  border-bottom: 1px solid #dee0e3;
  padding-left: 12px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  flex-shrink: 0;
}

.st-bar-grid {
  position: relative;
  width: 120px;
  height: 34px;
}

/* 蓝色底色轨道 */
.st-bar-track {
  position: absolute;
  top: 8px;
  left: 0;
  width: 120px;
  height: 6px;
  background: #bacefd;
  border-radius: 4.5px;
}

/* 竖向标记线 */
.st-bar-marker-line {
  position: absolute;
  top: 8px;
  left: 75px;
  width: 1px;
  height: 6px;
  background: #3370ff;
}

/* 下三角 */
.st-bar-triangle {
  position: absolute;
  top: 0;
  left: 71px;
  width: 9px;
  height: 7px;
}

/* 左标签 300k */
.st-bar-label-l {
  position: absolute;
  top: 14px;
  left: 0;
  font-size: 12px;
  line-height: 20px;
  color: #646a73;
  white-space: nowrap;
}

/* 右标签 550k */
.st-bar-label-r {
  position: absolute;
  top: 14px;
  left: 92px;
  font-size: 12px;
  line-height: 20px;
  color: #646a73;
  white-space: nowrap;
}

/* 现金占比调后单元格：支持双行 */
.st-cell-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}

/* 现金占比有偏差时：行高扩展至 67px */
.st-cell-col.has-hint {
  height: 67px;
  min-height: 67px;
  justify-content: flex-start;
  padding-top: 12px;
  padding-bottom: 13px;
}

/* 高于/低于薪资标准提示行 */
.st-cash-pct-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.st-cash-pct-hint span {
  font-size: 12px;
  line-height: 20px;
  color: #ed6d0c;
  white-space: nowrap;
}

/* 薪资标准橙色（偏离时） */
.st-cell-orange {
  color: #ed6d0c !important;
}

/* 现金占比行其他列高度联动 67px */
.st-cell-tall-67 {
  height: 67px !important;
  min-height: 67px !important;
}

/* 豆包股增发说明灰色块 */
.douba-notice {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

.douba-notice-text {
  font-size: 14px;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  line-height: 22px;
  color: #646a73;
  margin: 0;
}