/* ========== 调色板（参考 m.nowscore.com）========== */
:root {
  --brand:      #54488f;       /* 主紫 — header/active */
  --brand-2:    #3f3d90;       /* 深紫 — gradient */
  --brand-3:    #945ed8;       /* 亮紫 — hover/accent */
  --live:       #f04545;       /* 进行中红 */
  --warn:       #f9af06;       /* 黄色提示 */
  --win:        #5fa91b;       /* 胜利绿 */
  --info:       #0099eb;       /* 信息蓝 */

  --bg:         #f5f5f5;
  --bg2:        #ffffff;
  --bg3:        #f0f0f0;
  --line:       #eaeaea;
  --line-2:     #e5e5e5;

  --fg:         #333333;
  --fg-2:       #666666;
  --fg-3:       #999999;
  --fg-4:       #bdbce3;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  height: 100%;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ========== 顶部导航（紫色 brand）========== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.brand { font-weight: 700; font-size: 16px; letter-spacing: .3px; }
.league-select {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  outline: none;
  max-width: 50%;
}
.league-select option { color: var(--fg); background: var(--bg2); }

/* ========== Tab 栏 ========== */
.tabs {
  display: flex; gap: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 49px; z-index: 19;
}
.tab {
  flex: 1; min-width: 0;
  padding: 12px 8px;
  background: transparent;
  color: var(--fg-2);
  border: 0; border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* ========== 内容区 ========== */
#main { flex: 1; overflow-y: auto; padding: 0; }
.pane { display: none; padding: 0; }
.pane.active { display: block; }
.loader { text-align: center; padding: 40px 0; color: var(--fg-3); font-size: 13px; }
.error  {
  margin: 12px;
  padding: 14px;
  background: #fff5f5;
  border: 1px solid #ffcccc;
  border-radius: 6px;
  color: #c33;
  font-size: 13px;
}

/* ========== 联赛/日期分组头 ========== */
.match-day-header {
  padding: 8px 14px;
  background: var(--bg3);
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  /* sticky 相对 #main（最近滚动祖先），所以 top:0 让它紧贴 #main 视口顶部 */
  position: sticky;
  top: 0;
  z-index: 18;
}
.match-day-header .count {
  float: right;
  color: var(--fg-3);
  font-weight: 400;
}

/* ========== 比赛行 ========== */
.match {
  display: grid;
  grid-template-columns: 1fr 78px 1fr;
  gap: 6px;
  align-items: center;
  background: var(--bg2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.match:active { background: #fafafa; }
.team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.team.home { justify-content: flex-end; text-align: right; }
.team.away { justify-content: flex-start; }
.team img {
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 2px;
}
.team .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--fg);
}
.match-mid {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.match-mid .when {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0;
}
.match-mid .matchday {
  font-size: 10px;
  color: var(--fg-4);
}
.match-mid .vs {
  font-size: 12px;
  color: var(--fg-3);
}
.match-mid .score {
  font-weight: 700;
  font-size: 17px;
  color: var(--fg);
  letter-spacing: 1px;
}
.match-mid .score.live { color: var(--live); }
.match-mid .ht {
  font-size: 10px;
  color: var(--fg-3);
}
.match-mid .live-tag {
  display: inline-block;
  font-size: 9px;
  background: var(--live);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: .5px;
}
.match-mid .live-tag::before {
  content: "●";
  margin-right: 2px;
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

/* ========== 积分表 ========== */
.standings {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg2);
  font-size: 12px;
}
.standings thead { background: var(--bg3); }
.standings th {
  padding: 9px 4px;
  text-align: center;
  color: var(--fg-2);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.standings th:nth-child(2) { text-align: left; padding-left: 10px; }
.standings td {
  padding: 9px 4px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.standings td.team-cell {
  text-align: left; padding-left: 10px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden;
}
.standings td.team-cell img {
  width: 18px; height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.standings td.team-cell span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--fg);
}
.standings tr.zone-cl    td:first-child { color: var(--win); font-weight: 700; }       /* 欧冠区 1-4 */
.standings tr.zone-el    td:first-child { color: var(--info); font-weight: 700; }      /* 欧联区 5-6 */
.standings tr.zone-rel   td:first-child { color: var(--live); font-weight: 700; }      /* 降级区 */
.standings tr.zone-cl    { background: rgba(95,169,27,.04); }
.standings tr.zone-rel   { background: rgba(240,69,69,.04); }
.col-pts { color: var(--brand); font-weight: 700; font-size: 13px; }
.gd-pos { color: var(--win); }
.gd-neg { color: var(--live); }

/* ========== 射手榜 ========== */
.scorers-list { background: var(--bg2); }
.scorer-row {
  display: grid;
  grid-template-columns: 36px 28px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.scorer-rank {
  text-align: center;
  font-weight: 700;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.scorer-rank.r1 { color: #d4a015; }
.scorer-rank.r2 { color: #888; }
.scorer-rank.r3 { color: #b07a3a; }
.scorer-row img {
  width: 24px; height: 24px;
  object-fit: contain;
}
.scorer-info { min-width: 0; overflow: hidden; }
.scorer-name {
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scorer-team {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scorer-stats {
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 36px;
}
.scorer-stats .num {
  font-weight: 700;
  color: var(--brand);
  font-size: 15px;
}
.scorer-stats .label {
  font-size: 10px;
  color: var(--fg-3);
  display: block;
}
.scorer-stats.assists .num { color: var(--info); }

/* ========== 响应式 ========== */
@media (min-width: 720px) {
  .topbar, .tabs, .pane {
    max-width: 720px;
    margin-left: auto; margin-right: auto;
  }
  .topbar, .tabs { position: relative; top: 0; }
  body { background: #e0e0e0; }
}

/* iOS 安全区（内容区底部留 home indicator 余量）*/
@supports (padding: env(safe-area-inset-bottom)) {
  #main { padding-bottom: env(safe-area-inset-bottom); }
}