:root {
    --font-display: "Bricolage Grotesque", sans-serif;
    --font-body: "Karla", sans-serif;
    --ink: #0a0b09;
    --muted: #6a6f66;
    --surface: #eceee8;
    --surface-2: #e1e4dc;
    --paper: #f7f8f4;
    --accent: #d6ff1a;
    --accent-hot: #e7ff5c;
    --on-accent: #0a0b09;
    --line: color-mix(in srgb, var(--ink) 10%, transparent);
    --danger: #d6453d;
    --ok: #1f8a55;
    --radius: 0.85rem;
    --shadow: 0 24px 60px color-mix(in srgb, var(--ink) 10%, transparent);
}

html.theme-black {
    color-scheme: dark;
    --ink: #f4f6ef;
    --muted: #9aa194;
    --surface: #161814;
    --surface-2: #1e211c;
    --paper: #121410;
    --line: color-mix(in srgb, #fff 12%, transparent);
    --shadow: 0 24px 60px rgb(0 0 0 / 45%);
    --on-accent: #0a0b09;
}

@media (prefers-color-scheme: dark) {
    html.theme-system {
        color-scheme: dark;
        --ink: #f4f6ef;
        --muted: #9aa194;
        --surface: #161814;
        --surface-2: #1e211c;
        --paper: #121410;
        --line: color-mix(in srgb, #fff 12%, transparent);
        --shadow: 0 24px 60px rgb(0 0 0 / 45%);
        --on-accent: #0a0b09;
    }
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
        radial-gradient(700px 420px at 0% 30%, color-mix(in srgb, #9bb7a6 18%, transparent), transparent 50%),
        linear-gradient(180deg, #f2f4ee, var(--surface));
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html.theme-black,
html.theme-black body {
    background:
        radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
        radial-gradient(700px 420px at 0% 30%, color-mix(in srgb, #9bb7a6 8%, transparent), transparent 50%),
        linear-gradient(180deg, #141612, var(--paper));
}

@media (prefers-color-scheme: dark) {
    html.theme-system,
    html.theme-system body {
        background:
            radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
            radial-gradient(700px 420px at 0% 30%, color-mix(in srgb, #9bb7a6 8%, transparent), transparent 50%),
            linear-gradient(180deg, #141612, var(--paper));
    }
}

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.045em;
    line-height: 1.05;
}

h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    margin: 0 0 1.1rem;
}

h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
    letter-spacing: -0.03em;
}

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

.btn {
    font-family: var(--font-body);
    font-weight: 700;
    border-radius: 0.8rem;
    border: none;
    padding: 0.7rem 1.2rem;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease, filter 180ms ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary,
.btn-success {
    color: var(--on-accent) !important;
    background: var(--accent) !important;
    border-color: transparent !important;
}

.btn-primary:hover,
.btn-success:hover { background: var(--accent-hot) !important; }

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light {
    color: var(--ink) !important;
    background: transparent !important;
    border: 1.5px solid var(--line) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover { background: var(--surface-2) !important; }

.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.85rem; }

.btn-warning { background: #ffd166 !important; color: var(--ink) !important; }
.btn-secondary { background: var(--ink) !important; color: #f7f9f4 !important; }
.btn-link { color: var(--ink); font-weight: 600; }

.form-control,
.form-select,
.input-group .form-control {
    border-radius: 0.75rem !important;
    border: 1.5px solid var(--line) !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    padding: 0.7rem 0.9rem;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--ink)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.form-label { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.35rem; }

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border-radius: 0.3rem;
    border: 1.5px solid var(--line);
}

.form-check-input:checked {
    background-color: var(--ink);
    border-color: var(--ink);
}

.alert {
    border: none;
    border-radius: var(--radius);
    padding: 0.9rem 1.05rem;
    font-weight: 600;
}

.alert-info,
.alert-success {
    background: color-mix(in srgb, var(--accent) 26%, var(--paper));
    color: var(--ink);
}

.alert-danger {
    background: color-mix(in srgb, var(--danger) 12%, var(--paper));
    color: var(--danger);
}

.table {
    --bs-table-bg: transparent;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table thead th {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 0.65rem;
}

.table td {
    padding: 0.9rem 0.65rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.list-group {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.list-group-item {
    background: var(--paper);
    border-color: var(--line);
    padding: 1rem 1.1rem;
}

.nav-tabs {
    border: none;
    gap: 0.35rem;
    margin-bottom: 1.25rem !important;
}

.nav-tabs .nav-link {
    border: none !important;
    border-radius: 0.7rem !important;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    padding: 0.55rem 0.95rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    background: var(--ink) !important;
    color: #f7f9f4 !important;
}

.panel {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: 1.35rem 1.4rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
}

.page-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.score-input {
    display: inline-block;
    width: 2.35rem;
    min-width: 2.35rem;
    max-width: 2.35rem;
    height: 1.55rem;
    padding: 0.1rem 0.15rem;
    margin: 0;
    border: 1.5px solid var(--line);
    border-radius: 0.45rem;
    background: var(--paper);
    color: var(--ink);
    text-align: center;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    box-sizing: border-box;
    vertical-align: middle;
    -moz-appearance: textfield;
}

.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.match-list {
    font-size: 0.58rem;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.match-list.table > :not(caption) > * > * {
    box-shadow: none;
}

.match-list thead th {
    font-size: 0.49rem;
    padding: 0.26rem 0.26rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: center;
}

.match-list td {
    padding: 0.22rem 0.26rem;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

.match-list__fixture {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    white-space: nowrap;
    max-width: none;
}

.match-cell--fixture {
    min-width: 22rem;
}

.fx {
    display: grid;
    grid-template-columns: minmax(5rem, 1fr) 22px 2.35rem 22px minmax(5rem, 1fr);
    align-items: center;
    column-gap: 0.28rem;
    width: min(34rem, 100%);
    margin: 0 auto;
}

.fx__name {
    display: flex;
    align-items: baseline;
    min-width: 0;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
}

.fx__name--home { justify-content: flex-end; }
.fx__name--away { justify-content: flex-start; }

.fx__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.fx__name.is-win { color: var(--ok); }
.fx__name.is-lose { color: var(--danger); }

.fx .crest {
    justify-self: center;
}

.fx__score {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    position: relative;
    min-height: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.95em;
    letter-spacing: -0.03em;
}

.fx__n {
    min-width: 0.7rem;
    text-align: center;
}

.fx__score--live {
    color: var(--danger);
}

.fx__score--live em {
    position: absolute;
    left: 50%;
    top: -0.85em;
    translate: -50% 0;
    font-style: normal;
    font-size: 0.52em;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.country-with-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.country-flag {
    width: 1.35rem;
    height: 0.95rem;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
}

.match-list .fixture-club,
.match-list .league-with-logo {
    gap: 0.3rem;
    justify-content: center;
}

.match-list .crest,
.match-list .crest--sm,
.match-list .crest--md {
    width: 24px;
    height: 24px;
}

.match-list .crest--fallback,
.match-list .crest--md.crest--fallback {
    font-size: 0.55rem;
    line-height: 24px;
}

.match-list .score-input {
    width: 1.76rem;
    min-width: 1.76rem;
    max-width: 1.76rem;
    height: 1.16rem;
    padding: 0.08rem 0.11rem;
    font-size: 0.6rem;
    border-radius: 0.34rem;
}

.match-sep {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 700;
    line-height: 1;
    align-self: center;
}

.match-list__score {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}

.match-list__score > * {
    flex: 0 0 auto;
}

.ai-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.55rem;
    padding: 0.08rem 0.38rem;
    border-radius: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent) 22%, var(--paper));
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

button.ai-score {
    cursor: pointer;
}

button.ai-score:hover {
    background: color-mix(in srgb, var(--accent) 40%, var(--paper));
}

.ai-score--thin {
    opacity: 0.72;
}

.ai-score--empty {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    font-weight: 600;
}

.ai-score--hit {
    background: color-mix(in srgb, var(--ok, #2d6a4f) 28%, var(--paper));
    border-color: color-mix(in srgb, var(--ok, #2d6a4f) 50%, var(--line));
}

.match-list__kickoff {
    width: 10.5rem;
    max-width: 10.5rem;
    font-size: 0.78rem !important;
    padding: 0.12rem 0.25rem !important;
    height: 1.55rem !important;
    min-height: 1.55rem !important;
}

.match-list .btn-sm {
    padding: 0.14rem 0.34rem;
    font-size: 0.56rem;
}

.match-list .status-pill {
    font-size: 0.47rem;
    padding: 0.09rem 0.3rem;
    white-space: nowrap;
    border-radius: 0.34rem;
}

.match-list .match-cell--date,
.match-list .match-cell--time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .match-list { font-size: 0.54rem; }
    .match-list .score-input { width: 1.58rem; min-width: 1.58rem; max-width: 1.58rem; height: 1.09rem; font-size: 0.54rem; }
}

.calendar-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.05rem;
    margin-bottom: 1.25rem;
    border-radius: 1.1rem;
    border: 1px solid var(--line);
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
        var(--paper);
}

.calendar-bar__round {
    min-width: 16rem;
    max-width: 28rem;
}

.admin-matches-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    position: sticky;
    top: calc(4.75rem + env(safe-area-inset-top, 0px));
    z-index: 25;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 8%, transparent);
}

.admin-matches-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.7rem;
}

.admin-matches-bar .form-label {
    margin: 0;
}

.admin-matches-bar .form-control,
.admin-matches-bar .form-select {
    width: auto;
    max-width: 16rem;
}

.match-list--admin.table {
    font-size: 0.8rem;
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.match-list--admin thead th {
    font-size: 0.62rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
}

.match-list--admin td {
    text-align: left;
    padding: 0.32rem 0.45rem;
    white-space: nowrap;
    vertical-align: middle;
}

.match-list--admin th:nth-child(1),
.match-list--admin td:nth-child(1) { width: 2.8rem; }

.match-list--admin th:nth-child(2),
.match-list--admin td:nth-child(2) { width: 10.2rem; }

.match-list--admin th:nth-child(5),
.match-list--admin td:nth-child(5) { width: 5.4rem; }

.match-list--admin .match-cell--ai {
    width: 4.4rem;
    text-align: center;
}

.match-list--admin .match-cell--admin-actions { width: 8.2rem; }

.match-list--admin .match-cell--league {
    width: 11rem;
    max-width: 11rem;
    overflow: hidden;
}

.match-list--admin .match-cell--league .league-with-logo {
    display: flex;
    justify-content: flex-start;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.match-list--admin .match-cell--league .league-with-logo > span:not(.crest) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-list--admin .match-cell--fixture {
    width: auto;
    white-space: nowrap;
}

.admin-fx {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: max-content;
}

.admin-fx__side {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    flex: 0 0 auto;
}

.admin-fx__side--home { justify-content: flex-end; }
.admin-fx__side--away { justify-content: flex-start; }

.admin-fx__name {
    font-weight: 650;
    font-size: 0.78rem;
    line-height: 1.15;
    overflow: visible;
    white-space: nowrap;
}

.admin-fx__vs {
    color: var(--muted);
    font-weight: 800;
    line-height: 1;
    font-size: 0.72rem;
}

.admin-fx .crest {
    width: 1.28rem;
    height: 1.28rem;
    flex-shrink: 0;
}

.match-list--admin .match-cell--fixture .badge {
    display: inline-block;
    margin-top: 0.2rem;
}

.match-list--admin .match-list__kickoff {
    width: 9.6rem;
    max-width: 9.6rem;
    font-size: 0.72rem !important;
    padding: 0.18rem 0.28rem !important;
    height: 1.85rem !important;
    min-height: 1.85rem !important;
}

.match-list--admin .btn-sm {
    padding: 0.22rem 0.55rem;
    font-size: 0.75rem;
}

.match-list--admin .score-input {
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    height: 1.75rem;
    font-size: 0.85rem;
    border-radius: 0.4rem;
}

.predictions-layout {
    display: block;
}

.predictions-layout--with-table {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.predictions-layout--with-table .predictions-layout__main {
    flex: 1 1 0;
    min-width: min(100%, 28rem);
}

.mini-league-table {
    flex: 0 0 auto;
    width: min(100%, 22rem);
    position: sticky;
    top: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 0.45rem 0.4rem 0.35rem;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

.mini-league-table__head {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0 0.2rem 0.28rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.2rem;
}

.mini-league-table__head strong {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.mini-league-table__league {
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.2;
}

.mini-league-table__scroll {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
}

.mini-league-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.58rem;
    line-height: 1.05;
}

.mini-league-table thead th {
    background: var(--paper);
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--muted);
    padding: 0.1rem 0.12rem;
    white-space: nowrap;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.mini-league-table thead th:nth-child(2) {
    text-align: left;
}

.mini-league-table tbody td {
    padding: 0.06rem 0.12rem;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    vertical-align: middle;
}

.mini-league-table__row--hot td {
    background: color-mix(in srgb, #ff6b6b 28%, #fff) !important;
    transition: background 120ms ease;
}

.match-list__row {
    cursor: default;
}

.match-list tbody tr.match-list__row:hover > * {
    background: color-mix(in srgb, var(--accent) 32%, var(--paper)) !important;
    box-shadow: none !important;
    border-color: color-mix(in srgb, var(--accent) 32%, var(--paper));
}

.mini-league-table__pos {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    width: 1.2rem;
}

.mini-league-table__team {
    text-align: left !important;
    max-width: 5.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    white-space: nowrap;
}

.mini-league-table .fixture-club {
    gap: 0.22rem;
}

.mini-league-table .crest,
.mini-league-table .crest--sm,
.mini-league-table .crest--md {
    width: 16px;
    height: 16px;
}

.mini-league-table .crest--fallback {
    font-size: 0.48rem;
    line-height: 16px;
}

.mini-league-table__pts {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mini-league-table__goals {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.mini-league-table__form {
    vertical-align: middle;
}

.form-dots {
    display: inline-flex;
    gap: 0.1rem;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

.form-dots__empty {
    color: var(--muted);
    line-height: 1;
    font-weight: 600;
}

.form-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.2rem;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
}

.mini-league-table .form-dot {
    width: 0.62rem;
    height: 0.62rem;
    font-size: 0.42rem;
    border-radius: 0.14rem;
}

.mini-league-table .form-dots {
    gap: 0.06rem;
}

.form-dot--W {
    background: color-mix(in srgb, #2f9e44 22%, transparent);
    color: #1b6b2a;
}

.form-dot--D {
    background: color-mix(in srgb, #868e96 18%, transparent);
    color: #495057;
}

.form-dot--L {
    background: color-mix(in srgb, #e03131 18%, transparent);
    color: #c92a2a;
}

.mini-league-table__note {
    margin: 0.25rem 0.15rem 0;
    font-size: 0.55rem;
    color: var(--muted);
    line-height: 1.2;
}

.mini-league-table__empty {
    margin: 0.5rem 0.25rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.pred-side-tabs {
    margin-top: 1rem;
}

.pred-side-tabs__nav {
    margin-bottom: 0 !important;
    gap: 0.2rem;
}

.pred-side-tabs__nav .nav-link {
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
}

.pred-side-tabs__body {
    border: 1px solid var(--line);
    border-radius: 0 1rem 1rem 1rem;
    background: var(--paper);
    padding: 0.45rem 0.5rem 0.35rem;
}

.pred-side-tabs__empty {
    margin: 0.45rem 0.2rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.pred-side-tabs .round-player-table {
    margin-top: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0.15rem 0.05rem 0;
}

.pred-side-tabs .mini-league-table--in-tabs {
    position: static;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.1rem 0 0;
    background: transparent;
}

.round-player-table {
    margin-top: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 0.55rem 0.55rem 0.4rem;
}

.round-player-table__head {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0 0.15rem 0.35rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.25rem;
}

.round-player-table__head strong {
    font-size: 0.88rem;
}

.round-player-table__head span {
    font-size: 0.68rem;
    color: var(--muted);
}

.round-player-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.round-player-table thead th {
    font-weight: 600;
    text-transform: lowercase;
    color: var(--muted);
    padding: 0.2rem 0.25rem;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.round-player-table thead th:nth-child(2) {
    text-align: left;
}

.round-player-table tbody td {
    padding: 0.22rem 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    text-align: center;
    vertical-align: middle;
}

.round-player-table__pos {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    width: 1.6rem;
}

.round-player-table__name {
    text-align: left !important;
    font-weight: 800;
}

.round-player-table__pts {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.round-player-table__bonus {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.round-player-table__name--x4,
.round-player-table__name--x3 {
    color: #1b8a3a;
}

.round-player-table__name--x2 {
    color: #1c7ed6;
}

.round-player-table__name--x1 {
    color: #868e96;
}

.round-player-table__name--minus {
    color: #c92a2a;
}

.round-player-table tr.is-me td {
    background: color-mix(in srgb, var(--accent, #7c5cff) 12%, transparent);
}

.round-player-table__note {
    margin: 0.35rem 0.15rem 0;
    font-size: 0.62rem;
    color: var(--muted);
    line-height: 1.3;
}

@media (max-width: 1100px) {
    .predictions-layout--with-table {
        flex-direction: column;
    }

    .mini-league-table {
        position: static;
        width: 100%;
    }
}

.calendar-bar .form-label {
    margin: 0 0.15rem 0 0;
    color: var(--muted);
}

.rule-item {
    margin-bottom: 0.85rem;
}

fieldset.rules-editor {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

fieldset.rules-editor:disabled {
    opacity: 0.78;
}

.rule-item .form-check {
    margin-bottom: 0.15rem;
}

.rule-item__desc {
    margin: 0 0 0 1.55rem;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

.rule-item__nested {
    margin: 0.45rem 0 0 1.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.rule-item__nested .rule-item__desc {
    margin-left: 1.55rem;
}

.rules-base {
    margin: 0 0 1.1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent) 22%, var(--paper));
}

.rules-base strong {
    display: block;
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
}

.rules-base p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--ink);
}

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #f4f6f1;
    background: #070807;
}

.hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 75% 45%, rgba(214, 255, 26, 0.18), transparent 60%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(90, 140, 120, 0.2), transparent 55%),
        linear-gradient(160deg, #050605 0%, #10140f 48%, #060806 100%);
}

.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at 60% 50%, #000 20%, transparent 75%);
    animation: gridShift 22s linear infinite;
    pointer-events: none;
}

.hero__orb {
    position: absolute;
    width: min(55vw, 560px);
    height: min(55vw, 560px);
    right: 4%;
    top: 50%;
    translate: 0 -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214,255,26,0.28), transparent 68%);
    filter: blur(8px);
    animation: orbPulse 6s ease-in-out infinite;
    pointer-events: none;
}

.hero__stage {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 2rem;
    padding: 6.5rem 0 3rem;
}

.hero__copy { max-width: 34rem; }

.hero__since {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 80%, #fff);
    animation: riseIn 700ms cubic-bezier(.2,.8,.2,1) both;
}

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

.hero__brand {
    margin: 0 0 1.1rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4.8rem, 13vw, 8.2rem);
    line-height: 0.82;
    letter-spacing: -0.07em;
    color: #f7f9f2;
    animation: riseIn 750ms 60ms cubic-bezier(.2,.8,.2,1) both;
}

.hero__title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 650;
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: color-mix(in srgb, #f7f9f2 88%, transparent);
    animation: riseIn 750ms 120ms cubic-bezier(.2,.8,.2,1) both;
}

.hero__lead {
    margin: 0 0 1.7rem;
    max-width: 28rem;
    color: color-mix(in srgb, #f7f9f2 62%, transparent);
    font-size: 1.05rem;
    animation: riseIn 750ms 180ms cubic-bezier(.2,.8,.2,1) both;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    animation: riseIn 750ms 240ms cubic-bezier(.2,.8,.2,1) both;
}

.hero__contact {
    margin: 1.15rem 0 0;
    color: color-mix(in srgb, #f7f9f2 62%, transparent);
    font-size: 0.95rem;
    animation: riseIn 750ms 280ms cubic-bezier(.2,.8,.2,1) both;
}

.hero__contact a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    padding: 0.9rem 1.4rem;
    border-radius: 0.85rem;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease, border-color 180ms ease;
}

.hero__btn:hover { transform: translateY(-2px); }

.hero__btn--primary {
    background: var(--accent);
    color: var(--ink);
}

.hero__btn--primary:hover { background: var(--accent-hot); }

.hero__btn--ghost {
    color: #f7f9f2;
    border: 1.5px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, #fff 4%, transparent);
}

.hero__btn--ghost:hover {
    background: color-mix(in srgb, #fff 10%, transparent);
}

.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    animation: floatLogo 7s ease-in-out infinite;
}

.hero__logo {
    width: min(420px, 72%);
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45));
}

.hero__ring {
    position: absolute;
    width: min(480px, 86%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    animation: ringSpin 18s linear infinite;
}

.hero__ring::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, #fff 18%, transparent);
}

@keyframes riseIn {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gridShift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 72px, 72px 0; }
}

@keyframes orbPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.08); }
}

@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes ringSpin {
    to { transform: rotate(360deg); }
}

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); }

.tip-edit-panel {
    max-width: 720px;
}

.tip-note {
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    padding: 0.85rem 0;
}

.tip-note__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.tip-note__shots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tip-note__thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}

.player-pick-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.player-pick-list__btn {
    min-width: 8rem;
}

.player-tip-card.btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    cursor: default;
    font-weight: 700;
}

.player-tip-card__name {
    line-height: 1.2;
}

.player-tip-card__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.match-list__others td {
    text-align: left;
    white-space: normal;
    vertical-align: top;
    padding: 0.75rem 0.85rem 0.85rem;
    background: color-mix(in srgb, var(--ink) 4%, var(--paper));
}

.my-team-star {
    color: #2d6a4f;
    font-size: 0.85em;
    margin: 0 0.2rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.crest {
    display: inline-block;
    vertical-align: -0.2em;
    object-fit: contain;
    flex: 0 0 auto;
}

.crest--sm {
    width: 24px;
    height: 24px;
}

.crest--md {
    width: 32px;
    height: 32px;
}

.crest--lg {
    width: 36px;
    height: 36px;
}

.crest--fallback {
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.02em;
}

.crest--md.crest--fallback {
    font-size: 0.72rem;
    line-height: 32px;
}

.crest--lg.crest--fallback {
    font-size: 0.78rem;
    line-height: 36px;
}

.fixture-club {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.league-with-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tip-player-detail {
    max-width: 28rem;
}

.season-pick-table .form-select-sm {
    min-width: 12rem;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tip-mark {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    color: #111;
    background: transparent;
    vertical-align: middle;
}

.tip-mark--z {
    letter-spacing: 0.02em;
    background: #d8f3dc;
    border-color: #2d6a4f;
    color: #1b4332;
}

.tip-mark--x2,
.tip-mark--m {
    letter-spacing: 0.02em;
    background: #fff3bf;
    border-color: #e67700;
    color: #9c3d00;
}

.stats-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    margin: 0 0 1rem;
}

.stats-table {
    min-width: max-content;
}

.stats-table th,
.stats-table td {
    white-space: nowrap;
}

.stats-whistle {
    display: inline-block;
    width: 0.92rem;
    height: 0.92rem;
    margin-left: 0.22rem;
    vertical-align: -0.12em;
    color: #c9a227;
}

.stats-whistle svg {
    display: block;
    width: 100%;
    height: 100%;
}

.stats-section--teams {
    padding: 0.85rem 0.9rem;
}

.stats-section--teams .stats-section__title {
    font-size: 1.2rem;
    margin-bottom: 0.65rem;
}

.stats-table--teams {
    min-width: 0;
    width: 100%;
    margin-bottom: 0;
    font-size: 0.78rem;
}

.stats-table--teams th,
.stats-table--teams td {
    padding: 0.28rem 0.28rem;
}

.stats-table--teams th:not(:first-child),
.stats-table--teams td:not(:first-child) {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.stats-table--teams .stats-team-cell {
    white-space: normal;
}

.stats-team-cell__name {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.stats-team-cell__league {
    display: block;
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.25;
    font-weight: 400;
}

.winnings-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.winnings-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    background: var(--paper);
}

.winnings-table th,
.winnings-table td {
    border: 1px solid var(--ink);
    padding: 0.28rem 0.22rem;
    vertical-align: middle;
}

.winnings-table thead tr:first-child th {
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    padding: 0.45rem 0.4rem;
}

.winnings-table__month {
    min-width: 8.5rem;
    background: color-mix(in srgb, var(--paper) 88%, var(--accent));
    white-space: nowrap;
}

.winnings-table__stake {
    color: #c62828;
    border-right-style: dashed !important;
    width: 2.15rem;
}

.winnings-table__prize {
    color: #2e7d32;
    width: 2.4rem;
}

.winnings-table__net {
    font-size: 0.9rem;
}

.winnings-table__net--pos {
    background: #c8e6c9;
    color: var(--ink);
}

.winnings-table__net--neg {
    background: #ffccbc;
    color: var(--ink);
}

html.theme-black .winnings-table__stake {
    color: #ff8a80;
}

html.theme-black .winnings-table__prize {
    color: #69f0ae;
}

html.theme-black .winnings-table__net--pos {
    background: #1b5e20;
    color: #e8f5e9;
}

html.theme-black .winnings-table__net--neg {
    background: #bf360c;
    color: #fbe9e7;
}

@media (prefers-color-scheme: dark) {
    html.theme-system .winnings-table__stake { color: #ff8a80; }
    html.theme-system .winnings-table__prize { color: #69f0ae; }
    html.theme-system .winnings-table__net--pos { background: #1b5e20; color: #e8f5e9; }
    html.theme-system .winnings-table__net--neg { background: #bf360c; color: #fbe9e7; }
}

.stats-row--top1 { background: color-mix(in srgb, var(--accent) 22%, white) !important; }
.stats-row--top2 { background: color-mix(in srgb, var(--accent) 12%, white) !important; }
.stats-row--top3 { background: color-mix(in srgb, var(--ink) 6%, white) !important; }

.stats-table tbody tr.is-me > *,
.table tbody tr.is-me > * {
    --bs-table-bg-type: color-mix(in srgb, var(--accent) 40%, white);
    --bs-table-accent-bg: color-mix(in srgb, var(--accent) 40%, white);
    background-color: color-mix(in srgb, var(--accent) 40%, white) !important;
    font-weight: 700;
}

.stats-table tbody tr.is-me,
.table tbody tr.is-me {
    background: color-mix(in srgb, var(--accent) 40%, white) !important;
}

.stats-table tbody tr.is-me td:first-child,
.table tbody tr.is-me td:first-child {
    box-shadow: inset 4px 0 0 var(--ink);
    font-weight: 800;
}

@media (max-width: 960px) {
    .hero__stage {
        grid-template-columns: 1fr;
        padding-top: 6rem;
        gap: 1.5rem;
    }

    .hero__visual { order: -1; }
    .hero__logo { width: min(260px, 58%); }
    .hero__brand { font-size: clamp(3.8rem, 18vw, 5.5rem); }
}

@media (max-width: 640px) {
    .calendar-bar { align-items: center; }
}

.import-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.import-file {
    font-weight: 700;
    color: var(--ink);
}

.import-progress {
    position: relative;
    height: 1.35rem;
    border-radius: 0.65rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    overflow: hidden;
}

.import-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hot));
    transition: width 160ms ease;
}

.import-progress__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink);
}

.status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 0.45rem;
}

.status-pill--open {
    background: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--ink);
}

.status-pill--locked {
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    color: var(--muted);
}

.status-pill--live {
    background: var(--danger);
    color: #fff;
}

.live-score {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--danger);
}

.live-score em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Globalnie — nie w scoped CSS (inaczej display:none nie działa i pasek „Wystąpił błąd” wisi zawsze) */
#blazor-error-ui {
    background: #1a1c1f;
    color: #f4f6f1;
    bottom: 0;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.85rem;
    top: 0.55rem;
}

#blazor-error-ui .reload {
    color: var(--accent-hot, #c8f542);
}

.dash {
    display: grid;
    gap: 1.35rem;
    animation: riseIn 420ms cubic-bezier(.2,.8,.2,1) both;
}

.dash-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    background:
        radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%),
        linear-gradient(165deg, var(--ink), #171a14 58%, #22261c);
    color: #f4f6ef;
    border-radius: 1.5rem;
    padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.2rem);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.dash-hero::after {
    content: "";
    position: absolute;
    inset: auto -4rem -6rem auto;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    border: 18px solid color-mix(in srgb, var(--accent) 18%, transparent);
    pointer-events: none;
}

.dash-hero .page-kicker { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.dash-hero h1 { color: #fff; margin: 0 0 0.55rem; }
.dash-hero__lead { color: color-mix(in srgb, #fff 72%, transparent); margin: 0 0 0.45rem; max-width: 36rem; }
.dash-hero__lead strong { color: var(--accent); font-weight: 800; }
.dash-hero__month {
    color: color-mix(in srgb, #fff 68%, transparent);
    margin: 0 0 0.45rem;
    max-width: 36rem;
}
.dash-hero__month strong { color: var(--accent); font-weight: 800; }

.dash-live-note {
    margin: 0 0 0.95rem;
    max-width: 38rem;
    color: color-mix(in srgb, #fff 82%, transparent);
    font-size: 0.92rem;
    font-weight: 600;
}

.dash-odds__label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 70%, #fff);
}

.dash-odds {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin: 0 0 1.15rem;
    padding: 0;
}

.dash-odds li {
    min-width: 3.35rem;
    padding: 0.32rem 0.4rem 0.38rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, #fff 8%, transparent);
    text-align: center;
    color: #f4f6ef;
}

.dash-odds li.is-hot {
    background: var(--accent);
    color: var(--ink);
}

.dash-odds span {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0.72;
}

.dash-odds strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}
.dash-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.dash-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    padding: 0.9rem 1.4rem;
    border-radius: 0.85rem;
    color: #f7f9f2;
    border: 1.5px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, #fff 4%, transparent);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
}

.dash-btn-ghost:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, #fff 10%, transparent);
}

.dash-rank {
    position: relative;
    z-index: 1;
    min-width: 8.5rem;
    text-align: center;
    background: var(--accent);
    color: var(--ink);
    border-radius: 1.25rem;
    padding: 1.1rem 1.25rem 1rem;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 35%, transparent);
}

.dash-rank span {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dash-rank strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 8vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.9;
    margin: 0.15rem 0 0.2rem;
}

.dash-rank em {
    font-style: normal;
    font-weight: 800;
    font-size: 0.92rem;
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.dash-kpi {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    padding: 1rem 1.1rem 0.95rem;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent);
}

.dash-kpi span {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.dash-kpi strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}

.dash-kpi em {
    display: block;
    margin-top: 0.35rem;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--muted);
}

.dash-kpi--hot {
    background: color-mix(in srgb, var(--accent) 28%, var(--paper));
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.dash-streak {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    background: var(--ink);
    color: var(--accent);
    font-weight: 800;
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.8fr);
    gap: 0.95rem;
}

.dash-panel {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: 1.15rem 1.2rem 1.05rem;
    box-shadow: var(--shadow);
}

.dash-panel--wide { min-width: 0; }
.dash-panel--span { grid-column: 1 / -1; }

.dash-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.dash-panel__head h3 { margin: 0; }
.dash-panel__head a {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--muted);
    text-decoration: none;
}

.dash-panel__head a:hover { color: var(--ink); }
.dash-empty { margin: 0; }

.dash-fixtures {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.dash-fix {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.dash-fix--open { box-shadow: inset 3px 0 0 var(--accent); }
.dash-fix--done { opacity: 0.92; }

.dash-fix__when {
    display: grid;
    text-align: center;
    line-height: 1.15;
}

.dash-fix__when strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.04em;
}

.dash-fix__when span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}

.dash-fix__teams { min-width: 0; }
.dash-fix__teams .fx--dash {
    width: 100%;
    grid-template-columns: minmax(3.2rem, 1fr) 28px 2.6rem 28px minmax(3.2rem, 1fr);
    font-size: 0.92rem;
}
.dash-fix__teams small {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.dash-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    background: var(--surface-2);
    text-decoration: none;
}

.dash-pill--ok {
    background: color-mix(in srgb, var(--accent) 55%, white);
    color: var(--ink);
}

.dash-pill--todo {
    background: var(--ink);
    color: var(--accent);
}

.dash-pill--live {
    background: var(--danger);
    color: #fff;
}

.dash-fix__tip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.28rem;
}

.dash-table {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.28rem;
}

.dash-table li {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.42rem 0.55rem;
    border-radius: 0.7rem;
}

.dash-table li.is-me {
    background: color-mix(in srgb, var(--accent) 32%, white);
    font-weight: 800;
}

.dash-table__rank {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--muted);
}

.dash-table li.is-me .dash-table__rank { color: var(--ink); }

.dash-table__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-table__pts { font-weight: 800; }

.dash-table-block + .dash-table-block {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.dash-table__name small {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-month-select {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: var(--paper);
    padding: 0.28rem 0.5rem;
    max-width: 14rem;
}

.dash-recent {
    width: 100%;
}
.dash-recent th,
.dash-recent td {
    vertical-align: middle;
}
.dash-recent th:first-child,
.dash-recent td:first-child {
    text-align: left;
}
.dash-recent th:nth-child(n+2),
.dash-recent td:nth-child(n+2) {
    text-align: center;
    white-space: nowrap;
    width: 1%;
}
.dash-recent__match {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
}
.dash-recent__clubs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.dash-recent__clubs .fixture-club {
    font-weight: 700;
}
.dash-recent__clubs .crest {
    vertical-align: middle;
}
.dash-recent__vs {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 800;
    line-height: 1;
    font-size: 0.95rem;
}
.dash-recent__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.2;
}
.dash-recent tbody tr.is-exact { background: color-mix(in srgb, var(--accent) 18%, white); }
.dash-recent tbody tr.is-out { background: color-mix(in srgb, var(--ok) 10%, white); }
.dash-recent tbody tr.is-live .dash-recent__clubs::after {
    content: "LIVE";
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.stats-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 12%, white);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
}

.dash-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.8fr);
    gap: 0.95rem;
}

.dash-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dash-svg__grid {
    stroke: color-mix(in srgb, var(--ink) 8%, transparent);
    stroke-width: 1;
}

.dash-svg__axis {
    stroke: color-mix(in srgb, var(--ink) 16%, transparent);
    stroke-width: 1.25;
}

.dash-svg__label {
    fill: var(--muted);
    font-size: 11px;
    font-family: var(--font-body);
    font-weight: 700;
}

.dash-svg__area {
    fill: color-mix(in srgb, var(--accent) 28%, transparent);
}

.dash-svg__line {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-svg__line--me {
    stroke: #b6e000;
    stroke-width: 3.2;
}

.dash-svg__line--player {
    stroke-width: 1.75;
    opacity: 0.88;
}

.dash-svg__dot {
    fill: var(--ink);
    stroke: var(--accent);
    stroke-width: 3;
}

.dash-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin: 0.7rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.dash-legend--stack {
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
}

.dash-legend li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

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

.dash-legend__swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    display: inline-block;
}

.dash-legend__swatch--me { background: var(--accent); }
.dash-legend__swatch--rival { background: var(--ink); }
.dash-legend__swatch--field { background: var(--muted); }

.dash-donut-wrap {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
}

.dash-donut {
    width: 100%;
    height: auto;
}

.dash-donut__track {
    stroke: var(--surface-2);
    stroke-width: 22;
}

.dash-donut__seg {
    stroke-width: 22;
    stroke-linecap: butt;
}

.dash-donut__seg--exact { stroke: var(--accent); }
.dash-donut__seg--out { stroke: var(--ink); }
.dash-donut__seg--miss { stroke: color-mix(in srgb, var(--muted) 45%, var(--surface-2)); }

.dash-donut__value {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    fill: var(--ink);
}

.dash-donut__caption {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--muted);
}

.dash-form {
    display: grid;
    grid-template-columns: repeat(var(--cols, 16), minmax(0, 1fr));
    gap: 0.28rem;
    height: 9.5rem;
    align-items: stretch;
}

.dash-form__col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    height: 100%;
}

.dash-form__val {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--muted);
    line-height: 1;
}

.dash-form__bar {
    width: 100%;
    border-radius: 0.45rem 0.45rem 0.2rem 0.2rem;
    min-height: 4px;
}

.dash-form__bar--exact { background: var(--accent); }
.dash-form__bar--out { background: var(--ink); }
.dash-form__bar--miss { background: var(--surface-2); }

@media (max-width: 960px) {
    .dash-hero { grid-template-columns: 1fr; }
    .dash-rank { justify-self: start; }
    .dash-kpis, .dash-grid, .dash-charts { grid-template-columns: 1fr 1fr; }
    .dash-panel--span { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .dash-kpis, .dash-grid, .dash-charts { grid-template-columns: 1fr; }
    .dash-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
    .dash-donut { max-width: 10rem; }
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    margin-right: 0.35rem;
}

.lang-switch__btn {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    padding: 0.32rem 0.42rem;
    border-radius: 0.45rem;
}

.lang-switch__btn:hover,
.lang-switch__btn.is-on {
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 40%, transparent);
}

.shell--home .lang-switch__btn {
    color: color-mix(in srgb, #fff 70%, transparent);
}

.shell--home .lang-switch__btn:hover,
.shell--home .lang-switch__btn.is-on {
    color: var(--on-accent);
    background: var(--accent);
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-right: 0.55rem;
}

.theme-switch__dot {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}

.theme-switch__dot--lime { background: #d6ff1a; }
.theme-switch__dot--black { background: #0a0b09; border-color: color-mix(in srgb, #fff 35%, transparent); }
.theme-switch__dot--system {
    background:
        linear-gradient(135deg, #d6ff1a 50%, #0a0b09 50%);
}

.theme-switch__dot.is-on {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.shell--home .theme-switch__dot.is-on {
    outline-color: #fff;
}

html.theme-black .table,
html.theme-black .form-control,
html.theme-black .form-select {
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    background-color: var(--paper);
    color: var(--ink);
    border-color: var(--line);
}

html.theme-black .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: color-mix(in srgb, var(--ink) 6%, transparent);
    --bs-table-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-color: var(--ink);
}

html.theme-black .stats-row--top1,
html.theme-black .stats-table tbody tr.is-me,
html.theme-black .table tbody tr.is-me {
    background: color-mix(in srgb, var(--accent) 28%, var(--paper)) !important;
}

html.theme-black .stats-table tbody tr.is-me > *,
html.theme-black .table tbody tr.is-me > * {
    --bs-table-bg-type: color-mix(in srgb, var(--accent) 28%, var(--paper));
    background-color: color-mix(in srgb, var(--accent) 28%, var(--paper)) !important;
    color: var(--ink);
}

html.theme-black .panel,
html.theme-black .dash-panel,
html.theme-black .stats-section {
    background: color-mix(in srgb, var(--paper) 92%, transparent);
}

@media (prefers-color-scheme: dark) {
    html.theme-system .table,
    html.theme-system .form-control,
    html.theme-system .form-select {
        --bs-body-bg: var(--paper);
        --bs-body-color: var(--ink);
        --bs-border-color: var(--line);
        background-color: var(--paper);
        color: var(--ink);
        border-color: var(--line);
    }

    html.theme-system .table {
        --bs-table-bg: transparent;
        --bs-table-striped-bg: color-mix(in srgb, var(--ink) 6%, transparent);
        --bs-table-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent);
        --bs-table-color: var(--ink);
        --bs-table-border-color: var(--line);
        --bs-table-striped-color: var(--ink);
    }

    html.theme-system .stats-row--top1,
    html.theme-system .stats-table tbody tr.is-me,
    html.theme-system .table tbody tr.is-me {
        background: color-mix(in srgb, var(--accent) 28%, var(--paper)) !important;
    }

    html.theme-system .stats-table tbody tr.is-me > *,
    html.theme-system .table tbody tr.is-me > * {
        --bs-table-bg-type: color-mix(in srgb, var(--accent) 28%, var(--paper));
        background-color: color-mix(in srgb, var(--accent) 28%, var(--paper)) !important;
        color: var(--ink);
    }
}

.owner-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.22rem;
    height: 7.5rem;
    padding: 0.4rem 0 0;
}

.owner-bar {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.2rem;
}

.owner-bar__fill {
    width: 100%;
    min-height: 2px;
    border-radius: 0.2rem 0.2rem 0 0;
    background: color-mix(in srgb, var(--accent) 70%, var(--ink));
}

.owner-bar span {
    font-size: 0.58rem;
    color: var(--muted);
    line-height: 1;
}

.owner-ai-modes {
    display: grid;
    gap: 0.55rem;
}

.owner-ai-mode,
.owner-ai-user {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    cursor: pointer;
}

.owner-ai-mode input,
.owner-ai-user input {
    margin-top: 0.2rem;
}

.owner-ai-mode span,
.owner-ai-user span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.owner-ai-mode em,
.owner-ai-user em {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--muted);
}

.owner-ai-users {
    display: grid;
    gap: 0.4rem;
    max-height: 22rem;
    overflow: auto;
    padding-right: 0.15rem;
}

.owner-ai-user.is-owner {
    background: color-mix(in srgb, var(--accent) 18%, var(--paper));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    cursor: default;
}

/* —— Responsive web design —— */
img, video {
    max-width: 100%;
    height: auto;
}

.crest {
    max-width: none;
}

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
}

.table-scroll,
.winnings-scroll {
    max-width: 100%;
}

.panel {
    min-width: 0;
}

@media (max-width: 1100px) {
    .predictions-layout--with-table .predictions-layout__main {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.25rem;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .panel {
        padding: 1rem 0.95rem;
    }

    .dash-fix__teams > span {
        white-space: normal;
    }

    .hero__stage {
        padding-top: 7rem;
        padding-bottom: 4.5rem;
    }
}

@media (max-width: 720px) {
    .calendar-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.55rem 0.65rem;
        padding: 0.8rem;
    }

    .calendar-bar .form-label {
        margin: 0;
        white-space: nowrap;
    }

    .calendar-bar .form-control,
    .calendar-bar .form-select,
    .calendar-bar .btn {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .calendar-bar .small,
    .calendar-bar > span,
    .calendar-bar__count {
        grid-column: 1 / -1;
    }

    .calendar-bar > .btn {
        width: auto;
        min-width: 0;
    }

    .calendar-bar.admin-matches-bar {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }

    .calendar-bar.admin-matches-bar .form-control,
    .calendar-bar.admin-matches-bar .form-select,
    .calendar-bar.admin-matches-bar .btn {
        width: auto;
        max-width: 100%;
    }

    .col-auto {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .col-auto .form-select,
    .col-auto .form-control {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
    }

    .season-pick-table .form-select-sm {
        min-width: 0;
        width: 100%;
    }

    .panel:has(.season-pick-table),
    .panel:has(.match-list) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .list-group-item.d-flex {
        flex-wrap: wrap;
        gap: 0.65rem;
        align-items: flex-start !important;
    }

    .list-group-item .btn {
        margin-left: auto;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control {
        width: 100%;
        flex: 1 1 100%;
        border-radius: 0.75rem !important;
    }

    .input-group > .btn {
        width: 100%;
        margin-top: 0.45rem;
        border-radius: 0.75rem !important;
    }

    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .hero__actions,
    .dash-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero__btn,
    .dash-btn-ghost {
        width: 100%;
    }

    .dash-rank {
        width: 100%;
        min-width: 0;
    }

    .dash-fix {
        grid-template-columns: 3.1rem minmax(0, 1fr);
        gap: 0.45rem 0.65rem;
    }

    .dash-fix .dash-pill {
        grid-column: 2;
        justify-self: start;
    }

    .form-floating > .form-control,
    .form-floating > .form-select {
        font-size: 16px;
    }

    .predictions-layout__main .table-scroll {
        overflow: visible;
    }

    .predictions-layout__main .match-list,
    .predictions-layout__main .match-list tbody {
        display: block;
        width: 100%;
    }

    .predictions-layout__main .match-list thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .page-lede {
        display: none;
    }

    .predictions-layout__main .match-list tbody tr.match-list__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.55rem;
        width: 100%;
        margin: 0 0 0.75rem;
        padding: 0.85rem 0.9rem 0.95rem;
        border: 1px solid var(--line);
        border-radius: 1rem;
        background: var(--paper);
        box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 7%, transparent);
        box-sizing: border-box;
    }

    .predictions-layout__main .match-list tbody tr.match-list__row:has(+ .match-list__others) {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .predictions-layout__main .match-list tbody tr.match-list__others {
        display: block;
        width: 100%;
        margin: 0 0 0.75rem;
        padding: 0.75rem 0.9rem 0.95rem;
        border: 1px solid var(--line);
        border-top: none;
        border-radius: 0 0 1rem 1rem;
        background: color-mix(in srgb, var(--ink) 4%, var(--paper));
        box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 7%, transparent);
        box-sizing: border-box;
    }

    .predictions-layout__main .match-list tbody tr.match-list__others td {
        display: block;
        width: 100%;
        padding: 0;
        background: transparent !important;
    }

    .predictions-layout__main .match-list tbody tr.match-list__others td::before {
        display: none;
    }

    .predictions-layout__main .match-list tbody tr.table-secondary {
        --bs-table-bg: transparent;
        background: color-mix(in srgb, var(--ink) 5%, var(--paper));
    }

    .predictions-layout__main .match-list td,
    .predictions-layout__main .match-list .match-cell {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        width: auto;
        max-width: 100%;
        padding: 0;
        border: none;
        white-space: normal;
        background: transparent !important;
        line-height: 1.25;
        font-size: 0.92rem;
    }

    .predictions-layout__main .match-list td::before {
        content: attr(data-label);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted);
        line-height: 1;
    }

    .predictions-layout__main .match-cell--date::before,
    .predictions-layout__main .match-cell--time::before,
    .predictions-layout__main .match-cell--status::before,
    .predictions-layout__main .match-cell--country::before,
    .predictions-layout__main .match-cell--league::before,
    .predictions-layout__main .match-cell--fixture::before {
        display: none;
    }

    .predictions-layout__main .match-cell--date {
        order: 1;
        font-size: 1rem;
    }

    .predictions-layout__main .match-cell--time {
        order: 2;
        color: var(--muted);
        font-size: 0.95rem;
    }

    .predictions-layout__main .match-cell--status {
        order: 3;
        margin-left: auto;
    }

    .predictions-layout__main .match-cell--country,
    .predictions-layout__main .match-cell--league {
        order: 4;
        flex: 1 1 calc(50% - 0.4rem);
        min-width: 0;
        font-size: 0.82rem;
        color: var(--muted);
    }

    .predictions-layout__main .match-cell--country .country-with-flag,
    .predictions-layout__main .match-cell--league .league-with-logo {
        justify-content: flex-start;
        min-width: 0;
        max-width: 100%;
    }

    .predictions-layout__main .match-cell--league .league-with-logo > span:not(.crest) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .predictions-layout__main .match-cell--fixture {
        order: 5;
        flex: 1 1 100%;
        min-width: 0;
        display: block;
        padding: 0.45rem 0 0.15rem;
        font-size: 0.98rem;
        font-weight: 700;
    }

    .predictions-layout__main .fx {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 28px 2.7rem 28px minmax(0, 1fr);
        column-gap: 0.35rem;
        font-size: 0.95rem;
    }

    .predictions-layout__main .fx__label {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .predictions-layout__main .match-cell--tip,
    .predictions-layout__main .match-cell--ai,
    .predictions-layout__main .match-cell--bonus,
    .predictions-layout__main .match-cell--others {
        order: 6;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.28rem;
        text-align: center;
        margin-top: 0;
        padding-top: 0.15rem;
        border-top: none;
    }

    .predictions-layout__main .match-cell--tip {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 0.7rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--line);
    }

    .predictions-layout__main .match-cell--ai { flex: 1 1 30%; }
    .predictions-layout__main .match-cell--bonus { flex: 1 1 30%; }
    .predictions-layout__main .match-cell--others {
        flex: 1 1 30%;
        font-size: 0.78rem;
        color: var(--muted);
    }

    .predictions-layout__main .match-list .status-pill {
        font-size: 0.68rem;
        padding: 0.28rem 0.55rem;
        border-radius: 0.45rem;
    }

    .predictions-layout__main .match-list .crest,
    .predictions-layout__main .match-list .crest--sm,
    .predictions-layout__main .match-list .crest--md {
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
    }

    .predictions-layout__main .match-list .score-input {
        width: 3rem;
        min-width: 3rem;
        max-width: 3rem;
        height: 2.7rem;
        font-size: 1.15rem;
        border-radius: 0.6rem;
    }

    .predictions-layout__main .match-list__score {
        gap: 0.35rem;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .predictions-layout__main .ai-score {
        min-width: 3.2rem;
        min-height: 2.5rem;
        padding: 0.4rem 0.55rem;
        font-size: 1rem;
        border-radius: 0.55rem;
    }

    .predictions-layout__main .match-cell--bonus input[type="checkbox"] {
        width: 1.35rem;
        height: 1.35rem;
        accent-color: var(--ink);
    }

    .predictions-layout__main .match-list .btn-link {
        min-height: 2.4rem;
        padding: 0.35rem 0.15rem;
        font-size: 0.88rem;
    }

    .predictions-layout__main .match-list__row:hover td {
        background: transparent !important;
    }

    .predictions-layout__main > .btn-success {
        position: sticky;
        bottom: calc(0.65rem + env(safe-area-inset-bottom));
        z-index: 6;
        width: 100%;
        min-height: 3rem;
        font-size: 1.05rem;
        box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 16%, transparent);
    }

    .player-pick-list__btn {
        min-width: 0;
        flex: 1 1 calc(50% - 0.5rem);
    }

    .winnings-table {
        min-width: 36rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: clamp(1.55rem, 8vw, 2rem);
        margin-bottom: 0.85rem;
    }

    .hero__brand {
        font-size: clamp(3.2rem, 22vw, 4.4rem);
    }

    .hero__lead {
        font-size: 0.98rem;
    }

    .mini-league-table {
        padding: 0.55rem 0.4rem 0.4rem;
    }
}

.mini-admin-perms td {
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
    padding-top: 0.45rem !important;
    padding-bottom: 0.7rem !important;
}

.mini-admin-perms__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.mini-admin-perms__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.mini-admin-perms__grid .form-check {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

body.has-cookie-banner {
    padding-bottom: 8.5rem;
}

.cookie-banner {
    position: fixed;
    left: 0.7rem;
    right: 0.7rem;
    bottom: calc(0.7rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1.1rem;
    max-width: 52rem;
    margin: 0 auto;
    padding: 0.95rem 1.05rem;
    border-radius: 1.1rem;
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.cookie-banner__copy {
    flex: 1 1 16rem;
    min-width: 0;
}

.cookie-banner__title {
    margin: 0 0 0.2rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--muted);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.cookie-banner__btn {
    min-height: 2.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    border-radius: 0.7rem;
    text-decoration: none;
}

.cookie-banner__btn--ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
}

.cookie-banner__btn--ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
}

@media (max-width: 640px) {
    .cookie-banner {
        left: 0.45rem;
        right: 0.45rem;
        bottom: calc(0.45rem + env(safe-area-inset-bottom));
        padding: 0.85rem 0.9rem;
    }

    .cookie-banner__actions {
        width: 100%;
    }

    .cookie-banner__btn {
        flex: 1 1 calc(50% - 0.25rem);
        text-align: center;
    }
}