:root {
  color-scheme: light;
  --page-bg: #eef5f9;
  --surface: #ffffff;
  --surface-soft: #f7fafc;
  --ink: #1c3040;
  --muted: #607484;
  --muted-light: #8496a3;
  --line: #d5e1e8;
  --line-soft: #e6edf1;
  --primary: #247fae;
  --primary-dark: #176789;
  --primary-soft: #e7f2f8;
  --cyan: #2d98b5;
  --teal: #2b8d82;
  --violet: #6576a9;
  --warning-soft: #fff5df;
  --warning: #a56716;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow: 0 4px 14px rgba(34, 65, 84, .055);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 1120px; background: var(--page-bg); }
body { margin: 0; min-height: 100vh; background: var(--page-bg); color: var(--ink); font-size: 14px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: #fff; color: var(--primary-dark); }
.skip-link:focus { top: 10px; }

.app-header { position: sticky; top: 0; z-index: 30; height: 64px; background: #176f9f; box-shadow: 0 2px 11px rgba(18, 59, 93, .18); color: #fff; }
.header-inner { display: flex; width: min(1480px, calc(100% - 32px)); height: 100%; margin: 0 auto; align-items: center; justify-content: flex-start; }
.product-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 11px; background: rgba(255,255,255,.14); font-family: "STKaiti", "KaiTi", serif; font-size: 23px; font-weight: 800; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 19px; letter-spacing: .08em; }
.brand-copy small { color: #d8edf7; font-size: 11px; letter-spacing: .08em; }
.header-context { display: flex; align-items: center; gap: 13px; margin-left: 24px; font-size: 13px; }
.environment-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.1); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8be1cc; box-shadow: 0 0 0 3px rgba(139,225,204,.13); }
.header-date { color: #e4f2f8; font-variant-numeric: tabular-nums; }
.legacy-link { padding: 7px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; color: #fff; text-decoration: none; }
.legacy-link:hover { background: rgba(255,255,255,.1); }

.primary-nav { position: sticky; top: 64px; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); }
.primary-nav-inner { display: flex; width: min(1480px, calc(100% - 32px)); height: 50px; margin: 0 auto; align-items: stretch; gap: 8px; }
.primary-nav a { position: relative; display: grid; min-width: 112px; place-items: center; padding: 0 16px; color: #425b6b; font-weight: 700; text-decoration: none; }
.primary-nav a { min-height: 38px; margin: 6px 0; border: 1px solid #c5d7e0; border-radius: 9px; background: linear-gradient(180deg,#fff 0%,#f2f7fa 100%); box-shadow: 0 3px 0 #c2d3dc; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease; }
.primary-nav a:hover { color: var(--primary-dark); border-color: #9fbfd0; background: #fafdff; transform: translateY(-1px); }
.primary-nav a:active { transform: translateY(2px); box-shadow: 0 1px 0 #aec4d0; }
.primary-nav a.active { color: #fff; border-color: var(--primary-dark); background: var(--primary); box-shadow: 0 2px 0 var(--primary-dark); transform: translateY(1px); }
.primary-nav a.active::after { display: none; }
.primary-nav a[aria-disabled="true"] { cursor: default; }
.primary-nav a[aria-disabled="true"]:active { transform: none; box-shadow: 0 3px 0 #c2d3dc; }

.page-shell { width: min(1480px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 34px; }
.workspace-heading { display: flex; min-height: 64px; align-items: flex-start; justify-content: space-between; margin-bottom: 13px; }
.eyebrow, .section-kicker { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.workspace-heading h1 { margin: 4px 0 3px; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.workspace-heading p { margin: 0; color: var(--muted); }
.readiness-badge { padding: 7px 10px; border: 1px solid #c8dce7; border-radius: 9px; background: #f8fbfd; color: #547083; font-size: 12px; font-weight: 700; }

.toolbar-card { display: flex; min-height: 70px; align-items: end; gap: 18px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.date-field { display: grid; gap: 6px; }
.date-field label { color: var(--muted); font-size: 11px; font-weight: 700; }
.date-field input { width: 164px; min-height: 38px; padding: 7px 10px; border: 1px solid #bfd0da; border-radius: 9px; outline: none; color: var(--ink); }
.date-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(36,127,174,.11); }
.quick-date-actions { display: flex; gap: 7px; }
.quick-date { min-height: 38px; padding: 8px 15px; border: 1px solid #c9d8e1; border-radius: 9px; background: linear-gradient(180deg,#fff 0%,#f2f7fa 100%); color: #3b586b; cursor: pointer; font-weight: 700; box-shadow: 0 3px 0 #c6d6de; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease; }
.quick-date:hover { border-color: #94b9cc; color: var(--primary-dark); background: #fbfdff; transform: translateY(-1px); }
.quick-date:active { transform: translateY(2px); box-shadow: 0 1px 0 #aec4d0; }
.quick-date.active { border-color: var(--primary-dark); background: var(--primary); color: #fff; box-shadow: 0 2px 0 var(--primary-dark); transform: translateY(1px); }
.quick-date.secondary { background: #fff; }
.toolbar-status { display: grid; gap: 5px; margin-left: 0; text-align: left; }
.toolbar-status span { color: var(--muted-light); font-size: 11px; }
.toolbar-status strong { color: #314d5e; font-size: 13px; font-variant-numeric: tabular-nums; }
.data-freshness { display: flex; gap: 18px; padding: 8px 4px 1px; color: var(--muted); font-size: 11px; }
.data-freshness b { color: #3d5c6d; font-weight: 700; }
.research-filter-panel[hidden] { display: none; }
.research-filters { position: relative; z-index: 10; display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; margin: 0 0 10px; padding: 9px 11px; overflow: visible; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.research-filters > div { display: flex; align-items: center; gap: 5px; }
.research-filters > div > span, .research-filters label { color: var(--muted); font-size: 11px; font-weight: 750; }
.filter-choice { min-height: 32px; padding: 6px 10px; border: 1px solid #c9d8e1; border-radius: 8px; background: #f8fbfc; color: #3b586b; cursor: pointer; font-size: 12px; font-weight: 700; }
.filter-choice:hover { border-color: #94b9cc; background: #fbfdff; }
.filter-choice:active { transform: translateY(1px); }
.filter-choice.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.primary-query { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.league-multi-filter { position: relative; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }
.league-picker-trigger { min-height: 32px; padding: 6px 10px; border: 1px solid #c9d8e1; border-radius: 8px; background: #fff; color: var(--primary-dark); cursor: pointer; font-size: 12px; font-weight: 700; }
.league-picker { position: absolute; top: 38px; left: 24px; z-index: 50; width: min(520px, calc(100vw - 48px)); padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(16,24,40,.16); }
.league-picker-options { display: grid; max-height: 330px; overflow: auto; gap: 9px; }
.league-picker-group { display: grid; gap: 5px; }
.league-picker-group > strong { padding: 2px 6px; color: var(--primary-dark); font-size: 11px; }
.league-picker-group .league-bundle { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid #bfd5e2; border-radius: 8px; background: var(--primary-soft); color: var(--primary-dark); cursor: pointer; }
.league-picker-group .league-bundle strong { font-size: 12px; }
.league-picker-group-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.league-picker-group.league-priority .league-picker-group-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.league-picker-options label { display: flex; align-items: center; gap: 7px; padding: 6px; border-radius: 6px; color: var(--ink); font-size: 12px; font-weight: 500; }
.league-picker-options label:hover { background: var(--primary-soft); }
.league-picker-actions { display: flex; justify-content: flex-start; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.league-picker-actions button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--primary-dark); cursor: pointer; font-size: 11px; font-weight: 750; }
.research-filters select { min-width: 150px; min-height: 32px; margin: 0 0 0 5px; padding: 5px 8px; border: 1px solid #c9d8e1; border-radius: 8px; background: #fff; color: var(--ink); }
.secondary-context { margin-top: 12px; }
.secondary-context > summary { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--primary-dark); cursor: pointer; font-weight: 750; }
.secondary-context[open] > summary { border-radius: 10px 10px 0 0; background: var(--primary-soft); }
.interval-section-title { padding: 10px 12px 7px; color: var(--primary-dark); font-size: 13px; font-weight: 800; }
.interval-section-title small { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.interval-section > .match-row.header { position: sticky; top: 0; z-index: 1; border-radius: 0; }

.workspace-tabs { display: flex; gap: 4px; margin: 14px 0 0; padding: 5px; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: #f8fbfc; }
.workspace-tab { min-width: 112px; padding: 10px 17px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #516a7a; cursor: pointer; font-weight: 750; box-shadow: 0 2px 0 transparent; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease; }
.workspace-tab:hover { color: var(--primary-dark); border-color: #c8dce7; background: #edf5f8; transform: translateY(-1px); box-shadow: 0 2px 0 #c7d9e2; }
.workspace-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 #aec4d0; }
.workspace-tab.active { border-color: #b8d1df; background: var(--primary-soft); color: var(--primary-dark); box-shadow: 0 2px 0 #a9c4d4; transform: translateY(1px); }
.tab-panel { padding-top: 12px; }

.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.metric-card, .panel-card, .placeholder-panel { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.metric-card { position: relative; min-height: 104px; overflow: hidden; padding: 14px 15px; border-radius: var(--radius-md); }
.metric-card::before { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #85b6cc; content: ""; }
.metric-card span { display: block; color: #536b7a; font-weight: 700; }
.metric-card strong { display: block; height: 40px; margin-top: 4px; color: var(--primary-dark); font-size: 29px; line-height: 40px; }
.metric-card small { color: var(--muted-light); font-size: 11px; }

.content-grid { display: grid; gap: 12px; margin-top: 12px; }
.content-grid-main { grid-template-columns: 1.15fr .85fr; }
.panel-card { padding: 16px; border-radius: var(--radius-lg); }
.section-heading { display: flex; min-height: 38px; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.section-heading h2 { margin: 3px 0 0; font-size: 17px; }
.match-range-date { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.soft-tag { padding: 5px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 10px; font-weight: 750; }
.match-title-actions { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.match-title-actions h2 { margin: 0; }
.export-excel { min-height: 32px; padding: 6px 12px; border: 1px solid #197044; border-radius: 8px; background: #218653; color: #fff; cursor: pointer; font-size: 12px; font-weight: 750; box-shadow: 0 2px 0 #176238; }
.export-excel:hover:not(:disabled) { background: #197044; transform: translateY(-1px); }
.export-excel:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #145331; }
.export-excel:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.filter-collapse { min-height: 32px; padding: 6px 12px; border: 1px solid #9fb8c7; border-radius: 8px; background: #f3f8fa; color: #355467; cursor: pointer; font-size: 12px; font-weight: 750; box-shadow: 0 2px 0 #c8d8e0; }
.filter-collapse:hover { border-color: #7fa4b8; background: #e9f3f7; color: var(--primary-dark); transform: translateY(-1px); }
.filter-collapse:active { transform: translateY(1px); box-shadow: 0 1px 0 #b5cbd6; }

.session-list { display: grid; gap: 8px; }
.session-row { display: grid; grid-template-columns: 36px 1fr 72px 120px; min-height: 60px; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-soft); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease; }
.session-row[role="button"] { cursor: pointer; box-shadow: 0 2px 0 #dbe7ed; }
.session-row[role="button"]:hover { transform: translateY(-1px); border-color: #b4d0df; background: #fbfdff; box-shadow: 0 4px 0 #d5e4eb; }
.session-row[role="button"]:active { transform: translateY(2px); box-shadow: 0 1px 0 #c5d8e2; }
.session-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; font-weight: 800; }
.session-icon.asia { background: var(--teal); }
.session-icon.europe { background: var(--violet); }
.session-icon.americas { background: var(--cyan); }
.session-row > div:nth-child(2) { display: grid; gap: 3px; }
.session-row small { color: var(--muted-light); font-size: 11px; }
.session-stat { display: grid; text-align: right; }
.session-stat b { font-size: 17px; }
.session-stat span { color: var(--muted-light); font-size: 10px; }
.progress-track { height: 6px; overflow: hidden; border-radius: 6px; background: #e5edf1; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

.interval-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.interval-grid article { display: grid; min-height: 124px; align-content: center; justify-items: center; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-soft); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease; }
.interval-grid article[role="button"] { cursor: pointer; box-shadow: 0 2px 0 #dbe7ed; }
.interval-grid article.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 2px 0 #9fbfd0; }
.interval-grid article[role="button"]:hover { transform: translateY(-1px); border-color: #b4d0df; background: #fbfdff; box-shadow: 0 4px 0 #d5e4eb; }
.interval-grid article[role="button"]:active { transform: translateY(2px); box-shadow: 0 1px 0 #c5d8e2; }
.interval-grid time { color: #355467; font-size: 14px; font-weight: 800; }
.interval-grid strong { margin: 6px 0 2px; color: var(--primary); font-size: 28px; }
.interval-grid small { color: var(--muted-light); font-size: 10px; }

.leagues-card { margin-top: 12px; }
.legend { display: flex; gap: 13px; color: var(--muted); font-size: 11px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.legend-dot.sfc { background: var(--warning); }
.league-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.league-placeholder-card { padding: 13px; border: 1px solid var(--line-soft); border-radius: 11px; background: #fbfcfd; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease; }
.league-placeholder-card[role="button"] { cursor: pointer; box-shadow: 0 2px 0 #dbe7ed; }
.league-placeholder-card.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 2px 0 #9fbfd0; }
.league-placeholder-card[role="button"]:hover { transform: translateY(-1px); border-color: #b4d0df; background: #fbfdff; box-shadow: 0 4px 0 #d5e4eb; }
.league-placeholder-card[role="button"]:active { transform: translateY(2px); box-shadow: 0 1px 0 #c5d8e2; }
.league-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.evidence-state { padding: 4px 7px; border-radius: 999px; background: #eef2f5; color: #71838f; font-size: 9px; font-weight: 700; }
.league-card-count { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 10px; }
.league-card-count b { color: var(--primary-dark); font-size: 25px; }
.league-card-count span { color: var(--muted); font-size: 11px; }
.league-card-meta { display: flex; gap: 16px; padding-top: 9px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; }
.league-card-meta b { color: var(--ink); }
.empty-state { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 82px; margin-top: 10px; border: 1px dashed #cbd9e1; border-radius: 11px; background: #fafcfd; }
.empty-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary-dark); font-size: 17px; }
.empty-state strong { font-size: 13px; }
.empty-state p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.matches-card { margin-top: 12px; }
.data-loading { display: grid; min-height: 112px; place-items: center; border: 1px dashed #cbd9e1; border-radius: 11px; color: var(--muted); background: #fafcfd; }
.match-list { display: grid; width: 100%; max-width: 100%; height: var(--match-list-height, 760px); min-height: 760px; max-height: none; align-content: start; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); }
.match-day-section + .match-day-section { border-top: 3px solid var(--page-bg); }
.match-day-title { position: sticky; top: 38px; z-index: 3; padding: 8px 11px; border-bottom: 1px solid #c9dce6; background: #e6f1f7; color: var(--primary-dark); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.first-screen-matches { margin-top: 0; }
.first-screen-matches .section-heading { margin-bottom: 8px; }
.match-row { display: grid; grid-template-columns: minmax(42px,.45fr) minmax(48px,.55fr) minmax(170px,2.4fr) minmax(90px,1.15fr) minmax(90px,1.15fr) minmax(220px,3.3fr); width: 100%; min-width: 0; min-height: 62px; align-items: center; gap: 3px; padding: 7px 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-soft); }
.match-row.header { position: sticky; top: 0; z-index: 5; min-height: 38px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #edf4f8; color: #536b7a; font-size: 13px; font-weight: 650; }
.match-row.header > span { text-align: center; }
.match-row-data { border-width: 0 0 1px; border-radius: 0; background: var(--surface-soft); transition: background-color .12s ease, border-color .12s ease; }
.match-row-data:hover { border-color: #c4dce8; background: #f1f7fb; }
.match-row > span, .match-row > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-pill { display: inline-flex; min-width: 45px; max-width: 100%; min-height: 24px; align-items: center; justify-content: center; padding: 3px 7px; overflow: hidden; border-radius: 2px; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(0,0,0,.16); }
.league-england-red { background: #f0353b; }
.league-england-orange { background: #d93600; }
.league-england-blue { background: #2465b5; }
.league-spain { background: #006b3c; }
.league-spain-light { background: #13845c; }
.league-italy { background: #0867ec; }
.league-italy-light { background: #3384d5; }
.league-germany { background: #a000a8; }
.league-germany-light { background: #7134a8; }
.league-france { background: #733636; }
.league-france-light { background: #98605a; }
.league-netherlands { background: #f05d91; }
.league-netherlands-light { background: #c84f81; }
.league-portugal { background: #008f89; }
.league-sweden { background: #064b91; }
.league-norway { background: #ef2a0a; }
.league-finland { background: #327fbd; }
.league-japan { background: #009d25; }
.league-japan-two { background: #087d29; }
.league-korea { background: #3a35a6; }
.league-korea-two { background: #5b55b9; }
.league-australia { background: #eb681c; }
.league-saudi { background: #23810c; }
.league-mls { background: #2457a3; }
.league-brazil { background: #b3b900; }
.league-argentina { background: #4b82b8; }
.league-tone-0 { background: #2478a8; }
.league-tone-1 { background: #5962aa; }
.league-tone-2 { background: #16808a; }
.league-tone-3 { background: #774aa0; }
.league-tone-4 { background: #a56a18; }
.league-tone-5 { background: #3c7a4c; }
.league-tone-6 { background: #a34865; }
.league-tone-7 { background: #536b78; }
.match-time { color: #355467; font-variant-numeric: tabular-nums; font-weight: 750; text-align: center; }
.match-league { display: flex; justify-content: center; color: var(--primary-dark); font-weight: 700; text-align: center; }
.matchup-group { display: grid; grid-template-columns: minmax(0,1fr) minmax(28px,38px) minmax(0,1fr); width: 100%; max-width: 300px; align-items: center; justify-self: center; gap: 0; }
.matchup-group > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchup-group > .match-team { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.16; }
.matchup-header > span { text-align: center; }
.match-team { color: var(--ink); font-size: 18px; font-weight: 700; text-align: center; }
.match-score { color: #173f58; font-size: 15px; font-weight: 850; text-align: center; font-variant-numeric: tabular-nums; }
.match-odds, .match-market { color: #4e6878; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.match-odds { display: grid; grid-template-columns: repeat(3, minmax(0,38px)); width: 100%; max-width: 116px; align-items: center; justify-content: center; justify-self: center; gap: 1px; }
.odds-value { display: inline-block; width: 100%; min-width: 0; text-align: center; border-radius: 4px; }
.opening-choice { min-height: 28px; padding: 2px 1px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: inherit; }
.opening-choice:hover { box-shadow: inset 0 0 0 1px #83acc1; }
.opening-choice.selected-minimum { background: #86efac; color: #14532d; box-shadow: inset 0 0 0 1px #4caf72; }
.opening-choice.selected-other { background: #f0353b; color: #fff; box-shadow: inset 0 0 0 1px #d6262d; }
.opening-odds .result-green { background: #86efac; color: #14532d; }
.opening-odds .result-blue { background: #7dd3fc; color: #0c4a6e; }
.opening-odds .result-red { background: #f0353b; color: #fff; }
.match-market { display: grid; justify-items: stretch; gap: 5px; text-align: center; }
.market-total { text-align: center; font-weight: 650; }
.market-total-top { display: inline-flex; width: max-content; max-width: 100%; margin-inline: auto; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 5px; background: #e60012; box-shadow: 0 1px 3px rgba(150,0,12,.24); color: #fff; }
.market-total-top .market-lottery { color: #fff; }
.market-lottery { color: var(--primary-dark); font-size: 11px; font-style: normal; font-weight: 750; }
.market-detail-link { display: inline-flex; margin-left: 7px; padding: 2px 6px; border: 1px solid #9dbdce; border-radius: 5px; background: #fff; color: #176789; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1.35; text-decoration: none; vertical-align: middle; }
.market-detail-link:hover { border-color: #176789; background: #e8f4fa; }
.market-total-top .market-detail-link { border-color: #fff; background: #fff; color: #b00012; }
.market-triplet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 440px; align-items: center; justify-self: center; gap: 1px; text-align: center; }
.market-triplet > span { min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.market-volume-share-row { color: #536f80; font-size: 11px; }
.market-volume-share-row b { margin-right: 4px; color: var(--muted); font-weight: 700; }
.match-empty { padding: 24px; border: 1px dashed #cbd9e1; border-radius: 11px; color: var(--muted); text-align: center; }

button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid rgba(36,127,174,.28); outline-offset: 2px; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .5; }

.placeholder-panel { display: flex; min-height: 360px; align-items: center; justify-content: center; gap: 16px; border-radius: var(--radius-lg); }
.placeholder-panel > span { display: grid; min-width: 54px; height: 54px; place-items: center; border-radius: 13px; background: var(--primary-soft); color: var(--primary-dark); font-size: 19px; font-weight: 800; }
.module-placeholder { min-height: 300px; justify-content: flex-start; padding: 32px; }
.module-placeholder h1 { margin: 5px 0 8px; font-size: 24px; }
.module-placeholder p { margin: 5px 0; }
.module-status { color: var(--primary-dark) !important; font-weight: 750; }
.placeholder-panel h2 { margin: 0 0 5px; font-size: 18px; }
.placeholder-panel p { margin: 0; color: var(--muted); }

.page-footer { display: flex; width: min(1480px, calc(100% - 32px)); margin: 0 auto; justify-content: space-between; padding: 16px 0 22px; border-top: 1px solid #d6e2e8; color: var(--muted-light); font-size: 11px; }
.login-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--page-bg); }
.login-card { width: min(420px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.login-card .brand-mark { margin-bottom: 12px; background: var(--primary-soft); color: var(--primary-dark); }
.login-card h1 { margin: 0; color: var(--ink); font-size: 24px; }
.login-card p { margin: 5px 0 20px; color: var(--muted); }
.login-card form { display: grid; gap: 8px; }
.login-card label { color: var(--muted); font-size: 12px; font-weight: 750; }
.login-card input { width: 100%; min-height: 42px; margin: 0 0 7px; padding: 9px 11px; border: 1px solid #bfd0da; border-radius: 9px; }
.login-card button { min-height: 44px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; cursor: pointer; font-weight: 750; }
.login-card button:hover { background: var(--primary-dark); }
.login-card #error { min-height: 20px; color: #a23838; font-size: 12px; }

@media (max-width: 1240px) {
  html { min-width: 0; }
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .content-grid-main { grid-template-columns: 1fr; }
  .match-row { grid-template-columns: minmax(40px,.45fr) minmax(46px,.55fr) minmax(160px,2.4fr) minmax(86px,1.15fr) minmax(86px,1.15fr) minmax(205px,3.3fr); gap: 2px; padding-inline: 6px; }
  .matchup-group { grid-template-columns: minmax(0,1fr) minmax(26px,34px) minmax(0,1fr); max-width: 270px; }
  .match-odds { grid-template-columns: repeat(3,minmax(0,34px)); max-width: 104px; }
  .market-volume-share-row { font-size: 10px; }
  .match-team { font-size: 15px; }
}

@media (max-width: 760px) {
  .match-row { grid-template-columns: minmax(32px,.4fr) minmax(38px,.5fr) minmax(140px,2fr) minmax(72px,1fr) minmax(72px,1fr) minmax(165px,2.7fr); min-height: 56px; gap: 1px; padding-inline: 4px; }
  .match-team { font-size: 12px; }
  .match-odds, .match-market { font-size: 10px; }
  .match-team { line-height: 1.12; }
  .match-score { font-size: 12px; }
  .league-pill { min-width: 34px; padding-inline: 3px; font-size: 9px; }
  .matchup-group { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); }
  .match-odds { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .market-volume-share-row { font-size: 9px; }
}

@media (prefers-reduced-motion: no-preference) {
  .quick-date, .workspace-tab, .primary-nav a { transition: color .14s ease, background-color .14s ease, border-color .14s ease; }
}

.match-data-health {display:inline-block;vertical-align:baseline;margin-left:4px;padding:0 2px;min-width:18px;min-height:20px;border:0;background:transparent;color:#52616b;font:inherit;line-height:1.2;cursor:pointer;}
.match-data-health.needs-review {color:#875000;}
.match-data-health:focus-visible {outline:2px solid #875000;outline-offset:2px;}
#matchDataHealthDialog {max-width:min(560px,calc(100vw - 32px));}
#matchDataHealthTitle {overflow-wrap:anywhere;}
#matchDataHealthContent {line-height:1.65;font-size:14px;overflow-wrap:anywhere;}