:root {
  color-scheme: light;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color: #18242d;
  background: #eef1f3;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: #eef1f3; }
.topbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 24px; color: #f7f8f8; background: #20313a; border-bottom: 3px solid #d0a22d; }
.topbar strong { font-size: 18px; }
.topbar span { margin-left: 12px; color: #e4c766; font-size: 12px; }
.stream-state { display: flex; align-items: center; gap: 8px; font-size: 12px; }
#streamDot { width: 9px; height: 9px; border-radius: 50%; background: #d25c5c; }
#streamDot.online { background: #3b9b68; }
main { width: min(1560px, calc(100% - 28px)); margin: 16px auto 32px; }
.alert-band { padding: 12px 16px; margin-bottom: 12px; border-left: 4px solid #bd3434; background: #fff0f0; color: #8e2222; font-weight: 700; }
.status-grid, .facts-grid, .counts { display: grid; border: 1px solid #c9d1d6; background: #fff; }
.status-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.counts { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 14px; }
.status-grid div, .facts-grid div, .counts div { min-height: 66px; padding: 12px 14px; border-right: 1px solid #dce1e4; }
.status-grid div:last-child, .counts div:last-child { border-right: 0; }
.facts-grid div:nth-child(4n) { border-right: 0; }
.status-grid span, .facts-grid span, .counts span { display: block; color: #63727c; font-size: 11px; }
.status-grid b, .facts-grid b, .counts b { display: block; margin-top: 7px; font-size: 12px; overflow-wrap: anywhere; }
.counts b { font-size: 20px; }
.event-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr); gap: 22px; margin-top: 14px; padding: 20px; border: 1px solid #c9d1d6; border-left: 4px solid #276c8d; background: #fff; }
.kicker, .section-title span { color: #2e718f; font-size: 11px; font-weight: 700; }
h1, h2 { margin: 5px 0 0; letter-spacing: 0; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
.event-summary p { margin: 10px 0 0; color: #52616a; }
dl { margin: 0; }
dl div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
dt { color: #65747e; font-size: 11px; }
dd { margin: 0; font: 11px/1.5 Consolas, monospace; overflow-wrap: anywhere; }
.data-section { margin-top: 14px; border: 1px solid #c9d1d6; background: #fff; }
.section-title { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; border-bottom: 1px solid #dce1e4; }
.section-title small { color: #6b7880; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 1100px; border-collapse: collapse; table-layout: fixed; }
th, td { min-height: 42px; padding: 9px 10px; border-bottom: 1px solid #e4e8ea; text-align: left; font-size: 11px; overflow-wrap: anywhere; }
th { background: #f6f8f9; color: #4e5e68; }
tbody tr:hover { background: #f2f7f9; }
.empty { height: 72px; text-align: center; color: #6e7d86; }
.mono { font-family: Consolas, monospace; }
.group-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.group-grid article { min-height: 116px; padding: 14px; border-right: 1px solid #dce1e4; }
.group-grid article:last-child { border-right: 0; }
.group-grid header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-grid header b { font-size: 22px; }
.group-grid p { margin: 10px 0 0; color: #5c6a73; font-size: 11px; line-height: 1.6; }
body.stale .status-grid { border-color: #be3a3a; }
body.stale #dataStatus, body.stale #selectionStatus { color: #b42323; }
footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; color: #52616a; background: #dde3e6; font-size: 12px; }
footer a { color: #1f6484; }

@media (max-width: 920px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .topbar span { display: block; margin: 4px 0 0; }
  main { width: calc(100% - 18px); margin-top: 9px; }
  .status-grid { grid-template-columns: 1fr 1fr; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .counts { grid-template-columns: repeat(2, 1fr); }
  .event-summary { grid-template-columns: 1fr; }
  .group-grid { grid-template-columns: 1fr; }
  .group-grid article { border-right: 0; border-bottom: 1px solid #dce1e4; }
  footer { align-items: flex-start; flex-direction: column; padding: 10px 16px; }
}