/* 赛场仪表：读数、铭牌、刻度环、概率条、迷你走势、泳道、热力格、比分牌 */

/* 读数：大号等宽数字 + 小号单位 */
.metric { display: grid; gap: 4px; min-width: 0; }
.metric-label { font-size: 12px; color: var(--ink-soft); font-weight: 560; letter-spacing: .02em; }
.metric-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-display-m); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.metric-value .unit { font-family: var(--font-sans); font-size: 12px; font-weight: 560; letter-spacing: 0; color: var(--ink-soft); margin-left: 4px; }
.metric-value.xl { font-size: var(--fs-display-xl); }
.metric-value.l { font-size: var(--fs-display-l); }
.metric-foot { font-size: 11.5px; color: var(--ink-faint); }

/* 刻度尺 */
.ruler { height: 10px; background-image: repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, var(--tick-strong) 0 1px, transparent 1px 40px); background-size: 100% 6px, 100% 10px; background-repeat: no-repeat; background-position: bottom; opacity: .9; }

/* 规格铭牌：两种主题都是深色玻璃 */
.spec-plate { padding: 16px 18px; display: grid; gap: 2px; }
.spec-plate h3 { color: var(--plate-soft); font-size: 11px; letter-spacing: var(--track-eyebrow); font-weight: 600; margin-bottom: 8px; }
.spec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--plate-line); font-size: 12.5px; }
.spec-row:first-of-type { border-top: 0; }
.spec-row span { color: var(--plate-soft); }
.spec-row b { font-family: var(--font-mono); font-weight: 560; color: var(--plate-ink); font-size: 12px; text-align: right; }
.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--ink-faint); vertical-align: 1px; }
.led.ok { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.led.warn { background: #f5aa1e; box-shadow: 0 0 8px #f5aa1e; }
.led.off { background: rgba(255,255,255,.28); }

/* 环比/状态胶囊 */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 560; white-space: nowrap; background: var(--surface-sunk); color: var(--ink-muted); border: 1px solid var(--line); }
.chip.ok { color: var(--leaf-text); background: var(--lime-soft); border-color: rgba(130,221,45,.3); }
.chip.warn { color: var(--amber-text); background: var(--amber-soft); border-color: rgba(245,170,30,.3); }
.chip.bad { color: var(--red-text); background: var(--red-soft); border-color: rgba(255,90,80,.28); }
.chip.info { color: var(--blue); background: var(--blue-soft); border-color: rgba(35,109,233,.22); }
.cat { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.cat-1 { background: var(--cat-1-bg); color: var(--cat-1-ink); } .cat-2 { background: var(--cat-2-bg); color: var(--cat-2-ink); }
.cat-3 { background: var(--cat-3-bg); color: var(--cat-3-ink); } .cat-4 { background: var(--cat-4-bg); color: var(--cat-4-ink); }
.cat-5 { background: var(--cat-5-bg); color: var(--cat-5-ink); }

/* 刻度环（SVG）：刻度逐根点亮到真实比例 */
.ring { position: relative; display: grid; place-items: center; }
.ring svg { width: 100%; height: auto; overflow: visible; }
.ring .tick { stroke: var(--tick); stroke-width: 2; stroke-linecap: round; }
.ring .tick.on { stroke: var(--lime); }
.ring.empty .tick.on { stroke: var(--tick); }
.ring .ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.ring .ring-center b { font-family: var(--font-mono); font-size: 22px; letter-spacing: -.03em; font-weight: 620; }
.ring .ring-center b .unit { font-size: 11px; color: var(--ink-soft); margin-left: 2px; font-family: var(--font-sans); }
.ring .ring-center span { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); }

/* 概率条：胜/平/负分段 */
.prob { display: grid; gap: 6px; min-width: 210px; }
.prob-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-sunk); gap: 2px; }
.prob-bar i { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: grow-x var(--dur-slow) var(--ease-out) both; }
.prob-bar i:nth-child(2) { animation-delay: 60ms; } .prob-bar i:nth-child(3) { animation-delay: 120ms; }
.prob-bar .h { background: var(--home); } .prob-bar .d { background: var(--draw); } .prob-bar .a { background: var(--away); }
.prob-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--ink-soft); font-family: var(--font-mono); }
.prob-legend span { display: inline-flex; align-items: center; gap: 4px; }
.prob-legend span::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.prob-legend .h { color: var(--home); } .prob-legend .d { color: var(--ink-soft); } .prob-legend .a { color: var(--away); }
.prob-legend .top { font-weight: 700; color: var(--ink); }
.prob-legend .top::after { content: "▲"; font-size: 8px; margin-left: 2px; color: var(--leaf-text); }
.prob-meta { font-size: 11px; color: var(--ink-faint); }
@keyframes grow-x { from { transform: scaleX(0); } }

/* 赔率迷你走势 */
.spark { display: block; width: 96px; height: 26px; overflow: visible; }
.spark path { fill: none; stroke: var(--home); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--blue-soft); stroke: none; }
.spark circle { fill: var(--home); }
.odds-cell { display: flex; align-items: center; gap: 12px; }
.odds-triplet { display: grid; grid-template-columns: repeat(3, auto); gap: 2px 10px; font-family: var(--font-mono); font-size: 12.5px; }
.odds-triplet em { font-style: normal; font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-faint); }

/* 营业窗口泳道 */
.lanes { --lane-label: 140px; position: relative; padding: 8px 0 4px; }
.lane { position: relative; display: grid; grid-template-columns: var(--lane-label) 1fr; align-items: center; min-height: 40px; border-top: 1px dashed var(--line); }
.lane:first-child { border-top: 0; }
.lane-name { font-size: 12px; color: var(--ink-muted); font-weight: 560; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-track { position: relative; height: 40px; overflow: hidden; }
.lane-block { position: absolute; top: 8px; height: 24px; min-width: 6px; border-radius: 7px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--e1); border: 1px solid var(--glass-line); transform-origin: left; animation: grow-x var(--dur-slow) var(--ease-out) both; }
.lane-block.past { background-image: var(--hatch); color: var(--ink-faint); }
.lane-final { position: absolute; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.lane-axis { position: relative; height: 22px; margin-left: var(--lane-label); }
.lane-axis span { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.lane-now { position: absolute; top: 0; bottom: 22px; width: 0; border-left: 1.5px solid var(--red); z-index: 2; pointer-events: none; }
.lane-now::before { content: "现在"; position: absolute; top: -2px; left: 4px; white-space: nowrap; font-size: 10px; color: var(--red-text); font-weight: 650; }
.lane-window { position: absolute; top: 0; bottom: 22px; background: var(--lime-soft); border-left: 1px solid rgba(130,221,45,.4); border-right: 1px solid rgba(130,221,45,.4); pointer-events: none; }

/* 倒计时 */
.countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; font-weight: 600; }
.countdown .sep { opacity: .35; margin: 0 1px; }

/* 斜线：区间/超限 */
.hatched { background-image: var(--hatch); }

/* UI-2：多选项概率、比分热力格与报价坐标 */
.probability-panel .prob { min-width: 0; }
.probability-panel .prob-legend { flex-wrap: wrap; gap: 6px 14px; }
.probability-panel .prob-bar { height: 12px; gap: 1px; }
.prob-bar .option-1 { background: var(--cat-1); }
.prob-bar .option-2 { background: var(--cat-2); }
.prob-bar .option-3 { background: var(--cat-3); }
.prob-bar .option-4 { background: var(--cat-4); }
.prob-bar .option-5 { background: var(--cat-5); }
.probability-panel .prob-bar .h { background: var(--home); }
.probability-panel .prob-bar .d { background: var(--draw); }
.probability-panel .prob-bar .a { background: var(--away); }
.prob-source { margin: 16px 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.score-heatmap { display: grid; grid-template-columns: 36px repeat(6, minmax(0, 1fr)) 64px; grid-template-rows: 24px repeat(6, minmax(52px, auto)); gap: 4px; }
.heat-axis { display: grid; place-items: center; font: 11px var(--font-mono); color: var(--ink-muted); }
.heat-cell { display: grid; place-content: center; gap: 2px; text-align: center; padding: 8px 2px; border-radius: var(--r-xs); border: 1px solid var(--line); background: color-mix(in srgb, var(--home) var(--heat, 0%), var(--surface-solid)); color: var(--ink); font: 11px var(--font-mono); }
.heat-cell b { font-size: 12px; }
.heat-cell.crosshair { outline: 1px solid var(--home); outline-offset: -1px; }
.heat-cell:focus, .heat-cell:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
.spark-toggle .spark { width: 60px; height: 20px; }
[data-odds-chart] { display: block; width: 100%; height: auto; min-height: 180px; }
[data-odds-chart] text { fill: var(--ink-muted); font: 11px var(--font-mono); }
[data-odds-chart] .grid-line { stroke: var(--line-strong); stroke-dasharray: 2 4; }
/* 新报价只提示一次；实时替换不重播整条概率的进场。 */
[data-realtime-region] .prob-bar i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .prob-bar i { animation: none; }
}

.probability-panel .prob-legend .option-1 { color: var(--cat-1-ink); }
.probability-panel .prob-legend .option-2 { color: var(--cat-2-ink); }
.probability-panel .prob-legend .option-3 { color: var(--cat-3-ink); }
.probability-panel .prob-legend .option-4 { color: var(--cat-4-ink); }
.probability-panel .prob-legend .option-5 { color: var(--cat-5-ink); }
.probability-panel .prob-legend .h { color: var(--home); }
.probability-panel .prob-legend .d { color: var(--ink-soft); }
.probability-panel .prob-legend .a { color: var(--away); }
.probability-panel .prob-legend .top { color: var(--ink); }
.countdown-digit { display: inline-block; }

/* UI-3：比分铭牌与响应延迟仪 */
.live-score { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 180px; padding: 14px 22px; font-size: 44px; border: 1px solid var(--plate-line); }
.live-score [data-live-score] { display: inline-block; min-width: 1ch; text-align: center; transform-origin: center; }
.live-score .score-separator { color: var(--plate-soft); font-size: 24px; }
.latency-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.latency-meter { padding: 18px; gap: 12px; }
.latency-meter .metric-value { font-size: clamp(24px, 3vw, 36px); }
.latency-track { height: 18px; position: relative; border-radius: 4px; background: var(--surface-sunk); overflow: hidden; }
.latency-track i { display: block; height: 100%; background-color: var(--lime); border-radius: 4px; }
.latency-track > span { position: absolute; inset: 0 auto 0 50%; border-left: 1px dashed var(--ink-soft); }
.over-budget { outline: 1px solid var(--red); outline-offset: -1px; }
.latency-meter.over-budget .metric-value, .latency-meter.over-budget .metric-foot { color: var(--red-text); }
.latency-track i.over-budget { background-color: var(--red-soft); }
.admin-page tr.hatched > td { background-image: var(--hatch); }
@media (max-width: 820px) { .latency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }