/* ========================================
   World Cup 2026 Stats — Global Styles
   ======================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #0f1322;
    --bg-card: #141829;
    --bg-card-hover: #1a1f36;
    --card-bg: #141829;
    --text-primary: #f0f0f0;
    --text-secondary: #8892a4;
    --text-muted: #5a6478;
    --accent: #e63946;
    --accent-hover: #ff4d5a;
    --accent-2: #1d8cf8;
    --accent-2-hover: #3a9dff;
    --gold: #f5a623;
    --green: #2dce89;
    --border: #1e2438;
    --border-light: #2a3050;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --stripe: rgba(255, 255, 255, 0.03);
    --connector-color: rgba(255, 255, 255, 0.2);
    --transition: 0.2s ease;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

[data-theme="light"] {
    --bg-primary: #f5f6fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f1f5;
    --card-bg: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #5a6178;
    --text-muted: #8e95a8;
    --accent: #d62839;
    --accent-hover: #e63946;
    --accent-2: #1565d8;
    --accent-2-hover: #1d8cf8;
    --gold: #996600;
    --green: #1a9f5c;
    --border: #dfe2ea;
    --border-light: #c8cdd8;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --stripe: rgba(0, 0, 0, 0.03);
    --connector-color: rgba(0, 0, 0, 0.2);
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] body {
    background: linear-gradient(165deg, rgba(255, 210, 0, 0.18) 0%, rgba(255, 200, 0, 0.08) 35%, var(--bg-primary) 65%);
    background-attachment: fixed;
}

main {
    flex: 1;
}

a {
    color: var(--accent-2);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-2-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
}

ul {
    list-style: none;
}

/* --- Container --- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* --- Header --- */
.site-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 1.2rem;
}

.logo:hover {
    color: var(--text-primary);
}

.logo-icon {
    font-size: 1.5rem;
}

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

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

.nav-list {
    display: flex;
    gap: 0.25rem;
}

.nav-list a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all var(--transition);
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--text-primary);
    background: var(--bg-card);
}

/* --- "More" nav dropdown --- */
.nav-more {
    position: relative;
}

.nav-more__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.nav-more__toggle:hover,
.nav-more__toggle.active,
.nav-more.open .nav-more__toggle {
    color: var(--text-primary);
    background: var(--bg-card);
}

.nav-more__toggle svg {
    transition: transform var(--transition);
}

.nav-more.open .nav-more__toggle svg {
    transform: rotate(180deg);
}

.nav-more__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
    overflow: hidden;
}

.nav-more.open .nav-more__dropdown {
    display: block;
}

.nav-more__item {
    display: block;
    padding: 0.6rem 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all var(--transition);
}

.nav-more__item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.nav-more__item.active {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.lang-switch {
    position: relative;
    margin-left: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    transition: all var(--transition);
}

.lang-toggle:hover {
    border-color: var(--accent);
}

.lang-toggle svg {
    transition: transform var(--transition);
}

.lang-switch.open .lang-toggle svg {
    transform: rotate(180deg);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
    overflow: hidden;
}

.lang-switch.open .lang-dropdown {
    display: block;
}

.lang-option {
    display: block;
    padding: 0.55rem 0.85rem;
    color: var(--text-secondary);
    transition: all var(--transition);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.8rem;
}

.lang-option:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.lang-option.active {
    color: var(--accent);
    cursor: default;
    font-weight: 700;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
}

.theme-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Show sun in dark mode, moon in light mode */
.theme-icon-moon { display: none; }
.theme-icon-sun  { display: block; }

[data-theme="light"] .theme-icon-moon { display: block; }
[data-theme="light"] .theme-icon-sun  { display: none; }

/* --- Hero --- */
.hero {
    text-align: center;
    padding: 4rem 0 3rem;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--gold) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-weight: 500;
}

/* --- Countdown --- */
.countdown {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    min-width: 90px;
}

.countdown-number {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--gold);
}

.countdown-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

/* --- Cluster Cards --- */
.cluster-cards {
    padding: 3rem 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.cluster-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    transition: all var(--transition);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

.cluster-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: height var(--transition);
}

.cluster-card--teams::before       { background: var(--accent-2); }
.cluster-card--groups::before      { background: var(--green); }
.cluster-card--schedule::before    { background: var(--gold); }
.cluster-card--bracket::before     { background: var(--accent); }
.cluster-card--stadiums::before    { background: #a855f7; }
.cluster-card--predictions::before { background: #f472b6; }
.cluster-card--matches::before     { background: var(--accent); }

.cluster-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}

.cluster-card:hover::before {
    height: 4px;
}

.cluster-card__icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.cluster-card__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.cluster-card__desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
    margin-bottom: 1rem;
}

.cluster-card__cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-2);
    transition: color var(--transition);
}

.cluster-card:hover .cluster-card__cta {
    color: var(--accent-2-hover);
}

/* --- Quick Stats --- */
.quick-stats {
    padding: 3rem 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: var(--font-mono);
    color: var(--gold);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    text-align: center;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: white;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* --- Breadcrumbs --- */
.breadcrumbs {
    padding: 0.75rem 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.breadcrumbs__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
}
.breadcrumbs__item + .breadcrumbs__item::before {
    content: '›';
    margin-right: 0.35rem;
    color: var(--text-secondary);
    font-weight: 700;
}
.breadcrumbs__item a {
    color: var(--accent);
    text-decoration: none;
}
.breadcrumbs__item a:hover {
    text-decoration: underline;
}
.breadcrumbs__item span[aria-current] {
    color: var(--text-secondary);
}

/* --- Page Header (for inner pages) --- */
.page-header {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.page-header h1 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.page-header .page-intro {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.time-note {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    margin-top: 0.5rem;
}

.tz-detected {
    white-space: nowrap;
}

/* --- Cards (generic) --- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: all var(--transition);
}

.card:hover {
    border-color: var(--border-light);
}

/* --- Team Card --- */
.team-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    transition: all var(--transition);
    color: var(--text-primary);
}

.team-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
    transform: translateX(4px);
}

.team-card__flag {
    width: 40px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.team-card__name {
    font-weight: 700;
    font-size: 1rem;
    flex: 1;
}

.team-card__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- Coach Card (index page) --- */
.coach-card {
    display: flex;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    transition: all var(--transition);
    color: var(--text-primary);
    text-decoration: none;
}

.coach-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.coach-card__flag {
    flex: 0 0 60px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.coach-card__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coach-card__body {
    flex: 1;
    min-width: 0;
}

.coach-card__name {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.coach-card__team {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.coach-card__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- Coach hero + detail page --- */
.coach-hero {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
}

.coach-hero__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.coach-hero__flag {
    flex: 0 0 96px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.coach-hero__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coach-hero__text {
    flex: 1;
    min-width: 200px;
}

.coach-hero__name {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 0.4rem;
}

.coach-hero__role {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 0.25rem;
}

.coach-hero__role a {
    color: var(--accent-2);
    text-decoration: none;
}

.coach-hero__role a:hover {
    text-decoration: underline;
}

.coach-hero__meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.coach-bio p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.coach-achievements {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coach-achievements li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.coach-achievements li:last-child {
    border-bottom: none;
}

/* --- Match Card --- */
.match-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    transition: all var(--transition);
    color: var(--text-primary);
}

.match-card:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}

.match-card__teams {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.match-card__team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}

.match-card__team:first-child {
    justify-content: flex-start;
    text-align: left;
}

.match-card__team:last-child {
    justify-content: flex-end;
    text-align: right;
}

.match-card__vs {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    text-align: center;
    min-width: 2rem;
}

.match-card__score {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-mono);
    text-align: center;
    color: var(--gold);
    flex-shrink: 0;
    min-width: 4rem;
}

.match-card__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- Date Group (Schedule) --- */
.date-group {
    margin-bottom: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.date-group__header {
    padding: 0.75rem 1.25rem;
    background: var(--stripe);
    border-bottom: 1px solid var(--border);
}

.date-group__header strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.date-group__header span {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: 0.75rem;
}

.match-row {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    transition: background var(--transition);
}

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

.match-row:hover {
    background: var(--stripe);
    color: var(--text-primary);
}

/* --- Stadium Card --- */
.stadium-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
    color: var(--text-primary);
}

.stadium-card:hover {
    border-color: var(--border-light);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

.stadium-card__image {
    width: 100%;
    height: 180px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.stadium-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stadium-card__body {
    padding: 1.25rem;
}

.stadium-card__name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.stadium-card__location {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stadium-card__capacity {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* --- Stadium Description --- */
.stadium-description {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.stadium-description__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.75;
}

/* --- Team Analysis & Key Players --- */
.team-analysis-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    background: var(--card-bg);
}

.team-analysis-text {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
    text-align: justify;
    margin: 0;
}

.key-players-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.key-player-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}

.key-player-card__name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.key-player-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.key-player-card__position {
    background: var(--accent-2);
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .key-players-grid {
        grid-template-columns: 1fr;
    }
}

/* --- WC History (team page) --- */
.wc-history-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.wc-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    min-width: 120px;
    text-align: center;
    flex: 1;
}

.wc-stat-card--gold   { border-top: 3px solid #f4c430; }
.wc-stat-card--silver { border-top: 3px solid #b0b8c1; }
.wc-stat-card--bronze { border-top: 3px solid #cd7f32; }

.wc-stat-card__count {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.wc-stat-card--gold   .wc-stat-card__count { color: #f4c430; }
.wc-stat-card--silver .wc-stat-card__count { color: #b0b8c1; }
.wc-stat-card--bronze .wc-stat-card__count { color: #cd7f32; }

.wc-stat-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.wc-stat-card__years {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.wc-allstats-title,
.wc-scorers-title {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
}

.wc-allstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.wc-allstats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    text-align: center;
}

.wc-allstats__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.wc-allstats__label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wc-narrative {
    margin: 0.75rem 0 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm, 6px);
}

.wc-narrative p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

.wc-scorers {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wc-scorer-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    font-size: 0.9rem;
}

.wc-scorer-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
}

.wc-scorer-goals {
    font-weight: 700;
    color: #f4c430;
}

.wc-scorer-period {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- FAQ Section --- */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.faq-item__question {
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.faq-item__question::before {
    content: '+';
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-2);
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}
.faq-item[open] .faq-item__question::before {
    content: '−';
}
.faq-item__question::-webkit-details-marker {
    display: none;
}
.faq-item__answer {
    padding: 0 1.25rem 1rem 3rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- Badge / Tag --- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--live {
    background: var(--accent);
    color: white;
    animation: pulse 2s infinite;
}

.badge--finished {
    background: var(--green);
    color: white;
}

.badge--scheduled {
    background: var(--border-light);
    color: var(--text-secondary);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --- Section title --- */
.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border);
}

/* --- Confederation Section --- */
.confederation-section {
    margin-bottom: 2.5rem;
}

.confederation-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Info Table --- */
.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table tr {
    border-bottom: 1px solid var(--border);
}

.info-table td {
    padding: 0.75rem 0;
}

.info-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    width: 140px;
}

/* --- Team Hero (show page) --- */
.team-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.team-hero__flag {
    width: 64px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid var(--border);
    object-fit: cover;
}

/* --- Match Hero (show page) --- */
.match-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 1rem 0;
}

.match-hero__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.match-hero__flag {
    width: 72px;
    height: 54px;
    border-radius: 6px;
    border: 1px solid var(--border);
    object-fit: cover;
}

.match-hero__name {
    font-weight: 700;
    font-size: 1.2rem;
}

.match-hero__center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.match-hero__score {
    font-size: 3rem;
    font-weight: 900;
    font-family: var(--font-mono);
    color: var(--gold);
}

.match-hero__time {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

/* --- Prediction Row --- */
.prediction-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    transition: all var(--transition);
}

.prediction-row:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.prediction-rank {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-muted);
    min-width: 1.5rem;
    text-align: center;
}

.prediction-name {
    font-weight: 700;
    white-space: nowrap;
}
.prediction-name-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 140px;
    flex-shrink: 0;
    color: var(--text-primary);
    text-decoration: none;
}
.prediction-name-link:hover .prediction-name { color: var(--accent); }

.prediction-bar-wrapper {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.prediction-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-2), var(--gold));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.prediction-prob {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--gold);
    min-width: 50px;
    text-align: right;
}

.prediction-odds {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 60px;
    text-align: right;
}

/* --- Analysis Cards --- */
.analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.analysis-card,
.analysis-card--dark-horse {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.analysis-card--dark-horse {
    border-left: 3px solid var(--gold);
}

.analysis-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.analysis-card__flag {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.analysis-card__name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.analysis-card__badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
    background: rgba(245, 166, 35, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.analysis-card__odds {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.analysis-card__text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .analysis-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Methodology Cards --- */
.methodology-grid {
    margin-bottom: 2rem;
}

.methodology-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color var(--transition);
}

.methodology-card:hover {
    border-color: var(--border-light);
}

.methodology-card__icon {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.methodology-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.methodology-card__text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.methodology-disclaimer {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--stripe);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Filter Tabs --- */
.filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn.active {
    background: var(--accent-2);
    color: white;
    border-color: var(--accent-2);
}

/* --- Grid helpers --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* --- Group Standings --- */
.group-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.group-card__title {
    padding: 0.75rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--stripe);
    border-bottom: 1px solid var(--border);
}

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

.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.standings-table th {
    padding: 0.5rem 0.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}

.standings-table td {
    padding: 0.6rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.standings-table tbody tr:last-child td {
    border-bottom: none;
}

.standings-table tbody tr:hover {
    background: var(--stripe);
}

.standings-pos {
    width: 2rem;
    font-weight: 700;
    color: var(--text-muted);
}

.standings-team {
    text-align: left !important;
    min-width: 120px;
}

.standings-team a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.standings-team a:hover {
    color: var(--accent-2);
}

.standings-flag {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.standings-pts {
    font-weight: 800;
    color: var(--text-primary);
}

.standings-qualify--auto td:first-child {
    box-shadow: inset 3px 0 0 var(--green);
}

.standings-qualify--third td:first-child {
    box-shadow: inset 3px 0 0 var(--gold);
}

/* --- Tournament Bracket (Desktop) --- */
.bracket-section {
    padding: 2rem 0;
}

.bracket-desktop {
    overflow-x: auto;
    padding: 1rem;
}

.bracket-mobile {
    display: none;
}

.bracket {
    --cw: 1.25rem;
    --slot-h: 85px;
    display: flex;
    gap: calc(var(--cw) * 2);
    min-width: 1200px;
    align-items: stretch;
    padding: 1rem 2rem;
}

.bracket__round {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 190px;
    position: relative;
    padding-top: 2rem;
}

.bracket__round-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0.25rem 0;
}

.bracket__pair {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    position: relative;
}

/* Slot-based pair heights: each round doubles, total = 16 × --slot-h */
.bracket__round[data-round="0"] .bracket__pair { height: calc(2 * var(--slot-h)); }
.bracket__round[data-round="1"] .bracket__pair { height: calc(4 * var(--slot-h)); }
.bracket__round[data-round="2"] .bracket__pair { height: calc(8 * var(--slot-h)); }
.bracket__round[data-round="3"] .bracket__pair { height: calc(16 * var(--slot-h)); }
.bracket__round[data-round="4"] .bracket__pair { height: calc(16 * var(--slot-h)); }

.bracket__match {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: visible;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
    position: relative;
}

.bracket__match:hover {
    border-color: var(--accent-2);
    background: var(--bg-card-hover);
    z-index: 1;
}

.bracket__team:first-child {
    border-radius: 6px 6px 0 0;
}

.bracket__team:last-child {
    border-radius: 0 0 6px 6px;
}

.bracket__team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border);
}

.bracket__team:last-child {
    border-bottom: none;
}

.bracket__team--winner {
    background: rgba(0, 200, 83, 0.08);
}

[data-theme="light"] .bracket__team--winner {
    background: rgba(0, 160, 60, 0.1);
}

.bracket__team-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket__flag {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.bracket__score {
    font-weight: 700;
    min-width: 1.2rem;
    text-align: center;
    color: var(--text-secondary);
}

.bracket__seed {
    color: var(--accent-2);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.bracket__tbd {
    color: var(--text-muted);
    font-style: italic;
}

/* --- Bracket Connectors --- */
/* 1. Outgoing horizontal: match right edge → gap midpoint */
.bracket__round:not(:last-child) .bracket__match::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--cw));
    top: 50%;
    width: var(--cw);
    height: 0;
    border-top: 2px solid var(--connector-color);
    pointer-events: none;
}

/* 2. Vertical merge at gap midpoint: connects both matches in pair */
.bracket__round:not(:last-child) .bracket__pair::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--cw));
    top: 25%;
    bottom: 25%;
    width: 0;
    border-left: 2px solid var(--connector-color);
    pointer-events: none;
}

/* 3. Incoming horizontal: gap midpoint → match left edge */
.bracket__round:not(:first-child) .bracket__match::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--cw));
    top: 50%;
    width: var(--cw);
    height: 0;
    border-top: 2px solid var(--connector-color);
    pointer-events: none;
}

.bracket-third {
    text-align: center;
    margin-top: 2rem;
    padding: 0 2rem;
}

.bracket-third .bracket__match {
    display: inline-block;
    min-width: 220px;
}

/* --- Bracket Mobile --- */
.bracket-mobile__round {
    margin-bottom: 2rem;
}

.bracket-mobile__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--accent-2);
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
}

.bracket-mobile__matches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.bracket-mobile__match {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
}

.bracket-mobile__match:hover {
    border-color: var(--accent-2);
    background: var(--bg-card-hover);
}

.bracket-mobile__team {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.bracket-mobile__team--winner {
    font-weight: 700;
    color: var(--green);
}

.bracket-mobile__flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.bracket-mobile__score {
    margin-left: auto;
    font-weight: 700;
}

.bracket-mobile__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    .bracket-desktop {
        display: none;
    }

    .bracket-mobile {
        display: block;
    }

    .bracket-mobile__matches {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .bracket-mobile__matches {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Head-to-Head --- */
.h2h-section {
    border-top: 1px solid var(--border);
}

.h2h-table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.h2h-table__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.h2h-team-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.h2h-flag {
    width: 28px;
    height: 20px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.h2h-table__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.h2h-table__row:last-child {
    border-bottom: none;
}

.h2h-val {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.95rem;
}

.h2h-label {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}

.h2h-matches-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.h2h-match-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s, border-color 0.2s;
}

.h2h-match-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-2);
}

.h2h-match-card__teams {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.h2h-match-card__team {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
}

.h2h-match-card__team:last-child {
    justify-content: flex-end;
}

.h2h-match-card__vs {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.h2h-match-card__flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.h2h-match-card__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

@media (max-width: 768px) {
    .h2h-team-header {
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem;
    }

    .h2h-val {
        font-size: 0.85rem;
        padding: 0.6rem 0.5rem;
    }

    .h2h-label {
        font-size: 0.7rem;
        padding: 0.6rem 0.35rem;
    }
}

/* --- Error page --- */
.error-page {
    text-align: center;
    padding: 6rem 0;
}

.error-page h1 {
    font-size: 6rem;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 1rem;
}

.error-page p {
    color: var(--text-secondary);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* --- Footer --- */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-section p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-section ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-section a {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.footer-section a:hover {
    color: var(--text-primary);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    text-align: center;
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {
    .nav-list a {
        padding: 0.5rem 0.6rem;
        font-size: 0.82rem;
    }

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

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

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

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-list {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        padding: 1rem;
    }

    .nav-list.open {
        display: flex;
    }

    /* Flatten "More" dropdown on mobile — show its children inline */
    .nav-more {
        display: contents;
    }

    .nav-more__toggle {
        display: none;
    }

    .nav-more__dropdown {
        display: contents;
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        min-width: 0;
        padding: 0;
    }

    .nav-more__item {
        padding: 0.5rem 0.6rem;
        font-size: 0.82rem;
    }

    .lang-switch {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 3.5rem;
        margin-left: 0;
    }

    .theme-toggle {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 6.5rem;
    }

    /* Stop "World Cup 2026 Stats" from being cut off by the icon strip on the right */
    .logo {
        font-size: 1rem;
        gap: 0.35rem;
        max-width: calc(100% - 11rem);
    }
    .logo-icon { font-size: 1.25rem; }
    .logo-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .countdown {
        gap: 0.75rem;
    }

    .countdown-item {
        padding: 0.75rem 1rem;
        min-width: 70px;
    }

    .countdown-number {
        font-size: 1.5rem;
    }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

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

    .match-card__teams {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 2.5rem 0 2rem;
    }

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

    .stat-number {
        font-size: 2rem;
    }
}

/* ========== Match Prediction ========== */

.prob-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.prob-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.prob-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.prob-label--team2 {
    flex-direction: row;
    justify-content: flex-end;
}

.prob-label--draw {
    flex-direction: column;
    gap: 0.125rem;
    text-align: center;
}

.prob-label__flag {
    width: 28px;
    height: 21px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

.prob-label__name {
    font-weight: 600;
    color: var(--text-primary);
}

.prob-label__pct {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
}

.prob-label--team1 .prob-label__pct { color: var(--accent-2); }
.prob-label--draw .prob-label__pct { color: var(--text-muted); }
.prob-label--team2 .prob-label__pct { color: var(--accent); }

.prob-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    gap: 2px;
}

.prob-bar__seg {
    border-radius: 5px;
    transition: width 0.6s ease;
}

.prob-bar__seg--team1 { background: var(--accent-2); }
.prob-bar__seg--draw { background: var(--text-muted); opacity: 0.4; }
.prob-bar__seg--team2 { background: var(--accent); }

.prob-footnote {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* Vote Buttons */
.vote-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.vote-buttons {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.vote-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vote-btn:hover {
    border-color: var(--accent-2);
    background: var(--bg-secondary);
}

.vote-btn--selected,
.vote-btn--selected:hover {
    border-color: var(--gold);
    background: rgba(245, 166, 35, 0.12);
    color: var(--gold);
}

.vote-btn--dimmed {
    opacity: 0.45;
}

.vote-btn--dimmed:hover {
    opacity: 0.7;
}

.vote-btn__flag {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

/* Share Row */
.share-row {
    padding: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.share-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.share-btn--x:hover { color: var(--text-primary); }
.share-btn--fb:hover { color: #1877f2; border-color: #1877f2; }
.share-btn--tg:hover { color: #26a5e4; border-color: #26a5e4; }
.share-btn--link:hover { color: var(--gold); border-color: var(--gold); }
.share-btn--copied { color: var(--green); border-color: var(--green); }

@media (max-width: 768px) {
    .vote-buttons {
        flex-direction: column;
    }

    .prob-labels {
        flex-direction: column;
        gap: 0.25rem;
    }

    .prob-label--team1,
    .prob-label--team2 {
        width: 100%;
        justify-content: space-between;
    }

    .prob-label--draw {
        flex-direction: row;
        justify-content: center;
    }
}

/* --- About Page --- */
.about-section {
    padding: 2.5rem 0;
}

.about-section--alt {
    background: var(--bg-secondary);
}

.about-map-desc {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* 6-column stats grid */
.stats-grid--6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 3rem;
    margin: 0 auto;
    max-width: 700px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.9rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}

.timeline__item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline__item:last-child {
    padding-bottom: 0;
}

.timeline__marker {
    position: absolute;
    left: -3rem;
    top: 0.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: 50%;
    font-size: 0.85rem;
    z-index: 1;
}

.timeline__item--final .timeline__marker {
    border-color: var(--gold);
    background: rgba(245, 166, 35, 0.15);
}

.timeline__content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}

.timeline__stage {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.timeline__meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.timeline__dates {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
}

.timeline__matches {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* Stadium Map */
.stadium-map {
    width: 100%;
    height: 500px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    z-index: 0;
}

[data-theme="dark"] .stadium-map {
    filter: brightness(0.8) contrast(1.1) saturate(0.9);
}

.leaflet-popup-content-wrapper {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
}

.leaflet-popup-tip {
    background: var(--bg-card) !important;
}

.leaflet-popup-content a {
    color: var(--accent-2);
}

@media (max-width: 1024px) {
    .stats-grid--6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stadium-map {
        height: 350px;
    }

    .timeline__meta {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .stadium-map {
        height: 280px;
    }

    .timeline {
        padding-left: 2.5rem;
    }

    .timeline__marker {
        left: -2.5rem;
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }
}

/* --- History Page --- */
.history-section {
    padding: 2rem 0;
}

.history-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    white-space: nowrap;
}

.history-table thead {
    background: var(--bg-secondary);
}

.history-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

.history-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.history-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.history-table tbody tr:last-child td {
    border-bottom: none;
}

.history-year {
    font-weight: 700;
    color: var(--accent-2);
}

.history-gold {
    color: var(--gold) !important;
    font-weight: 600;
}

.history-silver {
    color: #c0c0c0 !important;
}

.history-bronze {
    color: #cd7f32 !important;
}

.history-rank {
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}

.scorer-name {
    font-weight: 600;
    color: var(--text-primary);
}

.scorers-table tbody tr:first-child .scorer-name {
    color: var(--gold);
}

.scorer-goals {
    font-weight: 700;
    color: var(--accent-2);
}

.history-score {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Records */
.history-records {
    padding: 2rem 0 3rem;
}

.record-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.record-card__icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.record-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.record-list {
    list-style: none;
    counter-reset: record;
}

.record-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    counter-increment: record;
}

.record-list li:last-child {
    border-bottom: none;
}

.record-list li::before {
    content: counter(record) ".";
    color: var(--text-muted);
    font-size: 0.85rem;
    min-width: 1.5rem;
}

.record-team {
    flex: 1;
    color: var(--text-primary);
}

.record-value {
    font-weight: 700;
    color: var(--accent-2);
    min-width: 2rem;
    text-align: right;
}

.record-list li:first-child .record-team {
    color: var(--gold);
    font-weight: 600;
}

@media (max-width: 768px) {
    .history-table {
        font-size: 0.8rem;
    }

    .history-table th,
    .history-table td {
        padding: 0.5rem 0.6rem;
    }

    .history-records .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Bracket Predictor
   ======================================== */

.bp-container { padding: 2rem 0; }

.bp-nickname-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.bp-nickname-row label { font-weight: 600; white-space: nowrap; }
.bp-nickname-input {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 1rem;
    max-width: 280px;
    width: 100%;
}

.bp-round { margin-bottom: 2rem; }
.bp-round-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-2);
}

.bp-matches--r32 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bp-matches--r16 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bp-matches--qf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bp-matches--sf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bp-matches--final { max-width: 400px; margin: 0 auto; }

.bp-match {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
}
.bp-match-header {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bp-match-teams {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bp-vs {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Searchable dropdown */
.bp-team-slot {
    position: relative;
    flex: 1;
    min-width: 0;
}
.bp-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.bp-search:focus { outline: none; border-color: var(--accent-2); }
.bp-search.bp-filled { border-color: var(--accent-2); font-weight: 600; }
.bp-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 100;
    margin-top: 2px;
}
.bp-dropdown.open { display: block; }
.bp-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.bp-dropdown-item:hover { background: var(--accent-2); color: #fff; }
.bp-dropdown-item img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.bp-dropdown-item > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-dropdown-item > small { flex-shrink: 0; }

/* Winner buttons */
.bp-winner-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.bp-winner-label { font-size: 0.8rem; color: var(--text-secondary); }
.bp-winner-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.bp-winner-btn:hover { border-color: var(--accent-2); }
.bp-winner-btn.selected {
    background: var(--accent-2);
    color: #fff;
    border-color: var(--accent-2);
    font-weight: 600;
}
.bp-winner-btn img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.bp-auto-team { flex: 1; justify-content: center; min-height: 38px; }
.bp-team-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Third place match */
.bp-third-place {
    max-width: 420px;
    margin: 2rem auto 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
}
.bp-third-place__title {
    font-size: 1rem;
    margin: 0 0 0.35rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.bp-third-place__hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}
.bp-third-place .bp-match--third {
    border: 1px solid #cd7f32;
    background: var(--card-bg);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bp-third-place .bp-match--third .bp-winner-btn {
    width: 100%;
}

/* Champion box */
.bp-champion-box {
    text-align: center;
    padding: 2rem;
    margin: 1.5rem auto;
    max-width: 400px;
    background: var(--card-bg);
    border: 2px solid var(--accent-2);
    border-radius: 16px;
}
.bp-champion-trophy { font-size: 3rem; margin-bottom: 0.5rem; }
.bp-champion-label { font-size: 0.9rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.bp-champion-name { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }

/* Actions */
.bp-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}
.bp-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.bp-btn:hover { opacity: 0.85; }
.bp-btn--save { background: var(--accent-2); color: #fff; }
.bp-btn--reset { background: var(--border); color: var(--text-primary); }
.bp-btn--edit { background: var(--accent); color: #fff; padding: 0.6rem 1.5rem; font-size: 0.95rem; }

/* Saved banner (shown when bracket is locked after save) */
.bp-saved-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.bp-saved-banner__icon { font-size: 1.75rem; line-height: 1; }
.bp-saved-banner__text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.15rem; }
.bp-saved-banner__text strong { color: var(--text-primary); font-size: 1.05rem; }
.bp-saved-banner__text span { color: var(--text-secondary); font-size: 0.9rem; }

/* Locked bracket: disable all interactions inside the bracket area while
   keeping the saved banner, champion box, reset and edit buttons clickable. */
.bp-locked .bp-bracket-section,
.bp-locked .bp-third-place,
.bp-locked .bp-nickname-row {
    pointer-events: none;
    opacity: 0.75;
    user-select: none;
}
.bp-locked .bp-btn--save { display: none; }
.bp-locked .bp-slot-clear { display: none; }

/* Share */
.bp-share {
    text-align: center;
    margin: 1.5rem 0;
}
.bp-share h3 { margin-bottom: 0.75rem; }
.bp-share-buttons { display: flex; gap: 0.75rem; justify-content: center; }
.bp-share-buttons .share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.bp-share-buttons .share-btn:hover { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

/* Leaderboard */
.bp-leaderboard { margin: 2rem 0; }
.bp-leaderboard-count {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 0.35rem;
}
.bp-leaderboard-scroll {
    max-height: 440px; /* ≈ thead + 10 rows × ~40px */
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    /* Custom scrollbar (WebKit) */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.bp-leaderboard-scroll::-webkit-scrollbar { width: 8px; }
.bp-leaderboard-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.bp-leaderboard-scroll::-webkit-scrollbar-track { background: transparent; }
.bp-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}
.bp-leaderboard-table th,
.bp-leaderboard-table td {
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.bp-leaderboard-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 2;
    box-shadow: 0 1px 0 var(--border);
}
.bp-leaderboard-table tbody tr:last-child td { border-bottom: none; }
.bp-leaderboard-table tr:hover td { background: var(--card-bg); }

/* Stats */
.bp-stats { margin: 2rem 0; }
.bp-stats-round-title { font-size: 1rem; margin: 1.25rem 0 0.75rem; color: var(--text-secondary); }
.bp-stats-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.bp-stats-bar-row { display: flex; align-items: center; gap: 0.75rem; }
.bp-stats-bar-name { min-width: 120px; font-size: 0.9rem; text-align: right; }
.bp-stats-bar-track { flex: 1; height: 20px; background: var(--border); border-radius: 10px; overflow: hidden; }
.bp-stats-bar-fill { height: 100%; background: var(--accent-2); border-radius: 10px; transition: width 0.5s; min-width: 2px; }
.bp-stats-bar-pct { min-width: 40px; font-size: 0.85rem; font-weight: 600; }
.bp-intro { margin-bottom: 1.5rem; color: var(--text-muted); line-height: 1.7; }
.bp-faq { margin-top: 2rem; }
.bp-faq .faq-list { margin-top: 1rem; }

@media (max-width: 768px) {
    .bp-matches--r32,
    .bp-matches--r16,
    .bp-matches--qf,
    .bp-matches--sf { grid-template-columns: 1fr; }
    .bp-match-teams { flex-direction: column; }
    .bp-auto-team { width: 100%; }
    .bp-stats-bar-name { min-width: 80px; font-size: 0.8rem; }
    .bp-nickname-row { flex-direction: column; align-items: stretch; }
    .bp-nickname-input { max-width: 100%; }
}

/* ========================================
   Bracket Predictor — Ladder Layout
   ======================================== */

.bp-bracket-section {
    padding: 1.5rem 0 2.5rem;
}

.bp-bracket-wrap {
    overflow-x: auto;
    overflow-y: visible;
    padding: 1rem 0;
    -webkit-overflow-scrolling: touch;
}

.bp-bracket {
    --bp-slot-h: 170px;
    --bp-cw: 1.5rem;
    display: flex;
    gap: calc(var(--bp-cw) * 2);
    min-width: 1500px;
    align-items: stretch;
    padding: 1rem 2rem;
}

.bp-bracket__round {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 200px;
    position: relative;
    padding-top: 2rem;
}

.bp-bracket__round[data-round="r32"] {
    flex: 1.3;
    min-width: 240px;
}

.bp-bracket__round-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0.25rem 0;
}

.bp-bracket__pair {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    position: relative;
}

/* Slot-based pair heights: each round doubles */
.bp-bracket__round[data-r="0"] .bp-bracket__pair { height: calc(2 * var(--bp-slot-h)); }
.bp-bracket__round[data-r="1"] .bp-bracket__pair { height: calc(4 * var(--bp-slot-h)); }
.bp-bracket__round[data-r="2"] .bp-bracket__pair { height: calc(8 * var(--bp-slot-h)); }
.bp-bracket__round[data-r="3"] .bp-bracket__pair { height: calc(16 * var(--bp-slot-h)); }
.bp-bracket__round[data-r="4"] .bp-bracket__pair { height: calc(16 * var(--bp-slot-h)); }

/* Compact R32 match card in the ladder */
.bp-bracket .bp-match--r32 {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    flex-shrink: 0;
    /* Reserve space for the winner-row so filled and empty cards stay the same
       height; otherwise the pair's vertical connector drifts off-center. */
    min-height: 148px;
}

.bp-bracket .bp-match--r32 .bp-match-header {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-bracket .bp-match--r32 .bp-team-slot {
    flex: none;
    width: 100%;
}

.bp-bracket .bp-match--r32 .bp-search {
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
}

.bp-bracket .bp-match--r32 .bp-winner-row {
    margin-top: 0.2rem;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.bp-bracket .bp-match--r32 .bp-winner-btn {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.4rem;
    font-size: 0.78rem;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Auto-round match card (R16 / QF / SF / Final) */
.bp-bracket .bp-match--auto {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    flex-shrink: 0;
}

.bp-bracket .bp-match--auto .bp-winner-btn {
    width: 100%;
    min-height: 34px;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 7px;
}

.bp-bracket .bp-match--final {
    border-color: var(--accent-2);
    background: var(--card-bg);
}

/* Bracket connectors (mirror Tournament Bracket) */
.bp-bracket__round:not(:last-child) .bp-match::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--bp-cw));
    top: 50%;
    width: var(--bp-cw);
    height: 0;
    border-top: 2px solid var(--connector-color);
    pointer-events: none;
}

.bp-bracket__round:not(:last-child) .bp-bracket__pair:not(.bp-bracket__pair--final)::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--bp-cw));
    top: 25%;
    bottom: 25%;
    width: 0;
    border-left: 2px solid var(--connector-color);
    pointer-events: none;
}

.bp-bracket__round:not(:first-child) .bp-match::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--bp-cw));
    top: 50%;
    width: var(--bp-cw);
    height: 0;
    border-top: 2px solid var(--connector-color);
    pointer-events: none;
}

/* Dropdown must escape the narrow card */
.bp-bracket .bp-team-slot { position: relative; }
.bp-bracket .bp-dropdown {
    min-width: 220px;
    z-index: 200;
}

/* Per-slot clear (×) button, shown only when the slot has a team picked */
.bp-slot-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}
.bp-slot-clear:hover {
    background: var(--bg-card-hover);
    color: var(--accent);
}
.bp-team-slot:has(> .bp-search.bp-filled) .bp-slot-clear {
    display: flex;
}
.bp-bracket .bp-match--r32 .bp-search.bp-filled {
    padding-right: 24px;
}

@media (max-width: 768px) {
    .bp-bracket {
        --bp-slot-h: 150px;
        --bp-cw: 1rem;
        min-width: 1320px;
        padding: 1rem;
    }
    .bp-bracket__round { min-width: 180px; }
    .bp-bracket__round[data-round="r32"] { min-width: 220px; }
    .bp-bracket .bp-match--r32 .bp-match-header { font-size: 0.65rem; }
    .bp-bracket .bp-match--r32 .bp-search { font-size: 0.78rem; }
    .bp-bracket .bp-match--auto .bp-winner-btn { font-size: 0.78rem; }
}



/* ==========================================================================
   Squads — /squads/ and /teams/{slug}/squad/
   ========================================================================== */

.squad-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
    white-space: nowrap;
}
.squad-status--preliminary {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
}
.squad-status--final {
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.45);
}
[data-theme="light"] .squad-status--preliminary { color: #b45309; }
[data-theme="light"] .squad-status--final       { color: #15803d; }

/* /squads/ index */
.squads-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2.5rem;
}
.squads-summary__item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    text-align: center;
}
.squads-summary__value {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.squads-summary__label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.squads-group-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 2.2rem 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.squads-group-count {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.95rem;
}

.squads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.squad-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.squad-card--linked:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.squad-card--pending {
    opacity: 0.78;
}
.squad-card__link {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    z-index: 1;
}
.squad-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.squad-card__flag {
    width: 56px;
    height: 38px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}
.squad-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.25;
}
.squad-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0.6rem 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}
.squad-card__meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.88rem;
}
.squad-card__meta-row dt {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0;
}
.squad-card__meta-row dd {
    color: var(--text);
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.squad-card__cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.squad-card__cta-text {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
}
.squad-card__cta-pending {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
}

.squads-footnote {
    margin-top: 2rem;
    padding: 1rem 1.2rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    line-height: 1.55;
}

/* /teams/{slug}/squad/ detail */
.squad-page-header {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
}
.squad-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.squad-hero__flag {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}
.squad-hero__body {
    flex: 1;
    min-width: 0;
}
.squad-hero__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.squad-hero__title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 0.6rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
}
.squad-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.squad-hero__meta strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.squad-hero__dot {
    color: var(--text-muted);
    opacity: 0.5;
}

.squad-detail { padding: 2rem 0 3rem; }

.squad-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 0 0 2.5rem;
}
.squad-summary__card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    text-align: center;
    overflow: hidden;
}
.squad-summary__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
.squad-summary__card--gk::before { background: #fbbf24; }
.squad-summary__card--df::before { background: #60a5fa; }
.squad-summary__card--mf::before { background: #22c55e; }
.squad-summary__card--fw::before { background: #ef4444; }
.squad-summary__count {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.squad-summary__label {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Position section with colored accent */
.squad-section {
    margin-bottom: 2rem;
}
.squad-section-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}
.squad-section-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.squad-section--gk .squad-section-dot { background: #fbbf24; }
.squad-section--df .squad-section-dot { background: #60a5fa; }
.squad-section--mf .squad-section-dot { background: #22c55e; }
.squad-section--fw .squad-section-dot { background: #ef4444; }
.squad-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.squad-table-wrap {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0;
}
.squad-section--gk .squad-table-wrap { border-top: 3px solid #fbbf24; }
.squad-section--df .squad-table-wrap { border-top: 3px solid #60a5fa; }
.squad-section--mf .squad-table-wrap { border-top: 3px solid #22c55e; }
.squad-section--fw .squad-table-wrap { border-top: 3px solid #ef4444; }

.squad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    /* Fixed layout + explicit per-column widths so GK / DF / MF / FW tables
       all align identically. Without this, each table auto-sized columns
       based on its own widest content and rows didn't line up vertically. */
    table-layout: fixed;
}
/* Column widths: Name 30% | Age/Club/Caps/Goals 17.5% each (4 equal narrow cols) */
.squad-table th:nth-child(1), .squad-table td:nth-child(1) { width: 30%; }
.squad-table th:nth-child(2), .squad-table td:nth-child(2) { width: 17.5%; }
.squad-table th:nth-child(3), .squad-table td:nth-child(3) { width: 17.5%; }
.squad-table th:nth-child(4), .squad-table td:nth-child(4) { width: 17.5%; }
.squad-table th:nth-child(5), .squad-table td:nth-child(5) { width: 17.5%; }
.squad-table thead th {
    text-align: left;
    padding: 0.85rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .squad-table thead th { background: rgba(0, 0, 0, 0.03); }
.squad-table thead th.num,
.squad-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.squad-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.squad-table tbody tr:last-child td { border-bottom: none; }
.squad-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
[data-theme="light"] .squad-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }
.squad-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }
[data-theme="light"] .squad-table tbody tr:hover td { background: rgba(0, 0, 0, 0.04); }

.squad-player-name { font-weight: 600; color: var(--text); }
.squad-captain {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 7px;
    background: var(--accent);
    color: #fff;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.squad-disclaimer {
    padding: 1rem 1.2rem;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.5;
}
.squad-disclaimer strong { color: #f59e0b; }

.squad-pending {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
    margin: 1.5rem 0;
}
.squad-pending .section-title { margin-top: 0; }

.squad-coach-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 2rem 0 1.5rem;
}
.squad-coach-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.12);
    border-radius: 50%;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.squad-coach-card__body { flex: 1; min-width: 0; }
.squad-coach-card__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.15rem;
}
.squad-coach-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.squad-coach-card__source {
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.squad-coach-card__source:hover { text-decoration: underline; }

.squad-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.team-squad-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 0;
    padding: 1rem 1.2rem;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.02));
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 10px;
}
.team-squad-banner__text { font-size: 0.95rem; color: var(--text); }
.team-squad-banner strong { color: var(--text); }

.btn-small {
    display: inline-block;
    padding: 8px 16px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    border: 1px solid var(--accent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.btn-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}

@media (max-width: 768px) {
    .squads-summary { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
    .squads-summary__value { font-size: 1.5rem; }
    .squads-grid { grid-template-columns: 1fr; }
    .squad-card__flag { width: 48px; height: 32px; }
    .squad-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .squad-hero__flag { width: 88px; height: 60px; }
    .squad-summary { grid-template-columns: repeat(2, 1fr); }
    .squad-coach-card { flex-wrap: wrap; }
    .squad-table thead th, .squad-table tbody td { padding: 0.45rem 0.45rem; font-size: 0.78rem; }
    .squad-table thead th { letter-spacing: 0.03em; }
    .squad-table .squad-captain { padding: 1px 4px; font-size: 0.6rem; margin-left: 0.25rem; }

    /* Standings table on group page — tighten to fit 358-360px viewports */
    .standings-table { font-size: 0.78rem; }
    .standings-table th { padding: 0.4rem 0.25rem; font-size: 0.68rem; }
    .standings-table td { padding: 0.5rem 0.25rem; }
    .standings-team { min-width: 92px !important; }
    .standings-team .standings-flag { width: 18px !important; height: 14px !important; }
}

/* ==========================================================================
   Phase 2 — Match preview / Lineups / FAQ / bracket cross-link
   ========================================================================== */

/* Match preview block */
.match-preview {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.match-preview__body {
    max-width: 880px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
}
.match-preview__body p {
    margin: 0;
}

/* Probable lineups */
.match-lineups__note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    font-style: italic;
}
.match-lineups__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.match-lineups__col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}
.match-lineups__team {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.match-lineups__flag {
    width: 40px;
    height: 28px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.match-lineups__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}
.match-lineups__xi {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    counter-reset: xi;
}
.match-lineups__player {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 0.65rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}
.match-lineups__player:last-child {
    border-bottom: none;
}
.match-lineups__pos {
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
}
[data-theme="light"] .match-lineups__pos {
    background: rgba(0, 0, 0, 0.05);
}
.match-lineups__pos--gk { color: #fbbf24; }
.match-lineups__pos--df { color: #60a5fa; }
.match-lineups__pos--mf { color: #22c55e; }
.match-lineups__pos--fw { color: #ef4444; }
.match-lineups__pname {
    font-weight: 600;
    color: var(--text);
}
.match-lineups__club {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.match-lineups__cta {
    display: inline-block;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 0.5rem;
}
.match-lineups__cta:hover {
    text-decoration: underline;
}

/* Match FAQ accordion */
.match-faq {
    background: linear-gradient(180deg, transparent, var(--bg-card));
    border-top: 1px solid var(--border);
}
.match-faq__list {
    max-width: 880px;
    margin: 0;
}
.match-faq__item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.7rem;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.match-faq__item[open] {
    border-color: var(--accent);
}
.match-faq__q {
    cursor: pointer;
    padding: 0.95rem 1.15rem;
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}
.match-faq__q::-webkit-details-marker { display: none; }
.match-faq__q::after {
    content: "+";
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--accent);
    font-weight: 400;
    transition: transform 0.18s ease;
}
.match-faq__item[open] .match-faq__q::after {
    content: "−";
}
.match-faq__a {
    padding: 0 1.15rem 1rem;
    color: var(--text);
    line-height: 1.6;
    font-size: 0.95rem;
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
    margin-top: 0;
}

/* Bracket cross-link in predictor page */
.bp-bracket-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease;
}
.bp-bracket-link:hover {
    border-bottom-color: var(--accent);
}

@media (max-width: 768px) {
    .match-lineups__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .match-lineups__player {
        grid-template-columns: 36px 1fr;
        row-gap: 0.15rem;
    }
    .match-lineups__club {
        grid-column: 2;
    }
}

/* --- Coach detail: bio (65%) + personal info (25%) two-column layout --- */
.coach-detail-grid {
    display: grid;
    grid-template-columns: 65% 25%;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .coach-detail-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* --- Intro paragraphs & bios: justified text, dark color on light theme --- */
.page-header p,
.page-header .page-intro,
.coach-bio p,
.wc-narrative p,
.team-analysis-text,
.stadium-description__text,
.bp-intro {
    text-align: justify;
}

[data-theme="light"] .page-header p,
[data-theme="light"] .page-header .page-intro,
[data-theme="light"] .coach-bio p,
[data-theme="light"] .wc-narrative p,
[data-theme="light"] .team-analysis-text,
[data-theme="light"] .stadium-description__text,
[data-theme="light"] .bp-intro {
    color: var(--text-primary);
}

/* ──────────────────────────────────────────────────────────────────
   /teams/ — FIFA Ranking 2026 table
   ────────────────────────────────────────────────────────────────── */

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

/* Higher specificity (.page-header .ranking-meta) needed to beat the
   .page-header p { font-size: 1.05rem; color: var(--text-secondary); } rule
   above. Likewise for the [data-theme="light"] override which forces
   --text-primary on every paragraph inside .page-header. */
.page-header .ranking-meta {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

[data-theme="light"] .page-header .ranking-meta {
    color: var(--text-muted);
}

.ranking-meta__sep {
    color: var(--border-light);
}

.ranking-section {
    padding: 1.5rem 0 3rem;
}

.ranking-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.ranking-search {
    flex: 1 1 220px;
    max-width: 320px;
    position: relative;
}

#ranking-search {
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

#ranking-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

.ranking-filter {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.filter-chip {
    padding: 0.4rem 0.85rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.filter-chip--active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.filter-chip--active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Sort chips row */
.ranking-sort {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
}

.ranking-sort__label {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    margin-right: 0.25rem;
}

.sort-chip {
    padding: 0.4rem 0.85rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.sort-chip:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.sort-chip--active {
    background: var(--accent-2);
    color: #fff;
    border-color: var(--accent-2);
}

.sort-chip--active:hover {
    background: var(--accent-2-hover);
    border-color: var(--accent-2-hover);
}

.sort-chip[aria-pressed="true"][data-dir="asc"]::after  { content: ' ▲'; }
.sort-chip[aria-pressed="true"][data-dir="desc"]::after { content: ' ▼'; }

/* Card grid */
.ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}

.ranking-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow);
    min-width: 0;
    overflow: hidden;
}

.ranking-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

.ranking-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.ranking-card__flag {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border);
    flex-shrink: 0;
}

.ranking-card__rank-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    line-height: 1.1;
}

.ranking-card__rank-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ranking-card__rank-num {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ranking-card__trend {
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.1rem;
}

.ranking-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ranking-card__name {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-card__points {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
    min-width: 0;
}

.ranking-card__pts-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: -0.2rem;
}

.ranking-card__delta {
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: auto;
}

.ranking-card__meta {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trend arrow colors */
.trend--up   { color: var(--green); }
.trend--down { color: var(--accent); }
.trend--flat { color: var(--text-muted); }
.trend--none { color: var(--text-muted); }

/* Delta points colors */
.delta--up   { color: var(--green); }
.delta--down { color: var(--accent); }
.delta--flat { color: var(--text-muted); font-weight: 500; }
.delta--none { color: var(--text-muted); font-weight: 500; }

/* Sparkline */
.sparkline {
    vertical-align: middle;
}
.sparkline--up   { color: var(--green); }
.sparkline--down { color: var(--accent); }
.sparkline--flat { color: var(--text-muted); }

.ranking-spark-empty {
    color: var(--text-muted);
    font-weight: 500;
}

/* Empty-state message when filters hide everything */
.ranking-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
    margin: 0;
}

/* Heading for the confederations cards section below the table */
.ranking-confederations-h2 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ranking-controls {
        gap: 0.6rem;
    }
    .ranking-search {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .ranking-filter {
        flex: 1 1 100%;
    }
    .filter-chip,
    .sort-chip {
        font-size: 0.78rem;
        padding: 0.35rem 0.7rem;
    }
    .ranking-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 0.6rem;
    }
    .ranking-card {
        padding: 0.7rem 0.8rem;
    }
    .ranking-card__flag {
        width: 36px;
        height: 36px;
    }
    .ranking-card__rank-num {
        font-size: 1.1rem;
    }
    .ranking-card__name {
        font-size: 0.92rem;
    }
}

@media (max-width: 420px) {
    .ranking-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .ranking-card {
        padding: 0.55rem 0.6rem;
        gap: 0.4rem;
    }
    .ranking-card__flag {
        width: 30px;
        height: 30px;
    }
    .ranking-card__rank-label {
        font-size: 0.6rem;
    }
    .ranking-card__rank-num {
        font-size: 0.95rem;
    }
    .ranking-card__trend {
        font-size: 0.7rem;
    }
    .ranking-card__name {
        font-size: 0.82rem;
    }
    .ranking-card__points {
        font-size: 0.82rem;
        gap: 0.3rem;
    }
    .ranking-card__pts-label {
        display: none; /* save horizontal space on phones — delta already clarifies points */
    }
    .ranking-card__delta {
        font-size: 0.72rem;
        margin-left: 0; /* let it sit right after the number, not pushed to edge */
    }
    .ranking-card__meta {
        font-size: 0.68rem;
    }
}

/* Collapsed confederation cards under the ranking grid (kept for SEO topic-coverage
   + internal links to /teams/{slug}/ — the main grid is the primary view). */
.confederation-collapsed {
    margin-top: 2.5rem;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

.confederation-collapsed__summary {
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0.5rem 0;
    list-style: revert;
    user-select: none;
    transition: color var(--transition);
}

.confederation-collapsed__summary:hover {
    color: var(--text-primary);
}

.confederation-collapsed[open] .confederation-collapsed__summary {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* ============================================================
   Fan Tokens section (.ft-*)
   Phase 1a: landing + 3 token detail templates
   ============================================================ */

/* Utility button variants used by .ft-* views */
.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-ghost:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-2);
    color: var(--accent-2);
}
.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

/* Section scaffolding */
.ft-section,
.ft-hero,
.ft-widgets,
.ft-edu,
.ft-catalog,
.ft-buy,
.ft-faq,
.ft-email {
    margin: 2.5rem auto;
}
.ft-section__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}
.ft-section__subtitle {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: var(--text-secondary);
}

/* Hero */
.ft-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
.ft-hero__title {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.15;
}
.ft-hero__intro {
    max-width: 720px;
    margin: 0 auto 1rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
}
.ft-hero__countdown {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}
.ft-hero__countdown strong {
    color: var(--accent);
    font-size: 1.15rem;
    padding: 0 0.25rem;
}
.ft-hero__ctas {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* WC NT grid */
.ft-wc-grid {
    display: grid;
    gap: 1rem;
}
.ft-wc-grid--live {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ft-wc-grid--planned {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.ft-wc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    transition: transform var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.ft-wc-card--live {
    /* Footer pinned to bottom — keeps button row aligned across cards with/without price */
    height: 100%;
}
.ft-wc-card--live .ft-wc-card__footer { margin-top: auto; }
.ft-wc-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-2);
}
.ft-wc-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.ft-wc-card__flag {
    width: 40px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
}
.ft-wc-card__title {
    display: flex;
    flex-direction: column;
}
.ft-wc-card__symbol {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--accent);
}
.ft-wc-card__name {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.ft-wc-card__stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0.5rem 0 0.75rem;
}
.ft-wc-card__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ft-wc-card__change {
    font-weight: 600;
    font-size: 0.95rem;
}
.ft-wc-card__stats--pending .ft-wc-card__price,
.ft-wc-card__stats--pending .ft-wc-card__change {
    color: var(--text-muted);
    font-weight: 500;
}
.ft-wc-card__footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.ft-wc-card__footer .btn {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}
.ft-wc-card--planned {
    text-align: center;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.ft-wc-card--planned .ft-wc-card__flag {
    width: 56px;
    height: 40px;
    margin: 0 auto;
}
.ft-wc-card__alert {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    width: 100%;
}

/* 3-widget row */
.ft-widgets__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ft-widgets__grid--2col {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 720px;
}
.ft-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
.ft-widget__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.ft-widget__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ft-widget__list li {
    border-top: 1px solid var(--border);
}
.ft-widget__list li:first-child {
    border-top: none;
}
.ft-widget__list a {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--text-primary);
}
.ft-widget__list a:hover {
    color: var(--accent-2);
}
.ft-widget__empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* Educational block */
.ft-edu__body {
    color: var(--text-primary);
    text-align: justify;
    margin-bottom: 1rem;
    max-width: 820px;
}
.ft-edu__chips {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ft-edu__chips li {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Catalog table */
.ft-catalog__scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ft-catalog__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.ft-catalog__table th,
.ft-catalog__table td {
    padding: 0.55rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.ft-catalog__table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ft-catalog__table tbody tr:hover {
    background: var(--stripe);
}
.ft-catalog__table tbody td {
    padding: 0.85rem 0.5rem;
    vertical-align: middle;
}
.ft-catalog__attribution,
.ft-price-card__attribution {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.ft-catalog__empty {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
}

/* Where to buy / exchange CTA */
/* Carousel wrapper — track fills full container width (matches other
   section blocks); arrows are positioned absolutely OUTSIDE the wrap box. */
.ft-exchange-cta-wrap {
    position: relative;
    width: 100%;
}
.ft-exchange-cta-wrap .ft-exchange-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-color, #ffd200);
    border: 2px solid var(--accent-color, #ffd200);
    color: #1a1a2e;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    z-index: 2;
    padding: 0;
    box-shadow: 0 4px 14px rgba(255, 210, 0, 0.35);
}
/* Place arrows outside the wrap on both sides */
.ft-exchange-cta-wrap .ft-exchange-nav--prev {
    right: 100%;
    margin-right: 12px;
}
.ft-exchange-cta-wrap .ft-exchange-nav--next {
    left: 100%;
    margin-left: 12px;
}
.ft-exchange-cta-wrap .ft-exchange-nav:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 18px rgba(255, 210, 0, 0.5);
}
.ft-exchange-cta-wrap .ft-exchange-nav:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
}
.ft-exchange-cta-wrap .ft-exchange-nav:disabled {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
    box-shadow: none;
    opacity: 0.55;
    cursor: default;
}
.ft-exchange-cta-wrap .ft-exchange-nav[hidden] {
    display: none;
}
/* Narrow viewports: pull arrows back to overlay the edges (inside the wrap)
   so they don't clip beyond the viewport. */
@media (max-width: 1300px) {
    .ft-exchange-cta-wrap .ft-exchange-nav--prev {
        right: auto;
        left: -6px;
        margin-right: 0;
    }
    .ft-exchange-cta-wrap .ft-exchange-nav--next {
        left: auto;
        right: -6px;
        margin-left: 0;
    }
}

.ft-exchange-cta {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 0;
    /* Hide scrollbar across browsers — JS arrows + native swipe handle nav */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge legacy */
}
.ft-exchange-cta::-webkit-scrollbar {
    display: none;               /* Chrome/Safari/new Edge */
    width: 0;
    height: 0;
}
.ft-exchange-cta > .ft-exchange-card {
    flex: 0 0 calc((100% - 2rem) / 3);
    min-width: 260px;
    scroll-snap-align: start;
}
@media (max-width: 900px) {
    .ft-exchange-cta > .ft-exchange-card {
        flex: 0 0 calc(50% - 0.5rem);
    }
}
@media (max-width: 540px) {
    .ft-exchange-cta-wrap .ft-exchange-nav { display: none; }
    .ft-exchange-cta > .ft-exchange-card {
        flex: 0 0 86%;
    }
}
.ft-exchange-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.ft-exchange-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.ft-exchange-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}
.ft-exchange-card__rating {
    color: var(--gold);
    font-weight: 600;
}
.ft-exchange-card__stats {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 1rem;
}
.ft-exchange-card__stats li {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.ft-exchange-card__stats li:last-child {
    border-bottom: none;
}
.ft-exchange-card__stats span {
    color: var(--text-secondary);
}
.ft-exchange-card__cta {
    display: block;
    text-align: center;
    width: 100%;
}

/* Welcome bonus banner inside exchange card */
.ft-exchange-card__bonus {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    margin: 0.5rem 0 0.85rem;
    background: linear-gradient(135deg, rgba(45, 206, 137, 0.12) 0%, rgba(29, 140, 248, 0.08) 100%);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-primary);
}
.ft-exchange-card__bonus-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ft-exchange-card__bonus-text {
    font-weight: 500;
}

/* KYC / status tags */
.ft-tag {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ft-tag--ok {
    background: rgba(45, 206, 137, 0.18);
    color: var(--green);
}
.ft-tag--warn {
    background: rgba(245, 166, 35, 0.18);
    color: var(--gold);
}
.ft-buy__intro {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* FAQ accordion */
.ft-faq__item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    padding: 0.85rem 1rem;
}
.ft-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    list-style: revert;
    padding-right: 1rem;
}
.ft-faq__item[open] summary {
    margin-bottom: 0.5rem;
    color: var(--accent-2);
}
.ft-faq__item p {
    color: var(--text-primary);
    line-height: 1.6;
}

/* Email capture — 2-column card, competitor-style */
.ft-email {
    margin: 3.5rem auto;
}
.ft-email__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    background: var(--bg-card);
    border: 2px solid var(--gold);
    border-radius: calc(var(--radius) * 1.5);
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(245, 166, 35, 0.06);
}
.ft-email__left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ft-email__title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
    color: var(--text-primary);
}
.ft-email__title-line2 {
    display: block;
    color: var(--gold);
}
.ft-email__body {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
.ft-email__benefits {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.ft-email__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.4;
}
.ft-email__bullet {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: radial-gradient(circle, var(--gold) 0%, var(--gold) 35%, transparent 36%);
    margin-top: 0.15rem;
}

/* Form (right column) */
.ft-email__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
.ft-email__field {
    position: relative;
    display: block;
}
.ft-email__field-label {
    position: absolute;
    left: 1rem;
    top: -0.55rem;
    background: var(--bg-card);
    padding: 0 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.ft-email__form input[type="email"],
.ft-email__form select {
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--transition);
    appearance: none;
    -webkit-appearance: none;
}
.ft-email__form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}
.ft-email__form input:focus,
.ft-email__form select:focus {
    outline: none;
    border-color: var(--gold);
}
.ft-email__consent {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    cursor: pointer;
}
.ft-email__consent input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--gold);
}
.ft-email__consent a {
    color: var(--accent-2);
    text-decoration: underline;
}

/* Pill-shaped CTA — competitor-style accent button */
.btn-pill {
    display: inline-block;
    padding: 0.95rem 2rem;
    background: var(--gold);
    color: var(--bg-primary);
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    text-align: center;
    align-self: flex-start;
}
.btn-pill:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-1px);
}

[data-theme="light"] .btn-pill {
    color: #1a1a2e;
}

/* Mobile: stack 2 columns */
@media (max-width: 768px) {
    .ft-email__card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .ft-email__title {
        font-size: 1.6rem;
    }
    .btn-pill {
        width: 100%;
    }
}

/* Disclaimer */
.ft-disclaimer {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

/* Token detail page */
.ft-token-show__back {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.ft-token-show__hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ft-token-show__flag {
    width: 80px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.ft-token-show__title {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}
.ft-token-show__name {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.ft-token-show__chain {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Price card */
.ft-price-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.ft-price-card__main {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ft-price-card__price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
}
.ft-price-card__change {
    font-size: 1.15rem;
    font-weight: 700;
}
.ft-price-card__change-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 0.25rem;
}
.ft-price-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}
.ft-price-card__stats dt {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.ft-price-card__stats dd {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.ft-price-card__no-data {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem 0;
}
.ft-price-card__sparkline svg {
    width: 100%;
    max-width: 300px;
}

/* Football context block on NT tokens */
.ft-token-show__football-context {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-2);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.ft-football-context__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.ft-football-context__grid dt {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.ft-football-context__grid dd {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.15rem 0 0;
}

.ft-token-show__team-link {
    margin: 1rem 0;
}
.ft-token-show__wc-outlook,
.ft-token-show__buy,
.ft-token-show__alert,
.ft-token-show__faq {
    margin-top: 2rem;
}
.ft-token-show__wc-outlook h2,
.ft-token-show__buy h2,
.ft-token-show__alert h2,
.ft-token-show__faq h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.ft-token-show--planned .ft-planned__body {
    color: var(--text-primary);
    max-width: 720px;
    margin-bottom: 1rem;
}

/* ============================================================
   Token detail page polish (Phase 1+: hero, sticky, price card,
   football context v2, why-hold, related tokens, planned alert)
   ============================================================ */

/* Sticky header on scroll */
.ft-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.65rem 0;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}
.ft-sticky-header.is-visible {
    transform: translateY(0);
}
.ft-sticky-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ft-sticky-header__left,
.ft-sticky-header__right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ft-sticky-header__symbol {
    font-weight: 700;
    color: var(--accent);
}
.ft-sticky-header__name {
    color: var(--text-primary);
    font-weight: 500;
}
.ft-sticky-header__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ft-sticky-header__change {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
}
.ft-sticky-header__cta {
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
}

/* Hero polish — flex row with icon + meta */
.ft-token-show__hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.ft-token-show__icon .ft-token-icon,
.ft-token-show__icon .ft-token-icon-wrap {
    width: 72px;
    height: 72px;
}
.ft-token-show__hero-meta {
    flex: 1;
    min-width: 0;
}
.ft-token-show__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

/* Planned badge inline in title */
.ft-planned-badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    background: var(--gold);
    color: var(--bg-primary);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
[data-theme="light"] .ft-planned-badge { color: #1a1a2e; }

/* Extended price card */
.ft-price-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.ft-price-card__sparkline {
    flex: 0 0 200px;
}
.ft-price-card__sparkline svg {
    width: 100%;
    height: 60px;
    color: var(--text-secondary);
}
.ft-price-card__sparkline .sparkline--up   { color: var(--green); }
.ft-price-card__sparkline .sparkline--down { color: var(--accent); }

.ft-price-card__changes {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.ft-price-card__change-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ft-price-card__change-cell .ft-price-card__change-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.ft-price-card__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.ft-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ft-stat dt {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.ft-stat dd {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.ft-stat__sub {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.15rem;
}
.ft-stat--wide { grid-column: 1 / -1; }

.ft-supply-bar--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    max-width: none;
}
.ft-supply-bar--inline .ft-supply-bar__track { flex: 1; max-width: 200px; }

@media (min-width: 769px) {
    .ft-price-card__stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .ft-stat--wide { grid-column: 1 / -1; }
}

/* Football context v2 — bigger card, flag + grid + CTAs */
.ft-football-context-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-2);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 2rem 0;
}
.ft-football-context-v2__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.ft-football-context-v2__flag {
    width: 80px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.ft-football-context-v2__title {
    font-size: 1.4rem;
    margin: 0;
}
.ft-football-context-v2__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}
.ft-football-context-v2__ctas {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Why hold section (NT live) */
.ft-token-show__why-hold {
    margin: 2rem 0;
}
.ft-why-hold__list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.ft-why-hold__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.ft-why-hold__check {
    flex-shrink: 0;
    color: var(--green);
    font-weight: 700;
}

/* Related tokens — chip row */
.ft-related {
    margin: 2.5rem 0 1rem;
}
.ft-related__title {
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
    color: var(--text-primary);
}
.ft-related__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.ft-related__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.88rem;
    text-decoration: none;
    transition: all var(--transition);
}
.ft-related__chip:hover {
    border-color: var(--accent-2);
    background: var(--bg-card-hover);
    color: var(--accent-2);
}
.ft-related__chip .ft-token-icon,
.ft-related__chip .ft-token-icon-wrap {
    width: 24px;
    height: 24px;
}
.ft-related__chip-symbol {
    font-weight: 700;
    color: var(--accent);
}
.ft-related__chip-name {
    color: var(--text-secondary);
}
.ft-related__chip--all {
    background: transparent;
    font-weight: 600;
    color: var(--accent-2);
}

/* Planned-token launch-alert card (mirrors $WCS landing form style) */
.ft-planned-alert {
    margin: 2rem 0;
}
.ft-planned-alert__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background: var(--bg-card);
    border: 2px solid var(--gold);
    border-radius: calc(var(--radius) * 1.5);
    padding: 2rem;
}
.ft-planned-alert__left {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ft-planned-alert__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.ft-planned-alert__body {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.ft-token-show__prep-body {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Mobile */
@media (max-width: 768px) {
    .ft-sticky-header__name { display: none; }
    .ft-sticky-header__cta { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
    .ft-token-show__hero  { gap: 1rem; }
    .ft-token-show__icon .ft-token-icon,
    .ft-token-show__icon .ft-token-icon-wrap { width: 56px; height: 56px; }
    .ft-token-show__title { font-size: 1.5rem; }
    .ft-price-card__top   { flex-direction: column; }
    .ft-price-card__sparkline { flex: 1 0 100%; }
    .ft-price-card__stats { grid-template-columns: 1fr 1fr; }
    .ft-football-context-v2__header { flex-direction: column; align-items: flex-start; }
    .ft-planned-alert__card { grid-template-columns: 1fr; padding: 1.25rem; }
}

/* Change colours (up/down) */
.ft-change--up   { color: var(--green); }
.ft-change--down { color: var(--accent); }

/* Mobile responsive */
@media (max-width: 768px) {
    .ft-hero__title       { font-size: 1.65rem; }
    .ft-hero__intro       { font-size: 0.95rem; }
    .ft-section__title    { font-size: 1.4rem; }
    .ft-token-show__hero  { flex-direction: column; align-items: flex-start; }
    .ft-token-show__title { font-size: 1.6rem; }
    .ft-price-card__price { font-size: 1.85rem; }
    .ft-catalog__table th,
    .ft-catalog__table td { padding: 0.5rem 0.4rem; font-size: 0.8rem; }
}

/* ============================================================
   Fan Tokens — extras: token icons, rich catalog, donation widget
   ============================================================ */

/* Token icon — img or generated SVG */
.ft-token-icon {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--bg-secondary);
    object-fit: cover;
    flex-shrink: 0;
}
.ft-token-icon--flag {
    border-radius: 4px;
    object-fit: cover;
}

/* Icon wrapper — base for the country flag overlay */
.ft-token-icon-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
}
.ft-token-icon-wrap > .ft-token-icon {
    width: 100%;
    height: 100%;
}
.ft-token-icon__flag {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 42%;
    height: 42%;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-card);
    background: var(--bg-card);
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ft-token-icon--placeholder {
    width: 20px;
    height: 20px;
    background: var(--border);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

/* Rich catalog table — competitor-style centered alignment.
   Column widths chosen so total ≤ container max-width (1200px) — no horizontal
   scroll on desktop. Mobile keeps overflow: auto fallback inside .ft-catalog__scroll. */
.ft-catalog__col-rank    { width: 32px;  text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ft-catalog__col-token   { width: 175px; min-width: 175px; max-width: 175px; text-align: left; }
.ft-catalog__col-buy     { width: 78px;  text-align: center; }
.ft-catalog__col-price   { width: 80px;  white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; font-weight: 600; color: var(--text-primary); }
.ft-catalog__col-pct     { width: 64px;  white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; }
.ft-catalog__col-mc      { width: 88px;  white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; font-weight: 600; color: var(--text-primary); }
.ft-catalog__col-vol     { width: 100px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; }
.ft-catalog__col-supply  { width: 130px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; color: var(--text-secondary); font-size: 0.82rem; }
.ft-catalog__col-chart   { width: 140px; text-align: center; }
.ft-catalog__col-chart svg { display: inline-block; width: 100%; max-width: 130px; height: 44px; color: var(--text-secondary); }
.ft-catalog__col-chart .sparkline { vertical-align: middle; }
.ft-catalog__col-chart .sparkline--up    { color: var(--green); }
.ft-catalog__col-chart .sparkline--down  { color: var(--accent); }

/* Header row: also centered for numeric columns (Token stays left) */
.ft-catalog__table thead th {
    text-align: center;
    white-space: nowrap;
}
.ft-catalog__table thead th.ft-catalog__col-token { text-align: left; }

.ft-catalog__col-buy .btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    display: inline-block;
    text-decoration: none;
}

/* Outlined "Buy" pill — matches fantokens.com competitor styling */
.btn-buy-pill {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: transparent;
    color: var(--accent-2);
    border: 1.5px solid var(--accent-2);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.btn-buy-pill:hover {
    background: var(--accent-2);
    color: white;
}

/* Two-line cell stack (Volume / Supply) — centered horizontally */
.ft-catalog__cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    line-height: 1.3;
}
.ft-catalog__cell-stack strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.92rem;
}
.ft-catalog__cell-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Circulating supply progress bar — bar above, label centered below */
.ft-supply-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    max-width: 150px;
    margin-top: 0.25rem;
}
.ft-supply-bar__track {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    position: relative;
    overflow: hidden;
}
.ft-supply-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--green) 0%, #6dd474 100%);
}
.ft-supply-bar__label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Summary footer below table */
.ft-catalog__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0.5rem 0.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0.75rem;
}
.ft-catalog__summary {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.ft-catalog__summary li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ft-catalog__summary span {
    color: var(--text-secondary);
}
.ft-catalog__summary strong {
    color: var(--accent-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Pagination under catalog */
.ft-catalog__pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.25rem 0;
    flex-wrap: wrap;
}
.ft-catalog__pagination[hidden] {
    display: none;
}
.ft-catalog__pagination-counter {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.ft-catalog__pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.ft-catalog__pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.ft-catalog__pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition);
}
.ft-catalog__pagination-btn:hover:not(:disabled):not(.is-current) {
    background: var(--bg-card-hover);
    border-color: var(--accent-2);
    color: var(--accent-2);
}
.ft-catalog__pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ft-catalog__pagination-btn.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    cursor: default;
}
.ft-catalog__pagination-ellipsis {
    padding: 0 0.4rem;
    color: var(--text-muted);
    user-select: none;
}

.ft-catalog__token-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text-primary);
    text-decoration: none;
}
.ft-catalog__token-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    flex: 1;
}
.ft-catalog__token-meta strong {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Allow up to 2 lines; ellipsize anything beyond */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-catalog__token-symbol {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.1rem;
}

/* Widget — token entry with icon */
.ft-widget__token {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.ft-widget__token .ft-token-icon { width: 20px; height: 20px; }

/* Donation widget (placeholder) */
.ft-widget--donation {
    position: relative;
    border-left: 3px solid var(--gold);
}
.ft-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.ft-widget__header .ft-widget__title { margin-bottom: 0; }
.ft-widget__badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg-primary);
    flex-shrink: 0;
}
.ft-widget__subtitle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.65rem;
    line-height: 1.35;
}
.ft-widget__list--locked {
    opacity: 0.6;
    pointer-events: none;
    filter: saturate(0.5);
}
.ft-widget__list--locked li {
    padding: 0.45rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ft-widget__rank {
    font-weight: 700;
    color: var(--text-muted);
    width: 1.5em;
    text-align: right;
    margin-right: 0.25rem;
}
.ft-widget__cta {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--gold);
}
.ft-widget__cta:hover { color: var(--accent); }

/* Token-show hero icon (NT / club / planned) */
.ft-token-show__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ft-token-show__icon .ft-token-icon {
    width: 64px;
    height: 64px;
}
.ft-token-show__icon .ft-token-icon--flag {
    width: 80px;
    height: 56px;
}

/* WC cards — icons */
.ft-wc-card__header .ft-token-icon { width: 48px; height: 48px; }
.ft-wc-card--planned .ft-token-icon { width: 56px; height: 56px; margin: 0 auto; }

/* Mobile tweaks for rich catalog */
@media (max-width: 768px) {
    .ft-catalog__col-token       { min-width: 160px; }
    .ft-catalog__col-token .ft-token-icon { width: 26px; height: 26px; }
    .ft-catalog__token-meta strong { font-size: 0.85rem; }
    .ft-catalog__col-buy         { width: 70px; }
    .ft-catalog__col-buy .btn    { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
    .ft-catalog__col-chart       { width: 80px; }
    .ft-widgets__grid {
        grid-template-columns: 1fr;
    }
    .ft-catalog__pagination {
        flex-direction: column;
        align-items: center;
    }
    .ft-catalog__pagination-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.82rem;
    }
}

/* ============================================================
   Hero grid — price card (2fr) + TradingView (3fr)
   ============================================================ */
.ft-hero-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 1.25rem;
    margin: 1.5rem 0 1.75rem;
    align-items: stretch;
}
.ft-hero-grid__left,
.ft-hero-grid__right {
    min-width: 0;
    min-height: 580px;
}
.ft-hero-grid__left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ft-hero-grid__left > .ft-price-card--compact {
    flex: 0 0 auto;
}
.ft-hero-grid__left > .ft-athatl {
    margin: 0;
    flex: 0 0 auto;
}
.ft-hero-grid__left .ft-athatl {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.ft-hero-grid__left .ft-athatl__cell {
    padding: 0.6rem 0.8rem;
}
.ft-hero-grid__left .ft-athatl__value {
    font-size: 1.05rem;
}
.ft-hero-grid__left .ft-athatl__label {
    font-size: 0.66rem;
    margin-bottom: 0.15rem;
}
.ft-hero-grid__left .ft-athatl__delta {
    font-size: 0.78rem;
    margin-top: 0.1rem;
}
.ft-hero-grid__left .ft-athatl__date {
    font-size: 0.72rem;
    margin-top: 0.1rem;
}
.ft-hero-grid__right {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
}
.ft-tradingview {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
/* Chart-unavailable placeholder for tokens without TradingView-indexed exchange listing */
.ft-tradingview--unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.ft-chart-unavailable {
    text-align: center;
    max-width: 360px;
    color: var(--text-secondary);
}
.ft-chart-unavailable__icon {
    display: inline-block;
    font-size: 2.6rem;
    opacity: 0.55;
    margin-bottom: 0.75rem;
}
.ft-chart-unavailable__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.ft-chart-unavailable__body {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
}
.ft-tradingview .tradingview-widget-container,
.ft-tradingview iframe {
    border: 0 !important;
}

/* Compact variant of price card (used in hero grid left column) */
.ft-price-card--compact {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.9rem 1.1rem 3px;
    margin: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ft-price-card--compact .ft-price-card__row1 {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.ft-price-card--compact .ft-price-card__price {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ft-price-card--compact .ft-price-card__change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
    line-height: 1.1;
}
.ft-price-card--compact .ft-price-card__change.ft-change--down {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}
.ft-price-card--compact .ft-price-card__change .ft-price-card__change-label {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.85;
    margin-left: 0.15rem;
}
.ft-price-card--compact .ft-price-card__changes {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
}
.ft-price-card--compact .ft-price-card__change-cell {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
}
.ft-price-card--compact .ft-price-card__change-cell .ft-price-card__change-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.ft-price-card--compact .ft-price-card__change-cell .ft-change--up,
.ft-price-card--compact .ft-price-card__change-cell .ft-change--down {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1.1;
}
.ft-price-card--compact .ft-price-card__change-cell .ft-change--up {
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
}
.ft-price-card--compact .ft-price-card__change-cell .ft-change--down {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}
.ft-price-card--compact .ft-perf-bar {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}
.ft-price-card--compact .ft-perf-bar__row {
    margin-bottom: 0.3rem;
}
.ft-price-card--compact .ft-perf-bar__label {
    font-size: 0.66rem;
}
.ft-price-card--compact .ft-perf-bar__value {
    font-size: 0.82rem;
}
.ft-price-card--compact .ft-perf-bar__track {
    height: 6px;
}
.ft-price-card--compact .ft-price-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.75rem;
    margin: 0;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
}
.ft-price-card--compact .ft-stat {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.ft-price-card--compact .ft-stat dt {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin: 0;
}
.ft-price-card--compact .ft-stat dd {
    margin: 0;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.ft-price-card--compact .ft-stat--wide {
    grid-column: 1 / -1;
}
.ft-price-card--compact .ft-stat--col2 {
    grid-column: 2;
}
.ft-price-card--compact .ft-contract-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.ft-price-card--compact .ft-contract-row__addr {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.ft-price-card--compact .ft-contract-row .ft-contract {
    font-size: 0.82rem;
    padding: 0;
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
}
.ft-price-card--compact .ft-contract-row .ft-copy-btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
}
.ft-price-card--compact .ft-contract-row .ft-explorer-link {
    font-size: 0.7rem;
}
.ft-price-card--compact .ft-supply-bar__label {
    font-size: 0.66rem;
}
.ft-price-card--compact .ft-supply-bar__track {
    height: 3px;
}
.ft-price-card--compact .ft-price-card__attribution {
    margin: 0;
    font-size: 0.62rem;
    color: var(--text-secondary);
    text-align: right;
    padding: 0;
}
/* Buy button compressed inside the smaller card */
.ft-price-card--compact .ft-buy-btn {
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
}

/* Buy CTA inside price card */
.ft-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    background: var(--accent-color, #ffd200);
    color: #1a1a2e;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, transform 0.05s;
    box-shadow: 0 4px 14px rgba(255, 210, 0, 0.18);
}
.ft-buy-btn:hover {
    background: #ffdd33;
    text-decoration: none;
    color: #1a1a2e;
}
.ft-buy-btn:active { transform: translateY(1px); }

/* Tooltip (info icon) for stat labels */
.ft-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    cursor: help;
    position: relative;
    line-height: 1;
    user-select: none;
}
[data-theme="light"] .ft-tip {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}
.ft-tip:hover,
.ft-tip:focus {
    background: var(--accent-color, #ffd200);
    color: #1a1a2e;
    border-color: var(--accent-color, #ffd200);
    outline: none;
}
.ft-tip:hover::after,
.ft-tip:focus::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    font-style: normal;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 20;
    pointer-events: none;
}
.ft-tip:hover::before,
.ft-tip:focus::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
    z-index: 20;
    pointer-events: none;
}
[data-theme="light"] .ft-tip:hover::after,
[data-theme="light"] .ft-tip:focus::after {
    background: #ffffff;
    color: #1a1a2e;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .ft-tip:hover::before,
[data-theme="light"] .ft-tip:focus::before {
    border-top-color: #ffffff;
}

@media (max-width: 900px) {
    .ft-hero-grid {
        grid-template-columns: 1fr;
    }
    .ft-hero-grid__left,
    .ft-hero-grid__right {
        min-height: auto;
    }
    .ft-hero-grid__right {
        height: 360px;
    }
}
@media (max-width: 480px) {
    .ft-price-card--compact {
        padding: 1rem 1.1rem;
    }
    .ft-price-card--compact .ft-price-card__price {
        font-size: 1.65rem;
    }
    .ft-price-card--compact .ft-price-card__stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Token detail v2 — Round A & B additions
   ============================================================ */

/* 24h Performance bar (Low ←→ High with current marker) */
.ft-perf-bar {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.ft-perf-bar__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.ft-perf-bar__col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ft-perf-bar__col--end { align-items: flex-end; }
.ft-perf-bar__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.ft-perf-bar__value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.ft-perf-bar__track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
[data-theme="light"] .ft-perf-bar__track {
    background: #DCDCDC;
}
.ft-perf-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #D1EC00 0%, #7BCB00 50%, #008A00 100%);
    transition: width 0.3s ease-out;
}

/* ATH / ATL block */
.ft-athatl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.ft-athatl__cell {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.ft-athatl__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}
.ft-athatl__value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.ft-athatl__delta {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.15rem;
}
.ft-athatl__date {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
@media (max-width: 480px) {
    .ft-athatl { grid-template-columns: 1fr; }
}

/* Token metadata block (chain + contract + explorer) */
.ft-metadata {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.ft-metadata__title {
    margin: 0 0 0.85rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.ft-metadata__grid {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}
.ft-metadata__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    align-items: center;
    margin: 0;
}
.ft-metadata__row dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.ft-metadata__row dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.9rem;
}
.ft-chain-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(255, 210, 0, 0.15);
    border: 1px solid rgba(255, 210, 0, 0.4);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ft-contract {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: var(--text-primary);
}
[data-theme="light"] .ft-contract {
    background: rgba(0,0,0,0.05);
}
.ft-copy-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ft-copy-btn:hover {
    border-color: var(--accent-color, #ffd200);
    background: rgba(255, 210, 0, 0.08);
}
.ft-copy-btn.is-copied {
    border-color: #22c55e;
    color: #22c55e;
}
.ft-explorer-link {
    font-size: 0.85rem;
    color: var(--accent-color, #ffd200);
    text-decoration: none;
}
.ft-explorer-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .ft-metadata__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* Markets table */
.ft-markets {
    margin: 2rem 0;
}
.ft-markets__title {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    color: var(--text-primary);
}
.ft-markets__intro {
    color: var(--text-secondary);
    margin: 0 0 1rem;
    font-size: 0.92rem;
}
.ft-markets__no-data {
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    text-align: center;
}
.ft-markets__scroll {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.ft-markets__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    background: var(--bg-card);
}
.ft-markets__table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}
.ft-markets__table tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-primary);
}
.ft-markets__table tbody tr:last-child td { border-bottom: none; }
.ft-markets__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ft-markets__exch {
    font-weight: 600;
}
.ft-markets__pair {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.82rem;
    padding: 0.15rem 0.45rem;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}
[data-theme="light"] .ft-markets__pair {
    background: rgba(0,0,0,0.05);
}
.ft-markets__partner-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.12rem 0.5rem;
    background: rgba(255, 210, 0, 0.18);
    border: 1px solid rgba(255, 210, 0, 0.5);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.ft-markets__row--partner {
    background: rgba(255, 210, 0, 0.04);
}
.ft-markets__trade-btn {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    background: var(--accent-color, #ffd200);
    color: #1a1a2e;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ft-markets__trade-btn:hover {
    background: #ffdd33;
    text-decoration: none;
}

@media (max-width: 768px) {
    .ft-markets__table thead th,
    .ft-markets__table tbody td {
        padding: 0.55rem 0.6rem;
        font-size: 0.82rem;
    }
}



/* ───── Fan-token search ─────────────────────────────────────────────────── */
.ft-search { padding: 2rem 0 1rem; position: relative; }
.ft-search__box {
    position: relative;
    max-width: 640px;
    margin: 0.5rem auto 0.5rem;
}
.ft-search__icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    opacity: 0.55;
    pointer-events: none;
}
.ft-search__input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    font-size: 1rem;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255,255,255,0.18));
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ft-search__input:focus {
    outline: none;
    border-color: var(--accent, #f5c518);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.22);
}
.ft-search__try {
    max-width: 640px;
    margin: 0 auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}
.ft-search__results {
    list-style: none;
    margin: 0.4rem auto 0;
    padding: 0.35rem;
    max-width: 640px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32);
    position: relative;
    z-index: 5;
}
.ft-search__results li { padding: 0; }
.ft-search__item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 7px;
    text-decoration: none;
    color: var(--text-primary);
}
.ft-search__item:hover,
.ft-search__results li.is-active .ft-search__item {
    background: rgba(245, 197, 24, 0.12);
}
.ft-search__item-label { font-weight: 600; }
.ft-search__item-sym {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.ft-search__item-sub {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    border-radius: 999px;
}
.ft-search__none {
    padding: 0.85rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
[data-theme="light"] .ft-search__input { background: #fff; }
[data-theme="light"] .ft-search__results { background: #fff; }
[data-theme="light"] .ft-search__item:hover,
[data-theme="light"] .ft-search__results li.is-active .ft-search__item {
    background: rgba(245, 197, 24, 0.22);
}
@media (max-width: 480px) {
    .ft-search__item { grid-template-columns: 1fr auto; }
    .ft-search__item-sub { grid-column: 1 / -1; justify-self: start; }
}


/* ═════════════════════════════════════════════════════════════════════════ */
/* Phase 3 — Internal fan-token promo placements                             */
/* ═════════════════════════════════════════════════════════════════════════ */

/* ─── Tier 1: team banner (indigo to distinguish from green squad banner) ── */
.ft-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.ft-banner:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99, 102, 241, 0.18); }
.ft-banner--planned {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), rgba(245, 158, 11, 0.12));
    border-color: rgba(234, 179, 8, 0.35);
}
.ft-banner__icon { font-size: 1.6rem; }
.ft-banner__text { display: block; }
.ft-banner__h3 { display: block; font-size: 1rem; margin: 0 0 0.15rem; }
.ft-banner__body { display: block; font-size: 0.85rem; color: var(--text-secondary); }
.ft-banner__cta { font-weight: 600; font-size: 0.9rem; color: rgba(99, 102, 241, 1); white-space: nowrap; }
.ft-banner--planned .ft-banner__cta { color: rgba(234, 179, 8, 1); }

/* ─── Tier 1: champion fan-token modal ──────────────────────────────────── */
.ft-modal { position: fixed; inset: 0; z-index: 1000; }
.ft-modal[hidden] { display: none !important; }
.ft-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.ft-modal__dialog {
    position: absolute; inset: 0; margin: auto;
    max-width: 460px; max-height: fit-content;
    padding: 2rem 1.5rem;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border, rgba(255,255,255,0.18));
    box-shadow: 0 20px 50px rgba(0,0,0,0.42);
    text-align: center;
}
.ft-modal__x {
    position: absolute; top: 0.5rem; right: 0.75rem;
    background: none; border: 0; cursor: pointer;
    font-size: 1.5rem; color: var(--text-secondary);
}
.ft-modal__icon { font-size: 2.4rem; display: block; margin-bottom: 0.5rem; }
.ft-modal__h3 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.ft-modal__body { margin: 0 0 1.25rem; color: var(--text-secondary); font-size: 0.92rem; }
.ft-modal__ctas { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
body.ft-modal-open { overflow: hidden; }

/* ─── Tier 1: dual-token card on match pages ────────────────────────────── */
.ft-match-dual { margin: 1.5rem auto; }
.ft-match-dual__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(34, 197, 94, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.ft-match-dual__icon { font-size: 1.6rem; }
.ft-match-dual__h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.ft-match-dual__text { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }
.ft-match-dual__ctas { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ft-match-dual__cta-a,
.ft-match-dual__cta-b {
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-family: ui-monospace, monospace;
    font-size: 0.9rem;
}
.ft-match-dual__cta-a { background: rgba(99, 102, 241, 0.18); color: rgba(165, 180, 252, 1); }
.ft-match-dual__cta-b { background: rgba(34, 197, 94, 0.18); color: rgba(134, 239, 172, 1); }

/* ─── Tier 2: group chip row ────────────────────────────────────────────── */
.ft-group-chips { margin-bottom: 1.5rem; padding: 1rem; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border, rgba(255,255,255,0.12)); }
.ft-group-chips__h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.ft-group-chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ft-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    border: 1px solid transparent;
    transition: background 100ms ease, border-color 100ms ease;
}
.ft-chip:hover { background: rgba(99, 102, 241, 0.25); border-color: rgba(99, 102, 241, 0.45); }
.ft-chip--planned { background: rgba(234, 179, 8, 0.14); }
.ft-chip--planned:hover { background: rgba(234, 179, 8, 0.25); border-color: rgba(234, 179, 8, 0.45); }
.ft-chip__sym { font-family: ui-monospace, monospace; font-weight: 700; }
.ft-chip__name { color: var(--text-secondary); }

/* ─── Tier 2: predictions row token chip ────────────────────────────────── */
.ft-pred-token {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(168, 85, 247, 0.18));
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: rgba(199, 210, 254, 1);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease;
}
.ft-pred-token:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(168, 85, 247, 0.26));
    border-color: rgba(99, 102, 241, 0.6);
}
@media (max-width: 600px) {
    .ft-pred-token { display: none; }
}

/* ─── Tier 2: coach info row link ───────────────────────────────────────── */
.ft-coach-row {
    color: rgba(165, 180, 252, 1);
    font-family: ui-monospace, monospace;
    text-decoration: none;
    font-weight: 600;
}
.ft-coach-row:hover { text-decoration: underline; }

/* ─── Tier 2: squad-page callout ────────────────────────────────────────── */
.ft-squad-callout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.ft-squad-callout__icon { font-size: 1.6rem; }
.ft-squad-callout__text h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.ft-squad-callout__text p { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }

/* ─── Tier 3: home featured section ─────────────────────────────────────── */
.ft-home-feature { padding: 2rem 0; }
.ft-home-feature__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.ft-home-feature__badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.25);
    color: rgba(234, 179, 8, 1);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.ft-home-feature__h2 { margin: 0 0 0.5rem; font-size: 1.4rem; }
.ft-home-feature__body { margin: 0 0 1rem; color: var(--text-secondary); font-size: 0.92rem; }
.ft-home-feature__cards {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}
.ft-home-feature__cards li { margin: 0; }

.ft-home-feature__card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.ft-home-feature__card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 100% 0%, rgba(99,102,241,0.14), transparent 60%);
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
}
.ft-home-feature__card:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 10px 28px rgba(0,0,0,0.32), 0 0 0 1px rgba(99,102,241,0.18) inset;
}
.ft-home-feature__card:hover::before { opacity: 1; }
.ft-home-feature__card--up:hover    { border-color: rgba(34,197,94,0.5); box-shadow: 0 10px 28px rgba(0,0,0,0.32), 0 0 0 1px rgba(34,197,94,0.22) inset; }
.ft-home-feature__card--down:hover  { border-color: rgba(239,68,68,0.5); box-shadow: 0 10px 28px rgba(0,0,0,0.32), 0 0 0 1px rgba(239,68,68,0.22) inset; }

.ft-home-feature__card-icon {
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.ft-home-feature__card-icon .ft-token-icon-wrap,
.ft-home-feature__card-icon .ft-token-icon { width: 40px; height: 40px; border-radius: 50%; }

.ft-home-feature__card-main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}
.ft-home-feature__card-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}
.ft-home-feature__card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-home-feature__card-sym {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.ft-home-feature__card-stats {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.ft-home-feature__card-price {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}
.ft-home-feature__card-chg {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ft-home-feature__card-chg--up   { color: rgb(74,222,128); background: rgba(34,197,94,0.14); }
.ft-home-feature__card-chg--down { color: rgb(248,113,113); background: rgba(239,68,68,0.14); }
.ft-home-feature__card-chg--flat { color: var(--text-secondary); background: rgba(255,255,255,0.06); }

@media (max-width: 768px) {
    .ft-home-feature__inner { grid-template-columns: 1fr; }
    .ft-home-feature__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .ft-home-feature__cards { grid-template-columns: 1fr; }
}

[data-theme="light"] .ft-home-feature__card {
    background: linear-gradient(150deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .ft-home-feature__card-icon { background: rgba(0,0,0,0.04); }
[data-theme="light"] .ft-home-feature__card-chg--up   { color: rgb(22,101,52); background: rgba(34,197,94,0.18); }
[data-theme="light"] .ft-home-feature__card-chg--down { color: rgb(153,27,27); background: rgba(239,68,68,0.18); }

/* ─── Tier 3: teams ranking chip ────────────────────────────────────────── */
.ft-rank-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.35rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(168, 85, 247, 0.18));
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: rgba(199, 210, 254, 1);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    vertical-align: middle;
    transition: background 120ms ease, border-color 120ms ease;
}
.ranking-card:hover .ft-rank-chip {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(168, 85, 247, 0.26));
    border-color: rgba(99, 102, 241, 0.6);
}
[data-theme="light"] .ft-rank-chip {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.1));
    border-color: rgba(99, 102, 241, 0.35);
    color: rgb(55, 48, 163);
}

/* ─── Tier 3: schedule trending widget ──────────────────────────────────── */
.ft-schedule-trending {
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.ft-schedule-trending__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ft-schedule-trending__h3 {
    margin: 0;
    font-size: 1.2rem;
}
.ft-schedule-trending__cta {
    font-weight: 600;
    color: rgba(165, 180, 252, 1);
    text-decoration: none;
    white-space: nowrap;
}
.ft-schedule-trending__cta:hover { text-decoration: underline; }

.ft-trending-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
}
.ft-trending-cards li { margin: 0; }

.ft-trending-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.ft-trending-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 100% 0%, rgba(99,102,241,0.14), transparent 60%);
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
}
.ft-trending-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 10px 28px rgba(0,0,0,0.32), 0 0 0 1px rgba(99,102,241,0.18) inset;
}
.ft-trending-card:hover::before { opacity: 1; }
.ft-trending-card--up:hover    { border-color: rgba(34,197,94,0.5); box-shadow: 0 10px 28px rgba(0,0,0,0.32), 0 0 0 1px rgba(34,197,94,0.22) inset; }
.ft-trending-card--down:hover  { border-color: rgba(239,68,68,0.5); box-shadow: 0 10px 28px rgba(0,0,0,0.32), 0 0 0 1px rgba(239,68,68,0.22) inset; }

.ft-trending-card__icon {
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.ft-trending-card__icon .ft-token-icon-wrap,
.ft-trending-card__icon .ft-token-icon { width: 40px; height: 40px; border-radius: 50%; }

.ft-trending-card__main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}
.ft-trending-card__head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}
.ft-trending-card__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-trending-card__sym {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.ft-trending-card__stats {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.ft-trending-card__price {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}
.ft-trending-card__chg {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ft-trending-card__chg--up   { color: rgb(74,222,128); background: rgba(34,197,94,0.14); }
.ft-trending-card__chg--down { color: rgb(248,113,113); background: rgba(239,68,68,0.14); }
.ft-trending-card__chg--flat { color: var(--text-secondary); background: rgba(255,255,255,0.06); }

[data-theme="light"] .ft-trending-card {
    background: linear-gradient(150deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .ft-trending-card__icon { background: rgba(0,0,0,0.04); }
[data-theme="light"] .ft-trending-card__chg--up   { color: rgb(22,101,52); background: rgba(34,197,94,0.18); }
[data-theme="light"] .ft-trending-card__chg--down { color: rgb(153,27,27); background: rgba(239,68,68,0.18); }

/* ─── Tier 3: header WC top strip ───────────────────────────────────────── */
.ft-top-strip {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.9), rgba(168, 85, 247, 0.85));
    color: #fff;
    font-size: 0.85rem;
}
.ft-top-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.45rem 1rem;
    flex-wrap: wrap;
}
.ft-top-strip__text { font-weight: 500; }
.ft-top-strip__cta {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}
.ft-top-strip__close {
    margin-left: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    color: #fff;
    width: 22px; height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.ft-top-strip__close:hover { background: rgba(255, 255, 255, 0.3); }

@media (max-width: 480px) {
    .ft-banner { grid-template-columns: 1fr; text-align: left; }
    .ft-banner__cta { justify-self: start; }
    .ft-match-dual__card { grid-template-columns: 1fr; }
    .ft-squad-callout { grid-template-columns: 1fr; }
    .ft-top-strip__inner { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
}

[data-theme="light"] .ft-banner__cta { color: rgb(67, 56, 202); }
[data-theme="light"] .ft-banner--planned .ft-banner__cta { color: rgb(180, 83, 9); }
[data-theme="light"] .ft-match-dual__cta-a { color: rgb(67, 56, 202); }
[data-theme="light"] .ft-match-dual__cta-b { color: rgb(22, 101, 52); }
[data-theme="light"] .ft-pred-token {
    color: rgb(55, 48, 163);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.1));
    border-color: rgba(99, 102, 241, 0.35);
}
[data-theme="light"] .ft-coach-row { color: rgb(67, 56, 202); }
[data-theme="light"] .ft-rank-chip { color: rgb(67, 56, 202); }
[data-theme="light"] .ft-home-feature__card { background: rgba(0,0,0,0.04); }


/* ═════════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════════════ */
/* Phase 4 — Where to Watch  (matches /fan-tokens/ visual language)          */
/* ═════════════════════════════════════════════════════════════════════════ */

.ft-watch { padding-bottom: 2rem; }

/* ─── Search bar ─────────────────────────────────────────────────────────── */
.ft-watch__search {
    position: relative;
    max-width: 560px;
    margin: -0.8rem auto 2rem;
}

/* /watch/ hero — tighter rhythm between intro / countdown */
.ft-hero--tight .ft-hero__intro    { margin-bottom: 0.4rem; }
.ft-hero--tight .ft-hero__countdown { margin-bottom: 0.5rem; }
.ft-hero--tight                    { padding-bottom: 0.5rem; }
.ft-watch__search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    color: var(--text-secondary);
    pointer-events: none;
}
.ft-watch__search-input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    font-size: 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.ft-watch__search-input:focus {
    outline: none;
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ft-watch__no-results {
    text-align: center;
    color: var(--text-secondary);
    padding: 1rem;
    font-size: 0.95rem;
}

/* ─── Section headings ───────────────────────────────────────────────────── */
.ft-watch__section { margin-bottom: 2.5rem; }
.ft-watch__section-h2 {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.ft-watch__section-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.ft-watch__section--hosts .ft-watch__section-h2 { color: var(--gold, rgb(234, 179, 8)); }

/* ─── Country card grid ──────────────────────────────────────────────────── */
.ft-watch__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.ft-watch-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.ft-watch-card__channels { flex: 1; }
.ft-watch-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-2);
    box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.ft-watch-card--host {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(245, 158, 11, 0.04));
    border-color: rgba(234, 179, 8, 0.35);
}
.ft-watch-card--host:hover { border-color: rgba(234, 179, 8, 0.65); }

/* Combined Host nations card — USA / Canada / Mexico share one wrapper */
.ft-watch-card--hosts-combined {
    grid-column: 1 / -1;
    padding: 1.5rem 1.5rem 1.25rem;
}
.ft-watch-card__hosts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.ft-watch-card--hosts-4col .ft-watch-card__hosts-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ft-watch-card__hosts-grid > .ft-watch-card__host-cell {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    border-radius: calc(var(--radius) - 4px);
    background: rgba(234, 179, 8, 0.05);
    border: 1px solid rgba(234, 179, 8, 0.18);
}
.ft-watch-card__hosts-grid > .ft-watch-card__host-cell--wide {
    grid-column: span 2;
}
.ft-watch-card--hosts-combined .ft-watch-card__channels { flex: 1; }

/* Wide host cell: split its channel list into 2 sub-columns × 3 rows so a
   long broadcaster list (e.g. USA's 6 channels) gets the same row height
   and same name↔chip gap as 3-channel hosts next to it. */
.ft-watch-card__host-cell--wide .ft-watch-card__channels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 1.5rem;
    row-gap: 0.55rem;
    align-items: center;
    align-content: start;
}
.ft-watch-card__host-cell--wide .ft-watch-card__channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}
.ft-watch-card__host-cell--wide .ft-watch-card__channel .ft-watch-card__channel-name {
    min-width: 0;
}

@media (max-width: 768px) {
    .ft-watch-card__hosts-grid,
    .ft-watch-card--hosts-4col .ft-watch-card__hosts-grid { grid-template-columns: 1fr; gap: 1rem; }
    .ft-watch-card__hosts-grid > .ft-watch-card__host-cell--wide { grid-column: auto; }
    .ft-watch-card__host-cell--wide .ft-watch-card__channels { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

.ft-watch-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--border);
}
.ft-watch-card__flag {
    width: 40px;
    height: 27px;
    border-radius: 4px;
    border: 1px solid var(--border);
    object-fit: cover;
    flex-shrink: 0;
}
.ft-watch-card__country {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ft-watch-card__host-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.2);
    color: var(--gold, rgb(234, 179, 8));
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.ft-watch-card__channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.55rem 0.65rem;
    align-items: center;
    align-content: start;
    font-size: 0.88rem;
    flex: 1;
}
.ft-watch-card__channels--two-col {
    grid-template-columns: minmax(0, 1fr) auto;
}
.ft-watch-card__channel {
    display: contents;
}
.ft-watch-card__channel-name {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ft-watch-card__channel-name:hover { color: var(--accent-2, rgb(165, 180, 252)); }
.ft-watch-card__type {
    display: inline-block;
    box-sizing: border-box;
    min-width: 6.3rem;
    font-size: 0.68rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    flex-shrink: 0;
}
.ft-watch-card__type--tv-free,
.ft-watch-card__type--streaming-free {
    color: rgb(74, 222, 128);
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.1);
}
.ft-watch-card__type--tv-paid {
    color: rgb(248, 113, 113);
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.1);
}
.ft-watch-card__type--streaming {
    color: rgb(165, 180, 252);
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.1);
}
.ft-watch-card__matches {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    min-width: 1.5rem;
}
.ft-watch-card__note {
    margin: 0.85rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border);
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ─── VPN section ────────────────────────────────────────────────────────── */
.ft-watch-vpn {
    margin: 3rem 0 0;
    padding: 2rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.06));
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.ft-watch-vpn__header { max-width: 720px; margin: 0 auto 1.5rem; text-align: center; }
.ft-watch-vpn__header .ft-section__title { margin-bottom: 0.5rem; }
.ft-watch-vpn__intro { margin: 0; color: var(--text-secondary); }

.ft-watch-vpn__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.ft-watch-vpn__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: transform var(--transition), border-color var(--transition);
}
.ft-watch-vpn__card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-2);
}
.ft-watch-vpn__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.ft-watch-vpn__name { margin: 0; font-size: 1.1rem; font-weight: 700; }
.ft-watch-vpn__rating { font-size: 0.85rem; color: var(--gold, rgb(234, 179, 8)); white-space: nowrap; }
.ft-watch-vpn__tagline {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 2.4em;
}
.ft-watch-vpn__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ft-watch-vpn__stats > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ft-watch-vpn__stats dt {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
}
.ft-watch-vpn__stats dd {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-primary);
    font-weight: 500;
}
.ft-watch-vpn__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.ft-watch-vpn__cta {
    margin-top: auto;
    text-align: center;
    text-decoration: none;
}
.ft-watch-vpn__disclaimer {
    margin: 1.5rem auto 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
    max-width: 720px;
}

/* ─── Mini embed block for team/match pages ──────────────────────────────── */
.ft-watch-block {
    padding: 1.25rem 1.35rem;
    margin: 1.5rem auto;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
}
.ft-watch-block:hover { border-color: var(--accent-2); }
.ft-watch-block__h3 { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; }
.ft-watch-block__sub {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.ft-watch-block__channels {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ft-watch-block__channel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}
.ft-watch-block__channel a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}
.ft-watch-block__channel a:hover { color: var(--accent-2, rgb(165, 180, 252)); }
.ft-watch-block__type {
    font-size: 0.66rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    white-space: nowrap;
}
.ft-watch-block__type--tv-free,
.ft-watch-block__type--streaming-free {
    color: rgb(74, 222, 128);
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.1);
}
.ft-watch-block__type--tv-paid {
    color: rgb(248, 113, 113);
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.1);
}
.ft-watch-block__type--streaming {
    color: rgb(165, 180, 252);
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.1);
}
.ft-watch-block__more {
    display: inline-block;
    color: var(--accent-2, rgb(165, 180, 252));
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}
.ft-watch-block__more:hover { text-decoration: underline; }

/* ─── Light-theme overrides ──────────────────────────────────────────────── */
[data-theme="light"] .ft-watch-card__type--tv-free,
[data-theme="light"] .ft-watch-card__type--streaming-free,
[data-theme="light"] .ft-watch-block__type--tv-free,
[data-theme="light"] .ft-watch-block__type--streaming-free {
    color: rgb(22, 101, 52);
    background: rgba(34, 197, 94, 0.18);
}
[data-theme="light"] .ft-watch-card__type--tv-paid,
[data-theme="light"] .ft-watch-block__type--tv-paid {
    color: rgb(153, 27, 27);
    background: rgba(239, 68, 68, 0.18);
}
[data-theme="light"] .ft-watch-card__type--streaming,
[data-theme="light"] .ft-watch-block__type--streaming {
    color: rgb(55, 48, 163);
    background: rgba(99, 102, 241, 0.18);
}

/* ─── Top CTA banner (above country grid) ────────────────────────────────── */
.ft-watch__top-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 1.25rem auto 2rem;
    padding: 1rem 1.35rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(168, 85, 247, 0.16));
    border: 1px solid rgba(99, 102, 241, 0.45);
    color: var(--text-primary);
}
.ft-watch__top-cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.4;
    min-width: 0;
}
.ft-watch__top-cta-text strong {
    font-size: 1rem;
    font-weight: 700;
}
.ft-watch__top-cta-text span {
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.ft-watch__top-cta-btn {
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

/* ─── Disabled CTA on placeholder VPN providers ──────────────────────────── */
.ft-watch-vpn__card--soon {
    opacity: 0.82;
}
.ft-watch-vpn__cta--disabled {
    cursor: not-allowed;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    text-align: center;
    font-weight: 600;
    pointer-events: none;
}
[data-theme="light"] .ft-watch-vpn__cta--disabled {
    background: rgba(0, 0, 0, 0.04);
}

@media (max-width: 480px) {
    .ft-watch__grid { grid-template-columns: 1fr; }
    .ft-watch-vpn__stats { grid-template-columns: 1fr 1fr; }
    .ft-watch__top-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Team-page Where-to-Watch sidebar block (under match schedule) */
.team-watch__heading {
    /* Mirrors the inline-styled "Group Teams" h3 in the adjacent column so
       both columns gain equal vertical rhythm. */
    margin: 2rem 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.team-watch {
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    /* Stretch so the card's bottom border aligns with the bottom of the
       Group Teams list in the adjacent column. */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.team-watch__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.team-watch__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.92rem;
}
.team-watch__name {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.team-watch__name:hover { color: var(--accent-2, rgb(165, 180, 252)); }
.team-watch__more {
    display: block;
    margin-top: auto;   /* pushes to bottom of the flex column */
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, rgb(99, 102, 241), rgb(168, 85, 247));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.32);
    transition: transform var(--transition), box-shadow var(--transition);
}
/* Adjacent gap to channels list when card content is not stretching */
.team-watch__list + .team-watch__more { margin-top: 1rem; }
.team-watch__more:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
    color: #fff;
    text-decoration: none;
}
.team-watch__more:hover { text-decoration: underline; }

/* Match-page Where-to-Watch mini block (group-stage matches only) */
.match-watch {
    margin-bottom: 1rem;
}
.match-watch__note {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.25rem 0 1rem;
}
.match-watch__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.match-watch__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    transition: border-color var(--transition);
}
.match-watch__card:hover { border-color: var(--accent-2); }
.match-watch__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed var(--border);
}
.match-watch__flag {
    width: 32px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid var(--border);
    object-fit: cover;
    flex-shrink: 0;
}
.match-watch__team {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.match-watch__team strong { font-size: 0.98rem; }
.match-watch__country {
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.match-watch__channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.92rem;
}
.match-watch__channel-name {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-watch__channel-name:hover { color: var(--accent-2, rgb(165, 180, 252)); }
.match-watch__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, rgb(99, 102, 241), rgb(168, 85, 247));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.32);
    transition: transform var(--transition), box-shadow var(--transition);
}
.match-watch__more:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
    color: #fff;
    text-decoration: none;
}

/* /schedule/ → /watch/ cross-link */
.schedule-watch-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin: 1rem 0 0;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.schedule-watch-cta__text {
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.schedule-watch-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    background: linear-gradient(135deg, rgb(99, 102, 241), rgb(168, 85, 247));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.32);
    transition: transform var(--transition), box-shadow var(--transition);
}
.schedule-watch-cta__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
    color: #fff;
}
@media (max-width: 480px) {
    .schedule-watch-cta { flex-direction: column; align-items: flex-start; }
}