:root {
    --page: #f3f5f4;
    --surface: #fdfefd;
    --surface-subtle: #f7f9f8;
    --surface-strong: #edf1ef;
    --line: rgba(17, 28, 22, 0.1);
    --line-strong: rgba(17, 28, 22, 0.18);
    --ink: #111814;
    --ink-secondary: #3e4c44;
    --ink-muted: #5f6f66;
    --accent: #1f5f46;
    --accent-strong: #184b38;
    --accent-soft: #e7f0eb;
    --danger: #9a3e37;
    --danger-soft: #f7e9e7;
    --below-return: #4f8069;
    --above-return: #a66561;
    --chart-win: #a45f5b;
    --chart-draw: #43765f;
    --chart-loss: #4d6f8f;
    --chart-return: #343d43;
    --warning: #8b641c;
    --warning-soft: #f5efdf;
    --shadow-sm: 0 1px 2px rgba(18, 35, 26, 0.04);
    --shadow-md: 0 12px 34px -28px rgba(18, 35, 26, 0.5);
    --radius: 6px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 1120px;
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
    letter-spacing: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 64px;
    border-bottom: 1px solid var(--line);
    background: rgba(253, 254, 253, 0.96);
    backdrop-filter: blur(14px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1240px, calc(100% - 64px));
    height: 100%;
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
}

.brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 4px;
    color: #f6faf8;
    background: var(--accent);
    font-family: SimSun, serif;
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: 0 7px 16px -10px rgba(31, 95, 70, 0.8);
}

.brand-copy strong,
.brand-copy small {
    display: block;
}

.brand-copy strong {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.brand-copy small {
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
    line-height: 1.2;
}

.main-nav {
    display: flex;
    align-items: center;
    align-self: stretch;
}

.nav-link {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 var(--space-md);
    color: var(--ink-secondary);
    font-size: 0.875rem;
    font-weight: 650;
}

.nav-link::after {
    position: absolute;
    right: var(--space-md);
    bottom: -1px;
    left: var(--space-md);
    height: 2px;
    background: var(--accent);
    content: "";
    transform: scaleX(0);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link.is-active::after,
.nav-link:hover::after {
    transform: scaleX(1);
}

.account-menu {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-left: var(--space-lg);
}

.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ink-muted);
    background: transparent;
    cursor: pointer;
    list-style: none;
}

.user-menu-trigger::-webkit-details-marker {
    display: none;
}

.user-menu-trigger:hover,
.user-menu[open] .user-menu-trigger {
    border-color: var(--line-strong);
    color: var(--ink-secondary);
    background: var(--surface-subtle);
}

.nav-user,
.user-menu-name {
    display: block;
    max-width: 180px;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-chevron {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.user-menu[open] .user-menu-chevron {
    transform: translateY(2px) rotate(225deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 136px;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: 0 12px 28px -18px rgba(18, 35, 26, 0.55);
}

.user-menu-option {
    display: flex;
    min-height: 36px;
    align-items: center;
    padding: 0 10px;
    border-radius: 3px;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 650;
}

.user-menu-option:hover {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.logout-form {
    margin: 0;
}

.logout-button {
    min-height: 36px;
    padding: 0 var(--space-md);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--ink-secondary);
    background: var(--surface);
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.logout-button:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.auth-page {
    background: var(--surface-subtle);
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--space-3xl);
}

.auth-panel {
    width: 400px;
    padding: var(--space-2xl);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
}

.auth-heading {
    margin: var(--space-2xl) 0 var(--space-xl);
}

.auth-heading h1 {
    margin: 0;
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.2;
}

.auth-heading p {
    margin: var(--space-sm) 0 0;
    color: var(--ink-secondary);
    font-size: 0.875rem;
}

.auth-error {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid rgba(154, 62, 55, 0.22);
    border-radius: 4px;
    color: var(--danger);
    background: var(--danger-soft);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.auth-form {
    display: grid;
    gap: var(--space-lg);
}

.auth-field {
    display: grid;
    gap: var(--space-sm);
}

.auth-field span {
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    font-weight: 650;
}

.auth-field input {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-md);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--ink);
    background: var(--surface);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.auth-field input:hover {
    border-color: rgba(31, 95, 70, 0.45);
}

.auth-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-submit {
    height: 44px;
    margin-top: var(--space-xs);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: #f6faf8;
    background: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}

.auth-submit:hover {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
}

.auth-submit:active {
    transform: translateY(1px);
}

.auth-access-note {
    margin: var(--space-xl) 0 0;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.75rem;
    text-align: center;
}

.page-shell {
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
    padding: var(--space-2xl) 0 64px;
}

.site-disclaimer {
    border-top: 1px solid var(--line);
    background: var(--surface-subtle);
}

.site-disclaimer-inner {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-xl);
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
    padding: var(--space-xl) 0 var(--space-2xl);
}

.site-disclaimer strong {
    color: var(--accent-strong);
    font-size: 0.75rem;
    font-weight: 750;
}

.site-disclaimer p {
    max-width: 92ch;
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 1.75;
}

.page-heading,
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
}

.page-heading {
    margin-bottom: var(--space-xl);
}

.page-heading h1,
.section-heading h2 {
    margin: 0;
    color: var(--ink);
    font-weight: 750;
    line-height: 1.2;
    text-wrap: balance;
}

.page-heading h1 {
    font-size: 1.75rem;
}

.page-heading p,
.section-heading p {
    max-width: 60ch;
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: 0.8125rem;
    text-wrap: pretty;
}

.date-toolbar,
.segmented-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.control-button,
.date-field,
.segmented-control button {
    min-height: 44px;
    border: 0;
    border-right: 1px solid var(--line);
    color: var(--ink-secondary);
    background: transparent;
}

.control-button,
.segmented-control button {
    padding: 0 var(--space-lg);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 650;
    transition: color 160ms ease, background-color 160ms ease;
}

.control-button:last-child,
.segmented-control button:last-child {
    border-right: 0;
}

.control-button:hover,
.segmented-control button:hover {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.control-button.is-primary,
.segmented-control button.is-active {
    color: #f5faf7;
    background: var(--accent);
}

.date-field {
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
}

.date-field input {
    width: 132px;
    border: 0;
    color: var(--ink);
    background: transparent;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    outline: 0;
}

.list-surface,
.match-summary,
.detail-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.list-header {
    border-bottom: 1px solid var(--line);
}

.list-header > div:first-child {
    display: flex;
    min-height: 58px;
    align-items: baseline;
    gap: var(--space-md);
    padding: 0 20px;
}

.list-header h2 {
    margin: 0;
    font-size: 1rem;
}

.list-header span {
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.list-columns,
.match-row {
    display: grid;
    grid-template-columns: repeat(3, 82px) minmax(280px, 1fr) 134px 118px 78px 76px 116px 16px;
    gap: 14px;
    align-items: center;
}

.list-columns {
    min-height: 36px;
    padding: 0 20px;
    color: var(--ink-muted);
    background: var(--surface-subtle);
}

.list-columns span:nth-child(4),
.list-columns span:nth-child(5),
.list-columns span:nth-child(6),
.list-columns span:nth-child(7),
.list-columns span:nth-child(8),
.list-columns span:nth-child(9) {
    text-align: center;
}

.match-group + .match-group {
    border-top: var(--space-sm) solid var(--page);
}

.match-group-heading {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-strong);
}

.match-group-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 750;
}

.match-group-heading span {
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.match-row {
    min-height: 76px;
    padding: var(--space-md) 20px;
    border-bottom: 1px solid var(--line);
    transition: background-color 160ms ease, box-shadow 160ms ease;
    animation: row-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.match-row:last-child {
    border-bottom: 0;
}

.match-row:hover {
    position: relative;
    z-index: 1;
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--accent);
}

.match-time strong {
    display: block;
    font-variant-numeric: tabular-nums;
}

.match-time strong {
    font-size: 1rem;
    line-height: 1.2;
}

.match-number {
    overflow: hidden;
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-league {
    overflow: hidden;
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-teams {
    display: grid;
    width: min(100%, 520px);
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    align-items: center;
    justify-self: center;
    gap: var(--space-md);
}

.match-teams strong {
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-teams strong:first-child {
    text-align: right;
}

.match-teams strong:last-child {
    text-align: left;
}

.match-score {
    color: var(--ink);
    text-align: center;
    font-size: 1rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.match-score.is-pending {
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.match-odds {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--ink-secondary);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.match-odds.is-empty {
    color: var(--ink-muted);
    text-align: center;
}

.match-odds-line {
    display: grid;
    grid-template-columns: 30px repeat(3, minmax(0, 1fr));
    align-items: baseline;
    gap: var(--space-xs);
}

.match-odds-line span {
    color: var(--ink-muted);
    font-size: 0.625rem;
}

.match-odds-line b {
    overflow: hidden;
    font-weight: 650;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-odds-line:last-child b {
    color: var(--ink);
    font-weight: 750;
}

.match-confidence {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.match-confidence-value {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-sm);
}

.match-confidence-value span {
    font-size: 0.8125rem;
    font-weight: 750;
}

.match-confidence-value strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.1;
}

.match-detail-page .header-inner,
.match-detail-page .page-shell,
.match-detail-page .site-disclaimer-inner {
    width: min(1800px, calc(100% - 48px));
}

.match-confidence small {
    overflow: hidden;
    max-width: 100%;
    color: var(--ink-muted);
    font-size: 0.625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-confidence.is-win .match-confidence-value span,
.confidence-score.is-win .confidence-score-value strong {
    color: var(--chart-win);
}

.match-confidence.is-draw .match-confidence-value span,
.confidence-score.is-draw .confidence-score-value strong {
    color: var(--chart-draw);
}

.match-confidence.is-loss .match-confidence-value span,
.confidence-score.is-loss .confidence-score-value strong {
    color: var(--chart-loss);
}

.match-confidence.is-empty strong {
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.match-confidence.is-unknown .match-confidence-value span {
    color: var(--ink-secondary);
    font-size: 0.75rem;
}

.match-derived-score {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.match-derived-score span {
    font-size: 0.8125rem;
    font-weight: 750;
}

.match-derived-score strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.1;
}

.match-derived-star {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    align-self: center;
}

.match-derived-score.is-win span { color: var(--chart-win); }
.match-derived-score.is-draw span { color: var(--chart-draw); }
.match-derived-score.is-loss span { color: var(--chart-loss); }

.match-derived-score.is-empty {
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.confidence-score.is-unknown .confidence-score-value strong {
    color: var(--ink-secondary);
    font-size: 0.875rem;
}

.status-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--accent-strong);
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
}

.status-text::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
}

.status-text.is-finished {
    color: var(--ink-muted);
}

.status-text.is-finished::before {
    background: var(--ink-muted);
}

.status-text.is-live {
    color: var(--danger);
}

.status-text.is-live::before {
    background: var(--danger);
    box-shadow: 0 0 0 4px var(--danger-soft);
}

.match-data {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--ink-muted);
    font-size: 0.71875rem;
}

.match-data strong {
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}

.match-data .is-complete {
    color: var(--accent-strong);
}

.row-arrow {
    color: var(--ink-muted);
    font-size: 1.25rem;
    line-height: 1;
    transition: color 160ms ease, transform 160ms ease;
}

.match-row:hover .row-arrow {
    color: var(--accent);
    transform: translateX(2px);
}

.back-to-top {
    position: fixed;
    right: var(--space-xl);
    bottom: var(--space-xl);
    z-index: 20;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius);
    opacity: 0;
    color: #f5faf7;
    background: var(--accent);
    box-shadow: var(--shadow-md);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    place-items: center;
    pointer-events: none;
    transform: translateY(var(--space-sm));
    transition: opacity 160ms ease, background-color 160ms ease, transform 160ms ease, visibility 160ms ease;
    visibility: hidden;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.back-to-top:hover {
    background: var(--accent-strong);
}

.back-to-top.is-visible:active {
    transform: translateY(1px);
}

.skeleton-row {
    display: grid;
    height: 76px;
    grid-template-columns: repeat(3, 82px) minmax(280px, 1fr) 134px 118px 78px 76px 116px 16px;
    gap: 14px;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
}

.skeleton-row span {
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--surface-strong), #e3e9e6, var(--surface-strong));
    background-size: 200% 100%;
    animation: skeleton 1.3s ease infinite;
}

.empty-state,
.error-state {
    display: grid;
    min-height: 240px;
    place-items: center;
    padding: var(--space-3xl);
    color: var(--ink-muted);
    text-align: center;
    font-size: 0.875rem;
}

.empty-state strong,
.error-state strong {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--ink);
    font-size: 1rem;
}

.retry-button {
    margin-top: var(--space-lg);
}

.back-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    margin-bottom: var(--space-md);
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    font-weight: 650;
    transition: color 160ms ease;
}

.back-link::before {
    margin-right: var(--space-sm);
    content: "‹";
    font-size: 1.25rem;
    line-height: 1;
}

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

.match-summary {
    padding: 20px 28px 0;
}

.summary-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.summary-meta span + span::before {
    margin-right: var(--space-md);
    color: var(--line-strong);
    content: "/";
}

.summary-meta .league-label {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 9px;
    border-radius: 4px;
    color: var(--accent-strong);
    background: var(--accent-soft);
    font-weight: 700;
}

.summary-meta .league-label::before,
.summary-meta .status-label::before {
    content: none;
}

.summary-meta .status-label {
    margin-left: auto;
    color: var(--accent-strong);
    font-weight: 700;
}

.scoreboard {
    display: grid;
    max-width: 720px;
    grid-template-columns: minmax(180px, 1fr) 100px minmax(180px, 1fr);
    align-items: center;
    gap: var(--space-xl);
    margin: 26px auto 22px;
}

.team strong,
.team span {
    display: block;
}

.team strong {
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.25;
}

.team span {
    margin-top: var(--space-xs);
    color: var(--ink-muted);
    font-size: 0.75rem;
}

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

.team-away {
    text-align: left;
}

.score-block {
    text-align: center;
}

.score-block strong,
.score-block small {
    display: block;
}

.score-block strong {
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.score-block i {
    color: var(--ink-muted);
    font-size: 0.875rem;
    font-style: normal;
}

.score-block small {
    margin-top: var(--space-sm);
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.summary-data {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.71875rem;
}

.summary-data span + span::before {
    margin-right: var(--space-xl);
    color: var(--line-strong);
    content: "|";
}

.summary-data strong {
    margin-left: var(--space-xs);
    color: var(--ink-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.detail-tabs {
    display: flex;
    gap: var(--space-2xl);
    margin: var(--space-xl) 0 var(--space-md);
    border-bottom: 1px solid var(--line-strong);
}

.tab-button {
    position: relative;
    min-height: 48px;
    padding: 0;
    border: 0;
    color: var(--ink-muted);
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 650;
}

.tab-button span {
    display: inline-grid;
    min-width: 22px;
    height: 20px;
    place-items: center;
    margin-left: 6px;
    border-radius: 4px;
    color: var(--ink-muted);
    background: var(--surface-strong);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.tab-button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--accent);
    content: "";
    transform: scaleX(0);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-button.is-active {
    color: var(--ink);
}

.tab-button.is-active span {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.tab-button.is-active::after {
    transform: scaleX(1);
}

.detail-panel {
    padding: var(--space-xl);
    opacity: 0;
    transform: translateY(4px);
}

.detail-panel.is-active {
    opacity: 1;
    transform: translateY(0);
    animation: panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.match-confidence .match-signal-line {
    max-width: 150px;
    color: var(--accent-strong);
    font-weight: 700;
}

.match-confidence .match-signal-line.is-conflict {
    color: var(--danger);
}

.market-trace-stage {
    border-top: 1px solid var(--line-strong);
}

.market-trace-stage:last-child {
    border-bottom: 1px solid var(--line-strong);
}

.market-trace-heading {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: 0 var(--space-lg);
    background: var(--surface-subtle);
}

.market-trace-heading strong,
.market-trace-heading span {
    display: block;
}

.market-trace-heading strong {
    color: var(--ink);
    font-size: 0.875rem;
}

.market-trace-heading div > span {
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.market-trace-state {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.market-trace-state.is-final {
    color: var(--accent-strong);
}

.market-trace-score {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.market-score-outcome {
    display: flex;
    min-height: 58px;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.market-score-outcome + .market-score-outcome {
    border-left: 1px solid var(--line);
}

.market-score-outcome span {
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.market-score-outcome strong {
    color: var(--ink);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.market-component-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.8fr) minmax(240px, 1.5fr) minmax(180px, 1fr);
    align-items: center;
    gap: var(--space-lg);
    min-height: 54px;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.market-component-row:last-child {
    border-bottom: 0;
}

.market-component-name strong,
.market-component-name span {
    display: block;
}

.market-component-name strong {
    color: var(--ink-secondary);
    font-size: 0.8125rem;
}

.market-component-name span {
    margin-top: 2px;
    color: var(--accent-strong);
    font-size: 0.6875rem;
}

.market-component-values,
.market-component-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    color: var(--ink-secondary);
    font-size: 0.71875rem;
    font-variant-numeric: tabular-nums;
}

.market-component-meta {
    justify-content: flex-end;
    color: var(--ink-muted);
}

.market-score-breakdown {
    border-top: 1px solid var(--line);
}

.market-score-verdict {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.market-score-verdict span,
.market-score-verdict b {
    color: var(--ink-muted);
    font-size: 0.71875rem;
    font-weight: 600;
}

.market-score-verdict strong {
    min-width: 2em;
    color: var(--ink);
    font-size: 1.25rem;
}

.market-score-verdict b {
    margin-left: auto;
}

.market-score-table {
    overflow-x: auto;
    font-variant-numeric: tabular-nums;
}

.market-score-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.2fr) repeat(3, minmax(92px, 1fr));
    min-width: 430px;
    border-bottom: 1px solid var(--line);
}

.market-score-row > * {
    padding: 9px var(--space-md);
    text-align: right;
}

.market-score-row > * + * {
    border-left: 1px solid var(--line);
}

.market-score-row strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    text-align: left;
}

.market-score-label {
    min-width: 0;
}

.market-score-label strong,
.market-score-label small {
    display: block;
}

.market-score-label small {
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.35;
}

.market-score-row span {
    color: var(--ink-secondary);
    font-size: 0.75rem;
}

.market-score-row:first-child,
.market-score-row.is-final {
    background: var(--surface-subtle);
}

.market-score-row.is-final > * {
    color: var(--ink);
    font-weight: 750;
}

.market-score-row.is-subtotal {
    border-top: 1px solid var(--ink-muted);
    background: var(--surface-subtle);
}

.market-score-row.is-subtotal > * { font-weight: 750; }

.market-score-row .is-positive {
    color: var(--positive);
}

.market-score-row .is-negative {
    color: var(--negative);
}

.market-step-detail-grid {
    border-bottom: 1px solid var(--line);
}

.market-step-detail {
    display: grid;
    grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
    gap: var(--space-lg);
    min-height: 72px;
    padding: var(--space-md) var(--space-lg);
}

.market-step-detail + .market-step-detail {
    border-top: 1px solid var(--line);
}

.market-step-detail-heading strong,
.market-step-detail-heading span {
    display: block;
}

.market-step-detail-heading strong {
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 0.75rem;
}

.market-step-detail-heading span,
.market-step-detail-content span {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    line-height: 1.55;
}

.market-step-detail-content,
.market-step-source,
.market-step-provider-list {
    display: grid;
    gap: 4px;
}

.market-step-detail-content > strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
}

.market-step-detail-content > strong.is-positive {
    color: var(--positive);
}

.market-step-source + .market-step-source {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--line);
}

.market-step-source-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-md);
}

.market-step-source-summary strong {
    color: var(--ink-secondary);
    font-size: 0.71875rem;
}

.market-step-component {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) auto minmax(170px, 1fr) auto;
    align-items: baseline;
    gap: 6px var(--space-md);
    padding: 7px 9px;
    border-left: 2px solid var(--line-strong);
    background: var(--surface-subtle);
    font-variant-numeric: tabular-nums;
}

.market-step-component-name {
    color: var(--ink);
    font-size: 0.75rem;
}

.market-step-component-direction,
.market-step-component-meta {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.market-step-component-direction {
    padding: 2px 6px;
    border: 1px solid var(--line-strong);
    color: var(--ink-secondary);
    font-weight: 700;
}

.market-step-component-score,
.market-step-component-flag {
    color: var(--ink-secondary);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.market-step-component-score.is-positive,
.market-step-component-flag {
    color: var(--positive);
}

.market-step-component-score.is-negative {
    color: var(--negative);
}

.market-step-disclosure summary {
    width: fit-content;
    cursor: pointer;
    color: var(--accent-strong);
    font-size: 0.6875rem;
    font-weight: 700;
}

.market-step-disclosure summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.market-step-provider-list {
    margin-top: 4px;
    padding-left: var(--space-lg);
}

.section-heading {
    align-items: center;
    margin-bottom: 20px;
}

.section-heading h2 {
    font-size: 1.125rem;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
}

.institution-sort-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 650;
}

.institution-sort-control select {
    min-height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-secondary);
    background: var(--surface);
    font: inherit;
    cursor: pointer;
}

.institution-sort-control select:hover,
.institution-sort-control select:focus-visible {
    border-color: var(--accent);
    color: var(--accent-strong);
    outline: 2px solid color-mix(in srgb, var(--accent) 24%, transparent);
    outline-offset: 1px;
}

.comparison-legend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ink-muted);
    font-size: 0.71875rem;
}

.comparison-legend i,
.comparison-legend strong {
    font-style: normal;
    font-weight: 650;
}

.comparison-legend i {
    color: var(--ink-muted);
}

.comparison-legend b {
    color: var(--line-strong);
}

.comparison-legend strong {
    color: var(--ink);
}

.institution-movement-summary {
    margin-bottom: var(--space-lg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.prediction-panel {
    padding-bottom: var(--space-lg);
}

.confidence-overview {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    margin-bottom: var(--space-xl);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: var(--surface-subtle);
}

.confidence-overview.is-empty {
    display: flex;
    min-height: 74px;
    align-items: baseline;
    gap: var(--space-md);
    padding: 0 var(--space-xl);
}

.confidence-empty-title {
    color: var(--ink-secondary);
    font-size: 0.875rem;
}

.confidence-empty-copy {
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.confidence-score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 184px;
    padding: var(--space-xl) var(--space-2xl);
    border-right: 1px solid var(--line);
}

.signal-overview {
    margin-bottom: var(--space-xl);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: var(--surface);
}

.signal-overview-heading {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: var(--space-md) var(--space-xl);
    background: var(--surface-subtle);
}

.signal-overview-heading > div {
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.signal-overview-meta {
    display: grid;
    justify-items: end;
    gap: 5px;
    text-align: right;
}

.signal-overview-heading strong {
    color: var(--ink);
    font-size: 0.875rem;
}

.signal-type-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px 12px;
}

.signal-type-counts span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.signal-type-counts span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
}

.signal-type-counts span.is-reverse::before { background: var(--danger); }
.signal-type-counts span.is-avoid::before { background: var(--chart-draw); }

.signal-direction-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 8px;
    max-width: 100%;
}

.signal-direction-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.signal-direction-group.is-total {
    font-weight: 750;
}

.signal-direction-period {
    color: var(--ink-muted);
    font-size: 0.625rem;
    font-weight: 700;
}

.signal-direction-counts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.signal-direction-counts span.is-win { color: var(--chart-win); }
.signal-direction-counts span.is-draw { color: var(--chart-draw); }
.signal-direction-counts span.is-loss { color: var(--chart-loss); }
.signal-direction-counts span.is-avoid,
.signal-direction-counts span.is-empty { color: var(--ink-muted); }

.signal-direction-separator {
    color: var(--line-strong);
    font-size: 0.75rem;
    line-height: 1;
}

.signal-explanation,
.signal-empty-copy {
    margin: 0;
    padding: var(--space-md) var(--space-xl);
    border-top: 1px solid var(--line);
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.confidence-label {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.confidence-score-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
    margin: var(--space-sm) 0 var(--space-lg);
    font-variant-numeric: tabular-nums;
}

.confidence-score-value strong {
    font-size: 1.375rem;
    line-height: 1;
}

.confidence-score-value b {
    color: var(--ink);
    font-size: 2.25rem;
    line-height: 1;
}

.confidence-calculation {
    display: flex;
    gap: var(--space-lg);
}

.confidence-inline-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.confidence-inline-metric i {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-style: normal;
}

.confidence-inline-metric strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.confidence-final-scores {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(44px, auto));
    width: fit-content;
    align-items: baseline;
    gap: 6px var(--space-lg);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.confidence-final-label {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.confidence-final-score {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.confidence-final-score i {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-style: normal;
}

.confidence-final-score strong {
    font-size: 0.8125rem;
}

.confidence-derived-scores {
    display: grid;
    gap: 7px;
    width: fit-content;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.confidence-derived-row {
    display: grid;
    grid-template-columns: 40px repeat(3, minmax(44px, auto));
    align-items: baseline;
    gap: 6px var(--space-lg);
}

.confidence-derived-row > i {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-style: normal;
}

.confidence-derived-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.confidence-derived-heading i {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-style: normal;
}

.confidence-derived-heading small {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    white-space: normal;
}

.confidence-derived-spacer {
    min-width: 0;
}

.confidence-derived-value {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.confidence-derived-value b {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 400;
}

.confidence-derived-value strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
}

.confidence-final-score.is-win strong {
    color: var(--chart-win);
}

.confidence-final-score.is-draw strong {
    color: var(--chart-draw);
}

.confidence-final-score.is-loss strong {
    color: var(--chart-loss);
}

.confidence-content {
    min-width: 0;
    padding: var(--space-lg) var(--space-xl);
}

.confidence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    margin: 0 0 var(--space-md);
    padding: 0 0 var(--space-md);
    border-bottom: 1px solid var(--line);
}

.confidence-meta-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.confidence-meta dt {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.confidence-meta dd {
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.confidence-exception {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    color: var(--danger);
    background: var(--danger-soft);
    font-size: 0.75rem;
}

.confidence-tag-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
}

.confidence-tag-group h3 {
    margin: 0 0 var(--space-sm);
    font-size: 0.75rem;
}

.confidence-tag-group.is-positive h3,
.confidence-tag-group.is-positive li b {
    color: var(--accent-strong);
}

.confidence-tag-group.is-negative h3,
.confidence-tag-group.is-negative li b {
    color: var(--danger);
}

.confidence-tag-group ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.confidence-tag-group li {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.25;
}

.confidence-tag-group.is-positive li {
    border-color: var(--accent-soft);
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.confidence-tag-group.is-negative li {
    border-color: var(--danger-soft);
    color: var(--danger);
    background: var(--danger-soft);
}

.confidence-tag-group li span {
    white-space: nowrap;
}

.confidence-tag-group li small {
    color: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    opacity: 0.72;
}

.confidence-tag-group li b {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.confidence-tag-empty {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.prediction-verdict {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.prediction-verdict span {
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.prediction-verdict strong {
    font-size: 1rem;
    line-height: 1;
}

.prediction-verdict b {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.prediction-verdict.is-win strong,
.prediction-probability-labels .is-win strong,
.prediction-table .is-leading.is-win {
    color: var(--chart-win);
}

.prediction-verdict.is-draw strong,
.prediction-probability-labels .is-draw strong,
.prediction-table .is-leading.is-draw {
    color: var(--chart-draw);
}

.prediction-verdict.is-loss strong,
.prediction-probability-labels .is-loss strong,
.prediction-table .is-leading.is-loss {
    color: var(--chart-loss);
}

.prediction-indices {
    padding: var(--space-xl) var(--space-2xl);
    border-bottom: 1px solid var(--line);
}

.prediction-indices h3 {
    margin: 0 0 var(--space-lg);
    font-size: 0.875rem;
}

.prediction-index-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
}

.prediction-index-team + .prediction-index-team {
    padding-left: var(--space-2xl);
    border-left: 1px solid var(--line);
}

.prediction-index-team-heading {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.prediction-index-team-heading span {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 650;
}

.prediction-index-team-heading strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prediction-index-team-heading > :last-child {
    text-align: right;
}

.prediction-index-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--surface-subtle);
}

.prediction-index-metric {
    min-width: 0;
    padding: var(--space-lg);
}

.prediction-index-team.is-home .prediction-index-metric {
    text-align: right;
}

.prediction-index-metric + .prediction-index-metric {
    border-left: 1px solid var(--line);
}

.prediction-index-label {
    display: block;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 650;
}

.prediction-index-value {
    display: block;
    margin: var(--space-xs) 0 var(--space-md);
    color: var(--accent);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.prediction-index-metric.is-expected .prediction-index-value {
    color: var(--accent-strong);
}

.prediction-goal-calibration {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.55fr);
    margin-top: var(--space-xl);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.prediction-goal-calibration-item {
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    text-align: center;
}

.prediction-goal-calibration-item + .prediction-goal-calibration-item {
    border-left: 1px solid var(--line);
}

.prediction-goal-calibration-item span,
.prediction-goal-calibration-item small {
    display: block;
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.prediction-goal-calibration-item strong {
    display: block;
    margin: var(--space-xs) 0;
    color: var(--ink-secondary);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.prediction-goal-calibration-item.is-final strong {
    color: var(--accent-strong);
}

.prediction-goal-outcomes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.prediction-goal-outcome {
    min-width: 116px;
}

.prediction-goal-calibration-item .prediction-goal-outcome strong {
    margin-bottom: 2px;
}

.prediction-goal-calibration-item .prediction-goal-contribution {
    color: var(--ink-secondary);
    white-space: nowrap;
}

.prediction-index-sources {
    display: flex;
    gap: var(--space-md);
    margin: 0;
}

.prediction-index-team.is-home .prediction-index-sources {
    justify-content: flex-end;
}

.prediction-index-sources div {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.prediction-index-sources dt {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.prediction-index-sources dd {
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 780px) {
    .prediction-index-comparison {
        grid-template-columns: minmax(0, 1fr);
    }

    .prediction-index-team + .prediction-index-team {
        padding-top: var(--space-lg);
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

.prediction-distribution {
    padding: var(--space-xl) var(--space-2xl);
}

.prediction-probability-bar {
    display: flex;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--surface-strong);
}

.prediction-probability-bar i {
    display: block;
    height: 100%;
}

.prediction-probability-bar .is-win {
    background: var(--chart-win);
}

.prediction-probability-bar .is-draw {
    background: var(--chart-draw);
}

.prediction-probability-bar .is-loss {
    background: var(--chart-loss);
}

.prediction-probability-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--space-md);
}

.prediction-probability-labels span {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.prediction-probability-labels span:first-child {
    justify-content: flex-start;
}

.prediction-probability-labels span:last-child {
    justify-content: flex-end;
}

.prediction-probability-labels i {
    font-style: normal;
}

.prediction-probability-labels strong {
    color: var(--ink);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.prediction-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.75fr);
    border-top: 1px solid var(--line);
}

.prediction-models,
.prediction-scores {
    padding: var(--space-xl) var(--space-2xl);
}

.prediction-scores {
    border-left: 1px solid var(--line);
}

.prediction-models h3,
.prediction-scores h3 {
    margin: 0 0 var(--space-md);
    font-size: 0.875rem;
}

.prediction-score-group + .prediction-score-group {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line);
}

.prediction-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.prediction-table th,
.prediction-table td {
    height: 42px;
    border-bottom: 1px solid var(--line);
    font-size: 0.8125rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.prediction-table thead th {
    height: 34px;
    color: var(--ink-muted);
    font-size: 0.71875rem;
    font-weight: 600;
}

.prediction-table th:first-child {
    width: 30%;
    text-align: left;
}

.prediction-table tbody th {
    color: var(--ink-secondary);
    font-weight: 600;
}

.prediction-table .is-combined th,
.prediction-table .is-combined td {
    color: var(--ink);
    background: var(--accent-soft);
    font-weight: 750;
}

.prediction-table .is-leading {
    font-weight: 750;
}

.prediction-market-detail {
    padding-top: var(--space-lg);
}

.prediction-market-detail-title {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--ink-secondary);
    font-size: 0.75rem;
}

.prediction-market-detail-rows {
    border-top: 1px solid var(--line);
}

.prediction-market-detail-row {
    display: grid;
    min-height: 34px;
    grid-template-columns: 30% repeat(3, minmax(0, 1fr));
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.prediction-market-detail-row span {
    color: var(--ink-muted);
}

.prediction-market-detail-row b {
    color: var(--ink-secondary);
    font-weight: 600;
    text-align: center;
}

.prediction-market-detail-meta {
    display: block;
    margin-top: var(--space-sm);
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.prediction-scores ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prediction-scores li {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.prediction-scores li strong {
    color: var(--ink);
}

.prediction-scores li span {
    color: var(--ink-muted);
}

.prediction-meta {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: var(--space-xl);
    padding: 0 var(--space-2xl);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.prediction-meta span + span::before {
    margin-right: var(--space-xl);
    color: var(--line-strong);
    content: "/";
}

.movement-summary-heading {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

.movement-summary-heading > strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 750;
}

.movement-legend {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.movement-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.movement-legend-item i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.movement-legend-item i.is-up,
.movement-bar.is-up {
    background: var(--above-return);
}

.movement-legend-item i.is-down,
.movement-bar.is-down {
    background: var(--below-return);
}

.movement-legend-item i.is-above,
.movement-bar.is-above {
    background: var(--above-return);
}

.movement-legend-item i.is-below,
.movement-bar.is-below {
    background: var(--below-return);
}

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

.movement-charts.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.movement-charts.has-total {
    grid-template-columns: repeat(5, minmax(280px, 1fr));
    overflow-x: auto;
}

@media (min-width: 1540px) {
    .movement-charts.has-total {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: visible;
    }
}

.movement-chart {
    padding: 14px 24px 16px;
}

.movement-chart + .movement-chart {
    border-left: 1px solid var(--line);
}

.movement-chart h3 {
    margin: 0 0 10px;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 750;
    text-align: center;
}

.movement-plot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
}

.movement-direction {
    min-width: 0;
}

.movement-direction h4 {
    margin: 0 0 var(--space-sm);
    font-size: 0.6875rem;
    font-weight: 750;
    text-align: center;
}

.movement-direction.is-up h4 {
    color: var(--above-return);
}

.movement-direction.is-down h4 {
    color: var(--below-return);
}

.movement-direction.is-above h4 {
    color: var(--above-return);
}

.movement-direction.is-below h4 {
    color: var(--below-return);
}

.movement-direction-values {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    justify-content: center;
    gap: var(--space-sm);
}

.movement-category {
    display: grid;
    grid-template-rows: 112px 20px;
    gap: var(--space-sm);
    min-width: 0;
}

.movement-category > strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.movement-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 22px 4px 0;
    border-bottom: 1px solid var(--line-strong);
}

.movement-bar {
    position: relative;
    width: 30px;
    height: var(--movement-height);
    min-height: 2px;
    border-radius: 3px 3px 0 0;
}

.movement-bar span {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 4px);
    color: var(--ink-secondary);
    font-size: 0.65625rem;
    font-weight: 750;
    line-height: 1;
    transform: translateX(50%);
}

.average-table td:not(:first-child) {
    height: 58px;
    padding: 0 18px;
    text-align: center;
}

.average-number,
.average-market-cell {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.average-number {
    font-size: 0.9375rem;
}

.average-market-cell {
    min-width: 116px;
    font-size: 0.875rem;
}

.average-number.average-kelly,
.average-number.average-return {
    border-left: 1px solid var(--line-strong);
}

.average-number.average-kelly {
    background: #f8fbf9;
}

.average-number.is-below-return {
    color: var(--below-return);
}

.average-number.is-above-return {
    color: var(--above-return);
}

.segmented-control button {
    min-height: 40px;
    padding: 0 var(--space-lg);
    font-size: 0.75rem;
}

.data-table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.comparison-table {
    min-width: 1680px;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    width: 136px;
}

.data-table.comparison-table th:first-child,
.data-table.comparison-table td:first-child {
    width: 136px;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 42px;
    padding: 0 18px;
    color: var(--ink-secondary);
    background: var(--surface-strong);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.data-table th:first-child,
.data-table td:first-child {
    width: 156px;
    text-align: left;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr {
    transition: background-color 140ms ease;
}

.data-table tbody tr:hover {
    background: var(--surface-subtle);
}

.provider-cell {
    padding: 8px 12px;
    overflow: hidden;
}

.provider-cell strong,
.provider-cell small,
.provider-source {
    display: block;
}

.provider-cell strong {
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.provider-cell small {
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: 0.5625rem;
    line-height: 1.3;
}

.provider-source {
    margin-top: 2px;
    color: var(--accent-strong);
    font-size: 0.625rem;
    font-weight: 700;
}

.metric-comparison-cell {
    padding: 7px 6px;
    text-align: center;
    overflow: hidden;
}

.metric-values {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1fr);
    align-items: baseline;
    gap: 2px;
}

.metric-values span,
.metric-values strong {
    white-space: nowrap;
}

.metric-values .initial-number {
    color: var(--ink-muted);
    font-size: 0.65625rem;
    text-align: right;
}

.metric-values i {
    color: var(--line-strong);
    font-size: 0.5625rem;
    font-style: normal;
}

.metric-values .latest-number {
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 750;
    text-align: left;
}

.metric-comparison-cell > small {
    display: block;
    margin-top: 2px;
    color: var(--ink-secondary);
    font-size: 0.5625rem;
    text-align: center;
    white-space: nowrap;
}

.metric-comparison-cell > small.is-unchanged {
    color: var(--ink-muted);
}

.market-comparison-cell {
    min-width: 0;
    padding: 7px 5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

.market-group-header th {
    height: 34px;
}

.market-group-label {
    font-size: 0.75rem;
    font-weight: 750;
}

.market-group-label.is-odds,
.market-outcome-header .is-odds {
    background: #f4f6f8;
    color: var(--ink-secondary);
}

.market-group-label.is-kelly,
.market-outcome-header .is-kelly {
    background: #edf6f2;
    color: #3f6f5b;
}

.market-group-label.is-kelly,
.market-outcome-header .is-kelly:nth-child(4),
.metric-comparison-cell.metric-kelly:nth-child(5) {
    border-left: 1px solid var(--line-strong);
}

.market-group-label.is-return,
.metric-comparison-cell.metric-return {
    width: 100px;
    border-left: 1px solid var(--line-strong);
}

.market-group-label.is-variance,
.market-outcome-header .is-variance {
    background: #f1f5f2;
    color: #53685b;
}

.market-group-label.is-variance,
.metric-comparison-cell.metric-return + .market-comparison-cell.is-variance {
    border-left: 1px solid var(--line-strong);
}

.market-comparison-cell.is-variance {
    background: #f8faf8;
}

.market-group-label.is-dispersion,
.market-outcome-header .is-dispersion {
    background: #f5f2ec;
    color: #77664d;
}

.market-group-label.is-dispersion,
.metric-comparison-cell.metric-return + .market-comparison-cell.is-dispersion {
    border-left: 1px solid var(--line-strong);
}

.market-comparison-cell.is-dispersion {
    background: #fbfaf7;
}

.market-group-label.is-accuracy,
.market-outcome-header .is-accuracy {
    background: #f0f4f8;
    color: #52616f;
}

.market-group-label.is-accuracy,
.market-outcome-header .is-accuracy:nth-last-child(2),
.provider-accuracy-cell.is-kelly {
    border-left: 1px solid var(--line-strong);
}

.provider-accuracy-cell {
    width: 82px;
    padding: 7px 5px;
    text-align: center;
    overflow: hidden;
}

.provider-accuracy-cell strong,
.provider-accuracy-cell small {
    display: block;
}

.provider-accuracy-cell strong {
    color: var(--ink);
    font-size: 0.6875rem;
    font-weight: 750;
}

.provider-accuracy-cell small {
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: 0.53125rem;
    white-space: nowrap;
}

.market-outcome-header th {
    top: 34px;
    height: 30px;
    font-size: 0.65625rem;
}

.market-metric-values {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
    align-items: baseline;
    gap: 2px;
}

.market-metric-values .initial-number {
    color: var(--ink-muted);
    font-size: 0.625rem;
    text-align: right;
    white-space: nowrap;
}

.market-metric-values i {
    color: var(--line-strong);
    font-size: 0.5rem;
    font-style: normal;
    text-align: center;
}

.market-metric-values .latest-number {
    color: var(--ink);
    font-size: 0.6875rem;
    text-align: left;
    white-space: nowrap;
}

.market-comparison-cell > small {
    display: block;
    margin-top: 2px;
    color: var(--ink-secondary);
    font-size: 0.625rem;
}

.market-comparison-cell.is-kelly {
    background: #f8fbf9;
}

.kelly-trend-summary {
    margin-bottom: var(--space-lg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.kelly-chart-heading {
    display: flex;
    flex-wrap: wrap;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

.kelly-chart-title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md);
}

.kelly-chart-title > strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 750;
}

.kelly-below-return-counts {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kelly-below-return-counts i {
    margin-right: 2px;
    font-style: normal;
}

.kelly-below-return-counts b {
    font-weight: 750;
}

.kelly-below-return-counts .is-win {
    color: var(--chart-win);
}

.kelly-below-return-counts .is-draw {
    color: var(--chart-draw);
}

.kelly-below-return-counts .is-loss {
    color: var(--chart-loss);
}

.kelly-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
}

.kelly-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-family: inherit;
}

.kelly-chart-scale-note {
    margin-left: var(--space-sm);
    color: var(--accent-strong);
    font-weight: 700;
    white-space: nowrap;
}

.kelly-chart-legend-item i {
    width: 20px;
    height: 0;
    border-top: 2px solid currentColor;
}

.kelly-chart-legend-item i.is-win {
    color: var(--chart-win);
}

.kelly-chart-legend-item i.is-draw {
    color: var(--chart-draw);
}

.kelly-chart-legend-item i.is-loss {
    color: var(--chart-loss);
}

.kelly-chart-legend-item i.is-return {
    color: var(--chart-return);
    border-top-style: dashed;
}

.kelly-chart-wrap {
    width: 100%;
    padding: 10px 18px 6px;
}

.kelly-chart-body {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr);
    align-items: stretch;
}

.kelly-aggregate-chart {
    display: grid;
    min-width: 0;
    grid-template-rows: auto 1fr;
    border-left: 1px solid var(--line);
    padding: 14px 24px 16px;
}

.kelly-aggregate-chart h3 {
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 750;
    text-align: center;
}

.kelly-aggregate-plot {
    display: flex;
    min-height: 260px;
    align-items: flex-end;
}

.kelly-aggregate-plot .movement-direction-values {
    width: 100%;
}

@media (max-width: 1180px) {
    .kelly-chart-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .kelly-aggregate-chart {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

.kelly-trend-chart {
    display: block;
    width: 100%;
    height: 300px;
    overflow: visible;
}

.kelly-chart-grid {
    stroke: var(--line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.kelly-chart-axis-label,
.kelly-chart-time-label {
    fill: var(--ink-muted);
    font-family: inherit;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.kelly-trend-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: opacity 160ms ease, stroke-width 160ms ease;
}

.kelly-trend-point {
    stroke: var(--surface-subtle);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.kelly-trend-point.is-win {
    fill: var(--chart-win);
}

.kelly-trend-point.is-draw {
    fill: var(--chart-draw);
}

.kelly-trend-point.is-loss {
    fill: var(--chart-loss);
}

.kelly-trend-point.is-return {
    fill: var(--chart-return);
}

.kelly-trend-value-label {
    fill: var(--ink-secondary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.kelly-trend-line.is-win {
    stroke: var(--chart-win);
}

.kelly-trend-line.is-draw {
    stroke: var(--chart-draw);
}

.kelly-trend-line.is-loss {
    stroke: var(--chart-loss);
}

.kelly-trend-line.is-return {
    stroke: var(--chart-return);
}

.kelly-trend-line.is-return {
    stroke-width: 2.25;
    stroke-dasharray: 7 5;
}

.kelly-expansion-table th:first-child,
.kelly-expansion-table td:first-child {
    width: 250px;
}

.kelly-expansion-table th:nth-child(2),
.kelly-expansion-table td:nth-child(2) {
    width: 90px;
}

.kelly-expansion-table td:not(:first-child) {
    height: 62px;
    padding: 0 18px;
    text-align: center;
}

.kelly-stage-cell {
    padding: 10px 18px;
}

.kelly-stage-cell strong,
.kelly-stage-cell small {
    display: block;
}

.kelly-stage-label {
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    font-weight: 750;
}

.kelly-stage-label.is-initial {
    color: var(--accent-strong);
}

.kelly-stage-cell small {
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: 0.65625rem;
}

.kelly-institution-count,
.kelly-number {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.metric-values .is-below-return,
.kelly-number.is-below-return {
    color: var(--below-return);
}

.metric-values .is-above-return,
.kelly-number.is-above-return {
    color: var(--above-return);
}

.missing-value {
    color: var(--ink-muted) !important;
    font-weight: 500 !important;
}

.team-comparison {
    width: min(920px, 100%);
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.team-comparison-head,
.team-stat-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 170px minmax(180px, 1fr);
    align-items: center;
}

.team-comparison-head {
    min-height: 86px;
    background: var(--surface-subtle);
}

.comparison-team {
    padding: var(--space-lg) var(--space-xl);
}

.comparison-team strong,
.comparison-team span {
    display: block;
}

.comparison-team strong {
    margin: 0;
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 750;
}

.comparison-team span {
    margin-top: 4px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.comparison-team.is-home {
    text-align: right;
}

.comparison-team.is-away {
    text-align: left;
}

.comparison-axis-label {
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    font-weight: 750;
    text-align: center;
}

.team-stat-section h3 {
    height: 36px;
    margin: 0;
    padding: 0 var(--space-xl);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line);
    color: var(--ink-secondary);
    background: var(--surface-strong);
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 36px;
}

.team-stat-row {
    min-height: 44px;
    border-bottom: 1px solid var(--line);
    transition: background-color 140ms ease;
}

.team-stat-row:last-child {
    border-bottom: 0;
}

.team-stat-row:hover {
    background: var(--surface-subtle);
}

.team-stat-value {
    padding: 0 var(--space-xl);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.team-stat-value.is-home {
    text-align: right;
}

.team-stat-value.is-away {
    text-align: left;
}

.team-stat-label {
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.team-results {
    width: min(920px, 100%);
    margin: var(--space-xl) auto 0;
    border-top: 1px solid var(--line-strong);
}

.team-results-section {
    padding-top: var(--space-xl);
}

.team-results-section + .team-results-section {
    margin-top: var(--space-xl);
    border-top: 1px solid var(--line);
}

.team-results-heading,
.recent-team-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
}

.team-results-heading {
    margin-bottom: var(--space-md);
}

.team-results-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 750;
}

.team-results-heading span,
.recent-team-heading span,
.recent-team-heading small {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.match-result-list {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.match-result-list.is-head-to-head {
    width: min(620px, 100%);
    margin: 0 auto;
}

.match-result-row {
    display: grid;
    min-height: 42px;
    grid-template-columns: 78px minmax(0, 1fr) 56px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
    padding: 0 var(--space-lg);
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
    transition: background-color 140ms ease;
}

.result-date {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    text-align: left;
    white-space: nowrap;
}

.match-result-row:last-child {
    border-bottom: 0;
}

.match-result-row:hover {
    background: var(--surface-subtle);
}

.match-result-row strong {
    overflow: hidden;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 650;
    text-overflow: clip;
    white-space: nowrap;
}

.result-home-team {
    text-align: right;
}

.result-away-team {
    text-align: left;
}

.result-score {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 750;
    text-align: center;
}

.recent-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
}

.recent-team-heading {
    min-height: 54px;
    align-items: center;
    padding: 0 var(--space-lg);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--surface-subtle);
}

.recent-team-heading strong,
.recent-team-heading span {
    display: block;
}

.recent-team-heading strong {
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 750;
}

.recent-team-column.is-home .recent-team-heading > div {
    text-align: right;
}

.recent-team-column.is-away .recent-team-heading {
    flex-direction: row-reverse;
}

.recent-team-column.is-away .recent-team-heading > div {
    text-align: left;
}

.recent-team-column .match-result-list {
    border-radius: 0 0 var(--radius) var(--radius);
}

.intelligence-data {
    width: min(1040px, 100%);
    margin: 0 auto;
}

.intelligence-overview {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: 0 var(--space-lg);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.intelligence-overview strong,
.intelligence-overview span {
    display: block;
}

.intelligence-overview strong {
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 750;
}

.intelligence-overview span,
.intelligence-overview time {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.ai-intelligence-state {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: 0 var(--space-lg);
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.ai-intelligence-state strong {
    color: var(--ink);
    font-size: 0.8125rem;
}

.ai-intelligence-state span {
    color: var(--ink-secondary);
    font-size: 0.75rem;
}

.ai-intelligence-state.is-failed span {
    color: var(--danger);
}

.ai-intelligence-summary {
    border-bottom: 1px solid var(--line-strong);
}

.ai-intelligence-heading {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: 0 var(--space-lg);
}

.ai-intelligence-heading h3,
.ai-intelligence-heading span {
    display: block;
}

.ai-intelligence-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 750;
}

.ai-intelligence-heading span,
.ai-intelligence-heading time {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.ai-intelligence-lead {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-xs) var(--space-xl);
    padding: var(--space-lg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.ai-intelligence-lead > p {
    margin: 0;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.7;
}

.ai-intelligence-lead > small {
    grid-column: 2;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 1.7;
}

.ai-balance {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 750;
}

.ai-balance.is-home,
.ai-balance.is-away {
    color: var(--accent-strong);
}

.ai-balance.is-uncertain {
    color: var(--warning);
}

.ai-team-summary {
    padding: var(--space-xl) var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.ai-team-summary-heading {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-xl);
    margin-bottom: var(--space-md);
}

.ai-team-summary-heading strong,
.ai-team-summary-heading span {
    display: block;
}

.ai-team-summary-heading strong {
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 750;
}

.ai-team-summary-heading span {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.ai-team-summary-heading p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 1.7;
}

.ai-intelligence-item-list {
    margin-left: calc(176px + var(--space-xl));
    border-top: 1px solid var(--line);
}

.ai-intelligence-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--line);
}

.ai-intelligence-item:last-child {
    border-bottom: 0;
}

.ai-intelligence-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.ai-intelligence-item-meta span {
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--ink-muted);
    background: var(--surface-strong);
    font-size: 0.53125rem;
    white-space: nowrap;
}

.ai-intelligence-item-meta .is-beneficial {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.ai-intelligence-item-meta .is-adverse {
    color: var(--danger);
    background: var(--danger-soft);
}

.ai-intelligence-item-meta .is-uncertain {
    color: var(--warning);
    background: var(--warning-soft);
}

.ai-intelligence-item h4 {
    margin: 0;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 750;
}

.ai-intelligence-item > p {
    margin: 3px 0 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 1.7;
}

.ai-intelligence-inline-empty {
    margin: var(--space-lg) 0 0;
    color: var(--ink-muted);
    font-size: 0.75rem;
}

.ai-linked-section {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 0 var(--space-xl);
    padding: var(--space-xl) var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.ai-linked-section:last-child {
    border-bottom: 0;
}

.ai-linked-section > h4 {
    grid-row: 1 / span 20;
    margin: 0;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 750;
}

.ai-linked-section.is-conflict > h4 {
    color: var(--warning);
}

.ai-linked-item {
    grid-column: 2;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--line);
}

.ai-linked-item p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 1.7;
}

.ai-evidence {
    margin-top: var(--space-xs);
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.ai-evidence summary {
    width: fit-content;
    cursor: pointer;
    transition: color 180ms ease-out;
}

.ai-evidence summary:hover,
.ai-evidence summary:focus-visible {
    color: var(--accent-strong);
}

.ai-evidence ul {
    margin: var(--space-sm) 0 0;
    padding-left: 18px;
    color: var(--ink-secondary);
    line-height: 1.65;
}

.ai-evidence li + li {
    margin-top: var(--space-xs);
}

.intelligence-source-divider {
    padding: var(--space-xl) 0 var(--space-sm);
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.intelligence-block {
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--line);
}

.intelligence-block:last-child {
    border-bottom-color: var(--line-strong);
}

.intelligence-block-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.intelligence-block-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 750;
}

.intelligence-block-heading span {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.intelligence-side-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.intelligence-side {
    min-width: 0;
    padding: var(--space-lg) var(--space-xl);
}

.intelligence-side + .intelligence-side {
    border-left: 1px solid var(--line);
}

.intelligence-side > h4 {
    margin: 0 0 var(--space-md);
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 750;
}

.intelligence-side.is-home > h4,
.intelligence-side.is-home .lineup-meta,
.intelligence-side.is-home .lineup-player-list li {
    text-align: right;
}

.intelligence-inline-empty {
    margin: var(--space-lg) 0;
    color: var(--ink-muted);
    font-size: 0.75rem;
    text-align: center;
}

.intelligence-person-row {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    border-bottom: 1px solid var(--line);
}

.intelligence-person-row:last-child {
    border-bottom: 0;
}

.intelligence-side.is-home .intelligence-person-row,
.intelligence-side.is-home .intelligence-clue-row {
    flex-direction: row-reverse;
}

.intelligence-side.is-home .intelligence-person-row > div,
.intelligence-side.is-home .intelligence-clue-row p {
    text-align: right;
}

.intelligence-person-row strong,
.intelligence-person-row small {
    display: block;
}

.intelligence-person-row strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.intelligence-person-row small {
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.intelligence-state,
.clue-category {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.intelligence-state {
    color: var(--danger);
    background: var(--danger-soft);
}

.intelligence-clue-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--line);
}

.intelligence-clue-row:last-child {
    border-bottom: 0;
}

.intelligence-clue-row p {
    max-width: 68ch;
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.clue-category.is-positive {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.clue-category.is-negative {
    color: var(--danger);
    background: var(--danger-soft);
}

.clue-category.is-neutral {
    color: var(--ink-muted);
    background: var(--surface-strong);
}

.intelligence-prose-list {
    width: min(78ch, 100%);
    margin: 0 auto;
}

.intelligence-prose-list p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: 0.8125rem;
    line-height: 1.8;
    text-wrap: pretty;
}

.intelligence-prose-list p + p {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--line);
}

.featured-intelligence-list {
    border-top: 1px solid var(--line);
}

.featured-intelligence-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 2px var(--space-xl);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--line);
}

.featured-intelligence-meta {
    display: flex;
    grid-row: 1 / 3;
    align-items: flex-start;
    gap: var(--space-xs);
}

.featured-intelligence-meta span {
    padding: 3px 6px;
    border-radius: 4px;
    color: var(--ink-muted);
    background: var(--surface-strong);
    font-size: 0.625rem;
    white-space: nowrap;
}

.featured-intelligence-item h4,
.featured-intelligence-item p {
    grid-column: 2;
}

.featured-intelligence-item h4 {
    margin: 0;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 750;
}

.featured-intelligence-item p {
    width: 100%;
    margin: var(--space-xs) 0 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    line-height: 1.7;
}

.lineup-summary + .lineup-summary {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line);
}

.lineup-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.intelligence-side.is-home .lineup-meta {
    flex-direction: row-reverse;
}

.lineup-meta strong {
    color: var(--ink-secondary);
    font-size: 0.75rem;
}

.lineup-meta span {
    color: var(--ink-muted);
    font-size: 0.6875rem;
}

.lineup-player-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-lg);
    margin: 0;
    padding: 0;
    color: var(--ink-secondary);
    font-size: 0.75rem;
    list-style-position: inside;
}

.detail-loading {
    min-height: 150px;
    padding-top: var(--space-3xl);
    color: var(--ink-muted);
    text-align: center;
    font-size: 0.8125rem;
}

.detail-loading[hidden] {
    display: none;
}

@keyframes row-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (max-width: 780px) {
    html {
        min-width: 0;
    }

    .header-inner,
    .page-shell,
    .site-disclaimer-inner {
        width: calc(100% - 32px);
    }

    .brand {
        gap: var(--space-sm);
    }

    .account-menu {
        gap: var(--space-xs);
        margin-left: var(--space-xs);
    }

    .nav-user {
        max-width: 96px;
    }

    .nav-link,
    .logout-button {
        padding-right: var(--space-sm);
        padding-left: var(--space-sm);
    }

    .page-shell {
        padding-top: var(--space-lg);
    }

    .match-summary {
        padding: var(--space-lg) var(--space-lg) 0;
    }

    .summary-meta,
    .summary-data {
        flex-wrap: wrap;
    }

    .summary-meta .status-label {
        margin-left: 0;
    }

    .scoreboard {
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
        gap: var(--space-sm);
        margin: var(--space-xl) auto;
    }

    .team strong {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    .score-block strong {
        font-size: 1.25rem;
    }

    .summary-data {
        gap: var(--space-sm) var(--space-lg);
        padding: var(--space-sm) 0;
    }

    .summary-data span + span::before {
        margin-right: var(--space-lg);
    }

    .detail-tabs {
        gap: var(--space-xl);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .detail-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .detail-panel {
        padding: var(--space-lg);
    }

    .market-trace-heading {
        align-items: flex-start;
        padding: var(--space-md);
    }

    .market-component-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .market-component-meta {
        justify-content: flex-start;
    }

    .market-score-verdict {
        padding: var(--space-sm) var(--space-md);
    }

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

    .market-step-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .market-step-component {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .market-step-component-meta {
        grid-column: 1 / -1;
    }

    .market-score-outcome {
        min-height: 52px;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: var(--space-sm);
    }

    .market-score-outcome strong {
        font-size: 1rem;
    }

    .site-disclaimer-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}