/* 第 39 场 · 首页成屏（首页专用样式，只在 ui_bank 挂 .bank39 时生效）
   口径：提示词第二～四节逐条；色／阴影／圆角／字号一律走 tokens.css 令牌。
   不改 ui.css 里其它页仍在用的类；board.css 保留在盘，但首页不挂。 */

/* 首页不用 12 栏栅格间距：块间距按提示词给的外边距走，三块各占满一行 */
.bank39 > .grid { column-gap: 0; row-gap: 0; }
.bank39 .hero39, .bank39 .wall39, .bank39 .risk39 { grid-column: 1 / -1; }

/* ---------- Hero（白卡） ---------- */
.hero39 {
  margin: 10px 22px 0;
  padding: 13px 18px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  gap: 18px;
}
.h39-left { flex: 0 0 auto; }
.h39-lab { font-size: 11px; color: var(--c-ink3); letter-spacing: .6px; line-height: 1; }
.h39-big { display: flex; align-items: baseline; gap: 5px; margin-top: 7px; }
.h39-num { font-size: 62px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--c-red); }
.h39-unit { font-size: 20px; font-weight: 700; color: var(--c-ink2); }
.h39-mid { max-width: 560px; font-size: 13.5px; color: var(--c-ink2); line-height: 1.55; }
.h39-mid p + p { margin-top: 3px; }
.h39-mid b { color: var(--c-ink1); font-weight: 700; }
.h39-right { margin-left: auto; display: flex; gap: 26px; }
.h39-kv { min-width: 74px; }
.h39-k { display: block; font-size: 10.5px; color: var(--c-ink3); line-height: 1; white-space: nowrap; }
.h39-v { display: block; margin-top: 7px; font-size: 20px; font-weight: 700; letter-spacing: -.5px; line-height: 1; color: var(--c-green); white-space: nowrap; }
.h39-v.warn { color: var(--c-amber-ink); }
.h39-v.red { color: var(--c-red); }
.h39-v i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--c-ink2); letter-spacing: 0; margin-left: 2px; }

/* ---------- 八块墙：4 列 2 行 ---------- */
.wall39 { margin: 10px 22px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.blk39 {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  min-height: 208px;
}
.blk39-h { display: flex; align-items: baseline; gap: 7px; }
.blk39-n { font-size: 12.5px; font-weight: 700; color: var(--c-ink1); }
.blk39-p { font-size: 10px; color: var(--c-ink3); }
.blk39-bd {
  margin-left: auto; font-size: 9.5px; font-weight: 600; line-height: 1.6;
  padding: 0 6px; border-radius: var(--r-pill);
  background: var(--c-badge); color: var(--c-ink2); white-space: nowrap;
}
.blk39-bd.red { background: var(--c-red-l); color: var(--c-red); }
.blk39-bd.ok { background: var(--c-green-l); color: var(--c-green); }
.blk39-b { margin-top: 8px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.blk39-f {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--c-line2);
  font-size: 10px; color: var(--c-ink3); line-height: 1.45;
}

/* 主值 + 对比 pill */
.blk39-main { display: flex; align-items: baseline; gap: 7px; }
.blk39-v { font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--c-ink1); }
.blk39-v i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--c-ink2); letter-spacing: 0; margin-left: 2px; }
.pill39 { align-self: center; font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill); }
.pill39.up { background: var(--c-green-l); color: var(--c-green); }
.pill39.flat { background: var(--c-badge); color: var(--c-ink2); }
.pill39.down { background: var(--c-red-l); color: var(--c-red); }

/* 横条 */
.bar39 { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.bar39-l { flex: 0 0 58px; width: 58px; font-size: 9.5px; color: var(--c-ink2); white-space: nowrap; overflow: hidden; }
.bar39-t { flex: 1 1 auto; height: 8px; background: var(--c-line2); border-radius: 4px; position: relative; }
.bar39-f { height: 8px; border-radius: 4px; background: var(--c-accent); }
.bar39-p { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--c-ink3); }
.bar39-v { flex: 0 0 54px; width: 54px; text-align: right; font-size: 10px; font-weight: 600; color: var(--c-ink1); white-space: nowrap; }
.bar39-note { margin-top: 2px; font-size: 9.5px; color: var(--c-ink3); line-height: 1.5; }
.f-acc { background: var(--c-accent); }
.f-ok { background: var(--c-green); }
.f-warn { background: var(--c-amber); }
.f-red { background: var(--c-red); }

/* 饼／环 */
.fig39 { display: flex; align-items: center; gap: 12px; }
.fig39 svg { flex: 0 0 auto; }
.ring-bg { fill: none; stroke: var(--c-track); stroke-width: 12; }
.ring-fg { fill: none; stroke-width: 12; }
.ring-fg.g { stroke: var(--c-green); }
.ring-fg.a { stroke: var(--c-amber); }
.ring-fg.r { stroke: var(--c-red); }
.fig39-w { position: relative; flex: 0 0 auto; }
.ring-c { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; font-size: 17px; font-weight: 800; letter-spacing: -0.5px; color: var(--c-ink1); line-height: 1; }
.seg-line { stroke: var(--c-card); stroke-width: 1.2; }
.sg-acc { fill: var(--c-accent); }
.sg-green { fill: var(--c-green); }
/* 第 42 场 §二.1：图表色族按预览归位——主色 accent、第三色／预警 amber、灰 chart-gray；
   绿系稀释两档（sg-green2／sg-green3，原为两档浅绿）本条起不再使用，留档不删。 */
.sg-accent { fill: var(--c-accent); }
.sg-accent2 { fill: var(--c-accent-2); }
.sg-amber { fill: var(--c-amber); }
.sg-gray { fill: var(--c-chart-gray); }
.sg-sel { fill: var(--c-sel); }
.sg-green2 { fill: var(--c-green); fill-opacity: .62; }
.sg-green3 { fill: var(--c-green); fill-opacity: .34; }
.sg-red { fill: var(--c-red); }
.sg-track { fill: var(--c-track); }
.sg-ink3 { fill: var(--c-ink3); }
.leg39 { flex: 1 1 auto; min-width: 0; }
.leg39-r { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--c-ink2); line-height: 1.9; }
.leg39-d { flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--r-pill); }
.leg39-d.sg-accent { background: var(--c-accent); }
.leg39-d.sg-accent2 { background: var(--c-accent-2); }
.leg39-d.sg-amber { background: var(--c-amber); }
.leg39-d.sg-gray { background: var(--c-chart-gray); }
.leg39-d.sg-green { background: var(--c-green); }
.leg39-d.sg-green2 { background: var(--c-green); }
.leg39-d.sg-green3 { background: var(--c-green); }
.leg39-d.sg-red { background: var(--c-red); }
.leg39-d.sg-track { background: var(--c-sel); }
/* 销售环：未逾期段按预览取 --c-sel（浅灰），不跟通用轨道色 */
.fig42-sales .ring-bg { stroke: var(--c-sel); }
.leg39-n { flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
.leg39-v { font-weight: 600; color: var(--c-ink1); }
.leg39-tot { margin-top: 3px; font-size: 9.5px; color: var(--c-ink3); }
.ring39-lab { margin-top: 4px; text-align: center; font-size: 10px; color: var(--c-ink3); }

/* 进度条 */
.q39 { padding: 4px 0 2px; }
.q39-t { position: relative; height: 8px; background: var(--c-line2); border-radius: 4px; }
.q39-f { height: 8px; border-radius: 4px; background: var(--c-green); }
.q39-g { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--c-ink3); }
.q39-n { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9.5px; color: var(--c-ink3); }

/* 空态 */
.empty39 {
  height: 100%; min-height: 150px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 10px; line-height: 1.6;
  font-size: 11px; color: var(--c-ink3);
  /* 第 42 场 §二.3：预览空态块是白底，本处不再给灰底（文字与圆角保留） */
  background: none; border-radius: var(--r-ctl);
}

/* ---------- 风险三卡 ---------- */
.risk39 {
  margin: 10px 22px 14px; padding: 10px 14px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card);
}
.risk39-h { display: flex; align-items: baseline; gap: 8px; }
.risk39-t { font-size: 12px; font-weight: 700; color: var(--c-red); }
.risk39-n { font-size: 10px; color: var(--c-ink3); }
.risk39-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.adv.rk39 {
  margin: 0; padding: 7px 9px; border: 1px solid var(--c-line2); border-radius: 8px;
  background: var(--c-risk); display: flex; gap: 8px; align-items: flex-start;
}
.rk39-m { flex: 1 1 auto; min-width: 0; }
.rk39-hd { display: flex; align-items: center; gap: 6px; }
.rk39-hd .pill { font-size: 9.5px; }
.rk39-ti { font-size: 11.5px; font-weight: 700; color: var(--c-ink1); }
.rk39-x { margin-top: 4px; font-size: 10px; line-height: 1.5; color: var(--c-ink2); }
.rk39-x b { color: var(--c-ink1); font-weight: 700; }
.rk39-btns { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.rk39-b {
  font-family: inherit; font-size: 9.5px; line-height: 1.6; padding: 1px 7px; cursor: pointer;
  color: var(--c-ink2); background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-ctl);
}
.rk39-b:hover { background: var(--c-hover); }
.rk39-b.go { border-color: rgba(31,58,95,.5); color: var(--c-accent); }