/* Scoped to the opt-in web preview; no global or Android layout changes. */
body:not(.app-mode):has(.insight-preview) .site-header {
  /* Keep the existing header from obscuring the preview content. */
  position: static;
}
.insight-preview {
  --insight-home: #209bc6;
  --insight-draw: #8193a9;
  --insight-away: #db793a;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
.insight-preview h1, .insight-preview h2, .insight-preview h3, .insight-preview p { margin: 0; }
.insight-preview p { line-height: 1.65; }
.insight-preview h2 { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; }
.insight-preview h3 { font-size: 16px; line-height: 1.45; }
.insight-preview a { color: var(--text); text-underline-offset: 4px; }
.insight-preview-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; }
.insight-test-label { padding: 7px 12px; border: 1px dashed var(--border-strong); border-radius: 8px; }
.insight-match-header { overflow: hidden; padding: 24px 30px 0; border: 1px solid var(--border-strong); border-radius: 24px; background: radial-gradient(ellipse at 0 70%, rgba(32, 155, 198, .12), transparent 50%), radial-gradient(ellipse at 100% 70%, rgba(219, 121, 58, .12), transparent 50%), var(--panel); }
.insight-league { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.insight-league span:first-child { color: var(--insight-home); font-weight: 700; }
.insight-match-header h1 { font-size: clamp(21px, 2.4vw, 30px); margin: 12px 0 6px; text-align: center; }
.insight-event-time { color: var(--text); text-align: center; font-size: 13px; }
.insight-event-time span { color: var(--muted); margin-left: 8px; }
.insight-versus { display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); align-items: center; padding: 26px 30px; gap: 24px; }
.insight-team, .insight-score { display: grid; justify-items: center; text-align: center; gap: 9px; min-width: 0; }
.insight-team strong { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.insight-team small, .insight-score small { font-size: 12px; color: var(--muted); }
.insight-crest { width: 66px; height: 76px; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%); font: 700 24px Georgia, serif; color: var(--text); border-top: 3px solid currentColor; }
.insight-home { background: rgba(32, 155, 198, .18); }
.insight-away { background: rgba(219, 121, 58, .18); }
.insight-score > strong { font: 700 42px Georgia, serif; letter-spacing: 3px; }
.insight-status { color: var(--warning); font-size: 12px; border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; }
.insight-tabs { display: flex; justify-content: center; border-top: 1px solid var(--border); gap: 26px; }
.insight-tabs a { text-decoration: none; padding: 16px 4px; font-size: 14px; border-bottom: 2px solid transparent; }
.insight-tabs a[aria-current="page"] { border-color: var(--insight-home); font-weight: 700; }
.insight-tabs a:hover { border-color: var(--insight-away); }
.insight-main-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: 20px; scroll-margin-top: 24px; }
.insight-panel { padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.insight-ai-card { background: linear-gradient(130deg, rgba(219, 121, 58, .08), transparent 70%), var(--panel); border-top: 3px solid var(--insight-away); }
.insight-section-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.insight-section-heading h2 { margin-top: 8px; }
.insight-kicker { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.insight-save-label, .insight-data-badge { color: var(--muted); border: 1px solid var(--border); padding: 6px 9px; border-radius: 6px; font-size: 11px; }
.insight-pick { font-size: 36px; line-height: 1.2; font-weight: 700; color: var(--insight-away); }
.insight-pick-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: 13px; }
.insight-pick-meta b { color: var(--text); }
.insight-confidence { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 16px; font-size: 13px; }
.insight-confidence strong { font-size: 28px; }
.insight-confidence strong small { color: var(--muted); font-size: 14px; }
.insight-preview meter { display: block; width: 100%; height: 10px; border: none; background: var(--panel-soft); border-radius: 8px; }
.insight-preview meter::-webkit-meter-bar { background: var(--panel-soft); border: none; height: 10px; }
.insight-preview meter::-webkit-meter-optimum-value { background: var(--insight-away); border-radius: 8px; }
.insight-preview meter::-moz-meter-bar { background: var(--insight-away); }
.insight-caption { color: var(--muted); font-size: 12px; }
.insight-handicap-note { padding: 12px; border-radius: 8px; background: var(--panel-soft); font-size: 13px; }
.insight-reading { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.insight-reading h3 { margin-bottom: 8px; }
.insight-reading p { color: var(--muted); font-size: 14px; }
.insight-statistics > .insight-section-heading h2 { font-size: clamp(24px, 2.3vw, 30px); }
.insight-statistics > .insight-caption { max-width: 900px; font-size: 14px; }
.insight-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.insight-chart { min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-soft); }
.insight-chart-featured { grid-column: 1 / -1; background: radial-gradient(ellipse at 0 100%, rgba(32, 155, 198, .09), transparent 55%), var(--panel-soft); }
.insight-chart-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
.insight-chart-heading h3 { font-size: 21px; }
.insight-chart-heading p { font-size: 13px; color: var(--muted); margin-top: 7px; }
.insight-chart-number { color: var(--muted); opacity: .45; font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1; }
.insight-chart-featured .insight-chart-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 40px; }
.insight-result-ring { width: 210px; aspect-ratio: 1; padding: 24px; border-radius: 50%; background: conic-gradient(var(--insight-home) 0 var(--insight-ring-home), var(--insight-draw) var(--insight-ring-home) var(--insight-ring-draw-end), var(--insight-away) var(--insight-ring-draw-end) 100%); }
.insight-result-ring > div { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 50%; background: var(--panel-soft); }
.insight-result-ring strong { font-size: 28px; letter-spacing: 2px; }
.insight-result-ring span { font-size: 14px; }
.insight-result-ring small { color: var(--muted); font-size: 11px; }
.insight-bar-1 { background: var(--insight-home); }
.insight-bar-2 { background: var(--insight-draw); }
.insight-bar-3 { background: var(--insight-away); }
.insight-tone-1 { color: var(--insight-home); background: rgba(32, 155, 198, .14); }
.insight-tone-2 { color: var(--muted); background: rgba(129, 147, 169, .16); }
.insight-tone-3 { color: var(--insight-away); background: rgba(219, 121, 58, .14); }
.insight-comparison-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.insight-comparison-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 10px; }
.insight-outcome-name { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 16px; }
.insight-outcome-name > span:last-child { overflow-wrap: anywhere; }
.insight-outcome-code { display: grid; place-items: center; flex: 0 0 38px; height: 34px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.insight-comparison-heading > strong { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.insight-comparison-track { overflow: hidden; height: 12px; border-radius: 5px; background: var(--border); }
.insight-comparison-track > span { display: block; height: 100%; border-radius: inherit; }
.insight-source-details { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 16px; font-size: 13px; }
.insight-source-details summary { cursor: pointer; min-height: 34px; }
.insight-source-details p { color: var(--muted); margin: 12px 0; }
.insight-odds-list { display: flex; flex-wrap: wrap; gap: 8px; }
.insight-odds-list span { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.insight-odds-list b { margin-left: 6px; }
.insight-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.insight-risk-panel { border-left: 3px solid var(--insight-away); }
.insight-risk-list { margin: 0; padding-left: 19px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.insight-risk-list li { padding: 4px 0 10px 4px; }
.insight-text-link { font-size: 13px; margin-top: auto; align-self: flex-start; padding: 10px 0; }
.insight-data-list { margin: 0; font-size: 13px; }
.insight-data-list div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.insight-data-list dt { color: var(--muted); }
.insight-data-list dd { margin: 0; text-align: right; }
.insight-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.insight-result-grid div { display: grid; gap: 7px; padding: 12px 0; }
.insight-result-grid span { color: var(--muted); font-size: 12px; }
.insight-result-grid strong { font-size: 18px; }
.insight-empty { color: var(--muted); font-size: 13px; padding: 20px 0; }
.insight-preview [id] { scroll-margin-top: 24px; }
.insight-preview a:focus-visible, .insight-preview summary:focus-visible { outline: 2px solid var(--insight-home); outline-offset: 4px; }
.insight-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.insight-history-team { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 14px; display: grid; gap: 14px; background: var(--panel-soft); }
.insight-form-streak { display: flex; gap: 8px; }
.insight-form-streak > span, .insight-history-matches li > span:last-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; font-weight: 700; font-size: 12px; }
.insight-form-G { background: rgba(32, 155, 198, .16); color: var(--text); border: 1px solid var(--insight-home); }
.insight-form-B { background: var(--panel); color: var(--muted); border: 1px solid var(--border-strong); }
.insight-form-M { background: rgba(219, 121, 58, .14); color: var(--text); border: 1px solid var(--insight-away); }
.insight-form-metrics { display: grid; gap: 10px; margin: 0; font-size: 13px; }
.insight-form-metrics > div { display: flex; justify-content: space-between; gap: 14px; }
.insight-form-metrics dt { color: var(--muted); }
.insight-form-metrics dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.insight-form-rate { display: grid; gap: 8px; font-size: 13px; }
.insight-form-rate > span { display: flex; justify-content: space-between; gap: 14px; }
.insight-history-matches, .insight-h2h-matches { padding: 0; margin: 0; list-style: none; }
.insight-history-matches li { display: grid; grid-template-columns: 125px minmax(0, 1fr) 40px 32px; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding: 12px 0; font-size: 12px; }
.insight-history-matches li > span:first-child, .insight-h2h-matches li > span:first-child { color: var(--muted); }
.insight-history-matches li > span:nth-child(2), .insight-h2h-matches li > span { overflow-wrap: anywhere; }
.insight-head-to-head { padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 14px; }
.insight-h2h-matches li { display: grid; grid-template-columns: 100px minmax(0, 1fr) 50px minmax(0, 1fr) 60px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.insight-history-sources { padding-left: 20px; line-height: 1.8; font-size: 13px; }
.insight-history-official-links { display: flex; flex-wrap: wrap; gap: 14px 24px; font-size: 13px; }
@media (max-width: 850px) {
  .insight-main-grid, .insight-bottom-grid { grid-template-columns: 1fr; }
  .insight-history-grid { grid-template-columns: 1fr; }
  .insight-chart-grid { gap: 16px; }
  .insight-chart { padding: 20px; }
  .insight-chart-featured .insight-chart-body { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
  .insight-result-ring { width: 160px; padding: 18px; }
  .insight-result-ring strong { font-size: 23px; }
  .insight-result-ring span { font-size: 12px; }
  .insight-outcome-name { font-size: 14px; gap: 8px; }
  .insight-comparison-heading > strong { font-size: 26px; }
  .insight-versus { padding: 24px 0; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 14px; }
  .insight-team strong { font-size: 17px; }
}
@media (max-width: 560px) {
  .insight-preview { gap: 14px; }
  .insight-preview-note { font-size: 11px; gap: 8px; }
  .insight-test-label { padding: 6px; }
  .insight-match-header { padding: 18px 14px 0; border-radius: 16px; }
  .insight-league { font-size: 10px; gap: 8px; }
  .insight-match-header h1 { font-size: 20px; }
  .insight-event-time span { display: block; margin-left: 0; font-size: 11px; }
  .insight-versus { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); gap: 8px; padding: 20px 0; }
  .insight-team strong { font-size: 13px; }
  .insight-crest { width: 46px; height: 54px; font-size: 18px; }
  .insight-score > strong { font-size: 27px; letter-spacing: 0; }
  .insight-score small, .insight-team small { font-size: 10px; }
  .insight-status { font-size: 10px; padding: 5px; }
  .insight-tabs { gap: 0; justify-content: space-between; }
  .insight-tabs a { font-size: 11px; padding: 16px 2px; min-height: 44px; }
  .insight-panel { padding: 20px 16px; border-radius: 16px; }
  .insight-section-heading { align-items: flex-start; flex-wrap: wrap; }
  .insight-chart-grid { grid-template-columns: 1fr; gap: 16px; }
  .insight-chart { padding: 20px 14px; }
  .insight-chart-heading { gap: 10px; margin-bottom: 24px; }
  .insight-chart-heading h3 { font-size: 19px; }
  .insight-chart-heading p { font-size: 12px; }
  .insight-chart-number { font-size: 24px; }
  .insight-chart-featured .insight-chart-body { grid-template-columns: 1fr; gap: 26px; }
  .insight-result-ring { width: 168px; justify-self: center; }
  .insight-comparison-heading { gap: 12px; }
  .insight-outcome-code { flex-basis: 32px; height: 30px; font-size: 10px; }
  .insight-comparison-track { height: 14px; }
  .insight-result-grid { grid-template-columns: 1fr; gap: 0; }
  .insight-result-grid div { border-bottom: 1px solid var(--border); }
  .insight-history-team { padding: 16px; }
  .insight-history-matches li { grid-template-columns: minmax(0, 1fr) 38px 28px; gap: 8px; }
  .insight-history-matches li > span:first-child { grid-column: 1 / -1; }
  .insight-h2h-matches li { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); grid-template-areas: "date date source" "home score away"; gap: 8px; }
  .insight-h2h-matches li > span:first-child { grid-area: date; }
  .insight-h2h-matches li > span:nth-child(2) { grid-area: home; }
  .insight-h2h-matches li > strong { grid-area: score; }
  .insight-h2h-matches li > span:nth-child(4) { grid-area: away; }
  .insight-h2h-matches li > a { grid-area: source; text-align: right; }
}