:root {
  --bg: #f5f6f3;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --line: #dfe5df;
  --line-strong: #cad5cb;
  --text: #17201a;
  --muted: #667168;
  --green: #1f7a34;
  --green-soft: #e5f3e7;
  --blue: #275ea8;
  --blue-soft: #e8eef8;
  --red: #c94b4b;
  --red-soft: #fae9e8;
  --gold: #a97818;
  --gold-soft: #f7efd9;
  --shadow: 0 14px 42px rgba(31, 46, 35, 0.08);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #f8f9f6 0%, var(--bg) 42%, #eef2ef 100%);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.watermark {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('./assets/world-cup-watermark.png') center 43% / min(58vw, 760px) auto no-repeat;
  opacity: 0.11;
  pointer-events: none;
  filter: grayscale(0.2);
}
.watermark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246, 248, 244, 0.72);
}

.app-shell {
  width: min(1480px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 14px 0 28px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  font-weight: 900;
  letter-spacing: 0;
}
.cup-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1f7a34;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,0.15);
}
.nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 22px;
  min-width: 0;
}
.nav a {
  padding: 16px 0 13px;
  border-bottom: 2px solid transparent;
  font-size: 16px;
  color: #243027;
  white-space: nowrap;
}
.nav a.active {
  border-color: var(--green);
  color: var(--green);
  font-weight: 800;
}
.toolbar { display: flex; align-items: center; gap: 8px; }
.toolbar button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #334039;
  background: #fff;
}

main { padding-top: 18px; }
.login-entry {
  min-width: 58px;
  width: auto;
  padding: 0 12px;
  font-weight: 800;
}
.login-layer[hidden] { display: none; }
.login-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: start end;
  padding: 86px max(18px, calc((100vw - min(1480px, calc(100vw - 36px))) / 2 + 14px)) 18px 18px;
  background: rgba(23, 32, 26, 0.18);
}
.login-panel {
  position: relative;
  width: min(340px, calc(100vw - 36px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}
.login-panel h2 { margin: 0 0 14px; font-size: 20px; }
.login-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.login-form { display: grid; gap: 12px; }
.login-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.login-form input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  background: #fff;
}
.login-actions { display: flex; justify-content: flex-end; gap: 8px; }
.login-message { margin: 0; color: var(--green); font-weight: 800; }
.page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 16px;
}
.page-head h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  padding: 16px;
  min-width: 0;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  margin-bottom: 12px;
}
.panel h2, .panel h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.panel-head span { color: var(--muted); font-size: 13px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.status-tile {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 15px;
  background: #fff;
  display: grid;
  align-content: center;
  gap: 5px;
}
.status-tile span { color: var(--muted); font-size: 13px; }
.status-tile strong { font-size: 23px; line-height: 1; }
.status-tile.blue { background: var(--blue-soft); border-color: #c9d7ee; }
.status-tile.green { background: var(--green-soft); border-color: #c7dfcc; }
.status-tile.red { background: var(--red-soft); border-color: #eed1cf; }
.status-tile.gold { background: var(--gold-soft); border-color: #ead9ad; }

.flag-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 54px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid #d6ddd6;
  background: #f8faf8;
  color: #26342a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}
.team-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.team-badge span:last-child { display: grid; min-width: 0; }
.team-badge b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-badge em { color: var(--muted); font-style: normal; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-badge.compact .flag-code { min-width: 50px; height: 22px; }

.champion-list { display: grid; gap: 6px; }
.champion-row {
  display: grid;
  grid-template-columns: 26px minmax(98px, 140px) minmax(60px, 1fr) 58px;
  gap: 10px;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
}
.rank { color: var(--muted); font-weight: 800; }
.bar-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #e2e8e2;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
}
.bar-fill.blue { background: var(--blue); }
.bar-fill.red { background: var(--red); }
.bar-fill.gold { background: var(--gold); }

.focus-panel { display: grid; gap: 13px; }
.focus-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.focus-teams > span { color: var(--muted); font-weight: 800; }
.focus-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.focus-score span { font-size: 38px; font-weight: 900; }
.focus-score em { color: var(--muted); font-style: normal; font-size: 12px; }
.focus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.focus-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: #334039;
  font-size: 12px;
}
.pitch-visual {
  position: relative;
  height: 116px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cadfc8;
  background:
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(180deg, #4f9d5b, #246b33);
}
.pitch-visual::before, .pitch-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.72);
}
.pitch-visual::before { inset: 12px; }
.pitch-visual::after { width: 46px; height: 46px; border-radius: 50%; left: calc(50% - 23px); top: calc(50% - 23px); }
.pitch-visual span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.pitch-visual span:nth-child(1) { left: 25%; top: 28%; }
.pitch-visual span:nth-child(2) { left: 54%; top: 58%; }
.pitch-visual span:nth-child(3) { right: 22%; top: 34%; }

.triple-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9e4;
}
.triple-bar span:nth-child(1) { background: var(--blue); }
.triple-bar span:nth-child(2) { background: var(--gold); }
.triple-bar span:nth-child(3) { background: var(--red); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #bcd6be;
  border-radius: 6px;
  background: #fff;
  color: var(--green);
  font-weight: 800;
}
.btn.primary {
  border-color: #1f7a34;
  background: #1f7a34;
  color: #fff;
}
.btn.large { min-width: 260px; min-height: 54px; font-size: 18px; }

.match-stack { display: grid; gap: 10px; }
.match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.match-card {
  position: relative;
  display: grid;
  gap: 11px;
  min-height: 124px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.match-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 30px rgba(31,46,35,.08); }
.matchup-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.matchup-team {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  font-weight: 800;
}
.matchup-home { justify-self: end; }
.matchup-away { justify-self: start; }
.matchup-flag .flag-icon { font-size: 18px; }
.matchup-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matchup-code {
  min-width: 34px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}
.matchup-vs {
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}
.match-top, .match-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.match-top span { font-weight: 900; color: #324039; }
.match-teams {
  min-height: 34px;
}
.row-link { position: absolute; inset: 0; }

.tabs, .segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tab, .seg {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 11px;
  background: #fff;
  color: #44514a;
}
.tab.active, .seg.active {
  border-color: #a8ceb0;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 800;
}
.control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(360px, 100%);
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 8px; border-bottom: 1px solid #edf1ed; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 12px; font-weight: 700; }
td em { display: block; margin-top: 3px; color: var(--muted); font-style: normal; font-size: 12px; }

.bracket { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 11px; overflow-x: auto; }
.bracket-round h3 { margin: 0; font-size: 13px; text-align: center; }
.bracket-round p { margin: 3px 0 10px; color: var(--muted); text-align: center; font-size: 12px; }
.bracket-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #dbe5dc;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}
.bracket-node span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-node small { color: var(--muted); white-space: nowrap; }
.bracket-node.sample { background: #f8fbf7; }

.group-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.team-card {
  display: grid;
  gap: 10px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.team-card strong { font-size: 28px; }
.team-card span { color: var(--muted); font-size: 13px; }

.bracket-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.ko-node {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  margin-bottom: 9px;
}
.ko-node div { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.ko-node p { margin: 0; line-height: 1.7; }
.ko-node em { font-style: normal; font-weight: 900; color: var(--green); }
.ko-node small { color: var(--muted); line-height: 1.6; }

.leaderboard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.leader-main { display: grid; gap: 12px; }
.podium-card {
  min-height: 126px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.podium-card > span { font-size: 28px; font-weight: 900; color: var(--muted); }
.podium-card strong { font-size: 34px; color: var(--green); }
.podium-card em { grid-column: 2 / -1; color: var(--muted); font-style: normal; }
.prob-table { display: grid; gap: 4px; }
.prob-table-row {
  display: grid;
  grid-template-columns: 28px minmax(130px, 1fr) 70px 70px 72px;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  border-bottom: 1px solid #edf1ed;
  font-size: 13px;
}
.prob-table-row > span { color: var(--muted); font-weight: 800; }
.prob-table-row em { color: var(--muted); font-style: normal; }

.risk-list, .audit-list, .summary-list, .scoreline-list, .model-state { display: grid; gap: 9px; }
.risk-row, .audit-row, .summary-list div, .model-state div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 10px;
}
.risk-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
}
.risk-row p { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.risk-row em, .audit-row em { color: var(--green); font-style: normal; font-weight: 800; }
.audit-row { display: grid; grid-template-columns: 1fr 52px 66px; gap: 8px; align-items: center; }
.summary-list div, .model-state div { display: flex; justify-content: space-between; gap: 12px; }
.summary-list span, .model-state span { color: var(--muted); }
.scoreline-row {
  display: grid;
  grid-template-columns: 42px 1fr 58px;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}

.match-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.back {
  min-width: 64px;
  color: var(--green);
  font-weight: 800;
  font-size: 13px;
}
.result-head { text-align: center; }
.result-title { font-size: 25px; font-weight: 900; margin-bottom: 4px; }
.meta { color: var(--muted); font-size: 13px; }
.match-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.team-mini, .prediction-center { display: grid; gap: 14px; }
.team-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.team-mini-head strong { color: var(--green); font-size: 22px; }
.ladder { display: grid; gap: 9px; }
.ladder > div { display: grid; grid-template-columns: 42px 1fr 58px; gap: 8px; align-items: center; font-size: 12px; }
.score-main { text-align: center; }
.score-main strong { display: block; font-size: 46px; line-height: 1; }
.score-main span { color: var(--muted); }
.wdl-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.wdl-mini div { border: 1px solid var(--line); border-radius: 6px; padding: 9px 6px; background: #fff; }
.wdl-mini b { display: block; font-size: 20px; }
.wdl-mini span { color: var(--muted); font-size: 12px; }
.xg-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; text-align: center; align-items: center; }
.xg-pair span { font-size: 28px; font-weight: 900; }
.xg-pair em { color: var(--muted); font-style: normal; }
.cta-row { text-align: center; margin: 18px 0; }

.lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.team-page-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; }
.team-page-grid .lineup-panel { grid-row: span 3; }
.team-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}
.hero-code {
  width: 78px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 23px;
  font-weight: 900;
}
.team-hero h1 { margin: 0 0 5px; font-size: 30px; }
.team-hero h1 span { color: var(--muted); font-weight: 700; }
.team-hero p { margin: 0; color: var(--muted); }
.subnav {
  display: flex;
  gap: 26px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.subnav span { padding: 12px 0; white-space: nowrap; color: var(--muted); }
.subnav .active { color: var(--green); font-weight: 800; border-bottom: 2px solid var(--green); }

.pitch {
  position: relative;
  height: 430px;
  border: 1px solid #b9d4bc;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 38px 100%,
    linear-gradient(180deg, #87bf78, #3f8848);
  margin-bottom: 12px;
}
.pitch::before {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(255,255,255,.72);
}
.pitch-line.center { position: absolute; left: 15px; right: 15px; top: 50%; border-top: 1px solid rgba(255,255,255,.72); }
.pitch-box {
  position: absolute;
  left: 31%;
  width: 38%;
  height: 70px;
  border: 1px solid rgba(255,255,255,.72);
}
.pitch-box.top { top: 15px; }
.pitch-box.bottom { bottom: 15px; }
.player-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 94px;
  text-align: center;
}
.player-dot span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.player-dot b {
  max-width: 94px;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.84);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-table { max-height: 300px; }
.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
}
.status.ok { background: var(--green-soft); color: var(--green); }
.status.warn { background: var(--gold-soft); color: var(--gold); }

.result-tabs {
  display: flex;
  justify-content: center;
  gap: 38px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  overflow-x: auto;
}
.result-tabs span { padding: 12px 0; color: var(--muted); white-space: nowrap; }
.result-tabs .active { color: var(--green); border-bottom: 2px solid var(--green); font-weight: 800; }
.result-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin-bottom: 14px; }
.prob-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
.prob-card > div:not(.triple-bar) { border: 1px solid var(--line); border-radius: 8px; padding: 14px 8px; background: #fff; }
.prob-card strong { display: block; font-size: 34px; }
.prob-card span { color: var(--muted); font-size: 13px; }
.prob-card .triple-bar { grid-column: 1 / -1; }
.candidate-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.candidate-scores span { border: 1px solid var(--line); border-radius: 6px; padding: 9px; text-align: center; background: #fff; font-weight: 900; }
.candidate-scores small { display: block; margin-top: 4px; color: var(--muted); font-weight: 500; }
.compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 16px; }
.metric-row {
  display: grid;
  grid-template-columns: 142px 46px 1fr 46px;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  font-size: 13px;
}
.dualbar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #e1e7e2;
  overflow: hidden;
}
.dualbar span { position: absolute; top: 0; height: 100%; }
.dualbar .home { left: 0; background: var(--blue); }
.dualbar .away { right: 0; background: var(--red); opacity: .75; }
.radar-wrap { display: grid; place-items: center; min-height: 330px; }
.radar-wrap svg { width: min(100%, 330px); height: auto; }
.radar-wrap circle { fill: none; stroke: #dfe5df; }
.radar-wrap polygon { stroke-width: 2; }
.radar-wrap .home-poly { fill: rgba(39,94,168,.16); stroke: var(--blue); }
.radar-wrap .away-poly { fill: rgba(201,75,75,.13); stroke: var(--red); }
.radar-wrap text { fill: var(--muted); font-size: 12px; }
.report { margin: 0; color: #34413a; line-height: 1.9; }
.impact-list { display: grid; gap: 12px; }
.impact-list div { display: grid; grid-template-columns: 92px 1fr 58px; gap: 10px; align-items: center; }

.empty-state {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1180px) {
  .dashboard-grid, .status-strip, .match-detail-grid, .team-page-grid, .leaderboard, .result-grid, .compare-grid { grid-template-columns: 1fr; }
  .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: span 1; }
  .match-grid, .group-board, .team-grid, .lineup-grid, .bracket-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { align-items: flex-start; flex-wrap: wrap; }
  .nav a { font-size: 15px; padding-top: 13px; padding-bottom: 11px; }
  .nav { justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .toolbar { margin-left: auto; }
}

@media (max-width: 720px) {
  .app-shell { width: calc(100vw - 18px); padding-top: 8px; }
  .brand { min-width: 0; }
  .toolbar { display: none; }
  .nav { gap: 18px; }
  .nav a { font-size: 15px; padding-top: 12px; padding-bottom: 10px; }
  .home-layout .top-grid { display: flex; flex-direction: column; }
  .top-grid > .home-matches { order: 1; }
  .top-grid > .home-focus { order: 2; }
  .top-grid > .home-champions { order: 3; }
  .page-head, .control-bar, .team-hero, .match-header { display: grid; grid-template-columns: 1fr; align-items: start; }
  .status-strip, .match-grid, .group-board, .team-grid, .lineup-grid, .bracket-board { grid-template-columns: 1fr; }
  .panel { padding: 13px; }
  .focus-score span { font-size: 32px; }
  .champion-row { grid-template-columns: 24px minmax(92px, 1fr) 64px; }
  .champion-row .bar-track { display: none; }
  .prob-table-row { grid-template-columns: 28px minmax(120px, 1fr) 64px; }
  .prob-table-row em { display: none; }
  .bracket { grid-template-columns: repeat(6, 150px); }
  .pitch { height: 360px; }
  .metric-row { grid-template-columns: 120px 42px 1fr; }
  .metric-row > b:last-child { display: none; }
  .candidate-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-list div { grid-template-columns: 76px 1fr 54px; }
}





.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-title {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 30px;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-name {
  color: #63b33d;
  font-weight: 950;
}

.brand-system {
  color: #17201a;
}

.flag-code {
  gap: 4px;
}

.flag-icon {
  display: inline-block;
  width: 24px;
  height: 16px;
  flex: 0 0 24px;
  border-radius: 2px;
  object-fit: cover;
  background: #eef3ef;
  box-shadow: 0 0 0 1px rgba(38, 52, 42, .12);
  vertical-align: -2px;
}

.history-pending {
  min-height: 128px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 16px;
}

.history-pending strong {
  color: var(--green);
  font-size: 26px;
}

.history-pending span {
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 1180px) {
  .brand-logo { width: 50px; height: 50px; }
  .brand-title { font-size: 26px; }
}

@media (max-width: 720px) {
  .topbar { gap: 10px; }
  .brand { width: 100%; justify-content: center; text-align: center; }
  .brand-logo { width: 46px; height: 46px; }
  .brand-title { font-size: 23px; }
}

.topbar {
  position: sticky;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.brand {
  grid-column: 1 / -1;
  justify-self: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.nav {
  grid-column: 1 / -1;
  justify-self: center;
  flex: 0 1 auto;
}

.toolbar {
  position: absolute;
  right: 10px;
  top: 20px;
}

@media (max-width: 720px) {
  .toolbar { display: none; }
  .nav { justify-self: stretch; }
}

.history-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.bracket-route-page .page-head {
  align-items: center;
}

.route-stage {
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: var(--shadow);
  padding: 18px;
  color: #17201a;
  overflow: hidden;
}

.route-stage-title {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin-bottom: 16px;
  text-align: center;
}

.route-stage-title span {
  color: #17201a;
  font-size: 20px;
  font-weight: 950;
}

.route-stage-title strong {
  color: #466174;
  font-size: 13px;
}

.route-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

.route-board {
  position: relative;
  min-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.route-half {
  min-width: 0;
}

.route-half h2 {
  margin: 0 0 10px;
  color: #27425a;
  font-size: 16px;
  text-align: center;
}

.route-columns {
  display: grid;
  grid-template-columns: 1.28fr 1fr .82fr .7fr;
  gap: 12px;
  align-items: center;
}

.route-right .route-columns {
  grid-template-columns: .7fr .82fr 1fr 1.28fr;
}

.route-round {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.route-round h3 {
  margin: 0;
  color: #466174;
  font-size: 12px;
  text-align: center;
}

.route-round-matches {
  display: grid;
  gap: 8px;
}

.route-r32 .route-round-matches { grid-template-rows: repeat(8, minmax(50px, auto)); }
.route-r16 .route-round-matches { grid-template-rows: repeat(4, minmax(68px, auto)); gap: 20px; }
.route-qf .route-round-matches { grid-template-rows: repeat(2, minmax(90px, auto)); gap: 56px; }
.route-sf .route-round-matches { grid-template-rows: minmax(110px, auto); }

.route-match {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 50px;
  border: 1px solid #d2dce7;
  border-radius: 5px;
  background: #eef3f8;
  color: #17201a;
  padding: 7px;
  box-shadow: 0 8px 18px rgba(39, 66, 90, .10);
}

.route-match b,
.final-match b {
  color: #466174;
  font-size: 11px;
}

.route-slot {
  min-height: 22px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  background: #f8fafc;
  padding: 0 8px;
  color: #17201a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.route-slot span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-final {
  display: grid;
  gap: 16px;
  justify-items: center;
  align-content: center;
}

.champion-card {
  width: 150px;
  min-height: 88px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 2px solid #f2d36b;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff9d2, #f1c954);
  color: #17201a;
  box-shadow: 0 16px 30px rgba(0,0,0,.24);
}

.champion-card span {
  font-size: 12px;
  font-weight: 900;
}

.champion-card strong {
  font-size: 22px;
}

.final-match {
  width: 170px;
  display: grid;
  gap: 7px;
  border: 1px solid #d2dce7;
  border-radius: 7px;
  background: #eef3f8;
  padding: 10px;
  color: #17201a;
}

@media (max-width: 900px) {
  .route-stage { padding: 12px; }
  .route-board { min-width: 1060px; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); gap: 14px; }
  .route-columns { gap: 9px; }
  .route-slot { font-size: 11px; padding: 0 6px; }
}

.fundamentals-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr) minmax(0, 1fr);
}

.fundamentals-panel {
  align-content: start;
}

.fundamental-teams {
  display: grid;
  gap: 10px;
}

.fundamental-teams > div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 10px;
}

.fundamental-teams span:not(.flag-icon):not(.flag-code span) {
  color: var(--muted);
  font-size: 12px;
}

.fundamental-list {
  display: grid;
  gap: 8px;
}

.fundamental-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf1ed;
  padding-bottom: 8px;
  font-size: 13px;
}

.fundamental-list span {
  color: var(--muted);
}

.player-name {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  outline: none;
}

.player-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-name:focus-visible > span {
  outline: 2px solid #1f7a34;
  outline-offset: 2px;
  border-radius: 4px;
}

.player-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 40;
  width: max-content;
  max-width: 210px;
  display: none;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 12px 28px rgba(31, 46, 35, 0.16);
  text-align: left;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}

.player-tip b,
.player-tip span {
  display: block;
}

.player-tip b {
  margin-bottom: 2px;
}

.player-name:hover .player-tip,
.player-name:focus .player-tip,
.player-name:focus-within .player-tip {
  display: grid;
}

.player-dot .player-name {
  max-width: 94px;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.84);
  font-size: 11px;
  font-weight: 800;
}

.roster-table .player-name {
  font-weight: 800;
}

.hero-code .flag-code {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 13px;
}

@media (max-width: 720px) {
  .home-audit-cards { display: none; }
  .fundamentals-grid { grid-template-columns: 1fr; }
  .player-tip { left: 0; transform: none; }
}

/* Feedback pass: PC home keeps only core content and lowers standings. */
.home-history .panel-head h2,
.home-standings .panel-head h2 {
  font-size: 16px;
}

.lower-home-grid {
  margin-top: 4px;
}

.mobile-analysis-cta {
  display: none;
  margin: 0 0 12px;
}

.lineup-panel,
.pitch {
  overflow: visible;
}

.player-dot {
  max-width: 138px;
  z-index: 2;
}

.player-dot .player-name {
  max-width: 138px;
  min-width: 86px;
  justify-content: center;
  line-height: 1.25;
}

.player-dot .player-name > span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.roster-table .player-name > span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.player-tip {
  top: calc(100% + 8px);
  bottom: auto;
  left: 0;
  transform: none;
  z-index: 80;
}

.player-dot:nth-last-child(-n+3) .player-tip {
  top: auto;
  bottom: calc(100% + 8px);
}

.compact-scores {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 721px) {
  .home-standings { display: block; }
}

@media (max-width: 720px) {
  .home-standings { display: none; }
  .home-focus { display: none; }
  .team-mini .ladder { display: none; }
  .mobile-analysis-cta { display: block; }
  .fundamentals-panel .btn.primary { display: none; }
  .player-dot { max-width: 150px; }
  .player-dot .player-name { max-width: 150px; }
  .compact-scores { grid-template-columns: 1fr; }
}

/* Schedule/match/analysis rework pass. */
.home-standing-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
}
@media (max-width: 980px) and (min-width: 721px) {
  .home-standing-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-standing-card {
  min-width: 0;
  border: 1px solid #dbe5dc;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
}

.home-standing-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.home-standing-rows {
  display: grid;
  gap: 6px;
}

.home-standing-rows div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.home-standing-rows b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-standing-rows em {
  color: var(--green);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.schedule-list {
  display: grid;
  gap: 10px;
}

.schedule-row {
  display: grid;
  grid-template-columns: 108px minmax(220px, 1fr) minmax(260px, 1.1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.schedule-match-no {
  display: grid;
  gap: 3px;
}

.schedule-match-no span,
.schedule-meta span {
  color: var(--muted);
  font-size: 12px;
}

.schedule-matchup {
  min-height: 34px;
}

.schedule-meta {
  display: grid;
  gap: 4px;
}

.schedule-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 800;
  background: #f7f8fb;
  white-space: nowrap;
}

.match-basics-panel {
  margin-bottom: 14px;
}

.match-basics-panel .btn.large {
  display: flex;
  width: fit-content;
  margin: 0 auto;
}

.match-basics-teams {
  margin-bottom: 14px;
}

.match-basics-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.match-basics-list div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 10px;
}

.match-basics-list span {
  color: var(--muted);
  font-size: 12px;
}

.substitute-list {
  display: grid;
  gap: 8px;
}

.substitute-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf1ed;
  padding-bottom: 7px;
}

.compact-empty {
  padding: 14px;
}

.analysis-shell {
  padding-top: 18px;
}

.analysis-detail-page {
  padding-top: 0;
}

@media (max-width: 1180px) {
  .schedule-row { grid-template-columns: 1fr; }
  .match-basics-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .home-history { display: none; }
  .home-standing-strip { display: none; }
  .home-layout .top-grid { display: flex; flex-direction: column; }
  .top-grid > .home-matches { order: 1; }
  .top-grid > .home-champions { order: 2; }
  .match-basics-list { grid-template-columns: 1fr; }
  .match-basics-panel .btn.large { width: 100%; }
  .schedule-matchup,
  .match-basics-teams { grid-template-columns: 1fr auto 1fr; }
}

/* Keep lineup names horizontal after rework. */
.player-dot .player-name > span,
.roster-table .player-name > span,
.substitute-list .player-name > span {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.player-dot .player-name {
  width: max-content;
  max-width: 180px;
}

/* Matchup flags/login polish final overrides. */
.login-entry {
  width: auto !important;
  min-width: 58px;
}
@media (max-width: 720px) {
  .toolbar {
    display: flex !important;
    position: absolute;
    top: 12px;
    right: 8px;
  }
  .login-entry {
    width: auto !important;
    min-width: 50px;
    height: 32px;
    padding: 0 10px;
  }
  .matchup-line,
  .schedule-matchup,
  .match-basics-teams {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
  .matchup-home,
  .matchup-away {
    justify-self: center;
  }
  .matchup-name {
    max-width: 160px;
  }
  .login-layer {
    place-items: start center;
    padding: 74px 10px 10px;
  }
}

/* Recent schedule auth-gate polish. */
.login-logout {
  width: auto !important;
  min-width: 50px;
  padding: 0 10px;
  font-weight: 800;
}
.login-message.error {
  color: var(--red);
}
.match-detail-btn {
  position: relative;
  z-index: 2;
  min-height: 34px;
  padding: 6px 12px;
  color: var(--green);
  font-weight: 800;
}
.match-foot {
  align-items: center;
}
@media (max-width: 720px) {
  .login-logout {
    min-width: 44px;
    height: 32px;
    padding: 0 8px;
  }
  .match-foot {
    align-items: flex-start;
  }
}


/* Home recent schedule detail button prominence. */
.home-matches .match-foot {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.home-matches .match-detail-btn {
  min-width: 128px;
  min-height: 42px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}
.home-matches .match-foot > span {
  font-size: 12px;
}
@media (max-width: 720px) {
  .home-matches .match-foot {
    align-items: center;
  }
  .home-matches .match-detail-btn {
    min-width: 136px;
    min-height: 44px;
    padding: 11px 24px;
    font-size: 16px;
  }
}







.xg-against-card {
  display: grid;
  gap: 10px;
}

.xg-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) repeat(3, minmax(86px, 1fr));
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.xg-row b {
  color: var(--ink);
}

.xg-row span {
  display: grid;
  gap: 3px;
  font-weight: 900;
}

.xg-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .xg-row { grid-template-columns: 1fr; }
}

.panel-note,
.analysis-disclaimer {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.analysis-disclaimer {
  margin: 0 0 14px;
  text-align: center;
}

/* V12 candidate lineup hover fix. */
.lineup-grid,
.lineup-panel,
.pitch,
.player-dot,
.substitute-panel,
.substitute-list {
  overflow: visible;
}

.player-tip {
  z-index: 80;
  max-width: min(280px, 80vw);
  white-space: normal;
}

.player-dot:nth-child(-n+6) .player-tip {
  top: calc(100% + 8px);
  bottom: auto;
}

.player-dot .player-name > span,
.roster-table .player-name > span,
.substitute-list .player-name > span {
  max-width: none;
}

/* V12 player tooltip content/readability fix. */
.player-tip {
  width: max-content;
  min-width: 260px;
  max-width: min(360px, 86vw);
  padding: 12px 14px;
  gap: 8px;
  color: #17201a;
  line-height: 1.45;
  z-index: 120;
  white-space: normal;
  overflow: visible;
}

.player-tip b {
  font-size: 14px;
  line-height: 1.35;
}

.tip-original {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.tip-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 10px;
  align-items: baseline;
}

.tip-label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.tip-value {
  color: #17201a;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.lineup-grid,
.lineup-panel,
.pitch,
.player-dot,
.player-name {
  overflow: visible;
}

@media (max-width: 720px) {
  .player-tip {
    min-width: 230px;
    max-width: 82vw;
  }
}

/* V12 tooltip background fit final override. */
.player-name:hover .player-tip,
.player-name:focus .player-tip,
.player-name:focus-within .player-tip {
  display: inline-grid;
}

.player-tip {
  box-sizing: border-box;
  height: auto;
  min-height: max-content;
  overflow: visible;
  align-content: start;
  grid-auto-rows: max-content;
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 32px rgba(31, 46, 35, 0.22);
}

.player-tip .tip-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  width: 100%;
  height: auto;
  overflow: visible;
}

.player-tip .tip-label,
.player-tip .tip-value,
.player-tip .tip-original {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.player-tip .tip-label {
  white-space: nowrap;
}

.player-tip .tip-value {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* V12 tooltip nowrap final override. */
.player-tip {
  min-width: 320px;
  max-width: min(460px, 90vw);
}

.player-tip .tip-grid {
  grid-template-columns: max-content max-content;
  column-gap: 14px;
  row-gap: 6px;
  justify-content: start;
}

.player-tip b,
.player-tip .tip-original,
.player-tip .tip-label,
.player-tip .tip-value {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.player-tip .tip-label {
  min-width: 52px;
}

.player-tip .tip-value {
  max-width: min(320px, 64vw);
}

.player-tip .tip-value:nth-child(2n) {
  overflow: visible;
}

@media (max-width: 720px) {
  .player-tip {
    min-width: min(300px, 88vw);
    max-width: 88vw;
  }

  .player-tip .tip-grid {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .player-tip .tip-value {
    white-space: normal;
    overflow-wrap: break-word;
  }
}
/* V12 login modal size and internal account notice. */
.login-panel {
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  padding: 26px 28px 24px;
}

.login-panel h2 {
  font-size: 22px;
  margin-bottom: 18px;
}

.login-form {
  gap: 15px;
}

.login-form label {
  gap: 8px;
  font-size: 14px;
}

.login-form input {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
}

.login-actions {
  gap: 10px;
}

.login-internal-note {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  color: #c1121f;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.login-internal-note span {
  display: block;
}

@media (max-width: 720px) {
  .login-panel {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: 24px 22px 22px;
  }

  .login-internal-note {
    font-size: 14px;
  }
}
/* V12 analysis detail calibrated public UI. */
.calibrated-result-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  align-items: stretch;
}

.prediction-summary,
.xg-summary-card,
.feature-compare-list {
  display: grid;
  gap: 10px;
}

.prediction-line,
.xg-summary-row,
.qualitative-row {
  display: grid;
  grid-template-columns: minmax(120px, .85fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
}

.prediction-line span,
.xg-summary-row span,
.qualitative-row > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.prediction-line b,
.xg-summary-row b,
.advantage-label {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  text-align: right;
}

.xg-summary-row.emphasis {
  background: #f8fafc;
}

.advantage-label.home {
  color: var(--blue);
}

.advantage-label.away {
  color: var(--red);
}

.advantage-label.even {
  color: var(--muted);
}

.feature-compare-list .qualitative-row {
  grid-template-columns: minmax(160px, 1fr) minmax(150px, max-content);
  margin: 0;
}

.feature-compare-list .qualitative-row .dualbar,
.feature-compare-list .qualitative-row > b:not(.advantage-label) {
  display: none;
}

@media (max-width: 720px) {
  .calibrated-result-grid,
  .prediction-line,
  .xg-summary-row,
  .feature-compare-list .qualitative-row {
    grid-template-columns: 1fr;
  }

  .prediction-line b,
  .xg-summary-row b,
  .advantage-label {
    text-align: left;
  }
}