@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root {
    --ink: #10224f;
    --muted: #697695;
    --surface: #ffffff;
    --surface-2: #f2f6ff;
    --line: #dce4f4;
    --lime: #144bd7;
    --navy: #f7f9ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #ffffff; color: var(--ink); font-family: 'DM Sans', sans-serif; }
button, input { font: inherit; }
button { color: inherit; }

.app-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 82% 15%, rgba(20, 75, 215, .09), transparent 30rem),
        linear-gradient(rgba(20,75,215,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,75,215,.035) 1px, transparent 1px),
        var(--navy);
    background-size: auto, 56px 56px, 56px 56px, auto;
    display: flex;
    flex-direction: column;
}

.site-header, footer, .landing, .schedule-page { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { border: 0; background: transparent; display: flex; align-items: center; gap: 12px; padding: 0; text-align: left; cursor: pointer; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--lime); color: #fff; box-shadow: 0 8px 22px rgba(20,75,215,.22); font: 700 18px 'Oswald', sans-serif; transform: skew(-7deg); }
.brand strong { display: block; font: 600 20px 'Oswald', sans-serif; letter-spacing: .4px; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }
.live-badge { color: #425680; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.live-badge i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--lime); box-shadow: 0 0 0 5px rgba(20,75,215,.1); }

.landing { flex: 1; padding: clamp(24px, 4vh, 42px) 0 28px; }
.hero-copy { max-width: 700px; }
.eyebrow { color: var(--lime); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
h1 { margin: 18px 0 22px; font: 600 clamp(48px, 7.2vw, 92px)/.98 'Oswald', sans-serif; letter-spacing: -2px; text-transform: uppercase; }
h1 em { color: #ffffff; -webkit-text-stroke: 1.5px #7592da; font-style: normal; }
.hero-copy h1 { margin: 10px 0 12px; font-size: clamp(40px, 5.5vw, 68px); line-height: .96; }
.hero-copy p { max-width: 590px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.league-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }
.league-card { min-height: 155px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 14px 40px rgba(29,64,136,.08); padding: 22px; display: flex; align-items: center; gap: 20px; text-align: left; cursor: pointer; position: relative; overflow: hidden; transition: .25s ease; }
.league-card::after { content: ''; position: absolute; inset: auto -40px -90px auto; width: 190px; height: 190px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); transition: .25s ease; }
.league-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--surface-2); box-shadow: 0 20px 48px rgba(20,75,215,.14); }
.league-card:hover::after { transform: scale(1.3); }
.league-card.nfl { --accent: #144bd7; }
.league-card.ncaaf { --accent: #376de8; }
.league-icon { flex: 0 0 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent); font: 700 20px 'Oswald', sans-serif; letter-spacing: 1px; }
.league-info { display: grid; position: relative; z-index: 1; }
.league-info small { color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.league-info strong { margin: 6px 0 14px; font: 600 21px/1.2 'Oswald', sans-serif; text-transform: uppercase; }
.league-info > span { color: #30466f; font-size: 13px; font-weight: 600; }
.league-info b { margin-left: 8px; color: var(--lime); }
.feature-row { display: flex; gap: 36px; margin-top: 24px; color: #71809f; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.feature-row b { color: var(--lime); margin-right: 9px; }

.schedule-page { flex: 1; padding: 24px 0 56px; }
.schedule-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.schedule-heading h1 { margin: 5px 0 0; font-size: clamp(36px, 4.8vw, 52px); line-height: .95; }
.back-link { display: block; padding: 0; margin-bottom: 10px; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.back-link:hover { color: var(--lime); }
.league-switcher { display: flex; border: 1px solid var(--line); padding: 4px; background: #fff; box-shadow: 0 8px 25px rgba(29,64,136,.08); }
.league-switcher button { min-width: 70px; padding: 8px 12px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 11px; cursor: pointer; }
.league-switcher button.active { background: var(--lime); color: #fff; }

.date-navigator { display: grid; grid-template-columns: 54px 1fr 54px; align-items: stretch; margin: 18px 0 14px; min-height: 86px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 12px 36px rgba(29,64,136,.08); }
.date-arrow { border: 0; background: #f4f7ff; font-size: 34px; color: #345188; cursor: pointer; transition: .18s; }
.date-arrow:first-child { border-right: 1px solid var(--line); }
.date-arrow:last-child { border-left: 1px solid var(--line); }
.date-arrow:hover { background: var(--lime); color: #fff; }
.date-center { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.date-center > small { color: var(--lime); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.date-center label { display: flex; align-items: center; gap: 8px; }
.date-center input { color-scheme: light; background: transparent; border: 0; color: var(--ink); font: 600 17px 'Oswald', sans-serif; cursor: pointer; }
.date-center strong { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: capitalize; }
.calendar-icon { color: var(--lime); }

.list-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.list-toolbar strong { display: block; font: 600 17px 'Oswald', sans-serif; text-transform: uppercase; }
.list-toolbar div span { color: var(--muted); font-size: 11px; }
.schedule-source { width: fit-content; margin: 0 0 10px auto; display: block; color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .45px; text-decoration: none; text-transform: uppercase; }
.schedule-source:hover { text-decoration: underline; }
.schedule-source span { color: #ff8b1f; }
.unverified-pill { border: 1px solid rgba(20,75,215,.25); background: #f3f6ff; padding: 7px 10px; color: var(--lime); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.division-strip { margin: 0 0 10px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; border: 1px solid #d7e1f5; border-radius: 8px; background: rgba(255,255,255,.85); }
.division-strip strong { margin-right: 4px; color: var(--ink); font: 600 13px 'Oswald', sans-serif; text-transform: uppercase; }
.division-strip span { padding: 5px 8px; border-radius: 20px; background: #edf2ff; color: #31569e; font-size: 8px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
.game-list { display: grid; gap: 10px; }
.game-card { width: 100%; min-height: 142px; padding: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; position: relative; z-index: 0; display: grid; grid-template-columns: 132px 1fr 180px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 9px 28px rgba(29,64,136,.06); transition: .2s; }
.game-card > * { pointer-events: none; }
.game-card:hover { border-color: rgba(20,75,215,.4); box-shadow: 0 13px 34px rgba(20,75,215,.11); transform: translateX(3px); }
.game-card:active { transform: translateX(3px) scale(.995); }
.game-card:focus-visible { outline: 3px solid rgba(20,75,215,.28); outline-offset: 2px; }
.game-time { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--line); }
.game-time strong { font: 600 30px 'Oswald', sans-serif; }
.game-time > span { color: var(--lime); margin-top: -4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.game-time small { color: var(--muted); margin-top: 8px; font-size: 9px; text-transform: uppercase; }
.game-card.live-game { border-color: rgba(20, 75, 215, .42); box-shadow: 0 12px 32px rgba(20, 75, 215, .13); }
.live-game .game-time { background: #f3f7ff; }
.game-time .live-word { display: flex; align-items: center; gap: 6px; color: #164bd7; font: 800 12px/1.1 'Inter', sans-serif; letter-spacing: .5px; }
.game-time .live-word i { width: 8px; height: 8px; border-radius: 50%; background: #ef3d43; box-shadow: 0 0 0 5px rgba(239,61,67,.12); animation: live-pulse 1.5s ease-in-out infinite; }
.live-game .game-time > span { margin-top: 10px; color: #164bd7; font-size: 10px; }
.live-game .game-time small { margin-top: 5px; color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.list-team-live { margin-top: 6px; }
.list-team-live b { color: #164bd7; font: 800 32px/1 'Oswald', sans-serif; }
.live-status-center { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #164bd7; }
.live-status-center span { font-size: 8px; font-weight: 900; text-align: center; text-transform: uppercase; }
.live-status-center strong { color: var(--ink); font: 800 15px/1 'Oswald', sans-serif; }
.live-prediction { background: #f3f7ff; border-left-color: rgba(20,75,215,.16); }
.live-prediction small { color: #ef3d43; }
.live-prediction strong { color: #164bd7; font-size: 24px; }
.live-prediction em { color: var(--muted); font-size: 8px; font-style: normal; }
@keyframes live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.matchup { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; padding: 20px 34px; }
.team { display: flex; align-items: center; gap: 15px; }
.team.home-team { flex-direction: row-reverse; text-align: right; }
.team-logo { width: 60px; height: 60px; flex: 0 0 60px; display: grid; place-items: center; padding: 5px; border-radius: 14px; background: #f7f9ff; border: 1px solid #e6ebf7; }
.team-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.team strong, .team span { display: block; }
.team strong { font: 600 17px 'Oswald', sans-serif; text-transform: uppercase; }
.team div span { color: var(--muted); font-size: 11px; }
.team-copy small { display: block; }
.team-division { margin-top: 5px; color: #5870a3; font-size: 8px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
.team-ranking { margin-top: 3px; color: #ed7415; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.at-sign { color: #9ba7bf; text-align: center; font-size: 12px; }
.prediction { display: flex; flex-direction: column; justify-content: center; padding: 20px 28px; border-left: 1px solid var(--line); }
.prediction small { color: var(--muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.prediction strong { margin: 4px 0 10px; color: var(--lime); font: 600 20px 'Oswald', sans-serif; }
.prediction > span { margin-top: 6px; color: var(--muted); font-size: 10px; }
.game-card.finished-game { min-height: 156px; grid-template-columns: 118px minmax(0, 1fr); }
.finished-game .matchup { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); padding: 16px 6%; }
.list-team-final { margin-top: 7px; display: flex; align-items: center; gap: 7px; }
.home-team .list-team-final { justify-content: flex-end; }
.list-team-final > b { color: var(--lime); font: 700 31px/1 'Oswald', sans-serif; }
.ats-winner-chip { padding: 5px 7px; border: 1px solid #a9dfbd; border-radius: 6px; background: #e7f7ed; color: #11743d; font-size: 7px; font-style: normal; font-weight: 900; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.final-total { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.final-total small { color: var(--muted); font-size: 6px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.final-total strong { color: var(--ink); font: 700 27px/1 'Oswald', sans-serif; }
.final-total span { margin-top: 3px; padding: 5px 7px; border-radius: 6px; font-size: 7px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.final-total .total-over-chip { background: #e7f7ed; color: #11743d; }
.final-total .total-under-chip { background: #fff1df; color: #a85b05; }
.final-total .total-push-chip { background: #f0f2f6; color: #68748b; }
.confidence { height: 3px; background: #dfe5f2; }
.confidence span { display: block; height: 100%; background: var(--lime); }

.game-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-y: auto;
    background:
        radial-gradient(circle at 85% 10%, rgba(20,75,215,.1), transparent 32rem),
        linear-gradient(rgba(20,75,215,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,75,215,.035) 1px, transparent 1px),
        #f7f9ff;
    background-size: auto, 56px 56px, 56px 56px, auto;
}
.verified-pill { padding: 7px 11px; border-radius: 20px; background: #e8f7ef; color: #137a42; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; border: 1px solid #bde9ce; }
.empty-schedule { min-height: 210px; padding: 38px; display: grid; place-content: center; gap: 8px; text-align: center; border: 1px dashed #b8c7e7; border-radius: 10px; background: #f8faff; color: var(--muted); }
.empty-schedule strong { color: var(--ink); font: 600 21px 'Oswald', sans-serif; text-transform: uppercase; }
.empty-schedule span { max-width: 500px; font-size: 12px; line-height: 1.6; }
.detail-topbar { position: sticky; top: 0; z-index: 2; min-height: 76px; padding: 0 max(24px, calc((100vw - 1280px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.detail-topbar > div { display: flex; align-items: center; gap: 18px; }
.detail-brand { padding: 0; border: 0; background: transparent; color: var(--ink); font: 600 20px 'Oswald', sans-serif; cursor: pointer; }
.detail-brand span { display: inline-grid; width: 38px; height: 38px; margin-right: 10px; place-items: center; background: var(--lime); color: #fff; transform: skew(-7deg); }
.close-detail { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; transition: .18s; }
.close-detail:hover { background: var(--lime); border-color: var(--lime); color: #fff; }
.detail-content { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 70px; }
.detail-back { margin-bottom: 22px; }
.detail-matchup { border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(115deg, #0c2f89, #144bd7 55%, #2f6bf4); box-shadow: 0 22px 55px rgba(20,75,215,.2); }
.detail-meta { padding: 17px 26px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.detail-meta span { opacity: .72; }
.detail-teams { min-height: 230px; display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; padding: 32px 8%; }
.detail-team { display: flex; align-items: center; gap: 26px; }
.detail-team.home { flex-direction: row-reverse; text-align: right; }
.detail-team img { width: 118px; height: 118px; padding: 12px; object-fit: contain; border-radius: 24px; background: #fff; filter: drop-shadow(0 12px 15px rgba(4,22,74,.16)); }
.detail-team small, .detail-team strong, .detail-team span { display: block; }
.detail-team small { margin-bottom: 7px; color: #c8d7ff; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; }
.detail-team strong { font: 600 clamp(26px, 3vw, 42px)/1 'Oswald', sans-serif; text-transform: uppercase; }
.detail-team span { margin-top: 5px; color: #dbe5ff; font-size: 13px; }
.detail-ranking { display: block; margin-top: 8px; color: #ffae42; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.detail-versus { display: flex; flex-direction: column; align-items: center; }
.detail-versus > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); font: 600 17px 'Oswald', sans-serif; }
.detail-versus small { margin-top: 18px; color: #b9cbf8; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.detail-versus strong { margin-top: 2px; font: 600 23px 'Oswald', sans-serif; }

.detail-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: 18px; margin-top: 20px; }
.analysis-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 14px 40px rgba(29,64,136,.08); overflow: hidden; }
.analysis-card > header { min-height: 86px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.analysis-card > header > div { display: flex; align-items: center; gap: 13px; }
.analysis-card header small { display: block; color: var(--muted); font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; }
.analysis-card h2 { margin: 2px 0 0; color: var(--ink); font: 600 25px 'Oswald', sans-serif; text-transform: uppercase; }
.card-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: #edf2ff; color: var(--lime); font: 700 13px 'Oswald', sans-serif; }
.american-badge, .season-badge { padding: 7px 9px; border-radius: 5px; background: #f2f5fc; color: #637194; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }

.odds-table { padding: 4px 22px 22px; }
.odds-row { min-height: 82px; display: grid; grid-template-columns: 1.25fr .85fr .85fr; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.odds-row:last-child { border-bottom: 0; }
.odds-row > span:not(:first-child) { min-height: 48px; padding: 7px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 7px; background: #f6f8fd; text-align: center; }
.odds-row > span:first-child b, .odds-row > span:first-child small { display: block; }
.odds-row > span:first-child b { color: var(--ink); font-size: 13px; }
.odds-row > span:first-child small { color: var(--muted); font-size: 9px; }
.odds-row span b { font-size: 12px; }
.odds-row span em { color: var(--lime); font-size: 11px; font-style: normal; font-weight: 700; }
.odds-row .odd-value { color: var(--ink); font: 600 20px 'Oswald', sans-serif; }
.odds-row .odd-value.featured { background: var(--lime); color: #fff; box-shadow: 0 8px 18px rgba(20,75,215,.18); }
.odds-row.odds-header { min-height: 42px; color: #8591ac; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.odds-row.odds-header > span { min-height: 0; padding: 0; background: transparent; }
.odds-row.odds-header > span:first-child { text-align: left; }
.odds-source { margin: -10px 22px 20px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 7px; background: #f2f6ff; color: #315aa9; font-size: 9px; font-weight: 700; letter-spacing: .55px; text-decoration: none; text-transform: uppercase; }
.odds-source:hover { background: #e7efff; color: var(--lime); }
.odds-source span { font-size: 14px; }

.stats-scroll { min-width: 0; padding: 4px 18px 22px; overflow: hidden; }
.stats-table { width: 100%; min-width: 0; }
.stats-row { min-height: 66px; display: grid; align-items: center; border-bottom: 1px solid var(--line); }
.main-stats .stats-row { grid-template-columns: minmax(74px, 1.25fr) repeat(3, minmax(30px, .55fr)) minmax(58px, .85fr) minmax(62px, .95fr); }
.ats-stats .stats-row { grid-template-columns: minmax(74px, 1.2fr) repeat(3, minmax(46px, .72fr)) minmax(70px, 1fr); }
.stats-row > span { min-width: 0; padding: 0 3px; text-align: center; overflow-wrap: anywhere; color: #263a67; font-size: 11px; }
.stats-row > span:first-child { text-align: left; }
.stats-header { min-height: 42px; }
.stats-header span { color: #8591ac; font-size: 8px; letter-spacing: .75px; text-transform: uppercase; }
.team-stats-row > span:first-child { display: flex; align-items: center; gap: 9px; }
.team-stats-row img { width: 32px; height: 32px; object-fit: contain; }
.team-stats-row b { font: 600 13px 'Oswald', sans-serif; }
.ats-title { margin-top: 20px; padding: 14px 0 8px; display: flex; align-items: baseline; gap: 10px; color: var(--ink); border-top: 2px solid #edf1f8; }
.ats-title span { color: var(--lime); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.ats-title strong { font: 600 16px 'Oswald', sans-serif; text-transform: uppercase; }
.ats-record { color: var(--lime) !important; font: 600 14px 'Oswald', sans-serif !important; white-space: nowrap; }

.h2h-card { width: 100%; margin-top: 18px; }
.h2h-table { padding: 4px 22px 22px; }
.h2h-row { min-height: 64px; display: grid; grid-template-columns: 92px minmax(105px, 1.15fr) minmax(120px, 1.25fr) minmax(72px, .8fr) minmax(64px, .72fr) minmax(94px, 1fr) minmax(62px, .68fr); align-items: center; border-bottom: 1px solid var(--line); }
.h2h-row:last-child { border-bottom: 0; }
.h2h-row > span { min-width: 0; padding: 8px 7px; color: #263a67; font-size: 11px; text-align: center; overflow-wrap: anywhere; }
.h2h-row > span:first-child, .h2h-row > span:nth-child(2) { text-align: left; }
.h2h-row b { color: var(--ink); font: 600 13px 'Oswald', sans-serif; }
.h2h-header { min-height: 42px; }
.h2h-header > span { color: #8591ac; font-size: 8px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.h2h-empty { min-height: 110px; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: 12px; text-align: center; }
.card-source { margin: -8px 22px 20px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 7px; background: #f2f6ff; color: #315aa9; font-size: 9px; font-weight: 700; letter-spacing: .55px; text-decoration: none; text-transform: uppercase; }
.card-source:hover { background: #e7efff; color: var(--lime); }
.card-source span { font-size: 14px; }

.qb-card { width: 100%; margin-top: 18px; }
.qb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-profile { min-width: 0; padding: 22px; }
.qb-profile + .qb-profile { border-left: 1px solid var(--line); }
.qb-identity { min-height: 76px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.qb-identity > img { width: 62px; height: 62px; padding: 7px; object-fit: contain; border-radius: 14px; background: #f3f6fd; }
.qb-identity small, .qb-identity h3, .qb-identity div > span { display: block; }
.qb-identity small { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.qb-identity h3 { margin: 3px 0 4px; color: var(--ink); font: 600 22px 'Oswald', sans-serif; text-transform: uppercase; }
.qb-identity div > span { color: var(--muted); font-size: 10px; }
.qb-status { padding: 7px 9px; border-radius: 18px; font-size: 8px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; text-transform: uppercase; }
.qb-status b { width: 14px; height: 14px; margin-right: 3px; display: inline-grid; place-items: center; border-radius: 50%; }
.qb-status.available { background: #e8f7ef; color: #137a42; border: 1px solid #bde9ce; }
.qb-status.injured { background: #fff4dc; color: #a65c00; border: 1px solid #ffd894; }
.qb-status.out { background: #fff0f0; color: #b42318; border: 1px solid #ffc8c5; }
.qb-status.unknown { background: #f2f5fc; color: #637194; border: 1px solid #dce3f1; }
.qb-note { min-height: 30px; margin: 12px 0 8px; color: #61708f; font-size: 10px; line-height: 1.45; }
.qb-roster { margin: 10px 0 16px; padding: 12px; border-radius: 9px; background: #f7f9fe; border: 1px solid #e6ebf5; }
.qb-roster > strong { display: block; margin-bottom: 7px; color: #6b7896; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
.qb-roster-list { display: grid; gap: 5px; }
.qb-roster-player { min-height: 32px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; background: #fff; border: 1px solid #edf1f8; }
.qb-roster-player b { min-width: 0; color: var(--ink); font-size: 11px; overflow-wrap: anywhere; }
.qb-number { color: var(--lime); font: 600 11px 'Oswald', sans-serif; }
.qb-role { padding: 4px 6px; border-radius: 12px; font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .35px; white-space: nowrap; text-transform: uppercase; }
.qb-role.starter { background: #e8efff; color: #144bd7; border: 1px solid #bfd0ff; }
.qb-role.starter i { width: 12px; height: 12px; display: inline-grid; place-items: center; border-radius: 50%; background: #144bd7; color: #fff; font-size: 8px; font-style: normal; }
.qb-role.backup { background: #f2f5fc; color: #6a7691; }
.qb-health { padding: 4px 6px; border-radius: 12px; font-size: 7px; font-weight: 800; white-space: nowrap; text-transform: uppercase; }
.qb-health i { font-style: normal; }
.qb-health.injured { background: #fff4dc; color: #a65c00; border: 1px solid #ffd894; }
.qb-health.out { background: #fff0f0; color: #b42318; border: 1px solid #ffc8c5; }
.qb-roster-empty { color: var(--muted); font-size: 10px; }
.qb-stats-table { min-width: 0; border-top: 2px solid #edf1f8; }
.qb-stats-row { min-height: 56px; display: grid; grid-template-columns: minmax(82px, 1.2fr) repeat(3, minmax(22px, .32fr)) minmax(42px, .62fr) minmax(32px, .46fr) minmax(62px, .84fr) repeat(2, minmax(42px, .58fr)) minmax(38px, .54fr); align-items: center; border-bottom: 1px solid var(--line); }
.qb-stats-row:last-child { border-bottom: 0; }
.qb-stats-row > span { min-width: 0; padding: 6px 3px; color: #263a67; font-size: 10px; text-align: center; overflow-wrap: anywhere; }
.qb-stats-row > span:first-child { text-align: left; }
.qb-stats-row > span:first-child b, .qb-stats-row > span:first-child small { display: block; }
.qb-stats-row > span:first-child b { color: var(--ink); font: 600 13px 'Oswald', sans-serif; }
.qb-stats-row > span:first-child small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.qb-average-stat { white-space: nowrap; font-size: 9px !important; }
.qb-stats-header { min-height: 38px; }
.qb-stats-header > span { color: #8591ac; font-size: 7px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
.qb-no-data { min-height: 76px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }

.injuries-card { width: 100%; margin-top: 18px; }
.injury-filter-badge { padding: 7px 11px; border: 1px solid #bdd0ff; border-radius: 999px; background: #edf3ff; color: #144bd7; font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.injuries-grid { padding: 18px 22px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.injured-starter { min-width: 0; padding: 14px; display: grid; grid-template-columns: minmax(150px, 1.3fr) auto minmax(90px, .65fr); align-items: center; gap: 10px 12px; border: 1px solid #e3e9f5; border-radius: 10px; background: #fbfcff; }
.injured-player-team { min-width: 0; display: flex; align-items: center; gap: 10px; }
.injured-player-team img { width: 42px; height: 42px; padding: 4px; flex: 0 0 auto; object-fit: contain; border-radius: 9px; background: #f1f5fd; }
.injured-player-team span, .injured-player-team small, .injured-player-team strong { min-width: 0; display: block; }
.injured-player-team small { color: var(--lime); font-size: 7px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.injured-player-team strong { margin-top: 3px; color: var(--ink); font: 600 17px 'Oswald', sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.injury-status { padding: 6px 8px; border-radius: 999px; font-size: 7px; font-weight: 800; letter-spacing: .45px; white-space: nowrap; text-transform: uppercase; }
.injury-status.questionable { border: 1px solid #ffd894; background: #fff4dc; color: #9a5704; }
.injury-status.out { border: 1px solid #ffc8c5; background: #fff0f0; color: #b42318; }
.injury-detail small, .injury-detail strong { display: block; }
.injury-detail small { color: #8a95ae; font-size: 7px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.injury-detail strong { margin-top: 3px; color: #34476f; font-size: 10px; }
.injured-starter > p { grid-column: 1 / -1; margin: 0; padding-top: 9px; border-top: 1px solid #e9edf6; color: #65728f; font-size: 9px; line-height: 1.45; }
.injuries-empty { min-height: 124px; margin: 18px 22px 12px; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px dashed #a9dfbd; border-radius: 10px; background: #f1fbf5; text-align: left; }
.injuries-empty > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #20a464; color: #fff; font-size: 18px; font-weight: 800; }
.injuries-empty strong { display: block; color: #11743d; font: 600 16px 'Oswald', sans-serif; text-transform: uppercase; }
.injuries-empty p { max-width: 630px; margin: 4px 0 0; color: #567360; font-size: 9px; line-height: 1.45; }
.injury-method { margin: 0; padding: 0 22px 14px; color: #78849e; font-size: 8px; line-height: 1.5; }
.injury-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.unit-card { width: 100%; margin-top: 18px; }
.unit-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unit-panel { min-width: 0; padding: 22px; }
.unit-panel + .unit-panel { border-left: 1px solid var(--line); }
.unit-panel-heading { margin-bottom: 12px; }
.unit-panel-heading small { display: block; color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.unit-panel-heading h3 { margin: 3px 0 0; color: var(--ink); font: 600 19px 'Oswald', sans-serif; text-transform: uppercase; }
.unit-panel-heading h3 em { color: #ff8b1f; font-style: normal; }
.unit-table { min-width: 0; border-top: 2px solid #edf1f8; }
.unit-row { min-height: 62px; display: grid; grid-template-columns: minmax(126px, 1.35fr) repeat(2, minmax(72px, .72fr)); align-items: center; border-bottom: 1px solid var(--line); }
.unit-row:last-child { border-bottom: 0; }
.unit-row > span, .unit-row > strong { min-width: 0; padding: 8px 5px; }
.unit-row > span:first-child b, .unit-row > span:first-child small { display: block; }
.unit-row > span:first-child b { color: var(--ink); font-size: 11px; }
.unit-row > span:first-child small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.unit-row > strong { color: var(--ink); font: 600 18px 'Oswald', sans-serif; text-align: center; }
.unit-row > strong:nth-child(2) { color: var(--lime); }
.unit-row > strong:nth-child(3) { color: #d56708; }
.unit-row > strong.unit-best { margin: 5px 3px; padding: 10px 5px; border: 1px solid #a9dfbd; border-radius: 8px; background: #e7f7ed; color: #11743d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.unit-header { min-height: 64px; }
.unit-header > span:first-child { color: #8591ac; font-size: 8px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.unit-header > span:not(:first-child) { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 0 7px; text-align: left; }
.unit-header img { width: 28px; height: 28px; grid-row: 1 / 3; object-fit: contain; }
.unit-header b { color: var(--ink); font: 600 12px 'Oswald', sans-serif; }
.unit-header small { color: var(--muted); font-size: 6px; letter-spacing: .3px; text-transform: uppercase; }
.unit-sources { padding: 0 22px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.unit-sources .card-source { margin: 0; }

.projection-card { width: 100%; margin-top: 18px; }
.betting-projection { padding: 22px; background: linear-gradient(135deg, #f7f9ff 0%, #edf3ff 100%); border-bottom: 1px solid var(--line); }
.projection-section-title small { display: block; color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.projection-section-title h3 { margin: 3px 0 0; color: var(--ink); font: 600 21px 'Oswald', sans-serif; text-transform: uppercase; }
.projection-section-title p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.projected-score-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.projected-team { min-width: 0; min-height: 76px; padding: 12px 16px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #dce5f7; border-radius: 10px; background: #fff; }
.projected-team.favorite { border-color: #a9dfbd; background: #e7f7ed; box-shadow: 0 8px 22px rgba(18,116,61,.08); }
.projected-team img { width: 46px; height: 46px; padding: 4px; object-fit: contain; }
.projected-team small, .projected-team div > strong { display: block; }
.projected-team small { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.projected-team div > strong { margin-top: 3px; color: var(--ink); font: 600 17px 'Oswald', sans-serif; }
.projected-team > b { color: var(--ink); font: 700 32px 'Oswald', sans-serif; }
.projected-team.favorite > b { color: #11743d; }
.performance-projection { padding: 22px; }
.performance-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.performance-item { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfe; }
.performance-item h4 { margin: 0 0 10px; color: var(--ink); font-size: 11px; text-transform: uppercase; }
.performance-item h4 em { color: #ff8b1f; font-style: normal; }
.performance-values { min-width: 0; display: grid; grid-template-columns: minmax(66px, 1fr) 22px minmax(66px, 1fr) minmax(68px, .8fr); align-items: stretch; gap: 7px; }
.performance-values > i { align-self: center; color: #ff8b1f; font: 700 9px 'Oswald', sans-serif; text-align: center; }
.performance-side, .performance-total { min-width: 0; min-height: 76px; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e8f4; border-radius: 8px; background: #fff; text-align: center; }
.performance-side small, .performance-total small { color: var(--muted); font-size: 6px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
.performance-side strong, .performance-total strong { margin: 3px 0; color: var(--ink); font: 700 23px 'Oswald', sans-serif; }
.performance-total > b { min-height: 16px; padding: 3px 5px; border-radius: 9px; font-size: 6px; letter-spacing: .45px; line-height: 10px; text-transform: uppercase; }
.performance-total { border-color: #c7d7fb; background: #edf3ff; }
.performance-total strong { color: var(--lime); }
.performance-total > b.total-over { background: #e7f7ed; color: #11743d; }
.performance-total > b.total-under { background: #fff1df; color: #a85b05; }
.performance-total > b.total-push { background: #f0f2f7; color: #68758f; }
.performance-total > b.total-nd { background: #f0f2f7; color: #68758f; }
.performance-item.featured { border-color: #c7d7fb; background: #f1f5ff; }
.projection-donut-summary { margin-top: 16px; padding: 18px 22px; display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 24px; border: 1px solid #dce5f7; border-radius: 12px; background: linear-gradient(135deg, #f7f9ff 0%, #edf3ff 100%); }
.projection-donut { --over-percent: 0%; width: 148px; aspect-ratio: 1; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(#20a464 0 var(--over-percent), #ff941f var(--over-percent) 100%); box-shadow: 0 12px 28px rgba(27,62,130,.12); }
.projection-donut::before { content: ''; width: 94px; aspect-ratio: 1; position: absolute; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #e2e8f4; }
.projection-donut.empty { background: #dfe5ef; }
.projection-donut > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.projection-donut > div strong { color: var(--ink); font: 700 29px 'Oswald', sans-serif; line-height: 1; }
.projection-donut > div small { margin-top: 4px; color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.projection-donut-copy > small { color: var(--lime); font-size: 7px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.projection-donut-copy h4 { margin: 4px 0 12px; color: var(--ink); font: 600 20px 'Oswald', sans-serif; text-transform: uppercase; }
.projection-donut-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.projection-donut-legend > span { min-width: 0; padding: 10px 12px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid #dce5f7; border-radius: 8px; background: #fff; }
.projection-donut-legend i { width: 8px; height: 8px; border-radius: 50%; }
.projection-donut-legend .over i { background: #20a464; }
.projection-donut-legend .under i { background: #ff941f; }
.projection-donut-legend small { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.projection-donut-legend strong { color: var(--ink); font: 700 22px 'Oswald', sans-serif; }
.projection-donut-legend b { grid-column: 2 / 4; color: var(--muted); font-size: 7px; font-weight: 600; }

.expert-picks-card { width: 100%; margin-top: 18px; }
.expert-picks-intro { padding: 15px 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #f7f9ff 0%, #edf3ff 100%); }
.expert-picks-intro strong, .expert-picks-intro span { display: block; }
.expert-picks-intro strong { color: var(--ink); font: 600 17px 'Oswald', sans-serif; text-transform: uppercase; }
.expert-picks-intro span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.expert-picks-intro > small { flex: 0 0 auto; color: #6f7d98; font-size: 7px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
.expert-picks-table { padding: 14px 22px 4px; }
.expert-pick-row { min-width: 0; display: grid; grid-template-columns: 28px minmax(160px, 1.35fr) minmax(120px, 1fr) minmax(120px, 1fr); align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.expert-pick-row:last-child { border-bottom: 0; }
.expert-pick-header { min-height: 28px; padding-top: 0; color: #8591ac; font-size: 7px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.expert-index { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #edf3ff; color: var(--lime); font: 700 11px 'Oswald', sans-serif; }
.expert-identity { min-width: 0; }
.expert-identity strong, .expert-identity a { display: block; overflow-wrap: anywhere; }
.expert-identity strong { color: var(--ink); font-size: 10px; }
.expert-identity a { width: fit-content; margin-top: 2px; color: var(--lime); font-size: 8px; font-weight: 700; text-decoration: none; }
.expert-identity a:hover { text-decoration: underline; }
.expert-identity a b { color: #ff8b1f; }
.expert-selection { min-width: 0; min-height: 45px; padding: 7px 10px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #dce5f7; border-radius: 8px; background: #fafbfe; }
.expert-selection small { font-size: 6px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.expert-selection strong { margin-top: 2px; color: var(--ink); font: 600 14px 'Oswald', sans-serif; overflow-wrap: anywhere; }
.expert-selection.home-pick { border-color: #b8cbf7; background: #edf3ff; }
.expert-selection.home-pick small { color: #1d4ed8; }
.expert-selection.away-pick { border-color: #ffd6ad; background: #fff6eb; }
.expert-selection.away-pick small { color: #c66508; }
.expert-selection.over-pick { border-color: #a9dfbd; background: #e7f7ed; }
.expert-selection.over-pick small { color: #11743d; }
.expert-selection.under-pick { border-color: #ffd6ad; background: #fff1df; }
.expert-selection.under-pick small { color: #a85b05; }
.expert-selection.no-pick { border-style: dashed; background: #f4f6fa; }
.expert-selection.no-pick small, .expert-selection.no-pick strong { color: #7a879f; }
.expert-consensus-grid { padding: 18px 22px 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.expert-consensus-panel { min-width: 0; padding: 16px; display: grid; grid-template-columns: 126px minmax(0, 1fr); align-items: center; gap: 16px; border: 1px solid #dce5f7; border-radius: 12px; background: linear-gradient(135deg, #f7f9ff 0%, #edf3ff 100%); }
.expert-donut { --first-percent: 0%; width: 126px; aspect-ratio: 1; display: grid; place-items: center; position: relative; border-radius: 50%; box-shadow: 0 12px 28px rgba(27,62,130,.12); }
.expert-donut.ats-donut { background: conic-gradient(#1d4ed8 0 var(--first-percent), #ff941f var(--first-percent) 100%); }
.expert-donut.total-donut { background: conic-gradient(#20a464 0 var(--first-percent), #ff941f var(--first-percent) 100%); }
.expert-donut::before { content: ''; width: 80px; aspect-ratio: 1; position: absolute; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #e2e8f4; }
.expert-donut > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.expert-donut strong { color: var(--ink); font: 700 27px 'Oswald', sans-serif; line-height: 1; }
.expert-donut small { margin-top: 3px; color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.expert-consensus-copy > small { color: var(--lime); font-size: 7px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.expert-consensus-copy h3 { margin: 3px 0 10px; color: var(--ink); font: 600 18px 'Oswald', sans-serif; text-transform: uppercase; }
.expert-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.expert-legend > span { min-width: 0; padding: 8px; display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: center; gap: 4px 6px; border: 1px solid #dce5f7; border-radius: 8px; background: #fff; }
.expert-legend i { width: 7px; height: 7px; border-radius: 50%; }
.expert-legend .home i { background: #1d4ed8; }
.expert-legend .away i, .expert-legend .under i { background: #ff941f; }
.expert-legend .over i { background: #20a464; }
.expert-legend small { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; overflow-wrap: anywhere; }
.expert-legend strong { grid-column: 1 / -1; color: var(--ink); font: 700 20px 'Oswald', sans-serif; }
.expert-legend b { grid-column: 1 / -1; color: var(--muted); font-size: 7px; }
.expert-disclaimer { margin: 0; padding: 6px 22px 18px; color: var(--muted); font-size: 8px; }
.expert-picks-empty { margin: 18px 22px; padding: 24px; border: 1px dashed #c9d4e8; border-radius: 10px; color: var(--muted); font-size: 11px; text-align: center; }

.result-card, .ai-reflection-card, .optimized-prediction-card { width: 100%; margin-top: 18px; }
.final-badge, .learning-badge { padding: 6px 10px; border-radius: 999px; background: #e7f7ed; color: #11743d; font-size: 7px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.final-scoreboard { padding: 18px 22px; display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; gap: 14px; background: linear-gradient(135deg, #0f3ea8 0%, #1d4ed8 100%); color: #fff; }
.final-scoreboard > div { min-width: 0; display: flex; align-items: center; gap: 12px; }
.final-scoreboard > div.home { justify-content: flex-end; text-align: right; }
.final-scoreboard img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0,0,0,.2)); }
.final-scoreboard span small, .final-scoreboard span strong { display: block; }
.final-scoreboard span small { opacity: .72; font-size: 7px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.final-scoreboard span strong { margin-top: 2px; font: 600 22px 'Oswald', sans-serif; }
.final-scoreboard > div > b { margin-left: auto; font: 700 54px/1 'Oswald', sans-serif; }
.final-scoreboard > div.home > b { order: -1; margin: 0 auto 0 0; }
.final-scoreboard > em { padding: 7px 8px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: 1px; text-align: center; }
.actual-market-summary { padding: 12px 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; border-bottom: 1px solid var(--line); background: #f7f9ff; }
.actual-market-summary > span { min-width: 0; padding: 9px 11px; border: 1px solid #dce5f7; border-radius: 9px; background: #fff; }
.actual-market-summary small, .actual-market-summary strong { display: block; overflow-wrap: anywhere; }
.actual-market-summary small { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.actual-market-summary strong { margin-top: 3px; color: var(--ink); font: 600 16px 'Oswald', sans-serif; text-transform: uppercase; }
.prediction-comparison-grid { padding: 16px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.prediction-comparison { min-width: 0; padding: 12px; border: 1px solid #dce5f7; border-radius: 10px; background: #fff; }
.prediction-comparison.combined { border-color: #9db7f1; background: #f3f7ff; box-shadow: inset 0 3px 0 var(--lime); }
.comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.comparison-heading strong { color: var(--ink); font: 600 15px 'Oswald', sans-serif; text-transform: uppercase; }
.comparison-heading span { padding: 3px 6px; border-radius: 999px; background: #e8efff; color: var(--lime); font-size: 7px; font-weight: 800; white-space: nowrap; }
.prediction-comparison p { margin: 8px 0; color: var(--ink); font: 700 19px 'Oswald', sans-serif; text-align: center; }
.comparison-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.comparison-checks span { min-width: 0; padding: 5px 3px; border-radius: 6px; font-size: 6px; font-weight: 800; text-align: center; text-transform: uppercase; }
.comparison-checks i { font-style: normal; }
.comparison-checks .hit { background: #e7f7ed; color: #11743d; }
.comparison-checks .miss { background: #fff0ef; color: #bd2d24; }
.comparison-checks .push { background: #f0f2f6; color: #68748b; }
.prediction-comparison > small { display: block; margin-top: 8px; color: var(--muted); font-size: 7px; text-align: center; }
.prediction-comparison > small b { color: var(--ink); }
.result-source { margin: 0 22px 16px; }
.reflection-number { width: 50px; font-size: 10px; }
.ai-reflection-card .learning-badge { background: #fff1df; color: #a85b05; }
.reflection-layout { padding: 18px 22px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.reflection-copy { min-width: 0; }
.reflection-kicker { color: #ff8b1f; font-size: 7px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.reflection-copy h3 { margin: 5px 0 8px; color: var(--ink); font: 600 22px 'Oswald', sans-serif; text-transform: uppercase; }
.reflection-copy > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.learning-adjustment { margin-top: 13px; padding: 11px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; border: 1px solid #a9dfbd; border-radius: 9px; background: #e7f7ed; }
.learning-adjustment > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #20a464; color: #fff; font-style: normal; font-weight: 900; }
.learning-adjustment small, .learning-adjustment strong { display: block; }
.learning-adjustment small { color: #11743d; font-size: 6px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.learning-adjustment strong { margin-top: 3px; color: #174e31; font-size: 8px; line-height: 1.45; }
.accuracy-evolution { min-width: 0; padding: 13px; border: 1px solid #dce5f7; border-radius: 10px; background: #f7f9ff; }
.accuracy-title { display: flex; align-items: center; justify-content: center; gap: 15px; }
.accuracy-title span { text-align: center; }
.accuracy-title small, .accuracy-title b { display: block; }
.accuracy-title small { color: var(--muted); font-size: 6px; font-weight: 800; text-transform: uppercase; }
.accuracy-title b { color: var(--ink); font: 700 24px 'Oswald', sans-serif; }
.accuracy-title > i { color: #ff8b1f; font-style: normal; font-size: 19px; }
.accuracy-bars { height: 100px; margin-top: 8px; padding: 4px 3px 0; display: flex; align-items: flex-end; gap: 5px; border-bottom: 1px solid #c9d4e8; }
.accuracy-bars > div { min-width: 0; height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.accuracy-bars > div > i { width: min(22px, 72%); max-height: 72px; display: block; border-radius: 4px 4px 0 0; background: linear-gradient(#1d4ed8, #0f3ea8); }
.accuracy-bars small { color: var(--muted); font-size: 5px; font-weight: 800; }
.accuracy-bars b { color: var(--ink); font-size: 6px; }
.accuracy-evolution > p { margin: 8px 0 0; color: var(--muted); font-size: 6px; line-height: 1.4; text-align: center; }
.optimized-intro { padding: 14px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #f2f6ff, #fff7ec); }
.optimized-intro > div span, .optimized-intro > div strong { display: block; }
.optimized-intro > div span { color: #ff8b1f; font-size: 6px; font-weight: 900; letter-spacing: .8px; }
.optimized-intro > div strong { margin-top: 2px; color: var(--ink); font: 600 20px 'Oswald', sans-serif; text-transform: uppercase; }
.optimized-intro p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.optimized-periods { padding: 18px 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.optimized-periods > section { min-width: 0; padding: 13px; border: 1px solid #dce5f7; border-radius: 11px; background: #fff; }
.optimized-periods > section.full-game { border-color: #9db7f1; background: #f3f7ff; box-shadow: inset 0 3px 0 var(--lime); }
.optimized-periods > section > small { color: #ff8b1f; font-size: 7px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.optimized-period-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.optimized-period-header span { color: #ff8b1f; font-size: 7px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.optimized-period-header b { padding: 4px 6px; border-radius: 999px; background: #edf3ff; color: var(--lime); font-size: 6px; letter-spacing: .35px; text-transform: uppercase; }
.optimized-period-total { margin-top: 8px; padding: 7px 8px; display: flex; align-items: center; justify-content: space-between; border-radius: 7px; background: #edf3ff; }
.optimized-period-total span { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.optimized-period-total b { color: var(--ink); font: 700 18px 'Oswald', sans-serif; }
.optimized-score { margin-top: 9px; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 4px; }
.optimized-score > span { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 1px 5px; }
.optimized-score img { width: 25px; height: 25px; grid-row: 1 / 3; object-fit: contain; }
.optimized-score b { color: var(--muted); font-size: 7px; }
.optimized-score strong { color: var(--ink); font: 700 24px 'Oswald', sans-serif; }
.optimized-score > i { color: #ff8b1f; font-style: normal; text-align: center; }
.optimized-picks { margin-top: 9px; display: grid; gap: 5px; }
.optimized-picks span { min-width: 0; padding: 7px 8px; border-radius: 7px; background: #f3f5f9; overflow-wrap: anywhere; }
.optimized-picks small, .optimized-picks strong { display: block; }
.optimized-picks small { color: var(--muted); font-size: 5px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.optimized-picks strong { margin-top: 2px; color: var(--ink); font-size: 7px; font-weight: 800; }
.optimized-confidence { padding: 0 22px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.optimized-confidence > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.optimized-confidence small { color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.optimized-confidence b { color: var(--ink); font: 700 17px 'Oswald', sans-serif; }
.optimized-confidence i { --confidence: 0%; height: 5px; grid-column: 1 / -1; border-radius: 999px; background: #dce4f3; overflow: hidden; }
.optimized-confidence i em { width: var(--confidence); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #1d4ed8, #20a464); }

.ai-predictions-card { width: 100%; margin-top: 18px; }
.ai-badge { padding: 6px 10px; border-radius: 999px; background: #e8efff; color: var(--lime); font-size: 7px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.ai-predictions-intro { padding: 15px 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #f7f9ff 0%, #edf3ff 100%); }
.ai-predictions-intro strong, .ai-predictions-intro span { display: block; }
.ai-predictions-intro strong { color: var(--ink); font: 600 17px 'Oswald', sans-serif; text-transform: uppercase; }
.ai-predictions-intro span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.ai-predictions-intro > small { color: #6f7d98; font-size: 7px; font-weight: 700; letter-spacing: .45px; text-align: right; text-transform: uppercase; }
.ai-predictions-grid { padding: 18px 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai-prediction { min-width: 0; padding: 15px; border: 1px solid #d6e0f3; border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(29,64,136,.06); }
.ai-prediction-heading { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 10px; }
.ai-prediction-heading > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: #fff; font: 700 13px 'Oswald', sans-serif; box-shadow: 0 8px 18px rgba(20,75,215,.2); }
.ai-prediction-heading small { color: #ff8b1f; font-size: 6px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.ai-prediction-heading h3 { margin: 2px 0 0; color: var(--ink); font: 600 18px 'Oswald', sans-serif; text-transform: uppercase; }
.ai-method { min-height: 42px; margin: 11px 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.ai-scoreboard { padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 4px; border: 1px solid #dce5f7; border-radius: 10px; background: #f6f9ff; }
.ai-scoreboard > div { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; }
.ai-scoreboard img { width: 28px; height: 28px; grid-row: 1 / 3; object-fit: contain; }
.ai-scoreboard small { color: var(--muted); font-size: 6px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
.ai-scoreboard strong { min-width: 0; color: var(--ink); font: 600 12px 'Oswald', sans-serif; overflow-wrap: anywhere; }
.ai-scoreboard > div > b { grid-column: 3; grid-row: 1 / 3; color: var(--lime); font: 700 27px 'Oswald', sans-serif; }
.ai-scoreboard > span { display: flex; flex-direction: column; align-items: center; color: #ff8b1f; }
.ai-scoreboard > span small { font-size: 5px; text-align: center; }
.ai-scoreboard > span b { font: 700 14px 'Oswald', sans-serif; }
.ai-market-results { margin-top: 10px; display: grid; gap: 8px; }
.ai-market-result { min-width: 0; padding: 9px 10px 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid #dce5f7; border-radius: 9px; background: #fafbfe; }
.ai-market-result > div { min-width: 0; }
.ai-market-result small, .ai-market-result strong { display: block; }
.ai-market-result > div small { color: var(--muted); font-size: 6px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; overflow-wrap: anywhere; }
.ai-market-result > div strong { margin-top: 3px; color: var(--ink); font: 600 12px 'Oswald', sans-serif; overflow-wrap: anywhere; }
.ai-market-result > span { min-width: 54px; text-align: right; }
.ai-market-result > span b { display: block; color: var(--ink); font: 700 20px 'Oswald', sans-serif; }
.ai-market-result > span small { color: var(--muted); font-size: 5px; font-weight: 700; text-transform: uppercase; }
.ai-market-result > i { --confidence: 0%; height: 4px; grid-column: 1 / -1; border-radius: 999px; background: #dce4f3; overflow: hidden; }
.ai-market-result > i > b { width: var(--confidence); height: 100%; display: block; border-radius: inherit; background: var(--lime); }
.ai-market-result.market-home { border-color: #b8cbf7; background: #edf3ff; }
.ai-market-result.market-away { border-color: #ffd6ad; background: #fff6eb; }
.ai-market-result.market-over { border-color: #a9dfbd; background: #e7f7ed; }
.ai-market-result.market-over > i > b { background: #20a464; }
.ai-market-result.market-under { border-color: #ffd6ad; background: #fff1df; }
.ai-market-result.market-under > i > b { background: #ff941f; }
.ai-market-result.market-push, .ai-market-result.market-nd { border-style: dashed; background: #f4f6fa; }
.ai-market-result.market-push > i > b, .ai-market-result.market-nd > i > b { background: #8490a7; }
.ai-data-note { min-height: 54px; margin-top: 10px; padding: 8px 9px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 7px; border-radius: 8px; }
.ai-data-note > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 800; }
.ai-data-note p { margin: 0; color: var(--muted); font-size: 7px; line-height: 1.4; }
.ai-data-note p strong { display: block; margin-bottom: 2px; font-size: 7px; letter-spacing: .4px; text-transform: uppercase; }
.ai-data-note.complete { background: #e9f7ef; }
.ai-data-note.complete > span { background: #20a464; color: #fff; }
.ai-data-note.complete p strong { color: #11743d; }
.ai-data-note.limited { background: #fff4e6; }
.ai-data-note.limited > span { background: #ff941f; color: #fff; }
.ai-data-note.limited p strong { color: #a85b05; }
.ai-disclaimer { margin: 0; padding: 0 22px 18px; color: var(--muted); font-size: 8px; }
.half-predictions-card { width: 100%; margin-top: 18px; }
.half-predictions-intro { padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: #f7f9ff; }
.half-predictions-intro strong { color: var(--ink); font: 600 16px 'Oswald', sans-serif; text-transform: uppercase; }
.half-predictions-intro span { max-width: 720px; color: var(--muted); font-size: 8px; line-height: 1.45; text-align: right; }
.half-predictions-grid { padding: 18px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.half-prediction { min-width: 0; padding: 13px; border: 1px solid #d6e0f3; border-radius: 11px; background: #fff; box-shadow: 0 8px 22px rgba(29,64,136,.05); }
.half-prediction.combined { border-color: #9db7f1; background: linear-gradient(145deg, #f3f7ff, #fff); box-shadow: inset 0 3px 0 var(--lime), 0 10px 24px rgba(29,64,136,.09); }
.half-heading { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.half-heading > span { color: var(--ink); font: 600 16px 'Oswald', sans-serif; text-transform: uppercase; }
.half-heading > b { padding: 4px 7px; border-radius: 999px; background: #e8efff; color: var(--lime); font-size: 9px; }
.half-summary { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.half-summary > span { min-width: 0; padding: 7px 8px; border-radius: 8px; background: #f5f7fb; }
.half-summary small, .half-summary strong { display: block; }
.half-summary small { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.half-summary strong { margin-top: 2px; color: var(--ink); font: 700 18px 'Oswald', sans-serif; }
.half-picks { margin-top: 8px; display: grid; gap: 7px; }
.half-picks > div { min-width: 0; padding: 8px 9px; border: 1px solid #dce5f7; border-radius: 8px; background: #fafbfe; }
.half-picks small, .half-picks strong { display: block; overflow-wrap: anywhere; }
.half-picks small { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.half-picks strong { margin-top: 3px; color: var(--ink); font: 600 12px 'Oswald', sans-serif; }
.half-picks .market-home { border-color: #b8cbf7; background: #edf3ff; }
.half-picks .market-away, .half-picks .market-under { border-color: #ffd6ad; background: #fff4e7; }
.half-picks .market-over { border-color: #a9dfbd; background: #e7f7ed; }
.half-picks .market-push, .half-picks .market-nd { border-style: dashed; background: #f4f6fa; }
.second-half-card .card-number { background: #ff941f; }

@media (max-width: 1120px) {
    .learning-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h2h-donut-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .qb-grid { grid-template-columns: 1fr; }
    .qb-profile + .qb-profile { border-left: 0; border-top: 1px solid var(--line); }
    .injuries-grid { grid-template-columns: 1fr; }
    .injury-sources { grid-template-columns: 1fr; }
    .expert-consensus-grid { grid-template-columns: 1fr; }
    .ai-predictions-grid { grid-template-columns: 1fr; }
    .half-predictions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prediction-comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-method, .ai-data-note { min-height: 0; }
}

footer { min-height: 56px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: #71809f; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }
#blazor-error-ui { background: #fff0c8; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); color: #211; display: none; left: 0; padding: .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.pwa-install-button { padding: 9px 14px; border: 1px solid #164bd7; border-radius: 999px; background: #164bd7; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 16px rgba(20,75,215,.18); }.pwa-install-button:hover { background: #0e3cab; }.pwa-install-button[hidden] { display: none; }
.learning-dashboard-button { padding: 9px 14px; border: 1px solid #b8caf3; border-radius: 999px; background: #edf3ff; color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; cursor: pointer; }
.learning-dashboard-button:hover { border-color: var(--lime); background: #fff; }
.h2h-donut-grid { padding: 18px 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); background: #f7f9ff; }
.h2h-donut-card { min-width: 0; padding: 14px; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid #dce5f7; border-radius: 12px; background: #fff; }
.h2h-donut-card .expert-donut { width: 102px; }.h2h-donut-card .expert-donut::before { width: 65px; }
.h2h-donut-card > div:last-child > small { color: #ff8b1f; font-size: 6px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.h2h-donut-card h3 { margin: 3px 0 9px; color: var(--ink); font: 600 16px 'Oswald', sans-serif; text-transform: uppercase; }
.h2h-donut-card p { margin: 5px 0; display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
.h2h-donut-card p span { width: 7px; height: 7px; border-radius: 50%; }.h2h-donut-card p b { color: var(--ink); }
.home-dot { background: #1d4ed8; }.away-dot,.under-dot { background: #ff941f; }.over-dot { background: #20a464; }
.ai-prediction.combined-ai { border-color: #8daaf0; background: linear-gradient(145deg, #edf3ff, #fff); box-shadow: inset 0 3px 0 var(--lime), 0 12px 28px rgba(29,64,136,.12); }
.learning-overlay { position: fixed; inset: 0; z-index: 1100; overflow-y: auto; background: #f4f7fc; }
.learning-live-pill { padding: 7px 10px; border-radius: 999px; background: #e7f7ed; color: #11743d; font-size: 7px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.learning-dashboard { width: min(1380px, calc(100% - 44px)); margin: 0 auto; padding: 28px 0 48px; }
.learning-league-selector { margin-bottom: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.learning-league-selector button { min-width: 0; padding: 15px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; border: 1px solid #ccd8ee; border-radius: 13px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(29,64,136,.06); }
.learning-league-selector button > span { grid-row: 1 / 3; min-width: 62px; padding: 12px 9px; border-radius: 9px; background: #e9effb; color: #174fc9; font: 700 19px 'Oswald', sans-serif; text-align: center; }
.learning-league-selector strong { font: 600 18px 'Oswald', sans-serif; text-transform: uppercase; }.learning-league-selector small { color: var(--muted); font-size: 7px; }
.learning-league-selector button.active { border-color: #174fc9; background: #edf3ff; box-shadow: inset 0 3px 0 #174fc9, 0 10px 28px rgba(23,79,201,.12); }.learning-league-selector button.active > span { background: #174fc9; color: #fff; }
.learning-title-row { padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 15px; background: linear-gradient(135deg, #092a73, #174fc9); color: #fff; box-shadow: 0 18px 42px rgba(9,42,115,.18); }
.learning-title-row span { color: #a9c3ff; font-size: 7px; font-weight: 800; letter-spacing: 1px; }.learning-title-row h1 { margin: 4px 0; font: 600 31px 'Oswald', sans-serif; text-transform: uppercase; }.learning-title-row p { margin: 0; color: #d9e4ff; font-size: 9px; }
.learning-count { min-width: 190px; display: grid; text-align: right; }.learning-count strong { font: 700 42px 'Oswald', sans-serif; line-height: 1; }.learning-count span { color: #fff; }.learning-count small { margin-top: 4px; color: #bfcff3; font-size: 7px; }
.learning-model-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.learning-model-card { min-width: 0; padding: 16px; border: 1px solid #d6e0f3; border-radius: 13px; background: #fff; box-shadow: 0 10px 28px rgba(29,64,136,.07); }
.learning-model-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.learning-model-card header small { color: #ff8b1f; font-size: 6px; font-weight: 800; text-transform: uppercase; }.learning-model-card h2 { margin: 2px 0 0; color: var(--ink); font: 600 18px 'Oswald', sans-serif; text-transform: uppercase; }.learning-model-card header > strong { color: var(--lime); font: 700 27px 'Oswald', sans-serif; }
.learning-sample-total { margin-top: 9px; padding: 6px 8px; border-radius: 7px; color: #31507f; background: #f4f7fd; font-size: 7px; font-weight: 700; text-align: center; text-transform: uppercase; }.learning-sample-total b { color: #164bd7; font: 800 13px 'Oswald', sans-serif; }
.learning-optimized-card { grid-column: span 2; border-color: rgba(20,75,215,.35); background: linear-gradient(145deg, #fff, #f3f7ff); }
.learning-adaptive-status { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #164bd7; border-radius: 8px; background: #eaf1ff; }.learning-adaptive-status span,.learning-adaptive-status b,.learning-adaptive-status small { display: block; }.learning-adaptive-status span { color: #ff7a00; font-size: 7px; font-weight: 900; text-transform: uppercase; }.learning-adaptive-status b { margin-top: 3px; color: #102a58; font: 700 14px 'Oswald', sans-serif; }.learning-adaptive-status small { margin-top: 3px; color: #60708c; font-size: 8px; }
.learning-weight-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.learning-weight-grid span { padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #d9e4f7; text-align: center; }.learning-weight-grid small,.learning-weight-grid b { display: block; }.learning-weight-grid small { color: #60708c; font-size: 7px; }.learning-weight-grid b { margin-top: 2px; color: #164bd7; font: 700 16px 'Oswald', sans-serif; }
.learning-adaptive-bias { grid-template-columns: repeat(2, 1fr); }.learning-adaptive-note { margin: 9px 0 0; color: #60708c; font-size: 8px; line-height: 1.45; }
.learning-market-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.learning-market-grid span { padding: 8px 5px; border-radius: 8px; background: #edf3ff; text-align: center; }.learning-market-grid small,.learning-market-grid b { display: block; }.learning-market-grid small { color: var(--muted); font-size: 6px; text-transform: uppercase; }.learning-market-grid b { margin-top: 2px; color: var(--ink); font: 700 16px 'Oswald', sans-serif; }
.learning-weekly-progress { margin-top: 9px; padding: 9px; border: 1px solid #d9e4f7; border-radius: 9px; background: #f8fbff; }.learning-weekly-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }.learning-weekly-heading span { color: #ff7a00; font-size: 6px; font-weight: 900; text-transform: uppercase; }.learning-weekly-heading b { grid-row: 1 / 3; grid-column: 2; color: #164bd7; font: 700 14px 'Oswald', sans-serif; }.learning-weekly-heading small { color: #60708c; font-size: 6px; }.learning-weekly-markets { margin-top: 7px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.learning-weekly-markets span { min-width: 0; padding: 6px 3px; border-radius: 7px; background: #fff; text-align: center; }.learning-weekly-markets small,.learning-weekly-markets b,.learning-weekly-markets em { display: block; }.learning-weekly-markets small { color: #60708c; font-size: 6px; text-transform: uppercase; }.learning-weekly-markets b { color: #102a58; font: 700 14px 'Oswald', sans-serif; }.learning-weekly-markets em { color: #8b96aa; font-size: 5px; font-style: normal; }.learning-weekly-empty { margin-top: 7px; padding: 7px; border-radius: 7px; background: #fff; color: #7a879e; font-size: 6px; text-align: center; }
.learning-errors,.learning-calibration { margin-top: 9px; display: grid; gap: 5px; }.learning-errors span,.learning-calibration span { display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; }.learning-errors b,.learning-calibration b { color: var(--ink); }.learning-calibration .up { color: #15804a; }.learning-calibration .down { color: #c33b35; }
.learning-windows { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }.learning-windows span { padding: 6px 2px; display: grid; border: 1px solid #e1e7f3; border-radius: 7px; text-align: center; }.learning-windows small { color: var(--muted); font-size: 5px; }.learning-windows b { color: var(--ink); font: 600 13px 'Oswald', sans-serif; }.learning-windows em { color: #8b96aa; font-size: 5px; font-style: normal; }
.learning-conditions { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }.learning-conditions p { margin: 5px 0; color: var(--muted); font-size: 6px; line-height: 1.4; }.learning-conditions p b { display: block; color: var(--ink); text-transform: uppercase; }.learning-empty { grid-column: 1 / -1; padding: 42px; border: 1px dashed #bdc9df; border-radius: 12px; color: var(--muted); text-align: center; }
.learning-governance { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.learning-governance article { padding: 18px; border: 1px solid #d6e0f3; border-radius: 12px; background: #fff; }.learning-governance small { color: #ff8b1f; font-size: 7px; font-weight: 800; text-transform: uppercase; }.learning-governance h3 { margin: 3px 0 10px; color: var(--ink); font: 600 19px 'Oswald', sans-serif; text-transform: uppercase; }.learning-governance p { color: var(--muted); font-size: 8px; line-height: 1.5; }.learning-governance article > strong { color: var(--lime); font-size: 7px; text-transform: uppercase; }.learning-governance article > div { display: flex; gap: 6px; }.learning-governance article > div span { flex: 1; padding: 7px; border-radius: 7px; background: #edf3ff; color: var(--muted); font-size: 6px; text-align: center; }.learning-governance article > div b { display: block; color: var(--ink); font: 700 17px 'Oswald', sans-serif; }
.learning-flow { margin-top: 16px; padding: 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; border-radius: 12px; background: #092a73; }.learning-flow span { padding: 7px 10px; border-radius: 7px; background: #174fc9; color: #fff; font-size: 7px; font-weight: 800; text-transform: uppercase; }.learning-flow i { color: #ff9b33; font-style: normal; }.learning-api-note { margin-top: 10px; color: var(--muted); font-size: 7px; text-align: center; }.learning-api-note code { color: var(--lime); }

@media (max-height: 760px) and (min-width: 801px) {
    .site-header { min-height: 68px; }
    .landing { padding: 18px 0 20px; }
    .hero-copy h1 { font-size: clamp(38px, 5vw, 58px); }
    .hero-copy p { font-size: 14px; }
    .league-grid { margin-top: 18px; }
    .league-card { min-height: 132px; padding: 18px; }
    .league-icon { flex-basis: 68px; height: 68px; font-size: 17px; }
    .league-info strong { margin-bottom: 10px; font-size: 19px; }
    .feature-row { margin-top: 16px; }
    footer { min-height: 48px; }
}

@media (max-width: 800px) {
    .header-actions .live-badge { display: none; }
    .learning-dashboard { width: min(100% - 22px, 1380px); padding-top: 14px; }
    .learning-league-selector { grid-template-columns: 1fr; }
    .learning-title-row { align-items: flex-start; flex-direction: column; padding: 18px; }
    .learning-count { min-width: 0; text-align: left; }
    .learning-model-grid, .learning-governance { grid-template-columns: 1fr; }
    .learning-optimized-card { grid-column: span 1; }
    .h2h-donut-grid { padding-inline: 12px; }
    .h2h-donut-card { grid-template-columns: 94px minmax(0, 1fr); }
    .h2h-donut-card .expert-donut { width: 88px; }
    .h2h-donut-card .expert-donut::before { width: 56px; }
    .site-header, footer, .landing, .schedule-page { width: min(100% - 28px, 1180px); }
    .site-header { min-height: 68px; }
    .landing { padding: 24px 0 28px; }
    .hero-copy h1 { font-size: clamp(36px, 9vw, 48px); }
    .hero-copy p { font-size: 14px; line-height: 1.45; }
    .league-grid { grid-template-columns: 1fr; }
    .league-grid { gap: 12px; margin-top: 22px; }
    .league-card { min-height: 126px; padding: 18px; gap: 16px; }
    .league-icon { flex-basis: 68px; height: 68px; font-size: 17px; }
    .league-info strong { margin: 4px 0 10px; font-size: 19px; }
    .feature-row { display: none; }
    footer { min-height: 50px; }
    .schedule-page { padding-top: 20px; }
    .schedule-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .schedule-heading h1 { font-size: clamp(34px, 8vw, 44px); }
    .date-navigator { margin-top: 14px; margin-bottom: 12px; }
    .game-card, .game-card.finished-game { grid-template-columns: 86px 1fr; }
    .prediction { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
    .matchup { padding: 18px; }
    .finished-game .matchup { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); padding: 14px 16px; }
    .team, .team.home-team { flex-direction: column; text-align: center; }
    .division-strip { align-items: flex-start; }
    .detail-content { width: min(100% - 28px, 1280px); }
    .detail-grid { grid-template-columns: 1fr; }
    .unit-comparison-grid, .unit-sources { grid-template-columns: 1fr; }
    .unit-panel + .unit-panel { border-left: 0; border-top: 1px solid var(--line); }
    .performance-grid { grid-template-columns: 1fr; }
    .detail-teams { grid-template-columns: 1fr 74px 1fr; padding: 30px 5%; }
    .detail-team, .detail-team.home { flex-direction: column; text-align: center; gap: 12px; }
    .detail-team img { width: 90px; height: 90px; }
    .h2h-table { padding-inline: 14px; }
    .h2h-header { display: none; }
    .h2h-row:not(.h2h-header) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px 0; }
    .h2h-row:not(.h2h-header) > span { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 7px; align-items: center; text-align: left; }
    .h2h-row:not(.h2h-header) > span::before { content: attr(data-label); color: #8591ac; font-size: 7px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
    .h2h-row:not(.h2h-header) > span:last-child { grid-column: 1 / -1; }
    .qb-profile { padding: 18px 14px; }
    .injured-starter { grid-template-columns: minmax(0, 1fr) auto; }
    .injury-detail { grid-column: 1 / -1; }
    .injuries-empty { margin-inline: 14px; padding: 18px 14px; }
    .injury-method { padding-inline: 14px; }
    .expert-picks-intro { align-items: flex-start; flex-direction: column; gap: 7px; }
    .expert-pick-row { grid-template-columns: 26px minmax(0, 1fr) minmax(112px, .9fr) minmax(112px, .9fr); }
    .ai-predictions-intro { align-items: flex-start; flex-direction: column; gap: 7px; }
    .ai-predictions-intro > small { text-align: left; }
    .half-predictions-intro { align-items: flex-start; flex-direction: column; gap: 5px; }
    .half-predictions-intro span { text-align: left; }
    .half-predictions-grid { grid-template-columns: 1fr; padding-inline: 14px; }
    .reflection-layout { grid-template-columns: 1fr; }
    .optimized-periods { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .live-badge { display: none; }
    .landing { padding-top: 18px; padding-bottom: 20px; }
    h1 { letter-spacing: -1px; }
    .hero-copy p { font-size: 13px; }
    .league-grid { margin-top: 18px; }
    .league-card { min-height: 104px; padding: 14px; gap: 14px; }
    .league-icon { flex-basis: 60px; width: 60px; height: 60px; font-size: 15px; }
    .league-info small { font-size: 9px; }
    .league-info strong { margin-bottom: 7px; font-size: 17px; }
    .league-info > span { font-size: 11px; }
    .schedule-page { padding-top: 16px; }
    .back-link { margin-bottom: 7px; }
    .date-navigator { min-height: 78px; grid-template-columns: 44px 1fr 44px; }
    .list-toolbar { align-items: flex-end; }
    .game-card, .game-card.finished-game { grid-template-columns: 72px 1fr; }
    .game-time strong { font-size: 23px; }
    .matchup { grid-template-columns: 1fr 22px 1fr; padding: 15px 8px; }
    .finished-game .matchup { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); padding: 12px 6px; }
    .list-team-final { flex-direction: column; gap: 4px; }
    .home-team .list-team-final { align-items: center; }
    .list-team-final > b { font-size: 27px; }
    .ats-winner-chip { padding: 4px 5px; font-size: 6px; white-space: normal; text-align: center; }
    .final-total strong { font-size: 23px; }
    .final-total span { padding: 4px; font-size: 6px; white-space: normal; }
    .team-logo { width: 42px; height: 42px; flex-basis: 42px; font-size: 11px; }
    .team strong { font-size: 13px; }
    .team-division { font-size: 7px; }
    .team-ranking { font-size: 9px; }
    .betting-projection, .performance-projection { padding: 16px 12px; }
    .projected-score-grid { grid-template-columns: 1fr; }
    .projected-team { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 10px 12px; }
    .projected-team img { width: 40px; height: 40px; }
    .projected-team > b { font-size: 27px; }
    .performance-item { padding: 11px 8px; }
    .performance-values { grid-template-columns: minmax(58px, 1fr) 16px minmax(58px, 1fr) minmax(62px, .8fr); gap: 4px; }
    .performance-side, .performance-total { min-height: 72px; padding-inline: 3px; }
    .performance-side strong, .performance-total strong { font-size: 20px; }
    .projection-donut-summary { padding: 16px 12px; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
    .projection-donut { width: 120px; }
    .projection-donut::before { width: 76px; }
    .projection-donut-legend { grid-template-columns: 1fr; }
    .expert-picks-table { padding-inline: 12px; }
    .expert-pick-header { display: none; }
    .expert-pick-row { grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 11px 0; }
    .expert-identity { align-self: center; }
    .expert-selection { min-height: 42px; }
    .expert-pick-row .expert-selection:nth-child(3) { grid-column: 1 / 2; }
    .expert-pick-row .expert-selection:nth-child(4) { grid-column: 2 / 3; }
    .expert-consensus-grid { padding: 14px 12px 6px; }
    .expert-consensus-panel { padding: 12px; grid-template-columns: 102px minmax(0, 1fr); gap: 12px; }
    .expert-donut { width: 102px; }
    .expert-donut::before { width: 64px; }
    .expert-legend { grid-template-columns: 1fr; }
    .expert-disclaimer { padding-inline: 12px; }
    .ai-predictions-grid { padding: 14px 12px; }
    .ai-prediction { padding: 12px; }
    .ai-scoreboard { padding: 8px 6px; }
    .ai-scoreboard > div { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 4px; }
    .ai-scoreboard img { width: 24px; height: 24px; }
    .ai-scoreboard > div > b { font-size: 23px; }
    .ai-disclaimer { padding-inline: 12px; }
    .final-scoreboard { padding-inline: 12px; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 6px; }
    .final-scoreboard > div { flex-direction: column; gap: 4px; text-align: center; }
    .final-scoreboard > div.home { flex-direction: column; text-align: center; }
    .final-scoreboard img { width: 44px; height: 44px; }
    .final-scoreboard > div > b, .final-scoreboard > div.home > b { order: initial; margin: 0; font-size: 38px; }
    .final-scoreboard span strong { font-size: 16px; }
    .actual-market-summary { grid-template-columns: 1fr; padding-inline: 12px; }
    .prediction-comparison-grid { grid-template-columns: 1fr; padding-inline: 12px; }
    .reflection-layout, .optimized-periods { padding-inline: 12px; }
    .reflection-copy h3 { font-size: 19px; }
    .optimized-intro { grid-template-columns: 1fr; gap: 7px; padding-inline: 12px; }
    .optimized-confidence { grid-template-columns: 1fr; padding-inline: 12px; }
    footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
    .detail-topbar { min-height: 66px; padding: 0 14px; }
    .detail-topbar .unverified-pill { display: none; }
    .detail-content { width: calc(100% - 20px); padding-top: 20px; }
    .detail-meta { flex-direction: column; gap: 5px; padding: 14px 16px; }
    .detail-teams { min-height: 205px; grid-template-columns: 1fr 54px 1fr; padding: 24px 10px; }
    .detail-team img { width: 68px; height: 68px; padding: 8px; border-radius: 16px; }
    .detail-team strong { font-size: 19px; }
    .detail-team span { font-size: 10px; }
    .detail-versus > span { width: 42px; height: 42px; font-size: 13px; }
    .detail-versus small { margin-top: 12px; }
    .analysis-card > header { padding: 15px 14px; }
    .analysis-card h2 { font-size: 21px; }
    .odds-table, .stats-scroll { padding-left: 12px; padding-right: 12px; }
    .odds-row { grid-template-columns: 1.1fr .9fr .9fr; }
    .odds-row > span:first-child b { font-size: 11px; }
    .stats-scroll { padding-inline: 8px; }
    .main-stats .stats-row { grid-template-columns: minmax(58px, 1.15fr) repeat(3, minmax(22px, .48fr)) minmax(48px, .8fr) minmax(50px, .85fr); }
    .ats-stats .stats-row { grid-template-columns: minmax(58px, 1fr) repeat(3, minmax(32px, .55fr)) minmax(58px, .9fr); }
    .stats-row > span { padding-inline: 1px; font-size: 9px; }
    .stats-header span { font-size: 7px; letter-spacing: .25px; }
    .team-stats-row img { width: 24px; height: 24px; }
    .team-stats-row > span:first-child { gap: 4px; }
    .team-stats-row b { font-size: 10px; }
    .h2h-row:not(.h2h-header) { grid-template-columns: 1fr; }
    .h2h-row:not(.h2h-header) > span, .h2h-row:not(.h2h-header) > span:last-child { grid-column: auto; }
    .card-source { margin-inline: 12px; }
    .qb-identity { grid-template-columns: 52px minmax(0, 1fr); }
    .qb-identity > img { width: 52px; height: 52px; }
    .qb-identity h3 { font-size: 19px; }
    .qb-status { grid-column: 1 / -1; justify-self: start; }
    .qb-roster-player { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .qb-health { grid-column: 2 / -1; justify-self: start; }
    .qb-stats-header { display: none; }
    .qb-stats-row:not(.qb-stats-header) { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 0; }
    .qb-stats-row:not(.qb-stats-header) > span { display: grid; gap: 2px; text-align: center; font-size: 9px; }
    .qb-stats-row:not(.qb-stats-header) > span:first-child { grid-column: 1 / -1; text-align: left; }
    .qb-stats-row:not(.qb-stats-header) > span:not(:first-child)::before { content: attr(data-label); color: #8591ac; font-size: 6px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
    .american-badge, .season-badge { display: none; }
}