/* ============================================================
 * 数据仓大屏（第 60 轮）
 * ============================================================
 * 深色沉浸页：**只在这一页**用深色，其余页面仍是浅色后台。
 *   理由：大屏要挂在电视 / 会议室投影上长时间显示，白底刺眼且反光；
 *   深底 + 青/绿高亮是这块屏的唯一视觉语言。
 *
 * ⚠️ 不引任何 UI/图表库（零依赖红线）。所有图形 = SVG 字符串 + CSS 条。
 * ============================================================ */

.hall {
  /* 负边距吃掉内容区的内边距，让深色铺满到侧栏与顶栏边 */
  margin: calc(var(--content-pad-y) * -1) calc(var(--content-pad-x) * -1) 0;
  /* 底部收得比别页紧：大屏要在一屏（1080p）内完整放下，见各块高度预算 */
  padding: 14px 20px 14px;
  min-height: calc(100vh - var(--topbar-h));
  background: #070E1A;
  color: #EAF2FF;
  font-variant-numeric: tabular-nums;
}
.hall:fullscreen { overflow: auto; padding: 22px 28px; }

/* ---------- 顶栏 ---------- */
.hall-top {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(34, 211, 238, .16);
}
.hall-top .ht-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hall-top .ht-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22D3EE; box-shadow: 0 0 10px rgba(34, 211, 238, .8);
  align-self: center;
}
.hall-top .ht-title { font-size: 20px; font-weight: 500; letter-spacing: 2px; }
.hall-top .ht-ledger { font-size: 12px; color: rgba(234, 242, 255, .55); }
.hall-top .ht-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hall-top .ht-time { font-size: 12px; color: rgba(234, 242, 255, .45); margin-right: 4px; }
.hb {
  background: rgba(34, 211, 238, .1);
  border: 1px solid rgba(34, 211, 238, .3);
  color: #9BE7F5; font-size: 12px;
  padding: 5px 12px; border-radius: 5px; cursor: pointer;
  font-family: inherit;
}
.hb:hover { background: rgba(34, 211, 238, .2); color: #EAF2FF; }

/* ---------- KPI ---------- */
.hall-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px; margin: 10px 0;
}
.hall-kpi {
  background: #0C1728;
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 2px solid #22D3EE;
  border-radius: 8px; padding: 12px 14px;
  min-width: 0;
}
.hall-kpi.tone-g { border-left-color: #07C160; }
.hall-kpi.tone-y { border-left-color: #F5B544; }
.hall-kpi.tone-c { border-left-color: #8B7BFF; }
.hall-kpi .hk-name { font-size: 12px; color: rgba(234, 242, 255, .5); }
.hall-kpi .hk-val { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 4px; }
.hall-kpi .hk-val .v { font-size: 24px; line-height: 1.1; font-weight: 500; letter-spacing: -.4px; }
.hall-kpi .hk-val .u { font-size: 12px; color: rgba(234, 242, 255, .45); }
.hall-kpi .hk-foot {
  font-size: 11px; color: rgba(234, 242, 255, .38);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 三列 ---------- */
.hall-grid {
  display: grid; grid-template-columns: 1.02fr 1.34fr 1.04fr;
  gap: 12px; align-items: start;
}
.hall-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.hall-panel {
  background: #0C1728;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px; overflow: hidden;
}
.hall-panel .hp-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(34, 211, 238, .04);
}
.hall-panel .hp-t { font-size: 13px; font-weight: 500; letter-spacing: .6px; }
.hall-panel .hp-t::before {
  content: ''; display: inline-block;
  width: 3px; height: 11px; margin-right: 7px; border-radius: 2px;
  background: #22D3EE; vertical-align: -1px;
}
.hall-panel .hp-s { font-size: 11px; color: rgba(234, 242, 255, .4); margin-left: auto; }
.hall-panel .hp-body { padding: 12px 14px 14px; }

/* ---------- 画像 ---------- */
.hall-profile { display: flex; gap: 12px; align-items: center; }
.hp-donut { flex: 0 0 128px; }
.hp-donut svg { width: 128px; height: 128px; }
.hp-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; min-width: 0; }
.hp-stat .hs-n { font-size: 11px; color: rgba(234, 242, 255, .45); }
.hp-stat .hs-v { font-size: 17px; font-weight: 500; margin: 2px 0; }
.hp-stat .hs-f { font-size: 10px; color: rgba(234, 242, 255, .32); }
.hp-sub {
  font-size: 11px; color: rgba(234, 242, 255, .45);
  margin: 12px 0 8px; letter-spacing: .4px;
}
.hp-hint {
  font-size: 11px; line-height: 1.7; color: rgba(234, 242, 255, .35);
  margin-top: 10px;
}

/* ---------- 横条 ---------- */
.hbars { display: flex; flex-direction: column; gap: 7px; }
.hb-row { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.hb-rank {
  flex: 0 0 16px; text-align: center; font-size: 11px;
  color: rgba(234, 242, 255, .4);
}
.hb-rank.top { color: #22D3EE; }
.hb-name {
  flex: 0 0 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(234, 242, 255, .8);
}
.hbold .hb-name { flex-basis: 110px; }
.hb-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.hb-bar > i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(7, 193, 96, .55), #07C160);
}
.hb-val { flex: 0 0 auto; font-size: 11px; color: rgba(234, 242, 255, .62); }
.hb-sub { flex: 0 0 34px; text-align: right; font-size: 10px; color: rgba(34, 211, 238, .7); }
.hbars.compact .hb-name { flex-basis: 70px; }

/* ---------- 柱（尺码） ---------- */
.hcols {
  display: flex; align-items: flex-end; gap: 6px;
  height: 126px; padding-top: 8px;
}
.hc-i { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.hc-v { font-size: 10px; color: rgba(234, 242, 255, .55); margin-bottom: 3px; }
.hc-b {
  width: 68%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #22D3EE, rgba(34, 211, 238, .18));
  min-height: 3px;
}
.hc-n { font-size: 10px; color: rgba(234, 242, 255, .4); margin-top: 5px; }

/* ---------- 趋势 ---------- */
.hall-trend { line-height: 0; }
.hall-legend { display: flex; gap: 16px; margin-top: 6px; }
.hall-legend .hl-i { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(234, 242, 255, .5); }
.hall-legend .hl-i i { width: 10px; height: 3px; border-radius: 2px; }

/* ---------- 滚动榜 ---------- */
.hall-scroll { height: 168px; overflow: hidden; position: relative; }
.hall-track { animation: hallUp 22s linear infinite; }
.hall-scroll:hover .hall-track { animation-play-state: paused; }
@keyframes hallUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.rk-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.rk-no {
  flex: 0 0 18px; height: 18px; line-height: 18px; text-align: center;
  font-size: 11px; border-radius: 3px;
  background: rgba(255, 255, 255, .05); color: rgba(234, 242, 255, .45);
}
.rk-no.top { background: rgba(34, 211, 238, .16); color: #22D3EE; }
.rk-name {
  flex: 0 0 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(234, 242, 255, .8);
}
.rk-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.rk-bar > i { display: block; height: 100%; border-radius: 3px; background: #22D3EE; }
.rk-val { flex: 0 0 auto; font-size: 11px; color: rgba(234, 242, 255, .62); }

/* ---------- 底部横幅 ---------- */
.hall-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 9px 14px;
  background: #0C1728; border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px; overflow: hidden;
}
.hall-foot .hf-tag {
  flex: 0 0 auto; font-size: 11px; letter-spacing: 1px;
  color: #22D3EE; padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.hall-foot .hf-marquee { flex: 1; overflow: hidden; }
.hall-foot .hf-track {
  display: inline-flex; gap: 28px; white-space: nowrap;
  animation: hallLeft 42s linear infinite;
}
.hall-foot:hover .hf-track { animation-play-state: paused; }
@keyframes hallLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hall-foot .hf-i { font-size: 12px; color: rgba(234, 242, 255, .5); }
.hall-foot .hf-i b { color: #EAF2FF; font-weight: 500; }
.hall-foot .hf-i i { font-style: normal; color: rgba(34, 211, 238, .8); margin-left: 6px; }
.hall-foot .hf-empty { flex: 1; font-size: 12px; color: rgba(234, 242, 255, .35); }
.hall-foot .hf-note { flex: 0 0 auto; font-size: 10px; color: rgba(234, 242, 255, .28); }

/* ---------- 按月对账 / 结算进度（第 61 轮） ---------- */
.hall-settle { margin-top: 12px; }
.hs-body {
  display: grid; grid-template-columns: 240px 1fr 292px;
  gap: 18px; align-items: center;
  padding: 8px 14px 10px;
}
/* 左：累计回款率 */
.hs-rate { min-width: 0; }
.hsr-top { display: flex; align-items: baseline; gap: 8px; }
.hsr-n { font-size: 11px; color: rgba(234, 242, 255, .45); }
.hsr-v { margin-left: auto; display: flex; align-items: baseline; gap: 2px; }
.hsr-v b { font-size: 22px; font-weight: 500; line-height: 1; color: #07C160; }
.hsr-v i { font-style: normal; font-size: 11px; color: rgba(7, 193, 96, .7); }
.hsr-bar {
  height: 6px; border-radius: 3px; margin: 7px 0 8px;
  background: rgba(255, 255, 255, .07); overflow: hidden;
}
.hsr-bar > i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(7, 193, 96, .45), #07C160);
}
.hsr-nums { display: flex; gap: 14px; }
.hsn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hsn-n { font-size: 10px; color: rgba(234, 242, 255, .38); }
.hsn-v { font-size: 12px; color: rgba(234, 242, 255, .85); }
.hsn.t-g .hsn-v { color: #3FD98A; }
.hsn.t-w .hsn-v { color: #F5B544; }

/* 中：月度柱 */
.hs-months { min-width: 0; }
.hsm-legend { display: flex; gap: 14px; justify-content: flex-end; margin-bottom: 4px; }
.hsm-legend .hl-i { display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(234, 242, 255, .42); }
.hsm-legend .hl-i i { width: 8px; height: 8px; border-radius: 2px; }
.hsm-chart { display: flex; align-items: flex-end; gap: 10px; height: 66px; }
.hsm-i {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.hsm-bars {
  flex: 1; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
}
.hsm-bars > i { width: 40%; max-width: 16px; border-radius: 2px 2px 0 0; }
.hsm-bars .b-due { background: rgba(34, 211, 238, .55); }
.hsm-bars .b-paid { background: #07C160; }
.hsm-l { margin-top: 4px; font-size: 10px; color: rgba(234, 242, 255, .5); }
.hsm-d { font-size: 10px; color: rgba(234, 242, 255, .3); white-space: nowrap; }
.hsm-d.warn { color: rgba(245, 181, 68, .85); }

/* 右：催款提醒 */
.hs-due { min-width: 0; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .06); }
.hsd-t { font-size: 10px; color: rgba(234, 242, 255, .4); margin-bottom: 6px; }
.hsd-list { display: flex; flex-direction: column; gap: 4px; }
.hsd-i { display: flex; align-items: center; gap: 6px; font-size: 11px; min-width: 0; }
.hsd-r {
  flex: 0 0 14px; height: 14px; line-height: 14px; text-align: center;
  font-size: 9px; border-radius: 2px;
  background: rgba(255, 255, 255, .05); color: rgba(234, 242, 255, .4);
}
.hsd-r.top { background: rgba(245, 181, 68, .18); color: #F5B544; }
.hsd-n { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(234, 242, 255, .78); }
.hsd-v { flex: 0 0 auto; color: #F5B544; }
.hsd-d { flex: 0 0 64px; text-align: right; font-size: 10px; color: rgba(234, 242, 255, .3); }

/* ---------- 状态 ---------- */
.hall-loading, .hall-err { padding: 60px 0; text-align: center; }
.hall-err .he-t { font-size: 15px; margin-bottom: 8px; }
.hall-err .he-s { font-size: 12px; color: rgba(234, 242, 255, .45); margin-bottom: 16px; }

/* ---------- 窄屏：三列叠成一列（投影上仍是三列） ---------- */
@media (max-width: 1280px) {
  .hall-kpis { grid-template-columns: repeat(3, 1fr); }
  .hall-grid { grid-template-columns: 1fr; }
  .hall-scroll { height: 160px; }
  .hs-body { grid-template-columns: 1fr; gap: 12px; }
  .hs-due { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 10px; }
}

/* 尊重「减少动态效果」：不滚，但内容仍完整 */
@media (prefers-reduced-motion: reduce) {
  .hall-track, .hall-foot .hf-track { animation: none; }
  .hall-scroll { height: auto; max-height: 260px; overflow: auto; }
}