/* ==========================================================================
   每日行情详情页 · 专属版式
   --------------------------------------------------------------------------
   只被 report.html 引入，且排在 style.css 之后。
   共用的设计系统（token、按钮、输入框、页头页脚、Toast）都在 style.css 里，
   这里只放这一页独有的东西：

     · 居中大标题 —— 行情站的读法：一期行情就是一份公告，标题居中、表格说话
     · 筛选下拉内嵌在表头第二行（截图里的「请筛选」），而不是浮在上方
     · 备注「货少」角标、钢号（代理/商家）着色
     · 打印：style.css 默认把标题和备注一起藏了，报价单恰恰要这两块

   ⚠️ 筛选控件的 id（fMaterial / fSpec / fGrade / fKeyword）与
   filterBar / filterSummary / clearFilters 全部原样保留，
   report.js 的筛选逻辑不需要任何改动。
   （2026-10-21 去掉 fMill：日报不再有「钢厂/产地」列）
   ========================================================================== */

/* ============================ 页面骨架 ============================ */
.rp-main {
  padding: 18px 0 46px;
}

.rp-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 14px;
  font-size: 12px;
  color: var(--t4);
}
.rp-crumb a {
  color: var(--t4);
}
.rp-crumb a:hover {
  color: var(--brand);
}
.rp-crumb__cur {
  color: var(--t2);
}

.rp-panel {
  padding: 28px 26px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ============================ 标题区（居中） ============================ */
.rp-head {
  margin: 0 0 16px;
  text-align: center;
}
.rp-title {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--t1);
}
.rp-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  font-size: 12.5px;
  color: var(--t4);
}
.rp-sub__sep {
  color: var(--line-3);
}

/* ============================ 摘要 ============================ */
.rp-summary {
  margin: 0 0 18px;
  padding: 12px 15px;
  background: var(--bg-deep);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--t3);
}

/* ============================ 工具条 ============================ */
.rp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.rp-toolbar__left,
.rp-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rp-nav__btn {
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 12px;
  color: var(--t3);
  text-decoration: none;
}
.rp-nav__btn:hover {
  border-color: var(--brand-line);
  color: var(--brand);
}
.rp-nav__btn.is-off {
  border-color: var(--line);
  color: var(--t6);
}

/* ============================ 当前筛选条 ============================ */
.rp-fbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rp-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rp-active__none {
  font-size: 12px;
  color: var(--t6);
}
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 2px;
  font-size: 12px;
  color: var(--brand);
  cursor: pointer;
}
.rp-chip:hover {
  background: #ffe9d8;
}
.rp-chip__x {
  font-size: 10px;
  opacity: 0.75;
}
.rp-fbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rp-kw input {
  width: 218px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 12.5px;
  outline: 0;
}
.rp-kw input:focus {
  border-color: var(--brand);
}
/* .btn 自带 display:inline-flex，会盖掉浏览器默认的 [hidden]{display:none}，
   没有筛选条件时「清空筛选」必须真的消失，这里显式重申 */
.rp-fbar .btn[hidden] {
  display: none;
}

/* ============================ 数据表 ============================ */
.rp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.rp-table {
  width: 100%;
  /* 5 列：品名 / 规格 / 材质 / 价格 / 涨跌，与 mysteel 指数表一一对应
     （8 列时 900px，7 列时 820px，2026-10-21 去掉产地/备注/钢号后收窄） */
  min-width: 640px;
  border-collapse: collapse;
  font-size: 12.5px;
}

/* 表头第一行：列名 */
.rp-th {
  padding: 10px 13px;
  background: var(--card-head);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--t2);
  text-align: left;
  white-space: nowrap;
}
.rp-th:last-child {
  border-right: 0;
}
.rp-th--num {
  text-align: right;
}

/* 表头第二行：内嵌筛选下拉 */
.rp-thf-row {
  background: var(--paper-soft, #f7f8fa);
}
.rp-thf {
  padding: 6px 9px;
  background: #f7f8fa;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  font-weight: 400;
}
.rp-thf:last-child {
  border-right: 0;
}
/* 无边框 + 灰字，静态看上去就是「请筛选」三个字，鼠标上去才显出是个控件 */
.rp-mini {
  width: 100%;
  min-width: 74px;
  height: 26px;
  padding: 0 19px 0 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--t4);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%238B929C' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.rp-mini:hover {
  border-color: var(--line-2);
  background-color: var(--card);
  color: var(--t2);
}
.rp-mini:focus {
  border-color: var(--brand-line);
  background-color: var(--card);
  outline: 0;
}

/* 数据行 */
.rp-td {
  padding: 9px 13px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--t3);
  vertical-align: middle;
}
.rp-td:last-child {
  border-right: 0;
}
.rp-table tbody tr:nth-child(even) .rp-td {
  background: #fafbfc;
}
.rp-table tbody tr:hover .rp-td {
  background: #f2f6fa;
}
.rp-table tbody tr:last-child .rp-td {
  border-bottom: 0;
}
.rp-td--mat {
  font-weight: 600;
  color: var(--t1);
}
.rp-td--num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.rp-td--price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t1);
}
.rp-chg.is-up {
  color: var(--up);
}
.rp-chg.is-down {
  color: var(--down);
}
.rp-chg.is-flat {
  color: var(--t6);
}

.rp-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t5);
}

/* 翻页条：一页 10 行，一是别让 32 行把备注条款顶出屏幕，二是和首页、后台同节奏。
   hidden 必须显式 display:none —— 自带 display:flex 会盖掉 [hidden] 的默认样式。 */
.rp-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 0 2px;
}
.rp-pager[hidden] {
  display: none;
}
.rp-pager__info {
  font-size: 12px;
  color: var(--t5);
}

/* ============================ 备注条款 ============================ */
.rp-notes {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rp-notes h3 {
  margin: 0 0 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t1);
}
.rp-notes__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rp-note-line {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--t3);
}

/* ============================ 异常态 ============================ */
.rp-missing {
  padding: 46px 26px;
  text-align: center;
}
.rp-missing h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
}
.rp-missing p {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--t4);
}

/* ============================ 响应式 ============================ */
@media (max-width: 820px) {
  .rp-panel {
    padding: 20px 16px 18px;
  }
  .rp-title {
    font-size: 19px;
  }
  .rp-fbar {
    align-items: flex-start;
  }
  .rp-kw input {
    width: 100%;
  }
  .rp-fbar__right {
    width: 100%;
  }
}

/* ============================ 打印 ============================ */
@media print {
  /* style.css 的打印规则把标题、备注一起藏了 —— 报价单恰恰需要这两块 */
  .rp-head,
  .rp-notes {
    display: block !important;
  }
  .rp-thf-row {
    display: none !important;
  }
  .rp-head {
    text-align: center;
    margin-bottom: 6px;
  }
  .rp-title {
    font-size: 13pt;
    margin-bottom: 3px;
  }
  .rp-sub {
    font-size: 8.5pt;
  }
  /* 一张 A4 横排要装下 16 行数据 + 表头 + 备注，逐项各挤一点才够 */
  .rp-th {
    padding: 4px 7px;
  }
  .rp-td {
    padding: 3px 7px;
  }
  .rp-notes {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #666;
    page-break-inside: avoid;
  }
  .rp-notes h3 {
    font-size: 10.5pt;
    color: #000 !important;
  }
  .rp-note-line {
    font-size: 9pt;
    line-height: 1.6;
    color: #000 !important;
  }
  .rp-table tbody tr:nth-child(even) .rp-td {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   顶栏 / 导航 / 页脚：与首页逐像素同构
   --------------------------------------------------------------------------
   这三个组件在首页由 home.css 提供，类名就是 .topbar / .nav / .foot。
   style.css 没有占用这些类名（它自带的是 .site-header / .main-nav /
   .site-footer），所以在这里就地补齐不会打架。
   变量名换成 style.css 体系（--card / --line / --t1 …），取值一一对应。
   ========================================================================== */

/* --- 顶部条 --- */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: var(--brand);
  display: grid;
  place-items: center;
  flex: none;
}
.brand__col {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.brand__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--t1);
}
.brand__sub {
  font-family: var(--font-num);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  color: var(--t4);
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t4);
}
.topbar__phone {
  font-family: var(--font-num);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: 0.3px;
}
.topbar__sep {
  width: 1px;
  height: 18px;
  background: var(--line-2);
}

/* --- 导航 --- */
.nav {
  background: var(--card);
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  z-index: 30;
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
}
.nav__a {
  position: relative;
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  font-size: 13.5px;
  color: var(--t3);
  transition: color 0.12s;
}
.nav__a:hover {
  color: var(--t1);
}
.nav__a.is-on {
  color: var(--t1);
  font-weight: 600;
}
.nav__a.is-on::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
}
.nav__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 29px;
  padding: 0 14px;
  border-radius: 3px;
  background: var(--brand);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.12s;
}
.nav__cta:hover {
  background: #d05206;
}

/* --- 页脚 --- */
.foot {
  background: #1d2126;
  color: #9ba2ab;
  padding: 26px 0 22px;
  font-size: 12px;
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.foot__links a:hover {
  color: #e4e7ea;
}
.foot__note {
  color: #6e767f;
}
/* 备案号：法规要求可点击跳工信部查询页；用页脚正文色 #9ba2ab（对 #1d2126 是 6.25:1，过 WCAG AA），
   注释色 #6e767f 只有 3.55:1，读它属于法定必须可辨的信息不合适 */
.foot__icp {
  color: #9ba2ab;
  white-space: nowrap;
}
.foot__icp:hover {
  color: #e4e7ea;
}

@media (max-width: 640px) {
  .topbar__item {
    display: none;
  }
  .nav__a {
    padding: 0 11px;
    font-size: 12.5px;
  }
}

/* ==========================================================================
   H5 适配（手机竖屏）
   --------------------------------------------------------------------------
   2026-10-19 用 CDP 真机视口（390×844 / DPR3）实测后补。
   最严重的问题：.rp-table 是 min-width:820px 的 7 列表，390px 下只能看到
   「品名 / 规格 / 材质」三列 —— 价格、涨跌、备注全在屏幕外，必须横向滑动
   才看得到，等于报价单在手机上不可用。
   改法：≤640px 整体卡片化 —— 一行报价 = 一张卡，品名+规格+价格在第一眼，
   材质+产地在第二行，备注/钢号有内容才占第三行。
   ⚠️ 必须限定 screen：打印走原来的表格布局（A4 横向），不能被卡片化污染。
   ========================================================================== */
@media screen and (max-width: 640px) {
  /* --- 导航与顶部条：换行改横滚，补掉漏隐藏的分隔线 --- */
  .topbar__sep {
    display: none;
  }
  .topbar__in {
    height: 52px;
  }
  .nav__in {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav__in::-webkit-scrollbar {
    display: none;
  }
  .nav__in::after {
    content: "";
    flex: 0 0 20px;
  }
  /* 390px 下 4 个导航项 + CTA 刚好超 8px，会把「立即询价」右边缘咬掉一点；
     收紧一档内边距，让 390 能完整显示，≤370 才需要横滑 */
  .nav__a {
    flex: none;
    white-space: nowrap;
    padding: 0 9px;
    font-size: 13px;
  }
  .nav__a.is-on::after {
    left: 9px;
    right: 9px;
  }
  .nav__cta {
    flex: none;
    margin-left: 6px;
    height: 34px;
    padding: 0 10px;
    font-size: 12.5px;
  }

  /* --- 面包屑：只留「‹ 行情日报」，回列表的入口还在，不用占一整行 --- */
  .rp-crumb {
    padding-bottom: 8px;
    font-size: 11.5px;
    gap: 0;
  }
  .rp-crumb > a:first-child,
  .rp-crumb > span:nth-child(2),
  .rp-crumb > span:nth-child(4),
  .rp-crumb__cur {
    display: none;
  }
  .rp-crumb > a:nth-child(3) {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
  }
  .rp-crumb > a:nth-child(3)::before {
    content: "‹";
    margin-right: 3px;
    font-size: 14px;
    line-height: 1;
  }

  /* --- 报价单头部：标题 25px 在手机上要占三行，压到 17px --- */
  .rp-panel {
    padding: 14px 12px 12px;
    border-radius: 4px;
  }
  .rp-head {
    margin-bottom: 10px;
  }
  .rp-head h1 {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.4;
    text-wrap: balance;
  }
  .rp-sub {
    font-size: 11.5px;
    gap: 4px 8px;
  }
  .rp-summary {
    margin-bottom: 10px;
    padding: 9px 11px;
    font-size: 11.5px;
    line-height: 1.65;
  }

  /* --- 工具条：三个按钮并排一行、上/下一期一行。
         原来每个按钮都撑满一行，还没看到价格就先滚掉半屏。 --- */
  .rp-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .rp-toolbar__left {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .rp-toolbar__right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .rp-toolbar__left .btn {
    min-height: 36px;
    padding: 0 4px;
    font-size: 12px;
    white-space: nowrap;
  }
  .rp-toolbar__left .btn svg {
    width: 12px;
    height: 12px;
  }
  .rp-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 6px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  /* 「已是最近一期 / 没有更早的了」点不动，手机上不该做成按钮的样子，
     否则和旁边能点的「上一期」抢注意力 */
  .rp-nav__btn.is-off {
    border-color: transparent;
    background: transparent;
    color: var(--t6);
  }

  /* --- 筛选区：搜索框与「清空」并排，条数单独占一行小字 --- */
  .rp-fbar {
    display: block;
    margin-bottom: 10px;
  }
  /* 「未设置筛选条件，下方为当日全部报价」在手机上纯占位，隐藏；
     真选了条件时这里渲染的是 .rp-chip，仍照常显示 */
  .rp-active__none {
    display: none;
  }
  .rp-active:has(.rp-chip) {
    margin-bottom: 8px;
  }
  .rp-fbar__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kw   clear"
      "note note";
    align-items: center;
    gap: 6px 8px;
    width: 100%;
  }
  .rp-kw {
    grid-area: kw;
    display: block;
  }
  /* 搜索框 16px：iOS 对 <16px 的输入框会在聚焦时自动放大整页 */
  .rp-kw input {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    font-size: 16px;
  }
  .rp-fbar__right .tools-note {
    grid-area: note;
    font-size: 11.5px;
    color: var(--t5);
  }
  .rp-fbar .btn {
    grid-area: clear;
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }

  /* --- 表格卡片化 --- */
  .rp-table-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .rp-table {
    display: block;
    min-width: 0;
    width: 100%;
    font-size: 13px;
  }
  .rp-table thead {
    display: block;
    margin-bottom: 8px;
  }
  /* 第一行是列名，卡片自带语义，隐藏 */
  .rp-table thead tr:first-child {
    display: none;
  }
  /* 第二行是内嵌在表头里的 4 个筛选下拉，改成 2×2 网格 */
  .rp-table thead tr.rp-thf-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 0;
    background: none;
  }
  .rp-table thead tr.rp-thf-row th {
    display: block;
    padding: 0;
    border: 0;
    background: none;
  }
  .rp-table thead tr.rp-thf-row th:nth-child(n + 4) {
    display: none;
  }
  /* 卡片化后表头第一行（列名）被隐藏，下拉里只剩「全部」，用户不知道筛的是哪一列。
     这里补回列名 —— select 本身有 aria-label 服务读屏，::before 只负责视觉。 */
  .rp-table thead tr.rp-thf-row th::before {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    color: var(--t5);
  }
  .rp-table thead tr.rp-thf-row th:nth-child(1)::before {
    content: "品名";
  }
  .rp-table thead tr.rp-thf-row th:nth-child(2)::before {
    content: "规格 (mm)";
  }
  .rp-table thead tr.rp-thf-row th:nth-child(3)::before {
    content: "材质";
  }
  .rp-mini {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 20px 0 8px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    background-color: var(--card);
    font-size: 12.5px;
  }

  .rp-table tbody {
    display: block;
  }
  .rp-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mat   spec  price"
      "grade grade chg";
    gap: 2px 8px;
    margin-bottom: 6px;
    padding: 9px 11px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  .rp-table tbody tr:last-child {
    margin-bottom: 0;
  }
  /* 清掉桌面表格的格子边框、斑马纹与 hover 底色，否则卡片里会出现竖线 */
  .rp-table .rp-td,
  .rp-table tbody tr:nth-child(even) .rp-td,
  .rp-table tbody tr:hover .rp-td,
  .rp-table tbody tr:last-child .rp-td {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .rp-td--mat {
    grid-area: mat;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--t1);
    white-space: nowrap;
  }
  .rp-table tbody tr > td:nth-child(2) {
    grid-area: spec;
    font-family: var(--font-num);
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
  }
  .rp-table tbody tr > td:nth-child(3) {
    grid-area: grade;
    font-size: 11.5px;
    color: var(--t4);
  }
  /* 价格是这张卡的主信息，放到最大 */
  .rp-td--price {
    grid-area: price;
    text-align: right;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--t1);
  }
  .rp-table tbody tr > td:nth-child(5) {
    grid-area: chg;
    text-align: right;
    font-size: 12px;
  }

  /* 底部分页按钮不在 .rp-toolbar 里，单独抬高度（31px 手指容易点空） */
  #reportPrev,
  #reportNext {
    min-height: 36px;
  }
}