/* ========== List Page ========== */
.list-sticky-top { position: sticky; top: 0; z-index: var(--z-header); background: var(--bg); }
.list-sticky-top.scrolled { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.list-tabs-wrap { background: var(--bg); padding: 0 var(--space-lg) var(--space-sm); margin-bottom: var(--space-sm); }
.list-tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--space-xs); padding: 0; max-width: var(--max-width); margin: 0 auto; }
.list-tabs::-webkit-scrollbar { display: none; }
.list-tab { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 var(--space-md); color: var(--text); cursor: pointer; white-space: nowrap; font-size: var(--text-base); font-weight: 600; border-radius: 16px; background: transparent; transition: background 0.2s ease, color 0.2s ease; }
.list-tab img { display: block; object-fit: contain; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-sizing: border-box; filter: brightness(1.1); }
.list-tab:hover { background: rgba(var(--text-rgb), 0.08); color: var(--text); }
.list-tab.active { background: var(--theme-3); color: var(--text); font-weight: 700; }

.match-list { display: flex; flex-direction: column; }
.match-item { border-bottom: 1px solid var(--border); }
.match-live { border-left: 3px solid var(--theme-2); }
.match-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) 0; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.match-link:active { background: var(--card); }

.match-meta { flex: 0 0 52px; text-align: center; line-height: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.match-date { font-size: var(--text-sm); font-weight: 600; color: var(--text-weak); }
.match-meta .match-state { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.match-meta .match-state.upcoming { color: var(--text); }

.match-info { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.match-league { font-size: var(--text-sm); font-weight: 600; color: var(--text-weak); text-transform: uppercase; letter-spacing: 0.04em; }
.match-info .match-league { display: none; }
.team-row { display: flex; align-items: center; gap: var(--space-md); }
.team-logo-small { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.team-logo-small img { width: 18px; height: 18px; object-fit: contain; filter: brightness(1.1); }
.team-name-main { width: 100px; font-size: var(--text-base); font-weight: 700; line-height: 1.2; color: var(--text); }
.team-score { font-size: var(--text-base); font-weight: 800; color: var(--text-dim); text-align: center; min-width: 20px; flex-shrink: 0; background: var(--card); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); }

.match-odds { flex: 0 0 45%; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.odds-row { display: flex; width: 100%; }
.odds-row .cell { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--radius-sm); }
.odds-row .cell:hover { background: transparent; }

@media (min-width: 1024px) {
  .match-link { gap: var(--space-lg); }
  .match-meta { flex: 0 0 15%; }
  .match-odds { flex: 0 0 45%; }
  .match-info .match-league { display: block; }
}