.match-center { max-width: 1120px; --match-surface: #fff; --match-soft: #f2f5f4; --match-border: #dce3e1; --match-text: #1e2925; --match-muted: #596860; color: var(--match-text); }
[data-theme="dark"] .match-center { --match-surface: #202524; --match-soft: #292f2d; --match-border: #3d4842; --match-text: #f2f6f3; --match-muted: #b3c0b8; }
.match-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.match-heading h1 { font-size:30px; line-height:1.2; margin:6px 0 0; overflow-wrap:anywhere; }
.match-kicker { color:#168054; font-size:12px; font-weight:800; }
[data-theme="dark"] .match-kicker { color:#70dbaa; }
.match-center .btn { min-height:42px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; word-break:normal; }
.match-filters { display:grid; grid-template-columns:minmax(220px,1.25fr) minmax(160px,1fr) minmax(150px,.8fr) auto auto; gap:12px; align-items:end; padding:20px 0; border-block:1px solid var(--match-border); }
.match-filters > div { min-width:0; }
.match-filters label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.match-filters input,.match-filters select { width:100%; min-width:0; height:42px; background-color:var(--match-surface); color:var(--match-text); border-color:var(--match-border); }
.match-date-control { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:4px; }
.match-date-control .btn { padding:0; }
.match-summary { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; padding:22px 0; font-size:13px; color:var(--match-muted); }
.match-summary strong { color:var(--match-text); margin-right:auto; }
.match-league { margin-bottom:28px; border-bottom:1px solid var(--match-border); }
.match-league h2 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; padding:14px 16px; font-size:15px; font-weight:700; background:var(--match-soft); border-left:3px solid #189466; }
.match-league h2 span { font-size:12px; font-weight:400; color:var(--match-muted); margin-left:auto; }
.match-row { display:grid; grid-template-columns:110px minmax(0,1fr) 94px minmax(0,1fr); align-items:center; gap:14px; min-height:78px; padding:14px 16px; background:var(--match-surface); border-top:1px solid var(--match-border); }
.match-time { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--match-muted); }
.match-time time { font-weight:600; font-variant-numeric:tabular-nums; }
.match-team { display:flex; align-items:center; gap:10px; min-width:0; font-size:14px; font-weight:600; }
.match-team span { overflow-wrap:anywhere; }
.match-home { justify-content:flex-end; text-align:right; }
.match-team img { width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.match-score { text-align:center; font-variant-numeric:tabular-nums; font-size:19px; font-weight:800; }
.match-score small { display:block; font-size:10px; font-weight:500; }
.is-live .match-score,.is-live .match-time span { color:#b51e38; }
[data-theme="dark"] .is-live .match-score,[data-theme="dark"] .is-live .match-time span { color:#ff8fa4; }
.match-empty { padding:56px 16px; text-align:center; border-bottom:1px solid var(--match-border); }
.match-empty > i { display:block; font-size:32px; color:var(--match-muted); margin-bottom:14px; }
.match-empty h2 { font-size:20px; }
.match-empty p,.match-source { color:var(--match-muted); font-size:13px; }
.match-source { margin-top:20px; }
@media(max-width:991px) { .match-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .match-filters > div:first-child { grid-column:1/-1; } }
@media(max-width:575px) { .match-heading { align-items:flex-start; flex-direction:column; } .match-heading h1 { font-size:26px; } .match-row { grid-template-columns:58px minmax(0,1fr) 52px minmax(0,1fr); gap:8px; padding:14px 8px; } .match-team { font-size:12px; flex-direction:column; gap:5px; text-align:center; } .match-home img { order:-1; } .match-time { font-size:10px; } .match-score { font-size:16px; } .match-league h2 { font-size:14px; } }