:root {
    --bg: #09101b;
    --panel: #111a28;
    --panel2: #162234;
    --border: #26344a;
    --text: #eef3fa;
    --muted: #91a0b5;
    --accent: #39c879;
    --accent2: #1d8f55;
    --blue: #59a7ff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at top,
            #122037 0,
            var(--bg) 420px
        );
    color: var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.site-header {
    border-bottom:
        1px solid var(--border);
    background:
        rgba(9, 16, 27, .94);
}

.header-inner,
.container {
    max-width: 1500px;
    margin: auto;
    padding-left: 28px;
    padding-right: 28px;
}

.header-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    color: white;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
}

.season {
    color: var(--muted);
    font-size: 14px;
}

.container {
    padding-top: 30px;
    padding-bottom: 50px;
}

.search-panel {
    margin-bottom: 26px;
}

.team-search {
    display: flex;
    gap: 10px;
    max-width: 720px;
}

.team-search input {
    flex: 1;
    min-width: 0;
    border:
        1px solid var(--border);
    border-radius: 9px;
    padding: 13px 15px;
    background: var(--panel);
    color: white;
    font-size: 16px;
}

.team-search button {
    border: 0;
    border-radius: 9px;
    padding: 12px 20px;
    background: var(--accent);
    color: #07130d;
    font-weight: 800;
    cursor: pointer;
}

.hero,
.team-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 25px;
}

h1 {
    font-size: clamp(
        28px,
        4vw,
        46px
    );
    margin: 4px 0 8px;
}

h2 {
    margin: 0;
}

.hero p,
.panel-heading p {
    color: var(--muted);
    margin: 0;
}

.eyebrow {
    color: var(--accent);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .13em;
}

.hero-stat,
.record-card {
    min-width: 150px;
    padding: 17px 20px;
    border:
        1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
}

.hero-stat span,
.record-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.hero-stat strong,
.record-card strong {
    display: block;
    margin-top: 3px;
    font-size: 30px;
}

.panel {
    overflow: hidden;
    border:
        1px solid var(--border);
    border-radius: 13px;
    background: var(--panel);
}

.panel-heading {
    padding: 22px;
    border-bottom:
        1px solid var(--border);
}

.table-wrap {
    overflow-x: auto;
}

.pick-table {
    width: 100%;
    border-collapse: collapse;
}

.pick-table th {
    padding: 13px 15px;
    background: var(--panel2);
    color: var(--muted);
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.pick-table td {
    padding: 15px;
    border-top:
        1px solid var(--border);
    vertical-align: middle;
    font-size: 14px;
}

.pick-table tbody tr:hover {
    background: rgba(
        255,
        255,
        255,
        .025
    );
}

.rank {
    color: var(--muted);
    width: 40px;
}

.team-link {
    color: white;
    text-decoration: none;
    font-weight: 750;
}

.team-link:hover {
    color: var(--blue);
}

.team-link.secondary {
    font-weight: 600;
}

.subtext {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.subtext.inline {
    display: inline;
    margin-left: 3px;
}

.probability {
    min-width: 58px;
    color: var(--accent);
    font-size: 17px;
    font-weight: 850;
}

.prob-bar {
    width: 90px;
    height: 4px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 5px;
    background: #273246;
}

.prob-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.confidence {
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

.missing,
.empty {
    color: var(--muted);
}

.search-results {
    padding: 25px;
}

.team-result-list {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    max-width: 600px;
}

.team-result {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border:
        1px solid var(--border);
    border-radius: 8px;
    color: white;
    text-decoration: none;
}

.team-result span {
    color: var(--muted);
}

.footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    border-top:
        1px solid var(--border);
    padding: 25px;
    color: var(--muted);
    font-size: 12px;
}

.footer strong {
    color: var(--text);
}

@media (max-width: 700px) {
    .header-inner,
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero,
    .team-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-stat,
    .record-card {
        width: 100%;
    }

    .team-search {
        flex-direction: column;
    }

    .team-search button {
        min-height: 46px;
    }
}


/* Dashboard v2 */

.main-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.main-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
}

.main-nav a:hover {
    color: white;
}


.dashboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.dashboard-tabs a {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 15px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.dashboard-tabs a:hover,
.dashboard-tabs a.active {
    background: var(--panel2);
    color: white;
    border-color: var(--accent2);
}


.dashboard-stats {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(120px, 1fr))
        minmax(220px, 1.5fr);
    gap: 12px;
    margin-bottom: 28px;
}

.metric-card {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel);
    padding: 16px 18px;
}

.metric-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.metric-card strong {
    display: block;
    margin-top: 5px;
    font-size: 25px;
}

.metric-card strong.smaller {
    font-size: 15px;
    margin-top: 9px;
}

.metric-card small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}


.section-heading {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}


.top-picks-section {
    margin-bottom: 28px;
}

.top-pick-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.top-pick-card {
    position: relative;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel);
    padding: 17px;
    color: white;
    text-decoration: none;
}

.top-pick-card:hover {
    border-color: var(--accent2);
    background: var(--panel2);
}

.top-pick-rank {
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 7px;
}

.top-pick-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 800;
}

.top-pick-prob {
    margin-top: 8px;
    color: var(--accent);
    font-size: 27px;
    font-weight: 900;
}

.top-pick-opponent {
    margin-top: 8px;
    font-size: 13px;
}

.top-pick-meta {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}


.filter-panel {
    margin-bottom: 14px;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.filter-form label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.filter-form select {
    min-height: 39px;
    min-width: 140px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0 10px;
    background: var(--panel);
    color: white;
}

.filter-form button {
    min-height: 39px;
    border: 0;
    border-radius: 7px;
    padding: 0 16px;
    background: var(--accent);
    color: #07130d;
    font-weight: 800;
    cursor: pointer;
}

.reset-filter {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
}


.details-link {
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.details-link:hover {
    text-decoration: underline;
}


.team-stats {
    grid-template-columns:
        repeat(5, minmax(120px, 1fr));
}

.team-section {
    margin-bottom: 25px;
}


.result-badge {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.result-win {
    background: rgba(57, 200, 121, .15);
    color: var(--accent);
}

.result-loss {
    background: rgba(230, 80, 80, .15);
    color: #ff8181;
}


.game-heading {
    margin-bottom: 25px;
}

.game-heading p {
    color: var(--muted);
}


.probability-matchup {
    display: grid;
    grid-template-columns:
        1fr auto 1fr;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--panel);
}

.matchup-team a {
    color: white;
    text-decoration: none;
    font-size: 23px;
    font-weight: 850;
}

.matchup-team.right {
    text-align: right;
}

.matchup-record {
    margin-top: 4px;
    color: var(--muted);
}

.matchup-probability {
    margin-top: 12px;
    color: var(--accent);
    font-size: 38px;
    font-weight: 900;
}

.matchup-vs {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}


.detail-panel {
    margin-bottom: 24px;
}

.detail-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.detail-grid > div {
    padding: 20px;
    border-top: 1px solid var(--border);
}

.detail-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.detail-grid strong {
    display: block;
    margin-top: 7px;
    font-size: 20px;
}


@media (max-width: 1050px) {

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

    .dashboard-stats,
    .team-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

}


@media (max-width: 700px) {

    .header-inner {
        flex-wrap: wrap;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .top-pick-grid,
    .dashboard-stats,
    .team-stats,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .probability-matchup {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .matchup-team.right {
        text-align: left;
    }

    .matchup-vs {
        display: none;
    }

}


/* =========================================================
   SATURDAY AFTERNOON THEME
   ========================================================= */

:root {
    --bg: #e7f0ee;
    --panel: #fff8e8;
    --panel2: #eadfc8;
    --border: #c9b58e;
    --text: #17373b;
    --muted: #66787b;
    --accent: #d76832;
    --accent2: #2f7774;
    --blue: #2b6591;

    --header: #235b5f;
    --header-light: #d8eff0;
    --cream: #fff8e8;
    --sand: #eadfc8;
    --gold: #b99755;
    --orange-soft: #f4d6c5;
    --teal-soft: #d2e8e5;
}


/* PAGE */

body {
    background:
        linear-gradient(
            135deg,
            #dbeaec 0%,
            #f3ead8 52%,
            #e4ead8 100%
        );
    color: var(--text);
}


/* HEADER */

.site-header {
    background: var(--header);
    border-bottom: 4px solid var(--gold);
}

.brand {
    color: #fff6df;
}

.season {
    color: #d8eff0;
}

.main-nav a {
    color: #c9e4e5;
}

.main-nav a:hover {
    color: #fff6df;
}


/* SEARCH */

.team-search input {
    background: #fffdf5;
    color: var(--text);
    border-color: #b9aa8e;
}

.team-search input::placeholder {
    color: #879295;
}

.team-search button {
    background: var(--accent);
    color: #fffaf0;
}

.team-search button:hover {
    background: #bb5528;
}


/* HEADINGS */

h1,
h2 {
    color: #17373b;
}

.eyebrow {
    color: var(--accent);
}


/* PANELS */

.panel,
.metric-card,
.hero-stat,
.record-card,
.top-pick-card,
.probability-matchup {
    background: var(--panel);
    border-color: var(--border);
}

.panel-heading,
.pick-table th {
    background: var(--panel2);
}


/* DASHBOARD TABS */

.dashboard-tabs a {
    background: rgba(255, 248, 232, .65);
    color: var(--text);
    border-color: var(--border);
}

.dashboard-tabs a:hover {
    background: var(--teal-soft);
    color: var(--text);
}

.dashboard-tabs a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fffaf0;
}


/* METRIC CARDS */

.metric-card {
    border-top: 4px solid var(--accent2);
}

.metric-card:nth-child(2) {
    border-top-color: var(--accent);
}

.metric-card:nth-child(3) {
    border-top-color: var(--gold);
}

.metric-card:nth-child(4) {
    border-top-color: #527ba4;
}


/* TOP PICKS */

.top-pick-card {
    border-top: 5px solid var(--accent);
}

.top-pick-card:hover {
    background: #f4edda;
    border-color: var(--accent2);
}

.top-pick-team {
    color: var(--text);
}

.top-pick-prob {
    color: var(--accent);
}

.top-pick-rank {
    color: var(--accent2);
    font-weight: 800;
}


/* TABLE */

.pick-table th {
    color: #526568;
}

.pick-table td {
    border-top-color: #ded2ba;
}

.pick-table tbody tr:hover {
    background: #f5ecd9;
}

.rank {
    color: var(--accent2);
    font-weight: 800;
}


/* TEAM LINKS */

.team-link {
    color: #245a61;
}

.team-link:hover {
    color: var(--accent);
}

.team-link.secondary {
    color: #4d6568;
}

.details-link {
    color: #2b6591;
}


/* PROBABILITY */

.probability {
    color: var(--accent);
}

.prob-bar {
    background: #ddd1bb;
}

.prob-bar span {
    background:
        linear-gradient(
            90deg,
            var(--accent2),
            var(--accent)
        );
}


/* CONFIDENCE */

.confidence {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: #245b59;
    font-size: 12px;
    font-weight: 750;
}


/* FILTERS */

.filter-form select {
    background: #fffdf5;
    color: var(--text);
    border-color: var(--border);
}

.filter-form button {
    background: var(--accent2);
    color: #fff;
}

.filter-form button:hover {
    background: #286461;
}

.reset-filter {
    color: #536e72;
}


/* GAME DETAIL */

.matchup-team a {
    color: var(--text);
}

.matchup-probability {
    color: var(--accent);
}

.matchup-vs {
    color: var(--gold);
    font-size: 15px;
}


/* RESULTS */

.result-win {
    background: #d6eadc;
    color: #2d7047;
}

.result-loss {
    background: #f3d5ca;
    color: #a3402c;
}


/* SEARCH RESULTS */

.team-result {
    background: #fffdf5;
    color: var(--text);
    border-color: var(--border);
}

.team-result:hover {
    background: var(--teal-soft);
}


/* FOOTER */

.footer {
    background: #dce8e5;
    border-top-color: #b6c8c4;
    color: #607276;
}

.footer strong {
    color: var(--text);
}


/* MISC */

.subtext,
.empty,
.missing,
.hero p,
.panel-heading p,
.game-heading p {
    color: var(--muted);
}



/* =========================================================
   TEAM-SPECIFIC PAGE THEMES
   ========================================================= */


/*
   The dashboard retains the Saturday Afternoon theme.
   These rules activate only when <body> has .team-page.
*/


.team-page {
    background:
        linear-gradient(
            135deg,
            var(--team-soft) 0%,
            #f7f1e4 50%,
            var(--team-soft-secondary) 100%
        );
}


/* Header adopts the selected team's primary color */

.team-page .site-header {
    background: var(--team-primary);
    border-bottom-color:
        var(--team-secondary);
}

.team-page .brand {
    color: var(--team-on-primary);
}

.team-page .season {
    color: var(--team-on-primary);
    opacity: .82;
}

.team-page .main-nav a {
    color: var(--team-on-primary);
    opacity: .78;
}

.team-page .main-nav a:hover {
    color: var(--team-on-primary);
    opacity: 1;
}


/* Team heading becomes the visual identity area */

.team-page .team-heading {
    position: relative;
    overflow: hidden;

    padding:
        24px
        28px;

    border:
        1px solid
        var(--team-secondary);

    border-left:
        8px solid
        var(--team-primary);

    border-radius: 13px;

    background:
        linear-gradient(
            110deg,
            var(--team-soft),
            var(--panel)
        );
}

.team-page .team-heading::after {
    content: "";

    position: absolute;
    right: -50px;
    top: -90px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        var(--team-primary);

    opacity: .07;
}

.team-page .team-heading h1 {
    position: relative;
    z-index: 1;

    color:
        var(--team-primary);
}

.team-page .team-heading .eyebrow {
    color:
        var(--team-primary);
}


/* Season summary cards */

.team-page .team-stats .metric-card {
    border-top:
        4px solid
        var(--team-primary);
}

.team-page
.team-stats
.metric-card:nth-child(even) {
    border-top-color:
        var(--team-secondary);
}


/* Search */

.team-page .team-search button {
    background:
        var(--team-primary);

    color:
        var(--team-on-primary);
}

.team-page .team-search button:hover {
    filter:
        brightness(.90);
}


/* Section headers */

.team-page .panel-heading {
    border-left:
        5px solid
        var(--team-primary);

    background:
        linear-gradient(
            90deg,
            var(--team-soft),
            var(--panel2)
        );
}


/* Links */

.team-page .team-link {
    color:
        var(--team-primary);
}

.team-page .team-link:hover {
    filter:
        brightness(.75);
}


/* Probability values */

.team-page .probability {
    color:
        var(--team-primary);
}


/* Probability meter */

.team-page .prob-bar span {
    background:
        linear-gradient(
            90deg,
            var(--team-primary),
            var(--team-secondary)
        );
}


/* Confidence chips */

.team-page .confidence {
    background:
        var(--team-soft);

    color:
        var(--team-primary);

    border:
        1px solid
        var(--team-primary);
}


/* Detail link */

.team-page .details-link {
    color:
        var(--team-primary);
}


/* Table hover */

.team-page
.pick-table
tbody tr:hover {
    background:
        var(--team-soft);
}


/* Completed-game result */

.team-page .result-win {
    border:
        1px solid
        var(--team-primary);
}


/* Footer */

.team-page .footer {
    border-top:
        3px solid
        var(--team-secondary);

    background:
        var(--team-soft);
}


/* Preserve contrast on unusual bright team colors */

.team-page
.team-heading h1,
.team-page
.probability,
.team-page
.team-link {
    text-shadow:
        0 0 0
        transparent;
}


/* =========================================================
   COMPACT TOP PICK CARDS
   ========================================================= */

.section-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.section-heading-row .section-heading {
    margin-bottom: 2px;
}

.section-subheading {
    color: var(--muted);
    font-size: 12px;
}


.top-pick-grid.compact {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 10px;
}


.top-pick-card.compact {
    padding: 12px 14px 13px;
    border-top-width: 4px;
}


.compact-pick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}


.compact-location {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}


.compact-pick-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}


.compact-team-wrap {
    min-width: 0;
}


.top-pick-card.compact
.top-pick-team {
    font-size: 15px;
}


.compact-record {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.top-pick-card.compact
.top-pick-prob {
    flex: 0 0 auto;
    margin: 0;
    font-size: 24px;
    line-height: 1;
}


.compact-opponent {
    display: flex;
    justify-content: space-between;
    gap: 8px;

    margin-top: 9px;
    padding-top: 8px;

    border-top:
        1px solid var(--border);

    color: var(--text);
    font-size: 11px;
}


.compact-opponent span:last-child {
    color: var(--muted);
}


.compact-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    margin-top: 7px;

    color: var(--muted);
    font-size: 10px;
}


.compact-confidence {
    white-space: nowrap;
    color: var(--accent2);
    font-weight: 800;
}


@media (max-width: 1200px) {

    .top-pick-grid.compact {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

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

}


@media (max-width: 480px) {

    .top-pick-grid.compact {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   DATA & MODEL PAGE
   ========================================================= */


.system-overview {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}


.system-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent2);
    border-radius: 11px;
    background: var(--panel);
}


.system-card:nth-child(2) {
    border-top-color: var(--accent);
}


.system-card:nth-child(3) {
    border-top-color: var(--gold);
}


.system-card:nth-child(4) {
    border-top-color: #527ba4;
}


.system-label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}


.system-card strong {
    display: block;
    margin-top: 5px;
    font-size: 27px;
}


.system-card
.system-model-name {
    font-size: 18px;
}


.system-card small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.35;
}


.system-section {
    margin-bottom: 24px;
}


.system-grid {
    display: grid;
    grid-template-columns:
        1.25fr .75fr;
    gap: 18px;
}


.sync-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}


.sync-success {
    background: #d7eadf;
    color: #276443;
}


.sync-running {
    background: #f5e6b9;
    color: #80601e;
}


.sync-failed {
    background: #f1d3ca;
    color: #9d3f2d;
}


.sync-not_synced {
    background: #e0e4e5;
    color: #657376;
}


.system-copy {
    padding: 22px;
    line-height: 1.65;
}


.system-copy p:first-child {
    margin-top: 0;
}


.elo-flow {
    display: grid;
    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1.1fr;
    align-items: center;
    gap: 8px;

    margin:
        24px 0;

    padding: 16px;

    border-radius: 10px;

    background:
        var(--teal-soft);

    font-size: 12px;
    font-weight: 750;
    text-align: center;
}


.elo-flow > div {
    padding: 9px;
    border-radius: 7px;
    background: #fffaf0;
}


.elo-flow
.elo-result {
    background: var(--accent);
    color: white;
}


.elo-example {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}


.elo-example > div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}


.elo-example span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}


.elo-example strong {
    display: block;
    margin-top: 5px;
    color: var(--accent);
    font-size: 21px;
}


.system-note {
    padding: 12px 14px;
    border-left:
        4px solid
        var(--accent2);

    background:
        var(--teal-soft);
}


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


.learning-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.learning-item {
    padding: 19px;
    border-top:
        1px solid
        var(--border);
}


.learning-item span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}


.learning-item strong {
    display: block;
    margin-top: 6px;
    font-size: 21px;
}


.learning-item
.small-value {
    font-size: 14px;
}


.learning-explanation {
    margin: 18px;
    padding: 17px 19px;
    border-left:
        5px solid
        var(--accent);

    border-radius: 7px;

    background:
        var(--orange-soft);
}


.learning-explanation p {
    margin-bottom: 0;
    line-height: 1.55;
}


.automation-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}


.automation-grid > div {
    padding: 18px;
    border-top:
        1px solid
        var(--border);
}


.automation-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}


.automation-grid strong {
    display: block;
    margin-top: 5px;
}


@media (max-width: 1000px) {

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

    .system-grid {
        grid-template-columns: 1fr;
    }

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

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

}


@media (max-width: 650px) {

    .system-overview,
    .learning-grid,
    .automation-grid,
    .elo-example {
        grid-template-columns: 1fr;
    }

    .elo-flow {
        grid-template-columns: 1fr;
    }

    .elo-flow > span {
        display: none;
    }

}


/* =========================================================
   POLL RANKING BADGES
   ========================================================= */

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 26px;

    margin-right: 4px;

    padding: 2px 6px;

    border-radius: 6px;

    background:
        var(--accent2);

    color: white;

    font-size: 10px;
    font-weight: 900;
    line-height: 1.4;

    vertical-align: middle;
}


.rank-badge.secondary {
    background: var(--gold);
    color: #283437;
}


.team-heading-rank {
    display: inline-block;

    margin-right: 7px;

    color:
        var(--team-primary);

    font-weight: 900;
}


/*
   Team-specific pages use the selected
   school's colors for their rank badge.
*/

.team-page .rank-badge {
    background:
        var(--team-primary);

    color:
        var(--team-on-primary);

    border:
        1px solid
        var(--team-secondary);
}


/* =========================================================
   TEAM MASCOT
   ========================================================= */

.team-mascot {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 7px;
    padding: 6px 11px;

    border:
        1px solid
        var(--team-primary);

    border-radius: 999px;

    background:
        var(--team-soft);

    color:
        var(--team-primary);
}

.team-mascot span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.team-mascot strong {
    font-size: 13px;
    font-weight: 850;
}


/* =========================================================
   MODEL VS MARKET
   ========================================================= */

.market-edge {
    font-weight: 850;
    white-space: nowrap;
}

.market-edge.positive {
    color: #26734d;
}

.market-edge.negative {
    color: #a44b38;
}

.market-role {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;

    background: var(--teal-soft);
    color: #245b59;

    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.market-role.underdog {
    background: var(--orange-soft);
    color: #9a4727;
}

.market-disagreement {
    margin-top: 4px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    white-space: nowrap;
}


/* =========================================================
   TEAM IDENTITY HEADER
   ========================================================= */

.team-identity {
    position: relative;

    display: flex;
    align-items: center;
    gap: 26px;

    margin: 12px 0 24px;
    padding: 24px 28px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            transparent
        );

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            color-mix(
                in srgb,
                var(--team-primary) 11%,
                #fffdf7
            ),
            #fffdf7 70%
        );

    overflow: hidden;
}


.team-identity::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 8px;
    height: 100%;

    background: var(--team-primary);
}


.team-logo-wrap {
    flex: 0 0 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;
}


.team-logo {
    display: block;

    max-width: 145px;
    max-height: 145px;

    width: auto;
    height: auto;

    object-fit: contain;
}


.team-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: var(--team-primary);
    color: var(--team-on-primary);

    font-size: 28px;
    font-weight: 900;
}


.team-identity-copy {
    min-width: 0;
}


.team-title-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}


.team-title-line h1 {
    margin: 0;

    color: var(--team-primary);

    font-size: clamp(
        32px,
        5vw,
        54px
    );

    line-height: 1;
    letter-spacing: -.035em;
}


.team-ranking-large {
    font-size: 24px;
    font-weight: 900;

    color: var(--team-primary);
}


.team-mascot-name {
    margin-top: 8px;

    font-size: 22px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: #5b6260;
}


.team-identity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 16px;
}


.team-identity-meta span {
    padding: 6px 11px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            #d7d2c5
        );

    border-radius: 999px;

    background: #fffdf7;

    font-size: 12px;
    font-weight: 800;
}


.team-social {
    margin-top: 12px;

    font-size: 12px;
    font-weight: 700;

    color: var(--team-primary);
}


@media (max-width: 700px) {

    .team-identity {
        align-items: flex-start;
        gap: 16px;

        padding: 20px;
    }

    .team-logo-wrap {
        flex-basis: 90px;
        min-height: 90px;
    }

    .team-logo {
        max-width: 90px;
        max-height: 90px;
    }

    .team-mascot-name {
        font-size: 16px;
    }
}


/* =========================================================
   COMPACT BRANDED TEAM HEADER
   ========================================================= */

.team-page .team-heading {
    min-height: 0;
    margin-bottom: 18px;
    padding: 0;

    border: 0;
    background: transparent;
    box-shadow: none;
}

.team-page .team-heading::before,
.team-page .team-heading::after {
    display: none;
}

.team-page .team-heading > div {
    width: 100%;
}

.team-page .team-heading .eyebrow {
    margin: 0 0 7px 2px;
}

.team-page .team-identity {
    min-height: 0;

    margin: 0;
    padding: 20px 26px;

    display: flex;
    align-items: center;
    gap: 24px;

    border-radius: 15px;
}

.team-page .team-logo-wrap {
    flex: 0 0 120px;

    width: 120px;
    min-height: 110px;
}

.team-page .team-logo {
    max-width: 115px;
    max-height: 110px;
}

.team-page .team-logo-fallback {
    width: 100px;
    height: 100px;

    font-size: 23px;
}

.team-page .team-title-line h1 {
    font-size: 44px;
}

.team-page .team-ranking-large {
    font-size: 22px;
}

.team-page .team-mascot-name {
    margin-top: 5px;

    font-size: 19px;
}

.team-page .team-identity-meta {
    margin-top: 12px;
}

.team-page .team-social {
    margin-top: 9px;
}


/* Keep official marks looking natural.
   Do not force them into circles. */

.team-page .team-logo {
    background: transparent;
    border: 0;
    border-radius: 0;
}


/* Mobile */

@media (max-width: 700px) {

    .team-page .team-identity {
        padding: 16px;
        gap: 15px;
    }

    .team-page .team-logo-wrap {
        flex-basis: 82px;
        width: 82px;
        min-height: 80px;
    }

    .team-page .team-logo {
        max-width: 80px;
        max-height: 80px;
    }

    .team-page .team-title-line h1 {
        font-size: 32px;
    }
}


/* =========================================================
   MODEL / MARKET REVIEW SIGNALS
   ========================================================= */

.market-review {
    margin-top: 4px;

    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.market-review.notable {
    color: #94631f;
}

.market-review.large {
    color: #b5552c;
}

.market-review.extreme {
    display: inline-block;

    padding: 3px 6px;
    border-radius: 5px;

    background: #f4d5ca;
    color: #9e3424;
}


/* =========================================================
   PREDICTION RESULTS
   ========================================================= */

.results-week-tabs {
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.result-status {
    display: inline-block;
    min-width: 68px;
    border-radius: 999px;
    padding: 4px 9px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.result-correct {
    background: var(--teal-soft);
    color: var(--text);
}

.result-wrong {
    background: rgba(166, 75, 65, .12);
    color: #8f3e36;
}

.result-pending {
    background: rgba(194, 139, 55, .14);
    color: var(--accent2);
}


/* LIVE SCORE CARDS */

.live-score-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 14px;
    margin-bottom: 28px;
}

.live-score-card {
    display: block;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
}

.live-score-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.live-badge {
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(166, 75, 65, .12);
    color: #8f3e36;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}

.live-team-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
    font-size: 16px;
}

.live-points {
    font-size: 26px;
}

.live-game-state {
    margin-top: 10px;
    font-weight: 800;
}

.live-situation {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.live-last-play {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.live-model-pick {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.live-model-pick span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

@media (max-width: 900px) {

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

@media (max-width: 700px) {

    .live-score-grid {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   LIVE GAME DETAIL
   ========================================================= */

.live-game-panel {
    border-top: 4px solid #a64b41;
}

.live-detail-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.live-detail-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-tv {
    color: var(--muted);
    font-size: 12px;
}

.live-detail-score {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.live-detail-score > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.live-detail-score span {
    font-weight: 800;
}

.live-detail-score strong {
    font-size: 32px;
}

.live-detail-situation {
    margin-top: 14px;
    font-size: 14px;
}

.live-detail-last-play {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.live-detail-last-play span,
.live-pregame-reminder span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

.live-detail-last-play p {
    margin-bottom: 0;
}

.live-pregame-reminder {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.live-win-grid {
    margin-top: 14px;
}

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

.live-drive-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.live-drive-row > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.live-drive-row span {
    color: var(--muted);
    font-size: 12px;
}

.live-play-text {
    max-width: 520px;
    white-space: normal;
    line-height: 1.4;
}

@media (max-width: 700px) {

    .live-detail-score {
        grid-template-columns: 1fr;
    }

    .live-pregame-reminder,
    .live-drive-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   Commercial Sports Analytics UI — Phase 1
   ========================================================= */


/* ---------- Global ---------- */

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 15% -10%,
            rgba(89, 167, 255, .15),
            transparent 32rem
        ),
        radial-gradient(
            circle at 90% 5%,
            rgba(57, 200, 121, .10),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            #0b1422 0,
            #08101b 420px,
            #070d16 100%
        );
}

::selection {
    background: rgba(57, 200, 121, .30);
}


/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    border-bottom:
        1px solid rgba(255, 255, 255, .08);

    background:
        rgba(7, 13, 22, .88);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, .18);
}

.header-inner {
    min-height: 82px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;

    font-size: 18px;
    letter-spacing: -.02em;
}

.brand::before {
    content: "CFB";

    display: inline-grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid rgba(57, 200, 121, .40);

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(57, 200, 121, .23),
            rgba(29, 143, 85, .08)
        );

    color: #65e99a;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .08),
        0 7px 24px
        rgba(0, 0, 0, .20);
}


/* ---------- Main Navigation ---------- */

.main-nav {
    gap: 5px;
}

.main-nav a {
    position: relative;

    padding: 10px 11px;

    border-radius: 8px;

    color: #9dacbe;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.main-nav a:hover {
    background:
        rgba(255, 255, 255, .055);

    color: #ffffff;

    transform:
        translateY(-1px);
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 5px;

    height: 2px;

    border-radius: 2px;

    background:
        var(--accent);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .18s ease;
}

.main-nav a:hover::after {
    transform:
        scaleX(1);
}

.season {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .045);

    color: #b7c2d1;

    white-space: nowrap;
}

.season::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--accent);

    box-shadow:
        0 0 10px
        rgba(57, 200, 121, .70);
}


/* ---------- Page Container ---------- */

.container {
    max-width: 1540px;

    padding-top: 26px;
    padding-bottom: 70px;
}


/* ---------- Team Search ---------- */

.search-panel {
    position: relative;

    margin-bottom: 24px;

    padding: 9px;

    border:
        1px solid rgba(255, 255, 255, .08);

    border-radius: 14px;

    background:
        rgba(17, 26, 40, .72);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025),
        0 8px 28px
        rgba(0, 0, 0, .12);
}

.team-search {
    max-width: none;
}

.team-search input {
    height: 48px;

    border:
        1px solid transparent;

    border-radius: 10px;

    background:
        rgba(4, 9, 16, .72);

    padding-left: 17px;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.team-search input:focus {
    border-color:
        rgba(89, 167, 255, .58);

    background:
        rgba(6, 13, 22, .96);

    box-shadow:
        0 0 0 3px
        rgba(89, 167, 255, .10);
}

.team-search input::placeholder {
    color: #69798e;
}

.team-search button {
    min-width: 135px;
    height: 48px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #49d687,
            #2eb96e
        );

    box-shadow:
        0 6px 20px
        rgba(57, 200, 121, .17);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.team-search button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 26px
        rgba(57, 200, 121, .26);

    filter:
        brightness(1.06);
}

.team-search button:active {
    transform:
        translateY(0);
}


/* ---------- Dashboard Navigation Tabs ---------- */

.dashboard-tabs {
    gap: 7px;

    margin-bottom: 18px;
}

.dashboard-tabs a {
    padding: 9px 14px;

    border:
        1px solid transparent;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .035);

    color: #93a3b7;

    transition:
        all .18s ease;
}

.dashboard-tabs a:hover {
    border-color:
        rgba(255, 255, 255, .10);

    background:
        rgba(255, 255, 255, .065);

    color: white;
}

.dashboard-tabs a.active {
    border-color:
        rgba(57, 200, 121, .32);

    background:
        linear-gradient(
            135deg,
            rgba(57, 200, 121, .18),
            rgba(57, 200, 121, .07)
        );

    color: #72eaa2;

    box-shadow:
        inset 0 0 0 1px
        rgba(57, 200, 121, .04);
}


/* ---------- Dashboard Hero ---------- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 190px;

    align-items: center;

    margin-bottom: 18px;

    padding: 34px 38px;

    border:
        1px solid rgba(255, 255, 255, .09);

    border-radius: 20px;

    background:
        linear-gradient(
            120deg,
            rgba(22, 34, 52, .98),
            rgba(13, 23, 38, .96) 60%,
            rgba(10, 39, 32, .72)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .035),
        0 20px 60px
        rgba(0, 0, 0, .20);
}

.hero::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: -80px;
    top: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57, 200, 121, .17),
            transparent 68%
        );

    z-index: -1;
}

.hero::after {
    content: "";

    position: absolute;

    right: 40px;
    bottom: -70px;

    width: 360px;
    height: 180px;

    border:
        1px solid rgba(89, 167, 255, .08);

    border-radius: 50%;

    transform:
        rotate(-12deg);

    z-index: -1;
}

.hero h1 {
    margin-top: 8px;

    font-size:
        clamp(34px, 4.5vw, 58px);

    line-height: 1.02;

    letter-spacing: -.045em;
}

.hero p {
    max-width: 720px;

    margin-top: 10px;

    color: #aab8c9;

    font-size: 15px;
    line-height: 1.55;
}

.eyebrow {
    color: #65e99a;

    font-size: 11px;

    letter-spacing: .17em;
}


/* ---------- Metric Cards ---------- */

.dashboard-stats {
    gap: 12px;

    margin-bottom: 34px;
}

.metric-card {
    position: relative;
    overflow: hidden;

    min-height: 105px;

    padding: 18px 20px;

    border:
        1px solid rgba(255, 255, 255, .075);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 34, 52, .90),
            rgba(13, 22, 35, .94)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.metric-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(89, 167, 255, .20);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, .16);
}

.metric-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57, 200, 121, .55),
            transparent
        );

    opacity: .45;
}

.metric-card span {
    font-size: 10px;
    font-weight: 750;

    letter-spacing: .09em;
}

.metric-card strong {
    display: block;

    margin-top: 10px;

    color: #f7f9fc;

    font-size: 29px;
    letter-spacing: -.035em;
}

.metric-card strong.smaller {
    font-size: 18px;
    line-height: 1.35;
}


/* ---------- Section Headings ---------- */

.section-heading-row {
    margin-bottom: 14px;
}

.section-heading {
    font-size: 20px;
    font-weight: 850;

    letter-spacing: -.025em;
}

.section-subheading {
    margin-top: 4px;

    color: #8292a7;

    font-size: 13px;
}


/* ---------- Top Pick Cards ---------- */

.top-pick-grid.compact {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-bottom: 34px;
}

.top-pick-card.compact {
    position: relative;
    overflow: hidden;

    min-height: 175px;

    padding: 18px;

    border:
        1px solid rgba(255, 255, 255, .085);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 32, 49, .96),
            rgba(12, 21, 34, .98)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025);

    text-decoration: none;

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}

.top-pick-card.compact::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #55dd91,
            #238f58
        );
}

.top-pick-card.compact:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(57, 200, 121, .27);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, .23);
}

.compact-pick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
}

.top-pick-rank {
    display: inline-grid;
    place-items: center;

    min-width: 31px;
    height: 25px;

    padding: 0 8px;

    border:
        1px solid rgba(57, 200, 121, .22);

    border-radius: 7px;

    background:
        rgba(57, 200, 121, .08);

    color: #69e89e;

    font-size: 11px;
    font-weight: 850;
}

.compact-location {
    color: #718197;

    font-size: 11px;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.compact-pick-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.top-pick-team {
    color: #ffffff;

    font-size: 19px;
    font-weight: 850;

    letter-spacing: -.02em;
}

.rank-badge {
    margin-right: 5px;

    color: #f0c86d;

    font-size: 12px;
}

.compact-record {
    margin-top: 4px;

    color: #8090a4;

    font-size: 12px;
}

.top-pick-prob {
    color: #63e89b;

    font-size: 28px;
    font-weight: 900;

    letter-spacing: -.045em;
}

.compact-opponent {
    display: flex;
    justify-content: space-between;

    margin-top: 18px;
    padding-top: 13px;

    border-top:
        1px solid rgba(255, 255, 255, .06);

    color: #9aa9ba;

    font-size: 12px;
}

.compact-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 12px;

    color: #77889c;

    font-size: 11px;
}

.compact-confidence {
    padding: 4px 8px;

    border:
        1px solid rgba(89, 167, 255, .18);

    border-radius: 999px;

    background:
        rgba(89, 167, 255, .07);

    color: #8fc3ff;
}


/* ---------- Panels and Tables ---------- */

.panel,
.filter-panel {
    border:
        1px solid rgba(255, 255, 255, .075);

    border-radius: 16px;

    background:
        linear-gradient(
            150deg,
            rgba(17, 26, 40, .96),
            rgba(11, 19, 31, .98)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025),
        0 14px 35px
        rgba(0, 0, 0, .12);
}

.pick-table th {
    background:
        rgba(255, 255, 255, .025);

    color: #798a9f;

    font-size: 10px;

    letter-spacing: .09em;
}

.pick-table td {
    border-top:
        1px solid rgba(255, 255, 255, .055);
}

.pick-table tbody tr {
    transition:
        background .15s ease;
}

.pick-table tbody tr:hover {
    background:
        rgba(89, 167, 255, .035);
}

.probability {
    color: #64e69a;
}


/* ---------- Scrollbars ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color:
        #26374d
        transparent;
}


/* ---------- Responsive ---------- */

@media (max-width: 1150px) {

    .header-inner {
        flex-wrap: wrap;

        padding-top: 12px;
        padding-bottom: 12px;
    }

    .main-nav {
        order: 3;

        width: 100%;

        overflow-x: auto;

        padding-bottom: 2px;
    }

    .main-nav a {
        white-space: nowrap;
    }

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

}


@media (max-width: 760px) {

    .container {
        padding-top: 18px;
    }

    .brand {
        font-size: 16px;
    }

    .season {
        font-size: 11px;
    }

    .hero {
        min-height: auto;

        padding: 27px 22px;

        border-radius: 16px;
    }

    .hero h1 {
        font-size: 36px;
    }

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

    .metric-wide {
        grid-column:
            span 2;
    }

    .top-pick-grid.compact {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 500px) {

    .dashboard-stats {
        grid-template-columns:
            1fr;
    }

    .metric-wide {
        grid-column:
            auto;
    }

}


/* =========================================================
   Commercial UI — Contrast / Readability Pass
   ========================================================= */


/* ---------- Primary Text ---------- */

body {
    color: #eef4fb;
}

h1,
h2,
h3,
h4 {
    color: #f5f8fc;
}


/* ---------- Hero ---------- */

.hero h1 {
    color: #f4f8fc;
    text-shadow:
        0 2px 18px rgba(0, 0, 0, .18);
}

.hero p {
    color: #b7c5d5;
}

.eyebrow {
    color: #62e99b;
}


/* ---------- Navigation ---------- */

.main-nav a {
    color: #b4c0cf;
}

.main-nav a:hover {
    color: #ffffff;
}

.season {
    color: #c1ccd8;
}


/* ---------- Dashboard Tabs ---------- */

.dashboard-tabs a {
    color: #a9b8c9;
}

.dashboard-tabs a:hover {
    color: #f5f8fc;
}

.dashboard-tabs a.active {
    color: #76efa8;
}


/* ---------- Section Titles ---------- */

.section-heading {
    color: #f0f5fa;
}

.section-subheading {
    color: #a5b4c6;
}


/* ---------- Metric Cards ---------- */

.metric-card span {
    color: #91a5ba;
}

.metric-card strong {
    color: #f7fbff;
}


/* ---------- Top Pick Cards ---------- */

.top-pick-team {
    color: #f7fbff;
}

.top-pick-prob {
    color: #64efa1;
}

.compact-record {
    color: #9fb0c3;
}

.compact-location {
    color: #9aacc0;
}

.compact-opponent {
    color: #bac6d3;
}

.compact-opponent span:first-child {
    color: #d6dee8;
}

.compact-footer {
    color: #9eafc1;
}

.compact-confidence {
    color: #9bcaff;
}


/* ---------- General Table Text ---------- */

.pick-table td {
    color: #c9d4df;
}

.pick-table th {
    color: #91a5bb;
}


/* Pick / Team Names */

.pick-table .team-link,
.team-link {
    color: #f2f6fa;
}

.pick-table .team-link:hover,
.team-link:hover {
    color: #79baff;
}


/* Secondary team / opponent */

.team-link.secondary {
    color: #ced8e3;
}


/* Smaller team information */

.subtext {
    color: #91a4b8;
}

.subtext.inline {
    color: #91a4b8;
}


/* Rank numbers */

.rank {
    color: #72cfa1;
    font-weight: 750;
}


/* Probability */

.probability {
    color: #64efa1;
}


/* General values that were too dark */

.pick-table td.nowrap,
.pick-table .nowrap {
    color: #b9c6d3;
}


/* Missing / empty values */

.missing,
.empty {
    color: #8193a8;
}


/* Links inside tables */

.pick-table a:not(.team-link) {
    color: #73b7ff;
}

.pick-table a:not(.team-link):hover {
    color: #a5d2ff;
}


/* ---------- Search ---------- */

.team-search input {
    color: #f1f5f9;
}

.team-search input::placeholder {
    color: #8295aa;
}


/* ---------- Panel Headings ---------- */

.panel-heading h2 {
    color: #f5f8fc;
}

.panel-heading p {
    color: #a5b5c6;
}


/* ---------- Footer ---------- */

.footer {
    color: #93a5b8;
}

.footer strong {
    color: #e7edf5;
}


/* ---------- Generic muted text ---------- */

.muted {
    color: #9aabbd;
}



/* =========================================================
   Team Pages — Light Theme Contrast Fix
   ========================================================= */

body.team-page {
    color: #203247;
}


/* Main team-page headings */

body.team-page h1,
body.team-page h2,
body.team-page h3,
body.team-page h4 {
    color: #173047;
}


/* Team hero title can continue using school color */

body.team-page .team-heading h1 {
    color: var(--team-primary);
}


/* Panel headings sit on a light/cream background */

body.team-page .panel-heading h2,
body.team-page .panel-heading h3 {
    color: #173047;
}

body.team-page .panel-heading p {
    color: #63758a;
}


/* Section headings */

body.team-page .section-heading {
    color: #173047;
}

body.team-page .section-subheading {
    color: #66798e;
}


/* Team metadata near school name */

body.team-page .team-heading .subtext,
body.team-page .team-heading .muted {
    color: #5d7187;
}


/* Small information pills / badges */

body.team-page .team-heading span {
    color: #425a70;
}


/* Keep school-colored links readable */

body.team-page .team-heading a {
    color: var(--team-primary);
}


/* Light panel surfaces */

body.team-page .panel-heading {
    color: #173047;
}


/* Tables remain dark, so restore bright text there */

body.team-page .pick-table td {
    color: #d5dfE9;
}

body.team-page .pick-table th {
    color: #94a8bd;
}

body.team-page .pick-table .team-link,
body.team-page .pick-table .team-link.secondary {
    color: #f4f7fb;
}

body.team-page .pick-table .subtext {
    color: #9eafc0;
}

body.team-page .pick-table td.nowrap,
body.team-page .pick-table .nowrap {
    color: #c3d0dc;
}


/* Team page metric cards are dark */

body.team-page .metric-card span {
    color: #9cb0c4;
}

body.team-page .metric-card strong {
    color: #f7fbff;
}


/* Search bar is dark */

body.team-page .team-search input {
    color: #f3f7fb;
}

body.team-page .team-search input::placeholder {
    color: #8296aa;
}


/* Footer */

body.team-page .footer {
    color: #607489;
}

body.team-page .footer strong {
    color: #253b50;
}



/* =========================================================
   Team Pages — Table Row Hover Contrast
   ========================================================= */

body.team-page .pick-table tbody tr:hover {
    background: #243348;
}


/* Standard row text */

body.team-page .pick-table tbody tr:hover td {
    color: #f0f5fa;
}


/* Team / opponent names */

body.team-page .pick-table tbody tr:hover .team-link,
body.team-page .pick-table tbody tr:hover .team-link.secondary {
    color: #ffffff;
}


/* Smaller record / conference text */

body.team-page .pick-table tbody tr:hover .subtext {
    color: #c1cfdd;
}


/* Dates, locations, venue, Elo, etc. */

body.team-page .pick-table tbody tr:hover .nowrap,
body.team-page .pick-table tbody tr:hover td.nowrap {
    color: #e0e8f0;
}


/* Keep probability prominent */

body.team-page .pick-table tbody tr:hover .probability {
    color: #68efa2;
}


/* Detail links */

body.team-page .pick-table tbody tr:hover a:not(.team-link) {
    color: #8bc8ff;
}



/* =========================================================
   DATA & MODEL — COMMERCIAL ANALYTICS REDESIGN
   ========================================================= */


/* ---------- Page ---------- */

.system-page {
    --system-surface: #101b2a;
    --system-surface-2: #142133;
    --system-surface-3: #18273b;
    --system-line: rgba(255,255,255,.075);
    --system-text: #edf4fb;
    --system-muted: #9baec1;
    --system-green: #60e69a;
    --system-blue: #73b7ff;
    --system-gold: #e9c46a;

    color: var(--system-text);
}


/* ---------- Hero ---------- */

.system-page > .hero {
    min-height: 185px;

    margin-bottom: 18px;

    background:
        radial-gradient(
            circle at 88% 35%,
            rgba(57, 200, 121, .13),
            transparent 24rem
        ),
        linear-gradient(
            120deg,
            #152237 0%,
            #0f1b2b 58%,
            #0d2c27 100%
        );
}

.system-page > .hero h1 {
    color: #f7fafc;

    font-size:
        clamp(38px, 5vw, 58px);
}

.system-page > .hero p {
    color: #adbdcd;

    max-width: 720px;
}

.system-page > .hero .eyebrow {
    color: #60e69a;
}


/* ---------- Overview / System Health ---------- */

.system-page .system-overview {
    gap: 14px;

    margin-bottom: 30px;
}

.system-page .system-card {
    position: relative;
    overflow: hidden;

    min-height: 135px;

    padding: 21px 22px;

    border:
        1px solid var(--system-line);

    border-top: 0;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #162337,
            #101a29
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.03),
        0 12px 30px
        rgba(0,0,0,.13);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.system-page .system-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(115,183,255,.22);

    box-shadow:
        0 16px 36px
        rgba(0,0,0,.20);
}


/* colored top status rail */

.system-page .system-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #52df91,
            #2ca968
        );
}

.system-page .system-card:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #56a8ff,
            #427dd0
        );
}

.system-page .system-card:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #e8c568,
            #ca9840
        );
}

.system-page .system-card:nth-child(4)::before {
    background:
        linear-gradient(
            90deg,
            #9e8cff,
            #6f69d5
        );
}


/* labels */

.system-page .system-label {
    color: #8fa5bb;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .11em;
}


/* big values */

.system-page .system-card strong {
    margin-top: 11px;

    color: #f5f9fd;

    font-size: 30px;
    font-weight: 850;

    letter-spacing: -.035em;
}

.system-page .system-card
.system-model-name {
    color: #79baff;

    font-size: 19px;
}


/* descriptions */

.system-page .system-card small {
    margin-top: 7px;

    color: #9eafc1;

    font-size: 12px;

    line-height: 1.45;
}


/* ---------- Major Sections ---------- */

.system-page .system-section {
    margin-bottom: 26px;

    border:
        1px solid var(--system-line);

    border-radius: 18px;

    background:
        linear-gradient(
            150deg,
            #111d2d,
            #0c1624
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 15px 38px
        rgba(0,0,0,.12);
}


/* remove old cream section headers */

.system-page .system-section
.panel-heading {
    padding: 23px 25px;

    border-bottom:
        1px solid var(--system-line);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
}

.system-page .system-section
.panel-heading h2 {
    color: #f3f7fb;

    font-size: 21px;

    letter-spacing: -.025em;
}

.system-page .system-section
.panel-heading p {
    margin-top: 5px;

    color: #99acbf;

    font-size: 13px;
}


/* ---------- Model Comparison Table ---------- */

.system-page .system-table {
    background: transparent;
}

.system-page .system-table th {
    padding: 14px 15px;

    border: 0;

    background:
        rgba(255,255,255,.022);

    color: #829ab2;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .10em;
}

.system-page .system-table td {
    padding: 17px 15px;

    border-top:
        1px solid rgba(255,255,255,.055);

    color: #c8d5e1;
}

.system-page .system-table td strong {
    color: #f4f8fc;
}

.system-page .system-table tbody tr {
    transition:
        background .15s ease;
}

.system-page .system-table tbody tr:hover {
    background:
        rgba(115,183,255,.045);
}

.system-page .system-table tbody tr:first-child {
    background:
        linear-gradient(
            90deg,
            rgba(57,200,121,.065),
            transparent 65%
        );
}

.system-page .system-table
tbody tr:first-child td:first-child {
    box-shadow:
        inset 3px 0 0
        #53dc90;
}


/* ---------- Status Badges ---------- */

.system-page .sync-status {
    border:
        1px solid transparent;

    padding: 5px 9px;

    font-size: 9px;

    letter-spacing: .05em;
}

.system-page .sync-success {
    border-color:
        rgba(91,226,151,.28);

    background:
        rgba(57,200,121,.13);

    color: #78eba9;
}

.system-page .sync-running {
    border-color:
        rgba(233,196,106,.28);

    background:
        rgba(233,196,106,.12);

    color: #efd27f;
}

.system-page .sync-failed {
    border-color:
        rgba(239,113,90,.30);

    background:
        rgba(239,113,90,.12);

    color: #ff9b88;
}

.system-page .sync-not_synced {
    border-color:
        rgba(159,174,191,.20);

    background:
        rgba(159,174,191,.08);

    color: #aebdcb;
}


/* ---------- Explanatory Copy ---------- */

.system-page .system-copy {
    padding: 24px 26px;

    color: #c2cfdb;

    line-height: 1.7;
}

.system-page .system-copy p {
    color: #c2cfdb;
}

.system-page .system-copy strong {
    color: #f3f7fb;
}

.system-page .system-copy h3 {
    position: relative;

    margin:
        29px 0 8px;

    padding-left: 14px;

    color: #f1f6fb;

    font-size: 17px;
}

.system-page .system-copy h3:first-child {
    margin-top: 0;
}

.system-page .system-copy h3::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;
    bottom: 4px;

    width: 3px;

    border-radius: 4px;

    background: #5ddf96;
}


/* ---------- Information Notes ---------- */

.system-page .system-note {
    margin-top: 18px;

    padding: 15px 17px;

    border:
        1px solid
        rgba(93,223,150,.16);

    border-left:
        3px solid #5ddf96;

    border-radius: 9px;

    background:
        rgba(57,200,121,.065);

    color: #b9c9d7;
}


/* ---------- Elo Flow ---------- */

.system-page .elo-flow {
    background:
        rgba(255,255,255,.025);

    border:
        1px solid var(--system-line);

    border-radius: 13px;
}

.system-page .elo-flow > div {
    border:
        1px solid
        rgba(255,255,255,.07);

    background:
        #172538;

    color: #d5e0eb;
}

.system-page .elo-flow > span {
    color: #698097;
}

.system-page .elo-flow
.elo-result {
    border-color:
        rgba(57,200,121,.22);

    background:
        rgba(57,200,121,.14);

    color: #73e9a7;
}


/* ---------- Elo Examples ---------- */

.system-page .elo-example > div {
    border:
        1px solid var(--system-line);

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);
}

.system-page .elo-example span {
    color: #8ea4ba;
}

.system-page .elo-example strong {
    color: #65e79d;
}


/* ---------- Two-column System Blocks ---------- */

.system-page .system-grid > .panel,
.system-page .system-details > .panel {
    border:
        1px solid var(--system-line);

    border-radius: 14px;

    background:
        rgba(255,255,255,.022);
}


/* ---------- Learning Cards ---------- */

.system-page .learning-grid {
    gap: 1px;

    background:
        rgba(255,255,255,.055);
}

.system-page .learning-item {
    border-top: 0;

    background:
        #111d2c;
}

.system-page .learning-item span {
    color: #8399af;

    font-size: 10px;

    letter-spacing: .08em;
}

.system-page .learning-item strong {
    color: #eef4fa;
}


/* ---------- Learning Explanation ---------- */

.system-page .learning-explanation {
    border:
        1px solid
        rgba(115,183,255,.14);

    border-left:
        4px solid #69adf7;

    border-radius: 10px;

    background:
        rgba(89,167,255,.065);

    color: #becddd;
}


/* ---------- Automation / Sync Grid ---------- */

.system-page .automation-grid {
    gap: 1px;

    background:
        rgba(255,255,255,.055);
}

.system-page .automation-grid > div {
    border-top: 0;

    background:
        #111d2c;
}

.system-page .automation-grid span {
    color: #8298ae;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .07em;
}

.system-page .automation-grid strong {
    color: #eaf1f7;
}


/* ---------- Generic System Values ---------- */

.system-page .missing,
.system-page .empty {
    color: #8296aa;
}


/* ---------- Responsive ---------- */

@media (max-width: 1000px) {

    .system-page .system-card {
        min-height: 120px;
    }

}


@media (max-width: 650px) {

    .system-page > .hero {
        padding:
            26px 21px;
    }

    .system-page .system-copy {
        padding:
            20px;
    }

    .system-page .system-section
    .panel-heading {
        padding:
            20px;
    }

}



/* =========================================================
   LIVE SCORES + RESULTS — COMMERCIAL REDESIGN
   ========================================================= */


/* ---------------------------------------------------------
   Shared page treatment
   --------------------------------------------------------- */

.live-page,
.results-page {
    --sports-surface: #101b2a;
    --sports-surface-2: #142235;
    --sports-surface-3: #18283c;
    --sports-border: rgba(255,255,255,.075);
    --sports-text: #edf4fb;
    --sports-muted: #96a9bc;
    --sports-green: #62e99c;
    --sports-blue: #73b8ff;
    --sports-red: #ff8279;
    --sports-gold: #edca72;

    color: var(--sports-text);
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.live-page > .hero,
.results-page > .hero {
    background:
        radial-gradient(
            circle at 88% 45%,
            rgba(57,200,121,.12),
            transparent 25rem
        ),
        linear-gradient(
            120deg,
            #152237,
            #0e1b2b 60%,
            #0d2c27
        );

    border-color:
        rgba(255,255,255,.085);
}

.live-page > .hero h1,
.results-page > .hero h1 {
    color: #f8fbff;
}

.live-page > .hero p,
.results-page > .hero p {
    color: #afbecd;
}


/* ---------------------------------------------------------
   Metric card descriptions
   --------------------------------------------------------- */

.live-page .metric-card small,
.results-page .metric-card small {
    display: block;

    margin-top: 5px;

    color: #91a5ba;

    font-size: 11px;

    line-height: 1.4;
}


/* ---------------------------------------------------------
   Dark content panels
   --------------------------------------------------------- */

.live-page .system-section,
.results-page .system-section {
    overflow: hidden;

    margin-bottom: 28px;

    border:
        1px solid var(--sports-border);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #111d2d,
            #0c1624
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),
        0 15px 35px
        rgba(0,0,0,.14);
}


/* Kill the old cream panel headers */

.live-page .system-section .panel-heading,
.results-page .system-section .panel-heading {
    padding: 21px 24px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.012)
        );
}

.live-page .system-section .panel-heading h2,
.results-page .system-section .panel-heading h2 {
    color: #f3f7fc;

    font-size: 21px;

    letter-spacing: -.025em;
}

.live-page .system-section .panel-heading p,
.results-page .system-section .panel-heading p {
    margin-top: 5px;

    color: #94a8bd;

    font-size: 12px;
}


/* ---------------------------------------------------------
   Table styling
   --------------------------------------------------------- */

.live-page .system-table,
.results-page .system-table {
    background: transparent;
}

.live-page .system-table th,
.results-page .system-table th {
    padding: 13px 15px;

    border: 0;

    background:
        rgba(255,255,255,.022);

    color: #839bb3;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .10em;
}

.live-page .system-table td,
.results-page .system-table td {
    padding: 17px 15px;

    border-top:
        1px solid rgba(255,255,255,.055);

    color: #c7d4e1;

    vertical-align: middle;
}

.live-page .system-table tbody tr,
.results-page .system-table tbody tr {
    transition:
        background .16s ease,
        box-shadow .16s ease;
}

.live-page .system-table tbody tr:hover,
.results-page .system-table tbody tr:hover {
    background:
        rgba(115,184,255,.055);
}


/* Game links */

.live-page .system-table a,
.results-page .system-table a {
    color: #8bc8ff;

    font-weight: 700;

    text-decoration: none;
}

.live-page .system-table a:hover,
.results-page .system-table a:hover {
    color: #b8dcff;

    text-decoration: none;
}

.live-page .system-table td strong,
.results-page .system-table td strong {
    color: #f1f6fb;
}


/* ---------------------------------------------------------
   LIVE SCORES
   --------------------------------------------------------- */

.live-page .live-score-grid {
    gap: 16px;
}

.live-page .live-score-card {
    position: relative;
    overflow: hidden;

    padding: 19px 20px;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #162438,
            #0f1a29
        );

    color: #edf4fb;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.13);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.live-page .live-score-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        #f26f64;
}

.live-page .live-score-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(242,111,100,.30);

    box-shadow:
        0 16px 35px
        rgba(0,0,0,.20);
}

.live-page .live-score-header {
    color: #94a8bd;
}

.live-page .live-badge {
    border:
        1px solid
        rgba(255,102,91,.30);

    background:
        rgba(255,102,91,.12);

    color: #ff8a80;
}

.live-page .live-badge::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 6px;

    border-radius: 50%;

    background: #ff6e63;

    box-shadow:
        0 0 9px
        rgba(255,110,99,.75);
}

.live-page .live-team-row {
    color: #f2f7fb;

    font-size: 17px;
}

.live-page .live-points {
    color: #ffffff;

    font-size: 30px;
}

.live-page .live-game-state {
    color: #ff9389;
}

.live-page .live-situation,
.live-page .live-last-play {
    color: #9eafc1;
}

.live-page .live-model-pick {
    border-top-color:
        rgba(255,255,255,.07);
}

.live-page .live-model-pick span {
    color: #8298ae;
}

.live-page .live-model-pick strong {
    color: #67e99e;
}


/* Coming-up probability */

.live-probability-value {
    color: #66e99e;

    font-weight: 850;
}

.live-probability-track,
.result-probability-track {
    width: 95px;
    height: 4px;

    margin-top: 6px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,.10);
}

.live-probability-track span,
.result-probability-track span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #48c982,
            #64e99d
        );
}

.live-no-prediction {
    color: #70859b;
}


/* ---------------------------------------------------------
   RESULTS
   --------------------------------------------------------- */

.results-page .section-heading {
    color: #f0f5fa;

    font-size: 18px;

    letter-spacing: -.01em;
}

.results-page .section-subheading {
    color: #97aabd;
}


/* Week selector */

.results-page .results-week-tabs {
    gap: 8px;

    margin-bottom: 22px;
}

.results-page .results-week-tabs a {
    border:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(255,255,255,.04);

    color: #a6b6c7;
}

.results-page .results-week-tabs a:hover {
    border-color:
        rgba(115,184,255,.20);

    background:
        rgba(115,184,255,.07);

    color: #eaf4ff;
}

.results-page .results-week-tabs a.active {
    border-color:
        rgba(98,233,156,.30);

    background:
        rgba(57,200,121,.12);

    color: #6deba3;
}


/* Result state down left side of row */

.results-page
.system-table
tbody tr.result-row-pending
td:first-child {
    box-shadow:
        inset 3px 0 0
        rgba(237,202,114,.48);
}

.results-page
.system-table
tbody tr.result-row-correct {
    background:
        linear-gradient(
            90deg,
            rgba(57,200,121,.07),
            transparent 48%
        );
}

.results-page
.system-table
tbody tr.result-row-correct
td:first-child {
    box-shadow:
        inset 3px 0 0
        #58df94;
}

.results-page
.system-table
tbody tr.result-row-wrong {
    background:
        linear-gradient(
            90deg,
            rgba(255,103,91,.06),
            transparent 48%
        );
}

.results-page
.system-table
tbody tr.result-row-wrong
td:first-child {
    box-shadow:
        inset 3px 0 0
        #f16f65;
}


/* Result probability */

.result-probability-value {
    color: #e8f0f7;

    font-weight: 800;
}


/* Status badges */

.results-page .result-status {
    min-width: 76px;

    padding: 5px 10px;

    border:
        1px solid transparent;

    font-size: 9px;

    letter-spacing: .07em;
}

.results-page .result-correct {
    border-color:
        rgba(98,233,156,.25);

    background:
        rgba(57,200,121,.12);

    color: #74eaa7;
}

.results-page .result-wrong {
    border-color:
        rgba(255,111,99,.25);

    background:
        rgba(255,111,99,.11);

    color: #ff9187;
}

.results-page .result-pending {
    border-color:
        rgba(237,202,114,.22);

    background:
        rgba(237,202,114,.09);

    color: #e8c976;
}


/* Results explanatory note */

.results-page .system-copy {
    color: #b9c8d7;
}

.results-page .system-note {
    border:
        1px solid
        rgba(115,184,255,.14);

    border-left:
        3px solid #69adf7;

    border-radius: 9px;

    background:
        rgba(89,167,255,.055);

    color: #afc0d0;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .live-probability-track,
    .result-probability-track {
        width: 70px;
    }

}



/* =========================================================
   COMMERCIAL FOOTER
   ========================================================= */

/*
   Keep team-specific pages independent.
   This applies to dashboard, live, results,
   data/model and game pages.
*/

body:not(.team-page) .container {
    padding-bottom: 38px;
}


body:not(.team-page) .footer {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px 28px;

    min-height: 68px;

    padding: 18px 28px;

    border-top:
        1px solid rgba(255,255,255,.075);

    background:
        linear-gradient(
            180deg,
            #0b1420 0%,
            #080f19 100%
        );

    color: #8297ac;

    font-size: 11px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018);
}


/* subtle accent line */

body:not(.team-page) .footer::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    width: min(620px, 60%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,200,121,.40),
            rgba(89,167,255,.30),
            transparent
        );
}


/* Footer labels */

body:not(.team-page) .footer span {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: #8297ac;

    white-space: nowrap;
}


/* Important values */

body:not(.team-page) .footer strong {
    color: #cbd7e3;

    font-weight: 700;
}


/* Model name gets subtle emphasis */

body:not(.team-page) .footer span:first-child strong {
    color: #68e49d;
}


/* Smaller screens */

@media (max-width: 700px) {

    body:not(.team-page) .footer {
        flex-direction: column;

        gap: 7px;

        padding:
            16px 20px;

        text-align: center;
    }

}



/* =========================================================
   Authentication
   ========================================================= */

.auth-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(31, 91, 168, 0.25),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(30, 160, 110, 0.15),
            transparent 35%
        ),
        #07101d;
}

.auth-shell {
    width: min(1040px, calc(100% - 40px));
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
}

.auth-brand h1 {
    margin: 20px 0 14px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
    color: #ffffff;
}

.auth-brand p {
    max-width: 580px;
    color: #aebdce;
    font-size: 18px;
    line-height: 1.6;
}

.auth-badge {
    display: inline-flex;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    color: #dce8f7;
    font-weight: 800;
    letter-spacing: 0.14em;
    background: rgba(255,255,255,0.05);
}

.auth-card {
    padding: 34px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    background: rgba(13, 27, 45, 0.94);
    box-shadow: 0 28px 80px rgba(0,0,0,0.35);
}

.auth-card-header h2 {
    margin: 8px 0;
    color: #ffffff;
    font-size: 30px;
}

.auth-card-header p {
    margin: 0 0 26px;
    color: #9fb0c5;
}

.auth-eyebrow {
    color: #58d19a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.auth-form {
    display: grid;
    gap: 10px;
}

.auth-form label {
    margin-top: 8px;
    color: #dce8f7;
    font-weight: 700;
    font-size: 14px;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid #34475d;
    border-radius: 10px;
    background: #091522;
    color: #ffffff;
    font: inherit;
}

.auth-form input:focus {
    outline: none;
    border-color: #5aa2ff;
    box-shadow: 0 0 0 3px rgba(90,162,255,0.14);
}

.auth-form button {
    margin-top: 16px;
    padding: 14px 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        #1d79d8,
        #24a67c
    );
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-error {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(235, 90, 90, 0.5);
    border-radius: 10px;
    background: rgba(150, 40, 40, 0.18);
    color: #ffb7b7;
}

.auth-footnote {
    margin-top: 22px;
    color: #6f8298;
    font-size: 12px;
    text-align: center;
}

.header-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-pill {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    color: #dce8f7;
    font-size: 13px;
}

.logout-form {
    margin: 0;
}

.logout-form button {
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background: transparent;
    color: #dce8f7;
    cursor: pointer;
}

.logout-form button:hover {
    background: rgba(255,255,255,0.07);
}

@media (max-width: 820px) {
    .auth-shell {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .auth-brand {
        text-align: center;
    }

    .auth-brand p {
        margin-left: auto;
        margin-right: auto;
    }

    .header-account {
        flex-wrap: wrap;
    }
}


/* MFA / account security */

.auth-settings-panel {
    max-width: 900px;
    margin: 34px auto;
    padding: 34px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    background: #0d1b2d;
    color: #dce8f7;
}

.auth-settings-panel h1 {
    margin: 8px 0 20px;
    color: #ffffff;
}

.security-status {
    padding: 22px;
    margin: 22px 0;
    border: 1px solid #34475d;
    border-radius: 14px;
    background: #091522;
}

.security-status.enabled {
    border-color: rgba(55,190,125,0.45);
    background: rgba(22,110,76,0.14);
}

.security-action,
.account-link {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
}

.security-action {
    margin-top: 12px;
    padding: 11px 16px;
    border-radius: 9px;
    background: #1d79d8;
    color: #ffffff;
}

.account-link {
    color: #bcd0e7;
    font-size: 13px;
}

.mfa-setup-grid {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 34px;
    align-items: center;
    margin-top: 26px;
}

.mfa-qr {
    padding: 18px;
    border-radius: 14px;
    background: #ffffff;
}

.mfa-qr img {
    display: block;
    width: 100%;
    height: auto;
}

.mfa-secret {
    display: block;
    padding: 12px;
    margin: 12px 0 22px;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: #07101d;
    color: #7ee2b8;
}

.recovery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 25px 0;
}

.recovery-grid code {
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    background: #07101d;
    color: #7ee2b8;
    font-size: 16px;
}

@media (max-width: 700px) {
    .mfa-setup-grid {
        grid-template-columns: 1fr;
    }

    .recovery-grid {
        grid-template-columns: 1fr;
    }
}