/* =========================================================
   城乡居民养老保险 · 提档收益计算器
   视觉方向：暖宣纸基底 + 墨绿主色 + 朱砂点缀
   规则：统一 4px 间距节奏 / 单一柔和投影 / 说明文字入 hover 提示
   ========================================================= */

:root{
  /* 色彩 */
  --paper:        #F6F2EA;
  --surface:      #FFFFFF;
  --surface-2:    #FBF9F5;
  --ink:          #18231E;
  --ink-2:        #46524C;
  --muted:        #8A938D;
  --primary:      #1F6B4F;
  --primary-dark: #14523B;
  --primary-soft: #EAF3EE;
  --accent:       #C1512C;
  --accent-soft:  #F9EDE7;
  --gold:         #C08A2A;
  /* 浅底上可读的金色（对比度 ≥ 4.5:1）与深绿底上的浅金 */
  --gold-ink:     #8A6212;
  --gold-light:   #F7DFAE;
  --line:         #E7E0D3;
  --line-soft:    #F0EBE1;

  /* 字体 */
  --serif: Georgia, "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
          "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  /* 尺寸 */
  --r-sm: 10px;
  --r-md: 13px;
  --r-lg: 16px;
  --pad: 22px;
  --gap: 20px;
  /* 页面左右留白：统一在 body 上留一次，保证页头/页脚/各区块边缘完全对齐 */
  --gutter: clamp(18px, 4vw, 32px);
  --shadow: 0 1px 2px rgba(24,35,30,.04), 0 10px 26px -18px rgba(24,35,30,.24);
  --maxw: 1040px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* 作者样式会覆盖 UA 的 [hidden]{display:none}，此处显式兜底 */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- 背景氛围 ---------- */
.bg-mesh{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 460px at 6% -8%,  rgba(31,107,79,.10), transparent 62%),
    radial-gradient(620px 420px at 100% 2%, rgba(192,138,42,.09), transparent 60%),
    radial-gradient(800px 560px at 50% 104%, rgba(31,107,79,.07), transparent 64%);
}

/* ---------- 无障碍 ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- 页头 ---------- */
.masthead{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(28px,4.6vw,52px) 0 4px;
  text-align:center;
}
.kicker{
  margin:0 0 4px; font-size:12px; font-weight:600;
  letter-spacing:.14em; color:var(--primary);
}
.masthead h1{
  margin:0; font-family:var(--sans); font-weight:700;
  font-size:clamp(28px,4.6vw,44px); line-height:1.14;
  letter-spacing:normal; color:var(--primary-dark);
}

/* ---------- 主布局：PC 与移动端统一为单列纵向排列 ---------- */
.shell{
  max-width:var(--maxw); margin:0 auto;
  padding:24px 0 0;
  display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--pad);
}
/* 单列纵向排列：输入区随文档流排布，不再吸顶 */

.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.panel-head h2{
  margin:0; font-family:var(--serif); font-size:19px; font-weight:700; color:var(--primary-dark);
}
.ghost-btn{
  appearance:none; font:inherit; font-size:13px; cursor:pointer;
  padding:6px 14px; min-height:34px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  transition:color .18s, border-color .18s, background .18s;
}
.ghost-btn:hover{ color:var(--primary); border-color:var(--primary); background:var(--primary-soft); }

/* ---------- 表单字段 ---------- */
.field{ margin-top:18px; }

/* 数字框 + 滑块：宽屏同行（数字框固定宽、滑块占余量），窄屏上下排列 */
.control-row{ display:grid; gap:4px 18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){
  .control-row{ grid-template-columns:190px minmax(0,1fr); align-items:center; }
  .control-row input[type=range]{ margin-top:0; }
}

/* 高级设置字段：窄屏 1 列 → 中屏 2 列 → 宽屏 4 列并排 */
.advanced-grid{ display:grid; gap:16px; margin-top:14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){ .advanced-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .advanced-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.advanced-grid .field{ margin-top:0; }

.field-head{
  display:flex; align-items:center; gap:7px; margin-bottom:8px;
}
.field-head > label,
.field-head > .label-text{
  margin-right:auto; font-size:13.5px; font-weight:600; color:var(--ink-2);
}
.field-head > label{ cursor:pointer; }
.field-head .unit{ font-size:12px; font-weight:500; color:var(--muted); }

/* 数字输入 */
.num-wrap{ position:relative; }
.num-wrap input{
  width:100%; min-height:48px; font:inherit; font-size:17px;
  font-variant-numeric:tabular-nums; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:var(--r-sm); padding:12px 58px 12px 14px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.num-wrap input:hover{ border-color:#D8CFBD; }
.num-wrap input:focus{
  outline:none; background:var(--surface);
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(31,107,79,.13);
}
.num-wrap input[aria-invalid="true"]{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(193,81,44,.12);
}
.num-wrap .suffix{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--muted); pointer-events:none; white-space:nowrap;
}

/* 滑块 */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:26px; margin:6px 0 0;
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:999px; background:var(--line);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-8px; border-radius:50%;
  background:var(--surface); border:2.5px solid var(--primary);
  box-shadow:0 1px 5px rgba(24,35,30,.22);
  transition:transform .15s;
}
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.1); }
input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(31,107,79,.18); }
input[type=range]::-moz-range-track{
  height:4px; border-radius:999px; background:var(--line);
}
input[type=range]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%;
  background:var(--surface); border:2.5px solid var(--primary);
}

/* 档次选项：固定列数网格，每格等宽，换行也保持整齐 */
.chips{ display:grid; gap:6px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (min-width:400px){ .chips{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:900px){ .chips{ grid-template-columns:repeat(7,minmax(0,1fr)); } }
.chip{
  min-height:48px;
  appearance:none; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  padding:7px 6px;
  background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink-2);
  transition:border-color .16s, background .16s, color .16s;
}
.chip .c-main{ font-size:14.5px; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums; }
.chip .c-sub{ font-size:11px; line-height:1.35; color:var(--muted); font-variant-numeric:tabular-nums; }
/* 财政补贴：用金色提高视觉权重（这是政府给的钱，与「多缴」的自付额区分开） */
.chip .c-sub.is-subsidy{ color:var(--gold-ink); font-weight:600; }
.chip:hover{ border-color:var(--primary); background:var(--primary-soft); }
.chip[aria-checked="true"]{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.chip[aria-checked="true"] .c-sub{ color:rgba(255,255,255,.8); }
.chip[aria-checked="true"] .c-sub.is-subsidy{ color:var(--gold-light); }
.chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.chip[aria-disabled="true"]{
  opacity:.4; cursor:not-allowed;
  background:transparent; border-style:dashed;
}
.chip[aria-disabled="true"]:hover{ border-color:var(--line); background:transparent; }

/* 派生信息 */
.derive{ margin:9px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.6; }
.derive b{ color:var(--primary); }

/* 错误提示 */
.error{
  margin:8px 0 0; font-size:12.5px; font-weight:600; color:var(--accent);
  display:flex; gap:6px; align-items:flex-start; line-height:1.6;
}
.error::before{
  content:"!"; flex:0 0 auto; width:15px; height:15px; margin-top:3px;
  border-radius:50%; background:var(--accent); color:#fff;
  font-size:11px; line-height:15px; text-align:center;
}

/* hover / 点击提示
   说明气泡由 JS 定位到 position:fixed 的 .tip-layer，
   避免隐藏状态下撑出横向滚动条，也便于在触屏设备上使用。 */
.tip{
  flex:0 0 auto; position:relative;
  width:18px; height:18px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:var(--surface); color:var(--muted);
  font-family:var(--sans); font-size:11px; font-weight:700; line-height:1;
  display:inline-grid; place-items:center; cursor:help;
  transition:border-color .16s, color .16s, background .16s;
}
/* 扩大触控热区（视觉尺寸不变） */
.tip::before{ content:""; position:absolute; inset:-8px; border-radius:50%; }
.tip:hover, .tip:focus-visible, .tip.is-open{
  outline:none; border-color:var(--primary); color:var(--primary); background:var(--primary-soft);
}

.tip-layer{
  position:fixed; z-index:200; top:0; left:0;
  max-width:min(280px, calc(100vw - 24px));
  padding:9px 12px; border-radius:9px;
  background:var(--ink); color:#fff;
  font-size:12px; line-height:1.65; text-align:left;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease;
}
.tip-layer.is-visible{ opacity:1; visibility:visible; }

/* 高级设置 */
.advanced{ margin-top:20px; padding-top:14px; border-top:1px solid var(--line-soft); }
.advanced summary{
  display:flex; align-items:center; gap:8px;
  padding:4px 0; list-style:none; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--primary);
}
.advanced summary::-webkit-details-marker{ display:none; }
.advanced summary::before{
  content:"＋"; font-size:13px; color:var(--gold); transition:transform .2s;
}
.advanced[open] summary::before{ content:"−"; }
.advanced[open] summary{ margin-bottom:4px; }

/* 开关 */
.switch{ display:flex; align-items:center; gap:10px; margin-top:18px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch-track{
  flex:0 0 auto; position:relative;
  width:40px; height:23px; border-radius:999px;
  background:var(--line); transition:background .2s;
}
.switch-dot{
  position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .2s;
}
.switch input:checked + .switch-track{ background:var(--primary); }
.switch input:checked + .switch-track .switch-dot{ transform:translateX(17px); }
.switch input:focus-visible + .switch-track{ box-shadow:0 0 0 3px rgba(31,107,79,.25); }
.switch-label{ font-size:13.5px; color:var(--ink-2); }

/* 条件提示 */
.notice{
  margin:18px 0 0; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--accent-soft); border-left:3px solid var(--accent);
  font-size:12.5px; color:#7A3115; line-height:1.7;
}
.notice b{ color:#5E2410; }

/* ---------- 结果主指标 ---------- */
.hero{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:var(--gap); padding-bottom:20px; border-bottom:1px solid var(--line-soft);
}
@media (max-width:600px){ .hero{ grid-template-columns:1fr; gap:16px; } }

.hero-label{
  margin:0; display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--muted);
}
.hero-value{
  margin:8px 0 0; display:flex; align-items:baseline; gap:5px;
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(40px,7vw,58px); letter-spacing:-.02em;
  /* lining-nums：Georgia 默认用旧式数字，3/4/5/7/9 会沉到基线以下、6/8 偏高，
     同一串数字看起来不在一行；必须显式要求等高数字。 */
  font-variant-numeric:lining-nums tabular-nums; color:var(--primary-dark);
}
.hero-value.accent{ color:var(--accent); }
.hero-unit{ font-size:clamp(15px,2vw,19px); font-weight:600; color:var(--muted); letter-spacing:0; }
.hero-sub{ margin:10px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.6; }
.hero-sub b{ color:var(--primary); }

/* ---------- 时间轴 ---------- */
.timeline{ margin-top:20px; }
.tl-bar{
  display:flex; height:36px; border-radius:var(--r-sm); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(24,35,30,.06);
}
.tl-seg{
  display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden;
  font-size:11px; font-weight:600; color:#fff; white-space:nowrap;
  transition:flex-grow .5s cubic-bezier(.22,1,.36,1);
}
.tl-seg span{ padding:0 6px; opacity:0; transition:opacity .3s .18s; }
.tl-seg.wide span{ opacity:1; }
.seg-pay { background:linear-gradient(180deg,#2A6E52,#1B5540); }
.seg-back{ background:linear-gradient(180deg,#D2A03C,#B3851F); }
.seg-earn{ background:linear-gradient(180deg,#66B48C,#418A63); }
.tl-ticks{
  position:relative; height:20px; margin-top:6px;
  font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.tl-ticks .tick{ position:absolute; white-space:nowrap; transform:translateX(-50%); }
.tl-ticks .tick-start{ left:0; transform:none; }
.tl-ticks .tick-end{ left:100%; transform:translateX(-100%); }
.tl-ticks .tick-60{ color:var(--primary-dark); font-weight:700; }
.tl-legend{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px;
  font-size:12px; color:var(--ink-2);
}
.tl-legend > span{ display:flex; align-items:center; gap:6px; }
.tl-legend b{ font-variant-numeric:tabular-nums; color:var(--primary-dark); }
.dot{ width:8px; height:8px; border-radius:2px; flex:0 0 auto; }
.dot-pay{ background:#2A6E52; } .dot-back{ background:#D2A03C; } .dot-earn{ background:#66B48C; }
/* 到龄一次性补缴：同属缴费（深绿系），用空心环区别于按年缴费 */
.dot-makeup{ background:transparent; box-shadow:inset 0 0 0 2px #2A6E52; border-radius:50%; }

/* ---------- 指标卡 ---------- */
.stats{
  display:grid; gap:10px; margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
}
.stat{
  padding:13px 14px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.stat-label{ margin:0; font-size:11.5px; font-weight:600; color:var(--muted); }
.stat-value{
  margin:6px 0 0; font-family:var(--serif); font-weight:700; line-height:1.15;
  font-size:clamp(20px,2.8vw,25px); font-variant-numeric:lining-nums tabular-nums; color:var(--primary-dark);
}
.stat-value small{ margin-left:3px; font-size:12px; font-weight:600; color:var(--muted); }
.stat-note{ margin:5px 0 0; font-size:11.5px; color:var(--muted); line-height:1.55; }
.stat.is-key{ background:var(--primary-soft); border-color:#D3E5DA; }
.stat.is-key .stat-value{ color:var(--primary); }

/* ---------- 子区块 ---------- */
.sub-block{ margin-top:24px; }
.sub-head{ display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.sub-head h3{
  margin:0; font-family:var(--serif); font-size:15.5px; font-weight:700; color:var(--primary-dark);
}

/* 表格 */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }

.mini-table{ font-size:13px; min-width:400px; }
.mini-table th, .mini-table td{
  padding:9px 10px; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--line-soft);
}
.mini-table th:first-child, .mini-table td:first-child{
  text-align:left; font-weight:600; color:var(--ink-2);
}
.mini-table thead th{
  font-size:11.5px; font-weight:600; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.mini-table tbody tr:last-child td{ border-bottom:none; }
.mini-table tbody tr.row-hi td{ background:var(--primary-soft); }
.mini-table .up{ font-weight:700; color:var(--accent); }
.mini-table .up::before{ content:"＋"; font-size:10px; }

/* 利率对比条 */
.bars{ display:grid; gap:12px; }
.bar-row{ display:grid; gap:5px; }
.bar-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; }
.bar-name{ font-weight:600; color:var(--ink-2); }
.bar-name .tag{
  margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:10.5px; font-weight:700; color:#fff; background:var(--accent); vertical-align:1px;
}
.bar-val{ font-weight:700; color:var(--primary-dark); font-variant-numeric:tabular-nums; }
.bar-track{ height:9px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.bar-fill{ width:0; height:100%; border-radius:999px; transition:width .7s cubic-bezier(.22,1,.36,1); }
.bar-fill.b-irr { background:linear-gradient(90deg,#D9743F,#C1512C); }
.bar-fill.b-bank{ background:linear-gradient(90deg,#C3CBC5,#9BA49D); }

/* 保底权益 */
.safety{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px 9px;
  margin:24px 0 0; padding:12px 14px; border-radius:var(--r-md);
  background:var(--primary-soft); font-size:12.5px; color:var(--ink-2); line-height:1.7;
}
.safety-key{ flex:0 0 auto; font-weight:700; color:var(--primary); }
.safety #safetyText{ flex:1 1 220px; }
.safety b{ color:var(--primary); }
.safety .tip{ margin-top:2px; }

/* ---------- 补充资料 ---------- */
.wide-block{
  max-width:var(--maxw); margin:var(--gap) auto 0;
  padding:clamp(20px,3vw,28px) var(--pad);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}

.tabs{
  display:flex; gap:4px; width:fit-content; margin-bottom:18px;
  padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
}
.tab{
  appearance:none; border:0; font:inherit; cursor:pointer;
  padding:8px 20px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--muted);
  transition:background .18s, color .18s;
}
.tab:hover{ color:var(--primary); }
.tab.is-active{ background:var(--primary); color:#fff; }
.tab:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width:440px){
  .tabs{ width:100%; }
  .tab{ flex:1; padding:8px 10px; }
}

.std-table{ font-size:12.5px; min-width:720px; }
/* 数值列右对齐（配合 tabular-nums），保证同一列的数字按末位上下对齐 */
.std-table th, .std-table td{
  padding:10px 9px; text-align:right; border-bottom:1px solid var(--line-soft);
}
.std-table th:first-child, .std-table td:first-child{ text-align:left; }
.std-table thead th{
  font-size:11px; font-weight:600; color:var(--muted); line-height:1.45;
  border-bottom:1px solid var(--line); background:var(--surface-2);
}
.std-table thead th small{ font-size:10.5px; font-weight:500; opacity:.85; }
/* 表头里的说明气泡：缩小并贴齐文字基线，避免撑高表头行 */
.std-table thead th .tip{ width:14px; height:14px; font-size:9.5px; vertical-align:-2px; }
.std-table tbody td:first-child{ font-weight:700; color:var(--primary-dark); }
.std-table tbody tr:hover td{ background:var(--surface-2); }
.std-table tbody tr.row-best td{ background:rgba(192,138,42,.14); }
.std-table tbody tr.row-best td:first-child::after{
  content:"最划算"; display:inline-block; margin-left:6px; padding:1px 6px;
  border-radius:999px; font-size:9.5px; font-weight:700; color:#fff;
  background:var(--gold); vertical-align:1px;
}

/* --- 表格重点列 ---
   1) 财政补贴：金色，与上方档位卡片同一视觉语言
   2) 合计待遇：最终到手金额，深色加粗
   3) 年收支比：结论指标，加分隔线 + 浅底 + 主色加粗，并自动标出最高档 */
.std-table .col-sub{ color:var(--gold-ink); font-weight:600; }
.std-table .col-total{ color:var(--primary-dark); font-weight:700; }
.std-table .col-ratio{
  border-left:1px solid rgba(31,107,79,.28);
  background:rgba(31,107,79,.05);
  color:var(--primary); font-weight:700;
}
.std-table tbody td.col-ratio{ font-size:13.5px; }
.std-table .col-ratio.is-max{ color:var(--accent); }
/* 「最高」角标绝对定位到单元格左侧，不占文本流，避免把数字挤离右边缘而破坏整列对齐 */
.std-table .col-ratio{ position:relative; }
.std-table .col-ratio.is-max::after{
  content:"最高"; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  margin:0; padding:1px 6px;
  border-radius:999px; font-size:9.5px; font-weight:700; color:#fff;
  background:var(--accent);
}
/* 最划算那一行的年收支比保持金色底，避免整行高亮被绿色底打断 */
.std-table tbody tr.row-best td.col-ratio{ background:rgba(192,138,42,.20); }

/* 手风琴 */
.accordion details{ border-bottom:1px solid var(--line-soft); }
.accordion details:last-child{ border-bottom:none; }
.accordion summary{
  display:flex; align-items:center; gap:12px;
  padding:15px 2px; list-style:none; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--primary-dark);
  transition:color .18s;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary:hover{ color:var(--primary); }
.acc-idx{ flex:0 0 auto; font-family:var(--serif); font-size:12.5px; font-weight:700; color:var(--gold); font-variant-numeric:lining-nums tabular-nums; }
.accordion summary::after{
  content:""; flex:0 0 auto; margin-left:auto;
  width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s;
}
.accordion details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.accordion details[open] summary{ color:var(--primary); }
.acc-body{ padding:0 2px 18px 30px; }
@media (max-width:520px){ .acc-body{ padding-left:2px; } }
.acc-body p{ margin:0 0 10px; font-size:13px; color:var(--ink-2); line-height:1.8; }
.acc-body p:last-child{ margin-bottom:0; }
.acc-body ul{ margin:0 0 10px; padding-left:17px; }
.acc-body li{ margin-bottom:5px; font-size:13px; color:var(--ink-2); line-height:1.8; }
.acc-body li:last-child{ margin-bottom:0; }
.acc-body b{ color:var(--primary-dark); }

/* ---------- 页脚 ---------- */
.site-foot{
  max-width:var(--maxw); margin:0 auto;
  padding:26px 0 52px;
  font-size:12px; line-height:1.75; color:var(--muted);
}
.site-foot p{ margin:0 0 4px; }
.foot-source{ color:#A3ABA4; }

/* ---------- 入场动画 ---------- */
.reveal{ opacity:0; transform:translateY(12px); animation:rise .6s cubic-bezier(.22,1,.36,1) forwards; }
.reveal-2{ animation-delay:.07s; }
.reveal-3{ animation-delay:.14s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 移动端适配（窄屏） ----------
   两张表在手机上原本都需要横向滚动（待遇对照表只有 2/4 列可见、官方待遇表只有 3/9 列可见），
   这里改为：① 待遇对照表拆成「项目 + 不提档 → 提档后」的条目式，信息一条不漏且不再横滑；
             ② 官方待遇表只保留决策相关的 5 列，其余列隐藏，并冻结首列。 */
@media (max-width:700px){
  /* 长页面用细线切分区块，滚动时层级更清楚 */
  .sub-block{
    margin-top:18px; padding-top:18px;
    border-top:1px solid var(--line-soft);
  }

  /* ① 待遇对照表：一行一条 */
  .mini-table{ min-width:0; font-size:12.5px; }
  .mini-table thead{ display:none; }
  .mini-table, .mini-table tbody, .mini-table tr, .mini-table td{ display:block; }
  .mini-table tbody tr{ padding:9px 10px; border-bottom:1px solid var(--line-soft); }
  .mini-table tbody tr:last-child{ border-bottom:none; }
  .mini-table td{ padding:0; border:0; text-align:left; }
  .mini-table td:first-child{
    margin-bottom:3px; font-size:12px; font-weight:600; color:var(--muted);
  }
  .mini-table td:not(:first-child){ display:inline; font-weight:700; color:var(--ink); }
  .mini-table td:not(:first-child)::before{
    content:attr(data-label); margin-right:4px;
    font-size:11px; font-weight:400; color:var(--muted);
  }
  .mini-table td + td:not(:first-child){ margin-left:16px; }
  .mini-table tbody tr.row-hi{
    margin:2px 0; padding:9px 10px;
    border-bottom:0; border-radius:8px; background:var(--primary-soft);
  }
  .mini-table tbody tr.row-hi td{ background:transparent; }

  /* ② 官方待遇表：只留 缴费档次 / 个人缴费 / 财政补贴 / 合计待遇（月）/ 年收支比 */
  .std-table{ min-width:0; font-size:12px; }
  .std-table th, .std-table td{ padding:9px 6px; }
  .std-table thead th{ font-size:10.5px; }
  .std-table thead th small{ font-size:9.5px; }
  .std-table th:nth-child(4), .std-table td:nth-child(4),
  .std-table th:nth-child(5), .std-table td:nth-child(5),
  .std-table th:nth-child(6), .std-table td:nth-child(6),
  .std-table th:nth-child(8), .std-table td:nth-child(8){ display:none; }
  /* 万一仍需横滑，冻结首列，始终知道是哪一档 */
  .std-table th:first-child, .std-table td:first-child{ position:sticky; left:0; }
  .std-table thead th:first-child{ z-index:3; background:var(--surface-2); }
  .std-table tbody td:first-child{ z-index:2; background:var(--surface); }
  .std-table tbody tr:hover td:first-child{ background:var(--surface-2); }
  .std-table tbody tr.row-best td:first-child{ background:#F6EFE1; }
  /* 窄屏去掉「最划算」角标：整行金色底 + 年收支比列的「最高」已足以表达 */
  .std-table tbody tr.row-best td:first-child::after{ display:none; }
}