:root {
  color-scheme: dark;
  --bg: #101211;
  --surface: #171a18;
  --surface-2: #1d211f;
  --surface-3: #202721;
  --line: #2c322e;
  --line-soft: #252b27;
  --text: #f4f3ed;
  --muted: #969d94;
  --quiet: #6f776e;
  --green: #b8f36a;
  --orange: #f4a46a;
  --shadow: 0 24px 60px #00000022;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Manrope, sans-serif; font-size: 14px; line-height: 1.45; }
button, input, select { font: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
h1, h2, p { margin: 0; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; border-right: 1px solid var(--line); padding: 32px 22px 24px; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; background: #131614; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; line-height: 1.03; font-size: 16px; letter-spacing: -.04em; }
.brand em { font-style: normal; color: var(--green); font-size: 12px; letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--green); color: var(--green); border-radius: 10px; font-size: 19px; }
.side-label, .eyebrow { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .12em; color: #737a72; text-transform: uppercase; }
.side-label { margin: 65px 12px 15px; }
.nav-item { display: flex; align-items: center; gap: 12px; color: var(--muted); text-decoration: none; padding: 12px 13px; border-radius: 9px; margin: 3px 0; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-item span { font-size: 16px; color: #737a72; }
.nav-item.active, .nav-item:hover { color: var(--text); background: #252b27; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active span { color: var(--green); }
.sidebar-bottom { margin-top: auto; }
.sync-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; gap: 10px; align-items: center; }
.sync-card b, .sync-card small { display: block; }
.sync-card b { font-size: 11px; }
.sync-card small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.pulse, .dot { display: block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px #b8f36a19; }
.muted { color: #70776f; font-size: 10px; line-height: 1.55; margin: 14px 2px 0; }

.main-content { margin-left: 250px; max-width: 1450px; width: calc(100% - 250px); padding: 42px 5vw 28px; }
.section-nav { display: flex; align-items: center; gap: 6px; margin: 14px 0 20px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: #151916; position: sticky; top: 10px; z-index: 8; isolation: isolate; box-shadow: 0 8px 24px #0000001f; }
.section-nav-item { color: var(--muted); text-decoration: none; padding: 8px 13px; border-radius: 6px; font-size: 11px; font-weight: 700; transition: background .18s ease-out, color .18s ease-out, transform .16s ease-out; }
.section-nav-item:hover { color: var(--text); background: #232a25; }
.section-nav-item.active { color: #182116; background: var(--green); }
.section-nav-item:active { transform: scale(.97); }
.section-anchor { display: block; height: 0; scroll-margin-top: 72px; }
.section-view[hidden] { display: none !important; }
.section-view:not([hidden]) { animation: section-view-in 180ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes section-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .section-view:not([hidden]) { animation: none; } }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
h1 { font-size: clamp(30px, 3.5vw, 52px); letter-spacing: -.075em; line-height: 1.05; margin-top: 12px; font-weight: 700; text-wrap: balance; }
h2 { font-size: 21px; letter-spacing: -.05em; margin-top: 9px; text-wrap: balance; }
.subtitle { color: var(--muted); margin-top: 10px; font-size: 13px; }
.header-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.updated { font-family: "DM Mono", monospace; color: #777f75; font-size: 10px; }
.button { border: 0; border-radius: 7px; padding: 11px 15px; color: var(--text); cursor: pointer; transition: background .2s ease, transform .2s ease, opacity .2s ease; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button-primary { background: var(--green); color: #152015; font-weight: 700; }
.button-primary:hover { background: #d4ff9e; transform: translateY(-1px); }
.button-secondary { background: #282e2a; font-weight: 600; }
.button-secondary:hover { background: #343c35; transform: translateY(-1px); }
.button:active, .league-tab:active, .refresh-button:active { transform: scale(.97); }

.control-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin-bottom: 21px; }
.control-group { display: flex; align-items: center; gap: 15px; }
.control-group label { color: var(--muted); font-size: 11px; }
.control-group select, .scanner-controls select, .scanner-controls input { background: #202521; border: 1px solid var(--line); border-radius: 5px; color: var(--text); padding: 8px 10px; font: 500 11px Manrope; }
.control-group select { padding-right: 26px; }
.control-note { display: flex; gap: 9px; align-items: center; color: #6f776e; font-size: 10px; }
.control-note .dot { width: 5px; height: 5px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.metric-card, .panel { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; }
.metric-card { padding: 18px 19px 16px; min-height: 137px; }
.metric-card.accent { background: #1d2a1d; border-color: #445d37; }
.metric-top { display: flex; justify-content: space-between; color: #92998e; font-size: 11px; }
.metric-icon { color: #667361; font-size: 14px; }
.metric-card strong { font-size: 34px; letter-spacing: -.07em; display: block; margin-top: 24px; }
.metric-card small { color: #6e766e; font-size: 10px; }

.content-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; margin-bottom: 22px; }
.panel { padding: 22px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.panel-caption { font-family: "DM Mono", monospace; font-size: 10px; color: #6e766e; margin-top: 8px; }
.mini-chip { border: 1px solid #3a4b35; color: var(--green); font: 10px "DM Mono"; padding: 6px 8px; border-radius: 4px; }
.form-list { display: grid; gap: 7px; }
.form-row { display: grid; grid-template-columns: 1fr 60px 60px 60px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.form-row:last-child { border-bottom: 0; }
.team-name { font-size: 12px; font-weight: 600; }
.team-meta { display: block; color: #6d756c; font-size: 9px; margin-top: 3px; }
.form-points { font: 500 11px "DM Mono"; color: var(--green); text-align: right; }
.mini-bar { height: 4px; border-radius: 5px; background: #2b322d; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--green); border-radius: 5px; }
.form-stat { text-align: right; font: 10px "DM Mono"; color: #929a90; }
.insight-list { display: grid; gap: 21px; }
.insight { display: flex; gap: 14px; }
.insight-number { font: 11px "DM Mono"; color: var(--green); padding-top: 2px; }
.insight b { font-size: 12px; }
.insight p { font-size: 11px; color: #818a80; line-height: 1.5; margin-top: 4px; }
.insight-footer { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 15px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #6f776e; }
.insight-footer strong { color: var(--orange); font-size: 10px; }

.matches-panel { padding-bottom: 8px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th { text-align: left; color: #6d756c; font: 10px "DM Mono"; text-transform: uppercase; letter-spacing: .08em; padding: 0 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 13px 10px; border-bottom: 1px solid var(--line-soft); font-size: 11px; }
.date-cell { color: #778077; font-family: "DM Mono", monospace; font-size: 10px; }
.score-cell { font: 600 12px "DM Mono"; }
.odds-cell { color: #879181; font: 10px "DM Mono"; }
.result-badge { font: 10px "DM Mono"; padding: 4px 6px; border-radius: 4px; background: #273629; color: var(--green); }
.result-badge.draw { background: #33352e; color: #e3c879; }
.empty-cell, .empty-state { text-align: center; color: #6f776e; padding: 28px 10px; font-size: 11px; }
.empty-state { padding: 20px; }
footer { display: flex; justify-content: space-between; color: #5f675f; font-size: 9px; margin-top: 25px; font-family: "DM Mono", monospace; }

.dialog-head { display: flex; justify-content: space-between; }
.close-button { border: 0; background: transparent; color: #879082; font-size: 23px; cursor: pointer; }
.season-options { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.season-options label { border: 1px solid var(--line); padding: 10px 12px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.season-options input { accent-color: var(--green); }
dialog { background: var(--surface); color: var(--text); border: 1px solid #3c443c; border-radius: 12px; padding: 25px; max-width: 470px; width: calc(100% - 32px); box-shadow: var(--shadow); }
dialog::backdrop { background: #0009; }
dialog p { color: var(--muted); font-size: 12px; line-height: 1.55; margin-top: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.import-message { font-size: 11px; color: var(--green); min-height: 18px; margin-top: 14px; }
.import-message.error { color: #ff9a82; }

.section-lead { margin-top: 7px; color: #858d82; font-size: 12px; line-height: 1.45; }
.upcoming-focus { padding: 25px 25px 20px; background: #151b16; border-color: #334432; box-shadow: 0 18px 42px #0000001f; }
.upcoming-focus .panel-heading { margin-bottom: 18px; }
.upcoming-count { background: #263625; border: 1px solid #3a5631; color: var(--green); border-radius: 5px; padding: 7px 9px; margin-top: 0; }
.upcoming-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.fixture-card { background: #1b211d; border: 1px solid #303a31; border-radius: 10px; padding: 18px; min-width: 0; }
.fixture-card-featured { border-color: #587544; box-shadow: inset 0 2px 0 var(--green); }
.fixture-card-top, .fixture-pick { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fixture-date { display: block; color: var(--text); font: 500 12px "DM Mono"; letter-spacing: -.02em; }
.fixture-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 23px 0 18px; }
.fixture-team b { display: block; font-size: 17px; letter-spacing: -.045em; line-height: 1.12; }
.fixture-team span { display: block; color: #6d756c; font: 9px "DM Mono"; letter-spacing: .08em; margin-top: 6px; }
.fixture-away { text-align: right; }
.fixture-vs { color: #6d756c; font: 10px "DM Mono"; }
.fixture-pick { border-top: 1px solid #303a31; border-bottom: 1px solid #303a31; padding: 13px 0; }
.fixture-pick strong { display: block; color: var(--green); font-size: 20px; letter-spacing: -.05em; margin-top: 5px; }
.fixture-confidence { text-align: right; }
.fixture-confidence strong { display: block; color: var(--text); font: 600 21px "DM Mono"; letter-spacing: -.07em; }
.fixture-confidence span { display: block; color: #6d756c; font: 9px "DM Mono"; margin-top: 4px; }
.probability-bars { display: grid; gap: 7px; margin: 15px 0; }
.probability-row { display: grid; grid-template-columns: 16px 1fr 48px; align-items: center; gap: 8px; font: 10px "DM Mono"; }
.probability-row > span { color: #949d91; }
.probability-row > b { text-align: right; color: #d9e0d3; font: 10px "DM Mono"; }
.probability-row > i { display: block; height: 6px; background: #2b332d; border-radius: 3px; overflow: hidden; }
.probability-row em { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.probability-row:nth-child(2) em { background: #d6b36b; }
.probability-row:nth-child(3) em { background: #83a9c8; }
.fixture-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fixture-data-grid div { border-top: 1px solid #303a31; padding-top: 9px; min-width: 0; }
.fixture-data-grid span { display: block; color: #6d756c; font: 9px "DM Mono"; text-transform: uppercase; letter-spacing: .05em; }
.fixture-data-grid b { display: block; color: #cbd4c6; font-size: 10px; font-weight: 600; line-height: 1.35; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming-empty { display: grid; justify-items: center; gap: 7px; border: 1px dashed #3a463b; border-radius: 9px; padding: 30px 18px; }
.upcoming-empty b { color: #dce5d7; font-size: 12px; }
.upcoming-empty span:last-child { color: #777f75; font-size: 10px; }
.empty-mark { color: var(--green); font: 20px "DM Mono"; }

@media (max-width: 900px) {
  .sidebar { width: 190px; }
  .main-content { margin-left: 190px; width: calc(100% - 190px); padding-inline: 25px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .sidebar { position: sticky; top: 0; z-index: 10; width: 100%; height: auto; padding: 12px 16px 10px; display: block; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-label, .sidebar-bottom { display: none; }
  .sidebar nav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: thin; }
  .nav-item { flex: 0 0 auto; white-space: nowrap; padding: 9px 10px; margin: 0; font-size: 11px; }
  .app-shell { display: block; }
  .main-content { margin: 0; width: 100%; padding: 26px 16px; }
  .control-bar { flex-wrap: wrap; gap: 12px; }
  .control-group { min-width: 0; flex: 1 1 0; gap: 8px; }
  .control-group select { min-width: 0; max-width: 100%; width: 100%; }
  .panel, .model-grid, .content-grid { min-width: 0; }
  .model-grid > *, .content-grid > * { min-width: 0; }
  .metric-grid { gap: 8px; }
  .metric-card { padding: 14px; min-height: 120px; }
  .metric-card strong { font-size: 28px; margin-top: 20px; }
  .control-note { display: none; }
  .header-actions { gap: 7px; }
  .header-actions .updated { width: 100%; }
  .header-actions .button { padding: 9px 10px; font-size: 11px; }
  .upcoming-focus { padding: 20px 16px 16px; }
  .upcoming-focus .panel-heading { display: block; }
  .upcoming-count { display: inline-block; margin-top: 12px; }
  .upcoming-cards { grid-template-columns: 1fr; }
  .fixture-card { padding: 16px; }
  .fixture-team b { font-size: 15px; }
  .fixture-data-grid { gap: 8px; }
  .fixture-data-grid b { font-size: 9px; }
  footer { gap: 15px; flex-direction: column; }
  .topbar { margin-bottom: 26px; }
}

/* Prediction-first surface: historical data stays behind the advanced drawer. */
:root { --prediction-bg: #081a37; --prediction-surface: #102a54; --prediction-surface-2: #173763; --prediction-line: rgba(137, 186, 242, .28); --prediction-text: #f3f8ff; --prediction-muted: #a9c0dd; --prediction-cyan: #09e6ee; --prediction-green: #13e6b3; --prediction-blue: #5f9dff; }
body.prediction-app { background: radial-gradient(circle at 20% -10%, #1b477d 0, transparent 38%), var(--prediction-bg); color: var(--prediction-text); font-family: Manrope, sans-serif; }
.prediction-app .app-shell { display: block; min-height: 100vh; }
.prediction-app .main-content { width: min(1180px, calc(100% - 52px)); margin: 0 auto; padding: 24px 0 38px; }
.prediction-app .app-topbar { min-height: 42px; margin-bottom: 24px; padding: 0; border: 0; display: flex; align-items: center; justify-content: space-between; }
.brand-lockup { display: flex; align-items: center; gap: 10px; color: var(--prediction-text); }
.brand-lockup strong { color: var(--prediction-cyan); font-size: 18px; letter-spacing: -.04em; }
.brand-symbol { color: var(--prediction-cyan); font-size: 20px; }
.brand-tag { color: #d5e3f5; background: rgba(112, 170, 242, .25); border: 1px solid rgba(157, 202, 255, .35); border-radius: 12px; padding: 4px 9px; font-size: 10px; font-weight: 700; }
.topbar-status { display: flex; align-items: center; gap: 8px; color: var(--prediction-muted); font: 10px "DM Mono", monospace; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--prediction-green); box-shadow: 0 0 12px rgba(19, 230, 179, .8); }
.icon-button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--prediction-line); border-radius: 8px; background: rgba(130, 182, 241, .12); color: var(--prediction-text); cursor: pointer; }
.league-tabs { display: flex; gap: 9px; overflow-x: auto; padding: 0 0 17px; border-bottom: 1px solid var(--prediction-line); scrollbar-width: none; }
.league-tabs::-webkit-scrollbar { display: none; }
.league-tab { flex: 0 0 auto; border: 1px solid rgba(157, 202, 255, .38); border-radius: 22px; background: linear-gradient(180deg, rgba(111, 175, 245, .36), rgba(66, 120, 192, .3)); color: var(--prediction-text); padding: 10px 18px; font: 700 12px Manrope, sans-serif; cursor: pointer; transition: .18s ease; }
.league-tab:hover { transform: translateY(-1px); border-color: var(--prediction-cyan); }
.league-tab.active { color: #06304a; border-color: var(--prediction-cyan); background: linear-gradient(180deg, #19eee3, #08c9e7); box-shadow: 0 5px 18px rgba(0, 230, 239, .24); }
.prediction-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 31px 4px 20px; }
.prediction-header h1 { margin: 5px 0 5px; color: var(--prediction-text); font-size: clamp(24px, 3vw, 38px); line-height: 1.05; letter-spacing: -.05em; }
.prediction-header p { margin: 0; color: var(--prediction-muted); font-size: 13px; }
.prediction-header-meta { display: flex; align-items: center; gap: 12px; color: var(--prediction-muted); font: 10px "DM Mono", monospace; text-align: right; }
.prediction-header-meta span:first-child { color: var(--prediction-cyan); font-weight: 700; }
.prediction-toolbar { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }
.date-chip { display: flex; align-items: center; gap: 8px; color: var(--prediction-text); background: rgba(108, 171, 239, .2); border: 1px solid var(--prediction-line); border-radius: 9px; padding: 9px 12px; font-size: 11px; }
.date-chip span { color: var(--prediction-cyan); }
.season-control { display: flex; align-items: center; gap: 7px; color: var(--prediction-muted); font: 10px "DM Mono", monospace; }
.season-control select { background: rgba(113, 169, 233, .17); color: var(--prediction-text); border: 1px solid var(--prediction-line); border-radius: 8px; padding: 8px 10px; font: 11px Manrope, sans-serif; }
.refresh-button { border: 1px solid rgba(9, 230, 238, .45); border-radius: 9px; background: rgba(9, 230, 238, .12); color: var(--prediction-cyan); padding: 8px 11px; font: 700 10px Manrope, sans-serif; cursor: pointer; white-space: nowrap; transition: .18s ease; }
.refresh-button:hover:not(:disabled) { border-color: var(--prediction-cyan); background: rgba(9, 230, 238, .2); transform: translateY(-1px); }
.refresh-button:disabled { opacity: .65; cursor: wait; }
.toolbar-note { margin-left: auto; color: #87a8cc; font: 10px "DM Mono", monospace; }
.upcoming-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.fixture-card { min-width: 0; border: 1px solid rgba(117, 188, 255, .45); border-radius: 16px; background: linear-gradient(145deg, rgba(45, 104, 173, .86), rgba(17, 48, 95, .95)); box-shadow: 0 16px 35px rgba(0, 0, 0, .19); padding: 16px 18px 17px; overflow: hidden; }
.fixture-card:hover { border-color: var(--prediction-cyan); box-shadow: 0 18px 38px rgba(0, 0, 0, .27); }
.fixture-card-featured { grid-column: 1 / -1; }
.fixture-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.league-card-label { display: inline-block; margin-bottom: 6px; color: var(--prediction-cyan); background: rgba(5, 32, 69, .48); border: 1px solid rgba(9, 230, 238, .25); border-radius: 11px; padding: 4px 7px; font: 700 8px "DM Mono", monospace; text-transform: uppercase; }
.fixture-date { color: #e4f0ff; font: 10px "DM Mono", monospace; }
.fixture-card .team-meta { color: var(--prediction-muted); }
.fixture-card-top .team-meta { display: block; margin-top: 3px; font-size: 9px; }
.fixture-teams { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; gap: 10px; padding: 9px 0 15px; }
.fixture-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fixture-team b { color: var(--prediction-text); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture-team span { color: #94c2ee; font: 9px "DM Mono", monospace; }
.fixture-home { justify-content: flex-start; }
.fixture-away { justify-content: flex-end; text-align: right; }
.fixture-vs { color: #b6d4f2; font-size: 12px; font-weight: 700; text-align: center; }
.fixture-team::before { content: attr(data-short); display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 1px solid rgba(207, 231, 255, .5); background: rgba(9, 230, 238, .22); color: var(--prediction-cyan); font: 700 11px "DM Mono", monospace; }
.fixture-away::before { order: 2; background: rgba(95, 157, 255, .3); color: #dceaff; }
.probability-bars { display: flex; height: 25px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(204, 229, 255, .35); background: rgba(8, 35, 72, .45); }
.probability-bars .probability-segment { display: grid; place-items: center; color: #ecf8ff; font: 800 10px "DM Mono", monospace; border-right: 1px solid rgba(8, 35, 72, .35); }
.probability-bars .probability-segment:last-child { border-right: 0; }
.probability-bars .home-segment { background: linear-gradient(90deg, #08dcae, #0be4c2); color: #063b46; }
.probability-bars .draw-segment { background: rgba(218, 231, 242, .7); color: #375575; }
.probability-bars .away-segment { background: linear-gradient(90deg, #0bd6df, #15b9ec); color: #073e5e; }
.probability-labels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; padding: 8px 2px 3px; }
.probability-labels div { color: #d9eaff; font: 10px "DM Mono", monospace; }
.probability-labels div:nth-child(2) { text-align: center; }
.probability-labels div:last-child { text-align: right; }
.probability-labels b { display: block; color: var(--prediction-text); font-size: 15px; margin-top: 3px; }
.fixture-pick { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid rgba(165, 205, 245, .18); padding-top: 12px; margin-top: 8px; }
.fixture-pick .eyebrow { color: #93b9df; font-size: 8px; }
.fixture-pick strong { display: block; margin-top: 4px; color: var(--prediction-cyan); font-size: 14px; }
.fixture-confidence { text-align: right; }
.fixture-confidence strong { display: block; color: var(--prediction-green); font: 800 20px "DM Mono", monospace; }
.fixture-confidence span { color: var(--prediction-muted); font-size: 9px; }
.fixture-data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.fixture-data-grid div { border: 1px solid rgba(176, 215, 255, .16); border-radius: 7px; background: rgba(5, 29, 64, .21); padding: 8px 9px; }
.fixture-data-grid span { display: block; color: #8eb3d7; font: 8px "DM Mono", monospace; text-transform: uppercase; }
.fixture-data-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eaf4ff; font-size: 10px; margin-top: 3px; }
.fixture-card-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 13px; color: #98b8d8; font: 9px "DM Mono", monospace; }
.fixture-card-foot a { color: var(--prediction-cyan); text-decoration: none; }
.match-details { margin-top: 9px; border-top: 1px solid rgba(165, 205, 245, .18); padding-top: 8px; }
.match-details summary { color: #9ec1e5; cursor: pointer; font: 9px "DM Mono", monospace; list-style: none; }
.match-details summary::-webkit-details-marker { display: none; }
.match-details summary::before { content: '+'; margin-right: 5px; color: var(--prediction-cyan); }
.match-details[open] summary::before { content: '−'; }
.signal-badge { border-radius: 12px; padding: 5px 8px; font: 9px "DM Mono", monospace; white-space: nowrap; }
.signal-good { color: #063f3d; background: #29e5b7; }.signal-warn { color: #5a4211; background: #f4cd77; }.signal-muted { color: #dbeaff; background: rgba(140, 186, 234, .3); }
.empty-state { color: var(--prediction-muted); }
.upcoming-empty { grid-column: 1 / -1; min-height: 150px; border: 1px dashed rgba(132, 193, 248, .35); border-radius: 15px; background: rgba(47, 104, 170, .2); }
.advanced-drawer { margin-top: 24px; border-top: 1px solid var(--prediction-line); color: var(--prediction-muted); }
.advanced-drawer summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; padding: 17px 3px; color: #dcecff; font-size: 12px; }
.advanced-drawer summary::-webkit-details-marker { display: none; }.advanced-drawer summary::before { content: '+'; color: var(--prediction-cyan); font: 17px "DM Mono"; }.advanced-drawer[open] summary::before { content: '−'; }.advanced-drawer summary small { color: #8faecc; font: 10px "DM Mono"; }
.advanced-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 17px; }.advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.mini-panel { background: rgba(13, 40, 79, .72); border-color: var(--prediction-line); }.mini-panel h2 { color: var(--prediction-text); }
.prediction-app footer { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--prediction-line); color: #83a4c5; font: 9px "DM Mono", monospace; }
.hidden-data, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; }
.prediction-app [hidden] { display: none !important; }
@media (max-width: 760px) { .prediction-app .main-content { width: calc(100% - 28px); padding-top: 16px; }.prediction-header { display: block; padding-top: 24px; }.prediction-header-meta { justify-content: flex-start; margin-top: 13px; text-align: left; }.prediction-toolbar { flex-wrap: wrap; }.toolbar-note { width: 100%; margin-left: 0; }.upcoming-grid { grid-template-columns: 1fr; }.fixture-card-featured { grid-column: auto; }.fixture-team b { font-size: 13px; }.advanced-grid { grid-template-columns: 1fr; }.prediction-app footer { flex-direction: column; gap: 7px; } }

/* Calm light visual pass: keep the prediction density, remove the blue wall. */
:root {
  --prediction-bg: #f3f5f7;
  --prediction-surface: #ffffff;
  --prediction-surface-2: #eef2f4;
  --prediction-line: #d9e1e7;
  --prediction-text: #1b2938;
  --prediction-muted: #657487;
  --prediction-cyan: #147c74;
  --prediction-green: #0b806f;
  --prediction-blue: #5578a8;
  --prediction-amber: #b7791f;
}

html { background: var(--prediction-bg); }
body.prediction-app { background: var(--prediction-bg); color: var(--prediction-text); }
.prediction-app .main-content { width: min(1180px, calc(100% - 48px)); padding: 18px 0 34px; }
.prediction-app .app-topbar { min-height: 48px; margin-bottom: 21px; padding: 8px 13px 8px 15px; background: var(--prediction-surface); border: 1px solid var(--prediction-line); border-radius: 12px; box-shadow: 0 4px 16px rgba(33, 48, 65, .05); }
.brand-lockup strong { color: var(--prediction-text); font-size: 17px; }
.brand-symbol { color: var(--prediction-cyan); }
.brand-tag { color: var(--prediction-cyan); background: #e5f2ef; border-color: #c4e2dc; }
.topbar-status { color: var(--prediction-muted); }
.status-dot { background: var(--prediction-green); box-shadow: 0 0 0 3px #d9f1ec; }
.icon-button { width: 42px; height: 42px; border-color: var(--prediction-line); background: #f7f9fa; color: var(--prediction-text); }
.league-tabs { gap: 8px; padding: 0 0 14px; border-color: var(--prediction-line); }
.league-tab { min-height: 44px; border-color: #d3dde4; border-radius: 9px; background: #e8edf1; color: #526174; padding: 9px 16px; font-size: 12px; box-shadow: none; }
.league-tab:hover { transform: translateY(-1px); border-color: #9bc9c1; background: #f7fbfa; }
.league-tab.active { color: #fff; border-color: var(--prediction-cyan); background: var(--prediction-cyan); box-shadow: 0 5px 14px rgba(20, 124, 116, .16); }
.prediction-header { padding: 29px 3px 19px; }
.prediction-header h1 { color: var(--prediction-text); font-size: clamp(25px, 3vw, 37px); }
.prediction-header p { color: var(--prediction-muted); font-size: 14px; }
.prediction-header-meta { color: var(--prediction-muted); }
.prediction-header-meta span:first-child { color: var(--prediction-cyan); }
.prediction-toolbar { gap: 10px; margin-bottom: 17px; }
.date-chip { min-height: 44px; color: var(--prediction-text); background: var(--prediction-surface); border-color: var(--prediction-line); border-radius: 9px; box-shadow: 0 2px 8px rgba(33, 48, 65, .04); }
.date-chip span { color: var(--prediction-cyan); }
.season-control { min-height: 44px; color: var(--prediction-muted); }
.season-control select { min-height: 42px; background: var(--prediction-surface); color: var(--prediction-text); border-color: var(--prediction-line); }
.refresh-button { min-height: 44px; border-color: var(--prediction-cyan); border-radius: 9px; background: var(--prediction-cyan); color: #fff; padding-inline: 14px; box-shadow: 0 4px 10px rgba(20, 124, 116, .13); }
.refresh-button:hover:not(:disabled) { background: #0f6b64; border-color: #0f6b64; }
.toolbar-note { color: #7a8795; }
.fixture-card { border-color: #d8e1e7; border-radius: 12px; background: var(--prediction-surface); box-shadow: 0 7px 22px rgba(31, 49, 68, .07); padding: 17px 18px 16px; }
.fixture-card:hover { border-color: #9bc9c1; box-shadow: 0 10px 25px rgba(31, 49, 68, .11); }
.fixture-card-featured { border-color: #bfdcd6; box-shadow: 0 9px 25px rgba(31, 49, 68, .08); }
.league-card-label { color: var(--prediction-cyan); background: #e8f4f1; border-color: #c7e3de; }
.fixture-date { color: #536476; }
.fixture-card .team-meta { color: #708093; }
.fixture-team b { color: var(--prediction-text); }
.fixture-team span { color: #73899a; }
.fixture-team::before { border-color: #b7d8d2; background: #e7f4f1; color: var(--prediction-cyan); }
.fixture-away::before { background: #edf1f7; color: var(--prediction-blue); border-color: #c8d3e0; }
.fixture-vs { color: #8995a3; }
.probability-bars { border-color: #d6e0e5; background: #f1f4f5; }
.probability-bars .home-segment { background: #2a9d8f; color: #fff; }
.probability-bars .draw-segment { background: #e8c77c; color: #614d1d; }
.probability-bars .away-segment { background: #829fc4; color: #fff; }
.probability-labels div { color: #6f7e8e; }
.probability-labels b { color: var(--prediction-text); }
.fixture-pick { border-color: #e0e7eb; }
.fixture-pick .eyebrow { color: #7a8a99; }
.fixture-pick strong { color: var(--prediction-cyan); }
.fixture-confidence strong { color: var(--prediction-cyan); }
.fixture-confidence span { color: #758394; }
.fixture-data-grid div { border-color: #e1e8ec; background: #f8fafb; }
.fixture-data-grid span { color: #7b8997; }
.fixture-data-grid b { color: #344557; }
.fixture-card-foot { color: #788697; }
.fixture-card-foot a { color: var(--prediction-cyan); min-height: 32px; display: inline-flex; align-items: center; }
.match-details { border-color: #e0e7eb; }
.match-details summary { color: #647486; min-height: 32px; display: flex; align-items: center; }
.signal-badge { border: 1px solid transparent; }
.signal-good { color: #116353; background: #dff3ec; border-color: #b8e3d6; }
.signal-warn { color: #765815; background: #fff3d8; border-color: #f1d89e; }
.signal-muted { color: #5c6d80; background: #edf1f5; border-color: #d9e1e7; }
.upcoming-empty { border-color: #ccd9e1; background: var(--prediction-surface); }
.upcoming-empty b { color: var(--prediction-text); }
.advanced-drawer { border-color: var(--prediction-line); }
.advanced-drawer summary { color: #334457; min-height: 50px; }
.advanced-drawer summary small { color: #7b8998; }
.mini-panel { background: var(--prediction-surface); border-color: var(--prediction-line); }
.mini-panel h2 { color: var(--prediction-text); }
.learning-status { margin: 12px 0 14px; padding: 10px 12px; border: 1px solid #ead9ad; border-radius: 9px; background: #fff8e8; color: #80651f; font: 10px "DM Mono", monospace; line-height: 1.45; }
.learning-status.is-active { border-color: #b8e3d6; background: #e9f6f2; color: #166557; }
.prediction-app footer { border-color: var(--prediction-line); color: #7b8998; }
.prediction-app button:focus-visible, .prediction-app a:focus-visible, .prediction-app select:focus-visible { outline: 3px solid rgba(20, 124, 116, .28); outline-offset: 2px; }

@media (max-width: 760px) {
  .prediction-app .main-content { width: calc(100% - 28px); padding-top: 12px; }
  .prediction-app .app-topbar { padding: 8px 10px; }
  .topbar-status { gap: 6px; }
  .topbar-status > span:not(.status-dot) { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .league-tabs { padding-bottom: 12px; }
  .league-tab { padding-inline: 14px; }
  .prediction-toolbar { gap: 8px; }
  .date-chip, .season-control, .season-control select, .refresh-button { min-height: 44px; }
  .toolbar-note { font-size: 10px; line-height: 1.4; }
  .fixture-card { border-radius: 11px; padding: 15px; }
  .fixture-card-foot a { min-height: 44px; }
}

/* Editorial matchday system: calm ink, warm paper and one confident green.
   This final layer keeps the existing data components but gives the whole
   dashboard one visual language instead of a stack of unrelated surfaces. */
:root {
  --prediction-bg: #f4f2ed;
  --prediction-surface: #fffdf9;
  --prediction-surface-2: #f0f3ef;
  --prediction-line: #d8e0d9;
  --prediction-text: #132a25;
  --prediction-muted: #687771;
  --prediction-cyan: #1d765f;
  --prediction-green: #2c9a74;
  --prediction-blue: #5c7890;
  --prediction-amber: #b7812d;
  --prediction-coral: #c96352;
  --prediction-ease: cubic-bezier(.23, 1, .32, 1);
}

html { background: var(--prediction-bg); }
body.prediction-app { background: var(--prediction-bg); color: var(--prediction-text); }
.prediction-app .main-content { width: min(1210px, calc(100% - 48px)); padding: 24px 0 46px; }
.prediction-app .app-topbar { min-height: 58px; margin-bottom: 18px; padding: 0 2px 15px; background: transparent; border: 0; border-bottom: 1px solid var(--prediction-line); border-radius: 0; box-shadow: none; }
.brand-lockup { gap: 9px; color: var(--prediction-text); }
.brand-lockup strong { color: var(--prediction-text); font-size: 19px; letter-spacing: -.055em; }
.brand-symbol { color: var(--prediction-cyan); font-size: 18px; }
.brand-tag { color: var(--prediction-cyan); background: #e4f1eb; border: 1px solid #c8dfd4; border-radius: 5px; padding: 4px 7px; font-size: 9px; letter-spacing: .02em; }
.topbar-status { gap: 9px; color: var(--prediction-muted); font-size: 9px; }
.status-dot { width: 7px; height: 7px; background: var(--prediction-green); box-shadow: 0 0 0 3px #dcefe5; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--prediction-line); border-radius: 7px; background: var(--prediction-surface); color: var(--prediction-text); transition: background 160ms ease-out, transform 160ms ease-out, border-color 160ms ease-out; }
.icon-button:hover { border-color: #a8c8ba; background: #f4faf5; }
.icon-button:active { transform: scale(.97); }
.prediction-app .league-tabs { gap: 7px; margin: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--prediction-line); border-radius: 0; background: transparent; }
.prediction-app .league-tab { min-height: 38px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #71817b; padding: 8px 13px; font-size: 11px; transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; }
.prediction-app .league-tab:hover { border-color: #c7dbd0; background: #edf5ef; color: #1d5d4d; transform: translateY(-1px); }
.prediction-app .league-tab.active { color: #fff; border-color: #1d765f; background: #1d765f; box-shadow: 0 4px 10px rgba(29, 118, 95, .15); }
.section-nav { margin: 15px 0 22px; padding: 4px; border: 1px solid var(--prediction-line); border-radius: 8px; background: var(--prediction-surface); box-shadow: 0 7px 20px rgba(30, 52, 42, .06); top: 12px; }
.section-nav-item { color: #6c7d76; padding: 8px 12px; border-radius: 5px; font-size: 10px; letter-spacing: .01em; }
.section-nav-item:hover { color: var(--prediction-text); background: #edf3ee; }
.section-nav-item.active { color: #fff; background: #183f34; box-shadow: 0 3px 8px rgba(24, 63, 52, .18); }
.prediction-header { padding: 24px 3px 18px; }
.prediction-header h1 { color: var(--prediction-text); font-size: clamp(27px, 3vw, 40px); letter-spacing: -.065em; }
.prediction-header p { color: var(--prediction-muted); font-size: 13px; }
.prediction-header-meta { gap: 7px; color: var(--prediction-muted); }
.prediction-header-meta span { padding: 5px 7px; border: 1px solid var(--prediction-line); border-radius: 5px; background: #edf2ed; }
.prediction-header-meta span:first-child { color: var(--prediction-cyan); background: #e3f1e9; border-color: #c7dfd1; }
.prediction-toolbar { gap: 9px; margin-bottom: 16px; padding: 10px; border: 1px solid var(--prediction-line); border-radius: 9px; background: var(--prediction-surface); box-shadow: 0 3px 10px rgba(36, 58, 48, .04); }
.date-chip { min-height: 40px; color: var(--prediction-text); background: #f3f6f2; border-color: #dce5de; border-radius: 6px; box-shadow: none; }
.date-chip span { color: var(--prediction-cyan); }
.season-control { min-height: 40px; color: var(--prediction-muted); }
.season-control select { min-height: 38px; background: var(--prediction-surface); color: var(--prediction-text); border-color: var(--prediction-line); border-radius: 6px; }
.refresh-button { min-height: 40px; border: 1px solid #1d765f; border-radius: 6px; background: #1d765f; color: #fff; box-shadow: 0 3px 8px rgba(29, 118, 95, .13); }
.refresh-button:hover:not(:disabled) { background: #155e4d; border-color: #155e4d; }
.toolbar-note { color: #7b8a82; }
.upcoming-grid { gap: 12px; }
.fixture-card, .fixture-card-featured { border: 1px solid #d6e1da; border-radius: 10px; background: var(--prediction-surface); box-shadow: 0 7px 18px rgba(32, 56, 44, .06); }
.fixture-card:hover { border-color: #9fc5b2; box-shadow: 0 10px 24px rgba(32, 56, 44, .1); transform: translateY(-1px); transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out; }
.fixture-card-featured { border-color: #b5d5c5; background: #fbfdf9; }
.league-card-label { color: #1d765f; background: #e6f2eb; border-color: #c9e0d2; border-radius: 4px; }
.fixture-date { color: #5f7069; }
.fixture-card .team-meta { color: #788881; }
.fixture-team b { color: var(--prediction-text); }
.fixture-team span { color: #71837b; }
.fixture-team-copy b { color: var(--prediction-text); }
.fixture-vs { color: #83918b; }
.probability-bars { border-color: #d4dfd8; background: #eff3ef; }
.probability-bars .home-segment { background: #2c9a74; }
.probability-bars .draw-segment { background: #e5c67f; color: #655020; }
.probability-bars .away-segment { background: #6f8ca0; }
.probability-labels div { color: #72817b; }
.probability-labels b { color: var(--prediction-text); }
.fixture-pick { border-color: #dfe7e1; }
.fixture-pick .eyebrow { color: #78877f; }
.fixture-pick strong, .fixture-confidence strong { color: var(--prediction-cyan); }
.fixture-confidence span { color: #7b8a83; }
.fixture-data-grid div, .fixture-market, .fixture-exact-scores { border-color: #e0e8e2; background: #f8faf7; }
.fixture-data-grid span, .fixture-market span { color: #76867e; }
.fixture-data-grid b, .fixture-market b { color: #26483b; }
.fixture-card-foot { color: #77877f; }
.fixture-card-foot a { color: var(--prediction-cyan); }
.match-details { border-color: #e0e8e2; }
.match-details summary { color: #5f7168; }
.fixture-center-toggle { border-color: #c9ded1; background: #eaf5ee; color: #1d765f; transition: background 160ms ease-out, transform 160ms ease-out; }
.fixture-center-toggle:hover { background: #ddf0e5; }
.fixture-center-toggle:active { transform: scale(.97); }
.upcoming-empty { border-color: #cfdcd4; background: var(--prediction-surface); }
.advanced-drawer { border-color: var(--prediction-line); }
.advanced-drawer summary { color: #3e554b; }
.advanced-drawer summary small { color: #7d8b84; }
.mini-panel { background: var(--prediction-surface); border-color: var(--prediction-line); }
.mini-panel h2 { color: var(--prediction-text); }
.evaluation-panel, .live-panel, .history-panel { margin-top: 0; padding: 22px; border: 1px solid var(--prediction-line); border-radius: 12px; background: var(--prediction-surface); box-shadow: 0 8px 24px rgba(32, 56, 44, .06); }
.evaluation-panel h2, .live-panel h2, .history-panel h2 { color: var(--prediction-text); }
.section-lead { color: var(--prediction-muted); }
.evaluation-refresh, .live-panel-actions .button, .history-actions .button { color: var(--prediction-cyan); background: #eaf4ee; border-color: #cbe0d2; }
.evaluation-summary { gap: 8px; }
.evaluation-card, .history-stat { border-color: #dce6df; border-radius: 7px; background: #f8faf7; }
.evaluation-card strong, .history-stat strong { color: #1e5745; }
.evaluation-table-wrap td, .history-table-wrap td { color: #4c6258; }
.history-table-wrap th { color: #718078; }
.history-status { border-radius: 4px; }
.history-green { background: #e2f2e7; color: #236e4d; }
.history-red { background: #fae8e3; color: #a24e42; }
.history-pending { background: #fff3d8; color: #8a681f; }
.prediction-app footer { border-color: var(--prediction-line); color: #7b8981; }

@media (max-width: 760px) {
  .prediction-app .main-content { width: calc(100% - 28px); padding-top: 14px; }
  .prediction-app .app-topbar { min-height: 60px; padding-bottom: 12px; }
  .brand-lockup strong { font-size: 17px; }
  .prediction-app .league-tabs { padding-bottom: 10px; }
  .section-nav { margin-top: 12px; margin-bottom: 16px; }
  .prediction-header { padding-top: 19px; }
  .prediction-header h1 { font-size: 27px; }
  .prediction-header-meta { gap: 5px; }
  .prediction-toolbar { padding: 8px; }
  .prediction-toolbar .date-chip, .prediction-toolbar .season-control, .prediction-toolbar .season-control select, .prediction-toolbar .refresh-button { min-height: 42px; }
  .evaluation-panel, .live-panel, .history-panel { padding: 16px; border-radius: 10px; }
  .history-actions { flex-wrap: wrap; }
  .history-actions .panel-caption { flex: 1 1 100%; }
}

/* Match-centre pass: a compact Flashscore-inspired scoreboard without
   copying its branding. The prediction remains the primary action; details
   and lineups stay one click away inside each match row. */
.prediction-app .app-topbar { background: #081d30; border-color: #081d30; color: #f2f7fb; box-shadow: 0 6px 16px rgba(7, 28, 47, .18); }
.prediction-app .brand-lockup strong { color: #f7fbff; }
.prediction-app .brand-symbol, .prediction-app .brand-tag { color: #8be4ba; }
.prediction-app .brand-tag { background: rgba(90, 204, 151, .12); border-color: rgba(139, 228, 186, .3); }
.prediction-app .topbar-status { color: #b6c7d6; }
.prediction-app .icon-button { color: #f2f7fb; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.prediction-app .league-tabs { margin-inline: -1px; padding: 9px 10px; border: 0; border-radius: 8px; background: #0c2940; }
.prediction-app .league-tab { min-height: 38px; border: 0; border-radius: 6px; background: transparent; color: #b9cad7; padding: 8px 14px; }
.prediction-app .league-tab:hover { background: rgba(255,255,255,.08); border: 0; }
.prediction-app .league-tab.active { color: #05251b; background: #47c98b; box-shadow: 0 3px 10px rgba(71, 201, 139, .22); }
.prediction-header { padding-top: 24px; }
.prediction-header h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.045em; }
.prediction-header p { font-size: 13px; }
.prediction-header-meta { align-items: flex-end; flex-wrap: wrap; max-width: 580px; justify-content: flex-end; row-gap: 5px; }
.prediction-header-meta span { padding: 4px 7px; border-radius: 4px; background: #e8edf1; }
.prediction-header-meta span:first-child { color: #0b7963; background: #e1f4ed; }
.prediction-toolbar { padding: 10px; margin-bottom: 12px; border: 1px solid #d7e0e6; border-radius: 8px; background: #fff; }
.prediction-toolbar .date-chip { min-height: 38px; box-shadow: none; }
.prediction-toolbar .season-control, .prediction-toolbar .season-control select, .prediction-toolbar .refresh-button { min-height: 38px; }
.toolbar-note { font-size: 9px; }
.upcoming-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fixture-card, .fixture-card-featured { border: 1px solid #d8e1e7; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(31, 49, 68, .05); padding: 12px 14px; }
.fixture-card:hover { border-color: #9bc9c1; box-shadow: 0 5px 14px rgba(31, 49, 68, .1); }
.fixture-card-top { margin-bottom: 9px; }
.league-card-label { margin-bottom: 0; border-radius: 4px; padding: 4px 6px; font-size: 8px; }
.fixture-date { margin-left: 7px; font-size: 10px; }
.signal-badge { border-radius: 4px; padding: 4px 7px; }
.fixture-teams { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 14px; padding: 8px 0 12px; }
.fixture-team { gap: 8px; }
.fixture-team b { font-size: 15px; }
.fixture-team::before { width: 28px; height: 28px; flex-basis: 28px; }
.fixture-vs { display: grid; gap: 3px; justify-items: center; color: #6e7e8d; }
.fixture-vs strong { font-size: 11px; color: #344b5d; }
.fixture-vs small { color: #9aa9b5; font: 8px "DM Mono", monospace; }
.probability-bars { height: 17px; border-radius: 4px; }
.probability-bars .probability-segment { font-size: 9px; }
.probability-labels { padding: 6px 2px 1px; }
.probability-labels div { font-size: 9px; }
.probability-labels b { font-size: 13px; }
.fixture-pick { margin-top: 7px; padding-top: 9px; }
.fixture-pick strong { font-size: 13px; }
.fixture-confidence strong { font-size: 18px; }
.fixture-card-foot { align-items: center; margin-top: 9px; padding-top: 9px; }
.fixture-center-toggle { min-height: 32px; border: 1px solid #c6d8d5; border-radius: 5px; background: #eff8f4; color: #0c7661; padding: 6px 9px; font: 700 10px "DM Mono", monospace; cursor: pointer; }
.fixture-center-toggle:hover { background: #dff3eb; border-color: #8bcdb8; }
.fixture-center-toggle:disabled { opacity: .6; cursor: wait; }
.fixture-center { margin-top: 11px; border-top: 1px solid #dce5e9; padding-top: 12px; }
.fixture-center-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.fixture-center-head b { display: block; color: #253b4c; font-size: 13px; margin-top: 3px; }
.fixture-center-head b span { color: #9aa9b5; font-weight: 500; margin-inline: 4px; }
.center-close { border: 0; background: transparent; color: #687d8d; font: 10px "DM Mono", monospace; cursor: pointer; }
.center-close:hover { color: #0b7963; }
.center-notice { margin-bottom: 10px; padding: 8px 10px; border-radius: 5px; background: #fff8e6; color: #7a5b1c; font: 10px/1.45 "DM Mono", monospace; }
.fixture-center-actions { display: flex; align-items: center; gap: 10px; }
.lineup-status { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px; border-radius: 4px; font: 9px "DM Mono", monospace; letter-spacing: .06em; }
.lineup-status.confirmed { background: #e1f4eb; color: #157456; }
.lineup-status.expected { background: #fff2cf; color: #8a6517; }
.lineup-status.estimated { background: #f4edff; color: #7652a6; }
.lineup-status.pending { background: #eef2f5; color: #748391; }
.center-notice.expected { background: #fff8e6; color: #7a5b1c; }
.center-notice.estimated { background: #f4edff; color: #67488f; }
.center-notice.confirmed { background: #edf8f2; color: #176d54; }
.lineups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lineup-team, .injuries-panel { min-width: 0; border: 1px solid #e0e7eb; border-radius: 6px; background: #f7f9fa; padding: 10px; }
.lineup-team-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.lineup-team-head b { color: #304658; font-size: 11px; }
.lineup-team-head span { color: #8495a2; font: 9px "DM Mono", monospace; }
.lineup-team h5 { margin: 8px 0 4px; color: #8998a4; font: 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.lineup-players { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lineup-players li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 24px; border-bottom: 1px solid #e6ecef; color: #3b5365; font-size: 10px; }
.lineup-players li:last-child { border-bottom: 0; }
.player-number { color: #17856d; font: 9px "DM Mono", monospace; }
.lineup-players small { color: #98a6b0; font: 8px "DM Mono", monospace; }
.lineup-empty { color: #8a9aa7; font: 10px/1.4 "DM Mono", monospace; }
.injuries-panel { margin-top: 10px; }
.injury-list { display: flex; flex-wrap: wrap; gap: 6px; }
.injury-chip { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid #efd7d7; border-radius: 4px; background: #fff4f4; color: #9a5151; padding: 5px 7px; font-size: 9px; }
.injury-chip small { color: #b77b7b; font: 8px "DM Mono", monospace; }
.center-loading, .center-error { color: #7f909d; font: 10px "DM Mono", monospace; padding: 6px 0; }
.center-error { color: #a35d5d; }
@media (max-width: 760px) {
  .prediction-header-meta { justify-content: flex-start; max-width: none; }
  .prediction-header-meta span { font-size: 9px; }
  .prediction-toolbar { align-items: stretch; }
  .toolbar-note { margin-left: 0; width: 100%; }
  .fixture-teams { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); gap: 7px; }
  .fixture-team { gap: 4px; }
  .fixture-team::before { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }
  .fixture-team b { font-size: 12px; }
  .fixture-vs small { font-size: 7px; }
  .lineups-grid { grid-template-columns: 1fr; }
  .fixture-center-actions { gap: 6px; }
  .lineup-status { font-size: 8px; }
}

/* SofaScore-inspired match centre: real crests, a compact tactical pitch,
   and clear confidence status without exposing the historical data tables. */
.fixture-team::before { display: none !important; }
.fixture-team-copy { min-width: 0; }
.team-crest { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid #d7e2e7; border-radius: 50%; background: #f5f8f9; color: #147c74; font: 800 10px "DM Mono", monospace; }
.team-crest img { display: block; width: 78%; height: 78%; object-fit: contain; }
.team-crest-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.team-crest-card { width: 38px; height: 38px; }
.fixture-team-copy b { display: block; }
.fixture-team-copy span { display: block; }
.fixture-away .fixture-team-copy { text-align: right; }

.lineups-grid { align-items: stretch; }
.lineup-team { overflow: hidden; padding: 0; background: #fff; }
.lineup-team-head { min-height: 66px; margin: 0; padding: 10px 11px; border-bottom: 1px solid #e3eaee; background: #fbfcfc; }
.lineup-team-identity { display: flex; min-width: 0; align-items: center; gap: 9px; }
.team-crest-lineup { width: 40px; height: 40px; border-color: #d4e2e3; background: #edf6f3; }
.lineup-team-identity > div { min-width: 0; }
.lineup-team-head .lineup-team-identity b { display: block; overflow: hidden; color: #243e50; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lineup-team-head .lineup-team-identity > div > span { display: block; margin-top: 3px; color: #8798a4; font: 9px "DM Mono", monospace; }
.lineup-team-head .lineup-formation { flex: 0 0 auto; margin-left: 5px; color: #0c7962; font: 800 10px "DM Mono", monospace; }
.lineup-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 11px 6px; }
.lineup-section-label h5 { margin: 0; color: #536b7b; font-size: 9px; }
.lineup-section-label span { color: #99a7b0; font: 8px "DM Mono", monospace; }
.lineup-pitch { position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: 5px; min-height: 315px; margin: 0 9px 10px; padding: 12px 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(180deg, #2b9d78 0%, #228e6d 49%, #2d9d78 100%); background-size: 50% 100%, 100% 33.333%; box-shadow: inset 0 0 0 1px rgba(11, 100, 73, .18), inset 0 0 28px rgba(5, 84, 61, .18); }
.lineup-pitch::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgba(255,255,255,.52); }
.lineup-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.48); border-radius: 50%; }
.pitch-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-around; gap: 3px; min-height: 51px; }
.pitch-row-por .lineup-player { width: 100%; }
.pitch-row-def .lineup-player { width: 25%; }
.pitch-row-med .lineup-player { width: 33.333%; }
.pitch-row-ata .lineup-player { width: 33.333%; }
.lineup-player { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.player-avatar { display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid #fff; border-radius: 50%; background: #f2f6f7; box-shadow: 0 2px 6px rgba(0, 59, 43, .2); color: #25614f; font: 800 8px "DM Mono", monospace; }
.player-label { display: block; width: 100%; min-width: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 64, 44, .45); }
.player-label b { display: block; overflow: hidden; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.player-label small { display: block; color: rgba(241, 255, 249, .84); font: 7px "DM Mono", monospace; }
.pitch-empty { position: relative; z-index: 2; margin: auto; max-width: 180px; color: rgba(255,255,255,.88); font: 9px/1.5 "DM Mono", monospace; text-align: center; }
.lineup-team > h5 { padding: 0 11px; }
.lineup-team .lineup-players { margin: 0 11px 11px; }
.lineup-team .lineup-empty { padding: 0 11px 12px; }
.lineups-grid .lineup-pending .lineup-pitch { min-height: 190px; }
.center-notice { border: 1px solid #ead9ad; }

/* Compact market summary: the useful output is visible, while the full
   historical tables remain behind the advanced drawer. */
.fixture-markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #e0e7eb; }
.fixture-market { min-width: 0; padding: 7px 7px 6px; border: 1px solid #e2e8eb; border-radius: 5px; background: #f8fafb; }
.fixture-market span { display: block; color: #718291; font: 800 8px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.fixture-market b { display: block; margin-top: 4px; color: #1d4052; font: 800 12px "DM Mono", monospace; }
.fixture-market small { display: block; margin-top: 4px; overflow: hidden; color: #718391; font: 8px/1.35 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.fixture-market em { display: block; margin-top: 4px; color: #9a7b38; font: 7px "DM Mono", monospace; font-style: normal; }
.fixture-recommendations { margin-top: 9px; padding: 9px; border: 1px solid #d6e7e1; border-radius: 6px; background: #f4faf7; }
.fixture-recommendations-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fixture-recommendations-head span { color: #28755e; font: 800 8px "DM Mono", monospace; letter-spacing: .06em; }
.fixture-recommendations-head small { color: #7f938c; font: 8px "DM Mono", monospace; }
.fixture-recommendation-list { display: grid; gap: 4px; }
.fixture-recommendation { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 34px; padding: 4px 5px; border-radius: 4px; background: #fff; }
.fixture-recommendation.is-top { border: 1px solid #b8dfd1; background: #eaf7f1; }
.recommendation-rank { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #d8eee6; color: #27735e; font: 800 9px "DM Mono", monospace; }
.recommendation-copy { min-width: 0; }
.recommendation-copy small { display: block; color: #7d9289; font: 8px "DM Mono", monospace; text-transform: uppercase; }
.recommendation-copy b { display: block; overflow: hidden; margin-top: 2px; color: #224c3e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.fixture-recommendation > strong { color: #147c62; font: 800 13px "DM Mono", monospace; }
.fixture-recommendation > em { grid-column: 2 / -1; margin-top: -4px; color: #70857d; font: 7.5px/1.45 "DM Mono", monospace; font-style: normal; text-align: left; }
.fixture-recommendation.is-top { box-shadow: inset 3px 0 0 #2b9874; }
.fixture-recommendation .recommendation-copy small { color: #2b8065; }
.fixture-recommendation.is-provisional { border: 1px solid #ead6a7; background: #fffaf0; }
.fixture-recommendation.is-provisional.is-top { box-shadow: inset 3px 0 0 #d49a2d; }
.fixture-recommendation.is-provisional .recommendation-copy small,
.fixture-recommendation.is-provisional > strong { color: #9a6814; }
.fixture-recommendation-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 7px 9px; border: 1px dashed #cbded6; border-radius: 5px; background: rgba(255,255,255,.72); }
.fixture-recommendation-empty b { color: #527267; font-size: 10px; }
.fixture-recommendation-empty span { color: #84968f; font: 8px/1.35 "DM Mono", monospace; text-align: right; }
.fixture-source-line { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 8px; color: #557064; font: 8px "DM Mono", monospace; }
.source-consensus-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #299b78; box-shadow: 0 0 0 3px #e2f3ec; }
.fixture-source-line b { flex: 0 0 auto; color: #27735e; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.fixture-source-line small { min-width: 0; overflow: hidden; color: #82919b; font: 8px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.fixture-profile-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; margin-top: 5px; padding: 5px 7px; border: 1px solid #e2eee9; border-radius: 5px; background: #f6fbf8; color: #5f8b79; font: 8px "DM Mono", monospace; }
.fixture-profile-line span { flex: 0 0 auto; color: #27735e; font-weight: 800; letter-spacing: .04em; }
.fixture-profile-line small { min-width: 0; overflow: hidden; color: #7b938a; font: 8px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }

.fixture-exact-scores { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 9px; padding: 8px 9px; border: 1px solid #e2e8eb; border-radius: 6px; background: #fbfcfd; }
.fixture-exact-scores > div:first-child { min-width: 92px; }
.fixture-exact-scores > div:first-child span { display: block; color: #5e7785; font: 800 8px "DM Mono", monospace; letter-spacing: .05em; }
.fixture-exact-scores > div:first-child small { display: block; margin-top: 3px; color: #9ba9b1; font: 7px/1.25 "DM Mono", monospace; }
.exact-score-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.exact-score-list > span { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 6px; border-radius: 4px; background: #eef6f3; color: #207660; }
.exact-score-list > span b { font: 800 11px "DM Mono", monospace; }
.exact-score-list > span small { color: #659786; font: 8px "DM Mono", monospace; }
.exact-score-empty { color: #8799a3 !important; background: #f4f6f7 !important; font: 8px "DM Mono", monospace !important; }
.fixture-quality { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 7px 8px; border-radius: 5px; font: 8px "DM Mono", monospace; }
.fixture-quality b { flex: 0 0 auto; text-transform: uppercase; letter-spacing: .03em; }
.fixture-quality > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.fixture-quality > div span { padding: 3px 5px; border-radius: 3px; background: rgba(255,255,255,.62); color: inherit; }
.quality-alta { border: 1px solid #cfe5da; background: #f0faf5; color: #2e775d; }
.quality-media { border: 1px solid #eadfbf; background: #fffaf0; color: #8c6b26; }
.quality-baja { border: 1px solid #efd5d5; background: #fff5f5; color: #9a5f5f; }

.evaluation-panel { margin-top: 14px; padding: 18px 20px 16px; background: #fbfcfd; border-color: #dbe5e8; }
.evaluation-panel .panel-heading { margin-bottom: 13px; }
.evaluation-panel h2 { color: #263f4f; }
.evaluation-refresh { min-height: 30px; padding: 6px 9px; color: #27735e; background: #eef7f3; border: 1px solid #cfe3db; }
.evaluation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.evaluation-card { min-width: 0; padding: 9px 10px; border: 1px solid #e2e8eb; border-radius: 5px; background: #fff; }
.evaluation-card span { display: block; color: #83939d; font: 8px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.evaluation-card strong { display: block; margin-top: 5px; color: #1d4052; font: 800 18px "DM Mono", monospace; }
.evaluation-card small { display: block; margin-top: 3px; overflow: hidden; color: #8a9ba4; font: 8px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.evaluation-loading { padding: 11px; color: #81929c; font: 9px "DM Mono", monospace; }
.evaluation-alert { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding: 7px 9px; border-radius: 5px; font: 8px/1.35 "DM Mono", monospace; }
.evaluation-alert b { flex: 0 0 auto; text-transform: uppercase; letter-spacing: .04em; }
.evaluation-alert span { color: inherit; opacity: .9; }
.evaluation-alert.is-ready { border: 1px solid #cfe5da; background: #f0faf5; color: #2e775d; }
.evaluation-alert.is-waiting { border: 1px solid #eadfbf; background: #fffaf0; color: #8c6b26; }
.evaluation-table-wrap { margin-top: 11px; }
.evaluation-table-wrap table { min-width: 720px; }
.evaluation-table-wrap th { padding-bottom: 8px; font-size: 8px; }
.evaluation-table-wrap td { padding: 8px 7px; color: #4c6573; font-size: 9px; }
.evaluation-table-wrap tr.is-selected td { background: #f2faf7; color: #1f5e4b; }

.live-panel { margin-top: 14px; padding: 18px 20px 16px; background: #f8fbfa; border-color: #d6e5e1; }
.live-panel .panel-heading { margin-bottom: 13px; }
.live-panel h2 { color: #234b43; }
.live-panel-actions { display: flex; align-items: center; gap: 9px; }
.live-panel-actions .panel-caption { max-width: 300px; text-align: right; }
.live-panel-actions .button { min-height: 30px; padding: 6px 9px; color: #27735e; background: #eef7f3; border: 1px solid #cfe3db; }
.live-predictions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 9px; }
.live-match-card { min-width: 0; padding: 11px; border: 1px solid #dbe8e4; border-radius: 6px; background: #fff; }
.live-match-head, .live-pick, .live-market-row, .live-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-match-status { display: inline-block; padding: 3px 5px; border-radius: 3px; background: #e8f6ef; color: #20765c; font: 800 8px "DM Mono", monospace; }
.live-match-minute { margin-left: 5px; color: #778d8a; font: 800 10px "DM Mono", monospace; }
.live-source { margin-left: 7px; padding-left: 7px; border-left: 1px solid var(--line); color: #778d8a; font: 700 9px "DM Mono", monospace; }
.live-score { color: #193c36; font: 800 20px "DM Mono", monospace; }
.live-match-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; margin: 10px 0 8px; color: #2e4c59; font-size: 11px; }
.live-match-teams b:last-child { text-align: right; }
.live-match-teams span { color: #9aaab0; font: 9px "DM Mono", monospace; }
.live-probability-bars { display: flex; gap: 2px; min-height: 22px; overflow: hidden; border-radius: 4px; color: #fff; font: 800 10px "DM Mono", monospace; text-align: center; }
.live-probability-bars span { display: grid; place-items: center; min-width: 18%; background: #2b9d78; }
.live-probability-bars span:nth-child(2) { background: #9fb5b2; }
.live-probability-bars span:nth-child(3) { background: #4e9eb2; }
.live-probability-labels { display: flex; justify-content: space-between; margin-top: 4px; color: #72848b; font: 8px "DM Mono", monospace; }
.live-pick { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e5efec; }
.live-pick strong { color: #19715b; font-size: 13px; }
.live-pick span { color: #7e9190; font: 8px "DM Mono", monospace; text-align: right; }
.live-market-row { margin-top: 8px; color: #53716a; font: 8px "DM Mono", monospace; }
.live-market-row b { color: #1d765e; }
.live-stats-row { margin-top: 8px; padding-top: 7px; border-top: 1px solid #edf2f1; color: #7f9297; font: 8px "DM Mono", monospace; }
.live-detail-row { margin-top: 8px; color: #4f6b67; font: 700 9px "DM Mono", monospace; letter-spacing: .01em; }
.live-model-note { display: block; margin-top: 8px; color: #97a5a8; font: 8px/1.35 "DM Mono", monospace; }
.history-panel { margin-top: 14px; }
.history-actions { display: flex; align-items: flex-start; gap: 10px; }
.history-actions .button { margin-top: 2px; }
.history-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 0 0 16px; }
.history-stat { border: 1px solid #dbe8e4; border-radius: 6px; padding: 10px; background: #fbfdfc; }
.history-stat span, .history-stat small { display: block; color: #758782; font: 9px "DM Mono", monospace; }
.history-stat strong { display: block; margin: 4px 0 2px; color: #244c42; font: 700 20px "DM Mono", monospace; }
.history-table-wrap table { min-width: 760px; }
.history-prediction, .history-probabilities { font: 10px "DM Mono", monospace; }
.history-status { display: inline-block; border-radius: 5px; padding: 5px 7px; font: 800 9px "DM Mono", monospace; white-space: nowrap; }
.history-green { background: #e4f5e7; color: #237451; }
.history-red { background: #fbe8e3; color: #a44d3e; }
.history-pending { background: #f2eee1; color: #967c3e; }

/* History cards: the result is readable at a glance without exposing the
   full training table to the person using the dashboard. */
.history-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 12px; }
.history-match-card { min-width: 0; padding: 14px; border: 1px solid #dbe8e4; border-left: 4px solid #c6d6cf; border-radius: 9px; background: #fff; color: var(--prediction-text); box-shadow: 0 4px 14px rgba(32, 56, 44, .04); }
.history-match-card.is-green { border-left-color: #43a66d; }
.history-match-card.is-red { border-left-color: #dc7768; }
.history-match-card.is-pending { border-left-color: #c79e43; }
.history-card-head, .history-card-pick, .history-card-result, .history-card-probabilities { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-card-head { margin-bottom: 12px; }
.history-card-date { color: #788a82; font: 700 10px "DM Mono", monospace; letter-spacing: .02em; }
.history-card-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid #e8efeb; }
.history-card-teams > div { min-width: 0; }
.history-card-teams > div:last-child { text-align: right; }
.history-card-teams strong { display: block; overflow: hidden; color: #27483e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-card-teams small, .history-card-pick small, .history-card-result small { display: block; margin-top: 3px; color: #87968f; font: 9px "DM Mono", monospace; }
.history-card-teams > span { color: #a0afa9; font: 9px "DM Mono", monospace; }
.history-card-pick, .history-card-result { align-items: flex-start; margin-top: 11px; }
.history-card-pick > span, .history-card-result > span, .history-card-probabilities > span { color: #7b8d85; font: 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .03em; }
.history-card-pick > strong { color: #1e7658; font-size: 15px; text-align: right; }
.history-card-result > strong { color: #2b4e43; font-size: 13px; text-align: right; }
.history-card-pick small, .history-card-result small { max-width: 150px; text-align: right; }
.history-card-probabilities { display: block; margin-top: 13px; padding-top: 10px; border-top: 1px solid #edf2ef; }
.history-probability-bars { display: flex; gap: 3px; width: 100%; margin-top: 7px; overflow: hidden; border-radius: 5px; background: #edf3f0; color: #fff; font: 800 9px "DM Mono", monospace; }
.history-probability-bars span { display: flex; align-items: center; justify-content: center; min-width: 27px; min-height: 24px; background: #4d9e79; }
.history-probability-bars span:nth-child(2) { background: #97ada5; }
.history-probability-bars span:nth-child(3) { background: #5a9cad; }
.history-probability-bars b { margin-right: 3px; color: rgba(255,255,255,.76); }
.history-card-bets { margin-top: 13px; padding-top: 10px; border-top: 1px solid #edf2ef; }
.history-card-bets-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.history-card-bets-head span { color: #536f65; font: 800 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .03em; }
.history-card-bets-head small { color: #94a19c; font: 8px "DM Mono", monospace; text-align: right; }
.history-bet-row { display: grid; grid-template-columns: minmax(0, 1.35fr) auto minmax(80px, .9fr) auto; align-items: center; gap: 7px; padding: 7px 0; border-top: 1px solid #f0f4f2; }
.history-bet-row:first-of-type { border-top: 0; }
.history-bet-row > div { min-width: 0; }
.history-bet-row small, .history-bet-row em { display: block; overflow: hidden; color: #82928b; font: 8px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.history-bet-row strong { display: block; overflow: hidden; margin-top: 2px; color: #2b4e43; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.history-bet-row > span { color: #286e56; font: 800 10px "DM Mono", monospace; white-space: nowrap; }
.history-bet-row em { font-style: normal; text-align: right; }
.history-bet-status { display: inline-flex; justify-content: center; min-width: 52px; padding: 4px 5px; border-radius: 4px; font: 800 8px "DM Mono", monospace; text-transform: uppercase; }
.history-bet-green { background: #e4f5e7; color: #237451; }
.history-bet-red { background: #fbe8e3; color: #a44d3e; }
.history-bet-pending { background: #f2eee1; color: #967c3e; }
.history-empty { grid-column: 1 / -1; padding: 28px 16px; border: 1px dashed #cddbd4; border-radius: 9px; color: #7b8c84; background: #fbfdfb; text-align: center; font: 11px "DM Mono", monospace; }
.history-cards .history-status { flex: 0 0 auto; }

@media (max-width: 760px) {
  .section-nav { overflow-x: auto; position: sticky; top: 8px; z-index: 8; }
  .section-nav-item { flex: 0 0 auto; }
  .history-summary { grid-template-columns: repeat(2, 1fr); }
  .history-cards { grid-template-columns: 1fr; }
  .history-bet-row { grid-template-columns: minmax(0, 1fr) auto; }
  .history-bet-row em { grid-column: 1; text-align: left; }
  .history-bet-status { grid-column: 2; grid-row: 1 / span 2; }
  .team-crest-card { width: 32px; height: 32px; }
  .lineup-pitch { min-height: 290px; margin-inline: 7px; }
  .player-avatar { width: 28px; height: 28px; }
  .player-label b { font-size: 7px; }
  .lineup-section-label { padding-inline: 9px; }
  .fixture-markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evaluation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evaluation-panel .panel-heading { align-items: flex-start; }
  .fixture-quality { display: block; }
  .fixture-quality > div { justify-content: flex-start; margin-top: 5px; }
  .live-panel .panel-heading { display: block; }
  .live-panel-actions { justify-content: space-between; margin-top: 10px; }
  .live-panel-actions .panel-caption { text-align: left; }
}

/* Final cascade: the editorial skin intentionally wins over legacy skins. */
.prediction-app .app-topbar { background: transparent; border: 0; border-bottom: 1px solid var(--prediction-line); border-radius: 0; box-shadow: none; color: var(--prediction-text); }
.prediction-app .brand-lockup strong { color: var(--prediction-text); }
.prediction-app .brand-symbol, .prediction-app .brand-tag { color: var(--prediction-cyan); }
.prediction-app .brand-tag { background: #e4f1eb; border-color: #c8dfd4; }
.prediction-app .topbar-status { color: var(--prediction-muted); }
.prediction-app .icon-button { background: var(--prediction-surface); border-color: var(--prediction-line); color: var(--prediction-text); }
.prediction-app .league-tabs { margin: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--prediction-line); border-radius: 0; background: transparent; }
.prediction-app .league-tab { min-height: 38px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #71817b; padding: 8px 13px; }
.prediction-app .league-tab:hover { border-color: #c7dbd0; background: #edf5ef; color: #1d5d4d; }
.prediction-app .league-tab.active { color: #fff; border-color: #1d765f; background: #1d765f; box-shadow: 0 4px 10px rgba(29, 118, 95, .15); }
.prediction-app .evaluation-panel, .prediction-app .live-panel, .prediction-app .history-panel { background: var(--prediction-surface); border: 1px solid var(--prediction-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(32, 56, 44, .06); }
.prediction-app .fixture-card, .prediction-app .fixture-card-featured { background: var(--prediction-surface); border-color: #d6e1da; border-radius: 10px; box-shadow: 0 7px 18px rgba(32, 56, 44, .06); }
.prediction-app .fixture-card:hover { border-color: #9fc5b2; box-shadow: 0 10px 24px rgba(32, 56, 44, .1); }
@media (max-width: 760px) {
  .prediction-app .app-topbar { padding: 0 0 12px; }
  .prediction-app .league-tabs { padding-bottom: 10px; }
}