/* Prediction is a separate product surface, but deliberately reuses the
   application palette, density, radii and shadow language. */
.prediction-page { padding-bottom: 28px; }
.prediction-page .backbar { padding-bottom: 11px; }
.prediction-wallet { margin: 0 20px; min-height: 92px; display: grid; grid-template-columns: 1.35fr .8fr; align-items: stretch; overflow: hidden; border-radius: 18px; color: #fff; background: #0d3528; box-shadow: 0 8px 20px rgba(8,36,27,.14); }
.prediction-wallet > div { padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.prediction-wallet > div + div { border-left: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); }
.prediction-wallet span { color: #cce7d7; font-size: 11px; font-weight: 700; }
.prediction-wallet strong { margin-top: 3px; color: var(--gold); font-size: 29px; line-height: 1; }
.prediction-wallet b { margin-top: 5px; font-size: 18px; }
.prediction-rule { margin: 11px 20px 0; padding: 10px 12px; border-left: 3px solid var(--gold); color: #6a5b31; background: #fff7dc; font-size: 11px; font-weight: 700; line-height: 1.55; }
.prediction-slip { margin: 14px 20px 0; border: 1px solid #dce5de; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 3px 10px rgba(17,36,29,.05); }
.prediction-slip-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid #edf1ee; }
.prediction-slip-head div { display: flex; align-items: baseline; gap: 8px; }
.prediction-slip-head span { font-size: 13px; font-weight: 900; }
.prediction-slip-head b { color: var(--green-700); font-size: 11px; }
.prediction-slip-head .link-btn { font-size: 11px; }
.prediction-slip-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.prediction-slip-legs { border-bottom: 1px solid #edf1ee; }
.prediction-slip-leg { position: relative; display: grid; gap: 3px; padding: 9px 14px 9px 35px; border-bottom: 1px solid #f0f3f0; }
.prediction-slip-leg:last-child { border-bottom: 0; }
.prediction-slip-leg > button { position: absolute; left: 11px; top: 12px; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; color: #8a4b42; background: #ffe9e5; font-size: 14px; line-height: 1; }
.prediction-slip-leg span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.prediction-slip-leg b { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.prediction-slip-leg em { color: #b37318; font-style: normal; }
.prediction-stake-form { display: grid; grid-template-columns: minmax(0,1fr) 58px auto; align-items: end; gap: 8px; padding: 11px 12px; }
.prediction-stake-form label, .prediction-stake-form > div { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.prediction-stake-form input { min-width: 0; height: 33px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 13px; font-weight: 900; outline: none; }
.prediction-stake-form input:focus { border-color: var(--green-700); }
.prediction-stake-form > div { padding-bottom: 4px; text-align: right; }
.prediction-stake-form > div b { color: var(--green-800); font-size: 13px; }
.prediction-stake-form .primary-btn { min-height: 33px; padding: 7px 10px; box-shadow: none; }
.prediction-stake-form button:disabled { cursor: not-allowed; opacity: .45; }
.prediction-payout-hint { margin: -2px 12px 11px; color: var(--muted); font-size: 10px; }
.prediction-segments { margin-top: 8px; padding-bottom: 9px; }
.prediction-competition-tabs { margin-top: 14px; }
.prediction-stage-tabs { display: flex; gap: 7px; overflow-x: auto; margin-left: var(--page-gutter); margin-right: var(--page-gutter); padding: 0 0 11px; scroll-padding-inline: 1px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.prediction-stage-tabs::after { content: ""; flex: 0 0 1px; }
.prediction-stage-btn { flex: 0 0 auto; display: grid; gap: 2px; min-width: 72px; padding: 7px 10px; border: 1px solid #d8e2da; border-radius: 10px; color: #61746a; background: #fff; text-align: center; }
.prediction-stage-btn span { font-size: 10px; font-weight: 900; white-space: nowrap; }
.prediction-stage-btn small { color: #8b9a91; font-size: 8px; font-weight: 800; }
.prediction-stage-btn.active { border-color: var(--green-700); color: #fff; background: var(--green-700); box-shadow: 0 4px 10px rgba(20,84,55,.16); }
.prediction-stage-btn.active small { color: #d4eadb; }
.prediction-stage-empty { padding: 8px 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.prediction-stage-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 20px 10px; padding: 0 2px; }
.prediction-stage-summary b { color: var(--green-950); font-size: 13px; }
.prediction-stage-summary span { color: var(--muted); font-size: 9px; font-weight: 700; text-align: right; }
.prediction-fixture-list { display: grid; gap: 12px; padding: 0 20px; }
.prediction-fixture-group { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 3px 10px rgba(17,36,29,.04); }
.prediction-fixture-group > summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; color: var(--green-950); background: #eff5f0; cursor: pointer; list-style: none; }
.prediction-fixture-group > summary::-webkit-details-marker { display: none; }
.prediction-fixture-group > summary > span { min-width: 0; display: grid; gap: 4px; }
.prediction-fixture-group > summary b { color: var(--green-950); font-size: 13px; }
.prediction-fixture-group > summary small { color: var(--muted); font-size: 10px; font-weight: 700; }
.prediction-fixture-group > summary em { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--green-700); font-size: 10px; font-style: normal; font-weight: 900; }
.prediction-fixture-group > summary em::after { content: "⌄"; display: inline-block; color: var(--green-700); font-size: 15px; line-height: 1; transition: transform .16s ease; }
.prediction-fixture-group[open] > summary { border-bottom: 1px solid #dce5de; }
.prediction-fixture-group[open] > summary em::after { transform: rotate(180deg); }
.prediction-fixture-group-list { display: grid; gap: 8px; padding: 8px; background: #f8fbf8; }
.prediction-fixture-group-list .prediction-fixture { border-radius: 12px; box-shadow: none; }
.prediction-fixture { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 3px 10px rgba(17,36,29,.04); }
.prediction-fixture-head { display: grid; gap: 5px; padding: 12px 13px; color: var(--green-950); background: #eff5f0; }
.prediction-fixture-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prediction-fixture-head small { color: var(--muted); font-size: 10px; font-weight: 700; }
.prediction-fixture-head b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.prediction-fixture-head b .prediction-team-link { min-width: 0; flex: 1 1 0; overflow: hidden; color: inherit; font-size: inherit; font-weight: inherit; text-overflow: ellipsis; white-space: nowrap; }
.prediction-fixture-head b .prediction-team-link.away { text-align: right; }
.prediction-fixture-head b span { flex: 0 0 auto; color: var(--green-700); font-size: 10px; text-transform: uppercase; }
.prediction-fixture-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; color: #74847b; background: #e3ebe5; font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.prediction-fixture-status.is-open { color: #216846; background: #d9efe1; }
.prediction-fixture-status.is-locked { color: #7a6e52; background: #f4ead1; }
.prediction-fixture-pending { padding: 13px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.5; }
.prediction-market { border-top: 1px solid #edf1ee; }
.prediction-market-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 13px 6px; }
.prediction-market-head > span { color: var(--ink); font-size: 11px; font-weight: 900; }
.prediction-market-head small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.prediction-market.is-locked .prediction-market-head > span { color: var(--muted); }
.prediction-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 12px 11px; }
.prediction-total-goal-lines { display: grid; gap: 0; padding: 0 12px 11px; }
.prediction-total-goal-line { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 0; border-top: 1px solid #edf1ee; }
.prediction-total-goal-line:first-child { border-top: 0; padding-top: 0; }
.prediction-total-goal-line:last-child { padding-bottom: 0; }
.prediction-total-goal-line > strong { color: #75847a; font-size: 9px; font-weight: 900; text-align: center; white-space: nowrap; }
.prediction-total-goal-line .prediction-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.prediction-choice-grid-long { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 224px; overflow-y: auto; scrollbar-width: thin; }
.prediction-choice { min-width: 0; min-height: 37px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid #dce5de; border-radius: 8px; color: var(--ink); background: #fff; text-align: left; }
.prediction-choice span { overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.prediction-choice b { color: #b37318; font-size: 11px; }
.prediction-choice-opening { grid-column: 1 / -1; overflow: hidden; color: #7e8d84; font-size: 8px; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.prediction-choice-opening.is-moved { color: #4b765b; }
.prediction-choice-opening i { color: #b37318; font-style: normal; }
.prediction-choice:hover:not(:disabled), .prediction-choice.selected { border-color: var(--green-700); color: var(--green-800); background: var(--green-100); }
.prediction-choice.selected b { color: var(--green-800); }
.prediction-choice:disabled { cursor: not-allowed; opacity: .52; }
.prediction-choice.is-eliminated { border-style: dashed; color: #8a756f; background: #f6f2f0; }
.prediction-choice.is-eliminated b { color: #9b867d; }
.prediction-market-details { padding: 0 0 1px; }
.prediction-market-details summary { padding: 0 13px 9px; color: var(--green-700); font-size: 10px; font-weight: 800; cursor: pointer; }
.prediction-empty-small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.prediction-outright { margin: 15px 20px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 3px 10px rgba(17,36,29,.04); }
.prediction-outright .section-head { padding: 12px 13px 0; margin: 0; }
.prediction-history { margin: 20px 20px 0; }
.prediction-history-list { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.prediction-ticket-record { display: block; border-bottom: 1px solid #edf1ee; }
.prediction-ticket-record:last-child { border-bottom: 0; }
.prediction-ticket-record > summary { display: grid !important; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 10px; align-items: center; min-height: 61px; padding: 10px 12px; cursor: pointer; list-style: none; }
.prediction-ticket-record > summary::-webkit-details-marker { display: none; }
.prediction-ticket-record > summary::marker { content: ""; font-size: 0; }
.prediction-ticket-summary-main { min-width: 0; display: grid; gap: 4px; }
.prediction-ticket-summary-main b { color: var(--ink); font-size: 12px; }
.prediction-ticket-summary-main small { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.prediction-ticket-status { padding: 4px 7px; border-radius: 999px; font-size: 10px; line-height: 1; white-space: nowrap; }
.prediction-ticket-status.prediction-ticket-open { color: var(--green-800); background: #e4f3e9; }
.prediction-ticket-status.prediction-ticket-won { color: #8d5a08; background: #fff1cc; }
.prediction-ticket-status.prediction-ticket-lost { color: #8b352f; background: #ffe7e3; }
.prediction-ticket-status.prediction-ticket-void { color: #63736a; background: #edf1ee; }
.prediction-ticket-summary-money { display: grid; gap: 3px; min-width: 53px; text-align: right; }
.prediction-ticket-summary-money b { color: var(--ink); font-size: 11px; }
.prediction-ticket-summary-money small { color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.prediction-ticket-expand { color: var(--green-700); font-size: 10px; font-weight: 900; white-space: nowrap; }
.prediction-ticket-expand::after { content: "⌄"; display: inline-block; margin-left: 4px; font-size: 14px; line-height: .5; transition: transform .16s ease; }
.prediction-ticket-record[open] > summary { border-bottom: 1px solid #e2ece4; background: #f8fbf8; }
.prediction-ticket-record[open] .prediction-ticket-expand::after { transform: rotate(180deg); }
.prediction-ticket-details { padding: 9px 12px 11px; background: #fff; }
.prediction-ticket-details ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.prediction-ticket-details li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 9px; border-radius: 9px; background: #f6faf7; }
.prediction-ticket-details li div { min-width: 0; display: grid; gap: 3px; }
.prediction-ticket-details li div:last-child { text-align: right; }
.prediction-ticket-details li small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.prediction-ticket-details li b { font-size: 11px; }
.prediction-ticket-details footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #e6eee8; color: var(--green-800); font-size: 10px; font-weight: 800; }
.prediction-ticket-details footer small { color: var(--muted); font-size: 9px; font-weight: 700; text-align: right; }
.prediction-leg-open { color: var(--green-700) !important; }
.prediction-leg-won { color: #a56b0b !important; }
.prediction-leg-lost { color: #a04539 !important; }
.prediction-leg-void { color: var(--muted) !important; }
.prediction-ticket-open { color: var(--green-700); }
.prediction-ticket-won { color: #a56b0b; }
.prediction-ticket-lost { color: #a04539; }
.prediction-ticket-void { color: var(--muted); }
.prediction-empty { margin: 0; min-height: 150px; }
@media (max-width: 420px) { .prediction-ticket-record > summary { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; } .prediction-ticket-expand { grid-column: 3; grid-row: 1 / span 2; align-self: center; } }
@media (min-width: 700px) { .prediction-choice-grid-long { max-height: 260px; } }