:root {
    color-scheme: dark;

    --bg: #071323;
    --bg-soft: #10233f;
    --bg-card: rgba(255, 255, 255, 0.08);
    --bg-card-strong: rgba(255, 255, 255, 0.13);
    --line: rgba(255, 255, 255, 0.16);
    --line-soft: rgba(255, 255, 255, 0.09);
    --text: #f7fbff;
    --text-strong: #ffffff;
    --muted: #aab8ca;
    --muted-strong: #dce6f2;
    --accent: #f5c451;
    --accent-strong: #ffe08a;
    --blue: #35d0ff;
    --green: #55e59a;
    --red: #ff8e8e;
    --shadow: 0 28px 90px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 16px 46px rgba(0, 0, 0, 0.22);
    --radius: 26px;
    --radius-sm: 16px;
    --shell: 1180px;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;

        --bg: #eef4fb;
        --bg-soft: #ffffff;
        --bg-card: rgba(255, 255, 255, 0.82);
        --bg-card-strong: rgba(255, 255, 255, 0.95);
        --line: rgba(20, 35, 58, 0.13);
        --line-soft: rgba(20, 35, 58, 0.08);
        --text: #102033;
        --text-strong: #06101d;
        --muted: #64748b;
        --muted-strong: #334155;
        --accent: #d79b10;
        --accent-strong: #f5c451;
        --blue: #047da3;
        --green: #188a52;
        --red: #c24141;
        --shadow: 0 28px 90px rgba(30, 50, 80, 0.16);
        --shadow-soft: 0 16px 46px rgba(30, 50, 80, 0.12);
    }
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg: #eef4fb;
    --bg-soft: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.82);
    --bg-card-strong: rgba(255, 255, 255, 0.95);
    --line: rgba(20, 35, 58, 0.13);
    --line-soft: rgba(20, 35, 58, 0.08);
    --text: #102033;
    --text-strong: #06101d;
    --muted: #64748b;
    --muted-strong: #334155;
    --accent: #d79b10;
    --accent-strong: #f5c451;
    --blue: #047da3;
    --green: #188a52;
    --red: #c24141;
    --shadow: 0 28px 90px rgba(30, 50, 80, 0.16);
    --shadow-soft: 0 16px 46px rgba(30, 50, 80, 0.12);
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 32rem),
        radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 28rem),
        linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 52%, var(--bg) 100%);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: transparent;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 80%);
}

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

button,
input,
select {
    font: inherit;
}

.shell {
    width: min(var(--shell), calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(22px);
}

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.brand-mark img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.brand-ball {
    display: none;
    font-size: 1.7rem;
}

.brand-mark img[style*="display: none"] + .brand-ball {
    display: block;
}

.brand-copy {
    display: grid;
    gap: 2px;
    line-height: 1.05;
}

.brand-copy strong {
    color: var(--text-strong);
    font-size: 1.25rem;
    letter-spacing: -0.04em;
}

.brand-copy small {
    color: var(--muted);
    font-weight: 800;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.main-nav a,
.theme-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted-strong);
    background: transparent;
    font-size: 0.94rem;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.main-nav a:hover,
.main-nav a.active,
.theme-toggle:hover {
    border-color: var(--line);
    color: var(--text-strong);
    background: var(--bg-card);
}

.theme-toggle {
    border-color: var(--line);
    background: var(--bg-card);
}

.main-content {
    padding-block: 34px 58px;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 22px 34px;
    color: var(--muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--line-soft);
}

.card,
.hero,
.auth-card,
.profile-head,
.table-wrap,
.leaderboard,
.admin-upload,
.admin-match,
.result-card,
.mini-match,
.empty,
.compact {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(
        180deg,
        var(--bg-card-strong),
        var(--bg-card)
    );
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.hero {
    min-height: 350px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 34px;
    padding: clamp(28px, 5vw, 58px);
    margin-bottom: 34px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "🏆";
    position: absolute;
    right: clamp(20px, 7vw, 95px);
    top: 28px;
    opacity: 0.10;
    font-size: clamp(5rem, 18vw, 12rem);
    transform: rotate(-8deg);
}

.hero > * {
    position: relative;
    z-index: 1;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 18px currentColor;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 14px;
    color: var(--text-strong);
    font-size: clamp(2.35rem, 7vw, 5.2rem);
    line-height: 0.92;
    letter-spacing: -0.078em;
}

h2 {
    margin-bottom: 0;
    color: var(--text-strong);
    font-size: clamp(1.35rem, 2.4vw, 2.25rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

p {
    color: var(--muted-strong);
    line-height: 1.65;
}

.hero p {
    max-width: 560px;
    margin-bottom: 0;
    font-size: 1.08rem;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 12px;
    min-width: min(430px, 100%);
}

.hero-stats div {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
}

.hero-stats strong {
    display: block;
    color: var(--accent);
    font-size: 2.15rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.hero-stats span {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.layout-two {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(310px, 0.78fr);
    gap: 24px;
    align-items: start;
}

.section-title,
.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 34px 0 16px;
}

.page-heading {
    margin-top: 8px;
}

.page-heading.split {
    align-items: center;
}

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

.stack {
    display: grid;
    gap: 14px;
}

.leaderboard {
    overflow: hidden;
}

.leader-row {
    display: grid;
    grid-template-columns: 54px 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 18px 21px;
    border-bottom: 1px solid var(--line-soft);
}

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

.leader-row:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.leader-row.leader {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent) 20%, transparent),
        transparent
    );
}

.rank {
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 950;
    text-align: center;
}

.avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #081426;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    font-weight: 950;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

.avatar.large {
    width: 88px;
    height: 88px;
    font-size: 2.2rem;
}

.leader-name,
.leader-points {
    display: grid;
    gap: 4px;
}

.leader-name {
    min-width: 0;
}

.leader-name strong {
    overflow: hidden;
    color: var(--text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leader-name small,
.leader-points small {
    color: var(--muted);
    font-size: 0.78rem;
}

.leader-points {
    text-align: right;
}

.leader-points strong {
    color: var(--accent);
    font-size: 1.38rem;
}

.mini-match,
.result-card,
.compact,
.empty {
    padding: 18px;
}

.match-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 11px;
    align-items: center;
    margin: 13px 0 8px;
}

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

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

.recent-section {
    margin-top: 36px;
}

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

.result-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding-top: 13px;
}

.result-line strong {
    color: var(--accent);
    font-size: 1.35rem;
}

.group-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin: 0 0 20px;
}

.group-filter a {
    flex: 0 0 auto;
    min-width: 44px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted-strong);
    background: var(--bg-card);
    font-weight: 850;
}

.group-filter a.active,
.group-filter a:hover {
    color: #081426;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

.matches-list,
.admin-results {
    display: grid;
    gap: 16px;
}

.match-card {
    overflow: hidden;
}

.match-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.match-main {
    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    align-items: center;
    gap: 22px;
    padding: 26px 24px 20px;
}

.team {
    min-width: 0;
    color: var(--text-strong);
    font-size: 1.18rem;
    font-weight: 900;
}

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

.score-box {
    min-height: 82px;
    display: grid;
    place-items: center;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    text-align: center;
}

.score-box strong {
    color: var(--text-strong);
    font-size: 1.45rem;
}

.score-box.final strong {
    color: var(--accent);
}

.score-box span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.prediction-strip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 0 20px 20px;
}

.prediction-pill {
    flex: 1 0 155px;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

.prediction-pill span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prediction-pill strong {
    color: var(--text-strong);
    font-weight: 950;
}

.prediction-pill em {
    color: var(--accent);
    font-style: normal;
    font-weight: 950;
}

.profile-head {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px;
    margin-bottom: 22px;
}

.profile-head h1 {
    margin-bottom: 8px;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
}

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

table {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
}

th,
td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

th {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

td strong {
    color: var(--text-strong);
}

td small {
    display: block;
    margin-top: 4px;
}

.auth-card {
    width: min(500px, 100%);
    margin: 52px auto;
    padding: 34px;
}

.auth-card h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
}

.form-stack {
    display: grid;
    gap: 18px;
}

label {
    display: grid;
    gap: 8px;
    color: var(--muted-strong);
    font-size: 0.88rem;
    font-weight: 750;
}

input,
select {
    width: 100%;
    min-height: 46px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text-strong);
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

input:focus,
select:focus {
    outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--accent);
}

.button,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    width: fit-content;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #081426;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 22%, transparent);
    font-weight: 950;
    cursor: pointer;
}

.button.secondary,
button.secondary {
    color: var(--text-strong);
    background: var(--bg-card);
    border: 1px solid var(--line);
    box-shadow: none;
}

.button.small,
button.small {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 0.86rem;
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 24px;
    margin-bottom: 22px;
}

.upload-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sync-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.2rem;
    margin-top: 0.8rem;
    color: var(--muted-strong);
    font-size: 0.9rem;
}

.sync-error {
    color: var(--red);
    font-weight: 800;
    overflow-wrap: anywhere;
}

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

.admin-match {
    display: grid;
    gap: 12px;
    padding: 17px;
}

.admin-team {
    display: grid;
    grid-template-columns: 1fr 72px;
    align-items: center;
    gap: 10px;
}

.admin-team input {
    text-align: center;
    font-weight: 900;
}

.empty {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 38px;
    text-align: center;
}

.empty-icon {
    font-size: 2.4rem;
}

.flash-stack {
    display: grid;
    gap: 9px;
    margin-bottom: 18px;
}

.flash {
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--bg-card);
}

.flash.success {
    color: var(--green);
}

.flash.error {
    color: var(--red);
}

code {
    padding: 0.12rem 0.35rem;
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

@media (max-width: 920px) {
    .header-inner {
        align-items: flex-start;
        flex-direction: column;
        padding-block: 14px;
    }

    .main-nav {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .layout-two,
    .admin-results {
        grid-template-columns: 1fr;
    }

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

    .admin-upload,
    .upload-form {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .shell {
        width: min(100% - 20px, var(--shell));
    }

    .brand-copy small {
        display: none;
    }

    .main-content {
        padding-top: 22px;
    }

    .hero {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        padding: 24px;
    }

    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        min-width: 0;
    }

    .hero-stats div {
        padding: 13px 10px;
    }

    .hero-stats strong {
        font-size: 1.55rem;
    }

    .section-title,
    .page-heading,
    .page-heading.split {
        align-items: flex-start;
        flex-direction: column;
    }

    .leader-row {
        grid-template-columns: 36px 40px minmax(0, 1fr) auto;
        gap: 9px;
        padding: 14px 12px;
    }

    .avatar {
        width: 38px;
        height: 38px;
    }

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

    .match-main {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 16px;
    }

    .team.home,
    .team.away {
        text-align: center;
    }

    .score-box {
        min-height: 70px;
    }

    .prediction-pill {
        flex-basis: 190px;
    }

    .profile-head,
    .footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Rood-wit-blauwe kaartomlijning */
.card,
.hero,
.auth-card,
.profile-head,
.table-wrap,
.leaderboard,
.admin-upload,
.admin-match,
.result-card,
.mini-match,
.empty,
.compact,
.match-card {
    position: relative;
    border: 2px solid transparent !important;
    background:
        linear-gradient(var(--bg-card-strong), var(--bg-card)) padding-box,
        linear-gradient(135deg, #ae1c28 0%, #ffffff 50%, #21468b 100%) border-box !important;
}

/* Iets sterkere rand bij hover */
.card:hover,
.hero:hover,
.auth-card:hover,
.profile-head:hover,
.table-wrap:hover,
.leaderboard:hover,
.admin-upload:hover,
.admin-match:hover,
.result-card:hover,
.mini-match:hover,
.compact:hover,
.match-card:hover {
    background:
        linear-gradient(var(--bg-card-strong), var(--bg-card)) padding-box,
        linear-gradient(135deg, #ae1c28 0%, #ffffff 42%, #21468b 100%) border-box !important;
}

/* Zwarte tekst op lichte kaarten in donkere modus, zonder globale styling te slopen */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .profile-head,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .leaderboard,
:root[data-theme="dark"] .admin-upload,
:root[data-theme="dark"] .admin-match,
:root[data-theme="dark"] .result-card,
:root[data-theme="dark"] .mini-match,
:root[data-theme="dark"] .empty,
:root[data-theme="dark"] .compact,
:root[data-theme="dark"] .match-card {
    color: #0f172a;
}

:root[data-theme="dark"] .card h1,
:root[data-theme="dark"] .card h2,
:root[data-theme="dark"] .card h3,
:root[data-theme="dark"] .card p,
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] .hero h2,
:root[data-theme="dark"] .hero h3,
:root[data-theme="dark"] .hero p,
:root[data-theme="dark"] .auth-card h1,
:root[data-theme="dark"] .auth-card h2,
:root[data-theme="dark"] .auth-card p,
:root[data-theme="dark"] .leader-name strong,
:root[data-theme="dark"] .leader-name small,
:root[data-theme="dark"] .leader-points small,
:root[data-theme="dark"] .team,
:root[data-theme="dark"] .teams strong,
:root[data-theme="dark"] .score-box strong,
:root[data-theme="dark"] .prediction-pill span,
:root[data-theme="dark"] .prediction-pill strong,
:root[data-theme="dark"] .prediction-pill em,
:root[data-theme="dark"] .match-meta,
:root[data-theme="dark"] .result-line,
:root[data-theme="dark"] .table-wrap th,
:root[data-theme="dark"] .table-wrap td,
:root[data-theme="dark"] .table-wrap td strong,
:root[data-theme="dark"] .admin-match label,
:root[data-theme="dark"] .admin-match small,
:root[data-theme="dark"] .compact h1,
:root[data-theme="dark"] .compact h2,
:root[data-theme="dark"] .compact h3,
:root[data-theme="dark"] .compact p {
    color: #0f172a;
}

/* Gedempte tekst binnen kaarten iets donkergrijs maken */
:root[data-theme="dark"] .card .muted,
:root[data-theme="dark"] .hero .muted,
:root[data-theme="dark"] .compact .muted,
:root[data-theme="dark"] .table-wrap small,
:root[data-theme="dark"] .leader-name small,
:root[data-theme="dark"] .leader-points small,
:root[data-theme="dark"] .match-meta {
    color: #475569;
}

/* Accentkleur zichtbaar houden op lichte kaarten */
:root[data-theme="dark"] .card .eyebrow,
:root[data-theme="dark"] .hero .eyebrow,
:root[data-theme="dark"] .compact .eyebrow,
:root[data-theme="dark"] .rank,
:root[data-theme="dark"] .leader-points strong,
:root[data-theme="dark"] .result-line strong,
:root[data-theme="dark"] .score-box.final strong {
    color: #b77900;
}

/* Inputs in kaarten leesbaar houden */
:root[data-theme="dark"] .card input,
:root[data-theme="dark"] .card select,
:root[data-theme="dark"] .auth-card input,
:root[data-theme="dark"] .auth-card select,
:root[data-theme="dark"] .admin-match input,
:root[data-theme="dark"] .admin-match select {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.82);
}

/* Zelfde fix wanneer thema op Auto staat en je systeem donker is */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .card,
    :root[data-theme="auto"] .hero,
    :root[data-theme="auto"] .auth-card,
    :root[data-theme="auto"] .profile-head,
    :root[data-theme="auto"] .table-wrap,
    :root[data-theme="auto"] .leaderboard,
    :root[data-theme="auto"] .admin-upload,
    :root[data-theme="auto"] .admin-match,
    :root[data-theme="auto"] .result-card,
    :root[data-theme="auto"] .mini-match,
    :root[data-theme="auto"] .empty,
    :root[data-theme="auto"] .compact,
    :root[data-theme="auto"] .match-card {
        color: #0f172a;
    }

    :root[data-theme="auto"] .card h1,
    :root[data-theme="auto"] .card h2,
    :root[data-theme="auto"] .card h3,
    :root[data-theme="auto"] .card p,
    :root[data-theme="auto"] .hero h1,
    :root[data-theme="auto"] .hero h2,
    :root[data-theme="auto"] .hero h3,
    :root[data-theme="auto"] .hero p,
    :root[data-theme="auto"] .leader-name strong,
    :root[data-theme="auto"] .leader-name small,
    :root[data-theme="auto"] .leader-points small,
    :root[data-theme="auto"] .team,
    :root[data-theme="auto"] .teams strong,
    :root[data-theme="auto"] .score-box strong,
    :root[data-theme="auto"] .prediction-pill span,
    :root[data-theme="auto"] .prediction-pill strong,
    :root[data-theme="auto"] .prediction-pill em,
    :root[data-theme="auto"] .match-meta,
    :root[data-theme="auto"] .table-wrap th,
    :root[data-theme="auto"] .table-wrap td,
    :root[data-theme="auto"] .table-wrap td strong,
    :root[data-theme="auto"] .compact h1,
    :root[data-theme="auto"] .compact h2,
    :root[data-theme="auto"] .compact h3,
    :root[data-theme="auto"] .compact p {
        color: #0f172a;
    }

    :root[data-theme="auto"] .card .muted,
    :root[data-theme="auto"] .hero .muted,
    :root[data-theme="auto"] .compact .muted,
    :root[data-theme="auto"] .table-wrap small,
    :root[data-theme="auto"] .leader-name small,
    :root[data-theme="auto"] .leader-points small,
    :root[data-theme="auto"] .match-meta {
        color: #475569;
    }

    :root[data-theme="auto"] .card .eyebrow,
    :root[data-theme="auto"] .hero .eyebrow,
    :root[data-theme="auto"] .compact .eyebrow,
    :root[data-theme="auto"] .rank,
    :root[data-theme="auto"] .leader-points strong,
    :root[data-theme="auto"] .result-line strong,
    :root[data-theme="auto"] .score-box.final strong {
        color: #b77900;
    }
}

/* Rijkere homepage */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.podium-section {
    margin-bottom: 34px;
}

.podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.podium-card {
    min-height: 245px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 12px;
    padding: 26px 20px;
    text-align: center;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.podium-card:hover {
    transform: translateY(-4px);
    filter: brightness(1.03);
}

.podium-1 {
    transform: translateY(-10px);
}

.podium-1:hover {
    transform: translateY(-14px);
}

.podium-rank {
    font-size: 2rem;
    line-height: 1;
}

.podium-name {
    color: var(--text-strong);
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.podium-points {
    display: grid;
    gap: 2px;
}

.podium-points strong {
    color: var(--accent);
    font-size: 2.15rem;
    line-height: 1;
    letter-spacing: -0.05em;
}

.podium-points small,
.podium-meta {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.quick-panel {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 18px;
}

.quick-panel a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    color: var(--text-strong);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    font-weight: 850;
}

.quick-panel a::after {
    content: "→";
    color: var(--accent);
    font-weight: 950;
}

.quick-panel a:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}

.result-source {
    display: block;
    margin-top: 12px;
    color: var(--muted);
}

/* Zwarte tekst ook voor nieuwe homepage-kaarten in donkere modus */
:root[data-theme="dark"] .podium-card,
:root[data-theme="dark"] .quick-panel,
:root[data-theme="dark"] .quick-panel a {
    color: #0f172a;
}

:root[data-theme="dark"] .podium-name,
:root[data-theme="dark"] .quick-panel a {
    color: #0f172a;
}

:root[data-theme="dark"] .podium-points small,
:root[data-theme="dark"] .podium-meta,
:root[data-theme="dark"] .result-source {
    color: #475569;
}

:root[data-theme="dark"] .podium-points strong,
:root[data-theme="dark"] .quick-panel a::after {
    color: #b77900;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .podium-card,
    :root[data-theme="auto"] .quick-panel,
    :root[data-theme="auto"] .quick-panel a {
        color: #0f172a;
    }

    :root[data-theme="auto"] .podium-name,
    :root[data-theme="auto"] .quick-panel a {
        color: #0f172a;
    }

    :root[data-theme="auto"] .podium-points small,
    :root[data-theme="auto"] .podium-meta,
    :root[data-theme="auto"] .result-source {
        color: #475569;
    }

    :root[data-theme="auto"] .podium-points strong,
    :root[data-theme="auto"] .quick-panel a::after {
        color: #b77900;
    }
}

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

    .podium-1 {
        transform: none;
    }

    .podium-1:hover {
        transform: translateY(-4px);
    }

    .podium-card {
        min-height: 0;
    }
}

/* Rijkere wedstrijdpagina */
.matches-hero {
    min-height: 300px;
}

.matches-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    margin-bottom: 22px;
}

.matches-toolbar h2 {
    margin-top: 0.2rem;
}

.compact-filter {
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    max-width: 100%;
}

.rich-matches-list {
    gap: 18px;
}

.match-card.is-played {
    box-shadow:
        var(--shadow),
        inset 0 0 0 1px color-mix(in srgb, var(--green) 10%, transparent);
}

.match-card.is-upcoming {
    box-shadow:
        var(--shadow),
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.mini-status {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mini-status.played {
    color: #047857;
    background: rgba(85, 229, 154, 0.18);
}

.mini-status.upcoming {
    color: #b77900;
    background: rgba(245, 196, 81, 0.18);
}

.rich-match-main {
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
}

.team-block {
    display: grid;
    gap: 7px;
    min-width: 0;
}

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

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

.team-block strong {
    color: var(--text-strong);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    overflow-wrap: anywhere;
}

.team-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.rich-predictions {
    padding-top: 2px;
}

.prediction-pill.has-points {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--accent) 12%, transparent),
            color-mix(in srgb, var(--text) 4%, transparent)
        );
}

.prediction-pill em.pending {
    color: var(--muted);
}

.prediction-pill em.points-5 {
    color: #047857;
}

.prediction-pill em.points-4 {
    color: #0f766e;
}

.prediction-pill em.points-3 {
    color: #b77900;
}

.prediction-pill em.points-2,
.prediction-pill em.points-1 {
    color: #2563eb;
}

.prediction-pill em.points-0 {
    color: var(--muted);
}

/* Donkere modus: zwarte tekst op nieuwe wedstrijdonderdelen */
:root[data-theme="dark"] .matches-toolbar,
:root[data-theme="dark"] .matches-toolbar h2,
:root[data-theme="dark"] .team-block strong,
:root[data-theme="dark"] .team-label,
:root[data-theme="dark"] .mini-status,
:root[data-theme="dark"] .prediction-pill.has-points {
    color: #0f172a;
}

:root[data-theme="dark"] .team-label {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .matches-toolbar,
    :root[data-theme="auto"] .matches-toolbar h2,
    :root[data-theme="auto"] .team-block strong,
    :root[data-theme="auto"] .team-label,
    :root[data-theme="auto"] .mini-status,
    :root[data-theme="auto"] .prediction-pill.has-points {
        color: #0f172a;
    }

    :root[data-theme="auto"] .team-label {
        color: #475569;
    }
}

@media (max-width: 820px) {
    .matches-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .compact-filter {
        width: 100%;
        justify-content: flex-start;
    }

    .rich-match-main {
        grid-template-columns: 1fr;
    }

    .team-block.home,
    .team-block.away {
        text-align: center;
    }
}
/* Extra layout voor deelnemerslogin en Mijn voorspellingen */
.prediction-editor-list {
    display: grid;
    gap: 16px;
}

.prediction-editor {
    overflow: hidden;
}

.prediction-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.prediction-editor-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding: 24px 20px;
}

.prediction-team {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    align-items: center;
    gap: 12px;
    color: var(--text-strong);
    font-weight: 900;
}

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

.prediction-team.away {
    grid-template-columns: 76px minmax(0, 1fr);
}

.prediction-team input {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 950;
}

.prediction-separator {
    color: var(--muted);
    font-size: 1.4rem;
    font-weight: 950;
}

.prediction-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px 20px;
}

.locked-section {
    margin-top: 42px;
}

.locked-prediction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 20px;
}

.locked-prediction > div:first-child {
    display: grid;
    gap: 4px;
}

.locked-score {
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 950;
}

.auth-help {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

/* Donkere modus: zwarte tekst op deze nieuwe lichte kaarten */
:root[data-theme="dark"] .prediction-editor,
:root[data-theme="dark"] .locked-prediction,
:root[data-theme="dark"] .prediction-editor h1,
:root[data-theme="dark"] .prediction-editor h2,
:root[data-theme="dark"] .prediction-editor h3,
:root[data-theme="dark"] .prediction-team,
:root[data-theme="dark"] .prediction-team span,
:root[data-theme="dark"] .locked-prediction,
:root[data-theme="dark"] .locked-prediction strong,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .auth-card h1,
:root[data-theme="dark"] .auth-card p,
:root[data-theme="dark"] .auth-card label {
    color: #0f172a;
}

:root[data-theme="dark"] .prediction-editor small,
:root[data-theme="dark"] .locked-prediction small,
:root[data-theme="dark"] .auth-help {
    color: #475569;
}

:root[data-theme="dark"] .locked-score {
    color: #b77900;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .prediction-editor,
    :root[data-theme="auto"] .locked-prediction,
    :root[data-theme="auto"] .prediction-editor h1,
    :root[data-theme="auto"] .prediction-editor h2,
    :root[data-theme="auto"] .prediction-editor h3,
    :root[data-theme="auto"] .prediction-team,
    :root[data-theme="auto"] .prediction-team span,
    :root[data-theme="auto"] .locked-prediction,
    :root[data-theme="auto"] .locked-prediction strong,
    :root[data-theme="auto"] .auth-card,
    :root[data-theme="auto"] .auth-card h1,
    :root[data-theme="auto"] .auth-card p,
    :root[data-theme="auto"] .auth-card label {
        color: #0f172a;
    }

    :root[data-theme="auto"] .prediction-editor small,
    :root[data-theme="auto"] .locked-prediction small,
    :root[data-theme="auto"] .auth-help {
        color: #475569;
    }

    :root[data-theme="auto"] .locked-score {
        color: #b77900;
    }
}

@media (max-width: 640px) {
    .prediction-editor-head,
    .prediction-editor-actions,
    .locked-prediction {
        align-items: flex-start;
        flex-direction: column;
    }

    .prediction-editor-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .prediction-team,
    .prediction-team.away {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .prediction-team.home span,
    .prediction-team.away span {
        text-align: left;
    }

    .prediction-team.away input {
        order: 2;
    }

    .prediction-separator {
        display: none;
    }
}

/* Gesplitste vlag-achtergrond op kaarten */
.flag-split-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.flag-split-card::before,
.flag-split-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.14;
    pointer-events: none;
}

.flag-split-card::before {
    left: 0;
    width: 50%;
    background-image: var(--flag-home);
}

.flag-split-card::after {
    right: 0;
    width: 50%;
    background-image: var(--flag-away);
}

.flag-split-card > * {
    position: relative;
    z-index: 1;
}

/* Zachte midden-overgang */
.flag-split-card .match-main::before,
.flag-split-card .teams::before,
.flag-split-card .result-line::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,0.18) 46%,
            rgba(255,255,255,0.18) 54%,
            transparent 100%
        );
}

/* In donkere modus iets minder fel */
:root[data-theme="dark"] .flag-split-card::before,
:root[data-theme="dark"] .flag-split-card::after {
    opacity: 0.11;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flag-split-card::before,
    :root[data-theme="auto"] .flag-split-card::after {
        opacity: 0.11;
    }
}

/* Vlaggen iets zichtbaarder maken */
.flag-split-card::before,
.flag-split-card::after {
    opacity: 0.24;
}

:root[data-theme="dark"] .flag-split-card::before,
:root[data-theme="dark"] .flag-split-card::after {
    opacity: 0.20;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flag-split-card::before,
    :root[data-theme="auto"] .flag-split-card::after {
        opacity: 0.20;
    }
}

/* Vlaggen nog 2 stapjes sterker */
.flag-split-card::before,
.flag-split-card::after {
    opacity: 0.32;
}

:root[data-theme="dark"] .flag-split-card::before,
:root[data-theme="dark"] .flag-split-card::after {
    opacity: 0.26;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flag-split-card::before,
    :root[data-theme="auto"] .flag-split-card::after {
        opacity: 0.26;
    }
}

/* Vlaggen nog 2 stappen sterker */
.flag-split-card::before,
.flag-split-card::after {
    opacity: 0.42;
}

:root[data-theme="dark"] .flag-split-card::before,
:root[data-theme="dark"] .flag-split-card::after {
    opacity: 0.34;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flag-split-card::before,
    :root[data-theme="auto"] .flag-split-card::after {
        opacity: 0.34;
    }
}

/* Vlaggen 5 stappen sterker */
.flag-split-card::before,
.flag-split-card::after {
    opacity: 0.70;
}

:root[data-theme="dark"] .flag-split-card::before,
:root[data-theme="dark"] .flag-split-card::after {
    opacity: 0.58;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flag-split-card::before,
    :root[data-theme="auto"] .flag-split-card::after {
        opacity: 0.58;
    }
}

/* Vlaggen weer 5 stappen minder sterk */
.flag-split-card::before,
.flag-split-card::after {
    opacity: 0.42;
}

:root[data-theme="dark"] .flag-split-card::before,
:root[data-theme="dark"] .flag-split-card::after {
    opacity: 0.34;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flag-split-card::before,
    :root[data-theme="auto"] .flag-split-card::after {
        opacity: 0.34;
    }
}

/* Definitieve zachtere vlagsterkte */
.flag-split-card::before,
.flag-split-card::after {
    opacity: 0.26 !important;
}

:root[data-theme="dark"] .flag-split-card::before,
:root[data-theme="dark"] .flag-split-card::after {
    opacity: 0.20 !important;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flag-split-card::before,
    :root[data-theme="auto"] .flag-split-card::after {
        opacity: 0.20 !important;
    }
}

/* Vlaggen op Mijn voorspellingen */
.prediction-editor.flag-split-card,
.locked-prediction.flag-split-card {
    background-color: var(--bg-card-strong);
}

.prediction-editor.flag-split-card input {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(8px);
}

.prediction-editor.flag-split-card .prediction-editor-head,
.prediction-editor.flag-split-card .prediction-editor-main,
.prediction-editor.flag-split-card .prediction-editor-actions,
.locked-prediction.flag-split-card > * {
    position: relative;
    z-index: 2;
}

:root[data-theme="dark"] .prediction-editor.flag-split-card input {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.86);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .prediction-editor.flag-split-card input {
        color: #0f172a;
        background: rgba(255, 255, 255, 0.86);
    }
}

/* Deelnemer-detailpagina met vlagkaarten */
.participant-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
}

.participant-stat-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.participant-stat-strip div {
    min-width: 92px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    text-align: center;
}

.participant-stat-strip strong {
    display: block;
    color: var(--accent);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 950;
}

.participant-stat-strip span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.participant-card-grid {
    display: grid;
    gap: 18px;
}

.participant-match-card {
    padding: 22px;
}

.participant-teams {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    margin: 22px 0;
}

.participant-prediction-footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.participant-prediction-footer div {
    display: grid;
    gap: 4px;
}

.participant-prediction-footer div:last-child {
    text-align: right;
}

.footer-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.participant-prediction-footer strong {
    color: var(--text-strong);
    font-size: 1.3rem;
    font-weight: 950;
}

.participant-prediction-footer .points-earned {
    color: #047857;
}

.participant-prediction-footer .points-pending {
    color: var(--muted);
}

/* Donkere modus: tekst op deelnemerkaarten donker houden */
:root[data-theme="dark"] .participant-hero,
:root[data-theme="dark"] .participant-hero h1,
:root[data-theme="dark"] .participant-hero p,
:root[data-theme="dark"] .participant-match-card,
:root[data-theme="dark"] .participant-match-card strong,
:root[data-theme="dark"] .participant-prediction-footer strong {
    color: #0f172a;
}

:root[data-theme="dark"] .participant-stat-strip span,
:root[data-theme="dark"] .participant-match-card .footer-label,
:root[data-theme="dark"] .participant-match-card .team-label,
:root[data-theme="dark"] .participant-match-card .match-meta {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .participant-hero,
    :root[data-theme="auto"] .participant-hero h1,
    :root[data-theme="auto"] .participant-hero p,
    :root[data-theme="auto"] .participant-match-card,
    :root[data-theme="auto"] .participant-match-card strong,
    :root[data-theme="auto"] .participant-prediction-footer strong {
        color: #0f172a;
    }

    :root[data-theme="auto"] .participant-stat-strip span,
    :root[data-theme="auto"] .participant-match-card .footer-label,
    :root[data-theme="auto"] .participant-match-card .team-label,
    :root[data-theme="auto"] .participant-match-card .match-meta {
        color: #475569;
    }
}

@media (max-width: 820px) {
    .participant-hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .participant-teams {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .participant-teams .team-block.home,
    .participant-teams .team-block.away {
        text-align: center;
    }
}

/* Deelnemerpagina: backend-gegroepeerde fases */
.phase-block {
    display: grid;
    gap: 16px;
    margin-bottom: 34px;
}

.phase-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding: 0 4px;
}

.phase-heading h2 {
    margin: 0.2rem 0 0;
    color: var(--text-strong);
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 950;
    letter-spacing: -0.05em;
}

.phase-count {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 850;
}

:root[data-theme="dark"] .phase-heading h2 {
    color: #0f172a;
}

:root[data-theme="dark"] .phase-count {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .phase-heading h2 {
        color: #0f172a;
    }

    :root[data-theme="auto"] .phase-count {
        color: #475569;
    }
}

/* Snelknoppen op deelnemerpagina */
.section-jump-card {
    display: grid;
    gap: 14px;
    margin: 0 0 28px;
    padding: 18px;
}

.section-jump-card strong {
    display: block;
    margin-top: 4px;
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 950;
}

.section-jump-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.section-jump-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    color: var(--text-strong);
    background: rgba(255, 255, 255, 0.48);
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.section-jump-buttons a:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.75);
}

.phase-block {
    scroll-margin-top: 110px;
}

:root[data-theme="dark"] .section-jump-card,
:root[data-theme="dark"] .section-jump-card strong,
:root[data-theme="dark"] .section-jump-buttons a {
    color: #0f172a;
}

:root[data-theme="dark"] .section-jump-buttons a {
    background: rgba(255, 255, 255, 0.62);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .section-jump-card,
    :root[data-theme="auto"] .section-jump-card strong,
    :root[data-theme="auto"] .section-jump-buttons a {
        color: #0f172a;
    }

    :root[data-theme="auto"] .section-jump-buttons a {
        background: rgba(255, 255, 255, 0.62);
    }
}

@media (max-width: 680px) {
    .section-jump-buttons a {
        flex: 1 1 auto;
    }
}

/* Mijn voorspellingen: gegroepeerde fases */
.prediction-editor-list {
    display: grid;
    gap: 18px;
}

.locked-section {
    margin-top: 40px;
}

.locked-prediction.flag-split-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.locked-prediction.flag-split-card > div {
    position: relative;
    z-index: 2;
}

.locked-prediction strong {
    display: block;
    color: var(--text-strong);
    font-size: 1.1rem;
    font-weight: 950;
}

.locked-prediction small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.locked-score {
    min-width: 86px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.66);
    color: var(--text-strong);
    font-size: 1.25rem;
    font-weight: 950;
    text-align: center;
}

:root[data-theme="dark"] .locked-prediction,
:root[data-theme="dark"] .locked-prediction strong,
:root[data-theme="dark"] .locked-score {
    color: #0f172a;
}

:root[data-theme="dark"] .locked-prediction small {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .locked-prediction,
    :root[data-theme="auto"] .locked-prediction strong,
    :root[data-theme="auto"] .locked-score {
        color: #0f172a;
    }

    :root[data-theme="auto"] .locked-prediction small {
        color: #475569;
    }
}

@media (max-width: 680px) {
    .locked-prediction.flag-split-card {
        align-items: stretch;
        flex-direction: column;
    }

    .locked-score {
        width: 100%;
    }
}

/* Wedstrijdenpagina: gegroepeerd per groep/ronde */
.matches-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.matches-hero h1 {
    margin: 0.2rem 0 0.5rem;
    color: var(--text-strong);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 950;
    letter-spacing: -0.07em;
}

.matches-hero p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
}

.matches-section-grid {
    display: grid;
    gap: 18px;
}

.match-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.team-side {
    display: grid;
    gap: 4px;
}

.team-side.away {
    text-align: right;
}

.team-side strong {
    color: var(--text-strong);
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.match-score {
    min-width: 108px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.66);
    color: var(--text-strong);
    text-align: center;
}

.match-score strong {
    display: block;
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.match-score span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 850;
}

.prediction-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.prediction-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--text-strong);
    font-size: 0.8rem;
    font-weight: 850;
}

.prediction-pill strong {
    font-weight: 950;
}

.prediction-pill small {
    color: var(--accent);
    font-weight: 950;
}

:root[data-theme="dark"] .matches-hero,
:root[data-theme="dark"] .matches-hero h1,
:root[data-theme="dark"] .matches-hero p,
:root[data-theme="dark"] .team-side strong,
:root[data-theme="dark"] .match-score,
:root[data-theme="dark"] .prediction-pill {
    color: #0f172a;
}

:root[data-theme="dark"] .match-score span {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .matches-hero,
    :root[data-theme="auto"] .matches-hero h1,
    :root[data-theme="auto"] .matches-hero p,
    :root[data-theme="auto"] .team-side strong,
    :root[data-theme="auto"] .match-score,
    :root[data-theme="auto"] .prediction-pill {
        color: #0f172a;
    }

    :root[data-theme="auto"] .match-score span {
        color: #475569;
    }
}

@media (max-width: 760px) {
    .matches-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .match-main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .team-side.away {
        text-align: center;
    }

    .team-side.home {
        text-align: center;
    }

    .match-score {
        width: 100%;
    }
}

/* Homepage: Vandaag / Morgen / Deze ronde */
.home-highlights {
    display: grid;
    gap: 18px;
    margin-bottom: 30px;
}

.home-highlights-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.home-highlights-head h2 {
    margin: 0.2rem 0 0;
    color: var(--text-strong);
    font-size: clamp(1.5rem, 2.3vw, 2.4rem);
    font-weight: 950;
    letter-spacing: -0.06em;
}

.home-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-highlight-panel {
    display: grid;
    align-content: start;
    gap: 14px;
}

.home-highlight-panel.wide {
    grid-column: span 1;
}

.highlight-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.highlight-panel-head strong {
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 950;
}

.highlight-match-list {
    display: grid;
    gap: 10px;
}

.highlight-match {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--text-strong);
    text-decoration: none;
}

.highlight-match > * {
    position: relative;
    z-index: 2;
}

.highlight-match strong {
    display: block;
    color: var(--text-strong);
    font-size: 0.95rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.highlight-match small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.highlight-match b {
    min-width: 42px;
    padding: 7px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--text-strong);
    font-size: 0.85rem;
    font-weight: 950;
    text-align: center;
}

.highlight-match:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.highlight-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--line-soft);
    border-radius: 18px;
    color: var(--muted);
    font-weight: 800;
}

:root[data-theme="dark"] .home-highlights,
:root[data-theme="dark"] .home-highlights-head h2,
:root[data-theme="dark"] .highlight-panel-head strong,
:root[data-theme="dark"] .highlight-match,
:root[data-theme="dark"] .highlight-match strong,
:root[data-theme="dark"] .highlight-match b {
    color: #0f172a;
}

:root[data-theme="dark"] .highlight-match small,
:root[data-theme="dark"] .highlight-empty {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .home-highlights,
    :root[data-theme="auto"] .home-highlights-head h2,
    :root[data-theme="auto"] .highlight-panel-head strong,
    :root[data-theme="auto"] .highlight-match,
    :root[data-theme="auto"] .highlight-match strong,
    :root[data-theme="auto"] .highlight-match b {
        color: #0f172a;
    }

    :root[data-theme="auto"] .highlight-match small,
    :root[data-theme="auto"] .highlight-empty {
        color: #475569;
    }
}

@media (max-width: 980px) {
    .home-highlight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .home-highlights-head {
        align-items: stretch;
        flex-direction: column;
    }

    .highlight-match {
        align-items: stretch;
        flex-direction: column;
    }

    .highlight-match b {
        width: 100%;
    }
}

/* Homepage: compact avond/nachtblok */
.night-matches-card {
    display: grid;
    gap: 16px;
    margin-bottom: 28px;
}

.night-matches-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.night-matches-head h2 {
    margin: 0.2rem 0 0;
    color: var(--text-strong);
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 950;
    letter-spacing: -0.05em;
}

.night-match-list {
    display: grid;
    gap: 10px;
}

.night-match-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--text-strong);
    text-decoration: none;
}

.night-match-row > * {
    position: relative;
    z-index: 2;
}

.night-match-row strong {
    display: block;
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.night-match-row small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.night-match-row b {
    min-width: 46px;
    padding: 7px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--text-strong);
    font-size: 0.85rem;
    font-weight: 950;
    text-align: center;
}

.night-match-row:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.night-match-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--line-soft);
    border-radius: 18px;
    color: var(--muted);
    font-weight: 800;
}

:root[data-theme="dark"] .night-matches-card,
:root[data-theme="dark"] .night-matches-head h2,
:root[data-theme="dark"] .night-match-row,
:root[data-theme="dark"] .night-match-row strong,
:root[data-theme="dark"] .night-match-row b {
    color: #0f172a;
}

:root[data-theme="dark"] .night-match-row small,
:root[data-theme="dark"] .night-match-empty {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .night-matches-card,
    :root[data-theme="auto"] .night-matches-head h2,
    :root[data-theme="auto"] .night-match-row,
    :root[data-theme="auto"] .night-match-row strong,
    :root[data-theme="auto"] .night-match-row b {
        color: #0f172a;
    }

    :root[data-theme="auto"] .night-match-row small,
    :root[data-theme="auto"] .night-match-empty {
        color: #475569;
    }
}

@media (max-width: 680px) {
    .night-matches-head {
        align-items: stretch;
        flex-direction: column;
    }

    .night-match-row {
        align-items: stretch;
        flex-direction: column;
    }

    .night-match-row b {
        width: 100%;
    }
}

/* Homepage: compacte komende duels met direct voorspellen */
.home-predict-card {
    display: grid;
    gap: 16px;
    margin-bottom: 28px;
}

.home-predict-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.home-predict-head h2 {
    margin: 0.2rem 0 0;
    color: var(--text-strong);
    font-size: clamp(1.45rem, 2.2vw, 2.25rem);
    font-weight: 950;
    letter-spacing: -0.06em;
}

.home-predict-head p {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-weight: 750;
}

.home-predict-list {
    display: grid;
    gap: 10px;
}

.home-predict-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
}

.home-predict-row > * {
    position: relative;
    z-index: 2;
}

.home-predict-info strong {
    display: block;
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.home-predict-info small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.home-predict-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-predict-inputs input {
    width: 58px;
    height: 40px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 950;
    text-align: center;
}

.home-predict-inputs span {
    color: var(--text-strong);
    font-weight: 950;
}

.home-predict-login,
.home-predict-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px dashed var(--line-soft);
    border-radius: 18px;
}

.home-predict-login strong,
.home-predict-empty strong {
    color: var(--text-strong);
    font-weight: 950;
}

.home-predict-empty span {
    color: var(--muted);
    font-weight: 800;
}

:root[data-theme="dark"] .home-predict-card,
:root[data-theme="dark"] .home-predict-head h2,
:root[data-theme="dark"] .home-predict-info strong,
:root[data-theme="dark"] .home-predict-inputs input,
:root[data-theme="dark"] .home-predict-inputs span,
:root[data-theme="dark"] .home-predict-login strong,
:root[data-theme="dark"] .home-predict-empty strong {
    color: #0f172a;
}

:root[data-theme="dark"] .home-predict-head p,
:root[data-theme="dark"] .home-predict-info small,
:root[data-theme="dark"] .home-predict-empty span {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .home-predict-card,
    :root[data-theme="auto"] .home-predict-head h2,
    :root[data-theme="auto"] .home-predict-info strong,
    :root[data-theme="auto"] .home-predict-inputs input,
    :root[data-theme="auto"] .home-predict-inputs span,
    :root[data-theme="auto"] .home-predict-login strong,
    :root[data-theme="auto"] .home-predict-empty strong {
        color: #0f172a;
    }

    :root[data-theme="auto"] .home-predict-head p,
    :root[data-theme="auto"] .home-predict-info small,
    :root[data-theme="auto"] .home-predict-empty span {
        color: #475569;
    }
}

@media (max-width: 820px) {
    .home-predict-row {
        grid-template-columns: 1fr;
    }

    .home-predict-inputs {
        justify-content: stretch;
    }

    .home-predict-inputs input {
        flex: 1;
    }

    .home-predict-inputs button {
        flex: 1.2;
    }
}

@media (max-width: 680px) {
    .home-predict-head,
    .home-predict-login,
    .home-predict-empty {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Prediction helper in bestaand Komende duels-blok */
.existing-upcoming-predict-helper {
    display: grid;
    gap: 10px;
    margin: 12px 0 16px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.42);
}

.existing-upcoming-predict-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.existing-upcoming-predict-head strong {
    color: var(--text-strong);
    font-size: 0.92rem;
    font-weight: 950;
}

.existing-upcoming-predict-head span,
.existing-upcoming-predict-head a {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.existing-upcoming-predict-list {
    display: grid;
    gap: 8px;
}

.existing-upcoming-predict-row {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
}

.existing-upcoming-predict-row strong {
    display: block;
    color: var(--text-strong);
    font-size: 0.86rem;
    font-weight: 950;
}

.existing-upcoming-predict-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.existing-upcoming-predict-inputs {
    display: flex;
    align-items: center;
    gap: 7px;
}

.existing-upcoming-predict-inputs input {
    width: 44px;
    height: 34px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-strong);
    font-size: 0.92rem;
    font-weight: 950;
    text-align: center;
}

.existing-upcoming-predict-inputs span {
    color: var(--text-strong);
    font-weight: 950;
}

.existing-upcoming-predict-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
}

:root[data-theme="dark"] .existing-upcoming-predict-helper,
:root[data-theme="dark"] .existing-upcoming-predict-head strong,
:root[data-theme="dark"] .existing-upcoming-predict-row strong,
:root[data-theme="dark"] .existing-upcoming-predict-inputs input,
:root[data-theme="dark"] .existing-upcoming-predict-inputs span {
    color: #0f172a;
}

:root[data-theme="dark"] .existing-upcoming-predict-head span,
:root[data-theme="dark"] .existing-upcoming-predict-head a,
:root[data-theme="dark"] .existing-upcoming-predict-row small,
:root[data-theme="dark"] .existing-upcoming-predict-empty {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .existing-upcoming-predict-helper,
    :root[data-theme="auto"] .existing-upcoming-predict-head strong,
    :root[data-theme="auto"] .existing-upcoming-predict-row strong,
    :root[data-theme="auto"] .existing-upcoming-predict-inputs input,
    :root[data-theme="auto"] .existing-upcoming-predict-inputs span {
        color: #0f172a;
    }

    :root[data-theme="auto"] .existing-upcoming-predict-head span,
    :root[data-theme="auto"] .existing-upcoming-predict-head a,
    :root[data-theme="auto"] .existing-upcoming-predict-row small,
    :root[data-theme="auto"] .existing-upcoming-predict-empty {
        color: #475569;
    }
}

/* Homepage: voorspellen direct in bestaande Komende duels-kaarten */
.mini-match-prediction-form {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.mini-match-prediction-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mini-match-prediction-inputs {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mini-match-prediction-inputs input {
    width: 46px;
    height: 34px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-strong);
    font-size: 0.92rem;
    font-weight: 950;
    text-align: center;
}

.mini-match-prediction-inputs span {
    color: var(--text-strong);
    font-weight: 950;
}

.mini-match-login-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--text-strong);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

:root[data-theme="dark"] .mini-match-prediction-inputs input,
:root[data-theme="dark"] .mini-match-prediction-inputs span,
:root[data-theme="dark"] .mini-match-login-link {
    color: #0f172a;
}

:root[data-theme="dark"] .mini-match-prediction-label {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .mini-match-prediction-inputs input,
    :root[data-theme="auto"] .mini-match-prediction-inputs span,
    :root[data-theme="auto"] .mini-match-login-link {
        color: #0f172a;
    }

    :root[data-theme="auto"] .mini-match-prediction-label {
        color: #475569;
    }
}

@media (max-width: 680px) {
    .mini-match-prediction-inputs input {
        flex: 1;
    }

    .mini-match-prediction-inputs button {
        flex: 1.2;
    }
}

/* Homepage: voorspelling in Komende duels netjes centreren */
.mini-match-prediction-form {
    justify-items: center;
    text-align: center;
}

.mini-match-prediction-label {
    text-align: center;
}

.mini-match-prediction-inputs {
    display: grid !important;
    grid-template-columns: 56px 18px 56px;
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
}

.mini-match-prediction-inputs input {
    width: 56px !important;
    height: 38px;
}

.mini-match-prediction-inputs span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    text-align: center;
}

.mini-match-prediction-inputs button {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 92px;
    margin-top: 2px;
}

/* Homepage: Komende duels compacter */
aside .mini-match.card {
    padding: 18px !important;
}

aside .mini-match .match-meta {
    margin-bottom: 8px;
}

aside .mini-match .teams {
    gap: 8px;
    margin: 8px 0;
}

aside .mini-match .teams strong {
    font-size: 1.05rem;
    line-height: 1.15;
}

aside .mini-match small {
    font-size: 0.82rem;
}

.mini-match-prediction-form {
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
}

.mini-match-prediction-label {
    font-size: 0.66rem;
}

.mini-match-prediction-inputs {
    grid-template-columns: 48px 14px 48px !important;
    gap: 6px 8px !important;
}

.mini-match-prediction-inputs input {
    width: 48px !important;
    height: 32px !important;
    border-radius: 10px;
    font-size: 0.86rem;
}

.mini-match-prediction-inputs span {
    width: 14px;
    font-size: 0.9rem;
}

.mini-match-prediction-inputs button {
    min-width: 76px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 0.78rem;
}

/* Bovenbalk: groot Poolbaas-logo zoals dev-versie */
.site-header {
    padding: 14px 0;
}

.header-inner {
    min-height: 86px;
    align-items: center;
}

.brand-big-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    text-decoration: none;
}

.brand-logo-large {
    display: block;
    width: auto;
    height: clamp(62px, 8vw, 96px);
    max-width: min(330px, 42vw);
    object-fit: contain;
}

.brand-big-logo:hover {
    transform: translateY(-1px);
}

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

@media (max-width: 920px) {
    .header-inner {
        min-height: auto;
        align-items: center;
        gap: 14px;
    }

    .brand-logo-large {
        height: 64px;
        max-width: 240px;
    }
}

@media (max-width: 680px) {
    .site-header {
        padding: 10px 0;
    }

    .header-inner {
        gap: 10px;
    }

    .brand-logo-large {
        height: 54px;
        max-width: 190px;
    }
}

/* Bovenbalk knoppen: Poolbaas paars */
:root {
    --poolbaas-purple: #7c3aed;
    --poolbaas-purple-soft: rgba(124, 58, 237, 0.12);
    --poolbaas-purple-strong: rgba(124, 58, 237, 0.22);
}

.site-header .main-nav a,
.site-header .theme-toggle {
    border: 1.5px solid var(--poolbaas-purple);
    border-radius: 999px;
}

.site-header .main-nav a:hover,
.site-header .theme-toggle:hover {
    border-color: var(--poolbaas-purple);
    background: var(--poolbaas-purple-soft);
}

.site-header .main-nav a.active {
    border-color: var(--poolbaas-purple);
    background: var(--poolbaas-purple-strong);
}

:root[data-theme="dark"] .site-header .main-nav a,
:root[data-theme="dark"] .site-header .theme-toggle {
    color: #0f172a;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .site-header .main-nav a,
    :root[data-theme="auto"] .site-header .theme-toggle {
        color: #0f172a;
    }
}

/* Bovenbalk: actieve knop gevuld paars met witte tekst */
.site-header .main-nav a.active {
    background: var(--poolbaas-purple) !important;
    border-color: var(--poolbaas-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.26);
}

.site-header .main-nav a.active:hover {
    background: var(--poolbaas-purple) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

:root[data-theme="dark"] .site-header .main-nav a.active,
:root[data-theme="dark"] .site-header .main-nav a.active:hover {
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .site-header .main-nav a.active,
    :root[data-theme="auto"] .site-header .main-nav a.active:hover {
        color: #ffffff !important;
    }
}

/* Homepage hero: WK26 logo i.p.v. beker emoji */
.hero-wk26-logo {
    display: inline-block;
    width: auto;
    height: clamp(56px, 8vw, 96px);
    max-width: 140px;
    object-fit: contain;
    vertical-align: middle;
}

/* Homepage hero: WK26-logo i.p.v. beker */
.hero-wk26-logo {
    display: block;
    width: auto;
    height: clamp(72px, 9vw, 132px);
    max-width: 180px;
    object-fit: contain;
}

/* Hero: officieel world cup logo */
.hero-wk26-logo {
    display: block;
    width: auto;
    height: clamp(72px, 9vw, 132px);
    max-width: 180px;
    object-fit: contain;
}

/* Klassement: kleine wereldbeker */
.leader-trophy-icon {
    display: inline-block;
    width: auto;
    height: 22px;
    max-width: 22px;
    object-fit: contain;
    vertical-align: middle;
}

/* Homepage hero: WK26 logo in Poolbaas Live */
.hero-dashboard {
    align-items: center;
}

.hero-logo-panel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-wk26-logo {
    display: block;
    width: auto;
    height: clamp(90px, 11vw, 160px);
    max-width: 210px;
    object-fit: contain;
}

/* Klassement: kleine wereldbeker voor nummer 1 */
.leader-trophy-icon {
    display: inline-block;
    width: auto;
    height: 22px;
    max-width: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.leader-row.is-first .leader-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Klassement: wereldbeker groter en netjes gecentreerd */
.leader-row.is-first .leader-rank {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.leader-trophy-icon {
    display: block !important;
    width: auto !important;
    height: 34px !important;
    max-width: 38px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transform: translateY(1px);
}

/* Komende duels: geen browser-pijltjes in scorevelden */
.mini-match-prediction-inputs input {
    appearance: textfield;
    -moz-appearance: textfield;
    padding: 0 !important;
    line-height: 1 !important;
}

.mini-match-prediction-inputs input::-webkit-outer-spin-button,
.mini-match-prediction-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Homepage: Komende duels compacter naast het klassement */
.layout-two {
    align-items: flex-start;
}

.layout-two > aside {
    align-self: flex-start;
}

.layout-two > aside .section-title {
    margin-bottom: 10px;
}

.layout-two > aside .stack {
    gap: 10px;
}

.layout-two > aside .mini-match.card {
    padding: 14px 16px !important;
}

.layout-two > aside .mini-match .match-meta {
    margin-bottom: 5px !important;
    font-size: 0.72rem;
}

.layout-two > aside .mini-match .teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 7px;
    margin: 5px 0 !important;
}

.layout-two > aside .mini-match .teams strong {
    font-size: 0.95rem !important;
    line-height: 1.12 !important;
}

.layout-two > aside .mini-match small {
    display: block;
    font-size: 0.76rem !important;
    line-height: 1.2;
}

.layout-two > aside .mini-match-prediction-form {
    margin-top: 7px !important;
    padding-top: 7px !important;
    gap: 5px !important;
}

.layout-two > aside .mini-match-prediction-label {
    font-size: 0.62rem !important;
}

.layout-two > aside .mini-match-prediction-inputs {
    display: grid !important;
    grid-template-columns: 42px 12px 42px 54px !important;
    grid-template-rows: auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
}

.layout-two > aside .mini-match-prediction-inputs input {
    width: 42px !important;
    height: 29px !important;
    font-size: 0.84rem !important;
    border-radius: 9px !important;
    text-align: center !important;
}

.layout-two > aside .mini-match-prediction-inputs span {
    width: 12px !important;
    font-size: 0.8rem !important;
}

.layout-two > aside .mini-match-prediction-inputs button {
    grid-column: auto !important;
    justify-self: center !important;
    min-width: 54px !important;
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 9px !important;
    margin-top: 0 !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
}

@media (max-width: 680px) {
    .layout-two > aside .mini-match-prediction-inputs {
        grid-template-columns: 44px 12px 44px 56px !important;
    }

    .layout-two > aside .mini-match-prediction-inputs input {
        width: 44px !important;
    }
}

/* Poolbaas Live hero: ticker voor komende voorspellingen van de speeldag */
.hero-day-ticker {
    display: grid;
    gap: 7px;
    max-width: 560px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(124, 58, 237, 0.26);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(255, 255, 255, 0.08));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.hero-day-ticker-main {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 0.92rem;
}

.hero-day-ticker-main strong {
    font-size: 1.02rem;
    color: var(--poolbaas-purple, #7c3aed);
}

.hero-day-ticker-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--poolbaas-purple, #7c3aed);
    box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.13);
}

.hero-day-ticker-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.10);
}

.hero-day-ticker-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--poolbaas-purple, #7c3aed);
}

.hero-day-ticker small {
    color: var(--muted);
    font-size: 0.74rem;
}

:root[data-theme="dark"] .hero-day-ticker {
    background:
        linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(15, 23, 42, 0.38));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .hero-day-ticker-bar {
    background: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .hero-day-ticker {
        background:
            linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(15, 23, 42, 0.38));
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
    }

    :root[data-theme="auto"] .hero-day-ticker-bar {
        background: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 680px) {
    .hero-day-ticker {
        padding: 11px 12px;
        border-radius: 16px;
    }

    .hero-day-ticker-main {
        font-size: 0.84rem;
    }
}

/* Poolbaas Live hero: statistieken als 2x2 blok, ticker rechtsonder */
.hero-dashboard .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.hero-dashboard .hero-stats > div {
    min-height: 86px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.hero-dashboard .hero-stats > div strong {
    line-height: 1 !important;
}

.hero-stat-ticker {
    position: relative;
}

.hero-stat-ticker strong {
    color: var(--poolbaas-purple, #7c3aed) !important;
}

.hero-stat-ticker::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--poolbaas-purple, #7c3aed);
    opacity: 0.65;
}

@media (max-width: 680px) {
    .hero-dashboard .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-dashboard .hero-stats > div {
        min-height: 76px !important;
    }
}

/* Poolbaas Live hero: rechterkolom met 3 stats + ticker eronder */
.hero-side-panel {
    display: grid;
    gap: 12px;
    align-self: stretch;
}

.hero-dashboard .hero-side-panel .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.hero-dashboard .hero-side-panel .hero-stats > div {
    min-height: 86px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.hero-prediction-ticker {
    min-height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid transparent;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}

.hero-prediction-ticker strong {
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.hero-prediction-ticker span {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-prediction-ticker.is-incomplete {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(248, 113, 113, 0.08));
    border-color: rgba(239, 68, 68, 0.38);
}

.hero-prediction-ticker.is-incomplete strong,
.hero-prediction-ticker.is-incomplete span {
    color: #dc2626;
}

.hero-prediction-ticker.is-complete {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(74, 222, 128, 0.08));
    border-color: rgba(34, 197, 94, 0.42);
}

.hero-prediction-ticker.is-complete strong,
.hero-prediction-ticker.is-complete span {
    color: #16a34a;
}

:root[data-theme="dark"] .hero-prediction-ticker.is-incomplete strong,
:root[data-theme="dark"] .hero-prediction-ticker.is-incomplete span {
    color: #fca5a5;
}

:root[data-theme="dark"] .hero-prediction-ticker.is-complete strong,
:root[data-theme="dark"] .hero-prediction-ticker.is-complete span {
    color: #86efac;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .hero-prediction-ticker.is-incomplete strong,
    :root[data-theme="auto"] .hero-prediction-ticker.is-incomplete span {
        color: #fca5a5;
    }

    :root[data-theme="auto"] .hero-prediction-ticker.is-complete strong,
    :root[data-theme="auto"] .hero-prediction-ticker.is-complete span {
        color: #86efac;
    }
}

@media (max-width: 680px) {
    .hero-dashboard .hero-side-panel .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .hero-dashboard .hero-side-panel .hero-stats > div {
        min-height: 72px !important;
    }

    .hero-prediction-ticker {
        min-height: 62px;
        border-radius: 16px;
    }
}

/* FINAL FIX: Poolbaas Live hero met 3 stats + ticker eronder */
.hero-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important;
    gap: 28px !important;
    align-items: center !important;
}

.hero-side-panel {
    display: grid !important;
    gap: 12px !important;
    align-self: center !important;
}

.hero-dashboard .hero-side-panel .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.hero-dashboard .hero-side-panel .hero-stats > div {
    min-height: 86px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.hero-dashboard .hero-side-panel .hero-stats > div strong {
    line-height: 1 !important;
}

.hero-prediction-ticker {
    min-height: 68px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10) !important;
}

.hero-prediction-ticker strong {
    font-size: clamp(1.45rem, 3vw, 2rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
}

.hero-prediction-ticker span {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.hero-prediction-ticker.is-incomplete {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(248, 113, 113, 0.08)) !important;
    border-color: rgba(239, 68, 68, 0.42) !important;
}

.hero-prediction-ticker.is-incomplete strong,
.hero-prediction-ticker.is-incomplete span {
    color: #dc2626 !important;
}

.hero-prediction-ticker.is-complete {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.20), rgba(74, 222, 128, 0.08)) !important;
    border-color: rgba(34, 197, 94, 0.46) !important;
}

.hero-prediction-ticker.is-complete strong,
.hero-prediction-ticker.is-complete span {
    color: #16a34a !important;
}

@media (max-width: 920px) {
    .hero-dashboard {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 680px) {
    .hero-dashboard .hero-side-panel .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .hero-dashboard .hero-side-panel .hero-stats > div {
        min-height: 72px !important;
    }

    .hero-prediction-ticker {
        min-height: 62px !important;
        border-radius: 16px !important;
    }
}

/* Mijn voorspellingen: speeldagstatus */
.my-day-status-card {
    margin: 0 0 22px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid transparent;
}

.my-day-status-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.my-day-status-main h2 {
    margin: 4px 0 6px;
}

.my-day-status-main p {
    margin: 0;
    color: var(--muted);
}

.my-day-status-score {
    min-width: 108px;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.58);
}

.my-day-status-score strong {
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.my-day-status-score span {
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.my-day-status-card.is-incomplete {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(248, 113, 113, 0.07));
    border-color: rgba(239, 68, 68, 0.38);
}

.my-day-status-card.is-incomplete .my-day-status-score,
.my-day-status-card.is-incomplete .my-day-status-score strong,
.my-day-status-card.is-incomplete h2 {
    color: #dc2626;
}

.my-day-status-card.is-complete {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.17), rgba(74, 222, 128, 0.07));
    border-color: rgba(34, 197, 94, 0.42);
}

.my-day-status-card.is-complete .my-day-status-score,
.my-day-status-card.is-complete .my-day-status-score strong,
.my-day-status-card.is-complete h2 {
    color: #16a34a;
}

.my-day-status-card.is-empty {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(255, 255, 255, 0.06));
    border-color: rgba(124, 58, 237, 0.25);
}

.my-day-missing {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.my-day-missing-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.my-day-missing-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    color: inherit;
}

.my-day-missing-list a:hover {
    transform: translateY(-1px);
}

.my-day-missing-list small {
    color: var(--muted);
    white-space: nowrap;
}

:root[data-theme="dark"] .my-day-status-score,
:root[data-theme="dark"] .my-day-missing-list a {
    background: rgba(15, 23, 42, 0.42);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .my-day-status-score,
    :root[data-theme="auto"] .my-day-missing-list a {
        background: rgba(15, 23, 42, 0.42);
    }
}

@media (max-width: 680px) {
    .my-day-status-card {
        padding: 16px;
        border-radius: 20px;
    }

    .my-day-status-main {
        align-items: stretch;
        flex-direction: column;
    }

    .my-day-status-score {
        width: 100%;
        min-height: 72px;
    }

    .my-day-missing-list a {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* Admin: voorspellingen invullen voor deelnemers */
.admin-prediction-toolbar {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.admin-participant-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-participant-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.84rem;
}

.admin-participant-tabs a.active {
    background: var(--poolbaas-purple, #7c3aed);
    color: #fff;
    border-color: var(--poolbaas-purple, #7c3aed);
}

.admin-prediction-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.admin-prediction-summary > div {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
    text-align: center;
}

.admin-prediction-summary strong {
    font-size: 1.8rem;
    line-height: 1;
}

.admin-prediction-summary span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-override-warning {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    border-color: rgba(245, 158, 11, 0.42) !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(251, 191, 36, 0.06)) !important;
}

.admin-override-warning strong {
    color: #d97706;
}

.admin-prediction-list {
    display: grid;
    gap: 12px;
}

.admin-prediction-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto auto;
    align-items: center;
    gap: 16px;
}

.admin-prediction-match {
    display: grid;
    gap: 4px;
}

.admin-prediction-match small {
    color: var(--muted);
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.admin-badge.is-open {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.14);
}

.admin-badge.is-closed {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.13);
}

.admin-badge.is-played {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.13);
}

.admin-prediction-inputs {
    display: grid;
    grid-template-columns: 48px 14px 48px auto;
    align-items: center;
    gap: 8px;
}

.admin-prediction-inputs input {
    width: 48px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    text-align: center;
    font-weight: 900;
}

.admin-prediction-inputs span {
    text-align: center;
    color: var(--muted);
}

:root[data-theme="dark"] .admin-prediction-summary > div {
    background: rgba(15, 23, 42, 0.42);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .admin-prediction-summary > div {
        background: rgba(15, 23, 42, 0.42);
    }
}

@media (max-width: 900px) {
    .admin-prediction-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-prediction-status {
        justify-self: start;
    }

    .admin-prediction-inputs {
        justify-content: start;
    }
}

@media (max-width: 560px) {
    .admin-prediction-summary {
        grid-template-columns: 1fr;
    }

    .admin-prediction-inputs {
        grid-template-columns: 46px 12px 46px auto;
    }
}

/* Tijdelijk: dark mode uitgeschakeld */
.theme-toggle,
button.theme-toggle,
[data-theme-toggle] {
    display: none !important;
}

/* Tour de France aankondigingsbalk */
.site-announcement-bar {
    width: 100%;
    background: #ffd400;
    color: #050505;
    border-bottom: 2px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    position: relative;
    z-index: 80;
}

.site-announcement-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 18px;
    text-align: center;
    font-size: clamp(0.82rem, 2vw, 0.98rem);
    font-weight: 950;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: #050505;
}

@media (max-width: 680px) {
    .site-announcement-inner {
        padding: 9px 14px;
        font-size: 0.78rem;
    }
}

/* Tour de France balk blijft bovenaan plakken tijdens scrollen */
.site-announcement-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

.site-announcement-inner {
    user-select: none;
}



/* Scroll spacing tussen Tour balk en hoofdmenu */
.site-announcement-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    margin-bottom: 0 !important;
}

/*
   De gele balk is ongeveer 42px hoog.
   De normale topbar blijft daardoor tijdens scrollen netjes eronder hangen,
   met extra ruimte ertussen.
*/
.site-header {
    position: sticky !important;
    top: 49px !important;
    z-index: 9990 !important;
}

@media (max-width: 680px) {
    .site-header {
        top: 47px !important;
    }
}

/* Final: geen gat tussen Tour-balk en normale topbar tijdens scrollen */
.site-announcement-bar {
    margin-bottom: 0 !important;
}

.site-header {
    top: 43px !important;
}

@media (max-width: 680px) {
    .site-header {
        top: 38px !important;
    }
}

/* Final: geen gat tussen Tour-balk en normale topbar tijdens scrollen */
.site-announcement-bar {
    margin-bottom: 0 !important;
}

.site-header {
    top: 43px !important;
}

@media (max-width: 680px) {
    .site-header {
        top: 38px !important;
    }
}

/* Wedstrijdkaart */
.mini-match.card[data-href] {
    cursor: pointer;
}

.mini-match.card[data-href]:hover {
    transform: translateY(-2px);
}

.match-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px;
}

.match-detail-team {
    display: grid;
    gap: 6px;
}

.match-detail-team.away {
    text-align: right;
}

.match-detail-team span,
.match-detail-score span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.match-detail-team strong {
    font-size: clamp(1.45rem, 4vw, 2.45rem);
    line-height: 1.04;
    letter-spacing: -0.05em;
}

.match-detail-score {
    min-width: 132px;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.70);
    text-align: center;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.match-detail-score strong {
    font-size: clamp(2rem, 5vw, 3.35rem);
    line-height: 1;
    letter-spacing: -0.08em;
}

.match-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 18px;
}

.section-title.compact {
    margin-bottom: 14px;
}

.live-stat-list {
    display: grid;
    gap: 10px;
}

.live-stat-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
}

.live-stat-list span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.live-stat-list strong {
    text-align: right;
}

.match-detail-note {
    margin: 14px 0 0;
    font-size: 0.9rem;
}

.match-prediction-list {
    display: grid;
    gap: 9px;
}

.match-prediction-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
}

.match-prediction-row span {
    min-width: 54px;
    text-align: center;
    font-weight: 950;
}

.match-prediction-row em {
    min-width: 46px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--poolbaas-purple, #7c3aed);
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 950;
    text-align: center;
}

.match-prediction-row.is-empty {
    opacity: 0.68;
}

.prediction-locked-message {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 212, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.10);
}

.prediction-locked-message p {
    margin: 0;
    color: var(--muted);
}

.viewer-own-prediction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.65);
}

.viewer-own-prediction span {
    color: var(--muted);
    font-weight: 850;
}

.viewer-own-prediction strong {
    font-size: 1.25rem;
}

@media (max-width: 820px) {
    .match-detail-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .match-detail-team,
    .match-detail-team.away {
        text-align: center;
    }

    .match-detail-score {
        width: 100%;
        min-height: 86px;
        order: 2;
    }

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

    .match-prediction-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .match-prediction-row em {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 520px) {
    .match-detail-hero {
        padding: 18px;
        border-radius: 22px;
    }

    .match-detail-team strong {
        font-size: 1.55rem;
    }

    .live-stat-list > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .live-stat-list strong {
        text-align: left;
    }
}

/* Wedstrijdkaart: Live en Voorspellingen rustiger, zonder dubbele omlijning */
.match-live-card,
.match-predictions-card {
    border: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.42) !important;
}

.match-live-card .section-title,
.match-predictions-card .section-title {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.live-stat-list > div,
.match-prediction-row,
.viewer-own-prediction {
    border: 0 !important;
    box-shadow: none !important;
}

/* Homepage: live score in Komende duels */
.mini-match-teams-with-score {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
}

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

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

.mini-match-live-score {
    min-width: 58px;
    min-height: 48px;
    padding: 6px 9px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.mini-match-live-score:hover {
    transform: translateY(-1px);
}

.mini-match-score-value {
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.04em;
}

.mini-match-score-label {
    font-size: 0.58rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

@media (max-width: 680px) {
    .mini-match-teams-with-score {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 7px !important;
    }

    .mini-match-teams-with-score strong:first-child,
    .mini-match-teams-with-score strong:last-child {
        text-align: center !important;
    }

    .mini-match-live-score {
        justify-self: center;
        min-width: 70px;
        min-height: 44px;
    }
}

/* Fix: wedstrijdkaart Live en Voorspellingen één nette omlijning */
.match-detail-grid > .match-live-card,
.match-detail-grid > .match-predictions-card {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

.match-live-card .section-title,
.match-predictions-card .section-title {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Fix: homepage scoreblok in wedstrijdkaarten */
.mini-match .teams {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
}

.mini-match .teams > strong:first-child {
    text-align: right !important;
}

.mini-match .teams > strong:last-child {
    text-align: left !important;
}

.mini-match-live-score {
    min-width: 64px !important;
    min-height: 48px !important;
    padding: 6px 9px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: #111827 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.mini-match-live-score:hover {
    transform: translateY(-1px);
}

.mini-match-score-value {
    font-size: 1.08rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
}

.mini-match-score-label {
    font-size: 0.58rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #6b7280 !important;
}

@media (max-width: 680px) {
    .mini-match .teams {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 7px !important;
    }

    .mini-match .teams > strong:first-child,
    .mini-match .teams > strong:last-child {
        text-align: center !important;
    }

    .mini-match-live-score {
        justify-self: center !important;
        min-width: 74px !important;
        min-height: 44px !important;
    }
}

/* Final: wedstrijdkaart blokken duidelijk omlijnd */
.match-detail-grid > .match-live-card,
.match-detail-grid > .match-predictions-card {
    border: 1.5px solid rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border-radius: 24px !important;
}

.match-detail-grid > .match-live-card .section-title,
.match-detail-grid > .match-predictions-card .section-title {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hero score extra duidelijk */
.match-detail-score {
    border: 1.5px solid rgba(15, 23, 42, 0.16) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14) !important;
}

.match-detail-score strong {
    color: #111827 !important;
}

.match-detail-score span {
    color: #6b7280 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

/* Final fix: wedstrijdkaart Live/Voorspellingen in Poolbaas kaartstijl */
.match-detail-grid > .match-live-card,
.match-detail-grid > .match-predictions-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1.5px solid transparent !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72)) padding-box,
        linear-gradient(135deg, #dc2626 0%, #ffffff 45%, #2563eb 100%) border-box !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10) !important;
}

/* Geen extra binnenrand rond titels */
.match-detail-grid > .match-live-card .section-title,
.match-detail-grid > .match-predictions-card .section-title {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Binnenregels rustig houden */
.match-detail-grid .live-stat-list > div,
.match-detail-grid .match-prediction-row,
.match-detail-grid .viewer-own-prediction {
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: none !important;
}

/* Hero-score ook dezelfde Poolbaas-rand geven */
.match-detail-score {
    border: 1.5px solid transparent !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76)) padding-box,
        linear-gradient(135deg, #dc2626 0%, #ffffff 45%, #2563eb 100%) border-box !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13) !important;
}

/* Homepage: jouw voorspelling onder live score */
.mini-match-user-prediction-inline {
    display: block !important;
    margin-top: 3px !important;
    padding-top: 3px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.10) !important;
    font-size: 0.66rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    color: #111827 !important;
    white-space: nowrap !important;
}

.mini-match-live-score {
    min-height: 58px !important;
}

@media (max-width: 680px) {
    .mini-match-live-score {
        min-height: 54px !important;
    }

    .mini-match-user-prediction-inline {
        font-size: 0.64rem !important;
    }
}

/* Klassement: ranking-cijfers netjes centreren zoals de wereldbeker */
.leader-rank {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.leader-rank:not(:has(.leader-trophy-icon)) {
    font-weight: 950 !important;
}

/* Wedstrijdkaart: projected punten */
.match-projected-points-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1.5px solid transparent !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72)) padding-box,
        linear-gradient(135deg, #dc2626 0%, #ffffff 45%, #2563eb 100%) border-box !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10) !important;
}

.match-projected-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.match-projected-score strong {
    font-size: 1.65rem;
    line-height: 1;
    letter-spacing: -0.06em;
}

.match-projected-score span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Homepage: live klassement */
.live-leaderboard-section {
    margin-top: 24px;
}

.live-leaderboard-grid {
    display: grid;
    gap: 10px;
}

.live-leader-row {
    display: grid;
    grid-template-columns: 44px 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    border: 1.5px solid transparent !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72)) padding-box,
        linear-gradient(135deg, #dc2626 0%, #ffffff 45%, #2563eb 100%) border-box !important;
}

.live-leader-row.is-first {
    background:
        linear-gradient(180deg, rgba(255, 248, 190, 0.92), rgba(255, 255, 255, 0.78)) padding-box,
        linear-gradient(135deg, #facc15 0%, #ffffff 45%, #7c3aed 100%) border-box !important;
}

@media (max-width: 680px) {
    .live-leader-row {
        grid-template-columns: 38px 38px minmax(0, 1fr) auto;
        gap: 9px;
    }

    .match-projected-score {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Final polish: wedstrijdkaart layout + geen dubbele omlijning */
.match-detail-grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.match-detail-grid > .match-live-card {
    grid-row: span 2 !important;
}

.match-detail-grid > .match-live-card,
.match-detail-grid > .match-projected-points-card,
.match-detail-grid > .match-predictions-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 20px !important;
    border: 1.5px solid transparent !important;
    border-radius: 26px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)) padding-box,
        linear-gradient(135deg, #dc2626 0%, rgba(255,255,255,0.95) 48%, #2563eb 100%) border-box !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
}

/* Geen dubbele rand rond headings */
.match-detail-grid > .match-live-card .section-title,
.match-detail-grid > .match-projected-points-card .section-title,
.match-detail-grid > .match-predictions-card .section-title {
    margin-bottom: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Binnenregels: zachte vlakken zonder extra harde omlijning */
.match-detail-grid .live-stat-list > div,
.match-detail-grid .match-prediction-row,
.match-detail-grid .viewer-own-prediction {
    border: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border-radius: 16px !important;
}

/* Live statistieken mooier uitlijnen */
.match-detail-grid .live-stat-list > div {
    padding: 12px 13px !important;
}

.match-detail-grid .live-stat-list span {
    font-weight: 850 !important;
}

.match-detail-grid .live-stat-list strong {
    font-weight: 950 !important;
}

/* Projected punten scoreblok netter */
.match-projected-score {
    margin-bottom: 13px !important;
    padding: 13px 14px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255, 212, 0, 0.22), rgba(255, 255, 255, 0.68)) !important;
    box-shadow: none !important;
}

.match-projected-score strong {
    font-size: 1.85rem !important;
    color: #111827 !important;
}

.match-projected-score span {
    color: #6b7280 !important;
}

/* Voorspellingrijen rustiger */
.match-detail-grid .match-prediction-list {
    gap: 8px !important;
}

.match-detail-grid .match-prediction-row {
    min-height: 46px !important;
    padding: 10px 12px !important;
    grid-template-columns: minmax(0, 1fr) 58px 54px !important;
}

.match-detail-grid .match-prediction-row strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.match-detail-grid .match-prediction-row span {
    min-width: 52px !important;
}

.match-detail-grid .match-prediction-row em {
    min-width: 48px !important;
    border: 0 !important;
    background: rgba(124, 58, 237, 0.13) !important;
    color: #7c3aed !important;
}

/* Lege voorspellingen iets subtieler */
.match-detail-grid .match-prediction-row.is-empty {
    opacity: 0.72 !important;
}

/* Mobile: alles onder elkaar */
@media (max-width: 880px) {
    .match-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .match-detail-grid > .match-live-card {
        grid-row: auto !important;
    }
}

@media (max-width: 520px) {
    .match-detail-grid > .match-live-card,
    .match-detail-grid > .match-projected-points-card,
    .match-detail-grid > .match-predictions-card {
        padding: 16px !important;
        border-radius: 22px !important;
    }

    .match-detail-grid .match-prediction-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    .match-detail-grid .match-prediction-row em {
        grid-column: 1 / -1 !important;
        justify-self: end !important;
    }
}

/* Projected punten: duidelijke tussenstand + kolomkoppen */
.match-projected-score {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 5px !important;
    margin-bottom: 14px !important;
    padding: 15px 16px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background:
        linear-gradient(135deg, rgba(255, 212, 0, 0.26), rgba(255, 255, 255, 0.74)) !important;
    box-shadow: none !important;
}

.match-projected-score-kicker,
.match-projected-score-sub {
    font-size: 0.68rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #6b7280 !important;
}

.match-projected-score strong {
    font-size: 2.1rem !important;
    line-height: 1 !important;
    letter-spacing: -0.07em !important;
    color: #111827 !important;
}

.match-projected-table-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 54px !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 7px 0 !important;
    padding: 0 12px !important;
    color: #6b7280 !important;
    font-size: 0.64rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.match-projected-table-head span:nth-child(2),
.match-projected-table-head span:nth-child(3) {
    text-align: center !important;
}

@media (max-width: 520px) {
    .match-projected-table-head {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .match-projected-table-head span:nth-child(3) {
        display: none !important;
    }
}

/* Topbar: badge voor nog in te vullen voorspellingen */
.topbar-missing-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    margin-left: 7px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    vertical-align: middle !important;
}

@media (max-width: 680px) {
    .topbar-missing-badge {
        min-width: 21px !important;
        height: 21px !important;
        font-size: 0.68rem !important;
    }
}

/* Admin: ontbrekende voorspellingen overzicht */
.admin-missing-overview {
    position: relative !important;
    overflow: hidden !important;
    border: 1.5px solid transparent !important;
    border-radius: 26px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)) padding-box,
        linear-gradient(135deg, #dc2626 0%, rgba(255,255,255,0.95) 48%, #2563eb 100%) border-box !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
    margin-bottom: 18px !important;
}

.admin-missing-overview-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.admin-missing-overview-head h2 {
    margin: 2px 0 4px !important;
}

.admin-missing-total {
    min-width: 74px !important;
    min-height: 74px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

.admin-missing-total strong {
    font-size: 1.9rem !important;
    line-height: 1 !important;
}

.admin-missing-total span {
    font-size: 0.68rem !important;
    font-weight: 950 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.admin-missing-total.has-missing strong {
    color: #dc2626 !important;
}

.admin-missing-total.is-complete strong {
    color: #16a34a !important;
}

.admin-missing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 10px !important;
}

.admin-missing-card {
    display: grid !important;
    gap: 9px !important;
    padding: 13px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.66) !important;
}

.admin-missing-card.has-missing {
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.16) !important;
}

.admin-missing-card.is-complete {
    opacity: 0.78 !important;
}

.admin-missing-card strong {
    display: block !important;
}

.admin-missing-card small {
    color: #6b7280 !important;
    font-weight: 800 !important;
}

.admin-missing-count {
    width: fit-content !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    background: rgba(124, 58, 237, 0.12) !important;
    color: #7c3aed !important;
}

.admin-missing-card.has-missing .admin-missing-count {
    background: rgba(220, 38, 38, 0.13) !important;
    color: #dc2626 !important;
}

.admin-missing-card ul {
    margin: 0 !important;
    padding-left: 18px !important;
    color: #6b7280 !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

.admin-filter-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

.admin-prediction-toolbar {
    display: grid !important;
    grid-template-columns: minmax(180px, auto) 1fr auto !important;
    gap: 14px !important;
    align-items: center !important;
}

.admin-prediction-toolbar small {
    display: block !important;
    margin-top: 3px !important;
}

@media (max-width: 880px) {
    .admin-prediction-toolbar {
        grid-template-columns: 1fr !important;
    }

    .admin-filter-actions {
        justify-content: flex-start !important;
    }

    .admin-missing-overview-head {
        flex-direction: column !important;
    }
}

/* =========================================================
   FINAL POLISH: Admin voorspellingen pagina
   ========================================================= */

/* Algemene spacing op adminpagina */
.admin-missing-overview,
.admin-prediction-toolbar,
.admin-prediction-summary,
.admin-override-warning {
    margin-bottom: 18px !important;
}

/* Admin controlekaart: rustiger en strak */
.admin-missing-overview {
    padding: 22px !important;
}

.admin-missing-overview-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.admin-missing-overview-head h2 {
    margin: 3px 0 5px !important;
    line-height: 1.05 !important;
}

.admin-missing-overview-head .muted {
    margin: 0 !important;
}

/* Grote teller rechtsboven */
.admin-missing-total {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.68)) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
}

.admin-missing-total strong {
    font-size: 2rem !important;
}

/* Deelnemer-overzicht: gelijke kaarten */
.admin-missing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.admin-missing-card {
    min-height: 150px !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 15px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07) !important;
}

.admin-missing-card > div:first-child {
    min-width: 0 !important;
}

.admin-missing-card strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.admin-missing-card small {
    display: block !important;
    margin-top: 2px !important;
}

.admin-missing-count {
    justify-self: start !important;
}

.admin-missing-card ul {
    min-height: 34px !important;
    margin: 0 !important;
    padding-left: 17px !important;
}

.admin-missing-card li {
    margin-bottom: 3px !important;
}

.admin-missing-card .button {
    justify-self: start !important;
    align-self: end !important;
}

/* Deelnemer-toolbar: niet meer alles op één rommelige regel */
.admin-prediction-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    grid-template-areas:
        "selected tabs"
        "actions actions" !important;
    align-items: start !important;
    gap: 16px !important;
    padding: 20px !important;
}

.admin-prediction-toolbar > div:first-child {
    grid-area: selected !important;
    min-width: 0 !important;
}

.admin-prediction-toolbar > div:first-child strong {
    display: block !important;
    font-size: 1.15rem !important;
    line-height: 1.1 !important;
    margin-top: 3px !important;
}

.admin-prediction-toolbar > div:first-child small {
    margin-top: 7px !important;
    line-height: 1.3 !important;
}

/* Deelnemer tabs netjes als pills */
.admin-participant-tabs {
    grid-area: tabs !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.admin-participant-tabs a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #111827 !important;
    text-decoration: none !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
}

.admin-participant-tabs a.active {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22) !important;
}

/* Filterknoppen over de hele breedte, rechts uitgelijnd */
.admin-filter-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    padding-top: 4px !important;
}

/* Samenvatting: drie gelijke vakken */
.admin-prediction-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
}

.admin-prediction-summary > div {
    min-height: 82px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07) !important;
}

.admin-prediction-summary strong {
    font-size: 1.8rem !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
}

.admin-prediction-summary span {
    margin-top: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

/* Waarschuwing compacter */
.admin-override-warning {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 16px !important;
    border-radius: 18px !important;
    background: rgba(255, 248, 190, 0.58) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.16) !important;
}

.admin-override-warning strong {
    color: #92400e !important;
}

.admin-override-warning span {
    color: #78350f !important;
    line-height: 1.35 !important;
}

/* Lijst met voorspellingen */
.admin-prediction-list {
    display: grid !important;
    gap: 12px !important;
}

/* Elke rij strak: wedstrijd | status | inputs */
.admin-prediction-row {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 150px auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    min-height: 92px !important;
}

.admin-prediction-match {
    min-width: 0 !important;
}

.admin-prediction-match strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
    margin: 3px 0 4px !important;
}

.admin-prediction-match small {
    display: block !important;
    color: #6b7280 !important;
    font-weight: 800 !important;
}

/* Statusbadge altijd dezelfde breedte */
.admin-prediction-status {
    display: flex !important;
    justify-content: center !important;
}

.admin-badge {
    min-width: 124px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
}

.admin-badge.is-open {
    background: rgba(22, 163, 74, 0.13) !important;
    color: #15803d !important;
}

.admin-badge.is-closed {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}

.admin-badge.is-played {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #1d4ed8 !important;
}

/* Inputs exact uitlijnen */
.admin-prediction-inputs {
    display: grid !important;
    grid-template-columns: 48px 14px 48px auto !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 7px !important;
}

.admin-prediction-inputs input {
    width: 48px !important;
    height: 42px !important;
    padding: 0 !important;
    text-align: center !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
}

.admin-prediction-inputs > span {
    text-align: center !important;
    font-weight: 950 !important;
    color: #6b7280 !important;
}

.admin-prediction-inputs .button {
    min-height: 42px !important;
    padding-inline: 13px !important;
}

/* Empty state mooier */
.empty.card {
    text-align: center !important;
    padding: 34px 22px !important;
    border-radius: 24px !important;
}

/* Tablet */
@media (max-width: 980px) {
    .admin-prediction-toolbar {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "selected"
            "tabs"
            "actions" !important;
    }

    .admin-participant-tabs,
    .admin-filter-actions {
        justify-content: flex-start !important;
    }

    .admin-prediction-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "match status"
            "inputs inputs" !important;
    }

    .admin-prediction-match {
        grid-area: match !important;
    }

    .admin-prediction-status {
        grid-area: status !important;
        justify-content: flex-end !important;
    }

    .admin-prediction-inputs {
        grid-area: inputs !important;
        justify-content: start !important;
    }
}

/* Mobiel */
@media (max-width: 640px) {
    .admin-missing-overview-head {
        grid-template-columns: 1fr !important;
    }

    .admin-missing-total {
        width: 100% !important;
        height: auto !important;
        min-height: 72px !important;
    }

    .admin-prediction-summary {
        grid-template-columns: 1fr !important;
    }

    .admin-prediction-row {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "match"
            "status"
            "inputs" !important;
        gap: 12px !important;
    }

    .admin-prediction-status {
        justify-content: flex-start !important;
    }

    .admin-prediction-inputs {
        grid-template-columns: 52px 14px 52px minmax(92px, auto) !important;
        width: 100% !important;
    }

    .admin-prediction-inputs .button {
        justify-self: stretch !important;
    }

    .admin-participant-tabs a {
        flex: 1 1 auto !important;
    }
}

/* Auth-knop helemaal rechts in de topbar */
.main-nav .nav-auth-link {
    margin-left: auto;
}

/* Snelle mobiele voorspelmodus */
.page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.quick-predict-page {
    max-width: 760px;
    margin: 0 auto;
}

.quick-predict-heading {
    margin-bottom: 22px;
}

.quick-predict-card {
    padding: 22px;
    border-radius: 28px;
    overflow: hidden;
}

.quick-progress {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    text-align: center;
}

.quick-progress strong {
    color: var(--text-strong);
    font-size: 1.1rem;
    font-weight: 950;
}

.quick-progress small {
    color: var(--muted);
    font-weight: 800;
}

.quick-progress-bar {
    position: relative;
    z-index: 2;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.56);
    margin-bottom: 22px;
}

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

.quick-predict-form {
    position: relative;
    z-index: 2;
}

.quick-match-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 850;
}

.quick-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 18px;
}

.quick-team {
    display: grid;
    gap: 12px;
    text-align: center;
}

.quick-team span {
    color: var(--text-strong);
    font-size: clamp(1.35rem, 4vw, 2.2rem);
    font-weight: 950;
    letter-spacing: -0.05em;
}

.quick-team input {
    width: 100%;
    min-height: 82px;
    border-radius: 22px;
    text-align: center;
    font-size: clamp(2.1rem, 8vw, 3.4rem);
    font-weight: 950;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(8px);
}

.quick-vs {
    padding-bottom: 22px;
    color: var(--muted);
    font-size: 2rem;
    font-weight: 950;
}

.quick-city {
    margin: 18px 0 0;
    text-align: center;
}

.quick-actions {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.quick-submit {
    width: 100%;
    min-height: 54px;
    font-size: 1rem;
}

.quick-secondary-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.quick-secondary-actions a {
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
}

:root[data-theme="dark"] .quick-predict-card,
:root[data-theme="dark"] .quick-predict-card h1,
:root[data-theme="dark"] .quick-predict-card h2,
:root[data-theme="dark"] .quick-team span,
:root[data-theme="dark"] .quick-secondary-actions a {
    color: #0f172a;
}

:root[data-theme="dark"] .quick-match-meta,
:root[data-theme="dark"] .quick-progress small {
    color: #475569;
}

:root[data-theme="dark"] .quick-team input {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.88);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .quick-predict-card,
    :root[data-theme="auto"] .quick-predict-card h1,
    :root[data-theme="auto"] .quick-predict-card h2,
    :root[data-theme="auto"] .quick-team span,
    :root[data-theme="auto"] .quick-secondary-actions a {
        color: #0f172a;
    }

    :root[data-theme="auto"] .quick-match-meta,
    :root[data-theme="auto"] .quick-progress small {
        color: #475569;
    }

    :root[data-theme="auto"] .quick-team input {
        color: #0f172a;
        background: rgba(255, 255, 255, 0.88);
    }
}

@media (max-width: 680px) {
    .page-heading-actions {
        width: 100%;
        justify-content: stretch;
    }

    .page-heading-actions .button {
        flex: 1 1 100%;
    }

    .quick-predict-card {
        padding: 17px;
        border-radius: 22px;
    }

    .quick-match-meta {
        align-items: center;
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .quick-teams {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .quick-vs {
        padding: 0;
        line-height: 1;
    }

    .quick-team input {
        min-height: 76px;
    }
}

/* Quick predict: Scorito-achtige scorepicker */
.quick-score-picker {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 18px;
}

.quick-team-names {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    text-align: center;
}

.quick-team-names strong {
    color: var(--text-strong);
    font-size: clamp(1.15rem, 4vw, 1.8rem);
    font-weight: 950;
    letter-spacing: -0.05em;
}

.quick-team-names span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quick-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.quick-score-option {
    min-height: 50px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--text-strong);
    font-size: 1.1rem;
    font-weight: 950;
    cursor: pointer;
    box-shadow: none;
}

.quick-score-option:hover,
.quick-score-option.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.quick-custom-score {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(124, 58, 237, 0.26);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
}

.quick-custom-score label {
    display: grid;
    gap: 8px;
    text-align: center;
}

.quick-custom-score label span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.quick-custom-score input {
    width: 100%;
    min-height: 68px;
    border-radius: 18px;
    text-align: center;
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 950;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.quick-custom-separator {
    padding-bottom: 15px;
    color: var(--muted);
    font-size: 2rem;
    font-weight: 950;
}

:root[data-theme="dark"] .quick-team-names strong,
:root[data-theme="dark"] .quick-score-option,
:root[data-theme="dark"] .quick-custom-score input {
    color: #0f172a;
}

:root[data-theme="dark"] .quick-score-option.is-selected,
:root[data-theme="dark"] .quick-score-option:hover {
    color: #fff;
}

:root[data-theme="dark"] .quick-custom-score,
:root[data-theme="dark"] .quick-score-option {
    background: rgba(255, 255, 255, 0.70);
}

:root[data-theme="dark"] .quick-team-names span,
:root[data-theme="dark"] .quick-custom-score label span {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .quick-team-names strong,
    :root[data-theme="auto"] .quick-score-option,
    :root[data-theme="auto"] .quick-custom-score input {
        color: #0f172a;
    }

    :root[data-theme="auto"] .quick-score-option.is-selected,
    :root[data-theme="auto"] .quick-score-option:hover {
        color: #fff;
    }

    :root[data-theme="auto"] .quick-custom-score,
    :root[data-theme="auto"] .quick-score-option {
        background: rgba(255, 255, 255, 0.70);
    }

    :root[data-theme="auto"] .quick-team-names span,
    :root[data-theme="auto"] .quick-custom-score label span {
        color: #475569;
    }
}

@media (max-width: 680px) {
    .quick-score-grid {
        gap: 8px;
    }

    .quick-score-option {
        min-height: 48px;
        border-radius: 15px;
        font-size: 1.05rem;
    }

    .quick-custom-score {
        padding: 12px;
        gap: 10px;
    }

    .quick-custom-score input {
        min-height: 64px;
    }
}

/* Quick predict: klein handmatig scoreveld onderaan */
.quick-custom-score-small {
    display: grid;
    grid-template-columns: 1fr 52px auto 52px auto;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.52);
}

.quick-custom-score-small span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.quick-custom-score-small input {
    width: 52px;
    min-height: 42px;
    padding: 0;
    border-radius: 12px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 950;
    background: rgba(255, 255, 255, 0.92);
}

.quick-custom-score-small strong {
    color: var(--muted);
    font-size: 1.2rem;
    font-weight: 950;
}

.quick-custom-score-small .button {
    min-height: 42px;
    padding: 0 12px;
}

:root[data-theme="dark"] .quick-custom-score-small {
    background: rgba(255, 255, 255, 0.70);
}

:root[data-theme="dark"] .quick-custom-score-small input {
    color: #0f172a;
}

:root[data-theme="dark"] .quick-custom-score-small span,
:root[data-theme="dark"] .quick-custom-score-small strong {
    color: #475569;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .quick-custom-score-small {
        background: rgba(255, 255, 255, 0.70);
    }

    :root[data-theme="auto"] .quick-custom-score-small input {
        color: #0f172a;
    }

    :root[data-theme="auto"] .quick-custom-score-small span,
    :root[data-theme="auto"] .quick-custom-score-small strong {
        color: #475569;
    }
}

@media (max-width: 680px) {
    .quick-custom-score-small {
        grid-template-columns: 1fr 44px auto 44px;
        gap: 7px;
    }

    .quick-custom-score-small span {
        grid-column: 1 / -1;
        text-align: center;
    }

    .quick-custom-score-small input {
        width: 44px;
        min-height: 40px;
    }

    .quick-custom-score-small .button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 2px;
    }
}

/* FORCE FIX: snelle voorspelmodus scorekolommen altijd naast elkaar */
.quick-score-picker .quick-score-columns {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

.quick-score-picker .quick-score-column {
    display: grid !important;
    grid-auto-flow: row !important;
    align-content: start !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.quick-score-picker .quick-score-column-title {
    min-height: 46px !important;
    padding: 6px 5px !important;
    border-radius: 13px !important;
}

.quick-score-picker .quick-score-column-title strong {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 0.72rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.quick-score-picker .quick-score-column-title span {
    font-size: 0.58rem !important;
}

.quick-score-picker .quick-score-option {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 4px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
}

.quick-score-picker .quick-custom-score-small {
    display: grid !important;
    grid-template-columns: 1fr 42px auto 42px auto !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 12px !important;
}

.quick-score-picker .quick-custom-score-small input {
    width: 42px !important;
    min-height: 38px !important;
}

@media (max-width: 480px) {
    .quick-score-picker .quick-score-columns {
        gap: 6px !important;
    }

    .quick-score-picker .quick-score-option {
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }

    .quick-score-picker .quick-custom-score-small {
        grid-template-columns: 1fr 40px auto 40px !important;
    }

    .quick-score-picker .quick-custom-score-small span {
        grid-column: 1 / -1 !important;
        text-align: center !important;
    }

    .quick-score-picker .quick-custom-score-small .button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* Mobiel: uitloggen direct naast het Poolbaas-logo */
.mobile-header-auth {
    display: none;
}

@media (max-width: 760px) {
    .site-header .header-inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .site-header .brand-big-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobile-header-auth {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid var(--line-soft);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        color: var(--text-strong);
        font-size: 0.78rem;
        font-weight: 900;
        text-decoration: none;
        white-space: nowrap;
    }

    .main-nav .nav-auth-link {
        display: none;
    }
}

:root[data-theme="dark"] .mobile-header-auth {
    background: rgba(255, 255, 255, 0.76);
    color: #0f172a;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .mobile-header-auth {
        background: rgba(255, 255, 255, 0.76);
        color: #0f172a;
    }
}

/* Wedstrijdenpagina: snel-naar blok sticky */
.matches-sticky-jump {
    position: sticky;
    top: 12px;
    z-index: 40;
    backdrop-filter: blur(14px);
}

.matches-sticky-jump .section-jump-buttons {
    max-height: 160px;
    overflow-y: auto;
}

@media (max-width: 760px) {
    .matches-sticky-jump {
        top: 8px;
        padding: 14px;
    }

    .matches-sticky-jump .section-jump-buttons {
        max-height: 118px;
    }
}

/* FORCE FIX: hele SNEL NAAR kaart sticky maken */
.matches-sticky-jump.section-jump-card.card {
    position: sticky !important;
    top: 10px !important;
    z-index: 100 !important;
    overflow: visible !important;
    align-self: start !important;
}

.matches-sticky-jump.section-jump-card.card > div:first-child {
    position: relative !important;
    z-index: 2 !important;
}

.matches-sticky-jump.section-jump-card.card .section-jump-buttons {
    position: relative !important;
    z-index: 2 !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 760px) {
    .matches-sticky-jump.section-jump-card.card {
        top: 8px !important;
    }

    .matches-sticky-jump.section-jump-card.card .section-jump-buttons {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* FORCE FIX 2: sticky op wrapper van volledige SNEL NAAR kaart */
.matches-sticky-jump-wrap {
    position: sticky !important;
    top: 10px !important;
    z-index: 120 !important;
    width: 100% !important;
}

.matches-sticky-jump-wrap .matches-sticky-jump.section-jump-card.card {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    overflow: visible !important;
}

.matches-sticky-jump-wrap .section-jump-card > div,
.matches-sticky-jump-wrap .section-jump-buttons {
    position: static !important;
    overflow: visible !important;
}

.matches-sticky-jump-wrap .section-jump-buttons {
    max-height: none !important;
}

@media (max-width: 760px) {
    .matches-sticky-jump-wrap {
        top: 8px !important;
    }
}

/* FINAL FIX: volledig SNEL NAAR blok sticky, oude deels-sticky regels overrulen */
.matches-sticky-jump-wrap {
    position: sticky !important;
    top: 10px !important;
    z-index: 999 !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 28px !important;
    overflow: visible !important;
}

.matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: grid !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
}

.matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card > div:first-child,
.matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card > .section-jump-buttons {
    position: static !important;
    display: flex !important;
    overflow: visible !important;
    max-height: none !important;
}

.matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
}

.matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card > .section-jump-buttons {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

@media (max-width: 760px) {
    .matches-sticky-jump-wrap {
        top: 8px !important;
    }

    .matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card {
        padding: 14px !important;
    }

    .matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card > .section-jump-buttons {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* HARD FIX: SNEL NAAR volledig vast bovenin op wedstrijdenpagina */
.matches-page-fixed-nav .matches-sticky-jump-wrap {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5000 !important;
    width: min(1120px, calc(100vw - 24px)) !important;
    margin: 0 !important;
    overflow: visible !important;
}

.matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    display: grid !important;
    gap: 10px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
}

.matches-page-fixed-nav .matches-sticky-jump-wrap .section-jump-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
}

.matches-page-fixed-nav .matches-hero {
    margin-top: 150px !important;
}

@media (max-width: 760px) {
    .matches-page-fixed-nav .matches-sticky-jump-wrap {
        top: 8px !important;
        width: calc(100vw - 16px) !important;
    }

    .matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card {
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 18px !important;
    }

    .matches-page-fixed-nav .matches-sticky-jump-wrap .section-jump-buttons {
        max-height: 92px !important;
        overflow-y: auto !important;
    }

    .matches-page-fixed-nav .matches-hero {
        margin-top: 185px !important;
    }
}

:root[data-theme="dark"] .matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card {
        background: rgba(255, 255, 255, 0.92) !important;
        color: #0f172a !important;
    }
}

/* FIX: vaste SNEL NAAR balk onder de hoofdbalk plaatsen */
.matches-page-fixed-nav .matches-sticky-jump-wrap {
    top: 96px !important;
    z-index: 3000 !important;
}

.matches-page-fixed-nav .matches-hero {
    margin-top: 250px !important;
}

@media (max-width: 760px) {
    .matches-page-fixed-nav .matches-sticky-jump-wrap {
        top: 112px !important;
    }

    .matches-page-fixed-nav .matches-hero {
        margin-top: 310px !important;
    }
}

/* Correctie: SNEL NAAR iets lager zetten */
.matches-page-fixed-nav .matches-sticky-jump-wrap {
    top: 92px !important;
}

@media (max-width: 760px) {
    .matches-page-fixed-nav .matches-sticky-jump-wrap {
        top: 96px !important;
    }

    .matches-page-fixed-nav .matches-hero {
        margin-top: 195px !important;
    }
}

/* Correctie: SNEL NAAR duidelijk lager onder de hoofdbalk */
.matches-page-fixed-nav .matches-sticky-jump-wrap {
    top: 122px !important;
}

.matches-page-fixed-nav .matches-hero {
    margin-top: 215px !important;
}

@media (max-width: 760px) {
    .matches-page-fixed-nav .matches-sticky-jump-wrap {
        top: 128px !important;
    }

    .matches-page-fixed-nav .matches-hero {
        margin-top: 235px !important;
    }
}

/* Correctie: SNEL NAAR nog verder naar beneden */
.matches-page-fixed-nav .matches-sticky-jump-wrap {
    top: 165px !important;
}

.matches-page-fixed-nav .matches-hero {
    margin-top: 260px !important;
}

@media (max-width: 760px) {
    .matches-page-fixed-nav .matches-sticky-jump-wrap {
        top: 172px !important;
    }

    .matches-page-fixed-nav .matches-hero {
        margin-top: 285px !important;
    }
}

/* FINAL STYLE: SNEL NAAR mooi, vast en met actieve paarse knop */
.matches-page-fixed-nav .matches-sticky-jump-wrap {
    top: 165px !important;
    z-index: 5000 !important;
}

.matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card,
.matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card {
    padding: 16px 18px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.94),
            rgba(255, 255, 255, 0.78)
        ) !important;
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
}

.matches-page-fixed-nav .matches-sticky-jump-wrap .eyebrow {
    color: var(--poolbaas-purple, #7c3aed) !important;
}

.matches-page-fixed-nav .matches-sticky-jump-wrap strong {
    color: #111827 !important;
    font-weight: 950 !important;
}

.matches-page-fixed-nav .section-jump-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}

.matches-page-fixed-nav .section-jump-button,
.matches-page-fixed-nav .section-jump-buttons a {
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1.5px solid rgba(124, 58, 237, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #111827 !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease !important;
}

.matches-page-fixed-nav .section-jump-button:hover,
.matches-page-fixed-nav .section-jump-buttons a:hover {
    transform: translateY(-1px) !important;
    border-color: var(--poolbaas-purple, #7c3aed) !important;
    background: rgba(124, 58, 237, 0.12) !important;
}

.matches-page-fixed-nav .section-jump-button.is-active {
    background: var(--poolbaas-purple, #7c3aed) !important;
    border-color: var(--poolbaas-purple, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.28) !important;
}

.matches-page-fixed-nav .section-jump-button.is-active:hover {
    background: var(--poolbaas-purple, #7c3aed) !important;
    color: #ffffff !important;
}

.matches-page-fixed-nav .phase-block {
    scroll-margin-top: 330px !important;
}

@media (max-width: 760px) {
    .matches-page-fixed-nav .matches-sticky-jump-wrap {
        top: 172px !important;
    }

    .matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card,
    .matches-page-fixed-nav .matches-sticky-jump-wrap > .section-jump-card.matches-sticky-jump.card {
        padding: 12px !important;
        border-radius: 20px !important;
    }

    .matches-page-fixed-nav .section-jump-buttons {
        max-height: 92px !important;
        overflow-y: auto !important;
        gap: 7px !important;
    }

    .matches-page-fixed-nav .section-jump-button,
    .matches-page-fixed-nav .section-jump-buttons a {
        min-height: 34px !important;
        padding: 0 10px !important;
        font-size: 0.75rem !important;
    }

    .matches-page-fixed-nav .phase-block {
        scroll-margin-top: 360px !important;
    }
}

/* Actieve SNEL NAAR button paars zoals topbar */
.matches-page-fixed-nav .section-jump-button.is-active,
.matches-page-fixed-nav .section-jump-buttons a.section-jump-button.is-active {
    background: var(--poolbaas-purple, #7c3aed) !important;
    border-color: var(--poolbaas-purple, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.28) !important;
}

.matches-page-fixed-nav .section-jump-button.is-active:hover,
.matches-page-fixed-nav .section-jump-buttons a.section-jump-button.is-active:hover {
    background: var(--poolbaas-purple, #7c3aed) !important;
    border-color: var(--poolbaas-purple, #7c3aed) !important;
    color: #ffffff !important;
}

/* FINAL: actieve SNEL NAAR knop paars */
.matches-page-fixed-nav .section-jump-buttons a.section-jump-button.is-active,
.matches-page-fixed-nav .section-jump-button.is-active {
    background: var(--poolbaas-purple, #7c3aed) !important;
    border-color: var(--poolbaas-purple, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.28) !important;
}

.matches-page-fixed-nav .section-jump-buttons a.section-jump-button.is-active:hover,
.matches-page-fixed-nav .section-jump-button.is-active:hover {
    background: var(--poolbaas-purple, #7c3aed) !important;
    border-color: var(--poolbaas-purple, #7c3aed) !important;
    color: #ffffff !important;
}

/* Zorg dat secties niet achter de vaste SNEL NAAR balk verdwijnen */
.matches-page-fixed-nav .phase-block {
    scroll-margin-top: 370px !important;
}

@media (max-width: 760px) {
    .matches-page-fixed-nav .phase-block {
        scroll-margin-top: 390px !important;
    }
}

/* =========================================================
   GLOBAL LAYOUT POLISH - algemene uitlijning alle pagina's
   ========================================================= */

/* Pagina-content consistent centreren */
main,
.main-content,
.page-content {
    width: min(1180px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

/* Mobiel iets meer ademruimte */
@media (max-width: 760px) {
    main,
    .main-content,
    .page-content {
        width: min(100% - 22px, 1180px);
    }
}

/* Algemene headings netter uitlijnen */
.page-heading,
.matches-hero,
.dashboard-hero,
.admin-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}

.page-heading > div,
.matches-hero > div,
.dashboard-hero > div,
.admin-hero > div {
    min-width: 0;
}

.page-heading h1,
.matches-hero h1,
.dashboard-hero h1,
.admin-hero h1 {
    margin: 4px 0 8px;
    line-height: 1.05;
}

.page-heading p,
.matches-hero p,
.dashboard-hero p,
.admin-hero p {
    margin: 0;
    max-width: 760px;
}

/* Actieknoppen in headings rechts netjes naast elkaar */
.page-heading-actions,
.hero-actions,
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* Op mobiel headings onder elkaar */
@media (max-width: 760px) {
    .page-heading,
    .matches-hero,
    .dashboard-hero,
    .admin-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .page-heading-actions,
    .hero-actions,
    .admin-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .page-heading-actions .button,
    .hero-actions .button,
    .admin-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* Cards consistent */
.card {
    box-sizing: border-box;
}

.card + .card,
section + section {
    margin-top: 18px;
}

/* Buttons mooier uitlijnen */
.button,
button.button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    white-space: nowrap;
}

/* Forms en inputs consistent */
input,
select,
textarea {
    box-sizing: border-box;
    max-width: 100%;
}

form label {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
}

/* Admin prediction / admin forms netter */
.admin-prediction-inputs,
.admin-filter-actions,
.admin-participant-tabs,
.auth-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-prediction-inputs input,
.admin-prediction-inputs select {
    min-height: 42px;
}

.admin-prediction-inputs button {
    min-height: 42px;
}

/* Mobiel: adminformulieren niet proppen */
@media (max-width: 760px) {
    .admin-prediction-inputs,
    .admin-filter-actions,
    .auth-actions {
        align-items: stretch;
    }

    .admin-prediction-inputs input,
    .admin-prediction-inputs select,
    .admin-prediction-inputs button,
    .admin-filter-actions .button,
    .auth-actions .button {
        width: 100%;
    }
}

/* Admin voorspellingen: rij-inhoud goed uitlijnen */
.admin-prediction-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 16px;
    align-items: center;
}

.admin-prediction-match,
.admin-prediction-status,
.admin-prediction-inputs {
    min-width: 0;
}

@media (max-width: 900px) {
    .admin-prediction-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-prediction-status {
        justify-self: start;
    }
}

/* Doorgeschoven-teams pagina */
.locked-prediction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.locked-prediction > div {
    min-width: 0;
}

.locked-prediction strong {
    display: block;
    line-height: 1.25;
}

.locked-prediction .muted {
    display: block;
    margin-top: 5px;
}

.locked-prediction .mini-status {
    display: inline-flex;
    margin-top: 8px;
}

@media (max-width: 760px) {
    .locked-prediction {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Dashboard grids niet scheef laten vallen */
.dashboard-grid,
.stats-grid,
.admin-missing-grid,
.quick-grid,
.matches-grid {
    align-items: stretch;
}

.dashboard-grid > *,
.stats-grid > *,
.admin-missing-grid > *,
.quick-grid > *,
.matches-grid > * {
    min-width: 0;
}

/* Tabellen/lijsten op mobiel niet buiten beeld */
.table-wrap,
.responsive-table,
.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

/* Lange teamnamen/teksten mogen afbreken */
.match-card,
.prediction-card,
.admin-prediction-row,
.locked-prediction,
.dashboard-card,
.stat-card {
    overflow-wrap: anywhere;
}

/* Navigatie: actieve admin-subpagina niet alles tegelijk actief laten voelen */
.main-nav a[href="/admin/doorgeschoven"].active {
    background: var(--poolbaas-purple, #7c3aed);
    color: #fff;
}

/* Kleine visuele verbetering voor selectvelden */
select {
    cursor: pointer;
}

/* Mobile spacing onder vaste header */
@media (max-width: 760px) {
    .site-shell,
    main {
        padding-bottom: 24px;
    }
}


/* =========================================================
   WEDSTRIJDEN HERO POLISH
   ========================================================= */

.matches-hero-polished {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 24px;
    align-items: stretch !important;
    overflow: hidden;
    padding: 28px !important;
    border-radius: 32px !important;
    border: 1px solid rgba(124, 58, 237, 0.16) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.18), transparent 34%),
        radial-gradient(circle at 94% 22%, rgba(16, 185, 129, 0.13), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88)) !important;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.matches-hero-polished::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -95px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.16),
            rgba(14, 165, 233, 0.10)
        );
    pointer-events: none;
}

.matches-hero-main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.matches-hero-polished .eyebrow {
    color: var(--poolbaas-purple, #7c3aed) !important;
    letter-spacing: 0.15em;
}

.matches-hero-polished h1 {
    max-width: 760px;
    margin: 6px 0 10px !important;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 0.95 !important;
    letter-spacing: -0.055em;
}

.matches-hero-polished p {
    max-width: 720px;
    color: rgba(15, 23, 42, 0.72);
    font-size: 1.03rem;
    line-height: 1.65;
}

.matches-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.matches-hero-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-self: stretch;
}

.matches-hero-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
}

.matches-hero-stat strong {
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.matches-hero-stat span {
    color: rgba(15, 23, 42, 0.62);
    font-size: 0.82rem;
    font-weight: 850;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

@media (max-width: 900px) {
    .matches-hero-polished {
        grid-template-columns: 1fr;
        padding: 24px !important;
    }

    .matches-hero-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .matches-hero-stat {
        flex-direction: column;
        align-items: flex-start;
    }

    .matches-hero-stat span {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .matches-hero-polished {
        padding: 22px !important;
        border-radius: 26px !important;
    }

    .matches-hero-polished h1 {
        font-size: clamp(2rem, 12vw, 3.2rem);
    }

    .matches-hero-actions {
        flex-direction: column;
    }

    .matches-hero-actions .button {
        width: 100%;
    }

    .matches-hero-panel {
        grid-template-columns: 1fr;
    }

    .matches-hero-stat {
        flex-direction: row;
        align-items: center;
    }

    .matches-hero-stat span {
        text-align: right;
    }
}


/* =========================================================
   ADMIN / BEHEER POLISH
   ========================================================= */

.admin-page-shell,
.admin-prediction-page {
    width: 100%;
}

/* Hero van admin voorspellingen */
.admin-prediction-page .page-heading,
body:has(.admin-prediction-toolbar) .page-heading {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center !important;
    overflow: hidden;
    padding: 28px !important;
    border-radius: 32px !important;
    border: 1px solid rgba(124, 58, 237, 0.16) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.18), transparent 34%),
        radial-gradient(circle at 96% 18%, rgba(14, 165, 233, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)) !important;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

body:has(.admin-prediction-toolbar) .page-heading::after {
    content: "";
    position: absolute;
    right: -76px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.15),
        rgba(16, 185, 129, 0.10)
    );
    pointer-events: none;
}

body:has(.admin-prediction-toolbar) .page-heading > * {
    position: relative;
    z-index: 1;
}

body:has(.admin-prediction-toolbar) .page-heading h1 {
    margin: 6px 0 10px !important;
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 0.98 !important;
    letter-spacing: -0.05em;
}

body:has(.admin-prediction-toolbar) .page-heading p {
    max-width: 760px;
    color: rgba(15, 23, 42, 0.70);
    line-height: 1.65;
}

/* Admin heading knoppen */
body:has(.admin-prediction-toolbar) .page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

body:has(.admin-prediction-toolbar) .page-heading-actions .button {
    min-height: 42px;
}

/* Ontbrekende voorspellingen blok */
.admin-missing-overview {
    padding: 22px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.88)) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

.admin-missing-overview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.admin-missing-overview-head h2 {
    margin: 4px 0 6px;
    letter-spacing: -0.03em;
}

.admin-missing-total {
    min-width: 120px;
    padding: 14px 16px;
    border-radius: 22px;
    text-align: center;
    border: 1px solid rgba(124, 58, 237, 0.16);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.admin-missing-total strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.admin-missing-total span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-missing-total.has-missing {
    color: #9f1239;
    background: rgba(255, 241, 242, 0.88);
    border-color: rgba(244, 63, 94, 0.22);
}

.admin-missing-total.is-complete {
    color: #047857;
    background: rgba(236, 253, 245, 0.88);
    border-color: rgba(16, 185, 129, 0.22);
}

.admin-missing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.admin-missing-card {
    padding: 16px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.admin-missing-card.has-missing {
    border-color: rgba(244, 63, 94, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 241, 242, 0.92), rgba(255,255,255,0.78));
}

.admin-missing-card.is-complete {
    border-color: rgba(16, 185, 129, 0.18);
}

.admin-missing-card strong {
    display: block;
    line-height: 1.2;
}

.admin-missing-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 950;
    background: rgba(15, 23, 42, 0.08);
}

/* Deelnemer toolbar */
.admin-prediction-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start !important;
    padding: 22px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.88)) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

.admin-prediction-toolbar h2 {
    margin: 4px 0 0;
    letter-spacing: -0.035em;
}

.admin-participant-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-start;
}

.admin-participant-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(124, 58, 237, 0.22);
    background: rgba(255, 255, 255, 0.76);
    color: #111827;
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

.admin-participant-tabs a.active {
    background: var(--poolbaas-purple, #7c3aed);
    border-color: var(--poolbaas-purple, #7c3aed);
    color: #fff;
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.24);
}

/* Filterknoppen */
.admin-filter-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Samenvatting */
.admin-prediction-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px !important;
    border-radius: 26px !important;
}

.admin-prediction-summary > div,
.admin-prediction-summary article {
    min-width: 0;
}

/* Voorspelling rows netter */
.admin-prediction-list {
    display: grid;
    gap: 12px;
}

.admin-prediction-row {
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.admin-prediction-match strong {
    display: block;
    line-height: 1.2;
}

.admin-prediction-status {
    justify-self: center;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-badge.is-open {
    background: rgba(236, 253, 245, 0.95);
    color: #047857;
}

.admin-badge.is-closed {
    background: rgba(255, 247, 237, 0.95);
    color: #c2410c;
}

.admin-badge.is-played {
    background: rgba(241, 245, 249, 0.95);
    color: #475569;
}

.admin-prediction-inputs {
    justify-content: flex-end;
}

.admin-prediction-inputs input {
    width: 72px;
    text-align: center;
    font-weight: 900;
}

/* Doorgeschoven pagina iets mooier */
body:has(.locked-prediction) .page-heading {
    padding: 26px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.9)) !important;
}

.locked-prediction {
    padding: 18px !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

/* Mobiel */
@media (max-width: 900px) {
    body:has(.admin-prediction-toolbar) .page-heading,
    .admin-prediction-toolbar {
        grid-template-columns: 1fr !important;
    }

    body:has(.admin-prediction-toolbar) .page-heading-actions {
        justify-content: flex-start;
    }

    .admin-prediction-summary {
        grid-template-columns: 1fr !important;
    }

    .admin-prediction-status {
        justify-self: start;
    }

    .admin-prediction-inputs {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    body:has(.admin-prediction-toolbar) .page-heading {
        padding: 22px !important;
        border-radius: 26px !important;
    }

    body:has(.admin-prediction-toolbar) .page-heading h1 {
        font-size: clamp(2rem, 11vw, 3.1rem);
    }

    body:has(.admin-prediction-toolbar) .page-heading-actions .button {
        width: 100%;
    }

    .admin-missing-overview-head {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-missing-total {
        width: 100%;
    }

    .admin-prediction-toolbar {
        padding: 18px !important;
    }

    .admin-participant-tabs {
        max-height: 210px;
        overflow: auto;
        padding-bottom: 3px;
    }

    .admin-participant-tabs a {
        flex: 1 1 auto;
    }

    .admin-prediction-inputs {
        width: 100%;
    }

    .admin-prediction-inputs input,
    .admin-prediction-inputs button {
        flex: 1 1 0;
    }
}


/* =========================================================
   ADMIN FIX: duidelijkere omlijningen
   ========================================================= */

body:has(.admin-prediction-toolbar) .card,
body:has(.admin-prediction-toolbar) .admin-missing-overview,
body:has(.admin-prediction-toolbar) .admin-missing-card,
body:has(.admin-prediction-toolbar) .admin-prediction-toolbar,
body:has(.admin-prediction-toolbar) .admin-prediction-summary,
body:has(.admin-prediction-toolbar) .admin-prediction-row,
body:has(.locked-prediction) .card,
body:has(.locked-prediction) .locked-prediction {
    border: 1.5px solid rgba(30, 41, 59, 0.16) !important;
}

/* Belangrijke adminblokken iets meer contrast */
body:has(.admin-prediction-toolbar) .page-heading,
body:has(.locked-prediction) .page-heading {
    border: 1.5px solid rgba(124, 58, 237, 0.24) !important;
}

.admin-missing-card.has-missing {
    border: 1.5px solid rgba(244, 63, 94, 0.36) !important;
}

.admin-missing-card.is-complete {
    border: 1.5px solid rgba(16, 185, 129, 0.30) !important;
}

.admin-participant-tabs a {
    border: 1.5px solid rgba(124, 58, 237, 0.34) !important;
}

.admin-participant-tabs a.active {
    border: 1.5px solid var(--poolbaas-purple, #7c3aed) !important;
}

/* Formulieren/inputs duidelijker zichtbaar */
body:has(.admin-prediction-toolbar) input,
body:has(.admin-prediction-toolbar) select,
body:has(.locked-prediction) select {
    border: 1.5px solid rgba(30, 41, 59, 0.20) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

body:has(.admin-prediction-toolbar) input:focus,
body:has(.admin-prediction-toolbar) select:focus,
body:has(.locked-prediction) select:focus {
    border-color: var(--poolbaas-purple, #7c3aed) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14) !important;
    outline: none !important;
}

/* Wedstrijd/admin rows iets meer kaartgevoel */
.admin-prediction-row,
.locked-prediction {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88)) !important;
}


/* =========================================================
   DASHBOARD POLISH - Poolbaas homepage
   ========================================================= */

/* Dashboard hero in dezelfde stijl als wedstrijden/admin */
.dashboard-hero {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
    gap: 24px;
    align-items: stretch !important;
    overflow: hidden;
    padding: 30px !important;
    border-radius: 34px !important;
    border: 1.5px solid rgba(124, 58, 237, 0.22) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.18), transparent 34%),
        radial-gradient(circle at 96% 18%, rgba(16, 185, 129, 0.13), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.9)) !important;
    box-shadow:
        0 26px 64px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -105px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.15),
            rgba(14, 165, 233, 0.10)
        );
    pointer-events: none;
}

.dashboard-hero > * {
    position: relative;
    z-index: 1;
}

.dashboard-hero .eyebrow {
    color: var(--poolbaas-purple, #7c3aed) !important;
    letter-spacing: 0.15em;
}

.dashboard-hero h1 {
    max-width: 760px;
    margin: 6px 0 10px !important;
    font-size: clamp(2.15rem, 4.4vw, 4.25rem);
    line-height: 0.95 !important;
    letter-spacing: -0.06em;
}

.dashboard-hero p {
    max-width: 740px;
    color: rgba(15, 23, 42, 0.72);
    font-size: 1.04rem;
    line-height: 1.65;
}

/* Dashboard statistiekstrip rechts/in hero */
.dashboard-hero .hero-stats,
.dashboard-hero .dashboard-stats,
.dashboard-hero .stats-strip {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    align-self: stretch;
}

.dashboard-hero .hero-stats > div,
.dashboard-hero .dashboard-stats > div,
.dashboard-hero .stats-strip > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1.5px solid rgba(30, 41, 59, 0.14);
    background: rgba(255, 255, 255, 0.74);
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
}

.dashboard-hero .hero-stats strong,
.dashboard-hero .dashboard-stats strong,
.dashboard-hero .stats-strip strong {
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.dashboard-hero .hero-stats span,
.dashboard-hero .dashboard-stats span,
.dashboard-hero .stats-strip span {
    color: rgba(15, 23, 42, 0.62);
    font-size: 0.82rem;
    font-weight: 850;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Algemene dashboard cards */
.dashboard-grid .card,
.dashboard-card,
.leaderboard-card,
.upcoming-card,
.recent-card,
.quick-predict-card {
    border: 1.5px solid rgba(30, 41, 59, 0.14) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88)) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

/* Sectie headings op dashboard */
.dashboard-grid h2,
.dashboard-card h2,
.leaderboard-card h2,
.upcoming-card h2,
.recent-card h2,
.quick-predict-card h2 {
    margin-top: 0;
    letter-spacing: -0.035em;
}

/* Leaderboard / ranglijst */
.leaderboard,
.leaderboard-list,
.ranking-list {
    display: grid;
    gap: 10px;
}

.leaderboard-row,
.ranking-row,
.standing-row {
    border: 1.5px solid rgba(30, 41, 59, 0.11);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

.leaderboard-row:first-child,
.ranking-row:first-child,
.standing-row:first-child {
    border-color: rgba(245, 158, 11, 0.38);
    background:
        linear-gradient(135deg, rgba(255, 251, 235, 0.94), rgba(255, 255, 255, 0.74));
}

/* Komende wedstrijden/recent cards */
.upcoming-list,
.recent-list,
.dashboard-match-list {
    display: grid;
    gap: 10px;
}

.upcoming-list article,
.recent-list article,
.dashboard-match-list article {
    border: 1.5px solid rgba(30, 41, 59, 0.11);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

/* Dashboard knoppen strakker */
.dashboard-hero .button,
.dashboard-grid .button,
.dashboard-card .button {
    min-height: 42px;
}

/* Snelle voorspelling / callout duidelijker */
.quick-predict-card,
.dashboard-quick-card {
    border-color: rgba(124, 58, 237, 0.24) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88)) !important;
}

/* Kleine labels/badges */
.dashboard-hero .mini-status,
.dashboard-grid .mini-status,
.dashboard-card .mini-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid rgba(30, 41, 59, 0.10);
}

/* Mobiel */
@media (max-width: 900px) {
    .dashboard-hero {
        grid-template-columns: 1fr;
        padding: 26px !important;
    }

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

    .dashboard-hero .hero-stats > div,
    .dashboard-hero .dashboard-stats > div,
    .dashboard-hero .stats-strip > div {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-hero .hero-stats span,
    .dashboard-hero .dashboard-stats span,
    .dashboard-hero .stats-strip span {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .dashboard-hero {
        padding: 22px !important;
        border-radius: 26px !important;
    }

    .dashboard-hero h1 {
        font-size: clamp(2.05rem, 12vw, 3.25rem);
    }

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

    .dashboard-hero .hero-stats > div,
    .dashboard-hero .dashboard-stats > div,
    .dashboard-hero .stats-strip > div {
        flex-direction: row;
        align-items: center;
    }

    .dashboard-hero .hero-stats span,
    .dashboard-hero .dashboard-stats span,
    .dashboard-hero .stats-strip span {
        text-align: right;
    }

    .dashboard-grid .card,
    .dashboard-card,
    .leaderboard-card,
    .upcoming-card,
    .recent-card,
    .quick-predict-card {
        border-radius: 24px !important;
    }
}


/* =========================================================
   DASHBOARD: recente uitslagen in blokken van 2
   ========================================================= */

.recent-card .recent-list,
.recent-card .dashboard-match-list,
.dashboard-card .recent-list,
.dashboard-card .dashboard-match-list,
section:has(.recent-list) .recent-list,
section:has(.dashboard-match-list) .dashboard-match-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

/* Elk uitslagblok even hoog en strak */
.recent-card .recent-list > *,
.recent-card .dashboard-match-list > *,
.dashboard-card .recent-list > *,
.dashboard-card .dashboard-match-list > *,
section:has(.recent-list) .recent-list > *,
section:has(.dashboard-match-list) .dashboard-match-list > * {
    min-width: 0;
    height: 100%;
}

/* Op mobiel weer gewoon onder elkaar */
@media (max-width: 700px) {
    .recent-card .recent-list,
    .recent-card .dashboard-match-list,
    .dashboard-card .recent-list,
    .dashboard-card .dashboard-match-list,
    section:has(.recent-list) .recent-list,
    section:has(.dashboard-match-list) .dashboard-match-list {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   DASHBOARD FIX: recente uitslagen exact 2 kolommen
   ========================================================= */

.recent-section .match-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.recent-section .result-card {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
}

/* Op mobiel netjes onder elkaar */
@media (max-width: 720px) {
    .recent-section .match-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   DASHBOARD FINAL RESIZE: alles als één geheel
   ========================================================= */

/* Hoofdverdeling dashboard: klassement breder, zijbalk compact */
.layout-two {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr) !important;
    gap: 22px !important;
    align-items: start !important;
}

/* Zorg dat kolommen niet uitrekken of scheef vallen */
.layout-two > section,
.layout-two > aside {
    min-width: 0 !important;
}

/* Sectietitels overal zelfde spacing */
.layout-two .section-title,
.recent-section .section-title,
.live-leaderboard-section .section-title {
    margin: 0 0 12px !important;
}

/* Klassementkaart mooier gevuld */
.layout-two .leaderboard.card {
    padding: 14px !important;
    border-radius: 28px !important;
}

/* Leaderboard rijen consistent hoog */
.leader-row {
    min-height: 68px !important;
    padding: 12px 14px !important;
    border-radius: 20px !important;
}

/* Zijbalk cards zelfde kaartgevoel */
.layout-two aside .card,
.layout-two aside article,
.layout-two aside .quick-predict-card,
.layout-two aside .upcoming-card {
    border-radius: 24px !important;
}

/* Komende duels compacter zodat het mooi naast klassement blijft */
.layout-two aside .match-card,
.layout-two aside .result-card,
.layout-two aside article.card {
    padding: 14px !important;
}

/* Recente uitslagen sluiten visueel aan onder layout-two */
.recent-section {
    margin-top: 24px !important;
}

/* Recente uitslagen dezelfde breedte en ritme */
.recent-section .match-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

/* Recente uitslagkaarten: meer compact, gelijke hoogte */
.recent-section .result-card {
    min-height: 154px !important;
    height: 100% !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.14) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

/* Wedstrijdmeta strak bovenaan */
.recent-section .match-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.recent-section .match-meta span {
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(15, 23, 42, 0.58) !important;
}

/* Teams/scores mooi op één lijn */
.recent-section .result-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 34px !important;
}

.recent-section .result-line span {
    min-width: 0 !important;
    font-weight: 850 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.recent-section .result-line strong {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 36px !important;
    height: 32px !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.08) !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

/* Bronregel subtiel onderaan */
.recent-section .result-source {
    display: block !important;
    margin-top: 10px !important;
    color: rgba(15, 23, 42, 0.52) !important;
    font-size: 0.75rem !important;
}

/* Live/projection sectie ook dezelfde maatvoering */
.live-leaderboard-section,
.projected-leaderboard,
section:has(.live-leaderboard-grid) {
    margin-top: 24px !important;
}

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

.live-leader-row {
    min-height: 72px !important;
    padding: 14px !important;
    border-radius: 24px !important;
}

/* Dashboard hero iets minder massief zodat geheel beter ademt */
.hero-dashboard,
.dashboard-hero {
    margin-bottom: 24px !important;
}

/* Desktop breedte harmonie */
@media (min-width: 1000px) {
    .layout-two {
        margin-bottom: 0 !important;
    }

    .recent-section {
        max-width: none !important;
    }
}

/* Tablet: alles netjes onder elkaar, maar recente uitslagen blijven 2 kolommen */
@media (max-width: 980px) {
    .layout-two {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .layout-two aside {
        display: grid !important;
        gap: 18px !important;
    }
}

/* Mobiel: alles één kolom en compact */
@media (max-width: 720px) {
    .layout-two {
        gap: 18px !important;
    }

    .leader-row {
        min-height: 64px !important;
        padding: 11px 12px !important;
    }

    .recent-section .match-grid,
    .live-leaderboard-grid {
        grid-template-columns: 1fr !important;
    }

    .recent-section .result-card {
        min-height: 0 !important;
        padding: 15px !important;
    }

    .recent-section .result-line span {
        white-space: normal !important;
    }
}


/* =========================================================
   DASHBOARD: kleine polish recente uitslagen
   Alleen deze sectie, geen globale dashboard resize
   ========================================================= */

.recent-section {
    margin-top: 24px !important;
}

.recent-section .section-title {
    margin-bottom: 12px !important;
}

.recent-section .match-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.recent-section .result-card {
    min-width: 0 !important;
    height: 100% !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.15) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.88)
        ) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.065) !important;
}

.recent-section .match-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.recent-section .match-meta span {
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(15, 23, 42, 0.58) !important;
}

.recent-section .result-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 34px !important;
}

.recent-section .result-line span {
    min-width: 0 !important;
    font-weight: 850 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.recent-section .result-line strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 32px !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.08) !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

.recent-section .result-source {
    display: block !important;
    margin-top: 10px !important;
    color: rgba(15, 23, 42, 0.52) !important;
    font-size: 0.75rem !important;
}

/* Mobiel: gewoon onder elkaar */
@media (max-width: 720px) {
    .recent-section .match-grid {
        grid-template-columns: 1fr !important;
    }

    .recent-section .result-line span {
        white-space: normal !important;
    }
}


/* =========================================================
   DASHBOARD: recente uitslagen onder klassement
   ========================================================= */

.recent-under-leaderboard {
    margin-top: 22px !important;
}

.recent-under-leaderboard .section-title {
    margin-bottom: 12px !important;
}

.recent-under-leaderboard .match-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.recent-under-leaderboard .result-card {
    min-width: 0 !important;
    height: 100% !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.15) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.88)
        ) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.065) !important;
}

.recent-under-leaderboard .match-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.recent-under-leaderboard .match-meta span {
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(15, 23, 42, 0.58) !important;
}

.recent-under-leaderboard .result-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 34px !important;
}

.recent-under-leaderboard .result-line span {
    min-width: 0 !important;
    font-weight: 850 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.recent-under-leaderboard .result-line strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 32px !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.08) !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

.recent-under-leaderboard .result-source {
    display: block !important;
    margin-top: 10px !important;
    color: rgba(15, 23, 42, 0.52) !important;
    font-size: 0.75rem !important;
}

@media (max-width: 720px) {
    .recent-under-leaderboard .match-grid {
        grid-template-columns: 1fr !important;
    }

    .recent-under-leaderboard .result-line span {
        white-space: normal !important;
    }
}


/* =========================================================
   DASHBOARD FINAL: twee losse, mooi uitgelijnde kolommen
   ========================================================= */

/* Echte twee-koloms layout */
.dashboard-two-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.85fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

/* Beide kolommen gedragen zich als losse stapels cards */
.dashboard-left-column,
.dashboard-right-column {
    display: grid !important;
    gap: 22px !important;
    align-content: start !important;
    min-width: 0 !important;
}

/* Secties in de kolommen krijgen consistente spacing */
.dashboard-left-column > *,
.dashboard-right-column > * {
    min-width: 0 !important;
}

/* Sectietitels consequent */
.dashboard-two-columns .section-title,
.recent-under-leaderboard .section-title {
    margin: 0 0 12px !important;
}

/* Klassement als duidelijke card */
.dashboard-left-column > .leaderboard.card,
.dashboard-left-column .leaderboard.card {
    padding: 14px !important;
    border-radius: 28px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.15) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.88)
        ) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

/* Leaderboard rijen iets compacter en gelijkmatig */
.dashboard-left-column .leader-row {
    min-height: 68px !important;
    padding: 12px 14px !important;
    border-radius: 20px !important;
}

/* Recente uitslagen als zelfstandige cardgroep onder klassement */
.recent-under-leaderboard {
    margin-top: 0 !important;
}

/* Recente uitslagen exact in 2 blokken naast elkaar */
.recent-under-leaderboard .match-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

/* Result cards mooi gelijk */
.recent-under-leaderboard .result-card {
    min-width: 0 !important;
    height: 100% !important;
    min-height: 150px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.15) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.88)
        ) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.065) !important;
}

/* Rechterkolom cards met zelfde stijl */
.dashboard-right-column .card,
.dashboard-right-column article,
.dashboard-right-column section {
    min-width: 0 !important;
}

/* Alleen echte cards stylen, niet de hele aside kapot trekken */
.dashboard-right-column > .card,
.dashboard-right-column .card {
    border-radius: 26px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.15) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.88)
        ) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.075) !important;
}

/* Komende duels in rechterkolom compacter */
.dashboard-right-column .match-card,
.dashboard-right-column .result-card,
.dashboard-right-column article.card {
    padding: 15px !important;
    border-radius: 22px !important;
}

/* Binnen rechterkolom ook nette verticale flow */
.dashboard-right-column > * + * {
    margin-top: 0 !important;
}

/* Voorkom dat oude global CSS rare extra marges maakt */
.dashboard-two-columns section + section,
.dashboard-two-columns .card + .card {
    margin-top: 0 !important;
}

/* Recente uitslagen tekst netjes */
.recent-under-leaderboard .match-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.recent-under-leaderboard .match-meta span {
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(15, 23, 42, 0.58) !important;
}

.recent-under-leaderboard .result-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 34px !important;
}

.recent-under-leaderboard .result-line span {
    min-width: 0 !important;
    font-weight: 850 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.recent-under-leaderboard .result-line strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 32px !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.08) !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

.recent-under-leaderboard .result-source {
    display: block !important;
    margin-top: 10px !important;
    color: rgba(15, 23, 42, 0.52) !important;
    font-size: 0.75rem !important;
}

/* Tablet: kolommen onder elkaar, maar blokken blijven netjes */
@media (max-width: 980px) {
    .dashboard-two-columns {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .dashboard-left-column,
    .dashboard-right-column {
        gap: 20px !important;
    }
}

/* Mobiel: recente uitslagen één kolom */
@media (max-width: 720px) {
    .dashboard-two-columns {
        gap: 20px !important;
    }

    .recent-under-leaderboard .match-grid {
        grid-template-columns: 1fr !important;
    }

    .recent-under-leaderboard .result-card {
        min-height: 0 !important;
    }

    .recent-under-leaderboard .result-line span {
        white-space: normal !important;
    }

    .dashboard-left-column .leader-row {
        min-height: 64px !important;
        padding: 11px 12px !important;
    }
}


/* =========================================================
   DASHBOARD: recente uitslagen als eigen tegel
   ========================================================= */

.recent-results-tile {
    padding: 20px !important;
    border-radius: 28px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.15) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 250, 252, 0.90)
        ) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

.recent-results-tile .section-title {
    margin-bottom: 14px !important;
}

.recent-results-tile .section-title h2 {
    margin: 4px 0 0 !important;
    letter-spacing: -0.035em;
}

.recent-results-tile .match-grid {
    margin-top: 0 !important;
}

/* Binnen de grote tegel mogen de losse uitslagkaartjes iets subtieler */
.recent-results-tile .result-card {
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055) !important;
    background: rgba(255, 255, 255, 0.76) !important;
}

/* Mobiel iets compacter */
@media (max-width: 720px) {
    .recent-results-tile {
        padding: 16px !important;
        border-radius: 24px !important;
    }
}


/* =========================================================
   DASHBOARD FIX: Stand en Recente uitslagen als 2 losse tegels
   ========================================================= */

/* Linkerkolom: twee losse blokken */
.dashboard-left-column {
    display: grid !important;
    gap: 22px !important;
    align-content: start !important;
}

/* Eén duidelijke tegelstijl */
.dashboard-left-column .dashboard-tile {
    padding: 20px !important;
    border-radius: 30px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.18) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.09), transparent 34%),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 250, 252, 0.90)
        ) !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

/* Titels in tegels */
.dashboard-left-column .dashboard-tile .section-title {
    margin: 0 0 14px !important;
}

.dashboard-left-column .dashboard-tile .section-title h2 {
    margin: 4px 0 0 !important;
    letter-spacing: -0.035em;
}

/* Belangrijk: inner cards geen tweede dikke omlijning geven */
.leaderboard-tile .leaderboard.card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Leaderboard-rijen krijgen subtiele eigen rij-omlijning */
.leaderboard-tile .leader-row {
    border: 1.5px solid rgba(30, 41, 59, 0.12) !important;
    background: rgba(255, 255, 255, 0.70) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

.leaderboard-tile .leader-row.is-first {
    border-color: rgba(245, 158, 11, 0.40) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 251, 235, 0.95),
            rgba(255, 255, 255, 0.76)
        ) !important;
}

/* Recente uitslagen: outer tegel is de enige echte card */
.recent-results-tile {
    margin-top: 0 !important;
}

/* Binnen recente uitslagen: géén dubbele card-rand op ieder uitslagkaartje */
.recent-results-tile .result-card.card,
.recent-results-tile .result-card {
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.70) !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.05) !important;
}

/* Wel subtiele scheiding via achtergrond en lichte inset */
.recent-results-tile .result-card {
    outline: 1px solid rgba(30, 41, 59, 0.08) !important;
    outline-offset: 0 !important;
}

/* Recente uitslagen blijven 2 kolommen binnen de tegel */
.recent-results-tile .match-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

/* Rechterkolom niet dubbel zwaar maken */
.dashboard-right-column .card {
    border: 1.5px solid rgba(30, 41, 59, 0.16) !important;
}

/* Mobiel */
@media (max-width: 720px) {
    .dashboard-left-column .dashboard-tile {
        padding: 16px !important;
        border-radius: 24px !important;
    }

    .recent-results-tile .match-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   DASHBOARD FINISH: linkerkolom tegels netjes afwerken
   ========================================================= */

.dashboard-left-column {
    display: grid !important;
    gap: 22px !important;
    align-content: start !important;
}

.dashboard-left-column .dashboard-tile {
    padding: 20px !important;
    border-radius: 30px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.18) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.08), transparent 34%),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 250, 252, 0.90)
        ) !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Binnen de Stand-tegel geen dubbele grote card-rand */
.leaderboard-tile .leaderboard.card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Ranglijstregels subtiel als rijen binnen de tegel */
.leaderboard-tile .leader-row {
    border: 1.5px solid rgba(30, 41, 59, 0.12) !important;
    background: rgba(255, 255, 255, 0.70) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

/* Recente uitslagen: buitenste tegel duidelijk, binnenkaartjes subtiel */
.recent-results-tile .result-card.card,
.recent-results-tile .result-card {
    border: 1px solid rgba(30, 41, 59, 0.10) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.05) !important;
}

/* Titelruimte in beide tegels gelijk */
.dashboard-left-column .dashboard-tile .section-title {
    margin: 0 0 14px !important;
}

/* Mobiel compacter */
@media (max-width: 720px) {
    .dashboard-left-column .dashboard-tile {
        padding: 16px !important;
        border-radius: 24px !important;
    }
}


/* =========================================================
   DASHBOARD: hero + snel naar + rood/wit/blauwe tegels
   ========================================================= */

/* Bovenste rij: hero links, snel naar rechts */
.dashboard-top-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
}

.dashboard-hero-wrap,
.dashboard-top-quick {
    min-width: 0 !important;
}

/* Hero mag iets meer naar links voelen en niet full-width trekken */
.dashboard-top-row .hero-dashboard {
    height: 100% !important;
    margin: 0 !important;
}

/* De globale dashboard hero mag in deze layout niet opnieuw extra ruimte pakken */
.dashboard-top-row .dashboard-hero,
.dashboard-top-row .hero-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.55fr) !important;
    gap: 22px !important;
}

/* Snel naar als mooie rechter tegel */
.dashboard-top-quick .quick-panel {
    height: 100% !important;
    margin: 0 !important;
    padding: 22px !important;
    border-radius: 30px !important;
    border: 2px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.90)) padding-box,
        linear-gradient(135deg, #ef4444 0%, #ffffff 48%, #2563eb 100%) border-box !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.dashboard-top-quick .quick-panel .eyebrow {
    color: var(--poolbaas-purple, #7c3aed) !important;
}

.dashboard-top-quick .quick-panel a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(30, 41, 59, 0.14) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: #111827 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

.dashboard-top-quick .quick-panel a:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 58, 237, 0.32) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
}

/* Herbruikbare rood-wit-blauwe tegelrand */
.dashboard-left-column .dashboard-tile,
.dashboard-side-tile,
.dashboard-top-quick .quick-panel {
    border: 2px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.90)) padding-box,
        linear-gradient(135deg, #ef4444 0%, #ffffff 50%, #2563eb 100%) border-box !important;
}

/* Linkertegels: duidelijke maar nette omlijning */
.dashboard-left-column .dashboard-tile {
    padding: 20px !important;
    border-radius: 30px !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Stand inner card: geen dubbele buitenrand */
.leaderboard-tile .leaderboard.card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Rijen binnen stand subtiel */
.leaderboard-tile .leader-row {
    border: 1.5px solid rgba(30, 41, 59, 0.12) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

/* Recente uitslagen binnen de tegel subtiel, geen dubbele zware rand */
.recent-results-tile .result-card.card,
.recent-results-tile .result-card {
    border: 1.2px solid rgba(30, 41, 59, 0.10) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.05) !important;
}

/* Volgende-tegel rechts */
.dashboard-side-tile {
    padding: 20px !important;
    border-radius: 30px !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Binnen Volgende geen kale elementen */
.upcoming-tile .match-list,
.upcoming-tile .upcoming-list,
.upcoming-tile > div:last-child {
    display: grid !important;
    gap: 12px !important;
}

/* Komende duels kaarten subtiel binnen de tegel */
.upcoming-tile .match-card,
.upcoming-tile article.card,
.upcoming-tile .card.compact {
    border: 1.2px solid rgba(30, 41, 59, 0.10) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.05) !important;
}

/* Kolommen netjes naast elkaar */
.dashboard-two-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.85fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

.dashboard-left-column,
.dashboard-right-column {
    display: grid !important;
    gap: 22px !important;
    align-content: start !important;
    min-width: 0 !important;
}

/* Tablet */
@media (max-width: 1050px) {
    .dashboard-top-row {
        grid-template-columns: 1fr !important;
    }

    .dashboard-top-row .dashboard-hero,
    .dashboard-top-row .hero-dashboard {
        grid-template-columns: 1fr !important;
    }

    .dashboard-two-columns {
        grid-template-columns: 1fr !important;
    }
}

/* Mobiel */
@media (max-width: 720px) {
    .dashboard-top-row {
        gap: 18px !important;
        margin-bottom: 20px !important;
    }

    .dashboard-left-column .dashboard-tile,
    .dashboard-side-tile,
    .dashboard-top-quick .quick-panel {
        padding: 16px !important;
        border-radius: 24px !important;
    }

    .recent-results-tile .match-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   DASHBOARD: voorspelstatus + Poolbaas van de dag
   ========================================================= */

.dashboard-action-award-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.dashboard-action-block,
.dashboard-award-block {
    padding: 16px !important;
    border-radius: 22px !important;
    border: 1.2px solid rgba(30, 41, 59, 0.11) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.045) !important;
}

.dashboard-action-title {
    display: block;
    margin-top: 6px;
    color: #111827;
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.dashboard-action-block p,
.dashboard-award-block p {
    margin: 8px 0 14px;
    color: rgba(15, 23, 42, 0.68);
    line-height: 1.45;
}

.dashboard-action-block .button {
    width: 100%;
}

.dashboard-award-person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 10px;
}

.dashboard-award-person .avatar {
    width: 44px;
    height: 44px;
}

.dashboard-award-person strong {
    display: block;
    color: #111827;
    line-height: 1.15;
}

.dashboard-award-person small {
    display: block;
    margin-top: 3px;
    color: rgba(15, 23, 42, 0.60);
    font-weight: 800;
}


/* =========================================================
   DASHBOARD FIX: hero + actie/award kaart netjes uitlijnen
   ========================================================= */

.dashboard-top-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
}

.dashboard-hero-wrap,
.dashboard-top-quick {
    min-width: 0 !important;
    display: grid !important;
}

.dashboard-top-row .hero-dashboard {
    height: 100% !important;
    margin: 0 !important;
}

.dashboard-top-quick .dashboard-action-award-card {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 14px !important;
    padding: 20px !important;
}

/* Beide helften in de rechterkaart gelijk en rustig */
.dashboard-action-block,
.dashboard-award-block {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 0 !important;
}

/* Titel en tekst niet te groot zodat het als één geheel voelt */
.dashboard-action-title {
    font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
}

.dashboard-action-block p,
.dashboard-award-block p {
    margin: 8px 0 12px !important;
}

/* Award rij strak */
.dashboard-award-person {
    margin: 10px 0 8px !important;
}

/* Hero intern iets compacter zodat hij beter naast de rechterkaart past */
.dashboard-top-row .hero-dashboard {
    padding: 28px !important;
}

.dashboard-top-row .hero-dashboard h1 {
    font-size: clamp(2.15rem, 4vw, 3.85rem) !important;
}

/* Linker en rechter dashboardkolommen weer netjes uitgelijnd */
.dashboard-two-columns {
    align-items: start !important;
}

.dashboard-left-column,
.dashboard-right-column {
    gap: 22px !important;
}

/* Volgende-tegel duidelijke rood-wit-blauwe omlijning, ook als oudere CSS hem overschrijft */
.dashboard-side-tile.upcoming-tile,
.upcoming-tile {
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.90)) padding-box,
        linear-gradient(135deg, #ef4444 0%, #ffffff 50%, #2563eb 100%) border-box !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Stand en recente uitslagen ook dezelfde rand, als oudere CSS te zwak is */
.dashboard-left-column .dashboard-tile {
    border: 2px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.90)) padding-box,
        linear-gradient(135deg, #ef4444 0%, #ffffff 50%, #2563eb 100%) border-box !important;
}

/* Mobiel: kaart rechts onder hero, helften niet geforceerd even hoog */
@media (max-width: 1050px) {
    .dashboard-top-row {
        grid-template-columns: 1fr !important;
    }

    .dashboard-top-quick .dashboard-action-award-card {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
    }
}

@media (max-width: 720px) {
    .dashboard-top-row {
        gap: 18px !important;
    }

    .dashboard-top-row .hero-dashboard {
        padding: 22px !important;
    }

    .dashboard-top-quick .dashboard-action-award-card {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }
}


/* =========================================================
   DASHBOARD FINAL ALIGN: hero + voorspelstatus/award
   ========================================================= */

.dashboard-top-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px) !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
}

.dashboard-hero-wrap,
.dashboard-top-quick {
    min-width: 0 !important;
    display: grid !important;
}

.dashboard-top-row .hero-dashboard {
    height: 100% !important;
    margin: 0 !important;
    padding: 28px !important;
}

.dashboard-top-row .hero-dashboard h1 {
    font-size: clamp(2.1rem, 3.8vw, 3.75rem) !important;
}

.dashboard-top-row .hero-dashboard p {
    max-width: 680px !important;
}

.dashboard-top-quick .quick-panel.dashboard-action-award-card {
    height: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.90)) padding-box,
        linear-gradient(135deg, #ef4444 0%, #ffffff 50%, #2563eb 100%) border-box !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;

    display: grid !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
}

.dashboard-action-block,
.dashboard-award-block {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    border: 1.2px solid rgba(30, 41, 59, 0.11) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.045) !important;
}

.dashboard-action-title {
    font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
}

.dashboard-action-block p,
.dashboard-award-block p {
    margin: 8px 0 12px !important;
}

.dashboard-award-person {
    margin: 10px 0 8px !important;
}

/* Grote dashboardtegels dezelfde rood-wit-blauwe omlijning */
.dashboard-left-column .dashboard-tile,
.dashboard-side-tile.upcoming-tile {
    border: 2px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(248,250,252,0.90)) padding-box,
        linear-gradient(135deg, #ef4444 0%, #ffffff 50%, #2563eb 100%) border-box !important;
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Volgende blok expliciet als tegel */
.dashboard-side-tile.upcoming-tile {
    padding: 20px !important;
    border-radius: 30px !important;
}

/* Mobiel/tablet */
@media (max-width: 1050px) {
    .dashboard-top-row {
        grid-template-columns: 1fr !important;
    }

    .dashboard-top-quick .quick-panel.dashboard-action-award-card {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
    }
}

@media (max-width: 720px) {
    .dashboard-top-row {
        gap: 18px !important;
    }

    .dashboard-top-row .hero-dashboard,
    .dashboard-top-quick .quick-panel.dashboard-action-award-card,
    .dashboard-side-tile.upcoming-tile {
        padding: 16px !important;
        border-radius: 24px !important;
    }

    .dashboard-top-quick .quick-panel.dashboard-action-award-card {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   GLOBAL WIDTH: app meer schermvullend maken
   ========================================================= */

/* Hoofdcontainer breder op desktop */
main,
.main-content,
.page-content,
.site-main {
    width: min(1440px, calc(100% - 48px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Dashboard mag op grote schermen nog iets ruimer ademen */
@media (min-width: 1500px) {
    main,
    .main-content,
    .page-content,
    .site-main {
        width: min(1520px, calc(100% - 64px)) !important;
        max-width: 1520px !important;
    }
}

/* Op normale laptops niet te veel rand */
@media (max-width: 1100px) {
    main,
    .main-content,
    .page-content,
    .site-main {
        width: min(100% - 28px, 1440px) !important;
    }
}

/* Mobiel compact houden */
@media (max-width: 760px) {
    main,
    .main-content,
    .page-content,
    .site-main {
        width: min(100% - 20px, 1440px) !important;
    }
}

/* Dashboard-kolommen benutten de extra breedte mooier */
@media (min-width: 1100px) {
    .dashboard-two-columns {
        grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.85fr) !important;
        gap: 28px !important;
    }

    .dashboard-top-row {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 390px) !important;
        gap: 28px !important;
    }
}

/* Wedstrijdenpagina ook iets royaler */
@media (min-width: 1100px) {
    .matches-page-fixed-nav,
    .matches-list,
    .matches-hero-polished {
        max-width: none !important;
    }
}


/* =========================================================
   MOBILE APP SHELL — Poolbaas light theme
   Fase 1: shell + dashboard + bottom nav
   ========================================================= */

@media (max-width: 860px) {
    html,
    body {
        background:
            radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 28%),
            linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%) !important;
    }

    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .footer {
        display: none !important;
    }

    .shell {
        width: min(100% - 20px, 100%) !important;
        max-width: none !important;
    }

    /* -------------------------
       VASTE MOBIELE NAVIGATIE
       ------------------------- */

    .mobile-app-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 999;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        border-radius: 24px;
        border: 2px solid transparent;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, #ef4444 0%, #ffffff 50%, #2563eb 100%) border-box;
        box-shadow:
            0 20px 48px rgba(15, 23, 42, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(14px);
    }

    .mobile-app-nav-link {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 54px;
        padding: 8px 4px;
        text-decoration: none;
        color: #64748b !important;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: -0.01em;
        border-radius: 18px;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .mobile-app-nav-link.is-active {
        color: #1e3a8a !important;
        background:
            linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(37, 99, 235, 0.12));
    }

    .mobile-app-nav-icon {
        font-size: 1.15rem;
        line-height: 1;
    }

    /* -------------------------
       DASHBOARD TOP
       ------------------------- */

    .dashboard-top-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 18px !important;
    }

    .dashboard-top-row .hero-dashboard {
        margin: 0 !important;
        padding: 20px !important;
        border-radius: 26px !important;
    }

    .dashboard-top-row .hero-dashboard h1 {
        font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
        line-height: 1.02 !important;
        margin-bottom: 8px !important;
    }

    .dashboard-top-row .hero-dashboard p {
        font-size: 0.97rem !important;
        line-height: 1.45 !important;
    }

    .hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .hero-actions .button {
        width: 100% !important;
        justify-content: center !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .hero-stats > div {
        min-width: 0;
    }

    /* Voorspelstatus + Poolbaas van de dag */
    .dashboard-top-quick .quick-panel.dashboard-action-award-card {
        padding: 16px !important;
        border-radius: 26px !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 12px !important;
    }

    .dashboard-action-block,
    .dashboard-award-block {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .dashboard-action-title {
        font-size: 1.3rem !important;
    }

    /* -------------------------
       DASHBOARD KOLOMMEN
       ------------------------- */

    .dashboard-two-columns {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .dashboard-left-column,
    .dashboard-right-column {
        gap: 18px !important;
    }

    .dashboard-left-column .dashboard-tile,
    .dashboard-side-tile.upcoming-tile {
        padding: 16px !important;
        border-radius: 26px !important;
    }

    .dashboard-left-column .dashboard-tile .section-title,
    .dashboard-side-tile .section-title {
        margin-bottom: 12px !important;
    }

    /* -------------------------
       KLASSEMENT
       ------------------------- */

    .leader-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        gap: 10px !important;
        min-height: 62px !important;
        padding: 10px 12px !important;
        border-radius: 18px !important;
    }

    .leader-rank {
        min-width: 28px !important;
    }

    .leader-name small {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
    }

    .leader-points strong {
        font-size: 1rem !important;
    }

    /* -------------------------
       RECENTE UITSLAGEN
       ------------------------- */

    .recent-results-tile .match-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .recent-results-tile .result-card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .recent-results-tile .result-line span {
        white-space: normal !important;
    }

    /* -------------------------
       VOLGENDE DUELS
       ------------------------- */

    .upcoming-tile .match-card,
    .upcoming-tile article.card,
    .upcoming-tile .card.compact {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    /* -------------------------
       KNOPPEN EN FORMULIEREN
       ------------------------- */

    .button {
        min-height: 46px;
        border-radius: 16px !important;
    }

    input,
    select,
    textarea {
        border-radius: 14px !important;
    }
}

/* Op desktop/laptop niet tonen */
@media (min-width: 861px) {
    .mobile-app-nav {
        display: none !important;
    }
}


/* =========================================================
   MOBILE QUICK PREDICT — Poolbaas app style
   Fase 2: /voorspellen/snel
   ========================================================= */

@media (max-width: 860px) {
    .quick-predict-page {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .quick-predict-heading {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .quick-predict-heading h1 {
        font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.06em !important;
        margin: 0 !important;
        color: #0f172a !important;
    }

    .quick-predict-heading p {
        margin: 6px 0 0 !important;
        color: rgba(15, 23, 42, 0.68) !important;
        line-height: 1.45 !important;
    }

    .quick-predict-heading .button.secondary {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
    }

    .quick-predict-card {
        border: 2px solid transparent !important;
        border-radius: 30px !important;
        padding: 16px !important;
        overflow: hidden !important;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, #ef4444 0%, #ffffff 50%, #2563eb 100%) border-box !important;
        box-shadow:
            0 20px 48px rgba(15, 23, 42, 0.10),
            inset 0 1px 0 rgba(255,255,255,0.82) !important;
    }

    .quick-predict-form {
        display: grid !important;
        gap: 16px !important;
    }

    /*
       Wedstrijdinformatie bovenaan compact en duidelijk.
       De bestaande template blijft leidend; deze regels maken hem mobieler.
    */
    .quick-predict-card .match-meta,
    .quick-predict-card .quick-match-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        color: rgba(15, 23, 42, 0.62) !important;
        font-size: 0.78rem !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
    }

    .quick-predict-card .teams,
    .quick-predict-card .match-teams,
    .quick-predict-card .quick-match-teams {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        margin: 10px 0 12px !important;
    }

    .quick-predict-card .team,
    .quick-predict-card .match-team,
    .quick-predict-card .quick-team {
        min-width: 0 !important;
        text-align: center !important;
    }

    .quick-predict-card .team strong,
    .quick-predict-card .match-team strong,
    .quick-predict-card .quick-team strong {
        display: block !important;
        font-size: 1rem !important;
        line-height: 1.12 !important;
        color: #0f172a !important;
        word-break: break-word !important;
    }

    .quick-predict-card .versus,
    .quick-predict-card .match-versus,
    .quick-predict-card .quick-versus {
        width: 40px !important;
        height: 40px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background:
            linear-gradient(135deg, rgba(239,68,68,0.10), rgba(37,99,235,0.12)) !important;
        color: #1e3a8a !important;
        font-weight: 1000 !important;
        font-size: 0.76rem !important;
    }

    /* -------------------------
       SCORE PICKER
       ------------------------- */

    .quick-score-picker {
        padding: 14px !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at top left, rgba(37,99,235,0.06), transparent 34%),
            rgba(255, 255, 255, 0.78) !important;
        border: 1.2px solid rgba(30, 41, 59, 0.10) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
    }

    .quick-score-picker > h2,
    .quick-score-picker > h3,
    .quick-score-picker-title {
        margin: 0 0 12px !important;
        font-size: 1.1rem !important;
        letter-spacing: -0.04em !important;
        color: #0f172a !important;
    }

    .quick-score-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .quick-score-column {
        padding: 12px !important;
        border-radius: 20px !important;
        background: rgba(248, 250, 252, 0.90) !important;
        border: 1.2px solid rgba(30, 41, 59, 0.09) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.80) !important;
    }

    .quick-score-column-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 10px !important;
        font-size: 0.82rem !important;
        font-weight: 1000 !important;
        letter-spacing: -0.02em !important;
        color: #0f172a !important;
    }

    .quick-score-column:first-child .quick-score-column-title {
        color: #047857 !important;
    }

    .quick-score-column-draw .quick-score-column-title {
        color: #475569 !important;
    }

    .quick-score-column:last-child .quick-score-column-title {
        color: #b91c1c !important;
    }

    .quick-score-column form,
    .quick-score-column > div:not(.quick-score-column-title) {
        min-width: 0 !important;
    }

    .quick-score-column {
        display: grid !important;
        gap: 8px !important;
    }

    /*
       Buttons als score-pills.
       De template gebruikt button.quick-score-option.
    */
    .quick-score-option {
        appearance: none !important;
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 16px !important;
        border: 1.5px solid rgba(30, 41, 59, 0.12) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        color: #0f172a !important;
        font-weight: 1000 !important;
        font-size: 1rem !important;
        letter-spacing: -0.03em !important;
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.045) !important;
        cursor: pointer !important;
    }

    .quick-score-column:first-child .quick-score-option {
        border-color: rgba(16, 185, 129, 0.30) !important;
        background: linear-gradient(135deg, rgba(236,253,245,0.94), rgba(255,255,255,0.90)) !important;
    }

    .quick-score-column-draw .quick-score-option {
        border-color: rgba(100, 116, 139, 0.22) !important;
        background: linear-gradient(135deg, rgba(248,250,252,0.98), rgba(255,255,255,0.92)) !important;
    }

    .quick-score-column:last-child .quick-score-option {
        border-color: rgba(239, 68, 68, 0.28) !important;
        background: linear-gradient(135deg, rgba(254,242,242,0.95), rgba(255,255,255,0.90)) !important;
    }

    .quick-score-option.is-selected {
        color: #ffffff !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
        box-shadow:
            0 14px 26px rgba(37, 99, 235, 0.24),
            inset 0 1px 0 rgba(255,255,255,0.28) !important;
    }

    .quick-score-option:active {
        transform: scale(0.98);
    }

    /*
       Op iets bredere telefoons: drie kolommen naast elkaar,
       maar alleen als er genoeg ruimte is.
    */
    @media (min-width: 430px) and (max-width: 860px) {
        .quick-score-columns {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 10px !important;
        }

        .quick-score-column {
            padding: 10px !important;
        }

        .quick-score-option {
            min-height: 42px !important;
            font-size: 0.92rem !important;
        }

        .quick-score-column-title {
            min-height: 34px !important;
            align-items: flex-start !important;
        }
    }

    /* -------------------------
       HANDMATIGE SCORE
       ------------------------- */

    .quick-custom-score-small {
        margin-top: 4px !important;
        padding: 12px !important;
        border-radius: 20px !important;
        border: 1.2px solid rgba(30, 41, 59, 0.10) !important;
        background: rgba(255, 255, 255, 0.78) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
    }

    .quick-custom-score-small label,
    .quick-custom-score-small span,
    .quick-custom-score-small small {
        color: rgba(15, 23, 42, 0.68) !important;
        font-weight: 900 !important;
    }

    .quick-custom-score-small input {
        min-height: 44px !important;
        text-align: center !important;
        font-size: 1.05rem !important;
        font-weight: 1000 !important;
        border-radius: 14px !important;
    }

    /* -------------------------
       ACTIES ONDERAAN
       ------------------------- */

    .quick-predict-form .prediction-editor-actions,
    .quick-predict-form .quick-predict-actions,
    .quick-predict-card .prediction-editor-actions,
    .quick-predict-card .quick-predict-actions {
        position: sticky !important;
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        z-index: 40 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;

        margin: 8px -4px -4px !important;
        padding: 10px !important;
        border-radius: 22px !important;
        border: 1.5px solid rgba(30, 41, 59, 0.10) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    .quick-predict-form .prediction-editor-actions .button,
    .quick-predict-form .quick-predict-actions .button,
    .quick-predict-card .prediction-editor-actions .button,
    .quick-predict-card .quick-predict-actions .button {
        width: 100% !important;
        min-height: 50px !important;
        justify-content: center !important;
        border-radius: 17px !important;
    }

    /*
       Vorige/volgende navigatie in snel voorspellen.
    */
    .quick-predict-page a[href*="match_id"] {
        min-height: 42px !important;
        border-radius: 999px !important;
    }
}


/* =========================================================
   MOBILE MATCHES COMPACT OVERRIDE
   Minder website, meer app-lijst
   ========================================================= */

@media (max-width: 860px) {
    /*
       Pagina strakker.
    */
    .matches-page,
    .matches-list,
    .match-grid,
    .matches-grid {
        gap: 9px !important;
    }

    /*
       Hero kleiner: op mobiel geen grote marketing-header.
    */
    .matches-hero-polished,
    .matches-hero {
        padding: 13px 14px !important;
        border-radius: 20px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
    }

    .matches-hero h1,
    .matches-hero-polished h1 {
        font-size: 1.55rem !important;
        line-height: 1.05 !important;
        margin-bottom: 4px !important;
        letter-spacing: -0.055em !important;
    }

    .matches-hero p,
    .matches-hero-polished p {
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    /*
       Hero statistieken/extra tekst minder dominant.
    */
    .matches-hero .hero-stats,
    .matches-hero-polished .hero-stats,
    .matches-hero .matches-hero-stats,
    .matches-hero-polished .matches-hero-stats {
        gap: 7px !important;
        margin-top: 10px !important;
    }

    .matches-hero .hero-stats > div,
    .matches-hero-polished .hero-stats > div,
    .matches-hero .matches-hero-stats > div,
    .matches-hero-polished .matches-hero-stats > div {
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .matches-hero .hero-stats strong,
    .matches-hero-polished .hero-stats strong,
    .matches-hero .matches-hero-stats strong,
    .matches-hero-polished .matches-hero-stats strong {
        font-size: 1rem !important;
    }

    .matches-hero .hero-stats span,
    .matches-hero-polished .hero-stats span,
    .matches-hero .matches-hero-stats span,
    .matches-hero-polished .matches-hero-stats span {
        font-size: 0.62rem !important;
    }

    /*
       Snel naar / ronde-nav compacter.
       Dit moet voelen als tabs, niet als groot blok.
    */
    .matches-page-fixed-nav {
        top: 6px !important;
        margin-bottom: 9px !important;
        padding: 6px !important;
        border-radius: 18px !important;
        gap: 6px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.075) !important;
    }

    .matches-page-fixed-nav a,
    .matches-page-fixed-nav button {
        min-height: 32px !important;
        padding: 0 11px !important;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        font-weight: 900 !important;
    }

    /*
       De Snel voorspellen-knop op wedstrijden mobiel niet enorm maken.
       Hij mag zichtbaar zijn, maar niet het scherm domineren.
    */
    .matches-page a.button[href="/voorspellen/snel"],
    .matches-page .button[href="/voorspellen/snel"],
    .matches-hero a.button[href="/voorspellen/snel"],
    .matches-hero-polished a.button[href="/voorspellen/snel"] {
        min-height: 38px !important;
        width: auto !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        font-size: 0.8rem !important;
        justify-content: center !important;
    }

    /*
       Wedstrijdkaarten platter en lijst-achtig.
    */
    .matches-page .match-card,
    .matches-page .result-card,
    .matches-page article.card,
    .matches-list .card,
    .match-grid .card {
        padding: 10px 11px !important;
        border-radius: 18px !important;
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055) !important;
    }

    .matches-page .flag-split-card,
    .matches-list .flag-split-card,
    .match-grid .flag-split-card {
        border-width: 1.5px !important;
    }

    /*
       Meta minder hoog.
    */
    .matches-page .match-meta,
    .matches-list .match-meta,
    .match-grid .match-meta {
        gap: 5px !important;
        margin-bottom: 6px !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.055em !important;
    }

    .matches-page .match-meta span,
    .matches-list .match-meta span,
    .match-grid .match-meta span {
        min-height: 20px !important;
        padding: 0 7px !important;
    }

    /*
       Teams/score compacter.
    */
    .matches-page .teams,
    .matches-list .teams,
    .match-grid .teams,
    .mini-match-teams-with-score {
        gap: 7px !important;
        margin: 5px 0 6px !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }

    .matches-page .team strong,
    .matches-list .team strong,
    .match-grid .team strong,
    .matches-page .teams strong,
    .matches-list .teams strong,
    .match-grid .teams strong {
        font-size: 0.88rem !important;
        line-height: 1.08 !important;
    }

    .matches-page .team small,
    .matches-list .team small,
    .match-grid .team small {
        font-size: 0.64rem !important;
        margin-top: 2px !important;
    }

    .match-score,
    .mini-match-live-score {
        min-width: 58px !important;
        min-height: 42px !important;
        padding: 6px 8px !important;
        border-radius: 14px !important;
    }

    .match-score strong,
    .match-score-value,
    .mini-match-score-value {
        font-size: 1rem !important;
    }

    .match-score small,
    .match-score-label,
    .mini-match-score-label {
        font-size: 0.55rem !important;
        margin-top: 3px !important;
    }

    /*
       Voorspellingen nog subtieler.
    */
    .prediction-strip {
        gap: 6px !important;
        padding-top: 5px !important;
        margin-top: 5px !important;
    }

    .prediction-pill {
        min-width: 92px !important;
        max-width: 122px !important;
        padding: 6px 8px !important;
        border-radius: 13px !important;
        box-shadow: none !important;
    }

    .prediction-pill strong,
    .prediction-pill span {
        font-size: 0.72rem !important;
    }

    .prediction-pill small {
        font-size: 0.62rem !important;
        margin-top: 2px !important;
    }

    /*
       Als er veel tekst in cards zit: minder verticale ruimte.
    */
    .matches-page .card p,
    .matches-list .card p,
    .match-grid .card p {
        font-size: 0.82rem !important;
        line-height: 1.32 !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}


/* =========================================================
   MOBILE MATCHES ULTRA COMPACT
   Echte app-lijst: minder hoogte, geen sticky snel-naar
   ========================================================= */

@media (max-width: 860px) {
    /*
       Snel naar / ronde navigatie NIET sticky op mobiel.
       Gewoon bovenaan laten staan.
    */
    .matches-page-fixed-nav {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        margin: 0 0 8px !important;
        padding: 5px !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.72) !important;
        border: 1px solid rgba(30, 41, 59, 0.08) !important;
    }

    .matches-page-fixed-nav a,
    .matches-page-fixed-nav button {
        min-height: 28px !important;
        padding: 0 9px !important;
        font-size: 0.68rem !important;
        border-radius: 999px !important;
    }

    /*
       Hero op wedstrijdenpagina bijna als compacte page header.
    */
    .matches-hero,
    .matches-hero-polished {
        padding: 10px 11px !important;
        margin: 0 0 8px !important;
        border-radius: 16px !important;
        border-width: 1.2px !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045) !important;
    }

    .matches-hero h1,
    .matches-hero-polished h1 {
        font-size: 1.28rem !important;
        line-height: 1.05 !important;
        margin: 0 0 3px !important;
        letter-spacing: -0.045em !important;
    }

    .matches-hero p,
    .matches-hero-polished p {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    .matches-hero .button,
    .matches-hero-polished .button,
    .matches-page a.button[href="/voorspellen/snel"],
    .matches-page .button[href="/voorspellen/snel"] {
        min-height: 31px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
        border-radius: 999px !important;
        width: auto !important;
    }

    /*
       Eventuele stats in hero kleiner of minder dominant.
    */
    .matches-hero .hero-stats,
    .matches-hero-polished .hero-stats,
    .matches-hero .matches-hero-stats,
    .matches-hero-polished .matches-hero-stats {
        margin-top: 7px !important;
        gap: 5px !important;
    }

    .matches-hero .hero-stats > div,
    .matches-hero-polished .hero-stats > div,
    .matches-hero .matches-hero-stats > div,
    .matches-hero-polished .matches-hero-stats > div {
        padding: 5px 6px !important;
        border-radius: 10px !important;
    }

    .matches-hero .hero-stats strong,
    .matches-hero-polished .hero-stats strong,
    .matches-hero .matches-hero-stats strong,
    .matches-hero-polished .matches-hero-stats strong {
        font-size: 0.86rem !important;
    }

    .matches-hero .hero-stats span,
    .matches-hero-polished .hero-stats span,
    .matches-hero .matches-hero-stats span,
    .matches-hero-polished .matches-hero-stats span {
        font-size: 0.55rem !important;
    }

    /*
       Lijst spacing.
    */
    .matches-list,
    .match-grid,
    .matches-grid {
        gap: 7px !important;
    }

    /*
       Wedstrijdkaart als compacte list row.
       Veel platter dan card-layout.
    */
    .matches-page .match-card,
    .matches-page .result-card,
    .matches-page article.card,
    .matches-list .card,
    .match-grid .card {
        padding: 7px 8px !important;
        border-radius: 14px !important;
        border-width: 1px !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.035) !important;
        min-height: 0 !important;
    }

    .matches-page .flag-split-card,
    .matches-list .flag-split-card,
    .match-grid .flag-split-card {
        border-width: 1px !important;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.42), rgba(255,255,255,0.88), rgba(37,99,235,0.42)) border-box !important;
    }

    /*
       Meta-regel heel klein.
    */
    .matches-page .match-meta,
    .matches-list .match-meta,
    .match-grid .match-meta {
        margin-bottom: 4px !important;
        gap: 4px !important;
        font-size: 0.56rem !important;
        letter-spacing: 0.045em !important;
        line-height: 1 !important;
    }

    .matches-page .match-meta span,
    .matches-list .match-meta span,
    .match-grid .match-meta span {
        min-height: 17px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
    }

    /*
       Teams/score: echte compacte wedstrijdregel.
    */
    .matches-page .teams,
    .matches-list .teams,
    .match-grid .teams,
    .mini-match-teams-with-score {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
        gap: 5px !important;
        align-items: center !important;
        margin: 3px 0 !important;
    }

    .matches-page .team,
    .matches-list .team,
    .match-grid .team {
        min-width: 0 !important;
        text-align: center !important;
    }

    .matches-page .team strong,
    .matches-list .team strong,
    .match-grid .team strong,
    .matches-page .teams strong,
    .matches-list .teams strong,
    .match-grid .teams strong {
        font-size: 0.78rem !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
    }

    .matches-page .team small,
    .matches-list .team small,
    .match-grid .team small {
        display: none !important;
    }

    .match-score,
    .mini-match-live-score {
        min-width: 52px !important;
        width: 52px !important;
        min-height: 34px !important;
        padding: 4px 5px !important;
        border-radius: 11px !important;
        border-width: 1px !important;
    }

    .match-score strong,
    .match-score-value,
    .mini-match-score-value {
        font-size: 0.88rem !important;
        line-height: 1 !important;
    }

    .match-score small,
    .match-score-label,
    .mini-match-score-label {
        font-size: 0.46rem !important;
        margin-top: 2px !important;
        letter-spacing: 0.04em !important;
    }

    /*
       Voorspellingen mogen niet de kaart enorm maken.
       Maak ze lager, horizontaal scrollbaar, minder opvallend.
    */
    .prediction-strip {
        gap: 4px !important;
        padding: 4px 0 0 !important;
        margin-top: 4px !important;
        max-height: 34px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .prediction-pill {
        min-width: 76px !important;
        max-width: 96px !important;
        min-height: 28px !important;
        padding: 4px 6px !important;
        border-radius: 10px !important;
        border-width: 1px !important;
        box-shadow: none !important;
    }

    .prediction-pill strong,
    .prediction-pill span {
        font-size: 0.62rem !important;
        line-height: 1.05 !important;
    }

    .prediction-pill small {
        font-size: 0.52rem !important;
        line-height: 1 !important;
        margin-top: 1px !important;
    }

    /*
       Overbodige tekst in matchcards kleiner maken.
    */
    .matches-page .card p,
    .matches-list .card p,
    .match-grid .card p {
        font-size: 0.72rem !important;
        line-height: 1.22 !important;
        margin: 3px 0 !important;
    }

    /*
       Sectietitels compacter.
    */
    .matches-page .section-title,
    .matches-list .section-title,
    .match-grid .section-title {
        margin: 8px 0 6px !important;
    }

    .matches-page .section-title h2,
    .matches-list .section-title h2,
    .match-grid .section-title h2 {
        font-size: 1rem !important;
        line-height: 1.1 !important;
    }

    .matches-page .eyebrow,
    .matches-list .eyebrow,
    .match-grid .eyebrow {
        font-size: 0.58rem !important;
    }
}


/* =========================================================
   MOBILE MATCHES REAL FIX
   Echte compacte app-lijst voor /wedstrijden
   ========================================================= */

@media (max-width: 860px) {
    /* Pagina zelf */
    .matches-page {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    /* Hero: compact, geen grote desktop-header op mobiel */
    .matches-page .matches-hero,
    .matches-page .matches-hero-polished {
        padding: 11px 12px !important;
        margin: 0 0 8px !important;
        border-radius: 16px !important;
        border-width: 1px !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045) !important;
    }

    .matches-page .matches-hero-main {
        display: grid !important;
        gap: 6px !important;
    }

    .matches-page .matches-hero h1,
    .matches-page .matches-hero-polished h1 {
        font-size: 1.28rem !important;
        line-height: 1.05 !important;
        margin: 0 !important;
        letter-spacing: -0.045em !important;
    }

    .matches-page .matches-hero p,
    .matches-page .matches-hero-polished p {
        display: none !important;
    }

    .matches-page .matches-hero-actions {
        display: flex !important;
        gap: 7px !important;
        flex-wrap: nowrap !important;
        margin-top: 4px !important;
    }

    .matches-page .matches-hero-actions .button {
        flex: 1 1 0 !important;
        min-height: 32px !important;
        padding: 0 9px !important;
        font-size: 0.72rem !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    .matches-page .matches-hero-panel {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 8px !important;
    }

    .matches-page .matches-hero-stat {
        padding: 6px !important;
        border-radius: 11px !important;
    }

    .matches-page .matches-hero-stat strong {
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

    .matches-page .matches-hero-stat span {
        font-size: 0.54rem !important;
        line-height: 1.05 !important;
    }

    /* Snel naar: niet sticky op mobiel, compact als horizontale chips */
    .matches-page .matches-sticky-jump-wrap {
        position: static !important;
        margin: 0 0 8px !important;
    }

    .matches-page .matches-sticky-jump,
    .matches-page .section-jump-card {
        position: static !important;
        top: auto !important;
        padding: 7px !important;
        border-radius: 15px !important;
        box-shadow: none !important;
        border: 1px solid rgba(30, 41, 59, 0.08) !important;
        background: rgba(255, 255, 255, 0.72) !important;
    }

    .matches-page .matches-sticky-jump > div:first-child,
    .matches-page .section-jump-card > div:first-child {
        display: none !important;
    }

    .matches-page .section-jump-buttons {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .matches-page .section-jump-buttons::-webkit-scrollbar {
        display: none !important;
    }

    .matches-page .section-jump-button {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /* Secties */
    .matches-page .matches-list {
        display: grid !important;
        gap: 9px !important;
    }

    .matches-page .phase-block {
        display: grid !important;
        gap: 7px !important;
        margin: 0 !important;
    }

    .matches-page .phase-heading {
        margin: 8px 0 2px !important;
        padding: 0 2px !important;
        display: flex !important;
        align-items: end !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .matches-page .phase-heading h2 {
        font-size: 1rem !important;
        line-height: 1.08 !important;
        margin: 1px 0 0 !important;
    }

    .matches-page .phase-heading .eyebrow {
        font-size: 0.56rem !important;
    }

    .matches-page .phase-count {
        font-size: 0.65rem !important;
        padding: 4px 7px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    .matches-page .matches-section-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    /* Wedstrijdkaart: veel platter */
    .matches-page .match-card {
        padding: 7px 8px !important;
        border-radius: 14px !important;
        border-width: 1px !important;
        min-height: 0 !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.035) !important;
    }

    .matches-page .match-card.flag-split-card {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.38), rgba(255,255,255,0.86), rgba(37,99,235,0.38)) border-box !important;
    }

    .matches-page .match-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin-bottom: 4px !important;
    }

    .matches-page .match-top small {
        flex: 0 0 auto !important;
        font-size: 0.62rem !important;
        color: rgba(15, 23, 42, 0.55) !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .matches-page .match-meta {
        min-width: 0 !important;
        display: flex !important;
        gap: 4px !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    .matches-page .match-meta span {
        flex: 0 0 auto !important;
        min-height: 17px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        font-size: 0.54rem !important;
        line-height: 17px !important;
        letter-spacing: 0.035em !important;
        white-space: nowrap !important;
    }

    .matches-page .match-meta span:nth-child(2) {
        display: none !important;
    }

    /* Teamrij */
    .matches-page .match-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
        gap: 6px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .matches-page .team-side {
        min-width: 0 !important;
        text-align: center !important;
    }

    .matches-page .team-label {
        display: none !important;
    }

    .matches-page .team-side strong {
        display: block !important;
        font-size: 0.78rem !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        color: #0f172a !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .matches-page .match-score {
        width: 54px !important;
        min-width: 54px !important;
        min-height: 34px !important;
        padding: 4px 5px !important;
        border-radius: 11px !important;
        border-width: 1px !important;
    }

    .matches-page .match-score strong {
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.04em !important;
    }

    .matches-page .match-score span {
        display: block !important;
        margin-top: 2px !important;
        max-width: 44px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.45rem !important;
        line-height: 1 !important;
        letter-spacing: 0.03em !important;
    }

    /* Voorspellingen: klein en scrollbaar */
    .matches-page .prediction-strip {
        display: flex !important;
        gap: 4px !important;
        margin-top: 5px !important;
        padding: 4px 0 0 !important;
        max-height: 33px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .matches-page .prediction-strip::-webkit-scrollbar {
        display: none !important;
    }

    .matches-page .prediction-pill {
        flex: 0 0 auto !important;
        min-width: 74px !important;
        max-width: 94px !important;
        min-height: 27px !important;
        padding: 4px 6px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        border: 1px solid rgba(30, 41, 59, 0.08) !important;
    }

    .matches-page .prediction-pill span,
    .matches-page .prediction-pill strong {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.6rem !important;
        line-height: 1.05 !important;
    }

    .matches-page .prediction-pill small {
        display: none !important;
    }
}


/* =========================================================
   MOBILE MATCH DETAIL — compacte app-weergave
   Fase 4: /wedstrijd/<id>
   ========================================================= */

@media (max-width: 860px) {
    /*
       Page heading op mobiel veel compacter.
       Geen grote webpagina-header.
    */
    .page-heading.split {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin: 0 0 10px !important;
    }

    .page-heading.split .eyebrow {
        font-size: 0.58rem !important;
        letter-spacing: 0.055em !important;
    }

    .page-heading.split h1 {
        font-size: 1.38rem !important;
        line-height: 1.06 !important;
        letter-spacing: -0.055em !important;
        margin: 2px 0 0 !important;
    }

    .page-heading.split p {
        display: none !important;
    }

    .page-heading.split .button {
        min-height: 34px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
    }

    /*
       Match hero: compacte scorekaart.
    */
    .match-detail-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 10px 11px !important;
        margin: 0 0 10px !important;
        border-radius: 18px !important;
        border: 1.3px solid transparent !important;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.45), rgba(255,255,255,0.88), rgba(37,99,235,0.45)) border-box !important;
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055) !important;
    }

    .match-detail-team {
        min-width: 0 !important;
        text-align: center !important;
    }

    .match-detail-team span {
        display: none !important;
    }

    .match-detail-team strong {
        display: block !important;
        color: #0f172a !important;
        font-size: 0.88rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .match-detail-score {
        width: 72px !important;
        min-width: 72px !important;
        min-height: 48px !important;
        padding: 6px 7px !important;
        border-radius: 15px !important;
        border: 1px solid rgba(30, 41, 59, 0.10) !important;
        background:
            linear-gradient(135deg, rgba(239,68,68,0.08), rgba(37,99,235,0.11)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.75) !important;
    }

    .match-detail-score strong {
        font-size: 1.2rem !important;
        line-height: 1 !important;
        letter-spacing: -0.06em !important;
        color: #0f172a !important;
        font-weight: 1000 !important;
    }

    .match-detail-score span {
        display: block !important;
        margin-top: 4px !important;
        max-width: 62px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: rgba(15, 23, 42, 0.56) !important;
        font-size: 0.52rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.045em !important;
    }

    /*
       Detailgrid onder elkaar, compact.
    */
    .match-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .match-live-card,
    .match-projected-points-card {
        padding: 12px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(30, 41, 59, 0.10) !important;
        background: rgba(255, 255, 255, 0.86) !important;
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.05) !important;
    }

    .match-live-card .section-title,
    .match-projected-points-card .section-title {
        margin: 0 0 9px !important;
    }

    .match-live-card .section-title h2,
    .match-projected-points-card .section-title h2 {
        font-size: 1rem !important;
        line-height: 1.08 !important;
        margin: 1px 0 0 !important;
        letter-spacing: -0.04em !important;
    }

    .match-live-card .eyebrow,
    .match-projected-points-card .eyebrow {
        font-size: 0.56rem !important;
    }

    /*
       Live gegevens als compacte 2-koloms stats.
    */
    .live-stat-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .live-stat-list > div {
        min-width: 0 !important;
        padding: 8px !important;
        border-radius: 13px !important;
        background: rgba(248, 250, 252, 0.88) !important;
        border: 1px solid rgba(30, 41, 59, 0.07) !important;
    }

    .live-stat-list span {
        display: block !important;
        margin-bottom: 3px !important;
        color: rgba(15, 23, 42, 0.52) !important;
        font-size: 0.58rem !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.045em !important;
    }

    .live-stat-list strong {
        display: block !important;
        color: #0f172a !important;
        font-size: 0.78rem !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .match-detail-note {
        margin: 9px 0 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    /*
       Projected score / puntenkaart.
    */
    .match-projected-score {
        padding: 10px !important;
        border-radius: 15px !important;
        margin-bottom: 10px !important;
        background:
            linear-gradient(135deg, rgba(239,68,68,0.08), rgba(37,99,235,0.10)) !important;
        border: 1px solid rgba(30, 41, 59, 0.08) !important;
        text-align: center !important;
    }

    .match-projected-score-kicker,
    .match-projected-score-sub {
        display: block !important;
        color: rgba(15, 23, 42, 0.58) !important;
        font-size: 0.6rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.055em !important;
    }

    .match-projected-score strong {
        display: block !important;
        margin: 5px 0 !important;
        color: #0f172a !important;
        font-size: 1.7rem !important;
        line-height: 1 !important;
        letter-spacing: -0.06em !important;
        font-weight: 1000 !important;
    }

    /*
       Tabelkop compacter.
    */
    .match-projected-table-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 72px 52px !important;
        gap: 7px !important;
        padding: 0 6px 5px !important;
        color: rgba(15, 23, 42, 0.52) !important;
        font-size: 0.58rem !important;
        font-weight: 1000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.045em !important;
    }

    /*
       Voorspellingen van deelnemers als compacte lijst.
    */
    .match-prediction-list {
        display: grid !important;
        gap: 5px !important;
    }

    .match-prediction-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 72px 52px !important;
        gap: 7px !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 6px 7px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(30, 41, 59, 0.07) !important;
        background: rgba(248, 250, 252, 0.82) !important;
        box-shadow: none !important;
    }

    .match-prediction-row strong {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #0f172a !important;
        font-size: 0.74rem !important;
        font-weight: 950 !important;
    }

    .match-prediction-row span {
        color: rgba(15, 23, 42, 0.72) !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .match-prediction-row em {
        justify-self: end !important;
        min-width: 42px !important;
        padding: 4px 6px !important;
        border-radius: 999px !important;
        background: rgba(37, 99, 235, 0.10) !important;
        color: #1e3a8a !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        font-style: normal !important;
        font-weight: 1000 !important;
        text-align: center !important;
    }

    .match-prediction-row.is-empty {
        opacity: 0.68 !important;
    }

    .match-prediction-row.is-empty em {
        background: rgba(100, 116, 139, 0.10) !important;
        color: #64748b !important;
    }
}


/* =========================================================
   MATCH CARD LINKS
   Hele wedstrijdkaart klikbaar maken
   ========================================================= */

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

.match-card-link:hover {
    text-decoration: none;
}

.match-card-link:active .match-card {
    transform: scale(0.992);
}

@media (max-width: 860px) {
    .match-card-link {
        -webkit-tap-highlight-color: transparent;
    }

    .match-card-link:active .match-card {
        transform: scale(0.985);
    }
}


/* =========================================================
   MOBILE MY PREDICTIONS — compacte app-weergave
   Fase 5: /voorspellen
   ========================================================= */

@media (max-width: 860px) {
    /*
       Page heading: compact.
    */
    .page-heading-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    .page-heading-actions .button {
        min-height: 34px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }

    /*
       Speeldagstatus: belangrijke kaart, maar niet te groot.
    */
    .my-day-status-card {
        padding: 11px 12px !important;
        margin: 0 0 9px !important;
        border-radius: 17px !important;
        border: 1.2px solid transparent !important;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.42), rgba(255,255,255,0.86), rgba(37,99,235,0.42)) border-box !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
    }

    .my-day-status-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .my-day-status-main .eyebrow {
        font-size: 0.56rem !important;
    }

    .my-day-status-main h2 {
        margin: 2px 0 3px !important;
        font-size: 1rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    .my-day-status-main p {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        color: rgba(15, 23, 42, 0.62) !important;
    }

    .my-day-status-score {
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        border-radius: 17px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(239,68,68,0.08)) !important;
        border: 1px solid rgba(30, 41, 59, 0.08) !important;
    }

    .my-day-status-score strong {
        font-size: 1rem !important;
        line-height: 1 !important;
        letter-spacing: -0.05em !important;
    }

    .my-day-status-score span {
        margin-top: 3px !important;
        font-size: 0.52rem !important;
        text-transform: uppercase !important;
        font-weight: 1000 !important;
        letter-spacing: 0.045em !important;
    }

    /*
       Nog invullen: chips onder status, compact en scrollbaar.
    */
    .my-day-missing {
        margin-top: 9px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(30, 41, 59, 0.08) !important;
    }

    .my-day-missing .eyebrow {
        font-size: 0.54rem !important;
    }

    .my-day-missing-list {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding-top: 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .my-day-missing-list::-webkit-scrollbar {
        display: none !important;
    }

    .my-day-missing-list a {
        flex: 0 0 auto !important;
        min-width: 132px !important;
        max-width: 170px !important;
        padding: 7px 8px !important;
        border-radius: 13px !important;
        border: 1px solid rgba(30, 41, 59, 0.08) !important;
        background: rgba(248, 250, 252, 0.88) !important;
        text-decoration: none !important;
    }

    .my-day-missing-list strong {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.68rem !important;
        color: #0f172a !important;
    }

    .my-day-missing-list small {
        display: block !important;
        margin-top: 2px !important;
        font-size: 0.56rem !important;
        color: rgba(15, 23, 42, 0.56) !important;
        font-weight: 900 !important;
    }

    /*
       Snel naar: niet als grote kaart, maar als kleine horizontale chips.
    */
    .section-jump-card {
        position: static !important;
        padding: 7px !important;
        margin: 0 0 9px !important;
        border-radius: 15px !important;
        box-shadow: none !important;
        border: 1px solid rgba(30, 41, 59, 0.08) !important;
        background: rgba(255, 255, 255, 0.72) !important;
    }

    .section-jump-card > div:first-child {
        display: none !important;
    }

    .section-jump-buttons {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .section-jump-buttons::-webkit-scrollbar {
        display: none !important;
    }

    .section-jump-buttons a {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /*
       Sectietitels compacter.
    */
    .section-title {
        margin: 10px 0 7px !important;
        align-items: end !important;
    }

    .section-title h2 {
        font-size: 1.05rem !important;
        line-height: 1.08 !important;
        margin: 1px 0 0 !important;
    }

    .section-title .muted {
        display: none !important;
    }

    .phase-block {
        gap: 7px !important;
        margin: 0 !important;
    }

    .phase-heading {
        margin: 8px 0 2px !important;
        padding: 0 2px !important;
    }

    .phase-heading h2 {
        font-size: 1rem !important;
        line-height: 1.08 !important;
        margin: 1px 0 0 !important;
    }

    .phase-count {
        font-size: 0.65rem !important;
        padding: 4px 7px !important;
        border-radius: 999px !important;
    }

    /*
       Open voorspellingen: compacte inputkaart.
    */
    .prediction-editor-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .prediction-editor {
        padding: 8px 9px !important;
        border-radius: 15px !important;
        border-width: 1px !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.035) !important;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.38), rgba(255,255,255,0.86), rgba(37,99,235,0.38)) border-box !important;
    }

    .prediction-editor-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    .prediction-editor-head .eyebrow {
        font-size: 0.52rem !important;
    }

    .prediction-editor-head strong {
        display: block !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        color: #0f172a !important;
    }

    .prediction-editor-head small {
        flex: 0 0 auto !important;
        font-size: 0.58rem !important;
        color: rgba(15, 23, 42, 0.55) !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .prediction-editor-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
        gap: 6px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .prediction-team {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        gap: 6px !important;
        align-items: center !important;
    }

    .prediction-team.away {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }

    .prediction-team span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.78rem !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        color: #0f172a !important;
    }

    .prediction-team input {
        width: 44px !important;
        min-width: 44px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        text-align: center !important;
        font-size: 1rem !important;
        font-weight: 1000 !important;
        color: #0f172a !important;
        border: 1px solid rgba(30, 41, 59, 0.13) !important;
        background: rgba(255, 255, 255, 0.92) !important;
    }

    .prediction-separator {
        width: 18px !important;
        text-align: center !important;
        color: rgba(15, 23, 42, 0.50) !important;
        font-size: 0.9rem !important;
        font-weight: 1000 !important;
    }

    .prediction-editor-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 7px !important;
        align-items: center !important;
        margin-top: 7px !important;
    }

    .prediction-editor-actions .muted {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.62rem !important;
    }

    .prediction-editor-actions .button.small {
        min-height: 31px !important;
        padding: 0 11px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
    }

    /*
       Gesloten voorspellingen: lijststijl, heel compact.
    */
    .locked-section .stack {
        display: grid !important;
        gap: 6px !important;
    }

    .locked-prediction {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 58px !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 7px 8px !important;
        border-radius: 14px !important;
        border-width: 1px !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03) !important;
    }

    .locked-prediction .eyebrow {
        font-size: 0.52rem !important;
    }

    .locked-prediction strong {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.76rem !important;
        line-height: 1.05 !important;
    }

    .locked-prediction small {
        display: block !important;
        margin-top: 2px !important;
        font-size: 0.56rem !important;
        color: rgba(15, 23, 42, 0.54) !important;
        font-weight: 900 !important;
    }

    .locked-score {
        width: 58px !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 11px !important;
        background: rgba(37, 99, 235, 0.09) !important;
        color: #0f172a !important;
        font-size: 0.86rem !important;
        font-weight: 1000 !important;
    }

    /*
       Empty states kleiner.
    */
    .empty.card {
        padding: 14px !important;
        border-radius: 17px !important;
    }

    .empty-icon {
        font-size: 1.4rem !important;
    }

    .empty h2 {
        font-size: 1rem !important;
    }

    .empty p {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }
}


/* =========================================================
   MOBILE MY PREDICTIONS — COMPACT V2
   Lager, strakker, meer app-lijst dan webkaarten
   ========================================================= */

@media (max-width: 860px) {
    /*
       Bovenste header nog kleiner.
    */
    .page-heading.split {
        margin-bottom: 7px !important;
        gap: 6px !important;
    }

    .page-heading.split h1 {
        font-size: 1.18rem !important;
        line-height: 1.02 !important;
        margin: 0 !important;
    }

    .page-heading.split .eyebrow {
        font-size: 0.52rem !important;
    }

    .page-heading-actions {
        gap: 5px !important;
    }

    .page-heading-actions .button {
        min-height: 30px !important;
        padding: 0 8px !important;
        font-size: 0.64rem !important;
    }

    /*
       Speeldagstatus platter.
    */
    .my-day-status-card {
        padding: 8px 9px !important;
        margin-bottom: 7px !important;
        border-radius: 14px !important;
        box-shadow: 0 3px 9px rgba(15, 23, 42, 0.035) !important;
    }

    .my-day-status-main {
        gap: 7px !important;
    }

    .my-day-status-main h2 {
        font-size: 0.88rem !important;
        line-height: 1.05 !important;
        margin: 1px 0 2px !important;
    }

    .my-day-status-main p {
        font-size: 0.64rem !important;
        line-height: 1.18 !important;
    }

    .my-day-status-score {
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        border-radius: 13px !important;
    }

    .my-day-status-score strong {
        font-size: 0.86rem !important;
    }

    .my-day-status-score span {
        font-size: 0.46rem !important;
    }

    .my-day-missing {
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

    .my-day-missing-list {
        gap: 5px !important;
        padding-top: 5px !important;
    }

    .my-day-missing-list a {
        min-width: 118px !important;
        max-width: 150px !important;
        padding: 5px 7px !important;
        border-radius: 11px !important;
    }

    .my-day-missing-list strong {
        font-size: 0.62rem !important;
    }

    .my-day-missing-list small {
        font-size: 0.5rem !important;
    }

    /*
       Snel naar bijna als filterbalk.
    */
    .section-jump-card {
        padding: 5px !important;
        margin-bottom: 7px !important;
        border-radius: 12px !important;
    }

    .section-jump-buttons {
        gap: 5px !important;
    }

    .section-jump-buttons a {
        min-height: 24px !important;
        padding: 0 8px !important;
        font-size: 0.61rem !important;
    }

    /*
       Titels/phase headers lager.
    */
    .section-title {
        margin: 7px 0 5px !important;
    }

    .section-title h2 {
        font-size: 0.94rem !important;
    }

    .phase-heading {
        margin: 6px 0 2px !important;
    }

    .phase-heading h2 {
        font-size: 0.88rem !important;
    }

    .phase-heading .eyebrow {
        font-size: 0.51rem !important;
    }

    .phase-count {
        font-size: 0.58rem !important;
        padding: 3px 6px !important;
    }

    /*
       Open voorspellingkaarten: dit is de grote winst.
    */
    .prediction-editor-list {
        gap: 5px !important;
    }

    .prediction-editor {
        padding: 6px 7px !important;
        border-radius: 13px !important;
        box-shadow: 0 2px 7px rgba(15, 23, 42, 0.03) !important;
    }

    .prediction-editor-head {
        margin-bottom: 4px !important;
        gap: 4px !important;
    }

    .prediction-editor-head .eyebrow {
        display: none !important;
    }

    .prediction-editor-head strong {
        font-size: 0.58rem !important;
        color: rgba(15, 23, 42, 0.56) !important;
        font-weight: 900 !important;
    }

    .prediction-editor-head small {
        font-size: 0.52rem !important;
        color: rgba(15, 23, 42, 0.48) !important;
    }

    .prediction-editor-main {
        grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .prediction-team {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        gap: 4px !important;
    }

    .prediction-team.away {
        grid-template-columns: 38px minmax(0, 1fr) !important;
    }

    .prediction-team span {
        font-size: 0.7rem !important;
        line-height: 1 !important;
    }

    .prediction-team input {
        width: 38px !important;
        min-width: 38px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 10px !important;
        font-size: 0.92rem !important;
    }

    .prediction-separator {
        width: 14px !important;
        font-size: 0.78rem !important;
    }

    .prediction-editor-actions {
        margin-top: 5px !important;
        grid-template-columns: 1fr auto !important;
        gap: 5px !important;
    }

    /*
       Stad/locatie kost hoogte en is op mobiel minder belangrijk.
    */
    .prediction-editor-actions .muted {
        display: none !important;
    }

    .prediction-editor-actions .button.small {
        min-height: 27px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        font-size: 0.64rem !important;
    }

    /*
       Gesloten voorspellingen: nog platter.
    */
    .locked-section .stack {
        gap: 4px !important;
    }

    .locked-prediction {
        grid-template-columns: minmax(0, 1fr) 48px !important;
        gap: 6px !important;
        padding: 5px 7px !important;
        border-radius: 12px !important;
    }

    .locked-prediction .eyebrow {
        display: none !important;
    }

    .locked-prediction strong {
        font-size: 0.68rem !important;
    }

    .locked-prediction small {
        margin-top: 1px !important;
        font-size: 0.5rem !important;
    }

    .locked-score {
        width: 48px !important;
        min-height: 29px !important;
        border-radius: 9px !important;
        font-size: 0.74rem !important;
    }
}


/* =========================================================
   MOBILE PREDICTION INPUT LAYOUT
   Volledige landnamen boven de invulvakken
   ========================================================= */

@media (max-width: 860px) {
    /*
       Mijn voorspellingen:
       teamnaam boven, scorevak eronder.
    */
    .prediction-editor-main {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
        gap: 6px !important;
        align-items: start !important;
    }

    .prediction-team,
    .prediction-team.away {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    .prediction-team span,
    .prediction-team.away span {
        display: block !important;
        width: 100% !important;
        min-height: 2.2em !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
        color: #0f172a !important;
    }

    .prediction-team input,
    .prediction-team.away input {
        align-self: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 34px !important;
        min-height: 34px !important;
        order: 2 !important;
    }

    .prediction-team span {
        order: 1 !important;
    }

    .prediction-team.away span {
        order: 1 !important;
    }

    .prediction-team.away input {
        order: 2 !important;
    }

    .prediction-separator {
        align-self: end !important;
        padding-bottom: 8px !important;
    }

    /*
       Snel voorspellen:
       ook volledige namen boven de scoreknoppen/input.
    */
    .quick-predict-card .prediction-editor-main,
    .quick-predict-form .prediction-editor-main {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .quick-predict-card .prediction-team,
    .quick-predict-card .prediction-team.away,
    .quick-predict-form .prediction-team,
    .quick-predict-form .prediction-team.away {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
    }

    .quick-predict-card .prediction-team span,
    .quick-predict-card .prediction-team.away span,
    .quick-predict-form .prediction-team span,
    .quick-predict-form .prediction-team.away span {
        display: block !important;
        width: 100% !important;
        min-height: 2.2em !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
    }

    .quick-predict-card .prediction-team input,
    .quick-predict-card .prediction-team.away input,
    .quick-predict-form .prediction-team input,
    .quick-predict-form .prediction-team.away input {
        align-self: center !important;
        order: 2 !important;
    }

    .quick-predict-card .prediction-team span,
    .quick-predict-card .prediction-team.away span,
    .quick-predict-form .prediction-team span,
    .quick-predict-form .prediction-team.away span {
        order: 1 !important;
    }
}


/* =========================================================
   MOBILE PREDICTION INPUT ALIGNMENT FIX
   Namen boven, scorevakken strak op één lijn
   ========================================================= */

@media (max-width: 860px) {
    /*
       Hoofdgrid: twee gelijke teamkolommen + smalle separator.
    */
    .prediction-editor-main,
    .quick-predict-card .prediction-editor-main,
    .quick-predict-form .prediction-editor-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    /*
       Beide teams exact dezelfde interne layout:
       rij 1 = teamnaam
       rij 2 = input
    */
    .prediction-team,
    .prediction-team.away,
    .quick-predict-card .prediction-team,
    .quick-predict-card .prediction-team.away,
    .quick-predict-form .prediction-team,
    .quick-predict-form .prediction-team.away {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(34px, auto) 36px !important;
        gap: 5px !important;
        align-items: start !important;
        justify-items: center !important;
        min-width: 0 !important;
    }

    /*
       Teamnamen: altijd bovenaan, gecentreerd, maximaal twee regels.
    */
    .prediction-team span,
    .prediction-team.away span,
    .quick-predict-card .prediction-team span,
    .quick-predict-card .prediction-team.away span,
    .quick-predict-form .prediction-team span,
    .quick-predict-form .prediction-team.away span {
        order: 0 !important;
        grid-row: 1 !important;
        align-self: start !important;

        display: -webkit-box !important;
        width: 100% !important;
        min-height: 31px !important;
        max-height: 34px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        text-align: center !important;
        font-size: 0.7rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
        color: #0f172a !important;
    }

    /*
       Inputs: altijd tweede rij en exact zelfde formaat.
    */
    .prediction-team input,
    .prediction-team.away input,
    .quick-predict-card .prediction-team input,
    .quick-predict-card .prediction-team.away input,
    .quick-predict-form .prediction-team input,
    .quick-predict-form .prediction-team.away input {
        order: 1 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: center !important;

        width: 44px !important;
        min-width: 44px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;

        text-align: center !important;
    }

    /*
       Separator exact op inputhoogte, niet op naamhoogte.
    */
    .prediction-separator,
    .quick-predict-card .prediction-separator,
    .quick-predict-form .prediction-separator {
        align-self: start !important;
        justify-self: center !important;
        width: 18px !important;
        height: 36px !important;
        margin-top: 36px !important;
        padding: 0 !important;

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

        font-size: 0.9rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        color: rgba(15, 23, 42, 0.48) !important;
    }

    /*
       Voorkom dat oudere compact-v2 regels de uitploeg weer omdraaien.
    */
    .prediction-team.away {
        direction: ltr !important;
    }

    .prediction-team.away input,
    .prediction-team.away span {
        direction: ltr !important;
    }
}


/* =========================================================
   MOBILE RENDER MATCH V1
   Van losse mobiele fixes naar één echte app-stijl
   ========================================================= */

@media (max-width: 860px) {
    :root {
        --app-bg: #f3f6fb;
        --app-card: rgba(255, 255, 255, 0.94);
        --app-text: #10233f;
        --app-muted: rgba(16, 35, 63, 0.62);
        --app-red: #ef4444;
        --app-blue: #2563eb;
        --app-shadow: 0 10px 26px rgba(16, 35, 63, 0.08);
        --app-soft-shadow: 0 5px 14px rgba(16, 35, 63, 0.055);
        --app-radius: 22px;
        --app-radius-sm: 16px;
    }

    html {
        background: var(--app-bg) !important;
    }

    body {
        background:
            radial-gradient(circle at top left, rgba(239, 68, 68, 0.13), transparent 34%),
            radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 36%),
            linear-gradient(180deg, #f8fbff 0%, #eef3fa 100%) !important;
        color: var(--app-text) !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
    }

    /*
       Algemene mobiele app-container.
       Hierdoor voelt het minder als brede website.
    */
    main,
    .main,
    .container,
    .page,
    .content {
        max-width: 430px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /*
       Desktopachtige grote spacing eruit.
    */
    section {
        scroll-margin-top: 14px !important;
    }

    .card,
    .dashboard-tile,
    .dashboard-side-tile,
    .quick-panel,
    .prediction-editor,
    .locked-prediction,
    .match-card,
    .match-detail-hero,
    .match-live-card,
    .match-projected-points-card,
    .my-day-status-card,
    .section-jump-card,
    .empty {
        border-radius: var(--app-radius) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: var(--app-card) !important;
        box-shadow: var(--app-soft-shadow) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /*
       Poolbaas-app gevoel: subtiele rood-wit-blauwe bovenrand op belangrijke cards.
    */
    .hero-dashboard,
    .my-day-status-card,
    .match-detail-hero,
    .prediction-editor,
    .quick-predict-card,
    .leaderboard-tile,
    .upcoming-tile {
        position: relative !important;
        overflow: hidden !important;
    }

    .hero-dashboard::before,
    .my-day-status-card::before,
    .match-detail-hero::before,
    .prediction-editor::before,
    .quick-predict-card::before,
    .leaderboard-tile::before,
    .upcoming-tile::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        height: 3px !important;
        background: linear-gradient(90deg, var(--app-red), #ffffff, var(--app-blue)) !important;
        pointer-events: none !important;
    }

    /*
       Koppen kleiner en app-achtig.
    */
    .page-heading.split {
        padding: 4px 2px 0 !important;
        margin-bottom: 10px !important;
    }

    .page-heading.split h1 {
        color: var(--app-text) !important;
        font-size: 1.28rem !important;
        line-height: 1.02 !important;
        letter-spacing: -0.055em !important;
    }

    .page-heading.split p {
        color: var(--app-muted) !important;
        font-size: 0.76rem !important;
        line-height: 1.28 !important;
    }

    .eyebrow {
        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.56rem !important;
        letter-spacing: 0.08em !important;
        font-weight: 1000 !important;
    }

    /*
       Dashboard hero dichter bij de render:
       grote welkom-card, maar niet lomp.
    */
    .dashboard-top-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 10px !important;
    }

    .dashboard-hero-wrap,
    .dashboard-top-quick {
        min-width: 0 !important;
    }

    .hero-dashboard {
        padding: 17px 15px 15px !important;
        border-radius: 26px !important;
        box-shadow: var(--app-shadow) !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,249,254,0.94)) !important;
    }

    .hero-dashboard h1,
    .hero-dashboard .hero-title,
    .hero-dashboard strong {
        color: var(--app-text) !important;
    }

    .hero-dashboard h1 {
        font-size: 1.55rem !important;
        line-height: 0.98 !important;
        letter-spacing: -0.065em !important;
        margin-bottom: 7px !important;
    }

    .hero-dashboard p {
        font-size: 0.82rem !important;
        line-height: 1.32 !important;
        color: var(--app-muted) !important;
    }

    /*
       Dashboard action card naast/onder hero wordt render-achtig compact.
    */
    .dashboard-action-award-card,
    .quick-panel {
        padding: 12px !important;
        border-radius: 22px !important;
    }

    /*
       Dashboard twee kolommen mobiel altijd één kolom.
    */
    .dashboard-two-columns,
    .layout-two {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .dashboard-left-column,
    .dashboard-right-column {
        display: grid !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    /*
       Leaderboard als app-list.
    */
    .leaderboard-tile {
        padding: 12px !important;
    }

    .leaderboard-row,
    .leaderboard-item,
    .standing-row {
        border-radius: 15px !important;
        background: rgba(248, 250, 252, 0.82) !important;
        border: 1px solid rgba(16, 35, 63, 0.06) !important;
        box-shadow: none !important;
    }

    /*
       Knoppen zoals in render: pill buttons.
    */
    .button,
    button.button,
    a.button {
        border-radius: 999px !important;
        min-height: 36px !important;
        font-weight: 950 !important;
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.13) !important;
    }

    .button.secondary,
    a.button.secondary {
        background: rgba(255,255,255,0.84) !important;
        color: var(--app-text) !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        box-shadow: none !important;
    }

    /*
       Voorspelkaarten iets meer render/card-stijl, maar compact.
    */
    .prediction-editor {
        border-radius: 20px !important;
        padding: 9px !important;
        box-shadow: var(--app-soft-shadow) !important;
    }

    .prediction-team span,
    .prediction-team.away span {
        color: var(--app-text) !important;
    }

    .prediction-team input,
    .prediction-team.away input {
        background: #ffffff !important;
        border: 1px solid rgba(16, 35, 63, 0.12) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.85) !important;
    }

    /*
       Wedstrijdenlijst als nette render-cards.
    */
    .matches-page .match-card {
        border-radius: 19px !important;
        padding: 10px !important;
        box-shadow: var(--app-soft-shadow) !important;
    }

    .matches-page .match-main {
        align-items: center !important;
    }

    .matches-page .team-side strong {
        color: var(--app-text) !important;
    }

    .matches-page .match-score {
        background:
            linear-gradient(135deg, rgba(239,68,68,0.08), rgba(37,99,235,0.10)) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        border-radius: 15px !important;
    }

    /*
       Wedstrijddetail als render-scorecard.
    */
    .match-detail-hero {
        border-radius: 24px !important;
        padding: 13px 12px !important;
        box-shadow: var(--app-shadow) !important;
    }

    .match-detail-score {
        background:
            linear-gradient(135deg, rgba(239,68,68,0.10), rgba(37,99,235,0.12)) !important;
        border-radius: 17px !important;
    }

    /*
       Bottom nav: render-achtig, maar simpel/stabiel.
    */
    .mobile-app-nav {
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;

        border-radius: 24px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;

        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow:
            0 16px 40px rgba(16, 35, 63, 0.18),
            inset 0 1px 0 rgba(255,255,255,0.90) !important;

        padding: 7px !important;
        gap: 4px !important;
    }

    .mobile-app-nav::before {
        content: none !important;
        display: none !important;
    }

    .mobile-app-nav-link {
        border-radius: 18px !important;
        min-height: 48px !important;
        color: rgba(16, 35, 63, 0.62) !important;
        font-weight: 950 !important;
    }

    .mobile-app-nav-link.is-active {
        color: var(--app-text) !important;
        background:
            linear-gradient(135deg, rgba(239,68,68,0.10), rgba(37,99,235,0.13)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.85) !important;
    }

    /*
       Voorkom dat content achter de floating nav valt.
    */
    .match-detail-grid,
    .dashboard-two-columns,
    .prediction-editor-list,
    .matches-list {
        padding-bottom: 12px !important;
    }
}


/* =========================================================
   MOBILE DASHBOARD PRIORITY
   Poolbaas van de dag direct bovenaan tonen
   ========================================================= */

@media (max-width: 860px) {
    /*
       In de dashboard top-row staat:
       - hero
       - quick/poolbaas card

       Op mobiel zetten we de quick/poolbaas card boven de hero.
    */
    .dashboard-top-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .dashboard-top-quick {
        order: -10 !important;
    }

    .dashboard-hero-wrap {
        order: 1 !important;
    }

    /*
       De Poolbaas/voorspelstatus-card moet direct zichtbaar zijn,
       niet te groot, maar wel prominent.
    */
    .dashboard-top-quick .quick-panel,
    .dashboard-top-quick .dashboard-action-award-card {
        margin-top: 0 !important;
        padding: 12px !important;
        border-radius: 24px !important;
        box-shadow: 0 10px 26px rgba(16, 35, 63, 0.08) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,249,254,0.94)) !important;
    }

    /*
       Zorg dat de kaart niet voelt als een zijpaneel,
       maar als de eerste app-card.
    */
    .dashboard-top-quick .section-title,
    .dashboard-top-quick .quick-panel-header,
    .dashboard-top-quick h2,
    .dashboard-top-quick h3 {
        margin-top: 0 !important;
    }

    /*
       Hero iets minder dominant omdat Poolbaas nu bovenaan staat.
    */
    .dashboard-hero-wrap .hero-dashboard {
        margin-top: 0 !important;
    }
}


/* =========================================================
   DASHBOARD SPLIT: Poolbaas los bovenaan, status onder hero
   ========================================================= */

.mobile-poolbaas-top-card,
.dashboard-prediction-status-card {
    margin-bottom: 14px;
}

.mobile-poolbaas-top-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
}

.mobile-poolbaas-top-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #f59e0b, #ef4444, #2563eb);
}

.mobile-poolbaas-person {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 8px;
}

.mobile-poolbaas-crown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #facc15);
    color: #10233f;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22);
}

.mobile-poolbaas-person strong {
    display: block;
    color: #10233f;
    font-size: 1.05rem;
    line-height: 1.05;
    font-weight: 1000;
}

.mobile-poolbaas-person small {
    display: block;
    margin-top: 3px;
    color: rgba(16, 35, 63, 0.62);
    font-size: 0.78rem;
    font-weight: 850;
}

.mobile-poolbaas-top-card p {
    margin: 10px 0 0;
    color: rgba(16, 35, 63, 0.66);
    font-size: 0.84rem;
    line-height: 1.32;
}

.dashboard-prediction-status-card {
    padding: 14px 16px;
    border-radius: 24px;
}

.dashboard-prediction-status-card .dashboard-action-block {
    display: grid;
    gap: 8px;
}

.dashboard-prediction-status-card .dashboard-action-title {
    color: #10233f;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 1000;
}

.dashboard-prediction-status-card p {
    margin: 0;
    color: rgba(16, 35, 63, 0.64);
    font-size: 0.86rem;
    line-height: 1.3;
}

.dashboard-prediction-status-card .button {
    width: fit-content;
}

/* Desktop: laat het netjes boven elkaar staan maar niet te breed */
@media (min-width: 861px) {
    .mobile-poolbaas-top-card,
    .dashboard-prediction-status-card {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobiel: Poolbaas echt als klein bovenste app-vakje */
@media (max-width: 860px) {
    .mobile-poolbaas-top-card {
        margin: 0 0 10px !important;
        padding: 12px 13px 12px 15px !important;
        border-radius: 22px !important;
        box-shadow: 0 10px 24px rgba(16, 35, 63, 0.08) !important;
    }

    .mobile-poolbaas-top-card .eyebrow {
        font-size: 0.54rem !important;
    }

    .mobile-poolbaas-person {
        gap: 9px !important;
        margin-top: 6px !important;
    }

    .mobile-poolbaas-crown {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        font-size: 1.15rem !important;
        border-radius: 15px !important;
    }

    .mobile-poolbaas-person strong {
        font-size: 0.98rem !important;
    }

    .mobile-poolbaas-person small {
        font-size: 0.7rem !important;
    }

    .mobile-poolbaas-top-card p {
        margin-top: 7px !important;
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
    }

    .dashboard-prediction-status-card {
        margin: 0 0 10px !important;
        padding: 11px 12px !important;
        border-radius: 20px !important;
    }

    .dashboard-prediction-status-card .dashboard-action-block {
        gap: 6px !important;
    }

    .dashboard-prediction-status-card .dashboard-action-title {
        font-size: 1rem !important;
    }

    .dashboard-prediction-status-card p {
        font-size: 0.74rem !important;
    }

    .dashboard-prediction-status-card .button {
        min-height: 31px !important;
        padding: 0 11px !important;
        font-size: 0.68rem !important;
    }
}


/* =========================================================
   POOLBAAS CARD POLISH
   Bovenste mobiele award-card met wereldbeker look
   ========================================================= */

.mobile-poolbaas-top-card {
    isolation: isolate;
}

.mobile-poolbaas-top-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -42px;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.02) 62%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.mobile-poolbaas-crown {
    overflow: visible;
}

.mobile-poolbaas-crown img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 5px 7px rgba(120, 53, 15, 0.24))
        saturate(1.08);
}

.mobile-poolbaas-person > div {
    min-width: 0;
}

.mobile-poolbaas-person strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-poolbaas-top-card .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mobile-poolbaas-top-card .eyebrow::after {
    content: "Vandaag";
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    font-size: 0.58rem;
    font-weight: 1000;
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 860px) {
    .mobile-poolbaas-top-card {
        min-height: 0 !important;
        padding: 11px 12px 11px 14px !important;
        background:
            radial-gradient(circle at top right, rgba(245, 158, 11, 0.20), transparent 38%),
            linear-gradient(145deg, rgba(255,255,255,0.99), rgba(248,250,252,0.95)) !important;
    }

    .mobile-poolbaas-top-card::before {
        width: 3px !important;
    }

    .mobile-poolbaas-person {
        align-items: center !important;
    }

    .mobile-poolbaas-crown {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        border-radius: 16px !important;
        background:
            radial-gradient(circle at 35% 25%, rgba(255,255,255,0.80), transparent 28%),
            linear-gradient(135deg, #facc15, #f59e0b) !important;
        border: 1px solid rgba(146, 64, 14, 0.16) !important;
    }

    .mobile-poolbaas-crown img {
        width: 31px !important;
        height: 31px !important;
    }

    .mobile-poolbaas-person strong {
        font-size: 1rem !important;
        letter-spacing: -0.03em !important;
    }

    .mobile-poolbaas-person small {
        font-size: 0.71rem !important;
        line-height: 1.15 !important;
    }

    .mobile-poolbaas-top-card p {
        max-width: 92% !important;
        color: rgba(16, 35, 63, 0.60) !important;
    }

    .mobile-poolbaas-top-card .eyebrow::after {
        min-height: 17px !important;
        padding: 0 6px !important;
        font-size: 0.52rem !important;
    }
}


/* =========================================================
   POOLBAAS TROPHY CLEANUP
   Wereldbeker zonder geel achtergrondvlak
   ========================================================= */

.mobile-poolbaas-crown {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mobile-poolbaas-crown img {
    width: 36px !important;
    height: 36px !important;
    filter:
        drop-shadow(0 5px 7px rgba(16, 35, 63, 0.18))
        saturate(1.05) !important;
}

@media (max-width: 860px) {
    .mobile-poolbaas-crown {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .mobile-poolbaas-crown img {
        width: 38px !important;
        height: 38px !important;
    }
}


/* =========================================================
   DASHBOARD RENDER V2
   Mobiele homepage dichter naar app-render
   ========================================================= */

.mobile-dashboard-action-grid {
    display: none;
}

@media (max-width: 860px) {
    /*
       Dashboard als echte app-home.
    */
    body {
        background:
            radial-gradient(circle at 12% 0%, rgba(239, 68, 68, 0.16), transparent 28%),
            radial-gradient(circle at 88% 2%, rgba(37, 99, 235, 0.16), transparent 30%),
            linear-gradient(180deg, #f8fbff 0%, #eef3fa 100%) !important;
    }

    /*
       Poolbaas-card bovenaan nog meer als render-badge.
    */
    .mobile-poolbaas-top-card {
        margin-top: 2px !important;
        margin-bottom: 10px !important;
        border-radius: 26px !important;
        padding: 13px 14px !important;
        background:
            radial-gradient(circle at 90% 4%, rgba(245, 158, 11, 0.18), transparent 34%),
            radial-gradient(circle at 0% 100%, rgba(37, 99, 235, 0.08), transparent 32%),
            rgba(255, 255, 255, 0.96) !important;
        box-shadow:
            0 14px 34px rgba(16, 35, 63, 0.10),
            inset 0 1px 0 rgba(255,255,255,0.90) !important;
    }

    .mobile-poolbaas-top-card .eyebrow {
        color: rgba(16, 35, 63, 0.54) !important;
    }

    .mobile-poolbaas-person strong {
        font-size: 1.08rem !important;
        letter-spacing: -0.04em !important;
    }

    .mobile-poolbaas-person small {
        color: rgba(16, 35, 63, 0.58) !important;
    }

    /*
       Hero in render-stijl:
       minder website-tekst, meer app-welkom-card.
    */
    .dashboard-top-row,
    .dashboard-top-row-split {
        margin-bottom: 9px !important;
    }

    .hero-dashboard {
        min-height: 0 !important;
        padding: 18px 15px 14px !important;
        border-radius: 28px !important;
        background:
            radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.13), transparent 35%),
            linear-gradient(145deg, rgba(255,255,255,0.99), rgba(246,249,254,0.95)) !important;
        box-shadow:
            0 14px 34px rgba(16, 35, 63, 0.09),
            inset 0 1px 0 rgba(255,255,255,0.90) !important;
    }

    .hero-dashboard .eyebrow {
        font-size: 0.55rem !important;
    }

    .hero-dashboard h1 {
        max-width: 260px !important;
        font-size: 1.65rem !important;
        line-height: 0.98 !important;
        margin: 4px 0 7px !important;
        color: #10233f !important;
    }

    .hero-dashboard p {
        max-width: 295px !important;
        font-size: 0.8rem !important;
        line-height: 1.28 !important;
        color: rgba(16, 35, 63, 0.61) !important;
    }

    /*
       De hero-knoppen verbergen op mobiel, want we tonen nu echte actiekaarten.
    */
    .hero-dashboard .hero-actions {
        display: none !important;
    }

    /*
       Hero stats als kleine chips, zoals render-dashboard.
    */
    .hero-side-panel {
        margin-top: 12px !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .hero-stats > div {
        padding: 8px 6px !important;
        border-radius: 16px !important;
        background: rgba(248, 250, 252, 0.90) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
        text-align: center !important;
    }

    .hero-stats strong {
        display: block !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        color: #10233f !important;
        font-weight: 1000 !important;
    }

    .hero-stats span {
        display: block !important;
        margin-top: 3px !important;
        font-size: 0.55rem !important;
        color: rgba(16, 35, 63, 0.54) !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.045em !important;
    }

    /*
       Nieuwe render-achtige actiekaarten.
    */
    .mobile-dashboard-action-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 0 10px !important;
    }

    .mobile-dashboard-action-card {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon title"
            "icon sub";
        column-gap: 10px !important;
        row-gap: 2px !important;
        align-items: center !important;

        padding: 10px 12px !important;
        border-radius: 20px !important;
        text-decoration: none !important;
        color: #10233f !important;

        background: rgba(255, 255, 255, 0.94) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        box-shadow: 0 7px 18px rgba(16, 35, 63, 0.065) !important;
    }

    .mobile-dashboard-action-card:active {
        transform: scale(0.988);
    }

    .mobile-action-icon {
        grid-area: icon;
        width: 38px !important;
        height: 38px !important;
        border-radius: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background:
            linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(37, 99, 235, 0.13)) !important;
        font-size: 1.08rem !important;
    }

    .mobile-dashboard-action-card strong {
        grid-area: title;
        min-width: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.05 !important;
        font-weight: 1000 !important;
        color: #10233f !important;
    }

    .mobile-dashboard-action-card small {
        grid-area: sub;
        min-width: 0 !important;
        font-size: 0.68rem !important;
        line-height: 1.12 !important;
        color: rgba(16, 35, 63, 0.56) !important;
        font-weight: 800 !important;
    }

    /*
       Voorspelstatus onder hero, kleiner en rustiger.
    */
    .dashboard-prediction-status-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 11px 12px !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, 0.90) !important;
        box-shadow: 0 7px 18px rgba(16, 35, 63, 0.055) !important;
    }

    .dashboard-prediction-status-card .dashboard-action-block {
        display: contents !important;
    }

    .dashboard-prediction-status-card .eyebrow {
        grid-column: 1 / -1 !important;
    }

    .dashboard-prediction-status-card .dashboard-action-title {
        grid-column: 1 !important;
        font-size: 0.98rem !important;
        line-height: 1.05 !important;
    }

    .dashboard-prediction-status-card p {
        display: none !important;
    }

    .dashboard-prediction-status-card .button {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        font-size: 0.64rem !important;
        white-space: nowrap !important;
    }

    /*
       Klassement meer als compacte render-lijst.
    */
    .leaderboard-tile {
        padding: 11px !important;
        border-radius: 24px !important;
    }

    .leaderboard-tile .section-title {
        margin: 0 0 8px !important;
    }

    .leaderboard-tile .section-title h2 {
        font-size: 1.05rem !important;
        letter-spacing: -0.04em !important;
    }

    .leaderboard.card {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .leader-row {
        min-height: 52px !important;
        padding: 8px !important;
        border-radius: 17px !important;
        background: rgba(248, 250, 252, 0.90) !important;
        border: 1px solid rgba(16, 35, 63, 0.06) !important;
        box-shadow: none !important;
    }

    .leader-row + .leader-row {
        margin-top: 6px !important;
    }

    .leader-rank {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        border-radius: 12px !important;
        font-size: 0.75rem !important;
    }

    .leader-row .avatar {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 14px !important;
    }

    .leader-name strong {
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
    }

    .leader-name small {
        font-size: 0.6rem !important;
        line-height: 1.1 !important;
    }

    .leader-points strong {
        font-size: 0.92rem !important;
    }

    .leader-points small {
        font-size: 0.55rem !important;
    }

    /*
       Komende duels en recente uitslagen minder dominant.
    */
    .recent-results-tile,
    .dashboard-right-column {
        margin-top: 0 !important;
    }

    .mini-match,
    .result-card {
        border-radius: 18px !important;
        box-shadow: 0 5px 14px rgba(16, 35, 63, 0.045) !important;
    }
}

@media (min-width: 861px) {
    .mobile-dashboard-action-grid {
        display: none !important;
    }
}


/* =========================================================
   DASHBOARD MOBILE ALIGNMENT FIX
   Snelle acties weg, alles strak in één app-kolom
   ========================================================= */

@media (max-width: 860px) {
    /*
       Verberg oude render-v2 snelle acties volledig,
       ook als CSS nog ergens bestaat.
    */
    .mobile-dashboard-action-grid,
    .mobile-dashboard-action-card {
        display: none !important;
    }

    /*
       Eén consequente mobiele kolom.
       Geen losse breedtes of zwevende secties.
    */
    main {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    .mobile-poolbaas-top-card,
    .dashboard-top-row,
    .dashboard-top-row-split,
    .dashboard-hero-wrap,
    .hero-dashboard,
    .dashboard-prediction-status-card,
    .dashboard-two-columns,
    .dashboard-left-column,
    .dashboard-right-column,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-tile,
    .dashboard-tile,
    .dashboard-side-tile {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /*
       Vaste verticale spacing.
       Dit is de grootste winst voor "het voelt los".
    */
    .mobile-poolbaas-top-card {
        margin: 0 0 10px !important;
    }

    .dashboard-top-row,
    .dashboard-top-row-split {
        display: block !important;
        margin: 0 0 10px !important;
    }

    .dashboard-hero-wrap {
        margin: 0 !important;
    }

    .dashboard-prediction-status-card {
        margin: 0 0 10px !important;
    }

    .dashboard-two-columns,
    .layout-two {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .dashboard-left-column,
    .dashboard-right-column {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    /*
       Alle hoofdkaarten dezelfde radius, padding en rand.
       Geen kaart die ineens groter/ronder/losser voelt.
    */
    .mobile-poolbaas-top-card,
    .hero-dashboard,
    .dashboard-prediction-status-card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-tile,
    .dashboard-side-tile {
        border-radius: 24px !important;
        padding: 12px !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.07) !important;
        overflow: hidden !important;
    }

    /*
       Poolbaas bovenaan mag premium blijven,
       maar moet dezelfde kolom volgen.
    */
    .mobile-poolbaas-top-card {
        padding: 12px 13px !important;
        background:
            radial-gradient(circle at 92% 0%, rgba(245, 158, 11, 0.14), transparent 34%),
            rgba(255, 255, 255, 0.96) !important;
    }

    .mobile-poolbaas-person {
        margin-top: 6px !important;
    }

    .mobile-poolbaas-top-card p {
        margin-top: 7px !important;
        max-width: none !important;
    }

    /*
       Hero rustiger en beter uitgelijnd.
    */
    .hero-dashboard {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        min-height: 0 !important;
    }

    .hero-dashboard h1 {
        max-width: none !important;
        font-size: 1.48rem !important;
        line-height: 1 !important;
        margin: 4px 0 7px !important;
    }

    .hero-dashboard p {
        max-width: none !important;
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.28 !important;
    }

    /*
       Geen hero-knoppen op mobiel.
       Navigatie zit onderin.
    */
    .hero-dashboard .hero-actions {
        display: none !important;
    }

    .hero-side-panel {
        margin: 0 !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    .hero-stats > div {
        min-width: 0 !important;
        padding: 8px 5px !important;
        border-radius: 15px !important;
        background: rgba(248, 250, 252, 0.92) !important;
        border: 1px solid rgba(16, 35, 63, 0.06) !important;
        text-align: center !important;
    }

    /*
       Voorspelstatus weer gewone kaart onder hero.
       Niet als losse mini-row met knop ernaast.
    */
    .dashboard-prediction-status-card {
        display: block !important;
    }

    .dashboard-prediction-status-card .dashboard-action-block {
        display: grid !important;
        gap: 6px !important;
    }

    .dashboard-prediction-status-card .eyebrow,
    .dashboard-prediction-status-card .dashboard-action-title,
    .dashboard-prediction-status-card p,
    .dashboard-prediction-status-card .button {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .dashboard-prediction-status-card p {
        display: block !important;
        margin: 0 !important;
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
        color: rgba(16, 35, 63, 0.62) !important;
    }

    .dashboard-prediction-status-card .dashboard-action-title {
        font-size: 1rem !important;
        line-height: 1.05 !important;
    }

    .dashboard-prediction-status-card .button {
        width: fit-content !important;
        min-height: 30px !important;
        padding: 0 11px !important;
        font-size: 0.68rem !important;
    }

    /*
       Section titles overal gelijk.
    */
    .section-title {
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .section-title h2 {
        font-size: 1.05rem !important;
        line-height: 1.08 !important;
        margin: 1px 0 0 !important;
        letter-spacing: -0.04em !important;
    }

    /*
       Leaderboard netjes binnen dezelfde kaart.
    */
    .leaderboard.card {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .leader-row {
        width: 100% !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 30px 34px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 16px !important;
    }

    .leader-row + .leader-row {
        margin-top: 6px !important;
    }

    .leader-name {
        min-width: 0 !important;
    }

    .leader-name strong,
    .leader-name small {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .leader-points {
        min-width: 48px !important;
        text-align: right !important;
    }

    /*
       Recente uitslagen en komende duels ook exact in de kolom.
    */
    .match-grid,
    .stack {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .result-card,
    .mini-match {
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 17px !important;
        margin: 0 !important;
    }
}


/* =========================================================
   MOBILE HERO COMPACT SAFE
   Alleen Poolbaas Live compacter maken
   ========================================================= */

@media (max-width: 860px) {
    .hero-dashboard {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
    }

    .hero-dashboard .eyebrow,
    .hero-dashboard p,
    .hero-dashboard .hero-actions {
        display: none !important;
    }

    .hero-dashboard h1 {
        margin: 0 !important;
        color: #10233f !important;
        font-size: 1.35rem !important;
        line-height: 1.02 !important;
        letter-spacing: -0.055em !important;
        font-weight: 1000 !important;
    }

    .hero-side-panel {
        margin: 0 !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    .hero-stats > div {
        min-width: 0 !important;
        padding: 9px 5px !important;
        border-radius: 15px !important;
        background: rgba(248, 250, 252, 0.92) !important;
        border: 1px solid rgba(16, 35, 63, 0.075) !important;
        text-align: center !important;
    }

    .hero-stats strong {
        display: block !important;
        color: #10233f !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.035em !important;
    }

    .hero-stats span {
        display: block !important;
        margin-top: 4px !important;
        color: rgba(16, 35, 63, 0.55) !important;
        font-size: 0.55rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }
}


/* =========================================================
   MOBILE PREDICTION STATUS COMPACT SAFE
   Alleen voorspelstatus-kaart compacter maken
   ========================================================= */

@media (max-width: 860px) {
    .dashboard-prediction-status-card {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 10px 11px !important;
        box-sizing: border-box !important;

        border-radius: 20px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 7px 18px rgba(16, 35, 63, 0.055) !important;
    }

    .dashboard-prediction-status-card .dashboard-action-block {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 7px 9px !important;
        align-items: center !important;
    }

    .dashboard-prediction-status-card .eyebrow {
        grid-column: 1 / -1 !important;
        margin: 0 !important;

        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.53rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        letter-spacing: 0.08em !important;
    }

    .dashboard-prediction-status-card .dashboard-action-title {
        grid-column: 1 !important;
        min-width: 0 !important;

        color: #10233f !important;
        font-size: 0.98rem !important;
        line-height: 1.05 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.025em !important;
    }

    .dashboard-prediction-status-card p {
        display: none !important;
    }

    .dashboard-prediction-status-card .button {
        grid-column: 2 !important;
        justify-self: end !important;

        min-height: 30px !important;
        padding: 0 11px !important;
        border-radius: 999px !important;

        font-size: 0.66rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;

        box-shadow: none !important;
    }
}


/* =========================================================
   MOBILE POOLBAAS CARD ALIGN SAFE
   Alleen bovenste Poolbaas-card strakker uitlijnen
   ========================================================= */

@media (max-width: 860px) {
    .mobile-poolbaas-top-card {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;

        border-radius: 22px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        background:
            radial-gradient(circle at 94% 0%, rgba(245, 158, 11, 0.10), transparent 34%),
            rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        overflow: hidden !important;
    }

    .mobile-poolbaas-top-card::before {
        width: 3px !important;
    }

    .mobile-poolbaas-top-card .eyebrow {
        display: block !important;
        margin: 0 0 7px !important;
        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.53rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        letter-spacing: 0.08em !important;
    }

    .mobile-poolbaas-top-card .eyebrow::after {
        display: none !important;
    }

    .mobile-poolbaas-person {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .mobile-poolbaas-crown {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

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

    .mobile-poolbaas-crown img {
        width: 38px !important;
        height: 38px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 4px 6px rgba(16, 35, 63, 0.16)) !important;
    }

    .mobile-poolbaas-person > div {
        min-width: 0 !important;
    }

    .mobile-poolbaas-person strong {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: #10233f !important;
        font-size: 1.03rem !important;
        line-height: 1.05 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.035em !important;
    }

    .mobile-poolbaas-person small {
        display: block !important;
        margin-top: 3px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: rgba(16, 35, 63, 0.58) !important;
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
    }

    .mobile-poolbaas-top-card p {
        display: none !important;
    }
}


/* =========================================================
   MOBILE LEADERBOARD ALIGN SAFE
   Compact klassement, maar exact/scorende voorspellingen behouden
   ========================================================= */

@media (max-width: 860px) {
    .leaderboard-tile {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;

        border-radius: 22px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        overflow: hidden !important;
    }

    .leaderboard-tile .section-title {
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .leaderboard-tile .section-title h2 {
        margin: 1px 0 0 !important;
        color: #10233f !important;
        font-size: 1rem !important;
        line-height: 1.06 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.04em !important;
    }

    .leaderboard.card {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .leader-row {
        display: grid !important;
        grid-template-columns: 30px 34px minmax(0, 1fr) 54px !important;
        gap: 8px !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;

        border-radius: 16px !important;
        background: rgba(248, 250, 252, 0.92) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .leader-row + .leader-row {
        margin-top: 6px !important;
    }

    .leader-rank {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;
        font-size: 0.74rem !important;
        font-weight: 1000 !important;
    }

    .leader-trophy-icon {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
    }

    .leader-row .avatar {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 14px !important;
        font-size: 0.78rem !important;
        font-weight: 1000 !important;
    }

    .leader-name {
        min-width: 0 !important;
        display: block !important;
    }

    .leader-name strong {
        display: block !important;
        min-width: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: #10233f !important;
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 1000 !important;
    }

    /*
       Belangrijk: deze onderregel blijft zichtbaar.
    */
    .leader-name small {
        display: block !important;
        margin-top: 3px !important;
        min-width: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: rgba(16, 35, 63, 0.56) !important;
        font-size: 0.58rem !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
    }

    .leader-points {
        min-width: 54px !important;
        text-align: right !important;
    }

    .leader-points strong {
        display: block !important;
        color: #10233f !important;
        font-size: 0.94rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.025em !important;
    }

    .leader-points small {
        display: block !important;
        margin-top: 3px !important;
        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.52rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
    }
}


/* =========================================================
   MOBILE RECENT RESULTS ALIGN SAFE
   Alleen Recente uitslagen, Komende duels onaangeraakt
   ========================================================= */

@media (max-width: 860px) {
    .recent-results-tile {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;

        border-radius: 22px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        overflow: hidden !important;
    }

    .recent-results-tile .section-title {
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .recent-results-tile .section-title h2 {
        margin: 1px 0 0 !important;
        color: #10233f !important;
        font-size: 1rem !important;
        line-height: 1.06 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.04em !important;
    }

    .recent-results-tile .match-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .recent-results-tile .result-card.card.flag-split-card {
        width: 100% !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px 9px !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.92) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .recent-results-tile .result-card .match-meta {
        display: none !important;
    }

    .recent-results-tile .result-card .result-source {
        display: none !important;
    }

    .recent-results-tile .result-line {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 34px !important;
        gap: 8px !important;
        align-items: center !important;

        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .recent-results-tile .result-line span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: #10233f !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .recent-results-tile .result-line strong {
        justify-self: end !important;

        min-width: 28px !important;
        height: 24px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 9px !important;
        background: rgba(16, 35, 63, 0.06) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;

        color: #10233f !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-align: center !important;
    }
}


/* =========================================================
   MOBILE UPCOMING ALIGN SAFE
   Komende duels netter omlijnen zonder agressief verkleinen
   ========================================================= */

@media (max-width: 860px) {
    .dashboard-right-column {
        width: 100% !important;
        margin: 0 0 10px !important;
        box-sizing: border-box !important;
    }

    .dashboard-right-column > .section-title {
        margin: 0 0 9px !important;
        padding: 0 2px !important;
    }

    .dashboard-right-column > .section-title h2 {
        margin: 1px 0 0 !important;
        color: #10233f !important;
        font-size: 1rem !important;
        line-height: 1.06 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.04em !important;
    }

    .dashboard-right-column .stack {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dashboard-right-column .mini-match.card.flag-split-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 11px !important;
        box-sizing: border-box !important;

        border-radius: 16px !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.92) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .dashboard-right-column .mini-match .match-meta {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 7px !important;

        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.56rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    .dashboard-right-column .mini-match .teams,
    .dashboard-right-column .mini-match .mini-match-teams-with-score {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .dashboard-right-column .mini-match .teams > strong {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: #10233f !important;
        font-size: 0.78rem !important;
        line-height: 1.05 !important;
        font-weight: 1000 !important;
    }

    .dashboard-right-column .mini-match .teams > strong:first-child {
        text-align: left !important;
    }

    .dashboard-right-column .mini-match .teams > strong:last-child {
        text-align: right !important;
    }

    .dashboard-right-column .mini-match-live-score {
        width: 66px !important;
        min-width: 66px !important;
        min-height: 42px !important;
        padding: 6px 4px !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    .dashboard-right-column .mini-match-score-value {
        color: #10233f !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
    }

    .dashboard-right-column .mini-match-score-label {
        margin-top: 3px !important;
        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.52rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.035em !important;
    }

    .dashboard-right-column .mini-match-user-prediction-inline {
        display: none !important;
    }

    .dashboard-right-column .mini-match > small {
        display: block !important;
        margin-top: 7px !important;
        color: rgba(16, 35, 63, 0.56) !important;
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        font-weight: 850 !important;
        text-align: center !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* =========================================================
   MOBILE UPCOMING SECTION OUTLINE
   Hele Komende duels sectie als kaart omlijnen
   ========================================================= */

@media (max-width: 860px) {
    .dashboard-right-column {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;

        border-radius: 22px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        overflow: hidden !important;
    }

    .dashboard-right-column > .section-title {
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .dashboard-right-column .mini-match.card.flag-split-card {
        background: rgba(248, 250, 252, 0.92) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        border-radius: 16px !important;
    }
}


/* =========================================================
   MOBILE UPCOMING REAL CARD WRAPPER
   Komende duels als echte omlijnde dashboardkaart
   ========================================================= */

@media (max-width: 860px) {
    /*
       De kolom zelf moet géén kaart zijn.
       Alleen de nieuwe inner wrapper krijgt de omlijning.
    */
    .dashboard-right-column {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .upcoming-duels-tile {
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;

        border-radius: 22px !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        overflow: hidden !important;
    }

    .upcoming-duels-tile > .section-title {
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .upcoming-duels-tile > .section-title h2 {
        margin: 1px 0 0 !important;
        color: #10233f !important;
        font-size: 1rem !important;
        line-height: 1.06 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.04em !important;
    }

    .upcoming-duels-tile .stack {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .upcoming-duels-tile .mini-match.card.flag-split-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 11px !important;
        box-sizing: border-box !important;

        border-radius: 16px !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.92) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
}


/* =========================================================
   MOBILE POOLBAAS RWB CARD BORDERS
   Rood-wit-blauwe omlijning voor hoofdkaarten
   ========================================================= */

@media (max-width: 860px) {
    /*
       Hoofdkaarten op mobiel:
       subtiele rood-wit-blauwe border via background layers.
    */
    .mobile-poolbaas-top-card,
    .hero-dashboard,
    .dashboard-prediction-status-card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile,
    .my-day-status-card,
    .prediction-editor,
    .locked-prediction,
    .match-card,
    .match-detail-hero,
    .match-live-card,
    .match-projected-points-card,
    .section-jump-card,
    .quick-predict-card,
    .quick-panel.card,
    .empty.card {
        border: 1.5px solid transparent !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.55), rgba(255,255,255,0.95), rgba(37,99,235,0.55)) border-box !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
    }

    /*
       Binnenkaarten/lijstitems iets rustiger,
       zodat niet alles schreeuwt.
    */
    .leader-row,
    .recent-results-tile .result-card,
    .upcoming-duels-tile .mini-match,
    .live-stat-list > div,
    .match-prediction-row,
    .my-day-missing-list a,
    .locked-score,
    .hero-stats > div {
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.92) !important;
        box-shadow: none !important;
    }

    /*
       Poolbaas van de dag mag iets warmer blijven,
       maar met dezelfde rood-wit-blauwe rand.
    */
    .mobile-poolbaas-top-card {
        background:
            radial-gradient(circle at 94% 0%, rgba(245, 158, 11, 0.10), transparent 34%) padding-box,
            linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.58), rgba(255,255,255,0.96), rgba(37,99,235,0.58)) border-box !important;
    }

    /*
       Voorkom dubbele rare pseudo-randen op kaarten waar eerder ::before werd gebruikt.
    */
    .hero-dashboard::before,
    .prediction-editor::before,
    .quick-predict-card::before,
    .leaderboard-tile::before,
    .upcoming-tile::before {
        display: none !important;
        content: none !important;
    }
}


/* =========================================================
   MOBILE CARD BORDER UNIFY
   Alle hoofdkaarten zelfde rood-wit-blauwe omlijning als Stand
   ========================================================= */

@media (max-width: 860px) {
    /*
       Eén standaard voor alle hoofdkaarten.
       1.5px zoals de Stand-kaart.
    */
    .mobile-poolbaas-top-card,
    .hero-dashboard,
    .dashboard-prediction-status-card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile,
    .dashboard-right-column .upcoming-duels-tile,
    .dashboard-right-column > .dashboard-tile,
    .dashboard-right-column > .card,
    .my-day-status-card,
    .prediction-editor,
    .locked-prediction,
    .match-card,
    .match-detail-hero,
    .match-live-card,
    .match-projected-points-card,
    .section-jump-card,
    .quick-predict-card,
    .quick-panel.card,
    .empty.card {
        border: 1.5px solid transparent !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.55), rgba(255,255,255,0.96), rgba(37,99,235,0.55)) border-box !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
    }

    /*
       Specifiek voor "Volgende / Komende duels".
       Sommige eerdere CSS zette dashboard-right-column terug naar transparant.
       Daarom targeten we de echte inner wrapper hard.
    */
    .upcoming-duels-tile,
    .dashboard-right-column .upcoming-duels-tile,
    aside.dashboard-right-column .upcoming-duels-tile {
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        box-sizing: border-box !important;

        border-radius: 22px !important;
        border: 1.5px solid transparent !important;

        background:
            linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.55), rgba(255,255,255,0.96), rgba(37,99,235,0.55)) border-box !important;

        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        overflow: hidden !important;
    }

    /*
       De kolom eromheen mag géén eigen achtergrond of rand hebben,
       anders lijkt de gekleurde rand weg.
    */
    .dashboard-right-column {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /*
       Binnenkaartjes blijven rustig neutraal, zodat alleen hoofdkaarten
       de rood-wit-blauwe omlijning hebben.
    */
    .leader-row,
    .recent-results-tile .result-card,
    .upcoming-duels-tile .mini-match,
    .upcoming-duels-tile .result-card,
    .live-stat-list > div,
    .match-prediction-row,
    .my-day-missing-list a,
    .hero-stats > div {
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.92) !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   MOBILE CARD BORDER THICKER
   Rood-wit-blauwe hoofdkaart-omlijning iets dikker
   ========================================================= */

@media (max-width: 860px) {
    .mobile-poolbaas-top-card,
    .hero-dashboard,
    .dashboard-prediction-status-card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile,
    .dashboard-right-column .upcoming-duels-tile,
    .dashboard-right-column > .dashboard-tile,
    .dashboard-right-column > .card,
    .my-day-status-card,
    .prediction-editor,
    .locked-prediction,
    .match-card,
    .match-detail-hero,
    .match-live-card,
    .match-projected-points-card,
    .section-jump-card,
    .quick-predict-card,
    .quick-panel.card,
    .empty.card {
        border: 2.5px solid transparent !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.62), rgba(255,255,255,0.98), rgba(37,99,235,0.62)) border-box !important;
    }

    .upcoming-duels-tile,
    .dashboard-right-column .upcoming-duels-tile,
    aside.dashboard-right-column .upcoming-duels-tile {
        border: 2.5px solid transparent !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.62), rgba(255,255,255,0.98), rgba(37,99,235,0.62)) border-box !important;
    }
}


/* =========================================================
   MOBILE GLOBAL RWB CARD STYLE
   Zelfde dikke rood-wit-blauwe omlijning op alle mobiele hoofdkaarten
   ========================================================= */

@media (max-width: 860px) {
    /*
       Globale mobiele hoofdkaarten.
       Dit pakt dashboard, wedstrijden, voorspellen, snelle voorspelling,
       wedstrijddetail, regels/statistieken/admin-achtige kaarten waar mogelijk.
    */
    main .card,
    main .dashboard-tile,
    main .mobile-poolbaas-top-card,
    main .hero-dashboard,
    main .dashboard-prediction-status-card,
    main .leaderboard-tile,
    main .recent-results-tile,
    main .upcoming-duels-tile,
    main .my-day-status-card,
    main .prediction-editor,
    main .locked-prediction,
    main .match-card,
    main .match-detail-hero,
    main .match-live-card,
    main .match-projected-points-card,
    main .section-jump-card,
    main .quick-predict-card,
    main .quick-panel,
    main .empty {
        border: 2.5px solid transparent !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.62), rgba(255,255,255,0.98), rgba(37,99,235,0.62)) border-box !important;
        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
    }

    /*
       Cards die expres transparant moeten blijven als layout-wrapper.
       Anders krijg je dubbele kaarten of rare randen om hele kolommen.
    */
    main .leaderboard.card,
    main .dashboard-right-column,
    main .match-grid,
    main .stack {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /*
       Binnenrijen blijven rustiger.
       Dus: geen rood-wit-blauwe rand op elke kleine regel in een lijst.
    */
    main .leader-row,
    main .recent-results-tile .result-card,
    main .upcoming-duels-tile .mini-match,
    main .live-stat-list > div,
    main .match-prediction-row,
    main .my-day-missing-list a,
    main .locked-score,
    main .hero-stats > div,
    main .quick-score-option {
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.92) !important;
        box-shadow: none !important;
    }

    /*
       Interactieve geselecteerde scoreknoppen mogen hun eigen actieve stijl houden.
    */
    main .quick-score-option.is-selected,
    main .quick-score-option:checked,
    main input:checked + .quick-score-option {
        border-color: rgba(37, 99, 235, 0.45) !important;
    }
}


/* =========================================================
   FINAL MOBILE RWB BORDER OVERRIDE
   Eén vaste dikte voor alle mobiele hoofdkaarten
   ========================================================= */

@media (max-width: 860px) {
    /*
       Layout-wrappers: nooit een kaart-rand.
       Dit voorkomt dubbele omlijning rond hele kolommen/grids.
    */
    main .dashboard-right-column,
    main .leaderboard.card,
    main .match-grid,
    main .stack,
    main .matches-page,
    main .quick-predict-page {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /*
       Alle zichtbare mobiele hoofdkaarten: exact dezelfde rand.
       Deze regel staat bewust onderaan en is breed + hard genoeg
       om oudere kaartregels te overrulen.
    */
    main .card:not(.leaderboard):not(.stack):not(.match-grid),
    main .dashboard-tile,
    main .mobile-poolbaas-top-card,
    main .hero-dashboard,
    main .dashboard-prediction-status-card,
    main .leaderboard-tile,
    main .recent-results-tile,
    main .upcoming-duels-tile,
    main .my-day-status-card,
    main .prediction-editor,
    main .locked-prediction,
    main .match-card,
    main .match-detail-hero,
    main .match-live-card,
    main .match-projected-points-card,
    main .section-jump-card,
    main .quick-predict-card,
    main .quick-panel,
    main .empty {
        border-width: 2.5px !important;
        border-style: solid !important;
        border-color: transparent !important;

        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94)) padding-box,
            linear-gradient(135deg, rgba(239, 68, 68, 0.62), rgba(255, 255, 255, 0.98), rgba(37, 99, 235, 0.62)) border-box !important;

        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        box-sizing: border-box !important;
    }

    /*
       Specifiek nogmaals voor Komende duels, omdat die eerder lastig deed.
    */
    main .dashboard-right-column .upcoming-duels-tile,
    main aside.dashboard-right-column .upcoming-duels-tile {
        border-width: 2.5px !important;
        border-style: solid !important;
        border-color: transparent !important;

        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94)) padding-box,
            linear-gradient(135deg, rgba(239, 68, 68, 0.62), rgba(255, 255, 255, 0.98), rgba(37, 99, 235, 0.62)) border-box !important;

        box-shadow: 0 8px 22px rgba(16, 35, 63, 0.065) !important;
        box-sizing: border-box !important;
    }

    /*
       Kleine binnenkaarten/lijstrijen blijven dun.
       Anders wordt het te druk.
    */
    main .leader-row,
    main .recent-results-tile .result-card,
    main .upcoming-duels-tile .mini-match,
    main .live-stat-list > div,
    main .match-prediction-row,
    main .my-day-missing-list a,
    main .locked-score,
    main .hero-stats > div,
    main .quick-score-option {
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.92) !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   MOBILE CARD HEADINGS ALIGN
   Kopteksten van mobiele kaarten consistent uitlijnen
   ========================================================= */

@media (max-width: 860px) {
    /*
       Algemene kaartkoppen
    */
    main .section-title,
    main .card-header,
    main .prediction-editor-head,
    main .quick-predict-heading,
    main .match-detail-header {
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /*
       Dashboardtitels: Stand, Recente uitslagen, Komende duels, enz.
    */
    main .section-title {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    main .section-title > div {
        min-width: 0 !important;
    }

    main .section-title h1,
    main .section-title h2,
    main .section-title h3,
    main .card-header h1,
    main .card-header h2,
    main .card-header h3,
    main .quick-predict-heading h1,
    main .match-detail-header h1 {
        margin: 0 !important;
        color: #10233f !important;
        font-size: 1rem !important;
        line-height: 1.08 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.04em !important;
    }

    /*
       Eyebrows/labels boven titels.
    */
    main .eyebrow,
    main .section-title .eyebrow,
    main .card-header .eyebrow,
    main .quick-predict-heading .eyebrow,
    main .match-detail-header .eyebrow {
        display: block !important;
        margin: 0 0 4px !important;

        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.56rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.07em !important;
    }

    /*
       Subteksten onder kaarttitels.
    */
    main .section-title p,
    main .card-header p,
    main .quick-predict-heading p,
    main .match-detail-header p,
    main .prediction-editor-head small {
        margin: 4px 0 0 !important;
        color: rgba(16, 35, 63, 0.58) !important;
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
    }

    /*
       Voorspelkaart-koppen.
    */
    main .prediction-editor-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    main .prediction-editor-head strong {
        display: block !important;
        margin: 0 !important;

        color: #10233f !important;
        font-size: 0.92rem !important;
        line-height: 1.08 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.025em !important;
    }

    /*
       Actieknoppen of kleine links rechts van een koptekst.
    */
    main .section-title a,
    main .section-title .button,
    main .card-header a,
    main .card-header .button {
        flex: 0 0 auto !important;
        margin: 0 !important;
        white-space: nowrap !important;

        font-size: 0.66rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    /*
       Hero titel iets groter houden, want dat is de hoofdkop.
    */
    main .hero-dashboard h1 {
        margin: 0 !important;
        color: #10233f !important;
        font-size: 1.42rem !important;
        line-height: 0.98 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.075em !important;
    }

    main .hero-dashboard p {
        margin: 7px 0 0 !important;
        color: rgba(16, 35, 63, 0.62) !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
    }

    /*
       Poolbaas van de dag bovenkaart.
    */
    main .mobile-poolbaas-top-card .eyebrow {
        margin-bottom: 7px !important;
    }

    main .mobile-poolbaas-top-card h2,
    main .mobile-poolbaas-top-card h3 {
        margin: 0 !important;
        color: #10233f !important;
        font-size: 0.98rem !important;
        line-height: 1.08 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.04em !important;
    }
}


/* =========================================================
   MOBILE HEADINGS LEFT + MATCH CARD TEXT ALIGN
   Alle kaartkoppen links, wedstrijdteksten netjes in vakjes
   ========================================================= */

@media (max-width: 860px) {
    /*
       Alle topteksten van kaarten links uitlijnen.
    */
    main .section-title,
    main .card-header,
    main .prediction-editor-head,
    main .quick-predict-heading,
    main .match-detail-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    main .section-title *,
    main .card-header *,
    main .quick-predict-heading *,
    main .match-detail-header * {
        text-align: left !important;
    }

    main .section-title > div,
    main .card-header > div,
    main .quick-predict-heading > div,
    main .match-detail-header > div {
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    main .section-title h1,
    main .section-title h2,
    main .section-title h3,
    main .card-header h1,
    main .card-header h2,
    main .card-header h3,
    main .quick-predict-heading h1,
    main .match-detail-header h1 {
        margin: 0 !important;
        text-align: left !important;
    }

    main .section-title p,
    main .card-header p,
    main .quick-predict-heading p,
    main .match-detail-header p {
        margin: 4px 0 0 !important;
        text-align: left !important;
    }

    main .eyebrow,
    main .section-title .eyebrow,
    main .card-header .eyebrow,
    main .quick-predict-heading .eyebrow,
    main .match-detail-header .eyebrow {
        text-align: left !important;
    }

    /*
       Links/knoppen in kaartkoppen niet meer rechts laten zweven.
       Ze komen netjes onder of naast de tekst als de ruimte er is.
    */
    main .section-title a,
    main .section-title .button,
    main .card-header a,
    main .card-header .button {
        display: inline-flex !important;
        margin-top: 8px !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    /*
       Voorspelkaart-koppen: titel links, meta ook netjes links.
    */
    main .prediction-editor-head {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        flex-direction: column !important;
    }

    main .prediction-editor-head strong,
    main .prediction-editor-head small {
        width: 100% !important;
        text-align: left !important;
    }

    /*
       Wedstrijdenpagina: algemene vakjes strak houden.
    */
    .matches-page .match-card,
    .matches-page .match-card.card {
        text-align: left !important;
    }

    .matches-page .match-card *,
    .matches-page .match-card.card * {
        box-sizing: border-box !important;
    }

    /*
       Meta bovenin wedstrijdkaart: datum/ronde netjes links.
    */
    .matches-page .match-card .match-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 5px 8px !important;

        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;

        text-align: left !important;
    }

    .matches-page .match-card .match-meta,
    .matches-page .match-card .match-meta span,
    .matches-page .match-card .match-meta strong,
    .matches-page .match-card .match-meta small {
        text-align: left !important;
    }

    /*
       Teams in wedstrijdkaarten:
       thuis links, score/status midden, uitteam rechts.
       Daardoor staan alle teksten netjes in hun vakje.
    */
    .matches-page .match-card .teams,
    .matches-page .match-card .match-teams,
    .matches-page .match-card .mini-match-teams-with-score {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: center !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .matches-page .match-card .teams > * {
        min-width: 0 !important;
    }

    .matches-page .match-card .teams > strong:first-child,
    .matches-page .match-card .match-team.home,
    .matches-page .match-card .team-home,
    .matches-page .match-card .home-team {
        text-align: left !important;
        justify-self: stretch !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .matches-page .match-card .teams > strong:last-child,
    .matches-page .match-card .match-team.away,
    .matches-page .match-card .team-away,
    .matches-page .match-card .away-team {
        text-align: right !important;
        justify-self: stretch !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /*
       Score/statusblok exact in het midden.
    */
    .matches-page .match-card .score,
    .matches-page .match-card .match-score,
    .matches-page .match-card .mini-match-live-score,
    .matches-page .match-card .status-pill {
        justify-self: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /*
       Als er losse landenregels bestaan in de kaarten:
       landnaam links, score/voorspelling rechts.
    */
    .matches-page .match-card .result-line,
    .matches-page .match-card .team-line,
    .matches-page .match-card .prediction-line {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;

        width: 100% !important;
        text-align: left !important;
    }

    .matches-page .match-card .result-line span,
    .matches-page .match-card .team-line span,
    .matches-page .match-card .prediction-line span {
        min-width: 0 !important;
        text-align: left !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .matches-page .match-card .result-line strong,
    .matches-page .match-card .team-line strong,
    .matches-page .match-card .prediction-line strong {
        justify-self: end !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /*
       Ondertekst in wedstrijdkaarten netjes links.
    */
    .matches-page .match-card small,
    .matches-page .match-card .match-card-footer,
    .matches-page .match-card .match-footer,
    .matches-page .match-card .prediction-status {
        text-align: left !important;
    }
}


/* =========================================================
   SURGICAL MOBILE MATCHES RESTORE
   Echte matches.html classes, voorspellingen zichtbaar houden
   ========================================================= */

@media (max-width: 860px) {
    /*
       Laat de "Alle WK-wedstrijden" hero links uitgelijnd.
       Dit is goed en blijft.
    */
    .matches-page .matches-hero-polished,
    .matches-page .matches-hero-main,
    .matches-page .matches-hero-main .eyebrow,
    .matches-page .matches-hero-main h1,
    .matches-page .matches-hero-main p {
        text-align: left !important;
    }

    /*
       Wedstrijdkaart: echte structuur uit matches.html.
    */
    .matches-page .match-card {
        display: block !important;
        width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    /*
       Bovenkant: fase / wedstrijdnummer / status + kickoff.
    */
    .matches-page .match-top {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .matches-page .match-top .match-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px 7px !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .matches-page .match-top .match-meta span {
        text-align: left !important;
        white-space: nowrap !important;
    }

    .matches-page .match-top > small {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /*
       Hoofdregel: thuis links, score midden, uit rechts.
       Let op: jouw HTML gebruikt .match-main en .team-side.
    */
    .matches-page .match-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .matches-page .team-side {
        min-width: 0 !important;
        display: block !important;
    }

    .matches-page .team-side.home {
        text-align: left !important;
    }

    .matches-page .team-side.away {
        text-align: right !important;
    }

    .matches-page .team-side .team-label {
        display: block !important;
        margin: 0 0 3px !important;
        font-size: 0.52rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: rgba(16, 35, 63, 0.50) !important;
    }

    .matches-page .team-side.home .team-label {
        text-align: left !important;
    }

    .matches-page .team-side.away .team-label {
        text-align: right !important;
    }

    .matches-page .team-side strong {
        display: block !important;
        min-width: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.06 !important;
        font-weight: 1000 !important;
        color: #10233f !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .matches-page .team-side.home strong {
        text-align: left !important;
    }

    .matches-page .team-side.away strong {
        text-align: right !important;
    }

    .matches-page .match-score {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        justify-self: center !important;
        padding: 6px 4px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
    }

    .matches-page .match-score strong,
    .matches-page .match-score span {
        display: block !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .matches-page .match-score strong {
        font-size: 0.78rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        color: #10233f !important;
    }

    .matches-page .match-score span {
        margin-top: 3px !important;
        max-width: 100% !important;
        font-size: 0.50rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        color: rgba(16, 35, 63, 0.52) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /*
       Belangrijkste reparatie:
       alle voorspellingen weer zichtbaar.
       NIET op small globaal mikken, alleen op echte prediction classes.
    */
    .matches-page .prediction-strip {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 8px 0 0 !important;
        box-sizing: border-box !important;
        border-top: 1px solid rgba(16, 35, 63, 0.08) !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .matches-page .prediction-pill {
        display: inline-grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 6px !important;
        align-items: center !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        background: rgba(248, 250, 252, 0.92) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .matches-page .prediction-pill span {
        display: block !important;
        min-width: 0 !important;
        text-align: left !important;
        font-size: 0.62rem !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        color: rgba(16, 35, 63, 0.68) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .matches-page .prediction-pill strong {
        display: block !important;
        text-align: right !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        color: #10233f !important;
        white-space: nowrap !important;
    }

    .matches-page .prediction-pill small {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: right !important;
        font-size: 0.58rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        color: rgba(22, 163, 74, 0.90) !important;
        white-space: nowrap !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* =========================================================
   MOBILE FEATURED MATCH PREDICTION
   Actieve/Vincent voorspelling altijd zichtbaar op wedstrijdenpagina
   ========================================================= */

@media (max-width: 860px) {
    .matches-page .featured-prediction-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 8px !important;
        align-items: center !important;

        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 8px 9px !important;
        box-sizing: border-box !important;

        border-radius: 14px !important;
        border: 1px solid rgba(37, 99, 235, 0.22) !important;
        background: linear-gradient(
            135deg,
            rgba(239, 68, 68, 0.08),
            rgba(255, 255, 255, 0.92),
            rgba(37, 99, 235, 0.10)
        ) !important;

        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .matches-page .featured-prediction-row span {
        min-width: 0 !important;

        color: rgba(16, 35, 63, 0.72) !important;
        font-size: 0.64rem !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        text-align: left !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .matches-page .featured-prediction-row strong {
        color: #10233f !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .matches-page .featured-prediction-row small {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;

        color: rgba(22, 163, 74, 0.95) !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /*
       De algemene deelnemersstrip mag gewoon blijven bestaan.
       Maar hij mag de aparte voorspelling niet verbergen.
    */
    .matches-page .prediction-strip {
        margin-top: 7px !important;
        max-height: none !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
}


/* =========================================================
   MOBILE MATCH CARDS ROOMIER
   Iets grotere kaarten zodat alle voorspellingen zichtbaar blijven
   ========================================================= */

@media (max-width: 860px) {
    /*
       De aparte "Mijn voorspelling"-regel niet meer tonen als oude CSS nog bestaat.
    */
    .matches-page .featured-prediction-row {
        display: none !important;
    }

    /*
       Wedstrijdkaarten iets ruimer maken.
       Niet extreem groot, alleen genoeg voor vlaggen + voorspellingen.
    */
    .matches-page .match-card {
        min-height: 156px !important;
        padding: 14px 13px !important;
        overflow: visible !important;
    }

    .matches-page .match-top {
        margin-bottom: 11px !important;
    }

    .matches-page .match-main {
        min-height: 58px !important;
        margin-bottom: 10px !important;
    }

    /*
       Vlagachtergrond mag zichtbaar blijven, maar niet de tekst overnemen.
    */
    .matches-page .match-card.flag-split-card::before,
    .matches-page .match-card.flag-split-card::after {
        opacity: 0.18 !important;
        transform: scale(1.04) !important;
    }

    /*
       Deelnemersstrip altijd genoeg ruimte.
    */
    .matches-page .prediction-strip {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;

        width: 100% !important;
        max-height: none !important;
        height: auto !important;

        margin-top: 10px !important;
        padding-top: 9px !important;

        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /*
       Pills blijven compact, maar mogen netjes over meerdere regels.
    */
    .matches-page .prediction-pill {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 6px !important;
        align-items: center !important;

        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;

        padding: 6px 8px !important;
        box-sizing: border-box !important;

        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .matches-page .prediction-pill span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    .matches-page .prediction-pill strong,
    .matches-page .prediction-pill small {
        white-space: nowrap !important;
        text-align: right !important;
    }

    .matches-page .prediction-pill small {
        display: block !important;
        margin: 0 !important;
        border: 0 !important;
    }
}


/* =========================================================
   DESKTOP DASHBOARD ALIGN + RWB TILE BORDERS
   Alleen desktop-homepagina, mobiel blijft onaangeraakt
   ========================================================= */

@media (min-width: 861px) {
    /*
       Dashboard breedte en spacing strak houden.
    */
    .dashboard-top-row,
    .dashboard-top-row-split,
    .dashboard-grid,
    .dashboard-main-grid {
        width: 100%;
        box-sizing: border-box;
    }

    .dashboard-top-row-split {
        display: grid !important;
        grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr) !important;
        gap: 22px !important;
        align-items: stretch !important;
        margin-bottom: 22px !important;
    }

    .dashboard-hero-wrap,
    .dashboard-right-column {
        min-width: 0 !important;
        width: 100% !important;
    }

    /*
       Hoofd-dashboard tegels:
       zelfde dikke rood-wit-blauwe omlijning als mobiel,
       maar iets rustiger voor desktop.
    */
    .hero-dashboard,
    .dashboard-prediction-status-card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile,
    .dashboard-right-column > .card,
    .dashboard-right-column > .dashboard-tile,
    .dashboard-tile.card {
        border: 3px solid transparent !important;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)) padding-box,
            linear-gradient(135deg, rgba(239, 68, 68, 0.66), rgba(255, 255, 255, 0.98), rgba(37, 99, 235, 0.66)) border-box !important;
        box-shadow: 0 14px 34px rgba(16, 35, 63, 0.075) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /*
       Hero links mooi laten vullen.
    */
    .hero-dashboard {
        height: 100% !important;
        min-height: 300px !important;
        padding: 30px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr) !important;
        gap: 26px !important;
        align-items: stretch !important;
    }

    .hero-dashboard > div:first-child {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .hero-dashboard h1 {
        max-width: 720px !important;
        margin: 0 !important;
        color: #10233f !important;
        line-height: 0.98 !important;
        letter-spacing: -0.075em !important;
    }

    .hero-dashboard p {
        max-width: 640px !important;
        margin: 14px 0 0 !important;
        color: rgba(16, 35, 63, 0.66) !important;
        line-height: 1.45 !important;
    }

    .hero-actions {
        margin-top: 22px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .hero-side-panel {
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }

    .hero-stats {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-content: center !important;
    }

    .hero-stats > div {
        min-height: 72px !important;
        padding: 16px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.86) !important;
        box-shadow: none !important;
    }

    /*
       Voorspelstatus-kaart netjes onder de hero.
    */
    .dashboard-prediction-status-card {
        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 22px 24px !important;
        border-radius: 28px !important;
    }

    /*
       Onderste dashboardsecties strak als grid.
    */
    .dashboard-content-grid,
    .dashboard-lower-grid,
    .dashboard-sections-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 22px !important;
        align-items: start !important;
    }

    /*
       Als de pagina een andere containerstructuur heeft:
       deze tegels krijgen in elk geval gelijke spacing.
    */
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile {
        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 22px 24px !important;
        border-radius: 28px !important;
    }

    /*
       Komende duels wrapper: buitenkolom transparant,
       echte inner tile krijgt de rand.
    */
    .dashboard-right-column {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .dashboard-right-column .upcoming-duels-tile {
        width: 100% !important;
        margin: 0 !important;
        padding: 22px 24px !important;
        border-radius: 28px !important;
    }

    /*
       Titels van tegels links en consistent.
    */
    .dashboard-top-row .section-title,
    .leaderboard-tile .section-title,
    .recent-results-tile .section-title,
    .upcoming-duels-tile .section-title,
    .dashboard-prediction-status-card .section-title {
        display: block !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .dashboard-top-row .section-title *,
    .leaderboard-tile .section-title *,
    .recent-results-tile .section-title *,
    .upcoming-duels-tile .section-title *,
    .dashboard-prediction-status-card .section-title * {
        text-align: left !important;
    }

    .section-title h2,
    .leaderboard-tile h2,
    .recent-results-tile h2,
    .upcoming-duels-tile h2 {
        margin: 0 !important;
        color: #10233f !important;
        line-height: 1.05 !important;
        letter-spacing: -0.045em !important;
    }

    /*
       Binnenrijen rustig houden: niet ook dikke rood-wit-blauw,
       anders wordt desktop te druk.
    */
    .leader-row,
    .recent-results-tile .result-card,
    .upcoming-duels-tile .mini-match,
    .dashboard-prediction-status-card .card,
    .dashboard-prediction-status-card .prediction-status-row {
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        background: rgba(248, 250, 252, 0.88) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /*
       Leaderboard netjes en gelijkmatig.
    */
    .leaderboard.card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: grid !important;
        gap: 10px !important;
    }

    .leader-row {
        min-height: 64px !important;
        border-radius: 20px !important;
        padding: 12px 14px !important;
    }

    /*
       Recente uitslagen en komende duels dezelfde visuele maat.
    */
    .recent-results-tile .match-grid,
    .upcoming-duels-tile .stack {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .recent-results-tile .result-card,
    .upcoming-duels-tile .mini-match {
        border-radius: 20px !important;
        padding: 14px 16px !important;
    }

    /*
       Desktop: mobiele-only Poolbaas topcard niet tonen.
    */
    .mobile-poolbaas-top-card {
        display: none !important;
    }
}


/* =========================================================
   DESKTOP TOPBAR + POOLBAAS DAY RESTORE
   Logo links, slogan erbij, Poolbaas van de dag zichtbaar op desktop
   ========================================================= */

@media (min-width: 861px) {
    /*
       Desktop topbar: logo helemaal links, slogan ernaast,
       navigatie rechts.
    */
    .site-header {
        width: 100% !important;
    }

    .site-header .header-inner {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 24px !important;
        padding-right: 24px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        box-sizing: border-box !important;
    }

    .site-header .brand,
    .site-header .site-brand,
    .site-header .logo,
    .site-header .brand-link,
    .site-header a[href="/"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto !important;
    }

    .desktop-header-slogan {
        display: inline-flex !important;
        align-items: center !important;

        min-width: 0 !important;
        margin-right: auto !important;

        color: rgba(16, 35, 63, 0.72) !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: -0.025em !important;
        white-space: nowrap !important;
    }

    .desktop-header-slogan::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 24px;
        margin: 0 16px 0 2px;
        background: rgba(16, 35, 63, 0.14);
        border-radius: 999px;
    }

    .site-header .main-nav {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    /*
       Poolbaas van de dag was mobile-only geworden.
       Op desktop tonen we hem weer als nette dashboardkaart.
    */
    .mobile-poolbaas-top-card {
        display: block !important;
        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 20px 24px !important;
        box-sizing: border-box !important;

        border-radius: 28px !important;
        border: 3px solid transparent !important;
        background:
            radial-gradient(circle at 96% 0%, rgba(245, 158, 11, 0.12), transparent 34%) padding-box,
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)) padding-box,
            linear-gradient(135deg, rgba(239, 68, 68, 0.66), rgba(255, 255, 255, 0.98), rgba(37, 99, 235, 0.66)) border-box !important;

        box-shadow: 0 14px 34px rgba(16, 35, 63, 0.075) !important;
        overflow: hidden !important;
    }

    .mobile-poolbaas-top-card .eyebrow {
        display: block !important;
        margin: 0 0 10px !important;
        text-align: left !important;

        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.07em !important;
    }

    .mobile-poolbaas-person {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;
    }

    .mobile-poolbaas-crown {
        width: 54px !important;
        height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    .mobile-poolbaas-crown img {
        width: 50px !important;
        height: 50px !important;
        object-fit: contain !important;
    }

    .mobile-poolbaas-copy {
        min-width: 0 !important;
        text-align: left !important;
    }

    .mobile-poolbaas-copy strong,
    .mobile-poolbaas-copy h2,
    .mobile-poolbaas-copy h3 {
        display: block !important;
        margin: 0 !important;

        color: #10233f !important;
        font-size: 1.15rem !important;
        line-height: 1.05 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.045em !important;
        text-align: left !important;
    }

    .mobile-poolbaas-copy span,
    .mobile-poolbaas-copy small,
    .mobile-poolbaas-copy p {
        display: block !important;
        margin: 5px 0 0 !important;

        color: rgba(16, 35, 63, 0.62) !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 850 !important;
        text-align: left !important;
    }
}

@media (max-width: 860px) {
    .desktop-header-slogan {
        display: none !important;
    }
}


/* =========================================================
   DESKTOP OFFICIAL POOLBAAS SLOGAN
   Lange slogan netjes naast het logo in de topbar
   ========================================================= */

@media (min-width: 861px) {
    .desktop-header-slogan {
        display: inline-flex !important;
        align-items: center !important;

        min-width: 0 !important;
        max-width: min(680px, 46vw) !important;
        margin-right: auto !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: rgba(16, 35, 63, 0.70) !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
    }

    .desktop-header-slogan::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 24px;
        margin: 0 16px 0 2px;
        background: rgba(16, 35, 63, 0.14);
        border-radius: 999px;
        flex: 0 0 auto;
    }
}

@media (max-width: 860px) {
    .desktop-header-slogan {
        display: none !important;
    }
}


/* =========================================================
   FINAL DESKTOP SLOGAN + POOLBAAS SIDE CARD
   Desktop-only: logo links, slogan ernaast, Poolbaas van de dag naast hero
   ========================================================= */

@media (min-width: 861px) {
    /*
       Desktop topbar.
    */
    .site-header .header-inner {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 22px !important;
        padding-right: 22px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .brand-big-logo {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .desktop-header-slogan {
        display: inline-flex !important;
        align-items: center !important;

        min-width: 0 !important;
        max-width: min(760px, 48vw) !important;
        margin-right: auto !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: rgba(16, 35, 63, 0.72) !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
    }

    .desktop-header-slogan::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 24px;
        margin: 0 16px 0 2px;
        background: rgba(16, 35, 63, 0.16);
        border-radius: 999px;
        flex: 0 0 auto;
    }

    .site-header .mobile-header-auth {
        display: none !important;
    }

    .site-header .main-nav {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    /*
       Bovenrij dashboard: Poolbaas live links, Poolbaas van de dag rechts.
    */
    .dashboard-top-row-split {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr) !important;
        gap: 22px !important;
        align-items: stretch !important;
    }

    .dashboard-hero-wrap {
        min-width: 0 !important;
        width: 100% !important;
    }

    .dashboard-hero-wrap .hero-dashboard {
        height: 100% !important;
        min-height: 300px !important;
    }

    /*
       Mobiele kaart blijft mobiel-only.
       Desktop-kopie tonen we rechts.
    */
    .mobile-poolbaas-top-card {
        display: none !important;
    }

    .desktop-poolbaas-side-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 300px !important;
        margin: 0 !important;
        padding: 28px !important;
        box-sizing: border-box !important;

        border-radius: 30px !important;
        border: 3px solid transparent !important;
        background:
            radial-gradient(circle at 94% 0%, rgba(245, 158, 11, 0.14), transparent 36%) padding-box,
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)) padding-box,
            linear-gradient(135deg, rgba(239, 68, 68, 0.66), rgba(255, 255, 255, 0.98), rgba(37, 99, 235, 0.66)) border-box !important;

        box-shadow: 0 14px 34px rgba(16, 35, 63, 0.075) !important;
        overflow: hidden !important;
    }

    .desktop-poolbaas-side-card .eyebrow {
        display: block !important;
        margin: 0 0 14px !important;

        color: rgba(16, 35, 63, 0.52) !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.075em !important;
        text-align: left !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-person {
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-crown {
        width: 68px !important;
        height: 68px !important;

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

        background: transparent !important;
        border-radius: 22px !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-crown img {
        width: 62px !important;
        height: 62px !important;
        object-fit: contain !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-copy {
        min-width: 0 !important;
        text-align: left !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-copy strong,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy h2,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy h3 {
        display: block !important;
        margin: 0 !important;

        color: #10233f !important;
        font-size: 1.55rem !important;
        line-height: 1.02 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.06em !important;
        text-align: left !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-copy span,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy small,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy p {
        display: block !important;
        margin: 8px 0 0 !important;

        color: rgba(16, 35, 63, 0.64) !important;
        font-size: 0.88rem !important;
        line-height: 1.32 !important;
        font-weight: 850 !important;
        text-align: left !important;
    }
}

@media (max-width: 860px) {
    .desktop-header-slogan,
    .desktop-poolbaas-side-card {
        display: none !important;
    }
}


/* =========================================================
   DESKTOP FINAL POLISH
   Poolbaas van de dag specialer, topbar beter verdeeld,
   dashboardkaarten strak uitgelijnd
   ========================================================= */

@media (min-width: 861px) {
    /*
       TOPBAR
       Logo links, slogan daarna, menu mooi in het middengebied,
       uitloggen helemaal rechts.
    */
    .site-header .header-inner {
        display: grid !important;
        grid-template-columns: auto minmax(260px, 0.95fr) minmax(420px, auto) auto !important;
        align-items: center !important;
        gap: 18px !important;

        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    .site-header .brand-big-logo {
        grid-column: 1 !important;
        justify-self: start !important;
        margin: 0 !important;
    }

    .desktop-header-slogan {
        grid-column: 2 !important;
        justify-self: start !important;

        max-width: 100% !important;
        margin: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: rgba(16, 35, 63, 0.70) !important;
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
    }

    .desktop-header-slogan::before {
        content: "";
        display: inline-block !important;
        width: 1px !important;
        height: 24px !important;
        margin: 0 16px 0 2px !important;
        background: rgba(16, 35, 63, 0.16) !important;
        border-radius: 999px !important;
        vertical-align: middle !important;
    }

    .site-header .main-nav {
        grid-column: 3 / 5 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;

        width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .site-header .main-nav a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /*
       Uitloggen/Inloggen blijft helemaal rechts.
    */
    .site-header .main-nav .nav-auth-link {
        margin-left: auto !important;
    }

    /*
       De losse mobile-header-auth in desktop-header niet tonen.
    */
    .site-header .mobile-header-auth {
        display: none !important;
    }

    /*
       DASHBOARD ALGEMENE BREEDTE
       Alles in dezelfde visuele kolommen.
    */
    .main-content {
        width: 100% !important;
    }

    .dashboard-top-row,
    .dashboard-top-row-split,
    .dashboard-prediction-status-card,
    .dashboard-content-grid,
    .dashboard-lower-grid,
    .dashboard-sections-grid,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile {
        box-sizing: border-box !important;
    }

    .dashboard-top-row-split {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr) !important;
        gap: 24px !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 0 24px !important;
    }

    .dashboard-hero-wrap,
    .desktop-poolbaas-side-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .dashboard-hero-wrap .hero-dashboard,
    .desktop-poolbaas-side-card {
        min-height: 330px !important;
    }

    /*
       Poolbaas van de dag desktop:
       iets specialer dan normale kaarten, zoals mobiel.
    */
    .desktop-poolbaas-side-card {
        position: relative !important;
        isolation: isolate !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;

        padding: 30px !important;
        border-radius: 32px !important;
        overflow: hidden !important;

        border: 3px solid transparent !important;
        background:
            radial-gradient(circle at 86% 0%, rgba(245, 158, 11, 0.22), transparent 34%) padding-box,
            radial-gradient(circle at 0% 100%, rgba(37, 99, 235, 0.10), transparent 38%) padding-box,
            linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) padding-box,
            linear-gradient(135deg, rgba(239,68,68,0.72), rgba(255,255,255,0.98), rgba(37,99,235,0.72)) border-box !important;

        box-shadow:
            0 18px 42px rgba(16, 35, 63, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    }

    .desktop-poolbaas-side-card::before {
        content: "★";
        position: absolute;
        right: 24px;
        top: 20px;
        z-index: -1;

        color: rgba(245, 158, 11, 0.14);
        font-size: 8rem;
        line-height: 1;
        font-weight: 1000;
        transform: rotate(12deg);
    }

    .desktop-poolbaas-side-card::after {
        content: "";
        position: absolute;
        left: 26px;
        right: 26px;
        bottom: 22px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(
            90deg,
            rgba(239,68,68,0.70),
            rgba(255,255,255,0.90),
            rgba(37,99,235,0.70)
        );
        opacity: 0.75;
    }

    .desktop-poolbaas-side-card .eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        align-self: flex-start !important;

        margin: 0 0 20px !important;
        padding: 8px 11px !important;

        border-radius: 999px !important;
        background: rgba(16, 35, 63, 0.055) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;

        color: rgba(16, 35, 63, 0.62) !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.075em !important;
        text-align: left !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-person {
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: center !important;
        margin-bottom: 28px !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-crown {
        width: 82px !important;
        height: 82px !important;

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

        border-radius: 26px !important;
        background:
            radial-gradient(circle at 35% 25%, rgba(255,255,255,0.92), rgba(245,158,11,0.12)) !important;
        border: 1px solid rgba(245, 158, 11, 0.20) !important;
        box-shadow: 0 12px 28px rgba(245, 158, 11, 0.14) !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-crown img {
        width: 66px !important;
        height: 66px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 8px 12px rgba(16, 35, 63, 0.12)) !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-copy {
        min-width: 0 !important;
        text-align: left !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-copy strong,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy h2,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy h3 {
        display: block !important;
        margin: 0 !important;

        color: #10233f !important;
        font-size: clamp(1.45rem, 2vw, 2.05rem) !important;
        line-height: 0.98 !important;
        font-weight: 1000 !important;
        letter-spacing: -0.065em !important;
        text-align: left !important;
    }

    .desktop-poolbaas-side-card .mobile-poolbaas-copy span,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy small,
    .desktop-poolbaas-side-card .mobile-poolbaas-copy p {
        display: block !important;
        margin: 9px 0 0 !important;

        color: rgba(16, 35, 63, 0.65) !important;
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
        font-weight: 850 !important;
        text-align: left !important;
    }

    /*
       Kaarten onder de hero:
       gelijke breedte, gelijke afronding, gelijke padding.
    */
    .dashboard-prediction-status-card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 24px !important;
        border-radius: 30px !important;
    }

    /*
       Als dashboardsecties in een grid staan:
       kolommen gelijk en netjes.
    */
    .dashboard-content-grid,
    .dashboard-lower-grid,
    .dashboard-sections-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 24px !important;
        align-items: start !important;
        width: 100% !important;
    }

    /*
       Fallback: als de tegels los onder elkaar staan,
       allemaal exact dezelfde max-breedte en flow.
    */
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile {
        max-width: none !important;
    }

    /*
       Binnenkaarten ook netjes breed laten vullen.
    */
    .leaderboard.card,
    .recent-results-tile .match-grid,
    .upcoming-duels-tile .stack {
        width: 100% !important;
    }

    .leader-row,
    .recent-results-tile .result-card,
    .upcoming-duels-tile .mini-match {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   FINAL RECENT RESULTS POLISH
   Brontekst weg, uitslagscores donker in plaats van goud
   ========================================================= */

/* Bron: API verbergen in recente uitslagen */
.recent-results-tile .result-source,
.recent-results-tile small.result-source,
.recent-results-tile .match-source,
.recent-results-tile small {
    display: none !important;
}

/* Uitslagnummers donker maken */
.recent-results-tile .result-line strong,
.recent-results-tile .result-card strong,
.recent-results-tile .score,
.recent-results-tile .match-score strong {
    color: #10233f !important;
    background: rgba(16, 35, 63, 0.06) !important;
    border-color: rgba(16, 35, 63, 0.08) !important;
}

/* Extra gericht: voorkom gouden scorekleur vanuit oudere CSS */
.recent-results-tile strong {
    color: #10233f !important;
}


/* =========================================================
   CLICKABLE CARDS
   Recente uitslagen + Mijn voorspellingen
   ========================================================= */

[data-card-href] {
    cursor: pointer;
}

[data-card-href]:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45);
    outline-offset: 4px;
}

[data-card-href] input,
[data-card-href] button,
[data-card-href] a,
[data-card-href] select,
[data-card-href] textarea,
[data-card-href] label {
    cursor: auto;
}

.recent-results-tile [data-card-href]:hover,
.prediction-editor[data-card-href]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(16, 35, 63, 0.10);
}

@media (max-width: 860px) {
    .recent-results-tile [data-card-href]:hover,
    .prediction-editor[data-card-href]:hover {
        transform: none;
    }
}


/* =========================================================
   WHOLE PREDICTION CARD CLICKABLE
   Geen aparte knop, hele kaart klikbaar behalve formulier-elementen
   ========================================================= */

.prediction-view-match-link {
    display: none !important;
}

.prediction-editor[data-card-href] {
    cursor: pointer;
}

.prediction-editor[data-card-href]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(16, 35, 63, 0.10);
}

.prediction-editor[data-card-href]:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45);
    outline-offset: 4px;
}

.prediction-editor[data-card-href] input,
.prediction-editor[data-card-href] button,
.prediction-editor[data-card-href] a,
.prediction-editor[data-card-href] select,
.prediction-editor[data-card-href] textarea,
.prediction-editor[data-card-href] label {
    cursor: auto;
}

@media (max-width: 860px) {
    .prediction-editor[data-card-href]:hover {
        transform: none;
    }
}


/* =========================================================
   FUN DASHBOARD + MATCH STATS
   Poolbaas van de dag extra, dagdrama, match detail data,
   subtiele puntenanimatie
   ========================================================= */

.poolbaas-day-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 12px;
}

.poolbaas-day-metrics span {
    display: grid;
    gap: 3px;
    min-height: 58px;
    align-content: center;
    padding: 8px;
    border-radius: 18px;
    background: rgba(16, 35, 63, 0.055);
    border: 1px solid rgba(16, 35, 63, 0.08);
    color: rgba(16, 35, 63, 0.66);
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
}

.poolbaas-day-metrics strong {
    color: #10233f;
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 1000;
}

.poolbaas-day-reason {
    margin-top: 10px !important;
    color: rgba(16, 35, 63, 0.72) !important;
    font-weight: 850 !important;
}

.daily-movers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 24px;
}

.daily-mover-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 28px;
    border: 3px solid transparent;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95)) padding-box,
        linear-gradient(135deg, rgba(239,68,68,0.62), rgba(255,255,255,0.98), rgba(37,99,235,0.62)) border-box;
    box-shadow: 0 12px 28px rgba(16, 35, 63, 0.07);
}

.daily-mover-card::after {
    position: absolute;
    right: 18px;
    top: 10px;
    font-size: 4rem;
    line-height: 1;
    opacity: 0.10;
    font-weight: 1000;
}

.daily-mover-card.is-up::after {
    content: "↗";
}

.daily-mover-card.is-down::after {
    content: "↘";
}

.daily-mover-card strong {
    display: block;
    margin-top: 8px;
    color: #10233f;
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -0.05em;
}

.daily-mover-card small {
    display: block;
    margin-top: 8px;
    color: rgba(16, 35, 63, 0.64);
    font-weight: 850;
}

.match-detail-stats-card {
    display: grid;
    gap: 18px;
}

.match-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.match-stats-grid > div {
    display: grid;
    gap: 6px;
    align-content: center;
    min-height: 86px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(16, 35, 63, 0.055);
    border: 1px solid rgba(16, 35, 63, 0.08);
    text-align: center;
}

.match-stats-grid strong {
    color: #10233f;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -0.04em;
}

.match-stats-grid span {
    color: rgba(16, 35, 63, 0.62);
    font-size: 0.78rem;
    line-height: 1.22;
    font-weight: 850;
}

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

.match-detail-shoutouts > div {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(16, 35, 63, 0.08);
}

.match-detail-shoutouts h3 {
    margin: 0 0 8px;
    color: #10233f;
    font-size: 0.92rem;
    font-weight: 1000;
}

.match-detail-shoutouts p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.match-detail-shoutouts span {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(16, 35, 63, 0.065);
    color: #10233f;
    font-size: 0.76rem;
    font-weight: 900;
}

/* Subtiele puntenanimatie */
@keyframes poolbaas-point-pop {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 rgba(245, 158, 11, 0);
    }

    45% {
        transform: scale(1.035);
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.12);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(245, 158, 11, 0);
    }
}

.leader-points strong,
.match-prediction-row em,
.poolbaas-day-metrics strong,
.daily-mover-card strong {
    animation: poolbaas-point-pop 900ms ease both;
}

@media (max-width: 860px) {
    .daily-movers-grid,
    .match-detail-shoutouts {
        grid-template-columns: 1fr;
    }

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

    .poolbaas-day-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .poolbaas-day-metrics span {
        min-height: 52px;
        padding: 7px 5px;
        font-size: 0.66rem;
    }

    .poolbaas-day-metrics strong {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leader-points strong,
    .match-prediction-row em,
    .poolbaas-day-metrics strong,
    .daily-mover-card strong {
        animation: none !important;
    }
}


/* =========================================================
   FINAL NIGHT ALIGNMENT PASS
   Laatste rustige uitlijning voor desktop en mobiel
   ========================================================= */

/* Algemene kaartconsistentie */
.card,
.hero,
.dashboard-prediction-status-card,
.leaderboard-tile,
.recent-results-tile,
.upcoming-duels-tile,
.daily-mover-card,
.match-detail-stats-card,
.desktop-poolbaas-side-card,
.mobile-poolbaas-top-card {
    box-sizing: border-box !important;
}

/* Desktop: alles strak in één ritme */
@media (min-width: 861px) {
    .shell.main-content,
    .main-content {
        width: 100% !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    /*
       Topbar: logo links, slogan + menu logisch verdeeld,
       uitloggen rechts.
    */
    .site-header .header-inner {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;

        display: grid !important;
        grid-template-columns: auto minmax(260px, 1fr) auto !important;
        gap: 18px !important;
        align-items: center !important;
    }

    .brand-big-logo {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .desktop-header-slogan {
        grid-column: 2 !important;
        justify-self: start !important;
        max-width: 100% !important;
    }

    .site-header .main-nav {
        grid-column: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .site-header .main-nav a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        white-space: nowrap !important;
    }

    .site-header .main-nav .nav-auth-link {
        margin-left: 14px !important;
    }

    /*
       Dashboard bovenkant: hero en Poolbaas-kaart exact even hoog.
    */
    .dashboard-top-row-split {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr) !important;
        gap: 24px !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 0 24px !important;
    }

    .dashboard-hero-wrap,
    .desktop-poolbaas-side-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .dashboard-hero-wrap .hero-dashboard,
    .desktop-poolbaas-side-card {
        min-height: 340px !important;
        height: 100% !important;
    }

    .hero-dashboard {
        display: grid !important;
        grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr) !important;
        gap: 24px !important;
        align-items: center !important;
        padding: 30px !important;
    }

    .hero-dashboard h1,
    .hero-dashboard p {
        max-width: 620px !important;
    }

    .hero-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
        margin-top: 18px !important;
    }

    .hero-side-panel {
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
    }

    .hero-stats {
        width: 100% !important;
    }

    /*
       Dagdrama mooi onder de bovenrij.
    */
    .daily-movers-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
        margin: 0 0 24px !important;
    }

    .daily-mover-card {
        min-height: 132px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /*
       Voorspelstatus over volle breedte.
    */
    .dashboard-prediction-status-card {
        width: 100% !important;
        margin: 0 0 24px !important;
        padding: 24px !important;
    }

    /*
       Onderste dashboardkaarten netjes in gelijke kolommen.
    */
    .dashboard-content-grid,
    .dashboard-lower-grid,
    .dashboard-sections-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
        align-items: start !important;
        margin: 0 !important;
    }

    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 24px !important;
        border-radius: 30px !important;
    }

    .leaderboard-tile,
    .recent-results-tile {
        min-height: 100% !important;
    }

    /*
       Kaartkoppen overal hetzelfde.
    */
    .section-title,
    .section-title.compact {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin-bottom: 18px !important;
    }

    .section-title h2,
    .section-title.compact h2 {
        margin: 0 !important;
        line-height: 1.02 !important;
    }

    /*
       Leaderboard-rijen, uitslagen en komende duels dezelfde breedte.
    */
    .leaderboard.card,
    .leader-row,
    .recent-results-tile .result-card,
    .recent-results-tile [data-card-href],
    .upcoming-duels-tile .mini-match,
    .upcoming-duels-tile [data-card-href] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .leader-row,
    .recent-results-tile .result-card,
    .upcoming-duels-tile .mini-match {
        min-height: 58px !important;
        border-radius: 18px !important;
    }

    /*
       Match detail pagina: data/voorspellingen netjes breed.
    */
    .match-detail-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) !important;
        gap: 24px !important;
        align-items: start !important;
    }

    .match-detail-stats-card,
    .match-live-card,
    .match-projected-points-card {
        width: 100% !important;
        margin: 0 0 24px !important;
        padding: 24px !important;
        border-radius: 30px !important;
    }

    .match-stats-grid {
        gap: 12px !important;
    }

    .match-detail-shoutouts {
        gap: 14px !important;
    }
}

/* Mobiel: alles rustig onder elkaar en even breed */
@media (max-width: 860px) {
    .shell.main-content,
    .main-content {
        width: 100% !important;
        max-width: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .mobile-poolbaas-top-card,
    .hero-dashboard,
    .dashboard-prediction-status-card,
    .daily-mover-card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile,
    .match-detail-stats-card,
    .match-live-card,
    .match-projected-points-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-top-row-split,
    .daily-movers-grid,
    .dashboard-content-grid,
    .dashboard-lower-grid,
    .dashboard-sections-grid,
    .match-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-dashboard {
        padding: 20px !important;
        border-radius: 28px !important;
    }

    .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .hero-actions .button,
    .hero-actions a {
        width: 100% !important;
        justify-content: center !important;
    }

    .daily-movers-grid {
        margin: 0 0 14px !important;
    }

    .dashboard-prediction-status-card {
        margin-bottom: 14px !important;
    }

    .section-title,
    .section-title.compact {
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .leader-row,
    .recent-results-tile .result-card,
    .upcoming-duels-tile .mini-match,
    .prediction-editor {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .match-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .match-detail-shoutouts {
        grid-template-columns: 1fr !important;
    }
}

/* Kleine schermen: nog iets compacter */
@media (max-width: 420px) {
    .shell.main-content,
    .main-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .poolbaas-day-metrics {
        gap: 5px !important;
    }

    .poolbaas-day-metrics span {
        border-radius: 15px !important;
    }

    .match-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================================
   TOPBAR OVERLAP FIX
   Simpele flex-layout zodat menu/slogan niet door elkaar lopen
   ========================================================= */

@media (min-width: 861px) {
    .site-header .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        max-width: 1280px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;

        gap: 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .site-header .brand-big-logo {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .desktop-header-slogan {
        flex: 1 1 260px !important;
        min-width: 120px !important;
        max-width: none !important;
        margin: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .desktop-header-slogan::before {
        width: 1px !important;
        height: 22px !important;
        margin: 0 12px 0 0 !important;
        flex: 0 0 auto !important;
    }

    .site-header .main-nav {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;

        overflow: hidden !important;
    }

    .site-header .main-nav a {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;

        white-space: nowrap !important;
        font-size: 0.78rem !important;
    }

    .site-header .main-nav .nav-auth-link {
        margin-left: 10px !important;
        flex: 0 0 auto !important;
    }
}

/* Op smallere desktop: slogan korter, menu compacter */
@media (min-width: 861px) and (max-width: 1120px) {
    .desktop-header-slogan {
        flex-basis: 160px !important;
        max-width: 260px !important;
        font-size: 0.72rem !important;
    }

    .site-header .main-nav {
        gap: 4px !important;
    }

    .site-header .main-nav a {
        min-height: 34px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.72rem !important;
    }
}

/* Als het echt krap wordt: slogan verbergen, menu blijft netjes */
@media (min-width: 861px) and (max-width: 980px) {
    .desktop-header-slogan {
        display: none !important;
    }

    .site-header .header-inner {
        gap: 10px !important;
    }

    .site-header .main-nav {
        margin-left: auto !important;
    }
}


/* =========================================================
   FINAL TOPBAR POSITION FIX
   Logo + slogan veel verder links, uitloggen helemaal rechts
   ========================================================= */

@media (min-width: 861px) {
    .site-header .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        gap: 12px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .site-header .brand-big-logo {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: start !important;
    }

    .site-header .brand-logo-large {
        display: block !important;
        margin: 0 !important;
    }

    .desktop-header-slogan {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 520px !important;
        margin: 0 10px 0 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: rgba(16, 35, 63, 0.72) !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    .desktop-header-slogan::before {
        content: "" !important;
        display: inline-block !important;
        width: 1px !important;
        height: 22px !important;
        margin: 0 12px 0 0 !important;
        background: rgba(16, 35, 63, 0.16) !important;
        border-radius: 999px !important;
        vertical-align: middle !important;
    }

    .site-header .main-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;

        overflow: visible !important;
    }

    .site-header .main-nav a {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;

        white-space: nowrap !important;
        font-size: 0.78rem !important;
    }

    /*
       Alleen uitloggen/inloggen helemaal naar rechts duwen.
    */
    .site-header .main-nav .nav-auth-link {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    .site-header .mobile-header-auth {
        display: none !important;
    }
}

/* Medium desktop: slogan iets korter, maar nog steeds links */
@media (min-width: 861px) and (max-width: 1180px) {
    .desktop-header-slogan {
        max-width: 360px !important;
        font-size: 0.74rem !important;
    }

    .site-header .main-nav a {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.72rem !important;
    }
}

/* Krappe desktop: slogan verbergen zodat menu niet breekt */
@media (min-width: 861px) and (max-width: 980px) {
    .desktop-header-slogan {
        display: none !important;
    }

    .site-header .main-nav {
        margin-left: 8px !important;
    }
}


/* =========================================================
   FINAL TOPBAR FONT + CENTERED NAV TWEAK
   Iets groter lettertype, Mijn voorspellingen als visueel middenpunt
   ========================================================= */

@media (min-width: 861px) {
    .desktop-header-slogan {
        font-size: 0.86rem !important;
        max-width: 560px !important;
    }

    .site-header .main-nav {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .site-header .main-nav a {
        min-height: 38px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /*
       Klassement blijft links bij logo/slogan.
       Vanaf Mijn voorspellingen begint het visueel gecentreerde menu.
    */
    .site-header .main-nav a[href="/mijn-voorspellingen"] {
        margin-left: auto !important;
    }

    /*
       Uitloggen blijft helemaal rechts.
    */
    .site-header .main-nav .nav-auth-link {
        margin-left: auto !important;
    }
}

/* Medium desktop: nog steeds netjes zonder overlap */
@media (min-width: 861px) and (max-width: 1180px) {
    .desktop-header-slogan {
        max-width: 390px !important;
        font-size: 0.78rem !important;
    }

    .site-header .main-nav a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 0.78rem !important;
    }
}


/* =========================================================
   DAILY MOVER ARROW COLORS
   Stijger groen, au van de dag rood
   ========================================================= */

.daily-mover-card.is-up::after {
    color: rgba(34, 197, 94, 0.42) !important;
    opacity: 1 !important;
}

.daily-mover-card.is-down::after {
    color: rgba(239, 68, 68, 0.42) !important;
    opacity: 1 !important;
}


/* =========================================================
   KEEP TOPBAR NAV ITEMS TOGETHER
   Klassement hoort naast Mijn voorspellingen, niet los links
   ========================================================= */

@media (min-width: 861px) {
    /*
       Verwijder de extra marge op Mijn voorspellingen.
       Daardoor blijft Klassement direct ernaast staan.
    */
    .site-header .main-nav a[href="/mijn-voorspellingen"] {
        margin-left: 0 !important;
    }

    /*
       Het hele menu-blok krijgt samen de ruimte,
       uitloggen blijft apart helemaal rechts.
    */
    .site-header .main-nav {
        justify-content: flex-end !important;
        gap: 7px !important;
    }

    /*
       Uitloggen blijft de enige knop die naar rechts wordt geduwd.
    */
    .site-header .main-nav .nav-auth-link {
        margin-left: auto !important;
    }

    .site-header .main-nav a {
        font-size: 0.86rem !important;
        min-height: 38px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Medium desktop: compacter, maar menu blijft één groep */
@media (min-width: 861px) and (max-width: 1180px) {
    .site-header .main-nav {
        gap: 5px !important;
    }

    .site-header .main-nav a {
        font-size: 0.78rem !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}


/* =========================================================
   CENTER MY PREDICTIONS IN TOPBAR
   Menu-items blijven samen, Mijn voorspellingen komt visueel rond het midden
   ========================================================= */

@media (min-width: 861px) {
    /*
       Logo + slogan blijven links.
       Menu-items schuiven als groep naar rechts.
       Uitloggen blijft los helemaal rechts.
    */
    .site-header .main-nav {
        justify-content: flex-start !important;
        gap: 7px !important;
    }

    /*
       Eerste menu-item krijgt linker auto-space.
       Daardoor schuift het hele menu-blok op,
       maar Klassement blijft direct naast Mijn voorspellingen.
    */
    .site-header .main-nav a:first-child {
        margin-left: auto !important;
    }

    /*
       Mijn voorspellingen zelf géén losse marge.
    */
    .site-header .main-nav a[href="/mijn-voorspellingen"] {
        margin-left: 0 !important;
    }

    /*
       Uitloggen blijft helemaal rechts met extra scheiding.
    */
    .site-header .main-nav .nav-auth-link {
        margin-left: auto !important;
    }
}

/* Medium desktop: iets minder hard opschuiven om overlap te vermijden */
@media (min-width: 861px) and (max-width: 1180px) {
    .site-header .main-nav a:first-child {
        margin-left: 32px !important;
    }

    .site-header .main-nav .nav-auth-link {
        margin-left: auto !important;
    }
}

/* Krappe desktop: geen geforceerde centrering, dan liever netjes passend */
@media (min-width: 861px) and (max-width: 980px) {
    .site-header .main-nav a:first-child {
        margin-left: 0 !important;
    }
}


/* =========================================================
   LOGIN PAGE TOPBAR ALIGNMENT
   Topbar ook netjes wanneer gebruiker uitgelogd is
   ========================================================= */

@media (min-width: 861px) {
    /*
       Basis: logo + slogan links, nav rechts.
       Werkt ook wanneer er maar één nav-item is.
    */
    .site-header .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;

        gap: 12px !important;
        box-sizing: border-box !important;
    }

    .site-header .brand-big-logo {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .desktop-header-slogan {
        flex: 0 1 560px !important;
        min-width: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .site-header .main-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
    }

    /*
       Alle gewone menu-items blijven samen.
       Login/logout altijd rechts.
    */
    .site-header .main-nav .nav-auth-link {
        margin-left: auto !important;
    }

    /*
       Uitgelogde staat: als Inloggen de enige/rechter knop is,
       blijft hij strak rechts en niet half in het midden.
    */
    body:not(.logged-in) .site-header .main-nav {
        justify-content: flex-end !important;
    }

    .site-header .main-nav a[href="/inloggen"],
    .site-header .main-nav a[href="/uitloggen"],
    .site-header .main-nav a[href="/admin/logout"] {
        margin-left: auto !important;
    }
}

/*
   Loginpagina zelf: kaart mooi gecentreerd onder de topbar.
   Deze selectors zijn voorzichtig; ze raken alleen bekende login-namen.
*/
.login-page,
.auth-page {
    width: 100%;
}

.login-card,
.auth-card {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 861px) {
    .login-card,
    .auth-card {
        max-width: 460px !important;
    }
}


/* =========================================================
   TRUE CENTER MY PREDICTIONS IN TOPBAR
   Mijn voorspellingen visueel in het midden van de topbar
   ========================================================= */

@media (min-width: 861px) {
    .site-header {
        position: relative !important;
    }

    .site-header .header-inner {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;

        box-sizing: border-box !important;
    }

    .site-header .brand-big-logo {
        position: relative !important;
        z-index: 3 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .desktop-header-slogan {
        position: relative !important;
        z-index: 3 !important;

        flex: 0 1 560px !important;
        max-width: 560px !important;
        min-width: 0 !important;
        margin-left: 12px !important;
        margin-right: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /*
       Het gewone menu wordt als blok rond het schermmidden gezet.
       translateX(-38%) corrigeert omdat Mijn voorspellingen het tweede item is.
    */
    .site-header .main-nav {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-38%, -50%) !important;
        z-index: 2 !important;

        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    .site-header .main-nav a {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /*
       Uitloggen/Inloggen wordt uit de gecentreerde groep gehaald
       en helemaal rechts geplaatst.
    */
    .site-header .main-nav .nav-auth-link,
    .site-header .main-nav a[href="/uitloggen"],
    .site-header .main-nav a[href="/admin/logout"],
    .site-header .main-nav a[href="/inloggen"] {
        position: fixed !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 4 !important;

        margin-left: 0 !important;
    }
}

/* Medium desktop: iets compacter en minder agressief gecentreerd */
@media (min-width: 861px) and (max-width: 1180px) {
    .desktop-header-slogan {
        max-width: 360px !important;
        font-size: 0.78rem !important;
    }

    .site-header .main-nav {
        transform: translate(-40%, -50%) !important;
        gap: 5px !important;
    }

    .site-header .main-nav a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 0.78rem !important;
    }
}

/* Krappe desktop: terug naar normale flex, zodat niets overlapt */
@media (min-width: 861px) and (max-width: 980px) {
    .site-header .header-inner {
        display: flex !important;
        gap: 10px !important;
    }

    .desktop-header-slogan {
        display: none !important;
    }

    .site-header .main-nav {
        position: static !important;
        transform: none !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }

    .site-header .main-nav .nav-auth-link,
    .site-header .main-nav a[href="/uitloggen"],
    .site-header .main-nav a[href="/admin/logout"],
    .site-header .main-nav a[href="/inloggen"] {
        position: static !important;
        transform: none !important;
        margin-left: auto !important;
    }
}


/* =========================================================
   FINAL TOPBAR AUTH FIX
   Login/Logout niet in het midden.
   Ingelogd: uitloggen helemaal rechts.
   Uitgelogd: zelfde topbar, maar inloggen-knop verborgen.
   ========================================================= */

@media (min-width: 861px) {
    .site-header {
        position: relative !important;
    }

    .site-header .header-inner {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        max-width: none !important;
        width: 100% !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;

        box-sizing: border-box !important;
    }

    /*
       Logo + slogan links.
    */
    .site-header .brand-big-logo {
        position: relative !important;
        z-index: 5 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .desktop-header-slogan {
        position: relative !important;
        z-index: 5 !important;

        flex: 0 1 560px !important;
        max-width: 560px !important;
        min-width: 0 !important;
        margin-left: 12px !important;
        margin-right: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 0.86rem !important;
    }

    /*
       Menu-groep gecentreerd.
       Mijn voorspellingen blijft visueel rond het midden.
    */
    .site-header .main-nav {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-38%, -50%) !important;
        z-index: 3 !important;

        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    .site-header .main-nav a {
        position: static !important;
        transform: none !important;

        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /*
       Uitloggen hoort NIET in de gecentreerde groep.
       Die blijft helemaal rechts.
    */
    .site-header .main-nav .nav-auth-link[href="/uitloggen"],
    .site-header .main-nav .nav-auth-link[href="/admin/logout"] {
        position: fixed !important;
        right: 16px !important;
        top: 36px !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;

        margin-left: 0 !important;
    }

    /*
       Uitgelogd: geen losse Inloggen-knop tonen.
       De loginpagina zelf is al zichtbaar, dus die knop is overbodig.
    */
    .site-header .main-nav .nav-auth-link[href="/inloggen"] {
        display: none !important;
    }
}

/* Medium desktop: compacter zonder overlap */
@media (min-width: 861px) and (max-width: 1180px) {
    .desktop-header-slogan {
        max-width: 360px !important;
        font-size: 0.78rem !important;
    }

    .site-header .main-nav {
        transform: translate(-40%, -50%) !important;
        gap: 5px !important;
    }

    .site-header .main-nav a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 0.78rem !important;
    }
}

/* Krappe desktop: alles normaal laten passen */
@media (min-width: 861px) and (max-width: 980px) {
    .desktop-header-slogan {
        display: none !important;
    }

    .site-header .main-nav {
        position: static !important;
        transform: none !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }

    .site-header .main-nav .nav-auth-link[href="/uitloggen"],
    .site-header .main-nav .nav-auth-link[href="/admin/logout"] {
        position: static !important;
        transform: none !important;
        margin-left: auto !important;
    }
}


/* =========================================================
   STRUCTURAL TOPBAR AUTH FIX
   Uitloggen staat buiten de nav en dus altijd rechts
   ========================================================= */

@media (min-width: 861px) {
    .site-header .header-inner {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        max-width: none !important;
        width: 100% !important;
        min-height: 72px !important;
        margin: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .site-header .brand-big-logo,
    .desktop-header-slogan {
        position: relative !important;
        z-index: 5 !important;
    }

    .site-header .main-nav {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-38%, -50%) !important;
        z-index: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header .main-nav a {
        position: static !important;
        transform: none !important;
        margin: 0 !important;

        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /*
       Oude auth-links binnen nav nooit tonen, mocht er nog eentje blijven hangen.
    */
    .site-header .main-nav .nav-auth-link {
        display: none !important;
    }

    /*
       Nieuwe aparte auth-knop: altijd helemaal rechts.
    */
    .topbar-auth-right {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .topbar-auth-right a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 38px !important;
        padding: 0 12px !important;

        border-radius: 999px !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        color: #10233f !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    .topbar-auth-right a:hover {
        background: rgba(16, 35, 63, 0.06) !important;
    }
}

/* Uitgelogd: topbar-auth-right is leeg, dus geen knop. Layout blijft hetzelfde. */
@media (min-width: 861px) and (max-width: 980px) {
    .site-header .main-nav {
        position: static !important;
        transform: none !important;
        margin-left: auto !important;
    }

    .topbar-auth-right {
        position: static !important;
        transform: none !important;
        margin-left: auto !important;
    }
}


/* =========================================================
   CONTENT TOP CLEARANCE FIX
   Bovenste kaarten mogen niet onder de topbar/ticker vallen
   ========================================================= */

@media (min-width: 861px) {
    /*
       Dashboard/content weer iets naar beneden,
       zonder de topbar of Tour de France bar groter te maken.
    */
    .dashboard-top-row,
    .dashboard-top-row-split,
    .mobile-poolbaas-top-card + .dashboard-top-row,
    main > .dashboard-top-row:first-child,
    main > section:first-child {
        margin-top: 18px !important;
    }

    /*
       Als de eerste zichtbare kaart direct na de announcement bar komt,
       krijgt hij ook voldoende ademruimte.
    */
    .site-announcement-bar + .app-shell main,
    .site-announcement-bar + .app-shell .shell {
        padding-top: 18px !important;
    }
}

@media (max-width: 860px) {
    /*
       Mobiel voorzichtig: daar hebben we al vaste mobile header/bottom nav.
    */
    main > section:first-child {
        margin-top: 10px !important;
    }
}


/* =========================================================
   MOBILE TILE SPACING + MATCH DETAIL FIX
   Uniforme afstand tussen tegels + wedstrijd-detail netjes op mobiel
   ========================================================= */

@media (max-width: 860px) {
    /*
       Eén vaste mobiele tegelafstand overal.
       Dit overschrijft losse margins die door eerdere patches zijn ontstaan.
    */
    main,
    .shell,
    .dashboard-page,
    .matches-page,
    .match-detail-page,
    .my-predictions-page,
    .quick-predict-page {
        --mobile-card-gap: 14px;
    }

    main > section,
    main > article,
    main > div,
    .dashboard-page > section,
    .dashboard-page > article,
    .dashboard-content-grid > *,
    .dashboard-lower-grid > *,
    .dashboard-sections-grid > *,
    .daily-movers-grid > *,
    .matches-page > section,
    .matches-page > article,
    .match-detail-page > section,
    .match-detail-page > article {
        margin-top: 0 !important;
        margin-bottom: var(--mobile-card-gap) !important;
    }

    main > section:last-child,
    main > article:last-child,
    main > div:last-child {
        margin-bottom: 0 !important;
    }

    .dashboard-content-grid,
    .dashboard-lower-grid,
    .dashboard-sections-grid,
    .daily-movers-grid,
    .match-stats-grid,
    .match-detail-shoutouts {
        gap: var(--mobile-card-gap) !important;
    }

    .card,
    .leaderboard-tile,
    .recent-results-tile,
    .upcoming-duels-tile,
    .dashboard-prediction-status-card,
    .mobile-poolbaas-top-card,
    .daily-mover-card,
    .match-card,
    .match-detail-stats-card {
        margin-top: 0 !important;
    }

    /*
       Wedstrijd-detailpagina: basisruimte.
    */
    .match-detail-page {
        padding-bottom: 96px !important;
    }

    /*
       De bovenste wedstrijdkaart/detailkaart moet niet kapot gaan door oude
       match-card mobiele vlag-css.
    */
    .match-detail-page .match-card,
    .match-detail-page .match-detail-card,
    .match-detail-page .match-hero,
    .match-detail-page .flag-split-card {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 26px !important;
        padding: 18px 14px !important;
        min-height: 176px !important;

        background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
        border: 2px solid rgba(16, 35, 63, 0.10) !important;
        box-shadow: 0 14px 32px rgba(16, 35, 63, 0.10) !important;
    }

    /*
       Vlaggen op detailpagina terug als rustige achtergrond links/rechts.
       Niet te groot, niet over de score heen.
    */
    .match-detail-page .flag-split-card::before,
    .match-detail-page .flag-split-card::after,
    .match-detail-page .match-card.flag-split-card::before,
    .match-detail-page .match-card.flag-split-card::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 48% !important;
        z-index: 0 !important;

        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        opacity: 0.15 !important;
        filter: saturate(1.05) contrast(1.02) !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .match-detail-page .flag-split-card::before,
    .match-detail-page .match-card.flag-split-card::before {
        left: 0 !important;
        background-image: var(--flag-home) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%) !important;
    }

    .match-detail-page .flag-split-card::after,
    .match-detail-page .match-card.flag-split-card::after {
        right: 0 !important;
        background-image: var(--flag-away) !important;
        mask-image: linear-gradient(270deg, #000 0%, #000 48%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 48%, transparent 100%) !important;
    }

    .match-detail-page .match-card > *,
    .match-detail-page .match-detail-card > *,
    .match-detail-page .match-hero > *,
    .match-detail-page .flag-split-card > * {
        position: relative !important;
        z-index: 2 !important;
    }

    /*
       Teams/score op de detailpagina netjes in drie kolommen.
    */
    .match-detail-page .match-main,
    .match-detail-page .match-detail-main,
    .match-detail-page .match-hero-main,
    .match-detail-page .match-scoreboard {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 14px 0 12px !important;
    }

    .match-detail-page .match-team,
    .match-detail-page .prediction-team,
    .match-detail-page .team-cell,
    .match-detail-page .team-name {
        min-width: 0 !important;
        text-align: center !important;
    }

    .match-detail-page .match-team strong,
    .match-detail-page .team-name strong,
    .match-detail-page .match-team-name,
    .match-detail-page .team-name {
        display: block !important;
        max-width: 100% !important;

        color: #10233f !important;
        font-size: 0.96rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
       Score/resultaat duidelijk, zwart/blauw, niet goud en niet scheef.
    */
    .match-detail-page .match-score,
    .match-detail-page .score,
    .match-detail-page .actual-score,
    .match-detail-page .result-score,
    .match-detail-page .match-result,
    .match-detail-page .prediction-separator {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 58px !important;
        min-height: 42px !important;
        padding: 7px 10px !important;

        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 2px solid rgba(16, 35, 63, 0.10) !important;
        box-shadow: 0 8px 18px rgba(16, 35, 63, 0.08) !important;

        color: #10233f !important;
        font-size: 1.18rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .match-detail-page .match-meta,
    .match-detail-page .match-top,
    .match-detail-page .match-detail-meta,
    .match-detail-page .match-kickoff {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        color: rgba(16, 35, 63, 0.68) !important;
        font-size: 0.76rem !important;
        font-weight: 850 !important;
        text-align: center !important;
    }

    /*
       Voorspellingen/statistieken onder de wedstrijdkaart netjes stapelen.
    */
    .match-detail-page .match-stats-grid,
    .match-detail-page .match-detail-shoutouts,
    .match-detail-page .projected-points-grid,
    .match-detail-page .prediction-list,
    .match-detail-page .match-predictions-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--mobile-card-gap) !important;
    }

    .match-detail-page .match-prediction-row,
    .match-detail-page .prediction-row,
    .match-detail-page .match-stat-card,
    .match-detail-page .match-detail-shoutouts > * {
        border-radius: 20px !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
    }

    /*
       Oude clickable/match-card hover-transforms uitzetten op detailpagina mobiel.
    */
    .match-detail-page .match-card,
    .match-detail-page .prediction-editor,
    .match-detail-page [data-card-href] {
        transform: none !important;
    }
}


/* =========================================================
   TARGETED MOBILE MATCH CARDS FIX
   Alleen /wedstrijden-kaarten, niet de hele app en niet de detailpagina
   ========================================================= */

@media (max-width: 860px) {
    /*
       Wedstrijdpagina: consistente ruimte tussen kaarten.
    */
    .matches-page {
        --match-card-gap: 14px;
    }

    .matches-page .match-card-link {
        display: block !important;
        width: 100% !important;
        margin: 0 0 var(--match-card-gap) 0 !important;
        color: inherit !important;
        text-decoration: none !important;
    }

    .matches-page .match-card-link:last-child {
        margin-bottom: 0 !important;
    }

    /*
       De kaart zelf: genoeg hoogte voor vlaggen, teams, score en voorspelling.
    */
    .matches-page .match-card {
        position: relative !important;
        overflow: hidden !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;

        min-height: 158px !important;
        width: 100% !important;
        padding: 14px 13px !important;
        box-sizing: border-box !important;

        border-radius: 24px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
        border: 2px solid rgba(16, 35, 63, 0.10) !important;
        box-shadow: 0 12px 28px rgba(16, 35, 63, 0.09) !important;
    }

    /*
       Vlaggen rustig als achtergrond. Niet te groot en niet over tekst heen.
    */
    .matches-page .match-card.flag-split-card::before,
    .matches-page .match-card.flag-split-card::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 48% !important;
        z-index: 0 !important;

        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center !important;

        opacity: 0.16 !important;
        transform: none !important;
        filter: saturate(1.05) contrast(1.03) !important;
        pointer-events: none !important;
    }

    .matches-page .match-card.flag-split-card::before {
        left: 0 !important;
        background-image: var(--flag-home) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%) !important;
    }

    .matches-page .match-card.flag-split-card::after {
        right: 0 !important;
        background-image: var(--flag-away) !important;
        mask-image: linear-gradient(270deg, #000 0%, #000 48%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 48%, transparent 100%) !important;
    }

    .matches-page .match-card > * {
        position: relative !important;
        z-index: 2 !important;
    }

    /*
       Bovenregel: datum/status netjes compact.
    */
    .matches-page .match-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;

        margin: 0 0 10px 0 !important;

        color: rgba(16, 35, 63, 0.68) !important;
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
    }

    /*
       Teams + score: altijd 3 kolommen.
    */
    .matches-page .match-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;

        min-height: 58px !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    .matches-page .match-team {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .matches-page .match-team strong,
    .matches-page .match-team-name {
        display: block !important;
        max-width: 100% !important;

        color: #10233f !important;
        font-size: 0.92rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /*
       Score of tijd in het midden: altijd leesbaar.
    */
    .matches-page .match-score,
    .matches-page .score,
    .matches-page .match-result,
    .matches-page .match-time,
    .matches-page .prediction-separator {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 52px !important;
        min-height: 38px !important;
        padding: 6px 9px !important;

        border-radius: 15px !important;
        background: rgba(255, 255, 255, 0.90) !important;
        border: 2px solid rgba(16, 35, 63, 0.10) !important;
        box-shadow: 0 7px 16px rgba(16, 35, 63, 0.08) !important;

        color: #10233f !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /*
       Voorspelling onderin: zichtbaar, maar niet te hoog.
    */
    .matches-page .prediction-strip {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;

        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 8px 0 0 0 !important;
        padding: 8px 0 0 0 !important;

        overflow: visible !important;
        border-top: 1px solid rgba(16, 35, 63, 0.08) !important;
    }

    .matches-page .prediction-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        max-width: 100% !important;
        padding: 6px 9px !important;
        border-radius: 999px !important;

        background: rgba(16, 35, 63, 0.06) !important;
        color: #10233f !important;

        font-size: 0.72rem !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /*
       Oude regel 'mijn voorspelling' blijft weg op mobiel.
    */
    .matches-page .featured-prediction-row {
        display: none !important;
    }
}


/* =========================================================
   REAL MOBILE MATCH DETAIL HERO FIX
   Voor /wedstrijd/<id>: .match-detail-hero / team / score
   ========================================================= */

@media (max-width: 860px) {
    .match-detail-page {
        --match-detail-gap: 14px;
    }

    .match-detail-page .page-heading {
        margin-bottom: var(--match-detail-gap) !important;
    }

    .match-detail-page .page-heading.split {
        display: block !important;
    }

    .match-detail-page .page-heading h1 {
        font-size: 1.35rem !important;
        line-height: 1.08 !important;
        margin-bottom: 6px !important;
    }

    .match-detail-page .page-heading .button {
        display: none !important;
    }

    /*
       De echte hero-kaart.
    */
    .match-detail-page .match-detail-hero {
        position: relative !important;
        overflow: hidden !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        min-height: 168px !important;
        padding: 18px 14px !important;
        margin-bottom: var(--match-detail-gap) !important;
        box-sizing: border-box !important;

        border-radius: 26px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
        border: 2px solid rgba(16, 35, 63, 0.10) !important;
        box-shadow: 0 14px 32px rgba(16, 35, 63, 0.10) !important;
    }

    /*
       Vlaggen achter teamkolommen.
    */
    .match-detail-page .match-detail-hero.flag-split-card::before,
    .match-detail-page .match-detail-hero.flag-split-card::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 50% !important;
        z-index: 0 !important;

        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center !important;

        opacity: 0.17 !important;
        transform: none !important;
        filter: saturate(1.05) contrast(1.03) !important;
        pointer-events: none !important;
    }

    .match-detail-page .match-detail-hero.flag-split-card::before {
        left: 0 !important;
        background-image: var(--flag-home) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 100%) !important;
    }

    .match-detail-page .match-detail-hero.flag-split-card::after {
        right: 0 !important;
        background-image: var(--flag-away) !important;
        mask-image: linear-gradient(270deg, #000 0%, #000 44%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 44%, transparent 100%) !important;
    }

    .match-detail-page .match-detail-hero > * {
        position: relative !important;
        z-index: 2 !important;
    }

    /*
       Teamkolommen.
    */
    .match-detail-page .match-detail-team {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .match-detail-page .match-detail-team span {
        display: block !important;
        margin-bottom: 5px !important;

        color: rgba(16, 35, 63, 0.56) !important;
        font-size: 0.64rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    .match-detail-page .match-detail-team strong {
        display: block !important;
        max-width: 100% !important;

        color: #10233f !important;
        font-size: 0.98rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-align: center !important;
    }

    /*
       Scoreblok exact in het midden.
    */
    .match-detail-page .match-detail-score {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 64px !important;
        padding: 8px 9px !important;
        box-sizing: border-box !important;

        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 2px solid rgba(16, 35, 63, 0.10) !important;
        box-shadow: 0 9px 20px rgba(16, 35, 63, 0.09) !important;

        text-align: center !important;
    }

    .match-detail-page .match-detail-score strong {
        display: block !important;

        color: #10233f !important;
        font-size: 1.24rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: -0.03em !important;
        white-space: nowrap !important;
    }

    .match-detail-page .match-detail-score span {
        display: block !important;
        margin-top: 5px !important;

        color: rgba(16, 35, 63, 0.62) !important;
        font-size: 0.62rem !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        white-space: normal !important;
    }

    /*
       De blokken onder de hero stapelen netjes.
    */
    .match-detail-page .match-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--match-detail-gap) !important;
        margin-top: 0 !important;
    }

    .match-detail-page .match-detail-grid > article {
        margin: 0 !important;
    }

    .match-detail-page .live-stat-list,
    .match-detail-page .match-stats-grid,
    .match-detail-page .match-detail-shoutouts,
    .match-detail-page .match-prediction-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .match-detail-page .match-prediction-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        gap: 8px !important;

        padding: 10px 11px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
    }

    .match-detail-page .match-prediction-row strong,
    .match-detail-page .match-prediction-row span,
    .match-detail-page .match-prediction-row em {
        min-width: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
    }
}


/* =========================================================
   FINAL MOBILE MATCH DETAIL REPAIR
   Exact voor /wedstrijd/<id> en de echte match_detail.html classes
   ========================================================= */

@media (max-width: 860px) {
    body .match-detail-page {
        --detail-gap: 14px;
        width: 100% !important;
        padding-bottom: 96px !important;
    }

    body .match-detail-page .page-heading {
        margin: 0 0 var(--detail-gap) 0 !important;
    }

    body .match-detail-page .page-heading.split {
        display: block !important;
    }

    body .match-detail-page .page-heading h1 {
        font-size: 1.28rem !important;
        line-height: 1.08 !important;
        margin: 0 0 6px 0 !important;
    }

    body .match-detail-page .page-heading p {
        margin: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    body .match-detail-page .page-heading .button {
        display: none !important;
    }

    body .match-detail-page > .match-detail-hero.card.flag-split-card {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        min-height: 164px !important;
        margin: 0 0 var(--detail-gap) 0 !important;
        padding: 18px 12px !important;
        box-sizing: border-box !important;

        border-radius: 26px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
        border: 2px solid rgba(16, 35, 63, 0.12) !important;
        box-shadow: 0 14px 32px rgba(16, 35, 63, 0.10) !important;
    }

    body .match-detail-page > .match-detail-hero.card.flag-split-card::before,
    body .match-detail-page > .match-detail-hero.card.flag-split-card::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 50% !important;
        z-index: -1 !important;

        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;

        opacity: 0.16 !important;
        transform: none !important;
        filter: saturate(1.05) contrast(1.03) !important;
        pointer-events: none !important;
    }

    body .match-detail-page > .match-detail-hero.card.flag-split-card::before {
        left: 0 !important;
        background-image: var(--flag-home) !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 100%) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 100%) !important;
    }

    body .match-detail-page > .match-detail-hero.card.flag-split-card::after {
        right: 0 !important;
        background-image: var(--flag-away) !important;
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 100%) !important;
        mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 100%) !important;
    }

    body .match-detail-page > .match-detail-hero.card.flag-split-card > * {
        position: relative !important;
        z-index: 2 !important;
    }

    body .match-detail-page .match-detail-team {
        min-width: 0 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

    body .match-detail-page .match-detail-team span {
        display: block !important;
        margin: 0 0 5px 0 !important;

        color: rgba(16, 35, 63, 0.58) !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    body .match-detail-page .match-detail-team strong {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        color: #10233f !important;
        font-size: 0.94rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body .match-detail-page .match-detail-score {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        min-height: 64px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 8px 6px !important;
        box-sizing: border-box !important;

        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        border: 2px solid rgba(16, 35, 63, 0.12) !important;
        box-shadow: 0 9px 20px rgba(16, 35, 63, 0.09) !important;

        text-align: center !important;
    }

    body .match-detail-page .match-detail-score strong {
        display: block !important;

        color: #10233f !important;
        font-size: 1.18rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: -0.04em !important;
        white-space: nowrap !important;
    }

    body .match-detail-page .match-detail-score span {
        display: block !important;
        max-width: 100% !important;
        margin: 5px 0 0 0 !important;

        color: rgba(16, 35, 63, 0.64) !important;
        font-size: 0.56rem !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        white-space: normal !important;
    }

    body .match-detail-page .match-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--detail-gap) !important;
        margin: 0 !important;
    }

    body .match-detail-page .match-detail-grid > article {
        margin: 0 !important;
    }

    body .match-detail-page .live-stat-list,
    body .match-detail-page .match-stats-grid,
    body .match-detail-page .match-detail-shoutouts,
    body .match-detail-page .match-prediction-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body .match-detail-page .match-prediction-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        gap: 8px !important;
    }
}


/* =========================================================
   HARD MOBILE MATCH DETAIL HERO
   Echte vlaglagen, geen pseudo-element afhankelijkheid
   ========================================================= */

.match-detail-hero-hard {
    position: relative;
    overflow: hidden;
}

.match-detail-flag-bg {
    display: none;
}

@media (max-width: 860px) {
    body .match-detail-page {
        --detail-gap: 14px;
    }

    body .match-detail-page .page-heading {
        margin-bottom: var(--detail-gap) !important;
    }

    body .match-detail-page .page-heading.split {
        display: block !important;
    }

    body .match-detail-page .page-heading h1 {
        font-size: 1.28rem !important;
        line-height: 1.08 !important;
        margin: 0 0 6px 0 !important;
    }

    body .match-detail-page .page-heading .button {
        display: none !important;
    }

    body .match-detail-page .match-detail-hero-hard {
        position: relative !important;
        overflow: hidden !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        min-height: 166px !important;
        margin: 0 0 var(--detail-gap) 0 !important;
        padding: 18px 12px !important;
        box-sizing: border-box !important;

        border-radius: 26px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
        border: 2px solid rgba(16, 35, 63, 0.12) !important;
        box-shadow: 0 14px 32px rgba(16, 35, 63, 0.10) !important;
    }

    body .match-detail-page .match-detail-hero-hard::before,
    body .match-detail-page .match-detail-hero-hard::after {
        display: none !important;
        content: none !important;
    }

    body .match-detail-page .match-detail-flag-bg {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 52% !important;
        z-index: 0 !important;

        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;

        opacity: 0.16 !important;
        pointer-events: none !important;
    }

    body .match-detail-page .match-detail-flag-bg.is-home {
        left: 0 !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 100%) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 100%) !important;
    }

    body .match-detail-page .match-detail-flag-bg.is-away {
        right: 0 !important;
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 44%, transparent 100%) !important;
        mask-image: linear-gradient(270deg, #000 0%, #000 44%, transparent 100%) !important;
    }

    body .match-detail-page .match-detail-hero-hard > :not(.match-detail-flag-bg) {
        position: relative !important;
        z-index: 2 !important;
    }

    body .match-detail-page .match-detail-team {
        min-width: 0 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

    body .match-detail-page .match-detail-team span {
        margin: 0 0 5px 0 !important;
        color: rgba(16, 35, 63, 0.58) !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    body .match-detail-page .match-detail-team strong {
        display: block !important;
        max-width: 100% !important;

        color: #10233f !important;
        font-size: 0.94rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body .match-detail-page .match-detail-score {
        width: 72px !important;
        min-width: 72px !important;
        min-height: 64px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 8px 6px !important;
        box-sizing: border-box !important;

        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 2px solid rgba(16, 35, 63, 0.12) !important;
        box-shadow: 0 9px 20px rgba(16, 35, 63, 0.09) !important;

        text-align: center !important;
    }

    body .match-detail-page .match-detail-score strong {
        color: #10233f !important;
        font-size: 1.18rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: -0.04em !important;
        white-space: nowrap !important;
    }

    body .match-detail-page .match-detail-score span {
        margin-top: 5px !important;
        color: rgba(16, 35, 63, 0.64) !important;
        font-size: 0.56rem !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    body .match-detail-page .match-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--detail-gap) !important;
        margin: 0 !important;
    }

    body .match-detail-page .match-detail-grid > article {
        margin: 0 !important;
    }
}


/* =========================================================
   POLISH MOBILE MATCH DETAIL PAGE
   Score exact midden + pagina netjes gevuld en uitgelijnd
   ========================================================= */

@media (max-width: 860px) {
    body .match-detail-page {
        --detail-gap: 14px;
        --detail-radius: 24px;

        width: 100% !important;
        padding-bottom: 98px !important;
    }

    /*
       Kop boven de wedstrijd: compacter en strak.
    */
    body .match-detail-page .page-heading {
        margin: 0 0 var(--detail-gap) 0 !important;
        padding: 0 2px !important;
    }

    body .match-detail-page .page-heading.split {
        display: block !important;
    }

    body .match-detail-page .page-heading .eyebrow {
        display: block !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    body .match-detail-page .page-heading h1 {
        margin: 0 auto 6px auto !important;
        max-width: 320px !important;

        color: #10233f !important;
        font-size: 1.34rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
        text-align: center !important;
        letter-spacing: -0.04em !important;
    }

    body .match-detail-page .page-heading p {
        max-width: 330px !important;
        margin: 0 auto !important;

        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    body .match-detail-page .page-heading .button {
        display: none !important;
    }

    /*
       Hero volledig symmetrisch:
       links team, exact midden score, rechts team.
    */
    body .match-detail-page .match-detail-hero-hard {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-items: stretch !important;
        column-gap: 9px !important;

        min-height: 174px !important;
        padding: 18px 13px !important;
        margin: 0 0 var(--detail-gap) 0 !important;
    }

    /*
       Vlaggen iets voller, maar nog rustig.
    */
    body .match-detail-page .match-detail-flag-bg {
        opacity: 0.18 !important;
        width: 54% !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    body .match-detail-page .match-detail-flag-bg.is-home {
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 100%) !important;
    }

    body .match-detail-page .match-detail-flag-bg.is-away {
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 48%, transparent 100%) !important;
        mask-image: linear-gradient(270deg, #000 0%, #000 48%, transparent 100%) !important;
    }

    body .match-detail-page .match-detail-team {
        align-self: stretch !important;
        min-width: 0 !important;
        padding: 4px 0 !important;
    }

    body .match-detail-page .match-detail-team span {
        margin-bottom: 6px !important;
        font-size: 0.62rem !important;
    }

    body .match-detail-page .match-detail-team strong {
        max-width: 100% !important;
        min-height: 2.05em !important;

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

        font-size: 0.96rem !important;
        line-height: 1.07 !important;
        text-align: center !important;
    }

    /*
       Scoreblok exact gecentreerd in eigen kolom.
    */
    body .match-detail-page .match-detail-score {
        justify-self: center !important;
        align-self: center !important;

        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
        min-height: 70px !important;

        margin: 0 auto !important;
        padding: 9px 7px !important;

        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.96) !important;
    }

    body .match-detail-page .match-detail-score strong {
        font-size: 1.28rem !important;
        line-height: 1 !important;
        letter-spacing: -0.045em !important;
    }

    body .match-detail-page .match-detail-score span {
        margin-top: 6px !important;
        font-size: 0.57rem !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }

    /*
       Alle detailkaarten onder de hero consequent uitlijnen.
    */
    body .match-detail-page .match-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--detail-gap) !important;
        margin: 0 !important;
    }

    body .match-detail-page .match-detail-grid > article,
    body .match-detail-page .card {
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: var(--detail-radius) !important;
    }

    body .match-detail-page .match-detail-grid > article {
        margin: 0 !important;
        padding: 18px 15px !important;
    }

    body .match-detail-page .section-title.compact {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;

        margin-bottom: 13px !important;
    }

    body .match-detail-page .section-title.compact h2 {
        margin: 0 !important;
        color: #10233f !important;
        font-size: 1.05rem !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
        letter-spacing: -0.025em !important;
    }

    body .match-detail-page .section-title.compact .eyebrow {
        margin-bottom: 5px !important;
    }

    /*
       Wedstrijdgegevens mooi als compacte lijst.
    */
    body .match-detail-page .live-stat-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body .match-detail-page .live-stat-list > div {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;

        padding: 10px 11px !important;
        border-radius: 17px !important;
        background: rgba(16, 35, 63, 0.045) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
    }

    body .match-detail-page .live-stat-list span {
        color: rgba(16, 35, 63, 0.62) !important;
        font-size: 0.74rem !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
    }

    body .match-detail-page .live-stat-list strong {
        min-width: 0 !important;
        color: #10233f !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
        text-align: right !important;
    }

    /*
       Poolbaas data: tegels gelijk en leesbaar.
    */
    body .match-detail-page .match-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body .match-detail-page .match-stats-grid > div {
        min-height: 82px !important;
        padding: 12px 9px !important;
        border-radius: 18px !important;

        background: rgba(16, 35, 63, 0.045) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body .match-detail-page .match-stats-grid strong {
        color: #10233f !important;
        font-size: 1.22rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    body .match-detail-page .match-stats-grid span {
        margin-top: 6px !important;
        color: rgba(16, 35, 63, 0.62) !important;
        font-size: 0.68rem !important;
        line-height: 1.12 !important;
        font-weight: 850 !important;
    }

    /*
       Perfect / net mis blokken.
    */
    body .match-detail-page .match-detail-shoutouts {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-top: 12px !important;
    }

    body .match-detail-page .match-detail-shoutouts > div {
        padding: 12px !important;
        border-radius: 18px !important;
        background: rgba(16, 35, 63, 0.045) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
    }

    body .match-detail-page .match-detail-shoutouts h3 {
        margin: 0 0 7px 0 !important;
        color: #10233f !important;
        font-size: 0.88rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
    }

    body .match-detail-page .match-detail-shoutouts p {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }

    /*
       Projected points / voorspellingen.
    */
    body .match-detail-page .match-projected-score {
        margin: 4px 0 14px 0 !important;
        padding: 14px !important;
        border-radius: 20px !important;
        background: rgba(16, 35, 63, 0.045) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
        text-align: center !important;
    }

    body .match-detail-page .match-projected-score strong {
        display: block !important;
        margin: 5px 0 !important;
        color: #10233f !important;
        font-size: 1.55rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    body .match-detail-page .match-projected-score-kicker,
    body .match-detail-page .match-projected-score-sub {
        display: block !important;
        color: rgba(16, 35, 63, 0.62) !important;
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
    }

    body .match-detail-page .match-projected-table-head,
    body .match-detail-page .match-prediction-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1.2fr) 64px 54px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body .match-detail-page .match-projected-table-head {
        padding: 0 4px 7px 4px !important;
        color: rgba(16, 35, 63, 0.56) !important;
        font-size: 0.64rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    body .match-detail-page .match-prediction-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body .match-detail-page .match-prediction-row {
        padding: 10px 9px !important;
        border-radius: 17px !important;
        background: rgba(16, 35, 63, 0.045) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
    }

    body .match-detail-page .match-prediction-row strong,
    body .match-detail-page .match-prediction-row span,
    body .match-detail-page .match-prediction-row em {
        min-width: 0 !important;
        color: #10233f !important;
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
    }

    body .match-detail-page .match-prediction-row strong {
        font-weight: 950 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body .match-detail-page .match-prediction-row span,
    body .match-detail-page .match-prediction-row em {
        text-align: center !important;
        font-weight: 900 !important;
    }

    body .match-detail-page .match-prediction-row em {
        justify-self: end !important;
        min-width: 42px !important;
        padding: 5px 7px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.75) !important;
        font-style: normal !important;
    }
}


/* =========================================================
   POLISH MOBILE MATCH DETAIL POOLBAAS DATA
   Strakkere Poolbaas data-sectie op /wedstrijd/<id>
   ========================================================= */

@media (max-width: 860px) {
    body .match-detail-page .match-detail-stats-card {
        padding: 18px 15px !important;
    }

    body .match-detail-page .match-detail-stats-card .section-title.compact {
        margin-bottom: 14px !important;
        text-align: center !important;
    }

    body .match-detail-page .match-detail-stats-card .section-title.compact > div {
        width: 100% !important;
    }

    body .match-detail-page .match-detail-stats-card .eyebrow {
        display: block !important;
        text-align: center !important;
        margin-bottom: 6px !important;
    }

    body .match-detail-page .match-detail-stats-card h2 {
        text-align: center !important;
        font-size: 1.08rem !important;
        line-height: 1.12 !important;
    }

    /*
       Bovenste statistiek groot over volle breedte.
       Daarna winst/gelijk/winst als compact grid.
    */
    body .match-detail-page .match-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body .match-detail-page .match-stats-grid > div {
        min-height: 76px !important;
        padding: 11px 7px !important;
        border-radius: 18px !important;

        background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,251,255,0.86)) !important;
        border: 1px solid rgba(16, 35, 63, 0.08) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

    body .match-detail-page .match-stats-grid > div:first-child {
        grid-column: 1 / -1 !important;
        min-height: 92px !important;
        padding: 14px 12px !important;

        background:
            radial-gradient(circle at top left, rgba(255, 214, 31, 0.20), transparent 34%),
            linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.9)) !important;
        border: 1px solid rgba(16, 35, 63, 0.10) !important;
    }

    body .match-detail-page .match-stats-grid strong {
        display: block !important;
        color: #10233f !important;
        font-size: 1.24rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: -0.04em !important;
        white-space: nowrap !important;
    }

    body .match-detail-page .match-stats-grid > div:first-child strong {
        font-size: 1.75rem !important;
    }

    body .match-detail-page .match-stats-grid span {
        display: block !important;
        max-width: 100% !important;
        margin-top: 7px !important;

        color: rgba(16, 35, 63, 0.64) !important;
        font-size: 0.66rem !important;
        line-height: 1.12 !important;
        font-weight: 850 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body .match-detail-page .match-stats-grid > div:first-child span {
        font-size: 0.72rem !important;
        line-height: 1.18 !important;
    }

    /*
       Shoutouts rustiger en netter onder de data.
    */
    body .match-detail-page .match-detail-shoutouts {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-top: 12px !important;
    }

    body .match-detail-page .match-detail-shoutouts > div {
        padding: 13px 12px !important;
        border-radius: 18px !important;

        background: rgba(16, 35, 63, 0.045) !important;
        border: 1px solid rgba(16, 35, 63, 0.07) !important;
    }

    body .match-detail-page .match-detail-shoutouts h3 {
        margin: 0 0 7px 0 !important;
        color: #10233f !important;
        font-size: 0.88rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
        text-align: center !important;
    }

    body .match-detail-page .match-detail-shoutouts p {
        margin: 0 !important;
        color: rgba(16, 35, 63, 0.70) !important;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        font-weight: 750 !important;
        text-align: center !important;
    }

    body .match-detail-page .match-detail-shoutouts p span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 3px 2px !important;
        padding: 5px 8px !important;
        border-radius: 999px !important;

        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(16, 35, 63, 0.06) !important;

        color: #10233f !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }
}


/* =========================================================
   CENTER MOBILE MATCH DETAIL SCORE
   Uitslag exact in het midden van de vlaggenkaart
   ========================================================= */

@media (max-width: 860px) {
    body .match-detail-page .match-detail-hero-hard {
        grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: center !important;
        column-gap: 8px !important;
    }

    body .match-detail-page .match-detail-team {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .match-detail-page .match-detail-team:first-of-type {
        justify-self: stretch !important;
        padding-right: 0 !important;
    }

    body .match-detail-page .match-detail-team.away {
        justify-self: stretch !important;
        padding-left: 0 !important;
    }

    body .match-detail-page .match-detail-score {
        grid-column: 2 !important;
        justify-self: center !important;
        align-self: center !important;

        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;

        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
}


/* =========================================================
   RESTORE MOBILE MATCH DETAIL TEAM ALIGNMENT
   Score blijft midden, teamteksten weer netjes binnen eigen kolom
   ========================================================= */

@media (max-width: 860px) {
    body .match-detail-page .match-detail-hero-hard {
        grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        align-items: center !important;
        column-gap: 8px !important;
    }

    body .match-detail-page .match-detail-team {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        text-align: center !important;
    }

    body .match-detail-page .match-detail-team:first-of-type {
        grid-column: 1 !important;
        align-items: center !important;
        justify-self: stretch !important;
        padding-left: 0 !important;
        padding-right: 2px !important;
    }

    body .match-detail-page .match-detail-score {
        grid-column: 2 !important;
        justify-self: center !important;
        align-self: center !important;

        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;

        margin: 0 auto !important;
        transform: none !important;
    }

    body .match-detail-page .match-detail-team.away {
        grid-column: 3 !important;
        align-items: center !important;
        justify-self: stretch !important;
        padding-left: 2px !important;
        padding-right: 0 !important;
    }

    body .match-detail-page .match-detail-team span,
    body .match-detail-page .match-detail-team strong {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    body .match-detail-page .match-detail-team strong {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 2.1em !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}


/* =========================================================
   DESKTOP MATCH DETAIL FLAGS
   Toon echte vlaglagen ook op /wedstrijd/<id> desktop
   ========================================================= */

@media (min-width: 861px) {
    body .match-detail-page .match-detail-hero-hard {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }

    body .match-detail-page .match-detail-hero-hard::before,
    body .match-detail-page .match-detail-hero-hard::after {
        display: none !important;
        content: none !important;
    }

    body .match-detail-page .match-detail-flag-bg {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 52% !important;
        z-index: 0 !important;

        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;

        opacity: 0.14 !important;
        pointer-events: none !important;
    }

    body .match-detail-page .match-detail-flag-bg.is-home {
        left: 0 !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 100%) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 100%) !important;
    }

    body .match-detail-page .match-detail-flag-bg.is-away {
        right: 0 !important;
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 100%) !important;
        mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 100%) !important;
    }

    body .match-detail-page .match-detail-hero-hard > :not(.match-detail-flag-bg) {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* =========================================================
   SAFE DESKTOP TOUR BANNER RESTORE
   Eerst banner weer zichtbaar en stabiel; topbar-spacing later schoon fixen
   ========================================================= */

@media (min-width: 861px) {
    .mobile-tour-banner,
    .mobile-native-header {
        display: none !important;
    }

    body > .site-announcement-bar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        z-index: 1 !important;

        width: 100% !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;

        background: linear-gradient(90deg, #ffe45c, #ffd21f) !important;
        border-bottom: 2px solid rgba(16, 35, 63, 0.14) !important;
    }

    body > .site-announcement-bar .site-announcement-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 36px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 7px 16px !important;
        box-sizing: border-box !important;

        color: #10233f !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
        text-align: center !important;
    }
}


/* =========================================================
   DESKTOP TOPBAR YELLOW GLOW
   Subtiele gele gloed vanuit Tour-banner over de topbar
   ========================================================= */

@media (min-width: 861px) {
    .site-header {
        position: relative !important;
        overflow: visible !important;
        isolation: isolate !important;

        box-shadow:
            0 10px 28px rgba(255, 210, 31, 0.22),
            0 2px 0 rgba(255, 210, 31, 0.18) !important;
    }

    .site-header::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -18px !important;
        height: 34px !important;
        z-index: -1 !important;
        pointer-events: none !important;

        background:
            radial-gradient(
                ellipse at center,
                rgba(255, 226, 76, 0.38) 0%,
                rgba(255, 210, 31, 0.20) 42%,
                rgba(255, 210, 31, 0.00) 76%
            ) !important;

        filter: blur(8px) !important;
    }

    .site-header .header-inner {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* =========================================================
   FINAL FLOW HEADER SPACING
   Desktop: topbar -> gele banner -> content, alles in normale flow
   ========================================================= */

@media (min-width: 861px) {
    body {
        padding-top: 0 !important;
    }

    .mobile-native-header,
    .mobile-tour-banner {
        display: none !important;
    }

    .app-shell {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-shell > .site-header {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 20 !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .app-shell > .site-header .header-inner {
        margin: 0 !important;
    }

    .app-shell > .site-announcement-bar {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 10 !important;

        width: 100% !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;

        background: linear-gradient(90deg, #ffe45c, #ffd21f) !important;
        border-bottom: 2px solid rgba(16, 35, 63, 0.14) !important;
        box-shadow: 0 8px 18px rgba(16, 35, 63, 0.10) !important;
    }

    .app-shell > .site-announcement-bar > .site-announcement-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 36px !important;
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 7px 16px !important;
        box-sizing: border-box !important;

        color: #10233f !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
        text-align: center !important;
    }

    .app-shell > .main-content {
        display: block !important;
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;

        margin-top: 0 !important;
        padding-top: 26px !important;
    }

    .app-shell > .main-content > *:first-child {
        margin-top: 0 !important;
    }

    .dashboard-top-row,
    .dashboard-top-row-split,
    .mobile-poolbaas-top-card {
        margin-top: 0 !important;
    }
}


/* =========================================================
   FINAL YELLOW TOPBAR GLOW
   Subtiele Tour de France-gloed over/onder de desktop topbar
   ========================================================= */

@media (min-width: 861px) {
    .app-shell > .site-header {
        position: relative !important;
        overflow: visible !important;
        isolation: isolate !important;

        box-shadow:
            0 10px 30px rgba(255, 210, 31, 0.24),
            0 2px 0 rgba(255, 210, 31, 0.18) !important;
    }

    .app-shell > .site-header::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -18px !important;
        height: 34px !important;
        z-index: -1 !important;
        pointer-events: none !important;

        background:
            radial-gradient(
                ellipse at center,
                rgba(255, 226, 76, 0.40) 0%,
                rgba(255, 210, 31, 0.22) 42%,
                rgba(255, 210, 31, 0.00) 76%
            ) !important;

        filter: blur(8px) !important;
    }

    .app-shell > .site-header .header-inner {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* =========================================================
   VISIBLE YELLOW TOPBAR GLOW
   Echte zichtbare glow onderin de desktop topbar
   ========================================================= */

@media (min-width: 861px) {
    .app-shell > .site-header {
        position: relative !important;
        overflow: visible !important;
        isolation: auto !important;

        box-shadow:
            0 12px 28px rgba(255, 210, 31, 0.30),
            0 0 0 1px rgba(255, 210, 31, 0.16),
            0 2px 0 rgba(255, 210, 31, 0.22) !important;
    }

    .app-shell > .site-header::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: -2px !important;
        height: 28px !important;

        z-index: 1 !important;
        pointer-events: none !important;

        background:
            linear-gradient(
                180deg,
                rgba(255, 226, 76, 0.00) 0%,
                rgba(255, 226, 76, 0.18) 35%,
                rgba(255, 210, 31, 0.42) 100%
            ) !important;

        filter: blur(2px) !important;
        opacity: 1 !important;
    }

    .app-shell > .site-header .header-inner {
        position: relative !important;
        z-index: 3 !important;
    }

    .app-shell > .site-announcement-bar {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* =========================================================
   ARENA CONTEXT LABEL
   Laat zien dat de huidige omgeving Arena v1: WK Pool 2026 is
   ========================================================= */

@media (min-width: 861px) {
    .desktop-header-slogan {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    .desktop-header-slogan-main {
        display: block !important;
    }

    .desktop-arena-label {
        display: inline-flex !important;
        align-items: center !important;
        width: fit-content !important;

        padding: 3px 8px !important;
        border-radius: 999px !important;

        background: rgba(91, 44, 255, 0.10) !important;
        border: 1px solid rgba(91, 44, 255, 0.20) !important;

        color: #5b2cff !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }
}

@media (max-width: 860px) {
    .desktop-arena-label,
    .desktop-header-slogan-main {
        display: none !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR HOME PREVIEW
   Blueprint-led Core layout: paars als hoofdkleur
   ========================================================= */

.poolbaas-core-home {
    --pb-purple: #5b2cff;
    --pb-purple-dark: #35147a;
    --pb-purple-soft: #efe9ff;
    --pb-navy: #10233f;
    --pb-red: #e30613;
    --pb-yellow: #f6b500;
    --pb-gold: #d99a00;
    --pb-bg-soft: #f7f4ff;

    display: grid;
    gap: 18px;
    padding-bottom: 46px;
}

.poolbaas-core-home * {
    box-sizing: border-box;
}

.pb-core-eyebrow {
    margin: 0 0 8px;
    color: var(--pb-purple);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.pb-core-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.45fr);
    gap: 18px;
}

.pb-core-hero-main,
.pb-core-identity-card,
.pb-core-panel,
.pb-core-strip article {
    border: 1px solid rgba(91, 44, 255, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(249,247,255,0.96));
    box-shadow: 0 18px 44px rgba(53, 20, 122, 0.10);
}

.pb-core-hero-main {
    min-height: 255px;
    padding: 34px 38px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    overflow: hidden;
    border-left: 8px solid var(--pb-purple);
}

.pb-core-hero-main::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -100px;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(91,44,255,0.20), rgba(91,44,255,0.04) 58%, transparent 70%);
}

.pb-core-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.pb-core-hero-copy h1 {
    margin: 0 0 14px;
    color: var(--pb-navy);
    font-size: clamp(3rem, 5vw, 5.8rem);
    line-height: 0.88;
    letter-spacing: -0.075em;
}

.pb-core-hero-copy p {
    max-width: 700px;
    margin: 0;
    color: rgba(16, 35, 63, 0.72);
    font-size: 1.04rem;
    line-height: 1.45;
    font-weight: 750;
}

.pb-core-hero-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 210px;
}

.pb-core-primary-btn,
.pb-core-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 950;
}

.pb-core-primary-btn {
    background: var(--pb-purple);
    color: white;
    box-shadow: 0 14px 28px rgba(91,44,255,0.24);
}

.pb-core-secondary-btn {
    color: var(--pb-purple);
    background: rgba(91,44,255,0.08);
    border: 1px solid rgba(91,44,255,0.16);
}

.pb-core-identity-card {
    min-height: 255px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 18%, rgba(246,181,0,0.22), transparent 34%),
        linear-gradient(135deg, #fff, #fbf8ff);
}

.pb-core-crown {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(246,181,0,0.16);
    border: 3px solid rgba(246,181,0,0.62);
    font-size: 2.25rem;
}

.pb-core-identity-card h2 {
    margin: 0 0 6px;
    color: var(--pb-navy);
    font-size: 2.3rem;
    letter-spacing: -0.055em;
}

.pb-core-identity-card p {
    margin: 0;
    color: rgba(16,35,63,0.68);
    font-weight: 800;
}

.pb-core-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.pb-core-strip article {
    padding: 18px 21px;
    min-height: 92px;
    border-top: 4px solid var(--pb-purple);
}

.pb-core-strip span,
.pb-core-strip small {
    display: block;
    color: rgba(16,35,63,0.62);
    font-weight: 800;
}

.pb-core-strip strong {
    display: block;
    margin: 4px 0 3px;
    color: var(--pb-navy);
    font-size: 2.1rem;
    line-height: 1;
}

.pb-core-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr);
    gap: 18px;
}

.pb-core-layout.is-lower {
    grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
}

.pb-core-panel {
    padding: 23px;
}

.pb-core-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.pb-core-section-head h2 {
    margin: 0;
    color: var(--pb-navy);
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: -0.045em;
}

.pb-core-section-head a {
    color: var(--pb-purple);
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
}

.pb-core-arena-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    gap: 14px;
}

.pb-core-arena-card {
    min-height: 205px;
    padding: 20px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(91,44,255,0.18);
    background: #fff;
}

.pb-core-arena-card::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -54px;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: rgba(91,44,255,0.10);
}

.pb-core-arena-wk {
    border-left: 6px solid var(--pb-purple);
}

.pb-core-arena-tour {
    border-left: 6px solid var(--pb-yellow);
    background: linear-gradient(135deg, #fff, #fff9dc);
}

.pb-core-arena-custom {
    border-left: 6px solid var(--pb-red);
}

.pb-core-card-label {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(91,44,255,0.10);
    color: var(--pb-purple);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.06em;
}

.pb-core-arena-card h3 {
    margin: 22px 0 8px;
    color: var(--pb-navy);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.045em;
}

.pb-core-arena-card p {
    margin: 0 0 18px;
    color: rgba(16,35,63,0.68);
    font-weight: 750;
}

.pb-core-arena-card strong {
    position: relative;
    z-index: 2;
    color: var(--pb-purple);
    font-weight: 950;
}

.pb-core-daily {
    display: grid;
    align-content: start;
    gap: 14px;
}

.pb-core-daily-highlight {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 15px;
    border-radius: 17px;
    background: rgba(246,181,0,0.12);
    border: 1px solid rgba(246,181,0,0.28);
}

.pb-core-daily-highlight.is-oepsie {
    background: rgba(227,6,19,0.07);
    border-color: rgba(227,6,19,0.18);
}

.pb-core-daily-highlight > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: white;
    font-size: 1.65rem;
    box-shadow: 0 10px 20px rgba(16,35,63,0.08);
}

.pb-core-daily-highlight h3,
.pb-core-daily-highlight p {
    margin: 0;
}

.pb-core-daily-highlight h3 {
    color: var(--pb-navy);
    font-size: 0.92rem;
}

.pb-core-daily-highlight strong {
    display: block;
    margin: 3px 0;
    color: var(--pb-navy);
    font-size: 1.4rem;
}

.pb-core-daily-highlight p {
    color: rgba(16,35,63,0.62);
    font-weight: 750;
}

.pb-core-badge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.pb-core-badge-grid article {
    min-height: 170px;
    padding: 16px 14px;
    border-radius: 17px;
    text-align: center;
    background: linear-gradient(135deg, #fff, #fbf9ff);
    border: 1px solid rgba(91,44,255,0.14);
}

.pb-core-badge-grid span,
.pb-core-badge-grid strong,
.pb-core-badge-grid small {
    display: block;
}

.pb-core-badge-grid span {
    margin: 4px auto 18px;
    font-size: 2rem;
}

.pb-core-badge-grid strong {
    min-height: 2.4em;
    color: var(--pb-navy);
    font-size: 0.94rem;
    line-height: 1.15;
}

.pb-core-badge-grid small {
    margin-top: 12px;
    color: rgba(16,35,63,0.60);
    font-weight: 750;
}

.pb-core-activity ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-core-activity li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(91,44,255,0.10);
    color: rgba(16,35,63,0.72);
    font-weight: 750;
}

.pb-core-activity li:last-child {
    border-bottom: 0;
}

.pb-core-activity strong {
    color: var(--pb-navy);
}

.pb-core-activity span {
    color: rgba(16,35,63,0.44);
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .pb-core-hero,
    .pb-core-layout,
    .pb-core-layout.is-lower {
        grid-template-columns: 1fr;
    }

    .pb-core-arena-grid,
    .pb-core-badge-grid,
    .pb-core-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-core-hero-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .pb-core-hero-actions {
        flex-direction: row;
    }
}

@media (max-width: 680px) {
    .pb-core-hero-copy h1 {
        font-size: 3rem;
    }

    .pb-core-strip,
    .pb-core-arena-grid,
    .pb-core-badge-grid {
        grid-template-columns: 1fr;
    }

    .pb-core-hero-main,
    .pb-core-panel,
    .pb-core-identity-card {
        padding: 20px;
    }

    .pb-core-hero-actions {
        flex-direction: column;
        width: 100%;
    }
}


/* =========================================================
   POOLBAAS KANTOOR HORIZONTAL COCKPIT
   Minder verticaal, meer horizontale Core-home
   ========================================================= */

.pb-cockpit-page {
    --pb-purple: #5b2cff;
    --pb-purple-dark: #35147a;
    --pb-purple-soft: #efe9ff;
    --pb-navy: #10233f;
    --pb-red: #e30613;
    --pb-yellow: #f6b500;
    --pb-gold: #d99a00;

    min-height: calc(100vh - 170px);
    padding-bottom: 34px;
}

.pb-cockpit-page * {
    box-sizing: border-box;
}

.pb-cockpit-shell {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: stretch;
    min-height: 610px;
}

.pb-cockpit-profile,
.pb-cockpit-main,
.pb-cockpit-side,
.pb-cockpit-bottom {
    border: 1px solid rgba(91, 44, 255, 0.16);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(249,247,255,0.96));
    box-shadow: 0 18px 44px rgba(53, 20, 122, 0.10);
}

.pb-cockpit-profile {
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-left: 7px solid var(--pb-purple);
}

.pb-cockpit-profile::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: rgba(91,44,255,0.12);
}

.pb-profile-topline {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--pb-purple);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
}

.pb-profile-topline strong {
    color: var(--pb-navy);
}

.pb-profile-avatar {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    margin: 52px 0 28px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background:
        radial-gradient(circle at 70% 20%, rgba(246,181,0,0.35), transparent 38%),
        linear-gradient(135deg, var(--pb-purple), var(--pb-purple-dark));
    color: white;
    font-size: 3rem;
    font-weight: 950;
    box-shadow: 0 18px 32px rgba(91,44,255,0.26);
}

.pb-cockpit-profile h1 {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: var(--pb-navy);
    font-size: 3.2rem;
    line-height: 0.88;
    letter-spacing: -0.075em;
}

.pb-profile-slogan {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(16,35,63,0.70);
    font-weight: 800;
    line-height: 1.35;
}

.pb-profile-metrics {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 9px;
    margin-top: auto;
    padding-top: 28px;
}

.pb-profile-metrics article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 15px;
    background: rgba(91,44,255,0.07);
    border: 1px solid rgba(91,44,255,0.12);
}

.pb-profile-metrics strong {
    color: var(--pb-navy);
    font-size: 1.55rem;
    line-height: 1;
}

.pb-profile-metrics span {
    color: rgba(16,35,63,0.64);
    font-weight: 850;
    text-align: right;
}

.pb-profile-cta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 14px;
    background: var(--pb-purple);
    color: white;
    text-decoration: none;
    font-weight: 950;
}

.pb-cockpit-main {
    padding: 24px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    min-width: 0;
}

.pb-cockpit-main-head,
.pb-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pb-cockpit-main-head h2 {
    margin: 0;
    color: var(--pb-navy);
    font-size: clamp(2rem, 3vw, 3.45rem);
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.pb-cockpit-main-head a,
.pb-side-head a {
    color: var(--pb-purple);
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
}

.pb-arena-board {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-height: 0;
}

.pb-arena-wide-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    padding: 22px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(91,44,255,0.16);
    background: #fff;
}

.pb-arena-wide-card::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(91,44,255,0.10);
}

.pb-arena-wide-card.is-primary {
    grid-row: 1 / 3;
    min-height: 100%;
    border-left: 7px solid var(--pb-purple);
    background:
        radial-gradient(circle at 82% 20%, rgba(91,44,255,0.16), transparent 36%),
        linear-gradient(135deg, #fff, #f8f5ff);
}

.pb-arena-wide-card.is-tour {
    border-left: 7px solid var(--pb-yellow);
    background:
        radial-gradient(circle at 88% 24%, rgba(246,181,0,0.25), transparent 36%),
        linear-gradient(135deg, #fff, #fff9df);
}

.pb-arena-wide-card.is-custom {
    border-left: 7px solid var(--pb-red);
}

.pb-core-card-label {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(91,44,255,0.10);
    color: var(--pb-purple);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.06em;
}

.pb-arena-wide-card h3 {
    position: relative;
    z-index: 2;
    margin: 20px 0 10px;
    color: var(--pb-navy);
    font-size: clamp(1.65rem, 2.4vw, 2.9rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.pb-arena-wide-card p {
    position: relative;
    z-index: 2;
    max-width: 430px;
    margin: 0;
    color: rgba(16,35,63,0.68);
    font-weight: 800;
    line-height: 1.35;
}

.pb-arena-wide-card strong {
    position: relative;
    z-index: 2;
    color: var(--pb-purple);
    font-weight: 950;
}

.pb-cockpit-action-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pb-cockpit-action-rail article {
    min-height: 82px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(91,44,255,0.07);
    border: 1px solid rgba(91,44,255,0.12);
}

.pb-cockpit-action-rail span {
    display: block;
    color: rgba(16,35,63,0.62);
    font-size: 0.78rem;
    font-weight: 850;
}

.pb-cockpit-action-rail strong {
    display: block;
    margin-top: 8px;
    color: var(--pb-navy);
    font-size: 1.75rem;
    line-height: 1;
}

.pb-cockpit-side {
    padding: 18px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-width: 0;
}

.pb-side-block {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(91,44,255,0.11);
    min-height: 0;
}

.pb-mini-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.pb-mini-badge-grid article {
    min-height: 100px;
    padding: 13px 10px;
    border-radius: 16px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(91,44,255,0.12);
}

.pb-mini-badge-grid span {
    display: block;
    margin-bottom: 10px;
    font-size: 1.6rem;
}

.pb-mini-badge-grid strong {
    display: block;
    color: var(--pb-navy);
    font-size: 0.82rem;
    line-height: 1.1;
}

.pb-today-block {
    display: grid;
    align-content: start;
    gap: 10px;
}

.pb-today-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px;
    border-radius: 15px;
    background: rgba(246,181,0,0.12);
    border: 1px solid rgba(246,181,0,0.22);
}

.pb-today-item.is-red {
    background: rgba(227,6,19,0.07);
    border-color: rgba(227,6,19,0.16);
}

.pb-today-item > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    font-size: 1.35rem;
}

.pb-today-item strong,
.pb-today-item small {
    display: block;
}

.pb-today-item strong {
    color: var(--pb-navy);
    font-size: 1rem;
}

.pb-today-item small {
    color: rgba(16,35,63,0.58);
    font-weight: 800;
}

.pb-cockpit-bottom {
    margin-top: 16px;
    padding: 14px 18px;
    overflow: hidden;
}

.pb-bottom-marquee {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
}

.pb-bottom-marquee span {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(91,44,255,0.07);
    color: rgba(16,35,63,0.70);
    font-weight: 800;
    white-space: nowrap;
}

.pb-bottom-marquee strong {
    color: var(--pb-navy);
}

@media (max-width: 1200px) {
    .pb-cockpit-shell {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .pb-cockpit-side {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}

@media (max-width: 860px) {
    .pb-cockpit-shell,
    .pb-cockpit-side,
    .pb-arena-board,
    .pb-cockpit-action-rail,
    .pb-bottom-marquee {
        grid-template-columns: 1fr;
    }

    .pb-arena-wide-card.is-primary {
        grid-row: auto;
    }

    .pb-cockpit-shell {
        min-height: 0;
    }
}


/* =========================================================
   POOLBAAS KANTOOR FULL WIDTH
   Core-home gebruikt volledige schermbreedte, WK Arena blijft shell-based
   ========================================================= */

@media (min-width: 861px) {
    body.poolbaas-core-body .app-shell > .main-content {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: clamp(20px, 2.4vw, 42px) !important;
        padding-right: clamp(20px, 2.4vw, 42px) !important;
    }

    body.poolbaas-core-body .pb-cockpit-page {
        width: 100% !important;
        max-width: none !important;
    }

    body.poolbaas-core-body .pb-cockpit-shell {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns:
            minmax(280px, 0.22fr)
            minmax(620px, 1fr)
            minmax(300px, 0.24fr) !important;
    }

    body.poolbaas-core-body .pb-cockpit-bottom {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (min-width: 1440px) {
    body.poolbaas-core-body .pb-cockpit-shell {
        grid-template-columns:
            minmax(320px, 0.22fr)
            minmax(760px, 1fr)
            minmax(340px, 0.24fr) !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR CONTENT REFINEMENT
   Meer identiteit, sterkere baasschappen, minder generiek dashboard
   ========================================================= */

.pb-current-title {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    padding: 14px 15px;
    border-radius: 17px;
    background:
        linear-gradient(135deg, rgba(91,44,255,0.12), rgba(246,181,0,0.10));
    border: 1px solid rgba(91,44,255,0.16);
}

.pb-current-title span,
.pb-current-title strong {
    display: block;
}

.pb-current-title span {
    margin-bottom: 5px;
    color: rgba(16,35,63,0.56);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pb-current-title strong {
    color: var(--pb-purple);
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.pb-title-stack {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.pb-title-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(91,44,255,0.13);
}

.pb-title-card > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.45rem;
    background: rgba(91,44,255,0.08);
}

.pb-title-card strong,
.pb-title-card small {
    display: block;
}

.pb-title-card strong {
    color: var(--pb-navy);
    font-size: 0.92rem;
    line-height: 1.1;
    font-weight: 950;
}

.pb-title-card small {
    margin-top: 3px;
    color: rgba(16,35,63,0.56);
    font-size: 0.73rem;
    line-height: 1.2;
    font-weight: 800;
}

.pb-title-card.is-gold {
    border-color: rgba(246,181,0,0.30);
    background: linear-gradient(135deg, #fff, #fff9df);
}

.pb-title-card.is-gold > span {
    background: rgba(246,181,0,0.16);
}

.pb-title-card.is-purple {
    border-color: rgba(91,44,255,0.24);
}

.pb-title-card.is-purple > span {
    background: rgba(91,44,255,0.12);
}

.pb-title-card.is-red {
    border-color: rgba(227,6,19,0.22);
    background: linear-gradient(135deg, #fff, rgba(227,6,19,0.035));
}

.pb-title-card.is-red > span {
    background: rgba(227,6,19,0.08);
}

.pb-title-card.is-navy > span {
    background: rgba(16,35,63,0.08);
}

.pb-arena-wide-card.is-primary {
    background:
        radial-gradient(circle at 82% 18%, rgba(91,44,255,0.18), transparent 36%),
        linear-gradient(135deg, #fff, #f8f5ff) !important;
}

.pb-arena-wide-card.is-primary h3::after {
    content: "Arena v1";
    display: inline-flex;
    margin-left: 10px;
    transform: translateY(-4px);
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(91,44,255,0.10);
    color: var(--pb-purple);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.pb-cockpit-action-rail article:first-child {
    background: linear-gradient(135deg, rgba(91,44,255,0.10), rgba(91,44,255,0.04));
    border-color: rgba(91,44,255,0.22);
}

.pb-cockpit-action-rail article:nth-child(2) {
    background: linear-gradient(135deg, rgba(246,181,0,0.13), rgba(246,181,0,0.04));
    border-color: rgba(246,181,0,0.22);
}

.pb-cockpit-action-rail article:nth-child(4) {
    background: linear-gradient(135deg, rgba(227,6,19,0.07), rgba(227,6,19,0.025));
    border-color: rgba(227,6,19,0.16);
}


/* =========================================================
   POOLBAAS KANTOOR LIVE TICKER
   Nieuws/sport-tv ticker onderaan Core cockpit
   ========================================================= */

.pb-cockpit-bottom {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    border-color: rgba(91,44,255,0.20) !important;
    background:
        linear-gradient(90deg, rgba(53,20,122,0.98), rgba(91,44,255,0.94)) !important;
}

.pb-cockpit-bottom::before {
    content: "KANTOOR LIVE" !important;
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 18px !important;
    margin-right: 12px !important;

    background: var(--pb-yellow, #f6b500) !important;
    color: var(--pb-navy, #10233f) !important;

    font-size: 0.72rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.pb-ticker-track {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    min-width: 100% !important;
    animation: pbTickerScroll 34s linear infinite !important;
    will-change: transform !important;
}

.pb-ticker-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    padding-right: 12px !important;
}

.pb-ticker-group span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    padding: 8px 12px !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;

    color: rgba(255,255,255,0.84) !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.pb-ticker-group span::after {
    content: "•" !important;
    color: var(--pb-yellow, #f6b500) !important;
    font-weight: 950 !important;
    margin-left: 4px !important;
}

.pb-ticker-group strong {
    color: #fff !important;
    font-weight: 950 !important;
}

.pb-cockpit-bottom:hover .pb-ticker-track {
    animation-play-state: paused !important;
}

@keyframes pbTickerScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-ticker-track {
        animation: none !important;
        transform: none !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
}

@media (max-width: 860px) {
    .pb-cockpit-bottom::before {
        padding: 0 12px !important;
        margin-right: 8px !important;
        font-size: 0.64rem !important;
    }

    .pb-ticker-track {
        animation-duration: 26s !important;
    }

    .pb-ticker-group span {
        font-size: 0.78rem !important;
        padding: 7px 10px !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR TYPED LIVE TICKER
   Event-types: baasschap, oepsie, deadline, arena, stijger
   ========================================================= */

.pb-ticker-group span em {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    margin-right: 4px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.92) !important;

    font-style: normal !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0.055em !important;
}

.pb-ticker-group span.is-title em,
.pb-ticker-group span.is-baas em {
    background: rgba(246,181,0,0.22) !important;
    color: #ffe785 !important;
}

.pb-ticker-group span.is-oepsie em {
    background: rgba(227,6,19,0.26) !important;
    color: #ffd9dd !important;
}

.pb-ticker-group span.is-deadline em {
    background: rgba(255,255,255,0.20) !important;
    color: #ffffff !important;
}

.pb-ticker-group span.is-campaign em {
    background: rgba(246,181,0,0.26) !important;
    color: #ffe785 !important;
}

.pb-ticker-group span.is-rise em,
.pb-ticker-group span.is-perfect em {
    background: rgba(91,44,255,0.34) !important;
    color: #ffffff !important;
}

.pb-ticker-group span.is-oepsie {
    border-color: rgba(227,6,19,0.38) !important;
}

.pb-ticker-group span.is-title,
.pb-ticker-group span.is-baas,
.pb-ticker-group span.is-campaign {
    border-color: rgba(246,181,0,0.34) !important;
}

.pb-ticker-group span.is-rise,
.pb-ticker-group span.is-perfect {
    border-color: rgba(255,255,255,0.18) !important;
}


/* =========================================================
   POOLBAAS KANTOOR BAASSTATUS METER
   Progressie naar volgende baasschap/titel
   ========================================================= */

.pb-baasstatus-meter {
    position: relative;
    z-index: 2;
    margin-top: 16px;
    padding: 14px 15px;
    border-radius: 17px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(91,44,255,0.15);
    box-shadow: 0 10px 22px rgba(53,20,122,0.07);
}

.pb-baasstatus-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.pb-baasstatus-head span {
    color: rgba(16,35,63,0.58);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.pb-baasstatus-head strong {
    color: var(--pb-purple);
    font-size: 1.05rem;
    font-weight: 950;
}

.pb-baasstatus-track {
    width: 100%;
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(91,44,255,0.10);
    border: 1px solid rgba(91,44,255,0.10);
}

.pb-baasstatus-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--pb-purple), var(--pb-yellow));
    box-shadow: 0 0 18px rgba(91,44,255,0.28);
}

.pb-baasstatus-meter p {
    margin: 9px 0 0;
    color: rgba(16,35,63,0.64);
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 800;
}

.pb-baasstatus-meter p strong {
    color: var(--pb-navy);
}


/* =========================================================
   POOLBAAS KANTOOR ARENA BOARD REFINEMENT
   Arena's voelen als speelvelden met status en actie
   ========================================================= */

.pb-arena-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pb-arena-topline em {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(16,35,63,0.06);
    color: rgba(16,35,63,0.58);
    font-style: normal;
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pb-arena-card-footer {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
}

.pb-arena-progress,
.pb-arena-mini-stat {
    padding: 12px;
    border-radius: 15px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(91,44,255,0.12);
}

.pb-arena-progress span,
.pb-arena-mini-stat span {
    display: block;
    margin-bottom: 5px;
    color: rgba(16,35,63,0.58);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.pb-arena-progress strong,
.pb-arena-mini-stat strong {
    display: block;
    color: var(--pb-navy);
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 950;
}

.pb-arena-progress div {
    margin-top: 10px;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(91,44,255,0.10);
}

.pb-arena-progress div i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pb-purple), var(--pb-yellow));
    box-shadow: 0 0 16px rgba(91,44,255,0.25);
}

.pb-arena-wide-card.is-tour .pb-arena-progress,
.pb-arena-wide-card.is-tour .pb-arena-mini-stat {
    border-color: rgba(246,181,0,0.20);
}

.pb-arena-wide-card.is-custom .pb-arena-progress,
.pb-arena-wide-card.is-custom .pb-arena-mini-stat {
    border-color: rgba(227,6,19,0.13);
}

.pb-arena-wide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(53,20,122,0.13);
}

.pb-arena-wide-card {
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}


/* =========================================================
   POOLBAAS KANTOOR ICON PLACEHOLDERS
   Geen emoji als structurele UI-iconen; eigen consistente icon-vormen
   ========================================================= */

.pb-icon {
    position: relative;
    display: inline-grid !important;
    place-items: center !important;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.pb-icon::before,
.pb-icon::after {
    content: "" !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Kroon / baasschap */
.pb-icon-crown::before {
    width: 24px;
    height: 18px;
    border-radius: 4px 4px 7px 7px;
    background:
        linear-gradient(135deg, var(--pb-yellow, #f6b500), #ffd84a);
    clip-path: polygon(
        0% 100%,
        0% 38%,
        24% 62%,
        36% 18%,
        50% 58%,
        66% 18%,
        78% 62%,
        100% 38%,
        100% 100%
    );
    box-shadow: 0 6px 14px rgba(246,181,0,0.26);
}

.pb-icon-crown::after {
    position: absolute;
    bottom: 11px;
    width: 20px;
    height: 3px;
    border-radius: 999px;
    background: rgba(16,35,63,0.18);
}

/* Stijger / comeback */
.pb-icon-rise::before {
    width: 25px;
    height: 25px;
    border-right: 4px solid var(--pb-purple, #5b2cff);
    border-top: 4px solid var(--pb-purple, #5b2cff);
    transform: rotate(-45deg) translateY(4px);
    border-radius: 2px;
}

.pb-icon-rise::after {
    position: absolute;
    width: 28px;
    height: 4px;
    border-radius: 999px;
    background: var(--pb-purple, #5b2cff);
    transform: rotate(-45deg) translate(-3px, 6px);
}

/* Oepsie / lowlight */
.pb-icon-oepsie::before {
    width: 27px;
    height: 27px;
    border-radius: 999px;
    border: 3px solid var(--pb-red, #e30613);
    background: rgba(227,6,19,0.06);
}

.pb-icon-oepsie::after {
    position: absolute;
    width: 15px;
    height: 3px;
    border-radius: 999px;
    background: var(--pb-red, #e30613);
    transform: rotate(-18deg) translateY(6px);
    box-shadow:
        -7px -8px 0 -1px var(--pb-red, #e30613),
        7px -8px 0 -1px var(--pb-red, #e30613);
}

/* Underdog / schild */
.pb-icon-underdog::before {
    width: 24px;
    height: 29px;
    border-radius: 12px 12px 9px 9px;
    background:
        linear-gradient(135deg, var(--pb-navy, #10233f), #263c61);
    clip-path: polygon(50% 0%, 92% 16%, 84% 72%, 50% 100%, 16% 72%, 8% 16%);
    box-shadow: 0 8px 16px rgba(16,35,63,0.18);
}

.pb-icon-underdog::after {
    position: absolute;
    width: 11px;
    height: 11px;
    border-left: 3px solid var(--pb-yellow, #f6b500);
    border-bottom: 3px solid var(--pb-yellow, #f6b500);
    transform: rotate(-45deg) translateY(-1px);
}

/* Deadline / actie */
.pb-icon-zap::before {
    width: 18px;
    height: 28px;
    background: linear-gradient(135deg, var(--pb-yellow, #f6b500), #ffd84a);
    clip-path: polygon(58% 0%, 16% 55%, 45% 55%, 32% 100%, 86% 42%, 56% 42%);
    box-shadow: 0 8px 16px rgba(246,181,0,0.22);
}

/* Container-fixes waar vroeger emoji in stond */
.pb-title-card > .pb-icon,
.pb-today-item > .pb-icon {
    width: 46px !important;
    height: 46px !important;
}

.pb-title-card > .pb-icon {
    border-radius: 14px !important;
    background: rgba(91,44,255,0.08) !important;
}

.pb-title-card.is-gold > .pb-icon {
    background: rgba(246,181,0,0.16) !important;
}

.pb-title-card.is-red > .pb-icon {
    background: rgba(227,6,19,0.08) !important;
}

.pb-today-item > .pb-icon {
    border-radius: 999px !important;
    background: #fff !important;
}


/* =========================================================
   KANTOOR HEADER CONTEXT LABEL
   Core pagina toont Poolbaas Kantoor i.p.v. WK Arena-context
   ========================================================= */

@media (min-width: 861px) {
    body.poolbaas-core-body .desktop-arena-label {
        background: rgba(91, 44, 255, 0.14) !important;
        border-color: rgba(91, 44, 255, 0.28) !important;
        color: #5b2cff !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR NAV
   Core-pagina gebruikt Core-navigatie i.p.v. WK Arena-nav
   ========================================================= */

@media (min-width: 861px) {
    body.poolbaas-core-body .core-main-nav a.active,
    body.poolbaas-core-body .core-main-nav a:hover {
        background: rgba(91, 44, 255, 0.11) !important;
        border-color: rgba(91, 44, 255, 0.20) !important;
        color: #5b2cff !important;
    }

    body.poolbaas-core-body .core-main-nav a {
        color: rgba(16, 35, 63, 0.72) !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR PLATFORM ATMOSPHERE
   Desktop-only: Core voelt als platformlaag boven de arena's
   ========================================================= */

@media (min-width: 861px) {
    body.poolbaas-core-body {
        background:
            radial-gradient(circle at 12% 16%, rgba(91,44,255,0.13), transparent 28%),
            radial-gradient(circle at 88% 12%, rgba(246,181,0,0.12), transparent 26%),
            linear-gradient(135deg, #f8f5ff 0%, #ffffff 42%, #f6f2ff 100%) !important;
    }

    body.poolbaas-core-body .app-shell {
        background: transparent !important;
    }

    body.poolbaas-core-body .app-shell > .main-content {
        padding-top: 28px !important;
    }

    body.poolbaas-core-body .pb-cockpit-page::before {
        content: "POOLBAAS KANTOOR" !important;
        display: inline-flex !important;
        align-items: center !important;

        margin-bottom: 12px !important;
        padding: 7px 11px !important;
        border-radius: 999px !important;

        background: rgba(91,44,255,0.10) !important;
        border: 1px solid rgba(91,44,255,0.18) !important;
        color: #5b2cff !important;

        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.08em !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile,
    body.poolbaas-core-body .pb-cockpit-main,
    body.poolbaas-core-body .pb-cockpit-side,
    body.poolbaas-core-body .pb-cockpit-bottom {
        backdrop-filter: blur(10px) !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR FLOW RAIL
   Horizontale uitleg: Core -> Arena -> Baasschap -> Live status
   ========================================================= */

@media (min-width: 861px) {
    .pb-flow-rail {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .pb-flow-rail article {
        position: relative !important;
        min-height: 86px !important;
        padding: 16px 18px !important;
        border-radius: 18px !important;
        overflow: hidden !important;

        background:
            linear-gradient(135deg, rgba(255,255,255,0.92), rgba(249,247,255,0.86)) !important;
        border: 1px solid rgba(91,44,255,0.16) !important;
        box-shadow: 0 12px 28px rgba(53,20,122,0.07) !important;
    }

    .pb-flow-rail article::after {
        content: "" !important;
        position: absolute !important;
        right: -34px !important;
        top: 50% !important;
        width: 72px !important;
        height: 72px !important;
        transform: translateY(-50%) rotate(45deg) !important;

        border-top: 2px solid rgba(91,44,255,0.16) !important;
        border-right: 2px solid rgba(91,44,255,0.16) !important;
        border-radius: 12px !important;
    }

    .pb-flow-rail article:last-child::after {
        display: none !important;
    }

    .pb-flow-rail span,
    .pb-flow-rail strong,
    .pb-flow-rail small {
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
    }

    .pb-flow-rail span {
        margin-bottom: 8px !important;
        color: #5b2cff !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.08em !important;
    }

    .pb-flow-rail strong {
        color: #10233f !important;
        font-size: 1.04rem !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        letter-spacing: -0.025em !important;
    }

    .pb-flow-rail small {
        margin-top: 5px !important;
        color: rgba(16,35,63,0.58) !important;
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    .pb-flow-rail article:nth-child(1) {
        border-left: 5px solid #5b2cff !important;
    }

    .pb-flow-rail article:nth-child(2) {
        border-left: 5px solid rgba(91,44,255,0.72) !important;
    }

    .pb-flow-rail article:nth-child(3) {
        border-left: 5px solid #f6b500 !important;
    }

    .pb-flow-rail article:nth-child(4) {
        border-left: 5px solid #e30613 !important;
    }
}

@media (max-width: 860px) {
    .pb-flow-rail {
        display: none !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR BAASSCHAPPEN PANEL
   Rechterkolom voelt als titelkamer met progressie en rivaliteit
   ========================================================= */

.pb-next-title-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 13px;
    padding: 15px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(91,44,255,0.12), rgba(255,255,255,0.88));
    border: 1px solid rgba(91,44,255,0.18);
    box-shadow: 0 12px 26px rgba(53,20,122,0.08);
}

.pb-next-title-card::after {
    content: "";
    position: absolute;
    right: -22px;
    top: -24px;
    width: 82px;
    height: 82px;
    border-radius: 999px;
    background: rgba(246,181,0,0.18);
}

.pb-next-title-card > * {
    position: relative;
    z-index: 2;
}

.pb-next-title-card span {
    display: block;
    margin-bottom: 7px;
    color: #5b2cff;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.pb-next-title-card strong {
    display: block;
    color: #10233f;
    font-size: 1.08rem;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.pb-next-title-card p {
    margin: 7px 0 11px;
    color: rgba(16,35,63,0.62);
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 800;
}

.pb-next-title-progress {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(91,44,255,0.11);
}

.pb-next-title-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5b2cff, #f6b500);
    box-shadow: 0 0 16px rgba(91,44,255,0.26);
}

.pb-rival-block {
    border-color: rgba(227,6,19,0.14) !important;
}

.pb-rival-card {
    padding: 14px 15px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(227,6,19,0.08), rgba(255,255,255,0.88));
    border: 1px solid rgba(227,6,19,0.14);
}

.pb-rival-card div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pb-rival-card strong {
    color: #10233f;
    font-size: 1.12rem;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.pb-rival-card span {
    color: #e30613;
    font-size: 0.76rem;
    font-weight: 950;
}

.pb-rival-card p {
    margin: 8px 0 0;
    color: rgba(16,35,63,0.62);
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 800;
}



/* =========================================================
   POOLBAAS KANTOOR PERSONAL ACTION CARD
   Linkerkolom krijgt persoonlijke actie/urgentie
   ========================================================= */

.pb-personal-action-card {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    padding: 15px;
    border-radius: 18px;
    overflow: hidden;

    background:
        linear-gradient(135deg, rgba(91,44,255,0.12), rgba(255,255,255,0.86));
    border: 1px solid rgba(91,44,255,0.18);
    box-shadow: 0 12px 26px rgba(53,20,122,0.08);
}

.pb-personal-action-card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: rgba(246,181,0,0.16);
}

.pb-personal-action-card > * {
    position: relative;
    z-index: 2;
}

.pb-personal-action-card span {
    display: block;
    margin-bottom: 7px;
    color: #5b2cff;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.pb-personal-action-card strong {
    display: block;
    color: #10233f;
    font-size: 1.08rem;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.pb-personal-action-card p {
    margin: 8px 0 12px;
    color: rgba(16,35,63,0.64);
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 800;
}

.pb-personal-action-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 11px;
    border-radius: 999px;

    background: #5b2cff;
    color: #fff !important;
    text-decoration: none !important;

    font-size: 0.76rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.015em;
    box-shadow: 0 10px 20px rgba(91,44,255,0.22);
}

.pb-personal-action-card a:hover {
    transform: translateY(-1px);
}


/* =========================================================
   KANTOOR NAV LINK
   Kantoor is de platformlaag boven de arena's
   ========================================================= */

@media (min-width: 861px) {
    .main-nav a[href="/kantoor"],
    .main-nav a[href*="kantoor"] {
        color: #5b2cff !important;
        border-color: rgba(91,44,255,0.16) !important;
        background: rgba(91,44,255,0.07) !important;
    }

    .main-nav a[href="/kantoor"]:hover,
    .main-nav a[href*="kantoor"]:hover {
        background: rgba(91,44,255,0.12) !important;
        border-color: rgba(91,44,255,0.24) !important;
    }
}



/* =========================================================
   DASHBOARD KANTOOR ENTRY CARD
   Verbindt Arena-dashboard met Poolbaas Kantoor
   ========================================================= */

.dashboard-kantoor-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 22px;

    background:
        radial-gradient(circle at 12% 20%, rgba(91,44,255,0.16), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,245,255,0.92));
    border: 1px solid rgba(91,44,255,0.18);
    box-shadow: 0 16px 36px rgba(53,20,122,0.09);
}

.dashboard-kantoor-entry-text span {
    display: block;
    margin-bottom: 7px;

    color: #5b2cff;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.dashboard-kantoor-entry-text h2 {
    margin: 0;
    color: #10233f;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.dashboard-kantoor-entry-text p {
    max-width: 620px;
    margin: 7px 0 0;
    color: rgba(16,35,63,0.64);
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 800;
}

.dashboard-kantoor-entry > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 15px;
    border-radius: 999px;

    background: #5b2cff;
    color: #fff !important;
    text-decoration: none !important;

    font-size: 0.86rem;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(91,44,255,0.24);
}

.dashboard-kantoor-entry > a:hover {
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    .dashboard-kantoor-entry {
        display: none !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR ACHIEVEMENT CATEGORY LABELS
   Subtiele categorisering voor baasschappen
   ========================================================= */

.pb-title-category {
    display: inline-flex;
    align-items: center;
    width: fit-content;

    margin-bottom: 5px;
    padding: 4px 7px;
    border-radius: 999px;

    background: rgba(91,44,255,0.09);
    border: 1px solid rgba(91,44,255,0.14);
    color: #5b2cff;

    font-size: 0.58rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.pb-title-card.is-gold .pb-title-category {
    background: rgba(246,181,0,0.15);
    border-color: rgba(246,181,0,0.22);
    color: #9a6b00;
}

.pb-title-card.is-red .pb-title-category {
    background: rgba(227,6,19,0.09);
    border-color: rgba(227,6,19,0.16);
    color: #e30613;
}



/* =========================================================
   POOLBAAS KANTOOR STATUS STRIP
   Kantoor is normale gebruikerspagina, met eerlijke previewstatus
   ========================================================= */

@media (min-width: 861px) {
    .pb-kantoor-status-strip {
        display: flex;
        align-items: center;
        gap: 10px;

        width: fit-content;
        max-width: 100%;
        margin-bottom: 14px;
        padding: 8px 11px;
        border-radius: 999px;

        background: rgba(255,255,255,0.82);
        border: 1px solid rgba(91,44,255,0.14);
        box-shadow: 0 10px 24px rgba(53,20,122,0.06);

        color: rgba(16,35,63,0.68);
        font-size: 0.76rem;
        line-height: 1;
        font-weight: 850;
    }

    .pb-kantoor-status-strip span {
        display: inline-flex;
        align-items: center;

        padding: 5px 8px;
        border-radius: 999px;

        background: rgba(91,44,255,0.11);
        color: #5b2cff;

        font-size: 0.66rem;
        line-height: 1;
        font-weight: 950;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .pb-kantoor-status-strip strong {
        color: #10233f;
        font-weight: 950;
    }

    .pb-kantoor-status-strip small {
        color: rgba(16,35,63,0.52);
        font-size: 0.72rem;
        font-weight: 800;
    }
}

@media (max-width: 860px) {
    .pb-kantoor-status-strip {
        display: none !important;
    }
}

/* =========================================================
   POOLBAAS KANTOOR STATUS STRIP POLISH
   Minder preview-gevoel, meer normale beta-status
   ========================================================= */

@media (min-width: 861px) {
    .pb-kantoor-status-strip {
        margin-bottom: 10px !important;
        padding: 6px 9px !important;
        background: rgba(255,255,255,0.62) !important;
        border-color: rgba(91,44,255,0.10) !important;
        box-shadow: 0 8px 18px rgba(53,20,122,0.04) !important;
        opacity: 0.92 !important;
    }

    .pb-kantoor-status-strip span {
        padding: 4px 7px !important;
        background: rgba(91,44,255,0.08) !important;
        border: 1px solid rgba(91,44,255,0.10) !important;
        font-size: 0.61rem !important;
    }

    .pb-kantoor-status-strip strong {
        font-size: 0.72rem !important;
    }

    .pb-kantoor-status-strip small {
        font-size: 0.68rem !important;
    }

    .pb-kantoor-status-strip:hover {
        opacity: 1 !important;
        background: rgba(255,255,255,0.78) !important;
    }
}

/* =========================================================
   POOLBAAS KANTOOR FLOW RAIL POLISH
   Minder uitleg, meer compacte commandostrip
   ========================================================= */

@media (min-width: 861px) {
    .pb-flow-rail {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .pb-flow-rail article {
        min-height: 74px !important;
        padding: 13px 15px !important;
        border-radius: 17px !important;
    }

    .pb-flow-rail article::after {
        width: 58px !important;
        height: 58px !important;
        right: -30px !important;
        opacity: 0.72 !important;
    }

    .pb-flow-rail span {
        margin-bottom: 6px !important;
        font-size: 0.61rem !important;
    }

    .pb-flow-rail strong {
        font-size: 0.98rem !important;
    }

    .pb-flow-rail small {
        margin-top: 4px !important;
        font-size: 0.72rem !important;
        color: rgba(16,35,63,0.54) !important;
    }
}

/* =========================================================
   POOLBAAS KANTOOR ACTION RAIL POLISH
   Middenrail voelt als echte cockpit-metrics
   ========================================================= */

.pb-cockpit-action-rail article {
    position: relative !important;
    overflow: hidden !important;
    border-color: rgba(91,44,255,0.14) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.88), rgba(249,247,255,0.82)) !important;
}

.pb-cockpit-action-rail article::after {
    content: "" !important;
    position: absolute !important;
    right: -22px !important;
    bottom: -24px !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 999px !important;
    background: rgba(91,44,255,0.08) !important;
}

.pb-cockpit-action-rail article > * {
    position: relative !important;
    z-index: 2 !important;
}

.pb-cockpit-action-rail article span {
    color: rgba(16,35,63,0.56) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.065em !important;
    text-transform: uppercase !important;
}

.pb-cockpit-action-rail article strong {
    color: #5b2cff !important;
    font-size: 1.22rem !important;
    letter-spacing: -0.04em !important;
}

.pb-cockpit-action-rail article small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(16,35,63,0.58) !important;
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.pb-cockpit-action-rail article:nth-child(2) strong {
    color: #f6b500 !important;
}

.pb-cockpit-action-rail article:nth-child(4) strong {
    color: #e30613 !important;
}


/* =========================================================
   POOLBAAS KANTOOR ARENA ROUTING NOTE
   Kantoor geeft overzicht; Arena is waar je speelt
   ========================================================= */

.pb-arena-routing-note {
    margin: 14px 0 13px;
    padding: 15px 16px;
    border-radius: 18px;

    background:
        linear-gradient(135deg, rgba(91,44,255,0.10), rgba(255,255,255,0.88));
    border: 1px solid rgba(91,44,255,0.15);
    box-shadow: 0 12px 28px rgba(53,20,122,0.06);
}

.pb-arena-routing-note span {
    display: block;
    margin-bottom: 7px;

    color: #5b2cff;
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.pb-arena-routing-note strong {
    display: block;
    color: #10233f;
    font-size: 1rem;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.pb-arena-routing-note p {
    margin: 7px 0 0;
    color: rgba(16,35,63,0.62);
    font-size: 0.8rem;
    line-height: 1.3;
    font-weight: 800;
}

/* =========================================================
   POOLBAAS KANTOOR ACTIVE ARENA CTA
   Actieve WK Arena-kaart duidelijker als primaire actie
   ========================================================= */

@media (min-width: 861px) {
    .pb-arena-wide-card.is-primary {
        border-color: rgba(91,44,255,0.30) !important;
        background:
            radial-gradient(circle at 88% 12%, rgba(246,181,0,0.18), transparent 30%),
            linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,241,255,0.94)) !important;
        box-shadow:
            0 18px 42px rgba(53,20,122,0.13),
            inset 0 0 0 1px rgba(91,44,255,0.08) !important;
    }

    .pb-arena-wide-card.is-primary .pb-arena-card-footer > strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: fit-content !important;
        padding: 10px 13px !important;
        border-radius: 999px !important;

        background: #5b2cff !important;
        color: #ffffff !important;
        box-shadow: 0 12px 24px rgba(91,44,255,0.24) !important;

        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        text-decoration: none !important;
    }

    .pb-arena-wide-card.is-primary:hover .pb-arena-card-footer > strong {
        transform: translateY(-1px) !important;
        box-shadow: 0 15px 28px rgba(91,44,255,0.28) !important;
    }

    .pb-arena-wide-card.is-primary .pb-core-card-label {
        background: rgba(91,44,255,0.13) !important;
        color: #5b2cff !important;
        border-color: rgba(91,44,255,0.22) !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR TOUR CAMPAIGN CARD
   Tour is campagne/coming soon, niet primaire actie
   ========================================================= */

@media (min-width: 861px) {
    .pb-arena-wide-card.is-tour {
        border-color: rgba(246,181,0,0.24) !important;
        background:
            radial-gradient(circle at 88% 12%, rgba(246,181,0,0.20), transparent 32%),
            linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,250,235,0.86)) !important;
    }

    .pb-arena-wide-card.is-tour .pb-core-card-label {
        background: rgba(246,181,0,0.18) !important;
        border-color: rgba(246,181,0,0.28) !important;
        color: #9a6b00 !important;
    }

    .pb-arena-wide-card.is-tour .pb-arena-card-footer > strong {
        color: #9a6b00 !important;
    }

    .pb-arena-wide-card.is-tour:hover {
        box-shadow: 0 16px 34px rgba(154,107,0,0.10) !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR CUSTOM POOL CARD
   Vriendenpool is roadmap/custom, niet huidige actie
   ========================================================= */

@media (min-width: 861px) {
    .pb-arena-wide-card.is-custom {
        border-color: rgba(16,35,63,0.10) !important;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.86), rgba(248,250,252,0.82)) !important;
        opacity: 0.86 !important;
    }

    .pb-arena-wide-card.is-custom .pb-core-card-label {
        background: rgba(16,35,63,0.06) !important;
        border-color: rgba(16,35,63,0.10) !important;
        color: rgba(16,35,63,0.64) !important;
    }

    .pb-arena-wide-card.is-custom .pb-arena-topline em,
    .pb-arena-wide-card.is-custom p,
    .pb-arena-wide-card.is-custom .pb-arena-mini-stat span {
        color: rgba(16,35,63,0.54) !important;
    }

    .pb-arena-wide-card.is-custom .pb-arena-card-footer > strong {
        color: rgba(16,35,63,0.58) !important;
    }

    .pb-arena-wide-card.is-custom:hover {
        opacity: 1 !important;
        box-shadow: 0 14px 30px rgba(16,35,63,0.08) !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR ONE SCREEN FIT
   Desktop-only: Kantoor compacter zodat de pagina in één viewport past
   Mobiel blijft bewust ongemoeid
   ========================================================= */

@media (min-width: 861px) {
    body.poolbaas-core-body {
        overflow-y: auto !important;
    }

    body.poolbaas-core-body .app-shell > .main-content {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    body.poolbaas-core-body .pb-cockpit-page {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        min-height: 0 !important;
    }

    body.poolbaas-core-body .pb-cockpit-page::before {
        display: none !important;
    }

    body.poolbaas-core-body .pb-kantoor-status-strip {
        margin-bottom: 6px !important;
        padding: 5px 8px !important;
        transform: scale(0.96) !important;
        transform-origin: left center !important;
    }

    body.poolbaas-core-body .pb-flow-rail {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    body.poolbaas-core-body .pb-flow-rail article {
        min-height: 58px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-flow-rail article::after {
        width: 46px !important;
        height: 46px !important;
        right: -25px !important;
        opacity: 0.45 !important;
    }

    body.poolbaas-core-body .pb-flow-rail span {
        margin-bottom: 4px !important;
        font-size: 0.56rem !important;
    }

    body.poolbaas-core-body .pb-flow-rail strong {
        font-size: 0.9rem !important;
    }

    body.poolbaas-core-body .pb-flow-rail small {
        margin-top: 3px !important;
        font-size: 0.66rem !important;
        line-height: 1.05 !important;
    }

    body.poolbaas-core-body .pb-cockpit-shell {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile,
    body.poolbaas-core-body .pb-cockpit-main,
    body.poolbaas-core-body .pb-cockpit-side {
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile {
        gap: 10px !important;
    }

    body.poolbaas-core-body .pb-profile-avatar {
        width: 58px !important;
        height: 58px !important;
        font-size: 1.45rem !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile h1 {
        font-size: clamp(1.7rem, 2.2vw, 2.35rem) !important;
        margin-bottom: 4px !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile p {
        font-size: 0.82rem !important;
        line-height: 1.22 !important;
        margin-bottom: 8px !important;
    }

    body.poolbaas-core-body .pb-current-title,
    body.poolbaas-core-body .pb-baasstatus-meter,
    body.poolbaas-core-body .pb-personal-action-card {
        margin-top: 8px !important;
        padding: 10px 11px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-current-title span,
    body.poolbaas-core-body .pb-baasstatus-head span,
    body.poolbaas-core-body .pb-personal-action-card span {
        font-size: 0.58rem !important;
    }

    body.poolbaas-core-body .pb-current-title strong,
    body.poolbaas-core-body .pb-personal-action-card strong {
        font-size: 0.95rem !important;
    }

    body.poolbaas-core-body .pb-baasstatus-meter p,
    body.poolbaas-core-body .pb-personal-action-card p {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        font-size: 0.7rem !important;
        line-height: 1.18 !important;
    }

    body.poolbaas-core-body .pb-baasstatus-track,
    body.poolbaas-core-body .pb-next-title-progress {
        height: 7px !important;
    }

    body.poolbaas-core-body .pb-profile-metrics {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    body.poolbaas-core-body .pb-profile-metrics article {
        padding: 9px 8px !important;
        border-radius: 13px !important;
    }

    body.poolbaas-core-body .pb-profile-metrics strong {
        font-size: 1.2rem !important;
    }

    body.poolbaas-core-body .pb-profile-metrics span {
        font-size: 0.62rem !important;
    }

    body.poolbaas-core-body .pb-core-cta {
        margin-top: 9px !important;
        padding: 10px 12px !important;
        font-size: 0.78rem !important;
    }

    body.poolbaas-core-body .pb-section-head {
        margin-bottom: 10px !important;
    }

    body.poolbaas-core-body .pb-section-head span {
        font-size: 0.6rem !important;
    }

    body.poolbaas-core-body .pb-section-head h2 {
        font-size: clamp(1.2rem, 1.6vw, 1.65rem) !important;
        line-height: 1.02 !important;
    }

    body.poolbaas-core-body .pb-arena-board {
        gap: 10px !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card {
        padding: 14px !important;
        border-radius: 18px !important;
        min-height: 0 !important;
        gap: 10px !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card h3 {
        font-size: 1.15rem !important;
        margin-top: 8px !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card p {
        font-size: 0.76rem !important;
        line-height: 1.22 !important;
        margin: 6px 0 0 !important;
    }

    body.poolbaas-core-body .pb-arena-progress,
    body.poolbaas-core-body .pb-arena-mini-stat {
        padding: 9px !important;
        border-radius: 12px !important;
    }

    body.poolbaas-core-body .pb-arena-progress span,
    body.poolbaas-core-body .pb-arena-mini-stat span {
        font-size: 0.6rem !important;
        margin-bottom: 4px !important;
    }

    body.poolbaas-core-body .pb-arena-progress strong,
    body.poolbaas-core-body .pb-arena-mini-stat strong {
        font-size: 0.92rem !important;
    }

    body.poolbaas-core-body .pb-arena-progress div {
        height: 7px !important;
        margin-top: 7px !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note {
        margin: 9px 0 !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note span {
        font-size: 0.58rem !important;
        margin-bottom: 5px !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note strong {
        font-size: 0.9rem !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note p {
        font-size: 0.7rem !important;
        line-height: 1.18 !important;
        margin-top: 5px !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article {
        padding: 10px !important;
        border-radius: 13px !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article span {
        font-size: 0.58rem !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article strong {
        font-size: 1.05rem !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article small {
        font-size: 0.66rem !important;
        line-height: 1.1 !important;
    }

    body.poolbaas-core-body .pb-side-block {
        padding: 13px !important;
        border-radius: 18px !important;
    }

    body.poolbaas-core-body .pb-next-title-card {
        margin-bottom: 9px !important;
        padding: 11px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-next-title-card span,
    body.poolbaas-core-body .pb-title-category {
        font-size: 0.55rem !important;
    }

    body.poolbaas-core-body .pb-next-title-card strong {
        font-size: 0.96rem !important;
    }

    body.poolbaas-core-body .pb-next-title-card p {
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
        margin: 6px 0 8px !important;
    }

    body.poolbaas-core-body .pb-title-stack {
        gap: 7px !important;
    }

    body.poolbaas-core-body .pb-title-card {
        padding: 9px !important;
        border-radius: 13px !important;
        gap: 8px !important;
    }

    body.poolbaas-core-body .pb-title-card > .pb-icon,
    body.poolbaas-core-body .pb-today-item > .pb-icon {
        width: 34px !important;
        height: 34px !important;
    }

    body.poolbaas-core-body .pb-title-card strong {
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
    }

    body.poolbaas-core-body .pb-title-card small {
        font-size: 0.66rem !important;
        line-height: 1.1 !important;
    }

    body.poolbaas-core-body .pb-rival-card {
        padding: 10px 11px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-rival-card strong {
        font-size: 0.96rem !important;
    }

    body.poolbaas-core-body .pb-rival-card span,
    body.poolbaas-core-body .pb-rival-card p {
        font-size: 0.68rem !important;
        line-height: 1.16 !important;
    }

    body.poolbaas-core-body .pb-today-block {
        display: none !important;
    }

    body.poolbaas-core-body .pb-cockpit-bottom {
        min-height: 38px !important;
        margin-top: 8px !important;
        padding: 8px 0 !important;
        border-radius: 16px !important;
    }

    body.poolbaas-core-body .pb-cockpit-bottom::before {
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 12px !important;
        padding: 5px 7px !important;
        font-size: 0.58rem !important;
    }

    body.poolbaas-core-body .pb-ticker-track {
        padding-left: 112px !important;
    }

    body.poolbaas-core-body .pb-ticker-group span {
        padding: 7px 10px !important;
        font-size: 0.74rem !important;
    }

    body.poolbaas-core-body .pb-ticker-group span em {
        padding: 3px 6px !important;
        font-size: 0.55rem !important;
    }
}

/* Extra compressie voor laptophoogtes */
@media (min-width: 861px) and (max-height: 820px) {
    body.poolbaas-core-body .pb-kantoor-status-strip {
        display: none !important;
    }

    body.poolbaas-core-body .pb-flow-rail article {
        min-height: 52px !important;
        padding: 8px 10px !important;
    }

    body.poolbaas-core-body .pb-flow-rail small {
        display: none !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile,
    body.poolbaas-core-body .pb-cockpit-main,
    body.poolbaas-core-body .pb-cockpit-side {
        padding: 13px !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile p {
        display: none !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note p {
        display: none !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR WHITESPACE FIT FIX
   Correctie: fonts terug groter, vooral witruimte/lege tegelhoogte verminderen
   ========================================================= */

@media (min-width: 861px) {
    /* Minder pagina-ruimte, niet kleiner schalen */
    body.poolbaas-core-body .app-shell > .main-content {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.poolbaas-core-body .pb-cockpit-page {
        gap: 7px !important;
    }

    /* Flow rail compact, maar tekst weer leesbaar */
    body.poolbaas-core-body .pb-flow-rail {
        gap: 8px !important;
        margin-bottom: 7px !important;
    }

    body.poolbaas-core-body .pb-flow-rail article {
        min-height: 0 !important;
        padding: 9px 12px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-flow-rail article::after {
        display: none !important;
    }

    body.poolbaas-core-body .pb-flow-rail span {
        margin-bottom: 4px !important;
        font-size: 0.64rem !important;
    }

    body.poolbaas-core-body .pb-flow-rail strong {
        font-size: 1rem !important;
        line-height: 1.05 !important;
    }

    body.poolbaas-core-body .pb-flow-rail small {
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
    }

    /* Hoofdgrid: minder gap en geen onnodige hoogte */
    body.poolbaas-core-body .pb-cockpit-shell {
        gap: 10px !important;
        align-items: start !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile,
    body.poolbaas-core-body .pb-cockpit-main,
    body.poolbaas-core-body .pb-cockpit-side {
        padding: 14px !important;
        border-radius: 20px !important;
        min-height: 0 !important;
    }

    /* Linkerkolom: fonts terug, padding omlaag */
    body.poolbaas-core-body .pb-profile-avatar {
        width: 58px !important;
        height: 58px !important;
        font-size: 1.55rem !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile h1 {
        font-size: clamp(2rem, 2.6vw, 2.75rem) !important;
        line-height: 0.95 !important;
        margin: 4px 0 6px !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile p {
        font-size: 0.9rem !important;
        line-height: 1.18 !important;
        margin: 0 0 7px !important;
    }

    body.poolbaas-core-body .pb-current-title,
    body.poolbaas-core-body .pb-baasstatus-meter,
    body.poolbaas-core-body .pb-personal-action-card {
        margin-top: 7px !important;
        padding: 9px 11px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-current-title strong,
    body.poolbaas-core-body .pb-personal-action-card strong {
        font-size: 1.03rem !important;
        line-height: 1.05 !important;
    }

    body.poolbaas-core-body .pb-current-title span,
    body.poolbaas-core-body .pb-baasstatus-head span,
    body.poolbaas-core-body .pb-personal-action-card span {
        font-size: 0.66rem !important;
    }

    body.poolbaas-core-body .pb-baasstatus-meter p,
    body.poolbaas-core-body .pb-personal-action-card p {
        font-size: 0.78rem !important;
        line-height: 1.14 !important;
        margin: 6px 0 7px !important;
    }

    body.poolbaas-core-body .pb-profile-metrics {
        gap: 7px !important;
        margin-top: 7px !important;
    }

    body.poolbaas-core-body .pb-profile-metrics article {
        padding: 8px 8px !important;
        border-radius: 12px !important;
    }

    body.poolbaas-core-body .pb-profile-metrics strong {
        font-size: 1.35rem !important;
        line-height: 1 !important;
    }

    body.poolbaas-core-body .pb-profile-metrics span {
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
    }

    body.poolbaas-core-body .pb-core-cta {
        margin-top: 8px !important;
        padding: 10px 12px !important;
        font-size: 0.84rem !important;
    }

    /* Middenkolom: kaarten minder leeg, tekst normaal */
    body.poolbaas-core-body .pb-section-head {
        margin-bottom: 8px !important;
    }

    body.poolbaas-core-body .pb-section-head span {
        font-size: 0.66rem !important;
    }

    body.poolbaas-core-body .pb-section-head h2 {
        font-size: clamp(1.45rem, 2vw, 2rem) !important;
        line-height: 0.98 !important;
    }

    body.poolbaas-core-body .pb-arena-board {
        gap: 8px !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card {
        padding: 12px 13px !important;
        border-radius: 17px !important;
        min-height: 0 !important;
        gap: 8px !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card h3 {
        font-size: 1.28rem !important;
        line-height: 1 !important;
        margin: 6px 0 0 !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card p {
        font-size: 0.84rem !important;
        line-height: 1.15 !important;
        margin: 5px 0 0 !important;
    }

    body.poolbaas-core-body .pb-arena-card-footer {
        gap: 8px !important;
    }

    body.poolbaas-core-body .pb-arena-progress,
    body.poolbaas-core-body .pb-arena-mini-stat {
        padding: 8px 9px !important;
        border-radius: 12px !important;
    }

    body.poolbaas-core-body .pb-arena-progress span,
    body.poolbaas-core-body .pb-arena-mini-stat span {
        font-size: 0.66rem !important;
        margin-bottom: 4px !important;
    }

    body.poolbaas-core-body .pb-arena-progress strong,
    body.poolbaas-core-body .pb-arena-mini-stat strong {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    body.poolbaas-core-body .pb-arena-progress div {
        height: 7px !important;
        margin-top: 6px !important;
    }

    /* Routing note: compact zonder microtekst */
    body.poolbaas-core-body .pb-arena-routing-note {
        margin: 7px 0 !important;
        padding: 9px 11px !important;
        border-radius: 14px !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note span {
        font-size: 0.64rem !important;
        margin-bottom: 4px !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note strong {
        font-size: 0.98rem !important;
        line-height: 1.05 !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note p {
        font-size: 0.78rem !important;
        line-height: 1.12 !important;
        margin-top: 4px !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail {
        gap: 7px !important;
        margin-top: 7px !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article {
        padding: 8px 9px !important;
        border-radius: 12px !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article::after {
        display: none !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article span {
        font-size: 0.64rem !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article strong {
        font-size: 1.18rem !important;
        line-height: 1 !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article small {
        font-size: 0.72rem !important;
        line-height: 1.08 !important;
        margin-top: 3px !important;
    }

    /* Rechterkolom: titelkamer compacter zonder kleine fonts */
    body.poolbaas-core-body .pb-side-block {
        padding: 11px !important;
        border-radius: 17px !important;
    }

    body.poolbaas-core-body .pb-next-title-card {
        margin-bottom: 7px !important;
        padding: 9px 10px !important;
        border-radius: 13px !important;
    }

    body.poolbaas-core-body .pb-next-title-card::after {
        display: none !important;
    }

    body.poolbaas-core-body .pb-next-title-card span,
    body.poolbaas-core-body .pb-title-category {
        font-size: 0.62rem !important;
    }

    body.poolbaas-core-body .pb-next-title-card strong {
        font-size: 1.04rem !important;
        line-height: 1.05 !important;
    }

    body.poolbaas-core-body .pb-next-title-card p {
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
        margin: 5px 0 7px !important;
    }

    body.poolbaas-core-body .pb-title-stack {
        gap: 6px !important;
    }

    body.poolbaas-core-body .pb-title-card {
        padding: 8px 9px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    body.poolbaas-core-body .pb-title-card > .pb-icon {
        width: 36px !important;
        height: 36px !important;
    }

    body.poolbaas-core-body .pb-title-card strong {
        font-size: 0.9rem !important;
        line-height: 1.02 !important;
    }

    body.poolbaas-core-body .pb-title-card small {
        font-size: 0.72rem !important;
        line-height: 1.08 !important;
    }

    body.poolbaas-core-body .pb-rival-block {
        margin-top: 7px !important;
    }

    body.poolbaas-core-body .pb-rival-card {
        padding: 9px 10px !important;
        border-radius: 13px !important;
    }

    body.poolbaas-core-body .pb-rival-card strong {
        font-size: 1.04rem !important;
        line-height: 1 !important;
    }

    body.poolbaas-core-body .pb-rival-card span {
        font-size: 0.74rem !important;
    }

    body.poolbaas-core-body .pb-rival-card p {
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
        margin-top: 5px !important;
    }

    /* Vandaag-blok neemt te veel plek en is dubbel met action/ticker */
    body.poolbaas-core-body .pb-today-block {
        display: none !important;
    }

    /* Ticker compact, maar leesbaar */
    body.poolbaas-core-body .pb-cockpit-bottom {
        min-height: 36px !important;
        margin-top: 7px !important;
        padding: 7px 0 !important;
        border-radius: 15px !important;
    }

    body.poolbaas-core-body .pb-cockpit-bottom::before {
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 4px 7px !important;
        font-size: 0.62rem !important;
    }

    body.poolbaas-core-body .pb-ticker-track {
        padding-left: 112px !important;
    }

    body.poolbaas-core-body .pb-ticker-group span {
        padding: 6px 9px !important;
        font-size: 0.8rem !important;
    }

    body.poolbaas-core-body .pb-ticker-group span em {
        padding: 3px 6px !important;
        font-size: 0.6rem !important;
    }
}

/* Alleen bij lage laptophoogte: inhoud inkorten, niet lettertype slopen */
@media (min-width: 861px) and (max-height: 820px) {
    body.poolbaas-core-body .pb-kantoor-status-strip {
        display: none !important;
    }

    body.poolbaas-core-body .pb-flow-rail small {
        display: none !important;
    }

    body.poolbaas-core-body .pb-flow-rail article {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile p {
        display: none !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note p {
        display: none !important;
    }

    body.poolbaas-core-body .pb-personal-action-card p {
        display: none !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR FIT FIX 2
   Meer leesbare typografie, minder uitleglaag: flow rail weg op desktop
   ========================================================= */

@media (min-width: 861px) {
    /* De flow rail is uitleg/onboarding. Voor dagelijks Kantoor niet nodig. */
    body.poolbaas-core-body .pb-flow-rail {
        display: none !important;
    }

    body.poolbaas-core-body .pb-kantoor-status-strip {
        margin-bottom: 8px !important;
    }

    /* Typografie weer iets steviger */
    body.poolbaas-core-body .pb-cockpit-profile h1 {
        font-size: clamp(2.15rem, 2.9vw, 3rem) !important;
        line-height: 0.95 !important;
    }

    body.poolbaas-core-body .pb-cockpit-profile p {
        font-size: 0.96rem !important;
        line-height: 1.22 !important;
    }

    body.poolbaas-core-body .pb-section-head h2 {
        font-size: clamp(1.6rem, 2.15vw, 2.15rem) !important;
        line-height: 0.98 !important;
    }

    body.poolbaas-core-body .pb-section-head span,
    body.poolbaas-core-body .pb-current-title span,
    body.poolbaas-core-body .pb-baasstatus-head span,
    body.poolbaas-core-body .pb-personal-action-card span,
    body.poolbaas-core-body .pb-next-title-card span,
    body.poolbaas-core-body .pb-title-category,
    body.poolbaas-core-body .pb-arena-progress span,
    body.poolbaas-core-body .pb-arena-mini-stat span,
    body.poolbaas-core-body .pb-cockpit-action-rail article span {
        font-size: 0.68rem !important;
    }

    body.poolbaas-core-body .pb-current-title strong,
    body.poolbaas-core-body .pb-personal-action-card strong {
        font-size: 1.1rem !important;
    }

    body.poolbaas-core-body .pb-baasstatus-meter p,
    body.poolbaas-core-body .pb-personal-action-card p,
    body.poolbaas-core-body .pb-arena-routing-note p,
    body.poolbaas-core-body .pb-next-title-card p,
    body.poolbaas-core-body .pb-rival-card p {
        font-size: 0.82rem !important;
        line-height: 1.16 !important;
    }

    body.poolbaas-core-body .pb-profile-metrics strong {
        font-size: 1.48rem !important;
    }

    body.poolbaas-core-body .pb-profile-metrics span {
        font-size: 0.72rem !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card h3 {
        font-size: 1.38rem !important;
    }

    body.poolbaas-core-body .pb-arena-wide-card p {
        font-size: 0.9rem !important;
        line-height: 1.18 !important;
    }

    body.poolbaas-core-body .pb-arena-progress strong,
    body.poolbaas-core-body .pb-arena-mini-stat strong {
        font-size: 1.08rem !important;
    }

    body.poolbaas-core-body .pb-arena-card-footer > strong {
        font-size: 0.9rem !important;
    }

    body.poolbaas-core-body .pb-arena-routing-note strong {
        font-size: 1.06rem !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article strong {
        font-size: 1.28rem !important;
    }

    body.poolbaas-core-body .pb-cockpit-action-rail article small {
        font-size: 0.76rem !important;
    }

    body.poolbaas-core-body .pb-next-title-card strong {
        font-size: 1.1rem !important;
    }

    body.poolbaas-core-body .pb-title-card strong {
        font-size: 0.96rem !important;
    }

    body.poolbaas-core-body .pb-title-card small {
        font-size: 0.76rem !important;
    }

    body.poolbaas-core-body .pb-rival-card strong {
        font-size: 1.1rem !important;
    }

    body.poolbaas-core-body .pb-rival-card span {
        font-size: 0.78rem !important;
    }

    body.poolbaas-core-body .pb-ticker-group span {
        font-size: 0.86rem !important;
    }

    body.poolbaas-core-body .pb-ticker-group span em {
        font-size: 0.62rem !important;
    }

    /* Omdat flow rail weg is, mag content iets ruimer blijven zonder scroll. */
    body.poolbaas-core-body .pb-cockpit-shell {
        margin-top: 0 !important;
    }
}

/* Op lage schermen statusstrip ook weg: inhoud boven uitleg */
@media (min-width: 861px) and (max-height: 820px) {
    body.poolbaas-core-body .pb-kantoor-status-strip {
        display: none !important;
    }
}


/* =========================================================
   POOLBAAS KANTOOR TICKER LIFT
   Live ticker iets hoger zonder typografie of kaarten te verkleinen
   ========================================================= */

@media (min-width: 861px) {
    body.poolbaas-core-body .pb-cockpit-bottom {
        margin-top: 2px !important;
        transform: translateY(-6px) !important;
    }

    body.poolbaas-core-body .pb-cockpit-page {
        padding-bottom: 0 !important;
    }

    body.poolbaas-core-body .app-shell > .main-content {
        padding-bottom: 4px !important;
    }
}

/* Op lagere laptophoogtes mag hij nog iets strakker tegen de cockpit aan */
@media (min-width: 861px) and (max-height: 820px) {
    body.poolbaas-core-body .pb-cockpit-bottom {
        margin-top: 0 !important;
        transform: translateY(-9px) !important;
    }
}


/* =========================================================
   MIJN VOORSPELLINGEN STATUS HEADER
   Desktop: snelle status + route naar snel voorspellen
   ========================================================= */

.predictions-status-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin: 16px 0 18px;
    padding: 18px 20px;
    border-radius: 22px;

    background:
        radial-gradient(circle at 12% 20%, rgba(91,44,255,0.14), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,245,255,0.92));
    border: 1px solid rgba(91,44,255,0.18);
    box-shadow: 0 16px 36px rgba(53,20,122,0.08);
}

.predictions-status-hero span {
    display: block;
    margin-bottom: 7px;

    color: #5b2cff;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.predictions-status-hero strong {
    display: block;
    color: #10233f;
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.predictions-status-hero p {
    margin: 7px 0 0;
    color: rgba(16,35,63,0.64);
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 800;
}

.predictions-status-hero > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 15px;
    border-radius: 999px;

    background: #5b2cff;
    color: #fff !important;
    text-decoration: none !important;

    font-size: 0.86rem;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(91,44,255,0.24);
}

.predictions-status-hero > a:hover {
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    .predictions-status-hero {
        display: none !important;
    }
}


/* =========================================================
   SNEL VOORSPELLEN ARENA POLISH
   Desktop polish zonder mobile layout te wijzigen
   ========================================================= */

@media (min-width: 861px) {
    .quick-predict-page {
        max-width: 840px;
    }

    .quick-predict-heading {
        margin-bottom: 16px;
    }

    .quick-predict-heading h1 {
        letter-spacing: -0.055em;
    }

    .quick-predict-card {
        padding: 24px;
        border-radius: 30px;
        box-shadow: 0 22px 55px rgba(39, 19, 85, 0.11);
    }

    .quick-progress {
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 8px 18px;
        margin-bottom: 12px;
        text-align: left;
    }

    .quick-progress .eyebrow {
        grid-column: 1 / -1;
    }

    .quick-progress strong {
        font-size: clamp(1.35rem, 2.1vw, 1.8rem);
        letter-spacing: -0.04em;
    }

    .quick-progress small {
        justify-self: end;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(91, 44, 255, 0.09);
        color: #5b2cff;
        font-size: 0.78rem;
        line-height: 1;
        font-weight: 950;
    }

    .quick-progress-bar {
        height: 9px;
        margin-bottom: 18px;
        background: rgba(91, 44, 255, 0.10);
    }

    .quick-match-meta {
        margin-bottom: 18px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.58);
        color: rgba(16, 35, 63, 0.66);
    }

    .quick-team-names {
        margin-bottom: 2px;
    }

    .quick-team-names strong {
        font-size: clamp(1.55rem, 2.7vw, 2.25rem);
        line-height: 0.96;
    }

    .quick-team-names span {
        font-size: 0.7rem;
    }

    .quick-score-picker {
        gap: 14px;
    }

    .quick-score-columns {
        gap: 10px;
    }

    .quick-score-column {
        padding: 12px;
        border-radius: 18px;
    }

    .quick-score-column-title {
        margin-bottom: 10px;
    }

    .quick-score-option {
        min-height: 39px;
        border-radius: 12px;
        font-size: 0.94rem;
        font-weight: 950;
    }

    .quick-custom-score-small {
        margin-top: 0;
        padding: 10px 12px;
        border-radius: 16px;
    }

    .quick-custom-score-small span {
        font-size: 0.78rem;
        font-weight: 950;
    }

    .quick-city {
        margin-top: 12px;
    }

    .quick-actions {
        gap: 10px;
        margin-top: 18px;
    }

    .quick-submit {
        min-height: 50px;
    }
}


/* =========================================================
   WEDSTRIJD DETAIL ARENA HEADING
   Desktop: duidelijke acties zonder mobile layout te wijzigen
   ========================================================= */

.match-detail-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

@media (min-width: 861px) {
    .match-detail-page .page-heading.split {
        align-items: flex-end;
    }

    .match-detail-heading-actions .button {
        white-space: nowrap;
    }
}

@media (max-width: 860px) {
    .match-detail-heading-actions {
        width: 100%;
        justify-content: stretch;
    }

    .match-detail-heading-actions .button {
        flex: 1 1 100%;
    }
}


/* =========================================================
   WEDSTRIJDEN ARENA STATUS
   Kalenderkop met snelle Arena-acties
   ========================================================= */

.matches-arena-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: 24px;

    background:
        radial-gradient(circle at 12% 20%, rgba(91,44,255,0.13), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,245,255,0.92));
    border: 1px solid rgba(91,44,255,0.17);
    box-shadow: 0 16px 34px rgba(53,20,122,0.08);
}

.matches-arena-status span {
    display: block;
    margin-bottom: 7px;

    color: #5b2cff;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.matches-arena-status strong {
    display: block;
    color: #10233f;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.matches-arena-status p {
    margin: 7px 0 0;
    color: rgba(16,35,63,0.64);
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 800;
}

.matches-arena-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.matches-arena-actions .button {
    white-space: nowrap;
}

@media (max-width: 860px) {
    .matches-arena-status {
        display: none !important;
    }
}


/* =========================================================
   DASHBOARD ARENA HOME STATUS
   Desktop Arena-startblok bovenaan homepage
   ========================================================= */

.dashboard-arena-home-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: 24px;

    background:
        radial-gradient(circle at 12% 20%, rgba(91,44,255,0.14), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,245,255,0.92));
    border: 1px solid rgba(91,44,255,0.17);
    box-shadow: 0 16px 34px rgba(53,20,122,0.08);
}

.dashboard-arena-home-status span {
    display: block;
    margin-bottom: 7px;

    color: #5b2cff;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.dashboard-arena-home-status strong {
    display: block;
    color: #10233f;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.dashboard-arena-home-status p {
    margin: 7px 0 0;
    color: rgba(16,35,63,0.64);
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 800;
}

.dashboard-arena-home-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-arena-home-actions .button {
    white-space: nowrap;
}

@media (max-width: 860px) {
    .dashboard-arena-home-status {
        display: none !important;
    }
}


/* =========================================================
   DASHBOARD ARENA HOME STATUS
   Desktop Arena-startblok bovenaan homepage
   ========================================================= */

.dashboard-arena-home-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: 24px;

    background:
        radial-gradient(circle at 12% 20%, rgba(91,44,255,0.14), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,245,255,0.92));
    border: 1px solid rgba(91,44,255,0.17);
    box-shadow: 0 16px 34px rgba(53,20,122,0.08);
}

.dashboard-arena-home-status span {
    display: block;
    margin-bottom: 7px;

    color: #5b2cff;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.dashboard-arena-home-status strong {
    display: block;
    color: #10233f;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.dashboard-arena-home-status p {
    margin: 7px 0 0;
    color: rgba(16,35,63,0.64);
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 800;
}

.dashboard-arena-home-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-arena-home-actions .button {
    white-space: nowrap;
}

@media (max-width: 860px) {
    .dashboard-arena-home-status {
        display: none !important;
    }
}


/* Stats desktop Arena polish */
@media (min-width: 781px) {
    .stats-hero {
        min-height: 310px;
    }

    .stats-cockpit {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
        gap: 26px;
        align-items: center;
        padding: 24px;
        margin: -8px 0 22px;
    }

    .stats-cockpit-copy h2 {
        margin-bottom: 10px;
    }

    .stats-cockpit-copy p {
        max-width: 620px;
        margin-bottom: 0;
    }

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

    .stats-cockpit-grid div {
        min-height: 116px;
        display: grid;
        align-content: center;
        gap: 8px;
        padding: 18px;
        border: 1px solid var(--line-soft);
        border-radius: 22px;
        background: color-mix(in srgb, var(--text) 5%, transparent);
    }

    .stats-cockpit-grid strong {
        color: var(--accent);
        font-size: 1.45rem;
        line-height: 1;
        letter-spacing: -0.04em;
        text-transform: lowercase;
    }

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

    .stats-summary-grid {
        margin-top: 0;
    }
}

/* Tour Arena desktop helpers */
@media (min-width: 781px) {
    .prediction-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .prediction-summary-grid > div {
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 16px;
        padding: 0.9rem;
        background: rgba(255, 255, 255, 0.035);
    }

    .prediction-summary-grid strong {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.95rem;
    }
}

.invite-copy-box {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 18px;
    padding: 1rem;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text, #10233f);
}

.site-announcement-bar a,
.mobile-tour-banner a {
    color: inherit;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.invite-copy-feedback {
    min-height: 1.4rem;
    margin: 0.85rem 0 0;
    font-weight: 800;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.invite-copy-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.arena-public-hero {
    border-top: 5px solid var(--arena-accent, var(--primary));
}

.arena-versus-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
}

.arena-team-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.arena-team-badge:last-child {
    justify-content: flex-end;
    text-align: right;
}

.arena-team-badge img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0.25rem;
}

@media (max-width: 680px) {
    .arena-versus-row {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .arena-team-badge:last-child {
        justify-content: flex-start;
        text-align: left;
    }

    .arena-versus-row .prediction-separator {
        display: none;
    }
}

.arena-predict-row {
    align-items: center;
}

.score-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.score-inputs input {
    width: 4.25rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
}

.muted-card {
    opacity: 0.78;
}

@media (max-width: 680px) {
    .score-inputs {
        justify-content: flex-start;
    }
}

.arena-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.arena-overview-card {
    border-top: 5px solid var(--arena-accent, var(--primary));
}

.arena-card-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

@media (max-width: 680px) {
    .arena-card-top {
        display: block;
    }

    .arena-card-top .prediction-pill {
        margin-top: 0.75rem;
    }
}


/* =========================================================
   Poolbaas Kantoor — mobiele basis v1
   ========================================================= */

.pb-kantoor-mobile-intro,
.pb-kantoor-next-action {
    display: none;
}

@media (max-width: 760px) {
    body.poolbaas-core-body .main-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .pb-cockpit-page {
        display: grid;
        gap: 14px;
    }

    .pb-kantoor-status-strip,
    .pb-flow-rail,
    .pb-arena-routing-note {
        display: none;
    }

    .pb-kantoor-mobile-intro {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 18px;
        border-radius: 18px;
        background: #10233f;
        color: #ffffff;
    }

    .pb-kantoor-mobile-intro h1 {
        margin: 3px 0 5px;
        font-size: 1.55rem;
        line-height: 1.12;
        color: inherit;
    }

    .pb-kantoor-mobile-intro p {
        margin: 0;
        line-height: 1.45;
    }

    .pb-kantoor-mobile-intro > div > p:last-child {
        opacity: 0.78;
        font-size: 0.9rem;
    }

    .pb-kantoor-mobile-intro .pb-core-eyebrow {
        color: #8fd0ff;
    }

    .pb-kantoor-level {
        flex: 0 0 auto;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        font-size: 0.72rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .pb-kantoor-next-action {
        display: grid;
        gap: 14px;
        padding: 17px;
        border: 1px solid rgba(16, 35, 63, 0.1);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(16, 35, 63, 0.08);
    }

    .pb-kantoor-next-action span {
        display: block;
        margin-bottom: 4px;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6b7a90;
    }

    .pb-kantoor-next-action strong {
        display: block;
        font-size: 1.05rem;
        color: #10233f;
    }

    .pb-kantoor-next-action p {
        margin: 5px 0 0;
        color: #667085;
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .pb-kantoor-next-action a {
        display: block;
        padding: 12px 14px;
        border-radius: 12px;
        background: #10233f;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        font-weight: 800;
    }

    .pb-cockpit-shell {
        display: contents;
    }

    .pb-cockpit-main {
        order: 1;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .pb-cockpit-profile {
        order: 2;
    }

    .pb-cockpit-side {
        order: 3;
    }

    .pb-cockpit-main-head {
        align-items: end;
        margin-bottom: 10px;
    }

    .pb-cockpit-main-head h2 {
        margin: 2px 0 0;
        font-size: 1.2rem;
    }

    .pb-cockpit-main-head a {
        font-size: 0.8rem;
    }

    .pb-arena-board {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pb-arena-wide-card {
        min-height: 0;
        padding: 17px;
        border-radius: 18px;
    }

    .pb-arena-wide-card h3 {
        margin: 8px 0 5px;
        font-size: 1.18rem;
    }

    .pb-arena-wide-card p {
        margin: 0;
        font-size: 0.86rem;
        line-height: 1.42;
    }

    .pb-arena-card-footer {
        margin-top: 16px;
        padding-top: 13px;
    }

    .pb-cockpit-action-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .pb-cockpit-action-rail article {
        min-width: 0;
        padding: 12px 8px;
        text-align: center;
    }

    .pb-cockpit-action-rail strong {
        font-size: 1rem;
    }

    .pb-cockpit-action-rail small {
        display: none;
    }

    .pb-cockpit-profile {
        padding: 18px;
        border-radius: 18px;
    }

    .pb-cockpit-profile .pb-profile-topline,
    .pb-cockpit-profile .pb-profile-avatar,
    .pb-cockpit-profile > .pb-core-eyebrow,
    .pb-cockpit-profile > h1,
    .pb-cockpit-profile .pb-profile-slogan {
        display: none;
    }

    .pb-current-title {
        margin-top: 0;
    }

    .pb-profile-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pb-profile-cta {
        margin-top: 14px;
    }

    .pb-cockpit-side {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .pb-side-block {
        padding: 17px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid rgba(16, 35, 63, 0.08);
    }

    .pb-title-stack {
        display: grid;
        gap: 9px;
    }

    .pb-title-card {
        padding: 12px;
    }

    .pb-cockpit-bottom {
        margin-top: 0;
        border-radius: 14px;
    }
}


/* =========================================================
   Kantoor — arena hub zonder apart baasschappenblok
   ========================================================= */

body.poolbaas-core-body .pb-cockpit-shell {
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 2fr);
}

body.poolbaas-core-body .pb-cockpit-main {
    min-width: 0;
}

body.poolbaas-core-body .pb-cockpit-main-head > a {
    white-space: nowrap;
}

@media (max-width: 980px) {
    body.poolbaas-core-body .pb-cockpit-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.poolbaas-core-body .pb-cockpit-shell {
        display: contents;
    }

    body.poolbaas-core-body .pb-cockpit-main {
        order: 1;
    }

    body.poolbaas-core-body .pb-cockpit-profile {
        order: 2;
    }
}


/* =========================================================
   Kantoor — geen arena-overzicht en geen huidige titel
   ========================================================= */

body.poolbaas-core-body .pb-cockpit-shell {
    display: block;
}

body.poolbaas-core-body .pb-cockpit-profile {
    width: min(100%, 720px);
    margin: 0 auto;
}

body.poolbaas-core-body .pb-current-title {
    display: none !important;
}

@media (max-width: 760px) {
    body.poolbaas-core-body .pb-cockpit-profile {
        width: 100%;
        margin: 0;
    }
}


/* Kantoor — baasstatus volledig uitgeschakeld */
body.poolbaas-core-body .pb-baasstatus-meter,
body.poolbaas-core-body .pb-baasstatus-head,
body.poolbaas-core-body .pb-baasstatus-track {
    display: none !important;
}


/* =========================================================
   Kantoor — persoonlijk overzicht v2
   Baasschappen bewust niet opgenomen
   ========================================================= */

body.poolbaas-core-body .pb-personal-overview {
    margin-top: 18px;
}

body.poolbaas-core-body .pb-personal-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

body.poolbaas-core-body .pb-personal-overview-head div > span {
    display: block;
    margin-bottom: 2px;
    color: #718096;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.poolbaas-core-body .pb-personal-overview-head div > strong {
    color: #10233f;
    font-size: 1rem;
}

body.poolbaas-core-body .pb-personal-overview-head em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

body.poolbaas-core-body .pb-personal-overview-head em.is-clear {
    background: #e8f7ee;
    color: #187342;
}

body.poolbaas-core-body .pb-personal-overview-head em.has-action {
    background: #fff1df;
    color: #9a4c00;
}

body.poolbaas-core-body .pb-profile-metrics--expanded {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.poolbaas-core-body .pb-profile-metrics--expanded article {
    display: grid;
    align-content: start;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(16, 35, 63, 0.08);
    border-radius: 15px;
    background: #f7f9fc;
    text-align: left;
}

body.poolbaas-core-body .pb-profile-metrics--expanded
.pb-profile-metric-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 11px;
    border-radius: 9px;
    background: #e7eef7;
    color: #315b88;
    font-size: 0.9rem;
    font-weight: 900;
}

body.poolbaas-core-body .pb-profile-metrics--expanded article > strong {
    margin-bottom: 2px;
    color: #10233f;
    font-size: 1.25rem;
    line-height: 1.1;
}

body.poolbaas-core-body .pb-profile-metrics--expanded
article > span:not(.pb-profile-metric-icon) {
    color: #344054;
    font-size: 0.79rem;
    font-weight: 800;
}

body.poolbaas-core-body .pb-profile-metrics--expanded article > small {
    margin-top: 4px;
    overflow: hidden;
    color: #7a8798;
    font-size: 0.7rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}


@media (max-width: 760px) {
    body.poolbaas-core-body .pb-personal-overview {
        margin-top: 4px;
    }

    body.poolbaas-core-body .pb-personal-overview-head {
        align-items: flex-start;
    }

    body.poolbaas-core-body .pb-profile-metrics--expanded {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.poolbaas-core-body .pb-profile-metrics--expanded article {
        padding: 13px;
        border-radius: 14px;
    }

    body.poolbaas-core-body .pb-profile-metrics--expanded
    .pb-profile-metric-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 9px;
    }

    body.poolbaas-core-body .pb-profile-metrics--expanded article > strong {
        font-size: 1.12rem;
    }

    body.poolbaas-core-body .pb-profile-metrics--expanded article > small {
        min-height: 1.9em;
    }
}


/* Tour-promotiebanner verwijderd */
.mobile-tour-banner,
.site-announcement-bar {
    display: none !important;
}


/* =========================================================
   WK Pool-winnaar — wereldbeker achter spelersnaam
   De afbeelding schaalt automatisch mee met de tekst.
   ========================================================= */

.pb-participant-name {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.pb-participant-name__text {
    min-width: 0;
}

.pb-participant-name__world-cup {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    height: 1.12em;
    max-width: none;
    margin: 0;
    object-fit: contain;
    vertical-align: -0.16em;
    filter: drop-shadow(0 0.08em 0.08em rgba(16, 35, 63, 0.18));
}

/* In compacte tabellen en ranglijsten iets subtieler */
.pb-radical-standings-row .pb-participant-name__world-cup,
.leader-row .pb-participant-name__world-cup,
.leaderboard-row .pb-participant-name__world-cup {
    height: 1.05em;
}

/* In grotere koppen groeit de beker gewoon met de tekst mee */
h1 .pb-participant-name__world-cup,
h2 .pb-participant-name__world-cup,
h3 .pb-participant-name__world-cup {
    height: 1.08em;
}


/* =========================================================
   Arena admin v2
   ========================================================= */

.pb-arena-admin-hero,
.pb-arena-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    padding: 26px;
    border-radius: 22px;
    background: #10233f;
    color: #fff;
}

.pb-arena-admin-hero h1,
.pb-arena-detail-hero h1 {
    margin: 5px 0 7px;
    color: inherit;
}

.pb-arena-admin-hero p,
.pb-arena-detail-hero p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.72);
}

.pb-arena-admin-hero__actions,
.pb-arena-detail-actions,
.pb-arena-admin-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.pb-arena-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.pb-arena-admin-summary article {
    padding: 17px;
    border: 1px solid rgba(16,35,63,.08);
    border-radius: 16px;
    background: #fff;
}

.pb-arena-admin-summary span,
.pb-arena-admin-summary small {
    display: block;
    color: #748094;
}

.pb-arena-admin-summary strong {
    display: block;
    margin: 3px 0;
    color: #10233f;
    font-size: 1.55rem;
}

.pb-arena-admin-section {
    margin: 30px 0;
}

.pb-arena-admin-section__head,
.pb-arena-detail-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
}

.pb-arena-admin-section__head h2 {
    margin: 2px 0 0;
}

.pb-arena-admin-section__head > span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #e9eef5;
    color: #294866;
    font-weight: 850;
}

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

.pb-arena-admin-card,
.pb-arena-detail-panel,
.pb-arena-danger-zone {
    padding: 20px;
    border: 1px solid rgba(16,35,63,.09);
    border-radius: 18px;
    background: #fff;
}

.pb-arena-admin-card.is-archived {
    background: #f7f8fa;
}

.pb-arena-admin-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pb-arena-admin-card h3 {
    margin: 9px 0 3px;
    color: #10233f;
}

.pb-arena-admin-card p {
    margin: 0;
    color: #748094;
    font-size: .82rem;
}

.pb-arena-admin-status,
.pb-arena-admin-model {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf1f6;
    color: #536275;
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pb-arena-admin-status.is-active,
.pb-arena-admin-status.is-live {
    background: #e7f7ed;
    color: #167442;
}

.pb-arena-admin-status.is-archived {
    background: #edf0f4;
    color: #626e7e;
}

.pb-arena-admin-status.is-draft {
    background: #fff2dd;
    color: #985400;
}

.pb-arena-admin-meta,
.pb-arena-detail-list {
    display: grid;
    gap: 10px;
    margin: 17px 0;
}

.pb-arena-admin-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pb-arena-admin-meta div,
.pb-arena-detail-list div {
    min-width: 0;
    padding: 11px;
    border-radius: 12px;
    background: #f6f8fb;
}

.pb-arena-admin-meta dt,
.pb-arena-detail-list dt {
    margin-bottom: 3px;
    color: #7a8698;
    font-size: .66rem;
    font-weight: 850;
    text-transform: uppercase;
}

.pb-arena-admin-meta dd,
.pb-arena-detail-list dd {
    margin: 0;
    overflow: hidden;
    color: #203651;
    font-size: .8rem;
    font-weight: 750;
    text-overflow: ellipsis;
}

.pb-arena-detail-back {
    display: inline-block;
    margin-bottom: 13px;
    color: rgba(255,255,255,.75);
    font-size: .78rem;
    font-weight: 750;
}

.pb-arena-detail-actions {
    margin-bottom: 18px;
}

.pb-arena-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.pb-arena-detail-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.pb-arena-detail-counts div {
    padding: 14px;
    border-radius: 13px;
    background: #f6f8fb;
}

.pb-arena-detail-counts strong,
.pb-arena-detail-counts span {
    display: block;
}

.pb-arena-detail-counts strong {
    color: #10233f;
    font-size: 1.4rem;
}

.pb-arena-detail-counts span {
    color: #748094;
    font-size: .75rem;
}

.pb-arena-detail-list.is-horizontal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pb-arena-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    border-color: rgba(177,39,39,.2);
    background: #fff8f8;
}

.pb-arena-danger-zone h2 {
    margin: 4px 0;
    color: #832525;
}

.pb-arena-danger-zone p {
    max-width: 720px;
    margin: 0;
    color: #886565;
}


@media (max-width: 780px) {
    .pb-arena-admin-hero,
    .pb-arena-detail-hero,
    .pb-arena-danger-zone {
        display: grid;
    }

    .pb-arena-admin-summary,
    .pb-arena-admin-grid,
    .pb-arena-detail-grid {
        grid-template-columns: 1fr;
    }

    .pb-arena-admin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-arena-admin-meta {
        grid-template-columns: 1fr;
    }

    .pb-arena-detail-list.is-horizontal {
        grid-template-columns: 1fr;
    }

    .pb-arena-admin-card__actions form,
    .pb-arena-detail-actions form {
        display: contents;
    }
}


/* =========================================================
   Poolbaas admin shell v1
   ========================================================= */

.pb-topbar-admin-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.42rem;
    padding-inline: 0.82rem !important;
    border: 1px solid rgba(250, 204, 21, 0.34);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.1);
    color: #7a5200 !important;
    font-weight: 850 !important;
}

.pb-topbar-admin-link:hover,
.pb-topbar-admin-link.active {
    background: #facc15;
    color: #10233f !important;
}

.pb-topbar-admin-link__icon {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: #10233f;
    color: #fff;
    font-size: 0.68rem;
    line-height: 1;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.mobile-header-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(250, 204, 21, 0.45);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.12);
    color: #facc15;
    font-size: 0.72rem;
    font-weight: 850;
}

.mobile-header-admin.is-active {
    background: #facc15;
    color: #10233f;
}

.pb-admin-nav {
    position: sticky;
    top: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(100% - 32px, 1500px);
    margin: 14px auto 20px;
    padding: 10px 12px;
    border: 1px solid rgba(16, 35, 63, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 30px rgba(16, 35, 63, 0.08);
    backdrop-filter: blur(14px);
}

.pb-admin-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding-right: 16px;
    border-right: 1px solid rgba(16, 35, 63, 0.1);
}

.pb-admin-nav__brand div {
    display: grid;
}

.pb-admin-nav__brand strong {
    color: #10233f;
    font-size: 0.82rem;
}

.pb-admin-nav__brand small {
    color: #7b8798;
    font-size: 0.65rem;
}

.pb-admin-nav__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #10233f;
    color: #facc15;
    font-weight: 900;
}

.pb-admin-nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pb-admin-nav__links::-webkit-scrollbar {
    display: none;
}

.pb-admin-nav__links a,
.pb-admin-nav__exit {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 10px;
    color: #536275;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.pb-admin-nav__links a:hover,
.pb-admin-nav__links a.is-active {
    background: #10233f;
    color: #fff;
}

.pb-admin-nav__exit {
    margin-left: auto;
    border: 1px solid rgba(145, 43, 43, 0.15);
    color: #922f2f;
}

.pb-admin-nav__exit:hover {
    background: #fff0f0;
}

/* Adminpagina's rustiger en breder */
body:has(.pb-admin-nav) .main-content {
    width: min(100% - 32px, 1500px);
}

body:has(.pb-admin-nav) .page-heading,
body:has(.pb-admin-nav) .card,
body:has(.pb-admin-nav) .table-card,
body:has(.pb-admin-nav) .section-card {
    border-color: rgba(16, 35, 63, 0.08);
}

@media (max-width: 900px) {
    .pb-admin-nav {
        position: relative;
        top: auto;
        display: grid;
        gap: 10px;
        width: calc(100% - 20px);
        margin: 10px auto 14px;
        padding: 10px;
    }

    .pb-admin-nav__brand {
        padding-right: 0;
        padding-bottom: 9px;
        border-right: 0;
        border-bottom: 1px solid rgba(16, 35, 63, 0.1);
    }

    .pb-admin-nav__links {
        width: 100%;
        padding-bottom: 2px;
    }

    .pb-admin-nav__links a {
        background: #f4f6f9;
    }

    .pb-admin-nav__exit {
        display: none;
    }

    body:has(.pb-admin-nav) .main-content {
        width: calc(100% - 20px);
    }
}

@media (min-width: 901px) {
    .mobile-header-admin {
        display: none;
    }
}


/* =========================================================
   Adminbutton direct naast Poolbaas-logo
   ========================================================= */

.pb-header-brand-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.pb-brand-admin-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 12px 7px 8px;
    border: 1px solid rgba(250, 204, 21, 0.45);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.12);
    color: #755000;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.pb-brand-admin-button:hover,
.pb-brand-admin-button.is-active {
    border-color: #facc15;
    background: #facc15;
    color: #10233f;
    transform: translateY(-1px);
}

.pb-brand-admin-button__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #10233f;
    color: #facc15;
    font-size: 0.68rem;
    font-weight: 950;
}

.pb-mobile-brand-group {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.pb-mobile-brand-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(250, 204, 21, 0.5);
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.pb-mobile-brand-admin.is-active {
    background: #facc15;
    color: #10233f;
}

/* Oude losse adminbutton niet meer gebruiken */
.mobile-header-admin {
    display: none !important;
}

@media (max-width: 900px) {
    .pb-header-brand-group .pb-brand-admin-button {
        display: none;
    }
}

@media (min-width: 901px) {
    .pb-mobile-brand-admin {
        display: none;
    }
}


/* =========================================================
   Neutraal Poolbaas Kantoor
   ========================================================= */

.pb-kantoor-empty-state {
    display: grid;
    justify-items: center;
    max-width: 720px;
    margin: 60px auto;
    padding: 56px 28px;
    border: 1px solid rgba(16, 35, 63, 0.09);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at top,
            rgba(250, 204, 21, 0.12),
            transparent 42%
        ),
        #fff;
    text-align: center;
}

.pb-kantoor-empty-state__icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    border-radius: 22px;
    background: #10233f;
    color: #facc15;
    font-size: 2rem;
    font-weight: 900;
}

.pb-kantoor-empty-state h1 {
    margin: 7px 0 10px;
    color: #10233f;
}

.pb-kantoor-empty-state p {
    max-width: 520px;
    margin: 0;
    color: #718096;
    line-height: 1.65;
}

.pb-kantoor-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}


/* =========================================================
   WK Pool 2026 archiefhome
   ========================================================= */

.pb-wk26-archive-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 22px;
    margin-bottom: 18px;
    padding: 30px;
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(250, 204, 21, 0.24),
            transparent 34%
        ),
        #10233f;
    color: #fff;
}

.pb-wk26-archive-status {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pb-wk26-archive-hero h1 {
    margin: 5px 0 10px;
    color: #fff;
    font-size: clamp(2rem, 5vw, 4rem);
}

.pb-wk26-archive-hero p {
    max-width: 670px;
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
}

.pb-wk26-archive-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 23px;
}

.pb-wk26-winner-card {
    display: grid;
    place-items: center;
    align-content: center;
    padding: 22px;
    border: 1px solid rgba(250,204,21,.3);
    border-radius: 21px;
    background: rgba(255,255,255,.09);
    text-align: center;
}

.pb-wk26-winner-card img {
    width: 82px;
    height: 82px;
    margin: 12px 0;
    object-fit: contain;
}

.pb-wk26-winner-card strong {
    font-size: 1.2rem;
}

.pb-wk26-winner-card > span:last-child {
    margin-top: 4px;
    color: rgba(255,255,255,.68);
    font-size: .78rem;
}

.pb-wk26-archive-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.pb-wk26-archive-stats article {
    padding: 17px;
    border: 1px solid rgba(16,35,63,.08);
    border-radius: 16px;
    background: #fff;
}

.pb-wk26-archive-stats span,
.pb-wk26-archive-stats small {
    display: block;
    color: #788496;
}

.pb-wk26-archive-stats strong {
    display: block;
    margin: 4px 0;
    color: #10233f;
    font-size: 1.5rem;
}

.pb-wk26-archive-section {
    margin: 30px 0;
}

.pb-wk26-archive-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.pb-wk26-archive-section__head h2 {
    margin: 3px 0 0;
}

.pb-wk26-archive-section__head > a {
    color: #294866;
    font-size: .78rem;
    font-weight: 850;
}

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

.pb-wk26-podium article {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 24px 17px;
    border: 1px solid rgba(16,35,63,.08);
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.pb-wk26-podium article.is-place-1 {
    border-color: rgba(250,204,21,.45);
    background: #fffdf2;
}

.pb-wk26-podium__place {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #10233f;
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
}

.pb-wk26-podium img {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    object-fit: contain;
}

.pb-wk26-podium strong {
    color: #10233f;
}

.pb-wk26-podium article > span:last-child {
    margin-top: 4px;
    color: #778396;
    font-size: .76rem;
}

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

.pb-wk26-archive-grid > a {
    display: grid;
    align-content: start;
    min-height: 210px;
    padding: 20px;
    border: 1px solid rgba(16,35,63,.08);
    border-radius: 18px;
    background: #fff;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.pb-wk26-archive-grid > a:hover {
    transform: translateY(-2px);
    border-color: rgba(16,35,63,.2);
    box-shadow: 0 15px 35px rgba(16,35,63,.08);
}

.pb-wk26-archive-grid__icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #10233f;
    color: #facc15;
    font-weight: 900;
}

.pb-wk26-archive-grid strong {
    color: #10233f;
    font-size: 1rem;
}

.pb-wk26-archive-grid p {
    margin: 7px 0 18px;
    color: #788496;
    font-size: .8rem;
    line-height: 1.5;
}

.pb-wk26-archive-grid em {
    margin-top: auto;
    color: #294866;
    font-size: .74rem;
    font-style: normal;
    font-weight: 850;
}

.pb-wk26-archive-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin: 28px 0;
    padding: 21px;
    border: 1px solid rgba(16,35,63,.08);
    border-radius: 18px;
    background: #f5f7fa;
}

.pb-wk26-archive-note h2 {
    margin: 3px 0 0;
}

.pb-wk26-archive-note p {
    max-width: 620px;
    margin: 0;
    color: #788496;
}

@media (max-width: 800px) {
    .pb-wk26-archive-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .pb-wk26-winner-card {
        grid-template-columns: auto 1fr;
        justify-items: start;
        column-gap: 15px;
        text-align: left;
    }

    .pb-wk26-winner-card .eyebrow {
        grid-column: 1 / -1;
    }

    .pb-wk26-winner-card img {
        grid-row: span 2;
        width: 62px;
        height: 62px;
        margin: 0;
    }

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

    .pb-wk26-podium,
    .pb-wk26-archive-grid {
        grid-template-columns: 1fr;
    }

    .pb-wk26-archive-grid > a {
        min-height: 0;
    }

    .pb-wk26-archive-note {
        display: grid;
    }
}


/* =========================================================
   Poolbaas Kantoor — single active pool
   ========================================================= */

.pb-single-pool-home {
    display: grid;
    gap: 22px;
    padding-bottom: 34px;
}

.pb-single-pool-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 2px 4px;
}

.pb-single-pool-welcome h1 {
    margin: 5px 0 8px;
    color: #10233f;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.04;
}

.pb-single-pool-welcome p {
    max-width: 620px;
    margin: 0;
    color: #718096;
    font-size: 1rem;
    line-height: 1.6;
}

.pb-single-pool-admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(16, 35, 63, 0.12);
    border-radius: 999px;
    background: #fff;
    color: #10233f;
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

.pb-single-pool-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(16, 35, 63, 0.08);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(250, 204, 21, 0.2),
            transparent 32%
        ),
        #10233f;
    box-shadow: 0 24px 55px rgba(16, 35, 63, 0.14);
}

.pb-single-pool-card__content {
    display: flex;
    flex-direction: column;
    padding: 34px;
    color: #fff;
}

.pb-single-pool-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-single-pool-card__status,
.pb-single-pool-card__type {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pb-single-pool-card__status {
    background: #facc15;
    color: #10233f;
}

.pb-single-pool-card__type {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.pb-single-pool-card__main {
    max-width: 680px;
    margin: auto 0;
    padding: 30px 0;
}

.pb-single-pool-card__main .eyebrow {
    color: #91d3ff;
}

.pb-single-pool-card__main h2 {
    margin: 7px 0 8px;
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 4.4rem);
    line-height: 1;
}

.pb-single-pool-card__meta {
    margin: 0 0 18px;
    color: #facc15;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pb-single-pool-card__description {
    max-width: 570px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.65;
}

.pb-single-pool-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pb-single-pool-card__actions .button {
    background: #facc15;
    color: #10233f;
}

.pb-single-pool-card__actions .button.secondary {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.pb-single-pool-card__visual {
    display: grid;
    place-items: center;
    align-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.01)
        );
    color: #fff;
    text-align: center;
}

.pb-single-pool-card__visual-mark {
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    margin-bottom: 18px;
    border: 2px solid rgba(250, 204, 21, 0.45);
    border-radius: 33px;
    background: rgba(250, 204, 21, 0.12);
    color: #facc15;
    font-size: 3.3rem;
    font-weight: 950;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.pb-single-pool-card__visual strong {
    font-size: 1.08rem;
}

.pb-single-pool-card__visual small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.55);
}

.pb-single-pool-help {
    padding: 26px;
    border: 1px solid rgba(16, 35, 63, 0.08);
    border-radius: 22px;
    background: #fff;
}

.pb-single-pool-help h2 {
    margin: 4px 0 20px;
    color: #10233f;
}

.pb-single-pool-help__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pb-single-pool-help__steps article {
    display: flex;
    gap: 13px;
    padding: 17px;
    border-radius: 16px;
    background: #f5f7fa;
}

.pb-single-pool-help__steps article > span {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #10233f;
    color: #facc15;
    font-size: 0.75rem;
    font-weight: 900;
}

.pb-single-pool-help__steps strong {
    color: #10233f;
}

.pb-single-pool-help__steps p {
    margin: 5px 0 0;
    color: #718096;
    font-size: 0.78rem;
    line-height: 1.5;
}

@media (max-width: 850px) {
    .pb-single-pool-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pb-single-pool-card__content {
        min-height: 430px;
        padding: 25px;
    }

    .pb-single-pool-card__visual {
        display: none;
    }

    .pb-single-pool-help__steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pb-single-pool-welcome {
        display: grid;
        align-items: start;
    }

    .pb-single-pool-welcome h1 {
        font-size: 2rem;
    }

    .pb-single-pool-admin-link {
        justify-self: start;
    }

    .pb-single-pool-card {
        border-radius: 21px;
    }

    .pb-single-pool-card__content {
        min-height: 400px;
        padding: 21px;
    }

    .pb-single-pool-card__main {
        padding: 25px 0;
    }

    .pb-single-pool-card__main h2 {
        font-size: 2.35rem;
    }

    .pb-single-pool-card__actions {
        display: grid;
    }

    .pb-single-pool-card__actions .button {
        width: 100%;
    }

    .pb-single-pool-help {
        padding: 19px;
    }
}


/* =========================================================
   Top 10 · preseason en officiële seizoensstatus
   ========================================================= */

.pb-top10-season-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;

    padding: 20px;
    border-radius: 22px;
    overflow: hidden;

    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(255, 255, 255, 0.16),
            transparent 32%
        ),
        linear-gradient(135deg, #10233f, #1d3a62);

    box-shadow: 0 16px 36px rgba(16, 35, 63, 0.18);
}

.pb-top10-season-banner.is-preseason {
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(250, 204, 21, 0.25),
            transparent 35%
        ),
        linear-gradient(135deg, #10233f, #243f64);
}

.pb-top10-season-banner.is-live {
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(143, 208, 255, 0.24),
            transparent 35%
        ),
        linear-gradient(135deg, #10233f, #115e59);
}

.pb-top10-season-banner__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.1);

    font-size: 1.45rem;
}

.pb-top10-season-banner__copy span {
    display: block;
    margin-bottom: 6px;

    color: #facc15;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.11em;
}

.pb-top10-season-banner__copy h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.pb-top10-season-banner__copy p {
    max-width: 700px;
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    line-height: 1.5;
}

.pb-top10-season-banner__date {
    min-width: 132px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.09);
    text-align: center;
}

.pb-top10-season-banner__date small,
.pb-top10-season-banner__date strong,
.pb-top10-season-banner__date span {
    display: block;
}

.pb-top10-season-banner__date small {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pb-top10-season-banner__date strong {
    color: #ffffff;
    font-size: 0.94rem;
}

.pb-top10-season-banner__date span {
    margin-top: 2px;
    color: #facc15;
    font-size: 0.78rem;
    font-weight: 900;
}

.pb-top10-preseason-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 4px 7px;
    border-radius: 999px;

    background: #fff3bf;
    color: #7a4d00;

    font-size: 0.62rem;
    line-height: 1;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.pb-top10-standing-note {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    padding: 13px 14px;

    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 14px;
    background: rgba(255, 247, 214, 0.72);
}

.pb-top10-standing-note strong {
    color: #6b4500;
    font-size: 0.86rem;
}

.pb-top10-standing-note span {
    color: #806225;
    font-size: 0.78rem;
    line-height: 1.45;
}

@media (max-width: 680px) {
    .pb-top10-season-banner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 13px;
        padding: 17px;
        border-radius: 18px;
    }

    .pb-top10-season-banner__icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 1.15rem;
    }

    .pb-top10-season-banner__copy h2 {
        font-size: 1.08rem;
    }

    .pb-top10-season-banner__copy p {
        font-size: 0.82rem;
    }

    .pb-top10-season-banner__date {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        min-width: 0;
        padding: 10px 12px;
    }

    .pb-top10-season-banner__date small,
    .pb-top10-season-banner__date strong,
    .pb-top10-season-banner__date span {
        display: inline;
        margin: 0;
    }

    .pb-top10-preseason-pill {
        margin-top: 5px;
        margin-left: 0;
    }
}