/* UI refresh · 2026-10-16. Presentation only; existing state colors are preserved. */
:root {
  --ui-ink: #172b27;
  --ui-muted: #596c66;
  --ui-green: #007a50;
  --ui-line: #dbe5df;
  --ui-surface: #ffffff;
  --ui-canvas: #f0f4f1;
}
body { background: var(--ui-canvas); color: var(--ui-ink); line-height: 1.5; }
button, input, select { font-family: inherit; }
button, a, [data-action] { -webkit-tap-highlight-color: rgba(0,122,80,.12); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #007a50; outline-offset: 3px;
}
button, a, [data-action] { touch-action: manipulation; }
button, a, .match-card, .match-t3-cell { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.head { height: 76px; padding: 0 max(20px, calc((100vw - 1160px)/2)); border-bottom: 1px solid var(--ui-line); box-shadow: 0 3px 16px #19392b06; gap: 12px; }
.head-left { gap: 12px; }
.head-date { color: var(--ui-ink); }
.head-login { margin: 0; box-shadow: none; border-color: #bcdbcb; }
.head-right { gap: 8px; }
.head-data { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: var(--ui-green); border-radius: 10px; box-shadow: none; font-size: 15px; letter-spacing: 0; }
.head-data:first-child { background: #edf5f0; color: var(--ui-green); border: 1px solid #c6ddcf; }
.head-stop { margin: 0; }
.page { max-width: 1200px; box-sizing: border-box; margin: auto; padding: 104px 20px 220px; }
.page.no-top { padding-top: 24px; }
.ui-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 20px; }
.ui-intro h1 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.7px; line-height: 1.3; color: var(--ui-ink); }
.ui-intro p { margin: 0; font-size: 14px; color: var(--ui-muted); }
.ui-intro-mark { flex: none; padding: 7px 12px; border: 1px solid #c6ddcf; border-radius: 7px; background: #e4efe8; font-size: 12px; font-weight: 700; color: var(--ui-green); }
.live-status { font-size: 14px; margin-bottom: 3px; }
.live-time { color: var(--ui-muted); font-size: 12px; margin-bottom: 18px; }
.live-scroll { display: grid; gap: 14px; align-items: start; }
.match-card, .live-scroll > .match-card:first-child { border: 1px solid var(--ui-line); border-radius: 14px; padding: 16px; box-shadow: 0 3px 12px #183d2b04; }
.match-t1 { margin-bottom: 12px; }
.match-t1-no { color: var(--ui-muted); font-size: 13px; gap: 4px; }
.match-t1-single { font-size: 11px; height: 20px; padding: 0 6px; border-radius: 4px; background: #b92f39; }
.match-t1-league { height: 23px; padding: 0 9px; font-size: 12px; color: #425a50; background: #eff4f0; border-radius: 5px; }
.match-t1-right { gap: 8px; }
.match-t1-detail { color: var(--ui-green); display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; }
.match-t2 { min-height: 44px; height: auto; padding-right: 26px; margin-bottom: 14px; }
.match-t2-name { font-size: 17px; font-weight: 700; color: var(--ui-ink); }
.match-t2-time { font-size: 13px; color: var(--ui-muted); }
.match-t2-xi { right: 0; top: 0; width: 26px; min-height: 44px; height: 100%; padding: 0; font-size: 13px; color: var(--ui-green); background: transparent; }
.match-t3-cell, .match-t3-hcap { min-height: 44px; }
.match-t3-cell { background: #fcfdfc; }
.match-t3-cell-val { font-size: 15px; color: #425a50; font-weight: 600; font-variant-numeric: tabular-nums; }
.match-t3-cell-label { font-size: 14px; }
.match-t3-more { font-size: 12px; border-radius: 0 8px 8px 0; background: #fafcfb; }
.match-tip { padding: 18px 8px; font-size: 13px; }
.bet-panel { max-width: 1160px; margin: auto; border: 1px solid var(--ui-line); border-top: 3px solid var(--ui-green); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px #193b2910; }
.bet-summary { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
.bet-pass, .bet-mult-btn, .bet-mult-input, .bet-open-link, .bet-clear { min-height: 44px; box-sizing: border-box; }
.bet-clear { color: #68766e; }
.bet-sel-count, .bet-info-item { color: var(--ui-muted); }
.btn-save { min-height: 44px; border-radius: 9px; background: var(--ui-green); }
.card { border: 1px solid var(--ui-line); box-shadow: 0 3px 12px #183d2b04; }
.nj-beian { font-size: 12px; }
.nj-beian a { color: var(--ui-muted); }
/* Match centre keeps its dark data-reading surface. */
.mc-page, .mc-modal { --mc-bg: #101e23; --mc-card: #192c32; --mc-border: #30474c; --mc-text: #eef5f3; --mc-muted: #afc1bf; --mc-green: #71e4b3; }
#app.mc-page { max-width: none; }
.mc-page { font-size: 14px; }
.mc-page-header { padding: 28px max(24px, calc((100vw - 1080px)/2)); gap: 16px; border-bottom-color: var(--mc-border); background: #13252a; }
.mc-page-header b { font-size: 26px; letter-spacing: -.5px; }
.mc-page-header small { font-size: 13px; margin-top: 4px; }
.mc-back { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--mc-border); border-radius: 10px; background: #1a3036; }
.mc-list-nav { justify-content: center; gap: 10px; padding: 18px 20px; }
.mc-list-nav button { max-width: 350px; min-height: 44px; border-radius: 9px; }
.mc-list-nav button.active { color: #082f22; background: var(--mc-green); border-color: var(--mc-green); font-weight: 700; }
.mc-list-nav button.active span { color: #174f3c; }
.mc-page-status { max-width: 1080px; box-sizing: border-box; margin: auto; padding: 20px 0; font-size: 13px; line-height: 1.7; }
.mc-page-list { max-width: 1080px; padding: 0 20px 24px; }
.mc-list-group { gap: 12px; }
.mc-list-group h2 { margin: 8px 0 4px; font-size: 17px; }
.mc-list-card { border-radius: 12px; padding: 18px 20px; box-shadow: 0 4px 12px #0000000b; }
.mc-list-card strong { font-size: 18px; margin: 12px 0 10px; line-height: 1.6; overflow-wrap: anywhere; }
.mc-list-card > div { flex-wrap: wrap; gap: 6px 16px; }
.mc-list-card small { font-size: 12px; }
.mc-close { width: 44px; height: 44px; }
.mc-tabs button { min-height: 46px; }
.mc-section-note { font-size: 12px; }
.mc-modal :focus-visible, .mc-page :focus-visible { outline-color: #71e4b3; }
@media (hover: hover) {
  .match-card:hover { border-color: #abc9b8; box-shadow: 0 5px 18px #193b290a; }
  .match-t3-cell:not(.empty):not(.active):hover { background: #e9f3ee; }
  .head-data:hover { filter: brightness(.94); }
  .mc-list-card:hover { background: #20383e; }
}
@media (min-width: 500px) { html { font-size: 64px; } }
@media (min-width: 1100px) { .live-scroll { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) {
  .head { min-height: 90px; height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
  .head-left { gap: 7px; justify-content: space-between; width: 100%; }
  .head-right { width: 100%; justify-content: flex-end; }
  .head-data { min-height: 32px; padding: 0 12px; font-size: 12px; border-radius: 7px; }
  .head-stop, .head-login { font-size: 12px; min-width: 0; }
  .head-date { font-size: 14px; }
  .page { padding: 122px 12px 230px; }
  .ui-intro { margin-bottom: 16px; }
  .ui-intro h1 { font-size: 23px; }
  .ui-intro p { font-size: 12px; }
  .ui-intro-mark { display: none; }
  .live-scroll { gap: 12px; }
  .match-card, .live-scroll > .match-card:first-child { padding: 12px; border-radius: 12px; }
  .match-t2-name { font-size: 15px; }
  .match-t2-time { font-size: 12px; }
  .match-t3-cell-val { font-size: 14px; }
  .bet-summary { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .bet-row1 { flex-wrap: wrap; }
  .bet-info { flex-wrap: wrap; gap: 4px 12px; }
  .mc-page-header { padding: 20px 14px; }
  .mc-page-header b { font-size: 22px; }
  .mc-page-header small { font-size: 12px; }
  .mc-list-nav { padding: 12px; gap: 7px; }
  .mc-page-status { padding: 16px; }
  .mc-page-list { padding: 0 12px 20px; }
  .mc-list-card { padding: 15px; }
  .mc-list-card strong { font-size: 16px; }
  .mc-header { padding-top: max(13px, env(safe-area-inset-top)); }
  .mc-body { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.live-scroll > .match-tip, .live-scroll > .empty-tip { grid-column: 1 / -1; border-radius: 8px; }
/* Match centre structural redesign */
.mc-page-header { padding-top: 18px; padding-bottom: 18px; }
.mc-page-header b { font-size: 20px; }
.mc-hub-intro { max-width: 1080px; margin: auto; padding: 36px 20px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.mc-eyebrow { font-size: 11px; color: var(--mc-green); font-weight: 700; letter-spacing: 2px; }
.mc-hub-intro h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; margin: 10px 0; letter-spacing: -.5px; }
.mc-hub-intro p { font-size: 14px; color: var(--mc-muted); margin: 0; }
.mc-calculator-link { color: var(--mc-green); text-decoration: none; padding: 12px 16px; border: 1px solid var(--mc-border); border-radius: 8px; white-space: nowrap; }
.mc-list-nav { max-width: 1080px; margin: auto; justify-content: flex-start; border-bottom: 0; padding-top: 0; }
.mc-list-nav button { flex: initial; min-width: 130px; max-width: none; }
.mc-list-nav span { display: inline-flex; justify-content: center; min-width: 19px; border-radius: 4px; background: #ffffff12; padding: 1px 4px; }
.mc-page-status { max-width: 1080px; padding: 12px 16px; border: 1px solid var(--mc-border); border-left: 3px solid var(--mc-green); border-radius: 6px; background: #172a30; margin-bottom: 24px; }
.mc-list-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mc-list-group > h2, .mc-list-group > .mc-empty { grid-column: 1 / -1; }
.mc-list-group > h2 { margin: 0 0 2px; font-size: 18px; }
.mc-list-card.mc-fixture-card { padding: 0; overflow: hidden; border-radius: 14px; }
.mc-fixture-card .mc-fixture-meta { display: flex; align-items: center; padding: 14px 18px; gap: 10px; font-size: 12px; border-bottom: 1px solid #ffffff0a; }
.mc-league-label { color: var(--mc-text); font-weight: 700; }
.mc-fixture-meta .mc-state-label { margin-left: auto; border: 1px solid #3d5559; border-radius: 5px; padding: 2px 7px; font-size: 11px; }
.mc-state-live .mc-state-label { color: #8ff0bd; background: #14523b; border-color: #257d58; }
.mc-state-finished .mc-state-label { color: #d2dce0; background: #33474c; }
.mc-fixture-card .mc-fixture-versus { display: grid; grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr); align-items: center; gap: 8px; padding: 24px 18px; color: var(--mc-text); }
.mc-team-side { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.mc-team-monogram { display: grid; place-items: center; width: 42px; height: 46px; border-radius: 11px; border: 1px solid #3b595c; background: #274147; color: #d8ece5; font-size: 20px; font-weight: 500; }
.mc-team-side:last-child .mc-team-monogram { background: #293a4b; border-color: #3d5367; color: #dae5f1; }
.mc-fixture-score { display: flex; flex-direction: column; text-align: center; gap: 6px; }
.mc-fixture-score b { color: #f0f7f4; font-size: 25px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.mc-fixture-score small { color: var(--mc-muted); font-size: 11px; }
.mc-fixture-card .mc-fixture-odds { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px 14px; padding: 10px 14px; border-top: 1px solid #ffffff0a; color: var(--mc-muted); font-size: 12px; }
.mc-fixture-odds b { color: var(--mc-text); font-variant-numeric: tabular-nums; }
.mc-fixture-card .mc-fixture-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 18px; background: #ffffff03; border-top: 1px solid #ffffff0a; font-size: 12px; }
.mc-fixture-footer > span:last-child { color: var(--mc-green); }
.mc-dialog { width: min(1060px, calc(100vw - 40px)); border-radius: 18px; }
.mc-header { padding: 22px 24px; background: #182f35; }
.mc-header .mc-detail-versus { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 18px; text-align: center; margin: 24px 0; }
.mc-detail-versus b { font-size: 23px; font-weight: 650; overflow-wrap: anywhere; }
.mc-header .mc-detail-versus span { font-size: 34px; margin: 0; font-variant-numeric: tabular-nums; }
.mc-header > div > small { display: block; text-align: center; line-height: 1.7; }
.mc-body[data-view-tab="overview"] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; gap: 16px; }
.mc-body[data-view-tab="overview"] > .mc-section { margin: 0; min-width: 0; }
.mc-body[data-view-tab="overview"] > .mc-section:first-child { grid-column: 1 / -1; }
.mc-section > h3 { padding: 14px 16px; font-size: 14px; }
.mc-section .mc-empty { padding: 24px 16px; background: #ffffff03; font-size: 13px; line-height: 1.8; }
.mc-section .mc-metrics > div { background: #203a40; padding: 16px 8px; }
.mc-section .mc-metrics b { font-variant-numeric: tabular-nums; }
.mc-table-head { background: #233c42; }
.mc-table-row { padding-top: 12px; padding-bottom: 12px; }
.mc-table-row:nth-child(odd) { background: #ffffff03; }
@media (max-width: 700px) {
 .mc-hub-intro { padding: 24px 16px 20px; }
 .mc-hub-intro p { font-size: 12px; }
 .mc-calculator-link { display: none; }
 .mc-list-nav { gap: 6px; padding: 0 12px 16px; }
 .mc-list-nav button { flex: 1; min-width: 0; padding: 10px 4px; font-size: 12px; }
 .mc-page-status { margin: 0 12px 22px; font-size: 12px; }
 .mc-list-group { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .mc-fixture-card .mc-fixture-versus { padding: 20px 14px; }
 .mc-team-side { font-size: 15px; }
 .mc-dialog { inset: 0; transform: none; width: 100%; height: 100dvh; border-radius: 0; }
 .mc-header { padding: max(14px, env(safe-area-inset-top)) 14px 16px; }
 .mc-header .mc-detail-versus { gap: 8px; margin: 20px 0; }
 .mc-detail-versus b { font-size: 17px; }
 .mc-header .mc-detail-versus span { font-size: 24px; }
 .mc-body[data-view-tab="overview"] { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .mc-body[data-view-tab="overview"] > .mc-section:first-child { grid-column: auto; }
}
@media (min-width: 701px) {
 .mc-modal .mc-header { cursor: grab; user-select: none; touch-action: none; }
 .mc-modal.mc-dragging, .mc-modal.mc-dragging .mc-header { cursor: grabbing; }
 .mc-modal .mc-close { cursor: pointer; }
}
/* Independent match windows; the page remains interactive outside each dialog. */
.mc-modal { pointer-events: none; }
.mc-modal .mc-overlay { display: none; }
.mc-modal .mc-dialog { pointer-events: auto; box-shadow: 0 16px 60px #0008; }
@media (min-width: 701px) {
 .mc-modal .mc-dialog { width: min(860px, calc(100vw - 40px)); height: min(80vh, 850px); }
}

/* Scroll the detail body; never compress content rows to the viewport height. */
.mc-modal .mc-header, .mc-modal .mc-notice { flex-shrink: 0; }
.mc-body[data-view-tab="overview"] > .mc-section { min-height: min-content; }