/* =========================================================================
   山东省公职考试数据分析平台 - 样式表
   风格：政务数据看板风（参考国家统计局 / 省公共数据开放网）
   配色：宣纸米白底 + 深政务蓝 + 赭石/暗红强调，严禁渐变/毛玻璃/大圆角/大阴影
   ========================================================================= */

/* ----------------------------- 基础重置 ----------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-main: #f5f5f0;          /* 主背景：宣纸米白 */
  --bg-panel: #ffffff;         /* 面板背景 */
  --header-blue: #1a3a5c;      /* 深政务蓝 */
  --header-blue-dark: #14304d; /* 更深政务蓝（hover） */
  --border-main: #d4d4d4;      /* 主边框 */
  --border-light: #e8e8e8;     /* 次边框 */
  --text-main: #1a1a1a;        /* 主文字 */
  --text-sub: #666666;         /* 次文字 */
  --text-aux: #999999;         /* 辅助文字 */
  --ochre: #c8a45c;            /* 强调色1：赭石/印章色 */
  --dark-red: #8b1a1a;         /* 强调色2：公考红 */
  --stripe: #faf9f5;           /* 表格斑马纹偶数行 */
  --hover: #f5f5f0;            /* hover 浅底 */
  --font-sans: "Microsoft YaHei", "微软雅黑", "Source Han Sans SC", "思源黑体", -apple-system, sans-serif;
  --font-num: "Microsoft YaHei", "微软雅黑", "Source Han Sans SC", "思源黑体", -apple-system, sans-serif;
  --num-font: "Microsoft YaHei", "微软雅黑", "Source Han Sans SC", "思源黑体", -apple-system, sans-serif;
  --font-mono: "Consolas", "Courier New", monospace;
}

html, body {
  font-family: var(--font-sans);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------- 顶部导航栏 ----------------------------- */
.header {
  height: 56px;
  background: var(--header-blue);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 2px solid var(--ochre);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo 图片：限制高度与标题文字对齐，保持比例 */
.header__logo {
  width: 150px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

.header__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
}

.header__subtitle {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.5px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  padding-left: 12px;
  margin-left: 4px;
}

.header__tools {
  display: flex;
  align-items: center;
}

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

.header__field-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.header__select {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-main);
  background: #ffffff;
  border: 1px solid #b8c4d0;
  border-radius: 2px;
  padding: 5px 28px 5px 10px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #666 50%),
                    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* 年份下拉禁用状态：无数据时降低视觉优先级 */
.header__select:disabled {
  color: var(--text-aux);
  background-color: #f0f0ed;
  cursor: not-allowed;
  border-color: var(--border-light);
  background-image: linear-gradient(45deg, transparent 50%, #ccc 50%),
                    linear-gradient(135deg, #ccc 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* ----------------------------- Tab 栏 ----------------------------- */
.tabs {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--border-main);
  padding: 0 24px;
}

.tab {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-sub);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 13px 26px 11px;
  cursor: pointer;
  transition: color 0.15s;
  position: relative;
  top: 1px;
}

.tab:hover {
  color: var(--header-blue);
}

.tab.is-active {
  color: var(--header-blue);
  font-weight: 700;
  border-bottom-color: var(--ochre);
}

/* ----------------------------- 通用面板 ----------------------------- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-main);
  border-radius: 4px;
}

.panel__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  border-left: 3px solid var(--ochre);
  padding: 4px 0 4px 10px;
  margin: 14px 16px 4px;
}

.panel__desc {
  font-size: 12px;
  color: var(--text-aux);
  padding: 0 16px;
  margin-bottom: 6px;
}

/* 面板标题行（flex 布局：标题+描述在左，操作按钮在右） */
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px 6px;
  gap: 12px;
}

.panel__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* 标题/描述在 panel__head 内时清除默认 margin/padding（由 panel__head 统一控制） */
.panel__head .panel__title {
  margin: 0;
}

.panel__head .panel__desc {
  margin: 0;
  padding: 0;
}

/* ----------------------------- KPI 指标行 ----------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px 24px 0;
}

/* 5卡布局：倒计时 + 4张数据卡片（国考用） */
.kpi-row--5 {
  grid-template-columns: repeat(5, 1fr);
}

/* 5卡：去掉默认padding，由内部各区域自行控制（与6卡一致，让顶条贴边） */
.kpi-row--5 .kpi-card {
  padding: 0 0 12px;
}

.kpi-row--5 .kpi-card__value {
  font-size: 28px;
}

/* 5卡下note贴底，padding由内部控制 */
.kpi-row--5 .kpi-card__note {
  font-size: 11px;
  margin-top: auto;
  padding: 8px 16px 0;
}

/* 5卡下倒计时卡片保持自身padding */
.kpi-row--5 .kpi-card--countdown {
  padding: 0 0 12px;
}

/* 省考6卡布局：前3卡与地图列(1.05fr)对齐，后3卡与图表列(1fr)对齐 */
.kpi-row--6 {
  grid-template-columns: 1.05fr 1.05fr 1.05fr 1fr 1fr 1fr;
}

/* 人才引进占位卡片（数据整理中） */
.rencai-placeholder {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-left: 4px solid var(--ochre);
  border-radius: 4px;
  padding: 44px 24px;
  text-align: center;
}

.rencai-placeholder__badge {
  display: inline-block;
  font-size: 12px;
  color: var(--header-blue);
  border: 1px solid var(--header-blue);
  border-radius: 2px;
  padding: 2px 10px;
  margin-bottom: 12px;
}

.rencai-placeholder__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.rencai-placeholder__desc {
  font-size: 13px;
  color: var(--text-sub);
}

.kpi-row--6 .kpi-card__value {
  font-size: 28px;
}

/* 倒计时卡片样式 */
.kpi-card--countdown {
  border-color: var(--ochre);
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.10), var(--bg-panel) 60%);
  position: relative;
}

.kpi-card--countdown .kpi-card__value {
  color: var(--ochre);
}

/* 图标圆形背景 */
.kpi-card__iconwrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kpi-card__iconwrap--ochre {
  background: rgba(201, 169, 97, 0.18);
  color: var(--ochre);
}

/* 状态徽章 */
.kpi-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  color: var(--text-sub);
  background: var(--border-light);
  letter-spacing: 0.5px;
}

.kpi-badge--hot {
  color: #fff;
  background: var(--dark-red);
  animation: kpiPulse 1.6s ease-in-out infinite;
}

@keyframes kpiPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* 倒计时主数字区 */
.kpi-countdown__main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 4px 16px 2px;
}

.kpi-countdown__num {
  font-family: var(--font-num);
  font-size: 46px;
  font-weight: 800;
  color: var(--ochre);
  line-height: 1;
  letter-spacing: -1px;
}

.kpi-countdown__unit {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}

/* 日期分段显示 */
.kpi-countdown__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 16px 6px;
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--text-sub);
  letter-spacing: 1px;
}

.kpi-countdown__date i {
  color: var(--ochre);
  font-style: normal;
  font-weight: 700;
}

/* 年度进度条 */
.kpi-countdown__progress {
  padding: 4px 16px 0;
}

.kpi-countdown__track {
  height: 4px;
  background: rgba(201, 169, 97, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.kpi-countdown__fill {
  height: 100%;
  background: linear-gradient(to right, var(--ochre), #d4b06a);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.kpi-countdown__scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-aux);
  margin-top: 3px;
}

.kpi-countdown__scale span:last-child {
  font-family: var(--font-num);
  color: var(--ochre);
  font-weight: 600;
}

.kpi-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-main);
  border-radius: 4px;
  padding: 16px 18px 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 省考增强卡片：去掉默认 padding，由内部各区域自行控制 */
.kpi-row--6 .kpi-card {
  padding: 0 0 12px;
}

/* 彩色顶条 */
.kpi-card__topbar {
  height: 3px;
  width: 100%;
  flex-shrink: 0;
}

.kpi-card__topbar--ochre {
  background: var(--ochre);
}

/* 卡片头部：图标 + 标签 */
.kpi-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 6px;
}

.kpi-card__icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.kpi-card__label {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 省考增强卡片：label 在 head 内不需要 margin-bottom */
.kpi-card__head .kpi-card__label {
  margin-bottom: 0;
}

/* 原始 label::before 仍用于非省考卡片 */
.kpi-card__label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ochre);
  border-radius: 1px;
}

/* 省考增强卡片隐藏 ::before（图标已替代） */
.kpi-card__head .kpi-card__label::before {
  display: none;
}

/* 数值行：仅数值 + 单位 */
.kpi-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 16px;
}

.kpi-card__value {
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  color: var(--header-blue);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

/* 省考6卡：缩小数值字体 */
.kpi-row--6 .kpi-card__value {
  font-size: 28px;
}

.kpi-card__value--red {
  color: var(--dark-red);
}

.kpi-card__unit {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 400;
}

/* 趋势标签行：独立一行靠右对齐，紧贴底部可视化区域 */
.kpi-card__trend-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 16px 0;
}

/* 趋势标签 */
.kpi-trend {
  font-size: 12px;
  font-family: var(--font-num);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}

.kpi-trend--up {
  color: #2d6a4f;
  background: rgba(45, 106, 79, 0.1);
}

.kpi-trend--down {
  color: #8b1a1a;
  background: rgba(139, 26, 26, 0.1);
}

/* 迷你柱状图 */
.kpi-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  padding: 6px 16px 0;
}

.mini-bar {
  flex: 1;
  min-width: 6px;
  background: var(--border-main);
  border-radius: 2px 2px 0 0;
  transition: background 0.2s;
  min-height: 2px;
}

.mini-bar--cur {
  background: var(--header-blue);
}

/* 分数进度条 */
.kpi-score-bar {
  padding: 8px 16px 0;
}

.kpi-score-bar__track {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.kpi-score-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.kpi-score-bar__scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-aux);
  margin-top: 2px;
}

/* 底部分隔行 */
.kpi-card__note {
  font-size: 12px;
  color: var(--text-aux);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

/* 省考6卡：note 贴底，padding 由内部控制 */
.kpi-row--6 .kpi-card__note {
  font-size: 11px;
  margin-top: auto;
  padding: 8px 16px 0;
}

.kpi-card__note em {
  font-style: normal;
  color: var(--dark-red);
  font-family: var(--font-num);
}

.kpi-card__note em.up {
  color: var(--dark-red);
}

.kpi-card__note em.flat {
  color: var(--text-aux);
}

/* 倒计时卡片：note 贴底 */
.kpi-card--countdown .kpi-card__note {
  margin-top: auto;
  padding: 8px 16px 0;
  text-align: center;
}

/* ----------------------------- 主内容区 ----------------------------- */
.main {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
  padding: 16px 24px 0;
  align-items: start;  /* 取消 grid 默认 stretch，左右列按自身内容高度，避免地图下方空白 */
}

.main__map {
  display: flex;
  flex-direction: column;
  min-width: 0;  /* 防止 ECharts canvas 固有宽度撑大列，导致 grid 列宽错乱（浏览器缩放后尤为明显） */
  height: 600px;  /* 固定总高，与右侧严格对齐 */
}

.main__charts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;  /* 同上，允许右侧列正常收缩 */
  height: 600px;  /* 固定总高，与左侧严格对齐 */
}

/* 图表容器 */
.chart-box {
  width: 100%;
  min-width: 0;  /* 防止 canvas 固有宽度撑大容器 */
  overflow: hidden;  /* 兜底：canvas 尺寸异常时不溢出影响布局 */
}

/* 左侧地图 chart-box：固定像素高度（panel 头约72px + border 2px，剩余 526px） */
.chart-box--map {
  height: 526px;
}

/* 右侧两个 panel：按 trend:bar ≈ 213:273 比例分配高度，border 计入总高 */
.main__charts > .panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.main__charts > .panel:first-child {
  flex: 213;  /* 趋势图比例 */
}

.main__charts > .panel:last-child {
  flex: 273;  /* 柱状图比例（略高，避免 Y 轴标题被遮挡） */
}

/* 右侧 chart-box 自适应填充 panel 头以下空间 */
.main__charts .chart-box {
  flex: 1;
  min-height: 0;
}

/* 地图图例（绝对定位在 map-stage 左下角，与右下角面板底部对齐） */
.map-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-sub);
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-main);
  border-radius: 3px;
}

.map-legend__label {
  font-weight: 700;
  color: var(--text-main);
}

.map-legend__min,
.map-legend__max {
  font-family: var(--font-mono);
  color: var(--text-aux);
}

.map-legend__gradient {
  display: inline-block;
  width: 160px;
  height: 10px;
  border: 1px solid var(--border-main);
  border-radius: 2px;
  background: linear-gradient(to right, #fff7e6, #fed8a6, #f9b87a, #e85d2c, #8b1a1a);
}

/* ----------------------------- 地图舞台 + 省属面板 + 返回按钮 ----------------------------- */
/* 包裹地图容器，作为省属面板与返回按钮的定位基准 */
.map-stage {
  position: relative;
}

/* 省属数据面板：地图右下角，政务风白底细边框 */
.map-province-panel {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 192px;
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-radius: 3px;
  padding: 8px 10px 9px;
  font-size: 12px;
  color: var(--text-main);
  z-index: 5;
}

.map-province-panel__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--header-blue);
  border-left: 3px solid var(--ochre);
  padding-left: 6px;
  margin-bottom: 6px;
  line-height: 1.2;
}

.map-province-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  line-height: 1.7;
}

.map-province-panel__row > span:first-child {
  color: var(--text-sub);
}

.map-province-panel__row em {
  font-style: normal;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--header-blue);
}

.map-province-panel__row em.red {
  color: var(--dark-red);
}

.map-province-panel__divider {
  height: 1px;
  background: var(--border-light);
  margin: 5px 0;
}

/* 返回全省按钮：下钻区县时显示在面板标题栏右侧 */
.map-back-btn {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--header-blue);
  background: #ffffff;
  border: 1px solid var(--header-blue);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.map-back-btn:hover {
  background: var(--header-blue);
  color: #ffffff;
}

/* 放大/缩小按钮：与返回全省按钮同款样式，使用 Unicode 全屏图标 */
.map-zoom-btn {
  flex-shrink: 0;
  align-self: center;
  font-family: 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;  /* 确保 Unicode 图标正常渲染 */
  font-size: 16px;  /* 图标略大于文字，提升辨识度 */
  color: var(--header-blue);
  background: #ffffff;
  border: 1px solid var(--header-blue);
  border-radius: 3px;
  padding: 2px 8px;  /* 图标按钮内边距略小 */
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  margin-left: 8px;  /* 与返回全省按钮间隔 */
}

.map-zoom-btn:hover {
  background: var(--header-blue);
  color: #ffffff;
}

/* 地图放大态：隐藏 KPI 行 + 右侧图表区，左侧地图列占满整行 */
/* KPI 行是 .main 的兄弟节点，统一用 body.is-map-zoomed 控制 */
body.is-map-zoomed .kpi-row {
  display: none;
}

.main.is-map-zoomed .main__charts {
  display: none;
}

.main.is-map-zoomed {
  grid-template-columns: 1fr;  /* 单列布局，地图占满整行 */
}

.main.is-map-zoomed .main__map {
  height: auto;  /* 放大态解除 600px 固定高，由 map-stage 高度撑开 */
}

.main.is-map-zoomed .chart-box--map {
  height: 560px;  /* 放大后地图高度增加，填满更大空间 */
}

/* ----------------------------- 地图全屏态（浏览器 Fullscreen API） ----------------------------- */
/* :fullscreen 伪类匹配当前处于全屏的元素；:-webkit-full-screen 兼容 Safari */
.main__map:fullscreen,
.main__map:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  padding: 12px 16px;
  border: none;
  border-radius: 0;
}

/* 全屏态下地图容器高度填满屏幕剩余空间（面板头之外的全部空间） */
.main__map:fullscreen .chart-box--map,
.main__map:-webkit-full-screen .chart-box--map {
  height: calc(100vh - 80px);  /* 减去面板头高度 + 内边距 */
}

/* 全屏态仅隐藏"放大"按钮（#mapZoomBtn），保留"返回全省"和"退出全屏"按钮 */
/* 注意：全屏按钮也用了 .map-zoom-btn 类，必须用 ID 精确匹配，避免误隐藏 */
.main__map:fullscreen #mapZoomBtn,
.main__map:-webkit-full-screen #mapZoomBtn {
  display: none;
}

/* ----------------------------- 职位检索栏 ----------------------------- */
.search-bar {
  margin: 16px 24px 0;
}

.search-bar__controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 12px 16px 16px;
  flex-wrap: wrap;
}

.search-bar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-bar__field--grow {
  flex: 1;
  min-width: 180px;
}

.search-bar__field-label {
  font-size: 12px;
  color: var(--text-sub);
}

.search-bar__select,
.search-bar__input {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-main);
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-radius: 2px;
  padding: 6px 10px;
  height: 32px;
  outline: none;
  transition: border-color 0.15s;
}

.search-bar__select {
  padding-right: 28px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #666 50%),
                    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.search-bar__input {
  width: 100%;
}

/* 专业搜索框 + "含不限"开关的容器 */
.search-bar__major-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-bar__input--major {
  flex: 1;
  min-width: 0;
}

/* "含不限"切换开关：专业搜索时是否同时包含专业不限的职位 */
.major-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.major-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 16px;
  background: #d4d4d4;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.2s;
  flex-shrink: 0;
}

.major-toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.major-toggle input[type="checkbox"]:checked {
  background: var(--header-blue);
}

.major-toggle input[type="checkbox"]:checked::before {
  transform: translateX(12px);
}

.major-toggle__text {
  font-size: 12px;
  color: var(--text-sub);
}

.major-toggle input[type="checkbox"]:checked + .major-toggle__text {
  color: var(--header-blue);
  font-weight: 600;
}

.search-bar__select:focus,
.search-bar__input:focus {
  border-color: var(--header-blue);
}

.search-bar__btn {
  font-family: var(--font-sans);
  font-size: 13px;
  height: 32px;
  padding: 0 20px;
  border: 1px solid var(--header-blue);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
}

.search-bar__btn {
  background: var(--header-blue);
  color: #ffffff;
}

.search-bar__btn:hover {
  background: var(--header-blue-dark);
}

.search-bar__btn--ghost {
  background: #ffffff;
  color: var(--header-blue);
}

.search-bar__btn--ghost:hover {
  background: var(--hover);
}

/* 展开/收起更多筛选按钮：与 ghost 重置按钮风格一致，仅追加箭头旋转样式 */
.search-bar__btn--toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.search-bar__toggle-arrow {
  font-size: 10px;
  transition: transform 0.15s;
  display: inline-block;
}

.search-bar__btn--toggle.is-expanded .search-bar__toggle-arrow {
  transform: rotate(180deg);
}

/* 更多筛选区：独占第二行，左对齐第一行"地市"（与 controls 同 padding-left 16px） */
.search-bar__more {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 16px 16px;
  flex-wrap: wrap;
}

.search-bar__more .search-bar__field {
  margin-bottom: 0;
}

/* 更多区 select：flex 容器内防止收缩，保持与主行一致的显示宽度 */
.search-bar__more .search-bar__select {
  flex-shrink: 0;
  min-width: 150px;
}

/* ----------------------------- 数据表格 ----------------------------- */
.table-panel {
  margin: 16px 24px 0;
}

.table-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
}

.table-panel__meta {
  font-size: 12px;
  color: var(--text-aux);
}

.table-panel__meta em {
  font-style: normal;
  font-family: var(--font-num);
  color: var(--dark-red);
  font-weight: 700;
}

.table-wrap {
  padding: 6px 16px 16px;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--border-main);
}

.data-table thead th {
  background: var(--header-blue);
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.data-table thead th:last-child {
  border-right: none;
}

.data-table thead th.col-num,
.data-table thead th.col-idx {
  text-align: center;
}

.data-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-main);
}

.data-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.data-table tbody tr:nth-child(even) {
  background: var(--stripe);
}

.data-table tbody tr:hover {
  background: var(--hover);
  box-shadow: inset 2px 0 0 var(--ochre);
}

.data-table td.col-idx {
  text-align: center;
  color: var(--text-aux);
  font-family: var(--font-mono);
  font-weight: 600;
}

.data-table td.col-num {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-main);
}

.data-table td.col-num.score {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--header-blue);
}

.data-table td.col-num.ratio {
  color: var(--dark-red);
}

.data-table td.col-edu,
.data-table td.col-major {
  color: var(--text-sub);
}

.data-table td.col-unit {
  white-space: nowrap;
}

/* ----------------------------- 页脚 ----------------------------- */
.footer {
  margin: 20px 24px 28px;
  padding: 14px 16px;
  background: #efeee8;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.8;
}

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer__update {
  font-family: var(--font-mono);
  color: var(--text-aux);
}

.footer__link {
  color: var(--header-blue);
  text-decoration: none;
  font-size: 12px;
}

.footer__link:hover {
  text-decoration: underline;
}

.footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* ----------------------------- 响应式（桌面优先，窄屏兜底） ----------------------------- */
@media (max-width: 1100px) {
  .main {
    grid-template-columns: 1fr;
  }
  .kpi-row,
  .kpi-row--5,
  .kpi-row--6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-row--5 .kpi-card__value {
    font-size: 30px;
  }
}

@media (max-width: 560px) {
  .kpi-row,
  .kpi-row--5 {
    grid-template-columns: 1fr;
  }
  .map-province-panel {
    width: 160px;
    font-size: 11px;
  }
  .map-legend__gradient {
    width: 90px;
  }
}

/* =========================================================================
   以下为 2026省考真实数据接入新增样式（政务数据看板风，与原有风格保持一致）
   ========================================================================= */

/* ----------------------------- 表格新增列样式 ----------------------------- */
.data-table td.col-city {
  text-align: center;
  color: var(--text-sub);
  white-space: nowrap;
}

/* 区县列：居中、次要色 */
.data-table td.col-district {
  text-align: center;
  color: var(--text-aux);
  font-size: 12px;
  white-space: nowrap;
}

/* 招录机关列：截断显示，hover 看 title */
.data-table td.col-org {
  color: var(--text-sub);
  font-size: 12px;
}

.data-table td.col-org--truncate {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table td.col-cat {
  color: var(--text-sub);
  font-size: 12px;
}

.data-table td.col-unit--truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 可点击行（省考表格行点击弹出详情） */
.data-table tbody tr.row-clickable {
  cursor: pointer;
}

.data-table tbody tr.row-clickable:hover {
  background: #f0ede4;
  box-shadow: inset 2px 0 0 var(--ochre);
}

/* 报名人数列带 + 号用赭石色 */
.data-table td.col-num.apply {
  color: var(--ochre);
  font-weight: 600;
}

/* ----------------------------- 分页器 ----------------------------- */
.table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px 14px;
  font-size: 13px;
  color: var(--text-sub);
  flex-wrap: wrap;
}

.table-pager:empty {
  display: none;
}

.pager__info {
  margin-right: 12px;
  color: var(--text-aux);
  font-size: 12px;
}

.pager__info em {
  font-style: normal;
  font-family: var(--font-num);
  color: var(--dark-red);
  font-weight: 700;
}

.pager__btn {
  font-family: var(--font-sans);
  font-size: 12px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-main);
  border-radius: 2px;
  background: #ffffff;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
}

.pager__btn:hover:not(:disabled) {
  border-color: var(--header-blue);
  color: var(--header-blue);
}

.pager__btn.is-active {
  background: var(--header-blue);
  border-color: var(--header-blue);
  color: #ffffff;
  font-weight: 700;
}

.pager__btn:disabled {
  color: var(--text-aux);
  cursor: not-allowed;
  background: var(--stripe);
}

.pager__ellipsis {
  padding: 0 4px;
  color: var(--text-aux);
}

/* ----------------------------- 职位详情弹窗（Modal） ----------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-fade-in 0.15s ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-radius: 4px;
  width: 720px;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.modal-header {
  background: var(--header-blue);
  color: #ffffff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ochre);
  border-radius: 4px 4px 0 0;
  flex-shrink: 0;
}

.modal-header__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header__title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--ochre);
}

.modal-header__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  outline: none;
  transition: color 0.15s;
  font-family: var(--font-sans);
}

.modal-header__close:hover {
  color: #ffffff;
}

.modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

/* 弹窗内信息分组 */
.modal-section {
  margin-bottom: 14px;
}

.modal-section__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--header-blue);
  border-bottom: 1px solid var(--ochre);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}

.modal-grid__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.modal-grid__label {
  color: var(--text-aux);
  white-space: nowrap;
  min-width: 72px;
  flex-shrink: 0;
}

.modal-grid__value {
  color: var(--text-main);
  word-break: break-all;
}

.modal-grid__value--full {
  grid-column: 1 / -1;
}

.modal-grid__value--mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.modal-grid__value--red {
  color: var(--dark-red);
  font-weight: 700;
  font-family: var(--font-num);
}

.modal-grid__value--num {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--header-blue);
}

/* 弹窗内分隔线 */
.modal-divider {
  height: 1px;
  background: var(--border-light);
  margin: 12px 0;
}

/* =========================================================================
   以下为第三轮优化新增样式（政务数据看板风，与原有风格保持一致）
   ========================================================================= */

/* ----------------------------- 表格下钻提示条 ----------------------------- */
.table-drill-hint {
  margin: 0 16px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--header-blue);
  background: #f0ede4;
  border: 1px solid var(--ochre);
  border-left: 3px solid var(--ochre);
  border-radius: 2px;
  line-height: 1.5;
}

.table-drill-hint:empty {
  display: none;
}

/* ----------------------------- 功能区数据面板（区县地图右下角） ----------------------------- */
/* 复用省属面板的政务风样式：白底1px边框、3px圆角、无阴影 */
.map-district-panel {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 232px;
  max-height: 248px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-radius: 3px;
  padding: 8px 10px 9px;
  font-size: 12px;
  color: var(--text-main);
  z-index: 5;
}

.map-district-panel__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--header-blue);
  border-left: 3px solid var(--ochre);
  padding-left: 6px;
  margin-bottom: 6px;
  line-height: 1.2;
}

.map-district-panel__item {
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-light);
}

.map-district-panel__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.map-district-panel__item-name {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
  line-height: 1.4;
}

.map-district-panel__item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1.5;
}

.map-district-panel__item-stats em {
  font-style: normal;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--header-blue);
  margin: 0 1px;
}

.map-district-panel__item-stats em.red {
  color: var(--dark-red);
}

@media (max-width: 560px) {
  .map-district-panel {
    width: 168px;
    font-size: 11px;
  }
}

/* =========================================================================
   职位对比功能样式（复选框列 + 浮动小窗口 + 对比弹窗）
   风格沿用政务数据看板：深政务蓝标题、赭石强调、白底细边框、无大阴影
   ========================================================================= */

/* ----------------------------- 表格复选框列 ----------------------------- */
/* 窄列居中，仅容纳复选框 */
.data-table th.col-compare,
.data-table td.col-compare {
  width: 42px;
  min-width: 42px;
  text-align: center;
  padding: 8px 6px;
}

/* 复选框样式：放大点击区，指针手型 */
.data-table .compare-cb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  vertical-align: middle;
  accent-color: var(--header-blue);  /* 主色渲染勾选态 */
}

/* 复选框禁用态：降低视觉优先级 */
.data-table .compare-cb:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* 复选框单元格 hover 提示可勾选 */
.data-table td.col-compare {
  cursor: pointer;
}

/* ----------------------------- 职位对比浮动小窗口 ----------------------------- */
/* 固定右下角，白底细边框，覆盖在表格之上 */
.compare-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 320px;
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
}

/* 标题栏：深政务蓝底 + 赭石下边线，与详情弹窗风格一致 */
.compare-dock__head {
  background: var(--header-blue);
  color: #ffffff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ochre);
}

.compare-dock__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.compare-dock__title em {
  font-style: normal;
  font-family: var(--font-num);
  color: #ffe9b8;  /* 赭石浅色，突出计数 */
}

.compare-dock__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  outline: none;
  font-family: var(--font-sans);
  transition: color 0.15s;
}

.compare-dock__close:hover {
  color: #ffffff;
}

/* 已选职位列表 */
.compare-dock__list {
  max-height: 180px;
  overflow-y: auto;
  padding: 6px 8px;
}

.compare-dock__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-bottom: 1px dashed var(--border-light);
  font-size: 12px;
  line-height: 1.4;
}

.compare-dock__item:last-child {
  border-bottom: none;
}

.compare-dock__item-text {
  color: var(--text-main);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-dock__item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-aux);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  outline: none;
  transition: color 0.15s;
}

.compare-dock__item-remove:hover {
  color: var(--dark-red);
}

/* 底部按钮区 */
.compare-dock__btns {
  display: flex;
  gap: 8px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-main);
}

.compare-dock__btn {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* 主按钮：深政务蓝 */
.compare-dock__btn--primary {
  background: var(--header-blue);
  color: #ffffff;
  border: 1px solid var(--header-blue);
}

.compare-dock__btn--primary:hover:not(:disabled) {
  background: var(--header-blue-dark);
  border-color: var(--header-blue-dark);
}

.compare-dock__btn--primary:disabled {
  background: #b8c4d0;
  border-color: #b8c4d0;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 幽灵按钮：白底蓝边 */
.compare-dock__btn--ghost {
  background: #ffffff;
  color: var(--header-blue);
  border: 1px solid var(--header-blue);
}

.compare-dock__btn--ghost:hover {
  background: var(--hover);
}

/* 折叠态：仅保留标题栏，隐藏列表与按钮区 */
.compare-dock.is-collapsed .compare-dock__list,
.compare-dock.is-collapsed .compare-dock__btns {
  display: none;
}

/* ----------------------------- 职位对比弹窗 ----------------------------- */
/* 弹窗容器：宽于详情弹窗，容纳多列并排 */
.cmp-box {
  width: 90vw;
  max-width: 1200px;
  max-height: 88vh;
}

.cmp-body {
  padding: 12px 16px 16px;
}

/* 并列对比表格 */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--border-main);
  table-layout: fixed;  /* 固定布局，列宽可控，避免长文本撑乱 */
}

.cmp-table thead th {
  background: var(--header-blue);
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  vertical-align: middle;
}

.cmp-table thead th:last-child {
  border-right: none;
}

/* 第一列：对比项名称，窄列固定 */
.cmp-th-field {
  width: 130px;
}

/* 职位列：均分剩余宽度 */
.cmp-th-job {
  word-break: break-all;
}

.cmp-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  color: var(--text-main);
  vertical-align: top;
  word-break: break-word;
  text-align: center;  /* 默认居中，专业类与备注保持左对齐（见 .cmp-cell--ml） */
}

.cmp-table tbody td:last-child {
  border-right: none;
}

/* 分组标题行：贯通整行 */
.cmp-group-row td {
  background: #f0ede4;  /* 赭石浅底 */
  color: var(--header-blue);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--ochre);
}

/* 对比项标签列：浅灰底 */
.cmp-field-label {
  background: #fafafa;
  color: var(--text-sub);
  font-weight: 600;
}

/* 数字/分数列：居中对齐 + 数字字体（与分组内其他字段视觉统一） */
.cmp-cell--num {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--header-blue);
  text-align: center;
}

/* 红色强调列（报名/竞争比）：居中对齐 */
.cmp-cell--red {
  color: var(--dark-red);
  font-weight: 700;
  font-family: var(--font-num);
  text-align: center;
}

/* 多行文本列（专科/本科/研究生专业、备注）：左对齐，便于长文本阅读 */
.cmp-cell--ml {
  text-align: left;
}

/* 差异高亮：各职位取值不一致时，整行单元格底色标记 */
.cmp-diff-row .cmp-cell--diff {
  background: #fff7e6;  /* 与地图色阶最浅色一致，提示差异 */
}

/* 差异行的对比项标签：左侧加赭石竖线，强化提示 */
.cmp-diff-row .cmp-field-label {
  background: #fff7e6;
  border-left: 3px solid var(--ochre);
  color: var(--dark-red);
}

/* 图例说明 */
.cmp-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-aux);
}

.cmp-legend__mark {
  display: inline-block;
  width: 14px;
  height: 12px;
  background: #fff7e6;
  border: 1px solid var(--ochre);
  border-radius: 2px;
}