/* =============================================================================
 * 模块 0：当日利差总览 —— 独立样式表
 * 仅新增 .ov* 命名空间，不覆盖 style.css 中任何既有选择器。
 * ========================================================================== */

/* ---------- 卡片内的分区 ---------- */
.ovBody {
  padding: 12px 14px 16px 14px;
  display: grid;
  gap: 16px;
}

.ovSec {
  min-width: 0;
}

.ovSec__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
  color: var(--brand);
  padding-bottom: 7px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.ovSec__title i {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
}

/* 窄卡片并排（资金/存单等小矩阵） */
.ovDuo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
}

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

/* ---------- 热力矩阵 ---------- */
.ovScroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.ovScroll::-webkit-scrollbar {
  height: 6px;
}

.ovScroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.ovMx {
  display: grid;
  gap: 3px;
}

.ovMx__corner,
.ovMx__rh {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--page);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 9px 6px 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  word-break: keep-all;
  box-shadow: 6px 0 6px -6px rgba(15, 23, 42, 0.12);
}

.ovMx__corner {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted2);
  letter-spacing: 0.02em;
  justify-content: flex-end;
  padding-bottom: 8px;
}

.ovMx__rh i {
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}

.ovMx__ch {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 4px 7px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ovMx__group {
  grid-column: 1 / -1;
  position: sticky;
  left: 0;
  margin: 7px 0 1px 0;
  padding: 4px 0 4px 2px;
  font-size: 11px;
  font-weight: 750;
  color: var(--brand2);
  border-top: 1px dashed var(--border);
  letter-spacing: 0.02em;
}

.ovMx__group--first {
  margin-top: 2px;
  border-top: none;
}

/* ---------- 单元格 ---------- */
.ovCell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 5px 4px;
  border-radius: 7px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  cursor: default;
  transition: transform 120ms ease, box-shadow 120ms ease;
  outline: none;
}

.ovCell:hover,
.ovCell:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12, 45, 94, 0.22);
  z-index: 3;
}

.ovCell__v {
  font-size: 14.5px;
  font-weight: 760;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ovCell__m {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
}

.ovCell__m i {
  font-style: normal;
  font-weight: 600;
  opacity: 0.85;
}

.ovCell--na {
  background: repeating-linear-gradient(
    -45deg,
    #fbfcfe,
    #fbfcfe 5px,
    #f2f5f9 5px,
    #f2f5f9 10px
  );
  color: var(--muted2);
  font-size: 12px;
  border-style: dashed;
  border-color: #e6ebf2;
}

/* 该序列当日无观测、取其最近可用日 */
.ovCell--stale::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}

.ovCell--flash {
  animation: ovFlash 2.2s ease-out 1;
}

@keyframes ovFlash {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(194, 65, 12, 0);
  }
  12%,
  62% {
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.9);
  }
}

/* ---------- 顶部 KPI（分类分行） ---------- */
.ovKpiBody {
  padding: 12px 14px 14px 14px;
  display: grid;
  gap: 14px;
}

.ovKpiSec__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 750;
  color: var(--brand2);
  letter-spacing: 0.02em;
}

.ovKpiSec__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), rgba(226, 232, 240, 0));
}

.ovKpiSec__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1180px) {
  .ovKpiSec__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.ovKpi {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  padding: 10px 12px 11px 12px;
  min-width: 0;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ovKpi:hover,
.ovKpi:focus-visible {
  border-color: #c7d8ee;
  box-shadow: 0 4px 14px rgba(12, 45, 94, 0.1);
}

.ovKpi__label {
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ovKpi__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}

.ovKpi__val {
  font-size: 22px;
  font-weight: 780;
  color: var(--brand);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ovKpi__val em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--muted2);
  margin-left: 3px;
  letter-spacing: 0;
}

.ovKpi__chg {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ovKpi__rail {
  position: relative;
  height: 7px;
  margin: 9px 0 6px 0;
  border-radius: 999px;
  background: #eef2f7;
  border: 1px solid #e5eaf1;
}

.ovKpi__box {
  position: absolute;
  top: -1px;
  bottom: -1px;
  border-radius: 999px;
  background: #cfdcec;
}

.ovKpi__mid {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: #9fb4cc;
}

.ovKpi__mark {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}

.ovKpi__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.ovKpi__p {
  font-weight: 750;
}

.ovKpi__rng {
  color: var(--muted2);
}

.ovKpi--na .ovKpi__val {
  color: var(--muted2);
}

/* ---------- 色阶图例 ---------- */
.ovLegend {
  padding: 0 14px 12px 14px;
}

.ovLegend__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ovLegend__cap {
  font-size: 11px;
  font-weight: 750;
  color: var(--text);
}

.ovLegend__lab {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.ovLegend__bar {
  position: relative;
  flex: 1 1 200px;
  min-width: 140px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.ovLegend__bar i {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(15, 23, 42, 0.28);
}

.ovLegend__note {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- 极值提示 ---------- */
.ovAlert {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 14px 14px 14px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
}

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

.ovAlert__col {
  min-width: 0;
}

.ovAlert__t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 750;
  color: var(--text);
  margin-bottom: 8px;
}

.ovAlert__t i {
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: var(--muted2);
}

.ovAlert__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ovAlert__empty {
  font-size: 11px;
  color: var(--muted2);
}

.ovChip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(15, 23, 42, 0.13);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.ovChip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(12, 45, 94, 0.2);
}

.ovChip b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* ---------- 悬浮明细 ---------- */
.ovTip {
  position: fixed;
  z-index: 60;
  display: none;
  min-width: 218px;
  max-width: 290px;
  padding: 10px 12px 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  font-size: 11px;
  color: var(--text);
}

.ovTip--on {
  display: block;
}

.ovTip__t {
  font-size: 11.5px;
  font-weight: 750;
  color: var(--brand);
  line-height: 1.35;
}

.ovTip__d {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted2);
}

.ovTip__g {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}

.ovTip__g span {
  color: var(--muted);
}

.ovTip__g b {
  text-align: right;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

/* ---------- 卡片头部右侧的数据日期 ---------- */
.ovAsOf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.ovAsOf b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .ovCell {
    min-height: 40px;
  }
  .ovCell__v {
    font-size: 13px;
  }
  .ovKpi__val {
    font-size: 19px;
  }
}


/* =============================================================================
 * 入场动效
 * ========================================================================== */

/* 用 animation-fill-mode: both 在延时期间保持 from 状态；
   即便脚本未执行，元素也保持可见，不会整片空白。 */
#tab-m0 .ovStagger--run > .ovCell {
  animation: ovCellIn 460ms cubic-bezier(0.22, 0.72, 0.3, 1) both;
  animation-delay: var(--ovd, 0ms);
}

#tab-m0 .ovStagger--run > .ovKpi {
  animation: ovTileIn 520ms cubic-bezier(0.22, 0.72, 0.3, 1) both;
  animation-delay: var(--ovd, 0ms);
}

#tab-m0 .ovStagger--run > .ovChip {
  animation: ovChipIn 380ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: var(--ovd, 0ms);
}

@keyframes ovCellIn {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ovTileIn {
  from {
    opacity: 0;
    transform: translateY(11px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ovChipIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 色阶条上缓慢来回的高光，给静态页面一点呼吸感 */
.ovLegend__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0) 58%
  );
  background-size: 260% 100%;
  animation: ovSheen 6.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ovSheen {
  0%,
  8% {
    background-position: 130% 0;
  }
  58%,
  100% {
    background-position: -30% 0;
  }
}

/* 系统开启「减少动态效果」时全部静止 */
@media (prefers-reduced-motion: reduce) {
  #tab-m0 .ovStagger--run > .ovCell,
  #tab-m0 .ovStagger--run > .ovKpi,
  #tab-m0 .ovStagger--run > .ovChip {
    opacity: 1;
    animation: none !important;
  }
  .ovLegend__bar::after {
    animation: none;
  }
}

/* =============================================================================
 * 桌面端顶栏：标题居中放大（手机端维持原有堆叠布局）
 * ========================================================================== */
.topbar__tabs {
  min-width: 0;
}

@media (min-width: 961px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto minmax(150px, 1fr);
    grid-template-rows: auto auto;
    row-gap: 11px;
    align-items: center;
    padding-top: 15px;
  }

  /* 第一行：标题居中放大，两侧带渐隐细线填住留白；数据日期与刷新收到右上角 */
  .topbar__left {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  /* 报头式排布：主标题在左，副标题两行收到右侧，中间一道竖分隔，
     整块变宽，两侧留白自然收窄 */
  .topbar__left .brand {
    flex: 0 0 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 17px;
    text-align: left;
  }

  .topbar__left .brand__title {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 30px;
    letter-spacing: 1.2px;
    padding-right: 17px;
    border-right: 1px solid rgba(255, 255, 255, 0.24);
  }

  .topbar__left .brand__tagline {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 2px 0;
  }

  .topbar__left .brand__subtitle {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }

  .topbar__left .brand__title,
  .topbar__left .brand__tagline,
  .topbar__left .brand__subtitle {
    white-space: nowrap;
  }

  .topbar__left::before,
  .topbar__left::after {
    content: '';
    flex: 1 1 150px;
    max-width: 250px;
    min-width: 0;
    height: 1px;
    border-radius: 1px;
  }

  .topbar__left::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42));
  }

  .topbar__left::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  }

  .topbar__tools {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  /* 第二行：Tab 独占整行，过窄时在内部横向滚动，不与右上工具重叠 */
  .topbar__tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    min-width: 0;
    max-width: 100%;
  }

  .brand__title {
    font-size: 27px;
    letter-spacing: 1px;
  }

  .brand__tagline {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 1.6px;
  }

  .brand__subtitle {
    margin-top: 3px;
    font-size: 12px;
  }
}

/* =============================================================================
 * 总览页放宽版心：矩阵列数多，1380px 下右侧会留白
 * 只作用于 m0，其余模块沿用原有 1380px 版心
 * ========================================================================== */
body[data-active-tab='m0'] .layout,
body[data-active-tab='m0'] .footer {
  max-width: 1640px;
}