.bl-prediction-dashboard { position: relative; overflow: hidden; max-width: 1040px; margin: -8px auto 38px; padding: 28px; border: 1px solid #cfd9ec; border-radius: 24px; background: linear-gradient(145deg, #f8fbff, #eef3ff); box-shadow: 0 18px 55px rgba(12,32,72,.11); }
.bl-prediction-dashboard::after { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -130px; border-radius: 50%; background: rgba(53,215,208,.13); pointer-events: none; }
.bl-prediction-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #485875; font-size: .86rem; font-weight: 760; }
.bl-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #11a67e; box-shadow: 0 0 0 5px rgba(17,166,126,.13); }
.bl-metric-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.35fr 1.35fr 1fr; gap: 12px; }
.bl-metric { min-width: 0; padding: 16px; border: 1px solid #d9e2f2; border-radius: 15px; background: #fff; }
.bl-metric span, .bl-reference-card > span { display: block; margin-bottom: 7px; color: #697894; font-size: .78rem; font-weight: 740; }
.bl-metric strong { display: block; overflow-wrap: anywhere; color: #102342; font-size: clamp(.95rem, 1.7vw, 1.22rem); }
.bl-metric--countdown { border-color: #f5cb61; background: #fff9e9; }
.bl-metric--countdown strong { color: #994f00; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.bl-reference-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.bl-reference-card { min-width: 0; padding: 18px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #10244d, #1d3d82); }
.bl-reference-card strong { display: block; font-size: 1.45rem; overflow-wrap: anywhere; }
.bl-reference-card small { display: block; margin-top: 8px; color: #bfcae0; line-height: 1.35; }
.bl-number-balls { display: flex; flex-wrap: nowrap; gap: 9px; }
.bl-number-balls b { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; color: #071120; background: linear-gradient(145deg, #ffe69a, #f3a712); box-shadow: inset 0 3px 6px rgba(255,255,255,.4), 0 5px 12px rgba(0,0,0,.2); font-size: 1.3rem; }
.bl-history-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; }
.bl-responsible-panel { max-width: 960px; margin: 36px auto 0; padding: 34px; border-radius: 22px; color: #eef3ff; background: linear-gradient(140deg, #0a1830, #1a3677); }
.bl-responsible-panel h2 { font-size: 2rem; }
.bl-responsible-panel p { color: #c6d1e7; }
@media (max-width: 860px) {
  .bl-metric-grid, .bl-reference-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bl-prediction-dashboard { padding: 18px; border-radius: 18px; }
  .bl-metric-grid, .bl-reference-grid { grid-template-columns: 1fr; }
  .bl-metric, .bl-reference-card { padding: 16px; }
  .bl-number-balls b { width: 42px; height: 42px; flex-basis: 42px; }
  .bl-responsible-panel { padding: 24px; }
}