:root {
      --bg: #f4f6f9;
      --card: #ffffff;
      --line: #e5e9f0;
      --text: #1f2733;
      --muted: #6b7686;
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --green: #16a34a;
      --red: #dc2626;
      --amber: #d97706;
      --radius: 14px;
      --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 16px rgba(16, 24, 40, .06);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      overflow-x: hidden;
      width: 100%;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      font-size: 16px;
    }

    header {
      background: linear-gradient(135deg, #1d4ed8, #3b82f6 60%, #60a5fa);
      color: #fff;
      padding: 16px 14px 14px;
      text-align: center;
      position: relative;
    }

    header h1 {
      margin: 0 0 4px;
      font-size: 27px;
      letter-spacing: .5px;
    }

    header p {
      margin: 0;
      opacity: .95;
      font-size: 15px;
    }

    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 12px 12px 48px;
      /* 方案A:容器最小高度,避免短面板切换时 footer 上跳 */
      min-height: calc(100vh - 200px);
      min-height: calc(100dvh - 200px);
      transition: min-height .25s ease;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 400px;
      gap: 12px;
      align-items: start;
    }

    @media (max-width:960px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px 12px;
      margin-bottom: 12px;
    }

    .card h2 {
      margin: 0 0 10px;
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .card h2 .tag {
      font-size: 15px;
      color: var(--primary);
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      padding: 2px 10px;
      border-radius: 999px;
      font-weight: 500;
    }

    .field {
      margin-bottom: 11px;
    }

    .field label {
      display: block;
      font-size: 16px;
      font-weight: 700;
      color: #374151;
      margin-bottom: 5px;
    }

    .field .hint {
      color: var(--muted);
      font-size: 15px;
      margin-top: 4px;
      word-break: break-word;
    }

    /* 只有一个取值的字段（如丧葬抚恤的「人员类别」）：不画选框和下拉箭头，
       字号/行高/上下占位与同排 .select-picker 对齐（17px×1.45 + 13px ＝ padding 12 + 边框 1），
       这样纯文本与旁边的下拉文字左右齐、上下也齐 */
    .field-static {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 13px 0;
      font-size: 17px;
      line-height: 1.45;
      color: var(--text);
    }

    /* 【说明】折叠交互：蓝色字样 + 悬浮窗，点击显示在【说明】上方、点击外部隐藏 */
    .hint-toggle {
      color: var(--primary);
      cursor: pointer;
      margin-left: 4px;
      font-size: 15px;
      user-select: none;
    }

    .hint-bubble {
      position: fixed;
      display: none;
      z-index: 9999;
      max-width: min(360px, 92vw);
      margin: 0;
      padding: 8px 12px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      box-shadow: 0 4px 14px rgba(30, 64, 175, .16);
      color: #1e40af;
      font-size: 14px;
      line-height: 1.5;
      word-break: break-word;
    }

    /* 社平数据口径提示：地区只内置最新年度锚点、历年数值为倒推估算时常驻显示。
       【说明】悬浮窗里的口径要点击才看得到，而估算口径必须让用户在测算前就看到，所以单列一条。 */
    .wage-basis-note {
      display: none;
      color: #b45309;
      font-size: 13px;
      line-height: 1.45;
      margin-top: 4px;
      word-break: break-word;
    }

    .wage-basis-note.show {
      display: block;
    }

    /* 地区专属福利待遇提示：取暖补贴/交通费/体检费/护工费等养老金之外的地方性待遇。
       与测算口径无关，仅在用户选中该地区时常驻显示，帮助识别“到手总额”里还有哪些钱。 */
    .region-welfare-note {
      display: none;
      color: #0f6b5c;
      font-size: 13px;
      line-height: 1.5;
      margin-top: 4px;
      padding: 6px 8px;
      background: #f0fdf9;
      border-left: 2px solid #14b8a6;
      border-radius: 4px;
      word-break: break-word;
    }

    .region-welfare-note.show {
      display: block;
    }

    select,
    input[type=number],
    input[type=text],
    input[type=password] {
      width: 100%;
      max-width: 100%;
      padding: 11px 12px;
      border: 1px solid var(--line);
      border-radius: 9px;
      font-size: 17px;
      background: #fff;
      color: var(--text);
      font-family: inherit;
    }

    select:focus,
    input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 10px;
    }

    @media (max-width:480px) {
      .row {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width:701px) {
      .row.compact {
        grid-template-columns: max-content max-content;
        justify-content: start;
        column-gap: 40px;
      }

      /* 失业金：所在地区 / 缴费年限 / 所在城市 三项同排 */
      .row.compact.unemp-row {
        grid-template-columns: max-content max-content max-content;
      }

      .row.retire-row {
        grid-template-columns: max-content max-content;
        justify-content: start;
        column-gap: 64px;
      }

      /* 批次101：普通电脑端八个版块一律吃满 .wrap 内容宽（1156），不再收口，
         所以"左参数 + 右 400px 结果"两栏、② 逐年档位表（实测需 651）与 ① 卡的 341px 起跑线全部维持原样，
         切换版块零跳动。原先按 id 白名单把五个版块收成 880（批次88）会让它们 880、另两块 1156，每侧跳 138px。
         880 上限只留给直播版：那边左栏被展示区挤窄，沿用旧行为，版式与批次101 之前逐像素一致。 */
      body.sbc-live #cardRetirementCalc,
      body.sbc-live #cardMedicalInsCalc,
      body.sbc-live #cardFuneralCalc,
      body.sbc-live #cardUnemployCalc,
      body.sbc-live #cardSubsidyCalc {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    .seg {
      display: flex;
      gap: 8px;
    }

    .seg button {
      flex: 1;
      padding: 12px 6px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 9px;
      cursor: pointer;
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      transition: .15s;
    }

    .seg button.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .quick {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }

    .quick button {
      padding: 10px 13px;
      border: 1px solid var(--line);
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
    }

    .quick button:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    /* 「全程 N%」合并控件：与同排预设按钮同一副尺寸，中间百分比可直接键入 */
    .quick-all {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 13px;
      border: 1px solid var(--line);
      background: #f8fafc;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
    }

    .quick-all input[type=number] {
      /* 3 位数字（最大 300）要完整看得见：Chrome 给 number 的上下箭头预留约 14px，
         加自身 padding 8px + 边框，实测 3ch+14px 会截掉 10px，收到 3ch+26px 才不截。 */
      width: calc(3ch + 26px);
      padding: 2px 4px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      font-family: inherit;
      font-size: inherit;
      font-weight: 700;
      text-align: right;
      color: var(--primary);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 16px;
    }

    th,
    td {
      padding: 10px 6px;
      text-align: right;
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }

    th {
      color: #4b5563;
      font-weight: 700;
      background: #f8fafc;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    td:first-child,
    th:first-child {
      text-align: left;
    }

    td select {
      width: 112px;
      padding: 7px 8px;
      font-size: 16px;
    }

    td .select-picker {
      max-width: 118px;
    }

    .tbl-wrap {
      max-height: 62vh;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    /* 逐年档位设置：表头吸顶在汇总栏正下方，不受表格内容下滑影响 */
    /* border-collapse:separate 使表头边框随 sticky 一起固定（collapse 模式下边框会被留在原位） */
    #tierTableWrap table {
      border-collapse: separate;
      border-spacing: 0;
    }

    #tierTableWrap thead th {
      top: var(--tierHeadTop, 0px);
      z-index: 9;
    }

    .stat {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .stat .box {
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      min-width: 0;
      overflow: hidden;
    }

    .stat .box .k {
      font-size: 15px;
      color: var(--muted);
    }

    .stat .box .v {
      font-size: 24px;
      font-weight: 700;
      margin-top: 2px;
      word-break: break-all;
    }

    .stat .box .v.hl {
      color: var(--primary);
    }

    .stat .box .v.gr {
      color: var(--green);
    }

    .stat .box .sub {
      font-size: 15px;
      color: var(--muted);
      word-break: break-word;
    }

    /* 档位计算器附属入口：比主标题小一号的蓝色字体，点击展开/收起 */
    .tier-calc-toggle {
      font-size: 13px;
      font-weight: 400;
      color: #2563eb;
      cursor: pointer;
      margin-left: 8px;
      text-decoration: underline;
      text-underline-offset: 3px;
      white-space: nowrap;
    }

    .tier-calc-toggle:hover {
      color: #1d4ed8;
    }

    /* 档位计算器：汇总分组行 / 动画 */
    .tc-batch-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 6px;
      padding: 4px 8px;
      background: #fff;
      border: 1px solid #e0f2fe;
      border-radius: 8px;
      animation: tcRowIn .18s ease;
    }

    .tc-batch-row input[type=number] {
      width: 56px;
      padding: 4px 6px;
      font-size: 16px;
      border: 1px solid var(--line);
      border-radius: 6px;
      text-align: right;
    }

    .tc-batch-row input.bad {
      border-color: #ef4444;
      background: #fef2f2;
    }

    .tc-batch-row .tc-sel {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }

    /* 4.0 第 4 条：行尾的「或 总__月」+「小计」绑成一组，折行时一起下去 */
    .tc-batch-row .tc-tail {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    @keyframes tcRowIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .conclusion {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      padding: 12px;
      font-size: 17px;
    }

    .conclusion b {
      color: var(--green);
    }

    .conclusion.neg {
      background: #fef2f2;
      border-color: #fecaca;
    }

    .conclusion.neg b {
      color: var(--red);
    }

    .formula {
      position: fixed;
      display: none;
      z-index: 9999;
      max-width: min(440px, 92vw);
      max-height: calc(100vh - 20px);
      max-height: calc(100dvh - 20px);
      overflow: auto;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(30, 64, 175, .16);
      font-size: 14px;
      color: #1f2733;
      line-height: 1.75;
      word-break: break-word;
    }

    .chart {
      width: 100%;
      height: 220px;
    }

    .export-row {
      display: flex;
      gap: 10px;
      margin-top: 12px;
    }

    .export-row button {
      flex: 1;
      padding: 13px 8px;
      border: 1px solid var(--primary);
      background: #fff;
      color: var(--primary);
      border-radius: 9px;
      cursor: pointer;
      font-size: 17px;
      font-weight: 700;
      transition: .15s;
    }

    .export-row button:hover {
      background: var(--primary);
      color: #fff;
    }

    /* ===== 统一测算按钮：所有"点击测算/查询"共用此样式 ===== */
    button.calc-btn {
      width: 100%;
      max-width: 260px;
      margin: 0 auto;
      padding: 14px 8px;
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      color: #fff;
      border: 1px solid #1d4ed8;
      border-radius: 9px;
      cursor: pointer;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 1px;
      box-shadow: 0 3px 10px rgba(29, 78, 216, .3);
      transition: .15s;
    }

    button.calc-btn:hover {
      filter: brightness(.94);
      box-shadow: 0 4px 14px rgba(29, 78, 216, .35);
    }

    button.calc-btn:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    /* 覆盖 .export-row button 的 flex:1，让测算按钮保持自身 max-width 并居中 */
    .export-row button.calc-btn {
      flex: none;
    }

    /* ===== ③测算结果 操作按钮区：统一尺寸/间距/对齐（与 .export-row 同几何规格） ===== */
    .action-row {
      display: flex;
      gap: 10px;
      align-items: stretch;
    }

    .action-row button {
      flex: 1;
      min-width: 0;
      padding: 13px 8px;
      border-radius: 9px;
      cursor: pointer;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .5px;
      transition: .15s;
      white-space: nowrap;
    }

    .action-row button:hover {
      filter: brightness(.94);
    }

    .action-row button:disabled {
      cursor: not-allowed;
    }

    .sel-line {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 2px 0 10px;
      font-size: 13px;
      color: var(--muted);
    }

    #importReportBar .bar-btn {
      flex: 1 1 calc(50% - 5px);
      min-width: 0;
      padding: 13px 8px;
      border-radius: 9px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .5px;
      transition: .15s;
      white-space: nowrap;
    }

    @media (max-width:640px) {
      .action-row {
        flex-direction: column;
        gap: 8px;
      }

      #importReportBar .bar-btn {
        flex: 1 1 100%;
      }

      /* 移动端：勾选说明文字置于「导入重新测算」与「删除已选」两按钮之间（仅视觉顺序，DOM/功能不变） */
      #importReportBtn { order: 1; }
      #importReportStatus { order: 2; }
      #batchDeleteBtn { order: 3; }
    }

    .note {
      font-size: 14px;
      color: var(--muted);
      margin-top: 10px;
      line-height: 1.7;
    }

    .pill {
      display: inline-block;
      font-size: 14px;
      padding: 2px 10px;
      border-radius: 999px;
      background: #eff6ff;
      color: var(--primary);
      margin-left: 6px;
    }

    details summary {
      cursor: pointer;
      color: var(--primary);
      font-size: 16px;
      font-weight: 600;
    }

    /* ========== 顶部功能导航：所有功能入口一目了然 ========== */
    .topnav {
      position: sticky;
      top: 0;
      z-index: 900;
      background: linear-gradient(135deg, #1d4ed8, #3b82f6 60%, #60a5fa);
      box-shadow: 0 2px 10px rgba(29, 78, 216, .28);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      padding: 10px 12px;
    }

    .topnav button {
      flex: 0 1 auto;
      min-width: 104px;
      padding: 11px 18px;
      border: none;
      border-radius: 10px;
      background: rgba(255, 255, 255, .18);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .5px;
      cursor: pointer;
      transition: .15s;
      white-space: nowrap;
    }

    .topnav button:hover {
      background: rgba(255, 255, 255, .32);
    }

    .topnav button.active {
      background: #fff;
      color: #1d4ed8;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    }

    /* ========== 功能面板切换（一次只显示一个计算模块） ========== */
    .tab-panel {
      display: none;
    }

    .tab-panel.active {
      display: block;
    }

    /* 方案B:去掉 translateY 位移错觉,只动 opacity,延长至 0.22s 更柔和
       仅在用户主动切换面板时(临时加 .tab-switching)触发,避免首次加载闪烁 */
    .tab-panel.active.tab-switching {
      animation: tabFade .22s ease-out;
    }

    @keyframes tabFade {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* 方案C:折叠区统一 max-height 过渡,替代 display:none 瞬变 */
    .collapsible {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .3s ease, opacity .25s ease;
    }

    .collapsible.expanded {
      max-height: 4000px;
      opacity: 1;
    }

    /* 付费弹窗样式 */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      width: 360px;
      max-width: 90vw;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    }

    .modal h3 {
      margin: 0 0 8px;
      font-size: 18px;
      color: #1f2733;
      text-align: center;
    }

    .modal .subtitle {
      font-size: 14px;
      color: #6b7686;
      text-align: center;
      margin-bottom: 20px;
    }

    .pay-packages {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }

    .pay-package {
      border: 2px solid #e5e9f0;
      border-radius: 12px;
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      transition: all .2s;
    }

    .pay-package.active {
      border-color: #2563eb;
      background: #eff6ff;
    }

    .pay-package .count {
      font-size: 17px;
      font-weight: 700;
      color: #1f2733;
      margin-bottom: 4px;
    }

    .pay-package .price {
      font-size: 15px;
      color: #dc2626;
      font-weight: 600;
    }

    .pay-package .unit {
      font-size: 13px;
      color: #6b7686;
      margin-top: 2px;
    }

    .pay-method {
      margin-bottom: 16px;
    }

    .pay-method label {
      display: block;
      font-size: 15px;
      color: #1f2733;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .pay-method select {
      width: 100%;
      padding: 11px;
      border: 1px solid #e5e9f0;
      border-radius: 10px;
      font-size: 16px;
    }

    /* 批次109 扫码支付态：与套餐态在同一个 #payModal 内互斥切换（不叠第二层遮罩）。
       二维码盒子/刷新按钮沿用 usercenter.css 的 .sbuc-qr-box / .sbuc-btn-refresh，此处只补排版。 */
    .pay-qr-pane {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 2px 0 4px;
    }

    .pay-qr-count {
      font-size: 14px;
      color: #1f2733;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .pay-qr-order {
      font-size: 12px;
      color: #9ca3af;
      text-align: center;
      word-break: break-all;
    }

    .pay-btn {
      width: 100%;
      padding: 13px;
      background: #07c160;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
    }

    .pay-btn:hover {
      background: #06ad56;
    }

    .pay-tip {
      font-size: 13px;
      color: #9ca3af;
      text-align: center;
      margin-top: 12px;
    }

    .share-btn {
      display: block;
      width: 100%;
      margin-top: 12px;
      padding: 12px;
      background: #f8fafc;
      border: 1px dashed #d1d5db;
      border-radius: 10px;
      color: #6b7280;
      font-size: 14px;
      cursor: pointer;
      text-align: center;
    }

    .share-btn:hover {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #2563eb;
    }

    .close-modal {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 28px;
      height: 28px;
      border: none;
      background: #f3f4f6;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      color: #6b7280;
    }

    .close-modal:hover {
      background: #e5e7eb;
    }

    /* ========== 会员专享功能提示框（非会员点击会员功能时拦截） ========== */
    .member-gate {
      text-align: center;
      padding: 28px 24px 20px;
    }

    .member-gate .mg-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      box-shadow: 0 6px 16px rgba(245, 158, 11, .28);
    }

    .member-gate .mg-perks {
      list-style: none;
      margin: 4px 0 18px;
      padding: 12px 14px;
      background: #f8fafc;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      font-size: 13px;
      color: #4b5563;
      line-height: 2;
      text-align: left;
    }

    .member-gate .mg-cta {
      width: 100%;
      height: 48px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(29, 78, 216, .32);
      transition: filter .15s, box-shadow .15s, transform .15s;
    }

    .member-gate .mg-cta:hover {
      filter: brightness(1.07);
      box-shadow: 0 8px 20px rgba(29, 78, 216, .4);
      transform: translateY(-1px);
    }

    .member-gate .mg-cta:active {
      transform: translateY(0);
    }

    .member-gate .mg-later {
      width: 100%;
      margin-top: 10px;
      padding: 8px 0;
      border: none;
      background: transparent;
      font-size: 14px;
      color: #94a0b0;
      cursor: pointer;
    }

    .member-gate .mg-later:hover {
      color: #6b7686;
    }

    @media (max-width:480px) {
      .member-gate {
        padding: 24px 18px 16px;
      }

      .member-gate .mg-perks {
        font-size: 13px;
        line-height: 1.9;
      }

      .member-gate .mg-cta {
        height: 46px;
        font-size: 16px;
      }
    }

    /* ========== 手机端适配 ========== */
    @media (max-width:960px) {
      .wrap {
        padding: 10px 8px 40px;
        max-width: 100vw;
      }

      .grid {
        display: block !important;
        gap: 0;
      }

      .grid>div:last-child {
        position: static !important;
        top: auto !important;
        width: 100%;
      }

      .card {
        max-width: 100%;
        overflow-x: hidden;
      }

      .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
      }

      /* 参保类型按钮换行 */
      .seg {
        flex-wrap: wrap;
        gap: 6px;
      }

      .seg button {
        flex: 0 0 calc(33.33% - 4px);
        min-width: 0;
        padding: 12px 4px;
        font-size: 15px;
      }

      .hint {
        word-break: break-all;
        white-space: normal;
      }

      td select {
        width: 100% !important;
      }

      td .select-picker {
        max-width: 100% !important;
      }

      #growthAdjust input[type=number] {
        width: 100% !important;
      }

      /* 逐年档位表（职工最多7列、居民4列）：小屏把 7 列压进屏幕会让表头换行 4 行、
         数字框与千分位数字撞列。改为职工表保留自然宽度、在 .tbl-wrap 内横向滚动，
         「年度」列冻结在左缘作定位锚，横滑时仍能对上是在改哪一年；
         居民表 4 列放得下，不设最小宽度。桌面端（>960px）不受此规则影响。 */
      #tierTableWrap table {
        width: 100%;
      }

      #tierTableWrap .tier-tb-emp {
        min-width: 470px;
      }

      /* 汇总栏随表格一起横滑会滑出视野；补 left:0 让它和冻结列一样钉在左缘
         （position:sticky;top:0 由 core.js 内联样式给出） */
      #tierTableWrap .tier-summary-bar {
        left: 0;
      }

      #tierTableWrap th,
      #tierTableWrap td {
        white-space: nowrap;
        padding: 6px 5px !important;
      }

      #tierTableWrap th {
        white-space: normal;
        font-size: 13px;
        line-height: 1.3;
      }

      #tierTableWrap td {
        font-size: 14px;
      }

      /* 冻结首列：sticky 需要不透明底，否则右列数字从下面透出 */
      #tierTableWrap td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--card);
        border-right: 1px solid var(--line);
        white-space: normal;
        min-width: 50px;
        max-width: 62px;
        line-height: 1.25;
      }

      /* 首列表头同时吸顶+吸左，层级须高于其余 thead th（z-index:9） */
      #tierTableWrap thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 12;
        background: #f8fafc;
        border-right: 1px solid var(--line);
      }

      /* 数字框按各框最大字数+2字符精确定宽（ch=当前字号下"0"宽度），
         16px=水平padding(12px)+border(2px)，border-box已含padding/border */
      #tierTableWrap input[type=number] {
        max-width: 100%;
        font-size: 14px !important;
        padding: 5px 6px !important;
      }

      #tierTableWrap input[type=number].month-input { width: calc(4ch + 16px) !important; }
      #tierTableWrap .tier-tb-res input.tier-input { width: calc(7ch + 16px) !important; }
      #tierTableWrap .tier-tb-emp input.tier-input { width: calc(5ch + 16px) !important; }
      #tierTableWrap input[type=number].subsidy-input { width: calc(7ch + 16px) !important; }
      #tierTableWrap input[type=number].month-pay-in { width: calc(8ch + 16px) !important; }
      #tierTableWrap input[type=number].month-acct-in { width: calc(8ch + 16px) !important; }
      #tierTableWrap input[type=number].personal-in { width: calc(10ch + 16px) !important; }

      /* 横滑提示：仅在表格确实宽于容器时由 core.js 点亮 .on */
      .tier-scroll-hint {
        display: none;
        margin-top: 6px;
        text-align: center;
        font-size: 12px;
        color: var(--muted);
      }

      .tier-scroll-hint.on {
        display: block;
      }

      .stat .box .v {
        font-size: 20px;
      }

      /* 导出按钮纵向 */
      .export-row {
        flex-direction: column;
        gap: 8px;
      }

      .export-row button {
        width: 100%;
      }

      /* 顶部功能导航 */
      .topnav {
        padding: 8px 8px;
        gap: 6px;
      }

      .topnav button {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 6px;
        font-size: 15px;
        letter-spacing: 0;
      }
    }

    /* 超窄屏（≤375px）：档位表沿用上方"保留自然宽度 + 横向滚动 + 冻结年度列"策略，
       不再压成 table-layout:fixed（那会让 7 列挤成一团）。此处只收紧外围留白，
       并把单元格左右 padding 收到 3px，让居民 4 列表在 360/375px 屏上不必横滑。 */
    @media (max-width:375px) {
      #cardTierSettings { padding: 10px 6px !important; }
      #tierTableWrap th,
      #tierTableWrap td { padding: 6px 3px !important; }
    }

    /* 计算次数显示 */
    .calc-count-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #fef3c7;
      color: #d97706;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 600;
    }

    .calc-count-badge.free {
      background: #dcfce7;
      color: #16a34a;
    }

    /* 分享成功提示 */
    .share-success {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
      z-index: 10000;
      width: 280px;
      text-align: center;
    }

    .share-success .icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .share-success h4 {
      margin: 0 0 8px;
      font-size: 17px;
      color: #16a34a;
    }

    .share-success p {
      margin: 0;
      color: #6b7280;
      font-size: 14px;
    }

    .share-success button {
      margin-top: 16px;
      padding: 10px 26px;
      background: #16a34a;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      cursor: pointer;
    }

    /* ========== 底部弹出式下拉选择器（统一各设备交互） ========== */
    .select-picker {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      /* 概要9：宽度自适应内容（core.js spFit 会写入测量值；此处为 JS 前/兜底默认） */
      width: fit-content;
      min-width: 96px;
      max-width: 100%;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
      cursor: pointer;
    }

    .select-picker:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .select-picker::after {
      content: "";
      flex: 0 0 auto;
      margin-left: auto;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 7px solid #6b7686;
    }

    .select-picker .sp-text {
      flex: 0 1 auto;
      min-width: 0;
      font-size: 17px;
      color: var(--text);
      line-height: 1.45;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }

    .select-picker .sp-text.empty {
      color: #9ca3af;
    }

    .select-picker select {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      border: 0;
      padding: 0;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
    }

    .bs-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 12000;
      display: none;
      opacity: 0;
      transition: opacity .2s;
    }

    .bs-mask.in {
      opacity: 1;
    }

    .bs-sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 16px 16px 0 0;
      transform: translateY(100%);
      transition: transform .25s ease;
    }

    .bs-mask.in .bs-sheet {
      transform: translateY(0);
    }

    /* ========== 概要9：锚定式下拉弹层 ==========
       点开下拉后，选项列表就在选框正下方弹出，左右与选框对齐、宽度与选框完全一致
       （选框宽度由 core.js 的 spFit 按"当前项/最长选项"取大者测得，故列表不会比框宽）。
       几何（left/top/width/height）由 bsPosition 在显示之前写入，首帧即落在最终位置，
       只做 opacity + 轻微位移过渡，因此不闪烁、不卡顿、也不会跳到屏幕其他位置。 */
    .bs-mask.anchored {
      background: rgba(15, 23, 42, .22);
    }

    .bs-sheet.anchored {
      position: fixed;
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      max-width: calc(100vw - 16px);
      border: 1px solid var(--line);
      border-radius: 10px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
      overflow: hidden;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity .16s ease, transform .16s ease;
      will-change: opacity, transform;
    }

    .bs-mask.in .bs-sheet.anchored {
      opacity: 1;
      transform: none;
    }

    /* 选框下方空间不足时翻到上方，入场位移同样朝向选框 */
    .bs-sheet.anchored.flip-up {
      transform: translateY(4px);
    }

    .bs-mask:not(.in) .bs-sheet.anchored {
      pointer-events: none;
    }

    /* 锚定态就是"选框下方的一列选项"：字段名已在选框上方的 label 里，不再重复标题栏 */
    .bs-sheet.anchored .bs-head {
      display: none;
    }

    .bs-sheet.anchored .bs-list {
      max-height: 42vh;
      padding-bottom: 2px;
    }

    .bs-sheet.anchored .bs-opt {
      padding: 9px 12px;
      font-size: 15px;
    }

    /* 列表与选框同宽，勾选项不再额外占位（选中态已有主色高亮），避免最长项被挤出省略号 */
    .bs-sheet.anchored .bs-opt .tick {
      display: none;
    }

    .bs-sheet.anchored .bs-opt>span:first-child {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .bs-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 14px;
      border-bottom: 1px solid var(--line);
    }

    .bs-title {
      flex: 1;
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      text-align: center;
    }

    .bs-close {
      flex: 0 0 auto;
      border: none;
      background: #f3f4f6;
      color: #6b7280;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 15px;
      cursor: pointer;
      line-height: 1;
    }

    .bs-list {
      max-height: 56vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .bs-opt {
      padding: 15px 18px;
      font-size: 17px;
      color: var(--text);
      border-bottom: 1px solid #f1f4f8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
    }

    .bs-opt:active {
      background: #f0f6ff;
    }

    /* 空白选项（如出生年「不选」）：没有文字撑高，补最小高度保证仍可点选 */
    .bs-opt.bs-opt-empty {
      min-height: 40px;
    }

    .bs-opt.sel {
      color: var(--primary);
      font-weight: 700;
      background: #eff6ff;
    }

    .bs-opt .tick {
      font-weight: 700;
      color: var(--primary);
    }

    /* 批次 64·丁：城乡居民起始年早于今年时，「目前个人账户金额」锁为不可输入（余额这一档由逐年档位表承担）。
       灰底与站内禁用态观感一致；但占位字是系统按规则算出的截止年余额、是给用户读的一个数，
       所以取站内既有的 #475569 而不是禁用文本色 #94a3b8（后者压在 #f1f5f9 上只有约 2.3:1）。
       opacity:1 是给 Firefox 的——UA 默认把 placeholder 打到 .5，数字会糊。 */
    #currentAccount[disabled] {
      background: #f1f5f9;
      color: #94a3b8;
      cursor: not-allowed;
    }

    #currentAccount[disabled]::placeholder {
      color: #475569;
      opacity: 1;
    }

    /* 简易计算·目前个人账户：输入框较窄，占位提示"留空=自动估算"缩小字号保证完整显示 */
    #s2Account::placeholder {
      font-size: 11px;
      color: #94a3b8;
      opacity: 1;
    }

    /* 混档·过渡性养老金区：框宽只有 96–120px，占位提示（"空=平均指数""空≈全部年限"等）
       按区里 17px 的输入字号要 97–114px，全部被裁。数字框右侧步进按钮还占掉约 15px，
       96px 框实际只剩 ~68px 放文字；实测 10px 仍裁末字，9px 起 PC 与移动端 11 个框全部完整。 */
    .trans-panel input[placeholder]::placeholder {
      font-size: 9px;
    }

    .s2pb-err {
      font-size: 12px;
      color: #dc2626;
      margin-top: 4px;
    }

    .s2pb-link {
      font-size: 13px;
      color: #0066CC;
      cursor: pointer;
      text-decoration: underline;
      white-space: nowrap;
    }

    /* 待测算占位样式——所有模块通用 */
    .calc-pending {
      color: #9ca3af;
      font-size: 15px;
      padding: 20px;
      text-align: center;
      background: #f8fafc;
      border: 1px dashed #d1d5db;
      border-radius: 8px;
      max-width: 320px;
      margin: 0 auto;
    }

    /* 出生年选择框占位选项样式 */
    #birthYear {
      color: #9ca3af;
    }

    /* 混档测算结果区"待测算"字号：与回本测算中的 .calc-pending 一致（15px） */
    #resultStats .stat-pending {
      font-size: 15px;
    }

    #s2PbBaseTablePop {
      position: absolute;
      z-index: 1001;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
      font-size: 13px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity .15s ease, transform .15s ease;
      pointer-events: none;
    }

    #s2PbBaseTablePop.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    #s2PbBaseTablePop .pt-head {
      padding: 8px 12px;
      font-weight: 600;
      color: #1f2733;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
      white-space: nowrap;
    }

    #s2PbBaseTablePop .pt-list {
      max-height: 300px;
      overflow-y: auto;
    }

    #s2PbBaseTablePop .pt-row {
      display: grid;
      grid-template-columns: 3fr 2fr;
      padding: 7px 12px;
      cursor: pointer;
      border-bottom: 1px solid #f1f5f9;
      column-gap: 8px;
    }

    #s2PbBaseTablePop .pt-row:hover {
      background: #eff6ff;
    }

    #s2PbBaseTablePop .pt-row:last-child {
      border-bottom: none;
    }

    #s2PbBaseTablePop .pt-row .amt {
      color: #2563eb;
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
    }

    /* 省份层级折叠 */
    #s2PbBaseTablePop .pt-group-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      cursor: pointer;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
      font-weight: 600;
      color: #1f2733;
      user-select: none;
    }

    #s2PbBaseTablePop .pt-group-header:hover {
      background: #eff6ff;
    }

    #s2PbBaseTablePop .pt-group-header .amt {
      color: #2563eb;
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
      margin-left: auto;
    }

    #s2PbBaseTablePop .pt-group-icon {
      display: inline-block;
      width: 14px;
      text-align: center;
      font-size: 11px;
      color: #64748b;
      transition: transform .15s;
      flex-shrink: 0;
    }

    #s2PbBaseTablePop .pt-group-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    #s2PbBaseTablePop .pt-group-body .pt-row {
      padding-left: 30px;
    }

    /* 回本测算结果区 - 完整结果卡片 */
    .s2pb-result {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
    }

    .s2pb-result .s2pb-box {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      background: #fff;
    }

    .s2pb-result .s2pb-box .k {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 2px;
    }

    .s2pb-result .s2pb-box .v {
      font-size: 18px;
      font-weight: 700;
      color: #1f2733;
      line-height: 1.3;
    }

    .s2pb-result .s2pb-box .sub {
      font-size: 12px;
      color: #94a3b8;
      margin-top: 2px;
    }

    .s2pb-result .s2pb-box.hl {
      background: #eff6ff;
      border-color: #bfdbfe;
    }

    .s2pb-result .s2pb-box.hl .v {
      color: #1d4ed8;
    }

    .s2pb-result .s2pb-box.red .v {
      color: #b91c1c;
    }

    /* 手机端紧凑模式：输入框/选择框/卡片/按钮间距压缩 */
    @media (max-width:640px) {
      .field {
        margin-bottom: 7px;
      }

      .field label {
        font-size: 14px;
        margin-bottom: 3px;
      }

      .field .hint {
        font-size: 13px;
        margin-top: 2px;
      }

      select,
      input[type=number],
      input[type=text],
      input[type=password] {
        padding: 8px 10px;
        font-size: 16px;
      }

      .row {
        gap: 6px 8px;
      }

      .card {
        padding: 10px 10px;
        margin-bottom: 8px;
      }

      .card h2 {
        font-size: 17px;
        margin-bottom: 7px;
      }

      .seg button {
        padding: 9px 4px;
        font-size: 14px;
      }

      .quick button {
        padding: 8px 10px;
        font-size: 14px;
      }

      .quick-all {
        padding: 8px 10px;
        font-size: 14px;
      }

      .ns-trigger {
        min-height: 30px;
        padding: 5px 24px 5px 8px;
        font-size: 13px;
      }

      .field-static {
        padding: 10px 0;
        font-size: 15px;
      }

      .nice-sel .ns-opt {
        padding: 6px 8px;
        font-size: 13px;
      }

      .tbl-wrap {
        max-height: 50vh;
      }

      th,
      td {
        padding: 7px 4px;
        font-size: 14px;
      }

      .stat .box {
        padding: 7px 10px;
      }

      .stat .box .v {
        font-size: 20px;
      }

      .topnav {
        padding: 6px 6px;
        gap: 4px;
      }

      .topnav button {
        padding: 8px 5px;
        font-size: 14px;
      }

      .select-picker {
        padding: 9px 10px;
      }

      .select-picker .sp-text {
        font-size: 15px;
      }
    }

    /* 客服按钮 */
    .cs-btn {
      position: fixed;
      bottom: 20px;
      right: 16px;
      z-index: 1100;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      /* background: linear-gradient(135deg, #07c160, #06ad56); */
      color: #fff;
      border: none;
      /* box-shadow: 0 3px 12px rgba(7, 193, 96, .4); */
      background: linear-gradient(135deg, #1d4ed8, #3b82f6 60%, #60a5fa);
      box-shadow: 0 2px 10px rgba(29, 78, 216, .28);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: transform .15s;
    }

    .cs-btn:hover {
      transform: scale(1.08);
    }

    .cs-btn:active {
      transform: scale(.95);
    }

    @media (max-width:640px) {
      .cs-btn {
        width: 44px;
        height: 44px;
        bottom: 16px;
        right: 12px;
        font-size: 20px;
      }
    }

    /* 用户中心入口（个人中心 / 用户登录）
       宽屏（≥761px）：页头右上角胶囊，与页头 14px 内边距贴齐
       ≤760px：客服按钮正上方的悬浮胶囊，见下方媒体查询 */
    .uc-entry {
      position: absolute;
      top: 12px;
      right: 14px;
      z-index: 1150;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 32px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, .55);
      border-radius: 16px;
      background: rgba(255, 255, 255, .16);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      transition: background .15s;
    }

    .uc-entry:hover {
      background: rgba(255, 255, 255, .28);
    }

    /* 「直播专用版」入口（批次85）：跟在页头标题之后，元素只存在于 views/pc/index.html，
       手机模板里没有这个节点，所以放在公共表里也不会影响手机端；
       进入直播版后同一个节点由 live.js 改成「返回普通版」，不再另造返回控件 */
    header h1.hd-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .live-entry {
      display: inline-flex;
      align-items: center;
      height: 26px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, .6);
      border-radius: 13px;
      background: rgba(255, 255, 255, .16);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .3px;
      text-decoration: none;
      white-space: nowrap;
      transition: background .15s, color .15s;
    }

    .live-entry:hover {
      background: #fff;
      color: #1d4ed8;
    }

    .uc-entry .uc-ico {
      width: 17px;
      height: 17px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 未登录时更醒目（沿用原先"用户登录"用强调色的意图） */
    .uc-entry.uc-guest {
      background: #fff;
      border-color: #fff;
      color: #1d4ed8;
    }

    /* 会员态入口（配色1「白瓷·墨蓝＋香槟金」）：档位并进这枚胶囊，页头不再单独占一行。
       锚点 top/right 与基准宽高全部沿用 .uc-entry，只有会员态改成两行白底，胶囊从 32px 长到约 38px
       （往下长，右上角不动）。推广员不占额外位置：人形躯干换成带胸口的闭合形，胸口一个 T。 */
    .uc-entry.uc-member {
      height: auto;
      padding: 5px 13px;
      gap: 8px;
      border-color: #fff;
      background: #fff;
      color: #17325e;
      box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
    }

    .uc-entry.uc-member:hover {
      background: #f7f9fc;
    }

    .uc-entry.uc-member .uc-ico {
      width: 20px;
      height: 20px;
      stroke: #17325e;
    }

    /* .uc-stack 只在会员态由 usercenter.js 渲染，所以单行态的 DOM 与排布跟改动前完全一致 */
    .uc-entry.uc-member .uc-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      line-height: 1;
    }

    .uc-entry.uc-member .uc-txt {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .4px;
    }

    .uc-entry .uc-tier {
      font-size: 10.5px;
      font-weight: 700;
      font-style: italic;
      letter-spacing: .9px;
      line-height: 1.25;
      color: #b08542;
    }

    .uc-entry .uc-ico .uc-t {
      fill: #b08542;
      stroke: none;
      font-style: italic;
      font-weight: 700;
    }

    /* ≤760px：改为悬浮圆钮，落在客服按钮正上方，与客服按钮同径（50px／≤640 段 44px）。
       641~760 段客服按钮是 50px/bottom:20，≤640 段是 44px/bottom:16，所以底距分两档，都留 10px 间隙。
       不用"继续挤在页头里"收这个区间：实测 660px 下居中标题的字形右端已到 391px，胶囊左边缘只能到 374px，必碰。 */
    @media (max-width:760px) {
      .uc-entry {
        position: fixed;
        top: auto;
        right: 16px;
        bottom: 80px;
        z-index: 1100;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, #1d4ed8, #3b82f6 60%, #60a5fa);
        box-shadow: 0 2px 10px rgba(29, 78, 216, .28);
        color: #fff;
        font-size: 14px;
      }

      /* 圆钮只放两字文案，人形图标收起（同径圆里再塞图标会把字挤到边上） */
      .uc-entry .uc-ico {
        display: none;
      }

      /* 窄屏悬浮在白色页面内容上，不能用页头那套白底胶囊（白底压白页等于看不见），
         所以游客态这里仍走渐变底；必须显式重述，因为 .uc-entry.uc-guest 的特指度高于上面的 .uc-entry */
      .uc-entry.uc-guest {
        background: linear-gradient(135deg, #1d4ed8, #3b82f6 60%, #60a5fa);
        color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
      }

      /* 已登录「我的」：白底＋描边＋圆角方块。白底在页面内容上不看不见，是因为描边＋投影把钮从页面里拎出来，
         且它只与下方那枚蓝圆客服钮成对比（一白一蓝、一方圆一正圆），不会误认成客服 */
      .uc-entry:not(.uc-guest) {
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        background: #fff;
        color: #1d4ed8;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
      }

      /* 会员态：方块外观尺寸一字不动（50×50，≤640 段 44×44），内部改成三行——人形图标（推广员时胸口带 T）、
         「我的」、档位。图标在单行态被上面那条 display:none 收掉，这里按会员态重新放出来，
         否则推广员身份在手机上没处显示（.uc-entry.uc-member .uc-ico 特指度更高，能盖住那条）。
         height 也必须重述：宽屏那条 .uc-entry.uc-member 写的是 height:auto，特指度高于本媒体查询里的 .uc-entry */
      .uc-entry.uc-member {
        height: 50px;
        padding: 0;
        gap: 1px;
        flex-direction: column;
        color: #17325e;
      }

      .uc-entry.uc-member .uc-ico {
        display: block;
        width: 14px;
        height: 14px;
      }

      .uc-entry.uc-member .uc-txt {
        font-size: 11.5px;
        letter-spacing: .2px;
      }

      .uc-entry.uc-member .uc-tier {
        font-size: 8.5px;
        letter-spacing: .3px;
      }
    }

    @media (max-width:640px) {
      .uc-entry {
        right: 12px;
        bottom: 70px;
        width: 44px;
        height: 44px;
        font-size: 13px;
      }

      .uc-entry.uc-member {
        height: 44px;
      }

      .uc-entry.uc-member .uc-ico {
        width: 12px;
        height: 12px;
      }

      .uc-entry.uc-member .uc-txt {
        font-size: 10.5px;
      }

      .uc-entry.uc-member .uc-tier {
        font-size: 7.5px;
      }
    }

    .cs-modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      z-index: 12000;
      justify-content: center;
      align-items: center;
    }

    .cs-modal-overlay.active {
      display: flex;
    }

    .cs-modal {
      background: #fff;
      border-radius: 16px;
      padding: 24px 20px;
      width: 300px;
      max-width: 85vw;
      text-align: center;
      position: relative;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    }

    .cs-modal h3 {
      margin: 0 0 6px;
      font-size: 18px;
      color: #1f2937;
    }

    .cs-modal .cs-subtitle {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 16px;
      cursor: pointer;
    }

    .cs-modal .cs-wechat-id {
      color: #1f2937;
      font-weight: 600;
    }

    .cs-modal .cs-qr {
      width: 180px;
      height: 180px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      margin: 0 auto 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f9fafb;
    }

    .cs-modal .cs-qr img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }

    .cs-modal .cs-tips {
      font-size: 13px;
      color: #9ca3af;
      line-height: 1.6;
    }

    .cs-modal .cs-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      border: none;
      background: #f3f4f6;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      color: #6b7280;
      line-height: 1;
    }

    .cs-modal .cs-close:hover {
      background: #e5e7eb;
    }

    /* 自定义数字下拉（缴费年月/退休年龄）：点击任意项（含当前项）均即时触发 change */
    .nice-sel {
      position: relative;
      /* 概要9：不再 flex:1 撑满整行，宽度随当前选项文本收缩（trigger 已 nowrap） */
      flex: 0 1 auto;
      width: fit-content;
      max-width: 100%;
      min-width: 88px;
    }

    .nice-sel.ns-month {
      flex: 0 0 auto;
      min-width: 74px;
    }

    /* 混档测算「退休年龄」下拉：选项为"55 岁（170 个月）"，按内容定宽避免截断 */
    .field-retireage .nice-sel {
      flex: 0 0 auto;
      min-width: 98px;
      width: fit-content;
    }

    /* 批次106：混档「缴费年月」的起止两组按语义断行——起缴年月起一行，
       「至 ＋ 止缴年月」另起一行，第二行左边界＝字段左边界（与「缴费年月」的「缴」字齐）。
       以前是让 418px 的控件行撞在 342px 的列上，断点落在「12 月」前，看着像溢出。
       城乡居民按年缴费（core.js 给 .pay-lines 打 is-year-only）时只剩两个年份（234px），
       一行放得下，故合回一行，别白占高度。 */
    .pay-lines {
      flex-direction: column;
      align-items: flex-start;
    }

    .pay-lines.is-year-only {
      flex-direction: row;
      align-items: center;
    }

    .ns-trigger {
      width: 100%;
      box-sizing: border-box;
      min-height: 34px;
      padding: 6px 26px 6px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 14px;
      background: #fff;
      color: #1f2733;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      white-space: nowrap;
      box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
    }

    .ns-trigger:hover {
      border-color: #bfdbfe;
    }

    .ns-trigger .ns-arr {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #64748b;
      flex-shrink: 0;
      transition: transform .15s;
    }

    .nice-sel.open .ns-trigger {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    }

    .nice-sel.open .ns-trigger .ns-arr {
      transform: rotate(180deg);
    }

    .ns-panel {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      /* 概要9：面板与触发框左右对齐、同宽（.nice-sel 宽度由 initNiceSelect 按最长选项测得），
         不再用 max-content 反向撑宽，展开时列表长度与选框完全一致 */
      width: auto;
      z-index: 999;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
      max-height: 250px;
      overflow: auto;
      padding: 4px;
    }

    .nice-sel.open .ns-panel {
      display: block;
      animation: nsPop .14s ease-out;
    }

    @keyframes nsPop {
      from { opacity: .35; transform: translateY(-3px); }
      to { opacity: 1; transform: none; }
    }

    .ns-opt {
      padding: 7px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      color: #1f2733;
      white-space: nowrap;
    }

    .ns-opt:hover {
      background: #eff6ff;
    }

    .ns-opt.active {
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 600;
    }

    /* 下滑提示光标：白底圆形 + SVG 粗箭头，高对比、缓慢上下浮动 */
    .scroll-hint {
      position: fixed;
      bottom: 130px;
      right: 20px;
      z-index: 1100;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      animation: floatScroll 1.6s ease-in-out infinite;
    }
    .scroll-hint .arrow {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(24, 90, 224, .35), 0 0 0 2px rgba(24, 90, 224, .18);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .scroll-hint .arrow svg {
      width: 26px;
      height: 26px;
      display: block;
      fill: none;
      stroke: var(--primary);
      stroke-width: 3.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .scroll-hint .text {
      font-size: 12px;
      color: var(--primary);
      font-weight: 700;
      background: rgba(255, 255, 255, .92);
      padding: 2px 10px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
      line-height: 1.4;
    }
    /* 缓慢上下浮动，方向感明确、不刺眼 */
    @keyframes floatScroll {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(10px); }
    }
    /* 641~760 段下方多了悬浮入口（入口占 80~124px 这条带，浮动最低到静态位再往下 10px），
       所以引导箭头整体上移，保证与入口留 10px 间隙；PC（≥761）不动，入口在页头不在悬浮层 */
    @media (max-width:760px) {
      .scroll-hint {
        bottom: 144px;
      }
    }

    @media (max-width:640px) {
      .scroll-hint {
        bottom: 134px;
        right: 14px;
      }
      .scroll-hint .arrow {
        width: 42px;
        height: 42px;
      }
      .scroll-hint .arrow svg {
        width: 24px;
        height: 24px;
      }
    }

    /* 未测算时点击「企业职工/灵活就业」的上滑引导提示 */
    .s2-scroll-tip {
      position: fixed;
      left: 50%;
      top: 36vh;
      transform: translateX(-50%);
      z-index: 13000;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      background: rgba(15,23,42,.93);
      color: #fff;
      border-radius: 14px;
      box-shadow: 0 12px 32px rgba(15,23,42,.38);
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      max-width: 86vw;
      user-select: none;
    }
    .s2-scroll-tip .tip-text {
      white-space: normal;
      line-height: 1.55;
    }
    .s2-scroll-tip .tip-arrow {
      font-size: 30px;
      line-height: 1;
      color: #fbbf24;
      animation: s2ArrowUp 1s ease-in-out infinite;
    }
    @keyframes s2TipPop {
      from { opacity: 0; transform: translateX(-50%) scale(.82); }
      to { opacity: 1; transform: translateX(-50%) scale(1); }
    }
    .s2-scroll-tip {
      animation: s2TipPop .22s ease-out;
    }
    @keyframes s2ArrowUp {
      0%, 100% { transform: translateY(0); opacity: .7; }
      50% { transform: translateY(-10px); opacity: 1; }
    }
    /* 桌面端锚定模式：位置由 JS 按「点击测算」键几何计算（箭头底部与该键底部对齐，位于按钮与回本测算之间） */
    .s2-scroll-tip.tip-anchored {
      left: 0;
      top: 0;
      transform: none;
      animation: s2TipPopAnchor .22s ease-out;
    }
    @keyframes s2TipPopAnchor {
      from { opacity: 0; transform: scale(.82); }
      to { opacity: 1; transform: scale(1); }
    }

    /* ========== 概要9 延伸：宽屏（≥701px）下的控件排布与下拉弹层尺寸 ========== */
    @media (min-width:701px) {

      /* 1fr 双列在 1180px 卡片下每格可达 560px，而控件只有 98~132px（或按内容实测宽），
         控件被孤零零甩在格子左侧、右侧大片空白，视觉上就是"框太长、行太长"。
         改为按内容成列、靠左成排：每列不小于 216px，能容纳标签，一行自动排 3~5 个字段。 */
      .row {
        grid-template-columns: repeat(auto-fit, minmax(216px, max-content));
        justify-content: start;
        column-gap: 34px;
      }

      /* 批次 99：① 基础参数卡要成"栅格"，不能每行各定各的列宽。
         上面那条 max-content 是逐行取的，哪一行标签长那一行的首列就宽，
         于是右列起点在 263／309／388 之间跳（同卡内容宽 718 实测）。
         这张卡改成首列取全卡最长标签（「地区（历年社平数据）【说明】各地社平及缴费表」实测 341px）为上限、
         次列吃掉余下宽度，两列边界在所有行一致；控件本身仍按内容定宽，不会被拉成长框。
         只作用在这一张卡：其余版块的 .row 维持按内容成列。 */
      #s2BasicParamsCard>.row {
        grid-template-columns: minmax(216px, 341px) minmax(216px, 1fr);
      }

      /* 批次 105 / 107：混档测算 ① 基础参数卡里所有「双字段行」共用同一条首列边界。
         起因同上：逐行 max-content 会让每行首列各取各的内容宽，右列起点跟着跳；
         企业职工（性别/岗位）、灵活就业（地区/缴费年月、出生年/退休年龄）、
         居民（基础养老金标准/年涨幅、未来增长/出生时间、利率/补贴比例）各是一次切换，
         逐条写 :has(#id) 既漏又难维护，故按行结构统一命中：恰好两个字段的行。
           首列 = min(324px, (行宽-34)/2)
         324 是「地区（社平数据）」下拉的实测宽度（同卡最宽的首字段，其余行都短于它）；
         行宽不够时 auto-fit 会把两列均分，故用 (100%-34)/2 跟上。
         三字段行（四川居民的加权系数/年限/增发比例）与单字段行维持 auto-fit。
         浏览器不认 :has() 时整条规则作废，退回现状。
         加 body:not(.sbc-live) 排除直播专用版：实测直播下这两行原本是单列 403px，
         本规则的特异度会盖过 live.css 的排布，把板子挤成 216+216，故直播版维持原状。 */
      body:not(.sbc-live) #panelPension .card > .row:has(> .field:nth-child(2):last-child) {
        grid-template-columns: minmax(216px, min(324px, calc((100% - 34px) / 2))) minmax(216px, 1fr);
      }
    }

    /* ========== 公共确认浮层（core.js 的 sbcConfirm，替代原生 confirm） ========== */
    /* 样式照站内既有的确认框族（usercenter.css 的 .sbuc-auth-confirm）：白卡 + hairline 分隔 +
       两个等宽文字按钮。层级要压过 #payModal(9999) 和全部 .sbuc-overlay(10010~10013)。 */
    .sbcf-mask {
      position: fixed;
      inset: 0;
      z-index: 10014;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15, 23, 42, .5);
    }
    .sbcf-box {
      width: 340px;
      max-width: 100%;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 16px 50px rgba(0, 0, 0, .3);
    }
    .sbcf-msg {
      padding: 22px 20px;
      font-size: 15px;
      line-height: 1.65;
      color: #1f2733;
      text-align: center;
      word-break: break-word;
    }
    .sbcf-foot {
      display: flex;
      border-top: 1px solid var(--line);
    }
    .sbcf-btn {
      flex: 1;
      min-height: 44px;
      border: 0;
      background: transparent;
      padding: 13px 0;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background .15s;
    }
    .sbcf-cancel {
      color: var(--muted);
      border-right: 1px solid var(--line);
    }
    .sbcf-cancel:hover {
      background: #f9fafb;
    }
    .sbcf-ok {
      color: var(--primary);
    }
    .sbcf-ok:hover {
      background: #eff6ff;
    }
    @media (max-width:640px) {
      .sbcf-mask {
        padding: 16px;
      }
    }
    /* ========== R-20：浮层内滚动区不向背景传递滚动 ==========
       背景拦截主责在 core.js 的 sbcBgSync()（遮罩层直接吃掉滚轮/触摸），这条是 JS 之外的
       第二重保险：浮层内的滚动区滚到边界不再"溢出"带动整页。写法沿用 common.css:1371
       下拉列表 .bs-list 已有的 overscroll-behavior:contain。
       覆盖的是两族浮层里真实存在的滚动区：sbuc（用户中心/侧栏/方案明细）与 sbm（关于我们/反馈/协议）。 */
    .sbuc-side,
    .sbuc-content,
    .sbuc-plan-body,
    .sbm-body,
    .sbm-about-body,
    .sbm-doc-body {
      overscroll-behavior: contain;
    }

    /* ============================================================
       R-24：触摸设备的点击目标 ≥44×44px（WCAG 2.5.5 / iOS HIG 基线）
       只在「粗指针 或 窄视口」下生效，PC 上的尺寸一律不变。
       两条条件并列的理由：本项目所有移动端断点都按宽度走（mobile.css 700px、
       usercenter.css 680px、common.css 640px），但横屏手机的宽度可以超过这些断点
       却仍然是手指操作，所以补一条 (pointer:coarse) 兜住宽屏触摸设备。
       ============================================================ */
    @media (pointer: coarse), (max-width: 700px) {
      /* 下拉触发器：实测 36.4px（min-height:34 + 上下边框）。
         注意 common.css:1795 那条 "(max-width:640px) 里 min-height:30px" 的窄屏覆盖从未生效——
         它被 1989 行后置的同权重顶层规则整条顶掉，实测两个宽度上 min-height 都是 34px。 */
      .ns-trigger { min-height: 44px; }
      /* 下拉选项行：纯文本 div，只加 min-height 会把文字顶在上沿，故 flex 居中 */
      .ns-opt { min-height: 44px; display: flex; align-items: center; }
      /* 底部选择面板的关闭钮：32×32 → 44×44（仍是圆钮，✕ 字号同步放一档） */
      .bs-close { width: 44px; height: 44px; font-size: 17px; }
      /* 历史方案表里的「明细 / 删除」：尺寸写在 core.js:7304-7305 的行内 style 里
         （padding:3px 8px → 实测 27px 高），但行内没有 min-height 与 display，
         所以这里不用 !important 也盖得住。 */
      .rep-detail,
      .rep-del { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
      /* 快速入口与移动端顶栏按钮：桌面实测 46px 本已够，窄屏既有规则把 padding 收到
         8px → 实测 42~44px，这条兜住下限（抬高的是窄屏，PC 数字一字未动）。 */
      .quick button,
      .quick-all,
      .topnav button { min-height: 44px; }
    }

    /* R-25：浮层打开时焦点落在浮层本体上（core.js 的 sbcDialogOpen 给容器补 tabindex="-1"），
       这样第一次 Tab 才走到大面板里的第一个控件，也不会让「退出登录」这类按钮成为回车即触发的
       默认目标。容器不是控件，不画它自己的轮廓（实测开面板后容器 computed outline-style 为 none）；
       控件的焦点态另有表达——:181 的 select:focus, input:focus 用 border-color + box-shadow，
       与本条互不影响。按钮的浏览器默认焦点环由 :focus-visible 决定，本条选择器要求
       tabindex="-1" 且 role="dialog"，只命中浮层容器本身，不会把控件的环一起抹掉。 */
    [role="dialog"][tabindex="-1"]:focus { outline: none; }

    /* ============ 站内公告栏（单条轮流 + 渐显渐隐） ============ */
    .ann-bar { background: none; border: none; position: relative; }
    .ann-bar .ann-viewport { position: relative; overflow: hidden; height: 34px; cursor: pointer; }
    .ann-bar .ann-item { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 26px 0 16px; box-sizing: border-box; font-size: 13px; color: #78350f; white-space: nowrap; text-decoration: none; opacity: 0; transition: opacity .6s ease; }
    .ann-bar .ann-item.on { opacity: 1; }
    .ann-bar .ann-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 18px; color: #fff; flex: none; }
    .ann-bar .ann-badge.ann-agent    { background: #f97316; }
    .ann-bar .ann-badge.ann-upgrade  { background: #2563eb; }
    .ann-bar .ann-badge.ann-activity { background: #16a34a; }
    .ann-bar .ann-badge.ann-general  { background: #dc2626; }
    .ann-bar .ann-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .ann-bar .ann-caret { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 12px; pointer-events: none; }
    .ann-bar .ann-detail { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid #e5e7eb; border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
    .ann-bar.expanded .ann-detail { display: block; }
    .ann-bar .ann-d-item { display: block; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: #374151; }
    .ann-bar .ann-d-item:last-child { border-bottom: none; }
    .ann-bar .ann-d-item .ann-badge { margin-bottom: 4px; }
    .ann-bar .ann-d-title { font-weight: 600; color: #1f2937; font-size: 13px; margin-bottom: 2px; }
    .ann-bar .ann-d-content { font-size: 12px; color: #6b7280; line-height: 1.6; white-space: normal; word-break: break-all; }

    @media (max-width: 768px) {
      .ann-bar .ann-item { font-size: 12px; }
      .ann-bar .ann-viewport { height: 32px; }
    }