:root {
  --bg: #060812;
  --card: rgba(255,255,255,0.035);
  --card-border: rgba(255,255,255,0.08);
  --card-hover: rgba(255,255,255,0.06);
  --ucl: #34d399;
  --uel: #60a5fa;
  --pts-h2h: #f4f4f6;
  --text: #f4f4f6;
  --sub: #8b93a7;
  --up: #34d399;
  --down: #f87171;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(ellipse 700px 400px at 10% -5%, rgba(109,40,217,0.35), transparent 60%),
    radial-gradient(ellipse 600px 400px at 95% 10%, rgba(5,150,105,0.25), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  padding: 20px 14px 75px;
  display: flex;
  justify-content: center;
}
#app { width: 100%; max-width: 720px; }
.container { width: 100%; max-width: 720px; }

.hero {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
}
.hero-title { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.hero-title span { background: linear-gradient(90deg, var(--ucl), var(--uel)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--card-border);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
}

.app-screen { display: none; }
.app-screen.active { display: block; animation: screenFadeIn 0.22s ease; }
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--sub); margin: 24px 0 12px; display: flex; align-items: center; gap: 10px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--card-border); }

.sub-tabs { display: flex; gap: 6px; margin: 12px 0 10px; }
.sub-tab-btn {
  background: var(--card); border: 1px solid var(--card-border); color: var(--sub);
  padding: 6px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease;
}
.sub-tab-btn:hover { background: var(--card-hover); color: var(--text); }
.sub-tab-btn.active { background: rgba(52, 211, 153, 0.15); border-color: rgba(52, 211, 153, 0.4); color: var(--ucl); }

.sub-tab-pane { display: none !important; flex-direction: column; gap: 8px; }
.sub-tab-pane.active { display: flex !important; animation: screenFadeIn 0.2s ease; }

.standings-list { display: flex; flex-direction: column; gap: 8px; }
.standing-row {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 12px 14px 12px 10px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.standing-row:hover { background: var(--card-hover); }


/* Qualification markers: section-closing separators between standings rows. */

.qualification-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
  height: 10px;
  margin: -1px 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.88;
  pointer-events: none;
}
.qualification-separator-label {
  grid-column: 2;
  white-space: nowrap;
}
.qualification-separator-line {
  align-self: center;
  width: calc(100% + 4px);
  height: 7px;
  border-bottom: 1px solid currentColor;
}
.qualification-separator-line-left {
  grid-column: 1;
  margin-left: -4px;
  border-left: 1px solid currentColor;
  border-radius: 0 0 0 2px;
}
.qualification-separator-line-right {
  grid-column: 3;
  margin-right: -4px;
  border-right: 1px solid currentColor;
  border-radius: 0 0 2px 0;
}
.qualification-separator-ucl { color: #60a5fa; }
.qualification-separator-uel { color: #f59e0b; }

.legend-line {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 18px;
}
.legend-line.ucl { background: #60a5fa; }
.legend-line.uel { background: #f59e0b; }
.legend-rank-chip {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(52, 211, 153, 0.72);
  background: rgba(52, 211, 153, 0.10);
  color: var(--ucl);
  font-size: 8px;
  font-weight: 800;
  box-sizing: border-box;
}

.row-top { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 4px; }
.rank-position {
  width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rank-chip {
  width: 26px; height: auto; background: none; border: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}

.row-team { min-width: 0; }
.row-team .t-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-team .t-name span:first-child { overflow: hidden; text-overflow: ellipsis; }
.row-team .m-name { font-size: 11.5px; color: var(--sub); margin-top: 1px; }

.row-stats { display: flex; align-items: center; gap: 14px; text-align: right; }
.stat-wdl { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-wdl b { color: var(--text); }
.stat-wdl .live-win-num { color: var(--up); text-shadow: 0 0 8px rgba(52, 211, 153, 0.4); }
.stat-wdl .live-loss-num { color: var(--down); text-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }

.stat-record-form { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 4px; }
.form-strip { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-height: 16px; }
.form-badge { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; line-height: 1; font-weight: 900; border: 1px solid transparent; box-sizing: border-box; }
.form-w { color: #34d399; background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.32); }
.form-d { color: #aab1c3; background: rgba(170,177,195,0.10); border-color: rgba(170,177,195,0.22); }
.form-l { color: #f87171; background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.32); }

.stat-pts { text-align: right; }
.stat-pts .pts-num-h2h { font-size: 15px; font-weight: 800; color: var(--pts-h2h); line-height: 1; }
.rank-trend { font-size: 9px; margin-top: 4px; line-height: 1; white-space: nowrap; }
.rank-trend.up { color: var(--up); }
.rank-trend.down { color: var(--down); }
.rank-trend.flat { color: var(--sub); opacity: 0.6; }

.squad-panel { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-border); }
.squad-panel-title { font-size: 10.5px; color: var(--sub); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: space-between; gap: 4px; white-space: nowrap; min-height: 17px; box-sizing: border-box; }
.h2h-duo-squads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.player-chip-wrap { display: flex; flex-direction: column; }
.player-chip {
  background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 6px 9px; display: flex; justify-content: space-between; font-size: 11px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.player-chip:hover { background: rgba(255,255,255,0.07); border-color: rgba(52,211,153,0.3); }
.player-chip.bench { opacity: 0.35; margin-top: 2px; }
.player-chip.player-finished { opacity: 0.4; }
.player-chip.player-common { opacity: 0.4; }
.player-chip.player-finished.player-common { opacity: 0.4; }
.player-chip.bench.player-finished { opacity: 0.2; }
.player-chip.bench.player-common { opacity: 0.35; }
.player-chip.bench.player-finished.player-common { opacity: 0.2; }

.bench-divider { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sub); margin: 10px 0 4px 2px; display: flex; align-items: center; gap: 6px; }
.bench-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
.player-chip .pts { font-weight: 700; color: var(--ucl); }

.player-breakdown { display: none; background: rgba(0,0,0,0.3); border: 1px dashed var(--card-border); border-radius: 6px; padding: 6px 8px; margin-top: 3px; font-size: 10px; color: var(--sub); }
.player-breakdown div { display: flex; justify-content: space-between; margin-bottom: 2px; }
.player-breakdown div:last-child { margin-bottom: 0; }
.player-breakdown span b { color: var(--text); }

.heroes-wrap { display: flex; flex-direction: column; gap: 8px; }
.hero-item {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 12px 14px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hero-item:hover { background: var(--card-hover); }
.hero-item:nth-child(1) { border-left: 3px solid #fbbf24; }
.hero-item:nth-child(2) { border-left: 3px solid #cbd5e1; }
.hero-item:nth-child(3) { border-left: 3px solid #d97706; }

.hero-rank-chip {
  width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px; color: var(--sub);
}
.hero-info { min-width: 0; }
.hero-name { font-weight: 700; color: var(--text); font-size: 13.5px; }
.hero-substats { font-size: 11.5px; color: var(--sub); margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.stat-lbl.assist { font-weight: 800; font-size: 11px; padding: 1px 5px; border-radius: 4px; line-height: 1; background: rgba(96, 165, 250, 0.2); color: var(--uel); }
.stat-lbl.pts { font-weight: 800; font-size: 11px; padding: 1px 5px; border-radius: 4px; line-height: 1; background: rgba(139, 147, 167, 0.15); color: var(--sub); }
.hero-stat-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.icon-bonus-svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; fill: #fbbf24; }

.gw-history-panel {
  display: none; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--card-border);
  grid-column: 1 / -1; font-size: 10px;
}
.gw-history-title { font-weight: 700; color: var(--sub); margin-bottom: 4px; text-transform: uppercase; font-size: 8.5px; letter-spacing: 0.05em; }
.gw-history-track {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.gw-history-track::-webkit-scrollbar { height: 4px; }
.gw-history-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.gw-pill {
  background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 6px;
  padding: 3px 5px; min-width: 29px; text-align: center; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px;
}
.gw-pill .gw-num { font-size: 7.5px; color: var(--sub); font-weight: 600; }
.gw-pill .gw-pts { font-size: 10px; font-weight: 800; color: var(--text); }
.gw-pill.high-pts { background: rgba(52, 211, 153, 0.15); border-color: rgba(52, 211, 153, 0.4); }
.gw-pill.high-pts .gw-pts { color: var(--ucl); }
.gw-pill.zero-pts { opacity: 0.35; }

.hero-owners-panel { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-border); font-size: 11.5px; grid-column: 1 / -1; }
.owners-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.owner-badge { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); border-radius: 8px; padding: 6px 10px; }
.owner-badge.bench { opacity: 0.45; }
.owner-tags { display: flex; gap: 4px; }
.owner-tag { font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.owner-tag.captain { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.owner-tag.starter { background: rgba(52, 211, 153, 0.15); color: var(--ucl); }
.owner-tag.bench { background: rgba(139, 147, 167, 0.15); color: var(--sub); }

.captains-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 20px; max-width: 480px; }
.captains-podium.single-item { max-width: 240px; }
.captain-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.captain-card:hover { background: var(--card-hover); border-color: rgba(52, 211, 153, 0.3); }
.captain-name { font-weight: 700; font-size: 13px; color: var(--text); }
.captain-sub { font-size: 11px; color: var(--sub); }
.captain-badge-count { position: absolute; top: 10px; right: 10px; color: var(--ucl); font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 4px; }

.legend-bar { display: flex; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; margin-top: 16px; font-size: 12px; color: var(--sub); line-height: 1.6; }
.legend-item { display: flex; align-items: center; gap: 7px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.legend-swatch.ucl { background: var(--ucl); }
.legend-swatch.uel { background: var(--uel); }
.legend-note { flex-basis: 100%; font-size: 11.5px; color: var(--sub); }
.legend-note b { color: var(--text); }

.epl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.epl-card-wrap { display: flex; flex-direction: column; }
.epl-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; gap: 8px; }
.epl-card.clickable { cursor: pointer; }
.epl-card.clickable:hover { background: var(--card-hover); }
.epl-teams { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.club-badge { width: 17px; height: 17px; object-fit: contain; }
.epl-status { font-size: 10px; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--sub); font-weight: 700; white-space: nowrap; }
.epl-status.live { background: rgba(52,211,153,0.16); color: var(--ucl); border: 1px solid rgba(52,211,153,0.3); }


/* EPL live players */
.epl-live-panel { margin-top: 5px; padding: 9px 10px 10px; }
.epl-live-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 7px; color: var(--sub); font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.epl-live-teams-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.epl-live-team-column { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.epl-live-team-title {
  color: var(--text); font-size: 10px; font-weight: 800; padding: 0 2px 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epl-live-team-title.right { text-align: right; }
.epl-live-player-row {
  min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 7px; border-radius: 7px; background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}
.epl-live-player-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.epl-live-player-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: 10.5px; font-weight: 700; line-height: 1.1;
}
.epl-live-player-meta { color: var(--sub); font-size: 8.5px; line-height: 1.1; }
.epl-live-player-points {
  flex-shrink: 0; color: var(--ucl); font-size: 11px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.epl-live-player-points.negative { color: var(--down); }
.epl-live-empty {
  padding: 7px; border: 1px dashed rgba(255,255,255,.07); border-radius: 7px;
  color: var(--sub); font-size: 9px; line-height: 1.35;
}

.h2h-gw-nav {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
}
.h2h-gw-arrow {
  width: 36px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.h2h-gw-arrow:hover:not(:disabled) { background: var(--card-hover); border-color: rgba(255,255,255,.14); }
.h2h-gw-arrow:disabled { opacity: .28; cursor: default; }
.h2h-gw-select-wrap { position: relative; min-width: 0; }
.h2h-gw-select-wrap::after {
  content: '⌄';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-56%);
  color: var(--sub);
  font-size: 13px;
  pointer-events: none;
}
.h2h-gw-select {
  width: 100%;
  height: 34px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(52,211,153,.30);
  border-radius: 10px;
  background: rgba(52,211,153,.08);
  color: var(--text);
  padding: 0 34px 0 12px;
  text-align: center;
  text-align-last: center;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}
.h2h-gw-select option { background: #0d111e; color: var(--text); }
.h2h-archive-card { cursor: default; }
.h2h-archive-card:hover { background: var(--card); }

.h2h-grid { display: flex; flex-direction: column; gap: 8px; }
.h2h-card-wrap { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; cursor: pointer; transition: background 0.15s ease; padding: 12px 16px; }
.h2h-card-wrap:hover { background: var(--card-hover); }
.h2h-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.h2h-team { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.h2h-team.right { justify-content: flex-end; }
.h2h-score {
  padding: 0 3px; display: inline-flex; align-items: baseline; justify-content: center; gap: 4px;
  font-weight: 800; font-size: 14.5px; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
}
.h2h-score-num { color: var(--ucl); min-width: 1.1em; text-align: center; }
.h2h-score-sep { color: var(--sub); opacity: 0.72; font-size: 10.5px; font-weight: 700; transform: translateY(-1px); }
.h2h-future-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 14px; font-size: 12px; }

.classic-wrap { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.classic-row-wrap { border-bottom: 1px solid var(--card-border); cursor: pointer; transition: background 0.15s ease; }
.classic-row-wrap:hover { background: var(--card-hover); }
.classic-row-wrap:last-child { border-bottom: none; }
.classic-main-row { display: grid; grid-template-columns: 36px 1fr 60px 70px; align-items: center; padding: 11px 12px; }
.or-pill { display: inline-block; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-top: 3px; letter-spacing: 0.02em; }

.sortable-header { cursor: pointer; user-select: none; transition: color 0.15s ease; }
.sortable-header:hover { color: var(--text); }
.sortable-header.active { color: var(--ucl); font-weight: 800; }

.daily-review-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 20px; line-height: 1.6; font-size: 14px; }
.daily-review-card h1, .daily-review-card h2, .daily-review-card h3 { color: var(--text); margin-bottom: 12px; margin-top: 16px; }
.daily-review-card p { margin-bottom: 12px; color: var(--sub); }
.daily-review-card strong { color: var(--text); }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 62px; background: rgba(6, 8, 18, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--card-border);
  display: flex; justify-content: space-around; align-items: center;
  z-index: 999; max-width: 720px; margin: 0 auto;
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sub); text-decoration: none; font-size: 10px; font-weight: 600; flex: 1; height: 100%; cursor: pointer; transition: color 0.15s ease; text-align: center; }
.nav-icon-svg { width: 18px; height: 18px; margin-bottom: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.15s ease; }
.nav-item.active { color: var(--ucl); }
.nav-item.active .nav-icon-svg { stroke: var(--ucl); }


/* Daily Review jump + embedded section */
.daily-review-jump-wrap { margin-bottom: 14px; }
.daily-review-jump-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(96,165,250,0.08));
  border: 1px solid rgba(52,211,153,0.22); color: var(--text);
  border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: left;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.daily-review-jump-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(52,211,153,0.42);
  background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(96,165,250,0.10));
}
.daily-review-jump-icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(52,211,153,0.13); color: var(--ucl); font-size: 16px;
}
.daily-review-jump-btn b { display:block; font-size:12.5px; }
.daily-review-jump-btn small { display:block; color:var(--sub); font-size:10.5px; margin-top:2px; }
.daily-review-jump-arrow { margin-left:auto; color:var(--ucl); font-weight:800; font-size:16px; }
.daily-review-section { scroll-margin-top: 14px; padding-bottom: 10px; }
.review-back-btn {
  display:block; margin:10px auto 0; background:transparent; border:0;
  color:var(--sub); font-size:11px; font-weight:700; cursor:pointer; padding:8px 12px;
}
.review-back-btn:hover { color:var(--text); }

/* =========================================================
   SECONDARY TABS — CLEAN COMPONENT STYLES
   IMPORTANT: screen width is NOT controlled here.
   #app + .container use the same 720px geometry as original H2H.
   ========================================================= */

/* Prevent content from forcing any tab wider than the shared container. */
.app-screen,
.app-screen > * {
  min-width: 0;
}

/* ---------- TOP / OWNERSHIP ---------- */
.owner-badge {
  min-width: 0;
  gap: 8px;
}
.owner-badge > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-tags {
  min-width: 0;
  flex-shrink: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.owner-tag { white-space: nowrap; }
.hero-owners-panel,
.owners-grid { min-width: 0; max-width: 100%; }

/* ---------- COMPARE ---------- */
.compare-nav-item .nav-icon-svg { width: 20px; height: 20px; }

.compare-select-grid,
.compare-info-grid,
.compare-h2h-duo {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.compare-select-grid { margin-bottom: 12px; }
.compare-select-wrap { min-width: 0; }
.compare-select-wrap label {
  display: block;
  margin: 0 0 6px;
  color: var(--sub);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Modern native select: dark field, custom chevron, native mobile picker. */
.compare-select-wrap select {
  width: 100%;
  min-width: 0;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  background-color: #0d111e;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa3b7 50%),
    linear-gradient(135deg, #9aa3b7 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.06), rgba(255,255,255,.06));
  background-position:
    calc(100% - 17px) 19px,
    calc(100% - 12px) 19px,
    calc(100% - 38px) 0;
  background-size: 5px 5px, 5px 5px, 1px 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 4px 14px rgba(0,0,0,.12);
  color: var(--text);
  padding: 0 42px 0 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.compare-select-wrap select:hover {
  background-color: #111725;
  border-color: rgba(255,255,255,.16);
}
.compare-select-wrap select:focus {
  border-color: rgba(52,211,153,.55);
  box-shadow: 0 0 0 3px rgba(52,211,153,.10);
}
.compare-select-wrap select option {
  background: #0d111e;
  color: var(--text);
}

.compare-info-card {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
  overflow: hidden;
}
.compare-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font-size: 11.5px;
}
.compare-info-row span {
  min-width: 0;
  color: var(--sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-info-row b {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
.compare-transfers-title,
.compare-squads-title {
  color: var(--sub);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.compare-transfers-title { margin: 12px 0 6px; }
.compare-transfer-row {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 25px;
  font-size: 10.5px;
  line-height: 1.2;
}
.compare-transfer-row > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-transfer-row small { color: var(--sub); font-size: 9px; }
.compare-transfer-arrow { width: 15px; font-size: 14px; line-height: 1; font-weight: 900; }
.compare-transfer-row.transfer-in .compare-transfer-arrow { color: var(--ucl); }
.compare-transfer-row.transfer-out .compare-transfer-arrow { color: var(--down); }
.compare-transfer-divider { height: 1px; background: rgba(255,255,255,.06); margin: 5px 0; }
.compare-transfer-empty { color: var(--sub); font-size: 10.5px; padding: 4px 0; }
.compare-squads-title { margin: 18px 0 8px; }
.compare-h2h-duo { align-items: start; }
.compare-h2h-duo > div,
.compare-h2h-duo .player-chip,
.compare-h2h-duo .player-chip > span:first-child { min-width: 0; }
.compare-h2h-duo .player-chip > span:first-child { overflow: hidden; }
.compare-h2h-duo .player-chip .pts { flex-shrink: 0; }
.compare-empty { color: var(--sub); text-align: center; padding: 24px 12px; font-size: 11px; }

/* Compare chip history */
.compare-chips-title { margin-top: 10px; margin-bottom: 6px; color: var(--sub); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.compare-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.compare-chip-badge { min-width: 0; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.045); color: var(--sub); font-size: 9px; line-height: 1; font-weight: 800; white-space: nowrap; opacity: .55; }
.compare-chip-badge.available { color: var(--text); opacity: 1; }
.compare-chip-badge.used { color: var(--sub); opacity: .55; }

/* H2H active chip — same visual language as Compare chip badges */
.h2h-active-chip {
  min-width: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: var(--text);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- CLASSIC ---------- */
.classic-header-row,
.classic-main-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 60px 70px;
  align-items: center;
}
.classic-header-row {
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  color: var(--sub);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--card-border);
}
.classic-main-row > * { min-width: 0; }
#screen-classic .squad-panel { max-width: 100%; overflow: hidden; }

#screen-classic .classic-main-row { padding-top: 9px; padding-bottom: 9px; }
#screen-classic .classic-team-line {
  display:flex; align-items:center; gap:5px; min-width:0; white-space:nowrap; overflow:hidden;
}
#screen-classic .classic-team-name {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14.5px; font-weight:700; line-height:1.15; letter-spacing:-0.01em;
}
#screen-classic .classic-manager-name {
  font-size:11.5px; line-height:1.15; margin-top:1px; color:var(--sub);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#screen-classic .or-pill {
  font-size:8.5px; padding:1px 5px; margin-top:3px; border-radius:5px;
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .compare-select-grid,
  .compare-info-grid,
  .compare-h2h-duo { gap: 8px; }

  .compare-select-wrap select {
    height: 42px;
    font-size: 11.5px;
    padding-left: 11px;
    padding-right: 38px;
    background-position:
      calc(100% - 15px) 18px,
      calc(100% - 10px) 18px,
      calc(100% - 34px) 0;
  }
  .compare-info-card { padding: 10px; }
  .compare-info-row { min-height: 28px; font-size: 10.5px; }
  .compare-info-row b { font-size: 11px; }
  .compare-transfer-row { font-size: 9.7px; }
  .compare-h2h-duo .player-chip {
    min-width: 0;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 10.5px;
  }

  .classic-header-row,
  .classic-main-row {
    grid-template-columns: 30px minmax(0, 1fr) 46px 54px;
  }
  .classic-header-row { padding: 9px 8px; font-size: 9.5px; }
  .classic-main-row { padding-left: 8px; padding-right: 8px; }

  .owner-badge { padding-left: 8px; padding-right: 8px; }
  .owner-tag { font-size: 8.5px; padding: 2px 5px; }
}

@media (max-width: 360px) {
  .compare-select-grid,
  .compare-info-grid,
  .compare-h2h-duo { gap: 6px; }
  .compare-select-wrap label { font-size: 8.8px; }
  .compare-select-wrap select { height: 40px; font-size: 10.5px; border-radius: 10px; }
  .compare-info-card { padding: 8px; border-radius: 12px; }
  .compare-info-row { min-height: 26px; gap: 4px; font-size: 9.5px; }
  .compare-info-row b { font-size: 10px; }
  .compare-transfer-row { grid-template-columns: 12px minmax(0,1fr); gap: 3px; font-size: 8.8px; }
  .compare-h2h-duo .player-chip { padding: 5px; font-size: 9.5px; }

  .classic-header-row,
  .classic-main-row {
    grid-template-columns: 28px minmax(0, 1fr) 42px 48px;
  }
}


/* v55: cleaner, denser Top + Ownership typography. */
#screen-heroes .hero-item {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 12px;
}
#screen-heroes .hero-rank-number {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#screen-heroes .hero-name {
  font-size: 12.5px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
#screen-heroes .hero-substats {
  margin-top: 4px;
  gap: 8px;
  font-size: 10.5px;
}
#screen-heroes .hero-stat-badge { font-size: 10.5px; }
#screen-heroes .stat-lbl.assist,
#screen-heroes .stat-lbl.pts { font-size: 9px; padding: 1px 4px; }

#screen-ownership .hero-item {
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 9px;
}
#screen-ownership .hero-name {
  font-size: 11.5px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
#screen-ownership .hero-substats {
  margin-top: 4px;
  gap: 8px;
  font-size: 10px;
}
#screen-ownership .hero-stat-badge { font-size: 10px; }
#screen-ownership .stat-lbl.pts { font-size: 8.5px; padding: 1px 4px; }

/* v11: tiny neutral separator for equal-contribution players only. */
.common-picks-divider {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 1px 3px;
  color: rgba(139, 147, 167, 0.62);
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.common-picks-divider::before,
.common-picks-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,0.055);
}

/* ---------- TOP: POINTS / TRANSFERS INNER TABS (v14 TEST) ---------- */
#screen-heroes .top-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
#screen-heroes .top-mode-btn {
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sub);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
}
#screen-heroes .top-mode-btn.active {
  background: rgba(52,211,153,.14);
  color: var(--ucl);
  box-shadow: inset 0 0 0 1px rgba(52,211,153,.28);
}
#screen-heroes .top-view { display: none; }
#screen-heroes .top-view.active { display: block; animation: screenFadeIn .2s ease; }

#screen-heroes .top-transfer-page-head {
  margin-bottom: 14px;
  padding: 2px 1px 0;
}
#screen-heroes .top-transfer-kicker {
  color: var(--ucl);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#screen-heroes .top-transfer-title {
  margin-top: 3px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}
#screen-heroes .top-transfer-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}
#screen-heroes .top-transfer-group-eyebrow {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
#screen-heroes .top-transfer-group-sub {
  margin-top: 3px;
  color: var(--sub);
  font-size: 9.5px;
}
#screen-heroes .top-transfer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px 14px 0 0;
}
#screen-heroes .top-transfer-summary {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
#screen-heroes .top-transfer-summary b { color: var(--text); font-size: 20px; line-height: 1; }
#screen-heroes .top-transfer-summary span { color: var(--sub); font-size: 9.5px; font-weight: 700; text-transform: uppercase; }
#screen-heroes .top-transfer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 15px;
  border: 1px solid var(--card-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(255,255,255,.018);
  color: var(--sub);
  font-size: 10px;
}
#screen-heroes .top-transfer-meta b { color: var(--text); }
#screen-heroes .top-transfer-section { margin-top: 20px; }
#screen-heroes .top-transfer-section.first { margin-top: 14px; }
#screen-heroes .top-transfer-card {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}
#screen-heroes .top-transfer-row {
  position: relative;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
#screen-heroes .top-transfer-row:last-child { border-bottom: 0; }
#screen-heroes .top-transfer-row.league-row { cursor: pointer; }
#screen-heroes .top-transfer-row.league-row.open { background: rgba(255,255,255,.018); }
#screen-heroes .top-transfer-rank {
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#screen-heroes .top-transfer-player { min-width: 0; }
#screen-heroes .top-transfer-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 750;
}
#screen-heroes .top-transfer-name span { color: var(--sub); font-size: 10px; font-weight: 600; }
#screen-heroes .top-transfer-player-meta {
  margin-top: 2px;
  color: var(--sub);
  font-size: 9.5px;
  font-weight: 650;
}
#screen-heroes .top-transfer-bar {
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}
#screen-heroes .top-transfer-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; }
#screen-heroes .top-transfer-row.in .top-transfer-bar i { background: var(--ucl); }
#screen-heroes .top-transfer-row.out .top-transfer-bar i { background: var(--down); }

#screen-heroes .top-transfer-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
#screen-heroes .top-transfer-count b { color: var(--text); font-size: 13px; }
#screen-heroes .top-transfer-count span { color: var(--sub); font-size: 9.5px; font-weight: 700; }
#screen-heroes .top-transfer-count.global-count b { font-size: 12px; }
#screen-heroes .top-transfer-count.global-count {
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
#screen-heroes .top-transfer-count.global-count span {
  font-size: 8.5px;
  text-transform: lowercase;
}
#screen-heroes .top-transfer-empty { padding: 18px 14px; color: var(--sub); font-size: 11px; text-align: center; }

#screen-heroes .top-transfer-league-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 28px 0 14px;
  color: var(--sub);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
#screen-heroes .top-transfer-league-divider::before,
#screen-heroes .top-transfer-league-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.07);
}
#screen-heroes .top-transfer-tap-hint {
  margin: 9px 2px 0;
  color: var(--sub);
  font-size: 9px;
  text-align: center;
}
#screen-heroes .league-transfer-managers {
  display: none;
  grid-column: 1 / -1;
  margin: 2px -2px -2px;
  padding: 10px 0 2px 37px;
  border-top: 1px solid rgba(255,255,255,.055);
}
#screen-heroes .league-transfer-managers-title {
  margin-bottom: 6px;
  color: var(--sub);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#screen-heroes .league-transfer-manager-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  border-top: 1px solid rgba(255,255,255,.035);
}
#screen-heroes .league-transfer-manager-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
}
#screen-heroes .league-transfer-counterpart {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sub);
  font-size: 8.5px;
  font-weight: 700;
}

@media (max-width: 600px) {
  #screen-heroes .top-mode-tabs { margin-bottom: 14px; }
  #screen-heroes .top-mode-btn { height: 34px; font-size: 10px; }
  #screen-heroes .top-transfer-head { padding: 12px; }
  #screen-heroes .top-transfer-title { font-size: 15px; }
  #screen-heroes .top-transfer-summary b { font-size: 18px; }
  #screen-heroes .top-transfer-meta { padding-left: 12px; padding-right: 12px; }
  #screen-heroes .top-transfer-row {
    grid-template-columns: 25px minmax(0,1fr) auto;
    gap: 8px;
    min-height: 50px;
    padding: 8px 10px;
  }
  #screen-heroes .top-transfer-name { font-size: 11.5px; }
  #screen-heroes .league-transfer-managers { padding-left: 33px; }
  #screen-heroes .league-transfer-counterpart { max-width: 125px; }
}

/* ---------- OWNERSHIP: OVERALL FPL vs LEMBERG CAPTAINS ---------- */
#screen-ownership .captain-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

#screen-ownership .captain-compare-col {
  min-width: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}

#screen-ownership .captain-compare-head {
  padding: 10px 11px 9px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

#screen-ownership .captain-compare-eyebrow {
  color: var(--sub);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#screen-ownership .captain-compare-title {
  margin-top: 2px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
}

#screen-ownership .captain-mini-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

#screen-ownership .captain-mini-row:last-child {
  border-bottom: 0;
}

#screen-ownership .captain-mini-row.league-captain {
  cursor: pointer;
  transition: background .15s ease;
}

#screen-ownership .captain-mini-row.league-captain:hover {
  background: var(--card-hover);
}

#screen-ownership .captain-mini-main {
  min-width: 0;
}

#screen-ownership .captain-mini-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 750;
}

#screen-ownership .captain-mini-sub {
  margin-top: 2px;
  color: var(--sub);
  font-size: 8.5px;
  font-weight: 650;
}

#screen-ownership .captain-mini-value {
  flex-shrink: 0;
  color: var(--ucl);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

#screen-ownership .captain-mini-row .hero-owners-panel {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  padding-top: 7px;
}

#screen-ownership .captain-mini-row .owners-grid {
  gap: 5px;
  margin-top: 5px;
}

#screen-ownership .captain-mini-row .owner-badge {
  padding: 5px 7px;
  font-size: 9.5px;
}

#screen-ownership .captain-compare-empty {
  padding: 14px 10px;
  color: var(--sub);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 600px) {
  #screen-ownership .captain-compare { gap: 8px; }
  #screen-ownership .captain-compare-head { padding: 9px; }
  #screen-ownership .captain-compare-eyebrow { font-size: 7.8px; }
  #screen-ownership .captain-compare-title { font-size: 10.5px; }
  #screen-ownership .captain-mini-row {
    min-height: 39px;
    padding: 7px 8px;
    gap: 4px;
  }
  #screen-ownership .captain-mini-name { font-size: 10.5px; }
  #screen-ownership .captain-mini-sub { font-size: 7.8px; }
  #screen-ownership .captain-mini-value { font-size: 9.5px; }
  #screen-ownership .captain-mini-row .owner-badge {
    padding: 5px 6px;
    font-size: 8.8px;
  }
}

@media (max-width: 360px) {
  #screen-ownership .captain-compare { gap: 6px; }
  #screen-ownership .captain-compare-head { padding: 8px 7px; }
  #screen-ownership .captain-mini-row { padding: 7px 6px; }
  #screen-ownership .captain-mini-name { font-size: 9.7px; }
  #screen-ownership .captain-mini-value { font-size: 8.8px; }
}


/* Top > Transfers title SVG icons */
.top-transfer-section .transfer-title-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}

/* Transfer direction colors */
.top-transfer-section .transfer-title-icon-out {
  color: var(--down);
}

/* Overall FPL paired transfer arrows */
.overall-transfer-arrows {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-right: 4px;
  vertical-align: -2px;
}
.overall-transfer-arrow {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.overall-transfer-arrow-out { color: var(--down); }
.overall-transfer-arrow-in { color: var(--up); }

/* Gameweek Review accordion */
.daily-review-jump-wrap .daily-review-section {
  padding-top: 10px;
  padding-bottom: 0;
}

.daily-review-jump-wrap .daily-review-section[hidden] {
  display: none !important;
}

.daily-review-jump-btn.open {
  border-color: rgba(52, 211, 153, 0.28);
}

.daily-review-jump-arrow {
  transition: transform 0.18s ease;
}

.daily-review-jump-btn.open .daily-review-jump-arrow {
  transform: rotate(180deg);
}

.daily-review-jump-wrap .daily-review-card {
  margin: 0;
}

/* Gameweek Review: tap the review body to close */
.daily-review-jump-wrap .daily-review-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Current form: mark the most recent H2H result (rightmost badge). */
.form-strip .form-badge:last-child {
  position: relative;
}
.form-strip .form-badge:last-child::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 8px;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  opacity: 0.9;
}

/* v56: slightly denser typography + rows across core league tables. */
/* H2H standings */
.standings-list { gap: 7px; }
.standing-row { padding-top: 10px; padding-bottom: 10px; }
.row-team .t-name { font-size: 13.5px; }
.row-team .m-name { font-size: 10.5px; }
.stat-wdl { font-size: 10.5px; }
.stat-pts .pts-num-h2h { font-size: 14px; }
.form-badge { width: 15px; height: 15px; font-size: 8px; }
.form-strip { min-height: 15px; }

/* H2H match list */
.h2h-grid { gap: 7px; }
.h2h-card-wrap { padding-top: 10px; padding-bottom: 10px; }
.h2h-team { font-size: 11.5px; }

/* Classic standings */
#screen-classic .classic-main-row { padding-top: 7.5px; padding-bottom: 7.5px; }
#screen-classic .classic-team-name { font-size: 13.5px; }
#screen-classic .classic-manager-name { font-size: 10.5px; }
.classic-header-row { font-size: 10px; }

/* Compare squads: keep cards/controls unchanged, only make player rows a touch denser. */
.compare-h2h-duo .player-chip { font-size: 10px; padding-top: 5px; padding-bottom: 5px; }

@media (max-width: 600px) {
  .compare-h2h-duo .player-chip { font-size: 10px; padding-top: 5px; padding-bottom: 5px; }
}

/* v57: Classic numeric typography aligned with compact H2H scale. */
#screen-classic .row-rank {
  font-size: 13.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#screen-classic .classic-main-row .rank-trend {
  font-size: 8px;
  margin-top: 4px;
}
#screen-classic .row-gw,
#screen-classic .row-total {
  font-size: 13.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#screen-classic .row-gw b,
#screen-classic .row-total span {
  font-size: inherit;
  line-height: inherit;
}


/* v58: clean Top/Ownership cards + percentage progress ring. */
#screen-heroes .hero-item:nth-child(1),
#screen-heroes .hero-item:nth-child(2),
#screen-heroes .hero-item:nth-child(3),
#screen-ownership .hero-item:nth-child(1),
#screen-ownership .hero-item:nth-child(2),
#screen-ownership .hero-item:nth-child(3) {
  border-left: 1px solid var(--card-border);
}

#screen-ownership .ownership-ring {
  --ring-size: 30px;
  width: var(--ring-size);
  height: var(--ring-size);
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#screen-ownership .ownership-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 50%;
  background: conic-gradient(
    var(--ucl) calc(var(--ownership-pct) * 1%),
    rgba(255,255,255,.09) 0
  );
}
#screen-ownership .ownership-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 50%;
  background: var(--card);
}

/* v59: ownership percentage uses only a thin outer progress ring. */
#screen-ownership .ownership-ring::after {
  inset: 2px;
  background: var(--card);
}

/* v59 FIX: genuinely thin ownership progress stroke; keep badge interior unchanged. */
#screen-ownership .ownership-ring::after {
  inset: 1px;
  background: rgba(255,255,255,0.05);
}

/* v59 FINAL: keep the original ownership circle untouched; draw only a separate 1px outer progress arc. */
#screen-ownership .ownership-ring {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-border);
  overflow: visible;
  isolation: isolate;
}
#screen-ownership .ownership-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(
    var(--ucl) 0 calc(var(--ownership-pct) * 1%),
    transparent 0 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
}
#screen-ownership .ownership-ring::after {
  content: none;
}


/* v59 SVG FIX: preserve the original badge and draw ownership progress as a separate thin outer SVG arc. */
#screen-ownership .ownership-ring-wrap {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#screen-ownership .ownership-ring {
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow: visible;
  isolation: auto;
}
#screen-ownership .ownership-ring::before,
#screen-ownership .ownership-ring::after {
  content: none !important;
  display: none !important;
}
#screen-ownership .ownership-progress-svg {
  position: absolute;
  width: 36px;
  height: 36px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
#screen-ownership .ownership-progress-arc {
  fill: none;
  stroke: var(--ucl);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--ownership-pct) * 1) 100;
}

/* v63 — EPL goal contributions + clickable FPL point breakdown */
.epl-events-block {
  margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.epl-events-heading {
  margin-bottom: 6px; color: var(--sub); font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.epl-events-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px;
}
.epl-events-team { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.epl-events-team.away { text-align: right; }
.epl-events-team-title {
  color: var(--text); font-size: 10px; font-weight: 800; margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epl-event-item {
  min-width: 0; display: flex; align-items: center; gap: 4px; color: var(--text);
  font-size: 9.5px; line-height: 1.2;
}
.epl-events-team.away .epl-event-item { justify-content: flex-end; }
.epl-event-icon {
  flex: 0 0 auto; min-width: 14px; color: var(--sub); font-size: 8.5px; font-weight: 900;
  text-align: center;
}
.epl-event-item.goal .epl-event-icon { font-size: 10px; }
.epl-event-item.assist .epl-event-icon {
  border: 1px solid rgba(255,255,255,.10); border-radius: 4px; padding: 1px 3px;
  background: rgba(255,255,255,.04);
}
.epl-event-item.own-goal .epl-event-icon { color: var(--down); }
.epl-event-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epl-event-minute { flex: 0 0 auto; color: var(--sub); font-size: 8.5px; font-variant-numeric: tabular-nums; }
.epl-events-empty { color: var(--sub); font-size: 8.5px; }
.epl-live-panel-head.with-events { margin-top: 0; }
.epl-live-player-wrap { display: flex; flex-direction: column; }
.epl-live-player-row.clickable { cursor: pointer; }
.epl-live-player-row.clickable:hover { background: rgba(255,255,255,.055); }
.epl-player-breakdown { margin: 3px 2px 2px; }

/* v69: Lemberg lion identity */
.hero-brand { display:flex; align-items:center; gap:9px; min-width:0; }
.hero-brand-logo { width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 36px; }
.daily-review-jump-icon { overflow:hidden; padding:0; background:transparent; }
.daily-review-jump-icon img { width:100%; height:100%; object-fit:cover; display:block; border-radius:10px; }
@media (max-width: 480px) {
  .hero-brand { gap:8px; }
  .hero-brand-logo { width:32px; height:32px; flex-basis:32px; }
  .daily-review-jump-wrap .daily-review-card { padding:12px; }
}

/* =========================================================
   LEMBERG LEAGUE v70 — BROADCAST / EDITORIAL REDESIGN
   Visual-only layer. Existing data, tabs and interactions stay intact.
   ========================================================= */
:root {
  --bg: #05070a;
  --panel: #0a0e13;
  --panel-2: #0e141b;
  --card: #0c1117;
  --card-hover: #111922;
  --card-border: rgba(255,255,255,.085);
  --text: #f7f9fb;
  --sub: #87919e;
  --muted-2: #59636f;
  --ucl: #26e0b3;
  --uel: #6fa7ff;
  --accent: #26e0b3;
  --accent-soft: rgba(38,224,179,.11);
  --accent-line: rgba(38,224,179,.38);
  --pts-h2h: #ffffff;
  --up: #2ee59d;
  --down: #ff6b7a;
}

html { background: var(--bg); }
body {
  min-height: 100%;
  padding: 24px 16px 106px;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    radial-gradient(900px 460px at 50% -180px, rgba(38,224,179,.12), transparent 68%),
    #05070a;
  background-size: 36px 36px, 36px 36px, auto, auto;
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#app,
.container { width: 100%; max-width: 760px; }

/* — Brand header — */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 126px;
  margin: 0 0 18px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(38,224,179,.075), transparent 36%),
    linear-gradient(180deg, #0d131a, #080c11);
  box-shadow: 0 18px 60px rgba(0,0,0,.26);
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: linear-gradient(var(--accent), rgba(38,224,179,.18));
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 210px; height: 210px;
  right: -40px; top: -44px;
  background: url('../assets/lemberg-icon.png') center/contain no-repeat;
  opacity: .055;
  filter: grayscale(1) brightness(2.1);
  transform: rotate(-7deg);
}
.hero-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-brand-logo {
  width: 60px; height: 60px;
  flex: 0 0 60px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(38,224,179,.42);
  box-shadow: 0 0 0 5px rgba(38,224,179,.055);
}
.hero-copy { min-width: 0; }
.hero-kicker {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-title {
  font-size: 29px;
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.hero-title span {
  color: var(--accent);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.hero-meta {
  margin-top: 8px;
  color: var(--sub);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .02em;
}
.gw-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 74px;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(38,224,179,.28);
  background: rgba(3,8,10,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.gw-chip small {
  color: var(--sub);
  font-size: 7.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .11em;
}
.gw-chip b {
  margin-top: 3px;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

/* — Page rhythm / editorial labels — */
.app-screen.active { animation: v70ScreenIn .22s ease both; }
@keyframes v70ScreenIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.section-label {
  position: relative;
  margin: 26px 0 10px;
  padding-left: 11px;
  color: #b9c1ca;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .145em;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  border-radius: 4px;
  background: var(--accent);
}
.section-label::after { background: linear-gradient(90deg, rgba(255,255,255,.10), transparent); }

/* — Review as a magazine teaser, not a billboard — */
.daily-review-jump-wrap { margin: 0 0 18px; }
.daily-review-jump-btn {
  min-height: 68px;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(38,224,179,.19);
  background:
    linear-gradient(90deg, rgba(38,224,179,.09), rgba(38,224,179,.018) 46%, transparent),
    #0a1016;
  box-shadow: none;
}
.daily-review-jump-btn:hover { border-color: rgba(38,224,179,.38); background-color: #0d151c; }
.daily-review-jump-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  box-shadow: 0 0 0 1px rgba(38,224,179,.28), 0 8px 24px rgba(0,0,0,.22);
}
.daily-review-jump-btn b { font-size: 13px; letter-spacing: -.01em; }
.daily-review-jump-btn small { margin-top: 3px; font-size: 9.5px; }
.daily-review-jump-arrow {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(38,224,179,.08);
  color: var(--accent);
}
.daily-review-jump-wrap .daily-review-card {
  margin-top: 8px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: #090d12;
  box-shadow: none;
}
.daily-review-card h1,
.daily-review-card h2,
.daily-review-card h3 {
  margin-top: 18px;
  color: #fff;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.daily-review-card p { color: #aab3be; line-height: 1.75; }

/* — Standing table becomes the central competition board — */
.standings-list { gap: 6px; }
.standing-row {
  position: relative;
  overflow: hidden;
  padding: 11px 13px 11px 9px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(90deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  box-shadow: none;
}
.standing-row::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 72%, rgba(38,224,179,.025));
}
.standing-row:hover { background: #10171e; border-color: rgba(255,255,255,.13); }
.row-top { grid-template-columns: 34px minmax(0,1fr) auto; gap: 7px; }
.rank-position { width: 34px; }
.rank-chip {
  width: 28px; height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.085);
  background: #080c10;
  font-size: 12px;
  font-weight: 900;
}
.row-team .t-name { font-size: 13.5px; font-weight: 850; letter-spacing: -.01em; }
.row-team .m-name { margin-top: 2px; color: #76808c; font-size: 9.5px; font-weight: 650; }
.row-stats { gap: 12px; }
.stat-wdl { font-size: 9.5px; }
.stat-record-form { gap: 3px; }
.form-strip { gap: 2px; }
.form-badge {
  width: 17px; height: 17px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 950;
}
.stat-pts .pts-num-h2h { font-size: 17px; font-weight: 950; letter-spacing: -.035em; }
.rank-trend { margin-top: 3px; font-size: 8px; font-weight: 800; }
.qualification-separator {
  margin: -1px 1px 0;
  height: 13px;
  font-size: 7.5px;
  opacity: .88;
  column-gap: 9px;
}
.qualification-separator-line {
  width: calc(100% - 8px);
  height: 9px;
  transform: translateY(-2px);
}
.qualification-separator-line-left { margin-left: 4px; }
.qualification-separator-line-right { margin-right: 4px; }
.qualification-separator-ucl { color: #71aaff; }
.qualification-separator-uel { color: #ffb653; }

/* — Match centre — */
.h2h-gw-nav,
.epl-gw-nav {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px auto;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #080c11;
}
.h2h-gw-arrow,
.epl-gw-arrow {
  width: 34px; height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sub);
}
.h2h-gw-select,
.epl-gw-select {
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.h2h-grid { gap: 7px; }
.h2h-card-wrap,
.h2h-future-card {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.075);
  background: #0a0f15;
  box-shadow: none;
}
.h2h-card-wrap { padding: 13px 14px; }
.h2h-card-wrap:hover { background: #0f161d; border-color: rgba(38,224,179,.17); }
.h2h-card { gap: 8px; }
.h2h-team { color: #dce2e8; font-size: 11.5px; font-weight: 800; }
.h2h-score {
  min-width: 76px;
  padding: 5px 8px;
  border-radius: 9px;
  background: #05080c;
  border: 1px solid rgba(255,255,255,.075);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -.04em;
}
.h2h-score-num { color: #fff; }
.h2h-score-sep { color: #59636f; }
.h2h-active-chip {
  border-color: rgba(38,224,179,.24);
  background: rgba(38,224,179,.09);
  color: var(--accent);
}

/* — Player detail surfaces — */
.squad-panel { border-top-color: rgba(255,255,255,.07); }
.player-chip,
.epl-live-player-row {
  border-radius: 8px;
  border-color: rgba(255,255,255,.065);
  background: rgba(255,255,255,.025);
}
.player-chip:hover { background: rgba(38,224,179,.045); border-color: rgba(38,224,179,.18); }
.player-chip .pts,
.epl-live-player-points { color: var(--accent); }
.player-breakdown,
.epl-player-breakdown { background: #070a0e; border-color: rgba(255,255,255,.075); }

/* — EPL fixtures — */
.epl-grid { gap: 7px; }
.epl-card {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 11px;
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
}
.epl-card.clickable:hover { background: #0f161d; }
.epl-status {
  border: 1px solid rgba(255,255,255,.06);
  background: #070a0e;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .04em;
}
.epl-status.live { border-color: rgba(38,224,179,.25); background: rgba(38,224,179,.09); color: var(--accent); }

/* — Top / transfers — */
.sub-tabs,
#screen-heroes .top-mode-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: #080c11;
}
.sub-tab-btn,
#screen-heroes .top-mode-btn {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #7d8793;
}
.sub-tab-btn.active,
#screen-heroes .top-mode-btn.active {
  border: 0;
  background: rgba(38,224,179,.10);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(38,224,179,.18);
}
.heroes-wrap { gap: 6px; }
.hero-item {
  padding: 11px 13px;
  border-radius: 11px;
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 10px;
}
.hero-item:hover { background: #0f161d; }
.hero-item:nth-child(1),
.hero-item:nth-child(2),
.hero-item:nth-child(3) { border-left-width: 1px; }
.hero-rank-chip {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: #070a0e;
  border-color: rgba(255,255,255,.08);
  font-weight: 950;
}
.hero-name { font-weight: 850; }
#screen-heroes .top-transfer-group-heading,
#screen-heroes .top-transfer-head,
#screen-heroes .top-transfer-card {
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
  border-radius: 12px;
}
#screen-heroes .top-transfer-card { overflow: hidden; }
#screen-heroes .top-transfer-row { border-bottom-color: rgba(255,255,255,.05); }
#screen-heroes .top-transfer-row.league-row.open { background: rgba(38,224,179,.035); }
#screen-heroes .top-transfer-kicker { color: var(--accent); }

/* — Compare — */
.compare-select-grid { gap: 8px; }
.compare-select-wrap select {
  min-height: 45px;
  border-radius: 11px;
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
  color: var(--text);
}
.compare-info-card {
  border-radius: 12px;
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
}
.compare-info-row { border-bottom-color: rgba(255,255,255,.055); }
.compare-transfer-row {
  border-radius: 9px;
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.024);
}
.compare-chip-badge { border-radius: 999px; }

/* — Ownership — */
#screen-ownership .captain-compare-col {
  border-radius: 12px;
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
}
#screen-ownership .captain-compare-head,
#screen-ownership .captain-mini-row { border-bottom-color: rgba(255,255,255,.05); }
#screen-ownership .captain-mini-value { color: var(--accent); }
.captain-card,
.legend-bar {
  border-radius: 12px;
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
}

/* — Classic — */
.classic-wrap {
  border-radius: 12px;
  border-color: rgba(255,255,255,.075);
  background: #0a0f15;
}
.classic-header-row {
  background: #070a0e;
  color: #717b87;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.classic-row-wrap { border-bottom-color: rgba(255,255,255,.05); }
.classic-row-wrap:hover { background: #0f161d; }
.classic-team-name { font-weight: 850; }

/* — Floating mobile-style dock on every screen — */
.bottom-nav {
  left: 50%; right: auto;
  bottom: 14px;
  width: min(720px, calc(100% - 28px));
  height: 66px;
  padding: 6px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(7,10,14,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-item {
  height: 54px;
  border-radius: 13px;
  color: #707a87;
  font-size: 8.5px;
  font-weight: 800;
  gap: 3px;
}
.nav-item.active {
  color: var(--accent);
  background: rgba(38,224,179,.07);
  border: 1px solid rgba(38,224,179,.55);
}
.nav-icon-svg { width: 19px; height: 19px; stroke: currentColor; }
.nav-item.active .nav-icon-svg { stroke: var(--accent); }

/* — Small system details — */
.owner-tag.captain,
.stat-lbl.assist { border-radius: 999px; }
.legend-bar { color: #8d97a3; }
.gw-pill { border-radius: 8px; }
.gw-pill.high-pts { background: rgba(38,224,179,.08); border-color: rgba(38,224,179,.22); }
.gw-pill.high-pts .gw-pts { color: var(--accent); }

@media (max-width: 600px) {
  body {
    padding: 12px 10px 94px;
    background-size: 28px 28px, 28px 28px, auto, auto;
  }
  #app, .container { max-width: 100%; }
  .hero {
    min-height: 104px;
    margin-bottom: 12px;
    padding: 15px 14px 14px;
    border-radius: 17px;
  }
  .hero::after { width: 150px; height: 150px; right: -44px; top: -30px; opacity: .045; }
  .hero-brand { gap: 11px; }
  .hero-brand-logo { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; }
  .hero-kicker { font-size: 7.5px; letter-spacing: .13em; }
  .hero-title { font-size: 21px; }
  .hero-meta { margin-top: 6px; font-size: 8.5px; }
  .gw-chip { min-width: 60px; min-height: 54px; padding: 8px 9px; border-radius: 12px; }
  .gw-chip small { font-size: 6.5px; }
  .gw-chip b { font-size: 20px; }

  .daily-review-jump-btn { min-height: 60px; padding: 9px 10px; border-radius: 14px; }
  .daily-review-jump-icon { width: 39px; height: 39px; flex-basis: 39px; border-radius: 11px; }
  .daily-review-jump-btn b { font-size: 11.5px; }
  .daily-review-jump-btn small { font-size: 8.5px; }
  .daily-review-jump-arrow { width: 28px; height: 28px; }
  .daily-review-jump-wrap .daily-review-card { padding: 16px 14px 14px; }
  .daily-review-card { font-size: 13px; }

  .section-label { margin-top: 22px; font-size: 8.5px; }
  .standing-row { padding: 9px 9px 9px 7px; border-radius: 10px; }
  .row-top { grid-template-columns: 31px minmax(0,1fr) auto; gap: 5px; }
  .rank-position { width: 31px; }
  .rank-chip { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  .row-team .t-name { font-size: 11.5px; }
  .row-team .m-name { font-size: 8.5px; }
  .row-stats { gap: 7px; }
  .stat-wdl { font-size: 8.5px; }
  .form-badge { width: 15px; height: 15px; font-size: 7px; }
  .stat-pts .pts-num-h2h { font-size: 15px; }

  .h2h-card-wrap { padding: 11px 10px; }
  .h2h-team { font-size: 10.5px; }
  .h2h-score { min-width: 66px; padding: 4px 7px; font-size: 15px; }
  .h2h-duo-squads { gap: 7px; }

  .bottom-nav {
    bottom: 8px;
    width: calc(100% - 16px);
    height: 62px;
    padding: 5px;
    border-radius: 16px;
  }
  .nav-item { height: 50px; border-radius: 11px; font-size: 7.5px; }
  .nav-icon-svg { width: 18px; height: 18px; }
}

@media (max-width: 390px) {
  .hero-title { font-size: 19px; }
  .hero-meta { display: block; margin-top: 5px; font-size: 7.5px; }
  .gw-chip { min-width: 55px; }
  .row-team .m-name { display: none; }
  .form-badge { width: 14px; height: 14px; }
  .stat-wdl { font-size: 8px; }
  .nav-item span { font-size: 7px; }
}

/* v70.4 — compact SVG goal icon for Top stats */
.icon-goal-svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-goal-svg circle { fill: currentColor; stroke: none; }

/* v70.5 — active bottom tab: icon + label only */
.nav-item.active {
  color: var(--accent);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.nav-item.active .nav-icon-svg { stroke: var(--accent); }


/* =========================================================
   v71 — LIGHT THEME + FINISHING POLISH
   Same geometry, alternate broadcast palette.
   ========================================================= */
.theme-toggle {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  flex: 0 0 34px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: var(--sub);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-actions { display:flex; align-items:center; gap:8px; }

html[data-theme="light"] {
  --bg: #eef2f3;
  --panel: #ffffff;
  --panel-2: #f5f7f8;
  --card: #ffffff;
  --card-hover: #f4f8f7;
  --card-border: rgba(12,25,31,.11);
  --text: #10171b;
  --sub: #66727a;
  --muted-2: #8c969c;
  --ucl: #008f72;
  --uel: #3978cf;
  --accent: #008f72;
  --accent-soft: rgba(0,143,114,.09);
  --accent-line: rgba(0,143,114,.32);
  --pts-h2h: #10171b;
  --up: #008f72;
  --down: #d84f5d;
  background: var(--bg);
}
html[data-theme="light"] body {
  color: var(--text);
  background:
    linear-gradient(rgba(12,25,31,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,25,31,.028) 1px, transparent 1px),
    radial-gradient(900px 460px at 50% -180px, rgba(0,143,114,.12), transparent 68%),
    #eef2f3;
}
html[data-theme="light"] .hero {
  border-color: rgba(12,25,31,.12);
  background: linear-gradient(115deg, rgba(0,143,114,.08), transparent 38%), linear-gradient(180deg,#ffffff,#f8faf9);
  box-shadow: 0 18px 55px rgba(35,55,60,.10);
}
html[data-theme="light"] .hero::before { background: linear-gradient(var(--accent), rgba(0,143,114,.20)); }
html[data-theme="light"] .hero::after { opacity:.045; filter: grayscale(1) brightness(.55); }
html[data-theme="light"] .hero-brand-logo { border-color: rgba(0,143,114,.32); box-shadow:0 0 0 5px rgba(0,143,114,.05); }
html[data-theme="light"] .gw-chip,
html[data-theme="light"] .theme-toggle { background: rgba(255,255,255,.78); border-color: rgba(12,25,31,.12); }
html[data-theme="light"] .section-label { color:#536068; }
html[data-theme="light"] .section-label::after { background:linear-gradient(90deg,rgba(12,25,31,.13),transparent); }
html[data-theme="light"] .standing-row,
html[data-theme="light"] .h2h-card-wrap,
html[data-theme="light"] .epl-fixture-card,
html[data-theme="light"] .hero-item,
html[data-theme="light"] .captain-mini-row,
html[data-theme="light"] .classic-row-wrap,
html[data-theme="light"] #screen-heroes .top-transfer-card,
html[data-theme="light"] #screen-heroes .top-transfer-head,
html[data-theme="light"] #screen-heroes .top-transfer-group-heading {
  border-color: rgba(12,25,31,.10);
  background: #ffffff;
}
html[data-theme="light"] .standing-row::after { background:linear-gradient(90deg,transparent 72%,rgba(0,143,114,.025)); }
html[data-theme="light"] .standing-row:hover,
html[data-theme="light"] .h2h-card-wrap:hover,
html[data-theme="light"] .hero-item:hover,
html[data-theme="light"] .classic-row-wrap:hover { background:#f4f8f7; border-color:rgba(12,25,31,.16); }
html[data-theme="light"] .rank-chip,
html[data-theme="light"] .h2h-score,
html[data-theme="light"] .player-chip,
html[data-theme="light"] .gw-pill { background:#f4f6f7; border-color:rgba(12,25,31,.10); }
html[data-theme="light"] .row-team .m-name { color:#7b878e; }
html[data-theme="light"] .h2h-gw-nav,
html[data-theme="light"] .epl-gw-nav { background:#ffffff; border-color:rgba(12,25,31,.11); }
html[data-theme="light"] .daily-review-jump-btn { border-color:rgba(0,143,114,.18); background:linear-gradient(90deg,rgba(0,143,114,.08),rgba(0,143,114,.015) 46%,transparent),#ffffff; }
html[data-theme="light"] .daily-review-jump-btn:hover { background-color:#f5faf8; border-color:rgba(0,143,114,.32); }
html[data-theme="light"] .daily-review-jump-wrap .daily-review-card { background:#ffffff; border-color:rgba(12,25,31,.10); border-left-color:var(--accent); }
html[data-theme="light"] .daily-review-card h1,
html[data-theme="light"] .daily-review-card h2,
html[data-theme="light"] .daily-review-card h3 { color:#10171b; }
html[data-theme="light"] .daily-review-card p { color:#536068; }
html[data-theme="light"] .bottom-nav { background:rgba(255,255,255,.92); border-color:rgba(12,25,31,.12); box-shadow:0 18px 50px rgba(35,55,60,.16),inset 0 1px rgba(255,255,255,.7); }
html[data-theme="light"] .nav-item { color:#6c777e; }
html[data-theme="light"] .squad-panel,
html[data-theme="light"] .player-breakdown,
html[data-theme="light"] .league-transfer-managers { border-color:rgba(12,25,31,.09); background:#f7f9f9; }
html[data-theme="light"] .qualification-separator-ucl { color:#3978cf; }
html[data-theme="light"] .qualification-separator-uel { color:#d78616; }
html[data-theme="light"] select { color:var(--text); }
html[data-theme="light"] option { background:#fff; color:#10171b; }

@media (max-width:600px) {
  .hero-actions { gap:6px; }
  .theme-toggle { width:32px; height:32px; flex-basis:32px; border-radius:10px; }
}

/* v71.1 — separator midpoint + complete light-theme broadcast overrides */
.qualification-separator-line {
  width: calc(100% - 1px);
}
.qualification-separator-line-left { margin-left: .5px; }
.qualification-separator-line-right { margin-right: .5px; }

html[data-theme="light"] .h2h-card-wrap,
html[data-theme="light"] .h2h-future-card,
html[data-theme="light"] .epl-card,
html[data-theme="light"] .hero-item,
html[data-theme="light"] #screen-heroes .top-transfer-group-heading,
html[data-theme="light"] #screen-heroes .top-transfer-head,
html[data-theme="light"] #screen-heroes .top-transfer-card,
html[data-theme="light"] .compare-select-wrap select,
html[data-theme="light"] .compare-info-card,
html[data-theme="light"] #screen-ownership .captain-compare-col,
html[data-theme="light"] .captain-card,
html[data-theme="light"] .legend-bar,
html[data-theme="light"] .classic-wrap {
  background:#ffffff;
  border-color:rgba(12,25,31,.11);
}
html[data-theme="light"] .h2h-card-wrap:hover,
html[data-theme="light"] .epl-card.clickable:hover,
html[data-theme="light"] .hero-item:hover,
html[data-theme="light"] .classic-row-wrap:hover {
  background:#f4f8f7;
  border-color:rgba(12,25,31,.16);
}
html[data-theme="light"] .h2h-team,
html[data-theme="light"] .h2h-score-num,
html[data-theme="light"] .legend-note b,
html[data-theme="light"] .epl-teams {
  color:#10171b;
}
html[data-theme="light"] .h2h-score,
html[data-theme="light"] .hero-rank-chip,
html[data-theme="light"] .epl-status,
html[data-theme="light"] .player-breakdown,
html[data-theme="light"] .epl-player-breakdown {
  background:#f4f6f7;
  border-color:rgba(12,25,31,.10);
}
html[data-theme="light"] .h2h-score-sep { color:#8c969c; }
html[data-theme="light"] .epl-status { color:#66727a; }
html[data-theme="light"] .sub-tabs,
html[data-theme="light"] #screen-heroes .top-mode-tabs {
  background:#ffffff;
  border-color:rgba(12,25,31,.11);
}
html[data-theme="light"] .sub-tab-btn,
html[data-theme="light"] #screen-heroes .top-mode-btn { color:#66727a; }
html[data-theme="light"] .classic-header-row {
  background:#f4f6f7;
  color:#66727a;
}
html[data-theme="light"] .classic-row-wrap,
html[data-theme="light"] #screen-heroes .top-transfer-row,
html[data-theme="light"] #screen-ownership .captain-compare-head,
html[data-theme="light"] #screen-ownership .captain-mini-row,
html[data-theme="light"] .compare-info-row {
  border-color:rgba(12,25,31,.08);
}
html[data-theme="light"] .compare-transfer-row,
html[data-theme="light"] .epl-live-player-row {
  background:#f7f9f9;
  border-color:rgba(12,25,31,.08);
}
html[data-theme="light"] .epl-live-empty { border-color:rgba(12,25,31,.10); }

/* v72 — H2H table movement */
#screen-compare .movement-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:4px 0 14px;
}
#screen-compare .movement-kicker {
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
}
#screen-compare .movement-title {
  margin-top:4px;
  color:var(--text);
  font-size:23px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.035em;
}
#screen-compare .movement-sub {
  margin-top:7px;
  max-width:430px;
  color:var(--sub);
  font-size:11px;
  line-height:1.45;
}
#screen-compare .movement-team-picker {
  flex:0 0 220px;
  display:grid;
  gap:5px;
}
#screen-compare .movement-team-picker > span {
  color:var(--sub);
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}
#screen-compare .movement-team-picker select {
  width:100%;
  height:40px;
  padding:0 34px 0 12px;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--card-border);
  border-radius:12px;
  outline:none;
  font:800 11px/1 inherit;
}
#screen-compare .movement-card {
  overflow:hidden;
  border:1px solid var(--card-border);
  border-radius:18px;
  background:var(--card);
}
#screen-compare .movement-summary {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--card-border);
}
#screen-compare .movement-summary > div {
  padding:12px 14px 11px;
  min-width:0;
  border-right:1px solid var(--card-border);
}
#screen-compare .movement-summary > div:last-child { border-right:0; }
#screen-compare .movement-summary span {
  display:block;
  color:var(--sub);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#screen-compare .movement-summary b {
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:17px;
  line-height:1;
}
#screen-compare .movement-summary b.up { color:var(--up); }
#screen-compare .movement-summary b.down { color:var(--down); }
#screen-compare .movement-chart-scroll {
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 8px 0;
  scrollbar-width:thin;
}
#screen-compare .movement-chart {
  display:block;
  max-width:none;
}
#screen-compare .movement-grid-line {
  stroke:rgba(255,255,255,.085);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
#screen-compare .movement-x-guide {
  stroke:rgba(255,255,255,.035);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
#screen-compare .movement-axis-label {
  fill:var(--sub);
  font-size:9px;
  font-weight:700;
}
#screen-compare .movement-y-label { font-weight:850; }
#screen-compare .movement-line {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
#screen-compare .movement-line-muted {
  stroke:rgba(135,145,158,.22);
  stroke-width:1.15;
}
#screen-compare .movement-line-active {
  stroke:var(--accent);
  stroke-width:3;
  filter:drop-shadow(0 0 4px rgba(38,224,179,.22));
}
#screen-compare .movement-point {
  fill:var(--card);
  stroke:var(--accent);
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}
#screen-compare .movement-footnote {
  padding:0 14px 12px;
  color:var(--muted-2);
  font-size:9px;
  text-align:right;
}
#screen-compare .movement-empty {
  padding:34px 18px;
  color:var(--sub);
  text-align:center;
  font-size:11px;
}
html[data-theme="light"] #screen-compare .movement-grid-line { stroke:rgba(17,28,38,.10); }
html[data-theme="light"] #screen-compare .movement-x-guide { stroke:rgba(17,28,38,.045); }
html[data-theme="light"] #screen-compare .movement-line-muted { stroke:rgba(70,84,97,.22); }
html[data-theme="light"] #screen-compare .movement-line-active { filter:drop-shadow(0 0 3px rgba(20,170,135,.18)); }

@media (max-width: 560px) {
  #screen-compare .movement-head {
    display:grid;
    align-items:stretch;
    gap:12px;
  }
  #screen-compare .movement-team-picker { flex-basis:auto; width:100%; }
  #screen-compare .movement-title { font-size:21px; }
  #screen-compare .movement-summary > div { padding:10px 8px 9px; }
  #screen-compare .movement-summary span { font-size:7px; letter-spacing:.05em; }
  #screen-compare .movement-summary b { font-size:15px; }
  #screen-compare .movement-chart-scroll { padding-left:2px; padding-right:2px; }
}


/* v73 — Compare / Movement switch */
#screen-compare .compare-mode-tabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  margin:0 0 14px;
  padding:4px;
  border:1px solid var(--card-border);
  border-radius:14px;
  background:var(--panel);
}
#screen-compare .top-mode-btn {
  height:36px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--sub);
  font:850 10px/1 inherit;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
}
#screen-compare .top-mode-btn.active {
  color:var(--text);
  background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--card-border);
}
#screen-compare .compare-view { display:none; }
#screen-compare .compare-view.active { display:block; }
html[data-theme="light"] #screen-compare .compare-mode-tabs { background:rgba(238,242,244,.92); }
html[data-theme="light"] #screen-compare .top-mode-btn.active { background:#fff; }


/* v75.1 — theme toggle shows the theme you can switch TO */
.theme-icon-sun { display:block; }
.theme-icon-moon { display:none; }
html[data-theme="light"] .theme-icon-sun { display:none !important; }
html[data-theme="light"] .theme-icon-moon { display:block !important; }

/* =========================================================
   v75.2 — real theme switch + compact autosub markers
   ========================================================= */
.theme-toggle {
  width: 48px !important;
  height: 28px !important;
  min-width: 48px;
  flex: 0 0 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  display: block !important;
  color: inherit;
  overflow: visible;
}

.theme-toggle-track {
  position: relative;
  display: block;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: background .18s ease, border-color .18s ease;
}

.theme-toggle-side {
  position: absolute;
  top: 7px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  z-index: 1;
  opacity: .48;
  transition: opacity .18s ease;
}

.theme-toggle-moon { left: 7px; color: #d5dbe0; }
.theme-toggle-sun  { right: 7px; color: #ffd76a; }

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5f7f8;
  box-shadow: 0 1px 5px rgba(0,0,0,.38);
  transition: transform .2s ease, background .18s ease;
  z-index: 2;
}

html[data-theme="dark"] .theme-toggle-moon { opacity: 1; }
html[data-theme="light"] .theme-toggle-sun { opacity: 1; }

html[data-theme="light"] .theme-toggle-track {
  background: rgba(38,224,179,.20);
  border-color: rgba(0,143,114,.30);
}
html[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(20px);
  background: #ffffff;
}

.theme-toggle:hover .theme-toggle-track {
  border-color: var(--accent-line);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.autosub-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  vertical-align: 1px;
}
.autosub-in { color: #34d399; }
.autosub-out { color: var(--down); }
.autosub-arrow {
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

@media (max-width:600px) {
  .theme-toggle {
    width: 46px !important;
    height: 26px !important;
    min-width: 46px;
    flex-basis: 46px !important;
  }
  .theme-toggle-track {
    width: 46px;
    height: 26px;
  }
  .theme-toggle-thumb {
    width: 18px;
    height: 18px;
  }
  html[data-theme="light"] .theme-toggle-thumb {
    transform: translateX(20px);
  }
  .theme-toggle-side {
    top: 6px;
  }
}

/* v75.3.1 — archived squad loading feedback */
.h2h-gw-pane.archive-loading {
  position: relative;
}
.archive-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--sub);
}
.archive-loading-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--card-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: archive-spin .65s linear infinite;
}
@keyframes archive-spin {
  to { transform: rotate(360deg); }
}

/* v76 — TOP Records */
#screen-heroes .top-mode-tabs { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
#screen-heroes .top-mode-btn { min-width:0; padding:0 4px; white-space:nowrap; }
.records-page-head{margin:2px 1px 16px}
.records-section-title{margin:4px 0 8px;color:var(--sub);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.records-section-gap{margin-top:20px}
.records-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.record-card{min-width:0;padding:13px 13px 12px;border:1px solid var(--card-border);border-radius:12px;background:var(--card)}
.record-eyebrow{color:var(--accent);font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.record-title{margin-top:4px;color:var(--sub);font-size:10px;font-weight:700;line-height:1.25}
.record-leaders{margin-top:10px}
.record-leader+.record-leader{margin-top:8px;padding-top:8px;border-top:1px solid var(--card-border)}
.record-team{overflow:hidden;color:var(--text);font-size:13px;font-weight:800;line-height:1.2;text-overflow:ellipsis}
.record-value{margin-top:3px;color:var(--sub);font-size:10px;font-weight:700}
.record-empty{color:var(--sub);font-size:11px}
@media(max-width:600px){
 #screen-heroes .top-mode-tabs{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:3px;padding:3px}
 #screen-heroes .top-mode-btn{height:34px;padding:0 2px;font-size:9px;letter-spacing:.035em}
 .records-grid{grid-template-columns:1fr;gap:7px}
 .record-card{padding:12px}
}

/* v77 — paired streak records (season record vs current) */
.records-paired-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.record-pair-card{min-width:0;padding:13px 13px 12px;border:1px solid var(--card-border);border-radius:12px;background:var(--card)}
.record-pair-title{color:var(--sub);font-size:10px;font-weight:800;line-height:1.25}
.record-pair-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
.record-pair-side{min-width:0;padding-right:11px}
.record-pair-side+.record-pair-side{padding-right:0;padding-left:11px;border-left:1px solid var(--card-border)}
.record-pair-side .record-leaders{margin-top:7px}
.records-grid-secondary{margin-top:8px}
@media(max-width:600px){
 .records-paired-grid{grid-template-columns:1fr;gap:7px}
 .record-pair-card{padding:12px}
 .record-pair-title{font-size:10.5px}
 .record-pair-side{padding-right:9px}
 .record-pair-side+.record-pair-side{padding-left:9px}
 .record-pair-side .record-team{font-size:12.5px;white-space:nowrap}
 .record-pair-side .record-value{font-size:9.5px}
}