:root {
    --barca-blue: #004d98;
    --barca-red: #a50044;
    --barca-gold: #edbb00;
    --dark: #070b14;
    --dark2: #0d1525;
    --card: rgba(255, 255, 255, 0.04);
    --card-strong: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.08);
    --text: #f0f4ff;
    --muted: rgba(240, 244, 255, 0.58);
    --muted-soft: rgba(240, 244, 255, 0.34);
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    --radius: 18px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--dark);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

[data-theme="light"] {
    --dark: #eef3ff;
    --dark2: #f8fbff;
    --card: rgba(255, 255, 255, 0.72);
    --card-strong: rgba(255, 255, 255, 0.88);
    --border: rgba(8, 20, 44, 0.12);
    --text: #0f1b35;
    --muted: rgba(15, 27, 53, 0.68);
    --muted-soft: rgba(15, 27, 53, 0.46);
    --shadow: 0 14px 36px rgba(42, 64, 104, 0.16);
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

#countdown,
#stats,
#hub,
#poll,
#more-polls {
    scroll-margin-top: 110px;
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 77, 152, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(165, 0, 68, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(237, 187, 0, 0.04) 0%, transparent 70%),
        var(--dark);
}

.bg::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.stripe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: 4px;
    background: linear-gradient(90deg, var(--barca-blue) 0%, var(--barca-red) 50%, var(--barca-gold) 100%);
}

/* Special Ballon d'Or atmosphere for Dembele profile */
.player-page--dembele .bg {
    background:
        radial-gradient(ellipse 85% 62% at 20% 10%, rgba(250, 204, 21, 0.36) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 82% 82%, rgba(217, 119, 6, 0.26) 0%, transparent 60%),
        radial-gradient(ellipse 58% 48% at 50% 52%, rgba(255, 234, 138, 0.12) 0%, transparent 72%),
        #140f05;
}

.player-page--dembele .stripe {
    background: linear-gradient(90deg, #facc15 0%, #f59e0b 55%, #fef08a 100%);
}

.topbar {
    position: sticky;
    top: 4px;
    z-index: 15;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo-img {
    display: block;
    object-fit: contain;
}

.brand-logo-img--horizontal {
    width: auto;
    height: 64px;
    max-width: 168px;
    padding: 4px 6px;
    border-radius: 12px;
    background: #f4f2f1;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-logo-img--compact {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    box-shadow: var(--shadow);
    background: transparent;
}

.footer-brand-logo {
    display: block;
    width: auto;
    height: 64px;
    max-width: 160px;
    padding: 4px 6px;
    border-radius: 12px;
    background: #f4f2f1;
    object-fit: contain;
}

.brand-universe-note {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(237, 187, 0, 0.85);
}

.topbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.iq-gateway,
.social-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.iq-gateway {
    color: #0b1220;
    background: linear-gradient(135deg, #edbb00, #f5d76e);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

.iq-gateway:hover {
    filter: brightness(1.05);
}

.social-chip {
    color: rgba(240, 244, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(13, 21, 37, 0.72);
}

.social-chip:hover {
    color: #fff;
    border-color: rgba(237, 187, 0, 0.45);
}

.d3-explore {
    margin: 22px 0 28px;
    padding: 16px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 42rem;
}

.d3-explore-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.d3-explore-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.d3-explore-note {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.d3-explore-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0;
}

.d3-explore-link {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 13px;
    font-weight: 500;
}

.d3-explore-link:hover {
    color: var(--barca-gold);
}

.d3-explore--inline {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .d3-explore {
    border-top-color: rgba(18, 32, 58, 0.12);
}

[data-theme="light"] .d3-explore--inline {
    border-top-color: rgba(18, 32, 58, 0.12);
}

[data-theme="light"] .d3-explore-link {
    color: #12203a;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
        url("images/LY.jpg") center / cover no-repeat,
        linear-gradient(135deg, var(--barca-blue), var(--barca-red));
    color: transparent;
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
    text-indent: -9999px;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-copy strong {
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.brand-copy small {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.topnav {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    background: rgba(13, 21, 37, 0.72);
    border: 1px solid var(--border);
    border-radius: 999px;
    backdrop-filter: blur(16px);
}

.topnav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topnav a:hover {
    color: #fff;
}

.theme-toggle {
    border: 1px solid var(--border);
    background: var(--card-strong);
    color: var(--text);
    border-radius: 999px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(237, 187, 0, 0.5);
}

.theme-toggle,
.palette-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lang-select,
.appearance-toggle {
    border: 1px solid var(--border);
    background: var(--card-strong);
    color: var(--text);
    border-radius: 999px;
    min-height: 40px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.lang-select {
    padding-right: 28px;
}

/* Keep native dropdown options readable across OS/browser themes */
.lang-select option,
.lang-select optgroup {
    background: #ffffff;
    color: #0f172a;
}

.appearance-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.topbar {
    position: relative;
}

.appearance-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 24px;
    min-width: 260px;
    background: rgba(10, 15, 28, 0.9);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    z-index: 40;
}

.appearance-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.appearance-theme-options,
.appearance-palette-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.appearance-palette-options {
    margin-bottom: 0;
}

.appearance-panel button {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 10px;
    min-height: 34px;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.appearance-panel button.is-active {
    border-color: rgba(237, 187, 0, 0.6);
    box-shadow: inset 0 0 0 1px rgba(237, 187, 0, 0.35);
}

.theme-toggle-icon,
.palette-toggle-icon {
    font-size: 14px;
    display: inline-flex;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.theme-toggle.is-light .theme-toggle-icon {
    transform: rotate(18deg) scale(1.05);
}

.theme-toggle-label,
.palette-toggle-label {
    line-height: 1;
}

.palette-toggle {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 999px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.palette-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(237, 187, 0, 0.5);
}

main {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 56px 24px 88px;
}

.header {
    text-align: center;
    margin-bottom: 56px;
}

.badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--barca-blue), var(--barca-red));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
}

h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(42px, 10vw, 88px);
    line-height: 0.95;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

h1 span {
    background: linear-gradient(135deg, var(--barca-gold), #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-name {
    display: inline-block;
    white-space: nowrap;
}

.subtitle {
    font-size: 15px;
    color: var(--muted);
    max-width: 560px;
    margin: 16px auto 0;
    line-height: 1.7;
}

.provocateur {
    text-align: center;
    margin-bottom: 40px;
    padding: 22px 28px;
    background: linear-gradient(135deg, rgba(165, 0, 68, 0.15), rgba(0, 77, 152, 0.15));
    border: 1px solid rgba(165, 0, 68, 0.4);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

.provocateur::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(165, 0, 68, 0.05), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.provocateur .icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.provocateur p {
    position: relative;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(22px, 5vw, 34px);
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.1;
}

.provocateur p span {
    color: var(--barca-gold);
}

.provocateur small {
    display: block;
    position: relative;
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
}

.ad-slot {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px dashed rgba(237, 187, 0, 0.35);
    border-radius: var(--radius);
    padding: 22px;
    text-align: center;
    margin-bottom: 32px;
}

.ad-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--barca-gold);
    margin-bottom: 8px;
}

.ad-slot p {
    font-family: "Bebas Neue", sans-serif;
    font-size: 30px;
    letter-spacing: 0.04em;
}

.ad-slot small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 42px;
}

.article-card,
.faq-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}

.article-card p,
.faq-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.countdown-label {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
}

.countdown,
.countdown-bottom,
.season-hero,
.season-extra,
.stats-grid {
    display: grid;
    gap: 16px;
}

.countdown,
.countdown-bottom,
.season-hero,
.season-extra,
.stats-grid {
    grid-template-columns: repeat(3, 1fr);
}

.countdown-bottom {
    margin-bottom: 56px;
}

.unit,
.mini-card,
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.unit {
    padding: 24px 12px;
}

.small-unit {
    padding: 16px 12px;
}

.unit:hover,
.mini-card:hover,
.stat-card:hover,
.hero-card:hover,
.article-card:hover,
.faq-card:hover {
    transform: translateY(-3px);
}

.unit::before,
.hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--barca-blue), var(--barca-red));
}

.unit .val {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(40px, 8vw, 72px);
    line-height: 1;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #fff, rgba(237, 187, 0, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.small-unit .val {
    font-size: clamp(30px, 6vw, 52px);
}

.unit .lbl,
.desc {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
    display: block;
}

.section-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 16px;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-title-large {
    font-size: 24px;
    margin-bottom: 18px;
}

.season-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--barca-blue), var(--barca-red));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.hero-card {
    background: linear-gradient(135deg, rgba(0, 77, 152, 0.18), rgba(165, 0, 68, 0.12));
    border: 1px solid rgba(0, 77, 152, 0.35);
    border-radius: 18px;
    padding: 28px 16px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.hero-card:hover {
    border-color: rgba(237, 187, 0, 0.4);
}

.hero-card .emoji,
.mini-card .emoji,
.stat-card .emoji {
    display: block;
    margin-bottom: 8px;
}

.hero-card .emoji {
    font-size: 26px;
}

.hero-card .big-num {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(52px, 10vw, 80px);
    line-height: 1;
    background: linear-gradient(135deg, #fff 0%, var(--barca-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mini-card {
    padding: 14px 12px;
}

.mini-card .emoji,
.stat-card .emoji {
    font-size: 18px;
}

.mini-card .num,
.stat-card .num {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.mini-card .num {
    color: var(--barca-gold);
}

.stat-card .num {
    color: #fff;
}

.mini-card .desc,
.stat-card .desc {
    margin-top: 3px;
}

.edit-wrap {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 18px;
}

.edit-toggle,
.save-btn {
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.edit-toggle {
    padding: 11px 18px;
    font-size: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.edit-toggle:hover {
    border-color: rgba(237, 187, 0, 0.4);
}

.edit-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(237, 187, 0, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 40px;
}

.edit-title {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.edit-grid label {
    display: block;
}

.edit-grid span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 6px;
}

.edit-grid input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    font-family: "Bebas Neue", sans-serif;
    padding: 10px 12px;
    outline: none;
}

.save-btn {
    width: 100%;
    padding: 13px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--barca-blue), var(--barca-red));
}

.save-confirm {
    text-align: center;
    color: var(--barca-gold);
    font-size: 12px;
    margin-top: 12px;
}

.career-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 28px;
}

.finance-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
    margin-bottom: 34px;
}

.salary-box,
.clause-box,
.poll {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.salary-box {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.salary-box .icon-big {
    font-size: 36px;
    flex-shrink: 0;
}

.salary-box .info {
    flex: 1;
}

.salary-box .info small,
.clause-box small {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.salary-box .amount {
    font-family: "Bebas Neue", sans-serif;
    font-size: 36px;
    color: var(--barca-gold);
    line-height: 1.2;
}

.salary-box .sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.clause-box {
    text-align: center;
    padding: 28px;
    background: linear-gradient(135deg, rgba(165, 0, 68, 0.12), rgba(0, 77, 152, 0.12));
    border-color: rgba(165, 0, 68, 0.3);
}

.clause-box .big {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 6.5vw, 56px);
    color: #fff;
    line-height: 1;
    margin: 8px 0 4px;
    white-space: nowrap;
}

.clause-box .big span {
    color: var(--barca-gold);
}

.edit-wrap,
.edit-panel {
    display: none !important;
}

.clause-box p {
    font-size: 13px;
    color: var(--muted);
    max-width: 360px;
    margin: 0 auto;
}

.poll-hub {
    margin-bottom: 34px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(0, 77, 152, 0.12), rgba(165, 0, 68, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}

.poll-hub-intro {
    max-width: 720px;
    margin-bottom: 20px;
}

.poll-hub h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}

.poll-hub-intro p:last-child {
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
}

.poll-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

    .feature-grid,
    .data-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 40px;
    }

    .feature-card,
    .data-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 24px;
        transition: transform 0.18s ease, border-color 0.18s ease;
    }

    .feature-card:hover,
    .data-card:hover {
        transform: translateY(-3px);
        border-color: rgba(237, 187, 0, 0.35);
    }

    .feature-card h2,
    .data-card h2 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 14px;
    }

    .feature-card p,
    .data-card p {
        color: var(--muted);
        line-height: 1.8;
        font-size: 14px;
    }

    .feature-tag {
        display: inline-flex;
        margin-bottom: 16px;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--barca-gold);
    }

    .news-insight {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 28px;
        margin-bottom: 40px;
    }

    .news-insight h2 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 28px;
        margin: 12px 0 18px;
    }

    .news-insight p {
        color: var(--muted);
        line-height: 1.8;
        font-size: 15px;
    }

    .code-block {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 18px;
        overflow-x: auto;
        color: var(--muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 13px;
        line-height: 1.7;
        margin-top: 18px;
    }

    .page-hero {
        margin-bottom: 42px;
    }

    .page-hero .badge {
        margin-bottom: 18px;
    }

    .page-shell .page-hero h1 {
        font-size: clamp(44px, 6vw, 72px);
    }

    .page-shell .page-hero .subtitle {
        max-width: 760px;
        margin: 10px auto 0;
        line-height: 1.75;
    }

    .page-shell .page-hero .donnees-hub-note {
        max-width: 62ch;
        margin: 16px auto 0;
        font-size: 15px;
        line-height: 1.75;
        color: var(--muted);
    }

    .page-shell .page-hero .donnees-hub-note a {
        color: var(--barca-gold);
    }

    .data-card strong {
        display: block;
        font-family: "Bebas Neue", sans-serif;
        font-size: 46px;
        color: var(--barca-gold);
        margin-bottom: 10px;
    }

    .data-card span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.7;
    }

    .admin-hint {
        margin-top: 14px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.8;
    }

    .admin-hint code {
        color: #fff;
    }


.poll-hub-card:hover {
    transform: translateY(-3px);
}

.feature-card h2 a {
    text-decoration: none;
    color: #fff;
}

.feature-card h2 a:hover {
    color: var(--barca-gold);
}

.legacy-player-page .news-card-excerpt strong {
    color: var(--text);
}

.legacy-section {
    margin-bottom: 28px;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.legacy-section h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 4vw, 40px);
    margin: 8px 0 12px;
}

.home-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.home-cta {
    width: auto;
    text-decoration: none;
}

.legacy-ranking-list {
    display: grid;
    gap: 10px;
}

.legacy-rank-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 8px 12px;
    align-items: start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}

.legacy-rank-card--v1.is-expanded {
    border-color: rgba(237, 187, 0, 0.35);
}

.legacy-rank-num {
    grid-row: span 4;
    font-family: "Bebas Neue", sans-serif;
    font-size: 34px;
    color: var(--barca-gold);
    line-height: 1;
}

.legacy-rank-main {
    min-width: 0;
}

.legacy-rank-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.legacy-score-badge {
    margin-left: auto;
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    color: var(--barca-gold);
    line-height: 1;
}

.legacy-score-badge small {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--muted);
    font-weight: 400;
}

.legacy-movement {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.legacy-movement--up {
    color: #34d399;
}

.legacy-movement--down {
    color: #f87171;
}

.legacy-movement--stable {
    color: var(--muted);
}

.legacy-trajectory-summary {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.legacy-rank-toggle {
    margin-top: 8px;
    font-size: 11px;
}

.legacy-rank-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.legacy-rank-details h4 {
    margin: 10px 0 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.legacy-breakdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.legacy-breakdown-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.legacy-breakdown-list li strong {
    color: var(--barca-gold);
}

.legacy-breakdown-list li small {
    color: var(--muted);
}

.legacy-ranking-lede,
.legacy-ranking-meta {
    color: var(--muted);
    max-width: 65ch;
}

.legacy-ranking-share {
    margin-top: 20px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
}

.legacy-share-top5 {
    margin: 8px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.legacy-ranking-home-foot {
    margin-top: 10px;
}

.legacy-ranking-module-intro,
.legacy-ranking-module-foot {
    color: var(--muted);
    font-size: 13px;
}

.legacy-ranking-module-stats h4 {
    margin: 12px 0 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.legacy-history-mini {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 12px;
}

.legacy-journey-preview {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}

.legacy-journey-preview h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.legacy-journey-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.legacy-journey-timeline--compact {
    gap: 8px;
}

.legacy-journey-item {
    padding: 12px 14px;
    border-left: 3px solid color-mix(in srgb, var(--barca-gold) 55%, transparent);
    background: color-mix(in srgb, var(--panel, #111) 88%, transparent);
}

.legacy-journey-item--baseline {
    border-left-color: var(--muted);
}

.legacy-journey-item--moment {
    border-left-color: var(--barca-gold);
}

.legacy-journey-item-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
}

.legacy-journey-item-head time {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legacy-journey-what {
    margin: 8px 0 0;
    font-size: 14px;
}

.legacy-journey-events {
    margin: 8px 0 0;
    padding-left: 16px;
    font-size: 13px;
    color: var(--muted);
}

.legacy-event-type {
    color: var(--barca-gold);
    font-weight: 600;
    margin-right: 4px;
}

.legacy-journey-card-link {
    margin: 8px 0;
    font-size: 13px;
}

.legacy-journey-current-card {
    margin-bottom: 18px;
}

.legacy-journey-share {
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent);
}

.contract-journey-preview {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}

.contract-journey-preview h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.contract-journey-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.contract-journey-timeline--compact {
    gap: 0.5rem;
}

.contract-journey-item {
    padding: 0.75rem 0.85rem;
    border-left: 2px solid color-mix(in srgb, var(--muted) 45%, transparent);
    background: color-mix(in srgb, var(--card, transparent) 80%, transparent);
}

.contract-journey-item--compact {
    padding: 0.55rem 0.7rem;
}

.contract-journey-item-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    align-items: baseline;
}

.contract-journey-item-head time {
    opacity: 0.7;
    font-size: 0.85rem;
}

.contract-journey-prov {
    font-size: 0.75rem;
    opacity: 0.85;
}

.contract-journey-prov--confirmed {
    color: #8fd49a;
}

.contract-journey-prov--partial {
    color: #e0c27a;
}

.contract-journey-ext,
.contract-journey-source,
.contract-journey-notes {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.contract-journey-current-card {
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}

.contract-journey-lede,
.contract-journey-meta {
    margin: 0.75rem 0 1rem;
}

.legacy-movement--initial {
    color: var(--muted);
}

@media (max-width: 430px) {
    .legacy-journey-item {
        padding: 10px 12px;
    }
    .legacy-journey-item-head {
        gap: 6px 10px;
    }
    .contract-journey-item-head {
        flex-direction: column;
        gap: 0.25rem;
    }
}

.legacy-methodology-table td:first-child {
    font-weight: 600;
}

.player-legacy-movement {
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
}

.legacy-rank-card > span {
    grid-row: span 3;
    font-family: "Bebas Neue", sans-serif;
    font-size: 34px;
    color: var(--barca-gold);
}

.legacy-rank-card strong a {
    color: var(--text);
    text-decoration: none;
}

.legacy-rank-card small {
    color: var(--muted);
    font-size: 12px;
}

.legacy-rank-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.player-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.player-filter-btn {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.player-filter-btn.active {
    border-color: rgba(237, 187, 0, 0.55);
    color: var(--barca-gold);
}

.player-hero-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 22px;
    padding: 22px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

.player-hero-visual {
    position: relative;
}

.player-hero-image {
    width: 100%;
    min-height: 280px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.player-status-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid currentColor;
    background: rgba(10, 15, 28, 0.72);
}

.player-status-badge--future-legend { color: #facc15; }
.player-status-badge--world-star { color: #60a5fa; }
.player-status-badge--rising-star { color: #34d399; }
.player-status-badge--confirmed-star { color: #f472b6; }

.player-hero-content h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1;
    margin: 8px 0 10px;
    letter-spacing: 0.03em;
}

.player-tagline {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
}

.player-context-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.player-context-badge {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
}

.storyline-card {
    border-left: 3px solid rgba(250, 204, 21, 0.5);
}

.player-hero-card--gold { border-color: rgba(250, 204, 21, 0.38); }
.player-hero-card--gold .player-status-badge {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.75);
    background: rgba(36, 25, 4, 0.82);
}
.player-hero-card--ice { border-color: rgba(147, 197, 253, 0.38); }
.player-hero-card--violet { border-color: rgba(196, 181, 253, 0.38); }
.player-hero-card--pink { border-color: rgba(244, 114, 182, 0.38); }
.player-hero-card--neon { border-color: rgba(34, 211, 238, 0.38); }
.player-hero-card--emerald { border-color: rgba(16, 185, 129, 0.38); }
.player-hero-card--aqua { border-color: rgba(45, 212, 191, 0.38); }
.player-hero-card--amber { border-color: rgba(251, 191, 36, 0.38); }
.player-hero-card--cobalt { border-color: rgba(96, 165, 250, 0.38); }
.player-hero-card--purple { border-color: rgba(168, 85, 247, 0.38); }
.player-hero-card--sunset { border-color: rgba(251, 146, 60, 0.38); }

.player-hero-meta {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.player-inline-link,
.club-inline-link,
.contract-watch-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 204, 21, 0.42);
    transition: color 0.18s ease, border-color 0.18s ease, text-shadow 0.18s ease;
}

.player-inline-link:hover,
.club-inline-link:hover,
.contract-watch-link:hover {
    color: var(--barca-gold);
    border-bottom-color: currentColor;
}

.player-inline-link:focus-visible,
.club-inline-link:focus-visible,
.contract-watch-link:focus-visible {
    outline: 2px solid rgba(250, 204, 21, 0.58);
    outline-offset: 3px;
    border-radius: 4px;
}

.player-inline-link--hero,
.player-inline-link--contract {
    border-bottom-color: transparent;
}

.player-inline-link--hero:hover,
.player-inline-link--contract:hover {
    text-shadow: 0 0 24px rgba(250, 204, 21, 0.22);
}

.player-hero-meta .club-inline-link {
    color: var(--text);
    font-weight: 800;
}

.player-hero-question {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
    max-width: 65ch;
}

.player-legacy-score-wrap {
    margin-top: 18px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px 12px;
}

.player-legacy-score-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.player-legacy-score-value {
    font-family: "Bebas Neue", sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--barca-gold);
}

.player-legacy-score-over {
    font-size: 13px;
    color: var(--muted);
}

.contract-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.contract-status-badge--active {
    color: #b7f7c8;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.28);
}

.contract-status-badge--expiring_soon {
    color: #ffe8a3;
    background: rgba(250, 204, 21, 0.14);
    border-color: rgba(250, 204, 21, 0.32);
}

.contract-status-badge--expired {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.28);
}

.contract-status-badge--unknown {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
}

.contract-progress {
    margin: 8px 0 22px;
}

.contract-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.contract-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.contract-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #edbb00, #f5d76e);
}

.contract-progress-note {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.contract-cost-card--empty strong {
    font-size: clamp(22px, 4vw, 32px);
    color: var(--muted);
}

.contract-d3-cta,
.contract-hub-link {
    margin: 16px 0 0;
}

.contract-hub-link a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contract-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contract-hub-card {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(12, 18, 32, 0.55);
}

.contract-hub-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.contract-hub-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.contract-hub-card h2 {
    margin: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1;
}

.contract-hub-card h2 a {
    color: var(--text);
    text-decoration: none;
}

.contract-hub-dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 12px;
}

.contract-hub-dl dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.contract-hub-dl dd {
    margin: 4px 0 0;
    font-weight: 600;
}

.contract-hub-meta {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.contract-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    margin: 0;
}

.home-contract-watch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.home-contract-card {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(12, 18, 32, 0.45);
}

.home-contract-card h3 {
    margin: 8px 0 6px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.home-contract-card h3 a {
    color: var(--text);
    text-decoration: none;
}

.home-contract-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .contract-hub-grid,
    .home-contract-watch-grid,
    .contract-hub-dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 580px) {
    .contract-watch-date {
        white-space: normal;
        margin-top: 12px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contract-time-unit strong {
        font-size: clamp(22px, 7vw, 34px);
    }

    .contract-time-unit span {
        margin-top: 8px;
        letter-spacing: 0.08em;
        font-size: 10px;
    }

    .contract-countdown-card h2 {
        font-size: clamp(28px, 8vw, 42px);
    }

    .home-contract-card h3 {
        font-size: 24px;
    }

    .home-contract-watch-grid {
        gap: 12px;
    }
}

.contract-countdown-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 48%);
    opacity: 0.72;
}

.contract-countdown-card h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(32px, 5.4vw, 58px);
    line-height: 0.98;
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--text);
}

.contract-countdown-card > * {
    position: relative;
}

.contract-watch-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.contract-watch-eyebrow {
    margin: 6px 0 0;
    font-size: 12px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--barca-gold);
    font-weight: 800;
}

.contract-watch-date {
    flex: 0 0 auto;
    margin: 34px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 999px;
    color: var(--text);
    background: rgba(250, 204, 21, 0.08);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.contract-watch-subtitle {
    max-width: 680px;
    margin: 14px 0 22px;
    color: var(--muted);
    line-height: 1.65;
    font-size: 15px;
}

.contract-time-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.contract-time-unit {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-top: 4px solid rgba(250, 204, 21, 0.78);
    border-radius: 15px;
    min-height: 116px;
    padding: 16px 10px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: inset 0 -40px 60px rgba(96, 165, 250, 0.07);
}

.contract-time-unit strong {
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(38px, 5.2vw, 58px);
    line-height: 0.9;
    color: var(--text);
    letter-spacing: 0;
}

.contract-time-unit span {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800;
}

[data-theme="light"] .contract-status-badge--active {
    color: #166534;
    background: rgba(22, 163, 74, 0.14);
    border-color: rgba(22, 163, 74, 0.32);
}

[data-theme="light"] .contract-status-badge--expiring_soon {
    color: #92400e;
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(180, 83, 9, 0.28);
}

[data-theme="light"] .contract-status-badge--expired {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(185, 28, 28, 0.28);
}

[data-theme="light"] .contract-status-badge--unknown {
    color: rgba(15, 27, 53, 0.7);
    background: rgba(15, 27, 53, 0.05);
    border-color: rgba(15, 27, 53, 0.14);
}

[data-theme="light"] .home-contract-card,
[data-theme="light"] .contract-hub-card {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(8, 20, 44, 0.12);
}

[data-theme="light"] .contract-time-unit {
    background: rgba(15, 27, 53, 0.04);
    box-shadow: none;
}

[data-theme="light"] .contract-cost-card {
    background:
        linear-gradient(180deg, rgba(250, 204, 21, 0.18), rgba(96, 165, 250, 0.06)),
        rgba(255, 255, 255, 0.82);
    border-color: rgba(180, 83, 9, 0.22);
}

[data-theme="light"] .contract-progress-track {
    background: rgba(15, 27, 53, 0.1);
}

[data-theme="light"] .contract-hub-link a,
[data-theme="light"] .contract-d3-cta a {
    color: #0f1b35;
}

.contract-detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.contract-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.contract-cost-card {
    min-height: 100%;
    background:
        linear-gradient(180deg, rgba(250, 204, 21, 0.12), rgba(96, 165, 250, 0.05)),
        rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contract-cost-label {
    display: block;
    color: var(--barca-gold);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 900;
}

.contract-cost-card strong {
    display: block;
    margin-top: 8px;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(44px, 7vw, 72px);
    line-height: 0.9;
    color: var(--text);
    letter-spacing: 0;
}

.contract-cost-card p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.contract-cost-card a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 204, 21, 0.44);
}

.contract-summary-item {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
}

.contract-summary-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
}

.contract-summary-item strong {
    display: block;
    color: var(--text);
    font-size: 18px;
    line-height: 1.3;
}

.contract-watch-eyebrow .contract-watch-link,
.contract-cost-label .contract-watch-link {
    color: var(--barca-gold);
}

.contract-summary-item strong .club-inline-link,
.contract-cost-card .contract-watch-link {
    color: inherit;
}

.legacy-player-page .news-card-excerpt .club-inline-link,
.news-card-excerpt .club-inline-link {
    color: var(--barca-gold);
    text-decoration: none;
}

.progression-chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

.progression-chart-card h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 4.2vw, 40px);
    line-height: 1.1;
    margin: 8px 0 10px;
}

.progression-intro {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}

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

.progression-metric {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
}

.progression-metric header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.progression-metric header span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.progression-metric header strong {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    line-height: 1;
    color: var(--text);
}

.progression-metric svg {
    display: block;
    width: 100%;
    height: 80px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.progression-metric p {
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

.season-stats-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

.season-stats-panel h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 4.2vw, 40px);
    line-height: 1.1;
    margin: 8px 0 10px;
}

.season-stats-intro {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.season-stats-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.season-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
}

.season-stat-card header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 10px;
}

.season-stat-card header span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.season-stat-card header strong {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.season-stat-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.season-stat-kpis p {
    margin: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
}

.season-stat-kpis p span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.season-stat-kpis p strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    color: var(--text);
}

.season-stat-note {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

.season-stats-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.season-stats-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.season-stats-table th,
.season-stats-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.season-stats-table th {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
}

.season-stats-table td {
    color: var(--text);
    vertical-align: top;
}

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

.probability-cards-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

.probability-cards-panel h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 4.2vw, 40px);
    line-height: 1.1;
    margin: 8px 0 10px;
}

.probability-intro {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.probability-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.probability-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
}

.probability-card header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 10px;
}

.probability-card header span {
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.probability-card header strong {
    font-family: "Bebas Neue", sans-serif;
    font-size: 30px;
    line-height: 1;
    color: var(--text);
}

.probability-gauge-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.probability-gauge-fill {
    height: 100%;
    border-radius: 999px;
}

.probability-disclaimer {
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

.legend-comparison-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

.legend-comparison-panel h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 4.2vw, 40px);
    line-height: 1.1;
    margin: 8px 0 10px;
}

.legend-comparison-intro {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.legend-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.legend-compare-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.legend-compare-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--barca-gold);
    border: 1px solid rgba(237, 187, 0, 0.55);
    margin-bottom: 10px;
}

.legend-compare-card strong {
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-size: 30px;
    line-height: 1.05;
    margin-bottom: 8px;
}

.legend-compare-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.debate-block-panel {
    background:
        radial-gradient(140% 180% at 0% 0%, rgba(0, 77, 152, 0.2), transparent 56%),
        radial-gradient(120% 180% at 100% 100%, rgba(165, 0, 68, 0.16), transparent 56%),
        var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

.debate-block-panel h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(26px, 4.2vw, 40px);
    line-height: 1.1;
    margin: 8px 0 10px;
}

.debate-question {
    margin: 0 0 10px;
    font-size: clamp(20px, 3.2vw, 30px);
    line-height: 1.35;
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.02em;
    color: var(--text);
}

.debate-context {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
    max-width: 75ch;
}

@media (max-width: 900px) {
    .player-hero-card {
        grid-template-columns: 1fr;
    }

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

    .contract-watch-header {
        display: block;
    }

    .contract-watch-date {
        display: inline-flex;
        margin-top: 16px;
        white-space: normal;
    }

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

    .contract-summary-grid {
        grid-template-columns: 1fr;
    }

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

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

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

    .legend-comparison-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 580px) {
    .contract-countdown-card {
        padding: 18px 12px;
    }

    .contract-time-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .contract-time-unit {
        min-height: 78px;
        padding: 10px 6px 8px;
        border-radius: 12px;
        border-top-width: 3px;
    }

    .contract-watch-eyebrow {
        letter-spacing: 0.1em;
        word-break: break-word;
    }

    .contract-watch-subtitle {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .contract-cost-card strong,
    .contract-cost-card--empty strong {
        font-size: clamp(26px, 9vw, 40px);
        line-height: 1.05;
        word-break: break-word;
    }

    .contract-hub-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .contract-hub-actions {
        flex-direction: column;
        align-items: flex-start;
    }

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

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

.poll-link-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.poll-hub-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(237, 187, 0, 0.12);
    font-size: 20px;
    margin-bottom: 12px;
}

.poll-hub-card h3 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 24px;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.poll-hub-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.poll-link-top {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--barca-gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.poll-link-cta {
    display: inline-flex;
    margin-top: 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.poll {
    padding: 28px;
    margin-bottom: 48px;
}

.poll h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 32px;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.sub-q {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    color: #fff;
}

.poll-btn:hover {
    background: rgba(0, 77, 152, 0.2);
    border-color: var(--barca-blue);
}

.poll-btn.voted {
    border-color: var(--barca-gold);
    background: rgba(237, 187, 0, 0.08);
}

.club-icon {
    font-size: 22px;
    width: 28px;
    flex-shrink: 0;
}

.club-copy {
    min-width: 0;
    flex: 1 1 180px;
}

.club-name {
    font-weight: 700;
    font-size: 14px;
}

.club-sub {
    font-size: 12px;
    color: var(--muted);
}

.bar-wrap {
    display: none;
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--barca-blue), var(--barca-gold));
    transition: width 0.8s ease;
}

.pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--barca-gold);
    display: none;
}

.poll-btn.show-result .bar-wrap,
.poll-btn.show-result .pct {
    display: block;
}

.poll-btn.show-result .club-sub {
    display: none;
}

.poll-total {
    font-size: 12px;
    color: var(--muted);
    margin-top: 14px;
    text-align: right;
}

.poll-crosslinks {
    margin-bottom: 48px;
}

.poll-crosslinks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.poll-crosslink {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}

.poll-crosslink:hover {
    transform: translateY(-3px);
    border-color: rgba(237, 187, 0, 0.35);
}

.poll-crosslink strong {
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-size: 26px;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.poll-crosslink span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.poll-page-hero {
    margin-bottom: 28px;
}

.poll-page-kicker {
    margin-bottom: 12px;
    color: var(--barca-gold);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.poll-page-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
    margin-bottom: 40px;
}

.poll-page-content {
    display: grid;
    gap: 18px;
}

.poll-context,
.poll-side-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
}

.poll-context p,
.poll-side-card p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 14px;
}

.poll-context p + p,
.poll-side-card p + p {
    margin-top: 12px;
}

.poll-standalone {
    margin-bottom: 0;
}

.side-list {
    padding-left: 18px;
    margin-top: 12px;
}

.side-list li {
    color: var(--muted);
    line-height: 1.8;
    font-size: 14px;
}

.side-links {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.side-links a {
    display: block;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}

.side-links a:hover {
    border-color: rgba(237, 187, 0, 0.35);
}

.faq {
    margin-bottom: 48px;
}

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.faq-card h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 26px;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.site-footer {
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 28px;
    margin-top: 36px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px 18px;
}

.footer-col-title {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(245, 247, 255, 0.72);
}

.footer-brand-lockup {
    margin: 0 0 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em;
}

.footer-tagline {
    margin: 0 0 8px;
    color: rgba(245, 247, 255, 0.86);
    line-height: 1.45;
}

.footer-universe,
.footer-social-note {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
}

.footer-highlight {
    color: var(--barca-gold);
    margin-top: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.footer-nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 0;
}

.footer-nav--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-nav a {
    text-decoration: none;
    color: var(--muted);
}

.footer-nav a:hover {
    color: #fff;
}

.footer-update {
    margin-top: 14px;
}

.page-shell {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 56px 24px 88px;
}

.simple-page {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.simple-page h1,
.simple-page h2 {
    -webkit-text-fill-color: unset;
    background: none;
    color: #fff;
    font-family: "Bebas Neue", sans-serif;
}

.simple-page h1 {
    font-size: clamp(34px, 7vw, 58px);
    margin-bottom: 16px;
}

.simple-page h2 {
    font-size: 28px;
    margin: 22px 0 10px;
}

.simple-page p,
.simple-page li {
    color: var(--muted);
    line-height: 1.8;
    font-size: 15px;
}

.simple-page a {
    color: var(--barca-gold);
    overflow-wrap: anywhere;
}

.simple-page ul {
    padding-left: 20px;
}

.simple-page .about-key-question {
    margin: 20px 0 24px;
    padding: 16px 20px;
    border-left: 3px solid var(--barca-gold);
    border-radius: 0 12px 12px 0;
    background: rgba(251, 191, 36, 0.06);
    color: rgba(243, 248, 255, 0.95);
    font-size: clamp(17px, 2.8vw, 22px);
    line-height: 1.45;
    font-weight: 500;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--barca-gold);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-shell {
    display: grid;
    gap: 22px;
}

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.admin-subtitle {
    margin-left: 0;
    max-width: 720px;
    opacity: 0.88;
}

.admin-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-home-link {
    margin-bottom: 0;
}

.admin-login-card,
.admin-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.admin-login-card h2,
.admin-card h2,
.admin-poll-card h3 {
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.03em;
    color: #fff;
}

.admin-login-card h2,
.admin-card h2 {
    font-size: 30px;
    margin-bottom: 8px;
}

.admin-login-card p,
.admin-card-head p,
.admin-empty {
    color: var(--muted);
    line-height: 1.7;
}

.admin-card-head p {
    font-size: 13px;
    max-width: 42ch;
}

.admin-login-form,
.admin-stats-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.admin-login-form label,
.admin-stats-form label {
    display: grid;
    gap: 8px;
}

.admin-login-form span,
.admin-stats-form span {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-login-form input,
.admin-stats-form input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #fff;
    padding: 12px 14px;
}

.admin-dashboard {
    display: grid;
    gap: 20px;
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.cockpit-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cockpit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 12px 0 18px;
}

.cockpit-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.cockpit-card h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.cockpit-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.cockpit-card li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.92rem;
}

.cockpit-nocontent {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.cockpit-action-scroll {
    display: grid;
    gap: 8px;
}

.cockpit-action-row {
    display: grid;
    grid-template-columns: minmax(110px, 140px) 1fr auto;
    gap: 8px 12px;
    align-items: start;
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    color: inherit;
    cursor: pointer;
}

.cockpit-action-type {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.cockpit-action-main {
    display: grid;
    gap: 2px;
}

.cockpit-action-meta {
    grid-column: 2 / -1;
    font-size: 0.85rem;
    color: var(--muted);
}

.cockpit-action-cta {
    font-size: 0.85rem;
    white-space: nowrap;
}

.cockpit-queue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cockpit-queue-grid div {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 4px;
}

.cockpit-queue-grid span {
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 430px) {
    .cockpit-action-row {
        grid-template-columns: 1fr;
    }

    .cockpit-action-meta {
        grid-column: 1;
    }

    .cockpit-hero-actions {
        width: 100%;
    }

    .cockpit-hero-actions .save-btn,
    .cockpit-hero-actions .ghost-btn {
        flex: 1 1 auto;
    }
}

.admin-metric-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
        linear-gradient(135deg, rgba(0, 77, 152, 0.18), rgba(165, 0, 68, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.admin-metric-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.admin-metric-card strong {
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-size: 42px;
    line-height: 1;
}

.admin-metric-track {
    margin-top: 14px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.admin-metric-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--barca-gold), #f59e0b);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.admin-card-head {
    margin-bottom: 16px;
}

.admin-card-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.admin-card-head-row > div:first-child {
    flex: 1 1 240px;
    min-width: 0;
}

.admin-daily-range {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.admin-daily-range span {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.admin-daily-range-select {
    min-width: 140px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(12, 18, 32, 0.85);
    color: #e8eefc;
    font-size: 14px;
}

.admin-chart,
.admin-polls {
    display: grid;
    gap: 12px;
}

.admin-bar-list {
    display: grid;
    gap: 14px;
}

.admin-bar-row,
.admin-poll-option {
    display: grid;
    grid-template-columns: 120px 1fr 64px;
    gap: 12px;
    align-items: center;
}

.admin-poll-option {
    grid-template-columns: 1fr;
}

.admin-list-item {
    display: grid;
    gap: 8px;
}

.admin-list-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.admin-list-head strong {
    color: #fff;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.admin-list-head span {
    color: var(--muted);
    font-size: 12px;
}

.admin-poll-option-head,
.admin-poll-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.admin-poll-head h3 {
    font-size: 26px;
}

.admin-poll-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
}

.admin-bar-label,
.admin-bar-value,
.admin-poll-option-head span,
.admin-poll-head span {
    color: var(--muted);
    font-size: 12px;
}

.admin-bar-label {
    overflow-wrap: anywhere;
}

.admin-bar-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.admin-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--barca-blue), var(--barca-gold));
}

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

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
}

.admin-table th {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-message {
    margin-top: 12px;
    color: var(--barca-gold);
}

.admin-message[data-error="true"] {
    color: #ff8b8b;
}

.admin-logout {
    width: auto;
}

.admin-table-wrap {
    min-height: 80px;
    overflow-x: auto;
}

.admin-watchlist-activate {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
}

.admin-watchlist-table td,
.admin-watchlist-table th {
    vertical-align: top;
}

.admin-watchlist-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

.admin-watchlist-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.admin-watchlist-quotas {
    display: grid;
    gap: 6px;
    min-width: 160px;
}

.admin-watchlist-quotas label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
}

.admin-watchlist-quotas label span {
    flex: 1;
    line-height: 1.2;
}

.admin-watchlist-quotas input,
.admin-watchlist-priority,
.admin-watchlist-activate select {
    width: 56px;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 12px;
}

.admin-watchlist-priority {
    width: auto;
    min-width: 168px;
    max-width: 220px;
}

.admin-watchlist-activate select {
    width: auto;
    min-width: 180px;
}

.admin-watchlist-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 110px;
}

.admin-watchlist-row--paused {
    background: rgba(255, 180, 80, 0.06);
}

.admin-watchlist-row--paused td {
    opacity: 0.92;
}

.admin-watchlist-paused-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a1208;
    background: #f0b35a;
}

.admin-watchlist-nocontent {
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    padding-left: 10px;
    margin-top: 8px;
}

.admin-review-block {
    margin: 1rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-review-block h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.admin-review-block label {
    display: block;
    margin: 0.45rem 0;
    font-size: 0.8rem;
    color: var(--muted, #9aa3b2);
}

.admin-review-block input,
.admin-review-block textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    font: inherit;
}

.article-share {
    margin-top: 1.5rem;
}

.article-share .poll-crosslink {
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    background: transparent;
}

@media (max-width: 900px) {
    .admin-watchlist-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .admin-watchlist-priority {
        min-width: 140px;
        max-width: 100%;
    }

    .admin-watchlist-quotas {
        min-width: 140px;
    }
}

/* --- Tab-based admin layout --- */

.admin-login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
}

/* La feuille globale ne met pas [hidden] en !important : une classe .admin-login-shell { display:flex }
   peut laisser l’écran de connexion visible après connexion. On force la cohérence avec l’attribut hidden. */
#adminLoginShell[hidden],
.admin-login-shell[hidden] {
    display: none !important;
}

.admin-login-shell .admin-login-card {
    width: 100%;
    max-width: 460px;
}

.admin-login-brand-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
    text-align: left;
}

.admin-login-brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 14px;
    background: #f4f2f1;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.admin-login-brand-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-login-brand-name {
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 0.05em;
    color: var(--barca-gold);
    line-height: 1.15;
}

.admin-login-brand-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-dashboard-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#adminDashboard[hidden],
.admin-dashboard-wrap[hidden] {
    display: none !important;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 10px 28px;
    min-height: 64px;
    height: auto;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.admin-brand {
    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--barca-gold);
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-brand-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    line-height: 1.15;
}

.admin-brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-brand-stack .admin-brand-text strong {
    font-family: "Bebas Neue", sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--barca-gold);
}

.admin-brand-tag {
    font-family: Inter, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 280px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
}

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

.admin-tab {
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
    position: relative;
    z-index: 2;
}

.admin-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.admin-tab.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.admin-topbar-actions .back-link {
    margin-bottom: 0;
    font-size: 13px;
}

.admin-main {
    flex: 1;
    padding: 28px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.admin-panel {
    display: grid;
    gap: 20px;
}

.admin-panel.hidden {
    display: none;
}

/* --- Player Workspace (STEP 25) --- */
.pw-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 8px;
}

.pw-search-field {
    flex: 1 1 220px;
    min-width: 0;
}

.pw-search-results {
    margin-top: 12px;
}

.pw-pick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.pw-pick-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 10px 12px;
}

.pw-pick-btn span {
    color: var(--muted);
    font-size: 0.9rem;
}

.pw-header-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
}

.pw-player-name {
    margin: 0 0 4px;
    font-size: 1.45rem;
}

.pw-player-meta {
    margin: 0;
    color: var(--muted);
}

.pw-header-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 8px 16px;
}

.pw-header-stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.88rem;
}

.pw-header-stats span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.pw-empty-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
}

.pw-body {
    display: grid;
    gap: 14px;
}

.pw-table {
    min-width: 720px;
}

.pw-news-list {
    display: grid;
    gap: 12px;
}

.pw-news-card {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.pw-news-card:last-child {
    border-bottom: none;
}

.pw-news-main {
    flex: 1 1 240px;
    min-width: 0;
}

.pw-news-main h3 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    line-height: 1.35;
}

.pw-news-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.pw-news-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pw-rumor-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pw-sources-line {
    margin-top: 6px;
}

.pw-catalog-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex: 1 1 280px;
    cursor: pointer;
}

.pw-catalog-check input {
    margin-top: 4px;
}

.pw-create-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.pw-inline-editor .admin-editor-label {
    display: block;
    margin: 10px 0;
}

.pw-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.pw-lang-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.pw-lang-tab.is-active {
    font-weight: 700;
    text-decoration: underline;
}

.pw-editor-sources ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.pw-success-badge {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px;
}

@media (max-width: 430px) {
    .pw-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pw-header-stats {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .pw-player-name {
        font-size: 1.25rem;
    }

    .pw-pick-btn {
        flex-direction: column;
        align-items: flex-start;
    }

    .pw-news-actions {
        width: 100%;
    }
}

.admin-panel-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.admin-params-card {
    max-width: 540px;
}

.admin-generate-box {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-articles-list {
    display: grid;
    gap: 14px;
}

.admin-article-item {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.admin-article-item:last-child {
    border-bottom: none;
}

.admin-article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-section-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid currentColor;
}

.admin-section-badge--actualites {
    color: var(--barca-gold);
}

.admin-section-badge--blog {
    color: #7dd3fc;
}

.admin-article-date {
    font-size: 12px;
    color: var(--muted);
}

.admin-article-title {
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
}

.admin-player-gen-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
}

.admin-player-gen-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-gen-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-small-btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
}

.admin-player-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    max-height: 280px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.45);
}

.admin-player-checkbox {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    color: #e5e7eb;
}

.admin-quota-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-quota-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.admin-quota-field input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(15, 23, 42, 0.6);
    color: #f8fafc;
    padding: 8px 10px;
    font-family: inherit;
}

.admin-checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #e5e7eb;
}

.admin-hint-tight {
    margin: 4px 0 0;
    font-size: 12px;
}

.admin-gen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.admin-secondary-btn {
    border: 1px solid rgba(250, 204, 21, 0.35);
    background: transparent;
}

.admin-danger-btn {
    border-color: rgba(248, 113, 113, 0.5);
    color: #fecaca;
}

.admin-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 18px;
}

.admin-draft-queue {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    max-height: 420px;
    overflow: auto;
    background: rgba(15, 23, 42, 0.45);
    display: grid;
    gap: 10px;
}

.admin-draft-queue-item {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.6);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.admin-draft-queue-item:hover {
    border-color: rgba(250, 204, 21, 0.35);
}

.admin-draft-queue-item.active {
    border-color: rgba(250, 204, 21, 0.7);
}

.admin-draft-editor {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.35);
}

.admin-editor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.admin-status-pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.admin-status-pill--draft {
    color: #fcd34d;
    border-color: rgba(250, 204, 21, 0.55);
}

.admin-status-pill--published {
    color: #a7f3d0;
    border-color: rgba(110, 231, 183, 0.6);
}

.admin-editor-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
}

.admin-editor-label input,
.admin-editor-label textarea,
.admin-editor-label select {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
    padding: 8px 10px;
    font-family: inherit;
}

.admin-editor-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

@media (max-width: 980px) {
    .admin-panel-row {
        grid-template-columns: 1fr;
    }

    .admin-player-gen-grid,
    .admin-editor-layout {
        grid-template-columns: 1fr;
    }

    .admin-player-checkboxes {
        max-height: none;
    }
}

/* --- Page Sondages hub --- */

.sondages-overview {
    margin-bottom: 8px;
}

.sondages-kpi-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.sondages-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sondages-kpi strong {
    font-family: "Bebas Neue", sans-serif;
    font-size: 36px;
    line-height: 1;
    color: var(--barca-gold);
}

.sondages-kpi span {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sondages-grid {
    display: grid;
    gap: 22px;
    margin-bottom: 48px;
}

.sondage-entry {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 28px;
    display: grid;
    gap: 20px;
}

.sondage-entry-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.sondage-num {
    font-family: "Bebas Neue", sans-serif;
    font-size: 40px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    width: 52px;
    text-align: right;
}

.sondage-entry-header h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 26px;
    letter-spacing: 0.03em;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.1;
}

.sondage-entry-header p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    max-width: 60ch;
}

.sondage-results {
    display: grid;
    gap: 10px;
}

.sondage-loading {
    color: var(--muted);
    font-size: 13px;
}

.sondage-option {
    display: grid;
    gap: 6px;
}

.sondage-option-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.sondage-option-head span {
    font-size: 14px;
    color: var(--muted);
}

.sondage-option-head strong {
    font-size: 14px;
    color: var(--muted);
    flex-shrink: 0;
}

.sondage-option--lead .sondage-option-head span,
.sondage-option--lead .sondage-option-head strong {
    color: #fff;
}

.sondage-option--lead .bar-fill {
    background: linear-gradient(90deg, var(--barca-gold), #f59e0b);
}

.sondage-total {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.sondage-cta {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    align-self: start;
}

.sondage-cta:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
    .sondage-entry-header {
        flex-direction: column;
        gap: 10px;
    }

    .sondage-num {
        font-size: 28px;
        width: auto;
        text-align: left;
    }
}

/* --- End Sondages hub --- */

@media (max-width: 768px) {
    .admin-topbar {
        padding: 0 16px;
        gap: 12px;
    }

    .admin-brand {
        display: none;
    }

    .admin-main {
        padding: 16px;
    }

    .admin-panel-row {
        grid-template-columns: 1fr;
    }
}

.fade-in,
.reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.99);
}

.fade-in {
    animation: fadeUp 0.75s forwards;
}

.reveal.is-visible {
    animation: fadeUp 0.75s forwards;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

body.page-ready {
    opacity: 1;
    transform: translateY(0);
}

body.page-leaving {
    opacity: 0;
    transform: translateY(8px);
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

@media (max-width: 980px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .article-grid,
    .finance-grid,
    .faq-list,
    .poll-hub-grid,
    .poll-crosslinks-grid,
    .poll-page-grid,
    .admin-grid,
    .admin-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .topbar {
        position: relative;
        top: 0;
        flex-direction: column;
        align-items: flex-start;
        padding-top: calc(20px + env(safe-area-inset-top, 0px));
    }

    .topbar-end {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .topnav {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 6px 2px 8px;
        border-radius: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .topnav a {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        text-align: center;
    }

    .topnav::-webkit-scrollbar {
        display: none;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .iq-gateway,
    .social-chip {
        flex: 1 1 auto;
        justify-content: center;
    }

    .brand {
        width: auto;
    }

    .brand-logo-img--horizontal {
        display: none;
    }

    .brand-logo-img--compact {
        display: block;
        width: 52px;
        height: 52px;
    }

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

    .footer-col--brand {
        grid-column: 1 / -1;
    }

    .admin-head,
    .admin-head-actions {
        flex-direction: column;
        align-items: flex-start;
    }

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

@media (max-width: 580px) {
    main,
    .page-shell {
        padding: 42px 16px calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .brand-copy strong {
        font-size: 13px;
    }

    .brand-copy small {
        font-size: 10px;
    }

    .header h1 {
        font-size: clamp(30px, 9vw, 52px);
    }

    .simple-page {
        border-radius: 18px;
        padding: 22px 18px;
    }

    .simple-page h2 {
        font-size: 24px;
    }

    .simple-page ul {
        padding-left: 18px;
    }

    .poll {
        padding: 22px 16px;
    }

    .poll h2 {
        font-size: 28px;
    }

    .sub-q {
        font-size: 14px;
    }

    .countdown,
    .countdown-bottom,
    .season-hero,
    .season-extra,
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .unit,
    .hero-card,
    .mini-card,
    .stat-card {
        padding-left: 10px;
        padding-right: 10px;
    }

    .edit-grid,
    .faq-list {
        grid-template-columns: 1fr;
    }

    .admin-bar-row {
        grid-template-columns: 1fr;
    }

    .salary-box {
        flex-direction: column;
        text-align: center;
    }

    .poll-btn {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }

    .bar-wrap {
        width: 100%;
        flex: 0 0 100%;
    }

    .club-icon {
        width: 24px;
        font-size: 20px;
    }

    .club-copy {
        flex-basis: calc(100% - 34px);
    }

    .poll-total {
        text-align: left;
    }

    .footer-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .footer-nav a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        padding: 8px 10px;
        text-align: center;
    }
}

/* ── Articles blog / actualités ── */
.articles-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 48px;
}

.article-full {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px;
    box-shadow: var(--shadow);
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.article-date {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
}

.article-live-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--barca-gold);
    border: 1px solid var(--barca-gold);
    border-radius: 999px;
    padding: 2px 8px;
}

.article-full h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.15;
}

.article-full p {
    color: var(--muted);
    line-height: 1.85;
    font-size: 15px;
    margin-bottom: 14px;
}

.article-full p:last-child {
    margin-bottom: 0;
}

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

.article-full a {
    color: var(--barca-gold);
}

/* ── Article title link (in card list) ── */

.article-title-link {
    color: inherit;
    text-decoration: none;
}

.article-title-link:hover {
    color: var(--barca-gold);
}

.article-read-more {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--barca-gold);
    text-decoration: none;
}

.article-read-more:hover {
    text-decoration: underline;
}

/* ── Individual article page ── */

.article-page {
    margin-bottom: 40px;
}

.article-page h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(28px, 5vw, 52px);
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.08;
    margin-bottom: 28px;
}

.article-body {
    margin-top: 8px;
}

.article-body h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(20px, 3vw, 30px);
    letter-spacing: 0.04em;
    color: #fff;
    margin: 32px 0 12px;
}

.article-body p {
    color: var(--text);
    line-height: 1.95;
    font-size: 18px;
    margin-bottom: 18px;
    max-width: 72ch;
    font-family: Georgia, "Times New Roman", serif;
}

.article-body p:last-child {
    margin-bottom: 0;
}

.article-page .article-meta {
    margin-bottom: 18px;
}

[data-theme="light"] .topnav {
    background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .topnav a {
    color: #12203a;
}

[data-theme="light"] .appearance-panel {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .topnav a:hover {
    color: #0b1a36;
}

[data-theme="light"] .news-card-title,
[data-theme="light"] .news-card--featured .news-card-title,
[data-theme="light"] .article-page h1,
[data-theme="light"] .article-body h2 {
    color: #0e1a34;
}

.article-crosslinks {
    margin-bottom: 48px;
}

/* ── Modern visual refresh (premium glass) ── */
:root {
    --card: rgba(255, 255, 255, 0.055);
    --card-strong: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.14);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

[data-neon="electric"] {
    --barca-blue: #00a9ff;
    --barca-red: #d100ff;
    --barca-gold: #6bffed;
}

[data-neon="sunset"] {
    --barca-blue: #ff7a18;
    --barca-red: #ff2f6d;
    --barca-gold: #ffd166;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(420px 220px at 10% 14%, rgba(0, 157, 255, 0.1), transparent 70%),
        radial-gradient(380px 220px at 88% 82%, rgba(255, 0, 119, 0.12), transparent 72%),
        radial-gradient(280px 160px at 56% 16%, rgba(237, 187, 0, 0.08), transparent 75%);
}

.topbar {
    padding-top: 22px;
}

.brand-mark {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.brand-logo-img {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.topnav {
    background: rgba(11, 18, 34, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.topnav a {
    color: rgba(240, 244, 255, 0.78);
    transition: color 0.2s ease, background 0.2s ease;
}

.topnav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.news-card,
.news-card--featured,
.article-full,
.poll,
.poll-crosslink,
.simple-page {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}

.news-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
        rgba(13, 21, 37, 0.78);
    border-color: rgba(255, 255, 255, 0.14);
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: rgba(237, 187, 0, 0.46);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.5);
}

.news-card--featured {
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(0, 77, 152, 0.24), transparent 52%),
        radial-gradient(120% 180% at 100% 100%, rgba(165, 0, 68, 0.2), transparent 52%),
        rgba(12, 18, 32, 0.82);
    border-color: rgba(80, 140, 220, 0.45);
}

.news-card--featured::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.07) 50%, transparent 75%);
    transform: translateX(-120%);
    animation: cardSweep 6s ease-in-out infinite;
}

@keyframes cardSweep {
    0%, 72%, 100% { transform: translateX(-120%); }
    84% { transform: translateX(120%); }
}

.news-card-title {
    font-size: 16px;
    line-height: 1.45;
}

.news-card-excerpt {
    color: rgba(240, 244, 255, 0.72);
}

.article-page {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(10, 15, 28, 0.85);
}

.article-page h1 {
    letter-spacing: 0.02em;
    text-wrap: balance;
}

.article-body p {
    color: rgba(240, 244, 255, 0.84);
    line-height: 1.95;
}

.article-body p:last-child {
    font-size: 14px;
    color: rgba(240, 244, 255, 0.74);
}

.article-body a[target="_blank"] {
    color: #ffd764;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 215, 100, 0.7);
}

.article-body a[target="_blank"]:hover {
    color: #ffe7a6;
}

.badge,
.news-card-tag {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

/* ── Données page — API Football section ── */

.api-live-section {
    margin-bottom: 48px;
}

.api-live-section h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(22px, 3.5vw, 34px);
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 20px;
}

.api-stats-grid {
    margin-top: 20px;
}

.api-stats-source {
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.poll-context h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(22px, 3.5vw, 32px);
    letter-spacing: 0.04em;
    color: #fff;
    margin: 24px 0 12px;
}

.poll-context h2:first-child {
    margin-top: 0;
}

.poll-context p {
    color: var(--muted);
    line-height: 1.85;
    font-size: 15px;
    margin-bottom: 14px;
}

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

@media (max-width: 760px) {
    .article-full {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .article-full h2 {
        font-size: 26px;
    }
}

/* ── Editorial listing pages ── */

.editorial-header {
    margin-bottom: 32px;
    padding-top: 4px;
}

.editorial-header h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(28px, 4.5vw, 48px);
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin: 8px 0 10px;
    color: #fff;
}

.editorial-header .subtitle {
    font-size: 15px;
    color: var(--muted);
    max-width: 640px;
    line-height: 1.7;
}

/* ── Featured article card ── */

.news-card--featured {
    background: linear-gradient(135deg, rgba(0, 77, 152, 0.15), rgba(165, 0, 68, 0.08));
    border: 1px solid rgba(0, 77, 152, 0.3);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
}

.news-card--featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--barca-blue), var(--barca-red));
}

.news-card--featured:hover {
    border-color: rgba(237, 187, 0, 0.35);
}

.news-card--featured .news-card-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(22px, 3.5vw, 38px);
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin: 10px 0 14px;
    color: #fff;
    display: block;
    text-decoration: none;
}

.news-card--featured .news-card-title:hover {
    color: var(--barca-gold);
}

.news-card--featured .news-card-excerpt {
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 72ch;
    margin-bottom: 18px;
}

.news-card--featured .news-card-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--barca-gold);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.news-card--featured .news-card-cta:hover {
    text-decoration: underline;
}

/* ── News card grid ── */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.news-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
}

.news-card:hover {
    transform: translateY(-3px);
    border-color: rgba(237, 187, 0, 0.3);
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.news-card-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--barca-blue), var(--barca-red));
    border-radius: 999px;
    padding: 2px 10px;
}

.news-card-date {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.news-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    margin-bottom: 10px;
    text-decoration: none;
    display: block;
}

.news-card-title:hover {
    color: var(--barca-gold);
}

.news-card-excerpt {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 14px;
}

.news-card-excerpt a {
    color: var(--barca-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-card-excerpt a:hover {
    opacity: 0.88;
}

.news-card-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--barca-gold);
    text-decoration: none;
    letter-spacing: 0.01em;
    margin-top: auto;
}

.news-card-cta:hover {
    text-decoration: underline;
}

/* ── Rubrique sections (blog) ── */

.rubrique-section {
    margin-bottom: 44px;
}

.rubrique-label {
    font-family: "Bebas Neue", sans-serif;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--barca-gold);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rubrique-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Back link (article pages) ── */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}

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

/* --- Data lab visualisations (radar + heatmap) --- */
.viz-lab-panel {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(7, 11, 20, 0.92), rgba(17, 24, 39, 0.82));
    box-shadow: var(--shadow);
    padding: 28px;
    margin-top: 22px;
}

.viz-lab-panel h2 {
    margin: 10px 0 8px;
    letter-spacing: 0.01em;
}

.viz-intro {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.65;
    max-width: 76ch;
}

.viz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.viz-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(12, 18, 32, 0.78);
    padding: 14px;
}

.viz-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.viz-canvas {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(circle at top, rgba(96, 165, 250, 0.1), rgba(12, 18, 32, 0.92));
}

.viz-export-btn {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(12, 18, 32, 0.9);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
}

.viz-export-btn:hover {
    border-color: rgba(250, 204, 21, 0.6);
    color: #fde68a;
}

.player-preview-list {
    margin: 0 0 12px;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.6;
}

.player-preview-list li {
    margin-bottom: 8px;
}

.player-preview-list a {
    color: var(--text);
    text-decoration: none;
}

.player-preview-list a:hover {
    color: var(--barca-gold);
    text-decoration: underline;
}

/* Stronger spacing for media/data lab rhythm */
.legacy-section {
    margin: 34px 0;
}

.legacy-section h2 {
    margin-bottom: 14px;
}

.news-grid {
    gap: 18px;
}

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

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

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

    .news-card--featured {
        padding: 22px 18px;
    }

    .editorial-header h1 {
        font-size: 30px;
    }
}